Current Billing Period
@@ -60,6 +60,7 @@ import DatePickerIcon from '@/../static/images/project/datePicker.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { DateRange } from '@/types/usage';
+import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
import { ProjectOwning } from '@/utils/projectOwning';
@@ -88,12 +89,16 @@ declare interface ShowCheck {
})
export default class BillingArea extends Vue {
/**
- * Mounted lifecycle hook after initial render.
- * Fetches project limits and current usage rollup.
+ * Mounted lifecycle hook before initial render.
+ * Fetches billing history and project limits.
*/
- public async mounted(): Promise
{
+ public async beforeMount(): Promise {
try {
- await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_CHARGES_CURRENT_ROLLUP);
+ await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BILLING_HISTORY);
+ if (this.$store.getters.canUserCreateFirstProject && !this.userHasOwnProject) {
+ await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
+ await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
+ }
} catch (error) {
await this.$notify.error(error.message);
}
@@ -171,7 +176,7 @@ export default class BillingArea extends Vue {
public get isSummaryVisible(): boolean {
const isBalancePositive: boolean = this.$store.state.paymentsModule.balance > 0;
- return isBalancePositive || new ProjectOwning(this.$store).userHasOwnProject();
+ return isBalancePositive || this.userHasOwnProject;
}
/**
@@ -196,9 +201,9 @@ export default class BillingArea extends Vue {
}
/**
- * Indicates if billing periods logic is visible.
+ * Indicates if user has own project.
*/
- public get areBillingPeriodsVisible(): boolean {
+ public get userHasOwnProject(): boolean {
return new ProjectOwning(this.$store).userHasOwnProject();
}
diff --git a/web/satellite/src/components/account/billing/billingHistory/DepositAndBilling.vue b/web/satellite/src/components/account/billing/billingHistory/DepositAndBilling.vue
index 18fe70210..a63a14078 100644
--- a/web/satellite/src/components/account/billing/billingHistory/DepositAndBilling.vue
+++ b/web/satellite/src/components/account/billing/billingHistory/DepositAndBilling.vue
@@ -23,7 +23,6 @@ import BillingItem from '@/components/account/billing/billingHistory/BillingItem
import SortingHeader from '@/components/account/billing/billingHistory/SortingHeader.vue';
import { RouteConfig } from '@/router';
-import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { BillingHistoryItem } from '@/types/payments';
@Component({
@@ -33,17 +32,6 @@ import { BillingHistoryItem } from '@/types/payments';
},
})
export default class DepositAndBilling extends Vue {
- /**
- * Lifecycle hook after initial render where billing history is fetched.
- */
- public mounted(): void {
- try {
- this.$store.dispatch(PAYMENTS_ACTIONS.GET_BILLING_HISTORY);
- } catch (error) {
- this.$notify.error(error.message);
- }
- }
-
/**
* Changes location to billing history route.
*/
diff --git a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
index aa1102bfa..4a0945979 100644
--- a/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
+++ b/web/satellite/src/components/account/billing/estimatedCostsAndCredits/EstimatedCostsAndCredits.vue
@@ -55,8 +55,6 @@ import ArrowDownIcon from '@/../static/images/common/BlueExpand.svg';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { ProjectCharge } from '@/types/payments';
-import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
-import { ProjectOwning } from '@/utils/projectOwning';
@Component({
components: {
@@ -78,10 +76,6 @@ export default class EstimatedCostsAndCredits extends Vue {
} catch (error) {
await this.$notify.error(error.message);
}
-
- if (this.balance > 0 && !new ProjectOwning(this.$store).userHasOwnProject()) {
- await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
- }
}
/**
diff --git a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
index 987fceab6..35e4e7e9b 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentMethods.vue
@@ -230,7 +230,7 @@ export default class PaymentMethods extends Vue {
* Indicates if free credits or percentage bonus banner is shown.
*/
public get isDefaultBonusBannerShown(): boolean {
- return this.isDefaultState && !this.$store.getters.isBonusCouponApplied;
+ return this.isDefaultState && !this.$store.getters.canUserCreateFirstProject;
}
/**
@@ -294,7 +294,7 @@ export default class PaymentMethods extends Vue {
this.isLoading = true;
- if ((this.tokenDepositValue < 50 || this.tokenDepositValue >= this.MAX_TOKEN_AMOUNT) && !new ProjectOwning(this.$store).userHasOwnProject()) {
+ if ((this.tokenDepositValue < 50 || this.tokenDepositValue >= this.MAX_TOKEN_AMOUNT) && !this.userHasOwnProject) {
await this.$notify.error('First deposit amount must be more than 50 and less than 1000000');
this.tokenDepositValue = this.DEFAULT_TOKEN_DEPOSIT_VALUE;
this.areaState = PaymentMethodsBlockState.DEFAULT;
@@ -379,7 +379,7 @@ export default class PaymentMethods extends Vue {
this.isLoading = false;
this.isLoaded = true;
- if (!new ProjectOwning(this.$store).userHasOwnProject()) {
+ if (!this.userHasOwnProject) {
await this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CREATE_PROJECT_BUTTON);
}
@@ -388,7 +388,9 @@ export default class PaymentMethods extends Vue {
this.isLoaded = false;
setTimeout(() => {
- this.$store.dispatch(APP_STATE_ACTIONS.TOGGLE_CONTENT_BLUR);
+ if (!this.userHasOwnProject) {
+ this.$store.dispatch(APP_STATE_ACTIONS.SHOW_CONTENT_BLUR);
+ }
}, 500);
}, 2000);
}
@@ -400,6 +402,13 @@ export default class PaymentMethods extends Vue {
return this.areaState === PaymentMethodsBlockState.DEFAULT;
}
+ /**
+ * Indicates if user has own project.
+ */
+ private get userHasOwnProject(): boolean {
+ return new ProjectOwning(this.$store).userHasOwnProject();
+ }
+
/**
* Provides card information to Stripe.
*/
diff --git a/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue b/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
index a9cb4734a..4517f4ec4 100644
--- a/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
+++ b/web/satellite/src/components/account/billing/paymentMethods/PaymentsBonus.vue
@@ -28,7 +28,7 @@
import { Component, Prop, Vue } from 'vue-property-decorator';
import CardIcon from '@/../static/images/account/billing/card.svg';
-import LogoIcon from '@/../static/images/navigation/logo.svg';
+import LogoIcon from '@/../static/images/account/billing/logo.svg';
@Component({
components: {
diff --git a/web/satellite/src/components/header/NewProjectArea.vue b/web/satellite/src/components/header/NewProjectArea.vue
index 6255cb2ff..570c3fb2c 100644
--- a/web/satellite/src/components/header/NewProjectArea.vue
+++ b/web/satellite/src/components/header/NewProjectArea.vue
@@ -45,7 +45,7 @@ export default class NewProjectArea extends Vue {
* Toggles new project button visibility depending on user having his own project or payment method.
*/
public beforeMount(): void {
- if (new ProjectOwning(this.$store).userHasOwnProject() || !this.$store.getters.isBonusCouponApplied) {
+ if (this.userHasOwnProject || !this.$store.getters.canUserCreateFirstProject) {
this.$store.dispatch(APP_STATE_ACTIONS.HIDE_CREATE_PROJECT_BUTTON);
return;
@@ -79,7 +79,14 @@ export default class NewProjectArea extends Vue {
* Indicates if new project creation mock button is shown.
*/
public get isMockButtonShown(): boolean {
- return !new ProjectOwning(this.$store).userHasOwnProject() && !this.$store.getters.isBonusCouponApplied;
+ return !(this.userHasOwnProject || this.$store.getters.canUserCreateFirstProject);
+ }
+
+ /**
+ * Indicates if user has own project.
+ */
+ private get userHasOwnProject(): boolean {
+ return new ProjectOwning(this.$store).userHasOwnProject();
}
}
diff --git a/web/satellite/src/components/navigation/navigationArea.html b/web/satellite/src/components/navigation/navigationArea.html
index 2b559f42e..95018918c 100644
--- a/web/satellite/src/components/navigation/navigationArea.html
+++ b/web/satellite/src/components/navigation/navigationArea.html
@@ -20,7 +20,7 @@
Show
Hide