changes of boursemes &...

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

@@ -1,10 +1,15 @@
 <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
+      class="boursecu-bank-option__logo"
+      :class="{ 'boursecu-bank-option__logo--image': !!logoUrl }"
+      :style="logoUrl ? undefined : { backgroundColor: accentColor }"
+    >
+      <img v-if="logoUrl" :src="logoUrl" :alt="displayName" />
+      <span v-else>{{ monogram }}</span>
     </div>
     <div class="boursecu-bank-option__content">
-      <div class="boursecu-bank-option__title">{{ card.bank_name || 'بانک' }}</div>
+      <div class="boursecu-bank-option__title">{{ displayName }}</div>
       <div class="boursecu-bank-option__sheba">{{ shebaText }}</div>
     </div>
   </div>
@@ -16,6 +21,8 @@ import type { Card } from '@/models/wallet'
 import {
   formatShebaForDisplay,
   getBankAccentColor,
+  getBankDisplayName,
+  getBankLogoUrl,
   getBankMonogram,
 } from '@/utils/bankBranding'
 
@@ -28,6 +35,8 @@ const props = withDefaults(
 )
 
 const accentColor = computed(() => getBankAccentColor(props.card.bank_name))
+const displayName = computed(() => getBankDisplayName(props.card.bank_name))
+const logoUrl = computed(() => getBankLogoUrl(props.card.bank_name))
 const monogram = computed(() => getBankMonogram(props.card.bank_name))
 const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
 </script>
@@ -55,6 +64,19 @@ const shebaText = computed(() => formatShebaForDisplay(props.card.shaba_number))
   line-height: 1.1;
   text-align: center;
   padding: 4px;
+  overflow: hidden;
+}
+
+.boursecu-bank-option__logo--image {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  padding: 6px;
+}
+
+.boursecu-bank-option__logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
 }
 
 .boursecu-bank-option--compact .boursecu-bank-option__logo {

src/views/base/wallet/components/UISlider/index.vue

@@ -3,7 +3,7 @@
     <div ref="el" class="w-full flex flex-col relative h-full test">
       <CardItem v-for="(item,i) in props?.items" :key="i" v-model:sliderIndex="index" :card-number="item?.cart_number"
                 :color="colors[i%3]"
-                :self-index="i" :shaba="item?.shaba_number" :title="item?.bank_name" :active="item.sts === 2" :id="item?.id"
+                :self-index="i" :shaba="item?.shaba_number" :title="getBankDisplayName(item?.bank_name)" :active="item.sts === 2" :id="item?.id"
                 @cardDeleted="handleCardDeleted"
       />
       <div class="absolute bottom-1 right-0 left-0 z-100 flex justify-center items-center opacity-70 pointer-events-none">
@@ -26,6 +26,7 @@ import { computed, onMounted, ref, watch } from 'vue'
 import { useSwipe } from '@vueuse/core'
 import CardItem from './CardItem.vue'
 import type { Card } from '@/models/wallet'
+import { getBankDisplayName } from '@/utils/bankBranding'
 
 const el = ref(null)
 const container = ref<HTMLElement | null>(null)