web/satellite/vuetify-poc: add upgrade options step

This change adds the option step to choose between adding a card or
adding Storj tokens.

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

Change-Id: If3324912c02b84f47e49eb06e04f54ba1fbf0ca4

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeAccountDialog.vue

@@ -38,6 +38,14 @@
                             @upgrade="setSecondStep"
                         />
                     </v-window-item>
+
+                    <v-window-item :value="UpgradeAccountStep.Options">
+                        <UpgradeOptionsStep
+                            :loading="loading"
+                            @add-card="() => setStep(UpgradeAccountStep.AddCC)"
+                            @add-tokens="onAddTokens"
+                        />
+                    </v-window-item>
                 </v-window>
             </v-card-item>
         </v-card>
@@ -60,6 +68,7 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { PricingPlanInfo } from '@/types/common';
 
 import UpgradeInfoStep from '@poc/components/dialogs/upgradeAccountFlow/UpgradeInfoStep.vue';
+import UpgradeOptionsStep from '@poc/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue';
 
 enum UpgradeAccountStep {
     Info = 'infoStep',

web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue

@@ -0,0 +1,60 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <p class="pb-4">
+        Add a credit card to activate your Pro Account, or deposit more than $10 in STORJ tokens to upgrade
+        and get 10% bonus on your STORJ tokens deposit.
+    </p>
+
+    <v-divider />
+
+    <v-row justify="center" class="mx-0 pb-5 pt-4">
+        <v-col class="pl-0">
+            <v-btn
+                variant="flat"
+                color="success"
+                block
+                :loading="loading"
+                @click="emit('addCard')"
+            >
+                <template #prepend>
+                    <v-icon icon="mdi-credit-card" />
+                </template>
+                Add Credit Card
+            </v-btn>
+        </v-col>
+        <v-col class="px-0">
+            <v-btn
+                variant="flat"
+                block
+                :loading="loading"
+                @click="emit('addTokens')"
+            >
+                <template #prepend>
+                    <v-icon icon="mdi-plus-circle" />
+                </template>
+                Add STORJ Tokens
+            </v-btn>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import { VBtn, VCol, VDivider, VIcon, VRow } from 'vuetify/components';
+
+import { useUsersStore } from '@/store/modules/usersStore';
+import { useNotify } from '@/utils/hooks';
+
+const usersStore = useUsersStore();
+const notify = useNotify();
+
+const props = defineProps<{
+    loading: boolean;
+}>();
+
+const emit = defineEmits<{
+    addCard: [];
+    addTokens: [];
+}>();
+</script>