web/satellite: update onboarding flow: payment step update

WHAT:
added untitled project creation after adding payment method.
UI was slightly changed.

WHY:
new onboarding flow

Change-Id: I6cca1c784bd0462f20f2b06cc6595b9920d4f992
This commit is contained in:
VitaliiShpital 2020-12-04 17:38:28 +02:00 committed by Vitalii Shpital
parent 701474acd5
commit 55b495faa2
17 changed files with 304 additions and 150 deletions

View File

@ -52,22 +52,8 @@ export default class OnboardingTourArea extends Vue {
return; return;
} }
if (this.userHasProject && !this.userHasAccessGrants) { if (this.$route.name === RouteConfig.AccessGrant.name) {
this.disableInfoBar(); this.disableInfoBar();
this.setCreateAccessGrantStep();
return;
}
if (this.$store.state.paymentsModule.creditCards.length > 0) {
this.disableInfoBar();
this.setCreateAccessGrantStep();
return;
}
if (this.$store.getters.isTransactionProcessing || this.$store.getters.isBalancePositive) {
this.setAddPaymentStep();
} }
} }
@ -78,13 +64,6 @@ export default class OnboardingTourArea extends Vue {
return this.$store.state.paymentsModule.isPaywallEnabled; return this.$store.state.paymentsModule.isPaywallEnabled;
} }
/**
* Sets area's state to adding payment method step.
*/
public setAddPaymentStep(): void {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.PaymentStep).path);
}
/** /**
* Sets area's state to creating access grant step. * Sets area's state to creating access grant step.
*/ */

View File

