/* global window, React */ // Feedback form + Waitlist screens const { useState, useEffect, useRef, useMemo } = React; const { Ticker, FloatingSticker } = window.KechHero; const { CardArt } = window.KechSwipe; // ---------- Mini sticker pile of liked designs -------------------- function LikedPile({ liked }) { return (
{liked.map((d, i) => { return (
{d.img ? {d.caption :
{String(d.no || i + 1).padStart(2, '0')}
}
); })}
); } // ---------- Form section card -------------------------------------- function FormCard({ children, color = 'aqua', tilt = 0 }) { const shadowColor = color === 'fuchsia' ? 'var(--kech-fuchsia)' : color === 'aqua' ? 'var(--kech-aqua)' : 'var(--kech-black)'; return (
{children}
); } // ---------- Tag chip ----------------------------------------------- function Chip({ children, active, onClick }) { return ( ); } const TAG_OPTIONS = [ 'grappig', 'herkenbaar', 'leuk als cadeau', 'uniek', 'lekker brutaal', 'ironisch', 'meme-waardig', 'lekker op het randje']; const NOPE_TAG_OPTIONS = [ 'niet grappig', 'te basic', 'lelijk', 'kinderachtig', 'cringe', 'ik snap het niet', 'overdreven', 'ongepast', 'dit is echt niet iets voor mij']; const AGE_OPTIONS = ['<18', '18-24', '25-34', '35-44', '45-54', '55+', 'zeg ik liever niet']; const GENDER_OPTIONS = ['vrouw', 'man', 'non-binair', 'zeg ik liever niet']; // ---------- Social icon button ------------------------------------ function SocialIcon({ href, label, children }) { return ( {e.currentTarget.style.transform = 'translate(-2px,-2px)';e.currentTarget.style.boxShadow = '5px 5px 0 var(--kech-black)';}} onMouseLeave={(e) => {e.currentTarget.style.transform = 'translate(0,0)';e.currentTarget.style.boxShadow = '3px 3px 0 var(--kech-black)';}}> {children} ); } // ---------- Slider with end-labels -------------------------------- function KechSlider({ value, onChange, min = 1, max = 10, step = 1, leftLabel, rightLabel, formatValue }) { const display = formatValue ? formatValue(value) : `${value} / ${max}`; return (
onChange(parseInt(e.target.value))} style={{ width: '100%' }} />
{leftLabel} {display} {rightLabel}
); } // =================================================================== // FEEDBACK FORM // =================================================================== function FeedbackForm({ liked, disliked = [], onSubmit }) { const [step, setStep] = useState(1); const [tags, setTags] = useState([]); const [openText, setOpenText] = useState(''); const [nopeTags, setNopeTags] = useState([]); const [nopeText, setNopeText] = useState(''); const [purchaseIntent, setPurchaseIntent] = useState(5); const [selfVsGift, setSelfVsGift] = useState(5); const [where, setWhere] = useState([]); const [price, setPrice] = useState(15); const [age, setAge] = useState(''); const [gender, setGender] = useState(''); const [otherText, setOtherText] = useState(''); const toggle = (set, get) => (v) => set(get.includes(v) ? get.filter((x) => x !== v) : [...get, v]); // Scroll to top on step change (mobile-friendly: long forms otherwise leave user // at bottom of previous step, missing the next step's header) useEffect(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [step]); const hasNope = disliked && disliked.length > 0; const persistStep = (s) => { if (!window.KechDB) return; if (s === 1) { window.KechDB.recordFeedback('1', { liked_tags: tags, liked_text: openText }); } else if (s === 1.5) { window.KechDB.recordFeedback('1.5', { nope_tags: nopeTags, nope_text: nopeText }); } else if (s === 2) { window.KechDB.recordFeedback('2', { sliders: { purchaseIntent, selfVsGift, where, price }, demographics: { age, gender }, liked_text: otherText }); } }; const next = () => { setStep((s) => { persistStep(s); if (s === 1) return hasNope ? 1.5 : 2; if (s === 1.5) return 2; return Math.min(s + 1, 3); }); }; const back = () => { setStep((s) => { if (s === 1.5) return 1; if (s === 2) return hasNope ? 1.5 : 1; return Math.max(s - 1, 1); }); }; const submit = () => { if (window.KechDB) { window.KechDB.recordFeedback('2', { sliders: { purchaseIntent, selfVsGift, where, price }, demographics: { age, gender }, liked_text: otherText }); } onSubmit({ tags, openText, nopeTags, nopeText, purchaseIntent, selfVsGift, where, price, age, gender, otherText }); }; return (
{/* Decorative dots bg */}
roast time ± 90 sec
{/* Header */}

baby tell me why?

je swipede {liked.length} ja's. nu de eerlijke mening.

{/* Stepper removed per feedback */}
{/* Step 1: liked pile + reasons (combined) */} {step === 1 &&
jouw shortlist

dit zijn de ballen die jij liked.

wat vond je er leuk aan

meerdere aanklikken mag

{TAG_OPTIONS.map((t) => toggle(setTags, tags)(t)}>{t} )}