@osimart/create-storefront 1.0.17 → 1.0.21

package/app/composables/useAddToCart.js

@@ -2,12 +2,14 @@ import CartServices from "#osi/services/CartServices";
 import { useToast } from "vue-toastification";
 import { useCart } from "./useCart";
 import { useSidebar } from "./useSidebar";
+import { isCustomizationError, needsPersonalization } from "./useProductCustomization";
 
 export function useAddToCart() {
   const router = useRouter();
-  const { fetchCart } = useCart();
+  const { apply: applyCart } = useCart();
   const { toggleCartSidebar } = useSidebar();
   const { cartType } = useStorefront();
+  const { productUrl } = useProductUrl();
 
   function openCartUi() {
     if (cartType.value === "PAGE") {
@@ -38,10 +40,12 @@ export function useAddToCart() {
       return;
     }
 
-    // If product has multiple variants, redirect to detail page
-    if (Array.isArray(product.product_variants) && product.product_variants.length > 1) {
-      const categorySlug = product.categories?.[0]?.category?.slugified_name || 'products';
-      router.push(`/${categorySlug}/${product.slugified_name}/`);
+    // Multiple variants, or a required personalization: picked on the product page.
+    if (
+      (Array.isArray(product.product_variants) && product.product_variants.length > 1) ||
+      needsPersonalization(product)
+    ) {
+      router.push(productUrl(product));
       return;
     }
 
@@ -58,10 +62,16 @@ export function useAddToCart() {
         variant: product.product_variants?.[0],
       });
       if (response) {
-        await fetchCart();
+        // The add already returned the whole cart.
+        applyCart(response);
         openCartUi();
       }
     } catch (error) {
+      // 400 { properties }: required personalization the list didn't know about.
+      if (isCustomizationError(error)) {
+        router.push(productUrl(product));
+        return;
+      }
       console.error("[useAddToCart] Error adding to cart:", error);
       try {
         const toast = useToast();

package/app/composables/useCart.js

@@ -1,10 +1,16 @@
-import CartServices from "#osi/services/CartServices";
+import CartServices, { cartLines } from "#osi/services/CartServices";
 import { clearCartToken } from "#osi/services/CartToken";
 
+/** A line's identity. Lines are keyed by order_item_id; `id` is the variant. */
+export const lineKey = (item) => String(item?.order_item_id ?? item ?? "");
+
 export function useCart() {
   // The raw server payload. Checkout needs it to build its order lines, so
   // it's kept rather than discarded after mapping.
   const cart = useState("cart-raw", () => null);
+  // Every line, add-ons included. Each has `order_item_id` (the line),
+  // `id` (the variant), `parent_item` (the parent line for an add-on, else
+  // null), `properties` (customization answers) and `customization_price`.
   const cartItems = useState("cart-items", () => []);
   const cartTotal = useState("cart-total", () => 0);
   const loading = useState("cart-loading", () => false);
@@ -18,22 +24,37 @@ export function useCart() {
     if (!response) return response;
     cart.value = response;
     cartTotal.value = response.total_price || 0;
-    cartItems.value = Object.entries(response.cart || {}).map(([id, item]) => ({
-      id,
-      ...item,
-    }));
+    cartItems.value = cartLines(response);
     return response;
   }
 
-  const isUpdating = (item) => {
-    const id = item?.id ?? item;
-    return updatingIds.value.includes(id);
-  };
+  /** Lines the shopper controls: products, not the add-ons hanging off them. */
+  const topLevelItems = computed(() => cartItems.value.filter((item) => !item.parent_item));
+
+  /** Add-on lines (gift wrap, box…) of one line. */
+  const childrenOf = (item) =>
+    cartItems.value.filter((child) => child.parent_item && String(child.parent_item) === lineKey(item));
+
+  /**
+   * Parents each followed by their add-ons — the order every cart list renders
+   * in. An add-on whose parent is missing (shouldn't happen) goes last rather
+   * than disappearing.
+   */
+  const orderedItems = computed(() => {
+    const parents = topLevelItems.value;
+    const parentKeys = new Set(parents.map(lineKey));
+    return [
+      ...parents.flatMap((parent) => [parent, ...childrenOf(parent)]),
+      ...cartItems.value.filter((item) => item.parent_item && !parentKeys.has(String(item.parent_item))),
+    ];
+  });
 
-  function markUpdating(id, busy) {
+  const isUpdating = (item) => updatingIds.value.includes(lineKey(item));
+
+  function markUpdating(key, busy) {
     updatingIds.value = busy
-      ? [...updatingIds.value, id]
-      : updatingIds.value.filter((existing) => existing !== id);
+      ? [...updatingIds.value, key]
+      : updatingIds.value.filter((existing) => existing !== key);
   }
 
   async function fetchCart() {
@@ -49,29 +70,44 @@ export function useCart() {
   }
 
   /**
-   * Add or remove quantity on one line. Per-line busy state, not a single
+   * Change one line, by its order_item_id. Per-line busy state, not a single
    * global flag — one slow line shouldn't freeze the controls on the others.
    *
+   *   edit        quantity = the line's new quantity
+   *   remove      quantity = how many to take off
+   *   remove_all  deletes the line (and its add-ons, server-side)
+   *
+   * Add-on lines are ignored: they follow their parent.
+   *
    * Throws on failure so the caller can decide how to surface it (the drawer
    * has useApiErrorToast, checkout has its own extractErrorMessage).
    */
   async function editItem(item, action, quantity) {
-    const id = item?.id ?? item;
-    if (!id || isUpdating(id)) return null;
+    const key = lineKey(item);
+    if (!item?.order_item_id || item.parent_item || isUpdating(key)) return null;
 
-    const step = quantity ?? item?.quantity_step ?? 1;
-    markUpdating(id, true);
+    markUpdating(key, true);
     try {
-      return apply(await CartServices.EditCart(id, step, action));
+      return apply(await CartServices.editLine(item, action, quantity));
     } finally {
-      markUpdating(id, false);
+      markUpdating(key, false);
     }
   }
 
-  const increaseItem = (item) => editItem(item, "add");
-  const decreaseItem = (item) => editItem(item, "remove");
-  // Remove is a decrease by the full quantity — the API has no delete verb.
-  const removeItem = (item) => editItem(item, "remove", item?.quantity);
+  const step = (item) => Number(item?.quantity_step) || 1;
+
+  // "add" with a variant id would add a new plain line (no customization),
+  // so increasing a line sets its quantity instead.
+  const increaseItem = (item) =>
+    editItem(item, "edit", (Number(item?.quantity) || 0) + step(item));
+  const decreaseItem = (item) => editItem(item, "remove", step(item));
+  const removeItem = (item) => editItem(item, "remove_all");
+
+  /** How many of a variant the shopper has, across all its lines. */
+  const quantityOf = (variantId) =>
+    topLevelItems.value
+      .filter((item) => String(item.id) === String(variantId))
+      .reduce((total, item) => total + (Number(item.quantity) || 0), 0);
 
   /**
    * Call only once the server has confirmed there's nothing left to pay. The
@@ -87,17 +123,22 @@ export function useCart() {
     updatingIds.value = [];
   }
 
+  // Header badge: products the shopper picked, not their add-on lines.
   const count = computed(() =>
-    cartItems.value.reduce((total, item) => total + (item.quantity || 0), 0),
+    topLevelItems.value.reduce((total, item) => total + (Number(item.quantity) || 0), 0),
   );
 
   return {
     cart,
     cartItems,
+    topLevelItems,
+    orderedItems,
+    childrenOf,
     cartTotal,
     loading,
     count,
     isUpdating,
+    quantityOf,
     fetchCart,
     editItem,
     increaseItem,
@@ -106,4 +147,4 @@ export function useCart() {
     apply,
     clear,
   };
-}
+}

package/app/composables/useCheckout.js

@@ -1,6 +1,7 @@
 import checkoutServices from "~/services/CheckoutServices";
 import utilsServices from "~/services/UtilsServices";
 import paymentServices from "~/services/PaymentServices";
+import UserServices from "~/services/UserServices";
 import { authBus } from "~/services/AuthBus";
 import { useToast } from "vue-toastification";
 import { eventBus } from "~/utils/eventBus";
@@ -74,11 +75,14 @@ export function useCheckout() {
   const {
     cart: rawCart,
     cartItems,
+    orderedItems,
+    topLevelItems,
     cartTotal,
     loading: cartLoading,
     isUpdating,
     fetchCart,
-    editItem,
+    increaseItem,
+    decreaseItem,
     removeItem,
   } = useCart();
 
@@ -97,6 +101,11 @@ export function useCheckout() {
   // --- user ---
   const isLoggedIn = ref(false);
   const needsUserInfo = ref(true);
+  // Phone saved on the customer's profile at load. Typing in the field must
+  // not flip this, so it's tracked apart from formData.mobile_number.
+  const profileHasPhone = ref(false);
+  // Guests, and logged-in customers with no phone on file, get PhoneNumInput.
+  const needsPhoneInput = computed(() => !isLoggedIn.value || !profileHasPhone.value);
   const userAddresses = ref([]);
 
   // --- reference data ---
@@ -156,14 +165,23 @@ export function useCheckout() {
   // ================================================================
   // COMPUTED
   // ================================================================
-  // Template keeps its original names.
-  const CartItems = computed(() => cartItems.value);
+  // Template keeps its original names. Every line, each product followed by
+  // its add-on lines (gift wrap…), which render nested with no stepper.
+  const CartItems = computed(() => orderedItems.value);
+  // The products the shopper picked (thumbnails strip, item count).
+  const TopLevelItems = computed(() => topLevelItems.value);
   const total_price = computed(() => cartTotal.value);
 
   const totalItemsCount = computed(() =>
-    CartItems.value.reduce((sum, item) => sum + Number(item.quantity || 0), 0),
+    TopLevelItems.value.reduce((sum, item) => sum + Number(item.quantity || 0), 0),
   );
 
+  // Checkout re-checks each line's customization against the product's
+  // current setup. When the merchant changed it (field made required, option
+  // deleted, add-on changed) placeOrder answers { cart: "The options for X
+  // have changed…" }: shown as a banner that links to the lines.
+  const cartError = ref("");
+
   const isLoading = computed(() => cartLoading.value || needsUserInfo.value);
 
   const selectedAddress = computed(() =>
@@ -243,7 +261,7 @@ export function useCheckout() {
       email_required: "Email",
       first_name: "First name",
       last_name: "Last name",
-      ...(isLoggedIn.value ? {} : { mobile_number_required: "Phone number" }),
+      ...(needsPhoneInput.value ? { mobile_number_required: "Phone number" } : {}),
     };
     return Object.keys(labels)
       .filter((key) => formErrors.value[key])
@@ -269,11 +287,11 @@ export function useCheckout() {
     () => !!(formErrors.value.email || formErrors.value.email_required),
   );
   const phoneErrorMessage = computed(() =>
-    isLoggedIn.value ? "" : formErrors.value.mobile_number || "",
+    needsPhoneInput.value ? formErrors.value.mobile_number || "" : "",
   );
   const phoneHasError = computed(
     () =>
-      !isLoggedIn.value &&
+      needsPhoneInput.value &&
       !!(formErrors.value.mobile_number || formErrors.value.mobile_number_required),
   );
 
@@ -293,13 +311,26 @@ export function useCheckout() {
       toast.error(extractErrorMessage(error));
     }
   }
+  // Each targets one line by order_item_id; add-on lines are never edited
+  // directly (useCart ignores them, the template offers no controls).
   const increaseQuantity = (item) =>
-    mutateCart(() => editItem(item, "add"), "Error adding to cart:");
+    mutateCart(() => increaseItem(item), "Error adding to cart:");
   const decreaseQuantity = (item) =>
-    mutateCart(() => editItem(item, "remove"), "Error decreasing quantity:");
+    mutateCart(() => decreaseItem(item), "Error decreasing quantity:");
   const deleteItem = (item) =>
     mutateCart(() => removeItem(item), "Error removing from cart:");
 
+  /** "Review cart" on the banner: bring the line items into view. */
+  function reviewCart() {
+    const desktop = typeof window !== "undefined" && window.matchMedia("(min-width: 1024px)").matches;
+    if (!desktop) mobileSummaryOpen.value = true;
+    nextTick(() => {
+      document
+        .querySelector(desktop ? "[data-checkout-lines='rail']" : "[data-checkout-lines='mobile']")
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
+
   // ================================================================
   // REFERENCE DATA
   // ================================================================
@@ -347,6 +378,7 @@ export function useCheckout() {
       formData.last_name = info.last_name || "";
       formData.email = info.email || "";
       formData.mobile_number = info.mobile_number || "";
+      profileHasPhone.value = !!info.mobile_number;
     }
   }
 
@@ -581,7 +613,7 @@ export function useCheckout() {
     }
     if (!formData.payment_method_id)
       errors.payment_method_id = "Payment method is required.";
-    if (!isLoggedIn.value) {
+    if (needsPhoneInput.value) {
       if (!formData.mobile_number) {
         errors.mobile_number_required = true;
       } else if (!phoneNumberResults.value?.isValid) {
@@ -704,6 +736,27 @@ export function useCheckout() {
 
     try {
       isCheckingOut.value = true;
+      // Logged-in customer with no phone on file: save it to the profile
+      // first, so the order (and future checkouts) have it.
+      if (isLoggedIn.value && !profileHasPhone.value) {
+        try {
+          await UserServices.updateUserDetail({
+            first_name: formData.first_name,
+            last_name: formData.last_name,
+            email: formData.email,
+            mobile_number: formData.mobile_number,
+          });
+          profileHasPhone.value = true;
+          authBus.checkAuth();
+        } catch (error) {
+          const data = error?.data;
+          const msg =
+            (data && typeof data === "object" && Object.values(data).flat()[0]) ||
+            "Couldn't save your phone number. Please try again.";
+          toast.error(msg);
+          return;
+        }
+      }
       const response = await checkoutServices.placeOrder(payload);
       placedOrderId.value = response.order_id;
       sessionStorage.setItem("orderId", response.order_id);
@@ -734,6 +787,13 @@ export function useCheckout() {
     } catch (error) {
       console.error("Error placing order:", error);
       if (handleOrderPromoError(error)) return;
+      const data = errorData(error);
+      if (data && typeof data === "object" && !Array.isArray(data) && data.cart) {
+        cartError.value = [].concat(data.cart).join(" ");
+        await nextTick();
+        if (typeof window !== "undefined") window.scrollTo({ top: 0, behavior: "smooth" });
+        return;
+      }
       toast.error(extractErrorMessage(error));
     } finally {
       isCheckingOut.value = false;
@@ -831,6 +891,12 @@ export function useCheckout() {
     refreshFreeDelivery();
   });
 
+  // Any cart change (the shopper removed / re-added the line) clears the
+  // "options have changed" banner; the next attempt re-checks server-side.
+  watch(cartItems, () => {
+    cartError.value = "";
+  });
+
   watch(phoneNumberResults, (results) => {
     if (formErrors.value.mobile_number && results?.isValid) {
       clearFieldError("mobile_number");
@@ -866,15 +932,19 @@ export function useCheckout() {
 
     // cart
     CartItems,
+    TopLevelItems,
     total_price,
     totalItemsCount,
     isItemUpdating,
     increaseQuantity,
     decreaseQuantity,
     deleteItem,
+    cartError,
+    reviewCart,
 
     // user + form
     isLoggedIn,
+    needsPhoneInput,
     formData,
     formErrors,
     clearFieldError,

package/app/composables/useProductCustomization.js

@@ -0,0 +1,186 @@
+import { computed, nextTick, reactive, watch } from "vue";
+
+// 0 is a valid NUMBER answer, so only null / undefined / false / blank are empty.
+const EMPTY = (value) =>
+  value === null || value === undefined || value === false ||
+  (typeof value === "string" && value.trim() === "");
+
+const sameId = (a, b) => a != null && b != null && String(a) === String(b);
+
+/**
+ * Product customization answers, scoped to the product and variant shown.
+ *
+ * `product` and `selectedVariant` are refs; the variant is the variant object
+ * (its `id` is checked against each set's excluded_variants).
+ *
+ * The backend validates and prices everything again on add to cart; the
+ * prices here are only a preview.
+ */
+export function useProductCustomization(product, selectedVariant) {
+  const values = reactive({});
+  const errors = reactive({});
+
+  // A set is hidden for the selected variant when it's in excluded_variants.
+  // No variant picked yet: show every set.
+  const visibleSets = computed(() => {
+    const variantId = selectedVariant.value?.id;
+    return (product.value?.customization_sets || []).filter(
+      (set) => variantId == null || !(set.excluded_variants || []).some((id) => sameId(id, variantId)),
+    );
+  });
+  const visibleFields = computed(() =>
+    visibleSets.value.flatMap((set) => set.customization_fields || []),
+  );
+
+  const hasCustomization = computed(() => visibleFields.value.length > 0);
+  const hasRequired = computed(() =>
+    (product.value?.customization_sets || []).some((set) =>
+      (set.customization_fields || []).some((field) => field.required),
+    ),
+  );
+
+  // A variant change that hides a set drops its answers (and their price);
+  // answers for fields still visible are kept.
+  watch(visibleFields, (fields) => {
+    const keys = new Set(fields.map((field) => field.key));
+    Object.keys(values).forEach((key) => { if (!keys.has(key)) delete values[key]; });
+    Object.keys(errors).forEach((key) => { if (!keys.has(key)) delete errors[key]; });
+  }, { immediate: true });
+
+  function optionFor(field) {
+    return field.options?.find((option) => sameId(option.id, values[field.key])) || null;
+  }
+
+  /** What a filled field costs: { delta } on the line, or { addon } as its own line. */
+  function costOf(field) {
+    if (EMPTY(values[field.key])) return null;
+    if (field.type === "SELECT") {
+      const option = optionFor(field);
+      if (!option) return null;
+      // option.price_delta null means "use the field's price", not 0.
+      return option.addon_variant
+        ? { addon: option.addon_variant }
+        : { delta: Number(option.price_delta ?? field.price_delta ?? 0) || 0 };
+    }
+    return field.addon_variant
+      ? { addon: field.addon_variant }
+      : { delta: Number(field.price_delta) || 0 };
+  }
+
+  const deltaPerUnit = computed(() => visibleFields.value.reduce(
+    (sum, field) => sum + (costOf(field)?.delta || 0), 0,
+  ));
+  const addons = computed(() =>
+    visibleFields.value.map(costOf).filter((cost) => cost?.addon).map((cost) => cost.addon),
+  );
+  const addonsPerUnit = computed(() =>
+    addons.value.reduce((sum, addon) => sum + (Number(addon.price) || 0), 0),
+  );
+
+  /** Scroll the first field with an error into view. */
+  function scrollToFirstError() {
+    if (typeof document === "undefined") return;
+    const first = visibleFields.value.find((field) => errors[field.key]);
+    if (!first) return;
+    nextTick(() => {
+      const el = [...document.querySelectorAll(".osi-pdp-customization [data-key]")]
+        .find((node) => node.dataset.key === String(first.key));
+      el?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  }
+
+  function validate() {
+    Object.keys(errors).forEach((key) => delete errors[key]);
+    for (const field of visibleFields.value) {
+      const value = values[field.key];
+      if (EMPTY(value)) {
+        if (field.required) errors[field.key] = `${field.label} is required.`;
+        continue;
+      }
+      if (field.type === "NUMBER" && Number.isNaN(Number(value))) {
+        errors[field.key] = `${field.label} must be a number.`;
+      } else if (["TEXT", "TEXTAREA"].includes(field.type) && field.max_length && String(value).trim().length > field.max_length) {
+        errors[field.key] = `${field.label} must be at most ${field.max_length} characters.`;
+      }
+    }
+    const ok = Object.keys(errors).length === 0;
+    if (!ok) scrollToFirstError();
+    return ok;
+  }
+
+  /** Add-to-cart `properties`: filled, visible fields only, keyed by field key. */
+  const payload = computed(() => {
+    const result = {};
+    for (const field of visibleFields.value) {
+      const value = values[field.key];
+      if (EMPTY(value)) continue;
+      if (field.type === "CHECKBOX") result[field.key] = true;
+      else if (field.type === "NUMBER") result[field.key] = Number(value);
+      else if (field.type === "SELECT") result[field.key] = value; // the option id, not its text
+      else result[field.key] = String(value).trim();
+    }
+    return result;
+  });
+
+  /**
+   * Backend 400 { properties: { key: message } } -> messages under the fields.
+   * Returns false when nothing matched a visible field, so the caller shows
+   * the error some other way.
+   */
+  function applyServerErrors(error) {
+    const data = error?.data ?? error?.response?._data ?? error?.response?.data;
+    const serverErrors = data?.properties;
+    if (!serverErrors) return false;
+    if (typeof serverErrors !== "object") return false;
+    const keys = new Set(visibleFields.value.map((field) => field.key));
+    let matched = false;
+    for (const [key, message] of Object.entries(serverErrors)) {
+      if (!keys.has(key)) continue;
+      errors[key] = Array.isArray(message) ? message.join(" ") : String(message);
+      matched = true;
+    }
+    if (matched) scrollToFirstError();
+    return matched;
+  }
+
+  function reset() {
+    Object.keys(values).forEach((key) => delete values[key]);
+    Object.keys(errors).forEach((key) => delete errors[key]);
+  }
+
+  return {
+    values,
+    errors,
+    visibleSets,
+    visibleFields,
+    hasCustomization,
+    hasRequired,
+    deltaPerUnit,
+    addons,
+    addonsPerUnit,
+    costOf,
+    validate,
+    payload,
+    applyServerErrors,
+    scrollToFirstError,
+    reset,
+  };
+}
+
+/**
+ * A product with a required customization field can't be added from a card:
+ * the answers are picked on its page. Lists usually don't carry
+ * `customization_sets`, so this only catches what's known up front; the
+ * backend's 400 { properties } catches the rest (isCustomizationError).
+ */
+export function needsPersonalization(product) {
+  return !!product?.customization_sets?.some((set) =>
+    (set.customization_fields || []).some((field) => field.required),
+  );
+}
+
+/** Whether an add-to-cart error is a customization rejection (400 { properties }). */
+export function isCustomizationError(error) {
+  const data = error?.data ?? error?.response?._data ?? error?.response?.data;
+  return !!(data && typeof data === "object" && !Array.isArray(data) && data.properties);
+}

package/app/composables/useProductDetail.js

@@ -1,5 +1,6 @@
 import ProductServices from "#osi/services/ProductServices";
 import CartServices from "#osi/services/CartServices";
+import { useProductCustomization } from "#osi/composables/useProductCustomization";
 
 /**
  * Product detail state — the whole of Terazar/Maqui's product page logic, lifted
@@ -334,6 +335,29 @@ export function createProductDetail({ product, settings = {}, loading = false }
     return { gallery: [...unique].sort((a, b) => order(a) - order(b)) };
   });
 
+  const customization = useProductCustomization(p, exactMatchVariant);
+
+  /**
+   * Price preview with customization: per-unit fees on the line, add-on items
+   * charged as their own lines. Only a preview — the cart total from the
+   * backend is what's charged. Null until something adds to the price.
+   */
+  const customizationPreview = computed(() => {
+    const delta = customization.deltaPerUnit.value;
+    const addonUnit = customization.addonsPerUnit.value;
+    if (!(delta > 0) && !(addonUnit > 0)) return null;
+    const qty = Number(quantity.value) || 1;
+    const line = pricing.value.total?.after ?? (Number(priceRange.value?.min) || 0) * qty;
+    const total = round2(line + (delta + addonUnit) * qty);
+    return {
+      delta,
+      addons: addonUnit,
+      quantity: qty,
+      total,
+      text: { delta: formatMoney(delta), addons: formatMoney(addonUnit), total: formatMoney(total) },
+    };
+  });
+
   function selectVariant(value) {
     if (value?.isAvailable === false) return;
     variants.selectVariant(value);
@@ -745,19 +769,25 @@ export function createProductDetail({ product, settings = {}, loading = false }
       return false;
     }
 
+    // Required / max length / number checks; scrolls to the first bad field.
+    if (!customization.validate()) return false;
+
     isAddingToCart.value = true;
     try {
       await CartServices.EditCart(exactMatchVariant.value.id, quantity.value, "add", {
         product: p.value,
         variant: exactMatchVariant.value,
-      });
+      }, customization.payload.value);
       await fetchCart();
+      customization.reset();
 
       if (buyNow) router.push("/checkout");
       else openCartUi();
 
       return true;
     } catch (error) {
+      // 400 { properties: { key: message } }: shown under each field.
+      if (customization.applyServerErrors(error)) return false;
       showApiError(error, "Couldn't add that to your cart.");
       return false;
     } finally {
@@ -875,6 +905,9 @@ export function createProductDetail({ product, settings = {}, loading = false }
 
   function resetSelections() {
     variants.reset();
+    // Field keys repeat across products (e.g. "engraving"), so answers never
+    // carry over to the next product.
+    customization.reset();
     quantity.value = quantityStep.value;
     showError.value = false;
   }
@@ -915,6 +948,10 @@ export function createProductDetail({ product, settings = {}, loading = false }
     showError,
     resetSelections,
 
+    // customization
+    customization,
+    customizationPreview,
+
     // price
     pricing,
     priceRange,
@@ -978,4 +1015,4 @@ export function provideProductDetail(context) {
  */
 export function useProductDetail() {
   return inject(PRODUCT_DETAIL_KEY, null);
-}
+}