@osimart/create-storefront 1.0.20 → 1.0.22

package/app/composables/useProductItems.js

@@ -1,3 +1,4 @@
+import { isColorType } from "#osi/composables/useProductVariants";
 /**
  * PRODUCT_LIST's items — products in the one shape the card template reads.
  *
@@ -147,7 +148,8 @@ export function useProductItems(section, products, options = {}) {
     return Number(product.remaining_stock) <= 0;
   }
 
-  const isColorName = (name) => ["color", "colour"].includes(String(name).toLowerCase());
+  // By the option's display_type (the name only for older rows).
+  const isColorOption = (type) => isColorType(type);
 
   /**
    * Every option (Color, Size, …) with the values that have a variant behind
@@ -163,10 +165,10 @@ export function useProductItems(section, products, options = {}) {
           const value = (variant.values ?? []).find((v) => v.type === type.id);
           if (!value || seen.has(value.id)) continue;
           seen.add(value.id);
-          const color = isColorName(type.name) ? value.hex_code || "" : "";
+          const color = isColorOption(type) ? value.hex_code || "" : "";
           values.push({ key: value.id, name: value.name || value.value || "", color });
         }
-        return { key: type.id, name: type.name, isColor: isColorName(type.name), values };
+        return { key: type.id, name: type.name, isColor: isColorOption(type), values };
       })
       .filter((option) => option.values.length);
   }

package/app/composables/useProductVariants.js

@@ -17,6 +17,37 @@
  * @param {object|Ref|(() => object)} product pass a getter — the card is
  *   rendered in a v-for and the product prop changes identity on re-fetch.
  */
