JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Wilfred Asomani 2023-09-20 11:19:14 +00:00
parent 1e3da9f276
commit f3dbeed239
2 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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',

60
web/satellite/vuetify-poc/src/components/dialogs/upgradeAccountFlow/UpgradeOptionsStep.vue Normal file
View File

@ -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>