"use client" import { useEffect, useState } from "react" import NextLink from "next/link" import { useBasket } from "@app/webshop" // Client-pagina: het mandje is sessie-gebonden en kan dus niet server-side // vooruit worden opgehaald. useBasket() doet dat client-side en levert de // herberekende bedragen van de server — deze pagina toont alleen wat daaruit // komt, zodat de teller in de header en dit overzicht nooit uit elkaar lopen. export default function () { const cart = useBasket() const { loading, isBusy, update, remove, applyVoucher } = cart const [code, setCode] = useState("") // 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 && loading ? ( <>— ) : ( ) // De ingetypte code volgt die op het mandje zodra hij binnen is (of door de // server is losgelaten), zonder te overschrijven wat de bezoeker net typt. useEffect(() => { if (!loading) setCode(cart.voucher_code || "") }, [loading, cart.voucher_code]) /** Een kortingscode toepassen: de server bepaalt of hij geldt, dus we melden * pas iets als het antwoord binnen is. */ async function submitVoucher() { const result = await applyVoucher(code) if (!result.ok) { toast.error(result.error) return } if (result.basket.voucher_code) { toast.success("Code " + result.basket.voucher_code + " is toegepast.") } else { toast.info("Deze code geldt niet voor je winkelmandje.") } } /** Verwijderen laten bevestigen: een regel weg is niet terug te draaien. */ async function removeItem(item) { const confirmed = await dialog.confirm({ title: "Uit je winkelmandje halen?", description: item.title + " wordt uit je winkelmandje gehaald.", confirmLabel: "Verwijderen", }) if (!confirmed) return const result = await remove(item.product, item.variant) if (result.ok) toast.success("Uit je winkelmandje gehaald.") else toast.error(result.error) } async function setQuantity(item, quantity) { const result = await update(item.product, item.variant, quantity) if (!result.ok) toast.error(result.error) } const productUrl = (slug) => "/producten/" + encodeURIComponent(slug) + "/" const items = cart.items || [] // Leeg mandje pas ná het laden vaststellen, anders flitst "je winkelmandje is // leeg" op terwijl het nog binnenkomt. const emptyBasket = !loading && items.length === 0 // Gratis-verzending-voortgang. De drempel komt uit /basket/, dus het bedrag // staat hier nergens hardcoded; zonder drempel (0) tonen we de balk niet, en // is de verzending al gratis dan zegt de verzendregel dat al. const afterDiscount = Math.max( 0, Number(cart.subtotal || 0) - Number(cart.discount_total || 0), ) const freeShippingFrom = Number(cart.free_shipping_from || 0) const reachedFreeShipping = Number(cart.free_shipping_remaining || 0) <= 0 const freeShippingActive = !loading && freeShippingFrom > 0 && !reachedFreeShipping const freeShippingPercent = freeShippingFrom ? Math.min(100, (afterDiscount / freeShippingFrom) * 100) : 0 const panel = (children) => ( {children} ) return ( Winkelmandje {emptyBasket ? ( Je winkelmandje is nog leeg. ) : ( {/* Elke regel een eigen kaart, met ruimte ertussen. */} {loading ? [0, 1].map((row) => ( )) : null} {items.map((item) => ( {item.image ? ( {item.title}

) : null} {item.title} {item.variant_label || item.variant ? ( {item.variant_label || item.variant} ) : null} per stuk {item.in_stock === false ? ( Niet meer op voorraad ) : null} setQuantity(item, item.quantity - 1)} > − {item.quantity} setQuantity(item, item.quantity + 1)} > + ))} {/* Rechterkolom: losse vakjes, zodat elk blok op zichzelf staat. */} {freeShippingActive ? panel( Nog tot gratis verzending {/* Eigen balk i.p.v. : één deelbare regel volstaat, en role/aria maken 'm leesbaar voor een schermlezer. */} van , ) : null} {panel( Overzicht Subtotaal {Number(cart.discount_total) > 0 ? ( Korting − ) : null} {/* Alleen digitale producten (needs_shipping false): er wordt niets bezorgd, dus ook geen verzendregel. */} {cart.needs_shipping === false ? null : ( {cart.shipping_method_title ? "Verzending · " + cart.shipping_method_title : "Verzending"} {loading ? "—" : Number(cart.shipping_total) === 0 ? "Gratis" : } )} Totaal {loading ? ( "Bedragen worden geladen…" ) : ( <>Inclusief btw )} , )} {panel( Kortingscode setCode(event.target.value)} /> {cart.voucher_code ? ( Code {cart.voucher_code} is toegepast. ) : null} , )} {/* Afrekenen staat los onder de vakjes: het is de actie die de kolom afsluit, geen onderdeel van één van de blokken. */} {loading ? ( ) : ( )} )} ) }