|
1 | 1 | <template> |
2 | 2 | <divclass="bg-white"> |
3 | 3 | <divclass="container py-8 px-6 mx-auto"> |
4 | | - <pclass="text-xl text-center text-gray-500"> |
5 | | - Choose your plan |
6 | | - </p> |
7 | | - |
8 | 4 | <h1class="mt-4 text-3xl font-semibold text-center text-gray-800 capitalize lg:text-4xl"> |
9 | 5 | Pricing Plan |
10 | 6 | </h1> |
11 | | - <pclass="mt-3 text-center"> |
12 | | - Seeing that you are from {{ emoji.emojify(`:flag-${pricing.location}:`) }}, {{ pricing.discountEligible ? `you are eligible for a discount of ${pricing.discountAmount}%` : 'you are unfortunately not eligible for discount' }} |
13 | | - </p> |
14 | | - |
| 7 | + <div |
| 8 | +v-if="pricing.discountEligible" |
| 9 | +class="grid mt-4 bg-yellow-100 rounded-sm border border-yellow-300" |
| 10 | + > |
| 11 | + <pclass="pb-1 text-center"> |
| 12 | + Your country is <spanclass="text-2xl">{{ emoji.emojify(`:flag-${pricing.location}:`) }}</span>, {{ pricing.discountEligible ? `you are eligible for a discount of ${pricing.discountAmount}%` : 'you are unfortunately not eligible for discount' }} |
| 13 | + </p> |
| 14 | + </div> |
15 | 15 | <div |
16 | 16 | v-for="plan in plans" |
17 | 17 | :key="plan.id" |
|
23 | 23 | @click="pricing.activePlan = plan.id" |
24 | 24 | > |
25 | 25 | <divclass="flex items-center"> |
26 | | - <svg |
27 | | -xmlns="http://www.w3.org/2000/svg" |
| 26 | + <RoundCheckbox |
28 | 27 | class="w-5 h-5 text-gray-400 sm:w-9 sm:h-9" |
29 | 28 | :class="plan.id === pricing.activePlan && 'text-blue6'" |
30 | | -viewBox="0 0 20 20" |
31 | | -fill="currentColor" |
32 | | - > |
33 | | - <path |
34 | | -fill-rule="evenodd" |
35 | | -d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" |
36 | | -clip-rule="evenodd" |
37 | | - /> |
38 | | - </svg> |
| 29 | + /> |
39 | 30 |
|
40 | 31 | <divclass="flex flex-col items-center mx-5 space-y-1"> |
41 | 32 | <h2 |
|
46 | 37 | </h2> |
47 | 38 | </div> |
48 | 39 | </div> |
49 | | - |
50 | 40 | <h2 |
51 | | -class="text-2xl font-semiboldtext-gray-500sm:text-4xl" |
52 | | -:class="plan.id === pricing.activePlan&& 'text-blue6'" |
| 41 | +class="text-2xl font-semibold sm:text-4xl" |
| 42 | +:class="plan.id === pricing.activePlan? 'text-blue6' : 'text-gray-500'" |
53 | 43 | > |
54 | 44 | {{ pricing.currency === 'EUR' ? '€' : pricing.currency === 'GBP' ? '£' : '$' }} {{ plan.price[pricing.currency] }} <spanclass="text-base font-medium">/ Month</span> |
55 | 45 | </h2> |
|
68 | 58 | import {useStore }from'@/store/store'; |
69 | 59 | import {storeToRefs }from'pinia'; |
70 | 60 | importemojifrom'node-emoji' |
| 61 | +importRoundCheckboxfrom'@/assets/icons/roundCheckbox.svg'; |
71 | 62 | const { pricing }=storeToRefs(useStore()); |
72 | 63 | const { getLocation }=useStore(); |
73 | 64 | getLocation() |
|
