-
Tabla de precios
+
Tabla de precios
Define los precios unitarios y la mano de obra. El motor calcula el presupuesto a
partir de estos valores y las medidas del lead.
@@ -73,7 +73,7 @@ export default async function PreciosPage() {
-
+
Guardar preferencia
@@ -112,7 +112,7 @@ export default async function PreciosPage() {
/>
))}
-
+
Guardar configuración
@@ -212,7 +212,7 @@ export default async function PreciosPage() {
-
+
Añadir
@@ -234,7 +234,7 @@ export default async function PreciosPage() {
placeholder="categoria,nombre,calidad,precio,unidad,descriptor_render,sku"
className="w-full border border-gray-300 rounded-lg px-3 py-2 font-mono text-xs"
/>
-
+
Importar
diff --git a/mvp/b2c/src/app/signup/page.tsx b/mvp/b2c/src/app/signup/page.tsx
index 7c5b86e..d475865 100644
--- a/mvp/b2c/src/app/signup/page.tsx
+++ b/mvp/b2c/src/app/signup/page.tsx
@@ -1,29 +1,73 @@
'use client';
+import Link from 'next/link';
import { useActionState } from 'react';
import { signup } from './actions';
+import AuthShell from '@/components/auth/AuthShell';
+
+const inputClass =
+ 'rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-primary-700 focus:outline-none focus:ring-1 focus:ring-primary-700';
export default function SignupPage() {
const [error, formAction, pending] = useActionState(signup, null);
return (
-
-
+
);
}
diff --git a/mvp/b2c/src/app/solicitud/[id]/estado/page.tsx b/mvp/b2c/src/app/solicitud/[id]/estado/page.tsx
index e592ed4..23da614 100644
--- a/mvp/b2c/src/app/solicitud/[id]/estado/page.tsx
+++ b/mvp/b2c/src/app/solicitud/[id]/estado/page.tsx
@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
import { getPublicLead } from '@/lib/funnel/public-queries';
import { PIPELINE_ORDER, PIPELINE_LABEL, TIPO_LABEL, formatEuros } from '@/lib/funnel';
import type { BudgetResult } from '@/budget/types';
+import TenantBrand from '@/components/funnel/TenantBrand';
export const dynamic = 'force-dynamic';
@@ -10,7 +11,7 @@ export default async function EstadoPage({ params }: { params: Promise<{ id: str
const data = await getPublicLead(id);
if (!data) notFound();
- const { lead, eventos } = data;
+ const { lead, tenant, eventos } = data;
const reachedStages = new Set(eventos.map((e) => e.stage));
const snapshot = lead.desgloseSnapshot as { result: BudgetResult } | null;
@@ -19,7 +20,9 @@ export default async function EstadoPage({ params }: { params: Promise<{ id: str
const tipo = lead.tipoReforma ? TIPO_LABEL[lead.tipoReforma] : 'tu reforma';
return (
-
+ <>
+ {tenant &&
}
+
{/* Cabecera de éxito */}
@@ -128,6 +131,7 @@ export default async function EstadoPage({ params }: { params: Promise<{ id: str
Presupuesto enviado a tu WhatsApp ✓
)}
-
+
+
);
}
diff --git a/mvp/b2c/src/app/solicitud/[id]/fotos/page.tsx b/mvp/b2c/src/app/solicitud/[id]/fotos/page.tsx
index 47b45d6..2f3675c 100644
--- a/mvp/b2c/src/app/solicitud/[id]/fotos/page.tsx
+++ b/mvp/b2c/src/app/solicitud/[id]/fotos/page.tsx
@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
import { getPublicLead } from '@/lib/funnel/public-queries';
import { guardarDetallesYFotos } from '../../actions';
import FotosUploader from '@/components/funnel/FotosUploader';
+import TenantBrand from '@/components/funnel/TenantBrand';
export const dynamic = 'force-dynamic';
@@ -10,10 +11,12 @@ export default async function FotosPage({ params }: { params: Promise<{ id: stri
const data = await getPublicLead(id);
if (!data) notFound();
- const { lead } = data;
+ const { lead, tenant } = data;
return (
-
+ <>
+ {tenant &&
}
+
Paso 2 de 2
@@ -31,5 +34,6 @@ export default async function FotosPage({ params }: { params: Promise<{ id: stri
+
);
}
diff --git a/mvp/b2c/src/app/solicitud/actions.ts b/mvp/b2c/src/app/solicitud/actions.ts
index 2333738..ddc8940 100644
--- a/mvp/b2c/src/app/solicitud/actions.ts
+++ b/mvp/b2c/src/app/solicitud/actions.ts
@@ -6,7 +6,7 @@ import { redirect } from 'next/navigation';
import { revalidatePath } from 'next/cache';
import { db } from '@/db';
import { leads, leadFotos, leadPipelineEventos } from '@/db/schema';
-import { getDemoTenantId } from '@/lib/funnel/public-queries';
+import { getTenantBySlug } from '@/lib/funnel/public-queries';
import { procesarLead } from '@/lib/funnel/orchestrator';
const MAX_FOTOS = 4;
@@ -28,7 +28,7 @@ export type CrearLeadResult =
| { ok: true; leadId: string }
| { ok: false; error: string };
-export async function crearLead(input: CrearLeadInput): Promise
{
+export async function crearLead(slug: string, input: CrearLeadInput): Promise {
const parsed = crearLeadSchema.safeParse(input);
if (!parsed.success) {
return { ok: false, error: parsed.error.issues[0]?.message ?? 'Datos inválidos.' };
@@ -40,12 +40,16 @@ export async function crearLead(input: CrearLeadInput): Promise
return { ok: false, error: 'Debes aceptar la política de privacidad y las condiciones.' };
}
- const tenantId = await getDemoTenantId();
+ // El lead se atribuye al reformista dueño del funnel (slug de la URL pública).
+ const tenant = await getTenantBySlug(slug);
+ if (!tenant) {
+ return { ok: false, error: 'No hemos podido identificar al reformista. Recarga la página.' };
+ }
const [lead] = await db
.insert(leads)
.values({
- tenantId,
+ tenantId: tenant.id,
nombre: data.nombre,
email: data.email,
telefono: data.telefono,
@@ -79,14 +83,9 @@ async function fileToDataUri(file: File): Promise {
// Guardamos las fotos como data URI (no hay storage externo en esta fase) y disparamos
// el orquestador que simula la llamada/render y calcula el presupuesto real.
export async function guardarDetallesYFotos(leadId: string, formData: FormData): Promise {
- const tenantId = await getDemoTenantId();
-
- const [lead] = await db
- .select()
- .from(leads)
- .where(and(eq(leads.id, leadId), eq(leads.tenantId, tenantId)))
- .limit(1);
+ const [lead] = await db.select().from(leads).where(eq(leads.id, leadId)).limit(1);
if (!lead) throw new Error('Solicitud no encontrada.');
+ const tenantId = lead.tenantId;
const tipoRaw = String(formData.get('tipoReforma') ?? '');
const calidadRaw = String(formData.get('calidad') ?? '');
diff --git a/mvp/b2c/src/app/solicitud/layout.tsx b/mvp/b2c/src/app/solicitud/layout.tsx
index f65198e..0f6b5db 100644
--- a/mvp/b2c/src/app/solicitud/layout.tsx
+++ b/mvp/b2c/src/app/solicitud/layout.tsx
@@ -1,24 +1,10 @@
-import Link from 'next/link';
-
export default function SolicitudLayout({ children }: { children: React.ReactNode }) {
return (
-
-
- {children}
-
+
{children}
= {
+
{links.map((l) => {
const isActive = active === l.href;
return (
@@ -130,11 +147,11 @@ export default function AppNav({ links }: { links: readonly AppNavLink[] }) {
aria-current={isActive ? 'page' : undefined}
className={
'relative flex flex-col items-center justify-center gap-1 pt-2.5 pb-2 text-[11px] font-medium transition-colors ' +
- (isActive ? 'text-black' : 'text-gray-400 hover:text-gray-600')
+ (isActive ? 'text-primary-700' : 'text-gray-400 hover:text-gray-600')
}
>
{isActive && (
-
+
)}
{l.label}
diff --git a/mvp/b2c/src/components/ContactForm/ContactForm.tsx b/mvp/b2c/src/components/ContactForm/ContactForm.tsx
index 1cbf168..326911a 100644
--- a/mvp/b2c/src/components/ContactForm/ContactForm.tsx
+++ b/mvp/b2c/src/components/ContactForm/ContactForm.tsx
@@ -40,7 +40,7 @@ function validateForm(data: FormData): FormErrors {
return errors;
}
-export default function ContactForm() {
+export default function ContactForm({ slug }: { slug: string }) {
const [formData, setFormData] = useState
(initialData);
const [consents, setConsents] = useState(initialConsents);
const [errors, setErrors] = useState({});
@@ -99,7 +99,7 @@ export default function ContactForm() {
setStatus('loading');
setSubmitError(null);
- const result = await crearLead({
+ const result = await crearLead(slug, {
nombre: formData.name,
email: formData.email,
telefono: formData.phone,
diff --git a/mvp/b2c/src/components/Hero/Hero.tsx b/mvp/b2c/src/components/Hero/Hero.tsx
index e199157..1590409 100644
--- a/mvp/b2c/src/components/Hero/Hero.tsx
+++ b/mvp/b2c/src/components/Hero/Hero.tsx
@@ -40,7 +40,7 @@ function validateForm(data: FormData): FormErrors {
return errors;
}
-function LeadForm() {
+function LeadForm({ slug }: { slug: string }) {
const router = useRouter();
const [formData, setFormData] = useState(initialData);
const [consents, setConsents] = useState(initialConsents);
@@ -79,7 +79,7 @@ function LeadForm() {
setStatus('loading');
setSubmitError(null);
- const result = await crearLead({
+ const result = await crearLead(slug, {
nombre: formData.name,
email: formData.email,
telefono: formData.phone,
@@ -109,7 +109,10 @@ function LeadForm() {
role="alert"
aria-live="polite"
>
-
+
(null);
useEffect(() => {
@@ -370,7 +373,7 @@ export default function Hero() {
{/* CTAs */}
document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
>
Calcular mi reforma gratis
@@ -393,7 +396,7 @@ export default function Hero() {
Pide tu presupuesto
En menos de 2 minutos te llamamos · Render por WhatsApp
-
-
+
{icon}
{title}
diff --git a/mvp/b2c/src/components/Navbar/Navbar.tsx b/mvp/b2c/src/components/Navbar/Navbar.tsx
deleted file mode 100644
index c3f051a..0000000
--- a/mvp/b2c/src/components/Navbar/Navbar.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-const navLinks = [
- { label: 'Características', href: '#features' },
- { label: 'Precios', href: '#pricing' },
- { label: 'Contacto', href: '#contact' },
-];
-
-export default function Navbar() {
- const [scrolled, setScrolled] = useState(false);
- const [menuOpen, setMenuOpen] = useState(false);
-
- useEffect(() => {
- const handleScroll = () => setScrolled(window.scrollY > 24);
- window.addEventListener('scroll', handleScroll, { passive: true });
- return () => window.removeEventListener('scroll', handleScroll);
- }, []);
-
- const handleNavClick = (href: string) => {
- setMenuOpen(false);
- const el = document.querySelector(href);
- if (el) el.scrollIntoView({ behavior: 'smooth' });
- };
-
- return (
-
- );
-}
diff --git a/mvp/b2c/src/components/auth/AuthShell.tsx b/mvp/b2c/src/components/auth/AuthShell.tsx
new file mode 100644
index 0000000..b033494
--- /dev/null
+++ b/mvp/b2c/src/components/auth/AuthShell.tsx
@@ -0,0 +1,46 @@
+import Link from 'next/link';
+
+export default function AuthShell({
+ photo,
+ photoAlt,
+ caption,
+ captionSub,
+ children,
+}: {
+ photo: string;
+ photoAlt: string;
+ caption: string;
+ captionSub: string;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {/* Panel del formulario */}
+
+
+
+ R
+
+
Reformix
+
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+ {caption}
+
+
{captionSub}
+
+
+ );
+}
diff --git a/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx b/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx
new file mode 100644
index 0000000..a54b375
--- /dev/null
+++ b/mvp/b2c/src/components/funnel/GaleriaTrabajos.tsx
@@ -0,0 +1,54 @@
+import type { PublicGaleriaFoto } from '@/lib/funnel/public-queries';
+
+type GaleriaTrabajosProps = {
+ fotos: PublicGaleriaFoto[];
+ nombreEmpresa: string;
+};
+
+// Galería de trabajos del reformista en su landing pública. Solo se muestra si
+// el reformista ha subido fotos desde su panel.
+export default function GaleriaTrabajos({ fotos, nombreEmpresa }: GaleriaTrabajosProps) {
+ if (fotos.length === 0) return null;
+
+ return (
+
+
+
+
+ Nuestros trabajos
+
+
+ Reformas que ya hemos hecho
+
+
+ Una muestra real del trabajo de {nombreEmpresa}. Calidad de acabados, plazos cumplidos.
+
+
+
+
+ {fotos.map((f) => (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ {f.titulo}
+
+ )}
+
+ ))}
+
+
+ );
+}
diff --git a/mvp/b2c/src/components/funnel/OpinionForm.tsx b/mvp/b2c/src/components/funnel/OpinionForm.tsx
new file mode 100644
index 0000000..7542a20
--- /dev/null
+++ b/mvp/b2c/src/components/funnel/OpinionForm.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+import type { EnviarOpinionResult } from '@/app/opinion/actions';
+
+const MAX_FOTOS = 4;
+
+const inputClass =
+ 'w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] border-gray-200 rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)]';
+
+function Estrella({ filled }: { filled: boolean }) {
+ return (
+
+
+ );
+}
+
+function SubmitButton() {
+ const { pending } = useFormStatus();
+ return (
+
+ {pending ? 'Enviando...' : 'Enviar mi opinión'}
+
+ );
+}
+
+export default function OpinionForm({
+ action,
+ nombreCliente,
+}: {
+ action: (prev: EnviarOpinionResult | null, formData: FormData) => Promise
;
+ nombreCliente: string;
+}) {
+ const [state, formAction] = useActionState(action, null);
+ const [rating, setRating] = useState(0);
+ const [hover, setHover] = useState(0);
+ const [previews, setPreviews] = useState([]);
+
+ const handleFiles = (e: React.ChangeEvent) => {
+ const files = Array.from(e.target.files ?? []).slice(0, MAX_FOTOS);
+ previews.forEach((url) => URL.revokeObjectURL(url));
+ setPreviews(files.map((f) => URL.createObjectURL(f)));
+ };
+
+ if (state?.ok) {
+ return (
+
+
+ 🙌
+
+
¡Gracias por tu opinión!
+
+ La hemos recibido correctamente. Aparecerá en la web del reformista una vez la revise.
+
+
+
+
+ {fotoUrl && (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+ )}
+
+
Quiénes somos
+
+ {nombreEmpresa}
+
+ {aniosExperiencia != null && aniosExperiencia > 0 && (
+
+ {aniosExperiencia}
+
+ año{aniosExperiencia === 1 ? '' : 's'} de experiencia
+
+
+ )}
+
{texto}
+
+
+
+ );
+}
diff --git a/mvp/b2c/src/components/funnel/TenantBrand.tsx b/mvp/b2c/src/components/funnel/TenantBrand.tsx
new file mode 100644
index 0000000..7b288f5
--- /dev/null
+++ b/mvp/b2c/src/components/funnel/TenantBrand.tsx
@@ -0,0 +1,73 @@
+import Link from 'next/link';
+
+type TenantBrandProps = {
+ nombreEmpresa: string;
+ logoUrl: string | null;
+ subtitle?: string;
+ showLogin?: boolean;
+};
+
+function iniciales(nombre: string): string {
+ return nombre
+ .split(/\s+/)
+ .slice(0, 2)
+ .map((p) => p[0]?.toUpperCase() ?? '')
+ .join('');
+}
+
+// Cabecera de marca del reformista para el funnel público y las páginas de
+// solicitud. El cliente final ve el branding del reformista, no el de Reformix.
+export default function TenantBrand({
+ nombreEmpresa,
+ logoUrl,
+ subtitle,
+ showLogin = false,
+}: TenantBrandProps) {
+ return (
+
+
+
+ {logoUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
+ {iniciales(nombreEmpresa)}
+
+ )}
+
+ {nombreEmpresa}
+
+
+ {showLogin ? (
+
+ Entrar
+
+
+
+ ) : (
+
+ {subtitle ?? 'Presupuesto de reforma'}
+
+ )}
+
+ );
+}
diff --git a/mvp/b2c/src/components/Testimonials/Testimonials.tsx b/mvp/b2c/src/components/funnel/TestimoniosCliente.tsx
similarity index 55%
rename from mvp/b2c/src/components/Testimonials/Testimonials.tsx
rename to mvp/b2c/src/components/funnel/TestimoniosCliente.tsx
index 3ef14ef..0d31c68 100644
--- a/mvp/b2c/src/components/Testimonials/Testimonials.tsx
+++ b/mvp/b2c/src/components/funnel/TestimoniosCliente.tsx
@@ -1,39 +1,34 @@
'use client';
import { useEffect, useRef } from 'react';
+import type { PublicTestimonio } from '@/lib/funnel/public-queries';
-type Testimonial = {
- quote: string;
- name: string;
- initials: string;
- context: string;
-};
+function iniciales(nombre: string): string {
+ return nombre
+ .split(/\s+/)
+ .slice(0, 2)
+ .map((p) => p[0]?.toUpperCase() ?? '')
+ .join('');
+}
-const testimonials: Testimonial[] = [
- {
- quote:
- 'Me llamaron en 90 segundos. El presupuesto orientativo cuadró con el final a 200 € de diferencia. Me ahorré tres visitas en blanco.',
- name: 'Laura Martínez',
- initials: 'LM',
- context: 'Cocina en Madrid',
- },
- {
- quote:
- 'Subí tres fotos del baño un domingo por la noche. El lunes a las nueve ya tenía un presupuesto desglosado en el WhatsApp.',
- name: 'Sergio Bonet',
- initials: 'SB',
- context: 'Baño en Valencia',
- },
- {
- quote:
- 'El render me sirvió para decidir el suelo sin ir a la tienda. Cuando llegó el reformista, ya teníamos media reforma clara.',
- name: 'Marta Vidal',
- initials: 'MV',
- context: 'Comedor en Barcelona',
- },
-];
+function Estrellas({ rating }: { rating: number }) {
+ return (
+
+ {[1, 2, 3, 4, 5].map((n) => (
+
+
+ ))}
+
(null);
useEffect(() => {
@@ -61,7 +56,6 @@ export default function Testimonials() {
aria-labelledby="testimonios-heading"
>
- {/* Header */}
Testimonios
quienes ya reformaron.
-
- Mismo método, distintos espacios. Sin filtros ni guion.
-
- {/* Cards */}
- {testimonials.map((t, i) => (
+ {testimonios.map((t, i) => (
- {/* Quote mark */}
-
-
+
- {t.quote}
+ {t.texto}
+ {t.fotos.length > 0 && (
+
+ {t.fotos.map((url, idx) => (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ))}
+
diff --git a/mvp/b2c/src/components/panel/AboutFotoUploader.tsx b/mvp/b2c/src/components/panel/AboutFotoUploader.tsx
new file mode 100644
index 0000000..8f51e5e
--- /dev/null
+++ b/mvp/b2c/src/components/panel/AboutFotoUploader.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import { useActionState } from 'react';
+import {
+ subirAboutFoto,
+ quitarAboutFoto,
+ type LogoResult,
+} from '@/app/panel/empresa/actions';
+import ImageCropperField from '@/components/panel/ImageCropperField';
+
+export default function AboutFotoUploader({ fotoUrl }: { fotoUrl: string | null }) {
+ const [state, formAction, pending] = useActionState
(
+ subirAboutFoto,
+ null
+ );
+
+ return (
+
+
+
+ {fotoUrl ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+
Sin foto
+ )}
+
+ {fotoUrl && (
+
+ )}
+
+
+
+
+ {state?.error &&
{state.error}
}
+ {state?.ok &&
Foto actualizada ✓
}
+
+ PNG, JPG o WEBP. Se recorta y optimiza a WebP (máx. 500 px).
+
+
(
+ subirFotoGaleria,
+ null
+ );
+ const formRef = useRef(null);
+
+ useEffect(() => {
+ if (state?.ok) formRef.current?.reset();
+ }, [state]);
+
+ const lleno = total >= max;
+
+ return (
+
+
+
Añadir foto
+
+ {total}/{max} fotos
+
+
+
+
+
+ {lleno && (
+
Has alcanzado el máximo de {max} fotos.
+ )}
+ {state?.error &&
{state.error}
}
+ {state?.ok &&
Foto añadida ✓
}
+
+ PNG, JPG o WEBP. Se recorta y optimiza a WebP (máx. 1200 px).
+
+
(null);
+ const outputRef = useRef(null);
+ const objectUrls = useRef>(new Set());
+
+ const [modalSrc, setModalSrc] = useState(null);
+ const [aspect, setAspect] = useState(1);
+ const [crop, setCrop] = useState({ x: 0, y: 0 });
+ const [zoom, setZoom] = useState(1);
+ const [area, setArea] = useState(null);
+ const [previewUrl, setPreviewUrl] = useState(null);
+ const [working, setWorking] = useState(false);
+ const [error, setError] = useState(null);
+
+ const track = useCallback((url: string) => {
+ objectUrls.current.add(url);
+ return url;
+ }, []);
+
+ const revoke = useCallback((url: string | null) => {
+ if (url && objectUrls.current.has(url)) {
+ URL.revokeObjectURL(url);
+ objectUrls.current.delete(url);
+ }
+ }, []);
+
+ useEffect(() => {
+ const urls = objectUrls.current;
+ return () => {
+ for (const url of urls) URL.revokeObjectURL(url);
+ urls.clear();
+ };
+ }, []);
+
+ function setOutputFile(file: File) {
+ const dt = new DataTransfer();
+ dt.items.add(file);
+ if (outputRef.current) outputRef.current.files = dt.files;
+ }
+
+ async function onPick(e: React.ChangeEvent) {
+ setError(null);
+ const file = e.target.files?.[0];
+ e.target.value = ''; // permite re-elegir el mismo archivo
+ if (!file) return;
+
+ if (allowSvgPassthrough && file.type === 'image/svg+xml') {
+ setOutputFile(file);
+ revoke(previewUrl);
+ setPreviewUrl(track(URL.createObjectURL(file)));
+ return;
+ }
+
+ const src = track(URL.createObjectURL(file));
+ try {
+ const dims = await loadDims(src);
+ setAspect(dims.width / dims.height || 1);
+ setCrop({ x: 0, y: 0 });
+ setZoom(1);
+ setArea(null);
+ setModalSrc(src);
+ } catch {
+ revoke(src);
+ setError('No se pudo abrir la imagen.');
+ }
+ }
+
+ function cerrarModal() {
+ revoke(modalSrc);
+ setModalSrc(null);
+ }
+
+ async function aplicar() {
+ if (!modalSrc || !area) return;
+ setWorking(true);
+ setError(null);
+ try {
+ const blob = await getCroppedWebp(modalSrc, area, maxDimension, quality);
+ setOutputFile(new File([blob], `${name}.webp`, { type: 'image/webp' }));
+ revoke(previewUrl);
+ setPreviewUrl(track(URL.createObjectURL(blob)));
+ cerrarModal();
+ } catch {
+ setError('No se pudo procesar la imagen. Prueba con otra.');
+ } finally {
+ setWorking(false);
+ }
+ }
+
+ return (
+
+
+
+
+
+ {previewUrl && (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+ )}
+
pickerRef.current?.click()}
+ disabled={disabled}
+ className="rounded-lg border border-gray-300 px-4 py-1.5 text-sm font-medium text-gray-700 transition hover:border-primary-700 hover:text-primary-700 disabled:opacity-50"
+ >
+ {previewUrl ? 'Cambiar imagen' : buttonLabel}
+
+
+
+ {error &&
{error}
}
+
+ {modalSrc && (
+
+
+
Ajusta el encuadre
+
+ setArea(areaPixels)}
+ />
+
+
+ Zoom
+
+
+
+ Cancelar
+
+
+ {working ? 'Procesando…' : 'Aplicar'}
+
+
+
+
+ )}
+
+ {opciones.map((o) => {
+ const activo = vista === o.value;
+ return (
+ onChange(o.value)}
+ aria-pressed={activo}
+ className={
+ 'inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-semibold transition-colors ' +
+ (activo ? 'bg-primary-700 text-white' : 'text-gray-500 hover:text-primary-700')
+ }
+ >
+
+ {o.icon}
+
+ {o.label}
+
+ );
+ })}
+
+ );
+}
+
+function Tarjeta({ l }: { l: PanelLead }) {
+ return (
+
+
+ {iniciales(l.nombre)}
+
+
+
+ {l.nombre}
+
+ {ESTADO_LABEL[l.estado]}
+
+
+
{subtitulo(l) || l.telefono}
+
{detalle(l)}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
{PIPELINE_LABEL[l.pipelineStage]}
+
{PIPELINE_NEXT[l.pipelineStage]}
+
+
+
{formatEuros(l.presupuestoEstimado)}
+ {l.presupuestoEstimado != null && (
+
orientativo
+ )}
+
+
+
+
+
+ {leads.length === 0 ? (
+
+ No hay leads con este estado.
+
+ ) : vista === 'cards' ? (
+
+ {leads.map((l) => (
+
+ ) : (
+
+
+
+
+ Render
+ Cliente
+ Fecha
+ Estado
+ Presupuesto
+ Siguiente paso
+
+
+
+ {leads.map((l) => (
+
+
+
+ sin render
+
+ )}
+
+
+
+ {subtitulo(l) || l.telefono}
+
+
+ {formatFecha(new Date(l.createdAtMs))}
+
+
+
+ {ESTADO_LABEL[l.estado]}
+
+
+
+ {formatEuros(l.presupuestoEstimado)}
+
+
+ {PIPELINE_LABEL[l.pipelineStage]}
+ {PIPELINE_NEXT[l.pipelineStage]}
+
+
+ ))}
+
+
+
+ )}
+
(subirLogo, null);
@@ -27,16 +28,20 @@ export default function LogoUploader({ logoUrl }: { logoUrl: string | null }) {
+
+ {copiado ? 'Copiado ✓' : 'Copiar'}
+
+
+ );
+}
diff --git a/mvp/b2c/src/components/panel/ThemePicker.tsx b/mvp/b2c/src/components/panel/ThemePicker.tsx
new file mode 100644
index 0000000..06a833d
--- /dev/null
+++ b/mvp/b2c/src/components/panel/ThemePicker.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+import { guardarTema, type LogoResult } from '@/app/panel/empresa/actions';
+import {
+ THEME_LIST,
+ isHexColor,
+ type ThemePresetId,
+} from '@/lib/funnel/themes';
+
+export default function ThemePicker({
+ themePreset,
+ themeColor,
+}: {
+ themePreset: string;
+ themeColor: string | null;
+}) {
+ const [state, formAction, pending] = useActionState(
+ guardarTema,
+ null
+ );
+
+ const [preset, setPreset] = useState(
+ (THEME_LIST.find((t) => t.id === themePreset)?.id ?? 'pizarra') as ThemePresetId
+ );
+ const [usarColor, setUsarColor] = useState(isHexColor(themeColor));
+ const [color, setColor] = useState(isHexColor(themeColor) ? themeColor : '#0066ff');
+
+ const presetActual = THEME_LIST.find((t) => t.id === preset) ?? THEME_LIST[0];
+ const colorEfectivo = usarColor && isHexColor(color) ? color : presetActual.primary;
+
+ return (
+
+ );
+}
diff --git a/mvp/b2c/src/db/schema.ts b/mvp/b2c/src/db/schema.ts
index ad641b0..f4300eb 100644
--- a/mvp/b2c/src/db/schema.ts
+++ b/mvp/b2c/src/db/schema.ts
@@ -71,6 +71,10 @@ export const subscriptionStatus = pgEnum('subscription_status', [
// 'automatico' = el funnel lo envía solo; 'revision' = se para para que el reformista lo revise/edite antes de enviar.
export const envioPresupuestoMode = pgEnum('envio_presupuesto_mode', ['automatico', 'revision']);
+// Estado de moderación de un testimonio. El reformista aprueba antes de publicar.
+// 'pendiente' = recién enviado por el cliente; 'publicado' = visible en la landing; 'oculto' = retirado.
+export const testimonioEstado = pgEnum('testimonio_estado', ['pendiente', 'publicado', 'oculto']);
+
// Reformista (cliente del SaaS). MVP = "Reformas Ejemplo" hardcoded.
// Multi-tenant real es F1.5; la tabla ya queda lista para ello.
export const tenants = pgTable('tenants', {
@@ -80,6 +84,18 @@ export const tenants = pgTable('tenants', {
logoUrl: text('logo_url'), // data URI base64 del logo (no hay storage externo aún)
provincia: text('provincia'),
whatsappBusiness: text('whatsapp_business'),
+ // SEO personalizable de la landing del reformista (RF-A / funnel público).
+ seoTitle: text('seo_title'),
+ seoDescription: text('seo_description'),
+ // Bloque "Quiénes somos" opcional en el funnel del reformista.
+ aboutEnabled: boolean('about_enabled').notNull().default(false),
+ aboutFotoUrl: text('about_foto_url'), // data URI base64 de la foto del reformista
+ aboutTexto: text('about_texto'),
+ aniosExperiencia: integer('anios_experiencia'),
+ // Tema visual de la landing del reformista (personalización del funnel público).
+ // themePreset = id de THEME_PRESETS; themeColor = override hex opcional del color primario.
+ themePreset: text('theme_preset').notNull().default('pizarra'),
+ themeColor: text('theme_color'),
// Datos de empresa para la cabecera del presupuesto (RF-D-07).
cif: text('cif'),
direccion: text('direccion'),
@@ -172,6 +188,9 @@ export const leads = pgTable(
notas: text('notas'),
+ // Cuándo el reformista pidió la opinión al cliente (RF: recogida de testimonios).
+ testimonioSolicitadoAt: timestamp('testimonio_solicitado_at', { withTimezone: true }),
+
// Inputs del motor de presupuesto (capturados de menos a más en el funnel)
m2Suelo: doublePrecision('m2_suelo'),
alturaTecho: doublePrecision('altura_techo'),
@@ -206,6 +225,56 @@ export const leadFotos = pgTable('lead_fotos', {
createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
});
+// Opiniones del cliente final, recogidas en el funnel de review (/opinion/[id]).
+// El reformista las solicita desde el panel y aprueba antes de que salgan en su landing.
+export const testimonios = pgTable(
+ 'testimonios',
+ {
+ id: uuid('id').primaryKey().defaultRandom(),
+ tenantId: uuid('tenant_id')
+ .notNull()
+ .references(() => tenants.id, { onDelete: 'cascade' }),
+ leadId: uuid('lead_id').references(() => leads.id, { onDelete: 'set null' }),
+ nombre: text('nombre').notNull(),
+ contexto: text('contexto'), // p.ej. "Reforma de cocina · Madrid"
+ rating: integer('rating').notNull(), // 1-5 estrellas
+ texto: text('texto').notNull(),
+ estado: testimonioEstado('estado').notNull().default('pendiente'),
+ createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+ },
+ (table) => [
+ index('testimonios_tenant_estado_idx').on(table.tenantId, table.estado),
+ index('testimonios_lead_idx').on(table.leadId),
+ ]
+);
+
+// Fotos adjuntas a un testimonio (el cliente sube fotos del resultado).
+export const testimonioFotos = pgTable('testimonio_fotos', {
+ id: uuid('id').primaryKey().defaultRandom(),
+ testimonioId: uuid('testimonio_id')
+ .notNull()
+ .references(() => testimonios.id, { onDelete: 'cascade' }),
+ url: text('url').notNull(),
+ orden: integer('orden').notNull().default(0),
+ createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+});
+
+// Galería de trabajos del reformista (fotos de reformas hechas), visible en su landing.
+export const galeriaFotos = pgTable(
+ 'galeria_fotos',
+ {
+ id: uuid('id').primaryKey().defaultRandom(),
+ tenantId: uuid('tenant_id')
+ .notNull()
+ .references(() => tenants.id, { onDelete: 'cascade' }),
+ url: text('url').notNull(), // data URI base64 (no hay storage externo aún)
+ titulo: text('titulo'),
+ orden: integer('orden').notNull().default(0),
+ createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+ },
+ (table) => [index('galeria_tenant_idx').on(table.tenantId)]
+);
+
// Histórico de cambios de estado comercial (RF-D-03: persistir y reflejar)
export const leadEstadoHistory = pgTable('lead_estado_history', {
id: uuid('id').primaryKey().defaultRandom(),
@@ -281,6 +350,10 @@ export type Tenant = typeof tenants.$inferSelect;
export type Lead = typeof leads.$inferSelect;
export type NewLead = typeof leads.$inferInsert;
export type LeadFoto = typeof leadFotos.$inferSelect;
+export type Testimonio = typeof testimonios.$inferSelect;
+export type NewTestimonio = typeof testimonios.$inferInsert;
+export type TestimonioFoto = typeof testimonioFotos.$inferSelect;
+export type GaleriaFoto = typeof galeriaFotos.$inferSelect;
export type LeadEstadoHistory = typeof leadEstadoHistory.$inferSelect;
export type LeadPipelineEvento = typeof leadPipelineEventos.$inferSelect;
export type PrecisionHistory = typeof precisionHistory.$inferSelect;
diff --git a/mvp/b2c/src/db/seed.ts b/mvp/b2c/src/db/seed.ts
index fb7cb5c..91a6085 100644
--- a/mvp/b2c/src/db/seed.ts
+++ b/mvp/b2c/src/db/seed.ts
@@ -284,7 +284,7 @@ async function main() {
console.log('Limpiando datos previos...');
await db.execute(
- sql`TRUNCATE TABLE ${schema.precisionHistory}, ${schema.leadPipelineEventos}, ${schema.leadEstadoHistory}, ${schema.leadFotos}, ${schema.leads}, ${schema.sessions}, ${schema.users}, ${schema.plans}, ${schema.tenants} RESTART IDENTITY CASCADE`
+ sql`TRUNCATE TABLE ${schema.testimonioFotos}, ${schema.testimonios}, ${schema.precisionHistory}, ${schema.leadPipelineEventos}, ${schema.leadEstadoHistory}, ${schema.leadFotos}, ${schema.leads}, ${schema.sessions}, ${schema.users}, ${schema.plans}, ${schema.tenants} RESTART IDENTITY CASCADE`
);
console.log('Sembrando planes...');
@@ -341,6 +341,13 @@ async function main() {
planId: pro.id,
subscriptionStatus: 'trial',
trialEndsAt: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000),
+ seoTitle: 'Reformas Ejemplo · Reformas integrales en Madrid',
+ seoDescription:
+ 'Pide tu presupuesto de reforma con render IA en minutos. Reformas de cocina, baño y vivienda completa en Madrid.',
+ aboutEnabled: true,
+ aboutTexto:
+ 'Somos un equipo de Madrid especializado en reformas integrales de cocinas, baños y viviendas completas. Cuidamos cada detalle y te acompañamos desde la primera idea hasta la entrega de llaves, con presupuestos claros y sin sorpresas.',
+ aniosExperiencia: 15,
})
.returning();
@@ -430,6 +437,66 @@ async function main() {
}
}
+ // --- Opiniones demo (recogidas en el funnel de review, ya moderadas) ---
+ console.log('Sembrando opiniones demo...');
+ const leadsPorEmail = await db
+ .select({ id: schema.leads.id, email: schema.leads.email })
+ .from(schema.leads)
+ .where(eq(schema.leads.tenantId, tenant.id));
+ const leadIdPorEmail = new Map(leadsPorEmail.map((l) => [l.email, l.id]));
+
+ // Diego (ganado) ya tiene la opinión solicitada desde el panel.
+ const diegoId = leadIdPorEmail.get('diego.romero@example.com');
+ if (diegoId) {
+ await db
+ .update(schema.leads)
+ .set({ testimonioSolicitadoAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000) })
+ .where(eq(schema.leads.id, diegoId));
+ }
+
+ const [testiDiego] = await db
+ .insert(schema.testimonios)
+ .values({
+ tenantId: tenant.id,
+ leadId: diegoId ?? null,
+ nombre: 'Diego Romero',
+ contexto: 'Reforma integral · Valencia',
+ rating: 5,
+ texto:
+ 'Reformaron un piso heredado de 85 metros de arriba a abajo. El presupuesto inicial cuadró casi al detalle con el final y los plazos se cumplieron. Repetiría sin dudarlo.',
+ estado: 'publicado',
+ })
+ .returning();
+ if (testiDiego) {
+ await db
+ .insert(schema.testimonioFotos)
+ .values({ testimonioId: testiDiego.id, url: '/despues.webp', orden: 0 });
+ }
+
+ await db.insert(schema.testimonios).values([
+ {
+ tenantId: tenant.id,
+ leadId: leadIdPorEmail.get('carmen.ibanez@example.com') ?? null,
+ nombre: 'Carmen Ibáñez',
+ contexto: 'Comedor · Madrid',
+ rating: 5,
+ texto:
+ 'Abrieron el comedor al salón y pusieron tarima nueva. El render que me enseñaron al principio era casi idéntico al resultado final. Trato impecable.',
+ estado: 'publicado',
+ },
+ {
+ // Pendiente de aprobar: aparece en el panel pero aún no en la landing.
+ tenantId: tenant.id,
+ leadId: leadIdPorEmail.get('tomas.herrero@example.com') ?? null,
+ nombre: 'Tomás Herrero',
+ contexto: 'Baño · Bilbao',
+ rating: 4,
+ texto:
+ 'Cambiaron todo el alicatado y los sanitarios del baño. Buen acabado y limpios. Solo se retrasaron un par de días por los materiales.',
+ estado: 'pendiente',
+ },
+ ]);
+
// --- Precios + catálogo demo (motor de presupuesto) ---
const [tenantRow] = await db
.select()
diff --git a/mvp/b2c/src/db/tenant-queries.ts b/mvp/b2c/src/db/tenant-queries.ts
index c1c9db4..f222fd1 100644
--- a/mvp/b2c/src/db/tenant-queries.ts
+++ b/mvp/b2c/src/db/tenant-queries.ts
@@ -1,10 +1,11 @@
-import { eq } from 'drizzle-orm';
+import { asc, desc, eq } from 'drizzle-orm';
import { db } from './index';
-import { tenants } from './schema';
+import { tenants, testimonios, testimonioFotos, galeriaFotos, type GaleriaFoto } from './schema';
import { getCurrentTenantId as getTenantId } from '@/lib/auth/current-user';
export type TenantPerfil = {
nombreEmpresa: string;
+ slug: string;
logoUrl: string | null;
provincia: string | null;
cif: string | null;
@@ -12,6 +13,14 @@ export type TenantPerfil = {
telefono: string | null;
email: string | null;
web: string | null;
+ seoTitle: string | null;
+ seoDescription: string | null;
+ aboutEnabled: boolean;
+ aboutFotoUrl: string | null;
+ aboutTexto: string | null;
+ aniosExperiencia: number | null;
+ themePreset: string;
+ themeColor: string | null;
};
export async function getTenantPerfil(): Promise {
@@ -19,6 +28,7 @@ export async function getTenantPerfil(): Promise {
const [row] = await db
.select({
nombreEmpresa: tenants.nombreEmpresa,
+ slug: tenants.slug,
logoUrl: tenants.logoUrl,
provincia: tenants.provincia,
cif: tenants.cif,
@@ -26,6 +36,14 @@ export async function getTenantPerfil(): Promise {
telefono: tenants.telefono,
email: tenants.email,
web: tenants.web,
+ seoTitle: tenants.seoTitle,
+ seoDescription: tenants.seoDescription,
+ aboutEnabled: tenants.aboutEnabled,
+ aboutFotoUrl: tenants.aboutFotoUrl,
+ aboutTexto: tenants.aboutTexto,
+ aniosExperiencia: tenants.aniosExperiencia,
+ themePreset: tenants.themePreset,
+ themeColor: tenants.themeColor,
})
.from(tenants)
.where(eq(tenants.id, tenantId))
@@ -34,6 +52,7 @@ export async function getTenantPerfil(): Promise {
return (
row ?? {
nombreEmpresa: 'Reformix',
+ slug: '',
logoUrl: null,
provincia: null,
cif: null,
@@ -41,6 +60,66 @@ export async function getTenantPerfil(): Promise {
telefono: null,
email: null,
web: null,
+ seoTitle: null,
+ seoDescription: null,
+ aboutEnabled: false,
+ aboutFotoUrl: null,
+ aboutTexto: null,
+ aniosExperiencia: null,
+ themePreset: 'pizarra',
+ themeColor: null,
}
);
}
+
+// Galería de trabajos del reformista, para gestionarla desde el panel.
+export async function getGaleriaPanel(): Promise {
+ const tenantId = await getTenantId();
+ return db
+ .select()
+ .from(galeriaFotos)
+ .where(eq(galeriaFotos.tenantId, tenantId))
+ .orderBy(asc(galeriaFotos.orden), asc(galeriaFotos.createdAt));
+}
+
+export type TestimonioPanel = {
+ id: string;
+ nombre: string;
+ contexto: string | null;
+ rating: number;
+ texto: string;
+ estado: (typeof testimonios.estado.enumValues)[number];
+ createdAt: Date;
+ fotos: string[];
+};
+
+export async function getTestimoniosPanel(): Promise {
+ const tenantId = await getTenantId();
+ const rows = await db
+ .select()
+ .from(testimonios)
+ .where(eq(testimonios.tenantId, tenantId))
+ .orderBy(desc(testimonios.createdAt));
+ if (rows.length === 0) return [];
+
+ const ids = rows.map((r) => r.id);
+ const fotos = await db.select().from(testimonioFotos);
+ const fotosPorTestimonio = new Map();
+ for (const f of fotos) {
+ if (!ids.includes(f.testimonioId)) continue;
+ const list = fotosPorTestimonio.get(f.testimonioId) ?? [];
+ list.push(f.url);
+ fotosPorTestimonio.set(f.testimonioId, list);
+ }
+
+ return rows.map((r) => ({
+ id: r.id,
+ nombre: r.nombre,
+ contexto: r.contexto,
+ rating: r.rating,
+ texto: r.texto,
+ estado: r.estado,
+ createdAt: r.createdAt,
+ fotos: fotosPorTestimonio.get(r.id) ?? [],
+ }));
+}
diff --git a/mvp/b2c/src/lib/funnel.ts b/mvp/b2c/src/lib/funnel.ts
index 6f1d14b..e06a1a2 100644
--- a/mvp/b2c/src/lib/funnel.ts
+++ b/mvp/b2c/src/lib/funnel.ts
@@ -1,10 +1,11 @@
-import type { leadEstado, pipelineStage, tipoReforma } from '@/db/schema';
+import type { calidad, leadEstado, pipelineStage, tipoReforma } from '@/db/schema';
export const TENANT_SLUG = 'reformas-ejemplo';
type Estado = (typeof leadEstado.enumValues)[number];
type Stage = (typeof pipelineStage.enumValues)[number];
type Tipo = (typeof tipoReforma.enumValues)[number];
+type Calidad = (typeof calidad.enumValues)[number];
export const ESTADOS: Estado[] = [
'nuevo',
@@ -74,6 +75,12 @@ export const TIPO_LABEL: Record = {
otro: 'Otro',
};
+export const CALIDAD_LABEL: Record = {
+ basica: 'Calidad básica',
+ media: 'Calidad media',
+ premium: 'Calidad premium',
+};
+
export function formatEuros(cents: number | null): string {
if (cents == null) return '—';
return new Intl.NumberFormat('es-ES', {
@@ -91,3 +98,16 @@ export function formatFecha(date: Date): string {
minute: '2-digit',
}).format(date);
}
+
+// Tiempo transcurrido en formato corto: "Hace 4 min", "Hace 2 h", "Hace 3 d".
+export function formatRelativo(date: Date): string {
+ const segundos = Math.max(0, Math.round((Date.now() - date.getTime()) / 1000));
+ if (segundos < 60) return 'Justo ahora';
+ const minutos = Math.round(segundos / 60);
+ if (minutos < 60) return `Hace ${minutos} min`;
+ const horas = Math.round(minutos / 60);
+ if (horas < 24) return `Hace ${horas} h`;
+ const dias = Math.round(horas / 24);
+ if (dias < 30) return `Hace ${dias} d`;
+ return formatFecha(date);
+}
diff --git a/mvp/b2c/src/lib/funnel/public-queries.ts b/mvp/b2c/src/lib/funnel/public-queries.ts
index 1081185..e0cd1ef 100644
--- a/mvp/b2c/src/lib/funnel/public-queries.ts
+++ b/mvp/b2c/src/lib/funnel/public-queries.ts
@@ -1,35 +1,114 @@
import { and, asc, eq } from 'drizzle-orm';
import { db } from '@/db';
-import { tenants, leads, leadFotos, leadPipelineEventos } from '@/db/schema';
-import { TENANT_SLUG } from '@/lib/funnel';
+import {
+ tenants,
+ leads,
+ leadFotos,
+ leadPipelineEventos,
+ testimonios,
+ testimonioFotos,
+ galeriaFotos,
+} from '@/db/schema';
-// Tenant demo del MVP ("Reformas Ejemplo"). El funnel público es anónimo:
-// todos los leads se atribuyen a este reformista hasta que multi-tenant B2C (F1.5) exista.
-export async function getDemoTenantId(): Promise {
- const [row] = await db
- .select({ id: tenants.id })
- .from(tenants)
- .where(eq(tenants.slug, TENANT_SLUG))
- .limit(1);
- if (!row) {
- throw new Error(`Tenant demo "${TENANT_SLUG}" no encontrado. Ejecuta el seed de la base de datos.`);
- }
- return row.id;
+export type PublicTenant = {
+ id: string;
+ slug: string;
+ nombreEmpresa: string;
+ logoUrl: string | null;
+ seoTitle: string | null;
+ seoDescription: string | null;
+ aboutEnabled: boolean;
+ aboutFotoUrl: string | null;
+ aboutTexto: string | null;
+ aniosExperiencia: number | null;
+ themePreset: string;
+ themeColor: string | null;
+};
+
+const TENANT_PUBLIC_COLUMNS = {
+ id: tenants.id,
+ slug: tenants.slug,
+ nombreEmpresa: tenants.nombreEmpresa,
+ logoUrl: tenants.logoUrl,
+ seoTitle: tenants.seoTitle,
+ seoDescription: tenants.seoDescription,
+ aboutEnabled: tenants.aboutEnabled,
+ aboutFotoUrl: tenants.aboutFotoUrl,
+ aboutTexto: tenants.aboutTexto,
+ aniosExperiencia: tenants.aniosExperiencia,
+ themePreset: tenants.themePreset,
+ themeColor: tenants.themeColor,
+} as const;
+
+export type PublicGaleriaFoto = {
+ id: string;
+ url: string;
+ titulo: string | null;
+};
+
+// Galería de trabajos publicada por el reformista, para mostrar en su landing.
+export async function getGaleria(tenantId: string): Promise {
+ const rows = await db
+ .select({ id: galeriaFotos.id, url: galeriaFotos.url, titulo: galeriaFotos.titulo })
+ .from(galeriaFotos)
+ .where(eq(galeriaFotos.tenantId, tenantId))
+ .orderBy(asc(galeriaFotos.orden), asc(galeriaFotos.createdAt));
+ return rows;
}
-// Lectura del lead para las páginas públicas del funnel. Scoped al tenant demo,
-// nunca expone leads de otros reformistas.
-export async function getPublicLead(id: string) {
- const tenantId = await getDemoTenantId();
- const [lead] = await db
- .select()
- .from(leads)
- .where(and(eq(leads.id, id), eq(leads.tenantId, tenantId)))
- .limit(1);
+export type PublicTestimonio = {
+ id: string;
+ nombre: string;
+ contexto: string | null;
+ rating: number;
+ texto: string;
+ fotos: string[];
+};
+// Testimonios publicados de un reformista, para mostrar en su landing.
+export async function getPublishedTestimonios(tenantId: string): Promise {
+ const rows = await db
+ .select()
+ .from(testimonios)
+ .where(and(eq(testimonios.tenantId, tenantId), eq(testimonios.estado, 'publicado')))
+ .orderBy(asc(testimonios.createdAt));
+ if (rows.length === 0) return [];
+
+ const fotos = await db
+ .select()
+ .from(testimonioFotos)
+ .orderBy(asc(testimonioFotos.orden));
+
+ return rows.map((t) => ({
+ id: t.id,
+ nombre: t.nombre,
+ contexto: t.contexto,
+ rating: t.rating,
+ texto: t.texto,
+ fotos: fotos.filter((f) => f.testimonioId === t.id).map((f) => f.url),
+ }));
+}
+
+// Resuelve el reformista dueño del funnel a partir de su slug público.
+// Devuelve null si el slug no corresponde a ningún reformista.
+export async function getTenantBySlug(slug: string): Promise {
+ const [row] = await db
+ .select(TENANT_PUBLIC_COLUMNS)
+ .from(tenants)
+ .where(eq(tenants.slug, slug))
+ .limit(1);
+ return row ?? null;
+}
+
+// Lectura del lead para las páginas públicas del funnel (/solicitud/[id]).
+// El lead se identifica por su UUID (no enumerable); devolvemos su reformista
+// para mostrar el branding correcto sin exponer datos de otros tenants.
+export async function getPublicLead(id: string) {
+ const [lead] = await db.select().from(leads).where(eq(leads.id, id)).limit(1);
if (!lead) return null;
- const [fotos, eventos] = await Promise.all([
+ const [[tenant], fotos, eventos] = await Promise.all([
+ db.select(TENANT_PUBLIC_COLUMNS).from(tenants).where(eq(tenants.id, lead.tenantId)).limit(1),
db.select().from(leadFotos).where(eq(leadFotos.leadId, id)).orderBy(asc(leadFotos.orden)),
db
.select()
@@ -38,5 +117,34 @@ export async function getPublicLead(id: string) {
.orderBy(asc(leadPipelineEventos.occurredAt)),
]);
- return { lead, fotos, eventos };
+ return { lead, tenant: tenant ?? null, fotos, eventos };
+}
+
+// Lectura del lead para el funnel de opinión (/opinion/[id]).
+// El lead se identifica por su UUID. Devolvemos el branding del reformista y si
+// ya hay un testimonio enviado para no permitir duplicados.
+export async function getLeadForReview(id: string) {
+ const [lead] = await db
+ .select({ id: leads.id, nombre: leads.nombre, tenantId: leads.tenantId })
+ .from(leads)
+ .where(eq(leads.id, id))
+ .limit(1);
+ if (!lead) return null;
+
+ const [[tenant], [yaEnviado]] = await Promise.all([
+ db.select(TENANT_PUBLIC_COLUMNS).from(tenants).where(eq(tenants.id, lead.tenantId)).limit(1),
+ db.select({ id: testimonios.id }).from(testimonios).where(eq(testimonios.leadId, id)).limit(1),
+ ]);
+
+ return { lead, tenant: tenant ?? null, yaEnviado: !!yaEnviado };
+}
+
+// Verifica que un lead pertenece al tenant indicado (scoping de mutaciones).
+export async function leadPerteneceATenant(leadId: string, tenantId: string): Promise {
+ const [row] = await db
+ .select({ id: leads.id })
+ .from(leads)
+ .where(and(eq(leads.id, leadId), eq(leads.tenantId, tenantId)))
+ .limit(1);
+ return !!row;
}
diff --git a/mvp/b2c/src/lib/funnel/themes.ts b/mvp/b2c/src/lib/funnel/themes.ts
new file mode 100644
index 0000000..778ea52
--- /dev/null
+++ b/mvp/b2c/src/lib/funnel/themes.ts
@@ -0,0 +1,124 @@
+import type { CSSProperties } from 'react';
+
+export type ThemePresetId = 'pizarra' | 'azul' | 'verde' | 'terracota' | 'arena';
+
+export type ThemePreset = {
+ id: ThemePresetId;
+ label: string;
+ descripcion: string;
+ primary: string; // color de marca
+ primaryDark: string; // hover / énfasis
+ contrast: string; // texto sobre el color de marca
+ heading: 'sans' | 'serif'; // tipografía de los titulares de la landing
+};
+
+export const DEFAULT_THEME: ThemePresetId = 'pizarra';
+
+export const THEME_PRESETS: Record = {
+ pizarra: {
+ id: 'pizarra',
+ label: 'Pizarra',
+ descripcion: 'Negro elegante. El look por defecto de Reformix.',
+ primary: '#0a0a0a',
+ primaryDark: '#1a1a1a',
+ contrast: '#ffffff',
+ heading: 'sans',
+ },
+ azul: {
+ id: 'azul',
+ label: 'Azul confianza',
+ descripcion: 'Azul corporativo que transmite seguridad.',
+ primary: '#0066ff',
+ primaryDark: '#0052cc',
+ contrast: '#ffffff',
+ heading: 'sans',
+ },
+ verde: {
+ id: 'verde',
+ label: 'Verde natural',
+ descripcion: 'Verde sereno para un estilo sostenible.',
+ primary: '#0f7a52',
+ primaryDark: '#0b5e3f',
+ contrast: '#ffffff',
+ heading: 'sans',
+ },
+ terracota: {
+ id: 'terracota',
+ label: 'Terracota',
+ descripcion: 'Cálido y artesanal, con titulares en serif.',
+ primary: '#b4502e',
+ primaryDark: '#8f3d22',
+ contrast: '#ffffff',
+ heading: 'serif',
+ },
+ arena: {
+ id: 'arena',
+ label: 'Arena',
+ descripcion: 'Neutro cálido, sobrio y premium. Titulares en serif.',
+ primary: '#8a6d3b',
+ primaryDark: '#6e562f',
+ contrast: '#ffffff',
+ heading: 'serif',
+ },
+};
+
+export const THEME_LIST: ThemePreset[] = Object.values(THEME_PRESETS);
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/;
+
+export function isHexColor(value: string | null | undefined): value is string {
+ return !!value && HEX_RE.test(value);
+}
+
+function darken(hex: string, amount = 0.16): string {
+ const n = parseInt(hex.slice(1), 16);
+ const r = Math.max(0, Math.round(((n >> 16) & 255) * (1 - amount)));
+ const g = Math.max(0, Math.round(((n >> 8) & 255) * (1 - amount)));
+ const b = Math.max(0, Math.round((n & 255) * (1 - amount)));
+ return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
+}
+
+export type ResolvedTheme = {
+ preset: ThemePreset;
+ primary: string;
+ primaryDark: string;
+ contrast: string;
+ heading: 'sans' | 'serif';
+};
+
+// Combina el preset elegido con el color personalizado opcional del reformista.
+export function resolveTheme(
+ presetId: string | null | undefined,
+ customColor: string | null | undefined
+): ResolvedTheme {
+ const preset = THEME_PRESETS[presetId as ThemePresetId] ?? THEME_PRESETS[DEFAULT_THEME];
+ if (isHexColor(customColor)) {
+ return {
+ preset,
+ primary: customColor,
+ primaryDark: darken(customColor),
+ contrast: '#ffffff',
+ heading: preset.heading,
+ };
+ }
+ return {
+ preset,
+ primary: preset.primary,
+ primaryDark: preset.primaryDark,
+ contrast: preset.contrast,
+ heading: preset.heading,
+ };
+}
+
+// Variables CSS que cuelgan del contenedor de la landing y consumen los componentes.
+export function themeStyle(
+ presetId: string | null | undefined,
+ customColor: string | null | undefined
+): CSSProperties {
+ const t = resolveTheme(presetId, customColor);
+ return {
+ '--brand': t.primary,
+ '--brand-dark': t.primaryDark,
+ '--brand-contrast': t.contrast,
+ } as CSSProperties;
+}
diff --git a/mvp/b2c/src/lib/galeria.ts b/mvp/b2c/src/lib/galeria.ts
new file mode 100644
index 0000000..111e65d
--- /dev/null
+++ b/mvp/b2c/src/lib/galeria.ts
@@ -0,0 +1,3 @@
+// Tope de fotos en la galería del reformista. Vive fuera del módulo 'use server'
+// porque esos solo pueden exportar funciones async.
+export const GALERIA_MAX_FOTOS = 24;
diff --git a/mvp/b2c/src/lib/image/crop.ts b/mvp/b2c/src/lib/image/crop.ts
new file mode 100644
index 0000000..d89608e
--- /dev/null
+++ b/mvp/b2c/src/lib/image/crop.ts
@@ -0,0 +1,38 @@
+export type CropArea = { x: number; y: number; width: number; height: number };
+
+// Recorta la región indicada (en píxeles del original) y reescala el lado más
+// largo a `maxDimension`, devolviendo un WebP ya optimizado listo para subir.
+export async function getCroppedWebp(
+ src: string,
+ area: CropArea,
+ maxDimension: number,
+ quality = 0.82,
+): Promise {
+ const img = await loadImage(src);
+ const scale = Math.min(1, maxDimension / Math.max(area.width, area.height));
+ const outW = Math.max(1, Math.round(area.width * scale));
+ const outH = Math.max(1, Math.round(area.height * scale));
+
+ const canvas = document.createElement('canvas');
+ canvas.width = outW;
+ canvas.height = outH;
+ const ctx = canvas.getContext('2d');
+ if (!ctx) throw new Error('No se pudo crear el lienzo.');
+ ctx.imageSmoothingQuality = 'high';
+ ctx.drawImage(img, area.x, area.y, area.width, area.height, 0, 0, outW, outH);
+
+ const blob = await new Promise((resolve) =>
+ canvas.toBlob(resolve, 'image/webp', quality),
+ );
+ if (!blob) throw new Error('No se pudo procesar la imagen.');
+ return blob;
+}
+
+function loadImage(src: string): Promise {
+ return new Promise((resolve, reject) => {
+ const img = new Image();
+ img.onload = () => resolve(img);
+ img.onerror = () => reject(new Error('No se pudo cargar la imagen.'));
+ img.src = src;
+ });
+}
diff --git a/mvp/b2c/src/lib/validation/signup.ts b/mvp/b2c/src/lib/validation/signup.ts
index c60488b..10d6402 100644
--- a/mvp/b2c/src/lib/validation/signup.ts
+++ b/mvp/b2c/src/lib/validation/signup.ts
@@ -19,3 +19,46 @@ export function slugify(value: string): string {
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '');
}
+
+// Rutas de la app que NO pueden ser slug de un reformista: colisionarían con
+// páginas reales o con ficheros públicos servidos en la raíz del dominio.
+export const RESERVED_SLUGS = new Set([
+ 'panel',
+ 'login',
+ 'logout',
+ 'signup',
+ 'admin',
+ 'solicitud',
+ 'opinion',
+ 'api',
+ 'b2b',
+ 'b2b-assets',
+ 'assets',
+ '_next',
+ 'favicon.ico',
+ 'icon.svg',
+ 'robots.txt',
+ 'sitemap.xml',
+]);
+
+export function isReservedSlug(slug: string): boolean {
+ return RESERVED_SLUGS.has(slug);
+}
+
+export type SlugValidation = { ok: true; slug: string } | { ok: false; error: string };
+
+// Normaliza y valida un slug propuesto para el funnel público de un reformista.
+// No comprueba unicidad (eso requiere BD); solo formato y palabras reservadas.
+export function validarSlug(raw: string): SlugValidation {
+ const slug = slugify(raw);
+ if (slug.length < 2) {
+ return { ok: false, error: 'El enlace debe tener al menos 2 caracteres.' };
+ }
+ if (slug.length > 40) {
+ return { ok: false, error: 'El enlace no puede superar los 40 caracteres.' };
+ }
+ if (isReservedSlug(slug)) {
+ return { ok: false, error: 'Ese enlace está reservado. Elige otro.' };
+ }
+ return { ok: true, slug };
+}