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

web/satellite/src/components/onboardingTour/OnboardingTourArea.vue

@@ -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.
      */

web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue

@@ -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 {
+    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>
@@ -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 {

web/satellite/src/components/onboardingTour/steps/OverviewStep.vue

@@ -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 {
+    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 {
         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>
 

web/satellite/src/components/onboardingTour/steps/overviewStep.html

@@ -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>

web/satellite/src/components/onboardingTour/steps/paymentStates/AddCardState.vue

@@ -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">
+        <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>
 </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, {
+            const FIRST_PAGE = 1;
-            project_id: this.$store.getters.selectedProject.id,
+            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 {
+        &__next-label {
-            display: flex;
+            font-weight: normal;
-            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;
             font-size: 16px;
-                line-height: 23px;
+            line-height: 26px;
-                color: #fff;
+            color: #768394;
-                word-break: keep-all;
+            margin: 35px 0;
-                white-space: nowrap;
-            }
-
-            &:hover {
-                background-color: #0059d0;
-            }
         }
     }
 

web/satellite/src/components/onboardingTour/steps/paymentStates/AddStorjState.vue

@@ -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"
+            label="Create an Acess Grant"
-            :on-press="createProject"
+            :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>

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

@@ -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,

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

@@ -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
+        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>
     <div class="verifying-step__buttons-area">
         <a

web/satellite/src/components/project/ProjectDashboard.vue

@@ -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;
         }

web/satellite/src/views/DashboardArea.vue

@@ -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;
             }

web/satellite/tests/unit/onboardingTour/steps/AddPaymentStep.spec.ts

@@ -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> => {

web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts

@@ -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,
         });

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

@@ -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.
+    Experience the decentralized cloud for free! If you find our network isn’t for you, <b class="bold">cancel
-  </p>
+      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.
+    Experience the decentralized cloud for free! If you find our network isn’t for you, <b class="bold">cancel
-  </p>
+      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>

web/satellite/tests/unit/onboardingTour/steps/paymentStates/__snapshots__/AddCardState.spec.ts.snap

@@ -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">
+  <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>
 `;

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

@@ -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>
 `;

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

@@ -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>
 `;

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

@@ -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
+        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>
   <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