adata-ui 2.0.38 → 2.0.40

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

@@ -0,0 +1,136 @@
+<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 {
+  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,
+        },
+      })
+      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,113 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'next', sum: number): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t } = useI18n()
+
+const money = ref(0)
+const sumArr = ref([
+  {
+    id: 1,
+    value: 1000,
+    label: '1 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 > 0
+})
+
+function onSelectAmount(value: number) {
+  money.value = value
+}
+
+function onClose() {
+  isOpen.value = false
+}
+
+function handlePayment() {
+  emit('next', money.value)
+}
+</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
+        />
+        <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/forms/README.md

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

package/components/modals/AConfirmationEmail.vue

@@ -1,40 +1,40 @@
-<script setup lang="ts">
-const emit = defineEmits<{
-  (e: 'resend'): void
-  (e: 'close'): void
-}>()
-</script>
-
-<template>
-  <div class="flex flex-col justify-center items-center gap-5">
-    <p class="heading-02">
-      {{ $t('login.modal.title') }}
-    </p>
-    <a-ill-mail />
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle1') }}
-    </p>
-    <p class="body-400 text-center">
-      {{ $t('login.modal.confirmationEmail') }}
-    </p>
-    <div class="flex flex-col gap-2 w-full">
-      <a-button
-        class="w-full"
-        view="outline"
-        @click="emit('close')"
-      >
-        {{ $t('login.modal.back') }}
-      </a-button>
-      <a-button
-        class="w-full"
-        @click="emit('resend')"
-      >
-        {{ $t('login.modal.resend') }}
-      </a-button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'resend'): void
+  (e: 'close'): void
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-5">
+    <p class="heading-02">
+      {{ $t('login.modal.title') }}
+    </p>
+    <a-ill-mail />
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle1') }}
+    </p>
+    <p class="body-400 text-center">
+      {{ $t('login.modal.confirmationEmail') }}
+    </p>
+    <div class="flex flex-col gap-2 w-full">
+      <a-button
+        class="w-full"
+        view="outline"
+        @click="emit('close')"
+      >
+        {{ $t('login.modal.back') }}
+      </a-button>
+      <a-button
+        class="w-full"
+        @click="emit('resend')"
+      >
+        {{ $t('login.modal.resend') }}
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/ContentNavigationModal.vue

@@ -193,11 +193,11 @@ const sideLinks = <any>{
       label: 'header.products.fines.items.auto.title',
       link: myLayer.avtoUrl + PAGES.fines.avto
     },
