From 036184c68be198545f94e904a7281d84b67d6da5 Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Sun, 8 Nov 2026 13:26:54 +0330
Subject: [PATCH] feat: add deposit identifier, tip note, and receipt upload in
 deposit guide modal

---
 src/api/wallet.ts                             |   4 +
 src/utils/depositGuideText.ts                 |  75 ++-
 .../components/WalletDepositGuideModal.vue    | 501 +++++++++++++++++-
 src/views/base/wallet/index.vue               |  11 +-
 4 files changed, 559 insertions(+), 32 deletions(-)

diff --git a/src/api/wallet.ts b/src/api/wallet.ts
index 559cb8e..309c0a7 100644
--- a/src/api/wallet.ts
+++ b/src/api/wallet.ts
@@ -16,6 +16,10 @@ export const deposit = async (obj: Transaction): Promise<any> => {
   return await useAxios.post<Transaction>(`/customer/charge_account`, obj)
 }
 
+export const submitDepositRequest = async (formData: FormData): Promise<any> => {
+  return await useAxios.postForm(`/customer/wallet/deposit_request`, formData)
+}
+
 export const createCard = async (obj: Card): Promise<any> => {
   return await useAxios.post<Transaction>(`/customer/account`, obj)
 }
diff --git a/src/utils/depositGuideText.ts b/src/utils/depositGuideText.ts
index a7e9807..d1e63d0 100644
--- a/src/utils/depositGuideText.ts
+++ b/src/utils/depositGuideText.ts
@@ -18,10 +18,10 @@ export const DEFAULT_DEPOSIT_SUPPORT_MESSAGE_TEXT =
   'باسلام، %نام هستم. کدپیگیری و مبلغ واریزی من:'
 
 /** الگوی متغیر نام — ٪نام / %نام / % نام / %نام% */
