From 533bae021bf2d0fe73521bae2eab69e4d8ad35be Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Tue, 22 Sep 2026 15:25:26 -0300
Subject: [PATCH] feat: Share whatsapp message

---
 apps/web/src/routes/group-detail.tsx | 88 +++++++++++++++++++++-------
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/routes/group-detail.tsx b/apps/web/src/routes/group-detail.tsx
index b4cba1e..1c062ae 100644
--- a/apps/web/src/routes/group-detail.tsx
+++ b/apps/web/src/routes/group-detail.tsx
@@ -149,6 +149,29 @@ export function GroupDetailView() {
     }
   };
 
+  const handleCopyMessage = async () => {
+    if (!whatsappMessage) return;
+    try {
+      await navigator.clipboard.writeText(whatsappMessage);
+      toast.success('¡Mensaje copiado al portapapeles!');
+    } catch {
+      toast.error('No se pudo copiar automáticamente. Copia el texto manualmente.');
+    }
+  };
+
+  const handleOpenWhatsApp = async () => {
+    if (!whatsappShareUrl) return;
+    try {
+      if (whatsappMessage) {
+        await navigator.clipboard.writeText(whatsappMessage);
+        toast.success('¡Abriendo WhatsApp! Mensaje copiado al portapapeles.');
+      }
+    } catch {
+      // Ignorar si clipboard falla
+    }
+    window.open(whatsappShareUrl, '_blank', 'noopener,noreferrer');
+  };
+
   const handleQuickSubmit = (e: React.FormEvent) => {
     e.preventDefault();
     if (!firstName.trim() || !phone.trim()) {
@@ -249,10 +272,13 @@ export function GroupDetailView() {
   const validRowsCount = parsedContacts.filter((c) => c.isValid).length;
   const invalidRowsCount = parsedContacts.length - validRowsCount;
 
-  const whatsappShareUrl = group && inviteTokenQuery.data?.inviteUrl
-    ? `https://wa.me/?text=${encodeURIComponent(
-        `¡Hola! Te invito a unirte a nuestro grupo "${group.name}". Completa tus datos de inscripción en el siguiente enlace: ${inviteTokenQuery.data.inviteUrl}`,
-      )}`
+  const whatsappMessage =
+    group && inviteTokenQuery.data?.inviteUrl
+      ? `¡Hola! 👋 Te invito a unirte al grupo *${group.name}*.\n\nCompleta tus datos de inscripción en el siguiente enlace:\n${inviteTokenQuery.data.inviteUrl}`
+      : '';
+
+  const whatsappShareUrl = whatsappMessage
+    ? `https://wa.me/?text=${encodeURIComponent(whatsappMessage)}`
     : '';
 
   if (groupQuery.isPending) {
@@ -498,28 +524,42 @@ export function GroupDetailView() {
                 </div>
               </div>
 
-              <div className="rounded-xl bg-accent-soft p-4 text-xs text-foreground/80 space-y-2 border border-accent/20">
-                <p className="font-semibold text-primary">Vista previa del mensaje para WhatsApp:</p>
-                <p className="italic">
-                  “¡Hola! Te invito a unirte a nuestro grupo <strong>{group.name}</strong>. Completa tus datos de inscripción en el siguiente enlace: {inviteTokenQuery.data?.inviteUrl}”
-                </p>
+              <div className="rounded-xl bg-accent-soft p-4 text-xs text-foreground/80 space-y-2.5 border border-accent/20">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="font-semibold text-primary">Vista previa del mensaje para WhatsApp:</p>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => void handleCopyMessage()}
+                    className="h-7 px-2 text-xs text-primary hover:text-primary/80 gap-1.5 shrink-0"
+                    title="Copiar mensaje completo al portapapeles"
+                  >
+                    <Copy className="size-3.5" />
+                    <span>Copiar mensaje</span>
+                  </Button>
+                </div>
+                <div className="rounded-lg bg-surface/70 p-3 border border-accent/10 whitespace-pre-line font-sans text-xs leading-relaxed text-foreground">
+                  {`¡Hola! 👋 Te invito a unirte al grupo `}
+                  <strong>{group.name}</strong>.
+                  {'\n\n'}
+                  Completa tus datos de inscripción en el siguiente enlace:
+                  {'\n'}
+                  <span className="text-accent underline break-all">
+                    {inviteTokenQuery.data?.inviteUrl}
+                  </span>
+                </div>
               </div>
 
               <div className="flex flex-col sm:flex-row items-center gap-2.5 pt-2">
-                <a
-                  href={whatsappShareUrl}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="w-full sm:flex-1"
+                <Button
+                  variant="primary"
+                  onClick={() => void handleOpenWhatsApp()}
+                  className="w-full sm:flex-1 gap-2 bg-[#25D366] hover:bg-[#1EBE5D] text-white border-0"
                 >
-                  <Button
-                    variant="primary"
-                    className="w-full gap-2 bg-[#25D366] hover:bg-[#1EBE5D] text-white border-0"
-                  >
-                    <MessageCircle className="size-4" />
-                    <span>Abrir en WhatsApp</span>
-                  </Button>
-                </a>
+                  <MessageCircle className="size-4" />
+                  <span>Abrir en WhatsApp</span>
+                </Button>
 
                 <Button
                   variant="ghost"
@@ -535,6 +575,10 @@ export function GroupDetailView() {
                   <span>Regenerar enlace</span>
                 </Button>
               </div>
+
+              <p className="text-[11px] text-foreground/50 text-center sm:text-left leading-normal">
+                💡 Al hacer clic en <strong>Abrir en WhatsApp</strong>, el mensaje completo se copia automáticamente al portapapeles. Si WhatsApp Web solo carga el enlace, puedes pegarlo directamente con <kbd className="px-1 py-0.5 rounded bg-primary-soft text-primary font-mono text-[10px]">Ctrl+V</kbd> o <kbd className="px-1 py-0.5 rounded bg-primary-soft text-primary font-mono text-[10px]">Cmd+V</kbd>.
+              </p>
             </>
           )}
         </div>