@wix/himalaya-cli 0.1494.0 → 0.1495.0

package/templates/branded-lite/tier5-src/himi-store-product/index.ts

@@ -48,6 +48,8 @@ interface GalleryItem {
 interface OptionChip {
   id: string;
   label: string;
+  swatch?: string;
+  disabled?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -72,6 +74,20 @@ const OPTION_SLOTS = 3;
  *  payload is resolved from `variantsInfo`, which no renderer needs to see. */
 let lastProduct: StoreProduct | undefined;
 
+/** Match only merchant-authored product sections with a clear policy title. */
+function productPolicyBody(product: StoreProduct, kind: "returns" | "shipping"): string {
+  const sections = [...(product.infoSections ?? []), ...(product.additionalInfoSections ?? [])];
+  const section = sections.find((item) => {
+    const name = `${item.title ?? ""} ${"uniqueName" in item ? item.uniqueName ?? "" : ""}`;
+    return kind === "returns" ? /return|refund/i.test(name) : /shipping|delivery/i.test(name);
+  });
+  if (!section) return "";
+  const html = "plainDescription" in section ? section.plainDescription : undefined;
+  if (html) return plainText(html.replace(/ /gi, " "));
+  if (typeof section.description === "string") return plainText(section.description.replace(/ /gi, " "));
+  return richBody(section.description).bodyText;
+}
+
 /** The product id `lastProduct` was read for. A pooled screen re-appearing calls
  *  `refreshServices()` → `load()`, so this is what tells a genuine navigation to a
  *  DIFFERENT product (drop the picks) from the same product coming back (keep them). */
@@ -79,23 +95,31 @@ let lastLoadedId: string | undefined;
 let productLoadSequence = 0;
 
 interface OptionSlots {
-  opt1Label: string; opt1Chips: OptionChip[]; opt1Selected: string[]; noOpt1: boolean;
-  opt2Label: string; opt2Chips: OptionChip[]; opt2Selected: string[]; noOpt2: boolean;
-  opt3Label: string; opt3Chips: OptionChip[]; opt3Selected: string[]; noOpt3: boolean;
+  opt1Label: string; opt1Chips: OptionChip[]; opt1Selected: string[]; opt1SelectedId: string; opt1Placeholder: string; noOpt1: boolean;
+  opt2Label: string; opt2Chips: OptionChip[]; opt2Selected: string[]; opt2SelectedId: string; opt2Placeholder: string; noOpt2: boolean;
+  opt3Label: string; opt3Chips: OptionChip[]; opt3Selected: string[]; opt3SelectedId: string; opt3Placeholder: string; noOpt3: boolean;
+  opt1Error: string; noOpt1Error: boolean; hasOpt1Error: boolean; opt2Error: string; noOpt2Error: boolean; hasOpt2Error: boolean; opt3Error: string; noOpt3Error: boolean; hasOpt3Error: boolean;
 }
 
-function slotsOf(groups: StoreOption[], selection: StoreOptionSelection): OptionSlots {
+function slotsOf(groups: StoreOption[], selection: StoreOptionSelection, showErrors: boolean): OptionSlots {
   const out = {} as Record<string, unknown>;
   for (let i = 0; i < OPTION_SLOTS; i++) {
     const g = groups[i];
     const n = i + 1;
     const chosen = g ? selection[g.id] ?? "" : "";
-    out[`opt${n}Label`] = g?.name ?? "";
+    const displayName = g?.name ? g.name.charAt(0).toUpperCase() + g.name.slice(1).toLowerCase() : "";
+    out[`opt${n}Label`] = displayName ? copyTemplate("product.optionLabel", "{option}:", { option: displayName }) : "";
     // Out-of-stock choices stay selectable but say so — hiding them makes a product
     // look like it has fewer colours than it does, and the stock flag is per-choice
     // across variants, not a promise about the combination.
-    out[`opt${n}Chips`] = (g?.choices ?? []).map((c) => ({ id: c.id, label: c.inStock ? c.label : `${c.label} · ${copyParam("product.optionOutOfStock", "Out of stock")}` }));
+    out[`opt${n}Chips`] = (g?.choices ?? []).map((c) => ({ id: c.id, label: c.label, ...(g.kind === "color" && c.colorCode ? { swatch: c.colorCode } : {}), disabled: c.inStock === false }));
     out[`opt${n}Selected`] = chosen ? [chosen] : [];
+    out[`opt${n}SelectedId`] = chosen;
+    out[`opt${n}Placeholder`] = g?.choices.find(c => c.id === chosen)?.label ?? copyTemplate("product.optionPlaceholder", "Choose {option}", { option: displayName || "option" });
+    const error = showErrors && g && !chosen ? copyTemplate("product.optionRequired", "Choose a {option}", { option: g.name.toLowerCase() }) : "";
+    out[`opt${n}Error`] = error;
+    out[`noOpt${n}Error`] = !error;
+    out[`hasOpt${n}Error`] = !!error;
     out[`noOpt${n}`] = !g;
   }
   return out as unknown as OptionSlots;
@@ -135,10 +159,76 @@ function productBody(p: StoreProduct): { description: string; descriptionJson: s
   return { description: html || bodyText, descriptionJson: bodyJson };
 }
 
+function productSale(p: StoreProduct): { price: string; wasPrice: string } {
+  const raw = p as unknown as { priceData?: Record<string, unknown> };
+  const pd = raw.priceData ?? {};
+  const formatted = (pd.formatted ?? {}) as Record<string, unknown>;
+  const regular = productPrice(p);
+  if (p.compareAtPriceRange?.minValue) {
+    const original = productPrice({ ...p, price: undefined, priceData: undefined, actualPriceRange: p.compareAtPriceRange });
+    if (original && original !== regular) return { price: regular, wasPrice: original };
+  }
+  const rawRegular = typeof formatted.price === "string" ? formatted.price : regular;
+  const saleRaw = formatted.discountedPrice ?? pd.discountedPrice ?? pd.salePrice;
+  const sale = typeof saleRaw === "string" ? saleRaw : "";
+  const saleDisplay = sale ? productPrice({ ...p, priceData: { ...pd, formatted: { ...formatted, price: sale } } } as StoreProduct) : "";
+  return sale && sale !== rawRegular ? { price: saleDisplay, wasPrice: regular } : { price: regular, wasPrice: "" };
+}
+
+/** The optimistic cart has no Wix-calculated line price yet. Multiply the formatted
+ * unit amount while preserving its symbol, separators and decimal precision. */
+function optimisticLineTotal(unitPrice: string, quantity: number): string {
+  if (quantity <= 1) return unitPrice;
+  const match = /\d(?:[\d.,]|[ \u00a0\u202f](?=\d))*/u.exec(unitPrice);
+  if (!match) return "";
+  const raw = match[0];
+  const compact = raw.replace(/[ \u00a0\u202f]/g, "");
+  const last = Math.max(compact.lastIndexOf("."), compact.lastIndexOf(","));
+  const fractionalDigits = last >= 0 ? compact.length - last - 1 : 0;
+  const decimal = fractionalDigits > 0 && fractionalDigits <= 2 ? compact[last] : "";
+  const punctuationGrouping = decimal === "." ? "," : decimal === "," ? "." : compact.includes(",") ? "," : compact.includes(".") ? "." : "";
+  const grouping = raw.match(/[ \u00a0\u202f](?=\d)/u)?.[0] ?? punctuationGrouping;
+  const amount = Number(compact.replaceAll(punctuationGrouping || "\u0000", "").replace(decimal || "\u0000", "."));
+  if (!Number.isFinite(amount)) return "";
+  const fixed = (amount * quantity).toFixed(decimal ? fractionalDigits : 0);
+  const [whole, fraction] = fixed.split(".");
+  const grouped = grouping ? whole.replace(/\B(?=(\d{3})+(?!\d))/g, grouping) : whole;
+  return unitPrice.replace(raw, `${grouped}${decimal ? decimal + fraction : ""}`);
+}
+
+function skuOf(p: StoreProduct): string {
+  const raw = p as unknown as { sku?: unknown; variantsInfo?: { variants?: Array<{ sku?: unknown }> } };
+  if (typeof raw.sku === "string" && raw.sku.trim()) return raw.sku.trim();
+  const sku = raw.variantsInfo?.variants?.find(v => typeof v.sku === "string" && v.sku.trim())?.sku;
+  return typeof sku === "string" ? sku.trim() : "";
+}
+
 interface S {
   status: "loading" | "ready" | "error";
   name: string;
   price: string;
+  wasPrice: string;
+  notOnSale: boolean;
+  wasPriceEmpty: boolean;
+  noSku: boolean;
+  skuLabel: string;
+  returnPolicyBody: string;
+  shippingInfoBody: string;
+  noReturnPolicyBody: boolean;
+  noShippingInfoBody: boolean;
+  returnPolicyCollapsed: boolean;
+  shippingInfoCollapsed: boolean;
+  noSaveHint: boolean;
+  saveIcon: string;
+  optionsSummary: string;
+  quantityLabel: string;
+  quantityIsOne: boolean;
+  addedSheetPresented: boolean;
+  shareHint: string;
+  noShareHint: boolean;
+  noCartHint: boolean;
+  hideBar: boolean;
+  hideProduct: boolean;
   commercePrice?: string;
   /** The plain-text description: RichContent's fallback, and what shows with no document. */
   description: string;
@@ -147,6 +237,8 @@ interface S {
   descriptionJson: string;
   /** descriptionJson !== "" — gates the plain text, because RichContent draws nothing for "". */
   hasDescriptionJson: boolean;
+  returnPolicyExpanded: boolean;
+  shippingInfoExpanded: boolean;
   image: string;
   /** FULL media gallery (media.items[] with the main image first) — the detail
    *  screen renders a Carousel over it when 2+ images exist. */
@@ -194,14 +286,17 @@ interface S {
   noOptionsOverflow: boolean;
   /** Add to cart is blocked: this product has options and they are not all chosen. */
   optionsIncomplete: boolean;
+  showOptionErrors: boolean;
+  addDisabled: boolean;
   /** The product was served from the offline cache, which carries no option groups.
    *  "No groups" here means UNKNOWN, not "none" — so the CTA must stay blocked rather
    *  than offer a one-tap add for a product that may need a colour and a size. */
   optionsUnknown: boolean;
   optionsHint: string;
-  opt1Label: string; opt1Chips: OptionChip[]; opt1Selected: string[]; noOpt1: boolean;
-  opt2Label: string; opt2Chips: OptionChip[]; opt2Selected: string[]; noOpt2: boolean;
-  opt3Label: string; opt3Chips: OptionChip[]; opt3Selected: string[]; noOpt3: boolean;
+  opt1Label: string; opt1Chips: OptionChip[]; opt1Selected: string[]; opt1SelectedId: string; opt1Placeholder: string; noOpt1: boolean;
+  opt2Label: string; opt2Chips: OptionChip[]; opt2Selected: string[]; opt2SelectedId: string; opt2Placeholder: string; noOpt2: boolean;
+  opt3Label: string; opt3Chips: OptionChip[]; opt3Selected: string[]; opt3SelectedId: string; opt3Placeholder: string; noOpt3: boolean;
+  opt1Error: string; noOpt1Error: boolean; hasOpt1Error: boolean; opt2Error: string; noOpt2Error: boolean; hasOpt2Error: boolean; opt3Error: string; noOpt3Error: boolean; hasOpt3Error: boolean;
   /** The App Store action (`commerce.purchaseFields`), in place of Add to cart while it shows. */
   cartHidden: boolean;
   buyHidden: boolean;
@@ -281,10 +376,27 @@ function derive(s: S): S {
   const hasSingleImage = !!s.image && !hasGallery;
   const groups = s.optionGroups;
   const overflow = groups.length > OPTION_SLOTS;
+  const optionsIncomplete = s.optionsUnknown || !!outOfStockPick(groups, s.selection) || (groups.length > 0 && (overflow || !isSelectionComplete(groups, s.selection)));
   return {
     ...s,
+    notOnSale: !s.wasPrice,
+    wasPriceEmpty: !!s.wasPrice,
+    noSku: !s.skuLabel,
+    noReturnPolicyBody: !s.returnPolicyBody,
+    noShippingInfoBody: !s.shippingInfoBody,
+    returnPolicyCollapsed: !s.returnPolicyExpanded,
+    shippingInfoCollapsed: !s.shippingInfoExpanded,
+    noSaveHint: !s.saveHint,
+    noShareHint: !s.shareHint,
+    noCartHint: !s.cartHint || s.added,
+    hideBar: s.status !== "ready" || !s.name || s.addedSheetPresented,
+    hideProduct: s.status !== "ready" || !s.name,
+    saveIcon: s.saved ? "heart_fill" : "heart",
+    optionsSummary: selectionSummary(s.optionGroups, s.selection),
+    quantityLabel: `Qty: ${s.quantity}`,
+    quantityIsOne: s.quantity <= 1,
     hasDescriptionJson: s.descriptionJson !== "",
-    ...slotsOf(groups, s.selection),
+    ...slotsOf(groups, s.selection, s.showOptionErrors),
     hasOptions: groups.length > 0,
     noOptions: groups.length === 0,
     optionsOverflow: overflow,
@@ -294,9 +406,10 @@ function derive(s: S): S {
     // `optionsUnknown` blocks too: a cached product whose options we never read is
     // indistinguishable from one with none, and adding it would post the variant-less
     // line this whole feature exists to prevent.
-    optionsIncomplete: s.optionsUnknown || !!outOfStockPick(groups, s.selection) || (groups.length > 0 && (overflow || !isSelectionComplete(groups, s.selection))),
+    optionsIncomplete,
+    addDisabled: optionsIncomplete,
     optionsHint: groups.length ? optionsHint(groups, s.selection) : "",
-    saveLabel: s.saved ? copyParam("product.saved", "Saved") : copyParam("product.save", "Save product"),
+    saveLabel: s.saved ? copyParam("savedProducts.removeLabel", "Remove from wishlist") : copyParam("savedProducts.addLabel", "Add to wishlist"),
     notAdding: !s.adding,
     notAdded: !s.added,
     isLoading: s.status === "loading",
@@ -329,15 +442,16 @@ let checkoutEntered = false;
 const defineService = withIapPresentation<S>({
   adapters: SELLS_THROUGH_APPLE ? [storesProductOrders] : [],
   onCreate: commerce => { productPricing = commerce; }, prefix: "product",
-  transientKeys: ["price", "optionsIncomplete", "cartHint", "cartHidden", "buyHidden", "buyLabel", "buyDisabled", "buyNote", "purchasedNote"], contentActions: ["load", "paintCached"],
+  transientKeys: ["price", "optionsIncomplete", "cartHint", "cartHidden", "buyHidden", "buyLabel", "buyDisabled", "buyNote", "purchasedNote", "addedSheetPresented", "shareHint"], contentActions: ["load", "paintCached"],
   items: state => inputId() ? [{ reference: { kind: "storesProduct", id: inputId() }, commerceDisplayPrice: state.price }] : [],
   present: (state, price, allowed) => {
     const purchase = applePurchase(state);
     const unavailable = iapPriceCopy("product").purchaseUnavailable;
     const blocked = lastProduct?.productType?.toLowerCase() === "digital" || (!state.optionsUnknown && !allowed(inputId()));
+    const cartHint = !purchase.appleRoute && blocked ? unavailable : state.cartHint === unavailable ? "" : state.cartHint;
     return {
-      ...state, price: price(inputId()), optionsIncomplete: derive(state).optionsIncomplete || !allowed(inputId()) || lastProduct?.productType?.toLowerCase() === "digital",
-      cartHint: !purchase.appleRoute && blocked ? unavailable : state.cartHint === unavailable ? "" : state.cartHint,
+      ...state, price: price(inputId()), ...(purchase.appleRoute ? { wasPrice: "", wasPriceEmpty: false, notOnSale: true } : {}), optionsIncomplete: derive(state).optionsIncomplete || !allowed(inputId()) || lastProduct?.productType?.toLowerCase() === "digital",
+      cartHint, noCartHint: !cartHint || state.added, addDisabled: state.addDisabled || blocked,
       cartHidden: purchase.appleRoute,
       buyHidden: !purchase.appleRoute || purchase.accessReady, buyLabel: purchase.buyLabel, buyDisabled: purchase.buyDisabled, buyNote: purchase.buyNote,
       purchasedNote: purchase.accessReady ? copyParam("product.purchasedText", "Purchased") : "",
@@ -367,6 +481,8 @@ function enterCheckout(): void {
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => Promise<S>;
   setQuantity: (s: S, arg?: unknown) => S;
+  toggleReturnPolicy: (s: S) => S;
+  toggleShippingInfo: (s: S) => S;
   selectOption: (s: S, arg?: unknown) => S;
   addToCart: (s: S) => Promise<S>;
   beginAdd: (s: S, arg?: unknown) => S;
@@ -374,6 +490,7 @@ const svc = defineService<S, {
   setCartCount: (s: S, arg?: unknown) => S;
   share: (s: S) => Promise<S>;
   toggleSave: (s: S) => S;
+  closeAddedSheet: (s: S) => S;
   /** [rico] #3372 — RichContent's on_link: `{ url }` of the tapped link. */
   openLink: (s: S, arg?: unknown) => Promise<S>;
   /** The App Store Buy: through the shared checkout, for the product on screen. */
@@ -383,9 +500,33 @@ const svc = defineService<S, {
     status: "loading",
     name: "",
     price: "",
+    wasPrice: "",
+    notOnSale: true,
+    wasPriceEmpty: false,
+    skuLabel: "",
+    noSku: true,
+    returnPolicyBody: "",
+    shippingInfoBody: "",
+    noReturnPolicyBody: true,
+    noShippingInfoBody: true,
+    returnPolicyCollapsed: true,
+    shippingInfoCollapsed: true,
+    noSaveHint: true,
+    saveIcon: "heart",
+    optionsSummary: "",
+    quantityLabel: "Qty: 1",
+    quantityIsOne: true,
+    addedSheetPresented: false,
+    shareHint: "",
+    noShareHint: true,
+    noCartHint: true,
+    hideBar: true,
+    hideProduct: true,
     description: "",
     descriptionJson: "",
     hasDescriptionJson: false,
+    returnPolicyExpanded: false,
+    shippingInfoExpanded: false,
     image: "",
     gallery: [],
     hasGallery: false,
@@ -419,11 +560,14 @@ const svc = defineService<S, {
     optionsOverflow: false,
     noOptionsOverflow: true,
     optionsIncomplete: false,
+    showOptionErrors: false,
+    addDisabled: false,
     optionsUnknown: false,
     optionsHint: "",
-    opt1Label: "", opt1Chips: [], opt1Selected: [], noOpt1: true,
-    opt2Label: "", opt2Chips: [], opt2Selected: [], noOpt2: true,
-    opt3Label: "", opt3Chips: [], opt3Selected: [], noOpt3: true,
+    opt1Label: "", opt1Chips: [], opt1Selected: [], opt1SelectedId: "", opt1Placeholder: "", noOpt1: true,
+    opt2Label: "", opt2Chips: [], opt2Selected: [], opt2SelectedId: "", opt2Placeholder: "", noOpt2: true,
+    opt3Label: "", opt3Chips: [], opt3Selected: [], opt3SelectedId: "", opt3Placeholder: "", noOpt3: true,
+    opt1Error: "", noOpt1Error: true, hasOpt1Error: false, opt2Error: "", noOpt2Error: true, hasOpt2Error: false, opt3Error: "", noOpt3Error: true, hasOpt3Error: false,
     cartHidden: false,
     buyHidden: true,
     buyLabel: "",
@@ -441,7 +585,7 @@ const svc = defineService<S, {
       // Storage problems must not prevent browsing or buying a product.
       let saved = false;
       try { saved = isProductSaved(id); } catch { /* save action reports a retryable error */ }
-      s = { ...s, saved, saveHint: "", adding: false, added: false };
+      s = { ...s, saved, saveHint: "", shareHint: "", adding: false, added: false, addedSheetPresented: false, quantity: 1, showOptionErrors: false, returnPolicyExpanded: false, shippingInfoExpanded: false };
       // A fresh navigation into the product resets any quantity left over
       // from a previous visit to the same worker instance.
       if (!id) {
@@ -497,6 +641,7 @@ const svc = defineService<S, {
         // A group with exactly one choice is chosen for the shopper; a real choice
         // is left blank so the pick is deliberate.
         const optionGroups = productOptions(p);
+        const sale = productSale(p);
         // A pooled screen re-appearing re-runs `load`. Wiping `selection` there means a
         // trip to the cart and back silently clears the size the shopper picked and
         // re-disables the CTA with no explanation. Carry the picks when this is the SAME
@@ -518,8 +663,11 @@ const svc = defineService<S, {
           selection: { ...defaultSelection(optionGroups), ...carried },
           optionsUnknown: false,
           name,
-          price: productPrice(p),
-          commercePrice: productPrice(p),
+          ...sale,
+          commercePrice: sale.price,
+          skuLabel: skuOf(p) ? `SKU: ${skuOf(p)}` : "",
+          returnPolicyBody: productPolicyBody(p, "returns") || copyParam("product.returnPolicyBody", "") || copyParam("product.policyUnavailable", "Policy details have not been provided by this store."),
+          shippingInfoBody: productPolicyBody(p, "shipping") || copyParam("product.shippingInfoBody", "") || copyParam("product.policyUnavailable", "Policy details have not been provided by this store."),
           ...productBody(p),
           image,
           gallery: productGallery(p),
@@ -550,6 +698,10 @@ const svc = defineService<S, {
           optionsUnknown: true,
           name,
           price: String(synced.subtitle ?? ""),
+          wasPrice: "",
+          skuLabel: "",
+          returnPolicyBody: "",
+          shippingInfoBody: "",
           description: "",
           descriptionJson: "",
           image,
@@ -569,6 +721,8 @@ const svc = defineService<S, {
       const quantity = parseQuantity(argValue(arg, "value"));
       return quantity ? derive({ ...s, quantity }) : s;
     },
+    toggleReturnPolicy: s => derive({ ...s, returnPolicyExpanded: !s.returnPolicyExpanded }),
+    toggleShippingInfo: s => derive({ ...s, shippingInfoExpanded: !s.shippingInfoExpanded }),
     // One chip row per option group. `group` is the descriptor slot ("1".."3");
     // FilterChips sends back the WHOLE selected set, which for a single-select row
     // is either one id or none (re-tapping the active chip clears it).
@@ -576,16 +730,17 @@ const svc = defineService<S, {
       const slot = Math.floor(Number(argValue(arg, "group")));
       const group = s.optionGroups[slot - 1];
       if (!group) return s;
-      const raw = (arg as { selectedIds?: unknown } | undefined)?.selectedIds;
-      const picked = Array.isArray(raw) ? String(raw[0] ?? "") : String(raw ?? "");
+      const raw = (arg as { selectedIds?: unknown; selectedId?: unknown; id?: unknown; value?: unknown } | undefined);
+      const selected = raw?.selectedIds;
+      const picked = Array.isArray(selected) ? String(selected[0] ?? "") : String(raw?.selectedId ?? raw?.id ?? raw?.value ?? selected ?? "");
       // Only a choice this group actually offers — a stale id from a previous
       // product would otherwise resolve to no variant and block the cart silently.
-      const choice = group.choices.some((c) => c.id === picked) ? picked : "";
+      const choice = group.choices.some((c) => c.id === picked && c.inStock !== false) ? picked : "";
       const selection = { ...s.selection };
       if (choice) selection[group.id] = choice; else delete selection[group.id];
       // A new choice invalidates the last add's confirmation — it was for the
       // previous variant.
-      return derive({ ...s, selection, added: false, cartHint: "" });
+      return derive({ ...s, selection, added: false, addedSheetPresented: false, cartHint: "" });
     },
     // The pending half of addToCart, as its own reducer so it PUBLISHES before the
     // network write starts: the pending line shows and the top-bar badge ticks up in the same
@@ -594,7 +749,7 @@ const svc = defineService<S, {
     beginAdd: (s, arg) => {
       const quantity = parseQuantity(argValue(arg, "quantity")) ?? 1;
       cartBadgeEpoch += 1;
-      return derive({ ...s, adding: true, added: false, cartHint: "", cartCount: s.cartCount + quantity });
+      return derive({ ...s, adding: true, added: false, addedSheetPresented: false, cartHint: "", cartCount: s.cartCount + quantity });
     },
     // The first paint from the list's synced row (called from load, not from the descriptor):
     // name, price and image are on screen while the live product — description, gallery — loads.
@@ -641,7 +796,7 @@ const svc = defineService<S, {
       if (s.optionsIncomplete) {
         // With no groups in hand there is nothing for `optionsHint` to name, so the
         // offline case needs its own reason rather than an empty string.
-        return derive({ ...s, cartHint: s.optionsUnknown
+        return derive({ ...s, showOptionErrors: true, cartHint: s.optionsUnknown
           ? copyParam("product.cartHintOffline", "Reconnect to choose options and add this to your cart.")
           : optionsHint(s.optionGroups, s.selection) || copyParam("product.cartHintNoVariant", "That combination is not available. Try another.") });
       }
@@ -668,7 +823,10 @@ const svc = defineService<S, {
       // then shows one line for two adds. Sorted so the key is stable whatever order the
       // groups were picked in, and reduced to id-safe characters.
       const variantKey = Object.keys(s.selection).sort().map((k) => `${k}:${s.selection[k]}`).join("|").replace(/[^A-Za-z0-9]+/g, "_");
-      const line: DbEntity = { id: variantKey ? `line-${id}-${variantKey}` : `line-${id}`, productId: id, name: s.name || "product", title: s.name || "product", subtitle: chosen ? `${chosen} · Qty ${quantity}` : `Qty ${quantity}`, quantity: String(quantity) };
+      const unitPrice = s.commercePrice || s.price;
+      const sale = lastProduct ? productSale(lastProduct) : { wasPrice: "" };
+      const swatches = s.optionGroups.flatMap(g => g.kind === "color" ? g.choices.map(c => c.colorCode).filter(Boolean) : []).slice(0, 5);
+      const line: DbEntity = { id: variantKey ? `line-${id}-${variantKey}` : `line-${id}`, productId: id, name: s.name || "product", title: s.name || "product", subtitle: chosen ? `${chosen} · Qty ${quantity}` : `Qty ${quantity}`, quantity: String(quantity), image: s.image, unitPrice, wasPrice: sale.wasPrice, swatches, total: optimisticLineTotal(unitPrice, quantity), hasImage: !!s.image, noImage: !s.image };
       await cartPut(line);
       try {
         await addToCurrentCart(id, quantity, cartOptions);
@@ -685,15 +843,18 @@ const svc = defineService<S, {
       // The write LANDED. The badge re-read is outside the write's try on purpose: a failed
       // count must never be mistaken for a failed add. Server count wins; else keep optimistic.
       const count = await cartItemCount().catch(() => 0);
-      return derive({ ...s, adding: false, added: true, cartHint: copyTemplate("product.cartHintAdded", "Added {name} to cart.", { name: s.name || "product" }), cartCount: count || s.cartCount });
+      const confirmation = copyTemplate("product.cartHintAdded", "Added {name} to cart.", { name: s.name || "product" });
+      return derive({ ...s, adding: false, added: true, addedSheetPresented: true, cartHint: `${confirmation}${quantity > 1 ? ` Qty: ${quantity}` : ""}`, cartCount: count || s.cartCount });
     },
     toggleSave: (s) => {
       if (s.status !== "ready" || !s.name || !inputId()) return s;
       try {
-        const saved = toggleSavedProduct({ id: inputId(), name: s.name, price: lastProduct ? productPrice(lastProduct) : s.commercePrice ?? "", image: s.image });
+        const sale = lastProduct ? productSale(lastProduct) : { price: s.commercePrice ?? "", wasPrice: "" };
+        const saved = toggleSavedProduct({ id: inputId(), name: s.name, price: sale.price, wasPrice: sale.wasPrice, image: s.image,
+          swatches: s.optionGroups.flatMap(g => g.kind === "color" ? g.choices.map(c => c.colorCode).filter(Boolean) : []).slice(0, 5) });
         return derive({ ...s, saved, saveHint: saved
-          ? copyParam("product.saveSuccess", "Saved on this device.")
-          : copyParam("product.saveRemoved", "Removed from saved products.") });
+          ? copyParam("product.saveSuccess", "Added to wishlist.")
+          : copyParam("product.saveRemoved", "Removed from wishlist.") });
       } catch {
         return derive({ ...s, saveHint: copyParam("product.saveError", "Could not save this change. Try again.") });
       }
@@ -702,12 +863,13 @@ const svc = defineService<S, {
       if (!s.name) return s;
       try {
         await shareSheet({ subject: s.name, text: s.name, ...(s.shareUrl ? { url: s.shareUrl } : {}) });
-        return s;
+        return derive({ ...s, shareHint: "" });
       } catch {
         // `added: false` — this hint must not render inside the add-to-cart confirmation.
-        return derive({ ...s, added: false, cartHint: copyParam("product.shareUnavailable", "Sharing is not available on this device.") });
+        return derive({ ...s, shareHint: copyParam("product.shareUnavailable", "Sharing is not available on this device.") });
       }
     },
+    closeAddedSheet: s => derive({ ...s, addedSheetPresented: false }),
     // Only http(s), mailto and tel links reach open_url; a refused link, or one nothing opened, says so in the
     // hint line (`added: false`, as for share, so it never renders inside the add-to-cart confirmation).
     openLink: async (s, arg) => ((await openRichLink(arg))

package/templates/branded-lite/tier5-src/himi-store-saved/index.ts

@@ -3,7 +3,12 @@ import { withEmptyFlags } from "../_shared/empty-flags.js";
 import { readSavedProducts, removeSavedProduct, type SavedProduct } from "../_shared/himi-store-saved.js";
 import { stashCopy, copyParam } from "../_shared/himi-copy.js";
 
-interface Row extends SavedProduct { commercePrice?: string; initial: string; noImage: boolean; hasImage: boolean; detailScreenId: string }
+interface Row extends SavedProduct {
+  commercePrice?: string; initial: string; noImage: boolean; hasImage: boolean; detailScreenId: string;
+  notOnSale: boolean; wasPriceEmpty: boolean; noSwatches: boolean; noTagRow: boolean;
+  swatch1: string; swatch2: string; swatch3: string; swatch4: string; swatch5: string;
+  noSwatch1: boolean; noSwatch2: boolean; noSwatch3: boolean; noSwatch4: boolean; noSwatch5: boolean;
+}
 interface S {
   status: "loading" | "ready" | "error";
   rows: Row[];
@@ -13,20 +18,31 @@ interface S {
   notLoading: boolean;
   notErrored: boolean;
   noEmpty: boolean;
+  hasRows: boolean;
 }
 function shape(s: Pick<S, "status" | "rows" | "error">): S {
-  return { ...s, isLoading: s.status === "loading", notLoading: s.status !== "loading", notErrored: s.status !== "error", noEmpty: s.status !== "ready" || s.rows.length > 0, emptyText: copyParam("savedProducts.empty", "Save a product to find it here later.") };
+  return { ...s, isLoading: s.status === "loading", notLoading: s.status !== "loading", notErrored: s.status !== "error", noEmpty: s.status !== "ready" || s.rows.length > 0, hasRows: s.rows.length > 0, emptyText: copyParam("savedProducts.empty", "Tap the heart on a product to add it to your wishlist.") };
 }
 function loadRows(): Row[] {
-  return readSavedProducts().map(row => ({ ...row, commercePrice: row.price, initial: row.name.slice(0, 1).toUpperCase(), hasImage: !!row.image, noImage: !row.image, detailScreenId: "himi_product" }));
+  return readSavedProducts().map(row => {
+    const swatches = (row.swatches ?? []).filter(value => /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(value)).slice(0, 5);
+    return { ...row, commercePrice: row.price, initial: row.name.slice(0, 1).toUpperCase(), hasImage: !!row.image, noImage: !row.image,
+      detailScreenId: "himi_product", notOnSale: !row.wasPrice, wasPriceEmpty: !!row.wasPrice, noSwatches: swatches.length === 0, noTagRow: !row.wasPrice && swatches.length === 0,
+      swatch1: swatches[0] ?? "", swatch2: swatches[1] ?? "", swatch3: swatches[2] ?? "", swatch4: swatches[3] ?? "", swatch5: swatches[4] ?? "",
+      noSwatch1: !swatches[0], noSwatch2: !swatches[1], noSwatch3: !swatches[2], noSwatch4: !swatches[3], noSwatch5: !swatches[4] };
+  });
 }
 function failed(s: S): S {
-  return shape({ ...s, status: "error", error: copyParam("savedProducts.error", "Could not update saved products. Try again.") });
+  return shape({ ...s, status: "error", error: copyParam("savedProducts.error", "Could not update your wishlist. Try again.") });
 }
 const defineService = withIapPresentation<S>({
   prefix: "savedProducts", transientKeys: ["rows"], contentActions: ["load", "remove"],
   items: state => state.rows.map(row => ({ reference: { kind: "storesProduct", id: row.id }, commerceDisplayPrice: row.commercePrice ?? row.price })),
-  present: (state, price) => ({ ...state, rows: state.rows.map(row => ({ ...row, price: price(row.id, row.commercePrice ?? row.price) })) }),
+  present: (state, price) => ({ ...state, rows: state.rows.map(row => {
+    const next = price(row.id, row.commercePrice ?? row.price);
+    const iapAdjusted = next !== (row.commercePrice ?? row.price);
+    return { ...row, price: next, wasPriceEmpty: !!row.wasPrice && !iapAdjusted, notOnSale: !row.wasPrice || iapAdjusted, noTagRow: (!row.wasPrice || iapAdjusted) && !row.swatches?.length };
+  }) }),
 });
 const svc = defineService<S, {
   load: (s: S, arg?: unknown) => S;

package/templates/branded-lite/tier5-src/himi-store-shop/index.ts

@@ -39,6 +39,7 @@ interface Row {
   name: string;
   subtitle: string;
   commercePrice: string;
+  wasPrice: string;
   image: string;
   initial: string;
   hasImage: boolean;
@@ -73,11 +74,22 @@ function row(p: StoreProduct): Row {
   const name = cleanTitle(p.name) || "Product";
   const image = productImage(p);
   const id = p.id ?? "";
+  const priceData = p.priceData as { formatted?: { discountedPrice?: string; price?: string }; discountedPrice?: string; salePrice?: string } | undefined;
+  const regular = productPrice(p);
+  const discounted = priceData?.formatted?.discountedPrice ?? priceData?.discountedPrice ?? priceData?.salePrice;
+  const salePrice = discounted && discounted !== (priceData?.formatted?.price ?? regular)
+    ? productPrice({ ...p, priceData: { ...priceData, formatted: { ...priceData?.formatted, price: discounted } } } as StoreProduct)
+    : "";
+  const originalV3 = p.compareAtPriceRange?.minValue
+    ? productPrice({ ...p, price: undefined, priceData: undefined, actualPriceRange: p.compareAtPriceRange })
+    : "";
+  const wasPrice = salePrice ? regular : originalV3 && originalV3 !== regular ? originalV3 : "";
   return {
     id,
     name,
-    subtitle: productPrice(p),
-    commercePrice: productPrice(p),
+    subtitle: salePrice || regular,
+    commercePrice: salePrice || regular,
+    wasPrice,
     image,
     initial: initials(name),
     hasImage: !!image,

package/templates/branded-lite/tokens.json

@@ -35,9 +35,17 @@
     "body":   { "size": 16, "weight": 400, "line": 1.5, "letterSpacing": 0 },
     "bodyEmphasis": { "size": 16, "weight": 700, "line": 1.35, "letterSpacing": 0 },
     "footnote": { "size": 14, "weight": 500, "line": 1.35, "letterSpacing": 0 },
+    "footnoteRegular": { "size": 14, "weight": 400, "line": 1.4, "letterSpacing": 1 },
     "caption": { "size": 13, "weight": 400, "line": 1.4, "letterSpacing": 0 },
     "display": { "size": 34, "weight": 800, "line": 1.1, "letterSpacing": 0 }
   },
+  "controls": {
+    "button": {
+      "variants": {
+        "tertiary": { "label": "textPrimary" }
+      }
+    }
+  },
   "radius": {
     "sm": 4,
     "md": 8,

package/templates/community-club/dev/index.ts

@@ -258,7 +258,7 @@ const SCREENS = runtimeSetting({
                                                                   "package": "himalaya",
                                                                   "type": "Text",
                                                                   "props": {
-                                                                    "text": "Products you saved",
+                                                                    "text": "Wishlist",
                                                                     "style": "bodyEmphasis"
                                                                   }
                                                                 }

package/templates/community-club/tier5-src/_shared/himi-store-saved.ts

@@ -5,6 +5,8 @@ export interface SavedProduct {
   name: string;
   price: string;
   image: string;
+  wasPrice?: string;
+  swatches?: string[];
 }
 type StorageLike = { getItem(key: string): string | null; setItem(key: string, value: string): void };
 const KEY = "himi-store:saved-products:v1";
@@ -24,7 +26,11 @@ export function readSavedProducts(): SavedProduct[] {
     if (!value || typeof value !== "object") continue;
     const row = value as Record<string, unknown>;
     if (typeof row.id !== "string" || !row.id.trim() || typeof row.name !== "string") continue;
-    rows.set(row.id, { id: row.id, name: row.name, price: typeof row.price === "string" ? row.price : "", image: typeof row.image === "string" ? row.image : "" });
+    const swatches = Array.isArray(row.swatches)
+      ? row.swatches.filter((color): color is string => typeof color === "string" && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)).slice(0, 5)
+      : [];
+    rows.set(row.id, { id: row.id, name: row.name, price: typeof row.price === "string" ? row.price : "", image: typeof row.image === "string" ? row.image : "",
+      ...(typeof row.wasPrice === "string" && row.wasPrice ? { wasPrice: row.wasPrice } : {}), ...(swatches.length ? { swatches } : {}) });
   }
   return [...rows.values()];
 }

package/templates/community-club/tokens.json

@@ -161,6 +161,12 @@
       "letterSpacing": 0.1,
       "family": "Wix Madefor Text"
     },
+    "footnoteRegular": {
+      "size": 14,
+      "weight": 400,
+      "line": 1.4,
+      "letterSpacing": 1
+    },
     "caption": {
       "size": 13,
       "weight": 600,
@@ -183,6 +189,15 @@
       "family": "Wix Madefor Display"
     }
   },
+  "controls": {
+    "button": {
+      "variants": {
+        "tertiary": {
+          "label": "textPrimary"
+        }
+      }
+    }
+  },
   "radius": {
     "sm": 18,
     "md": 24,

package/templates/events-meetups/dev/index.ts

@@ -258,7 +258,7 @@ const SCREENS = runtimeSetting({
                                                                   "package": "himalaya",
                                                                   "type": "Text",
                                                                   "props": {
-                                                                    "text": "Products you saved",
+                                                                    "text": "Wishlist",
                                                                     "style": "bodyEmphasis"
                                                                   }
                                                                 }

package/templates/events-meetups/tier5-src/_shared/himi-store-saved.ts

@@ -5,6 +5,8 @@ export interface SavedProduct {
   name: string;
   price: string;
   image: string;
+  wasPrice?: string;
+  swatches?: string[];
 }
 type StorageLike = { getItem(key: string): string | null; setItem(key: string, value: string): void };
 const KEY = "himi-store:saved-products:v1";
@@ -24,7 +26,11 @@ export function readSavedProducts(): SavedProduct[] {
     if (!value || typeof value !== "object") continue;
     const row = value as Record<string, unknown>;
     if (typeof row.id !== "string" || !row.id.trim() || typeof row.name !== "string") continue;
-    rows.set(row.id, { id: row.id, name: row.name, price: typeof row.price === "string" ? row.price : "", image: typeof row.image === "string" ? row.image : "" });
+    const swatches = Array.isArray(row.swatches)
+      ? row.swatches.filter((color): color is string => typeof color === "string" && /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)).slice(0, 5)
+      : [];
+    rows.set(row.id, { id: row.id, name: row.name, price: typeof row.price === "string" ? row.price : "", image: typeof row.image === "string" ? row.image : "",
+      ...(typeof row.wasPrice === "string" && row.wasPrice ? { wasPrice: row.wasPrice } : {}), ...(swatches.length ? { swatches } : {}) });
   }
   return [...rows.values()];
 }