new UI and handle cashing

src/views/base/wallet/components/WalletDepositGuideModal.vue

@@ -0,0 +1,167 @@
+<template>
+  <BasicModal
+    v-model:visible="localVisible"
+    custom-footer
+    :closable="false"
+    wrap-class-name="deposit-guide-modal-wrap"
+    width="min(92vw, 380px)"
+  >
+    <div class="deposit-guide">
+      <div class="deposit-guide__icon-wrap" aria-hidden="true">
+        <BasicIcon icon="vuesax-linear:empty-wallet-add" size="34" color="#16a34a" />
+      </div>
+
+      <h2 class="deposit-guide__title">{{ title }}</h2>
+
+      <div class="deposit-guide__body">
+        <slot />
+      </div>
+
+      <a
+        v-if="supportLink"
+        class="deposit-guide__support-link"
+        :href="supportLink"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <span class="deposit-guide__support-btn">
+          <BasicIcon icon="vuesax-linear:headphone" size="18" color="#16a34a" />
+          <span>پیام به پشتیبانی</span>
+        </span>
+      </a>
+
+      <a
+        v-if="smsLink"
+        class="deposit-guide__support-link"
+        :class="{ 'deposit-guide__support-link--spaced': supportLink }"
+        :href="smsLink"
+      >
+        <span class="deposit-guide__support-btn">
+          <BasicIcon icon="vuesax-linear:direct-inbox" size="18" color="#16a34a" />
+          <span>پیام به پشتیبانی (sms)</span>
+        </span>
+      </a>
+    </div>
+
+    <template #footer>
+      <BasicButton type="primary" class="deposit-guide__confirm w-full" @click="localVisible = false">
+        متوجه شدم
+      </BasicButton>
+    </template>
+  </BasicModal>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    title?: string
+    supportLink?: string
+    smsLink?: string
+  }>(),
+  {
+    title: 'راهنمای شارژ حساب',
+    supportLink: '',
+    smsLink: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+}>()
+
+const localVisible = computed({
+  get: () => props.visible,
+  set: (value: boolean) => emit('update:visible', value),
+})
+</script>
+
+<style scoped lang="less">
+.deposit-guide {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 0.25rem 0.5rem 0.5rem;
+}
+
+.deposit-guide__icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: 9999px;
+  background: #ecfdf3;
+  margin-bottom: 1rem;
+}
+
+.deposit-guide__title {
+  margin: 0 0 0.75rem;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #111827;
+}
+
+.deposit-guide__body {
+  width: 100%;
+  font-size: 0.92rem;
+  line-height: 1.9;
+  color: #4b5563;
+}
+
+.deposit-guide__support-link {
+  display: block;
+  width: 100%;
+  margin-top: 1.25rem;
+  text-decoration: none;
+
+  &--spaced {
+    margin-top: 0.65rem;
+  }
+}
+
+.deposit-guide__support-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.75rem;
+  padding: 0.65rem 1rem;
+  border: 1px solid #bbf7d0;
+  border-radius: 0.75rem;
+  background: #f0fdf4;
+  color: #15803d;
+  font-size: 0.92rem;
+  font-weight: 600;
+}
+
+.deposit-guide__confirm {
+  min-height: 2.75rem;
+  font-weight: 700;
+}
+</style>
+
+<style lang="less">
+.deposit-guide-modal-wrap {
+  .ant-modal-content {
+    border-radius: 1rem;
+    padding-top: 1rem;
+  }
+
+  .ant-modal-header {
+    display: none;
+  }
+
+  .ant-modal-footer {
+    border-top: none;
+    padding-top: 0;
+  }
+}
+</style>

src/views/base/wallet/composables/useWalletPage.ts

@@ -51,7 +51,7 @@ export interface WalletPageContext {
   mobileDepositScrollEl: Ref<HTMLElement | null>
   desktopDepositScrollEl: Ref<HTMLElement | null>
   supportMessengerText: ReturnType<typeof computed<string>>
-  supportMessengerLink: ReturnType<typeof computed<string | undefined>>
+  depositGuideSupportLink: ReturnType<typeof computed<string>>
   depositSmsSupportLink: ReturnType<typeof computed<string>>
   isBazretalaProject: typeof isBazretalaProject
   usePriceWithoutType: typeof usePriceWithoutType
@@ -91,12 +91,16 @@ export function useWalletPage() {
     () => supportMessengerSettings.value.messengerText || DEFAULT_SUPPORT_MESSENGER_TEXT,
   )
 
-  const supportMessengerLink = computed(() =>
-    buildSupportMessengerUrl(
+  const depositGuideSupportLink = computed(() => {
+    if (config.config?.name === 'garoosi') {
+      return 'https://ble.ir/garoosigallery'
+    }
+
+    return buildSupportMessengerUrl(
       supportMessengerSettings.value.messenger,
       supportMessengerSettings.value.messengerId,
-    ),
-  )
+    )
+  })
 
   const depositSmsSupportLink = computed(() =>
     buildDepositSmsUrl(supportMessengerSettings.value.depositSmsSupportNumber),
@@ -270,7 +274,7 @@ export function useWalletPage() {
     mobileDepositScrollEl,
     desktopDepositScrollEl,
     supportMessengerText,
-    supportMessengerLink,
+    depositGuideSupportLink,
     depositSmsSupportLink,
     isBazretalaProject,
     usePriceWithoutType,

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>