adata-ui 2.1.0 → 2.1.2

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

@@ -0,0 +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>

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

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

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

@@ -0,0 +1,138 @@
+<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
+  }
+}
+
+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') {
+    await payByCard(sum)
+  }
+}
+
+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',
+    //   },
+    // })
+    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>

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

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import ASidePanel from "#adata-ui/components/overlays/side-panel/ASidePanel.vue";
+
+const emit = defineEmits<{
+  (e: 'next', sum: number): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t } = useI18n()
+
+const money = ref(0)
+const errorAlert = ref(false)
+
+const sumArr = ref([
+  {
+    id: 1,
+    value: 2000,
+    label: '2 000 ₸',
+  },
+  {
+    id: 2,
+    value: 5000,
+    label: '5 000 ₸',
+  },
+  {
+    id: 3,
+    value: 10000,
+    label: '10 000 ₸',
+  },
+  {
+    id: 4,
+    value: 20000,
+    label: '20 000 ₸',
+  },
+])
+
+const filterMoney = computed(() => {
+  return money.value >= 1
+})
+
+function onSelectAmount(value: number) {
+  money.value = value
+  errorAlert.value = false
+}
+
+function onClose() {
+  isOpen.value = false
+  errorAlert.value = false
+}
+
+function handlePayment() {
+  if (money.value <= 1000000) {
+    emit('next', money.value)
+    errorAlert.value = false
+  } else {
+    errorAlert.value = true
+  }
+}
+</script>
+
+<template>
+  <a-side-panel v-model="isOpen"  width="484px">
+    <template #header>
+      <div class="text-xl font-semibold">
+        {{ t('payment.topUp.title') }}
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col items-center gap-4 ">
+        <a-ill-bill class="size-[120px]" />
+        <p class="text-center text-sm font-semibold">
+          {{ t('payment.topUp.info') }}
+        </p>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <a-input-standard
+          v-model="money"
+          :label="`${t('payment.topUp.enterAmount')}`"
+          type="number"
+          pattern="[0-9]*"
+          clearable
+        />
+        <a-alert
+          v-if="errorAlert"
+          color="red"
+        >
+          {{ t('modals.replenish_modal.error') }}
+        </a-alert>
+        <div class="flex gap-4">
+          <a-chips
+            v-for="item in sumArr"
+            :key="item.id"
+            view="standard"
+            size="lg"
+            :class="[
+              money === item.value
+                ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
+                : '',
+            ]"
+            @click.stop="onSelectAmount(item.value)"
+          >
+            <span>{{ item.label }}</span>
+          </a-chips>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <a-button
+          :disabled="!filterMoney"
+          @click="handlePayment"
+        >
+          {{ t('actions.topUp') }}
+        </a-button>
+        <a-button
+          view="outline"
+          @click="onClose"
+        >
+          {{ t('actions.back') }}
+        </a-button>
+      </div>
+    </div>
+  </a-side-panel>
+</template>
+
+<style scoped>
+
+</style>

package/components/features/pk-mobile-services/APkMobileServices.vue

@@ -1,8 +1,13 @@
 <script setup lang="ts">
-
+import { PAGES } from '#adata-ui/shared/constans/pages'
 import { usePkServicesLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import { useUrls } from '#adata-ui/composables/useUrls'
 
 const services = usePkServicesLinks()
+const route = useRoute()
+const localePath = useLocalePath()
+const { landing } = useUrls()
+const { locale } = useI18n()
 
 const blockStyles = [
   'first-border-gradient',
@@ -15,6 +20,17 @@ const blockStyles = [
   'eighth-border-gradient',
   'ninth-border-gradient',
 ]
+const linkByIndex = [
+  PAGES.pk.main,
+  PAGES.pk.employees,
+  PAGES.pk.connections,
+  PAGES.pk.offshore,
+  PAGES.pk.foreign,
+  PAGES.pk.unload,
+  PAGES.pk.compare,
+  PAGES.pk.sanctions,
+  buildLocalizedUrl(locale, landing, '/all-services'),
+]
 </script>
 
 <template>
@@ -27,7 +43,10 @@ const blockStyles = [
     >
       <div
         class="size-10 p-2 rounded-lg"
-        :class="index === services.length - 1 ? 'bg-gradient-blue text-white' : 'bg-deepblue-900/5 dark:bg-gray-200/5'"
+        :class="[
+          'bg-deepblue-900/5 dark:bg-gray-200/5',
+          {'!bg-blue-700 text-white dark:!bg-blue-500 ': route.path.replace(/\/+$/, '') === localePath(linkByIndex[index]).replace(/\/+$/, '')}
+        ]"
       >
         <component
           :is="service.icon"

package/components/forms/README.md

@@ -1 +1 @@
-# inputs
+# inputs

package/components/forms/checkbox/ACheckbox.vue

@@ -20,7 +20,6 @@
     >
       <span
         v-if="side==='left' && hasSlotContent"
-        class="select-none"
       >
         <slot />
       </span>
@@ -43,7 +42,6 @@
       </span>
       <span
         v-if="side==='right' && hasSlotContent"
-        class="select-none"
       >
         <slot />
       </span>

package/components/forms/radio-button/ARadioButton.vue

@@ -7,6 +7,7 @@
       :name="name"
       type="radio"
       class="hidden"
+      ref="input"
       :checked="model === value"
       :disabled="disabled"
       @change="update"
@@ -16,9 +17,11 @@
       class="flex items-center text-deepblue-900 dark:text-gray-200 cursor-pointer w-full whitespace-nowrap"
       :class="[textSizeOptions[size]]"
     >
-      <span v-if="side==='left'" class="select-none w-full"><slot /></span>
-      <component :is="currentComponent" class="text-deepblue-900 dark:text-gray-200 w-full" :class="[sizeOptions[size]]"/>
-      <span v-if="side==='right'" class="select-none w-full"><slot /></span>
+      <span v-if="side==='left'" class="select-none w-full"><slot/></span>
+      <component :is="currentComponent" class="text-deepblue-900 dark:text-gray-200 w-full"
+                 :class="[sizeOptions[size]]"
+      />
+      <span v-if="side==='right'" class="select-none w-full"><slot/></span>
     </label>
   </div>
 </template>
@@ -34,10 +37,11 @@ interface Props {
   size?: 'lg' | 'sm',
   name?: string
   disabled?: boolean
-  side?:'right' | 'left'
+  side?: 'right' | 'left'
   value: string | number | boolean | null | undefined
   permanent?: boolean
 }
+
 const props = withDefaults(defineProps<Props>(), {
   size: 'sm',
   name: 'check',
@@ -49,23 +53,20 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['radioChanged'])
 const model = defineModel<string | number | boolean | null | undefined>()
+const input = ref()
 
 const currentComponent = computed(() => {
-  if (model.value ===props.value ) {
-    return  RadioCheck
+  if (model.value === props.value) {
+    return RadioCheck
   } else {
     return RadioEmpty
   }
 })
 
 function update() {
-  if(props.disabled) return
+  if (props.disabled) return
+  model.value = props.value
 
-  if(props.value == model.value && !props.permanent) {
-    model.value = undefined
-  }else{
-    model.value = props.value
-  }
   emit("radioChanged", model.value)
 
 }
@@ -79,7 +80,14 @@ const textSizeOptions = {
   sm: 'text-xs gap-2'
 }
 
-
+watch(model, async (e) => {
+  await nextTick()
+  if (props.value == e && !props.permanent) {
+    input.value.addEventListener('click', () => {
+      model.value = undefined
+    })
+  }
+}, {immediate: true, deep: true})
 </script>
 
 <style scoped>