@ -5,7 +5,8 @@
<div class="payment-step"> <div class="payment-step">
<h1 class="payment-step__title">Get Started with 50 GB Free</h1> <h1 class="payment-step__title">Get Started with 50 GB Free</h1>
<p class="payment-step__sub-title"> <p class="payment-step__sub-title">
Adding a payment method ensures your project wont be interrupted after your <b>free</b> credit is used. Experience the decentralized cloud for free! If you find our network isnt for you, <b class="bold">cancel
any time before your credit runs out and you wont be billed.</b>
</p> </p>
<div class="payment-step__methods-container"> <div class="payment-step__methods-container">
<div class="payment-step__methods-container__title-area"> <div class="payment-step__methods-container__title-area">
@ -32,12 +33,12 @@
<AddCardState <AddCardState
v-if="isAddCardState" v-if="isAddCardState"
@toggleIsLoading="toggleIsLoading" @toggleIsLoading="toggleIsLoading"
@setProjectState="setProjectState" @setCreateGrantStep="setCreateGrantStep"
/> />
<AddStorjState <AddStorjState
v-if="isAddStorjState" v-if="isAddStorjState"
@toggleIsLoading="toggleIsLoading" @toggleIsLoading="toggleIsLoading"
@setProjectState="setProjectState" @setCreateGrantStep="setCreateGrantStep"
/> />
<h1 class="payment-step__title second-title">Transparent Monthly Pricing</h1> <h1 class="payment-step__title second-title">Transparent Monthly Pricing</h1>
<p class="payment-step__sub-title"> <p class="payment-step__sub-title">
@ -84,6 +85,7 @@ import { Component, Vue } from 'vue-property-decorator';
import AddCardState from '@/components/onboardingTour/steps/paymentStates/AddCardState.vue'; import AddCardState from '@/components/onboardingTour/steps/paymentStates/AddCardState.vue';
import AddStorjState from '@/components/onboardingTour/steps/paymentStates/AddStorjState.vue'; import AddStorjState from '@/components/onboardingTour/steps/paymentStates/AddStorjState.vue';
import { RouteConfig } from '@/router';
import { AddingPaymentState } from '@/utils/constants/onboardingTourEnums'; import { AddingPaymentState } from '@/utils/constants/onboardingTourEnums';
@Component({ @Component({
@ -102,6 +104,12 @@ export default class AddPaymentStep extends Vue {
* Sets area to needed state. * Sets area to needed state.
*/ */
public mounted(): void { public mounted(): void {
if (this.userHasProject) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
return;
}
if (this.$store.getters.isTransactionProcessing || this.$store.getters.isBalancePositive) { if (this.$store.getters.isTransactionProcessing || this.$store.getters.isBalancePositive) {
this.setAddStorjState(); this.setAddStorjState();
} }
@ -143,10 +151,17 @@ export default class AddPaymentStep extends Vue {
} }
/** /**
* Sets tour area to creating project state. * Sets tour area to creating access grant state.
*/ */
public setProjectState(): void { public setCreateGrantStep(): void {
this.$emit('setProjectState'); this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
}
/**
* Indicates if user has at least one project.
*/
private get userHasProject(): boolean {
return this.$store.state.projectsModule.projects.length > 0;
} }
} }
</script> </script>
@ -169,6 +184,7 @@ export default class AddPaymentStep extends Vue {
position: relative; position: relative;
&__title { &__title {
font-family: 'font_bold', sans-serif;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
color: #1b2533; color: #1b2533;
@ -182,6 +198,10 @@ export default class AddPaymentStep extends Vue {
margin-bottom: 35px; margin-bottom: 35px;
text-align: center; text-align: center;
word-break: break-word; word-break: break-word;
.bold {
font-family: 'font_medium', sans-serif;
}
} }
&__methods-container { &__methods-container {

View File

@ -9,6 +9,13 @@ import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue'; import VButton from '@/components/common/VButton.vue';
import { RouteConfig } from '@/router'; import { RouteConfig } from '@/router';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
@Component({ @Component({
components: { components: {
@ -16,6 +23,24 @@ import { RouteConfig } from '@/router';
}, },
}) })
export default class OverviewStep extends Vue { export default class OverviewStep extends Vue {
public isLoading: boolean = false;
/**
* Lifecycle hook after initial render.
* Sets area to needed state.
*/
public mounted(): void {
if (this.userHasProject || this.$store.state.paymentsModule.creditCards.length > 0) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
return;
}
if (this.$store.getters.isTransactionProcessing || this.$store.getters.isBalancePositive) {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.PaymentStep).path);
}
}
/** /**
* Holds button click logic. * Holds button click logic.
* Redirects to next step (adding payment method). * Redirects to next step (adding payment method).
@ -26,10 +51,46 @@ export default class OverviewStep extends Vue {
/** /**
* Holds button click logic. * Holds button click logic.
* Redirects to next step (creating access grant). * Creates untitled project and redirects to next step (creating access grant).
*/ */
public onCreateGrantClick(): void { public async onCreateGrantClick(): Promise<void> {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path); if (this.isLoading) return;
this.isLoading = true;
try {
const FIRST_PAGE = 1;
const UNTITLED_PROJECT_NAME = 'Untitled Project';
const UNTITLED_PROJECT_DESCRIPTION = '___';
const project = new ProjectFields(
UNTITLED_PROJECT_NAME,
UNTITLED_PROJECT_DESCRIPTION,
this.$store.getters.user.id,
);
const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
const createdProjectId = createdProject.id;
this.$segment.track(SegmentEvent.PROJECT_CREATED, {
project_id: createdProjectId,
});
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId);
await this.$store.dispatch(PM_ACTIONS.CLEAR);
await this.$store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.isLoading = false;
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
} catch (error) {
await this.$notify.error(error.message);
this.isLoading = false;
}
} }
/** /**
@ -38,6 +99,13 @@ export default class OverviewStep extends Vue {
public get isPaywallEnabled(): boolean { public get isPaywallEnabled(): boolean {
return this.$store.state.paymentsModule.isPaywallEnabled; return this.$store.state.paymentsModule.isPaywallEnabled;
} }
/**
* Indicates if user has at least one project.
*/
private get userHasProject(): boolean {
return this.$store.state.projectsModule.projects.length > 0;
}
} }
</script> </script>

View File

@ -35,6 +35,7 @@
label="Add a Payment Method" label="Add a Payment Method"
width="252px" width="252px"
height="48px" height="48px"
:is-disabled="isLoading"
:on-press="onAddPaymentClick" :on-press="onAddPaymentClick"
/> />
<VButton <VButton
@ -43,6 +44,7 @@
label="Create an Access Grant" label="Create an Access Grant"
width="252px" width="252px"
height="48px" height="48px"
:is-disabled="isLoading"
:on-press="onCreateGrantClick" :on-press="onCreateGrantClick"
/> />
</div> </div>

View File

@ -16,15 +16,14 @@
Your card is secured by 128-bit SSL and AES-256 encryption. Your information is secure. Your card is secured by 128-bit SSL and AES-256 encryption. Your information is secure.
</span> </span>
</div> </div>
<div class="add-card-state__button" :class="{ loading: isLoading }" @click="onConfirmAddStripe"> <p class="add-card-state__next-label">Next</p>
<img <VButton
v-if="isLoading" label="Create an Access Grant"
class="add-card-state__button__loading-image" width="252px"
src="@/../static/images/account/billing/loading.gif" height="48px"
alt="loading gif" :is-disabled="isLoading"
> :on-press="onCreateGrantClick"
<span class="add-card-state__button__label">{{ isLoading ? 'Adding' : 'Add Payment' }}</span> />
</div>
</div> </div>
</template> </template>
@ -32,10 +31,16 @@
import { Component, Vue } from 'vue-property-decorator'; import { Component, Vue } from 'vue-property-decorator';
import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue'; import StripeCardInput from '@/components/account/billing/paymentMethods/StripeCardInput.vue';
import VButton from '@/components/common/VButton.vue';
import LockImage from '@/../static/images/account/billing/lock.svg'; import LockImage from '@/../static/images/account/billing/lock.svg';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments'; import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames'; import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
const { const {
@ -52,25 +57,67 @@ interface StripeForm {
components: { components: {
StripeCardInput, StripeCardInput,
LockImage, LockImage,
VButton,
}, },
}) })
export default class AddCardState extends Vue { export default class AddCardState extends Vue {
public isLoading: boolean = false; private readonly TOGGLE_IS_LOADING: string = 'toggleIsLoading';
private readonly SET_CREATE_GRANT_STEP: string = 'setCreateGrantStep';
public isLoading: boolean = false;
public $refs!: { public $refs!: {
stripeCardInput: StripeCardInput & StripeForm; stripeCardInput: StripeCardInput & StripeForm;
}; };
/** /**
* Provides card information to Stripe. * Provides card information to Stripe, creates untitled project and redirects to next step.
*/ */
public async onConfirmAddStripe(): Promise<void> { public async onCreateGrantClick(): Promise<void> {
await this.$refs.stripeCardInput.onSubmit(); if (this.isLoading) return;
this.$segment.track(SegmentEvent.PAYMENT_METHOD_ADDED, { this.isLoading = true;
project_id: this.$store.getters.selectedProject.id,
}); this.$emit(this.TOGGLE_IS_LOADING);
try {
await this.$refs.stripeCardInput.onSubmit();
const FIRST_PAGE = 1;
const UNTITLED_PROJECT_NAME = 'Untitled Project';
const UNTITLED_PROJECT_DESCRIPTION = '___';
const project = new ProjectFields(
UNTITLED_PROJECT_NAME,
UNTITLED_PROJECT_DESCRIPTION,
this.$store.getters.user.id,
);
const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
const createdProjectId = createdProject.id;
this.$segment.track(SegmentEvent.PROJECT_CREATED, {
project_id: createdProjectId,
});
this.$segment.track(SegmentEvent.PAYMENT_METHOD_ADDED, {
project_id: createdProjectId,
});
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId);
await this.$store.dispatch(PM_ACTIONS.CLEAR);
await this.$store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.setDefaultState();
this.$emit(this.SET_CREATE_GRANT_STEP);
} catch (error) {
await this.$notify.error(error.message);
this.setDefaultState();
}
} }
/** /**
@ -79,11 +126,6 @@ export default class AddCardState extends Vue {
* @param token from Stripe * @param token from Stripe
*/ */
public async addCard(token: string) { public async addCard(token: string) {
if (this.isLoading) return;
this.isLoading = true;
this.$emit('toggleIsLoading');
try { try {
await this.$store.dispatch(ADD_CREDIT_CARD, token); await this.$store.dispatch(ADD_CREDIT_CARD, token);
} catch (error) { } catch (error) {
@ -98,11 +140,8 @@ export default class AddCardState extends Vue {
await this.$store.dispatch(GET_CREDIT_CARDS); await this.$store.dispatch(GET_CREDIT_CARDS);
} catch (error) { } catch (error) {
await this.$notify.error(error.message); await this.$notify.error(error.message);
this.setDefaultState();
} }
this.setDefaultState();
this.$emit('setProjectState');
} }
/** /**
@ -110,7 +149,7 @@ export default class AddCardState extends Vue {
*/ */
private setDefaultState(): void { private setDefaultState(): void {
this.isLoading = false; this.isLoading = false;
this.$emit('toggleIsLoading'); this.$emit(this.TOGGLE_IS_LOADING);
} }
} }
</script> </script>
@ -147,7 +186,6 @@ export default class AddCardState extends Vue {
padding: 15px 35px; padding: 15px 35px;
background-color: #cef0e3; background-color: #cef0e3;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
margin-bottom: 45px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -160,34 +198,12 @@ export default class AddCardState extends Vue {
} }
} }
&__button { &__next-label {
display: flex; font-weight: normal;
justify-content: center; font-size: 16px;
align-items: center; line-height: 26px;
width: 156px; color: #768394;
height: 48px; margin: 35px 0;
cursor: pointer;
border-radius: 6px;
background-color: #2683ff;
&__loading-image {
margin-right: 5px;
width: 18px;
height: 18px;
}
&__label {
font-family: 'font_medium', sans-serif;
font-size: 16px;
line-height: 23px;
color: #fff;
word-break: keep-all;
white-space: nowrap;
}
&:hover {
background-color: #0059d0;
}
} }
} }

