adata-ui 2.0.45 → 2.0.47

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

@@ -1,112 +1,112 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-
-const props = defineProps<{
-    requestId: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
-}>()
-
-const isOpen = defineModel({ default: false })
-
-const { commonAuth } = useAppConfig()
-const { t, locale } = useI18n()
-const localePath = useLocalePath()
-const accessToken = useCookie('accessToken')
-
-const userApiURL = commonAuth.userApiURL
-
-const paymentSuccess = ref(false)
-let intervalId: NodeJS.Timeout | null = null
-
-async function checkPayment() {
-  try {
-    const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/invoice-status`, {
-      method: 'GET',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      params: {
-        request_id: props.requestId,
-        initial: 0,
-      },
-    })
-
-    if (data.status === 'completed') {
-      paymentSuccess.value = true
-    }
-  }
-  catch (e) {
-    console.error(e)
-  }
-}
-
-function goKaspi() {
-  window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${props.requestId}`), '_blank')
-}
-
-function onBack() {
-  emit('back', 'kaspi')
-}
-
-watch(isOpen, async (value) => {
-  if (!value) {
-    if (intervalId) {
-      clearInterval(intervalId)
-    }
-    return
-  }
-
-  intervalId = setInterval(() => {
-    if (paymentSuccess.value && intervalId) {
-      clearInterval(intervalId)
-      emit('updateUserRate')
-      return
-    }
-    checkPayment()
-  }, 1000)
-})
-</script>
-
-<template>
-  <a-side-panel
-    v-model="isOpen"
-    width="484px"
-  >
-    <div class="flex flex-col gap-5">
-      <p class="text-center text-2xl font-bold whitespace-pre-wrap">
-        {{ t('payment.redirect.title') }}
-      </p>
-      <a-button block @click="goKaspi">
-        {{ t('payment.redirect.goKaspi') }}
-      </a-button>
-      <div class="flex flex-col gap-2">
-        <p class="text-center text-sm">
-          {{ t('payment.redirect.paymentId') }}
-        </p>
-        <p class="text-center text-xl	font-semibold">
-          {{ requestId }}
-        </p>
-      </div>
-      <p class="text-center text-sm">
-        {{ t('payment.redirect.description') }}
-      </p>
-      <a-button
-        view="outline"
-        block
-        @click="onBack"
-      >
-        {{ t('payment.redirect.changeMethod') }}
-      </a-button>
-    </div>
-  </a-side-panel>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+
+const props = defineProps<{
+    requestId: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'back', type: 'kaspi'): void
+  (e:  'updateUserRate'): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { commonAuth } = useAppConfig()
+const { t, locale } = useI18n()
+const localePath = useLocalePath()
+const accessToken = useCookie('accessToken')
+
+const userApiURL = commonAuth.userApiURL
+
+const paymentSuccess = ref(false)
+let intervalId: NodeJS.Timeout | null = null
+
+async function checkPayment() {
+  try {
+    const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/user/kaspi-balance/invoice-status`, {
+      method: 'GET',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      params: {
+        request_id: props.requestId,
+        initial: 0,
+      },
+    })
+
+    if (data.status === 'completed') {
+      paymentSuccess.value = true
+    }
+  }
+  catch (e) {
+    console.error(e)
+  }
+}
+
+function goKaspi() {
+  window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${props.requestId}`), '_blank')
+}
+
+function onBack() {
+  emit('back', 'kaspi')
+}
+
+watch(isOpen, async (value) => {
+  if (!value) {
+    if (intervalId) {
+      clearInterval(intervalId)
+    }
+    return
+  }
+
+  intervalId = setInterval(() => {
+    if (paymentSuccess.value && intervalId) {
+      clearInterval(intervalId)
+      emit('updateUserRate')
+      return
+    }
+    checkPayment()
+  }, 1000)
+})
+</script>
+
+<template>
+  <a-side-panel
+    v-model="isOpen"
+    width="484px"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="text-center text-2xl font-bold whitespace-pre-wrap">
+        {{ t('payment.redirect.title') }}
+      </p>
+      <a-button block @click="goKaspi">
+        {{ t('payment.redirect.goKaspi') }}
+      </a-button>
+      <div class="flex flex-col gap-2">
+        <p class="text-center text-sm">
+          {{ t('payment.redirect.paymentId') }}
+        </p>
+        <p class="text-center text-xl	font-semibold">
+          {{ requestId }}
+        </p>
+      </div>
+      <p class="text-center text-sm">
+        {{ t('payment.redirect.description') }}
+      </p>
+      <a-button
+        view="outline"
+        block
+        @click="onBack"
+      >
+        {{ t('payment.redirect.changeMethod') }}
+      </a-button>
+    </div>
+  </a-side-panel>
+</template>
+
+<style scoped>
+
+</style>

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

@@ -1,117 +1,117 @@
-<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 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 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 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>