-const NAME_PLACEHOLDER_RE = /[%٪]\s*نام(?:\s*[%٪])?/gu
-const CARD_PLACEHOLDER_RE = /[%٪]\s*کارت(?:\s*[%٪])?/gu
-const ACCOUNT_PLACEHOLDER_RE = /[%٪]\s*حساب(?:\s*[%٪])?/gu
-const SHEBA_PLACEHOLDER_RE = /[%٪]\s*شبا(?:\s*[%٪])?/gu
+const NAME_PLACEHOLDER_RE = /[%٪]\s*نام[%٪]?/gu
+const CARD_PLACEHOLDER_RE = /[%٪]\s*کارت[%٪]?/gu
+const ACCOUNT_PLACEHOLDER_RE = /[%٪]\s*حساب[%٪]?/gu
+const SHEBA_PLACEHOLDER_RE = /[%٪]\s*شبا[%٪]?/gu
 
 export function getCustomerNameFromUser(): string {
   try {
@@ -47,21 +47,72 @@ export function renderDepositSupportMessageText(
   return template.replace(NAME_PLACEHOLDER_RE, name)
 }
 
-/** جایگزینی متغیرها در متن راهنمای واریز — ٪نام / %نام، ٪کارت / %کارت، ٪حساب / %حساب، ٪شبا / %شبا */
+/**
+ * حذف شماره‌های حساب، شبا و کارت و همچنین ارقام زائد از متن راهنما؛
+ * این اطلاعات در ردیف‌های اختصاصی مودال با دکمه کپی نمایش داده می‌شوند.
+ */
+function stripDepositGuideNumbers(text: string, vars?: DepositGuideVars): string {
+  let cleaned = text
+
+  if (vars) {
+    const rawValues = [
+      vars.sheba,
+      vars.sheba ? vars.sheba.replace(/^IR/i, '').trim() : '',
+      vars.sheba ? vars.sheba.replace(/^IR/i, '').replace(/\s+/g, '') : '',
+      vars.sheba ? formatDepositSheba(vars.sheba) : '',
+      vars.cardNumber,
+      vars.cardNumber ? vars.cardNumber.replace(/\s+/g, '') : '',
+      vars.cardNumber ? formatDepositCardNumber(vars.cardNumber) : '',
+      vars.accountNumber,
+      vars.accountNumber ? vars.accountNumber.replace(/\s+/g, '') : '',
+    ]
+      .map((v) => String(v ?? '').trim())
+      .filter((v) => v.length >= 6)
+
+    rawValues.sort((a, b) => b.length - a.length)
+    for (const val of rawValues) {
+      if (!val) continue
+      const escaped = val.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+      cleaned = cleaned.replace(new RegExp(escaped, 'gi'), '')
+    }
+  }
+
+  // حذف توالی‌های رقمی ۵ رقم یا بیشتر (فارسی و انگلیسی با فاصله یا خط تیره بین ارقام)
+  cleaned = cleaned.replace(/(?:^|[^\w\d۰-۹])[\d۰-۹][\d۰-۹\s-]{3,}[\d۰-۹](?=[^\w\d۰-۹]|$)/gu, '')
+
+  // پالایش خطوط: حذف خطوطی که صرفاً از رقم/فاصله/علائم تشکیل شده‌اند یا برچسب‌های مرده
+  const lines = cleaned.split('\n')
+  const filteredLines = lines
+    .map((line) => {
+      const withoutDigitsAndPunct = line.replace(/[\d۰-۹\s.,:;–—/\\()-]/g, '')
+      if (withoutDigitsAndPunct.length === 0) {
+        return ''
+      }
+      const trimmed = line.trim()
+      if (/^(?:شماره\s*(?:شبا|حساب|کارت)|شبا|حساب|کارت)\s*[:：-]?$/u.test(trimmed)) {
+        return ''
+      }
+      return trimmed
+    })
+    .filter((line) => line.length > 0)
+
+  return filteredLines.join('\n').trim()
+}
+
+/** جایگزینی متغیرها در متن راهنمای واریز — ٪نام / %نام (کارت، حساب و شبا چون ردیف جداگانه دارند حذف می‌شوند) */
 export function renderDepositGuideText(
   template: string,
   vars: DepositGuideVars,
 ): string {
   const accountHolder = String(vars.accountHolder ?? '').trim()
-  const cardNumber = String(vars.cardNumber ?? '').trim()
-  const accountNumber = String(vars.accountNumber ?? '').trim()
-  const sheba = String(vars.sheba ?? '').trim()
 
-  return template
-    .replace(SHEBA_PLACEHOLDER_RE, sheba)
-    .replace(ACCOUNT_PLACEHOLDER_RE, accountNumber)
-    .replace(CARD_PLACEHOLDER_RE, cardNumber)
+  let text = template
+    .replace(SHEBA_PLACEHOLDER_RE, '')
+    .replace(ACCOUNT_PLACEHOLDER_RE, '')
+    .replace(CARD_PLACEHOLDER_RE, '')
     .replace(NAME_PLACEHOLDER_RE, accountHolder)
+
+  return stripDepositGuideNumbers(text, vars)
 }
 
 export function getDepositGuideVarsFromSettings(): DepositGuideVars {
diff --git a/src/views/base/wallet/components/WalletDepositGuideModal.vue b/src/views/base/wallet/components/WalletDepositGuideModal.vue
index 3265d43..17c4962 100644
--- a/src/views/base/wallet/components/WalletDepositGuideModal.vue
+++ b/src/views/base/wallet/components/WalletDepositGuideModal.vue
@@ -4,7 +4,7 @@
     custom-footer
     :closable="false"
     wrap-class-name="app-premium-modal--no-header"
-    width="min(92vw, 380px)"
+    width="min(92vw, 420px)"
   >
     <div class="deposit-guide">
       <div class="deposit-guide__icon-wrap" aria-hidden="true">
@@ -72,6 +72,28 @@
           </button>
         </div>
 
+        <!-- شناسه واریز اختصاصی (کد ملی شخص) -->
+        <div v-if="nationalCode" class="deposit-guide__account-row">
+          <span class="deposit-guide__account-label">شناسه واریز</span>
+          <button
+              type="button"
+              class="deposit-guide__account-value"
+              aria-label="کپی شناسه واریز"
+              @click="copyNationalCode"
+          >
+            <span class="deposit-guide__account-text" dir="ltr">{{ nationalCode }}</span>
+            <BasicIcon
+                icon="vuesax-linear:copy"
+                size="18"
+                color="#15803d"
+                class="deposit-guide__copy-icon"
+            />
+          </button>
+          <div class="deposit-guide__tip-box">
+            <BasicIcon icon="vuesax-linear:info-circle" size="16" color="#16a34a" class="shrink-0" />
+            <span>شناسه واریز شما همان کد ملی شما می‌باشد؛ لطفاً هنگام انتقال وجه در همراه بانک یا اینترنت بانک، این شناسه را در بخش شناسه واریز وارد فرمایید.</span>
+          </div>
+        </div>
 
         <a
           v-if="hasMessengerLink"
@@ -97,17 +119,116 @@
           <span>پیام به پشتیبانی (sms)</span>
         </span>
         </a>
+
+        <!-- بخش آپلود فیش واریزی و ثبت درخواست -->
+        <div class="deposit-guide__receipt-section">
+          <div class="deposit-guide__receipt-header">
+            <BasicIcon icon="vuesax-linear:receipt-text" size="20" color="#16a34a" />
+            <span>ثبت فیش و اطلاعات واریز</span>
+          </div>
+
+          <div class="deposit-guide__form-field">
+            <label class="deposit-guide__form-label">
+              مبلغ واریزی (ریال) <span class="text-red-500">*</span>
+            </label>
+            <input
+              v-model="depositAmountFormatted"
+              type="text"
+              dir="ltr"
+              class="deposit-guide__input"
+              placeholder="مثال: ۵,۰۰۰,۰۰۰"
+              @input="onAmountInput"
+            />
+            <span v-if="depositAmountTomanText" class="deposit-guide__amount-hint">
+              {{ depositAmountTomanText }}
+            </span>
+          </div>
+
+          <div class="deposit-guide__form-field">
+            <label class="deposit-guide__form-label">شماره پیگیری / کد ارجاع فیش</label>
+            <input
+              v-model="trackedNumber"
+              type="text"
+              dir="ltr"
+              class="deposit-guide__input"
+              placeholder="کد پیگیری بانکی (اختیاری)"
+            />
+          </div>
+
+          <div class="deposit-guide__form-field">
+            <label class="deposit-guide__form-label">
+              تصویر فیش واریزی <span class="text-red-500">*</span>
+            </label>
+            <input
+              ref="fileInputRef"
+              type="file"
+              accept="image/jpeg,image/png,image/webp,application/pdf"
+              class="hidden"
+              @change="onFileSelected"
+            />
+            <div
+              v-if="!receiptFile"
+              class="deposit-guide__upload-dropzone"
+              @click="triggerFileInput"
+            >
+              <BasicIcon icon="vuesax-linear:document-upload" size="30" color="#16a34a" />
+              <span class="deposit-guide__upload-title">برای آپلود تصویر فیش کلیک کنید</span>
+              <span class="deposit-guide__upload-subtitle">JPG, PNG, WEBP, PDF (حداکثر ۱۰ مگابایت)</span>
+            </div>
+
+            <div v-else class="deposit-guide__receipt-preview">
+              <img
+                v-if="receiptPreviewUrl"
+                :src="receiptPreviewUrl"
+                alt="پیش‌نمایش فیش"
+                class="deposit-guide__receipt-img"
+              />
+              <div v-else class="deposit-guide__receipt-file-badge">
+                <BasicIcon icon="vuesax-linear:receipt-text" size="26" color="#16a34a" />
+                <span class="deposit-guide__receipt-file-name">{{ receiptFile.name }}</span>
+              </div>
+              <button
+                type="button"
+                class="deposit-guide__receipt-remove"
+                aria-label="حذف فیش"
+                @click="removeReceipt"
+              >
+                <BasicIcon icon="vuesax-linear:trash" size="16" color="#dc2626" />
+                <span>حذف فایل</span>
+              </button>
+            </div>
+          </div>
+
+          <div class="deposit-guide__form-field">
+            <label class="deposit-guide__form-label">توضیحات (اختیاری)</label>
+            <textarea
+              v-model="extraNote"
+              rows="2"
+              class="deposit-guide__textarea"
+              placeholder="توضیحات اضافی در صورت نیاز..."
+            ></textarea>
+          </div>
+
+          <BasicButton
+            type="primary"
+            class="app-premium-modal__btn-primary deposit-guide__submit-btn w-full"
+            :loading="submitting"
+            @click="handleSubmitDeposit"
+          >
+            ثبت درخواست واریز
+          </BasicButton>
+        </div>
       </div>
 
     </div>
 
     <template #footer>
       <BasicButton
-        type="primary"
-        class="app-premium-modal__btn-primary deposit-guide__confirm w-full"
+        type="default"
+        class="w-full"
         @click="localVisible = false"
       >
-        متوجه شدم
+        بستن
       </BasicButton>
     </template>
   </BasicModal>
@@ -115,11 +236,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
+import { message } from 'ant-design-vue'
 import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import { useSupportMessenger } from '@/composables/useSupportMessenger'
 import { loadSupportMessengerFromSettings } from '@/utils/supportMessenger'
+import { useUserStore } from '@/store/userStore'
+import { submitDepositRequest } from '@/api/wallet'
 
 const props = withDefaults(
   defineProps<{
@@ -127,14 +251,44 @@ const props = withDefaults(
     title?: string
     supportLink?: string
     smsLink?: string
+    initialAmount?: number
   }>(),
   {
-    title: 'راهنمای شارژ حساب',
+    title: 'راهنمای شارژ و ثبت واریز',
     supportLink: '',
     smsLink: '',
+    initialAmount: undefined,
   },
 )
 
+const userStore = useUserStore()
+
+const nationalCode = computed(() => {
+  return String(userStore.userInfo?.n_code ?? '').trim()
+})
+
+async function copyNationalCode() {
+  if (!nationalCode.value) return
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(nationalCode.value)
+    } else {
+      const textarea = document.createElement('textarea')
+      textarea.value = nationalCode.value
+      textarea.setAttribute('readonly', 'true')
+      textarea.style.position = 'fixed'
+      textarea.style.left = '-9999px'
+      document.body.appendChild(textarea)
+      textarea.select()
+      document.execCommand('copy')
+      document.body.removeChild(textarea)
+    }
+    message.info('شناسه واریز کپی شد')
+  } catch {
+    message.error('خطا در کپی شناسه واریز')
+  }
+}
+
 const {
   depositCardNumber,
   depositAccountNumber,
@@ -160,6 +314,7 @@ function onDepositSupportClick() {
 
 const emit = defineEmits<{
   'update:visible': [value: boolean]
+  'success': []
 }>()
 
 const localVisible = computed({
@@ -167,11 +322,146 @@ const localVisible = computed({
   set: (value: boolean) => emit('update:visible', value),
 })
 
+// فیلدهای فرم فیش واریزی
+const depositAmountRaw = ref<number | undefined>(props.initialAmount)
+const depositAmountFormatted = ref<string>('')
+const trackedNumber = ref<string>('')
+const extraNote = ref<string>('')
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const receiptFile = ref<File | null>(null)
+const receiptPreviewUrl = ref<string>('')
+const submitting = ref(false)
+
+function formatNumber(num: number): string {
+  return num.toLocaleString('en-US')
+}
+
+function updateFormattedAmount(val?: number) {
+  if (val && val > 0) {
+    depositAmountFormatted.value = formatNumber(val)
+  } else {
+    depositAmountFormatted.value = ''
+  }
+}
+
+function onAmountInput(e: Event) {
+  const target = e.target as HTMLInputElement
+  const digits = target.value.replace(/\D/g, '')
+  if (digits) {
+    const num = parseInt(digits, 10)
+    depositAmountRaw.value = num
+    depositAmountFormatted.value = formatNumber(num)
+  } else {
+    depositAmountRaw.value = undefined
+    depositAmountFormatted.value = ''
+  }
+}
+
+const depositAmountTomanText = computed(() => {
+  const val = depositAmountRaw.value
+  if (!val || val <= 0) return ''
+  const toman = Math.floor(val / 10)
+  return `معادل ${formatNumber(toman)} تومان`
+})
+
+function triggerFileInput() {
+  fileInputRef.value?.click()
+}
+
+function onFileSelected(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file) return
+
+  if (file.size > 10 * 1024 * 1024) {
+    message.error('حجم فایل نباید بیش از ۱۰ مگابایت باشد.')
+    return
+  }
+
+  receiptFile.value = file
+  if (file.type.startsWith('image/')) {
+    receiptPreviewUrl.value = URL.createObjectURL(file)
+  } else {
+    receiptPreviewUrl.value = ''
+  }
+}
+
+function removeReceipt() {
+  if (receiptPreviewUrl.value) {
+    URL.revokeObjectURL(receiptPreviewUrl.value)
+  }
+  receiptFile.value = null
+  receiptPreviewUrl.value = ''
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+function resetForm() {
+  depositAmountRaw.value = undefined
+  depositAmountFormatted.value = ''
+  trackedNumber.value = ''
+  extraNote.value = ''
+  removeReceipt()
+}
+
+async function handleSubmitDeposit() {
+  const amount = depositAmountRaw.value
+  if (!amount || amount <= 0) {
+    message.error('لطفاً مبلغ واریزی را وارد فرمایید.')
+    return
+  }
+
+  if (!receiptFile.value) {
+    message.error('لطفاً تصویر فیش واریزی را بارگذاری فرمایید.')
+    return
+  }
+
+  try {
+    submitting.value = true
+    const formData = new FormData()
+    formData.append('cash', String(amount))
+    formData.append('receipt', receiptFile.value)
+    if (trackedNumber.value.trim()) {
+      formData.append('tracked_number', trackedNumber.value.trim())
+    }
+    if (extraNote.value.trim()) {
+      formData.append('extra_note', extraNote.value.trim())
+    }
+
+    const res = await submitDepositRequest(formData)
+    message.success(res?.message || 'درخواست واریز شما با موفقیت ثبت شد و پس از بررسی تایید خواهد شد.')
+    emit('success')
+    localVisible.value = false
+    resetForm()
+  } catch (e: any) {
+    console.error(e)
+    const errorMsg = e?.response?.data?.message || 'خطا در ثبت درخواست واریز'
+    message.error(errorMsg)
+  } finally {
+    submitting.value = false
+  }
+}
+
 watch(
   () => props.visible,
   (visible) => {
     if (visible) {
       void loadSupportMessengerFromSettings(true)
+      if (props.initialAmount && props.initialAmount > 0) {
+        depositAmountRaw.value = props.initialAmount
+        updateFormattedAmount(props.initialAmount)
+      }
+    }
+  },
+)
+
+watch(
+  () => props.initialAmount,
+  (newVal) => {
+    if (newVal && newVal > 0) {
+      depositAmountRaw.value = newVal
+      updateFormattedAmount(newVal)
     }
   },
 )
@@ -183,22 +473,22 @@ watch(
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 0.25rem 0.5rem 0.5rem;
+  padding: 0.25rem 0.25rem 0.5rem;
 }
 
 .deposit-guide__icon-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 4.5rem;
-  height: 4.5rem;
+  width: 4rem;
+  height: 4rem;
   border-radius: 9999px;
   background: #ecfdf3;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
 }
 
 .deposit-guide__title {
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.5rem;
   font-size: 1.05rem;
   font-weight: 700;
   color: #111827;
@@ -206,8 +496,8 @@ watch(
 
 .deposit-guide__body {
   width: 100%;
-  font-size: 0.92rem;
-  line-height: 1.9;
+  font-size: 0.9rem;
+  line-height: 1.8;
   color: #4b5563;
 }
 
@@ -276,14 +566,28 @@ watch(
   }
 }
 
+.deposit-guide__tip-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.4rem;
+  padding: 0.5rem 0.65rem;
+  border-radius: 0.5rem;
+  background: #f0fdf4;
+  border: 1px solid #dcfce7;
+  font-size: 0.75rem;
+  line-height: 1.6;
+  color: #15803d;
+  text-align: right;
+}
+
 .deposit-guide__support-link {
   display: block;
   width: 100%;
-  margin-top: 1.25rem;
+  margin-top: 0.5rem;
   text-decoration: none;
 
   &--spaced {
-    margin-top: 0.65rem;
+    margin-top: 0.5rem;
   }
 }
 
@@ -293,19 +597,178 @@ watch(
   justify-content: center;
   gap: 0.5rem;
   width: 100%;
-  min-height: 2.75rem;
-  padding: 0.65rem 1rem;
+  min-height: 2.5rem;
+  padding: 0.5rem 1rem;
   border: 1px solid #bbf7d0;
   border-radius: 0.75rem;
   background: #f0fdf4;
   color: #15803d;
-  font-size: 0.92rem;
+  font-size: 0.85rem;
   font-weight: 600;
 }
 
-.deposit-guide__confirm {
+/* بخش ثبت فیش */
+.deposit-guide__receipt-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  width: 100%;
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px dashed #e2e8f0;
+  text-align: right;
+}
+
+.deposit-guide__receipt-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.92rem;
+  font-weight: 700;
+  color: #15803d;
+  margin-bottom: 0.25rem;
+}
+
+.deposit-guide__form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3rem;
+  width: 100%;
+}
+
+.deposit-guide__form-label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.deposit-guide__input {
+  width: 100%;
+  height: 2.6rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.6rem;
+  font-size: 0.88rem;
+  color: #111827;
+  background: #fff;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus {
+    border-color: #16a34a;
+    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
+  }
+}
+
+.deposit-guide__textarea {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.6rem;
+  font-size: 0.85rem;
+  color: #111827;
+  background: #fff;
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+  &:focus {
+    border-color: #16a34a;
+    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
+  }
+}
+
+.deposit-guide__amount-hint {
+  font-size: 0.74rem;
+  color: #059669;
+  font-weight: 600;
+}
+
+.deposit-guide__upload-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 1rem;
+  border: 1.5px dashed #86efac;
+  border-radius: 0.75rem;
+  background: #f0fdf4;
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+
+  &:hover {
+    background: #dcfce7;
+    border-color: #4ade80;
+  }
+}
+
+.deposit-guide__upload-title {
+  font-size: 0.82rem;
+  font-weight: 700;
+  color: #15803d;
+}
+
+.deposit-guide__upload-subtitle {
+  font-size: 0.7rem;
+  color: #6b7280;
+}
+
+.deposit-guide__receipt-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.75rem;
+  background: #f0fdf4;
+}
+
+.deposit-guide__receipt-img {
+  max-width: 100%;
+  max-height: 140px;
+  object-fit: contain;
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+}
+
+.deposit-guide__receipt-file-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.deposit-guide__receipt-file-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #374151;
+  word-break: break-all;
+}
+
+.deposit-guide__receipt-remove {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  color: #dc2626;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.35rem;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: #fee2e2;
+  }
+}
+
+.deposit-guide__submit-btn {
+  margin-top: 0.5rem;
   min-height: 2.75rem;
+  font-size: 0.92rem;
   font-weight: 700;
 }
 </style>
