adata-ui 2.1.40-beta.14 → 2.1.40-beta.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/features/payment/process/PaymentKaspiQrSidePanel.vue +4 -2
- package/components/features/payment/process/PaymentMethodSidePanel.vue +7 -2
- package/components/features/payment/process/PaymentTopUpSidePanel.vue +9 -4
- package/components/overlays/side-panel/ASidePanel.vue +4 -1
- package/package.json +1 -1
|
@@ -122,11 +122,12 @@ watch(isOpen, async (value) => {
|
|
|
122
122
|
<button
|
|
123
123
|
type="button"
|
|
124
124
|
class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
|
|
125
|
+
data-test-id="kaspi-qr-back-button"
|
|
125
126
|
@click="onBack"
|
|
126
127
|
>
|
|
127
128
|
<a-icon-chevron-left class="size-6" />
|
|
128
129
|
</button>
|
|
129
|
-
<p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
|
|
130
|
+
<p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100" data-test-id="kaspi-qr-title">
|
|
130
131
|
{{ t('payment.kaspi.title') }}
|
|
131
132
|
</p>
|
|
132
133
|
</div>
|
|
@@ -137,7 +138,7 @@ watch(isOpen, async (value) => {
|
|
|
137
138
|
{{ t('payment.kaspi.description') }}
|
|
138
139
|
</p>
|
|
139
140
|
|
|
140
|
-
<div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
|
|
141
|
+
<div class="flex flex-col items-center gap-5 rounded-xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900" data-test-id="kaspi-qr-payment-block">
|
|
141
142
|
<div class="flex items-center gap-3">
|
|
142
143
|
<a-icon-kaspi-qr class="size-14" />
|
|
143
144
|
<span class="text-[40px] font-bold leading-none text-deepblue-900 dark:text-white">
|
|
@@ -165,6 +166,7 @@ watch(isOpen, async (value) => {
|
|
|
165
166
|
view="outline"
|
|
166
167
|
color="gray"
|
|
167
168
|
size="lg"
|
|
169
|
+
data-test-id="kaspi-qr-change-payment-method-button"
|
|
168
170
|
block
|
|
169
171
|
@click="onBack"
|
|
170
172
|
>
|
|
@@ -18,8 +18,8 @@ const { t } = useI18n()
|
|
|
18
18
|
|
|
19
19
|
const selected = ref<IBank>('kaspi')
|
|
20
20
|
const cards = [
|
|
21
|
-
{ id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi },
|
|
22
|
-
{ id: 'other', name: 'payment.method.other', img: AIconPaymentCard },
|
|
21
|
+
{ id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi, dataTestId: 'payment-method-kaspi-button' },
|
|
22
|
+
{ id: 'other', name: 'payment.method.other', img: AIconPaymentCard, dataTestId: 'payment-method-other-bank-button' },
|
|
23
23
|
] as const
|
|
24
24
|
|
|
25
25
|
const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
|
|
@@ -41,12 +41,14 @@ function onBack() {
|
|
|
41
41
|
<a-side-panel
|
|
42
42
|
v-model="isOpen"
|
|
43
43
|
width="484px"
|
|
44
|
+
data-test-id="payment-method-modal"
|
|
44
45
|
>
|
|
45
46
|
<template #header>
|
|
46
47
|
<div class="flex items-center gap-2">
|
|
47
48
|
<button
|
|
48
49
|
type="button"
|
|
49
50
|
class="rounded-md p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
|
|
51
|
+
data-test-id="payment-method-back-button"
|
|
50
52
|
@click="onBack"
|
|
51
53
|
>
|
|
52
54
|
<a-icon-chevron-left class="size-6" />
|
|
@@ -75,6 +77,7 @@ function onBack() {
|
|
|
75
77
|
:key="item.id"
|
|
76
78
|
type="button"
|
|
77
79
|
class="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors"
|
|
80
|
+
:data-test-id="item.dataTestId"
|
|
78
81
|
:class="selected === item.id
|
|
79
82
|
? 'border-blue-500 bg-blue-50/60 dark:border-blue-400 dark:bg-blue-950/30'
|
|
80
83
|
: 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800'"
|
|
@@ -111,6 +114,7 @@ function onBack() {
|
|
|
111
114
|
<div class="flex flex-col gap-2">
|
|
112
115
|
<a-button-v2
|
|
113
116
|
size="lg"
|
|
117
|
+
data-test-id="payment-method-submit-button"
|
|
114
118
|
block
|
|
115
119
|
@click="confirm"
|
|
116
120
|
>
|
|
@@ -120,6 +124,7 @@ function onBack() {
|
|
|
120
124
|
view="outline"
|
|
121
125
|
color="gray"
|
|
122
126
|
size="lg"
|
|
127
|
+
data-test-id="payment-method-close-button"
|
|
123
128
|
block
|
|
124
129
|
@click="cancel"
|
|
125
130
|
>
|
|
@@ -11,10 +11,10 @@ const money = ref<number | string>(0)
|
|
|
11
11
|
const errorAlert = ref(false)
|
|
12
12
|
|
|
13
13
|
const sumArr = [
|
|
14
|
-
{ id: 1, value: 2000, label: '2 000 ₸' },
|
|
15
|
-
{ id: 2, value: 5000, label: '5 000 ₸' },
|
|
16
|
-
{ id: 3, value: 10000, label: '10 000 ₸' },
|
|
17
|
-
{ id: 4, value: 20000, label: '20 000 ₸' },
|
|
14
|
+
{ id: 1, value: 2000, label: '2 000 ₸', dataTestId: 'topup-balance-amount-2000-button' },
|
|
15
|
+
{ id: 2, value: 5000, label: '5 000 ₸', dataTestId: 'topup-balance-amount-5000-button' },
|
|
16
|
+
{ id: 3, value: 10000, label: '10 000 ₸', dataTestId: 'topup-balance-amount-10000-button' },
|
|
17
|
+
{ id: 4, value: 20000, label: '20 000 ₸', dataTestId: 'topup-balance-amount-20000-button' },
|
|
18
18
|
]
|
|
19
19
|
|
|
20
20
|
const amount = computed(() => Number(money.value) || 0)
|
|
@@ -45,6 +45,7 @@ function handlePayment() {
|
|
|
45
45
|
<a-side-panel
|
|
46
46
|
v-model="isOpen"
|
|
47
47
|
width="484px"
|
|
48
|
+
data-test-id="topup-balance-modal"
|
|
48
49
|
>
|
|
49
50
|
<template #header>
|
|
50
51
|
<div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
|
|
@@ -67,6 +68,7 @@ function handlePayment() {
|
|
|
67
68
|
type="number"
|
|
68
69
|
size="md"
|
|
69
70
|
clearable
|
|
71
|
+
data-test-id="topup-topup-balance-amount-input"
|
|
70
72
|
:error="errorAlert ? t('modals.replenish_modal.error') : undefined"
|
|
71
73
|
/>
|
|
72
74
|
|
|
@@ -76,6 +78,7 @@ function handlePayment() {
|
|
|
76
78
|
:key="item.id"
|
|
77
79
|
type="button"
|
|
78
80
|
class="rounded-lg border px-3 py-2.5 text-sm font-semibold transition-colors"
|
|
81
|
+
:data-test-id="item.dataTestId"
|
|
79
82
|
:class="amount === item.value
|
|
80
83
|
? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-950/40 dark:text-blue-300'
|
|
81
84
|
: 'border-gray-200 bg-white text-deepblue-900 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800'"
|
|
@@ -91,6 +94,7 @@ function handlePayment() {
|
|
|
91
94
|
<div class="flex flex-col gap-2">
|
|
92
95
|
<a-button-v2
|
|
93
96
|
size="lg"
|
|
97
|
+
data-test-id="topup-balance-submit-button"
|
|
94
98
|
block
|
|
95
99
|
:disabled="!filterMoney"
|
|
96
100
|
@click="handlePayment"
|
|
@@ -101,6 +105,7 @@ function handlePayment() {
|
|
|
101
105
|
view="outline"
|
|
102
106
|
color="gray"
|
|
103
107
|
size="lg"
|
|
108
|
+
data-test-id="topup-balance-back-button"
|
|
104
109
|
block
|
|
105
110
|
@click="onClose"
|
|
106
111
|
>
|
|
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<{
|
|
|
24
24
|
headerClass?: string
|
|
25
25
|
bodyClass?: string
|
|
26
26
|
footerClass?: string
|
|
27
|
+
dataTestId?: string
|
|
27
28
|
}>(), {
|
|
28
29
|
idName: "vsp-container",
|
|
29
30
|
side: "right",
|
|
@@ -36,7 +37,8 @@ const props = withDefaults(defineProps<{
|
|
|
36
37
|
overlayOpacity: 0.5,
|
|
37
38
|
overlayDuration: 500,
|
|
38
39
|
panelColor: "bg-white dark:bg-gray-900",
|
|
39
|
-
panelDuration: 300
|
|
40
|
+
panelDuration: 300,
|
|
41
|
+
dataTestId: undefined,
|
|
40
42
|
})
|
|
41
43
|
|
|
42
44
|
defineEmits<{
|
|
@@ -219,6 +221,7 @@ const touchend = () => {
|
|
|
219
221
|
class="vsp fixed flex flex-col"
|
|
220
222
|
:class="[`vsp--${panelSide}-side`, $attrs.class, roundedClass, panelColor]"
|
|
221
223
|
:style="panelStyles"
|
|
224
|
+
:data-test-id="dataTestId"
|
|
222
225
|
>
|
|
223
226
|
<div
|
|
224
227
|
class="w-full flex justify-center items-center mt-1 lg:hidden"
|