adata-ui 2.1.40-beta.9 → 2.1.41-beta.0

package/components/features/payment/process/PaymentMethodSidePanel.vue

@@ -1,121 +1,138 @@
-<script setup lang="ts">
-import { AIconPaymentCard, AIconPaymentKaspi } from '#components'
-
-type IBank = 'kaspi' | 'other'
-
-const props = defineProps<{
-  sum: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'nextBank', bank: IBank, sum: number): void
-  (e: 'back', type: 'method'): void
-}>()
-
-const isOpen = defineModel({ default: false })
-
-const { t } = useI18n()
-
-const checkbox = ref<IBank>('kaspi')
-const cards = [
-  {
-    id: 'kaspi',
-    name: 'payment.method.kaspi',
-    sum: 10000,
-    img: AIconPaymentKaspi,
-  },
-  {
-    id: 'other',
-    name: 'payment.method.other',
-    sum: 10000,
-    img: AIconPaymentCard,
-  },
-]
-
-function confirm() {
-  emit('nextBank', checkbox.value, props.sum)
-}
-
-function cancel() {
-  isOpen.value = false
-}
-
-function onBack() {
-  emit('back', 'method')
-}
-</script>
-
-<template>
-  <a-side-panel
-    v-model="isOpen"
-    width="484px"
-  >
-    <template #header>
-      <div class="flex items-center gap-2">
-        <button @click="onBack">
-          <a-icon-chevron-left class="size-6" />
-        </button>
-        <p class="text-xl font-semibold">
-          {{ t('payment.method.title') }}
-        </p>
-      </div>
-    </template>
-
-    <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4">
-        <a-ill-phone-check class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
-          {{ t('payment.method.description') }}
-        </p>
-      </div>
-
-      <div class="font-semibold">
-        {{ t('payment.method.note') }}
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <a-radio-button
-          v-for="(item) in cards"
-          :key="item.id"
-          v-model="checkbox"
-          :name="`${item.name}`"
-          side="right"
-          size="lg"
-          :value="item.id"
-          class="flex items-center justify-between gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
-        >
-          <div class="flex w-full items-center gap-2">
-            <component :is="item.img" />
-            <div class="flex w-full items-center justify-between">
-              {{ t(item.name) }}
-              <p class="body-600">
-                {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
-              </p>
-            </div>
-          </div>
-        </a-radio-button>
-      </div>
-
-      <div class="flex flex-col gap-2 ">
-        <a-button
-          :disabled="!checkbox"
-          block
-          @click="confirm"
-        >
-          {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
-          view="outline"
-          block
-          @click="cancel"
-        >
-          {{ t('actions.close') }}
-        </a-button>
-      </div>
-    </div>
-  </a-side-panel>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import { AIconPaymentCard, AIconPaymentKaspi } from '#components'
+
+type IBank = 'kaspi' | 'other'
+
+const props = defineProps<{
+  sum: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'nextBank', bank: IBank, sum: number): void
+  (e: 'back', type: 'method'): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t } = useI18n()
+
+const selected = ref<IBank>('kaspi')
+const cards = [
+  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi, dataTestId: 'payment-method-kaspi-button' },
+  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard, dataTestId: 'payment-method-other-bank-button' },
+] as const
+
+const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
+
+function confirm() {
+  emit('nextBank', selected.value, props.sum)
+}
+
+function cancel() {
+  isOpen.value = false
+}
+
+function onBack() {
+  emit('back', 'method')
+}
+</script>
+
+<template>
+  <a-side-panel
+    v-model="isOpen"
+    width="484px"
+    data-test-id="payment-method-modal"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          class="rounded-md p-1 transition-colors hover:bg-badge"
+          data-test-id="payment-method-back-button"
+          @click="onBack"
+        >
+          <a-icon-chevron-left class="size-6" />
+        </button>
+        <p class="text-h3 text-primary">
+          {{ t('payment.method.title') }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center gap-4 rounded-xl bg-muted p-6 text-center">
+        <a-ill-phone-check class="size-[120px]" />
+        <p class="text-body-md-medium text-quaternary">
+          {{ t('payment.method.description') }}
+        </p>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <p class="text-body-md-strong text-primary">
+          {{ t('payment.method.note') }}
+        </p>
+
+        <button
+          v-for="item in cards"
+          :key="item.id"
+          type="button"
+          class="flex items-center gap-3 rounded-xl border p-4 text-left transition-colors"
+          :data-test-id="item.dataTestId"
+          :class="selected === item.id
+            ? 'border-brand bg-brand-50/60'
+            : 'border-default bg-main hover:border-strong hover:bg-action-secondary-hover'"
+          @click="selected = item.id"
+        >
+          <component
+            :is="item.img"
+            class="h-7 w-auto shrink-0"
+          />
+          <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <span class="text-body-md-strong text-primary">
+              {{ t(item.name) }}
+            </span>
+            <span class="text-body-md-strong text-quaternary">
+              {{ formattedSum }} ₸
+            </span>
+          </div>
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors"
+            :class="selected === item.id
+              ? 'border-brand'
+              : 'border-strong'"
+          >
+            <span
+              v-if="selected === item.id"
+              class="size-2.5 rounded-full bg-brand"
+            />
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
+          data-test-id="payment-method-submit-button"
+          block
+          @click="confirm"
+        >
+          {{ t('actions.topUp') }}
+        </a-button-v2>
+        <a-button-v2
+          view="outline"
+          color="gray"
+          size="lg"
+          data-test-id="payment-method-close-button"
+          block
+          @click="cancel"
+        >
+          {{ t('actions.close') }}
+        </a-button-v2>
+      </div>
+    </template>
+  </a-side-panel>
+</template>
+
+<style scoped></style>

package/components/features/payment/process/PaymentProcess.vue

@@ -1,158 +1,158 @@
-<script setup lang="ts">
-import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
-import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
-import PaymentKaspiQrSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiQrSidePanel.vue'
-import PaymentKaspiRedirectSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue'
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-
-const { $toast } = useNuxtApp()
-const { locale } = useI18n()
-const { commonAuth } = useAppConfig()
-const accessToken = useCookie('accessToken')
-
-const {
-  rateId,
-  topUpSidePanel,
-  methodSidePanel,
-  kaspiQRSidePanel,
-  kaspiRedirectSidePanel,
-  payByCard
-} = usePayment()
-
-const userApiURL = commonAuth.userApiURL
-
-const paymentSum = ref(0)
-const requestUrl = ref('')
-const requestId = ref<number | null>(null)
-
-function actionPayment(num: number) {
-  paymentSum.value = num
-  topUpSidePanel.value = false
-  methodSidePanel.value = true
-}
-
-function toggleKaspiSidePanel(state: boolean) {
-  if (window.innerWidth >= 1024) {
-    kaspiQRSidePanel.value = state
-  }
-  else {
-    kaspiRedirectSidePanel.value = state
-  }
-}
-
-function onBack(type: 'method' | 'kaspi') {
-  if (type === 'method') {
-    topUpSidePanel.value = true
-    methodSidePanel.value = false
-  }
-  else if (type === 'kaspi') {
-    toggleKaspiSidePanel(false)
-    methodSidePanel.value = true
-  }
-}
-
-const userInfo = useState('user-info', () => ({}))
-
-function pushReplenishmentEventToDataLayer() {
-  window.dataLayer = window.dataLayer || []
-
-  window.dataLayer?.push({
-    event: 'replenishment',
-    user_id: `${userInfo.value.id}`,
-    user_email: `${userInfo.value.email}`,
-    rep_amount: `${paymentSum.value}`,
-  })
-}
-
-async function directionsBanks(bank: 'kaspi' | 'other', sum: number) {
-  methodSidePanel.value = false
-  if (bank === 'kaspi') {
-    try {
-      const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/request`, {
-        method: 'POST',
-        credentials: 'include',
-        headers: {
-          Authorization: `Bearer ${accessToken.value}`,
-          lang: locale.value,
-        },
-        params: {
-          amount: sum,
-          initial: 1,
-          rate_id: rateId.value ?? undefined,
-        },
-      })
-      requestId.value = data.request_id
-      requestUrl.value = `https://kaspi.kz/pay/adata?service_id=5964&9507=${data.request_id}`
-      toggleKaspiSidePanel(true)
-    }
-    catch (error) {
-      console.error(error)
-      $toast.error(error.data.message)
-    }
-  }
-  else if (bank === 'other') {
-    try {
-      await payByCard(sum)
-      pushReplenishmentEventToDataLayer()
-    }
-    catch (error) {
-      console.error(error)
-    }
-  }
-}
-
-async function updateUserRate() {
-  try {
-    // await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-    //   method: 'PUT',
-    //   credentials: 'include',
-    //   headers: {
-    //     Authorization: `Bearer ${accessToken.value}`,
-    //     lang: locale.value,
-    //   },
-    //   body: {
-    //     rate_code: 'basic_plus',
-    //   },
-    // })
-    pushReplenishmentEventToDataLayer()
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-    toggleKaspiSidePanel(false)
-  }
-}
-</script>
-
-<template>
-  <payment-top-up-side-panel
-    v-model="topUpSidePanel"
-    @next="actionPayment"
-  />
-
-  <payment-method-side-panel
-    v-model="methodSidePanel"
-    @back="onBack"
-    :sum="paymentSum"
-    @next-bank="directionsBanks"
-  />
-
-  <payment-kaspi-qr-side-panel
-    v-model="kaspiQRSidePanel"
-    @back="onBack"
-    :request-url="requestUrl"
-    :request-id="requestId as number"
-    @update-user-rate="updateUserRate"
-  />
-
-  <payment-kaspi-redirect-side-panel
-    v-model="kaspiRedirectSidePanel"
-    @back="onBack"
-    :request-id="requestId as number"
-    @update-user-rate="updateUserRate"
-  />
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import PaymentKaspiQrSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiQrSidePanel.vue'
+import PaymentKaspiRedirectSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue'
+import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
+import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+const { $toast } = useNuxtApp()
+const { locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const accessToken = useCookie('accessToken')
+
+const {
+  rateId,
+  topUpSidePanel,
+  methodSidePanel,
+  kaspiQRSidePanel,
+  kaspiRedirectSidePanel,
+  payByCard,
+} = usePayment()
+
+const userApiURL = commonAuth.userApiURL
+
+const paymentSum = ref(0)
+const requestUrl = ref('')
+const requestId = ref<number | null>(null)
+
+function actionPayment(num: number) {
+  paymentSum.value = num
+  topUpSidePanel.value = false
+  methodSidePanel.value = true
+}
+
+function toggleKaspiSidePanel(state: boolean) {
+  if (window.innerWidth >= 1024) {
+    kaspiQRSidePanel.value = state
+  }
+  else {
+    kaspiRedirectSidePanel.value = state
+  }
+}
+
+function onBack(type: 'method' | 'kaspi') {
+  if (type === 'method') {
+    topUpSidePanel.value = true
+    methodSidePanel.value = false
+  }
+  else if (type === 'kaspi') {
+    toggleKaspiSidePanel(false)
+    methodSidePanel.value = true
+  }
+}
+
+const userInfo = useState('user-info', () => ({}))
+
+function pushReplenishmentEventToDataLayer() {
+  window.dataLayer = window.dataLayer || []
+
+  window.dataLayer?.push({
+    event: 'replenishment',
+    user_id: `${userInfo.value.id}`,
+    user_email: `${userInfo.value.email}`,
+    rep_amount: `${paymentSum.value}`,
+  })
+}
+
+async function directionsBanks(bank: 'kaspi' | 'other', sum: number) {
+  methodSidePanel.value = false
+  if (bank === 'kaspi') {
+    try {
+      const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/request`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          Authorization: `Bearer ${accessToken.value}`,
+          lang: locale.value,
+        },
+        params: {
+          amount: sum,
+          initial: 1,
+          rate_id: rateId.value ?? undefined,
+        },
+      })
+      requestId.value = data.request_id
+      requestUrl.value = `https://kaspi.kz/pay/adata?service_id=5964&9507=${data.request_id}`
+      toggleKaspiSidePanel(true)
+    }
+    catch (error) {
+      console.error(error)
+      $toast.error(error.data.message)
+    }
+  }
+  else if (bank === 'other') {
+    try {
+      await payByCard(sum)
+      pushReplenishmentEventToDataLayer()
+    }
+    catch (error) {
+      console.error(error)
+    }
+  }
+}
+
+async function updateUserRate() {
+  try {
+    // await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+    //   method: 'PUT',
+    //   credentials: 'include',
+    //   headers: {
+    //     Authorization: `Bearer ${accessToken.value}`,
+    //     lang: locale.value,
+    //   },
+    //   body: {
+    //     rate_code: 'basic_plus',
+    //   },
+    // })
+    pushReplenishmentEventToDataLayer()
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+    toggleKaspiSidePanel(false)
+  }
+}
+</script>
+
+<template>
+  <payment-top-up-side-panel
+    v-model="topUpSidePanel"
+    @next="actionPayment"
+  />
+
+  <payment-method-side-panel
+    v-model="methodSidePanel"
+    :sum="paymentSum"
+    @back="onBack"
+    @next-bank="directionsBanks"
+  />
+
+  <payment-kaspi-qr-side-panel
+    v-model="kaspiQRSidePanel"
+    :request-url="requestUrl"
+    :request-id="requestId as number"
+    @back="onBack"
+    @update-user-rate="updateUserRate"
+  />
+
+  <payment-kaspi-redirect-side-panel
+    v-model="kaspiRedirectSidePanel"
+    :request-id="requestId as number"
+    @back="onBack"
+    @update-user-rate="updateUserRate"
+  />
+</template>
+
+<style scoped>
+
+</style>