@xiwebdesign/xicms-core 7.31.0 → 8.16.0

package/dist/modules/shop/blocks/Checkout.js

@@ -22,6 +22,8 @@ function CheckoutRender({ block, siteId, mode }) {
   const [giftWrap, setGiftWrap] = useState(false);
   const [giftCardText, setGiftCardText] = useState("");
   const [giftNote, setGiftNote] = useState("");
+  const [pickupChoice, setPickupChoice] = useState(false);
+  const pickup = settings.pickupEnabled && pickupChoice;
   const landOpties = useMemo(() => {
     const uit = verzendLanden({ shippingZones: settings.shippingZones });
     return uit.length > 0 ? uit : ["NL"];
@@ -39,7 +41,7 @@ function CheckoutRender({ block, siteId, mode }) {
       shippingZones: settings.shippingZones
     },
     lines.length > 0,
-    { land: v.country, freeShipping: discount?.valid && discount.freeShipping }
+    { land: v.country, freeShipping: discount?.valid && discount.freeShipping, pickup }
   );
   const discountCents = discount?.valid ? Math.min(discount.discountCents ?? 0, itemsCents) : 0;
   const giftWrapCents = giftWrap ? settings.giftWrapPriceCents : 0;
@@ -72,8 +74,9 @@ function CheckoutRender({ block, siteId, mode }) {
           personalization: l.personalization
         })),
         customer: { email: v.email, name: v.name, phone: v.phone || void 0 },
-        shipping: { address: v.address, zip: v.zip, city: v.city, country: v.country || "NL" },
-        billing: billingDiffers ? { address: billing.address, zip: billing.zip, city: billing.city, country: billing.country || "NL" } : void 0,
+        shipping: pickup ? void 0 : { address: v.address, zip: v.zip, city: v.city, country: v.country || "NL" },
+        pickup: pickup || void 0,
+        billing: billingDiffers && !pickup ? { address: billing.address, zip: billing.zip, city: billing.city, country: billing.country || "NL" } : void 0,
         note: v.note || void 0,
         giftWrap: giftWrap ? { cardText: giftCardText.trim() || void 0, note: giftNote.trim() || void 0 } : void 0,
         discountCode: discount?.valid ? discount.code : void 0,
@@ -99,43 +102,60 @@ function CheckoutRender({ block, siteId, mode }) {
     /* @__PURE__ */ jsxs("form", { onSubmit: submit, style: { display: "grid", gap: "0.9rem", alignContent: "start" }, children: [
       block.heading && /* @__PURE__ */ jsx(Heading, { level: 1, "data-xicms-edit": "heading", children: block.heading }),
       block.introText && /* @__PURE__ */ jsx(Text, { "data-xicms-edit": "introText", children: block.introText }),
-      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldName")} *`, value: v.name, onChange: (x) => setV((p) => ({ ...p, name: x })) }),
-      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldEmail")} *`, type: "email", value: v.email, onChange: (x) => setV((p) => ({ ...p, email: x })) }),
-      /* @__PURE__ */ jsx(TextInput, { label: t("fieldPhone"), value: v.phone, onChange: (x) => setV((p) => ({ ...p, phone: x })) }),
-      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldAddress")} *`, value: v.address, onChange: (x) => setV((p) => ({ ...p, address: x })) }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "140px 1fr" }, children: [
-        /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldZip")} *`, value: v.zip, onChange: (x) => setV((p) => ({ ...p, zip: x })) }),
-        /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldCity")} *`, value: v.city, onChange: (x) => setV((p) => ({ ...p, city: x })) })
+      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldName")} *`, autoComplete: "name", value: v.name, onChange: (x) => setV((p) => ({ ...p, name: x })) }),
+      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldEmail")} *`, type: "email", autoComplete: "email", value: v.email, onChange: (x) => setV((p) => ({ ...p, email: x })) }),
+      /* @__PURE__ */ jsx(TextInput, { label: t("fieldPhone"), autoComplete: "tel", value: v.phone, onChange: (x) => setV((p) => ({ ...p, phone: x })) }),
+      settings.pickupEnabled && /* @__PURE__ */ jsxs("div", { className: "xicms-shop-checkout__delivery", style: { display: "grid", gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx(Heading, { level: 3, children: t("deliveryHeading") }),
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 8, alignItems: "center", cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx("input", { type: "radio", name: "xicms-delivery", checked: !pickup, onChange: () => setPickupChoice(false) }),
+          /* @__PURE__ */ jsx("span", { children: t("deliveryShip") })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", gap: 8, alignItems: "center", cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx("input", { type: "radio", name: "xicms-delivery", checked: pickup, onChange: () => setPickupChoice(true) }),
+          /* @__PURE__ */ jsx("span", { children: t("deliveryPickup") })
+        ] }),
+        pickup && settings.pickupNote.trim() && /* @__PURE__ */ jsxs(Card, { padding: 3, variant: "muted", children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", weight: "bold", children: t("pickupHeading") }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", style: { whiteSpace: "pre-wrap" }, children: settings.pickupNote })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx("div", { children: landOpties.length > 1 && /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.9rem" }, children: [
-          t("fieldCountry"),
-          " *"
+      !pickup && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldAddress")} *`, autoComplete: "shipping street-address", value: v.address, onChange: (x) => setV((p) => ({ ...p, address: x })) }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "140px 1fr" }, children: [
+          /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldZip")} *`, autoComplete: "shipping postal-code", value: v.zip, onChange: (x) => setV((p) => ({ ...p, zip: x })) }),
+          /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldCity")} *`, autoComplete: "shipping address-level2", value: v.city, onChange: (x) => setV((p) => ({ ...p, city: x })) })
         ] }),
+        /* @__PURE__ */ jsx("div", { children: landOpties.length > 1 && /* @__PURE__ */ jsxs("label", { style: { display: "grid", gap: 4 }, children: [
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: "0.9rem" }, children: [
+            t("fieldCountry"),
+            " *"
+          ] }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              className: "xicms-input",
+              value: v.country,
+              onChange: (e) => setV((p) => ({ ...p, country: e.target.value })),
+              children: landOpties.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: LANDNAMEN.of(c) ?? c }, c))
+            }
+          )
+        ] }) }),
         /* @__PURE__ */ jsx(
-          "select",
+          CheckboxInput,
           {
-            className: "xicms-input",
-            value: v.country,
-            onChange: (e) => setV((p) => ({ ...p, country: e.target.value })),
-            children: landOpties.map((c) => /* @__PURE__ */ jsx("option", { value: c, children: LANDNAMEN.of(c) ?? c }, c))
+            label: t("billingSame"),
+            value: !billingDiffers,
+            onChange: (checked) => setBillingDiffers(!checked)
           }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx(
-        CheckboxInput,
-        {
-          label: t("billingSame"),
-          value: !billingDiffers,
-          onChange: (checked) => setBillingDiffers(!checked)
-        }
-      ),
-      billingDiffers && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem" }, children: [
-        /* @__PURE__ */ jsx(Heading, { level: 3, children: t("billingHeading") }),
-        /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldAddress")} *`, value: billing.address, onChange: (x) => setBilling((p) => ({ ...p, address: x })) }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "140px 1fr" }, children: [
-          /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldZip")} *`, value: billing.zip, onChange: (x) => setBilling((p) => ({ ...p, zip: x })) }),
-          /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldCity")} *`, value: billing.city, onChange: (x) => setBilling((p) => ({ ...p, city: x })) })
+        ),
+        billingDiffers && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem" }, children: [
+          /* @__PURE__ */ jsx(Heading, { level: 3, children: t("billingHeading") }),
+          /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldAddress")} *`, autoComplete: "billing street-address", value: billing.address, onChange: (x) => setBilling((p) => ({ ...p, address: x })) }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "140px 1fr" }, children: [
+            /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldZip")} *`, autoComplete: "billing postal-code", value: billing.zip, onChange: (x) => setBilling((p) => ({ ...p, zip: x })) }),
+            /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldCity")} *`, autoComplete: "billing address-level2", value: billing.city, onChange: (x) => setBilling((p) => ({ ...p, city: x })) })
+          ] })
         ] })
       ] }),
       settings.giftWrapEnabled && /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem" }, children: [
