Skip to content

Commit 30f7e57

Browse files
hmbanan666hmbanan666
authored
feat: bonus program info (#130)
1 parent a65616a commit 30f7e57

File tree

2 files changed

+135
-39
lines changed

2 files changed

+135
-39
lines changed

‎apps/storefront-telegram/app/components/UserPointsCard.vue‎

Lines changed: 134 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,155 @@
11
<template>
2-
<div class="relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
3-
<div
4-
class="absolute inset-0 bg-primary rounded-lg transition duration-200"
5-
:style="{
6-
transform: `rotateX(${x * 5}deg) rotateY(${y * 5}deg)`,
7-
}"
8-
/>
9-
10-
<div
11-
class="z-10 w-full h-full p-4 flex flex-col justify-between transition duration-200 tg-text-button"
12-
:style="{
13-
transform: `rotateX(${x * 3}deg) rotateY(${y * 3}deg)`,
14-
}"
15-
>
16-
<div class="flex flex-row justify-between items-center">
17-
<div class="flex flex-col gap-3">
18-
<div class="text-lg/5 font-medium">
19-
Карта лояльности
20-
</div>
21-
<div class="flex flex-row gap-1.5 items-center">
22-
<p class="text-3xl/5 font-semibold">
23-
680
24-
</p>
25-
<UIcon name="fluent:heart-circle-24-filled" class="size-6" />
2+
<div>
3+
<div class="z-10 relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
4+
<div
5+
class="absolute inset-0 bg-primary rounded-lg transition duration-200"
6+
:style="{
7+
transform: `rotateX(${x * 5}deg) rotateY(${y * 5}deg)`,
8+
}"
9+
/>
10+
11+
<div
12+
class="z-20 w-full h-full p-4 flex flex-col justify-between transition duration-200 tg-text-button"
13+
:style="{
14+
transform: `rotateX(${x * 3}deg) rotateY(${y * 3}deg)`,
15+
}"
16+
@click="isDrawerOpened = true"
17+
>
18+
<div class="flex flex-row justify-between items-center">
19+
<div class="flex flex-col gap-3">
20+
<div class="text-lg/5 font-medium">
21+
Клиент {{ level }} уровня
22+
</div>
23+
<div class="flex flex-row gap-1.5 items-center">
24+
<p class="text-3xl/5 font-semibold">
25+
{{ points }}
26+
</p>
27+
<UIcon name="fluent:heart-circle-24-filled" class="size-7" />
28+
</div>
2629
</div>
30+
31+
<img
32+
src="/sushi-heart.svg"
33+
alt=""
34+
class="w-12 opacity-35 invert-100"
35+
>
2736
</div>
2837

29-
<img
30-
src="/sushi-heart.svg"
31-
alt=""
32-
class="w-12 opacity-35 invert-100"
33-
>
34-
</div>
38+
<div class="flex flex-row justify-between items-center">
39+
<div class="flex flex-row gap-2 items-center">
40+
<div class="px-3.5 py-1.5 text-2xl/5 text-primary font-bold rounded-full tg-bg-section">
41+
5%
42+
</div>
3543

36-
<div class="flex flex-row justify-between items-center">
37-
<div class="flex flex-row gap-2 items-center">
38-
<div class="px-3.5 py-1.5 text-2xl/5 text-primary font-bold rounded-full tg-bg-section">
39-
5%
44+
<div class="tg-text-inverted">
45+
Ваш кешбэк
46+
</div>
4047
</div>
4148

42-
<div class="tg-text-inverted">
43-
Кешбэк
44-
</div>
49+
<UIcon name="i-lucide-info" class="size-6 tg-text-inverted" />
4550
</div>
51+
</div>
52+
</div>
4653

