fix(user): register dialog, KYC modal, and home loading gaps

Repair gift-card register success modal text, enforce KYC with correct identity checks, and show skeleton/fallback while home layout loads.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/DialogVantOneButton.vue

@@ -1,61 +1,71 @@
 <template>
-  <!--  <div v-if="modelValue">-->
-  <van-dialog class="oneButtonDialog">
-    <div class="my-4">
+  <van-dialog
+    v-model:show="show"
+    class="oneButtonDialog"
+    teleport="body"
+    :close-on-click-overlay="closeOnClickOverlay"
+    :z-index="zIndex"
+    v-bind="$attrs"
+  >
+    <div class="oneButtonDialog__body my-4 text-slate-800">
       <div class="w-full flex justify-center">
         <slot name="img">{{ text2 }}</slot>
-
       </div>
-      <div class="w-full flex justify-center text-[18px] font-semibold">
+      <div class="w-full flex justify-center text-[18px] font-semibold text-slate-800">
         <slot name="title">{{ text1 }}</slot>
       </div>
-      <div class=" border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px]">
+      <div
+        class="border-t border-solid border-[#E5E7EB] pt-4 mx-2 mt-6 font-semibold text-[15px] text-slate-800"
+      >
         <slot name="button">{{ text3 }}</slot>
       </div>
     </div>
-
   </van-dialog>
-  <!--  <van-dialog  style="background-color: #2b3f6e" show-cancel-button cancelButtonText="بیخیال"  confirmButtonText="بله"  cancelButtonColor="">-->
-  <!--    <div class="w-full mt-6 text-white ">-->
-  <!--      <div class="w-full flex mb-[10px] ">-->
-  <!--        <Icon icon="vuesax-linear:info-circle" class="mx-4" size="25"/>-->
-  <!--        <span class="text-lg flex-1">-->
-  <!--          <slot name="title">{{text1}}</slot>-->
-  <!--        </span>-->
-  <!--      </div>-->
-  <!--      <div class="flex justify-start mb-6  mt-8"  style="font-weight:700;">-->
-  <!--        <slot name="button">{{text2}}</slot>-->
-  <!--      </div>-->
-  <!--    </div>-->
-  <!--  </van-dialog>-->
-  <!--  </div>-->
 </template>
 
 <script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { APP_Z_MODAL } from '@/utils/zIndex'
 
-// import Icon from "/@/assets/icons/Icon.vue";
-import {ref, watch} from 'vue';
+defineOptions({ inheritAttrs: false })
 