@@ -236,6 +256,7 @@ const checkoutBlock = defineBlock({
   Render: CheckoutRender,
   label: "Afrekenen",
   icon: "\u{1F4B3}",
+  essentieel: "Zonder dit blok kunnen klanten niet afrekenen \u2014 er komen dan geen bestellingen meer binnen.",
   defaults: () => ({ heading: "Afrekenen" })
 });
 export {

package/dist/modules/shop/blocks/Checkout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/shop/blocks/Checkout.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents, shippingCentsFor, verzendLanden } from \"../../../schema/shopGeld\";\nimport type { CheckoutBlockSchema } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\nimport { CheckboxInput } from \"@astryxdesign/core/CheckboxInput\";\nimport { cartLineKey, useCart } from \"../cartStore\";\nimport { useShopStrings } from \"../strings\";\nimport { createOrderCall, useShopSettings, validateDiscountCall, type DiscountPreview } from \"../lib\";\n\ntype Blk = z.infer<typeof CheckoutBlockSchema>;\n\n/**\n * Afrekenen — klantgegevens + overzicht + kortingscode; `createOrder` herrekent server-side\n * (incl. korting en personalisatie-meerprijs) en geeft de Stripe Checkout-URL terug. De cart\n * wordt pas geleegd op de bedankt-pagina, zodat een geannuleerde betaling niets kwijtraakt.\n * NB: verplichte velden dragen een \" *\" in het label (de Engelse Astryx-chip blijft uit).\n */\n/** Landnamen in het Nederlands (\"BE\" → \"België\"); valt terug op de code als de browser hem niet kent. */\nconst LANDNAMEN = new Intl.DisplayNames([\"nl\"], { type: \"region\" });\n\nfunction CheckoutRender({ block, siteId, mode }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const { lines, itemsCents } = useCart(siteId);\n  const [v, setV] = useState({ name: \"\", email: \"\", phone: \"\", address: \"\", zip: \"\", city: \"\", country: \"NL\", note: \"\" });\n  const [hp, setHp] = useState(\"\");\n  // Factuuradres: standaard hetzelfde als het verzendadres — alleen tonen als de klant expliciet\n  // aangeeft dat het afwijkt (bv. bedrijfsadres op de factuur, cadeau naar een ander adres).\n  const [billingDiffers, setBillingDiffers] = useState(false);\n  const [billing, setBilling] = useState({ address: \"\", zip: \"\", city: \"\", country: \"NL\" });\n  // Cadeauverpakking (7.27): de meerprijs komt server-side uit de shopconfig, hier alleen de keuze\n  // + wat er op het kaartje moet staan.\n  const [giftWrap, setGiftWrap] = useState(false);\n  const [giftCardText, setGiftCardText] = useState(\"\");\n  const [giftNote, setGiftNote] = useState(\"\");\n  // Welke landen bedient deze winkel? Leeg (of geen zones) = alleen het standaardland.\n  const landOpties = useMemo(() => {\n    const uit = verzendLanden({ shippingZones: settings.shippingZones });\n    return uit.length > 0 ? uit : [\"NL\"];\n  }, [settings.shippingZones]);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [codeInput, setCodeInput] = useState(\"\");\n  const [codeBusy, setCodeBusy] = useState(false);\n  const [discount, setDiscount] = useState<DiscountPreview | null>(null);\n\n  // Eén rekenfunctie voor winkelwagen, afrekenen en server (zie shopGeld.ts): het land bepaalt de\n  // zone, en een kortingscode met gratis verzending zit er nu ín in plaats van eromheen.\n  const shippingCents = shippingCentsFor(\n    itemsCents,\n    {\n      shippingFlatCents: settings.shippingFlatCents,\n      shippingFreeFromCents: settings.shippingFreeFromCents || undefined,\n      shippingZones: settings.shippingZones,\n    },\n    lines.length > 0,\n    { land: v.country, freeShipping: discount?.valid && discount.freeShipping },\n  );\n  const discountCents = discount?.valid ? Math.min(discount.discountCents ?? 0, itemsCents) : 0;\n  const giftWrapCents = giftWrap ? settings.giftWrapPriceCents : 0;\n  const totalCents = Math.max(0, itemsCents - discountCents) + shippingCents + giftWrapCents;\n\n  async function applyCode() {\n    const code = codeInput.trim().toUpperCase();\n    if (!code || codeBusy) return;\n    setCodeBusy(true);\n    try {\n      const res = await validateDiscountCall(siteId, code, itemsCents);\n      setDiscount(res.valid ? { ...res, code } : { valid: false });\n    } catch {\n      setDiscount({ valid: false });\n    } finally {\n      setCodeBusy(false);\n    }\n  }\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\" || busy) return;\n    setBusy(true);\n    setError(null);\n    try {\n      const { url } = await createOrderCall({\n        siteId,\n        items: lines.map((l) => ({\n          productId: l.productId,\n          variantKey: l.variantKey,\n          qty: l.qty,\n          personalization: l.personalization,\n        })),\n        customer: { email: v.email, name: v.name, phone: v.phone || undefined },\n        shipping: { address: v.address, zip: v.zip, city: v.city, country: v.country || \"NL\" },\n        billing: billingDiffers\n          ? { address: billing.address, zip: billing.zip, city: billing.city, country: billing.country || \"NL\" }\n          : undefined,\n        note: v.note || undefined,\n        giftWrap: giftWrap ? { cardText: giftCardText.trim() || undefined, note: giftNote.trim() || undefined } : undefined,\n        discountCode: discount?.valid ? discount.code : undefined,\n        successPath: settings.successPath,\n        cancelPath: settings.cartPath,\n        _hp: hp || undefined,\n      });\n      window.location.assign(url);\n    } catch (err) {\n      console.error(\"[xicms] checkout mislukt:\", err);\n      setError(t(\"checkoutFailed\"));\n      setBusy(false);\n    }\n  }\n\n  if (lines.length === 0) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>\n          {t(\"cartEmpty\")} <a href={settings.shopPath}>{t(\"toShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  return (\n    <div className=\"xicms-shop-checkout\" style={{ display: \"grid\", gap: \"2rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(320px, 100%), 1fr))\" }}>\n      <form onSubmit={submit} style={{ display: \"grid\", gap: \"0.9rem\", alignContent: \"start\" }}>\n        {block.heading && <Heading level={1} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {block.introText && <Text data-xicms-edit=\"introText\">{block.introText}</Text>}\n\n        <TextInput label={`${t(\"fieldName\")} *`} value={v.name} onChange={(x) => setV((p) => ({ ...p, name: x }))} />\n        <TextInput label={`${t(\"fieldEmail\")} *`} type=\"email\" value={v.email} onChange={(x) => setV((p) => ({ ...p, email: x }))} />\n        <TextInput label={t(\"fieldPhone\")} value={v.phone} onChange={(x) => setV((p) => ({ ...p, phone: x }))} />\n        <TextInput label={`${t(\"fieldAddress\")} *`} value={v.address} onChange={(x) => setV((p) => ({ ...p, address: x }))} />\n        <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"140px 1fr\" }}>\n          <TextInput label={`${t(\"fieldZip\")} *`} value={v.zip} onChange={(x) => setV((p) => ({ ...p, zip: x }))} />\n          <TextInput label={`${t(\"fieldCity\")} *`} value={v.city} onChange={(x) => setV((p) => ({ ...p, city: x }))} />\n        </div>\n        <div>\n          {/* Landkeuze alleen tonen wanneer de winkel meer dan één land bedient — anders is het\n              een keuzemenu met één optie, en dat is ruis op een afrekenpagina. */}\n          {landOpties.length > 1 && (\n            <label style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{t(\"fieldCountry\")} *</span>\n              <select\n                className=\"xicms-input\"\n                value={v.country}\n                onChange={(e) => setV((p) => ({ ...p, country: e.target.value }))}\n              >\n                {landOpties.map((c) => (\n                  <option key={c} value={c}>\n                    {LANDNAMEN.of(c) ?? c}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n        <CheckboxInput\n          label={t(\"billingSame\")}\n          value={!billingDiffers}\n          onChange={(checked) => setBillingDiffers(!checked)}\n        />\n        {billingDiffers && (\n          <div style={{ display: \"grid\", gap: \"0.9rem\" }}>\n            <Heading level={3}>{t(\"billingHeading\")}</Heading>\n            <TextInput label={`${t(\"fieldAddress\")} *`} value={billing.address} onChange={(x) => setBilling((p) => ({ ...p, address: x }))} />\n            <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"140px 1fr\" }}>\n              <TextInput label={`${t(\"fieldZip\")} *`} value={billing.zip} onChange={(x) => setBilling((p) => ({ ...p, zip: x }))} />\n              <TextInput label={`${t(\"fieldCity\")} *`} value={billing.city} onChange={(x) => setBilling((p) => ({ ...p, city: x }))} />\n            </div>\n          </div>\n        )}\n\n        {settings.giftWrapEnabled && (\n          <div style={{ display: \"grid\", gap: \"0.9rem\" }}>\n            <CheckboxInput\n              label={t(\"giftWrapLabel\", { bedrag: formatCents(settings.giftWrapPriceCents, settings.currency) })}\n              value={giftWrap}\n              onChange={setGiftWrap}\n            />\n            {giftWrap && (\n              <>\n                <TextInput label={t(\"giftWrapCardText\")} value={giftCardText} onChange={setGiftCardText} />\n                <TextArea label={t(\"giftWrapNote\")} rows={2} value={giftNote} onChange={setGiftNote} />\n              </>\n            )}\n          </div>\n        )}\n\n        <TextArea label={t(\"fieldNote\")} rows={3} value={v.note} onChange={(x) => setV((p) => ({ ...p, note: x }))} />\n\n        {/* Honeypot — verborgen voor mensen, bots vullen 'm vaak wel in. */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n\n        <button\n          type=\"submit\"\n          className=\"xicms-btn xicms-btn--primary\"\n          disabled={busy}\n          style={{ cursor: busy ? \"wait\" : \"pointer\", width: \"fit-content\" }}\n        >\n          {busy ? t(\"busy\") : t(\"pay\", { bedrag: formatCents(totalCents, settings.currency) })}\n        </button>\n        <Text size=\"sm\" style={{ opacity: 0.7 }}>{t(\"secureNote\")}</Text>\n      </form>\n\n      <Card padding={3} variant=\"muted\" style={{ alignSelf: \"start\" }}>\n        <Heading level={2}>{t(\"yourOrder\")}</Heading>\n        <div style={{ display: \"grid\", gap: 8, marginTop: \"0.75rem\" }}>\n          {lines.map((l) => (\n            <div key={cartLineKey(l)} style={{ display: \"flex\", justifyContent: \"space-between\", gap: 12 }}>\n              <Text size=\"sm\">\n                {l.qty}× {l.name}\n                {l.variantLabel ? ` (${l.variantLabel})` : \"\"}\n                {l.personalizationLabel ? ` — ${l.personalizationLabel}` : \"\"}\n              </Text>\n              <Text size=\"sm\">{formatCents(l.unitPriceCents * l.qty, settings.currency)}</Text>\n            </div>\n          ))}\n\n          {/* Kortingscode */}\n          <div className=\"xicms-shop-checkout__discount\" style={{ display: \"flex\", gap: 8, marginTop: 4 }}>\n            <input\n              className=\"xicms-input\"\n              type=\"text\"\n              placeholder={t(\"discountCode\")}\n              value={codeInput}\n              onChange={(e) => setCodeInput(e.target.value.toUpperCase())}\n              style={{ flex: 1, textTransform: \"uppercase\" }}\n            />\n            <button type=\"button\" className=\"xicms-btn xicms-btn--secondary\" disabled={codeBusy || !codeInput.trim()} onClick={applyCode}>\n              {codeBusy ? t(\"busy\") : t(\"discountApply\")}\n            </button>\n          </div>\n          {discount && !discount.valid && (\n            <Text size=\"sm\" role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"discountInvalid\")}</Text>\n          )}\n          {discount?.valid && (\n            <Text size=\"sm\" style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n              {t(\"discountApplied\", { code: discount.code ?? \"\" })}\n            </Text>\n          )}\n\n          <hr style={{ border: \"none\", borderTop: \"1px solid rgba(0,0,0,0.1)\" }} />\n          {discountCents > 0 && (\n            <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n              <Text size=\"sm\">{t(\"discount\")}</Text>\n              <Text size=\"sm\">−{formatCents(discountCents, settings.currency)}</Text>\n            </div>\n          )}\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <Text size=\"sm\">{t(\"shippingCosts\")}</Text>\n            <Text size=\"sm\">{shippingCents === 0 ? t(\"free\") : formatCents(shippingCents, settings.currency)}</Text>\n          </div>\n          {giftWrapCents > 0 && (\n            <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n              <Text size=\"sm\">{t(\"giftWrap\")}</Text>\n              <Text size=\"sm\">{formatCents(giftWrapCents, settings.currency)}</Text>\n            </div>\n          )}\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <Text weight=\"bold\">{t(\"total\")}</Text>\n            <Text weight=\"bold\">{formatCents(totalCents, settings.currency)}</Text>\n          </div>\n        </div>\n      </Card>\n    </div>\n  );\n}\n\nexport const checkoutBlock = defineBlock({\n  type: \"checkout\",\n  Render: CheckoutRender,\n  label: \"Afrekenen\",\n  icon: \"💳\",\n  defaults: () => ({ heading: \"Afrekenen\" }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/shop/blocks/Checkout.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo, useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents, shippingCentsFor, verzendLanden } from \"../../../schema/shopGeld\";\nimport type { CheckoutBlockSchema } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { TextArea } from \"@astryxdesign/core/TextArea\";\nimport { CheckboxInput } from \"@astryxdesign/core/CheckboxInput\";\nimport { cartLineKey, useCart } from \"../cartStore\";\nimport { useShopStrings } from \"../strings\";\nimport { createOrderCall, useShopSettings, validateDiscountCall, type DiscountPreview } from \"../lib\";\n\ntype Blk = z.infer<typeof CheckoutBlockSchema>;\n\n/**\n * Afrekenen — klantgegevens + overzicht + kortingscode; `createOrder` herrekent server-side\n * (incl. korting en personalisatie-meerprijs) en geeft de Stripe Checkout-URL terug. De cart\n * wordt pas geleegd op de bedankt-pagina, zodat een geannuleerde betaling niets kwijtraakt.\n * NB: verplichte velden dragen een \" *\" in het label (de Engelse Astryx-chip blijft uit).\n */\n/** Landnamen in het Nederlands (\"BE\" → \"België\"); valt terug op de code als de browser hem niet kent. */\nconst LANDNAMEN = new Intl.DisplayNames([\"nl\"], { type: \"region\" });\n\nfunction CheckoutRender({ block, siteId, mode }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const { lines, itemsCents } = useCart(siteId);\n  const [v, setV] = useState({ name: \"\", email: \"\", phone: \"\", address: \"\", zip: \"\", city: \"\", country: \"NL\", note: \"\" });\n  const [hp, setHp] = useState(\"\");\n  // Factuuradres: standaard hetzelfde als het verzendadres — alleen tonen als de klant expliciet\n  // aangeeft dat het afwijkt (bv. bedrijfsadres op de factuur, cadeau naar een ander adres).\n  const [billingDiffers, setBillingDiffers] = useState(false);\n  const [billing, setBilling] = useState({ address: \"\", zip: \"\", city: \"\", country: \"NL\" });\n  // Cadeauverpakking (7.27): de meerprijs komt server-side uit de shopconfig, hier alleen de keuze\n  // + wat er op het kaartje moet staan.\n  const [giftWrap, setGiftWrap] = useState(false);\n  const [giftCardText, setGiftCardText] = useState(\"\");\n  const [giftNote, setGiftNote] = useState(\"\");\n  // Afhalen (7.33): alleen te kiezen als de winkel het aanbiedt; de server controleert dat opnieuw.\n  const [pickupChoice, setPickupChoice] = useState(false);\n  const pickup = settings.pickupEnabled && pickupChoice;\n  // Welke landen bedient deze winkel? Leeg (of geen zones) = alleen het standaardland.\n  const landOpties = useMemo(() => {\n    const uit = verzendLanden({ shippingZones: settings.shippingZones });\n    return uit.length > 0 ? uit : [\"NL\"];\n  }, [settings.shippingZones]);\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n  const [codeInput, setCodeInput] = useState(\"\");\n  const [codeBusy, setCodeBusy] = useState(false);\n  const [discount, setDiscount] = useState<DiscountPreview | null>(null);\n\n  // Eén rekenfunctie voor winkelwagen, afrekenen en server (zie shopGeld.ts): het land bepaalt de\n  // zone, en een kortingscode met gratis verzending zit er nu ín in plaats van eromheen.\n  const shippingCents = shippingCentsFor(\n    itemsCents,\n    {\n      shippingFlatCents: settings.shippingFlatCents,\n      shippingFreeFromCents: settings.shippingFreeFromCents || undefined,\n      shippingZones: settings.shippingZones,\n    },\n    lines.length > 0,\n    { land: v.country, freeShipping: discount?.valid && discount.freeShipping, pickup },\n  );\n  const discountCents = discount?.valid ? Math.min(discount.discountCents ?? 0, itemsCents) : 0;\n  const giftWrapCents = giftWrap ? settings.giftWrapPriceCents : 0;\n  const totalCents = Math.max(0, itemsCents - discountCents) + shippingCents + giftWrapCents;\n\n  async function applyCode() {\n    const code = codeInput.trim().toUpperCase();\n    if (!code || codeBusy) return;\n    setCodeBusy(true);\n    try {\n      const res = await validateDiscountCall(siteId, code, itemsCents);\n      setDiscount(res.valid ? { ...res, code } : { valid: false });\n    } catch {\n      setDiscount({ valid: false });\n    } finally {\n      setCodeBusy(false);\n    }\n  }\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\" || busy) return;\n    setBusy(true);\n    setError(null);\n    try {\n      const { url } = await createOrderCall({\n        siteId,\n        items: lines.map((l) => ({\n          productId: l.productId,\n          variantKey: l.variantKey,\n          qty: l.qty,\n          personalization: l.personalization,\n        })),\n        customer: { email: v.email, name: v.name, phone: v.phone || undefined },\n        shipping: pickup ? undefined : { address: v.address, zip: v.zip, city: v.city, country: v.country || \"NL\" },\n        pickup: pickup || undefined,\n        billing: billingDiffers && !pickup\n          ? { address: billing.address, zip: billing.zip, city: billing.city, country: billing.country || \"NL\" }\n          : undefined,\n        note: v.note || undefined,\n        giftWrap: giftWrap ? { cardText: giftCardText.trim() || undefined, note: giftNote.trim() || undefined } : undefined,\n        discountCode: discount?.valid ? discount.code : undefined,\n        successPath: settings.successPath,\n        cancelPath: settings.cartPath,\n        _hp: hp || undefined,\n      });\n      window.location.assign(url);\n    } catch (err) {\n      console.error(\"[xicms] checkout mislukt:\", err);\n      setError(t(\"checkoutFailed\"));\n      setBusy(false);\n    }\n  }\n\n  if (lines.length === 0) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>\n          {t(\"cartEmpty\")} <a href={settings.shopPath}>{t(\"toShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  return (\n    <div className=\"xicms-shop-checkout\" style={{ display: \"grid\", gap: \"2rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(320px, 100%), 1fr))\" }}>\n      <form onSubmit={submit} style={{ display: \"grid\", gap: \"0.9rem\", alignContent: \"start\" }}>\n        {block.heading && <Heading level={1} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {block.introText && <Text data-xicms-edit=\"introText\">{block.introText}</Text>}\n\n        <TextInput label={`${t(\"fieldName\")} *`} autoComplete=\"name\" value={v.name} onChange={(x) => setV((p) => ({ ...p, name: x }))} />\n        <TextInput label={`${t(\"fieldEmail\")} *`} type=\"email\" autoComplete=\"email\" value={v.email} onChange={(x) => setV((p) => ({ ...p, email: x }))} />\n        <TextInput label={t(\"fieldPhone\")} autoComplete=\"tel\" value={v.phone} onChange={(x) => setV((p) => ({ ...p, phone: x }))} />\n        {settings.pickupEnabled && (\n          <div className=\"xicms-shop-checkout__delivery\" style={{ display: \"grid\", gap: \"0.5rem\" }}>\n            <Heading level={3}>{t(\"deliveryHeading\")}</Heading>\n            <label style={{ display: \"flex\", gap: 8, alignItems: \"center\", cursor: \"pointer\" }}>\n              <input type=\"radio\" name=\"xicms-delivery\" checked={!pickup} onChange={() => setPickupChoice(false)} />\n              <span>{t(\"deliveryShip\")}</span>\n            </label>\n            <label style={{ display: \"flex\", gap: 8, alignItems: \"center\", cursor: \"pointer\" }}>\n              <input type=\"radio\" name=\"xicms-delivery\" checked={pickup} onChange={() => setPickupChoice(true)} />\n              <span>{t(\"deliveryPickup\")}</span>\n            </label>\n            {pickup && settings.pickupNote.trim() && (\n              <Card padding={3} variant=\"muted\">\n                <Text size=\"sm\" weight=\"bold\">{t(\"pickupHeading\")}</Text>\n                <Text size=\"sm\" style={{ whiteSpace: \"pre-wrap\" }}>{settings.pickupNote}</Text>\n              </Card>\n            )}\n          </div>\n        )}\n        {!pickup && (\n          <>\n        <TextInput label={`${t(\"fieldAddress\")} *`} autoComplete=\"shipping street-address\" value={v.address} onChange={(x) => setV((p) => ({ ...p, address: x }))} />\n        <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"140px 1fr\" }}>\n          <TextInput label={`${t(\"fieldZip\")} *`} autoComplete=\"shipping postal-code\" value={v.zip} onChange={(x) => setV((p) => ({ ...p, zip: x }))} />\n          <TextInput label={`${t(\"fieldCity\")} *`} autoComplete=\"shipping address-level2\" value={v.city} onChange={(x) => setV((p) => ({ ...p, city: x }))} />\n        </div>\n        <div>\n          {/* Landkeuze alleen tonen wanneer de winkel meer dan één land bedient — anders is het\n              een keuzemenu met één optie, en dat is ruis op een afrekenpagina. */}\n          {landOpties.length > 1 && (\n            <label style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{t(\"fieldCountry\")} *</span>\n              <select\n                className=\"xicms-input\"\n                value={v.country}\n                onChange={(e) => setV((p) => ({ ...p, country: e.target.value }))}\n              >\n                {landOpties.map((c) => (\n                  <option key={c} value={c}>\n                    {LANDNAMEN.of(c) ?? c}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n        <CheckboxInput\n          label={t(\"billingSame\")}\n          value={!billingDiffers}\n          onChange={(checked) => setBillingDiffers(!checked)}\n        />\n        {billingDiffers && (\n          <div style={{ display: \"grid\", gap: \"0.9rem\" }}>\n            <Heading level={3}>{t(\"billingHeading\")}</Heading>\n            <TextInput label={`${t(\"fieldAddress\")} *`} autoComplete=\"billing street-address\" value={billing.address} onChange={(x) => setBilling((p) => ({ ...p, address: x }))} />\n            <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"140px 1fr\" }}>\n              <TextInput label={`${t(\"fieldZip\")} *`} autoComplete=\"billing postal-code\" value={billing.zip} onChange={(x) => setBilling((p) => ({ ...p, zip: x }))} />\n              <TextInput label={`${t(\"fieldCity\")} *`} autoComplete=\"billing address-level2\" value={billing.city} onChange={(x) => setBilling((p) => ({ ...p, city: x }))} />\n            </div>\n          </div>\n        )}\n          </>\n        )}\n        {settings.giftWrapEnabled && (\n          <div style={{ display: \"grid\", gap: \"0.9rem\" }}>\n            <CheckboxInput\n              label={t(\"giftWrapLabel\", { bedrag: formatCents(settings.giftWrapPriceCents, settings.currency) })}\n              value={giftWrap}\n              onChange={setGiftWrap}\n            />\n            {giftWrap && (\n              <>\n                <TextInput label={t(\"giftWrapCardText\")} value={giftCardText} onChange={setGiftCardText} />\n                <TextArea label={t(\"giftWrapNote\")} rows={2} value={giftNote} onChange={setGiftNote} />\n              </>\n            )}\n          </div>\n        )}\n\n        <TextArea label={t(\"fieldNote\")} rows={3} value={v.note} onChange={(x) => setV((p) => ({ ...p, note: x }))} />\n\n        {/* Honeypot — verborgen voor mensen, bots vullen 'm vaak wel in. */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n\n        <button\n          type=\"submit\"\n          className=\"xicms-btn xicms-btn--primary\"\n          disabled={busy}\n          style={{ cursor: busy ? \"wait\" : \"pointer\", width: \"fit-content\" }}\n        >\n          {busy ? t(\"busy\") : t(\"pay\", { bedrag: formatCents(totalCents, settings.currency) })}\n        </button>\n        <Text size=\"sm\" style={{ opacity: 0.7 }}>{t(\"secureNote\")}</Text>\n      </form>\n\n      <Card padding={3} variant=\"muted\" style={{ alignSelf: \"start\" }}>\n        <Heading level={2}>{t(\"yourOrder\")}</Heading>\n        <div style={{ display: \"grid\", gap: 8, marginTop: \"0.75rem\" }}>\n          {lines.map((l) => (\n            <div key={cartLineKey(l)} style={{ display: \"flex\", justifyContent: \"space-between\", gap: 12 }}>\n              <Text size=\"sm\">\n                {l.qty}× {l.name}\n                {l.variantLabel ? ` (${l.variantLabel})` : \"\"}\n                {l.personalizationLabel ? ` — ${l.personalizationLabel}` : \"\"}\n              </Text>\n              <Text size=\"sm\">{formatCents(l.unitPriceCents * l.qty, settings.currency)}</Text>\n            </div>\n          ))}\n\n          {/* Kortingscode */}\n          <div className=\"xicms-shop-checkout__discount\" style={{ display: \"flex\", gap: 8, marginTop: 4 }}>\n            <input\n              className=\"xicms-input\"\n              type=\"text\"\n              placeholder={t(\"discountCode\")}\n              value={codeInput}\n              onChange={(e) => setCodeInput(e.target.value.toUpperCase())}\n              style={{ flex: 1, textTransform: \"uppercase\" }}\n            />\n            <button type=\"button\" className=\"xicms-btn xicms-btn--secondary\" disabled={codeBusy || !codeInput.trim()} onClick={applyCode}>\n              {codeBusy ? t(\"busy\") : t(\"discountApply\")}\n            </button>\n          </div>\n          {discount && !discount.valid && (\n            <Text size=\"sm\" role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"discountInvalid\")}</Text>\n          )}\n          {discount?.valid && (\n            <Text size=\"sm\" style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n              {t(\"discountApplied\", { code: discount.code ?? \"\" })}\n            </Text>\n          )}\n\n          <hr style={{ border: \"none\", borderTop: \"1px solid rgba(0,0,0,0.1)\" }} />\n          {discountCents > 0 && (\n            <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n              <Text size=\"sm\">{t(\"discount\")}</Text>\n              <Text size=\"sm\">−{formatCents(discountCents, settings.currency)}</Text>\n            </div>\n          )}\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <Text size=\"sm\">{t(\"shippingCosts\")}</Text>\n            <Text size=\"sm\">{shippingCents === 0 ? t(\"free\") : formatCents(shippingCents, settings.currency)}</Text>\n          </div>\n          {giftWrapCents > 0 && (\n            <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n              <Text size=\"sm\">{t(\"giftWrap\")}</Text>\n              <Text size=\"sm\">{formatCents(giftWrapCents, settings.currency)}</Text>\n            </div>\n          )}\n          <div style={{ display: \"flex\", justifyContent: \"space-between\" }}>\n            <Text weight=\"bold\">{t(\"total\")}</Text>\n            <Text weight=\"bold\">{formatCents(totalCents, settings.currency)}</Text>\n          </div>\n        </div>\n      </Card>\n    </div>\n  );\n}\n\nexport const checkoutBlock = defineBlock({\n  type: \"checkout\",\n  Render: CheckoutRender,\n  label: \"Afrekenen\",\n  icon: \"💳\",\n  essentieel: \"Zonder dit blok kunnen klanten niet afrekenen — er komen dan geen bestellingen meer binnen.\",\n  defaults: () => ({ heading: \"Afrekenen\" }),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/Donation.js

