diff --git a/web/satellite/vuetify-poc/src/components/LowTokenBalanceBanner.vue b/web/satellite/vuetify-poc/src/components/LowTokenBalanceBanner.vue new file mode 100644 index 000000000000..fb32d432c1af --- /dev/null +++ b/web/satellite/vuetify-poc/src/components/LowTokenBalanceBanner.vue @@ -0,0 +1,35 @@ +// Copyright (C) 2023 Storj Labs, Inc. +// See LICENSE for copying information. + + + + + + + Your STORJ Token balance is low. Deposit more STORJ tokens or make sure you have a credit card + on file to avoid interruptions in service. + + emits('click')">{{ ctaLabel }} + + + + + + diff --git a/web/satellite/vuetify-poc/src/views/Billing.vue b/web/satellite/vuetify-poc/src/views/Billing.vue index 765f7888ab99..b317f1d5c9a9 100644 --- a/web/satellite/vuetify-poc/src/views/Billing.vue +++ b/web/satellite/vuetify-poc/src/views/Billing.vue @@ -3,6 +3,12 @@ + + @@ -228,13 +234,15 @@ import { import { useLoading } from '@/composables/useLoading'; import { useNotify } from '@/utils/hooks'; import { useBillingStore } from '@/store/modules/billingStore'; -import { Coupon, CouponDuration, CreditCard } from '@/types/payments'; +import { AccountBalance, Coupon, CouponDuration, CreditCard } from '@/types/payments'; import { centsToDollars } from '@/utils/strings'; import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames'; import { SHORT_MONTHS_NAMES } from '@/utils/constants/date'; import { useProjectsStore } from '@/store/modules/projectsStore'; import { useConfigStore } from '@/store/modules/configStore'; import { Download } from '@/utils/download'; +import { useLowTokenBalance } from '@/composables/useLowTokenBalance'; +import { Project } from '@/types/projects'; import PageTitleComponent from '@poc/components/PageTitleComponent.vue'; import CreditCardComponent from '@poc/components/CreditCardComponent.vue'; @@ -244,6 +252,7 @@ import UsageAndChargesComponent from '@poc/components/billing/UsageAndChargesCom import StorjTokenCardComponent from '@poc/components/StorjTokenCardComponent.vue'; import TokenTransactionsTableComponent from '@poc/components/TokenTransactionsTableComponent.vue'; import ApplyCouponCodeDialog from '@poc/components/dialogs/ApplyCouponCodeDialog.vue'; +import LowTokenBalanceBanner from '@poc/components/LowTokenBalanceBanner.vue'; const tab = ref(0); const billingStore = useBillingStore(); @@ -252,6 +261,7 @@ const configStore = useConfigStore(); const { isLoading, withLoading } = useLoading(); const notify = useNotify(); +const isLowBalance = useLowTokenBalance(); const isRollupLoading = ref(true); const isAddCouponDialogShown = ref(false); @@ -341,14 +351,20 @@ function goToTransactionsTab() { onMounted(async () => { withLoading(async () => { + const promises: Promise[] = [ + billingStore.getBalance(), + billingStore.getCoupon(), + billingStore.getCreditCards(), + projectsStore.getProjects(), + billingStore.getProjectUsagePriceModel(), + ]; + + if (configStore.state.config.nativeTokenPaymentsEnabled) { + promises.push(billingStore.getNativePaymentsHistory()); + } + try { - await Promise.all([ - billingStore.getBalance(), - billingStore.getCoupon(), - billingStore.getCreditCards(), - projectsStore.getProjects(), - billingStore.getProjectUsagePriceModel(), - ]); + await Promise.all(promises); } catch (error) { notify.notifyError(error, AnalyticsErrorEventSource.BILLING_AREA); } diff --git a/web/satellite/vuetify-poc/src/views/Dashboard.vue b/web/satellite/vuetify-poc/src/views/Dashboard.vue index 7d300cb52e78..5c732271ebaa 100644 --- a/web/satellite/vuetify-poc/src/views/Dashboard.vue +++ b/web/satellite/vuetify-poc/src/views/Dashboard.vue @@ -3,6 +3,11 @@ + @@ -192,7 +197,18 @@
+ Your STORJ Token balance is low. Deposit more STORJ tokens or make sure you have a credit card + on file to avoid interruptions in service. +
emits('click')">{{ ctaLabel }}