adata-ui 0.3.99 → 2.0.0

package/components/modals/Insufficient-funds-modal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { UserInfo } from '~/api/modules/user/types'
+import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
+
+const props = withDefaults(defineProps<Props>(), {
+  deleteFromDom: false,
+})
+
+const emit = defineEmits<{
+  (e: 'next'): void
+}>()
+
+const { t } = useI18n()
+
+interface Props {
+  deleteFromDom?: boolean
+}
+const isOpen = defineModel<boolean>({ default: false })
+const userInfo = useState<UserInfo>('user-info', () => ({}))
+function confirm() {
+  emit('next')
+}
+function cancel() {
+  isOpen.value = false
+}
+
+if (props.deleteFromDom) {
+  handleElementPosition('insufficient-funds')
+}
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    name="insufficient-funds"
+    :prevent-close="true"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="heading-02 text-center">
+        {{ t('modals.low_balance.title') }}
+      </p>
+      <a-ill-empty-wallet class="self-center" />
+      <div class="m-[0_-32px] flex flex-col bg-green-500 py-1.5">
+        <p class="body-600 text-center  text-white ">
+          {{ t('modals.low_balance.current_balance') }}
+        </p>
+        <p class="body-600 text-center text-xl text-white ">
+          {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
+        </p>
+      </div>
+      <p class="text-center">
+        {{ t('modals.low_balance.questions') }}
+      </p>
+    </div>
+    <template #footer>
+      <div class="flex gap-2 ">
+        <a-button
+          view="outline"
+          block
+          @click="cancel"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button>
+        <a-button block @click="confirm">
+          {{ t('modals.buttons.topUp') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/LimitReachedModal.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const { t } = useI18n()
+const isOpen = useLimitReachedModal()
+const appConfig = useAppConfig()
+const loginUrl = appConfig.myLayer.landingUrl
+
+function goTariffs() {
+  if (window) {
+    window.location.href = `${loginUrl}/tariffs`
+  }
+}
+</script>
+
+<template>
+  <a-modal v-model="isOpen" :title="t('modals.limit.title')">
+    <div class="flex flex-col items-center gap-5 text-center text-sm">
+      <a-ill-empty-wallet></a-ill-empty-wallet>
+      <div>{{ t('modals.limit.content') }}</div>
+    </div>
+    <template #footer>
+      <a-button @click="goTariffs" block>{{ t('modals.buttons.goTariffs') }}</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/NoAccessModal.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useNoAccessModal } from '#adata-ui/composables/modalsState'
+
+const { t } = useI18n()
+
+const isOpen = useNoAccessModal()
+
+const onClose = () => {
+  isOpen.value = false
+}
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    name="no-access-modal"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="heading-02 text-center">
+        {{ t('modals.no_access.title') }}
+      </p>
+      <a-ill-door class="w-full" />
+      <p class="body-400 whitespace-pre-wrap text-center">
+        {{ t('modals.no_access.info') }}
+      </p>
+    </div>
+    <template #footer>
+      <a-button
+        view="outline"
+        block
+        @click="onClose"
+      >
+        {{ t('modals.buttons.close') }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>

package/components/modals/PaymentMethodModal.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { AIconPaymentCard, AIconPaymentKaspi } from '#components'
+import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
+
+const props = withDefaults(
+  defineProps<{
+    sum: number
+    deleteFromDom?: boolean
+
+  }>(),
+  {
+    sum: 0,
+    deleteFromDom: false,
+
+  },
+)
+const emit = defineEmits<{
+  (e: 'nextBank', num: number): void
+}>()
+const { t } = useI18n()
+const isOpen = defineModel<boolean>({ default: false })
+const checkbox = ref('kaspi')
+const cards = [
+  {
+    id: 'kaspi',
+    name: 'modals.payment_method.banks.kaspi',
+    sum: 10000,
+    img: AIconPaymentKaspi,
+  },
+  {
+    id: 'other',
+    name: 'modals.payment_method.banks.other',
+    sum: 10000,
+    img: AIconPaymentCard,
+  },
+]
+function confirm() {
+  emit('nextBank', checkbox.value, props.sum)
+}
+function cancel() {
+  isOpen.value = false
+}
+if (props.deleteFromDom) {
+  handleElementPosition('payment-method')
+}
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    name="payment-method"
+    :prevent-close="true"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="heading-02 text-center">
+        {{ t('modals.payment_method.title') }}
+      </p>
+      <a-ill-phone-check class="w-full" />
+      <p class="body-400 whitespace-pre-wrap text-center">
+        {{ t('modals.payment_method.questions') }}
+      </p>
+      <a-radio-button
+        v-for="(item) in cards"
+        :key="item.id"
+        v-model="checkbox"
+        :name="`${item.name}`"
+        side="right"
+        :value="item.id"
+        class="flex items-center justify-between	gap-2 bg-gray-50 p-[10px_16px] rounded-md 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>
+    <template #footer>
+      <div class="flex gap-2 ">
+        <a-button
+          view="outline"
+          block
+          @click="cancel"
+        >
+          {{ t('modals.buttons.close') }}
+        </a-button>
+        <a-button block @click="confirm">
+          {{ t('modals.buttons.topUp') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/RedirectsBanksModal.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
+
+const props = withDefaults(
+  defineProps<{
+    requestId: number
+    deleteFromDom?: boolean
+
+  }>(),
+  {
+    requestId: 0,
+    deleteFromDom: false,
+
+  },
+)
+const isOpen = defineModel<boolean>({ default: false })
+const localePath = useLocalePath()
+const { t } = useI18n()
+
+function goKaspi() {
+  window.open(localePath(`https://kaspi.kz/pay/adata?service_id=5964&9507=${props.requestId}`), '_blank')
+}
+
+function cancel() {
+  isOpen.value = false
+}
+if (props.deleteFromDom) {
+  handleElementPosition('redirects-banks-modal')
+}
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    name="redirects-banks-modal"
+    :prevent-close="true"
+  >
+    <div class="flex flex-col gap-5">
+      <p class="heading-02 whitespace-pre-wrap text-center">
+        {{ t('modals.payment_method.redirects_bank.title') }}
+      </p>
+      <a-button block @click="goKaspi">
+        {{ t('modals.buttons.goToKaspi') }}
+      </a-button>
+      <div class="flex flex-col gap-2">
+        <p class="body-400 text-center">
+          {{ t('modals.payment_method.redirects_bank.paymentId') }}
+        </p>
+        <p class="text-center text-xl	font-semibold">
+          {{ requestId }}
+        </p>
+      </div>
+      <p class="body-400 text-center">
+        {{ t('modals.payment_method.redirects_bank.subtitle') }}
+      </p>
+      <a-button
+        view="outline"
+        block
+        @click="cancel"
+      >
+        {{ t('modals.buttons.close') }}
+      </a-button>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped>
+
+</style>

package/components/modals/ReplenishModal.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { useReplenishModal } from '#adata-ui/composables/modalsState'
+
+const { t } = useI18n()
+
+const props = withDefaults(
+  defineProps<{
+    isChangeOpened?: boolean
+  }>(),
+  {
+    isChangeOpened: false
+  }
+)
+const isOpen = useReplenishModal()
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'next', sum: number): void
+}>()
+const money = ref(0)
+const errorAlert = ref(false)
+
+const handlePayment = () => {
+  if (money.value <= 1000000) {
+    emit('next', money.value)
+    errorAlert.value = false
+  } else {
+    errorAlert.value = true
+  }
+}
+const filterMoney = computed(() => {
+  return money.value >= 1
+})
+
+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 onClick = (value: number) => {
+  money.value = value
+}
+
+watch(
+  () => props.isChangeOpened,
+  (open: boolean) => {
+    if (!open) {
+      money.value = 0
+      errorAlert.value = false
+    }
+  }
+)
+</script>
+
+<template>
+  <a-modal
+    v-model="isOpen"
+    :title="t('modals.replenish_modal.title')"
+  >
+    <div class="flex flex-col items-center justify-center gap-5">
+      <a-ill-bill class="max-h-[120px] max-w-[120px]" />
+      <p class="body-400 font-semibold">
+        {{ t('modals.replenish_modal.info') }}
+      </p>
+      <a-input-standard
+        v-model="money"
+        :label="`${t('modals.replenish_modal.enter_sum')}`"
+        type="number"
+        pattern="[0-9]*"
+        clearable
+      />
+      <a-alert
+        v-if="errorAlert"
+        color="red"
+      >
+        {{ t('modals.replenish_modal.error') }}
+      </a-alert>
+      <div class="flex w-full items-center justify-between">
+        <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="onClick(item.value)"
+        >
+          <span>{{ item.label }}</span>
+        </a-chips>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex w-full gap-2">
+        <a-button
+          view="outline"
+          class="w-full"
+          @click="$emit('close')"
+        >
+          {{ t('modals.buttons.back') }}
+        </a-button>
+        <a-button
+          class="w-full"
+          :disabled="!filterMoney"
+          @click="handlePayment"
+        >
+          {{ t('modals.buttons.topUp') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>

package/components/modals/ReportBugConfirmModal.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const isOpen = defineModel<boolean>({ required: true })
+</script>
+<template>
+  <a-modal
+    v-model="isOpen"
+    width="424px"
+  >
+    <template #header>
+      <p class="heading-02 text-center font-bold">
+        {{ t('modals.report_bug.confirmed') }}
+      </p>
+    </template>
+    <div class="flex flex-col gap-5 items-center">
+      <a-ill-ok />
+      <p class="text-sm text-center">
+        {{ t('modals.report_bug.gratitude') }}
+      </p>
+      <a-button
+        view="outline"
+        block
+        @click="isOpen = false"
+      >
+        {{ t('actions.close') }}
+      </a-button>
+    </div>
+  </a-modal>
+</template>

package/components/modals/ReportBugModal.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { Mask } from 'maska'
+import * as z from 'zod'
+import { useUIValidation } from '#adata-ui/composables/useUIValidation'
+
+const props = defineProps<{
+  name: string
+  email: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'send'): void
+}>()
+const { t } = useI18n()
+
+const mask = new Mask({ mask: '# (###) ### ## ##' })
+
+const isOpen = defineModel<boolean>('isOpen', { required: true })
+const form: any = reactive({
+  name: '',
+  email: '',
+  phone_number: '',
+  comment: ''
+})
+const phone = ref(form.phone_number)
+
+const scheme = z.object({
+  name: z.string().nonempty(t('modals.report_bug.validation.required')),
+  email: z.string().nonempty(t('modals.report_bug.validation.required')).email(t('modals.submit_application_modal.rules.email')),
+  phone_number: z.string().nonempty(t('modals.report_bug.validation.required')).min(17, t('modals.report_bug.validation.phone', { n: 10 })),
+  comment: z.string().nonempty(t('modals.report_bug.validation.required')),
+})
+
+const submitted = ref(false)
+
+const { validation, getError } = useUIValidation(
+  scheme,
+  () => ({
+    ...form,
+    phone_number: phone.value,
+  }),
+  submitted,
+)
+
+onMounted(() => {
+  if (props.email) {
+    form.email = props.email
+  }
+})
+
+watch(phone, () => {
+  form.phone_number = mask.unmasked(phone.value)
+})
+
+async function send() {
+  submitted.value = true
+  if (validation.value) return
+  try {
+    await $fetch<any>('https://users.adata.kz/api/v1/message/error', {
+      method: 'POST',
+      params: {
+        sender_name: form.name,
+        email: form.email,
+        phone_number: phone.value,
+        message: form.comment,
+        subject: props.name,
+        link: window.location.href
+      }
+    })
+    emit('send')
+  } catch (e) {
+    console.error(e.message)
+  } finally {
+    form.name = ''
+    form.phone_number = ''
+    form.comment = ''
+    phone.value = ''
+    submitted.value = false
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <a-modal v-model="isOpen">
+    <template #header>
+      <p class="heading-02 text-center">
+        {{ t('modals.report_bug.title') }}
+      </p>
+    </template>
+    <div class="flex flex-col gap-5">
+      <div class="flex flex-col items-center justify-center gap-5">
+        <a-ill-stop-sign class="size-[185px]" />
+        <slot name="title">
+          <p class="label-400 text-center">
+            {{ name }}
+          </p>
+        </slot>
+      </div>
+      <div class="flex flex-col gap-2">
+        <a-input-standard
+          v-model="form.name"
+          required
+          :label="t('modals.report_bug.labels.name')"
+          :error="getError('name')"
+        />
+        <a-input-standard
+          v-model="form.email"
+          required
+          :label="t('modals.report_bug.labels.email')"
+          :error="getError('email')"
+        />
+        <a-input-standard
+          v-model="phone"
+          v-maska
+          required
+          data-maska="8 (###) ### ## ##"
+          clearable
+          :label="t('modals.report_bug.labels.phone')"
+          :error="getError('phone_number')"
+        />
+        <div>
+          <a-textarea
+            v-model="form.comment"
+            required
+            :label="t('modals.report_bug.labels.comment')"
+            size="md"
+            :error="getError('comment')"
+            class="min-h-[120px]"
+            :resizeable="false"
+          />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="flex w-full gap-2">
+        <a-button
+          view="outline"
+          class="w-full"
+          @click="emit('close')"
+        >
+          {{ t('actions.close') }}
+        </a-button>
+        <a-button
+          class="w-full"
+          @click="send"
+        >
+          {{ t('actions.send') }}
+        </a-button>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped></style>