@@ -10,7 +10,7 @@ import { useShopStrings } from "../strings.js";
 function DonationRender({ block, siteId, mode }) {
   const settings = useShopSettings();
   const t = useShopStrings();
-  const [amountCents, setAmountCents] = useState(block.amountsCents[0] ?? null);
+  const [amountCents, setAmountCents] = useState(block.amountsCents?.[0] ?? null);
   const [customEuro, setCustomEuro] = useState("");
   const [custom, setCustom] = useState(false);
   const [v, setV] = useState({ name: "", email: "" });
@@ -44,7 +44,7 @@ function DonationRender({ block, siteId, mode }) {
     block.heading && /* @__PURE__ */ jsx(Heading, { level: 2, "data-xicms-edit": "heading", children: block.heading }),
     block.introText && /* @__PURE__ */ jsx(Text, { "data-xicms-edit": "introText", children: block.introText }),
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, role: "group", "aria-label": "Kies een bedrag", children: [
-      block.amountsCents.map((c) => {
+      (block.amountsCents ?? []).map((c) => {
         const active = !custom && amountCents === c;
         return /* @__PURE__ */ jsx(
           "button",
@@ -97,8 +97,8 @@ function DonationRender({ block, siteId, mode }) {
       }
     ),
     /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: "0.9rem", gridTemplateColumns: "repeat(auto-fit, minmax(min(220px, 100%), 1fr))" }, children: [
-      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldName")} *`, value: v.name, onChange: (x) => setV((p) => ({ ...p, name: x })) }),
-      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldEmail")} *`, type: "email", value: v.email, onChange: (x) => setV((p) => ({ ...p, email: x })) })
+      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldName")} *`, autoComplete: "name", value: v.name, onChange: (x) => setV((p) => ({ ...p, name: x })) }),
+      /* @__PURE__ */ jsx(TextInput, { label: `${t("fieldEmail")} *`, type: "email", autoComplete: "email", value: v.email, onChange: (x) => setV((p) => ({ ...p, email: x })) })
     ] }),
     /* @__PURE__ */ jsx(
       "input",

package/dist/modules/shop/blocks/Donation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/shop/blocks/Donation.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents } from \"../../../schema/shopGeld\";\nimport type { DonationBlockSchema } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { createOrderCall, useShopSettings } from \"../lib\";\nimport { useShopStrings } from \"../strings\";\n\ntype Blk = z.infer<typeof DonationBlockSchema>;\n\n/**\n * Donatie — bedragknoppen + vrij bedrag, naam/e-mail, betaling via dezelfde `createOrder`-flow\n * (orderregel kind:\"donation\", geen verzendadres/verzendkosten). Het gekozen bedrag is de enige\n * client-invoer die de server accepteert — binnen de min/max van dit block.\n */\nfunction DonationRender({ block, siteId, mode }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const [amountCents, setAmountCents] = useState<number | null>(block.amountsCents[0] ?? null);\n  const [customEuro, setCustomEuro] = useState(\"\");\n  const [custom, setCustom] = useState(false);\n  const [v, setV] = useState({ name: \"\", email: \"\" });\n  const [hp, setHp] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const effectiveCents = custom\n    ? Math.round((Number(customEuro.replace(\",\", \".\")) || 0) * 100)\n    : amountCents ?? 0;\n  const valid =\n    effectiveCents >= (custom ? block.customMinCents : 50) &&\n    effectiveCents <= block.customMaxCents;\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\" || busy || !valid) return;\n    setBusy(true);\n    setError(null);\n    try {\n      const { url } = await createOrderCall({\n        siteId,\n        items: [{ qty: 1, donationCents: effectiveCents }],\n        customer: { email: v.email, name: v.name },\n        successPath: settings.successPath,\n        cancelPath: typeof window !== \"undefined\" ? window.location.pathname : \"/\",\n        _hp: hp || undefined,\n      });\n      window.location.assign(url);\n    } catch (err) {\n      console.error(\"[xicms] donatie mislukt:\", err);\n      setError(t(\"donationFailed\"));\n      setBusy(false);\n    }\n  }\n\n  return (\n    <Card padding={4} className=\"xicms-shop-donation\">\n      <form onSubmit={submit} style={{ display: \"grid\", gap: \"1rem\" }}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {block.introText && <Text data-xicms-edit=\"introText\">{block.introText}</Text>}\n\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }} role=\"group\" aria-label=\"Kies een bedrag\">\n          {block.amountsCents.map((c) => {\n            const active = !custom && amountCents === c;\n            return (\n              <button\n                key={c}\n                type=\"button\"\n                className=\"xicms-btn\"\n                aria-pressed={active}\n                onClick={() => {\n                  setCustom(false);\n                  setAmountCents(c);\n                }}\n                style={{\n                  cursor: \"pointer\",\n                  border: active ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                  background: active ? \"var(--xicms-primary, #333)\" : \"transparent\",\n                  color: active ? \"var(--xicms-primary-contrast, #fff)\" : \"inherit\",\n                  borderRadius: 999,\n                  padding: \"0.5rem 1.1rem\",\n                }}\n              >\n                {formatCents(c, settings.currency)}\n              </button>\n            );\n          })}\n          {block.allowCustom && (\n            <button\n              type=\"button\"\n              className=\"xicms-btn\"\n              aria-pressed={custom}\n              onClick={() => setCustom(true)}\n              style={{\n                cursor: \"pointer\",\n                border: custom ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                background: \"transparent\",\n                borderRadius: 999,\n                padding: \"0.5rem 1.1rem\",\n              }}\n            >\n              {t(\"donationCustomAmount\")}\n            </button>\n          )}\n        </div>\n\n        {custom && (\n          <TextInput\n            label={`${t(\"donationAmountLabel\", { min: formatCents(block.customMinCents, settings.currency) })} *`}\n            placeholder=\"10,00\"\n            value={customEuro}\n            onChange={setCustomEuro}\n          />\n        )}\n\n        <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(220px, 100%), 1fr))\" }}>\n          <TextInput label={`${t(\"fieldName\")} *`} value={v.name} onChange={(x) => setV((p) => ({ ...p, name: x }))} />\n          <TextInput label={`${t(\"fieldEmail\")} *`} type=\"email\" value={v.email} onChange={(x) => setV((p) => ({ ...p, email: x }))} />\n        </div>\n\n        {/* Honeypot */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n\n        <button\n          type=\"submit\"\n          className=\"xicms-btn xicms-btn--primary\"\n          disabled={busy || !valid}\n          style={{ cursor: busy ? \"wait\" : \"pointer\", width: \"fit-content\", opacity: valid ? 1 : 0.5 }}\n        >\n          {busy ? t(\"busy\") : `${block.buttonLabel} ${valid ? formatCents(effectiveCents, settings.currency) : \"\"}`}\n        </button>\n      </form>\n    </Card>\n  );\n}\n\nexport const donationBlock = defineBlock({\n  type: \"donation\",\n  Render: DonationRender,\n  label: \"Donatie\",\n  icon: \"💛\",\n  defaults: () => ({\n    heading: \"Steun ons\",\n    amountsCents: [500, 1000, 2500],\n    allowCustom: true,\n    customMinCents: 100,\n    customMaxCents: 100_000,\n    buttonLabel: \"Doneer\",\n  }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/shop/blocks/Donation.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents } from \"../../../schema/shopGeld\";\nimport type { DonationBlockSchema } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { TextInput } from \"@astryxdesign/core/TextInput\";\nimport { createOrderCall, useShopSettings } from \"../lib\";\nimport { useShopStrings } from \"../strings\";\n\ntype Blk = z.infer<typeof DonationBlockSchema>;\n\n/**\n * Donatie — bedragknoppen + vrij bedrag, naam/e-mail, betaling via dezelfde `createOrder`-flow\n * (orderregel kind:\"donation\", geen verzendadres/verzendkosten). Het gekozen bedrag is de enige\n * client-invoer die de server accepteert — binnen de min/max van dit block.\n */\nfunction DonationRender({ block, siteId, mode }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const [amountCents, setAmountCents] = useState<number | null>(block.amountsCents?.[0] ?? null);\n  const [customEuro, setCustomEuro] = useState(\"\");\n  const [custom, setCustom] = useState(false);\n  const [v, setV] = useState({ name: \"\", email: \"\" });\n  const [hp, setHp] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const effectiveCents = custom\n    ? Math.round((Number(customEuro.replace(\",\", \".\")) || 0) * 100)\n    : amountCents ?? 0;\n  const valid =\n    effectiveCents >= (custom ? block.customMinCents : 50) &&\n    effectiveCents <= block.customMaxCents;\n\n  async function submit(e: FormEvent) {\n    e.preventDefault();\n    if (mode === \"preview\" || busy || !valid) return;\n    setBusy(true);\n    setError(null);\n    try {\n      const { url } = await createOrderCall({\n        siteId,\n        items: [{ qty: 1, donationCents: effectiveCents }],\n        customer: { email: v.email, name: v.name },\n        successPath: settings.successPath,\n        cancelPath: typeof window !== \"undefined\" ? window.location.pathname : \"/\",\n        _hp: hp || undefined,\n      });\n      window.location.assign(url);\n    } catch (err) {\n      console.error(\"[xicms] donatie mislukt:\", err);\n      setError(t(\"donationFailed\"));\n      setBusy(false);\n    }\n  }\n\n  return (\n    <Card padding={4} className=\"xicms-shop-donation\">\n      <form onSubmit={submit} style={{ display: \"grid\", gap: \"1rem\" }}>\n        {block.heading && <Heading level={2} data-xicms-edit=\"heading\">{block.heading}</Heading>}\n        {block.introText && <Text data-xicms-edit=\"introText\">{block.introText}</Text>}\n\n        <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }} role=\"group\" aria-label=\"Kies een bedrag\">\n          {(block.amountsCents ?? []).map((c) => {\n            const active = !custom && amountCents === c;\n            return (\n              <button\n                key={c}\n                type=\"button\"\n                className=\"xicms-btn\"\n                aria-pressed={active}\n                onClick={() => {\n                  setCustom(false);\n                  setAmountCents(c);\n                }}\n                style={{\n                  cursor: \"pointer\",\n                  border: active ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                  background: active ? \"var(--xicms-primary, #333)\" : \"transparent\",\n                  color: active ? \"var(--xicms-primary-contrast, #fff)\" : \"inherit\",\n                  borderRadius: 999,\n                  padding: \"0.5rem 1.1rem\",\n                }}\n              >\n                {formatCents(c, settings.currency)}\n              </button>\n            );\n          })}\n          {block.allowCustom && (\n            <button\n              type=\"button\"\n              className=\"xicms-btn\"\n              aria-pressed={custom}\n              onClick={() => setCustom(true)}\n              style={{\n                cursor: \"pointer\",\n                border: custom ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid rgba(0,0,0,0.15)\",\n                background: \"transparent\",\n                borderRadius: 999,\n                padding: \"0.5rem 1.1rem\",\n              }}\n            >\n              {t(\"donationCustomAmount\")}\n            </button>\n          )}\n        </div>\n\n        {custom && (\n          <TextInput\n            label={`${t(\"donationAmountLabel\", { min: formatCents(block.customMinCents, settings.currency) })} *`}\n            placeholder=\"10,00\"\n            value={customEuro}\n            onChange={setCustomEuro}\n          />\n        )}\n\n        <div style={{ display: \"grid\", gap: \"0.9rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(220px, 100%), 1fr))\" }}>\n          <TextInput label={`${t(\"fieldName\")} *`} autoComplete=\"name\" value={v.name} onChange={(x) => setV((p) => ({ ...p, name: x }))} />\n          <TextInput label={`${t(\"fieldEmail\")} *`} type=\"email\" autoComplete=\"email\" value={v.email} onChange={(x) => setV((p) => ({ ...p, email: x }))} />\n        </div>\n\n        {/* Honeypot */}\n        <input\n          type=\"text\"\n          tabIndex={-1}\n          autoComplete=\"off\"\n          value={hp}\n          onChange={(e) => setHp(e.target.value)}\n          style={{ position: \"absolute\", left: \"-9999px\", width: 1, height: 1 }}\n          aria-hidden\n        />\n\n        {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n\n        <button\n          type=\"submit\"\n          className=\"xicms-btn xicms-btn--primary\"\n          disabled={busy || !valid}\n          style={{ cursor: busy ? \"wait\" : \"pointer\", width: \"fit-content\", opacity: valid ? 1 : 0.5 }}\n        >\n          {busy ? t(\"busy\") : `${block.buttonLabel} ${valid ? formatCents(effectiveCents, settings.currency) : \"\"}`}\n        </button>\n      </form>\n    </Card>\n  );\n}\n\nexport const donationBlock = defineBlock({\n  type: \"donation\",\n  Render: DonationRender,\n  label: \"Donatie\",\n  icon: \"💛\",\n  defaults: () => ({\n    heading: \"Steun ons\",\n    amountsCents: [500, 1000, 2500],\n    allowCustom: true,\n    customMinCents: 100,\n    customMaxCents: 100_000,\n    buttonLabel: \"Doneer\",\n  }),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/ProductDetail.js

@@ -14,11 +14,13 @@ import {
   fetchProductBySlug,
   beeldOptie,
   readQueryParam,
+  slugUitAdres,
   uploadPersonalizationCall,
   useShopSettings,
   variantLabelFor
 } from "../lib.js";
 import { ProductCard } from "./ProductGrid.js";
+import { SeedImg } from "../../../media/ImageContext.js";
 function PersonalizationInputs({
   fields,
   siteId,
@@ -104,13 +106,14 @@ function ProductDetailRender({ block, siteId }) {
   );
   const [related, setRelated] = useState([]);
   const [choices, setChoices] = useState({});
+  const [vPreset, setVPreset] = useState(false);
   const [personalization, setPersonalization] = useState({});
   const [qty, setQty] = useState(1);
   const [manualImage, setManualImage] = useState(null);
   const [added, setAdded] = useState(false);
   useEffect(() => {
     if (serverData && "product" in serverData) return;
-    const slug = block.slug || readQueryParam("p") || "";
+    const slug = block.slug || slugUitAdres(settings.detailPath) || "";
     if (!slug) {
       setProduct(null);
       return;
@@ -129,6 +132,16 @@ function ProductDetailRender({ block, siteId }) {
     else void fetchActiveProducts(siteId).then(pick).catch(() => setRelated([]));
   }, [product?.id, block.showRelated, siteId]);
   const options = product?.options ?? [];
+  useEffect(() => {
+    if (vPreset || !product) return;
+    setVPreset(true);
+    const v = readQueryParam("v");
+    if (!v || !product.options?.length) return;
+    const parts = v.split("|");
+    if (parts.length !== product.options.length) return;
+    if (!parts.every((val, i) => product.options[i].values.includes(val))) return;
+    setChoices(Object.fromEntries(parts.map((val, i) => [i, val])));
+  }, [product, vPreset]);
   const persFields = product?.personalizationEnabled === false ? [] : product?.personalization ?? [];
   const allChosen = options.every((_, i) => Boolean(choices[i]));
   const variantKey = product && options.length > 0 && allChosen ? variantKeyFor(options.map((_, i) => choices[i])) : void 0;
@@ -209,11 +222,13 @@ function ProductDetailRender({ block, siteId }) {
         children: [
           /* @__PURE__ */ jsxs("div", { className: "xicms-shop-detail__media", children: [
             mainImage ? /* @__PURE__ */ jsx(
-              "img",
+              SeedImg,
               {
                 src: mainImage,
                 alt: product.name,
-                style: { width: "100%", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--xicms-radius, 12px)" }
+                priority: true,
+                sizes: "(max-width: 720px) 100vw, 50vw",
+                style: { width: "100%", height: "auto", aspectRatio: "1/1", objectFit: "cover", borderRadius: "var(--xicms-radius, 12px)" }
               }
             ) : /* @__PURE__ */ jsx(
               "div",
@@ -326,6 +341,7 @@ function ProductDetailRender({ block, siteId }) {
               siteId,
               currency: settings.currency,
               detailPath: settings.detailPath,
+              mooi: settings.mooieUrls,
               cartPath: settings.cartPath,
               t
             },

package/dist/modules/shop/blocks/ProductDetail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductDetail.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents, productPriceCents, variantKeyFor } from \"../../../schema/shopGeld\";\nimport type { ProductDetailBlockSchema, PersonalizationField } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { cartAdd } from \"../cartStore\";\nimport { AantalInvoer } from \"./AantalInvoer\";\nimport { useShopStrings } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchProductBySlug,\n  beeldOptie,\n  readQueryParam,\n  uploadPersonalizationCall,\n  useShopSettings,\n  variantLabelFor,\n  type StoredProduct,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\nimport { ProductCard } from \"./ProductGrid\";\n\ntype Blk = z.infer<typeof ProductDetailBlockSchema>;\ntype PersValue = Record<string, { text?: string; imagePath?: string; fileName?: string }>;\n\n/** Personalisatie-invoer (eigen tekst of afbeelding) onder de optie-selects. */\nfunction PersonalizationInputs({\n  fields,\n  siteId,\n  productId,\n  value,\n  currency,\n  onChange,\n}: {\n  fields: PersonalizationField[];\n  siteId: string;\n  productId: string;\n  value: PersValue;\n  currency: string;\n  onChange: (next: PersValue) => void;\n}) {\n  const t = useShopStrings();\n  const [uploading, setUploading] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  return (\n    <div className=\"xicms-shop-personalization\" style={{ display: \"grid\", gap: \"0.75rem\" }}>\n      {fields.map((f) => {\n        const v = value[f.key] ?? {};\n        const label = (\n          <span>\n            {f.label}\n            {f.required ? \" *\" : \"\"}\n            {f.priceCents > 0 && (\n              <span style={{ opacity: 0.7, marginLeft: 6, fontSize: \"0.9em\" }}>\n                {t(\"personalizationSurcharge\", { bedrag: formatCents(f.priceCents, currency) })}\n              </span>\n            )}\n          </span>\n        );\n        if (f.type === \"text\") {\n          return (\n            <label key={f.key} style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n              <input\n                className=\"xicms-input\"\n                type=\"text\"\n                maxLength={f.maxLength}\n                value={v.text ?? \"\"}\n                onChange={(e) => onChange({ ...value, [f.key]: { text: e.target.value } })}\n              />\n              <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>\n                {f.helpText ? `${f.helpText} · ` : \"\"}\n                {(v.text ?? \"\").length}/{f.maxLength}\n              </span>\n            </label>\n          );\n        }\n        return (\n          <div key={f.key} style={{ display: \"grid\", gap: 4 }}>\n            <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, flexWrap: \"wrap\" }}>\n              <label className=\"xicms-btn xicms-btn--secondary\" style={{ cursor: \"pointer\" }}>\n                {uploading === f.key\n                  ? t(\"personalizationUploading\")\n                  : v.imagePath\n                    ? t(\"personalizationUploaded\")\n                    : t(\"personalizationUpload\")}\n                <input\n                  type=\"file\"\n                  accept=\"image/jpeg,image/png,image/webp\"\n                  style={{ display: \"none\" }}\n                  onChange={async (e) => {\n                    const file = e.target.files?.[0];\n                    if (!file) return;\n                    setError(null);\n                    setUploading(f.key);\n                    try {\n                      const { path } = await uploadPersonalizationCall(siteId, productId, file);\n                      onChange({ ...value, [f.key]: { imagePath: path, fileName: file.name } });\n                    } catch (err) {\n                      setError(err instanceof Error && err.message === \"TOO_BIG\" ? t(\"personalizationTooBig\") : t(\"personalizationFailed\"));\n                    } finally {\n                      setUploading(null);\n                    }\n                  }}\n                />\n              </label>\n              {v.fileName && <span style={{ fontSize: \"0.85rem\", opacity: 0.75 }}>{v.fileName}</span>}\n            </div>\n            {f.helpText && <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>{f.helpText}</span>}\n          </div>\n        );\n      })}\n      {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n    </div>\n  );\n}\n\n/**\n * Productdetail — één generieke pagina met dit block toont elk product via `?p=<slug>`\n * (of een vast product via `block.slug`). Optie-selects met per-kleur-beeldwissel,\n * personalisatie (eigen naam/logo), voorraad-signalen en \"Ook leuk\"-rij.\n */\nfunction ProductDetailRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [product, setProduct] = useState<StoredProduct | null | undefined>(\n    serverData && \"product\" in serverData ? serverData.product : undefined,\n  );\n  const [related, setRelated] = useState<StoredProduct[]>([]);\n  const [choices, setChoices] = useState<Record<number, string>>({});\n  const [personalization, setPersonalization] = useState<PersValue>({});\n  const [qty, setQty] = useState(1);\n  const [manualImage, setManualImage] = useState<string | null>(null);\n  const [added, setAdded] = useState(false);\n\n  useEffect(() => {\n    if (serverData && \"product\" in serverData) return; // SSR-data aanwezig\n    const slug = block.slug || readQueryParam(\"p\") || \"\";\n    if (!slug) {\n      setProduct(null);\n      return;\n    }\n    void fetchProductBySlug(siteId, slug).then(setProduct).catch((e) => {\n      console.warn(\"[xicms] product laden mislukt:\", e);\n      setProduct(null);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.slug]);\n\n  // \"Ook leuk\": producten uit dezelfde categorie (server-set hergebruiken waar mogelijk).\n  useEffect(() => {\n    if (!block.showRelated || !product) return;\n    const pick = (all: StoredProduct[]) =>\n      setRelated(\n        all\n          .filter((x) => x.id !== product.id && x.categoryIds?.some((c) => product.categoryIds?.includes(c)))\n          .slice(0, 4),\n      );\n    if (serverData?.products) pick(serverData.products);\n    else void fetchActiveProducts(siteId).then(pick).catch(() => setRelated([]));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [product?.id, block.showRelated, siteId]);\n\n  const options = product?.options ?? [];\n  // Uitgeschakeld op het product? Dan tonen we de velden niet en rekent de server ze ook niet\n  // (zie resolvePersonalization) — de configuratie blijft wel bewaard voor later.\n  const persFields = product?.personalizationEnabled === false ? [] : (product?.personalization ?? []);\n  const allChosen = options.every((_, i) => Boolean(choices[i]));\n  const variantKey = product && options.length > 0 && allChosen\n    ? variantKeyFor(options.map((_, i) => choices[i]))\n    : undefined;\n  const variant = variantKey ? product?.variants?.find((v) => v.key === variantKey) : undefined;\n\n  /** Meerprijs van ingevulde personalisatie (per stuk). */\n  const persSurcharge = useMemo(\n    () =>\n      persFields.reduce((sum, f) => {\n        const v = personalization[f.key];\n        return v && (v.text || v.imagePath) ? sum + f.priceCents : sum;\n      }, 0),\n    [persFields, personalization],\n  );\n\n  const priceCents = useMemo(() => {\n    if (!product) return 0;\n    return productPriceCents(product, variantKey) + persSurcharge;\n  }, [product, variantKey, persSurcharge]);\n\n  /**\n   * Hoofdbeeld: handmatige thumbnail-keuze > foto van de gekozen waarde > eerste productfoto.\n   *\n   * Welke as het beeld stuurt is sinds 7.23 een instelling op het product (`imagePerValue`) en\n   * niet meer \"de as die toevallig Kleur heet\" — het mag dus net zo goed \"Print\" of \"Dessin\" zijn.\n   */\n  const beeldAs = product ? beeldOptie(product) : null;\n  const beeldIdx = beeldAs && product ? (product.options ?? []).findIndex((o) => o === beeldAs) : -1;\n  const gekozenWaarde = beeldIdx >= 0 ? choices[beeldIdx] : undefined;\n  const waardeImage = gekozenWaarde ? beeldAs?.images?.[gekozenWaarde] : undefined;\n  const mainImage = manualImage ?? waardeImage ?? product?.images?.[0];\n\n  /** Alle toonbare afbeeldingen: productfoto's + de unieke foto's per optiewaarde. */\n  const gallery = useMemo(() => {\n    if (!product) return [] as { url: string; label?: string }[];\n    const out: { url: string; label?: string }[] = (product.images ?? []).map((url) => ({ url }));\n    for (const [value, url] of Object.entries(beeldAs?.images ?? {})) {\n      if (!out.some((g) => g.url === url)) out.push({ url, label: value });\n    }\n    return out;\n  }, [product, beeldAs]);\n\n  const stockValue = options.length === 0 ? product?.stock : variant?.stock;\n  const outOfStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue <= 0);\n  const lowStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue > 0 && stockValue <= 5);\n  const variantInactive = variant !== undefined && variant.active === false;\n\n  if (product === undefined) return null;\n  if (product === null) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>\n          {t(\"productNotFound\")} <a href={settings.shopPath}>{t(\"backToShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  const persComplete = persFields.every((f) => {\n    if (!f.required) return true;\n    const v = personalization[f.key];\n    return Boolean(v && (v.text?.trim() || v.imagePath));\n  });\n\n  function addToCart() {\n    if (!product) return;\n    const filled: PersValue = {};\n    for (const f of persFields) {\n      const v = personalization[f.key];\n      if (v && (v.text?.trim() || v.imagePath)) filled[f.key] = v;\n    }\n    const persLabel = persFields\n      .filter((f) => filled[f.key])\n      .map((f) => `${f.label}: ${filled[f.key].text ?? filled[f.key].fileName ?? \"✓\"}`)\n      .join(\" · \");\n    cartAdd(\n      siteId,\n      {\n        productId: product.id,\n        slug: product.slug,\n        name: product.name,\n        variantKey,\n        variantLabel: variantKey ? variantLabelFor(options, variantKey) : undefined,\n        unitPriceCents: priceCents,\n        imageUrl: mainImage ?? product.images?.[0],\n        personalization: Object.keys(filled).length > 0 ? filled : undefined,\n        personalizationLabel: persLabel || undefined,\n      },\n      qty,\n    );\n    setAdded(true);\n  }\n\n  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive && persComplete;\n\n  return (\n    <>\n      <div\n        className=\"xicms-shop-detail\"\n        style={{ display: \"grid\", gap: \"2rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(320px, 100%), 1fr))\" }}\n      >\n        <div className=\"xicms-shop-detail__media\">\n          {mainImage ? (\n            <img\n              src={mainImage}\n              alt={product.name}\n              style={{ width: \"100%\", aspectRatio: \"1/1\", objectFit: \"cover\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          ) : (\n            <div\n              className=\"xicms-shop-detail__placeholder\"\n              aria-hidden=\"true\"\n              style={{ width: \"100%\", aspectRatio: \"1/1\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          )}\n          {gallery.length > 1 && (\n            <div style={{ display: \"flex\", gap: 8, marginTop: 8, flexWrap: \"wrap\" }}>\n              {gallery.map((g) => (\n                <button\n                  key={g.url}\n                  type=\"button\"\n                  title={g.label}\n                  onClick={() => setManualImage(g.url)}\n                  style={{\n                    padding: 0,\n                    border: g.url === mainImage ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid transparent\",\n                    borderRadius: 8,\n                    cursor: \"pointer\",\n                    background: \"none\",\n                  }}\n                >\n                  <img src={g.url} alt={g.label ?? \"\"} style={{ width: 64, height: 64, objectFit: \"cover\", borderRadius: 6, display: \"block\" }} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/*\n          Haken voor de bewerkmodus. De tekst van een product staat NIET in dit blok — het blok wijst\n          alleen een product aan (`slug`) en haalt de rest uit de productencollectie. Zonder deze\n          haken kon de editor daarom niets: het tandwiel opende een paneel met twee instellingen en\n          het potlood verscheen helemaal niet, want er viel in dit blok niets te bewerken. Terecht,\n          en toch precies verkeerd — je stond naar een productnaam te kijken die je niet kon wijzigen.\n          `data-xicms-product` zegt om welk product het gaat, `data-xicms-product-edit` welk veld\n          eronder ligt; de editor schrijft die rechtstreeks naar het productdocument.\n        */}\n        <div className=\"xicms-shop-detail__info\" data-xicms-product={product.id}>\n          <Heading level={1} data-xicms-product-edit=\"name\">{product.name}</Heading>\n          <p className=\"xicms-shop-detail__price\" style={{ fontSize: \"1.35rem\", fontWeight: 700, margin: \"0.5rem 0 1rem\" }}>\n            {product.compareAtCents !== undefined && product.compareAtCents > priceCents && (\n              <s style={{ opacity: 0.6, marginRight: 8, fontWeight: \"normal\" }}>\n                {formatCents(product.compareAtCents, settings.currency)}\n              </s>\n            )}\n            {formatCents(priceCents, settings.currency)}\n          </p>\n\n          {product.description && (\n            <p className=\"xicms-shop-detail__desc\" data-xicms-product-edit=\"description\" style={{ whiteSpace: \"pre-wrap\", margin: 0 }}>{product.description}</p>\n          )}\n\n          <div style={{ display: \"grid\", gap: \"0.75rem\", maxWidth: 420, marginTop: \"1rem\" }}>\n            {options.map((opt, i) => (\n              <Selector\n                key={opt.name}\n                label={opt.name}\n                placeholder={t(\"choose\")}\n                options={opt.values}\n                value={choices[i] ?? \"\"}\n                onChange={(v) => {\n                  setChoices((prev) => ({ ...prev, [i]: (v as string) ?? \"\" }));\n                  setManualImage(null);\n                  setAdded(false);\n                }}\n              />\n            ))}\n\n            {persFields.length > 0 && (\n              <PersonalizationInputs\n                fields={persFields}\n                siteId={siteId}\n                productId={product.id}\n                value={personalization}\n                currency={settings.currency}\n                onChange={(v) => {\n                  setPersonalization(v);\n                  setAdded(false);\n                }}\n              />\n            )}\n\n            <label className=\"xicms-shop-detail__qty\" style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{t(\"qty\")}</span>\n              <AantalInvoer value={qty} onChange={setQty} min={1} max={999} style={{ width: 90 }} />\n            </label>\n\n            {outOfStock && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"outOfStock\")}</Text>}\n            {variantInactive && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"variantUnavailable\")}</Text>}\n            {lowStock && !outOfStock && (\n              <Text style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n                {t(\"stockLeft\", { n: stockValue as number })}\n              </Text>\n            )}\n\n            {added ? (\n              <div role=\"status\" style={{ display: \"grid\", gap: 8 }}>\n                <Text>{t(\"added\")}</Text>\n                <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n                  <a className=\"xicms-btn xicms-btn--primary\" href={settings.cartPath}>{t(\"toCart\")}</a>\n                  <a className=\"xicms-btn xicms-btn--secondary\" href={settings.shopPath}>{t(\"continueShopping\")}</a>\n                </div>\n              </div>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"xicms-btn xicms-btn--primary\"\n                disabled={!canOrder}\n                onClick={addToCart}\n                style={{ cursor: canOrder ? \"pointer\" : \"not-allowed\", opacity: canOrder ? 1 : 0.5, width: \"fit-content\" }}\n              >\n                {t(\"addToCart\")}\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {block.showRelated && related.length > 0 && (\n        <div className=\"xicms-shop-related\" style={{ marginTop: \"3rem\" }}>\n          <Heading level={2}>{t(\"related\")}</Heading>\n          <div\n            className=\"xicms-shop-grid__items\"\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"repeat(auto-fill, minmax(min(200px, calc(50% - 1rem)), 1fr))\",\n              gap: \"1.25rem\",\n              marginTop: \"1rem\",\n            }}\n          >\n            {related.map((p) => (\n              <ProductCard\n                key={p.id}\n                product={p}\n                siteId={siteId}\n                currency={settings.currency}\n                detailPath={settings.detailPath}\n                cartPath={settings.cartPath}\n                t={t}\n              />\n            ))}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const productDetailBlock = defineBlock({\n  type: \"productDetail\",\n  Render: ProductDetailRender,\n  label: \"Productdetail\",\n  icon: \"🏷️\",\n  defaults: () => ({ showRelated: true }),\n});\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../../src/modules/shop/blocks/ProductDetail.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useMemo, useState } from \"react\";\nimport type { z } from \"zod\";\nimport { formatCents, productPriceCents, variantKeyFor } from \"../../../schema/shopGeld\";\nimport type { ProductDetailBlockSchema, PersonalizationField } from \"../../../schema/shop\";\nimport { defineBlock, type BlockRenderProps } from \"../../../blocks/registry\";\nimport { useBlockData } from \"../../../blocks/context\";\nimport { Card, Heading, Text } from \"../../../blocks/ui\";\nimport { Selector } from \"@astryxdesign/core/Selector\";\nimport { cartAdd } from \"../cartStore\";\nimport { AantalInvoer } from \"./AantalInvoer\";\nimport { useShopStrings } from \"../strings\";\nimport {\n  fetchActiveProducts,\n  fetchProductBySlug,\n  beeldOptie,\n  readQueryParam,\n  slugUitAdres,\n  uploadPersonalizationCall,\n  useShopSettings,\n  variantLabelFor,\n  type StoredProduct,\n} from \"../lib\";\nimport type { ShopPageData } from \"../types\";\nimport { ProductCard } from \"./ProductGrid\";\nimport { SeedImg } from \"../../../media/ImageContext\";\n\ntype Blk = z.infer<typeof ProductDetailBlockSchema>;\ntype PersValue = Record<string, { text?: string; imagePath?: string; fileName?: string }>;\n\n/** Personalisatie-invoer (eigen tekst of afbeelding) onder de optie-selects. */\nfunction PersonalizationInputs({\n  fields,\n  siteId,\n  productId,\n  value,\n  currency,\n  onChange,\n}: {\n  fields: PersonalizationField[];\n  siteId: string;\n  productId: string;\n  value: PersValue;\n  currency: string;\n  onChange: (next: PersValue) => void;\n}) {\n  const t = useShopStrings();\n  const [uploading, setUploading] = useState<string | null>(null);\n  const [error, setError] = useState<string | null>(null);\n\n  return (\n    <div className=\"xicms-shop-personalization\" style={{ display: \"grid\", gap: \"0.75rem\" }}>\n      {fields.map((f) => {\n        const v = value[f.key] ?? {};\n        const label = (\n          <span>\n            {f.label}\n            {f.required ? \" *\" : \"\"}\n            {f.priceCents > 0 && (\n              <span style={{ opacity: 0.7, marginLeft: 6, fontSize: \"0.9em\" }}>\n                {t(\"personalizationSurcharge\", { bedrag: formatCents(f.priceCents, currency) })}\n              </span>\n            )}\n          </span>\n        );\n        if (f.type === \"text\") {\n          return (\n            <label key={f.key} style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n              <input\n                className=\"xicms-input\"\n                type=\"text\"\n                maxLength={f.maxLength}\n                value={v.text ?? \"\"}\n                onChange={(e) => onChange({ ...value, [f.key]: { text: e.target.value } })}\n              />\n              <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>\n                {f.helpText ? `${f.helpText} · ` : \"\"}\n                {(v.text ?? \"\").length}/{f.maxLength}\n              </span>\n            </label>\n          );\n        }\n        return (\n          <div key={f.key} style={{ display: \"grid\", gap: 4 }}>\n            <span style={{ fontSize: \"0.9rem\" }}>{label}</span>\n            <div style={{ display: \"flex\", alignItems: \"center\", gap: 10, flexWrap: \"wrap\" }}>\n              <label className=\"xicms-btn xicms-btn--secondary\" style={{ cursor: \"pointer\" }}>\n                {uploading === f.key\n                  ? t(\"personalizationUploading\")\n                  : v.imagePath\n                    ? t(\"personalizationUploaded\")\n                    : t(\"personalizationUpload\")}\n                <input\n                  type=\"file\"\n                  accept=\"image/jpeg,image/png,image/webp\"\n                  style={{ display: \"none\" }}\n                  onChange={async (e) => {\n                    const file = e.target.files?.[0];\n                    if (!file) return;\n                    setError(null);\n                    setUploading(f.key);\n                    try {\n                      const { path } = await uploadPersonalizationCall(siteId, productId, file);\n                      onChange({ ...value, [f.key]: { imagePath: path, fileName: file.name } });\n                    } catch (err) {\n                      setError(err instanceof Error && err.message === \"TOO_BIG\" ? t(\"personalizationTooBig\") : t(\"personalizationFailed\"));\n                    } finally {\n                      setUploading(null);\n                    }\n                  }}\n                />\n              </label>\n              {v.fileName && <span style={{ fontSize: \"0.85rem\", opacity: 0.75 }}>{v.fileName}</span>}\n            </div>\n            {f.helpText && <span style={{ fontSize: \"0.75rem\", opacity: 0.6 }}>{f.helpText}</span>}\n          </div>\n        );\n      })}\n      {error && <Text role=\"alert\" style={{ color: \"var(--color-error, #c0392b)\" }}>{error}</Text>}\n    </div>\n  );\n}\n\n/**\n * Productdetail — één generieke pagina met dit block toont elk product via `?p=<slug>`\n * (of een vast product via `block.slug`). Optie-selects met per-kleur-beeldwissel,\n * personalisatie (eigen naam/logo), voorraad-signalen en \"Ook leuk\"-rij.\n */\nfunction ProductDetailRender({ block, siteId }: BlockRenderProps<Blk>) {\n  const settings = useShopSettings();\n  const t = useShopStrings();\n  const serverData = useBlockData<ShopPageData>(\"shop\");\n  const [product, setProduct] = useState<StoredProduct | null | undefined>(\n    serverData && \"product\" in serverData ? serverData.product : undefined,\n  );\n  const [related, setRelated] = useState<StoredProduct[]>([]);\n  const [choices, setChoices] = useState<Record<number, string>>({});\n  // Productlinks uit orders/mails (7.33): `?v=Roze|68` kiest de variant vooraf, zodat de winkelier\n  // en de klant direct op de bestelde uitvoering landen. Onbekende waarden worden genegeerd.\n  const [vPreset, setVPreset] = useState(false);\n  const [personalization, setPersonalization] = useState<PersValue>({});\n  const [qty, setQty] = useState(1);\n  const [manualImage, setManualImage] = useState<string | null>(null);\n  const [added, setAdded] = useState(false);\n\n  useEffect(() => {\n    if (serverData && \"product\" in serverData) return; // SSR-data aanwezig\n    const slug = block.slug || slugUitAdres(settings.detailPath) || \"\";\n    if (!slug) {\n      setProduct(null);\n      return;\n    }\n    void fetchProductBySlug(siteId, slug).then(setProduct).catch((e) => {\n      console.warn(\"[xicms] product laden mislukt:\", e);\n      setProduct(null);\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [siteId, block.slug]);\n\n  // \"Ook leuk\": producten uit dezelfde categorie (server-set hergebruiken waar mogelijk).\n  useEffect(() => {\n    if (!block.showRelated || !product) return;\n    const pick = (all: StoredProduct[]) =>\n      setRelated(\n        all\n          .filter((x) => x.id !== product.id && x.categoryIds?.some((c) => product.categoryIds?.includes(c)))\n          .slice(0, 4),\n      );\n    if (serverData?.products) pick(serverData.products);\n    else void fetchActiveProducts(siteId).then(pick).catch(() => setRelated([]));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [product?.id, block.showRelated, siteId]);\n\n  const options = product?.options ?? [];\n  useEffect(() => {\n    if (vPreset || !product) return;\n    setVPreset(true);\n    const v = readQueryParam(\"v\");\n    if (!v || !product.options?.length) return;\n    const parts = v.split(\"|\");\n    if (parts.length !== product.options.length) return;\n    if (!parts.every((val, i) => product.options![i].values.includes(val))) return;\n    setChoices(Object.fromEntries(parts.map((val, i) => [i, val])));\n  }, [product, vPreset]);\n  // Uitgeschakeld op het product? Dan tonen we de velden niet en rekent de server ze ook niet\n  // (zie resolvePersonalization) — de configuratie blijft wel bewaard voor later.\n  const persFields = product?.personalizationEnabled === false ? [] : (product?.personalization ?? []);\n  const allChosen = options.every((_, i) => Boolean(choices[i]));\n  const variantKey = product && options.length > 0 && allChosen\n    ? variantKeyFor(options.map((_, i) => choices[i]))\n    : undefined;\n  const variant = variantKey ? product?.variants?.find((v) => v.key === variantKey) : undefined;\n\n  /** Meerprijs van ingevulde personalisatie (per stuk). */\n  const persSurcharge = useMemo(\n    () =>\n      persFields.reduce((sum, f) => {\n        const v = personalization[f.key];\n        return v && (v.text || v.imagePath) ? sum + f.priceCents : sum;\n      }, 0),\n    [persFields, personalization],\n  );\n\n  const priceCents = useMemo(() => {\n    if (!product) return 0;\n    return productPriceCents(product, variantKey) + persSurcharge;\n  }, [product, variantKey, persSurcharge]);\n\n  /**\n   * Hoofdbeeld: handmatige thumbnail-keuze > foto van de gekozen waarde > eerste productfoto.\n   *\n   * Welke as het beeld stuurt is sinds 7.23 een instelling op het product (`imagePerValue`) en\n   * niet meer \"de as die toevallig Kleur heet\" — het mag dus net zo goed \"Print\" of \"Dessin\" zijn.\n   */\n  const beeldAs = product ? beeldOptie(product) : null;\n  const beeldIdx = beeldAs && product ? (product.options ?? []).findIndex((o) => o === beeldAs) : -1;\n  const gekozenWaarde = beeldIdx >= 0 ? choices[beeldIdx] : undefined;\n  const waardeImage = gekozenWaarde ? beeldAs?.images?.[gekozenWaarde] : undefined;\n  const mainImage = manualImage ?? waardeImage ?? product?.images?.[0];\n\n  /** Alle toonbare afbeeldingen: productfoto's + de unieke foto's per optiewaarde. */\n  const gallery = useMemo(() => {\n    if (!product) return [] as { url: string; label?: string }[];\n    const out: { url: string; label?: string }[] = (product.images ?? []).map((url) => ({ url }));\n    for (const [value, url] of Object.entries(beeldAs?.images ?? {})) {\n      if (!out.some((g) => g.url === url)) out.push({ url, label: value });\n    }\n    return out;\n  }, [product, beeldAs]);\n\n  const stockValue = options.length === 0 ? product?.stock : variant?.stock;\n  const outOfStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue <= 0);\n  const lowStock = Boolean(product?.trackStock && stockValue !== undefined && stockValue > 0 && stockValue <= 5);\n  const variantInactive = variant !== undefined && variant.active === false;\n\n  if (product === undefined) return null;\n  if (product === null) {\n    return (\n      <Card padding={4} variant=\"muted\">\n        <Text>\n          {t(\"productNotFound\")} <a href={settings.shopPath}>{t(\"backToShop\")}</a>\n        </Text>\n      </Card>\n    );\n  }\n\n  const persComplete = persFields.every((f) => {\n    if (!f.required) return true;\n    const v = personalization[f.key];\n    return Boolean(v && (v.text?.trim() || v.imagePath));\n  });\n\n  function addToCart() {\n    if (!product) return;\n    const filled: PersValue = {};\n    for (const f of persFields) {\n      const v = personalization[f.key];\n      if (v && (v.text?.trim() || v.imagePath)) filled[f.key] = v;\n    }\n    const persLabel = persFields\n      .filter((f) => filled[f.key])\n      .map((f) => `${f.label}: ${filled[f.key].text ?? filled[f.key].fileName ?? \"✓\"}`)\n      .join(\" · \");\n    cartAdd(\n      siteId,\n      {\n        productId: product.id,\n        slug: product.slug,\n        name: product.name,\n        variantKey,\n        variantLabel: variantKey ? variantLabelFor(options, variantKey) : undefined,\n        unitPriceCents: priceCents,\n        imageUrl: mainImage ?? product.images?.[0],\n        personalization: Object.keys(filled).length > 0 ? filled : undefined,\n        personalizationLabel: persLabel || undefined,\n      },\n      qty,\n    );\n    setAdded(true);\n  }\n\n  const canOrder = (options.length === 0 || allChosen) && !outOfStock && !variantInactive && persComplete;\n\n  return (\n    <>\n      <div\n        className=\"xicms-shop-detail\"\n        style={{ display: \"grid\", gap: \"2rem\", gridTemplateColumns: \"repeat(auto-fit, minmax(min(320px, 100%), 1fr))\" }}\n      >\n        <div className=\"xicms-shop-detail__media\">\n          {mainImage ? (\n            <SeedImg\n              src={mainImage}\n              alt={product.name}\n              priority\n              sizes=\"(max-width: 720px) 100vw, 50vw\"\n              style={{ width: \"100%\", height: \"auto\", aspectRatio: \"1/1\", objectFit: \"cover\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          ) : (\n            <div\n              className=\"xicms-shop-detail__placeholder\"\n              aria-hidden=\"true\"\n              style={{ width: \"100%\", aspectRatio: \"1/1\", background: \"var(--xicms-muted, #f1f1f1)\", borderRadius: \"var(--xicms-radius, 12px)\" }}\n            />\n          )}\n          {gallery.length > 1 && (\n            <div style={{ display: \"flex\", gap: 8, marginTop: 8, flexWrap: \"wrap\" }}>\n              {gallery.map((g) => (\n                <button\n                  key={g.url}\n                  type=\"button\"\n                  title={g.label}\n                  onClick={() => setManualImage(g.url)}\n                  style={{\n                    padding: 0,\n                    border: g.url === mainImage ? \"2px solid var(--xicms-primary, #333)\" : \"2px solid transparent\",\n                    borderRadius: 8,\n                    cursor: \"pointer\",\n                    background: \"none\",\n                  }}\n                >\n                  <img src={g.url} alt={g.label ?? \"\"} style={{ width: 64, height: 64, objectFit: \"cover\", borderRadius: 6, display: \"block\" }} />\n                </button>\n              ))}\n            </div>\n          )}\n        </div>\n\n        {/*\n          Haken voor de bewerkmodus. De tekst van een product staat NIET in dit blok — het blok wijst\n          alleen een product aan (`slug`) en haalt de rest uit de productencollectie. Zonder deze\n          haken kon de editor daarom niets: het tandwiel opende een paneel met twee instellingen en\n          het potlood verscheen helemaal niet, want er viel in dit blok niets te bewerken. Terecht,\n          en toch precies verkeerd — je stond naar een productnaam te kijken die je niet kon wijzigen.\n          `data-xicms-product` zegt om welk product het gaat, `data-xicms-product-edit` welk veld\n          eronder ligt; de editor schrijft die rechtstreeks naar het productdocument.\n        */}\n        <div className=\"xicms-shop-detail__info\" data-xicms-product={product.id}>\n          <Heading level={1} data-xicms-product-edit=\"name\">{product.name}</Heading>\n          <p className=\"xicms-shop-detail__price\" style={{ fontSize: \"1.35rem\", fontWeight: 700, margin: \"0.5rem 0 1rem\" }}>\n            {product.compareAtCents !== undefined && product.compareAtCents > priceCents && (\n              <s style={{ opacity: 0.6, marginRight: 8, fontWeight: \"normal\" }}>\n                {formatCents(product.compareAtCents, settings.currency)}\n              </s>\n            )}\n            {formatCents(priceCents, settings.currency)}\n          </p>\n\n          {product.description && (\n            <p className=\"xicms-shop-detail__desc\" data-xicms-product-edit=\"description\" style={{ whiteSpace: \"pre-wrap\", margin: 0 }}>{product.description}</p>\n          )}\n\n          <div style={{ display: \"grid\", gap: \"0.75rem\", maxWidth: 420, marginTop: \"1rem\" }}>\n            {options.map((opt, i) => (\n              <Selector\n                key={opt.name}\n                label={opt.name}\n                placeholder={t(\"choose\")}\n                options={opt.values}\n                value={choices[i] ?? \"\"}\n                onChange={(v) => {\n                  setChoices((prev) => ({ ...prev, [i]: (v as string) ?? \"\" }));\n                  setManualImage(null);\n                  setAdded(false);\n                }}\n              />\n            ))}\n\n            {persFields.length > 0 && (\n              <PersonalizationInputs\n                fields={persFields}\n                siteId={siteId}\n                productId={product.id}\n                value={personalization}\n                currency={settings.currency}\n                onChange={(v) => {\n                  setPersonalization(v);\n                  setAdded(false);\n                }}\n              />\n            )}\n\n            <label className=\"xicms-shop-detail__qty\" style={{ display: \"grid\", gap: 4 }}>\n              <span style={{ fontSize: \"0.9rem\" }}>{t(\"qty\")}</span>\n              <AantalInvoer value={qty} onChange={setQty} min={1} max={999} style={{ width: 90 }} />\n            </label>\n\n            {outOfStock && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"outOfStock\")}</Text>}\n            {variantInactive && <Text style={{ color: \"var(--color-error, #c0392b)\" }}>{t(\"variantUnavailable\")}</Text>}\n            {lowStock && !outOfStock && (\n              <Text style={{ color: \"var(--xicms-primary, #4d7fb0)\", fontWeight: 600 }}>\n                {t(\"stockLeft\", { n: stockValue as number })}\n              </Text>\n            )}\n\n            {added ? (\n              <div role=\"status\" style={{ display: \"grid\", gap: 8 }}>\n                <Text>{t(\"added\")}</Text>\n                <div style={{ display: \"flex\", gap: 12, flexWrap: \"wrap\" }}>\n                  <a className=\"xicms-btn xicms-btn--primary\" href={settings.cartPath}>{t(\"toCart\")}</a>\n                  <a className=\"xicms-btn xicms-btn--secondary\" href={settings.shopPath}>{t(\"continueShopping\")}</a>\n                </div>\n              </div>\n            ) : (\n              <button\n                type=\"button\"\n                className=\"xicms-btn xicms-btn--primary\"\n                disabled={!canOrder}\n                onClick={addToCart}\n                style={{ cursor: canOrder ? \"pointer\" : \"not-allowed\", opacity: canOrder ? 1 : 0.5, width: \"fit-content\" }}\n              >\n                {t(\"addToCart\")}\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {block.showRelated && related.length > 0 && (\n        <div className=\"xicms-shop-related\" style={{ marginTop: \"3rem\" }}>\n          <Heading level={2}>{t(\"related\")}</Heading>\n          <div\n            className=\"xicms-shop-grid__items\"\n            style={{\n              display: \"grid\",\n              gridTemplateColumns: \"repeat(auto-fill, minmax(min(200px, calc(50% - 1rem)), 1fr))\",\n              gap: \"1.25rem\",\n              marginTop: \"1rem\",\n            }}\n          >\n            {related.map((p) => (\n              <ProductCard\n                key={p.id}\n                product={p}\n                siteId={siteId}\n                currency={settings.currency}\n                detailPath={settings.detailPath}\n                mooi={settings.mooieUrls}\n                cartPath={settings.cartPath}\n                t={t}\n              />\n            ))}\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\nexport const productDetailBlock = defineBlock({\n  type: \"productDetail\",\n  Render: ProductDetailRender,\n  label: \"Productdetail\",\n  icon: \"🏷️\",\n  defaults: () => ({ showRelated: true }),\n});\n"],"mappings":"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","names":[]}

package/dist/modules/shop/blocks/ProductGrid.d.ts

@@ -6,11 +6,13 @@ export declare function PriceLine({ product, currency }: {
     product: StoredProduct;
     currency: string;
 }): import("react").JSX.Element;
-export declare function ProductCard({ product, siteId, currency, detailPath, cartPath, t, filterColor, }: {
+export declare function ProductCard({ product, siteId, currency, detailPath, cartPath, t, filterColor, mooi, }: {
     product: StoredProduct;
     siteId: string;
     currency: string;
     detailPath: string;
+    /** 8.14: nette productadressen (shop-instelling `mooieUrls`). */
+    mooi?: boolean;
     cartPath: string;
     t: ShopT;
     /** Actief kleurfilter uit het overzicht — toont bij voorkeur de foto van die kleur. */