View File

@ -34,11 +34,12 @@
</div> </div>
<div class="add-storj-state__container__blur" v-if="isLoading"/> <div class="add-storj-state__container__blur" v-if="isLoading"/>
</div> </div>
<p class="add-storj-state__next-label">Next</p>
<VButton <VButton
width="222px" width="252px"
height="48px" height="48px"
label="Name Your Project" label="Create an Acess Grant"
:on-press="createProject" :on-press="createAccessGrant"
:is-disabled="isButtonDisabled" :is-disabled="isButtonDisabled"
/> />
</div> </div>
@ -52,6 +53,13 @@ import PayingStep from '@/components/onboardingTour/steps/paymentStates/tokenSub
import VerifiedStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifiedStep.vue'; import VerifiedStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifiedStep.vue';
import VerifyingStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifyingStep.vue'; import VerifyingStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifyingStep.vue';
import { API_KEYS_ACTIONS } from '@/store/modules/apiKeys';
import { BUCKET_ACTIONS } from '@/store/modules/buckets';
import { PAYMENTS_ACTIONS } from '@/store/modules/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { PM_ACTIONS } from '@/utils/constants/actionNames';
import { SegmentEvent } from '@/utils/constants/analyticsEventNames';
import { AddingStorjState } from '@/utils/constants/onboardingTourEnums'; import { AddingStorjState } from '@/utils/constants/onboardingTourEnums';
@Component({ @Component({
@ -64,6 +72,9 @@ import { AddingStorjState } from '@/utils/constants/onboardingTourEnums';
}) })
export default class AddStorjState extends Vue { export default class AddStorjState extends Vue {
private readonly TOGGLE_IS_LOADING: string = 'toggleIsLoading';
private readonly SET_CREATE_GRANT_STEP: string = 'setCreateGrantStep';
public isLoading: boolean = false; public isLoading: boolean = false;
public addingTokenState: number = AddingStorjState.DEFAULT; public addingTokenState: number = AddingStorjState.DEFAULT;
@ -86,6 +97,78 @@ export default class AddStorjState extends Vue {
} }
} }
/**
* Create untitled project and starts creating access grant process.
*/
public async createAccessGrant(): Promise<void> {
if (this.isLoading) return;
this.toggleIsLoading();
try {
const FIRST_PAGE = 1;
const UNTITLED_PROJECT_NAME = 'Untitled Project';
const UNTITLED_PROJECT_DESCRIPTION = '___';
const project = new ProjectFields(
UNTITLED_PROJECT_NAME,
UNTITLED_PROJECT_DESCRIPTION,
this.$store.getters.user.id,
);
const createdProject = await this.$store.dispatch(PROJECTS_ACTIONS.CREATE, project);
const createdProjectId = createdProject.id;
this.$segment.track(SegmentEvent.PROJECT_CREATED, {
project_id: createdProjectId,
});
await this.$store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId);
await this.$store.dispatch(PM_ACTIONS.CLEAR);
await this.$store.dispatch(PM_ACTIONS.FETCH, FIRST_PAGE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PAYMENTS_HISTORY);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_BALANCE);
await this.$store.dispatch(PAYMENTS_ACTIONS.GET_PROJECT_USAGE_AND_CHARGES_CURRENT_ROLLUP);
await this.$store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, createdProjectId);
await this.$store.dispatch(API_KEYS_ACTIONS.CLEAR);
await this.$store.dispatch(BUCKET_ACTIONS.CLEAR);
this.toggleIsLoading();
this.$emit(this.SET_CREATE_GRANT_STEP);
} catch (error) {
await this.$notify.error(error.message);
this.toggleIsLoading();
}
}
/**
* Sets area to default state.
*/
public setDefaultState(): void {
this.addingTokenState = AddingStorjState.DEFAULT;
}
/**
* Sets area to verifying state.
*/
public setVerifyingState(): void {
this.addingTokenState = AddingStorjState.VERIFYING;
}
/**
* Sets area to verified state.
*/
public setVerifiedState(): void {
this.addingTokenState = AddingStorjState.VERIFIED;
}
/**
* Toggles area's loading state.
*/
public toggleIsLoading(): void {
this.isLoading = !this.isLoading;
this.$emit(this.TOGGLE_IS_LOADING);
}
/** /**
* Indicates if area is in default state. * Indicates if area is in default state.
*/ */
@ -113,42 +196,6 @@ export default class AddStorjState extends Vue {
public get isButtonDisabled(): boolean { public get isButtonDisabled(): boolean {
return !this.$store.getters.canUserCreateFirstProject; return !this.$store.getters.canUserCreateFirstProject;
} }
/**
* Sets area to default state.
*/
public setDefaultState(): void {
this.addingTokenState = AddingStorjState.DEFAULT;
}
/**
* Sets area to verifying state.
*/
public setVerifyingState(): void {
this.addingTokenState = AddingStorjState.VERIFYING;
}
/**
* Sets area to verified state.
*/
public setVerifiedState(): void {
this.addingTokenState = AddingStorjState.VERIFIED;
}
/**
* Toggles area's loading state.
*/
public toggleIsLoading(): void {
this.isLoading = !this.isLoading;
this.$emit('toggleIsLoading');
}
/**
* Starts creating project process.
*/
public createProject(): void {
this.$emit('setProjectState');
}
} }
</script> </script>
@ -172,7 +219,6 @@ export default class AddStorjState extends Vue {
padding: 20px 45px 45px 45px; padding: 20px 45px 45px 45px;
background-color: #fff; background-color: #fff;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
margin-bottom: 35px;
position: relative; position: relative;
&__bonus-info { &__bonus-info {
@ -218,5 +264,13 @@ export default class AddStorjState extends Vue {
z-index: 100; z-index: 100;
} }
} }
&__next-label {
font-weight: normal;
font-size: 16px;
line-height: 26px;
color: #768394;
margin: 35px 0;
}
} }
</style> </style>

