From d6a2caffe040b69e0908e020fbbe03f9c6f80660 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Tue, 10 Nov 2026 11:48:28 +0330
Subject: [PATCH] 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>
---
 .../abshode-domain-lookup/learned-notes.md    |   3 +
 src/App.vue                                   |   6 +-
 src/app/setupRouter.ts                        |   3 +-
 src/components/DialogVantOneButton.vue        | 106 ++++++++++--------
 src/components/RequiredKycModal.vue           |  39 +++++--
 .../base/home/layouts/HomeLayoutRenderer.vue  |  15 +++
 src/views/base/home/layouts/registry.ts       |   7 +-
 7 files changed, 116 insertions(+), 63 deletions(-)

diff --git a/.cursor/skills/abshode-domain-lookup/learned-notes.md b/.cursor/skills/abshode-domain-lookup/learned-notes.md
index 2bde967..fb17acc 100644
--- a/.cursor/skills/abshode-domain-lookup/learned-notes.md
+++ b/.cursor/skills/abshode-domain-lookup/learned-notes.md
@@ -1,5 +1,8 @@
 # یادداشت‌های یادگیری — abshode-domain-lookup
 
+- 2026-11-10 | مدال موفقیت ثبت‌نام خالی | `DialogVantOneButton.vue` | تم لاگین `color:#fff`؛ بدون teleport متن سفید روی دیالوگ سفید — مثل `DialogVant` با teleport+رنگ تیره
+- 2026-11-10 | خانه خالی بدون KYC | `RequiredKycModal` + `HomeLayoutRenderer` | v-model:open روی computed فقط‌خواندنی؛ تشخیص احراز با `isCustomerIdentityVerified`؛ skeleton هنگام lazy layout
+
 فرمت هر خط:
 - YYYY-MM-DD | موضوع | مسیر فایل(ها) | نکتهٔ ۱ خطی
 
diff --git a/src/App.vue b/src/App.vue
index 77d987e..7b689e7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -169,6 +169,7 @@ import {
   useChatService,
 } from '@/utils/chat'
 import { getToken } from '@/utils'
+import { isCustomerIdentityVerified } from '@/utils/customerIdentity'
 import { message } from 'ant-design-vue'
 import { showBrowserNotification } from '@/utils/browserNotification'
 
@@ -329,7 +330,10 @@ watch(
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 const isKycRequired = computed(
-  () => Boolean(getToken()) && (userStore.userInfo?.is_legal === 0 || !userStore.userInfo?.is_legal),
+  () =>
+    Boolean(getToken()) &&
+    Boolean(userStore.userInfo) &&
+    !isCustomerIdentityVerified(userStore.userInfo?.is_legal),
 )
 
 const giftCardFabAccent = computed(
diff --git a/src/app/setupRouter.ts b/src/app/setupRouter.ts
index f49894b..36f9b08 100644
--- a/src/app/setupRouter.ts
+++ b/src/app/setupRouter.ts
@@ -8,6 +8,7 @@ import { useAuthStore } from '@/store/useAuthStore'
 import { recoverMobileViewportAfterAuth } from '@/layouts/composables/useMobileScrollReset'
 import { getFingerPosition, setFingerPosition } from '@/app/authBoot'
 import { isGuestHomeQuery } from '@/utils/guestHome'
+import { isCustomerIdentityVerified } from '@/utils/customerIdentity'
 import type { RouteLocationNormalized } from 'vue-router'
 
 const PUBLIC_ROUTE_NAMES = ['login', '404', 'educate', 'aboutUs', 'aboutSoftware', 'tvMonitor'] as const
@@ -85,7 +86,7 @@ export function setupRouterGuards() {
       // کاربر احراز هویت نشده نباید بتواند به صفحات داخلی دسترسی پیدا کند
       if (
         userStore.userInfo &&
-        (userStore.userInfo.is_legal === 0 || !userStore.userInfo.is_legal) &&
+        !isCustomerIdentityVerified(userStore.userInfo.is_legal) &&
         !isPublicRoute(to) &&
         to.name !== 'home'
       ) {
diff --git a/src/components/DialogVantOneButton.vue b/src/components/DialogVantOneButton.vue
index 27d0812..9a4f294 100644
--- a/src/components/DialogVantOneButton.vue
+++ b/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>
diff --git a/src/components/RequiredKycModal.vue b/src/components/RequiredKycModal.vue
index ba93cc7..d995c0f 100644
--- a/src/components/RequiredKycModal.vue
+++ b/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;
diff --git a/src/views/base/home/layouts/HomeLayoutRenderer.vue b/src/views/base/home/layouts/HomeLayoutRenderer.vue
index 316f9c8..bdc985a 100644
--- a/src/views/base/home/layouts/HomeLayoutRenderer.vue
+++ b/src/views/base/home/layouts/HomeLayoutRenderer.vue
@@ -8,6 +8,7 @@ import HomeSkeleton from '../components/HomeSkeleton.vue'
 import { getHomeLayoutConfig } from './registry'
 import { HOME_SECTION_COMPONENTS } from './sections'
 import type { HomeLayoutConfig, HomeSectionId } from './types'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 
 const props = defineProps<{
   layoutConfig?: HomeLayoutConfig
@@ -43,6 +44,11 @@ const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
 function resolveSectionComponent(sectionId: HomeSectionId) {
   return HOME_SECTION_COMPONENTS[sectionId]
 }
+
+async function retryLoad() {
+  if (!getToken()) return
+  await userStore.getMyInfo()
+}
 </script>
 
 <template>
@@ -77,4 +83,13 @@ function resolveSectionComponent(sectionId: HomeSectionId) {
   </div>
 
   <HomeSkeleton v-else-if="showSkeleton" class="w-full" />
+
+  <div v-else class="home-layout-fallback flex flex-col items-center justify-center gap-3 p-6 text-center min-h-[50vh]">
+    <p class="text-sm text-slate-600 leading-7">
+      در حال آماده‌سازی صفحه اصلی هستیم. اگر چیزی نمایش داده نمی‌شود، یک‌بار تلاش مجدد کنید.
+    </p>
+    <BasicButton type="primary" class="!rounded-xl" @click="retryLoad">
+      تلاش مجدد
+    </BasicButton>
+  </div>
 </template>
diff --git a/src/views/base/home/layouts/registry.ts b/src/views/base/home/layouts/registry.ts
index 829c32f..7605e12 100644
--- a/src/views/base/home/layouts/registry.ts
+++ b/src/views/base/home/layouts/registry.ts
@@ -1,6 +1,7 @@
 import { defineAsyncComponent, type Component } from 'vue'
 import type { HomeLayoutConfig, HomeLayoutId } from './types'
 import { boursecuHomeLayoutConfig } from './configs/boursecu'
+import HomeSkeleton from '../components/HomeSkeleton.vue'
 
 export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'boursecu'
 
@@ -12,7 +13,11 @@ let cachedLayoutRenderer: Component | null = null
 
 function getLayoutRenderer(): Component {
   if (!cachedLayoutRenderer) {
-    cachedLayoutRenderer = defineAsyncComponent(() => import('./HomeLayoutRenderer.vue'))
+    cachedLayoutRenderer = defineAsyncComponent({
+      loader: () => import('./HomeLayoutRenderer.vue'),
+      loadingComponent: HomeSkeleton,
+      delay: 0,
+    })
   }
 
   return cachedLayoutRenderer