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

web/satellite: update onboarding flow: payment step update

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
View File

@ -52,22 +52,8 @@ export default class OnboardingTourArea extends Vue {
return;
}
if (this.userHasProject && !this.userHasAccessGrants) {
if (this.$route.name === RouteConfig.AccessGrant.name) {
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;
}
/**
* 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.
*/

32
web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue
View File

@ -5,7 +5,8 @@
<div class="payment-step">
<h1 class="payment-step__title">Get Started with 50 GB Free</h1>
<p class="payment-step__sub-title">
Adding a payment method ensures your project won’t be interrupted after your <b>free</b> credit is used.
Experience the decentralized cloud for free! If you find our network isn’t for you, <b class="bold">cancel
any time before your credit runs out and you won’t be billed.</b>
</p>
<div class="payment-step__methods-container">
<div class="payment-step__methods-container__title-area">
@ -32,12 +33,12 @@
<AddCardState
v-if="isAddCardState"
@toggleIsLoading="toggleIsLoading"
@setProjectState="setProjectState"
@setCreateGrantStep="setCreateGrantStep"
/>
<AddStorjState
v-if="isAddStorjState"
@toggleIsLoading="toggleIsLoading"
@setProjectState="setProjectState"
@setCreateGrantStep="setCreateGrantStep"
/>
<h1 class="payment-step__title second-title">Transparent Monthly Pricing</h1>
<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 AddStorjState from '@/components/onboardingTour/steps/paymentStates/AddStorjState.vue';
import { RouteConfig } from '@/router';
import { AddingPaymentState } from '@/utils/constants/onboardingTourEnums';
@Component({
@ -102,6 +104,12 @@ export default class AddPaymentStep extends Vue {
* Sets area to needed state.
*/
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) {
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 {
this.$emit('setProjectState');
public setCreateGrantStep(): void {
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>
@ -169,6 +184,7 @@ export default class AddPaymentStep extends Vue {
position: relative;
&__title {
font-family: 'font_bold', sans-serif;
font-size: 32px;
line-height: 39px;
color: #1b2533;
@ -182,6 +198,10 @@ export default class AddPaymentStep extends Vue {
margin-bottom: 35px;
text-align: center;
word-break: break-word;
.bold {
font-family: 'font_medium', sans-serif;
}
}
&__methods-container {

74
web/satellite/src/components/onboardingTour/steps/OverviewStep.vue
View File

@ -9,6 +9,13 @@ import { Component, Vue } from 'vue-property-decorator';
import VButton from '@/components/common/VButton.vue';
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({
components: {
@ -16,6 +23,24 @@ import { RouteConfig } from '@/router';
},
})
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.
* Redirects to next step (adding payment method).
@ -26,10 +51,46 @@ export default class OverviewStep extends Vue {
/**
* 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 {
this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
public async onCreateGrantClick(): Promise<void> {
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 {
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>

2
web/satellite/src/components/onboardingTour/steps/overviewStep.html
View File

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

120
web/satellite/src/components/onboardingTour/steps/paymentStates/AddCardState.vue
View File

@ -16,15 +16,14 @@
Your card is secured by 128-bit SSL and AES-256 encryption. Your information is secure.
</span>
</div>
<div class="add-card-state__button" :class="{ loading: isLoading }" @click="onConfirmAddStripe">
<img
v-if="isLoading"
class="add-card-state__button__loading-image"
src="@/../static/images/account/billing/loading.gif"
alt="loading gif"
>
<span class="add-card-state__button__label">{{ isLoading ? 'Adding' : 'Add Payment' }}</span>
</div>
<p class="add-card-state__next-label">Next</p>
<VButton
label="Create an Access Grant"
width="252px"
height="48px"
:is-disabled="isLoading"
:on-press="onCreateGrantClick"
/>
</div>
</template>
@ -32,10 +31,16 @@
import { Component, Vue } from 'vue-property-decorator';
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 { 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';
const {
@ -52,25 +57,67 @@ interface StripeForm {
components: {
StripeCardInput,
LockImage,
VButton,
},
})
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!: {
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> {
if (this.isLoading) return;
this.isLoading = true;
this.$emit(this.TOGGLE_IS_LOADING);
try {
await this.$refs.stripeCardInput.onSubmit();
this.$segment.track(SegmentEvent.PAYMENT_METHOD_ADDED, {
project_id: this.$store.getters.selectedProject.id,
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
*/
public async addCard(token: string) {
if (this.isLoading) return;
this.isLoading = true;
this.$emit('toggleIsLoading');
try {
await this.$store.dispatch(ADD_CREDIT_CARD, token);
} catch (error) {
@ -98,11 +140,8 @@ export default class AddCardState extends Vue {
await this.$store.dispatch(GET_CREDIT_CARDS);
} catch (error) {
await this.$notify.error(error.message);
}
this.setDefaultState();
this.$emit('setProjectState');
}
}
/**
@ -110,7 +149,7 @@ export default class AddCardState extends Vue {
*/
private setDefaultState(): void {
this.isLoading = false;
this.$emit('toggleIsLoading');
this.$emit(this.TOGGLE_IS_LOADING);
}
}
</script>
@ -147,7 +186,6 @@ export default class AddCardState extends Vue {
padding: 15px 35px;
background-color: #cef0e3;
border-radius: 0 0 8px 8px;
margin-bottom: 45px;
display: flex;
align-items: center;
justify-content: center;
@ -160,34 +198,12 @@ export default class AddCardState extends Vue {
}
}
&__button {
display: flex;
justify-content: center;
align-items: center;
width: 156px;
height: 48px;
cursor: pointer;
border-radius: 6px;
background-color: #2683ff;
&__loading-image {
margin-right: 5px;
width: 18px;
height: 18px;
}
&__label {
font-family: 'font_medium', sans-serif;
&__next-label {
font-weight: normal;
font-size: 16px;
line-height: 23px;
color: #fff;
word-break: keep-all;
white-space: nowrap;
}
&:hover {
background-color: #0059d0;
}
line-height: 26px;
color: #768394;
margin: 35px 0;
}
}

134
web/satellite/src/components/onboardingTour/steps/paymentStates/AddStorjState.vue
View File

@ -34,11 +34,12 @@
</div>
<div class="add-storj-state__container__blur" v-if="isLoading"/>
</div>
<p class="add-storj-state__next-label">Next</p>
<VButton
width="222px"
width="252px"
height="48px"
label="Name Your Project"
:on-press="createProject"
label="Create an Acess Grant"
:on-press="createAccessGrant"
:is-disabled="isButtonDisabled"
/>
</div>
@ -52,6 +53,13 @@ import PayingStep from '@/components/onboardingTour/steps/paymentStates/tokenSub
import VerifiedStep from '@/components/onboardingTour/steps/paymentStates/tokenSubSteps/VerifiedStep.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';
@Component({
@ -64,6 +72,9 @@ import { AddingStorjState } from '@/utils/constants/onboardingTourEnums';
})
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 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.
*/
@ -113,42 +196,6 @@ export default class AddStorjState extends Vue {
public get isButtonDisabled(): boolean {
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>
@ -172,7 +219,6 @@ export default class AddStorjState extends Vue {
padding: 20px 45px 45px 45px;
background-color: #fff;
border-radius: 0 0 8px 8px;
margin-bottom: 35px;
position: relative;
&__bonus-info {
@ -218,5 +264,13 @@ export default class AddStorjState extends Vue {
z-index: 100;
}
}
&__next-label {
font-weight: normal;
font-size: 16px;
line-height: 26px;
color: #768394;
margin: 35px 0;
}
}
</style>

4
web/satellite/src/components/onboardingTour/steps/paymentStates/tokenSubSteps/PayingStep.vue
View File

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

4
web/satellite/src/components/onboardingTour/steps/paymentStates/tokenSubSteps/verifyingStep.html
View File

@ -5,8 +5,8 @@
<VerifyingImage/>
<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
page, or check coin payment status.
Verification may take up to a few hours. In the meantime, see how easy it is to get started visiting
documentation page, or check coin payment status.
</span>
<div class="verifying-step__buttons-area">
<a

2
web/satellite/src/components/project/ProjectDashboard.vue
View File

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

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

@ -166,7 +166,7 @@ export default class DashboardArea extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
try {
await this.$router.push(RouteConfig.OnboardingTour.path);
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
} catch (error) {
return;
}
@ -188,7 +188,7 @@ export default class DashboardArea extends Vue {
await this.$store.dispatch(APP_STATE_ACTIONS.CHANGE_STATE, AppState.LOADED);
try {
await this.$router.push(RouteConfig.OnboardingTour.path);
await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.OverviewStep).path);
} catch (error) {
return;
}

7
web/satellite/tests/unit/onboardingTour/steps/AddPaymentStep.spec.ts
View File

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

12
web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts
View File

@ -8,16 +8,24 @@ import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
import { PaymentsHttpApi } from '@/api/payments';
import { router } from '@/router';
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 paymentsModule = makePaymentsModule(paymentsApi);
const store = new Vuex.Store({ modules: { paymentsModule }});
const store = new Vuex.Store({ modules: { projectsModule, paymentsModule }});
describe('OverviewStep.vue', (): void => {
it('renders correctly', async (): Promise<void> => {
const wrapper = mount(OverviewStep, {
localVue,
router,
store,
});

8
web/satellite/tests/unit/onboardingTour/steps/__snapshots__/AddPaymentStep.spec.ts.snap
View File

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

5
web/satellite/tests/unit/onboardingTour/steps/paymentStates/__snapshots__/AddCardState.spec.ts.snap
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.
</span>
</div>
<div class="add-card-state__button">
<!----> <span class="add-card-state__button__label">Add Payment</span>
</div>
<p class="add-card-state__next-label">Next</p>
<vbutton-stub label="Create an Access Grant" width="252px" height="48px" onpress="function () { [native code] }"></vbutton-stub>
</div>
`;

9
web/satellite/tests/unit/onboardingTour/steps/paymentStates/__snapshots__/AddStorjState.spec.ts.snap
View File

@ -20,7 +20,8 @@ exports[`AddStorjState.vue renders correctly 1`] = `
</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>
`;
@ -44,7 +45,8 @@ exports[`AddStorjState.vue renders correctly with completed transaction 1`] = `
</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>
`;
@ -68,6 +70,7 @@ exports[`AddStorjState.vue renders correctly with pending transaction 1`] = `
</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>
`;

2
web/satellite/tests/unit/onboardingTour/steps/paymentStates/tokenSubSteps/__snapshots__/PayingStep.spec.ts.snap
View File

@ -9,6 +9,6 @@ exports[`PayingStep.vue renders correctly 1`] = `
<!---->
</div>
<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>
`;

4
web/satellite/tests/unit/onboardingTour/steps/paymentStates/tokenSubSteps/__snapshots__/VerifyingStep.spec.ts.snap
View File

@ -4,8 +4,8 @@ exports[`VerifyingStep.vue renders correctly 1`] = `
<div class="verifying-step">
<verifyingimage-stub></verifyingimage-stub>
<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
page, or check coin payment status.
Verification may take up to a few hours. In the meantime, see how easy it is to get started visiting
documentation page, or check coin payment status.
</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">
Documentation