PricingPlans.vue
3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<h1 class="page-title">Choose your plan</h1>
<div class="py-4 text-lg leading-[26px]">
If you need more info about our pricing, please check
<span class="text-primary underline">Pricing Guidelines</span>.
</div>
<div class="flex flex-col p-4 bg-backgroundSecondary">
<div class="flex justify-center">
<VaButtonToggle
v-model="selectedDuration"
color="background-element"
border-color="background-element"
:options="[
{ label: 'Monthly', value: 'Monthly' },
{ label: 'Annual', value: 'Annual' },
]"
/>
</div>
<div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-x-6 md:space-y-0 mt-6">
<VaCard
v-for="plan in pricingPlans"
:key="plan.model"
:class="{
'md:!py-10 !bg-backgroundCardSecondary': plan.model === 'Advanced',
'!bg-backgroundCardPrimary': plan.model !== 'Advanced',
'ring-2 ring-primary ring-offset-2': plan.model === selectedPlan,
}"
class="flex w-[326px] md:w-[349px] h-fit p-6 rounded-[13px]"
>
<div :class="{ '!space-y-10': plan.model === 'Advanced' }" class="space-y-8 md:space-y-10">
<div class="space-y-4 text-center">
<h2 class="pricing-plan-card-title">
{{ plan.title }}
</h2>
<VaBadge v-for="badge in plan.badges" :key="badge" :style="badgeStyles" :text="badge" color="primary" />
<p class="text-lg leading-[26px] text-secondary">
{{ plan.description }}
</p>
<div class="flex space-x-1 justify-center items-baseline text-lg leading-[26px]">
<span>$</span
><span class="text-[32px] md:text-5xl leading-[110%] md:leading-[56px] font-bold">{{
selectedDuration === 'Annual' ? plan.price : plan.priceMonth
}}</span
><span>/ {{ selectedDuration === 'Annual' ? 'year' : 'mo' }}</span>
</div>
</div>
<div class="space-y-6">
<div
v-for="feature in plan.features"
:key="feature.description"
class="flex justify-between items-center text-lg leading-[26px]"
>
<p :class="{ 'text-secondary': !feature.isAvailable }">
{{ feature.description }}
</p>
<VaIcon v-if="feature.isAvailable" color="primary" name="mso-check" size="20px" />
<VaIcon v-else color="backgroundBorder" name="mso-block" size="20px" />
</div>
</div>
<div class="flex justify-center">
<VaButton
:disabled="plan.model === selectedPlan"
:style="selectButtonStyles"
@click="createModal(plan.model)"
>
Select
</VaButton>
</div>
</div>
</VaCard>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { useToast, useModal } from 'vuestic-ui'
import { badgeStyles, selectButtonStyles } from './styles'
import { pricingPlans } from './options'
const { init } = useToast()
const { init: initModal } = useModal()
const selectedDuration = ref<string>('Annual')
const selectedPlan = ref<string>()
const createModal = (planModel: string) => {
initModal({
message: 'Are you sure you want to change plan?',
mobileFullscreen: false,
maxWidth: '380px',
size: 'small',
onOk: () => selectPlan(planModel),
})
}
const selectPlan = (planModel: string) => {
init({ message: 'You successfully changed payment plan!', color: 'success' })
selectedPlan.value = planModel
}
</script>