boursecu_user/src/components/RequiredKycModal.vue

<template>
  <a-modal
    :open="requiresKyc"
    :closable="false"
    :mask-closable="false"
    :keyboard="false"
    :footer="null"
    :centered="true"
    :z-index="APP_Z_MODAL"
    :width="modalWidth"
    :get-container="getModalContainer"
    class="required-kyc-modal"
    wrap-class-name="required-kyc-modal-wrap"
  >
    <div class="kyc-modal-content text-center py-2" dir="rtl">
      <!-- Icon with soft glowing background -->
      <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-amber-50 text-amber-600 border border-amber-200 mb-4 shadow-sm">
        <BasicIcon icon="vuesax-bold:security-user" size="36" color="#d97706" />
      </div>

      <!-- Title -->
      <h2 class="text-base font-bold text-slate-800 mb-2">
        احراز هویت الزامی است
      </h2>

      <!-- Description: شیک، کوتاه، مختصر و مفید -->
      <p class="text-xs text-slate-600 leading-6 max-w-xs mx-auto mb-5">
        کاربر گرامی، جهت استفاده از کلیه امکانات سامانه و شروع معاملات، لطفاً ابتدا فرایند احراز هویت خود را تکمیل فرمایید.
      </p>

      <!-- Tip info box -->
      <div class="bg-amber-50/70 border border-amber-200/80 rounded-xl p-3 text-right text-xs text-amber-900 mb-5 space-y-1.5">
        <div class="flex items-center gap-2">
          <BasicIcon icon="vuesax-linear:tick-circle" size="16" color="#d97706" class="shrink-0" />
          <span>استعلام و تایید آنی مشخصات از طریق سامانه جیبیت</span>
        </div>
        <div class="flex items-center gap-2">
          <BasicIcon icon="vuesax-linear:tick-circle" size="16" color="#d97706" class="shrink-0" />
          <span>کد ملی وارد شده باید متعلق به مالک شماره موبایل باشد</span>
        </div>
      </div>

      <!-- Action buttons -->
      <div class="flex flex-col gap-2.5">
        <BasicButton
          type="primary"
          class="w-full h-11 text-sm font-semibold !rounded-xl flex items-center justify-center gap-2"
          @click="goToKyc"
        >
          <span>تکمیل و احراز هویت</span>
          <BasicIcon icon="vuesax-linear:arrow-left" size="16" />
        </BasicButton>

        <button
          type="button"
          class="text-xs text-red-600 hover:text-red-700 flex items-center justify-center gap-1.5 py-1.5 cursor-pointer transition-colors"
          @click="onLogout"
        >
          <BasicIcon icon="vuesax-linear:logout" size="14" color="#dc2626" />
          <span>خروج از حساب کاربری</span>
        </button>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import BasicButton from '@/components/BasicPacks/BasicButton.vue'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import { useUserStore } from '@/store/userStore'
import { getToken } from '@/utils'
import { performUserLogout } from '@/utils/authSession'
import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
import { isCustomerIdentityVerified } from '@/utils/customerIdentity'
import { APP_Z_MODAL, getModalContainer } from '@/utils/zIndex'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const isDesktop = useDesktopBreakpoint()

const modalWidth = computed(() => (isDesktop.value ? '420px' : '90vw'))

const requiresKyc = computed(() => {
  if (!getToken()) return false
  if (
    route.name === 'login' ||
    route.name === 'tvMonitor' ||
    route.name === 'aboutSoftware' ||
    route.name === 'user'
  ) {
    return false
  }
  const info = userStore.userInfo
  if (!info) return false
  return !isCustomerIdentityVerified(info.is_legal)
})

function goToKyc() {
  void router.push({ name: 'user', query: { showEdit: 'true' } })
}

async function onLogout() {
  await performUserLogout()
}
</script>

<style lang="less">
.required-kyc-modal-wrap {
  .ant-modal-content {
    border-radius: 20px;
    padding: 24px 20px;
  }
}
</style>

<style scoped>
.kyc-modal-content {
  font-family: inherit;
}
</style>