@osimart/create-storefront 1.0.17 → 1.0.21

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();
@@ -124,27 +123,20 @@ 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);
 
   function close() {
     toggleCartSidebar(false);
@@ -269,5 +261,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, 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/ProductInfoBlock.js

@@ -28,6 +28,7 @@ export default function useLogic({ props }) {
     TITLE: 6,
     PRICE: 20,
     VARIANT_PICKER: 24,
+    CUSTOMIZATION: 16,
     QUANTITY: 16,
     BUY_BUTTONS: 24,
     DESCRIPTION: 24,
@@ -274,6 +275,8 @@ export default function useLogic({ props }) {
         return !!(text(t(s.value.ICON_TEXT_LABEL)) || icon.value);
       case "VARIANT_PICKER":
         return !!detail?.hasOptions.value;
+      case "CUSTOMIZATION":
+        return !!detail?.customization.visibleSets.value.length;
       case "PRODUCT_META":
         return !!(
           (s.value.META_SHOW_SKU !== false && detail?.sku.value) ||

package/app/logic/sections/FeaturedProductSection.js

@@ -4,6 +4,7 @@ export default function useLogic({ props }) {
     { id: "fp-title", type: "TITLE", settings: {} },
     { id: "fp-price", type: "PRICE", settings: {} },
     { id: "fp-picker", type: "VARIANT_PICKER", settings: {} },
+    { id: "fp-customization", type: "CUSTOMIZATION", settings: {} },
     { id: "fp-buy", type: "BUY_BUTTONS", settings: { BUTTON_HEIGHT: 44 } },
     { id: "fp-description", type: "DESCRIPTION", settings: { DESCRIPTION_COLLAPSE: true, DESCRIPTION_CLAMP: 3 } },
     {

package/app/logic/sections/MainProductSection.js

@@ -32,6 +32,7 @@ export default function useLogic({ props }) {
     { id: "default-title", type: "TITLE", settings: {} },
     { id: "default-price", type: "PRICE", settings: {} },
     { id: "default-picker", type: "VARIANT_PICKER", settings: { PICKER_STYLE: "SWATCHES" } },
+    { id: "default-customization", type: "CUSTOMIZATION", settings: {} },
     {
       id: "default-buy",
       type: "BUY_BUTTONS",

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"
@@ -253,7 +264,7 @@
               </div>
 
               <div
-                v-if="!isLoggedIn"
+                v-if="needsPhoneInput"
                 data-field="mobile_number"
                 class="px-3"
                 :class="phoneHasError ? 'bg-red-50' : ''"
@@ -272,7 +283,7 @@
                   v-model="formData.mobile_number"
                   placeholder=" "
                   class="floating-input disabled:text-gray-500"
-                  :disabled="isLoggedIn && formData.mobile_number !== ''"
+                  disabled
                 />
                 <label for="mobile_number" class="floating-label">Phone</label>
               </div>
@@ -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,14 +993,18 @@ const {
   accordionAfterEnter,
   // cart
   CartItems,
+  TopLevelItems,
   total_price,
   totalItemsCount,
   isItemUpdating,
   increaseQuantity,
   decreaseQuantity,
   deleteItem,
+  cartError,
+  reviewCart,
   // user + form
   isLoggedIn,
+  needsPhoneInput,
   formData,
   formErrors,
   clearFieldError,

package/app/pages/login.vue

@@ -368,10 +368,8 @@ export default {
 
         try {
           this.isLoginLoading = true;
-   const deviceInfo = getDeviceInfo();
  const loginResponse = await this.login({
     ...this.formData,
-    ...deviceInfo,
   });
             toast.success("You have successfully signed into your account!");
           authBus.checkAuth();

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/Whishlist.vue

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="w-full xlg1:w-[70%] h-fit border border-gray-100 shadow-md p-5 bg-gray-50 font-body"
+    class="w-full xlg1:w-[70%] osi-acc-card h-fit shadow-md p-5 font-body"
   >
     <div v-if="wishlistItems && wishlistItems.length > 0">
       <div
-        class="bg-gray-50 grid grid-cols-1 s:grid-cols-2 l:grid-cols-3 gap-3"
+        class="grid grid-cols-1 s:grid-cols-2 l:grid-cols-3 gap-3"
       >
         <div
           v-for="item in wishlistItems"
@@ -75,7 +75,7 @@
         <p class="text-primaryColor font-body text-xl s:text-2xl">
           Wishlist is empty
         </p>
-        <div class="text-center text-gray-500">
+        <div class="text-center osi-acc-muted">
           <p class="font-body text-sm">
             You don't have any products in your wishlist yet.
           </p>

package/app/pages/user-profile/components/left-bar.vue

@@ -3,11 +3,11 @@
     class="w-full flex flex-col justify-center items-center gap-5 font-body"
   >
     <div
-      class="flex flex-col w-full xlg1:w-[70%] shadow-md border border-gray-100 bg-gray-50"
+      class="flex flex-col w-full xlg1:w-[70%] osi-acc-card shadow-md"
     >
       <div class="w-full flex flex-col justify-center items-center pb-10 gap-5">
         <div
-          class="w-[80px] s:w-[100px] h-[80px] s:h-[100px] rounded-full border border-gray-50 shadow-md flex justify-center items-center p-1 bg-white absolute"
+          class="w-[80px] s:w-[100px] h-[80px] s:h-[100px] osi-acc-avatar rounded-full shadow-md flex justify-center items-center p-1 absolute"
         >
           <img
             v-if="logoSrc"
@@ -25,10 +25,10 @@
           class="cursor-pointer w-full md:w-auto"
         >
           <div
-            class="w-full py-3 border-b border-gray-100 md:border-none flex justify-start items-center gap-2"
+            class="w-full py-3 border-b osi-acc-line md:border-none flex justify-start items-center gap-2"
             :class="{
               'text-primaryColor': activeStep === 'profileDetails',
-              'text-gray-500': activeStep !== 'profileDetails',
+              'osi-acc-muted': activeStep !== 'profileDetails',
             }"
           >
             <svg
@@ -58,10 +58,10 @@
           @click="selectStep('Whishlist')"
         >
           <div
-            class="w-full py-3 border-b border-gray-100 md:border-none flex justify-start items-center gap-2 group-hover:text-primaryColor"
+            class="w-full py-3 border-b osi-acc-line md:border-none flex justify-start items-center gap-2 group-hover:text-primaryColor"
             :class="{
               'text-primaryColor': activeStep === 'Whishlist',
-              'text-gray-500': activeStep !== 'Whishlist',
+              'osi-acc-muted': activeStep !== 'Whishlist',
             }"
           >
             <svg
@@ -89,10 +89,10 @@
           @click="selectStep('Orders')"
         >
           <div
-            class="w-full py-3 border-b border-gray-100 md:border-none group-hover:text-primaryColor flex justify-start items-center gap-2"
+            class="w-full py-3 border-b osi-acc-line md:border-none group-hover:text-primaryColor flex justify-start items-center gap-2"
             :class="{
               'text-primaryColor': activeStep === 'Orders',
-              'text-gray-500': activeStep !== 'Orders',
+              'osi-acc-muted': activeStep !== 'Orders',
             }"
           >
             <svg
@@ -124,10 +124,10 @@
           @click="selectStep('settings')"
         >
           <div
-            class="w-full border-b border-gray-100 md:border-none py-3 flex justify-start items-center gap-2"
+            class="w-full border-b osi-acc-line md:border-none py-3 flex justify-start items-center gap-2"
             :class="{
               'text-primaryColor': activeStep === 'settings',
-              'text-gray-500': activeStep !== 'settings',
+              'osi-acc-muted': activeStep !== 'settings',
             }"
           >
             <svg
@@ -157,12 +157,12 @@
 
         <router-link @click="logout" class="group" to="/">
           <div
-            class="w-full py-3 flex justify-start items-center gap-2 text-gray-500"
+            class="w-full py-3 flex justify-start items-center gap-2 osi-acc-muted"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
-              class="text-gray-500 group-hover:text-primaryColor duration-300"
+              class="osi-acc-muted group-hover:text-primaryColor duration-300"
               width="24"
               height="24"
               color="#000000"

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

@@ -1,50 +1,50 @@
 <template>
   <div
-    class="w-full xlg1:w-[70%] h-fit shadow-md bg-gray-50 px-5 pb-5 font-body"
+    class="w-full xlg1:w-[70%] osi-acc-card h-fit shadow-md px-5 pb-5 font-body"
   >
     <div v-if="allOrders.length">
       <div class="w-full flex flex-col mt-5 gap-5">
         <div
           v-for="order in sortedOrders"
           :key="order.id"
-          class="w-full flex bg-white flex-col py-5 px-5"
+          class="osi-acc-tile w-full flex flex-col py-5 px-5"
         >
           <div class="flex flex-col gap-5">
             <div class="flex justify-between">
               <div>
-                <p class="text-gray-500 uppercase text-[17px]">
+                <p class="osi-acc-muted uppercase text-[17px]">
                   {{ getLatestStatus(order) || "NA" }}
                 </p>
-                <p class="text-gray-500 font-heading uppercase text-[17px]">
+                <p class="osi-acc-muted font-heading uppercase text-[17px]">
                   {{ new Date(order?.purchased_at).toLocaleString() }}
                 </p>
               </div>
               <div
-                class="text-gray-500 cursor-pointer"
+                class="osi-acc-muted cursor-pointer"
                 @click="goToOrderHistory(order?.id)"
               >
                 Go to order
               </div>
             </div>
             <div class="pb-5">
-              <p class="text-gray-500 font-bold">
-                {{ currency }}{{ order?.checkout_cart_price + order?.checkout_delivery_fees }}
+              <p class="osi-acc-muted font-bold">
+                {{ 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
                 :is="item.productLink ? 'RouterLink' : 'div'"
                 :to="item.productLink"
-                class="border w-full sm:w-[200px] flex border-gray-100 relative"
+                class="border w-full sm:w-[200px] flex osi-acc-line relative"
               >
                 <div
-                  class="absolute top-3 right-3 bg-white h-[30px] w-[30px] p-1 border border-primaryColor flex justify-center items-center text-primaryColor"
+                  class="osi-acc-tile absolute top-3 right-3 h-[30px] w-[30px] p-1 border border-primaryColor flex justify-center items-center text-primaryColor"
                 >
                   {{ item.quantity }}
                 </div>
@@ -56,15 +56,26 @@
               </component>
               <div class="w-full flex gap-2 p-2 justify-between items-start">
                 <div class="flex flex-col gap-2">
-                  <p class="text-gray-500 text-sm line-clamp-1">
+                  <p class="osi-acc-muted text-sm line-clamp-1">
                     {{ item.name }}
                   </p>
                   <p
-                    class="text-gray-500 text-xs mt-1"
+                    class="osi-acc-muted text-xs mt-1"
                     v-if="item.variant_values"
                   >
                     {{ 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>
@@ -94,7 +105,7 @@
         >
           You have no orders at the moment.
         </p>
-        <div class="text-center text-gray-500">
+        <div class="text-center osi-acc-muted">
           <p class="font-body text-sm">You don't have any orders yet.</p>
           <p class="font-body text-sm">
             You will find many interesting products on the "Shopping" page.
@@ -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;

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

@@ -10,7 +10,7 @@
       @cancel-delete="closeDeleteModal"
     />
     <!-- User Information Section -->
-    <div class="osi-profile-card w-full h-fit border border-gray-100 shadow-md p-5 bg-gray-50">
+    <div class="osi-profile-card osi-acc-card w-full h-fit shadow-md p-5">
       <div class="w-full flex justify-between items-center gap-3">
         <h1 class="text-primaryColor font-body text-xl">Profile</h1>
 
@@ -127,7 +127,7 @@
       </div>
     </div>
 
-    <div class="osi-profile-card w-full h-fit border border-gray-100 shadow-md p-5 bg-gray-50">
+    <div class="osi-profile-card osi-acc-card w-full h-fit shadow-md p-5">
       <div class="w-full flex justify-between items-center gap-3 pr-2">
         <h1 class="text-primaryColor font-body text-xl">Addresses</h1>
 
@@ -186,7 +186,7 @@
           >
             You have not added any addresses yet
           </p>
-          <div class="text-center text-gray-500">
+          <div class="text-center osi-acc-muted">
             <p class="font-body text-sm">
               Add your addresses for a quicker and more efficient checkout.
             </p>
@@ -201,7 +201,7 @@
         >
           <div class="h-[200px]">
             <div
-              class="bg-white shadow-sm h-[200px] flex flex-col gap-3 p-3"
+              class="osi-acc-tile shadow-sm h-[200px] flex flex-col gap-3 p-3"
             >
             
              <div class="flex w-full justify-end gap-1">
@@ -226,7 +226,7 @@
                 </div>
 
               <div
-                class="w-full bg-white text-gray-500 text-sm s:text-base grid gap-2"
+                class="w-full osi-acc-muted text-sm s:text-base grid gap-2"
               >
                 <p class="font-body">
                   <span class="font-semibold">Country:</span>
@@ -552,7 +552,7 @@ export default {
 /* Fields and buttons come from the theme (OsiField / .osi-btn). */
 .osi-profile-card {
   /* Floating labels cut the field border with a chip in this colour. */
-  --osi-field-chip: #f9fafb;
+  --osi-field-chip: var(--acc-card, #f9fafb);
 }
 .osi-profile-icon-btn {
   --btn-pad-y: 5px;