-    {
-      icon: IconTruck,
-      label: 'header.products.fines.items.wholesaleAuto.title',
-      link: myLayer.avtoUrl + PAGES.fines.bulk
-    }
+    // {
+    //   icon: IconTruck,
+    //   label: 'header.products.fines.items.wholesaleAuto.title',
+    //   link: myLayer.avtoUrl + PAGES.fines.bulk
+    // }
   ],
   fea: [
     {

package/components/modals/Resend.vue

@@ -1,81 +1,81 @@
-<script setup lang="ts">
-
-const emit = defineEmits<{
-  (e: 'resend'): void
-  (e: 'close'): void
-}>()
-
-const timer = ref(60)
-const isResend = ref(false)
-const route = useRoute()
-const appConfig = useAppConfig()
-const landingUrl = appConfig.myLayer.landingUrl
-
-function runTimer() {
-  timer.value = 60
-  const intervalId = setInterval(() => {
-    if (timer.value <= 0) {
-      isResend.value = true
-      clearInterval(intervalId);
-      return;
-    }
-    timer.value--;
-  }, 1000);
-}
-
-onMounted(() => resend())
-
-const resend = () => {
-  isResend.value = false
-  runTimer()
-  emit('resend')
-}
-const goToMain = () => {
-  if (route.query.url) {
-    document.location.replace(route.query.url)
-  } else {
-    document.location.replace(landingUrl)
-  }
-  emit('close')
-
-}
-</script>
-
-<template>
-  <div class="flex flex-col justify-center items-center gap-5">
-    <p class="heading-02">
-      {{ $t('login.modal.title') }}
-    </p>
-    <a-ill-mail />
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle1') }}
-    </p>
-    <p class="body-400 text-center">
-      {{ $t('login.modal.subtitle2') }}
-    </p>
-    <p
-      v-if="!isResend"
-      class="heading-02"
-    >
-      {{ timer }} {{ $t('login.modal.seconds') }}
-    </p>
-    <a-button
-      v-else
-      class="w-full"
-      view="outline"
-      @click="resend"
-    >
-      {{ $t('login.modal.resend') }}
-    </a-button>
-    <a-button
-      class="w-full"
-      @click="goToMain"
-    >
-      {{ $t('login.modal.back') }}
-    </a-button>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
+<script setup lang="ts">
+
+const emit = defineEmits<{
+  (e: 'resend'): void
+  (e: 'close'): void
+}>()
+
+const timer = ref(60)
+const isResend = ref(false)
+const route = useRoute()
+const appConfig = useAppConfig()
+const landingUrl = appConfig.myLayer.landingUrl
+
+function runTimer() {
+  timer.value = 60
+  const intervalId = setInterval(() => {
+    if (timer.value <= 0) {
+      isResend.value = true
+      clearInterval(intervalId);
+      return;
+    }
+    timer.value--;
+  }, 1000);
+}
+
+onMounted(() => resend())
+
+const resend = () => {
+  isResend.value = false
+  runTimer()
+  emit('resend')
+}
+const goToMain = () => {
+  if (route.query.url) {
+    document.location.replace(route.query.url)
+  } else {
+    document.location.replace(landingUrl)
+  }
+  emit('close')
+
+}
+</script>
+
+<template>
+  <div class="flex flex-col justify-center items-center gap-5">
+    <p class="heading-02">
+      {{ $t('login.modal.title') }}
+    </p>
+    <a-ill-mail />
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle1') }}
+    </p>
+    <p class="body-400 text-center">
+      {{ $t('login.modal.subtitle2') }}
+    </p>
+    <p
+      v-if="!isResend"
+      class="heading-02"
+    >
+      {{ timer }} {{ $t('login.modal.seconds') }}
+    </p>
+    <a-button
+      v-else
+      class="w-full"
+      view="outline"
+      @click="resend"
+    >
+      {{ $t('login.modal.resend') }}
+    </a-button>
+    <a-button
+      class="w-full"
+      @click="goToMain"
+    >
+      {{ $t('login.modal.back') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/id/IdBanner.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const { registrationModal } = useIdModals()
+
+function onRegister() {
+  registrationModal.value = true
+}
+</script>
+
+<template>
+  <div class="gradient flex justify-between rounded-lg p-4 ring-1 ring-inset ring-blue-700/80 dark:bg-gray-800">
+    <div>
+      <p class="mb-2 font-semibold">
+        {{ t('modals.id.banner.title') }}
+      </p>
+      <i18n-t
+        keypath="modals.id.banner.subtitle"
+        tag="p"
+        class="text-sm text-gray-600 dark:text-gray-200"
+      >
+        <template #register>
+          <button class="font-semibold text-blue-700 dark:text-blue-500" @click="onRegister">
+            {{ t('modals.id.banner.register') }}
+          </button>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onRegister"
+    >
+      {{ t('actions.register') }}
+    </a-button>
+  </div>
+</template>
+
+<style scoped>
+.gradient {
+  background: linear-gradient(
+    239.71deg,
+    #B3D5F9 -7.48%,
+    #E6F1FD 39.62%,
+    #CCE2FB 85.82%
+  );
+}
+
+.dark .gradient {
+  background: linear-gradient(
+    239.71deg,
+    #17303F -7.48%,
+    #161617 39.62%,
+    #17303F 85.82%
+  );
+}
+</style>

package/components/modals/id/IdConfirmAccountOtpModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdOtpInput from '#adata-ui/components/modals/id/IdOtpInput.vue'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
 
 const { $toast } = useNuxtApp()
 const { t, locale } = useI18n()
 const { commonAuth } = useAppConfig()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { confirmAccountOtpModal, confirmSuccessfulModal } = useIdModals()
+const { confirmAccountOtpModal, confirmSuccessfulModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/modals/id/IdLoginModal.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import { navigateToLocalizedPage } from '#adata-ui/utils/localizedNavigation'
 import * as z from 'zod'
 
@@ -8,10 +7,7 @@ const { $toast } = useNuxtApp()
 const { myLayer, commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal } = useIdModals()
+const { loginModal, registrationModal, recoveryModal, confirmAccountOtpModal, twoFactorModal, intermediateState } = useIdModals()
 
 const authApiURL = commonAuth.authApiURL
 

package/components/modals/id/IdModals.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import IdConfirmAccountOtpModal from '#adata-ui/components/modals/id/IdConfirmAccountOtpModal.vue'
 import IdConfirmSuccessfulModal from '#adata-ui/components/modals/id/IdConfirmSuccessfulModal.vue'
 import IdLoginModal from '#adata-ui/components/modals/id/IdLoginModal.vue'

package/components/modals/id/IdNewPasswordModal.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
 const authApiURL = commonAuth.authApiURL
-const { newPasswordModal, passwordSuccessfulModal } = useIdModals()
+const { newPasswordModal, passwordSuccessfulModal, intermediateState } = useIdModals()
 
 const form = reactive({
   password: '',

package/components/modals/id/IdRecoveryModal.vue

@@ -1,16 +1,12 @@
 <script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/modals/id/helpers/removeTrailingSlash'
-import { useAuthStore } from '#adata-ui/stores/auth.store'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 import * as z from 'zod'
 
 const { $toast } = useNuxtApp()
 const { commonAuth } = useAppConfig()
 const { t, locale } = useI18n()
 
-const authStore = useAuthStore()
-const { intermediateState } = storeToRefs(authStore)
-
-const { recoveryModal, resetPasswordOtpModal } = useIdModals()
+const { recoveryModal, resetPasswordOtpModal, intermediateState } = useIdModals()
 const authApiURL = commonAuth.authApiURL
 const emailField = ref('')
 const loading = ref(false)