"use client" import { useState } from "react" import { useRouter } from "next/navigation" import { useCheckout, CUSTOM_ADDRESS } from "@app/webshop" // Client-pagina: de "use client"-directive laat deze content hooks gebruiken, // dus useCheckout() staat hier direct. De hook houdt alle state vast (contact, // adressen, adresboek, submit), de pagina bepaalt hoe het eruitziet. export default function () { const c = useCheckout() const router = useRouter() // De adres-dialog. `draft` is een eigen kopie: pas op "Gebruiken" gaat het // naar de hook, zodat annuleren echt niets wijzigt en de klant niet in een // half overschreven adres achterblijft. const [dialogFor, setDialogFor] = useState(null) const [draft, setDraft] = useState({}) // De ingetypte kortingscode. Eigen state, want de code hoort pas bij het // mandje zodra de server hem heeft goedgekeurd. const [voucher, setVoucher] = useState("") // Een geweigerde code komt terug als {ok: false, error} uit applyVoucher en // NIET in basket.voucher_error — dat veld is voor een al toegepaste code die // niet meer geldig is (bv. subtotaal onder het minimum). Vandaar eigen state. const [voucherError, setVoucherError] = useState("") // Mobiel staat de samenvatting dicht: hij staat daar boven het formulier, en // het totaal blijft altijd staan. Op lg doet dit niets — daar is de kolom // sticky en altijd open. const [summaryOpen, setSummaryOpen] = useState(false) const itemCount = (c.basket.items || []).reduce( (total, item) => total + Number(item.quantity || 1), 0, ) async function submitVoucher() { const code = voucher.trim() if (!code) return const result = await c.basket.applyVoucher(code) setVoucherError(result && result.ok ? "" : (result && result.error) || "") // Het veld niet leegmaken: bij een geweigerde code moet de klant z'n // typefout kunnen zien staan. Lukt het wél, dan toont deze sectie de // toegepaste code in plaats van het invoerveld. } async function removeVoucher() { setVoucherError("") setVoucher("") await c.basket.applyVoucher("") } function openAddressDialog(choice, setField, autoPrefix, address) { setDraft(choice === CUSTOM_ADDRESS ? { ...address } : {}) setDialogFor({ setField, autoPrefix }) } function setDraftField(key, value) { setDraft((previous) => ({ ...previous, [key]: value })) } function saveDialog() { if (!dialogFor) return // Elk veld apart doorgeven: setBillingField/setShippingField zetten de keuze // meteen op CUSTOM_ADDRESS, dus de lijst-selectie volgt automatisch. for (const key of ["name", "company", "street", "extra", "postal_code", "city", "phone"]) { dialogFor.setField(key, draft[key] || "") } setDialogFor(null) } const dialogIncomplete = !["street", "postal_code", "city"].every((k) => String(draft[k] || "").trim(), ) // formatteert via Intl in de site-taal; Money scheelt alleen // het herhalen van style/currency op elk bedrag. `pending` toont een streepje // zolang het mandje nog binnenkomt, zodat er geen € 0,00 opflitst. const Money = ({ value, pending }) => pending && c.basket.loading ? ( <>— ) : ( ) async function place() { const result = await c.submit() if (!result.ok) { if (result.error) toast.error(result.error) return } // Is er een betaalprovider, dan moet de klant daar eerst betalen. Dat is een // ander domein, dus buiten het bereik van de router: alleen een echte // browser-navigatie komt daar. De bedankpagina is wél van deze site, dus die // gaat via de router — client-side, zonder de pagina te herladen. if (result.redirectUrl) { window.location.href = result.redirectUrl return } router.push("/bedankt/?nummer=" + encodeURIComponent(result.orderNumber)) } // Eén bedragregel in de samenvatting: label links, bedrag rechts. const row = (text, value, strong) => ( {text} {value} ) const field = (text, value, onChange, extra = {}) => ( {text} onChange(e.target.value)} {...extra} /> ) // De adresvelden zelf. Apart, omdat ze op twee plekken staan: binnen de // gekaderde rij bij "een ander adres", en op zichzelf als de klant geen // adresboek heeft. const addressFields = (address, setField, autoPrefix) => ( {field("Naam", address.name, (v) => setField("name", v), { autoComplete: autoPrefix + "name" })} {field("Bedrijfsnaam", address.company, (v) => setField("company", v), { autoComplete: autoPrefix + "organization" })} {field("Straat en huisnummer", address.street, (v) => setField("street", v), { autoComplete: autoPrefix + "address-line1" })} {field("Toevoeging", address.extra, (v) => setField("extra", v), { autoComplete: autoPrefix + "address-line2" })} {field("Postcode", address.postal_code, (v) => setField("postal_code", v), { autoComplete: autoPrefix + "postal-code" })} {field("Plaats", address.city, (v) => setField("city", v), { autoComplete: autoPrefix + "address-level2" })} {field("Telefoonnummer", address.phone, (v) => setField("phone", v), { type: "tel", autoComplete: autoPrefix + "tel" })} ) // Twee regels per adres: wie + waar vet, de rest gedempt. Eén blok tekst zou // in een lijst van vier adressen niet te scannen zijn. const addressLines = (a) => { const top = [a.name, [a.street, a.extra].filter(Boolean).join(" ")] .filter(Boolean) .join(", ") const bottom = [ [a.postal_code, a.city].filter(Boolean).join(" "), a.country, a.phone, ] .filter(Boolean) .join(", ") return { top, bottom } } // Eén adresblok: één kaart om de hele sectie, met een kop erboven en de // adressen als rijen daarin. De gekozen rij is gemarkeerd met een vulling, // zoals een lijst hoort te werken. // Zonder adresboek (een gast, of een klant die er nog geen heeft) valt de // kaart met de lijst weg: er is niets te kiezen, dus staan de velden direct in // het scherm. Een lijst met één actie-rij die een dialog opent zou een omweg // zijn naar het enige dat die bezoeker kan doen. const addressBlock = (title, address, choice, choose, setField, autoPrefix) => !c.addresses.length ? ( addressFields(address, setField, autoPrefix) ) : ( {title} choose(d.value)}> {c.addresses.map((a) => { const lines = addressLines(a) const active = a.id === choice return ( {lines.top} {lines.bottom ? ( {lines.bottom} ) : null} {a.is_shipping_default || a.is_billing_default ? ( Standaard ) : null} ) })} {/* Een ander adres opent een dialog i.p.v. het formulier uit te klappen: zes velden onder de lijst duwen de rest van het afrekenen weg, en het is een aparte handeling met een eigen begin en eind. Geen radio dus, maar een actie-rij. */} openAddressDialog(choice, setField, autoPrefix, address)} w="100%" textAlign="left" display="flex" alignItems="center" gap={3} px={4} py={3} borderTopWidth="1px" borderColor="theme.border" cursor="pointer" color="theme.fg" _hover={{ bg: "theme.bg.subtle", color: "theme.accent" }} transition="background 0.15s linear, color 0.15s linear" > {choice === CUSTOM_ADDRESS && address.street ? "Ander adres wijzigen" : "Gebruik een ander adres"} {/* Het losse adres, als de klant er een invulde: dan moet hij kunnen zien wat hij gekozen heeft zonder de dialog te heropenen. */} {choice === CUSTOM_ADDRESS && address.street ? ( {addressLines(address).top} {addressLines(address).bottom} ) : null} ) return ( {/* Mobiel staat de samenvatting boven het formulier, zodat het bedrag zichtbaar is vóór het invullen. */} {/* Sticky op de KOLOM en niet op de inhoud, met alignSelf="start": met de stretch van de Grid werd deze Box net zo hoog als het formulier, en dan is er geen ruimte om binnen te schuiven — sticky deed niets. */} {/* De kolom loopt tot de rand, de inhoud niet: die hangt tegen de middennaad, zodat de twee blokken bij elkaar staan. */} {/* Onder lg gecentreerd; op lg hangt het blok tegen de middennaad, zodat de twee kolommen bij elkaar staan. */} {/* Mobiel is de kop een uitklapper: de samenvatting staat daar bóven het formulier, dus dicht scheelt een schermlengte scrollen voor je kunt invullen. Op lg is dit de sticky kolom die gewoon open hoort te staan — vandaar pointerEvents="none" en een body die daar altijd zichtbaar is. */} setSummaryOpen((v) => !v)} align="baseline" justify="space-between" gap={3} w="100%" textAlign="left" borderBottomWidth="1px" borderColor="theme.border" pb={2} cursor={{ base: "pointer", lg: "default" }} pointerEvents={{ lg: "none" }} > Je bestelling {itemCount} {itemCount === 1 ? "artikel" : "artikelen"} {/* Skeleton-regels tijdens het laden: springt minder dan een leeg vlak dat ineens vol raakt. */} {c.basket.loading ? [0, 1].map((r) => ( )) : null} {(c.basket.items || []).map((item) => ( {/* `image` is de variantfoto als die er is, anders de hoofdfoto — dat bepaalt het mandje al. Het aantal staat als badge op de hoek: in een rij bedragen leest een los "2x" in de tekstregel te makkelijk als maat of code. */} {item.image ? ( {item.title}

) : ( )} {/* Badge over de rechterbovenhoek: het aantal hoort bij de foto, niet in de tekstregel waar het als maat of code kan lezen. */} {item.quantity} {/* pt gelijk aan de badge-uitloop van de foto, zodat de titel op één lijn met de bovenrand begint. */} {item.title} {item.variant_label || item.variant ? ( {item.variant_label || item.variant} ) : null} {item.quantity > 1 ? ( per stuk ) : null} ))} {/* Kortingscode. De server valideert de code en rekent de korting door in het mandje, dus na toepassen volgen de bedragen hieronder automatisch. */} {c.basket.voucher_code ? ( {c.basket.voucher_code} ) : ( setVoucher(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault() submitVoucher() } }} placeholder="Kortingscode" /> {voucherError || c.basket.voucher_error ? ( {voucherError || c.basket.voucher_error} ) : null} )} {row("Subtotaal", )} {Number(c.basket.discount_total) > 0 ? row("Korting", <>−) : null} {row( c.basket.shipping_method_title ? "Verzending · " + c.basket.shipping_method_title : "Verzending", c.basket.loading ? "—" : Number(c.basket.shipping_total) === 0 ? "Gratis" : , )} {/* Deze lijn hoort bij de opsomming erboven: ingeklapt staat er niets boven het totaal behalve de kop, die z'n eigen onderrand heeft. */} {/* Ingeklapt blijft alleen het totaal staan: dát is waarom je de samenvatting op mobiel dicht wil hebben. De btw-specificatie hoort bij de uitgeklapte opsomming. */} {row("Totaal", , true)} {c.basket.loading ? ( "Bedragen worden geladen…" ) : ( <>Inclusief btw )} Contact {/* Alleen e-mail: het telefoonnummer hoort bij het adres, want dat is het nummer waarop de bezorger belt. */} {c.emailLocked ? ( /* Ingelogd: het accountadres staat vast. Zelfde kaartvorm als een gekozen verzendmethode — het ís een vaste keuze, geen invoerveld. */ {/* De avatar is het teken dat je ingelogd bent; vandaar geen tekstlabel erbij. Initialen komen uit je naam, anders uit het e-mailadres. */} {c.accountName ? ( {c.accountName} ) : null} {c.email} {/* Uitloggen en niet "wijzigen": een ander e-mailadres betekent als gast bestellen. Terug naar deze pagina, dus het mandje blijft staan en het veld is dan invulbaar. Met een bevestiging, want per ongeluk uitloggen midden in het afrekenen kost de klant z'n voorgevulde adressen. */} Uitloggen ) : ( {field("E-mailadres", c.email, c.setEmail, { type: "email", autoComplete: "email", placeholder: "jij@voorbeeld.nl" })} {/* Inloggen is optioneel — afrekenen als gast blijft de hoofdweg, vandaar een outline-knop. Terug naar deze pagina; het mandje overleeft het inloggen. */} Heb je al een account? Dan vullen we je adressen voor je in. {/* NavLink is ambient (safeBlocks) en heeft geen import nodig — vandaar geen

Je bestelling

Contact

Factuuradres

Bezorging

Verzendmethode

Opmerking