adata-ui 3.1.50 → 3.1.52

package/dist/runtime/components/payment/process/PaymentKaspiRedirectSidePanel.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+import { watch, ref } from "vue";
+import { useAppConfig, useLocalePath, useCookie, useI18n } from "#imports";
+const props = defineProps({
+  requestId: { type: Number, required: true }
+});
+const emit = defineEmits(["back", "updateUserRate"]);
+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 = 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();
+  }, 1e3);
+});
+</script>
+
+<template>
+  <adt-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>
+      <adt-button
+        block
+        @click="goKaspi"
+      >
+        {{ t("payment.redirect.goKaspi") }}
+      </adt-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>
+      <adt-button
+        view="outline"
+        block
+        @click="onBack"
+      >
+        {{ t("payment.redirect.changeMethod") }}
+      </adt-button>
+    </div>
+  </adt-side-panel>
+</template>

package/dist/runtime/components/payment/process/PaymentKaspiRedirectSidePanel.vue.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    requestId: number;
+};
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    back: (type: "kaspi") => any;
+    updateUserRate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onBack?: ((type: "kaspi") => any) | undefined;
+    onUpdateUserRate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/payment/process/PaymentMethodSidePanel.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { IPaymentCard, IPaymentKaspi } from "#components";
+import { ref } from "vue";
+import { useI18n } from "#imports";
+const props = defineProps({
+  sum: { type: Number, required: true }
+});
+const emit = defineEmits(["nextBank", "back"]);
+const isOpen = defineModel({ default: false });
+const { t } = useI18n();
+const checkbox = ref("kaspi");
+const cards = [
+  {
+    id: "kaspi",
+    name: "payment.method.kaspi",
+    sum: 1e4,
+    img: IPaymentKaspi
+  },
+  {
+    id: "other",
+    name: "payment.method.other",
+    sum: 1e4,
+    img: IPaymentCard
+  }
+];
+function confirm() {
+  emit("nextBank", checkbox.value, props.sum);
+}
+function cancel() {
+  isOpen.value = false;
+}
+function onBack() {
+  emit("back", "method");
+}
+</script>
+
+<template>
+  <adt-side-panel
+    v-model="isOpen"
+    width="484px"
+  >
+    <template #header>
+      <div class="flex items-center gap-2">
+        <button @click="onBack">
+          <i-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">
+        <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">
+        <adt-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>
+        </adt-radio-button>
+      </div>
+
+      <div class="flex flex-col gap-2 ">
+        <adt-button
+          :disabled="!checkbox"
+          block
+          @click="confirm"
+        >
+          {{ t("actions.topUp") }}
+        </adt-button>
+        <adt-button
+          view="outline"
+          block
+          @click="cancel"
+        >
+          {{ t("actions.close") }}
+        </adt-button>
+      </div>
+    </div>
+  </adt-side-panel>
+</template>

package/dist/runtime/components/payment/process/PaymentMethodSidePanel.vue.d.ts