-
diff --git a/src/views/base/wallet/index.vue b/src/views/base/wallet/index.vue
index 7afe707..e807fdc 100644
--- a/src/views/base/wallet/index.vue
+++ b/src/views/base/wallet/index.vue
@@ -90,8 +90,10 @@
       v-model:visible="chargeAccountModal"
       :support-link="depositGuideSupportLink"
       :sms-link="depositSmsSupportLink"
+      :initial-amount="form.value"
+      @success="onDepositSuccess"
     >
-      <p class="deposit-guide-text">{{ supportMessengerText }}</p>
+      <p v-if="supportMessengerText" class="deposit-guide-text">{{ supportMessengerText }}</p>
     </WalletDepositGuideModal>
 
     <BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
@@ -120,6 +122,7 @@ import OtpInput from 'vue3-otp-input'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import ResponsiveViewPair from '@/layouts/components/ResponsiveViewPair.vue'
 import { useWalletPage } from './composables/useWalletPage'
+import { initWalletPageData } from './composables/useWalletPageData'
 import DesktopWalletView from './desktop/DesktopWalletView.vue'
 import MobileWalletView from './mobile/MobileWalletView.vue'
 import SkeletonLoading from './components/SkeletonLoading.vue'
@@ -141,6 +144,7 @@ const {
   infoVisible,
   identityRequiredVisible,
   refOtpInput,
+  form,
   extraNote,
   supportMessengerText,
   depositGuideSupportLink,
@@ -149,6 +153,11 @@ const {
   loading,
   addCard,
 } = useWalletPage()
+
+async function onDepositSuccess() {
+  form.value.value = undefined
+  await initWalletPageData()
+}
 </script>
 
 <style scoped>