new UI and handle cashing

src/views/base/wallet/index.vue

@@ -69,58 +69,30 @@
 
     <SkeletonLoading v-model:show="infoVisible" />
 
-    <BasicModal v-model:visible="chargeAccountModal" custom-footer :closable="false">
-      <div v-if="config.config.name === 'garoosi'" class="text-center">
-        <div class="font-bold text-red-600">مشتریان گرامی</div>
-        <div class="mt-2">
-          <span>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</span>
-        </div>
-        <div class="mt-1 text-red-600">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</div>
-        <div class="mt-4">(سیده زهرا موسوی)</div>
-        <div class="mt-1">شماره کارت:6037701900311389</div>
-        <div>شماره شبا: IR 080160000000001143804581</div>
-        <BasicButton class="mt-4">
-          <a class="w-full" href="https://ble.ir/garoosigallery">پیام به پشتیبانی</a>
-        </BasicButton>
-      </div>
-      <div v-else-if="isBazretalaProject()" class="text-center">
-        <div class="font-bold text-red-600">همراه گرامی</div>
-        <div class="mt-2">
-          <div>جهت شارژ حساب کاربری خود،</div>
-          <div>مبلغ موردنظر را به شماره کارت زیر واریز نموده</div>
-          <div>و به شماره پشتیبانی 09121784258 در برنامه ی بله اطلاع دهید.</div>
-        </div>
-        <div class="mt-4">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</div>
-        <div class="mt-1">شماره کارت: 6037998800496928</div>
-        <div>شماره شبا: IR 110170000000372468150002</div>
-      </div>
-      <div v-else class="text-center">
-        <div class="font-bold text-red-600">مشتریان گرامی</div>
-        <div class="mt-2">
-          <span>{{ supportMessengerText }}</span>
-        </div>
-        <BasicButton v-if="supportMessengerLink" class="mt-3">
-          <a
-            class="w-full"
-            :href="supportMessengerLink"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            پیام به پشتیبانی
-          </a>
-        </BasicButton>
-        <BasicButton v-if="depositSmsSupportLink" class="mt-2">
-          <a class="w-full" :href="depositSmsSupportLink">
-            پیام به پشتیبانی (sms)
-          </a>
-        </BasicButton>
-      </div>
-      <template #footer>
-        <a-button type="primary" class="w-full" @click="chargeAccountModal = false">
-          متوجه شدم
-        </a-button>
+    <WalletDepositGuideModal
+      v-model:visible="chargeAccountModal"
+      :support-link="depositGuideSupportLink"
+      :sms-link="depositSmsSupportLink"
+    >
+      <template v-if="config.config.name === 'garoosi'">
+        <p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و از طریق لینک زیر به پشتیبان اطلاع دهید.</p>
+        <p class="deposit-guide-note deposit-guide-note--warn">در صورت عدم همخوانی کارت ملی و فیش واریزی کیف پول شارژ نمیشود!</p>
+        <p class="deposit-guide-note">(سیده زهرا موسوی)</p>
+        <p class="deposit-guide-note">شماره کارت: 6037701900311389</p>
+        <p class="deposit-guide-note">شماره شبا: IR 080160000000001143804581</p>
       </template>
-    </BasicModal>
+
+      <template v-else-if="isBazretalaProject()">
+        <p>جهت شارژ حساب کاربری خود، مبلغ موردنظر را به شماره کارت زیر واریز نموده و به شماره پشتیبانی 09121784258 در برنامه بله اطلاع دهید.</p>
+        <p class="deposit-guide-note">(گنجينه طلاي حاجي ابوالفتح - بانک ملی)</p>
+        <p class="deposit-guide-note">شماره کارت: 6037998800496928</p>
+        <p class="deposit-guide-note">شماره شبا: IR 110170000000372468150002</p>
+      </template>
+
+      <template v-else>
+        <p>{{ supportMessengerText }}</p>
+      </template>
+    </WalletDepositGuideModal>
 
     <BasicModal v-model:visible="withdrawInfModal" custom-footer :closable="false">
       <div class="text-center">
@@ -152,6 +124,7 @@ import DesktopWalletView from './desktop/DesktopWalletView.vue'
 import MobileWalletView from './mobile/MobileWalletView.vue'
 import SkeletonLoading from './components/SkeletonLoading.vue'
 import WalletAddCardForm from './components/WalletAddCardForm.vue'
+import WalletDepositGuideModal from './components/WalletDepositGuideModal.vue'
 
 const isDesktop = useDesktopBreakpoint()
 
@@ -164,7 +137,7 @@ const {
   infoVisible,
   refOtpInput,
   supportMessengerText,
-  supportMessengerLink,
+  depositGuideSupportLink,
   depositSmsSupportLink,
   isBazretalaProject,
   handleOnComplete,
@@ -178,4 +151,13 @@ const {
   min-height: 100%;
   height: 100%;
 }
+
+.deposit-guide-note {
+  margin: 0.35rem 0 0;
+}
+
+.deposit-guide-note--warn {
+  color: #dc2626;
+  font-weight: 600;
+}
 </style>