@@ -0,0 +1,21 @@
+type IBank = 'kaspi' | 'other';
+type __VLS_Props = {
+    sum: number;
+};
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    back: (type: "method") => any;
+    nextBank: (bank: IBank, sum: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onBack?: ((type: "method") => any) | undefined;
+    onNextBank?: ((bank: IBank, sum: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/payment/process/PaymentProcess.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+import { ref } from "vue";
+import { useAppConfig, useCookie, useI18n, useNuxtApp } from "#imports";
+import PaymentKaspiQrSidePanel from "#adata-ui/components/payment/process/PaymentKaspiQrSidePanel.vue";
+import PaymentMethodSidePanel from "#adata-ui/components/payment/process/PaymentMethodSidePanel.vue";
+import PaymentTopUpSidePanel from "#adata-ui/components/payment/process/PaymentTopUpSidePanel.vue";
+import PaymentKaspiRedirectSidePanel from "#adata-ui/components/payment/process/PaymentKaspiRedirectSidePanel.vue";
+import { usePayment } from "#adata-ui/composables/usePayment";
+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(null);
+function actionPayment(num) {
+  paymentSum.value = num;
+  topUpSidePanel.value = false;
+  methodSidePanel.value = true;
+}
+function toggleKaspiSidePanel(state) {
+  if (window.innerWidth >= 1024) {
+    kaspiQRSidePanel.value = state;
+  } else {
+    kaspiRedirectSidePanel.value = state;
+  }
+}
+function onBack(type) {
+  if (type === "method") {
+    topUpSidePanel.value = true;
+    methodSidePanel.value = false;
+  } else if (type === "kaspi") {
+    toggleKaspiSidePanel(false);
+    methodSidePanel.value = true;
+  }
+}
+async function directionsBanks(bank, sum) {
+  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 ?? void 0
+        }
+      });
+      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 {
+    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"
+    @back="onBack"
+    @update-user-rate="updateUserRate"
+  />
+
+  <payment-kaspi-redirect-side-panel
+    v-model="kaspiRedirectSidePanel"
+    :request-id="requestId"
+    @back="onBack"
+    @update-user-rate="updateUserRate"
+  />
+</template>

package/dist/runtime/components/payment/process/PaymentProcess.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/components/payment/process/PaymentTopUpSidePanel.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { ref, computed } from "vue";
+import { useI18n } from "#imports";
+const emit = defineEmits(["next"]);
+const isOpen = defineModel({ default: false });
+const { t } = useI18n();
+const money = ref(0);
+const errorAlert = ref(false);
+const sumArr = ref([
+  {
+    id: 1,
+    value: 2e3,
+    label: "2 000 \u20B8"
+  },
+  {
+    id: 2,
+    value: 5e3,
+    label: "5 000 \u20B8"
+  },
+  {
+    id: 3,
+    value: 1e4,
+    label: "10 000 \u20B8"
+  },
+  {
+    id: 4,
+    value: 2e4,
+    label: "20 000 \u20B8"
+  }
+]);
+const filterMoney = computed(() => {
+  return money.value >= 1;
+});
+function onSelectAmount(value) {
+  money.value = value;
+  errorAlert.value = false;
+}
+function onClose() {
+  isOpen.value = false;
+  errorAlert.value = false;
+}
+function handlePayment() {
+  if (money.value <= 1e6) {
+    emit("next", money.value);
+    errorAlert.value = false;
+  } else {
+    errorAlert.value = true;
+  }
+}
+</script>
+
+<template>
+  <adt-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 ">
+        <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">
+        <adt-forms-input-standard
+          v-model="money"
+          :label="`${t('payment.topUp.enterAmount')}`"
+          type="number"
+          pattern="[0-9]*"
+          clearable
+        />
+        <adt-alert
+          v-if="errorAlert"
+          color="red"
+        >
+          {{ t("modals.replenish_modal.error") }}
+        </adt-alert>
+        <div class="flex gap-4">
+          <adt-chip
+            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>
+          </adt-chip>
+        </div>
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <adt-button
+          :disabled="!filterMoney"
+          @click="handlePayment"
+        >
+          {{ t("actions.topUp") }}
+        </adt-button>
+        <adt-button
+          view="outline"
+          @click="onClose"
+        >
+          {{ t("actions.back") }}
+        </adt-button>
+      </div>
+    </div>
+  </adt-side-panel>
+</template>

package/dist/runtime/components/payment/process/PaymentTopUpSidePanel.vue.d.ts

@@ -0,0 +1,15 @@
+declare const __VLS_defaults: {
+    modelValue: boolean;
+};
+type __VLS_PublicProps = {
+    modelValue?: typeof __VLS_defaults['modelValue'];
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    next: (sum: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onNext?: ((sum: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/composables/useAdaptive.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from 'vue';
+export type AdaptiveContext = {
+    isMobile: boolean;
+    isTablet: boolean;
+    isSmallTablet: boolean;
+    isDesktop: boolean;
+};
+export declare const useAdaptive: () => Ref<AdaptiveContext>;

package/dist/runtime/composables/useAdaptive.js

@@ -0,0 +1,27 @@
+import { ref, onMounted, onUnmounted } from "vue";
+const isBrowser = typeof window !== void 0 && import.meta.client;
+const computeIsMobile = () => isBrowser ? window.matchMedia("(max-width: 560px)").matches : false;
+const computeIsSmallTablet = () => isBrowser ? window.matchMedia("(max-width: 767px)").matches : false;
+const computeIsTablet = () => isBrowser ? window.innerWidth >= 768 && window.innerWidth < 1024 : false;
+const computeIsDesktop = () => isBrowser ? window.innerWidth >= 1024 : false;
+export const useAdaptive = () => {
+  const ctx = ref({
+    isDesktop: computeIsDesktop(),
+    isMobile: computeIsMobile(),
+    isTablet: computeIsTablet(),
+    isSmallTablet: computeIsSmallTablet()
+  });
+  const setValues = () => ctx.value = {
+    isDesktop: computeIsDesktop(),
+    isMobile: computeIsMobile(),
+    isTablet: computeIsTablet(),
+    isSmallTablet: computeIsSmallTablet()
+  };
+  onMounted(
+    () => {
+      window.addEventListener("resize", setValues, { passive: true });
+    }
+  );
+  onUnmounted(() => window.removeEventListener("resize", setValues));
+  return ctx;
+};

package/dist/runtime/composables/usePayment.d.ts

@@ -0,0 +1,8 @@
+export declare function usePayment(): {
+    rateId: import("vue").Ref<string, string>;
+    topUpSidePanel: import("vue").Ref<boolean, boolean>;
+    methodSidePanel: import("vue").Ref<boolean, boolean>;
+    kaspiQRSidePanel: import("vue").Ref<boolean, boolean>;
+    kaspiRedirectSidePanel: import("vue").Ref<boolean, boolean>;
+    payByCard: (sum: number, rate?: any) => Promise<void>;
+};

package/dist/runtime/composables/usePayment.js

@@ -0,0 +1,66 @@
+import { removeTrailingSlash } from "#adata-ui/utils/removeTrailingSlash";
+import { useState, useNuxtApp, useAppConfig, useCookie } from "#imports";
+export function usePayment() {
+  const topUpSidePanel = useState("top-up-side-panel", () => false);
+  const methodSidePanel = useState("method-side-panel", () => false);
+  const kaspiQRSidePanel = useState("kaspi-qr-side-panel", () => false);
+  const kaspiRedirectSidePanel = useState("kaspi-redirect-side-panel", () => false);
+  const rateId = useState("use-rate-id");
+  async function payByCard(sum, rate) {
+    const { $toast, $i18n } = useNuxtApp();
+    const { adataUI, commonAuth } = useAppConfig();
+    const accessToken = useCookie("accessToken");
+    const t = $i18n.t;
+    const publicId = adataUI.cloudPayments;
+    const userApiURL = commonAuth.userApiURL;
+    try {
+      const { data } = await $fetch(`${removeTrailingSlash(userApiURL)}/top_ups`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${accessToken.value}`
+        },
+        params: {
+          amount: sum
+        }
+      });
+      if (data) {
+        const { amount, id, user_id } = data;
+        const widget = new tiptop.Widget();
+        widget.pay(
+          "charge",
+          {
+            publicId,
+            description: t("payment.bank.description"),
+            amount: Number.parseInt(amount),
+            currency: "KZT",
+            invoiceId: id.toString(),
+            accountId: user_id.toString(),
+            skin: "modern",
+            data: {
+              myProp: "myProp value",
+              rate
+            }
+          },
+          {
+            onSuccess() {
+              $toast.success(t("payment.bank.paySuccess"));
+            },
+            onFail() {
+              $toast.error(t("payment.bank.payError"));
+            }
+          }
+        );
+      }
+    } catch (error) {
+      throw new Error(error.data.message);
+    }
+  }
+  return {
+    rateId,
+    topUpSidePanel,
+    methodSidePanel,
+    kaspiQRSidePanel,
+    kaspiRedirectSidePanel,
+    payByCard
+  };
+}