// ETS in ONLINE PLUS — six screen states (S1–S6).
// Single React component; the screen prop drives which body renders.
// ---------------- shared bits ----------------
const ThreeSteps = () =>
1
Foto oder Text hochladen
Bild, KBN, Hersteller — was du gerade hast.
2
KI findet das passende Teil
In Sekunden, mit Konfidenz-Bewertung.
3
Direkt bestellen
In den Warenkorb, fertig.
;
// Stylised SVG that *represents* a user-uploaded photo of a plumbing part.
// Each variant looks like a workbench snapshot, not vector art posing as a product photo.
const PhotoPlaceholder = ({ variant = "cartridge", label }) => {
const bg = {
cartridge: "#9aa2a8",
wcseat: "#c8c2b3",
reducer: "#7c8389",
valve: "#a4988a"
}[variant] || "#9aa2a8";
return (
);
};
// Strich-/Maßzeichnung representation for the toggle on result cards
const LineDrawing = ({ variant }) =>
;
// ---------- Faucet illustrations for the visual-match grid ----------
// Six different stylised single-lever / two-handle washbasin mixers + spouts.
// Real product photos are placeholders for the design — these stand in.
const FaucetImg = ({ variant, alt }) => {
// Each variant is a tiny chrome-ish illustration on a soft studio gradient.
return (
);
};
// ---------------- S1: Einstieg ----------------
// Two forms exposed via Tweaks:
// - Overlay: a floating sheet (default, lightweight integration)
// - Inline: a full O+ page with dual photo/text entry (more discoverable)
const EtsOverlay = ({ open, onClose, onPick, anchorRef }) => {
const [files, setFiles] = React.useState([]);
const [dragging, setDragging] = React.useState(false);
const [text, setText] = React.useState("");
const inputRef = React.useRef(null);
const overlayRef = React.useRef(null);
// Reset state when the overlay re-opens.
React.useEffect(() => {
if (open) {
setFiles([]);
setText("");
setDragging(false);
}
}, [open]);
// Click-outside to dismiss (popover behaviour, not modal).
React.useEffect(() => {
if (!open) return undefined;
const onDocClick = (e) => {
const ov = overlayRef.current;
const anchor = anchorRef && anchorRef.current;
if (!ov) return;
if (ov.contains(e.target)) return;
if (anchor && anchor.contains(e.target)) return;
onClose();
};
const onKey = (e) => {if (e.key === "Escape") onClose();};
// Defer so the click that *opened* it doesn't immediately close it.
const id = setTimeout(() => document.addEventListener("mousedown", onDocClick), 0);
document.addEventListener("keydown", onKey);
return () => {
clearTimeout(id);
document.removeEventListener("mousedown", onDocClick);
document.removeEventListener("keydown", onKey);
};
}, [open, onClose, anchorRef]);
const addFiles = (fileList) => {
const incoming = Array.from(fileList).filter((f) => f.type.startsWith("image/"));
if (incoming.length === 0) return;
const withUrls = incoming.map((f) => ({
id: `${f.name}-${f.size}-${f.lastModified}-${Math.random().toString(36).slice(2, 7)}`,
name: f.name,
url: URL.createObjectURL(f),
size: f.size
}));
setFiles((prev) => [...prev, ...withUrls]);
};
// Revoke object URLs on unmount to avoid leaking memory.
React.useEffect(() => () => files.forEach((f) => URL.revokeObjectURL(f.url)), []); // eslint-disable-line
const removeFile = (id) => {
setFiles((prev) => {
const next = prev.filter((f) => f.id !== id);
const removed = prev.find((f) => f.id === id);
if (removed) URL.revokeObjectURL(removed.url);
return next;
});
};
if (!open) return null;
const fmtKB = (b) => b < 1024 * 1024 ? `${Math.round(b / 1024)} KB` : `${(b / 1024 / 1024).toFixed(1)} MB`;
const canSearch = files.length > 0 || text.trim().length > 0;
return (
Foto rein, fertig.
Bilder vom defekten Teil hochladen — die KI sucht das passende Ersatzteil in 4,7 Mio. Artikeln.
{fmtKB(f.size)}
)}