/* global React */
const { useState, useMemo, useCallback } = React;
/* ============================== TopBar ============================== */
function TopBar({ cartCount, onOpenCart, niche }) {
return (
{niche}
);
}
/* ============================== Hero ============================== */
function Hero({ data }) {
return (
FABRICANT DISTRIBUTEUR
selection Heliance : {data.name}
{data.totalRefs} pièces aquatiques en {data.materials} —
pinces, manchettes, bagues, boucles d'oreilles, colliers et broches.
Conçues et fabriquées en atelier pour les {data.audience}, livrées en direct sans intermédiaire.
{data.totalRefs} références
{data.priceRange}
Sans minimum d'achat
);
}
/* ============================== HowToOrder (3 étapes) ============================== */
function HowToOrder() {
return (
1
Ajoutez vos references
›
2
Choisissez la livraison
›
3
Envoyez par WhatsApp
);
}
/* ============================== SectionHeader ============================== */
function SectionHeader({ title, count, index }) {
const idx = String(index).padStart(2, "0");
return (
{title}
{count} ref.
§ {idx}
);
}
/* ============================== ColorSwatches ============================== */
function ColorSwatches({ colors, selectedIdx, onSelect }) {
if (!colors || colors.length === 0) return null;
if (colors.length === 1 && colors[0].label === "Unique") {
return 1 coloris ;
}
return (
{colors.map((c, i) => (
{ e.stopPropagation(); onSelect(i); }}
/>
))}
);
}
/* ============================== ProductCard ============================== */
function ProductCard({ item, cart, onAdd, onRemove }) {
const [selectedIdx, setSelectedIdx] = useState(0);
const color = item.colors[selectedIdx] || item.colors[0];
const key = item.ref + "::" + (color ? color.label : "Unique");
const qty = cart[key] || 0;
const priceFr = item.price.toFixed(2).replace(".", ",");
const themeChip = item.theme && item.theme !== "Marin" ? item.theme : null;
const displayImg = (color && color.img) || item.img;
return (
0 ? " is-added" : "")}>
{displayImg ?
:
}
{qty > 0 &&
{qty} }
{item.ref}
{themeChip && <> · {themeChip} }
{item.name}
{priceFr} € HT
{qty === 0 ? (
onAdd(item, color)}>+ Ajouter
) : (
onRemove(item, color)}>−
{qty}
onAdd(item, color)}>+
)}
);
}
/* ============================== OrderBar ============================== */
function OrderBar({ count, total, onOpenCart, onOrder }) {
const totalFr = total.toFixed(2).replace(".", ",");
return (
Panier · {count} {count === 1 ? "référence" : "références"}
{totalFr} € HT
Sans minimum d'achat · livraison offerte partout, même à l'étranger
Voir panier
);
}
/* ============================== CartDrawer ============================== */
function CartDrawer({ open, lines, total, delivery, deliveryIdx, onSelectDelivery, onClose, onAdd, onRemove, onOrder }) {
const fmt = (n) => n.toFixed(2).replace(".", ",");
const opts = (delivery && delivery.options) || [];
const deliv = opts[deliveryIdx] || opts[0] || { price: 0 };
const grand = total + (deliv.price || 0);
return (
<>
{lines.length === 0 ? (
Votre panier est vide.
) : (
{lines.map(line => {
const lineTotal = (line.qty * line.item.price).toFixed(2).replace(".", ",");
return (
{(line.color && line.color.img) ?
{line.item.ref}
{line.color && line.color.label !== "Unique" && (
<> ·
)}
{line.item.name}
onRemove(line.item, line.color)}>−
{line.qty}
onAdd(line.item, line.color)}>+
{lineTotal} €
);
})}
)}
);
}
/* ============================== ValidityFooter ============================== */
function ValidityFooter({ data, deliveryIdx, onSelectDelivery }) {
const fmt = (n) => n.toFixed(2).replace(".", ",");
const opts = (data.delivery && data.delivery.options) || [];
return (
Collection préparée le {data.preparedOn} , valable 30 jours
(expire le {data.expiresOn} ).
Livraison offerte, sans minimum
{opts.map((o, i) => (
{o.label}
{o.price > 0 ? `${fmt(o.price)} €` : "Offerte"}
))}
Le mode coché part dans votre message de commande WhatsApp.
Prix
Tous en HT (revente professionnelle)
Commande
Par WhatsApp ou email
Heliance · Fabricant distributeur
·
{data.niche}
);
}
/* ============================== Icons ============================== */
function WaIcon() {
return (
);
}
function CloseIcon() {
return (
);
}
/* ============================== WhatsAppFloating ============================== */
function WhatsAppFloating({ number, niche }) {
const greeting = `Bonjour, je consulte votre selection ${niche || "Heliance"}. J'aurais une question.`;
const url = `https://wa.me/${(number || "").replace(/\D/g, "")}?text=${encodeURIComponent(greeting)}`;
return (
Discuter
);
}
Object.assign(window, { TopBar, Hero, SectionHeader, ProductCard, ColorSwatches, OrderBar, CartDrawer, ValidityFooter, WhatsAppFloating, WaIcon, CloseIcon });
: }
{qty > 0 && {qty}}