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 {