JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: use billing pinia module instead of vuex module

Browse Source 
Use new billing pinia module instead of old payments vuex module

Change-Id: I03ee443345259ca96414bfb0771ace751ad36e58
This commit is contained in:
Vitalii 2023-04-10 16:56:31 +03:00 committed by Vitalii Shpital
parent e25da61b11
commit 64c798e912
27 changed files with 140 additions and 435 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/satellite/src/components/account/billing/BillingArea.vue
View File

@ -43,16 +43,17 @@
import { computed, onMounted, reactive } from 'vue';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { NavigationLink } from '@/types/navigation';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
const notify = useNotify();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -140,7 +141,7 @@ function routeToCoupons(): void {
*/
onMounted(async (): Promise<void> => {
try {
await store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await billingStore.getBalance();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_AREA);
}

7
web/satellite/src/components/account/billing/billingTabs/BillingHistory.vue
View File

@ -30,9 +30,9 @@ import {
PaymentsHistoryItemStatus,
PaymentsHistoryItemType,
} from '@/types/payments';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import BillingHistoryHeader
from '@/components/account/billing/billingTabs/BillingHistoryHeader.vue';
@ -40,19 +40,20 @@ import BillingHistoryItem
from '@/components/account/billing/billingTabs/BillingHistoryItem.vue';
import VTable from '@/components/common/VTable.vue';
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
async function fetchHistory(): Promise<void> {
try {
await store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
await billingStore.getPaymentsHistory();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_HISTORY_TAB);
}
}
const historyItems = computed((): PaymentsHistoryItem[] => {
return store.state.paymentsModule.paymentsHistory.filter((item: PaymentsHistoryItem) => {
return billingStore.state.paymentsHistory.filter((item: PaymentsHistoryItem) => {
return item.status !== PaymentsHistoryItemStatus.Draft && item.status !== PaymentsHistoryItemStatus.Empty
&& (item.type === PaymentsHistoryItemType.Invoice || item.type === PaymentsHistoryItemType.Charge);
});

7
web/satellite/src/components/account/billing/billingTabs/Coupons.vue
View File

@ -31,7 +31,6 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { Coupon, CouponDuration } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
@ -39,6 +38,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { useNotify, useStore } from '@/utils/hooks';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useBillingStore } from '@/store/modules/billingStore';
import VLoader from '@/components/common/VLoader.vue';
@ -47,6 +47,7 @@ import CloudIcon from '@/../static/images/onboardingTour/cloudIcon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
@ -56,7 +57,7 @@ const isCouponFetching = ref<boolean>(true);
* Returns the coupon applied to the user's account.
*/
const coupon = computed((): Coupon | null => {
return store.state.paymentsModule.coupon;
return billingStore.state.coupon;
});
/**
@ -119,7 +120,7 @@ function toggleCreateModal(): void {
*/
onMounted(async () => {
try {
await store.dispatch(PAYMENTS_ACTIONS.GET_COUPON);
await billingStore.getCoupon();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_COUPONS_TAB);
}

7
web/satellite/src/components/account/billing/billingTabs/CreditCardContainer.vue
View File

@ -32,11 +32,11 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { CreditCard } from '@/types/payments';
import { useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import AmericanExpressIcon from '@/../static/images/payments/cardIcons/americanexpress.svg';
import DefaultIcon from '@/../static/images/payments/cardIcons/default.svg';
@ -63,6 +63,7 @@ const props = withDefaults(defineProps<{
creditCard: () => new CreditCard(),
});
const billingStore = useBillingStore();
const store = useStore();
const emit = defineEmits(['edit', 'remove']);
@ -83,7 +84,7 @@ function remove(): void {
* Toggle card selection dialog.
*/
function toggleSelection(): void {
store.dispatch(PAYMENTS_ACTIONS.TOGGLE_CARD_SELECTION, props.creditCard.id);
billingStore.toggleCardSelection(props.creditCard.id);
}
</script>

13
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

@ -94,11 +94,11 @@ import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { AccountBalance } from '@/types/payments';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue';
import VButton from '@/components/common/VButton.vue';
@ -109,6 +109,7 @@ import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -121,7 +122,7 @@ const currentDate = ref<string>('');
* Returns account balance from store.
*/
const balance = computed((): AccountBalance => {
return store.state.paymentsModule.balance;
return billingStore.state.balance;
});
/**
@ -136,7 +137,7 @@ const hasZeroCoins = computed((): boolean => {
*/
const projectIDs = computed((): string[] => {
return store.state.projectsModule.projects
.filter(proj => store.state.paymentsModule.projectCharges.hasProject(proj.id))
.filter(proj => billingStore.state.projectCharges.hasProject(proj.id))
.sort((proj1, proj2) => proj1.name.localeCompare(proj2.name))
.map(proj => proj.id);
});
@ -145,7 +146,7 @@ const projectIDs = computed((): string[] => {
* priceSummary returns price summary of usages for all the projects.
*/
const priceSummary = computed((): number => {
return store.state.paymentsModule.projectCharges.getPrice();
return billingStore.state.projectCharges.getPrice();
});
function routeToBillingHistory(): void {
@ -179,8 +180,8 @@ onMounted(async () => {
}
try {
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_PRICE_MODEL);
await billingStore.getProjectUsageAndChargesCurrentRollup();
await billingStore.getProjectUsagePriceModel();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_OVERVIEW_TAB);
}

35
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -185,13 +185,13 @@ import {
Wallet,
NativePaymentHistoryItem,
} from '@/types/payments';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { RouteConfig } from '@/router';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -223,14 +223,7 @@ interface CardEdited {
isDefault?: boolean
}
const {
ADD_CREDIT_CARD,
GET_CREDIT_CARDS,
REMOVE_CARD,
MAKE_CARD_DEFAULT,
GET_NATIVE_PAYMENTS_HISTORY,
} = PAYMENTS_ACTIONS;
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -265,11 +258,14 @@ const pageCount = computed((): number => {
* Returns deposit history items.
*/
const nativePaymentHistoryItems = computed((): NativePaymentHistoryItem[] => {
return store.state.paymentsModule.nativePaymentsHistory;
return billingStore.state.nativePaymentsHistory;
});
/**
* Returns wallet entity from store.
*/
const wallet = computed((): Wallet => {
return store.state.paymentsModule.wallet;
return billingStore.state.wallet;
});
/**
@ -280,7 +276,7 @@ const userHasOwnProject = computed((): boolean => {
});
const creditCards = computed((): CreditCard[] => {
return store.state.paymentsModule.creditCards;
return billingStore.state.creditCards;
});
function onCopyAddressClick(): void {
@ -292,7 +288,7 @@ async function fetchHistory(): Promise<void> {
nativePayIsLoading.value = true;
try {
await store.dispatch(GET_NATIVE_PAYMENTS_HISTORY);
await billingStore.getNativePaymentsHistory();
transactionCount.value = nativePaymentHistoryItems.value.length;
displayedHistory.value = nativePaymentHistoryItems.value.slice(0, PAGE_SIZE);
} catch (error) {
@ -324,7 +320,7 @@ async function prepQRCode(): Promise<void> {
async function updatePaymentMethod(): Promise<void> {
try {
await store.dispatch(MAKE_CARD_DEFAULT, defaultCreditCardSelection.value);
await billingStore.makeCardDefault(defaultCreditCardSelection.value);
await notify.success('Default payment card updated');
isChangeDefaultPaymentModalOpen.value = false;
} catch (error) {
@ -334,8 +330,12 @@ async function updatePaymentMethod(): Promise<void> {
async function removePaymentMethod(): Promise<void> {
if (!cardBeingEdited.value.isDefault) {
if (!cardBeingEdited.value.id) {
return;
}
try {
await store.dispatch(REMOVE_CARD, cardBeingEdited.value.id);
await billingStore.removeCreditCard(cardBeingEdited.value.id);
analytics.eventTriggered(AnalyticsEvent.CREDIT_CARD_REMOVED);
await notify.success('Credit card removed');
} catch (error) {
@ -360,8 +360,7 @@ function closeAddPayment(): void {
async function addCard(token: string): Promise<void> {
emit('toggleIsLoading');
try {
await store.dispatch(ADD_CREDIT_CARD, token);
await billingStore.addCreditCard(token);
// We fetch User one more time to update their Paid Tier status.
await usersStore.getUser();
} catch (error) {
@ -374,7 +373,7 @@ async function addCard(token: string): Promise<void> {
await notify.success('Card successfully added');
try {
await store.dispatch(GET_CREDIT_CARDS);
await billingStore.getCreditCards();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_PAYMENT_METHODS_TAB);
emit('toggleIsLoading');

8
web/satellite/src/components/account/billing/billingTabs/UsageAndChargesItem.vue
View File

@ -65,6 +65,7 @@ import { Size } from '@/utils/bytesSize';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_GB_SHIFT } from '@/utils/strings';
import { useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import GreyChevron from '@/../static/images/common/greyChevron.svg';
@ -82,6 +83,7 @@ const props = withDefaults(defineProps<{
projectId: '',
});
const billingStore = useBillingStore();
const store = useStore();
/**
@ -93,7 +95,7 @@ const isDetailedInfoShown = ref<boolean>(false);
* An array of tuples containing the partner name and usage charge for the specified project ID.
*/
const partnerCharges = computed((): [partner: string, charge: ProjectCharge][] => {
const arr = store.state.paymentsModule.projectCharges.toArray();
const arr = billingStore.state.projectCharges.toArray();
arr.sort(([partner1], [partner2]) => partner1.localeCompare(partner2));
const tuple = arr.find(tuple => tuple[0] === props.projectId);
return tuple ? tuple[1] : [];
@ -113,14 +115,14 @@ const projectName = computed((): string => {
* Returns project usage price model from store.
*/
const projectCharges = computed((): ProjectCharges => {
return store.state.paymentsModule.projectCharges;
return billingStore.state.projectCharges;
});
/**
* Returns project usage price model from store.
*/
function getPriceModel(partner: string): ProjectUsagePriceModel {
return projectCharges.value.getUsagePriceModel(partner) || store.state.paymentsModule.usagePriceModel;
return projectCharges.value.getUsagePriceModel(partner) || billingStore.state.usagePriceModel;
}
/**

9
web/satellite/src/components/account/billing/paymentMethods/AddTokenCardNative.vue
View File

@ -96,10 +96,10 @@ import { computed, onMounted, ref } from 'vue';
import { Wallet } from '@/types/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -109,6 +109,7 @@ import InfoIcon from '@/../static/images/billing/blueInfoIcon.svg';
import StorjSmall from '@/../static/images/billing/storj-icon-small.svg';
import StorjLarge from '@/../static/images/billing/storj-icon-large.svg';
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -121,7 +122,7 @@ const isLoading = ref<boolean>(false);
* Returns wallet from store.
*/
const wallet = computed((): Wallet => {
return store.state.paymentsModule.wallet;
return billingStore.state.wallet;
});
/**
@ -133,7 +134,7 @@ async function getWallet(): Promise<void> {
}
isLoading.value = true;
await store.dispatch(PAYMENTS_ACTIONS.GET_WALLET).catch(_ => {});
await billingStore.getWallet().catch(_ => {});
isLoading.value = false;
}
@ -142,7 +143,7 @@ async function getWallet(): Promise<void> {
*/
async function claimWallet(): Promise<void> {
if (!wallet.value.address) {
await store.dispatch(PAYMENTS_ACTIONS.CLAIM_WALLET);
await billingStore.claimWallet();
}
}

16
web/satellite/src/components/common/AddCouponCodeInput.vue
View File

@ -64,13 +64,13 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed, reactive, ref } from 'vue';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useRoute, useStore } from '@/utils/hooks';
import { useRouter, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue';
@ -78,8 +78,10 @@ import VButton from '@/components/common/VButton.vue';
import CheckIcon from '@/../static/images/common/validCheck.svg';
const route = useRoute();
const billingStore = useBillingStore();
const store = useStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const showValidationMessage = ref<boolean>(false);
const isCodeValid = ref<boolean>(false);
@ -93,7 +95,7 @@ const analytics = new AnalyticsHttpApi();
* Signup view requires some unique styling and element text.
*/
const isSignupView = computed((): boolean => {
return route.name === RouteConfig.Register.name;
return router.currentRoute.name === RouteConfig.Register.name;
});
/**
@ -123,7 +125,7 @@ function toggleConfirmMessage(): void {
*/
async function applyCouponCode(): Promise<void> {
try {
await store.dispatch(PAYMENTS_ACTIONS.APPLY_COUPON_CODE, couponCode.value);
await billingStore.applyCouponCode(couponCode.value);
} catch (error) {
errorMessage.value = error.message;
isCodeValid.value = false;
@ -143,7 +145,7 @@ async function applyCouponCode(): Promise<void> {
* Check if user has a coupon code applied to their account before applying
*/
async function couponCheck(): Promise<void> {
if (store.state.paymentsModule.coupon) {
if (billingStore.state.coupon) {
toggleConfirmMessage();
return;
}

5
web/satellite/src/components/common/NewBillingAddCouponCodeInput.vue
View File

@ -31,16 +31,17 @@
<script setup lang="ts">
import { ref } from 'vue';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useLoading } from '@/composables/useLoading';
import { useBillingStore } from '@/store/modules/billingStore';
import VInput from '@/components/common/VInput.vue';
import ValidationMessage from '@/components/common/ValidationMessage.vue';
import VButton from '@/components/common/VButton.vue';
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
const { isLoading, withLoading } = useLoading();
@ -64,7 +65,7 @@ function setCouponCode(value: string): void {
async function applyCouponCode(): Promise<void> {
await withLoading(async () => {
try {
await store.dispatch(PAYMENTS_ACTIONS.APPLY_COUPON_CODE, couponCode.value);
await billingStore.applyCouponCode(couponCode.value);
await notify.success('Coupon Added!');
emit('close');
} catch (error) {

20
web/satellite/src/components/modals/AddPaymentMethodModal.vue
View File

@ -128,11 +128,10 @@
</template>
<script setup lang="ts">
import { computed, onMounted, onBeforeMount, ref } from 'vue';
import { computed, onMounted, onBeforeMount, ref, reactive } from 'vue';
import { useNotify, useRoute, useStore } from '@/utils/hooks';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -142,6 +141,7 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { ProjectUsagePriceModel } from '@/types/payments';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_TB_SHIFT } from '@/utils/strings';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -156,10 +156,12 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const route = useRoute();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -178,7 +180,7 @@ const extraBandwidthPriceInfo = ref<string>('');
*/
onMounted(async () => {
try {
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_PRICE_MODEL);
await billingStore.getProjectUsagePriceModel();
isPriceFetching.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.UPGRADE_ACCOUNT_MODAL);
@ -208,14 +210,12 @@ async function onAddCardClick(): Promise<void> {
*/
async function addCardToDB(token: string): Promise<void> {
try {
await store.dispatch(PAYMENTS_ACTIONS.ADD_CREDIT_CARD, token);
await billingStore.addCreditCard(token);
await notify.success('Card successfully added');
// We fetch User one more time to update their Paid Tier status.
await usersStore.getUser();
if (route.name === RouteConfig.ProjectDashboard.name) {
if (router.currentRoute.name === RouteConfig.ProjectDashboard.name) {
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
}
@ -261,7 +261,7 @@ const limitsIncreaseRequestURL = computed((): string => {
* Returns project usage price model from store.
*/
const priceModel = computed((): ProjectUsagePriceModel => {
return store.state.paymentsModule.usagePriceModel;
return billingStore.state.usagePriceModel;
});
/**

4
web/satellite/src/components/modals/AddTokenFundsModal.vue
View File

@ -80,6 +80,7 @@ import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames
import { MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -87,6 +88,7 @@ import VInfo from '@/components/common/VInfo.vue';
import InfoIcon from '@/../static/images/payments/infoIcon.svg';
const billingStore = useBillingStore();
const store = useStore();
const notify = useNotify();
@ -96,7 +98,7 @@ const canvas = ref<HTMLCanvasElement>();
* Returns wallet from store.
*/
const wallet = computed((): Wallet => {
return store.state.paymentsModule.wallet;
return billingStore.state.wallet;
});
/**

11
web/satellite/src/components/modals/PricingPlanModal.vue
View File

@ -82,10 +82,10 @@ import { computed, ref, watch } from 'vue';
import { RouteConfig } from '@/router';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PricingPlanInfo, PricingPlanType } from '@/types/common';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import VButton from '@/components/common/VButton.vue';
@ -99,6 +99,7 @@ interface StripeForm {
onSubmit(): Promise<void>;
}
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter();
@ -165,19 +166,19 @@ function onActivateClick(): void {
async function onCardAdded(token: string): Promise<void> {
if (!plan.value) return;
let action = PAYMENTS_ACTIONS.ADD_CREDIT_CARD;
let action = billingStore.addCreditCard;
if (plan.value.type === PricingPlanType.PARTNER) {
action = PAYMENTS_ACTIONS.PURCHASE_PACKAGE;
action = billingStore.purchasePricingPackage;
}
try {
await store.dispatch(action, token);
await action(token);
isSuccess.value = true;
// Fetch user to update paid tier status
await usersStore.getUser();
// Fetch cards to hide paid tier banner
await store.dispatch(PAYMENTS_ACTIONS.GET_CREDIT_CARDS);
await billingStore.getCreditCards();
} catch (error) {
await notify.error(error.message, null);
}

6
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -60,13 +60,13 @@ import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -81,6 +81,8 @@ import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const store = useStore();
const router = useRouter();
const notify = useNotify();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const pmStore = useProjectMembersStore();
@ -158,7 +160,7 @@ async function onLogout(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

7
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -167,7 +167,6 @@ import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
@ -182,6 +181,7 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -220,6 +220,7 @@ const navigation: NavigationLink[] = [
];
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const store = useStore();
@ -386,7 +387,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
try {
await Promise.all([
store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP),
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),
@ -472,7 +473,7 @@ async function onLogout(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

5
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -67,7 +67,6 @@ import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { Project } from '@/types/projects';
@ -78,6 +77,7 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import VLoader from '@/components/common/VLoader.vue';
@ -89,6 +89,7 @@ import ManageIcon from '@/../static/images/navigation/manage.svg';
import CreateProjectIcon from '@/../static/images/navigation/createProject.svg';
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const userStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -217,7 +218,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
try {
await Promise.all([
store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now }),
store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP),
billingStore.getProjectUsageAndChargesCurrentRollup(),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),
]);

7
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -156,7 +156,6 @@
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { RouteConfig } from '@/router';
@ -171,6 +170,7 @@ import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -187,6 +187,7 @@ import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
import NewProjectIcon from '@/../static/images/project/newProject.svg';
import InfoIcon from '@/../static/images/project/infoIcon.svg';
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -234,7 +235,7 @@ const isProAccount = computed((): boolean => {
*/
const estimatedCharges = computed((): number => {
const projID: string = store.getters.selectedProject.id;
const charges: ProjectCharges = store.state.paymentsModule.projectCharges;
const charges: ProjectCharges = billingStore.state.projectCharges;
return charges.getProjectPrice(projID);
});
@ -421,7 +422,7 @@ onMounted(async (): Promise<void> => {
}
await store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now });
await store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await billingStore.getProjectUsageAndChargesCurrentRollup();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
} finally {

5
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -51,7 +51,6 @@ import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsPage } from '@/types/projects';
import { LocalData } from '@/utils/localData';
@ -63,6 +62,7 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
@ -77,6 +77,7 @@ const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
@ -139,7 +140,7 @@ async function onProjectSelected(project: Project): Promise<void> {
try {
await Promise.all([
store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP),
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id),
store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, FIRST_PAGE),
store.dispatch(BUCKET_ACTIONS.FETCH, FIRST_PAGE),

6
web/satellite/src/store/index.ts
View File

@ -6,9 +6,7 @@ import Vuex from 'vuex';
import { RouteRecord } from 'vue-router';
import { AccessGrantsApiGql } from '@/api/accessGrants';
import { AuthHttpApi } from '@/api/auth';
import { BucketsApiGql } from '@/api/buckets';
import { PaymentsHttpApi } from '@/api/payments';
import { ProjectMembersApiGql } from '@/api/projectMembers';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, RouteConfig, router } from '@/router';
@ -17,7 +15,6 @@ import { makeAppStateModule, AppState } from '@/store/modules/appState';
import { BucketsState, makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeObjectsModule, OBJECTS_ACTIONS, ObjectsState } from '@/store/modules/objects';
import { makePaymentsModule, PaymentsState } from '@/store/modules/payments';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
@ -30,7 +27,6 @@ Vue.use(Vuex);
const accessGrantsApi = new AccessGrantsApiGql();
const bucketsApi = new BucketsApiGql();
const projectsApi = new ProjectsApiGql();
const paymentsApi = new PaymentsHttpApi();
const configApi = new FrontendConfigHttpApi();
// We need to use a WebWorker factory because jest testing does not support
@ -45,7 +41,6 @@ export interface ModulesState {
notificationsModule: NotificationsState;
accessGrantsModule: AccessGrantsState;
appStateModule: AppState;
paymentsModule: PaymentsState;
projectsModule: ProjectsState;
objectsModule: ObjectsState;
bucketUsageModule: BucketsState;
@ -58,7 +53,6 @@ export const store = new Vuex.Store<ModulesState>({
notificationsModule: makeNotificationsModule(),
accessGrantsModule: makeAccessGrantsModule(accessGrantsApi, webWorkerFactory),
appStateModule: makeAppStateModule(configApi),
paymentsModule: makePaymentsModule(paymentsApi),
projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),

24
web/satellite/src/store/modules/billingStore.ts
View File

@ -196,6 +196,28 @@ export const useBillingStore = defineStore('billing', () => {
});
return {
billingState: state,
state,
canUserCreateFirstProject,
isTransactionProcessing,
isBalancePositive,
getBalance,
getWallet,
claimWallet,
setupAccount,
getCreditCards,
addCreditCard,
toggleCardSelection,
clearCardsSelection,
makeCardDefault,
removeCreditCard,
getPaymentsHistory,
getNativePaymentsHistory,
getProjectUsageAndChargesCurrentRollup,
getProjectUsageAndChargesPreviousRollup,
getProjectUsagePriceModel,
applyCouponCode,
getCoupon,
purchasePricingPackage,
clear,
};
});

314
web/satellite/src/store/modules/payments.ts
View File

@ -1,314 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import {
AccountBalance,
Coupon,
CreditCard,
DateRange,
PaymentsApi,
PaymentsHistoryItem,
PaymentsHistoryItemStatus,
PaymentsHistoryItemType,
ProjectCharges,
ProjectUsagePriceModel,
NativePaymentHistoryItem,
Wallet,
} from '@/types/payments';
import { StoreModule } from '@/types/store';
export const PAYMENTS_MUTATIONS = {
SET_BALANCE: 'SET_BALANCE',
SET_WALLET: 'SET_WALLET',
SET_CREDIT_CARDS: 'SET_CREDIT_CARDS',
SET_DATE: 'SET_DATE',
CLEAR: 'CLEAR_PAYMENT_INFO',
UPDATE_CARDS_SELECTION: 'UPDATE_CARDS_SELECTION',
UPDATE_CARDS_DEFAULT: 'UPDATE_CARDS_DEFAULT',
SET_PAYMENTS_HISTORY: 'SET_PAYMENTS_HISTORY',
SET_NATIVE_PAYMENTS_HISTORY: 'SET_NATIVE_PAYMENTS_HISTORY',
SET_PROJECT_USAGE_AND_CHARGES: 'SET_PROJECT_USAGE_AND_CHARGES',
SET_PROJECT_USAGE_PRICE_MODEL: 'SET_PROJECT_USAGE_PRICE_MODEL',
SET_CURRENT_ROLLUP_PRICE: 'SET_CURRENT_ROLLUP_PRICE',
SET_PREVIOUS_ROLLUP_PRICE: 'SET_PREVIOUS_ROLLUP_PRICE',
SET_COUPON: 'SET_COUPON',
};
export const PAYMENTS_ACTIONS = {
GET_BALANCE: 'getBalance',
GET_WALLET: 'getWallet',
CLAIM_WALLET: 'claimWallet',
SETUP_ACCOUNT: 'setupAccount',
GET_CREDIT_CARDS: 'getCreditCards',
ADD_CREDIT_CARD: 'addCreditCard',
CLEAR_PAYMENT_INFO: 'clearPaymentInfo',
TOGGLE_CARD_SELECTION: 'toggleCardSelection',
CLEAR_CARDS_SELECTION: 'clearCardsSelection',
MAKE_CARD_DEFAULT: 'makeCardDefault',
REMOVE_CARD: 'removeCard',
GET_PAYMENTS_HISTORY: 'getPaymentsHistory',
GET_NATIVE_PAYMENTS_HISTORY: 'getNativePaymentsHistory',
GET_PROJECT_USAGE_AND_CHARGES: 'getProjectUsageAndCharges',
GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP: 'getProjectUsageAndChargesCurrentRollup',
GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP: 'getProjectUsageAndChargesPreviousRollup',
GET_PROJECT_USAGE_PRICE_MODEL: 'getProjectUsagePriceModel',
APPLY_COUPON_CODE: 'applyCouponCode',
GET_COUPON: `getCoupon`,
PURCHASE_PACKAGE: 'purchasePackage',
};
const {
SET_BALANCE,
SET_WALLET,
SET_CREDIT_CARDS,
SET_DATE,
CLEAR,
UPDATE_CARDS_SELECTION,
UPDATE_CARDS_DEFAULT,
SET_PAYMENTS_HISTORY,
SET_NATIVE_PAYMENTS_HISTORY,
SET_PROJECT_USAGE_AND_CHARGES,
SET_PROJECT_USAGE_PRICE_MODEL: SET_PROJECT_USAGE_PRICE_MODEL,
SET_COUPON,
} = PAYMENTS_MUTATIONS;
const {
GET_BALANCE,
GET_WALLET,
CLAIM_WALLET,
SETUP_ACCOUNT,
GET_CREDIT_CARDS,
ADD_CREDIT_CARD,
TOGGLE_CARD_SELECTION,
CLEAR_CARDS_SELECTION,
CLEAR_PAYMENT_INFO,
MAKE_CARD_DEFAULT,
REMOVE_CARD,
GET_PAYMENTS_HISTORY,
GET_NATIVE_PAYMENTS_HISTORY,
GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP,
GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP,
GET_PROJECT_USAGE_PRICE_MODEL: GET_PROJECT_USAGE_PRICE_MODEL,
APPLY_COUPON_CODE,
GET_COUPON,
PURCHASE_PACKAGE,
} = PAYMENTS_ACTIONS;
export class PaymentsState {
/**
* balance stores in cents
*/
public balance: AccountBalance = new AccountBalance();
public creditCards: CreditCard[] = [];
public paymentsHistory: PaymentsHistoryItem[] = [];
public nativePaymentsHistory: NativePaymentHistoryItem[] = [];
public projectCharges: ProjectCharges = new ProjectCharges();
public usagePriceModel: ProjectUsagePriceModel = new ProjectUsagePriceModel();
public startDate: Date = new Date();
public endDate: Date = new Date();
public coupon: Coupon | null = null;
public wallet: Wallet = new Wallet();
}
interface PaymentsContext {
state: PaymentsState
commit: (string, ...unknown) => void
rootGetters: {
selectedProject: {
id: string
}
}
}
/**
* creates payments module with all dependencies
*
* @param api - payments api
*/
export function makePaymentsModule(api: PaymentsApi): StoreModule<PaymentsState, PaymentsContext> {
return {
state: new PaymentsState(),
mutations: {
[SET_BALANCE](state: PaymentsState, balance: AccountBalance): void {
state.balance = balance;
},
[SET_WALLET](state: PaymentsState, wallet: Wallet): void {
state.wallet = wallet;
},
[SET_CREDIT_CARDS](state: PaymentsState, creditCards: CreditCard[]): void {
state.creditCards = creditCards;
},
[SET_DATE](state: PaymentsState, dateRange: DateRange) {
state.startDate = dateRange.startDate;
state.endDate = dateRange.endDate;
},
[UPDATE_CARDS_SELECTION](state: PaymentsState, id: string | null): void {
state.creditCards = state.creditCards.map(card => {
if (card.id === id) {
card.isSelected = !card.isSelected;
return card;
}
card.isSelected = false;
return card;
});
},
[UPDATE_CARDS_DEFAULT](state: PaymentsState, id: string): void {
state.creditCards = state.creditCards.map(card => {
if (card.id === id) {
card.isDefault = !card.isDefault;
return card;
}
card.isDefault = false;
return card;
});
},
[SET_PAYMENTS_HISTORY](state: PaymentsState, paymentsHistory: PaymentsHistoryItem[]): void {
state.paymentsHistory = paymentsHistory;
},
[SET_NATIVE_PAYMENTS_HISTORY](state: PaymentsState, paymentsHistory: NativePaymentHistoryItem[]): void {
state.nativePaymentsHistory = paymentsHistory;
},
[SET_PROJECT_USAGE_AND_CHARGES](state: PaymentsState, projectPartnerCharges: ProjectCharges): void {
state.projectCharges = projectPartnerCharges;
},
[SET_PROJECT_USAGE_PRICE_MODEL](state: PaymentsState, model: ProjectUsagePriceModel): void {
state.usagePriceModel = model;
},
[SET_COUPON](state: PaymentsState, coupon: Coupon): void {
state.coupon = coupon;
},
[CLEAR](state: PaymentsState) {
state.balance = new AccountBalance();
state.creditCards = [];
state.paymentsHistory = [];
state.nativePaymentsHistory = [];
state.projectCharges = new ProjectCharges();
state.usagePriceModel = new ProjectUsagePriceModel();
state.startDate = new Date();
state.endDate = new Date();
state.coupon = null;
state.wallet = new Wallet();
},
},
actions: {
[GET_BALANCE]: async function({ commit }: PaymentsContext): Promise<AccountBalance> {
const balance: AccountBalance = await api.getBalance();
commit(SET_BALANCE, balance);
return balance;
},
[GET_WALLET]: async function({ commit }: PaymentsContext): Promise<void> {
const wallet: Wallet = await api.getWallet();
commit(SET_WALLET, wallet);
},
[CLAIM_WALLET]: async function({ commit }: PaymentsContext): Promise<void> {
const wallet: Wallet = await api.claimWallet();
commit(SET_WALLET, wallet);
},
[SETUP_ACCOUNT]: async function(): Promise<string> {
const couponType = await api.setupAccount();
return couponType;
},
[GET_CREDIT_CARDS]: async function({ commit }: PaymentsContext): Promise<CreditCard[]> {
const creditCards = await api.listCreditCards();
commit(SET_CREDIT_CARDS, creditCards);
return creditCards;
},
[ADD_CREDIT_CARD]: async function(_context: PaymentsContext, token: string): Promise<void> {
await api.addCreditCard(token);
},
[TOGGLE_CARD_SELECTION]: function({ commit }: PaymentsContext, id: string): void {
commit(UPDATE_CARDS_SELECTION, id);
},
[CLEAR_CARDS_SELECTION]: function({ commit }: PaymentsContext): void {
commit(UPDATE_CARDS_SELECTION, null);
},
[MAKE_CARD_DEFAULT]: async function({ commit }: PaymentsContext, id: string): Promise<void> {
await api.makeCreditCardDefault(id);
commit(UPDATE_CARDS_DEFAULT, id);
},
[REMOVE_CARD]: async function({ commit, state }: PaymentsContext, cardId: string): Promise<void> {
await api.removeCreditCard(cardId);
commit(SET_CREDIT_CARDS, state.creditCards.filter(card => card.id !== cardId));
},
[CLEAR_PAYMENT_INFO]: function({ commit }: PaymentsContext): void {
commit(CLEAR);
},
[GET_PAYMENTS_HISTORY]: async function({ commit }: PaymentsContext): Promise<void> {
const paymentsHistory = await api.paymentsHistory();
commit(SET_PAYMENTS_HISTORY, paymentsHistory);
},
[GET_NATIVE_PAYMENTS_HISTORY]: async function({ commit }: PaymentsContext): Promise<void> {
const paymentsHistory = await api.nativePaymentsHistory();
commit(SET_NATIVE_PAYMENTS_HISTORY, paymentsHistory);
},
[GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP]: async function({ commit, rootGetters }: PaymentsContext): Promise<void> {
const now = new Date();
const endUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes()));
const startUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 1, 0, 0));
const projectPartnerCharges: ProjectCharges = await api.projectsUsageAndCharges(startUTC, endUTC);
commit(SET_DATE, new DateRange(startUTC, endUTC));
commit(SET_PROJECT_USAGE_AND_CHARGES, projectPartnerCharges);
},
[GET_PROJECT_USAGE_AND_CHARGES_PREVIOUS_ROLLUP]: async function({ commit }: PaymentsContext): Promise<void> {
const now = new Date();
const startUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() - 1, 1, 0, 0));
const endUTC = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), 0, 23, 59, 59));
const projectPartnerCharges: ProjectCharges = await api.projectsUsageAndCharges(startUTC, endUTC);
commit(SET_DATE, new DateRange(startUTC, endUTC));
commit(SET_PROJECT_USAGE_AND_CHARGES, projectPartnerCharges);
},
[GET_PROJECT_USAGE_PRICE_MODEL]: async function({ commit }: PaymentsContext): Promise<void> {
const model: ProjectUsagePriceModel = await api.projectUsagePriceModel();
commit(SET_PROJECT_USAGE_PRICE_MODEL, model);
},
[APPLY_COUPON_CODE]: async function({ commit }: PaymentsContext, code: string): Promise<void> {
const coupon = await api.applyCouponCode(code);
commit(SET_COUPON, coupon);
},
[GET_COUPON]: async function({ commit }: PaymentsContext): Promise<void> {
const coupon = await api.getCoupon();
commit(SET_COUPON, coupon);
},
[PURCHASE_PACKAGE]: async function(_: PaymentsContext, token: string): Promise<void> {
await api.purchasePricingPackage(token);
},
},
getters: {
canUserCreateFirstProject: (state: PaymentsState): boolean => {
return state.balance.sum > 0 || state.creditCards.length > 0;
},
isTransactionProcessing: (state: PaymentsState): boolean => {
return state.paymentsHistory.some((paymentsItem: PaymentsHistoryItem) => {
return paymentsItem.amount >= 50 && paymentsItem.type === PaymentsHistoryItemType.Transaction
&& (paymentsItem.status === PaymentsHistoryItemStatus.Pending
|| paymentsItem.status === PaymentsHistoryItemStatus.Paid
|| paymentsItem.status === PaymentsHistoryItemStatus.Completed);
}) && state.balance.sum === 0;
},
isBalancePositive: (state: PaymentsState): boolean => {
return state.balance.sum > 0;
},
},
};
}

18
web/satellite/src/views/DashboardArea.vue
View File

@ -103,7 +103,6 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { RouteConfig } from '@/router';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { CouponType } from '@/types/coupons';
import { Project } from '@/types/projects';
@ -123,6 +122,7 @@ import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -136,19 +136,13 @@ import UpgradeNotification from '@/components/notifications/UpgradeNotification.
import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vue';
import BrandedLoader from '@/components/common/BrandedLoader.vue';
const {
SETUP_ACCOUNT,
GET_CREDIT_CARDS,
} = PAYMENTS_ACTIONS;
const billingStore = useBillingStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const store = useStore();
// TODO: will be swapped with useRouter from new version of router. remove after vue-router version upgrade.
const nativeRouter = useRouter();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const auth: AuthHttpApi = new AuthHttpApi();
@ -493,7 +487,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);
@ -614,7 +608,7 @@ onMounted(async () => {
}
try {
const couponType = await store.dispatch(SETUP_ACCOUNT);
const couponType = await billingStore.setupAccount();
if (couponType === CouponType.NoCoupon) {
await notify.error(`The coupon code was invalid, and could not be applied to your account`, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
}
@ -627,7 +621,7 @@ onMounted(async () => {
}
try {
await store.dispatch(GET_CREDIT_CARDS);
await billingStore.getCreditCards();
} catch (error) {
await notify.error(`Unable to get credit cards. ${error.message}`, AnalyticsErrorEventSource.OVERALL_APP_WRAPPER_ERROR);
}

14
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -120,7 +120,6 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { MetaUtils } from '@/utils/meta';
import { FetchState } from '@/utils/constants/fetchStateEnum';
@ -131,6 +130,7 @@ import Heading from '@/views/all-dashboard/components/Heading.vue';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -143,17 +143,13 @@ import ProjectLimitBanner from '@/components/notifications/ProjectLimitBanner.vu
import LoaderImage from '@/../static/images/common/loadIcon.svg';
const {
SETUP_ACCOUNT,
GET_CREDIT_CARDS,
} = PAYMENTS_ACTIONS;
const router = useRouter();
const store = useStore();
const notify = useNotify();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
@ -351,7 +347,7 @@ async function handleInactive(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);
@ -556,7 +552,7 @@ onMounted(async () => {
}
try {
const couponType = await store.dispatch(SETUP_ACCOUNT);
const couponType = await billingStore.setupAccount();
if (couponType === CouponType.NoCoupon) {
await notify.error(`The coupon code was invalid, and could not be applied to your account`, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
}
@ -569,7 +565,7 @@ onMounted(async () => {
}
try {
await store.dispatch(GET_CREDIT_CARDS);
await billingStore.getCreditCards();
} catch (error) {
await notify.error(`Unable to get credit cards. ${error.message}`, AnalyticsErrorEventSource.ALL_PROJECT_DASHBOARD);
}

5
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -110,11 +110,11 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { AuthHttpApi } from '@/api/auth';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import VButton from '@/components/common/VButton.vue';
@ -139,6 +139,7 @@ const notify = useNotify();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
@ -238,7 +239,7 @@ async function onLogout(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

5
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -61,7 +61,6 @@ import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { OBJECTS_ACTIONS } from '@/store/modules/objects';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import {
AnalyticsErrorEventSource,
AnalyticsEvent,
@ -72,6 +71,7 @@ import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -89,6 +89,7 @@ const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
@ -163,7 +164,7 @@ async function onLogout(): Promise<void> {
store.dispatch(BUCKET_ACTIONS.CLEAR),
store.dispatch(OBJECTS_ACTIONS.CLEAR),
store.dispatch(APP_STATE_ACTIONS.CLEAR),
store.dispatch(PAYMENTS_ACTIONS.CLEAR_PAYMENT_INFO),
billingStore.clear(),
abTestingStore.reset(),
store.dispatch('files/clear'),
]);

6
web/satellite/tests/unit/ignore/onboardingTour/OnboardingTourArea.spec.ts
View File

@ -5,9 +5,7 @@ import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { PaymentsHttpApi } from '@/api/payments';
import { router } from '@/router';
import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectsModule } from '@/store/modules/projects';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
@ -17,10 +15,8 @@ localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const paymentsApi = new PaymentsHttpApi();
const paymentsModule = makePaymentsModule(paymentsApi);
const store = new Vuex.Store({ modules: { projectsModule, paymentsModule } });
const store = new Vuex.Store({ modules: { projectsModule } });
describe('OnboardingTourArea.vue', () => {
it('renders correctly', (): void => {

4
web/satellite/tests/unit/ignore/views/DashboardArea.spec.ts
View File

@ -6,7 +6,6 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
import { AccessGrantsMock } from '../../mock/api/accessGrants';
import { BucketsMock } from '../../mock/api/buckets';
import { PaymentsMock } from '../../mock/api/payments';
import { FrontendConfigApiMock } from '../../mock/api/config';
import { RouteConfig, router } from '@/router';
@ -14,7 +13,6 @@ import { makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { makeAppStateModule } from '@/store/modules/appState';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule } from '@/store/modules/notifications';
import { makePaymentsModule } from '@/store/modules/payments';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
@ -28,7 +26,6 @@ const appStateModule = makeAppStateModule(new FrontendConfigApiMock());
const accessGrantsModule = makeAccessGrantsModule(new AccessGrantsMock());
const bucketsModule = makeBucketsModule(new BucketsMock());
const notificationsModule = makeNotificationsModule();
const paymentsModule = makePaymentsModule(new PaymentsMock());
const store = new Vuex.Store({
modules: {
@ -36,7 +33,6 @@ const store = new Vuex.Store({
bucketsModule,
accessGrantsModule,
appStateModule,
paymentsModule,
},
});