47-
<UIcon name="i-lucide-info" class="size-6" />
54+
<div class="-mt-8 px-4 pt-12 pb-4 flex flex-col gap-3 tg-bg-section rounded-lg motion-preset-slide-up">
55+
<div>
56+
<h3 class="font-semibold">
57+
Повысьте кешбэк до 10%
58+
</h3>
59+
<p class="text-sm/4">
60+
Закажите еще на {{ Intl.NumberFormat('ru').format(nextLevelAmount) }} {{ channelStore.currencySign }}
61+
</p>
4862
</div>
63+
64+
<UProgress
65+
v-model="progress"
66+
color="primary"
67+
/>
4968
</div>
5069
</div>
70+
71+
<UDrawer
72+
v-model:open="isDrawerOpened"
73+
should-scale-background
74+
:set-background-color-on-scale="false"
75+
:ui="{
76+
content: 'max-h-10/12',
77+
}"
78+
>
79+
<template #content>
80+
<div class="p-4 pb-20 flex flex-col gap-5 overflow-y-auto">
81+
<h2 class="text-xl font-semibold">
82+
У вас есть {{ points }} «Лавчиков»
83+
</h2>
84+
85+
<div class="flex flex-col gap-2">
86+
<h3 class="text-lg font-semibold">
87+
Программа лояльности
88+
</h3>
89+
90+
<p class="text-base/5">
91+
Позволяет клиентам накапливать бонусные баллы под названием «Лавчики»
92+
за каждую совершённую покупку. Система включает три уровня участия с
93+
разными процентами возврата: базовый уровень даёт 5% кешбэка,
94+
средний — 10%, а максимальный — 15% от суммы заказа.
95+
</p>
96+
</div>
97+
98+
<div class="flex flex-col gap-2">
99+
<h3 class="text-lg font-semibold">
100+
Как увеличить кешбэк
101+
</h3>
102+
103+
<p class="text-base/5">
104+
Кешбэк определяется по сумме заказов. Система включает три уровня
105+
с разными процентами возврата: базовый уровень даёт 5% кешбэка,
106+
средний — 10%, а максимальный — 15% от суммы заказа.
107+
</p>
108+
</div>
109+
110+
<div class="flex flex-col gap-2">
111+
<h3 class="text-lg font-semibold">
112+
Куда можно потратить
113+
</h3>
114+
115+
<p class="text-base/5">
116+
Накопленные «Лавчики» можно использовать для приобретения специальных блюд
117+
из отдельного бонусного меню. Важно учитывать, что бонусные баллы имеют
118+
ограниченный срок действия — они автоматически сгорают через 180 дней
119+
при отсутствии активности.
120+
</p>
121+
</div>
122+
123+
<p class="text-sm">
124+
Передавая данные, вы соглашаетесь с
125+
<ULink to="https://sushi-love.ru" target="_blank">
126+
условиями программы лояльности
127+
</ULink>,
128+
<ULink to="https://sushi-love.ru" target="_blank">
129+
политикой конфиденциальности
130+
</ULink> и
131+
<ULink to="https://sushi-love.ru" target="_blank">
132+
условиями обработки персональных данных
133+
</ULink>.
134+
</p>
135+
</div>
136+
</template>
137+
</UDrawer>
51138
</template>
52139

53140
<script setup lang="ts">
54141
import type { EventListener } from '@telegram-apps/sdk-vue'
55142
import { off, on } from '@telegram-apps/sdk-vue'
56143
144+
const channelStore = useChannelStore()
145+
146+
const points = 680
147+
const level = 1
148+
const nextLevelAmount = 6815
149+
const progress = 65
150+
151+
const isDrawerOpened = ref(false)
152+
57153
const x = ref(0)
58154
const y = ref(0)
59155
const z = ref(0)

‎apps/storefront-telegram/app/components/catalog/CategoryBlock.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
ref="target"
44
class="flex flex-col gap-3 mb-10"
55
>
6-
<h2 :id="category?.slug" class="scroll-mt-32 text-2xl/5 font-semibold tracking-tight">
6+
<h2 :id="category?.slug" class="scroll-mt-34 text-2xl/5 font-semibold tracking-tight">
77
{{ category?.name }}
88
</h2>
99

0 commit comments

Comments
 (0)