From 6dae5d9574a08bbf2778913395dcb2bff553af30 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 12 Oct 2024 16:41:34 -0600
Subject: [PATCH] add: send whatsapp & fixes

---
 src/components/CardUser.vue           | 21 ++++++++++++++++++---
 src/components/DriverVehicleModal.vue |  2 ++
 src/views/TrackingLoadView.vue        | 16 ++++++++--------
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/CardUser.vue b/src/components/CardUser.vue
index 9f74093..ab42b10 100644
--- a/src/components/CardUser.vue
+++ b/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 {
diff --git a/src/components/DriverVehicleModal.vue b/src/components/DriverVehicleModal.vue
index cf24a4a..4333f16 100644
--- a/src/components/DriverVehicleModal.vue
+++ b/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)
         }
     });
 
diff --git a/src/views/TrackingLoadView.vue b/src/views/TrackingLoadView.vue
index 38a9792..d978f44 100644
--- a/src/views/TrackingLoadView.vue
+++ b/src/views/TrackingLoadView.vue
@@ -41,12 +41,12 @@
         const id = route.params['code'];
         await getLoadTracking(id)
         if(load.value !== null) {
-            console.log(load.value);
-            const addressOrigin = load.value?.origin_geo?.coordinates;
-            const addressDestination = load.value?.destination_geo?.coordinates;
-            if(addressOrigin && addressDestination) {
-                originCoords.value = {lat: Number.parseFloat(addressOrigin[0]), lng: Number.parseFloat(addressOrigin[1])};
-                destinationCoords.value = {lat: Number.parseFloat(addressDestination[0]), lng: Number.parseFloat(addressDestination[1])};
+            // console.log(load.value);
+            const origin = load.value?.origin;
+            const destination = load.value?.destination;
+            if(origin && destination) {
+                originCoords.value = {lat: Number.parseFloat(origin.lat), lng: Number.parseFloat(origin.lng)};
+                destinationCoords.value = {lat: Number.parseFloat(destination.lat), lng: Number.parseFloat(destination.lng)};
 
                 polylines.value = await getDirections(originCoords.value, destinationCoords.value);
 
@@ -70,7 +70,7 @@
                     isLoadActive.value = true;
                     break;
                 case 'Delivered':
-                    isLoadActive.value = true;
+                    isLoadActive.value = false;
                     break;
             
                 default:
@@ -121,7 +121,7 @@
                     <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
                     <!-- v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive" -->
                     <CustomMarker
-                        v-if="vehicleLastLocation && isLoadActive"
+                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
                         :options="{position: vehicleLastLocation}"
                         :clickable="false"
                         :draggable="false"