View File

@ -20,7 +20,7 @@
@onChangeTokenValue="onChangeTokenValue" @onChangeTokenValue="onChangeTokenValue"
/> />
<VButton <VButton
width="100%" width="calc(100% - 4px)"
height="48px" height="48px"
label="Continue to Coin Payments" label="Continue to Coin Payments"
:on-press="onConfirmAddSTORJ" :on-press="onConfirmAddSTORJ"
@ -145,7 +145,7 @@ export default class PayingStep extends Vue {
} }
&__form { &__form {
width: 100%; width: calc(100% - 2px);
margin-bottom: 20px; margin-bottom: 20px;
/deep/ .selected-container, /deep/ .selected-container,

View File

@ -5,8 +5,8 @@
<VerifyingImage/> <VerifyingImage/>
<h2 class="verifying-step__title">Verifying Payment</h2> <h2 class="verifying-step__title">Verifying Payment</h2>
<span class="verifying-step__sub-title"> <span class="verifying-step__sub-title">
Verification may take up to an hour. In the meantime, see how easy it is to get started visiting documentation Verification may take up to a few hours. In the meantime, see how easy it is to get started visiting
page, or check coin payment status. documentation page, or check coin payment status.
</span> </span>
<div class="verifying-step__buttons-area"> <div class="verifying-step__buttons-area">
<a <a

View File

@ -36,7 +36,7 @@ export default class ProjectDashboard extends Vue {
*/ */
public mounted(): void { public mounted(): void {
if (!this.$store.getters.selectedProject.id) { if (!this.$store.getters.selectedProject.id) {
this.$router.push(RouteConfig.OnboardingTour.path); this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
return; return;
} }

View File

@ -166,7 +166,7 @@ export default class DashboardArea extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED); await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
try { try {
await this.$router.push(RouteConfig.OnboardingTour.path); await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
} catch (error) { } catch (error) {
return; return;
} }
@ -188,7 +188,7 @@ export default class DashboardArea extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED); await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
try { try {
await this.$router.push(RouteConfig.OnboardingTour.path); await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
} catch (error) { } catch (error) {
return; return;
} }
@ -197,7 +197,7 @@ export default class DashboardArea extends Vue {
} }
try { try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE); await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.FETCH, this.FIRST_PAGE);
} catch (error) { } catch (error) {
await this.$notify.error(`Unable to fetch api keys. ${error.message}`); await this.$notify.error(`Unable to fetch api keys. ${error.message}`);
} }

