add: send whatsapp & fixes

src/components/CardUser.vue

@@ -5,6 +5,7 @@
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
     import { useI18n } from 'vue-i18n';
+    import {computed } from 'vue'
     
     const props = defineProps({
         user: {
@@ -19,8 +20,6 @@
         
     })
 
-    console.log(props.user)
-    
     defineEmits(['set-user'])
     
     const companyStore = useCompanyStore();
@@ -67,6 +66,11 @@
 
         });
     }
+
+    const message = computed(() => `Hola, soy ${authStore.user.first_name} de ${authStore.user.company.company_name} y vi tu contacto en Eta Viaporte. Estoy interesado en tu oferta de ${authStore.user.company.company_type === 'Carrier' ? 'carga' : 'transporte'}. ${authStore.user.company.company_type === 'Carrier' ? '¿Podrías darme más detalles sobre el tipo de carga, el origen y destino?' : '¿Podrías proporcionarme más detalles sobre la disponibilidad, la ruta y las tarifas?'} Por favor, contáctame cuando puedas. ¡Gracias!`)
+
+    const whatsappLink = computed(() => `https://wa.me/${props.user.phone}?text=${message.value}`)
+
 </script>
 
 <template>
@@ -76,7 +80,12 @@
                 <p><span>{{ t('labels.names') }}:</span>  {{user.first_name}} {{user.last_name}}</p>
                 <p v-if="user.employee_id"><span class="font-weight-bold mr-1">{{ t('labels.registryNumber') }}:</span> {{user.employee_id}}</p>
                 <p><span>{{ t('labels.userRole') }}: </span>{{ getTypeUser(user.job_role, locale) }}</p>
-                <p><span>{{ t('labels.phone1') }}: </span>{{user.phone}}</p>
+                <p><span>{{ t('labels.phone1') }}: </span>
+                    {{user.phone}}
+                    <a :href="whatsappLink" target="_blank">
+                        <i class="fab fa-whatsapp whatsapp"></i> <!-- Usando FontAwesome para el icono de WhatsApp -->
+                    </a>
+                </p>
                 <!-- <p><span>Teléfono 2: </span>{{user.phone2}}</p> -->
                 <p><span>{{ t('labels.email') }}: </span>{{user.email}}</p>
             </div>
@@ -126,6 +135,12 @@
         font-weight: 700;
     }
 
+    .whatsapp {
+        font-size: 1.45rem;
+        align-items: center;
+        color: green;
+    }
+
     @media (max-width: 768px) {
 
         p {

src/components/DriverVehicleModal.vue

@@ -30,6 +30,8 @@
         if(props?.vehicle?.driver) {
             const index = drivers.value.findIndex((d) => d._id === props.vehicle.driver?._id);
             driverSelected.value = drivers.value[index];
+        } else {
+            drivers.value = companyStore.drivers.filter((e) => !e.vehicle)
         }
     });