Añade canales de llamada y WhatsApp al funnel B2C

- Llamada (/llamada): "Llamar ahora" dispara la llamada saliente de Retell; "Programar" registra fecha/hora. Tras pedir, ofrece enviar por email el enlace al formulario para subir las imágenes. - WhatsApp (/whatsapp): arranca la conversación vía webhook al flujo externo (con el teléfono del lead) y pide confirmación; al confirmar, agradece y sigue por WhatsApp. - actions: pedirLlamada, enviarEnlaceFormularioEmail, iniciarWhatsapp, confirmarWhatsapp. Verificado en navegador: las 3 pantallas y sus transiciones. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-03 19:20:14 +02:00
parent 9b5b0d59a6
commit 0a5f8cba2b
5 changed files with 350 additions and 0 deletions
--- a/mvp/b2c/src/components/funnel/CanalLlamada.tsx
+++ b/mvp/b2c/src/components/funnel/CanalLlamada.tsx
@@ -0,0 +1,124 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { pedirLlamada, enviarEnlaceFormularioEmail } from '@/app/solicitud/actions';
+
+export default function CanalLlamada({
+  leadId,
+  telefono,
+  email,
+}: {
+  leadId: string;
+  telefono: string;
+  email: string;
+}) {
+  const [pending, startTransition] = useTransition();
+  const [confirmacion, setConfirmacion] = useState<string | null>(null);
+  const [mostrarProgramar, setMostrarProgramar] = useState(false);
+  const [cuando, setCuando] = useState('');
+  const [enlaceEnviado, setEnlaceEnviado] = useState(false);
+
+  const llamarAhora = () =>
+    startTransition(async () => {
+      await pedirLlamada(leadId, 'ahora');
+      setConfirmacion(`Te llamamos en menos de 2 minutos al ${telefono}. Tenlo a mano.`);
+    });
+
+  const programar = () =>
+    startTransition(async () => {
+      if (!cuando) return;
+      const r = await pedirLlamada(leadId, cuando);
+      const fecha = r.programada
+        ? new Date(r.programada).toLocaleString('es-ES', {
+            day: '2-digit',
+            month: 'long',
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        : '';
+      setConfirmacion(`Hecho. Te llamaremos el ${fecha} al ${telefono}.`);
+    });
+
+  const enviarEnlace = () =>
+    startTransition(async () => {
+      await enviarEnlaceFormularioEmail(leadId);
+      setEnlaceEnviado(true);
+    });
+
+  if (confirmacion) {
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="text-sm font-medium text-green-700 bg-green-50 rounded-lg px-4 py-3">
+          ✅ {confirmacion}
+        </div>
+        <div className="border-t border-gray-100 pt-4 flex flex-col gap-3">
+          <p className="text-sm text-gray-500 leading-relaxed">
+            Para el render necesitamos ver el espacio. Puedes mandarnos las fotos por WhatsApp
+            durante la llamada, o te enviamos un enlace al formulario por email para que las subas
+            cuando quieras.
+          </p>
+          {enlaceEnviado ? (
+            <div className="text-sm text-gray-600">📧 Te hemos enviado el enlace a {email}.</div>
+          ) : (
+            <button
+              type="button"
+              onClick={enviarEnlace}
+              disabled={pending}
+              className="btn btn-secondary self-start disabled:opacity-60"
+            >
+              Enviarme el enlace por email
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="border border-gray-200 rounded-xl p-5 flex flex-col gap-2">
+        <span className="text-base font-bold text-black">Llamarme ahora</span>
+        <span className="text-sm text-gray-500">Recibes la llamada en menos de 2 minutos.</span>
+        <button
+          type="button"
+          onClick={llamarAhora}
+          disabled={pending}
+          className="btn btn-primary self-start mt-2 disabled:opacity-60"
+        >
+          {pending ? 'Pidiendo…' : 'Llamarme ahora'}
+        </button>
+      </div>
+
+      <div className="border border-gray-200 rounded-xl p-5 flex flex-col gap-2">
+        <span className="text-base font-bold text-black">Programar la llamada</span>
+        <span className="text-sm text-gray-500">Elige el día y la hora que mejor te venga.</span>
+        {mostrarProgramar ? (
+          <div className="flex flex-col gap-3 mt-2">
+            <input
+              type="datetime-local"
+              value={cuando}
+              onChange={(e) => setCuando(e.target.value)}
+              className="w-full px-4 py-3 text-base text-dark bg-white border-[1.5px] border-gray-200 rounded-lg outline-none focus:border-black"
+            />
+            <button
+              type="button"
+              onClick={programar}
+              disabled={pending || !cuando}
+              className="btn btn-primary self-start disabled:opacity-60"
+            >
+              {pending ? 'Programando…' : 'Confirmar la cita'}
+            </button>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setMostrarProgramar(true)}
+            className="btn btn-secondary self-start mt-2"
+          >
+            Programar llamada
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
--- a/mvp/b2c/src/components/funnel/CanalWhatsapp.tsx
+++ b/mvp/b2c/src/components/funnel/CanalWhatsapp.tsx
@@ -0,0 +1,76 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { iniciarWhatsapp, confirmarWhatsapp } from '@/app/solicitud/actions';
+
+type Fase = 'idle' | 'escrito' | 'confirmado';
+
+export default function CanalWhatsapp({
+  leadId,
+  nombre,
+  telefono,
+}: {
+  leadId: string;
+  nombre: string;
+  telefono: string;
+}) {
+  const [pending, startTransition] = useTransition();
+  const [fase, setFase] = useState<Fase>('idle');
+
+  const escribir = () =>
+    startTransition(async () => {
+      await iniciarWhatsapp(leadId);
+      setFase('escrito');
+    });
+
+  const confirmar = () =>
+    startTransition(async () => {
+      await confirmarWhatsapp(leadId);
+      setFase('confirmado');
+    });
+
+  if (fase === 'confirmado') {
+    return (
+      <div className="text-sm font-medium text-green-700 bg-green-50 rounded-lg px-4 py-3">
+        ✅ ¡Genial, {nombre.split(' ')[0]}! Seguimos por WhatsApp. Allí te pediremos las fotos y los
+        detalles para preparar tu presupuesto.
+      </div>
+    );
+  }
+
+  if (fase === 'escrito') {
+    return (
+      <div className="flex flex-col gap-4">
+        <p className="text-sm text-gray-600 leading-relaxed">
+          Te acabamos de escribir al <strong className="text-black">{telefono}</strong>. ¿Puedes
+          confirmarlo?
+        </p>
+        <button
+          type="button"
+          onClick={confirmar}
+          disabled={pending}
+          className="btn btn-primary self-start disabled:opacity-60"
+        >
+          {pending ? 'Confirmando…' : 'Lo he recibido'}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <p className="text-sm text-gray-600 leading-relaxed">
+        Te escribimos al WhatsApp del <strong className="text-black">{telefono}</strong> para seguir
+        por ahí. Si el número es correcto, confírmalo y te escribimos ahora mismo.
+      </p>
+      <button
+        type="button"
+        onClick={escribir}
+        disabled={pending}
+        className="btn btn-primary self-start disabled:opacity-60"
+      >
+        {pending ? 'Escribiendo…' : 'Sí, escríbeme por WhatsApp'}
+      </button>
+    </div>
+  );
+}