@osimart/create-storefront 1.0.17 → 1.0.21

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

@@ -17,37 +17,112 @@ const persistCartToken = (responseData) => {
 };
 
 /**
- * Add to / remove from a cart line (a line is a variant id).
+ * A cart response's lines as a list. Lines are keyed by their line id
+ * (order_item_id); one variant can sit on several lines (different
+ * customizations, or as an add-on of another product), so nothing may look a
+ * line up by variant id.
+ */
+export function cartLines(response) {
+  return Object.entries(response?.cart || {}).map(([key, line]) => ({
+    ...line,
+    order_item_id: line?.order_item_id ?? key,
+  }));
+}
+
+/** A variant's own top-level lines summed: what "this product in the cart" means now. */
+function variantSnapshot(lines, variantId) {
+  const own = lines.filter((l) => String(l.id) === String(variantId) && !l.parent_item);
+  if (!own.length) return null;
+  return { ...own[0], quantity: own.reduce((n, l) => n + (Number(l.quantity) || 0), 0) };
+}
+
+async function post(body) {
+  const baseUrl = getBaseUrl();
+  const responseData = await apiService(`${baseUrl}store/apis/cart/update-item/`, {
+    method: "POST",
+    headers: cartHeaders(),
+    body: JSON.stringify(body),
+  });
+  return persistCartToken(responseData);
+}
+
+/**
+ * Add a variant to the cart (the only action that takes a variant id).
  *
  * `context` is optional: callers that hold the product (product page, card,
  * quick buy) pass `{ product, variant }` so the analytics event carries its
- * brand and category, which the cart payload doesn't repeat. Cart-side callers
- * (drawer, checkout) omit it and get it from what was remembered at add time.
+ * brand and category, which the cart payload doesn't repeat.
+ *
+ * `properties` are the customization answers, keyed by field key
+ * ({ cover_name: "Lara", cover_color: "<option id>", gift_wrap: true }). The
+ * backend validates and prices them; a bad answer comes back as
+ * 400 { properties: { key: message } } and nothing is added. Same variant +
+ * same answers merges into the existing line, different answers make a new one.
  *
- * This is the single place add_to_cart / remove_from_cart are reported: every
- * cart edit in the storefront goes through here, once.
+ * Signature kept from before (item_id, quantity, action, context, properties)
+ * so existing callers don't change. Any action other than "add" is forwarded
+ * to editLine with `item_id` treated as the line id.
  */
