changes of boursecu

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="boursecu-bank-option" :class="{ 'boursecu-bank-option--compact': compact }">
+    <div class="boursecu-bank-option__logo" :style="{ backgroundColor: accentColor }">
+      <span>{{ monogram }}</span>
+    </div>
+    <div class="boursecu-bank-option__content">
+      <div class="boursecu-bank-option__title">{{ card.bank_name || 'بانک' }}</div>
+      <div class="boursecu-bank-option__sheba">{{ shebaText }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Card } from '@/models/wallet'
+import {
+  formatShebaForDisplay,
+  getBankAccentColor,
+  getBankMonogram,
+} from '@/utils/bankBranding'
+
+const props = withDefaults(
+  defineProps<{
+    card: Card
+    compact?: boolean
+  }>(),
+  { compact: false },
+)
+
+const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
+const monogram = computed(() => getBankMonogram(props.card.bank_name))
+const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-option {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  min-width: 0;
+}
+
+.boursecu-bank-option__logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  border-radius: 12px;
+  color: #fff;
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.1;
+  text-align: center;
+  padding: 4px;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__logo {
+  width: 38px;
+  height: 38px;
+}
+
+.boursecu-bank-option__content {
+  min-width: 0;
+  flex: 1;
+  text-align: right;
+}
+
+.boursecu-bank-option__title {
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: #111827;
+  line-height: 1.3;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__title {
+  font-size: 0.875rem;
+}
+
+.boursecu-bank-option__sheba {
+  margin-top: 4px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+  direction: ltr;
+  text-align: right;
+  letter-spacing: 0.01em;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.boursecu-bank-option--compact .boursecu-bank-option__sheba {
+  font-size: 0.92rem;
+}
+</style>

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

@@ -0,0 +1,189 @@
+<template>
+  <div ref="rootRef" class="boursecu-bank-picker">
+    <div class="boursecu-bank-picker__header">
+      <span class="boursecu-bank-picker__heading">واریز به</span>
+      <button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
+        + افزودن شبا
+      </button>
+    </div>
+
+    <button
+      type="button"
+      class="boursecu-bank-picker__trigger"
+      :disabled="!items.length"
+      @click="toggleOpen"
+    >
+      <template v-if="selectedCard">
+        <BoursecuBankAccountOption :card="selectedCard" compact />
+        <BasicIcon
+          icon="vuesax-linear:arrow-down"
+          size="18"
+          class="boursecu-bank-picker__chevron"
+          :class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
+        />
+      </template>
+      <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
+    </button>
+
+    <div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
+      <button
+        v-for="card in items"
+        :key="card.id"
+        type="button"
+        class="boursecu-bank-picker__option"
+        :class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
+        @click="selectCard(card.id)"
+      >
+        <BoursecuBankAccountOption :card="card" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import type { Card } from '@/models/wallet'
+import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'
+
+const props = defineProps<{
+  items: Card[]
+  id?: number | string
+}>()
+
+const emit = defineEmits<{
+  'update:id': [value: number | string | undefined]
+  'add-account': []
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+
+const selectedId = computed({
+  get: () => props.id,
+  set: (value) => emit('update:id', value),
+})
+
+const selectedCard = computed(() =>
+  props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
+)
+
+function toggleOpen() {
+  if (!props.items.length) {
+    return
+  }
+  isOpen.value = !isOpen.value
+}
+
+function selectCard(cardId?: number) {
+  selectedId.value = cardId
+  isOpen.value = false
+}
+
+onClickOutside(rootRef, () => {
+  isOpen.value = false
+})
+</script>
+
+<style scoped lang="less">
+.boursecu-bank-picker {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  z-index: 1;
+}
+
+.boursecu-bank-picker__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.boursecu-bank-picker__heading {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__add {
+  appearance: none;
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #2563eb;
+  cursor: pointer;
+}
+
+.boursecu-bank-picker__trigger {
+  appearance: none;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: none;
+  border-radius: 14px;
+  background: #eceff1;
+  cursor: pointer;
+  text-align: right;
+}
+
+.boursecu-bank-picker__trigger:disabled {
+  cursor: default;
+}
+
+.boursecu-bank-picker__chevron {
+  flex-shrink: 0;
+  color: #6b7280;
+  transition: transform 0.2s ease;
+}
+
+.boursecu-bank-picker__chevron--open {
+  transform: rotate(180deg);
+}
+
+.boursecu-bank-picker__empty {
+  width: 100%;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.boursecu-bank-picker__dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  left: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 16px;
+  background: #fff;
+  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
+}
+
+.boursecu-bank-picker__option {
+  appearance: none;
+  width: 100%;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  padding: 10px 12px;
+  cursor: pointer;
+  text-align: right;
+  transition: background-color 0.15s ease;
+}
+
+.boursecu-bank-picker__option--active,
+.boursecu-bank-picker__option:hover {
+  background: #eceff1;
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <section class="boursecu-withdraw-guide">
+    <div class="boursecu-withdraw-guide__minimum">
+      <span class="boursecu-withdraw-guide__minimum-label">حداقل مقدار برداشت</span>
+      <div class="boursecu-withdraw-guide__minimum-value">
+        <span class="boursecu-withdraw-guide__minimum-amount">20,000</span>
+        <span class="boursecu-withdraw-guide__minimum-unit">تومان</span>
+      </div>
+    </div>
+
+    <p class="boursecu-withdraw-guide__intro">
+      درخواست‌های برداشت ثبت‌شده، وارد صف سیکل‌های پایا شده و در اولین سیکل یا در برخی موارد تا ۴۸ ساعت تسویه خواهد شد.
+    </p>
+
+    <div class="boursecu-withdraw-guide__section">
+      <h3 class="boursecu-withdraw-guide__section-title">سیکل‌های پایا (روزهای غیر تعطیل)</h3>
+      <ul class="boursecu-withdraw-guide__list">
+        <li>ثبت پیش از ۱۲ ظهر ----&gt; ساعت ۱۲:۴۵ همان روز</li>
+        <li>ثبت پیش از ۱۸ عصر ----&gt; ساعت ۱۸:۴۵ همان روز</li>
+        <li>ثبت پس از ساعت ۱۸ عصر ----&gt; ساعت ۱۲:۴۵ روز کاری بعد</li>
+      </ul>
+    </div>
+
+    <div class="boursecu-withdraw-guide__section">
+      <h3 class="boursecu-withdraw-guide__section-title">سیکل‌های پایا (روزهای تعطیل)</h3>
+      <p class="boursecu-withdraw-guide__holiday">ساعت ۱۲:۴۵ روز کاری بعد</p>
+    </div>
+  </section>
+</template>
+
+<style scoped lang="less">
+.boursecu-withdraw-guide {
+  margin-top: 0;
+  color: #4b5563;
+  line-height: 1.8;
+}
+
+.boursecu-withdraw-guide__minimum {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.boursecu-withdraw-guide__minimum-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-withdraw-guide__minimum-value {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 0.35rem;
+}
+
+.boursecu-withdraw-guide__minimum-amount {
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: #111827;
+  direction: ltr;
+  font-variant-numeric: tabular-nums;
+}
+
+.boursecu-withdraw-guide__minimum-unit {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.boursecu-withdraw-guide__intro {
+  margin: 0 0 1rem;
+  font-size: 0.8125rem;
+  text-align: justify;
+}
+
+.boursecu-withdraw-guide__section {
+  margin-bottom: 0.85rem;
+}
+
+.boursecu-withdraw-guide__section-title {
+  margin: 0 0 0.35rem;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: #374151;
+}
+
+.boursecu-withdraw-guide__list {
+  margin: 0;
+  padding: 0 1rem 0 0;
+  font-size: 0.8125rem;
+}
+
+.boursecu-withdraw-guide__list li + li {
+  margin-top: 0.15rem;
+}
+
+.boursecu-withdraw-guide__holiday {
+  margin: 0;
+  padding-right: 0.25rem;
+  font-size: 0.8125rem;
+}
+</style>

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

@@ -12,7 +12,7 @@ import { message } from 'ant-design-vue'
 import type { Card } from '@/models/wallet'
 import { useUserStore } from '@/store/userStore'
 import { useConfigStore } from '@/store/configStore'
-import { getProjectBaleContactLink, isBazretalaProject } from '@/utils/config'
+import { getProjectBaleContactLink, isBazretalaProject, isBoursecuProject } from '@/utils/config'
 import { useDesktopBreakpoint } from '@/layouts/composables/useAppLayout'
 import {
   buildDepositSmsUrl,
@@ -124,6 +124,9 @@ export function useWalletPage() {
   })
 
   const disableButton = computed(() => {
+    const minWithdrawAmount = isBoursecuProject() ? 200_000 : 1_000_000
+    const minDepositAmount = 1_000_000
+
     if (!loading.value) {
       if (walletStore?.walletInfo?.cash && !isDeposit.value) {
         if (walletCardItems.value.length > 0) {
@@ -131,13 +134,13 @@ export function useWalletPage() {
             walletStore?.walletInfo?.cash <= 0
             || walletStore?.walletInfo?.cash < parseInt(form.value?.value)
             || isNaN(parseInt(form.value?.value))
-            || parseInt(form.value?.value) < 1000000
+            || parseInt(form.value?.value) < minWithdrawAmount
           )
         }
         return true
       }
       if (isDeposit.value) {
-        return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < 1000000
+        return isNaN(parseInt(form.value?.value)) || parseInt(form.value?.value) < minDepositAmount
       }
       return false
     }

src/views/base/wallet/desktop/DesktopWalletView.vue

@@ -55,7 +55,7 @@
 
             <Transition mode="out-in" name="fade">
               <div v-if="!isDeposit" key="withdraw" class="dwallet-form__extras">
-                <p class="dwallet-form__hint dwallet-form__hint--warn">
+                <p v-if="!isBoursecu" class="dwallet-form__hint dwallet-form__hint--warn">
                   حداقل مبلغ برداشتی 100 هزار تومان می باشد.
                 </p>
                 <p class="dwallet-form__balance-text">
@@ -100,6 +100,8 @@
               <a-spin v-if="loading" size="small" />
               <span v-else>{{ isDeposit ? 'واریز' : 'برداشت' }}</span>
             </BasicButton>
+
+            <BoursecuWithdrawGuide v-if="!isDeposit && isBoursecu" />
           </a-form>
         </section>
 
@@ -127,8 +129,13 @@
 
           <template v-else>
             <div class="dwallet-side__header">
-              <h3 class="dwallet-side__title">کارت‌های بانکی</h3>
-              <button type="button" class="dwallet-side__add-btn" @click="showAddCard = true">
+              <h3 class="dwallet-side__title">{{ isBoursecu ? 'حساب‌های بانکی' : 'کارت‌های بانکی' }}</h3>
+              <button
+                v-if="!isBoursecu"
+                type="button"
+                class="dwallet-side__add-btn"
+                @click="showAddCard = true"
+              >
                 <BasicIcon icon="vuesax-linear:add" size="16" />
                 <span>افزودن کارت</span>
               </button>
@@ -138,10 +145,17 @@
               <BasicIcon icon="vuesax-linear:card" size="32" />
               <p>هیچ کارتی یافت نشد</p>
               <button type="button" class="dwallet-side__add-btn dwallet-side__add-btn--primary" @click="showAddCard = true">
-                افزودن کارت جدید
+                {{ isBoursecu ? 'افزودن شبا' : 'افزودن کارت جدید' }}
               </button>
             </div>
 
+            <BoursecuBankAccountPicker
+              v-else-if="isBoursecu"
+              v-model:id="form.card_id"
+              :items="cardItems"
+              @add-account="showAddCard = true"
+            />
+
             <div v-else-if="cardItems.length > 0" class="dwallet-cards">
               <CardSlider
                 v-model:id="form.card_id"
@@ -167,9 +181,14 @@ import TransactionSkeleton from '@/components/TransactionSkeleton.vue'
 import { useConfigStore } from '@/store/configStore'
 import { required } from '@/utils/inputRules'
 import CardSlider from '../components/UISlider/index.vue'
+import BoursecuBankAccountPicker from '../components/BoursecuBankAccountPicker.vue'
+import BoursecuWithdrawGuide from '../components/BoursecuWithdrawGuide.vue'
 import Item from '../components/Item.vue'
+import { isBoursecuProject } from '@/utils/config'
 import { useWalletPageContext } from '../composables/useWalletPage'
 
+const isBoursecu = isBoursecuProject()
+
 const {
   isDeposit,
   walletStore,

src/views/base/wallet/mobile/MobileWalletView.vue

@@ -26,9 +26,17 @@
     </div>
     <div
       class="px-5 mpage-content mpage-content--with-subheader"
-      :class="isDeposit ? 'pb-2' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
+      :class="isDeposit ? 'pb-2' : isBoursecu ? 'pb-[calc(var(--app-bottom-chrome-height)+1rem)]' : 'pb-[calc(var(--app-bottom-chrome-height)+var(--app-add-card-height)+1rem)]'"
     >
       <a-form :model="form" class="!mt-5" name="basic" @finish="ok()">
+        <BoursecuBankAccountPicker
+          v-if="!isDeposit && isBoursecu"
+          v-model:id="form.card_id"
+          :items="cardItems"
+          class="mb-4"
+          @add-account="showAddCard = true"
+        />
+
         <div class="border-gray-200 border-1 rounded-xl p-5 trans h-40 relative">
           <bg_main />
           <div class="z-100 relative">
@@ -45,7 +53,9 @@
             </a-form-item>
             <Transition mode="out-in" name="fade">
               <div v-if="!isDeposit">
-                <div class="text-red text-xs font-bold mb-2">حداقل مبلغ برداشتی 100 هزار تومان می باشد.</div>
+                <div v-if="!isBoursecu" class="text-red text-xs font-bold mb-2">
+                  حداقل مبلغ برداشتی 100 هزار تومان می باشد.
+                </div>
                 <div class="font-bold text-xs">
                   {{ formatCashWalletBalanceText(usePriceWithoutType(walletStore?.walletInfo?.cash ?? 0)) }}
                 </div>
@@ -94,6 +104,14 @@
           </BasicButton>
         </a-form-item>
       </a-form>
+
+      <div
+        v-if="!isDeposit && isBoursecu"
+        class="wallet-withdraw-guide-panel relative z-10"
+      >
+        <BoursecuWithdrawGuide />
+      </div>
+
       <div
         v-if="isDeposit"
         :ref="(node) => { mobileDepositScrollEl = (node as HTMLElement | null) }"
@@ -110,7 +128,7 @@
       <Transition mode="out-in" name="fade">
         <template v-if="!isDeposit">
           <div
-            v-if="!loading && cardItems.length === 0"
+            v-if="!loading && cardItems.length === 0 && !isBoursecu"
             class="h-30 flex items-center justify-center"
           >
             هیچ کارتی یافت نشد
@@ -121,7 +139,7 @@
 
     <Teleport to="body">
       <CardSlider
-        v-if="!isDeposit && cardItems.length > 0 && !showAddCard"
+        v-if="!isDeposit && !isBoursecu && cardItems.length > 0 && !showAddCard"
         v-model:id="form.card_id"
         :items="cardItems"
         class="card-slider-wrap wallet-card-slider"
@@ -131,7 +149,7 @@
 
     <Teleport to="body">
       <div
-        v-if="!isDeposit && !showAddCard"
+        v-if="!isDeposit && !isBoursecu && !showAddCard"
         class="add-card app-dock-add-bar"
         @click="showAddCard = true"
       >
@@ -154,9 +172,14 @@ import { useConfigStore } from '@/store/configStore'
 import { required } from '@/utils/inputRules'
 import img from '@/assets/img/user_ly1.svg'
 import CardSlider from '../components/UISlider/index.vue'
+import BoursecuBankAccountPicker from '../components/BoursecuBankAccountPicker.vue'
+import BoursecuWithdrawGuide from '../components/BoursecuWithdrawGuide.vue'
 import Item from '../components/Item.vue'
+import { isBoursecuProject } from '@/utils/config'
 import { useWalletPageContext } from '../composables/useWalletPage'
 
+const isBoursecu = isBoursecuProject()
+
 const {
   isDeposit,
   walletStore,
@@ -185,6 +208,11 @@ const {
   right: 0;
 }
 
+.wallet-withdraw-guide-panel {
+  margin-top: 1.25rem;
+  padding-bottom: 1rem;
+}
+
 @media screen and (min-width: 426px) {
   .card-slider-wrap {
     width: 426px;