web/satellite: remove paywall steps from onboarding flow

WHAT: removed paywall related steps from onboarding flow fixed back button bugs WHY: bug fixing Change-Id: I150127fe9c2b3b134d0cb7ee9581d8fdd415a591
storj · Apr 20, 2021 · f6ec7f9 · f6ec7f9
1 parent f8aaf5c
commit f6ec7f9
Show file tree

Hide file tree

Showing 30 changed files with 49 additions and 1,818 deletions.
diff --git a/web/satellite/src/components/accessGrants/steps/CLIStep.vue b/web/satellite/src/components/accessGrants/steps/CLIStep.vue
@@ -34,6 +34,12 @@ export default class CLIStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.key && !this.$route.params.restrictedKey) {
+            if (this.isOnboardingTour) {
+                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
+
+                return;
+            }
+
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;

diff --git a/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue b/web/satellite/src/components/accessGrants/steps/CreatePassphraseStep.vue
@@ -43,6 +43,12 @@ export default class CreatePassphraseStep extends Vue {
      */
     public async mounted(): Promise<void> {
         if (!this.$route.params.key && !this.$route.params.restrictedKey) {
+            if (this.isOnboardingTour) {
+                await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
+
+                return;
+            }
+
             await this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;

diff --git a/web/satellite/src/components/accessGrants/steps/GatewayStep.vue b/web/satellite/src/components/accessGrants/steps/GatewayStep.vue
@@ -133,6 +133,12 @@ export default class GatewayStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
+            if (this.isOnboardingTour) {
+                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
+
+                return;
+            }
+
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;

diff --git a/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue b/web/satellite/src/components/accessGrants/steps/PermissionsStep.vue
@@ -106,6 +106,12 @@ export default class PermissionsStep extends Vue {
      */
     public async mounted(): Promise<void> {
         if (!this.$route.params.key) {
+            if (this.isOnboardingTour) {
+                await this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
+
+                return;
+            }
+
             this.onBackClick();
 
             return;

diff --git a/web/satellite/src/components/accessGrants/steps/ResultStep.vue b/web/satellite/src/components/accessGrants/steps/ResultStep.vue
@@ -82,6 +82,12 @@ export default class ResultStep extends Vue {
      */
     public mounted(): void {
         if (!this.$route.params.access && !this.$route.params.key && !this.$route.params.resctrictedKey) {
+            if (this.isOnboardingTour) {
+                this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant.with(RouteConfig.AccessGrantName)).path);
+
+                return;
+            }
+
             this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant.with(RouteConfig.NameStep)).path);
 
             return;

diff --git a/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue b/web/satellite/src/components/onboardingTour/OnboardingTourArea.vue
@@ -3,150 +3,42 @@
 
 <template>
     <div class="tour-area">
-        <div class="tour-area__info-bar" v-show="isInfoBarVisible && isPaywallEnabled">
-            <div class="tour-area__info-bar__message">
-                <b class="tour-area__info-bar__message__bold">Try Storj DCS with 50 GB Free after adding a payment method.</b>
-                <p class="tour-area__info-bar__message__regular"> Cancel before your credit runs out and you’ll never be billed.</p>
-            </div>
-            <CloseImage class="tour-area__info-bar__close-img" @click="disableInfoBar"/>
-        </div>
-        <div class="tour-area__content">
-            <router-view/>
-            <img
-                v-if="isAddPaymentState"
-                class="tour-area__content__tardigrade"
-                src="@/../static/images/onboardingTour/tardigrade.png"
-                alt="tardigrade image"
-            >
-        </div>
+        <router-view/>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-import CloseImage from '@/../static/images/onboardingTour/close.svg';
-
 import { RouteConfig } from '@/router';
 
-@Component({
-    components: {
-        CloseImage,
-    },
-})
+@Component
 export default class OnboardingTourArea extends Vue {
-    public isInfoBarVisible: boolean = true;
-
     /**
      * Lifecycle hook after initial render.
      * Sets area to needed state.
      */
     public mounted(): void {
-        if (this.userHasProject && this.userHasAccessGrants) {
-            try {
-                this.$router.push(RouteConfig.ProjectDashboard.path);
-            } catch (error) {
-                return;
-            }
-
-            return;
-        }
-
-        if (this.$route.name === RouteConfig.AccessGrant.name) {
-            this.disableInfoBar();
+        if (this.userHasProject) {
+            this.$router.push(RouteConfig.ProjectDashboard.path).catch(() => {return; });
         }
     }
 
-    /**
-     * Indicates if paywall is enabled.
-     */
-    public get isPaywallEnabled(): boolean {
-        return this.$store.state.paymentsModule.isPaywallEnabled;
-    }
-
-    /**
-     * Sets area's state to creating access grant step.
-     */
-    public setCreateAccessGrantStep(): void {
-        this.$router.push(RouteConfig.OnboardingTour.with(RouteConfig.AccessGrant).path);
-    }
-
-    /**
-     * Disables info bar visibility.
-     */
-    public disableInfoBar(): void {
-        this.isInfoBarVisible = false;
-    }
-
-    /**
-     * Indicates if area is on adding payment method step.
-     */
-    public get isAddPaymentState(): boolean {
-        return this.$route.name === RouteConfig.PaymentStep.name;
-    }
-
     /**
      * Indicates if user has at least one project.
      */
     private get userHasProject(): boolean {
         return this.$store.state.projectsModule.projects.length > 0;
     }
-
-    /**
-     * Indicates if user has at least one access grant.
-     */
-    private get userHasAccessGrants(): boolean {
-        return this.$store.state.accessGrantsModule.page.accessGrants.length > 0;
-    }
 }
 </script>
 
 <style scoped lang="scss">
     .tour-area {
         width: 100%;
-
-        &__info-bar {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            width: calc(100% - 60px);
-            padding: 10px 30px;
-            background-color: #7c8794;
-
-            &__message {
-                display: flex;
-                align-items: center;
-
-                &__bold,
-                &__regular {
-                    margin: 0 10px 0 0;
-                    font-family: 'font_regular', sans-serif;
-                    font-size: 14px;
-                    line-height: 21px;
-                    color: #fff;
-                    word-break: break-word;
-                }
-            }
-
-            &__close-img {
-                cursor: pointer;
-                min-width: 18px;
-            }
-        }
-
-        &__content {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            padding: 110px 0 80px 0;
-            position: relative;
-
-            &__tardigrade {
-                position: absolute;
-                left: 50%;
-                bottom: 0;
-                transform: translate(-50%);
-            }
-        }
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 110px 0 80px 0;
     }
 </style>