@osimart/create-storefront 1.0.17 → 1.0.20

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";
@@ -97,6 +98,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 ---
@@ -243,7 +249,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 +275,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),
   );
 
@@ -347,6 +353,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 +588,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 +711,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);
@@ -875,6 +903,7 @@ export function useCheckout() {
 
     // user + form
     isLoggedIn,
+    needsPhoneInput,
     formData,
     formErrors,
     clearFieldError,

package/app/composables/useProductCustomization.js

@@ -0,0 +1,94 @@
+import { computed, reactive, watch } from "vue";
+
+const EMPTY = (value) =>
+  value === null || value === undefined || value === false ||
+  (typeof value === "string" && value.trim() === "");
+
+/** Product customization answers, scoped to the product and variant shown. */
+export function useProductCustomization(product, selectedVariant) {
+  const values = reactive({});
+  const errors = reactive({});
+
+  const visibleSets = computed(() => {
+    const variantId = selectedVariant.value?.id;
+    return (product.value?.customization_sets || []).filter(
+      (set) => !variantId || !(set.excluded_variants || []).includes(variantId),
+    );
+  });
+  const visibleFields = computed(() =>
+    visibleSets.value.flatMap((set) => set.customization_fields || []),
+  );
+
+  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]; });
+  });
+
+  function optionFor(field) {
+    return field.options?.find((option) => option.id === values[field.key]) || null;
+  }
+
+  function costOf(field) {
+    if (EMPTY(values[field.key])) return null;
+    if (field.type === "SELECT") {
+      const option = optionFor(field);
+      if (!option) return null;
+      return option.addon_variant
+        ? { addon: option.addon_variant }
+        : { delta: option.price_delta ?? field.price_delta ?? 0 };
+    }
+    return field.addon_variant
+      ? { addon: field.addon_variant }
+      : { delta: field.price_delta || 0 };
+  }
+
+  const deltaPerUnit = computed(() => visibleFields.value.reduce(
+    (sum, field) => sum + (Number(costOf(field)?.delta) || 0), 0,
+  ));
+  const addons = computed(() => visibleFields.value.map(costOf).filter((cost) => cost?.addon).map((cost) => cost.addon));
+
+  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.`;
+      }
+    }
+    return Object.keys(errors).length === 0;
+  }
+
+  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;
+      else result[field.key] = String(value).trim();
+    }
+    return result;
+  });
+
+  function applyServerErrors(error) {
+    const serverErrors = error?.data?.properties || error?.response?._data?.properties;
+    if (!serverErrors) return false;
+    Object.assign(errors, serverErrors);
+    return true;
+  }
+
+  function reset() {
+    Object.keys(values).forEach((key) => delete values[key]);
+    Object.keys(errors).forEach((key) => delete errors[key]);
+  }
+
+  return { values, errors, visibleSets, visibleFields, deltaPerUnit, addons, costOf, validate, payload, applyServerErrors, reset };
+}

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,8 @@ export function createProductDetail({ product, settings = {}, loading = false }
     return { gallery: [...unique].sort((a, b) => order(a) - order(b)) };
   });
 
+  const customization = useProductCustomization(p, exactMatchVariant);
+
   function selectVariant(value) {
     if (value?.isAvailable === false) return;
     variants.selectVariant(value);
@@ -745,19 +748,29 @@ export function createProductDetail({ product, settings = {}, loading = false }
       return false;
     }
 
+    if (!customization.validate()) {
+      nextTick(() => document.querySelector(".osi-pdp-customization .has-error")?.scrollIntoView({ behavior: "smooth", block: "center" }));
+      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) {
+      if (customization.applyServerErrors(error)) {
+        nextTick(() => document.querySelector(".osi-pdp-customization .has-error")?.scrollIntoView({ behavior: "smooth", block: "center" }));
+        return false;
+      }
       showApiError(error, "Couldn't add that to your cart.");
       return false;
     } finally {
@@ -915,6 +928,9 @@ export function createProductDetail({ product, settings = {}, loading = false }
     showError,
     resetSelections,
 
+    // customization
+    customization,
+
     // price
     pricing,
     priceRange,
@@ -978,4 +994,4 @@ export function provideProductDetail(context) {
  */
 export function useProductDetail() {
   return inject(PRODUCT_DETAIL_KEY, null);
-}
+}

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

@@ -253,7 +253,7 @@
               </div>
 
               <div
-                v-if="!isLoggedIn"
+                v-if="needsPhoneInput"
                 data-field="mobile_number"
                 class="px-3"
                 :class="phoneHasError ? 'bg-red-50' : ''"
@@ -272,7 +272,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>
@@ -985,6 +985,7 @@ const {
   deleteItem,
   // 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/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,33 +1,33 @@
 <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">
+              <p class="osi-acc-muted font-bold">
                 {{ currency }}{{ order?.checkout_cart_price + order?.checkout_delivery_fees }}
               </p>
             </div>
@@ -41,10 +41,10 @@
               <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,11 +56,11 @@
               </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 }}
@@ -94,7 +94,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.

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;

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="osi-settings-card w-full xlg1:w-[70%] h-fit shadow-md bg-gray-50 flex justify-center items-center p-5 font-body"
+    class="osi-settings-card w-full xlg1:w-[70%] osi-acc-card h-fit shadow-md flex justify-center items-center p-5 font-body"
   >
     <form
       novalidate
@@ -180,7 +180,7 @@ export default {
 
 <style scoped>
 .osi-settings-card {
-  --osi-field-chip: #f9fafb;
+  --osi-field-chip: var(--acc-card, #f9fafb);
 }
 .osi-settings-submit {
   align-self: center;

package/app/pages/user-profile/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="osi-account">
     <banner pageTitle="user details" />
     <div class="w-full flex justify-center items-center">
       <div
@@ -7,7 +7,7 @@
       >
         <div
           v-if="isLoading"
-          class="w-full xlg1:w-[70%] shadow-md border border-gray-100 bg-gray-50 flex flex-col gap-5"
+          class="osi-acc-card w-full xlg1:w-[70%] shadow-md flex flex-col gap-5"
         >
           <!-- Profile Card Skeleton -->
           <div
@@ -48,7 +48,7 @@
         <div v-if="isLoading" class="w-full xlg1:w-[70%] flex flex-col gap-5">
           <!-- User Information Section Skeleton -->
           <div
-            class="grid grid-cols-1 s:grid-cols-2 gap-x-5 gap-y-8 h-fit border border-gray-100 shadow-md p-5 bg-gray-50"
+            class="osi-acc-card grid grid-cols-1 s:grid-cols-2 gap-x-5 gap-y-8 h-fit shadow-md p-5"
           >
             <div v-for="i in 4" :key="i" class="flex flex-col gap-2">
               <Skeletor height="20px" width="120px" class="rounded" />
@@ -62,7 +62,7 @@
 
           <!-- Addresses Section Skeleton -->
           <div
-            class="w-full h-fit border border-gray-100 shadow-md p-5 bg-gray-50"
+            class="osi-acc-card w-full h-fit shadow-md p-5"
           >
             <div class="w-full flex justify-between items-center gap-3">
               <Skeletor height="24px" width="150px" />
@@ -72,10 +72,10 @@
               <div
                 v-for="i in 2"
                 :key="i"
-                class="h-[200px] bg-gray-100 shadow-sm flex flex-col justify-between p-3"
+                class="osi-acc-tile h-[200px] shadow-sm flex flex-col justify-between p-3"
               >
                 <div
-                  class="w-full 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"
                 >
                   <!-- Country -->
                   <div class="flex items-center gap-2">
@@ -249,4 +249,54 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+/*
+ * Account-page surfaces, derived from the active colour scheme
+ * (--osi-bg / --osi-text / --osi-border, published on .osi-root) so the page
+ * follows light AND dark themes instead of a hardcoded gray.
+ *
+ *   --acc-card   panels: a faint step away from the page background
+ *   --acc-line   dividers and panel borders
+ *   --acc-muted  secondary text
+ *   tiles (.osi-acc-tile) sit directly on the page background colour, so they
+ *   read as "inset" panels in both themes.
+ */
+.osi-account {
+  --acc-card: #f9fafb;
+  --acc-line: var(--osi-border, #e5e5e5);
+  --acc-muted: #6b7280;
+}
+@supports (color: color-mix(in srgb, red 50%, blue)) {
+  .osi-account {
+    --acc-card: color-mix(
+      in srgb,
+      var(--osi-text, #121212) 6%,
+      var(--osi-bg, #ffffff)
+    );
+    --acc-muted: color-mix(
+      in srgb,
+      var(--osi-text, #121212) 65%,
+      var(--osi-bg, #ffffff)
+    );
+  }
+}
+.osi-acc-card {
+  background: var(--acc-card, #f9fafb);
+  border: 1px solid var(--acc-line, #e5e5e5);
+}
+.osi-acc-tile {
+  background: var(--osi-bg, #ffffff);
+}
+.osi-acc-avatar {
+  background: var(--acc-card, #f9fafb);
+  border: 1px solid var(--acc-line, #e5e5e5);
+}
+/* :where() keeps specificity at 0 so hover / active utilities
+   (group-hover:text-primaryColor etc.) still win. */
+:where(.osi-acc-muted) {
+  color: var(--acc-muted, #6b7280);
+}
+:where(.osi-acc-line) {
+  border-color: var(--acc-line, #e5e5e5);
+}
+</style>

package/app/services/CartServices.js

@@ -27,14 +27,16 @@ const persistCartToken = (responseData) => {
  * This is the single place add_to_cart / remove_from_cart are reported: every
  * cart edit in the storefront goes through here, once.
  */
-const EditCart = async (item_id, quantity = 1, action, context) => {
+const EditCart = async (item_id, quantity = 1, action, context, properties = null) => {
   try {
     const baseUrl = getBaseUrl();
     const before = analytics.peekCartLine(item_id);
+    const body = { quantity, item_id, action };
+    if (properties && Object.keys(properties).length) body.properties = properties;
     const responseData = await apiService(`${baseUrl}store/apis/cart/update-item/`, {
       method: "POST",
       headers: cartHeaders(),
-      body: JSON.stringify({ quantity, item_id, action }),
+      body: JSON.stringify(body),
     });
     persistCartToken(responseData);
     analytics.cartEdited({
@@ -88,4 +90,4 @@ export default {
   EditCart,
   fetchCart,
   mergeCart,
-};
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimart/create-storefront",
-  "version": "1.0.17",
+  "version": "1.0.20",
   "description": "Osimart storefront platform — logic, platform pages and CLI; extended by every theme repo",
   "type": "module",
   "main": "./nuxt.config.ts",