diff --git a/web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue b/web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue index 257995788..2c4f03466 100644 --- a/web/satellite/src/components/onboardingTour/steps/AddPaymentStep.vue +++ b/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; - } - } \ No newline at end of file diff --git a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue b/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue index 7f2801912..527d88375 100644 --- a/web/satellite/src/components/onboardingTour/steps/OverviewStep.vue +++ b/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 FirstStepIcon from '@/../static/images/common/one.svg'; -import ThirdStepIcon from '@/../static/images/common/three.svg'; -import SecondStepIcon from '@/../static/images/common/two.svg'; +import { RouteConfig } from '@/router'; @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 { - this.$emit('setAddPaymentState'); + public onAddPaymentClick(): void { + 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; } } diff --git a/web/satellite/src/components/onboardingTour/steps/overviewStep.html b/web/satellite/src/components/onboardingTour/steps/overviewStep.html index c87d59995..1a09a5b21 100644 --- a/web/satellite/src/components/onboardingTour/steps/overviewStep.html +++ b/web/satellite/src/components/onboardingTour/steps/overviewStep.html @@ -2,50 +2,47 @@
-

Welcome to Storj

+

+ Welcome to Storj. +
+ Let’s Get Started. +

- You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After - adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects. + Follow the docs to start storing data using method below.

- - card image -

Add Payment

- - Get 50 GB free to try Storj. Cancel anytime. - -
-
- - project image -

Name Your Project

- - Projects are where buckets are created for storing data. - -
-
- - api keys image -

Create an API Key

- - Generate access to your project to upload data. - -
-
- - uplink image -

Upload Data

- - Store your data on the secure, decentralized cloud. - + cli image +

CLI Tool

+

+ Quickly upload data directly through the command line interface. +

+ + CLI Docs > +
+
+

Next

+
diff --git a/web/satellite/src/components/onboardingTour/steps/overviewStep.scss b/web/satellite/src/components/onboardingTour/steps/overviewStep.scss index 80df37130..4c25db26b 100644 --- a/web/satellite/src/components/onboardingTour/steps/overviewStep.scss +++ b/web/satellite/src/components/onboardingTour/steps/overviewStep.scss @@ -8,8 +8,7 @@ h2 { } .overview-area { - width: auto; - padding: 75px; + padding: 60px 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; - line-height: 26px; - color: #354049; - margin-bottom: 60px; + margin: 0 0 60px 0; 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: 50px; + margin-bottom: 60px; &__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 { - font-family: 'font_regular', sans-serif; + &__info { + font-weight: 300; font-size: 14px; line-height: 17px; - text-align: center; - color: #61666b; + color: #1b2533; 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 { - margin: 0 25px 0 50px; -} - -.third-step { - margin: 0 50px 0 25px; -} - -@media screen and (max-width: 1450px) { +@media screen and (max-width: 1050px) { .overview-area { - padding: 75px 30px; - } - - .second-step { - margin: 0 10px 0 20px; - } - - .third-step { - margin: 0 20px 0 10px; + padding: 60px 30px; } } @media screen and (max-width: 900px) { .overview-area { - - &__steps-area { - flex-direction: column; - - &__step { - margin: 0 0 30px 0; - } - } + padding: 30px 20px; } } diff --git a/web/satellite/static/images/onboardingTour/api-key.jpg b/web/satellite/static/images/onboardingTour/api-key.jpg deleted file mode 100644 index 34fabc870..000000000 Binary files a/web/satellite/static/images/onboardingTour/api-key.jpg and /dev/null differ diff --git a/web/satellite/static/images/onboardingTour/card.png b/web/satellite/static/images/onboardingTour/card.png deleted file mode 100644 index da76e2b46..000000000 Binary files a/web/satellite/static/images/onboardingTour/card.png and /dev/null differ diff --git a/web/satellite/static/images/onboardingTour/cli.png b/web/satellite/static/images/onboardingTour/cli.png new file mode 100644 index 000000000..469a73245 Binary files /dev/null and b/web/satellite/static/images/onboardingTour/cli.png differ diff --git a/web/satellite/static/images/onboardingTour/developer.png b/web/satellite/static/images/onboardingTour/developer.png new file mode 100644 index 000000000..96c7deae9 Binary files /dev/null and b/web/satellite/static/images/onboardingTour/developer.png differ diff --git a/web/satellite/static/images/onboardingTour/filezilla.png b/web/satellite/static/images/onboardingTour/filezilla.png new file mode 100644 index 000000000..5096d5c68 Binary files /dev/null and b/web/satellite/static/images/onboardingTour/filezilla.png differ diff --git a/web/satellite/static/images/onboardingTour/gateway.png b/web/satellite/static/images/onboardingTour/gateway.png new file mode 100644 index 000000000..28b5697f8 Binary files /dev/null and b/web/satellite/static/images/onboardingTour/gateway.png differ diff --git a/web/satellite/static/images/onboardingTour/project.jpg b/web/satellite/static/images/onboardingTour/project.jpg deleted file mode 100644 index 5a450fc5c..000000000 Binary files a/web/satellite/static/images/onboardingTour/project.jpg and /dev/null differ diff --git a/web/satellite/static/images/onboardingTour/uplink.jpg b/web/satellite/static/images/onboardingTour/uplink.jpg deleted file mode 100644 index 1d0efe733..000000000 Binary files a/web/satellite/static/images/onboardingTour/uplink.jpg and /dev/null differ diff --git a/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts b/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts index e5dae71a6..01d2a64fe 100644 --- a/web/satellite/tests/unit/navigationArea/NavigationArea.spec.ts +++ b/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'; diff --git a/web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts b/web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts index 782f23915..f7a95cae9 100644 --- a/web/satellite/tests/unit/onboardingTour/steps/OverviewStep.spec.ts +++ b/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 => { - 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(); }); }); diff --git a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap index f860aea64..7ca4f1845 100644 --- a/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap +++ b/web/satellite/tests/unit/onboardingTour/steps/__snapshots__/OverviewStep.spec.ts.snap @@ -2,45 +2,52 @@ exports[`OverviewStep.vue renders correctly 1`] = `
-

Welcome to Storj

+

+ Welcome to Storj. +
+ Let’s Get Started. +

- You’re just a few steps away from uploading your first object to the 100% secure, decentralized cloud. After - adding payment, you’ll create a project, API key, get set up with Storj, and start uploading objects. + Follow the docs to start storing data using method below.

-
- - - card image -

Add Payment

- Get 50 GB free to try Storj. Cancel anytime. - -
-
- - - project image -

Name Your Project

- Projects are where buckets are created for storing data. - -
-
- - - api keys image -

Create an API Key

- Generate access to your project to upload data. - -
-
- - - uplink image -

Upload Data

- Store your data on the secure, decentralized cloud. - +
cli image +

CLI Tool

+

+ Quickly upload data directly through the command line interface. +

+ CLI Docs > +
-
Get Started
+
+

Next

+
Add a Payment Method
+
+`; + +exports[`OverviewStep.vue renders correctly 2`] = ` +
+

+ Welcome to Storj. +
+ Let’s Get Started. +

+

+ Follow the docs to start storing data using method below. +

+
+
cli image +

CLI Tool

+

+ Quickly upload data directly through the command line interface. +

+ CLI Docs > + +
+
+
+

Next

+
Create an Access Grant
`;