-const EditCart = async (item_id, quantity = 1, action, context) => {
+const EditCart = async (item_id, quantity = 1, action = "add", context, properties = null) => {
+  if (action !== "add") return editLine({ order_item_id: item_id }, action, quantity);
   try {
-    const baseUrl = getBaseUrl();
-    const before = analytics.peekCartLine(item_id);
-    const responseData = await apiService(`${baseUrl}store/apis/cart/update-item/`, {
-      method: "POST",
-      headers: cartHeaders(),
-      body: JSON.stringify({ quantity, item_id, action }),
-    });
-    persistCartToken(responseData);
+    const before = variantSnapshot(analytics.peekCartLines(), item_id);
+    const body = { item_id, quantity, action: "add" };
+    if (properties && Object.keys(properties).length) body.properties = properties;
+    const responseData = await post(body);
     analytics.cartEdited({
       itemId: item_id,
+      variantId: item_id,
       quantity,
-      action,
+      action: "add",
       before,
-      after: responseData?.cart?.[item_id] ?? null,
+      after: variantSnapshot(cartLines(responseData), item_id),
       context,
     });
     return responseData;
   } catch (error) {
-    console.error('Cart fetch error:', error);
+    console.error('Cart update error:', error);
+    throw error;
+  }
+};
+
+/**
+ * Change one exact cart line.
+ *
+ *   edit        set the line's quantity to `quantity`
+ *   remove      take `quantity` off the line (0 deletes it)
+ *   remove_all  delete the line
+ *
+ * Add-on lines (parent_item set) follow their parent and can't be edited on
+ * their own — the backend rejects it, so callers never offer it.
+ */
+const editLine = async (line, action, quantity) => {
+  const orderItemId = line?.order_item_id;
+  if (!orderItemId) throw new Error("Missing cart line id.");
+  try {
+    const before = analytics.peekCartLine(orderItemId);
+    const body = { order_item_id: orderItemId, action };
+    if (action !== "remove_all") body.quantity = quantity;
+    const responseData = await post(body);
+    const after = responseData?.cart?.[orderItemId]
+      ?? cartLines(responseData).find((l) => String(l.order_item_id) === String(orderItemId))
+      ?? null;
+    const prev = Number(before?.quantity ?? line?.quantity) || 0;
+    const next = Number(after?.quantity) || 0;
+    // Analytics speaks add/remove; "edit" is whichever way the quantity moved.
+    if (next !== prev) {
+      analytics.cartEdited({
+        itemId: orderItemId,
+        variantId: before?.id ?? line?.id,
+        quantity: Math.abs(next - prev),
+        action: next > prev ? "add" : "remove",
+        before: before ?? line,
+        after,
+      });
+    }
+    return responseData;
+  } catch (error) {
+    console.error('Cart update error:', error);
     throw error;
   }
 };
@@ -86,6 +161,7 @@ const mergeCart = async () => {
 
 export default {
   EditCart,
+  editLine,
   fetchCart,
   mergeCart,
-};
+};

package/app/utils/analytics.js

@@ -72,9 +72,9 @@ const state = {
   pixelIds: [],
   currency: "",
   consent: true,
-  /** Last cart the server sent, keyed by line (variant) id. */
+  /** Last cart the server sent, keyed by line id (order_item_id). */
   cart: {},
-  /** What we know about a line beyond the cart payload: brand, category… */
+  /** What we know about a variant beyond the cart payload: brand, category… (keyed by variant id) */
   lineContext: new Map(),
   /** Once-per-page guards (view_item, view_item_list). Cleared on navigation. */
   seen: new Set(),
@@ -240,12 +240,14 @@ export function productToItem(product, opts = {}) {
 }
 
 /**
- * A cart line (the server's `cart[id]` entry, keyed by variant id) -> item.
- * The payload doesn't repeat brand / category, so what the add-to-cart call
- * site knew is remembered per line and laid back over it here.
+ * A cart line -> item. `line.id` is the variant id (one variant can sit on
+ * several lines now, so lines are keyed by order_item_id); `id` is only the
+ * fallback. The payload doesn't repeat brand / category, so what the
+ * add-to-cart call site knew is remembered per variant and laid back over it.
  */
 function cartLineToItem(id, line, quantity) {
-  const known = state.lineContext.get(String(id)) ?? {};
+  const variantId = line?.id ?? id;
+  const known = state.lineContext.get(String(variantId)) ?? {};
   const productId =
     known.item_id ?? line?.product_id ?? line?.product?.id ?? line?.product?.product?.id ?? id;
   return clean({
@@ -255,7 +257,7 @@ function cartLineToItem(id, line, quantity) {
     item_category: known.item_category,
     item_category2: known.item_category2,
     item_variant: variantLabel(line) || known.item_variant,
-    variant_id: String(id),
+    variant_id: String(variantId),
     sku: line?.sku ?? known.sku,
     price: money(line?.price ?? known.price),
     quantity: quantity ?? Math.max(1, num(line?.quantity)),
@@ -499,11 +501,16 @@ function selectItem(product, override = {}) {
   log("select_item", ga);
 }
 
-/** What we last heard the cart contained for this line, before an edit. */
+/** What we last heard the cart contained for this line (order_item_id), before an edit. */
 function peekCartLine(id) {
   return state.cart[String(id)] ?? null;
 }
 
+/** Every line we last heard about, as a list (to sum a variant across lines). */
+function peekCartLines() {
+  return Object.entries(state.cart).map(([key, line]) => ({ ...line, order_item_id: line?.order_item_id ?? key }));
+}
+
 /** Remembers the server's cart. Called with every cart response. */
 function rememberCart(response) {
   if (!isClient() || !response || typeof response !== "object") return;
@@ -524,13 +531,16 @@ function resetCart() {
  * through, from product pages, cards, quick buy, the drawer and checkout — so
  * nothing is missed and nothing is counted twice.
  *
- * @param {{ itemId: string|number, quantity: number, action: "add"|"remove",
+ * `variantId` keys what the call site knew (brand, category); `itemId` is the
+ * line or variant the edit targeted.
+ *
+ * @param {{ itemId: string|number, variantId?: string|number, quantity: number, action: "add"|"remove",
  *           before: object|null, after: object|null,
  *           context?: { product?: object, variant?: object } }} edit
  */
-function cartEdited({ itemId, quantity, action, before, after, context }) {
+function cartEdited({ itemId, variantId, quantity, action, before, after, context }) {
   if (!isClient()) return;
-  const id = String(itemId);
+  const id = String(variantId ?? before?.id ?? after?.id ?? itemId);
 
   // Remember what the call site knew, for later edits made from the drawer.
   if (context?.product) {
@@ -832,6 +842,7 @@ const api = {
   viewItemList,
   selectItem,
   peekCartLine,
+  peekCartLines,
   rememberCart,
   resetCart,
   cartEdited,

package/package.json

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