From 149b59069f6df3a322d346f99aa45f6917065e0f Mon Sep 17 00:00:00 2001
From: Vitalii <takur12345@gmail.com>
Date: Thu, 20 Oct 2022 16:26:28 +0300
Subject: [PATCH] satellite/{web, console}: removed old object flow

Removed old flow along with a feature flag

Issue:
https://github.com/storj/storj/issues/5166

Change-Id: I85cfabbf94e910c9d5efb01ef850f6b888a13f71
---
 satellite/console/consoleweb/server.go        |   3 -
 scripts/testdata/satellite-config.yaml.lock   |   3 -
 testsuite/ui/uitest/run.go                    |   1 -
 web/satellite/index.html                      |   1 -
 web/satellite/src/App.vue                     |   5 -
 .../src/components/browser/FileBrowser.vue    |  10 +-
 .../components/common/GeneratePassphrase.vue  | 408 ------------------
 .../navigation/MobileNavigation.vue           |   2 +-
 .../navigation/ProjectSelection.vue           |   2 +-
 .../src/components/objects/BucketDetails.vue  |  11 +-
 .../src/components/objects/BucketsView.vue    |  93 +---
 .../src/components/objects/EncryptData.vue    | 317 --------------
 web/satellite/src/router/index.ts             |   7 -
 web/satellite/src/store/modules/appState.ts   |   7 -
 web/satellite/src/store/mutationConstants.ts  |   1 -
 .../src/utils/constants/actionNames.ts        |   1 -
 .../unit/common/GeneratePassphrase.spec.ts    |  30 --
 .../GeneratePassphrase.spec.ts.snap           |  41 --
 18 files changed, 8 insertions(+), 935 deletions(-)
 delete mode 100644 web/satellite/src/components/common/GeneratePassphrase.vue
 delete mode 100644 web/satellite/src/components/objects/EncryptData.vue
 delete mode 100644 web/satellite/tests/unit/common/GeneratePassphrase.spec.ts
 delete mode 100644 web/satellite/tests/unit/common/__snapshots__/GeneratePassphrase.spec.ts.snap