-const show = ref(true);
-const props = withDefaults(defineProps<{
-  // modelValue: boolean,
-  timeOut: number,
-  text1?: string,
-  text2?: string,
-  text3?: string
-  // top?: string,
+const props = withDefaults(
+  defineProps<{
+    show?: boolean
+    timeOut?: number
+    text1?: string
+    text2?: string
+    text3?: string
+    closeOnClickOverlay?: boolean
+    zIndex?: number
+  }>(),
+  {
+    show: false,
+    timeOut: 3000,
+    closeOnClickOverlay: true,
+    zIndex: APP_Z_MODAL,
+  },
+)
 
-}>(), {})
-const emit = defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
-watch(() => props.modelValue, (value) => {
-  if (props.timeOut !== -1) showNotify()
+const emit = defineEmits<{
+  (e: 'update:show', value: boolean): void
+}>()
+
+const show = computed({
+  get: () => props.show,
+  set: (value: boolean) => emit('update:show', value),
 })
-const showNotify = () => {
-  console.log('notify', show.value)
-  setTimeout(() => {
-    emit('update:modelValue', false)
-  }, props.timeOut);
-};
+
+watch(
+  () => props.show,
+  (value) => {
+    if (value && props.timeOut !== -1) {
+      setTimeout(() => {
+        emit('update:show', false)
+      }, props.timeOut)
+    }
+  },
+)
 </script>
 
 <style lang="less">
@@ -67,17 +77,13 @@ const showNotify = () => {
   animation: notify-in 0.2s reverse;
 }
 
-.oneButtonDialog .van-dialog__confirm, .van-dialog__cancel {
+.oneButtonDialog .van-dialog__confirm,
+.oneButtonDialog .van-dialog__cancel {
   display: none !important;
 }
 
-
-.van-dialog__confirm, .van-dialog__cancel {
-  //background-color: ;
-}
-
 .oneButtonDialog .van-dialog__confirm .van-button__text {
-  color: #1C2D56;
+  color: #1c2d56;
   font-weight: 600;
   font-size: 15px;
 }
@@ -87,4 +93,8 @@ const showNotify = () => {
   font-weight: 600;
   font-size: 15px;
 }
+
+.oneButtonDialog__body {
+  color: #1e293b;
+}
 </style>

src/components/RequiredKycModal.vue

@@ -1,13 +1,14 @@
 <template>
   <a-modal
-    v-model:open="isModalVisible"
+    :open="requiresKyc"
     :closable="false"
     :mask-closable="false"
     :keyboard="false"
     :footer="null"
     :centered="true"
-    :z-index="5500"
+    :z-index="APP_Z_MODAL"
     :width="modalWidth"
+    :get-container="getModalContainer"
     class="required-kyc-modal"
     wrap-class-name="required-kyc-modal-wrap"
   >
@@ -206,7 +207,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { FormInstance } from 'ant-design-vue'
 import { message } from 'ant-design-vue'
@@ -221,6 +222,8 @@ import { isValidPersian, requireNationalCode, required } from '@/utils/inputRule
 import { normalizeAuthFormFields } from '@/utils/persianDigits'
 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 userStore = useUserStore()
@@ -241,22 +244,22 @@ const formState = reactive({
 
 const modalWidth = computed(() => (isDesktop.value ? '460px' : '92vw'))
 
-const isModalVisible = computed(() => {
+const requiresKyc = computed(() => {
   if (!getToken()) return false
   if (route.name === 'login' || route.name === 'tvMonitor' || route.name === 'aboutSoftware') {
     return false
   }
   const info = userStore.userInfo
   if (!info) return false
-  // 0 indicates unverified. 1 and 2 indicate verified customer.
-  return info.is_legal === 0 || !info.is_legal
+  return !isCustomerIdentityVerified(info.is_legal)
 })
 
 const isPendingApproval = computed(() => {
   const info = userStore.userInfo
   if (!info) return false
-  // If national code is set and user is still unverified (is_legal === 0)
-  return Boolean(info.n_code && info.is_legal === 0)
+  return Boolean(
+    String(info.n_code ?? '').trim() && !isCustomerIdentityVerified(info.is_legal),
+  )
 })
 
 function populateFormFromUser() {
@@ -295,8 +298,7 @@ async function onSubmit() {
     const res: any = await updateMe(payload)
     await userStore.getMyInfo()
 
-    const currentLegal = userStore.userInfo?.is_legal
-    if (currentLegal === 1 || currentLegal === 2) {
+    if (isCustomerIdentityVerified(userStore.userInfo?.is_legal)) {
       message.success('احراز هویت شما با موفقیت انجام و تأیید شد.')
       isEditing.value = false
     } else {
@@ -317,8 +319,7 @@ async function onCheckStatus() {
   try {
     checkingStatus.value = true
     await userStore.getMyInfo()
-    const currentLegal = userStore.userInfo?.is_legal
-    if (currentLegal === 1 || currentLegal === 2) {
+    if (isCustomerIdentityVerified(userStore.userInfo?.is_legal)) {
       message.success('حساب کاربری شما تأیید شد!')
     } else {
       message.info('اطلاعات شما همچنان در صف بررسی و تایید مدیریت است.')
@@ -333,8 +334,22 @@ async function onCheckStatus() {
 async function onLogout() {
   await performUserLogout()
 }
+
+onMounted(() => {
+  if (getToken() && !userStore.userInfo) {
+    void userStore.getMyInfo()
+  }
+})
 </script>
 
+<style lang="less">
+.required-kyc-modal-wrap {
+  .ant-modal-content {
+    color: #1e293b;
+  }
+}
+</style>
+
 <style scoped>
 .kyc-modal-content {
   font-family: inherit;