// ============================
// LELUSA — Customizer + Quote Pages
// customizer-quote.jsx
// ============================
// ─── Customizer Preview SVG ─────────────────────────────────────
function CustomizerPreview({ deco, selections }) {
const { t } = window.ReactI18next.useTranslation();
const mainColor = React.useMemo(() => {
const opt = (deco.options || []).find(o => o.type === 'color');
if (!opt) return '#D4A8B8';
const selId = selections[opt.id];
const choice = (opt.choices || []).find(c => c.id === selId) || opt.choices?.[0];
return choice?.color || '#D4A8B8';
}, [deco, selections]);
const uid = `prev-${deco.id}`;
const c2 = '#A8BAB8';
return (
{/* Color indicator */}
{t('customizer_preview')}
);
}
// ─── Customizer Page ─────────────────────────────────────────────
function CustomizerPage() {
const { t } = window.ReactI18next.useTranslation();
const { navigate, pageData } = React.useContext(window.AppContext);
const { designs, catalogCategories } = window.LelusaStore.usePublicBusinessData();
const categoryLabelBySlug = Object.fromEntries(window.LelusaStore.getCatalogCategories(catalogCategories, 'design').map(item => [item.slug, item.name]));
const sourceDesigns = designs || [];
const deco = sourceDesigns.find(d => String(d.id) === String(pageData.decoId)) || sourceDesigns[0];
const isMobileCust = window.LelusaGestures.useIsMobile();
const [optionsOpen, setOptionsOpen] = React.useState(false);
if (!deco) {
return (
{t('customizer_no_designs_title')}
{t('customizer_no_designs_desc')}
navigate('quote-form')}>{t('customizer_request_custom')}
);
}
// Build initial selections
const initSelections = React.useMemo(() => {
const sel = {};
(deco.options || []).forEach(opt => { if (opt.choices?.[0]) sel[opt.id] = opt.choices[0].id; });
return sel;
}, [deco.id]);
const [selections, setSelections] = React.useState(initSelections);
const [extras, setExtras] = React.useState([]);
const [animateTotal, setAnimateTotal] = React.useState(false);
const total = React.useMemo(() => {
let t = deco.price;
(deco.options || []).forEach(opt => {
const selId = selections[opt.id];
const choice = (opt.choices || []).find(c => c.id === selId);
if (choice) t += choice.price || 0;
});
extras.forEach(eid => {
const ex = (deco.extras || []).find(e => e.id === eid);
if (ex) t += ex.price;
});
return t;
}, [deco, selections, extras]);
// Animate total on change
const prevTotal = React.useRef(total);
React.useEffect(() => {
if (prevTotal.current !== total) {
setAnimateTotal(true);
const t = setTimeout(() => setAnimateTotal(false), 400);
prevTotal.current = total;
return () => clearTimeout(t);
}
}, [total]);
const handleSelect = (optId, choiceId) => setSelections(s => ({ ...s, [optId]: choiceId }));
const toggleExtra = (eid) => setExtras(prev => prev.includes(eid) ? prev.filter(e => e !== eid) : [...prev, eid]);
const handleQuote = () => {
navigate('quote-form', { decoId: deco.id, selections, extras, total });
};
const optionsPanel = (
{/* Options */}
{(deco.options || []).map(opt => (
{opt.name}
{opt.type === 'color' ? (
{(opt.choices || []).map(ch => {
const active = selections[opt.id] === ch.id;
return (
);
})}
) : (
{(opt.choices || []).map(ch => {
const active = selections[opt.id] === ch.id;
return (
);
})}
)}
))}
{/* Extras */}
{t('customizer_optional_extras')}
{(deco.extras || []).map(ex => {
const active = extras.includes(ex.id);
return (
);
})}
{/* Total + CTA */}
{t('customizer_total_estimated')}
${total.toLocaleString()}
{t('customizer_price_note')}
{t('customizer_request_quote')}
{/* Header */}
{categoryLabelBySlug[deco.category] || CATEGORY_LABELS[deco.category] || deco.category}
{t('customizer_personalize', { name: deco.name })}
{/* Main two-column layout */}
{/* LEFT: Preview */}
{(deco.includes || []).slice(0, 3).map(inc => (
{inc}
))}
{(deco.includes || []).length > 3 && (
{t('customizer_more_included', { count: deco.includes.length - 3 })}
)}
{/* RIGHT: Options panel */}
{isMobileCust ? (
<>
setOptionsOpen(false)} title={t('customizer_options')}>
{optionsPanel}
) : optionsPanel}
);
}
// ─── Quote Form Page ─────────────────────────────────────────────
function getQuoteSelectionLabels(deco, selections = {}, extras = []) {
const selectedOptionLabels = (deco.options || []).map(opt => {
const choice = (opt.choices || []).find(ch => String(ch.id) === String(selections[opt.id]));
if (!choice) return null;
const price = Number(choice.price || 0);
return `${opt.name}: ${choice.label}${price ? ` (+$${price.toLocaleString()})` : ''}`;
}).filter(Boolean);
const selectedExtraLabels = (deco.extras || []).filter(ex => extras.some(id => String(id) === String(ex.id))).map(ex => (
`${ex.name}${Number(ex.price || 0) ? ` (+$${Number(ex.price || 0).toLocaleString()})` : ''}`
));
return { selectedOptionLabels, selectedExtraLabels };
}
function readBookingDraft(draftId) {
if (!draftId) return {};
try {
const raw = sessionStorage.getItem(`lelusa.bookingDraft.${draftId}`);
return raw ? JSON.parse(raw) : {};
} catch (error) {
return {};
}
}
function QuoteField({ label, error, children }) {
return (
{children}
{error && {error}}
);
}
function DragDropImageZone({ images, onChange, max = 5 }) {
const { t } = window.ReactI18next.useTranslation();
const fileInputRef = React.useRef(null);
const [dragging, setDragging] = React.useState(false);
const [limitMsg, setLimitMsg] = React.useState('');
const processFiles = (files) => {
const remaining = max - images.length;
if (remaining <= 0) {
setLimitMsg(t('quote_image_max', { max }));
return;
}
const toRead = Array.from(files).slice(0, remaining);
if (Array.from(files).length > remaining) {
setLimitMsg(t('quote_image_partial', { count: remaining, max }));
} else {
setLimitMsg('');
}
toRead.forEach(file => {
if (!file.type.startsWith('image/')) return;
const reader = new FileReader();
reader.onload = () => {
onChange(prev => [...prev, reader.result]);
};
reader.readAsDataURL(file);
});
};
const onDrop = (e) => {
e.preventDefault();
setDragging(false);
processFiles(e.dataTransfer.files);
};
const onFileInput = (e) => {
processFiles(e.target.files);
e.target.value = '';
};
const removeImage = (index) => {
onChange(prev => prev.filter((_, i) => i !== index));
setLimitMsg('');
};
return (
fileInputRef.current?.click()}
onDragOver={e => { e.preventDefault(); setDragging(true); }}
onDragLeave={() => setDragging(false)}
onDrop={onDrop}
style={{
border: `2px dashed ${dragging ? 'var(--primary)' : 'var(--border)'}`,
borderRadius: '18px',
padding: '32px 24px',
textAlign: 'center',
cursor: 'pointer',
background: dragging ? 'var(--accent-light)' : 'var(--bg-soft)',
transition: 'all 0.2s',
userSelect: 'none',
}}
>
{t('quote_image_drag')}
{t('quote_image_tap', { count: images.length, max })}
{limitMsg && (
{limitMsg}
)}
{images.length > 0 && (
{images.map((src, i) => (
))}
)}
);
}
function DesignSummaryCard({ deco, total, extras, selectionLabels, isMobile }) {
const { t } = window.ReactI18next.useTranslation();
const [collapsed, setCollapsed] = React.useState(true);
if (!isMobile) return null;
return (
{!collapsed && (
{selectionLabels.selectedOptionLabels.map(label => (
{label}
))}
{selectionLabels.selectedExtraLabels.length > 0 && (
{selectionLabels.selectedExtraLabels.map(label => (
{label}
))}
)}
)}
);
}
function StepProgressBar({ step, steps }) {
return (
{steps.map((label, i) => {
const n = i + 1;
const done = n < step;
const active = n === step;
return (
{i < steps.length - 1 && (
)}
);
})}
set('name', e.target.value)} placeholder={t('quote_field_name_ph')} style={inputStyle(errors.name)} />
set('phone', e.target.value)} placeholder={t('quote_field_phone_ph')} style={inputStyle(errors.phone)} />
set('email', e.target.value)} placeholder={t('quote_field_email_ph')} style={inputStyle(errors.email)} />
);
const stepEvento = (
);
const stepPostres = (
{t('quote_desserts_choose_title')}
{t('quote_desserts_choose_desc')}
{errors.desserts &&
{errors.desserts}
}
{activeDesserts.length ? activeDesserts.map(dessert => {
const selected = (form.dessertItems || []).find(item => String(item.id) === String(dessert.id));
return (
);
}) : (
{t('quote_desserts_catalog_empty')}
)}