web/satellite: update onboarding tour: overview step

WHAT:
updated overview step of onboarding tour. It shows upload data methods instead of tour steps now

WHY:
new onboarding tour

Change-Id: I7ffe9b2b91c2e17dd0c27e5e80a15301f6de16aa

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

@@ -160,12 +160,12 @@ export default class AddPaymentStep extends Vue {
 
     .payment-step {
         font-family: 'font_regular', sans-serif;
-        margin-top: 75px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
-        padding: 0 140px 200px 140px;
+        padding: 0 0 200px 0;
+        max-width: 750px;
         position: relative;
 
         &__title {
@@ -302,18 +302,4 @@ export default class AddPaymentStep extends Vue {
         border-top: 1px solid #afb7c1;
         border-bottom: 1px solid #afb7c1;
     }
-
-    @media screen and (max-width: 1550px) {
-
-        .payment-step {
-            padding: 0 70px 200px 70px;
-        }
-    }
-
-    @media screen and (max-width: 800px) {
-
-        .payment-step {
-            padding: 0 25px 200px 25px;
-        }
-    }
 </style>

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

@@ -8,27 +8,35 @@ import { Component, Vue } from 'vue-property-decorator';
 
 import VButton from '@/components/common/VButton.vue';
 
-import FourthStepIcon from '@/../static/images/common/four.svg';
+import { RouteConfig } from '@/router';
-import FirstStepIcon from '@/../static/images/common/one.svg';
-import ThirdStepIcon from '@/../static/images/common/three.svg';
-import SecondStepIcon from '@/../static/images/common/two.svg';
 
 @Component({
     components: {
         VButton,
-        FirstStepIcon,
-        ThirdStepIcon,
-        SecondStepIcon,
-        FourthStepIcon,
     },
 })
 export default class OverviewStep extends Vue {
     /**
      * Holds button click logic.
-     * Sets tour state to adding payment method state.
+     * Redirects to next step (adding payment method).
      */
-    public onClick(): void {
+    public onAddPaymentClick(): void {
-        this.$emit('setAddPaymentState');
+        this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.PaymentStep).path);
+    }
+
+    /**
+     * Holds button click logic.
+     * Redirects to next step (creating access grant).
+     */
+    public onCreateGrantClick(): void {
+        this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
+    }
+
+    /**
+     * Indicates if paywall is enabled.
+     */
+    public get isPaywallEnabled(): boolean {
+        return this.$store.state.paymentsModule.isPaywallEnabled;
     }
 }
 </script>

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

@@ -2,50 +2,47 @@
 <!--See LICENSE for copying information.-->
 
 <div class="overview-area">
-    <h1 class="overview-area__title">Welcome to Storj</h1>
+    <h1 class="overview-area__title">
+        Welcome to Storj.
+        <br/>
+        Let’s Get Started.
+    </h1>
     <p class="overview-area__sub-title">
-        You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After
+        Follow the docs to start storing data using method below.
-        adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects.
     </p>
     <div class="overview-area__steps-area">
         <div class="overview-area__steps-area__step">
-            <FirstStepIcon class="overview-area__steps-area__step__icon"/>
+            <img class="overview-area__steps-area__step__image" src="@/../static/images/onboardingTour/cli.png" alt="cli image">
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/card.png" alt="card image">
+            <h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
-            <h2 class="overview-area__steps-area__step__title">Add Payment</h2>
+            <p class="overview-area__steps-area__step__info">
-            <span class="overview-area__steps-area__step__subtitle">
+                Quickly upload data directly through the command line interface.
-                Get 50 GB free to try Storj. Cancel anytime.
+            </p>
-            </span>
+            <a
-        </div>
+                class="overview-area__steps-area__step__link"
-        <div class="overview-area__steps-area__step second-step">
+                href="https://documentation.storj.io/setup/cli"
-            <SecondStepIcon class="overview-area__steps-area__step__icon"/>
+                target="_blank"
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/project.jpg" alt="project image">
+                ref="noopener noreferrer"
-            <h2 class="overview-area__steps-area__step__title">Name Your Project</h2>
+            >
-            <span class="overview-area__steps-area__step__subtitle">
+                CLI Docs >
-                Projects are where buckets are created for storing data.
+            </a>
-            </span>
-        </div>
-        <div class="overview-area__steps-area__step third-step">
-            <ThirdStepIcon class="overview-area__steps-area__step__icon"/>
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/api-key.jpg" alt="api keys image">
-            <h2 class="overview-area__steps-area__step__title">Create an API Key</h2>
-            <span class="overview-area__steps-area__step__subtitle">
-                Generate access to your project to upload data.
-            </span>
-        </div>
-        <div class="overview-area__steps-area__step">
-            <FourthStepIcon class="overview-area__steps-area__step__icon"/>
-            <img class="overview-step-image" src="@/../static/images/onboardingTour/uplink.jpg" alt="uplink image">
-            <h2 class="overview-area__steps-area__step__title">Upload Data</h2>
-            <span class="overview-area__steps-area__step__subtitle">
-                Store your data on the secure, decentralized cloud.
-            </span>
         </div>
     </div>
+    <div class="overview-area__divider"/>
+    <p class="overview-area__next-label">Next</p>
     <VButton
-        class="get-started-button"
+        v-if="isPaywallEnabled"
-        label="Get Started"
+        class="overview-area__cta"
-        width="251px"
+        label="Add a Payment Method"
-        height="56px"
+        width="252px"
-        :on-press="onClick"
+        height="48px"
+        :on-press="onAddPaymentClick"
+    />
+    <VButton
+        v-else
+        class="overview-area__cta"
+        label="Create an Access Grant"
+        width="252px"
+        height="48px"
+        :on-press="onCreateGrantClick"
     />
 </div>

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

@@ -8,8 +8,7 @@ h2 {
 }
 
 .overview-area {
-    width: auto;
+    padding: 60px 75px;
-    padding: 75px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -17,47 +16,38 @@ h2 {
     font-family: 'font_regular', sans-serif;
     background-color: #fff;
     border-radius: 6px;
-    margin-top: 25px;
 
     &__title {
         font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
         color: #1b2533;
-        margin-bottom: 25px;
+        margin: 0 0 15px 0;
+        font-weight: bold;
+        font-size: 32px;
+        line-height: 47px;
+        text-align: center;
     }
 
     &__sub-title {
-        font-size: 16px;
+        margin: 0 0 60px 0;
-        line-height: 26px;
-        color: #354049;
-        margin-bottom: 60px;
         text-align: center;
-        max-width: 815px;
+        font-size: 14px;
+        line-height: 22px;
+        color: #000;
     }
 
     &__steps-area {
         display: flex;
+        flex-direction: column;
         align-items: center;
-        justify-content: space-between;
+        margin-bottom: 60px;
-        margin-bottom: 50px;
 
         &__step {
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
             align-items: center;
-            position: relative;
-            max-width: 190px;
-            width: 190px;
-
-            &__icon {
-                position: absolute;
-                top: -15px;
-                left: 80px;
-            }
 
             &__title {
+                font-family: 'font_medium', sans-serif;
                 font-size: 16px;
                 line-height: 26px;
                 text-align: center;
@@ -65,51 +55,50 @@ h2 {
                 margin: 15px 0 5px 0;
             }
 
-            &__subtitle {
+            &__info {
-                font-family: 'font_regular', sans-serif;
+                font-weight: 300;
                 font-size: 14px;
                 line-height: 17px;
-                text-align: center;
+                color: #1b2533;
-                color: #61666b;
                 word-break: break-word;
             }
+
+            &__link {
+                margin-top: 30px;
+                font-family: 'font_bold', sans-serif;
+                font-size: 16px;
+                line-height: 26px;
+                color: #0068dc;
+                justify-self: flex-end;
+            }
         }
     }
+
+    &__divider {
+        width: 100%;
+        height: 1px;
+        background-color: rgba(118, 131, 148, 0.4);
+    }
+
+    &__next-label {
+        font-weight: normal;
+        font-size: 16px;
+        line-height: 26px;
+        color: #768394;
+        margin: 30px 0;
+    }
 }
 
-.second-step {
+@media screen and (max-width: 1050px) {
-    margin: 0 25px 0 50px;
-}
-
-.third-step {
-    margin: 0 50px 0 25px;
-}
-
-@media screen and (max-width: 1450px) {
 
     .overview-area {
-        padding: 75px 30px;
+        padding: 60px 30px;
-    }
-
-    .second-step {
-        margin: 0 10px 0 20px;
-    }
-
-    .third-step {
-        margin: 0 20px 0 10px;
     }
 }
 
 @media screen and (max-width: 900px) {
 
     .overview-area {
-
+        padding: 30px 20px;
-        &__steps-area {
-            flex-direction: column;
-
-            &__step {
-                margin: 0 0 30px 0;
-            }
-        }
     }
 }

web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts

@@ -6,7 +6,6 @@ import Vuex from 'vuex';
 
 import NavigationArea from '@/components/navigation/NavigationArea.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
-import OverviewStep from '@/components/onboardingTour/steps/OverviewStep.vue';
 import ProjectDashboard from '@/components/project/ProjectDashboard.vue';
 
 import { RouteConfig } from '@/router';

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

@@ -1,18 +1,33 @@
 // Copyright (C) 2020 Storj Labs, Inc.
 // See LICENSE for copying information.
 
+import Vuex from 'vuex';
+
 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';
 
-describe('OverviewStep.vue', () => {
+const paymentsApi = new PaymentsHttpApi();
+const paymentsModule = makePaymentsModule(paymentsApi);
+
+const store = new Vuex.Store({ modules: { paymentsModule }});
+
+describe('OverviewStep.vue', (): void => {
     it('renders correctly', async (): Promise<void> => {
-        const wrapper = mount(OverviewStep);
+        const wrapper = mount(OverviewStep, {
+            router,
+            store,
+        });
+
+        await store.commit(PAYMENTS_MUTATIONS.SET_PAYWALL_ENABLED_STATUS, true);
 
         expect(wrapper).toMatchSnapshot();
 
-        await wrapper.find('.get-started-button').trigger('click');
+        await store.commit(PAYMENTS_MUTATIONS.SET_PAYWALL_ENABLED_STATUS, false);
 
-        expect(wrapper.emitted()).toHaveProperty('setAddPaymentState');
+        expect(wrapper).toMatchSnapshot();
     });
 });

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

@@ -2,45 +2,52 @@
 
 exports[`OverviewStep.vue renders correctly 1`] = `
 <div class="overview-area">
-  <h1 class="overview-area__title">Welcome to Storj</h1>
+  <h1 class="overview-area__title">
+    Welcome to Storj.
+    <br>
+    Let’s Get Started.
+  </h1>
   <p class="overview-area__sub-title">
-    You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After
+    Follow the docs to start storing data using method below.
-    adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects.
   </p>
   <div class="overview-area__steps-area">
-    <div class="overview-area__steps-area__step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
+    <div class="overview-area__steps-area__step"><img src="@/../static/images/onboardingTour/cli.png" alt="cli image" class="overview-area__steps-area__step__image">
-        <circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
+      <h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
-        <path d="M17.0916 9.36364H14.7791L11.8984 11.1875V13.3693L14.5632 11.6989H14.6314V21H17.0916V9.36364Z" fill="white"></path>
+      <p class="overview-area__steps-area__step__info">
-      </svg> <img src="@/../static/images/onboardingTour/card.png" alt="card image" class="overview-step-image">
+        Quickly upload data directly through the command line interface.
-      <h2 class="overview-area__steps-area__step__title">Add Payment</h2> <span class="overview-area__steps-area__step__subtitle">
+      </p> <a href="https://documentation.storj.io/setup/cli" target="_blank" class="overview-area__steps-area__step__link">
-                Get 50 GB free to try Storj. Cancel anytime.
+        CLI Docs &gt;
-            </span>
+      </a>
-    </div>
-    <div class="overview-area__steps-area__step second-step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
-        <circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
-        <path d="M11.4041 21H19.6996V18.9886H14.8132V18.9091L16.5121 17.2443C18.9041 15.0625 19.5462 13.9716 19.5462 12.6477C19.5462 10.6307 17.8984 9.20455 15.4041 9.20455C12.9609 9.20455 11.2848 10.6648 11.2905 12.9489H13.6257C13.62 11.8352 14.3246 11.1534 15.3871 11.1534C16.4098 11.1534 17.1712 11.7898 17.1712 12.8125C17.1712 13.7386 16.603 14.375 15.5462 15.392L11.4041 19.2273V21Z" fill="white"></path>
-      </svg> <img src="@/../static/images/onboardingTour/project.jpg" alt="project image" class="overview-step-image">
-      <h2 class="overview-area__steps-area__step__title">Name Your Project</h2> <span class="overview-area__steps-area__step__subtitle">
-                Projects are where buckets are created for storing data.
-            </span>
-    </div>
-    <div class="overview-area__steps-area__step third-step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
-        <circle cx="15" cy="15" r="15" fill="#519CFF"></circle>
-        <path d="M15.4709 21.1591C18.0845 21.1591 19.9538 19.7216 19.9482 17.733C19.9538 16.2841 19.0334 15.25 17.3232 15.0341V14.9432C18.6243 14.7102 19.522 13.7898 19.5163 12.483C19.522 10.6477 17.9141 9.20455 15.505 9.20455C13.1186 9.20455 11.3232 10.6023 11.2891 12.6136H13.647C13.6754 11.7273 14.4879 11.1534 15.4936 11.1534C16.4879 11.1534 17.1527 11.7557 17.147 12.6307C17.1527 13.5455 16.3743 14.1648 15.255 14.1648H14.1697V15.9716H15.255C16.5732 15.9716 17.397 16.6307 17.3913 17.5682C17.397 18.4943 16.6016 19.1307 15.4766 19.1307C14.3913 19.1307 13.5788 18.5625 13.5334 17.7102H11.0561C11.0959 19.7443 12.9141 21.1591 15.4709 21.1591Z" fill="white"></path>
-      </svg> <img src="@/../static/images/onboardingTour/api-key.jpg" alt="api keys image" class="overview-step-image">
-      <h2 class="overview-area__steps-area__step__title">Create an API Key</h2> <span class="overview-area__steps-area__step__subtitle">
-                Generate access to your project to upload data.
-            </span>
-    </div>
-    <div class="overview-area__steps-area__step"><svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="overview-area__steps-area__step__icon">
-        <circle cx="15" cy="15" r="15" fill="#2582FF"></circle>
-        <path d="M10.8452 18.9545H16.4304V21H18.7827V18.9545H20.2259V16.983H18.7827V9.36364H15.7031L10.8452 17.017V18.9545ZM16.4759 16.983H13.3224V16.892L16.3849 12.0455H16.4759V16.983Z" fill="white"></path>
-      </svg> <img src="@/../static/images/onboardingTour/uplink.jpg" alt="uplink image" class="overview-step-image">
-      <h2 class="overview-area__steps-area__step__title">Upload Data</h2> <span class="overview-area__steps-area__step__subtitle">
-                Store your data on the secure, decentralized cloud.
-            </span>
     </div>
   </div>
-  <div class="get-started-button container" style="width: 251px; height: 56px;"><span class="label">Get Started</span></div>
+  <div class="overview-area__divider"></div>
+  <p class="overview-area__next-label">Next</p>
+  <div class="overview-area__cta container" style="width: 252px; height: 48px;"><span class="label">Add a Payment Method</span></div>
+</div>
+`;
+
+exports[`OverviewStep.vue renders correctly 2`] = `
+<div class="overview-area">
+  <h1 class="overview-area__title">
+    Welcome to Storj.
+    <br>
+    Let’s Get Started.
+  </h1>
+  <p class="overview-area__sub-title">
+    Follow the docs to start storing data using method below.
+  </p>
+  <div class="overview-area__steps-area">
+    <div class="overview-area__steps-area__step"><img src="@/../static/images/onboardingTour/cli.png" alt="cli image" class="overview-area__steps-area__step__image">
+      <h2 class="overview-area__steps-area__step__title">CLI Tool</h2>
+      <p class="overview-area__steps-area__step__info">
+        Quickly upload data directly through the command line interface.
+      </p> <a href="https://documentation.storj.io/setup/cli" target="_blank" class="overview-area__steps-area__step__link">
+        CLI Docs &gt;
+      </a>
+    </div>
+  </div>
+  <div class="overview-area__divider"></div>
+  <p class="overview-area__next-label">Next</p>
+  <div class="overview-area__cta container" style="width: 252px; height: 48px;"><span class="label">Create an Access Grant</span></div>
 </div>
 `;