View File

@ -7,14 +7,19 @@ import AddPaymentStep from '@/components/onboardingTour/steps/AddPaymentStep.vue
import { PaymentsHttpApi } from '@/api/payments'; import { PaymentsHttpApi } from '@/api/payments';
import { makePaymentsModule } from '@/store/modules/payments'; import { makePaymentsModule } from '@/store/modules/payments';
import { makeProjectsModule } from '@/store/modules/projects';
import { createLocalVue, shallowMount } from '@vue/test-utils'; import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '../../mock/api/projects';
const localVue = createLocalVue(); const localVue = createLocalVue();
localVue.use(Vuex); localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const paymentsApi = new PaymentsHttpApi(); const paymentsApi = new PaymentsHttpApi();
const paymentsModule = makePaymentsModule(paymentsApi); const paymentsModule = makePaymentsModule(paymentsApi);
const store = new Vuex.Store({ modules: { paymentsModule }}); const store = new Vuex.Store({ modules: { projectsModule, paymentsModule }});
describe('AddPaymentStep.vue', () => { describe('AddPaymentStep.vue', () => {
it('renders correctly', async (): Promise<void> => { it('renders correctly', async (): Promise<void> => {

View File

@ -8,16 +8,24 @@ import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import { PaymentsHttpApi } from '@/api/payments'; import { PaymentsHttpApi } from '@/api/payments';
import { router } from '@/router'; import { router } from '@/router';
import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments'; import { makePaymentsModule, PAYMENTS_MUTATIONS } from '@/store/modules/payments';
import { mount } from '@vue/test-utils'; import { makeProjectsModule } from '@/store/modules/projects';
import { createLocalVue, mount } from '@vue/test-utils';
import { ProjectsApiMock } from '../../mock/api/projects';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const paymentsApi = new PaymentsHttpApi(); const paymentsApi = new PaymentsHttpApi();
const paymentsModule = makePaymentsModule(paymentsApi); const paymentsModule = makePaymentsModule(paymentsApi);
const store = new Vuex.Store({ modules: { paymentsModule }}); const store = new Vuex.Store({ modules: { projectsModule, paymentsModule }});
describe('OverviewStep.vue', (): void => { describe('OverviewStep.vue', (): void => {
it('renders correctly', async (): Promise<void> => { it('renders correctly', async (): Promise<void> => {
const wrapper = mount(OverviewStep, { const wrapper = mount(OverviewStep, {
localVue,
router, router,
store, store,
}); });

View File

@ -4,8 +4,8 @@ exports[`AddPaymentStep.vue renders correctly 1`] = `
<div class="payment-step"> <div class="payment-step">
<h1 class="payment-step__title">Get Started with 50 GB Free</h1> <h1 class="payment-step__title">Get Started with 50 GB Free</h1>
<p class="payment-step__sub-title"> <p class="payment-step__sub-title">
Adding a payment method ensures your project wont be interrupted after your <b>free</b> credit is used. Experience the decentralized cloud for free! If you find our network isnt for you, <b class="bold">cancel
</p> any time before your credit runs out and you wont be billed.</b></p>
<div class="payment-step__methods-container"> <div class="payment-step__methods-container">
<div class="payment-step__methods-container__title-area"> <div class="payment-step__methods-container__title-area">
<h2 class="payment-step__methods-container__title-area__title">Payment Method</h2> <h2 class="payment-step__methods-container__title-area__title">Payment Method</h2>
@ -44,8 +44,8 @@ exports[`AddPaymentStep.vue renders correctly 2`] = `
<div class="payment-step"> <div class="payment-step">
<h1 class="payment-step__title">Get Started with 50 GB Free</h1> <h1 class="payment-step__title">Get Started with 50 GB Free</h1>
<p class="payment-step__sub-title"> <p class="payment-step__sub-title">
Adding a payment method ensures your project wont be interrupted after your <b>free</b> credit is used. Experience the decentralized cloud for free! If you find our network isnt for you, <b class="bold">cancel
</p> any time before your credit runs out and you wont be billed.</b></p>
<div class="payment-step__methods-container"> <div class="payment-step__methods-container">
<div class="payment-step__methods-container__title-area"> <div class="payment-step__methods-container__title-area">
<h2 class="payment-step__methods-container__title-area__title">Payment Method</h2> <h2 class="payment-step__methods-container__title-area__title">Payment Method</h2>

View File

@ -11,8 +11,7 @@ exports[`AddCardState.vue renders correctly 1`] = `
Your card is secured by 128-bit SSL and AES-256 encryption. Your information is secure. Your card is secured by 128-bit SSL and AES-256 encryption. Your information is secure.
</span> </span>
</div> </div>
<div class="add-card-state__button"> <p class="add-card-state__next-label">Next</p>
<!----> <span class="add-card-state__button__label">Add Payment</span> <vbutton-stub label="Create an Access Grant" width="252px" height="48px" onpress="function () { [native code] }"></vbutton-stub>
</div>
</div> </div>
`; `;

View File

@ -20,7 +20,8 @@ exports[`AddStorjState.vue renders correctly 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<vbutton-stub label="Name Your Project" width="222px" height="48px" isdisabled="true" onpress="function () { [native code] }"></vbutton-stub> <p class="add-storj-state__next-label">Next</p>
<vbutton-stub label="Create an Acess Grant" width="252px" height="48px" isdisabled="true" onpress="function () { [native code] }"></vbutton-stub>
</div> </div>
`; `;
@ -44,7 +45,8 @@ exports[`AddStorjState.vue renders correctly with completed transaction 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<vbutton-stub label="Name Your Project" width="222px" height="48px" onpress="function () { [native code] }"></vbutton-stub> <p class="add-storj-state__next-label">Next</p>
<vbutton-stub label="Create an Acess Grant" width="252px" height="48px" onpress="function () { [native code] }"></vbutton-stub>
</div> </div>
`; `;
@ -68,6 +70,7 @@ exports[`AddStorjState.vue renders correctly with pending transaction 1`] = `
</div> </div>
<!----> <!---->
</div> </div>
<vbutton-stub label="Name Your Project" width="222px" height="48px" isdisabled="true" onpress="function () { [native code] }"></vbutton-stub> <p class="add-storj-state__next-label">Next</p>
<vbutton-stub label="Create an Acess Grant" width="252px" height="48px" isdisabled="true" onpress="function () { [native code] }"></vbutton-stub>
</div> </div>
`; `;

View File

@ -9,6 +9,6 @@ exports[`PayingStep.vue renders correctly 1`] = `
<!----> <!---->
</div> </div>
<tokendepositselection-stub class="paying-step__form"></tokendepositselection-stub> <tokendepositselection-stub class="paying-step__form"></tokendepositselection-stub>
<vbutton-stub label="Continue to Coin Payments" width="100%" height="48px" isbluewhite="true" onpress="function () { [native code] }"></vbutton-stub> <vbutton-stub label="Continue to Coin Payments" width="calc(100% - 4px)" height="48px" isbluewhite="true" onpress="function () { [native code] }"></vbutton-stub>
</div> </div>
`; `;

View File

@ -4,8 +4,8 @@ exports[`VerifyingStep.vue renders correctly 1`] = `
<div class="verifying-step"> <div class="verifying-step">
<verifyingimage-stub></verifyingimage-stub> <verifyingimage-stub></verifyingimage-stub>
<h2 class="verifying-step__title">Verifying Payment</h2> <span class="verifying-step__sub-title"> <h2 class="verifying-step__title">Verifying Payment</h2> <span class="verifying-step__sub-title">
Verification may take up to an hour. In the meantime, see how easy it is to get started visiting documentation Verification may take up to a few hours. In the meantime, see how easy it is to get started visiting
page, or check coin payment status. documentation page, or check coin payment status.
</span> </span>
<div class="verifying-step__buttons-area"><a href="https://documentation.storj.io" target="_blank" rel="noopener noreferrer" class="verifying-step__buttons-area__how-to-button"> <div class="verifying-step__buttons-area"><a href="https://documentation.storj.io" target="_blank" rel="noopener noreferrer" class="verifying-step__buttons-area__how-to-button">
Documentation Documentation