Actualizar

js/meliCardsFisebase.js

@@ -352,6 +352,7 @@ document.addEventListener('DOMContentLoaded', function() {
                                     pictures: data.pictures,
                                     SKU: data.SKU,
                                     paqid: data.packId,
+                                    cliente: data.cliente,
                                     Telefono: data.Telefono,
                                     VolumenCM3: data.VolumenCM3,
                                     VolumenM3: data.VolumenM3,
@@ -458,6 +459,7 @@ function cargarDatos() {
                     localidad: data.localidad,
                     medidas: data.medidas,
                     paqid: data.packId,
+                    cliente: data.cliente,
                     permalink: data.permalink,
                     shippingMode: data.shippingMode,
                     nombreDeUsuario: data.nombreDeUsuario,
@@ -703,9 +705,10 @@ const paymentHTML = `
 
                     </div>
 
-                <div class="PaqID-Container">
+                <div class="PaqID-Container" onclick="copiarPaqId('${data.paqid}')">
                 <div class="PaqID ${!data.paqid ? 'hidden' : ''}">
-                    <i class="bi bi-info-circle-fill info-paq"></i><strong>PaqId:</strong> ${data.paqid}
+                <i class="bi bi-info-circle-fill info-paq"></i>
+                <strong>PaqId:</strong> ${data.paqid}
                 </div>
                 </div>
 
@@ -728,6 +731,13 @@ const paymentHTML = `
             
                 </div>
 
+                <div class="cliente-Container" onclick="copiarCliente('${data.cliente}')">
+                <div class="cliente ${!data.cliente ? 'hidden' : ''}">
+                <img src="Img/logo-presea.png" alt="PRESEA" width="20">
+                Cliente Presea: <strong id="nombre-cliente">${data.cliente}</strong> 
+                </div>
+                </div>
+
                 ${carouselHTML}
                 <div class="macos-style">
                 Producto: X ${data.Cantidad} ${data.SKU}
@@ -1003,6 +1013,38 @@ document.querySelectorAll('.editarDatos').forEach(button => {
     });
 });
 
+function copiarCliente(cliente) {
+    navigator.clipboard.writeText(cliente).then(() => {
+        showAlert(`Se ha copiado al portapapeles: Cliente ${cliente}`);
+    }).catch(err => {
+        console.error('Error al copiar: ', err);
+    });
+}
+
+function copiarPaqId(paqid) {
+    navigator.clipboard.writeText(paqid).then(() => {
+        showAlert(`Se ha copiado al portapapeles: PaqId ${paqid}`);
+    }).catch(err => {
+        console.error('Error al copiar: ', err);
+    });
+}
+
+// Función para mostrar la alerta
+function showAlert(message) {
+    const alertContainer = document.createElement('div');
+    alertContainer.className = 'alert-ios-meli';
+    alertContainer.innerHTML = `
+        <i class="bi bi-clipboard-check"></i>
+        ${message}
+        <button class="close-btn" onclick="this.parentElement.style.display='none';">&times;</button>
+    `;
+    document.body.appendChild(alertContainer);
+
+    setTimeout(() => {
+        alertContainer.style.display = 'none';
+    }, 3000);
+}
+
 async function handleButtonClick(numeroDeEnvio, id) {
     // Mostrar spinner
     document.getElementById(`spinnerAndreani${id}`).style.display = 'inline-block';

meliAr.html

@@ -514,7 +514,7 @@ <h5 class="modal-title query-modal-title" id="queryModalLabel">Generación de Qu
                 </div>
             </div>
         </div>
-    </div>
+    </div> 
 </div> 
 
         <!-- Fin ModalQuey -->

styles.css

@@ -689,6 +689,12 @@ button:hover {
     align-items: center;
 }
 
+.cliente-Container{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 .PaqID {
     border-radius: 10px 10px 0 0;
     width: fit-content;
@@ -706,6 +712,24 @@ button:hover {
     z-index: -100;
 }
 
+.cliente {
+    width: 100%;
+    text-align: center;
+    padding: 8px;
+    margin-bottom: -5px;
+    color: #ffffff;
+    font-weight: 500;
+    border: 1px solid cornflowerblue;
+    background-color: indigo; 
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Fuente de macOS */
+    transition: background-color 0.3s ease, box-shadow 0.3s ease; 
+    z-index: -100;
+}
+
+.cliente > img{
+    margin-right: 5px;
+}
+
 .info-paq{
     margin-right: 5px;
 }
@@ -5947,7 +5971,7 @@ img.gray-filter {
 /* ALERTAS FACTURACION MELI */
 .alert-ios-meli {
     position: fixed;
-    bottom: 20px;
+    bottom: 100px;
     right: 20px;
     background-color: #f8f9fa;
     color: #212529;