feat: :sparkles: feat(adicionar-bandeira) Foi adicionado as bandeiras dos cartões

Quando identificar o cartão ele adiciona na exibição qual a bandeira daquele cartão do metodo de pagamento

fase:dev | origin:escopo

src/assets/cards/elo.svg

@@ -0,0 +1 @@
+<svg height="1181" viewBox="0 0 2337.9 1104.7" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h2337.9v1104.7h-2337.9z"/><path d="m481.7 338.4c22.5-7.5 46.5-11.5 71.4-11.5 109 0 200 77.4 220.8 180.3l154.5-31.5c-35.4-174.8-190-306.4-375.3-306.4-42.5 0-83.2 6.9-121.4 19.7z" fill="#ffcb05"/><path d="m299.4 839 104.5-118.1c-46.6-41.3-76-101.6-76-168.8 0-67.1 29.4-127.4 76-168.6l-104.5-118.2c-79.2 70.2-129.2 172.7-129.2 286.8 0 114.2 50 216.7 129.2 286.9" fill="#00a4e0"/><path d="m773.9 597.3c-20.9 102.8-111.8 180.1-220.7 180.1-25 0-49.1-4-71.5-11.6l-50 149.6c38.2 12.7 79 19.6 121.5 19.6 185.1 0 339.6-131.4 375.2-306z" fill="#ef4123"/><path d="m1063.5 725.8c-5.1-8.2-11.9-21.3-16.1-31-24.5-56.8-25.6-115.6-5-172 22.7-61.9 66.1-109.2 122.2-133.4 70.5-30.3 148.4-24.4 216 15.7 42.9 24.6 73.3 62.6 96.4 116.4 2.9 6.9 5.5 14.2 8.1 20.5zm140.8-245.1c-50.1 21.5-75.9 68.5-70.5 123.5l212-91.3c-36.5-42.8-83.9-57-141.5-32.2zm167.9 198.6c-.1 0-.1.1-.1.1l-4.4-3c-12.7 20.5-32.4 37.2-57.3 48-47.4 20.6-91.3 15.3-122.9-12.4l-2.9 4.4s0-.1-.1-.1l-53.8 80.5c13.4 9.3 27.7 17.1 42.7 23.4 59.4 24.7 120.2 23.5 180.1-2.5 43.3-18.8 77.3-47.4 100.5-83.7zm260.2-408.3v447.4l69.6 28.2-39.5 92.2-76.8-32c-17.2-7.5-29-18.9-37.8-31.8-8.5-13.1-14.8-31.2-14.8-55.4v-448.6zm180.2 333.5c0-38.1 16.9-72.3 43.5-95.5l-71.4-79.6c-48.4 42.8-78.9 105.3-78.9 174.9-.1 69.7 30.4 132.3 78.7 175.1l71.3-79.6c-26.5-23.3-43.2-57.3-43.2-95.3zm126.8 126.9c-14 0-27.6-2.4-40.2-6.6l-34.1 101.3c23.3 7.8 48.2 12.1 74.2 12.1 113 .1 207.3-80.1 229.2-186.6l-104.8-21.4c-11.9 57.9-63 101.3-124.3 101.2zm.3-360.6c-25.9 0-50.8 4.2-74.1 11.9l33.8 101.4c12.7-4.2 26.2-6.5 40.2-6.5 61.4.1 112.6 43.7 124.2 101.7l104.8-21.2c-21.5-106.7-115.8-187.2-228.9-187.3z" fill="#fff"/></svg>

src/assets/cards/visa.svg

@@ -0,0 +1 @@
+<svg height="812" viewBox="0.5 0.5 999 323.684" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497L.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707l25.178 117.653h-67.454z" fill="#1434cb"/></svg>

src/components/brandDetector/BrandDetectorPanel.vue

@@ -0,0 +1,46 @@
+<template>
+    <img :src="brandImage" class="card-brand-image" alt="Bandeira do cartão" />
+
+</template>
+
+
+
+<script setup>
+
+import { computed } from 'vue';
+import visa from 'src/assets/cards/visa.svg';
+import mastercard from 'src/assets/cards/mastercard.svg';
+import elo from 'src/assets/cards/elo.svg';
+import hipercard from 'src/assets/cards/hipercard.svg';
+import diners from 'src/assets/cards/diners.svg';
+import discover from 'src/assets/cards/discover.svg';
+
+const props = defineProps({
+    brand:
+    {
+        type: String,
+        default: '',
+    },
+});
+
+const brandImage = computed(() => {
+    const brands = {
+        visa,
+        mastercard,
+        elo,
+        hipercard,
+        diners,
+        discover,
+    };
+    return brands[props.brand?.toLowerCase()] || visa;
+});
+</script>
+
+<style scoped lang="scss">
+.card-brand-image {
+    width: 42px;
+    height: auto;
+    object-fit: contain;
+    display: block;
+}
+</style>

src/components/profile/ProfilePaymentsDialog.vue

@@ -6,8 +6,7 @@
         <q-btn v-close-popup icon="mdi-chevron-left" flat round dense color="primary" />
         <q-space />
         <span class="text-subtitle1 text-weight-bold text-primary">{{ $t('profile.payments.subtitle') }}</span>
-        <q-space />
-        <div style="width: 32px"></div>
+      <q-space />
       </div>
 
       <div v-if="loading" class="col flex flex-center">
@@ -33,7 +32,7 @@
             <div v-else class="column q-gutter-y-md">
               <div v-for="item in paymentMethods" :key="item.id" class="card-item-box row items-center no-wrap q-pa-md">
                 <div class="brand-logo-wrapper q-mr-md">
-                  <q-icon name="mdi-credit-card-chip-outline" color="grey-7" size="32px" />
+                  <BrandDetectorPanel :brand="item.brand" />
                 </div>
 
                 <div class="col column">
@@ -69,6 +68,7 @@ import { userStore } from 'src/stores/user';
 import { getClientPaymentMethods, deleteClientPaymentMethod } from 'src/api/clientPaymentMethod';
 import ProfilePaymentAddDialog from './ProfilePaymentAddDialog.vue';
 import ProfilePaymentRemoveDialog from './ProfilePaymentRemoveDialog.vue';
+import BrandDetectorPanel from '../brandDetector/BrandDetectorPanel.vue';
 
 defineEmits([...useDialogPluginComponent.emits]);
 
@@ -79,30 +79,6 @@ const store = userStore();
 const paymentMethods = ref([]);
 const loading = ref(false);
 
-// const brandIcon = (brand) => {
-//   const icons = {
-//     visa: 'mdi-credit-card-outline',
-//     mastercard: 'mdi-credit-card-outline',
-//     elo: 'mdi-credit-card-outline',
-//     hipercard: 'mdi-credit-card-outline',
-//     diners: 'mdi-credit-card-outline',
-//     discover: 'mdi-credit-card-outline',
-//   };
-//   return icons[brand] ?? 'mdi-credit-card-outline';
-// };
-
-// const brandColor = (brand) => {
-//   const colors = {
-//     visa: 'blue-8',
-//     mastercard: 'orange-8',
-//     elo: 'yellow-9',
-//     hipercard: 'red-8',
-//     diners: 'grey-7',
-//     discover: 'orange-6',
-//   };
-//   return colors[brand] ?? 'grey-6';
-// };
-
 const cardLabel = (item) => {
   const parts = [];
   if (item.card_name) parts.push(item.card_name);