diff --git a/satellite/console/consoleweb/server.go b/satellite/console/consoleweb/server.go
index 60f5c0a8a..563301b42 100644
--- a/satellite/console/consoleweb/server.go
+++ b/satellite/console/consoleweb/server.go
@@ -92,7 +92,6 @@ type Config struct {
 	LinksharingURL                  string             `help:"url link for linksharing requests" default:"https://link.storjshare.io" devDefault:"http://localhost:8001"`
 	PathwayOverviewEnabled          bool               `help:"indicates if the overview onboarding step should render with pathways" default:"true"`
 	NewProjectDashboard             bool               `help:"indicates if new project dashboard should be used" default:"true"`
-	NewObjectsFlow                  bool               `help:"indicates if new objects flow should be used" default:"true"`
 	NewAccessGrantFlow              bool               `help:"indicates if new access grant flow should be used" default:"true"`
 	NewBillingScreen                bool               `help:"indicates if new billing screens should be used" default:"false"`
 	GeneratedAPIEnabled             bool               `help:"indicates if generated console api should be used" default:"false"`
@@ -454,7 +453,6 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
 		NewProjectDashboard             bool
 		DefaultPaidStorageLimit         memory.Size
 		DefaultPaidBandwidthLimit       memory.Size
-		NewObjectsFlow                  bool
 		NewAccessGrantFlow              bool
 		NewBillingScreen                bool
 		InactivityTimerEnabled          bool
@@ -499,7 +497,6 @@ func (server *Server) appHandler(w http.ResponseWriter, r *http.Request) {
 	data.LoginHcaptchaEnabled = server.config.Captcha.Login.Hcaptcha.Enabled
 	data.LoginHcaptchaSiteKey = server.config.Captcha.Login.Hcaptcha.SiteKey
 	data.NewProjectDashboard = server.config.NewProjectDashboard
-	data.NewObjectsFlow = server.config.NewObjectsFlow
 	data.NewAccessGrantFlow = server.config.NewAccessGrantFlow
 	data.NewBillingScreen = server.config.NewBillingScreen
 	data.InactivityTimerEnabled = server.config.Session.InactivityTimerEnabled
diff --git a/scripts/testdata/satellite-config.yaml.lock b/scripts/testdata/satellite-config.yaml.lock
index b7298775e..3694e9a1a 100755
--- a/scripts/testdata/satellite-config.yaml.lock
+++ b/scripts/testdata/satellite-config.yaml.lock
@@ -208,9 +208,6 @@ compensation.withheld-percents: 75,75,75,50,50,50,25,25,25,0,0,0,0,0,0
 # indicates if new billing screens should be used
 # console.new-billing-screen: false
 
-# indicates if new objects flow should be used
-# console.new-objects-flow: true
-
 # indicates if new project dashboard should be used
 # console.new-project-dashboard: true
 
diff --git a/testsuite/ui/uitest/run.go b/testsuite/ui/uitest/run.go
index 8366bea12..cc0ef28cd 100644
--- a/testsuite/ui/uitest/run.go
+++ b/testsuite/ui/uitest/run.go
@@ -34,7 +34,6 @@ func configureSatellite(log *zap.Logger, index int, config *satellite.Config) {
 	if dir := os.Getenv("STORJ_TEST_SATELLITE_WEB"); dir != "" {
 		config.Console.StaticDir = dir
 	}
-	config.Console.NewObjectsFlow = true
 	config.Console.NewAccessGrantFlow = true
 	config.Console.NewProjectDashboard = true
 	config.Console.CouponCodeBillingUIEnabled = true
diff --git a/web/satellite/index.html b/web/satellite/index.html
index 0ab9af1e3..4d731c723 100644
--- a/web/satellite/index.html
+++ b/web/satellite/index.html
@@ -34,7 +34,6 @@
         <meta name="new-project-dashboard" content="{{ .NewProjectDashboard }}">
         <meta name="default-paid-storage-limit" content="{{ .DefaultPaidStorageLimit }}">
         <meta name="default-paid-bandwidth-limit" content="{{ .DefaultPaidBandwidthLimit }}">
-        <meta name="new-objects-flow" content="{{ .NewObjectsFlow }}">
         <meta name="new-access-grant-flow" content="{{ .NewAccessGrantFlow }}">
         <meta name="new-billing-screen" content="{{ .NewBillingScreen }}">
         <meta name="inactivity-timer-enabled" content="{{ .InactivityTimerEnabled }}">
diff --git a/web/satellite/src/App.vue b/web/satellite/src/App.vue
index 692be1a94..c9ee4b726 100644
--- a/web/satellite/src/App.vue
+++ b/web/satellite/src/App.vue
@@ -40,7 +40,6 @@ export default class App extends Vue {
         const couponCodeBillingUIEnabled = MetaUtils.getMetaContent('coupon-code-billing-ui-enabled');
         const couponCodeSignupUIEnabled = MetaUtils.getMetaContent('coupon-code-signup-ui-enabled');
         const isNewProjectDashboard = MetaUtils.getMetaContent('new-project-dashboard');
-        const isNewObjectsFlow = MetaUtils.getMetaContent('new-objects-flow');
 
         if (satelliteName) {
             this.$store.dispatch(APP_STATE_ACTIONS.SET_SATELLITE_NAME, satelliteName);
@@ -72,10 +71,6 @@ export default class App extends Vue {
         if (isNewProjectDashboard) {
             this.$store.dispatch(APP_STATE_ACTIONS.SET_PROJECT_DASHBOARD_STATUS, isNewProjectDashboard === 'true');
         }
-
-        if (isNewObjectsFlow) {
-            this.$store.dispatch(APP_STATE_ACTIONS.SET_OBJECTS_FLOW_STATUS, isNewObjectsFlow === 'true');
-        }
     }
 }
 </script>
diff --git a/web/satellite/src/components/browser/FileBrowser.vue b/web/satellite/src/components/browser/FileBrowser.vue
index 93d77f08b..8d44c541d 100644
--- a/web/satellite/src/components/browser/FileBrowser.vue
+++ b/web/satellite/src/components/browser/FileBrowser.vue
@@ -357,13 +357,6 @@ export default class FileBrowser extends Vue {
         return this.$store.state.objectsModule.fileComponentBucketName;
     }
 
-    /**
-     * Returns objects flow status from store.
-     */
-    private get isNewObjectsFlow(): string {
-        return this.$store.state.appStateModule.isNewObjectsFlow;
-    }
-
     /**
      * Return a boolean signifying whether the upload display is allowed to be shown.
      */
@@ -391,8 +384,7 @@ export default class FileBrowser extends Vue {
      */
     public async created(): Promise<void> {
         if (!this.bucket) {
-            const path = this.isNewObjectsFlow ? RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path :
-                RouteConfig.Buckets.with(RouteConfig.EncryptData).path;
+            const path = RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path;
 
             this.analytics.pageVisit(path);
             await this.$router.push(path);
diff --git a/web/satellite/src/components/common/GeneratePassphrase.vue b/web/satellite/src/components/common/GeneratePassphrase.vue
deleted file mode 100644
index a0708606e..000000000
--- a/web/satellite/src/components/common/GeneratePassphrase.vue
+++ /dev/null
@@ -1,408 +0,0 @@
-// Copyright (C) 2021 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="encrypt-container">
-        <EncryptIcon />
-        <h1 class="encrypt-container__title" aria-roledescription="enc-title">Encryption passphrase</h1>
-        <p class="encrypt-container__info">
-            The encryption passphrase is used to encrypt and access the data that you upload to Storj.
-        </p>
-        <div class="encrypt-container__functional">
-            <div class="encrypt-container__functional__header">
-                <p class="encrypt-container__functional__header__gen" :class="{ active: isGenerate }" @click="setToGenerate">
-                    Generate a new passphrase
-                </p>
-                <div class="encrypt-container__functional__header__right" :class="{ active: !isGenerate }">
-                    <p
-                        class="encrypt-container__functional__header__right__enter"
-                        :class="{ active: !isGenerate }"
-                        aria-roledescription="enter-passphrase-label"
-                        @click="setToEnter"
-                    >
-                        Enter your own passphrase
-                    </p>
-                    <VInfo class="encrypt-container__functional__header__right__info-button">
-                        <template #icon>
-                            <InfoIcon class="encrypt-container__functional__header__right__info-button__image" :class="{ active: !isGenerate }" />
-                        </template>
-                        <template #message>
-                            <p class="encrypt-container__functional__header__right__info-button__message">
-                                We strongly encourage you to use a mnemonic phrase, which is automatically generated on
-                                the client-side for you. Alternatively, you can enter your own passphrase.
-                            </p>
-                        </template>
-                    </VInfo>
-                </div>
-            </div>
-            <div v-if="isGenerate" class="encrypt-container__functional__generate">
-                <p class="encrypt-container__functional__generate__value">{{ passphrase }}</p>
-                <VButton
-                    class="encrypt-container__functional__generate__button"
-                    label="Copy"
-                    width="66px"
-                    height="30px"
-                    :is-blue-white="true"
-                    :is-uppercase="true"
-                    :on-press="onCopyClick"
-                />
-            </div>
-            <div v-else class="encrypt-container__functional__enter">
-                <VInput
-                    label="Your Passphrase"
-                    placeholder="Enter a passphrase here..."
-                    :error="enterError"
-                    role-description="passphrase"
-                    is-password
-                    :disabled="isLoading"
-                    @setData="setPassphrase"
-                />
-            </div>
-            <h2 class="encrypt-container__functional__warning-title" aria-roledescription="warning-title">
-                Save your encryption passphrase
-            </h2>
-            <p class="encrypt-container__functional__warning-msg">
-                Please note that Storj does not know or store your encryption passphrase. If you lose it, you will not
-                be able to recover your files.
-            </p>
-            <p class="encrypt-container__functional__download" @click="onDownloadClick">Download as a text file</p>
-            <VCheckbox
-                class="encrypt-container__functional__checkbox"
-                label="I understand, and I have saved the passphrase."
-                :is-checkbox-error="isCheckboxError"
-                @setData="setSavingConfirmation"
-            />
-        </div>
-        <div class="encrypt-container__buttons">
-            <VButton
-                v-if="isNewObjectsFlow"
-                class="encrypt-container__buttons__back"
-                label="< Back"
-                height="64px"
-                border-radius="62px"
-                :is-blue-white="true"
-                :on-press="onBackClick"
-                :is-disabled="isLoading"
-            />
-            <VButton
-                label="Next >"
-                height="64px"
-                border-radius="62px"
-                :on-press="onNextButtonClick"
-                :is-disabled="isLoading || !isSavingConfirmed"
-            />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { generateMnemonic } from 'bip39';
-
-import { LocalData, UserIDPassSalt } from '@/utils/localData';
-import { Download } from '@/utils/download';
-
-import VButton from '@/components/common/VButton.vue';
-import VInfo from '@/components/common/VInfo.vue';
-import VInput from '@/components/common/VInput.vue';
-import VCheckbox from '@/components/common/VCheckbox.vue';
-
-import EncryptIcon from '@/../static/images/objects/encrypt.svg';
-import InfoIcon from '@/../static/images/common/smallGreyInfo.svg';
-
-// @vue/component
-@Component({
-    components: {
-        EncryptIcon,
-        InfoIcon,
-        VInfo,
-        VButton,
-        VInput,
-        VCheckbox,
-    },
-})
-export default class GeneratePassphrase extends Vue {
-    @Prop({ default: () => () => null })
-    public readonly onNextClick: () => unknown;
-    @Prop({ default: () => () => null })
-    public readonly onBackClick: () => unknown;
-    @Prop({ default: () => () => null })
-    public readonly setParentPassphrase: (passphrase: string) => void;
-    @Prop({ default: false })
-    public readonly isLoading: boolean;
-
-    public isGenerate = true;
-    public enterError = '';
-    public passphrase = '';
-    public isSavingConfirmed = false;
-    public isCheckboxError = false;
-
-    /**
-     * Lifecycle hook after initial render.
-     * Chooses correct state and generates mnemonic.
-     */
-    public mounted(): void {
-        const idPassSalt: UserIDPassSalt | null = LocalData.getUserIDPassSalt();
-        if (idPassSalt && idPassSalt.userId === this.$store.getters.user.id) {
-            this.isGenerate = false;
-
-            return;
-        }
-
-        this.passphrase = generateMnemonic();
-        this.setParentPassphrase(this.passphrase);
-    }
-
-    public setSavingConfirmation(value: boolean): void {
-        this.isSavingConfirmed = value;
-    }
-
-    /**
-     * Holds on copy button click logic.
-     * Copies passphrase to clipboard.
-     */
-    public onCopyClick(): void {
-        this.$copyText(this.passphrase);
-        this.$notify.success('Passphrase was copied successfully');
-    }
-
-    /**
-     * Holds on download button click logic.
-     * Downloads encryption passphrase as a txt file.
-     */
-    public onDownloadClick(): void {
-        if (!this.passphrase) {
-            this.enterError = 'Can\'t be empty!';
-
-            return;
-        }
-
-        const fileName = 'StorjEncryptionPassphrase.txt';
-
-        Download.file(this.passphrase, fileName);
-    }
-
-    /**
-     * Sets passphrase from child component.
-     */
-    public setPassphrase(passphrase: string): void {
-        if (this.enterError) this.enterError = '';
-
-        this.passphrase = passphrase;
-        this.setParentPassphrase(this.passphrase);
-    }
-
-    /**
-     * Sets view state to enter passphrase.
-     */
-    public setToEnter(): void {
-        this.passphrase = '';
-        this.setParentPassphrase(this.passphrase);
-        this.isGenerate = false;
-    }
-
-    /**
-     * Sets view state to generate passphrase.
-     */
-    public setToGenerate(): void {
-        if (this.enterError) this.enterError = '';
-
-        this.passphrase = generateMnemonic();
-        this.setParentPassphrase(this.passphrase);
-        this.isGenerate = true;
-    }
-
-    /**
-     * Holds on next button click logic.
-     */
-    public async onNextButtonClick(): Promise<void> {
-        if (!this.passphrase) {
-            this.enterError = 'Can\'t be empty!';
-
-            return;
-        }
-
-        if (!this.isSavingConfirmed) {
-            this.isCheckboxError = true;
-
-            return;
-        }
-
-        await this.onNextClick();
-    }
-
-    /**
-     * Returns objects flow status from store.
-     */
-    public get isNewObjectsFlow(): string {
-        return this.$store.state.appStateModule.isNewObjectsFlow;
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .encrypt-container {
-        font-family: 'font_regular', sans-serif;
-        padding: 40px 60px 60px;
-        max-width: 500px;
-        background: #fcfcfc;
-        box-shadow: 0 0 32px rgb(0 0 0 / 4%);
-        border-radius: 20px;
-        margin: 30px auto 0;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        &__title {
-            font-family: 'font_bold', sans-serif;
-            font-size: 36px;
-            line-height: 56px;
-            letter-spacing: 1px;
-            color: #14142b;
-            margin: 10px 0;
-        }
-
-        &__info {
-            font-size: 16px;
-            line-height: 28px;
-            letter-spacing: 0.75px;
-            color: #1b2533;
-            margin-bottom: 20px;
-            text-align: center;
-            max-width: 420px;
-        }
-
-        &__functional {
-            border: 1px solid #e6e9ef;
-            border-radius: 10px;
-            padding: 20px 0;
-
-            &__header {
-                width: calc(100% - 50px);
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 0 25px;
-                border-bottom: 1px solid #e6e9ef;
-
-                &__gen {
-                    font-family: 'font_medium', sans-serif;
-                    font-size: 14px;
-                    line-height: 17px;
-                    color: #a9b5c1;
-                    padding-bottom: 20px;
-                    border-bottom: 4px solid #fff;
-                    cursor: pointer;
-                    white-space: nowrap;
-                }
-
-                &__right {
-                    display: flex;
-                    align-items: flex-start;
-                    padding-bottom: 20px;
-                    border-bottom: 4px solid #fff;
-                    cursor: pointer;
-
-                    &__enter {
-                        font-family: 'font_medium', sans-serif;
-                        font-size: 14px;
-                        line-height: 17px;
-                        color: #a9b5c1;
-                        margin-right: 10px;
-                        white-space: nowrap;
-                    }
-
-                    &__info-button {
-
-                        &__image {
-                            cursor: pointer;
-                        }
-
-                        &__message {
-                            color: #586c86;
-                            font-size: 16px;
-                            line-height: 21px;
-                        }
-                    }
-                }
-            }
-
-            &__generate {
-                display: flex;
-                align-items: center;
-                padding: 16px 22px;
-                background: #eff0f7;
-                border-radius: 10px;
-                margin: 25px 25px 0;
-
-                &__value {
-                    font-size: 14px;
-                    line-height: 25px;
-                    color: #384b65;
-                }
-
-                &__button {
-                    margin-left: 32px;
-                    min-width: 66px;
-                }
-            }
-
-            &__enter {
-                margin: 25px 25px 0;
-            }
-
-            &__download {
-                font-family: 'font_bold', sans-serif;
-                font-size: 16px;
-                line-height: 19px;
-                color: #0068dc;
-                cursor: pointer;
-                margin: 20px 25px;
-                display: inline-block;
-            }
-
-            &__warning-title {
-                font-family: 'font_bold', sans-serif;
-                font-size: 16px;
-                line-height: 19px;
-                color: #1b2533;
-                margin: 25px 25px 10px;
-            }
-
-            &__warning-msg {
-                font-size: 14px;
-                line-height: 20px;
-                color: #1b2533;
-                margin: 0 25px;
-            }
-
-            &__checkbox {
-                margin: 0 25px;
-            }
-        }
-
-        &__buttons {
-            width: 100%;
-            display: flex;
-            align-items: center;
-            margin-top: 30px;
-
-            &__back {
-                margin-right: 24px;
-            }
-        }
-    }
-
-    .active {
-        color: var(--c-blue-3);
-        border-color: var(--c-blue-3);
-    }
-
-    .active svg rect {
-        fill: var(--c-blue-3);
-    }
-
-    :deep(.info__box__message) {
-        min-width: 440px;
-    }
-</style>
diff --git a/web/satellite/src/components/navigation/MobileNavigation.vue b/web/satellite/src/components/navigation/MobileNavigation.vue
index 14e63e996..22d1cbe8e 100644
--- a/web/satellite/src/components/navigation/MobileNavigation.vue
+++ b/web/satellite/src/components/navigation/MobileNavigation.vue
@@ -348,7 +348,7 @@ export default class MobileNavigation extends Vue {
     private get isBucketsView(): boolean {
         const currentRoute = this.$route.path;
 
-        return currentRoute.includes(RouteConfig.BucketsManagement.path) || currentRoute.includes(RouteConfig.EncryptData.path);
+        return currentRoute.includes(RouteConfig.BucketsManagement.path);
     }
 
     /**
diff --git a/web/satellite/src/components/navigation/ProjectSelection.vue b/web/satellite/src/components/navigation/ProjectSelection.vue
index b2fd8dd2e..508f4e213 100644
--- a/web/satellite/src/components/navigation/ProjectSelection.vue
+++ b/web/satellite/src/components/navigation/ProjectSelection.vue
@@ -285,7 +285,7 @@ export default class ProjectSelection extends Vue {
     private get isBucketsView(): boolean {
         const currentRoute = this.$route.path;
 
-        return currentRoute.includes(RouteConfig.BucketsManagement.path) || currentRoute.includes(RouteConfig.EncryptData.path);
+        return currentRoute.includes(RouteConfig.BucketsManagement.path);
     }
 }
 </script>
diff --git a/web/satellite/src/components/objects/BucketDetails.vue b/web/satellite/src/components/objects/BucketDetails.vue
index 465449cf7..576a817d3 100644
--- a/web/satellite/src/components/objects/BucketDetails.vue
+++ b/web/satellite/src/components/objects/BucketDetails.vue
@@ -87,9 +87,7 @@ export default class BucketDetails extends Vue {
         this.$store.dispatch(OBJECTS_ACTIONS.SET_FILE_COMPONENT_BUCKET_NAME, this.bucket?.name);
 
         if (this.$route.params.backRoute === RouteConfig.BucketsManagement.name) {
-            this.isNewObjectsFlow
-                ? this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN)
-                : this.$router.push(RouteConfig.Buckets.with(RouteConfig.EncryptData).path);
+            this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
 
             return;
         }
@@ -97,13 +95,6 @@ export default class BucketDetails extends Vue {
         this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
         this.$router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
     }
-
-    /**
-     * Returns objects flow status from store.
-     */
-    private get isNewObjectsFlow(): string {
-        return this.$store.state.appStateModule.isNewObjectsFlow;
-    }
 }
 </script>
 
diff --git a/web/satellite/src/components/objects/BucketsView.vue b/web/satellite/src/components/objects/BucketsView.vue
index 3cd8edfd8..6725c74ee 100644
--- a/web/satellite/src/components/objects/BucketsView.vue
+++ b/web/satellite/src/components/objects/BucketsView.vue
@@ -60,17 +60,6 @@
             </template>
         </v-table>
         <EncryptionBanner v-if="!isServerSideEncryptionBannerHidden" :hide="hideBanner" />
-        <ObjectsPopup
-            v-if="isCreatePopupVisible"
-            :on-click="onCreateBucketClick"
-            title="Create Bucket"
-            sub-title="Buckets are simply containers that store objects and their metadata within a project."
-            button-label="Create Bucket"
-            :error-message="errorMessage"
-            :is-loading="isRequestProcessing"
-            @setName="setCreateBucketName"
-            @close="hideCreateBucketPopup"
-        />
         <ObjectsPopup
             v-if="isDeletePopupVisible"
             :on-click="onDeleteBucketClick"
@@ -127,11 +116,9 @@ export default class BucketsView extends Vue {
     private readonly FILE_BROWSER_AG_NAME: string = 'Web file browser API key';
     private worker: Worker;
     private grantWithPermissions = '';
-    private createBucketName = '';
     private deleteBucketName = '';
 
     public isLoading = true;
-    public isCreatePopupVisible = false;
     public isDeletePopupVisible = false;
     public isRequestProcessing = false;
     public errorMessage = '';
@@ -182,13 +169,8 @@ export default class BucketsView extends Vue {
             }
 
             if (!this.bucketsPage.buckets.length && !wasDemoBucketCreated) {
-                if (this.isNewObjectsFlow) {
-                    this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
-                    await this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
-                    return;
-                }
-
-                await this.createDemoBucket();
+                this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
+                await this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
             }
         } catch (error) {
             await this.$notify.error(`Failed to setup Buckets view. ${error.message}`);
@@ -270,40 +252,7 @@ export default class BucketsView extends Vue {
 
     public onNewBucketButtonClick(): void {
         this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
-        this.isNewObjectsFlow
-            ? this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path)
-            : this.showCreateBucketPopup();
-    }
-
-    /**
-     * Holds create bucket click logic.
-     */
-    public async onCreateBucketClick(): Promise<void> {
-        if (this.isRequestProcessing) return;
-
-        if (!this.isBucketNameValid(this.createBucketName)) return;
-
-        this.isRequestProcessing = true;
-
-        try {
-            if (!this.edgeCredentials.accessKeyId) {
-                await this.setAccess();
-            }
-            await this.$store.dispatch(OBJECTS_ACTIONS.CREATE_BUCKET, this.createBucketName);
-            await this.fetchBuckets();
-            this.createBucketName = '';
-            this.hideCreateBucketPopup();
-        } catch (error) {
-            const BUCKET_ALREADY_EXISTS_ERROR = 'BucketAlreadyExists';
-
-            if (error.name === BUCKET_ALREADY_EXISTS_ERROR) {
-                await this.$notify.error('Bucket with provided name already exists.');
-            } else {
-                await this.$notify.error(error.message);
-            }
-        } finally {
-            this.isRequestProcessing = false;
-        }
+        this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketCreation).path);
     }
 
     /**
@@ -404,30 +353,6 @@ export default class BucketsView extends Vue {
         this.deleteBucketName = name;
     }
 
-    /**
-     * Makes create bucket popup visible.
-     */
-    public showCreateBucketPopup(): void {
-        this.createBucketName = '';
-        this.isCreatePopupVisible = true;
-    }
-
-    /**
-     * Hides create bucket popup.
-     */
-    public hideCreateBucketPopup(): void {
-        this.errorMessage = '';
-        this.isCreatePopupVisible = false;
-    }
-
-    /**
-     * Set create bucket name form input.
-     */
-    public setCreateBucketName(name: string): void {
-        this.errorMessage = '';
-        this.createBucketName = name;
-    }
-
     /**
      * Hides server-side encryption banner.
      */
@@ -441,10 +366,7 @@ export default class BucketsView extends Vue {
      */
     public openBucket(bucketName: string): void {
         this.$store.dispatch(OBJECTS_ACTIONS.SET_FILE_COMPONENT_BUCKET_NAME, bucketName);
-        this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.EncryptData).path);
-        this.isNewObjectsFlow
-            ? this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN)
-            : this.$router.push(RouteConfig.Buckets.with(RouteConfig.EncryptData).path);
+        this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_OPEN_BUCKET_MODAL_SHOWN);
     }
 
     /**
@@ -454,13 +376,6 @@ export default class BucketsView extends Vue {
         return this.$store.state.bucketUsageModule.page;
     }
 
-    /**
-     * Returns objects flow status from store.
-     */
-    private get isNewObjectsFlow(): string {
-        return this.$store.state.appStateModule.isNewObjectsFlow;
-    }
-
     /**
      * Returns selected project id from store.
      */
diff --git a/web/satellite/src/components/objects/EncryptData.vue b/web/satellite/src/components/objects/EncryptData.vue
deleted file mode 100644
index 55a997bb3..000000000
--- a/web/satellite/src/components/objects/EncryptData.vue
+++ /dev/null
@@ -1,317 +0,0 @@
-// Copyright (C) 2021 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-<template>
-    <div class="encrypt">
-        <div class="encrypt__msg-container">
-            <p class="encrypt__msg-container__title" aria-roledescription="objects-title">
-                The object browser uses
-                <a
-                    class="encrypt__msg-container__title__link"
-                    href="https://docs.storj.io/dcs/concepts/encryption-key/design-decision-server-side-encryption"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                >
-                    server side encryption.
-                </a>
-            </p>
-            <p class="encrypt__msg-container__text">
-                If you want to use our product with only end-to-end encryption, you may want to use our
-                <span class="encrypt__msg-container__text__link" @click="navigateToCLIFlow">command line solution.</span>
-            </p>
-        </div>
-        <GeneratePassphrase
-            :on-next-click="onNextClick"
-            :on-back-click="onBackClick"
-            :set-parent-passphrase="setPassphrase"
-            :is-loading="isLoading"
-        />
-        <div class="encrypt__faq">
-            <h2 class="encrypt__faq__title">FAQ</h2>
-            <FAQBullet
-                title="Why do I need a passphrase to upload?"
-                text="One very important design consideration is that data stored on Storj is encrypted. That means
-                only you have the encryption passphrase for your data. The service doesn't ever have access to or store
-                your encryption passphrase. If you lose your passphrase, you will be unable to recover your data."
-            />
-            <FAQBullet
-                title="What if I enter a wrong passphrase?"
-                text="There is no wrong passphrase because every passphrase can have access to different files. Entering
-                a new or different passphrase won’t have any effect on the existing files. If you enter your passphrase
-                and don’t see the existing files, it’s most likely you entered a new passphrase and that’s why you can’t
-                see the encrypted data stored with a different passphrase."
-            />
-            <FAQBullet
-                title="Why I have to enter a passphrase for every bucket?"
-                text="In general, the best practice is to use one encryption passphrase per bucket. If an object with
-                the same path and object name uploaded by two uplinks with encryption keys derived from the same
-                encryption passphrase, the most recent upload will over-write the older object."
-            />
-            <FAQBullet
-                title="Why there is no “remember passphrase”?"
-                text="There is no wrong passphrase because every passphrase can have access to different files. Entering
-                a new or different passphrase won’t have any effect on the existing files. If you enter a passphrase and
-                don’t see your existing files, try to enter your passphrase again."
-            />
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import pbkdf2 from 'pbkdf2';
-
-import { RouteConfig } from '@/router';
-import { OBJECTS_ACTIONS } from '@/store/modules/objects';
-import { LocalData } from '@/utils/localData';
-import { EdgeCredentials } from '@/types/accessGrants';
-import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
-import { PROJECTS_ACTIONS } from '@/store/modules/projects';
-import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
-import { MetaUtils } from '@/utils/meta';
-import { AnalyticsHttpApi } from '@/api/analytics';
-
-import GeneratePassphrase from '@/components/common/GeneratePassphrase.vue';
-import FAQBullet from '@/components/objects/FAQBullet.vue';
-
-// @vue/component
-@Component({
-    components: {
-        GeneratePassphrase,
-        FAQBullet,
-    },
-})
-export default class EncryptData extends Vue {
-    private worker: Worker;
-
-    public isLoading = false;
-    public passphrase = '';
-
-    public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
-
-    /**
-     * Sets passphrase from child component.
-     */
-    public navigateToCLIFlow(): void {
-        this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_AG_NAME_STEP_BACK_ROUTE, this.$route.path);
-        this.analytics.pageVisit(RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep.with(RouteConfig.AGName)).path);
-        this.$router.push({ name: RouteConfig.AGName.name });
-    }
-
-    /**
-     * Lifecycle hook after initial render.
-     * Sets local worker if new flow is used.
-     */
-    public mounted(): void {
-        if (!this.apiKey) {
-            this.analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
-            this.$router.push(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
-        }
-
-        this.setWorker();
-    }
-
-    /**
-     * Sets passphrase from child component.
-     */
-    public setPassphrase(passphrase: string): void {
-        this.passphrase = passphrase;
-    }
-
-    /**
-     * Sets local worker with worker instantiated in store.
-     */
-    public setWorker(): void {
-        this.worker = this.$store.state.accessGrantsModule.accessGrantsWebWorker;
-        this.worker.onerror = (error: ErrorEvent) => {
-            this.$notify.error(error.message);
-        };
-    }
-
-    /**
-     * Holds on next button click logic.
-     */
-    public async onNextClick(): Promise<void> {
-        if (this.isLoading) return;
-
-        this.isLoading = true;
-
-        const SALT = 'storj-unique-salt';
-
-        const result: Buffer | Error = await this.pbkdf2Async(SALT);
-
-        if (result instanceof Error) {
-            await this.$notify.error(result.message);
-
-            return;
-        }
-
-        const keyToBeStored = result.toString('hex');
-
-        await LocalData.setUserIDPassSalt(this.$store.getters.user.id, keyToBeStored, SALT);
-        await this.$store.dispatch(OBJECTS_ACTIONS.SET_PASSPHRASE, this.passphrase);
-
-        try {
-            await this.setAccess();
-            this.analytics.pageVisit(RouteConfig.UploadFile.path);
-            await this.$router.push(RouteConfig.UploadFile.path);
-        } catch (e) {
-            await this.$notify.error(e.message);
-        } finally {
-            this.isLoading = false;
-        }
-    }
-
-    /**
-     * Holds on back button click logic.
-     */
-    public onBackClick(): void {
-        this.analytics.pageVisit(RouteConfig.BucketsManagement.path);
-        this.$router.push(RouteConfig.BucketsManagement.path);
-    }
-
-    /**
-     * Sets access to S3 client.
-     */
-    public async setAccess(): Promise<void> {
-        const now = new Date();
-        const inThreeDays = new Date(now.setDate(now.getDate() + 3));
-
-        await this.worker.postMessage({
-            'type': 'SetPermission',
-            'isDownload': true,
-            'isUpload': true,
-            'isList': true,
-            'isDelete': true,
-            'notAfter': inThreeDays.toISOString(),
-            'buckets': this.bucket ? [this.bucket] : [],
-            'apiKey': this.apiKey,
-        });
-
-        const grantEvent: MessageEvent = await new Promise(resolve => this.worker.onmessage = resolve);
-        if (grantEvent.data.error) {
-            throw new Error(grantEvent.data.error);
-        }
-
-        const satelliteNodeURL: string = MetaUtils.getMetaContent('satellite-nodeurl');
-        const salt = await this.$store.dispatch(PROJECTS_ACTIONS.GET_SALT, this.$store.getters.selectedProject.id);
-
-        this.worker.postMessage({
-            'type': 'GenerateAccess',
-            'apiKey': grantEvent.data.value,
-            'passphrase': this.passphrase,
-            'salt': salt,
-            'satelliteNodeURL': satelliteNodeURL,
-        });
-
-        const accessGrantEvent: MessageEvent = await new Promise(resolve => this.worker.onmessage = resolve);
-        if (accessGrantEvent.data.error) {
-            throw new Error(accessGrantEvent.data.error);
-        }
-
-        const accessGrant = accessGrantEvent.data.value;
-
-        const gatewayCredentials: EdgeCredentials = await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant });
-        await this.$store.dispatch(OBJECTS_ACTIONS.SET_GATEWAY_CREDENTIALS, gatewayCredentials);
-    }
-
-    /**
-     * Generates passphrase fingerprint asynchronously.
-     */
-    private pbkdf2Async(salt: string): Promise<Buffer | Error> {
-        const ITERATIONS = 1;
-        const KEY_LENGTH = 64;
-
-        return new Promise((response, reject) => {
-            pbkdf2.pbkdf2(this.passphrase, salt, ITERATIONS, KEY_LENGTH, (error, key) => {
-                error ? reject(error) : response(key);
-            });
-        });
-    }
-
-    /**
-     * Returns apiKey from store.
-     */
-    private get apiKey(): string {
-        return this.$store.state.objectsModule.apiKey;
-    }
-
-    /**
-     * Returns bucket name from store.
-     */
-    private get bucket(): string {
-        return this.$store.state.objectsModule.fileComponentBucketName;
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    .encrypt {
-        font-family: 'font_regular', sans-serif;
-        padding-bottom: 30px;
-
-        &__msg-container {
-            margin: -20px auto 40px;
-            max-width: 620px;
-            background-color: var(--c-yellow-2);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            border-radius: 0 0 10px 10px;
-            padding: 20px 0;
-
-            &__title {
-                font-family: 'font_bold', sans-serif;
-                font-size: 16px;
-                line-height: 19px;
-                text-align: center;
-                color: #000;
-                margin-bottom: 10px;
-
-                &__link {
-                    color: #000;
-                    text-decoration: underline !important;
-                    text-underline-position: under;
-
-                    &:visited {
-                        color: #000;
-                    }
-                }
-            }
-
-            &__text {
-                font-size: 14px;
-                line-height: 20px;
-                text-align: center;
-                color: #1b2533;
-                max-width: 400px;
-
-                &__link {
-                    color: #1b2533;
-                    text-decoration: underline;
-                    text-underline-position: under;
-                    cursor: pointer;
-                }
-            }
-        }
-
-        &__faq {
-            max-width: 620px;
-
-            // display: flex; revert this when FAQ content will be confirmed
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            margin: 0 auto;
-
-            &__title {
-                font-family: 'font_bold', sans-serif;
-                font-size: 36px;
-                line-height: 56px;
-                letter-spacing: 1px;
-                color: #14142b;
-                margin: 75px 0 30px;
-            }
-        }
-    }
-</style>
diff --git a/web/satellite/src/router/index.ts b/web/satellite/src/router/index.ts
index 29cc3c0de..0443fece2 100644
--- a/web/satellite/src/router/index.ts
+++ b/web/satellite/src/router/index.ts
@@ -29,7 +29,6 @@ import CreditsHistory from '@/components/account/billing/coupons/CouponArea.vue'
 import SettingsArea from '@/components/account/SettingsArea.vue';
 import Page404 from '@/components/errors/Page404.vue';
 import BucketsView from '@/components/objects/BucketsView.vue';
-import EncryptData from '@/components/objects/EncryptData.vue';
 import ObjectsArea from '@/components/objects/ObjectsArea.vue';
 import UploadFile from '@/components/objects/UploadFile.vue';
 import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
@@ -129,7 +128,6 @@ export abstract class RouteConfig {
     public static SuccessScreen = new NavigationLink('success', 'Onboarding Success Screen');
 
     // objects child paths.
-    public static EncryptData = new NavigationLink('encrypt-data', 'Objects Encrypt Data');
     public static BucketsManagement = new NavigationLink('management', 'Buckets Management');
     public static BucketsDetails = new NavigationLink('details', 'Bucket Details');
     public static UploadFile = new NavigationLink('upload/', 'Objects Upload');
@@ -439,11 +437,6 @@ export const router = new Router({
                     name: RouteConfig.Buckets.name,
                     component: ObjectsArea,
                     children: [
-                        {
-                            path: RouteConfig.EncryptData.path,
-                            name: RouteConfig.EncryptData.name,
-                            component: EncryptData,
-                        },
                         {
                             path: RouteConfig.BucketsManagement.path,
                             name: RouteConfig.BucketsManagement.name,
diff --git a/web/satellite/src/store/modules/appState.ts b/web/satellite/src/store/modules/appState.ts
index ad029b507..8979e5722 100644
--- a/web/satellite/src/store/modules/appState.ts
+++ b/web/satellite/src/store/modules/appState.ts
@@ -61,7 +61,6 @@ class State {
         public couponCodeBillingUIEnabled = false,
         public couponCodeSignupUIEnabled = false,
         public isNewProjectDashboard = false,
-        public isNewObjectsFlow = false,
     ){}
 }
 
@@ -215,9 +214,6 @@ export const appStateModule = {
         [APP_STATE_MUTATIONS.SET_ONB_CLEAN_API_KEY](state: State, apiKey: string): void {
             state.appState.onbCleanApiKey = apiKey;
         },
-        [APP_STATE_MUTATIONS.SET_OBJECTS_FLOW_STATUS](state: State, isNewObjectsFlow: boolean): void {
-            state.isNewObjectsFlow = isNewObjectsFlow;
-        },
         [APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS](state: State, couponCodeBillingUIEnabled: boolean): void {
             state.couponCodeBillingUIEnabled = couponCodeBillingUIEnabled;
         },
@@ -369,9 +365,6 @@ export const appStateModule = {
         [APP_STATE_ACTIONS.SET_PROJECT_DASHBOARD_STATUS]: function ({ commit }: AppContext, isNewProjectDashboard: boolean): void {
             commit(APP_STATE_MUTATIONS.SET_PROJECT_DASHBOARD_STATUS, isNewProjectDashboard);
         },
-        [APP_STATE_ACTIONS.SET_OBJECTS_FLOW_STATUS]: function ({ commit }: AppContext, isNewObjectsFlow: boolean): void {
-            commit(APP_STATE_MUTATIONS.SET_OBJECTS_FLOW_STATUS, isNewObjectsFlow);
-        },
         [APP_STATE_ACTIONS.SET_COUPON_CODE_BILLING_UI_STATUS]: function ({ commit }: AppContext, couponCodeBillingUIEnabled: boolean): void {
             commit(APP_STATE_MUTATIONS.SET_COUPON_CODE_BILLING_UI_STATUS, couponCodeBillingUIEnabled);
         },
diff --git a/web/satellite/src/store/mutationConstants.ts b/web/satellite/src/store/mutationConstants.ts
index 21572c224..5ecb1a3cf 100644
--- a/web/satellite/src/store/mutationConstants.ts
+++ b/web/satellite/src/store/mutationConstants.ts
@@ -56,6 +56,5 @@ export const APP_STATE_MUTATIONS = {
     SET_ONB_API_KEY_STEP_BACK_ROUTE: 'SET_ONB_API_KEY_STEP_BACK_ROUTE',
     SET_ONB_API_KEY: 'SET_ONB_API_KEY',
     SET_ONB_CLEAN_API_KEY: 'SET_ONB_CLEAN_API_KEY',
-    SET_OBJECTS_FLOW_STATUS: 'SET_OBJECTS_FLOW_STATUS',
     SET_ONB_OS: 'SET_ONB_OS',
 };
diff --git a/web/satellite/src/utils/constants/actionNames.ts b/web/satellite/src/utils/constants/actionNames.ts
index b295ae8cb..8a19ddca5 100644
--- a/web/satellite/src/utils/constants/actionNames.ts
+++ b/web/satellite/src/utils/constants/actionNames.ts
@@ -31,7 +31,6 @@ export const APP_STATE_ACTIONS = {
     SET_COUPON_CODE_BILLING_UI_STATUS: 'SET_COUPON_CODE_BILLING_UI_STATUS',
     SET_COUPON_CODE_SIGNUP_UI_STATUS: 'SET_COUPON_CODE_SIGNUP_UI_STATUS',
     SET_PROJECT_DASHBOARD_STATUS: 'SET_PROJECT_DASHBOARD_STATUS',
-    SET_OBJECTS_FLOW_STATUS: 'SET_OBJECTS_FLOW_STATUS',
 };
 
 export const NOTIFICATION_ACTIONS = {
diff --git a/web/satellite/tests/unit/common/GeneratePassphrase.spec.ts b/web/satellite/tests/unit/common/GeneratePassphrase.spec.ts
deleted file mode 100644
index 8403b8305..000000000
--- a/web/satellite/tests/unit/common/GeneratePassphrase.spec.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-// Copyright (C) 2019 Storj Labs, Inc.
-// See LICENSE for copying information.
-
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import Vuex from 'vuex';
-
-import { router } from '@/router';
-import { appStateModule } from '@/store/modules/appState';
-
-import GeneratePassphrase from '@/components/common/GeneratePassphrase.vue';
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const store = new Vuex.Store({ modules: {
-    appStateModule,
-} });
-
-describe('GeneratePassphrase.vue', () => {
-    it('renders correctly with default props', () => {
-        const wrapper = shallowMount<GeneratePassphrase>(GeneratePassphrase, {
-            localVue,
-            router,
-            store,
-        });
-
-        expect(wrapper.vm.passphrase).toBeTruthy();
-        expect(wrapper).toMatchSnapshot();
-    });
-});
diff --git a/web/satellite/tests/unit/common/__snapshots__/GeneratePassphrase.spec.ts.snap b/web/satellite/tests/unit/common/__snapshots__/GeneratePassphrase.spec.ts.snap
deleted file mode 100644
index 91b51c024..000000000
--- a/web/satellite/tests/unit/common/__snapshots__/GeneratePassphrase.spec.ts.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GeneratePassphrase.vue renders correctly with default props 1`] = `
-<div class="encrypt-container">
-  <encrypticon-stub></encrypticon-stub>
-  <h1 aria-roledescription="enc-title" class="encrypt-container__title">Encryption passphrase</h1>
-  <p class="encrypt-container__info">
-    The encryption passphrase is used to encrypt and access the data that you upload to Storj.
-  </p>
-  <div class="encrypt-container__functional">
-    <div class="encrypt-container__functional__header">
-      <p class="encrypt-container__functional__header__gen active">
-        Generate a new passphrase
-      </p>
-      <div class="encrypt-container__functional__header__right">
-        <p aria-roledescription="enter-passphrase-label" class="encrypt-container__functional__header__right__enter">
-          Enter your own passphrase
-        </p>
-        <vinfo-stub title="" buttonlabel="" onbuttonclick="[Function]" class="encrypt-container__functional__header__right__info-button"></vinfo-stub>
-      </div>
-    </div>
-    <div class="encrypt-container__functional__generate">
-      <p class="encrypt-container__functional__generate__value"></p>
-      <vbutton-stub label="Copy" width="66px" height="30px" fontsize="16px" borderradius="6px" icon="none" isbluewhite="true" isuppercase="true" onpress="[Function]" class="encrypt-container__functional__generate__button"></vbutton-stub>
-    </div>
-    <h2 aria-roledescription="warning-title" class="encrypt-container__functional__warning-title">
-      Save your encryption passphrase
-    </h2>
-    <p class="encrypt-container__functional__warning-msg">
-      Please note that Storj does not know or store your encryption passphrase. If you lose it, you will not
-      be able to recover your files.
-    </p>
-    <p class="encrypt-container__functional__download">Download as a text file</p>
-    <vcheckbox-stub label="I understand, and I have saved the passphrase." class="encrypt-container__functional__checkbox"></vcheckbox-stub>
-  </div>
-  <div class="encrypt-container__buttons">
-    <!---->
-    <vbutton-stub label="Next >" width="inherit" height="64px" fontsize="16px" borderradius="62px" icon="none" isdisabled="true" onpress="[Function]"></vbutton-stub>
-  </div>
-</div>
-`;