adata-ui 2.1.41-beta.7 → 2.1.41-beta.9

package/components/features/payment/banner/UpSellBanner.vue

@@ -1,105 +1,105 @@
-<script setup lang="ts">
-import { useUrls } from '#adata-ui/composables/useUrls'
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { PAGES } from '#adata-ui/shared/constans/pages'
-
-const props = defineProps<{
-  code: string
-  balance: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'closeBanner'): void
-}>()
-
-const { landing } = useUrls()
-const { $toast } = useNuxtApp()
-
-const { t, locale } = useI18n()
-const accessToken = useCookie('accessToken')
-
-const { commonAuth } = useAppConfig()
-
-const userApiURL = commonAuth.userApiURL
-
-const isLoading = ref(false)
-
-const tariffCodes = {
-  active_usage_basic: {
-    tariff: 'adata',
-  },
-  regular_usage_basic: {
-    tariff: 'adata',
-  },
-  overpayment_basic: {
-    tariff: 'adata',
-  },
-  regular_usage_adata: {
-    tariff: 'adata_year',
-  },
-  overpayment_adata: {
-    tariff: 'adata_year',
-  },
-}
-
-async function updateUserRate() {
-  try {
-    isLoading.value = true
-    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
-      method: 'PUT',
-      credentials: 'include',
-      headers: {
-        Authorization: `Bearer ${accessToken.value}`,
-        lang: locale.value,
-      },
-      body: {
-        rate_code: tariffCodes[props.code].tariff
-      },
-    })
-    window.location.reload()
-  }
-  catch (error) {
-    $toast.error(error.data.message)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-function onBuy() {
-  navigateToLocalizedPage({locale, projectUrl: landing, path: PAGES.tariffs, target: '_blank'})
-}
-</script>
-
-<template>
-  <div class="relative bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
-    <div class="flex flex-col gap-3">
-      <p class="text-h5">
-        {{ t(`payment.upsell.${code}.title`) }}
-      </p>
-
-      <i18n-t
-        :keypath="`payment.upsell.${code}.description`"
-        tag="p"
-        class="text-body-md whitespace-pre-line"
-      >
-        <template #highlight>
-          <span class="font-semibold">{{ t(`payment.upsell.${code}.highlight`) }}</span>
-        </template>
-      </i18n-t>
-    </div>
-
-    <a-icon-x-mark
-      class="absolute top-4 right-4 size-4 cursor-pointer"
-      @click="emit('closeBanner')"
-    />
-
-    <a-button
-      size="md"
-      class="self-end"
-      @click="onBuy"
-    >
-      {{ t('payment.upsell.goToAdataPlan') }}
-    </a-button>
-  </div>
-</template>
+<script setup lang="ts">
+import { useUrls } from '#adata-ui/composables/useUrls'
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+
+const props = defineProps<{
+  code: string
+  balance: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'closeBanner'): void
+}>()
+
+const { landing } = useUrls()
+const { $toast } = useNuxtApp()
+
+const { t, locale } = useI18n()
+const accessToken = useCookie('accessToken')
+
+const { commonAuth } = useAppConfig()
+
+const userApiURL = commonAuth.userApiURL
+
+const isLoading = ref(false)
+
+const tariffCodes = {
+  active_usage_basic: {
+    tariff: 'adata',
+  },
+  regular_usage_basic: {
+    tariff: 'adata',
+  },
+  overpayment_basic: {
+    tariff: 'adata',
+  },
+  regular_usage_adata: {
+    tariff: 'adata_year',
+  },
+  overpayment_adata: {
+    tariff: 'adata_year',
+  },
+}
+
+async function updateUserRate() {
+  try {
+    isLoading.value = true
+    await $fetch(`${removeTrailingSlash(userApiURL)}/user/rate`, {
+      method: 'PUT',
+      credentials: 'include',
+      headers: {
+        Authorization: `Bearer ${accessToken.value}`,
+        lang: locale.value,
+      },
+      body: {
+        rate_code: tariffCodes[props.code].tariff
+      },
+    })
+    window.location.reload()
+  }
+  catch (error) {
+    $toast.error(error.data.message)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function onBuy() {
+  navigateToLocalizedPage({locale, projectUrl: landing, path: PAGES.tariffs, target: '_blank'})
+}
+</script>
+
+<template>
+  <div class="relative bg-gradient-banner flex justify-between rounded-md p-4 ring-1 ring-inset ring-(--border-color-brand)/80">
+    <div class="flex flex-col gap-3">
+      <p class="text-h5">
+        {{ t(`payment.upsell.${code}.title`) }}
+      </p>
+
+      <i18n-t
+        :keypath="`payment.upsell.${code}.description`"
+        tag="p"
+        class="text-body-md whitespace-pre-line"
+      >
+        <template #highlight>
+          <span class="font-semibold">{{ t(`payment.upsell.${code}.highlight`) }}</span>
+        </template>
+      </i18n-t>
+    </div>
+
+    <a-icon-x-mark
+      class="absolute top-4 right-4 size-4 cursor-pointer"
+      @click="emit('closeBanner')"
+    />
+
+    <a-button
+      size="md"
+      class="self-end"
+      @click="onBuy"
+    >
+      {{ t('payment.upsell.goToAdataPlan') }}
+    </a-button>
+  </div>
+</template>

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

@@ -1,180 +1,180 @@
-<script setup lang="ts">
-import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
-import { toCanvas } from 'qrcode'
-
-const props = defineProps<{
-  requestUrl: string
-  requestId: number
-}>()
-
-const emit = defineEmits<{
-  (e: 'back', type: 'kaspi'): void
-  (e: 'updateUserRate'): void
-}>()
-
-const isOpen = defineModel({ default: false })
-
-const { t, locale } = useI18n()
-const { commonAuth } = useAppConfig()
-const accessToken = useCookie('accessToken')
-const colorMode = useColorMode()
-
-const userApiURL = commonAuth.userApiURL
-
-const paymentSuccess = ref(false)
-let intervalId: NodeJS.Timeout | null = null
-
-function onBack() {
-  emit('back', 'kaspi')
-}
-
-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)
-  }
-}
-
-watch(isOpen, async (value) => {
-  if (!value) {
-    if (intervalId) {
-      clearInterval(intervalId)
-    }
-    return
-  }
-
-  await nextTick()
-
-  const canvas = document.getElementById('kaspiQr') as HTMLCanvasElement | null
-  if (!canvas) return
-
-  toCanvas(
-    canvas,
-    props.requestUrl,
-    {
-      errorCorrectionLevel: 'H',
-      width: 300,
-      margin: 0,
-      /* Canvas API: CSS-переменные недоступны — hex обязателен */
-      color: {
-        dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
-        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
-      },
-    },
-    (error) => {
-      if (error) {
-        console.error(error)
-        return
-      }
-
-      const ctx = canvas.getContext('2d')
-      if (!ctx) return
-
-      const logo = new Image()
-      logo.src = '/kaspi/logo.svg'
-      logo.onload = () => {
-        const size = canvas.width * 0.2
-        const x = (canvas.width - size) / 2
-        const y = (canvas.height - size) / 2
-
-        ctx.fillStyle = colorMode.value === 'dark' ? '#000000' : '#fff'
-        ctx.fillRect(x - 6, y - 6, size + 12, size + 12)
-
-        ctx.drawImage(logo, x, y, size, size)
-      }
-    },
-  )
-
-  intervalId = setInterval(() => {
-    if (paymentSuccess.value && intervalId) {
-      clearInterval(intervalId)
-      emit('updateUserRate')
-      return
-    }
-    checkPayment()
-  }, 1000)
-})
-</script>
-
-<template>
-  <a-side-panel
-    v-model="isOpen"
-    width="484px"
-  >
-    <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="kaspi-qr-back-button"
-          @click="onBack"
-        >
-          <a-icon-chevron-left class="size-6" />
-        </button>
-        <p class="text-h3 text-primary" data-test-id="kaspi-qr-title">
-          {{ t('payment.kaspi.title') }}
-        </p>
-      </div>
-    </template>
-
-    <div class="flex flex-col gap-6">
-      <p class="text-center text-body-md-medium text-quaternary">
-        {{ t('payment.kaspi.description') }}
-      </p>
-
-      <div class="flex flex-col items-center gap-5 rounded-xl border border-default bg-main p-6" data-test-id="kaspi-qr-payment-block">
-        <div class="flex items-center gap-3">
-          <a-icon-kaspi-qr class="size-14" />
-          <span class="text-[40px] font-bold leading-none text-primary">
-            {{ t('payment.kaspi.qr') }}
-          </span>
-        </div>
-
-        <p class="text-center text-h3 font-bold text-primary">
-          {{ t('payment.kaspi.scan') }}
-        </p>
-
-        <canvas
-          id="kaspiQr"
-          class="rounded-md"
-        />
-
-        <p class="text-center text-body-lg text-quaternary">
-          {{ t('payment.kaspi.adata') }}
-        </p>
-      </div>
-    </div>
-
-    <template #footer>
-      <a-button-v2
-        view="outline"
-        color="gray"
-        size="lg"
-        data-test-id="kaspi-qr-change-payment-method-button"
-        block
-        @click="onBack"
-      >
-        {{ t('payment.kaspi.changeMethod') }}
-      </a-button-v2>
-    </template>
-  </a-side-panel>
-</template>
-
-<style scoped></style>
+<script setup lang="ts">
+import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { toCanvas } from 'qrcode'
+
+const props = defineProps<{
+  requestUrl: string
+  requestId: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'back', type: 'kaspi'): void
+  (e: 'updateUserRate'): void
+}>()
+
+const isOpen = defineModel({ default: false })
+
+const { t, locale } = useI18n()
+const { commonAuth } = useAppConfig()
+const accessToken = useCookie('accessToken')
+const colorMode = useColorMode()
+
+const userApiURL = commonAuth.userApiURL
+
+const paymentSuccess = ref(false)
+let intervalId: NodeJS.Timeout | null = null
+
+function onBack() {
+  emit('back', 'kaspi')
+}
+
+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)
+  }
+}
+
+watch(isOpen, async (value) => {
+  if (!value) {
+    if (intervalId) {
+      clearInterval(intervalId)
+    }
+    return
+  }
+
+  await nextTick()
+
+  const canvas = document.getElementById('kaspiQr') as HTMLCanvasElement | null
+  if (!canvas) return
+
+  toCanvas(
+    canvas,
+    props.requestUrl,
+    {
+      errorCorrectionLevel: 'H',
+      width: 300,
+      margin: 0,
+      /* Canvas API: CSS-переменные недоступны — hex обязателен */
+      color: {
+        dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
+        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
+      },
+    },
+    (error) => {
+      if (error) {
+        console.error(error)
+        return
+      }
+
+      const ctx = canvas.getContext('2d')
+      if (!ctx) return
+
+      const logo = new Image()
+      logo.src = '/kaspi/logo.svg'
+      logo.onload = () => {
+        const size = canvas.width * 0.2
+        const x = (canvas.width - size) / 2
+        const y = (canvas.height - size) / 2
+
+        ctx.fillStyle = colorMode.value === 'dark' ? '#000000' : '#fff'
+        ctx.fillRect(x - 6, y - 6, size + 12, size + 12)
+
+        ctx.drawImage(logo, x, y, size, size)
+      }
+    },
+  )
+
+  intervalId = setInterval(() => {
+    if (paymentSuccess.value && intervalId) {
+      clearInterval(intervalId)
+      emit('updateUserRate')
+      return
+    }
+    checkPayment()
+  }, 1000)
+})
+</script>
+
+<template>
+  <a-side-panel
+    v-model="isOpen"
+    width="484px"
+  >
+    <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="kaspi-qr-back-button"
+          @click="onBack"
+        >
+          <a-icon-chevron-left class="size-6" />
+        </button>
+        <p class="text-h3 text-primary" data-test-id="kaspi-qr-title">
+          {{ t('payment.kaspi.title') }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-6">
+      <p class="text-center text-body-md-medium text-quaternary">
+        {{ t('payment.kaspi.description') }}
+      </p>
+
+      <div class="flex flex-col items-center gap-5 rounded-xl border border-default bg-main p-6" data-test-id="kaspi-qr-payment-block">
+        <div class="flex items-center gap-3">
+          <a-icon-kaspi-qr class="size-14" />
+          <span class="text-[40px] font-bold leading-none text-primary">
+            {{ t('payment.kaspi.qr') }}
+          </span>
+        </div>
+
+        <p class="text-center text-h3 font-bold text-primary">
+          {{ t('payment.kaspi.scan') }}
+        </p>
+
+        <canvas
+          id="kaspiQr"
+          class="rounded-md"
+        />
+
+        <p class="text-center text-body-lg text-quaternary">
+          {{ t('payment.kaspi.adata') }}
+        </p>
+      </div>
+    </div>
+
+    <template #footer>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        data-test-id="kaspi-qr-change-payment-method-button"
+        block
+        @click="onBack"
+      >
+        {{ t('payment.kaspi.changeMethod') }}
+      </a-button-v2>
+    </template>
+  </a-side-panel>
+</template>
+
+<style scoped></style>