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

web/satellite: update styling of pricing plan components

Browse Source 
The styling of pricing plan components has been updated to match our
designs.

References storj/storj-private#172

Change-Id: I61a2536267c41292abd9e4860b5bd45fafb61408
This commit is contained in:
Jeremy Wharton 2023-03-08 22:39:42 -06:00 committed by Storj Robot
parent 31e386c607
commit 1d1739e187
4 changed files with 44 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/satellite/src/components/modals/PricingPlanModal.vue
View File

@ -17,14 +17,11 @@
{{ plan.title }}
<span v-if="plan.activationSubtitle"> / {{ plan.activationSubtitle }}</span>
</p>
<p>{{ plan.activationDescription }}</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<p class="content__middle__description" v-html="plan.activationDescriptionHTML" />
</div>
<p class="content__middle__price">
<template v-if="plan.price">
<s v-if="plan.oldPrice">{{ plan.oldPrice }}</s>&nbsp;{{ plan.price }}
</template>
<template v-else>No charge</template>
</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-if="plan.activationPriceHTML" class="content__middle__price" v-html="plan.activationPriceHTML" />
</div>
<div class="content__bottom">
<div v-if="!isFree" class="content__bottom__card-area">
@ -37,7 +34,7 @@
</div>
<VButton
class="content__bottom__button"
:label="'Activate ' + plan.title"
:label="plan.activationButtonText || ('Activate ' + plan.title)"
width="100%"
font-size="13px"
icon="lock"
@ -50,7 +47,7 @@
label="Cancel"
width="100%"
font-size="13px"
:is-transparent="true"
:is-white="true"
:on-press="onClose"
/>
</div>
@ -235,21 +232,28 @@ async function onCardAdded(token: string): Promise<void> {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
gap: 16px;
background-color: #fff;
&__name {
font-family: 'font_bold', sans-serif;
}
&__description :deep(a) {
color: var(--c-blue-3);
text-decoration: underline;
}
&__price {
display: flex;
font-family: 'font_bold', sans-serif;
font-family: 'font_medium', sans-serif;
line-height: 22px;
s {
:deep(s) {
font-family: 'font_regular', sans-serif;
color: var(--c-grey-6);
}
:deep(b) {
font-family: 'font_bold', sans-serif;
}
}
}

28
web/satellite/src/components/onboardingTour/steps/PricingPlanStep.vue
View File

@ -43,22 +43,24 @@ const plans = ref<PricingPlanInfo[]>([
PricingPlanType.PRO,
'Pro Account',
'150 GB Free',
'Only pay for what you need at $4/TB storage per month and $7/TB download bandwidth per month.',
'Only pay for what you need. $4/TB stored per month* $7/TB for bandwidth.',
'*Additional per-segment fee of $0.0000088 applies.',
null,
null,
null,
'Just add a card to activate Pro Account',
'Add a credit card to activate your Pro Account.<br><br>Get 150GB free storage and bandwidth. Only pay for what you use beyond that.',
'No charge today',
'150GB Free',
),
new PricingPlanInfo(
PricingPlanType.FREE,
'Starter Package',
'Free Account',
'Limited',
'Free usage of 150GB storage and 150GB download bandwidth per month.',
'Free usage up to 150GB storage and 150GB bandwidth per month.',
null,
null,
null,
'Start for free to try Storj and upgrade later.',
null,
'Limited 150',
),
]);
@ -96,24 +98,14 @@ onBeforeMount(async () => {
return;
}
const plan = config[user.partner];
const plan = config[user.partner] as PricingPlanInfo;
if (!plan) {
notify.error(`No pricing plan configuration for partner '${user.partner}'.`, null);
router.push(nextPath);
return;
}
plans.value.unshift(new PricingPlanInfo(
PricingPlanType.PARTNER,
plan.title,
plan.containerSubtitle,
plan.containerDescription,
plan.price,
plan.oldPrice,
plan.activationSubtitle,
plan.activationDescription,
plan.successSubtitle,
));
plan.type = PricingPlanType.PARTNER;
plans.value.unshift(plan);
isLoading.value = false;
});

23
web/satellite/src/components/onboardingTour/steps/pricingPlanFlow/PricingPlanContainer.vue
View File

@ -18,19 +18,17 @@
</div>
</div>
<p class="pricing-container__inner__section__description">{{ plan.containerDescription }}</p>
<!-- eslint-disable-next-line vue/no-v-html -->
<p v-if="plan.containerFooterHTML" class="pricing-container__inner__section__footer" v-html="plan.containerFooterHTML" />
</div>
<div class="pricing-container__inner__section">
<p v-if="plan.price" class="pricing-container__inner__section__price">
<span v-if="plan.oldPrice"><s>{{ plan.oldPrice }}</s>&nbsp;</span>
{{ plan.price }}
</p>
<VButton
class="pricing-container__inner__section__button"
:label="'Activate ' + plan.title"
:label="plan.activationButtonText || ('Activate ' + plan.title)"
font-size="13px"
:on-press="onActivateClick"
:is-green="isPartner"
:is-transparent="isFree"
:is-white="isFree"
>
<template #icon-right>
<ArrowIcon :class="{'arrow-dark': isFree}" />
@ -42,7 +40,7 @@
</template>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { PricingPlanInfo, PricingPlanType } from '@/types/common';
@ -150,12 +148,15 @@ const isFree = computed((): boolean => props.plan.type === PricingPlanType.FREE)
}
}
&__price {
font-family: 'font_bold', sans-serif;
&__description {
margin-bottom: 20px;
}
&__footer {
line-height: 22px;
s {
font-family: 'font_regular', sans-serif;
:deep(b) {
font-family: 'font_bold', sans-serif;
}
}

7
web/satellite/src/types/common.ts
View File

@ -26,11 +26,12 @@ export class PricingPlanInfo {
public title: string = '',
public containerSubtitle: string = '',
public containerDescription: string = '',
public price: string | null = null,
public oldPrice: string | null = null,
public containerFooterHTML: string | null = null,
public activationButtonText: string | null = null,
// Info for the pricing plan modal (pre-activation)
public activationSubtitle: string | null = null,
public activationDescription: string = '',
public activationDescriptionHTML: string = '',
public activationPriceHTML: string | null = null,
// Info for the pricing plan modal (post-activation)
public successSubtitle: string = '',
) {}