+/**
+ * Is this option (a vary_by type / a filter) drawn as colour swatches?
+ * Its display_type decides ("COLOR" — case doesn't matter). Only a row from an
+ * older API with no display_type at all falls back to the name (Color /
+ * Colour), so a type named "Color" set to buttons shows buttons.
+ */
+export function isColorType(type) {
+  const display = type?.display_type;
+  if (display !== undefined && display !== null && display !== "") {
+    return String(display).toLowerCase() === "color";
+  }
+  return ["color", "colour"].includes(String(type?.name ?? "").toLowerCase());
+}
+
+/**
+ * Sold out for a picked variant — the product page's rule: the variant's own
+ * stock decides once one is picked (one that doesn't track inventory is always
+ * available); before that, the product's status, then its stock.
+ */
+export function isVariantSoldOut(product, variant = null) {
+  const out = (n) => n !== null && n !== undefined && Number(n) <= 0;
+  if (variant?.id) {
+    if (!variant.track_inventory) return false;
+    return out(variant.remaining_stock);
+  }
+  const status = product?.status;
+  if (status === "In Stock" || status === "On Demand") return false;
+  if (status === "Out of Stock") return true;
+  return out(product?.remaining_stock);
+}
+
 export function useProductVariants(product) {
   const p = computed(() => toValue(product) ?? {});
 
@@ -32,7 +63,7 @@ export function useProductVariants(product) {
   );
 
   const colorType = computed(
-    () => variantTypes.value.find((type) => type.name === "Color") ?? null
+    () => variantTypes.value.find((type) => isColorType(type)) ?? null
   );
 
   /** Distinct colour values that actually have a variant behind them. */

package/app/composables/useQuickShop.js

@@ -1,4 +1,5 @@
 import CartServices from "#osi/services/CartServices";
+import { isCustomizationError, needsPersonalization } from "./useProductCustomization";
 
 /**
  * Quick-shop: pick a variant and add to cart without leaving the grid.
@@ -26,6 +27,14 @@ export function useQuickShop({ product, variants, onAdded, closeOnAdd = true } =
 
   const { fetchCart } = useCart();
   const { showApiError } = useApiErrorToast();
+  const { productUrl } = useProductUrl();
+  const router = useRouter();
+
+  /** Required personalization: answered on the product page, not here. */
+  function goPersonalize() {
+    close();
+    router.push(productUrl(p.value));
+  }
 
   // Mobile only: the sheet covers the page, the desktop overlay doesn't.
   useBodyScrollLock(() => mode.value === "MOBILE");
@@ -61,6 +70,11 @@ export function useQuickShop({ product, variants, onAdded, closeOnAdd = true } =
       return false;
     }
 
+    if (needsPersonalization(p.value)) {
+      goPersonalize();
+      return false;
+    }
+
     adding.value = true;
     try {
       await CartServices.EditCart(
@@ -74,6 +88,11 @@ export function useQuickShop({ product, variants, onAdded, closeOnAdd = true } =
       if (closeOnAdd) close();
       return true;
     } catch (error) {
+      // 400 { properties }: the product needs personalizing first.
+      if (isCustomizationError(error)) {
+        goPersonalize();
+        return false;
+      }
       // Stock and cart-limit errors come back as field errors, so they need the
       // flattening — a bare error.message here would print "[object Object]".
       flashError(showApiError(error, "Couldn't add that to your cart."));
@@ -111,5 +130,6 @@ export function useQuickShop({ product, variants, onAdded, closeOnAdd = true } =
     addVariant,
     addSelected,
     flashError,
+    goPersonalize,
   };
 }

package/app/logic/components/CartDrawer.js

@@ -1,4 +1,3 @@
-import CartServices from "#osi/services/CartServices";
 import ProductServices from "#osi/services/ProductServices";
 
 export default function useLogic() {
@@ -33,7 +32,7 @@ export default function useLogic() {
   const txt = (key) => String(t(settings.value[key]) ?? "").trim() || TEXT_DEFAULTS[key] || "";
   const scheme = useColorScheme(computed(() => settings.value.CART_DRAWER_COLOR_SCHEME || null));
   const { isCartSidebarVisible, toggleCartSidebar } = useSidebar();
-  const { cartItems, cartTotal, count, fetchCart } = useCart();
+  const { cartItems, topLevelItems, childrenOf, cartTotal, count, fetchCart, isUpdating, increaseItem, decreaseItem, removeItem } = useCart();
   const { showApiError } = useApiErrorToast();
   const { mediaUrl } = useMediaUrl();
   const { productUrl } = useProductUrl();
@@ -115,6 +114,7 @@ export default function useLogic() {
     if (s.CART_DRAWER_RECS_CARD_BACKGROUND) style["--recs-card-bg"] = s.CART_DRAWER_RECS_CARD_BACKGROUND;
     if (s.CART_DRAWER_RECS_PRICE_COLOR) style["--recs-price-color"] = s.CART_DRAWER_RECS_PRICE_COLOR;
     if (s.CART_DRAWER_RECS_LINE_COLOR) style["--recs-line"] = s.CART_DRAWER_RECS_LINE_COLOR;
+    if (s.CART_DRAWER_REMOVE_COLOR) style["--cart-remove-color"] = s.CART_DRAWER_REMOVE_COLOR;
     // Quantity buttons (inside each cart line): picked up by .osi-qty-btn below.
     const q = buttonVars("CART_DRAWER_QTY");
     for (const [k, v] of Object.entries(q)) style[k.replace("--btn-", "--qty-")] = v;
@@ -124,27 +124,22 @@ export default function useLogic() {
 
   /* ---------------------------------------------------------------- lines */
 
-  // Per-line, not a single global flag: one slow line shouldn't disable the
-  // controls on every other line in the drawer.
-  const updatingIds = ref(new Set());
-  const isUpdating = (item) => updatingIds.value.has(item.id);
-
-  async function edit(item, action) {
-    if (isUpdating(item)) return;
-    updatingIds.value = new Set(updatingIds.value).add(item.id);
+  // Edits target one line by its order_item_id (one variant can have several
+  // lines with different customizations). Busy state is per line, in useCart,
+  // so the checkout page and header badge move with the drawer. Each edit
+  // returns the whole cart, so there's no follow-up fetch.
+  async function edit(fn, item) {
     try {
-      await CartServices.EditCart(item.id, item.quantity_step || 1, action);
-      await fetchCart();
+      await fn(item);
     } catch (error) {
       showApiError(error, "Couldn't update the cart.");
-    } finally {
-      const next = new Set(updatingIds.value);
-      next.delete(item.id);
-      updatingIds.value = next;
     }
   }
-  const increase = (item) => edit(item, "add");
-  const decrease = (item) => edit(item, "remove");
+  const increase = (item) => edit(increaseItem, item);
+  const decrease = (item) => edit(decreaseItem, item);
+  const remove = (item) => edit(removeItem, item);
+  // Unset (older themes) counts as shown.
+  const showRemove = computed(() => settings.value.CART_DRAWER_SHOW_REMOVE !== false);
 
   function close() {
     toggleCartSidebar(false);
@@ -269,5 +264,5 @@ export default function useLogic() {
   // rely on a page's onMounted to load the cart.
   onMounted(fetchCart);
 
-  return { settings, t, TEXT_DEFAULTS, txt, scheme, isCartSidebarVisible, toggleCartSidebar, cartItems, cartTotal, count, fetchCart, showApiError, mediaUrl, productUrl, handleAddToCart, store, currency, money, px, has, VARIANTS, buttonVars, button, checkoutBtn, emptyBtn, addBtn, cardStyle, RATIOS, rootStyle, updatingIds, isUpdating, edit, increase, decrease, close, go, threshold, shipping, recs, recsLoading, recsKey, pickedIds, limit, loadRecs, inCart, shownRecs, recsLayout, pricePos, adding, addRec, priceOf, analytics };
+  return { settings, t, TEXT_DEFAULTS, txt, scheme, isCartSidebarVisible, toggleCartSidebar, cartItems, topLevelItems, childrenOf, cartTotal, count, fetchCart, showApiError, mediaUrl, productUrl, handleAddToCart, store, currency, money, px, has, VARIANTS, buttonVars, button, checkoutBtn, emptyBtn, addBtn, cardStyle, RATIOS, rootStyle, isUpdating, edit, increase, decrease, remove, showRemove, close, go, threshold, shipping, recs, recsLoading, recsKey, pickedIds, limit, loadRecs, inCart, shownRecs, recsLayout, pricePos, adding, addRec, priceOf, analytics };
 }

package/app/logic/components/CartItem.js

@@ -27,5 +27,22 @@ export default function useLogic({ props, emit }) {
     emit("add-item", props.item);
   }
 
-  return { mediaUrl, store, currency, imageSrc, variantLabel, handleRemove, handleAdd };
+  function handleDelete() {
+    if (props.loading) return;
+    emit("delete-item", props.item);
+  }
+
+  /** Customization answers, as "Label: value" (a ticked checkbox reads "Yes"). */
+  const properties = computed(() =>
+    (Array.isArray(props.item?.properties) ? props.item.properties : []).map((p) => ({
+      key: p.key,
+      label: p.label,
+      value: p.value === true ? "Yes" : p.value,
+    }))
+  );
+
+  // Add-on lines follow their product's quantity and go with it.
+  const isAddon = computed(() => !!props.item?.parent_item);
+
+  return { mediaUrl, store, currency, imageSrc, variantLabel, properties, isAddon, handleRemove, handleAdd, handleDelete };
 }

package/app/logic/components/ProductVariantPicker.js

@@ -1,3 +1,4 @@
+import { isColorType } from "#osi/composables/useProductVariants";
 import { useProductDetail } from "#osi/composables/useProductDetail";
 
 export default function useLogic({ props }) {
@@ -30,7 +31,10 @@ export default function useLogic({ props }) {
   const pickerStyle = computed(() =>
     compact({
       "--sw-size": px(s.value.PICKER_SWATCH_SIZE) ?? "32px",
-      "--sw-radius": { SQUARE: "2px", ROUNDED: "8px" }[s.value.PICKER_SWATCH_SHAPE] ?? "999px",
+      // Own radius first (0 = sharp), else the shape's.
+      "--sw-radius":
+        px(s.value.PICKER_SWATCH_RADIUS) ??
+        ({ SQUARE: "2px", ROUNDED: "8px" }[s.value.PICKER_SWATCH_SHAPE] ?? "999px"),
       "--sw-ring": s.value.PICKER_SWATCH_RING_COLOR,
       "--pk-gap": px(s.value.PICKER_GAP) ?? "8px",
       "--pk-option-gap": px(s.value.PICKER_OPTION_GAP) ?? "16px",
@@ -53,7 +57,8 @@ export default function useLogic({ props }) {
     })
   );
 
-  const isColor = (type) => ["color", "colour"].includes(String(type?.name ?? "").toLowerCase());
+  // Swatches by the option's display_type (the name only for older rows).
+  const isColor = (type) => isColorType(type);
 
   /** How one option type is drawn. */
   function modeFor(type) {

package/app/logic/components/QuickBuy.js

@@ -16,6 +16,7 @@
  *
  * Every click inside stops at the panel: the card around it is a link.
  */
+import { isColorType, isVariantSoldOut } from "#osi/composables/useProductVariants";
 
 
 export default function useLogic({ props, emit }) {
@@ -86,9 +87,13 @@ export default function useLogic({ props, emit }) {
 
   /* ------------------------------------------------------------------- details */
 
-  const isColor = (type) => ["color", "colour"].includes(String(type.name).toLowerCase());
+  // Swatches by the option's display_type, like the product page.
+  const isColor = (type) => isColorType(type);
   const selected = computed(() => variants.selectedVariant.value);
-  const soldOut = computed(() => variants.stockFor(selected.value));
+  // The product page's rule: a picked combination that's out of stock is sold
+  // out even when the product as a whole is "In Stock".
+  const soldOut = computed(() => isVariantSoldOut(props.product, selected.value));
+  const comingSoon = computed(() => !!props.product?.coming_soon);
   // The picked option has no price: shown as unavailable, can't be added.
   const noPrice = computed(() => !!selected.value && !(Number(selected.value.price) > 0));
   const currency = computed(
@@ -178,6 +183,7 @@ export default function useLogic({ props, emit }) {
       quickShop.flashError("That combination isn't available.");
       return;
     }
+    if (soldOut.value || comingSoon.value) return;
     await quickShop.addVariant(selected.value, qty.value);
   }
 
@@ -185,10 +191,12 @@ export default function useLogic({ props, emit }) {
     quickShop.errorMessage.value ||
     (quickShop.adding.value
       ? "Adding…"
-      : soldOut.value
-        ? "Sold out"
-        : "Add to cart")   // no price: same label, the button is disabled
+      : comingSoon.value
+        ? "Coming soon"
+        : soldOut.value
+          ? "Out of stock"
+          : "Add to cart")   // no price: same label, the button is disabled
   );
 
-  return { isMobile, cartType, store, toggleCartSidebar, mediaUrl, router, variants, quickShop, shown, locked, afterClose, inline, popup, close, onAfterLeave, onKey, closeBtn, onAfterEnter, isColor, selected, soldOut, noPrice, currency, money, price, pickedName, images, track, slide, onScroll, goTo, description, descEl, descLong, descOpen, measureDesc, step, qty, dec, inc, add, ctaLabel };
+  return { isMobile, cartType, store, toggleCartSidebar, mediaUrl, router, variants, quickShop, shown, locked, afterClose, inline, popup, close, onAfterLeave, onKey, closeBtn, onAfterEnter, isColor, selected, soldOut, comingSoon, noPrice, currency, money, price, pickedName, images, track, slide, onScroll, goTo, description, descEl, descLong, descOpen, measureDesc, step, qty, dec, inc, add, ctaLabel };
 }

package/app/logic/components/SiteHeader.js

@@ -144,6 +144,8 @@ export default function useLogic() {
     style["--osi-header-icon"] = s.HEADER_ICON_COLOR || "var(--osi-text)";
     if (s.HEADER_ICON_BG) style["--osi-header-icon-bg"] = s.HEADER_ICON_BG;
     if (s.HEADER_ICON_BORDER) style["--osi-header-icon-border"] = s.HEADER_ICON_BORDER;
+    if (s.HEADER_CART_BADGE_BG) style["--osi-header-badge-bg"] = s.HEADER_CART_BADGE_BG;
+    if (s.HEADER_CART_BADGE_TEXT) style["--osi-header-badge-text"] = s.HEADER_CART_BADGE_TEXT;
     style["--osi-header-pad-y"] = `${s.HEADER_PADDING_Y}px`;
     // Side padding lives on the header itself, not on the inner box — see the
     // note on .osi-header-inner below. 16 is COMMON_STYLE_SETTINGS' PADDING_X

package/app/logic/sections/MainClassificationSection.js

@@ -332,6 +332,8 @@ export default function useLogic({ props }) {
 
       // filters
       "--pf-swatch": px(num(s.value.SWATCH_SIZE, 28)),
+      // Empty: the shape's radius (circle / square).
+      "--pf-swatch-r": px(s.value.SWATCH_RADIUS),
 
       // grid
       "--plp-cols": effectiveColumns.value,

package/app/pages/checkout.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="bg-gray-50 font-body text-primaryColor">
 
+    <!-- Customization changed since the item was added: placeOrder said so. -->
+    <div v-if="cartError" class="mx-auto max-w-6xl px-4 pt-4 lg:px-9" role="alert">
+      <div class="flex items-center justify-between gap-4 rounded-xl border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+        <span>{{ cartError }}</span>
+        <button type="button" class="shrink-0 underline" @click="reviewCart">Review cart</button>
+      </div>
+    </div>
+
     <!-- ============ MOBILE ORDER STRIP ============ -->
     <div class="border-b border-gray-200 bg-white lg:hidden">
       <button
@@ -14,17 +22,17 @@
         <template v-else>
           <div class="flex flex-shrink-0 gap-1.5">
             <div
-              v-for="item in CartItems.slice(0, 2)"
-              :key="`strip-${item.id}`"
+              v-for="item in TopLevelItems.slice(0, 2)"
+              :key="`strip-${item.order_item_id}`"
               class="h-11 w-9 overflow-hidden rounded-md border border-gray-200 bg-white"
             >
               <img :src="imageUrl(item.image)" :alt="item.name" class="h-full w-full object-cover" />
             </div>
             <div
-              v-if="CartItems.length > 2"
+              v-if="TopLevelItems.length > 2"
               class="flex h-11 w-9 items-center justify-center rounded-md border border-dashed border-gray-300 text-xs text-gray-500"
             >
-              +{{ CartItems.length - 2 }}
+              +{{ TopLevelItems.length - 2 }}
             </div>
           </div>
           <div class="min-w-0 flex-1">
@@ -53,7 +61,9 @@
             <!-- line items with steppers -->
             <div
               v-for="item in CartItems"
-              :key="`strip-item-${item.id}`"
+              :key="`strip-item-${item.order_item_id}`"
+              :class="item.parent_item ? 'ms-5 opacity-80' : ''"
+              :data-checkout-lines="item === CartItems[0] ? 'mobile' : undefined"
               class="group flex items-center gap-3 py-2"
             >
               <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
@@ -62,7 +72,8 @@
               <div class="min-w-0 flex-1">
                 <p class="truncate text-[13px]">{{ item.name }}</p>
                 <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
-                <div class="mt-1.5 flex items-center gap-3">
+                <p v-for="prop in item.properties || []" :key="prop.key" class="text-xs text-gray-500">{{ prop.label }}: {{ prop.value === true ? 'Yes' : prop.value }}</p>
+                <div v-if="!item.parent_item" class="mt-1.5 flex items-center gap-3">
                   <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
                     <button
                       type="button"
@@ -572,7 +583,9 @@
 
             <div
               v-for="item in CartItems"
-              :key="`rail-${item.id}`"
+              :key="`rail-${item.order_item_id}`"
+              :class="item.parent_item ? 'ms-5 opacity-80' : ''"
+              :data-checkout-lines="item === CartItems[0] ? 'rail' : undefined"
               class="group flex items-center gap-3 py-2"
             >
               <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
@@ -581,7 +594,8 @@
               <div class="min-w-0 flex-1">
                 <p class="truncate text-[13px]">{{ item.name }}</p>
                 <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
-                <div class="mt-1.5 flex items-center gap-3">
+                <p v-for="prop in item.properties || []" :key="prop.key" class="text-xs text-gray-500">{{ prop.label }}: {{ prop.value === true ? 'Yes' : prop.value }}</p>
+                <div v-if="!item.parent_item" class="mt-1.5 flex items-center gap-3">
                   <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
                     <button
                       type="button"
@@ -774,7 +788,8 @@
               <!-- line items -->
               <div
                 v-for="item in CartItems"
-                :key="`bottom-${item.id}`"
+                :key="`bottom-${item.order_item_id}`"
+                :class="item.parent_item ? 'ms-5 opacity-80' : ''"
                 class="group flex items-center gap-3 py-2"
               >
                 <div class="h-14 w-12 flex-shrink-0 overflow-hidden rounded-md border border-gray-200 bg-white">
@@ -783,7 +798,8 @@
                 <div class="min-w-0 flex-1">
                   <p class="truncate text-[13px]">{{ item.name }}</p>
                   <p v-if="Array.isArray(item.values) ? item.values.length : item.values" class="truncate text-xs text-gray-400">{{ Array.isArray(item.values) && item.values.length ? item.values.join(' | ') : item.values || '' }}</p>
-                  <div class="mt-1.5 flex items-center gap-3">
+                <p v-for="prop in item.properties || []" :key="prop.key" class="text-xs text-gray-500">{{ prop.label }}: {{ prop.value === true ? 'Yes' : prop.value }}</p>
+                  <div v-if="!item.parent_item" class="mt-1.5 flex items-center gap-3">
                     <div class="flex h-7 w-fit items-center rounded-full border border-gray-300">
                       <button
                         type="button"
@@ -977,12 +993,15 @@ const {
   accordionAfterEnter,
   // cart
   CartItems,
+  TopLevelItems,
   total_price,
   totalItemsCount,
   isItemUpdating,
   increaseQuantity,
   decreaseQuantity,
   deleteItem,
+  cartError,
+  reviewCart,
   // user + form
   isLoggedIn,
   needsPhoneInput,

package/app/pages/order-detail.vue

@@ -209,8 +209,9 @@
               <div class="flex flex-col gap-4 mb-6">
                 <div
                   v-for="(item, index) in cartItemsWithLink"
-                  :key="index"
+                  :key="item.id ?? index"
                   class="flex gap-4 items-start"
+                  :class="item.parent_item ? 'ms-6 opacity-80' : ''"
                 >
                   <component
                     :is="item.productLink ? 'RouterLink' : 'div'"
@@ -242,6 +243,14 @@
                         <p v-if="item.variant_values" class="text-gray-500 text-xs mt-1">
                           {{ item.variant_values }}
                         </p>
+                        <!-- Customization snapshot taken at checkout. -->
+                        <p
+                          v-for="prop in item.properties || []"
+                          :key="prop.key"
+                          class="text-gray-500 text-xs mt-1"
+                        >
+                          {{ prop.label }}: {{ prop.value === true ? "Yes" : prop.value }}
+                        </p>
                       </div>
                       <p class="text-gray-800 font-medium text-sm whitespace-nowrap">
                         {{ currency }}{{ item.checkout_price }}
@@ -387,8 +396,22 @@ const sortedStatuses = computed(() =>
 
 const currentStatus = computed(() => sortedStatuses.value[0]?.status_name || "");
 
+// Each product followed by its add-on lines (parent_item = the parent's id).
+const orderedItems = computed(() => {
+  const items = cartItems.value;
+  const parents = items.filter((item) => !item.parent_item);
+  const ids = new Set(parents.map((item) => String(item.id)));
+  return [
+    ...parents.flatMap((parent) => [
+      parent,
+      ...items.filter((child) => child.parent_item && String(child.parent_item) === String(parent.id)),
+    ]),
+    ...items.filter((item) => item.parent_item && !ids.has(String(item.parent_item))),
+  ];
+});
+
 const cartItemsWithLink = computed(() =>
-  cartItems.value.map((item) => {
+  orderedItems.value.map((item) => {
     const product = item?.product?.product;
     const categorySlug = product?.categories?.[0]?.category?.slugified_name;
     const productSlug = product?.slugified_name;

package/app/pages/user-profile/components/orders.vue

@@ -28,14 +28,14 @@
             </div>
             <div class="pb-5">
               <p class="osi-acc-muted font-bold">
-                {{ currency }}{{ order?.checkout_cart_price + order?.checkout_delivery_fees }}
+                {{ currency }}{{ orderTotal(order) }}
               </p>
             </div>
           </div>
           <div class="w-full max-w-[1800px] grid grid-cols-2 sm:grid-cols-4">
             <div
               v-for="(item, index) in getCartItemsWithLink(order?.items || [])"
-              :key="index"
+              :key="item.id ?? index"
               class="transition-all w-full sm:w-[200px] duration-300"
             >
               <component
@@ -65,6 +65,17 @@
                   >
                     {{ item.variant_values }}
                   </p>
+                  <!-- Add-on line (gift wrap…) bought with another product. -->
+                  <p v-if="item.parent_item" class="osi-acc-muted text-xs">
+                    Add-on{{ parentName(order, item) ? ` · ${parentName(order, item)}` : "" }}
+                  </p>
+                  <p
+                    v-for="prop in item.properties || []"
+                    :key="prop.key"
+                    class="osi-acc-muted text-xs"
+                  >
+                    {{ prop.label }}: {{ prop.value === true ? "Yes" : prop.value }}
+                  </p>
                 </div>
               </div>
             </div>
@@ -146,6 +157,16 @@ const getLatestStatus = (order) => {
   return latest.status_name;
 };
 
+// The server's own total (promo, fees and customization included). The old
+// sum of two fields concatenated when the API returned them as strings.
+const orderTotal = (order) =>
+  order?.checkout_order_total ??
+  (Number(order?.checkout_cart_price) || 0) + (Number(order?.checkout_delivery_fees) || 0);
+
+/** The product an add-on line was bought with. */
+const parentName = (order, item) =>
+  (order?.items || []).find((line) => String(line.id) === String(item.parent_item))?.name || "";
+
 const getCartItemsWithLink = (items = []) => {
   return items.map((item) => {
     const product = item?.product?.product;