// Ersatzteilanfrage — Self-Service flow (replaces the old chat pattern).
//
// view = "new" → empty-state composer. User names the request (optional),
// drops in a photo, adds an optional description, submits.
//
// view = "request" → a submitted request. Two states, driven by status:
// "in-bearbeitung" → analysis/idle status. A human
// Ersatzteil-Experte is reviewing the photo;
// answer usually within 2 h.
// "beantwortet" → result view: ONE best match with a
// match-probability badge + a list of fitting spare
// parts (each addable to the cart). A subtle
// fallback offers contacting an expert if it's wrong.
//
// The left rail lists all requests (empty state when none yet) + a "+" button.
const nowHHMM = () => {
const d = new Date();
return d.getHours().toString().padStart(2, "0") + ":" + d.getMinutes().toString().padStart(2, "0");
};
const newReqId = () => "ERSU-" + Math.floor(100000 + Math.random() * 900000);
// ─── Photo placeholder (used when user selects "Beispielbild") ─────────────
const FaucetPlaceholder = () =>
;
// ─── Article thumbnail (GROHE Kartusche) ───────────────────────────────────
const CartridgeThumb = () =>
;
// Generic part thumbnails so the list doesn't look monotonous.
const PartThumb = ({ kind }) => {
if (kind === "mousseur")
return (
);
if (kind === "seal")
return (
);
return ;
};
// ─── Rail item ─────────────────────────────────────────────────────────────
const STATUS_LABEL = { "in-bearbeitung": "In Bearbeitung", "beantwortet": "Beantwortet", "rueckfrage": "Rückfrage", "nicht-gelistet": "Nicht gelistet", "abgeschlossen": "Abgeschlossen", "experten-chat": "Im Experten-Chat" };
const ReqListItem = ({ item, active, onSelect }) =>
;
// ─── Request recap (photo + title + description) ───────────────────────────
const RequestSummary = ({ req, compact }) =>
{req.photoData ?
:
}
{req.author ? "Anfrage von " + req.author : "Deine Anfrage"}
{req.title}
{req.caption &&
{req.caption}
}
;
// ─── Quantity stepper (O+ style) ───────────────────────────────────────────
const QtyField = ({ min = 1 }) => {
const [qty, setQty] = React.useState(min);
const dec = () => setQty((q) => Math.max(min, q - 1));
const inc = () => setQty((q) => q + 1);
return (
{
const v = parseInt(e.target.value.replace(/\D/g, ""), 10);
setQty(Number.isNaN(v) ? min : Math.max(min, v));
}}
inputMode="numeric" />
);
};
// ─── O+ availability icon (recreates the md_INSTOCK.svg traffic-light disc) ──
const StockIcon = ({ state }) => {
const fill = state === "in" ? "#3a9b4e" : state === "low" ? "#e0a106" : "#c0292f";
const ring = state === "in" ? "#2c7d3d" : state === "low" ? "#b88203" : "#9a2127";
return (
);
};
// ─── O+ "Alternativartikel vorhanden" icon (Alternativ_lg_INSTOCK.svg) ─────
const AltStockIcon = () =>
;
// ─── Pending / waiting state (static — a human reviews it, up to ~2 h) ─────
const PendingAddendum = ({ onAddPhotos, onAddNote }) => {
const fileRef = React.useRef(null);
const [text, setText] = React.useState("");
const [dragOver, setDragOver] = React.useState(false);
const handleFiles = (fileList) => {
[...(fileList || [])].filter((f) => f.type.startsWith("image/")).forEach((file) => {
const reader = new FileReader();
reader.onload = (e) => onAddPhotos([e.target.result]);
reader.readAsDataURL(file);
});
};
const onDrop = (e) => {
e.preventDefault();
setDragOver(false);
handleFiles(e.dataTransfer.files);
};
const send = () => {
const v = text.trim();
if (!v) return;
onAddNote(v);
setText("");
};
return (
{e.preventDefault();setDragOver(true);}}
onDragLeave={(e) => {e.preventDefault();setDragOver(false);}}
onDrop={onDrop}>
Etwas vergessen?
Du kannst deiner Anfrage weitere Fotos oder Infos hinzufügen, solange sie in Bearbeitung ist. Fotos kannst du auch direkt hierher ziehen.