@wix/himalaya-cli 0.1580.0 → 0.1582.0

package/templates/portfolio-creative/tier5-src/himi-store-product/index.ts

@@ -44,6 +44,7 @@ async function cartItemCount(): Promise<number> {
 }
 
 interface GalleryItem {
+  id: string;
   url: string;
 }
 
@@ -134,8 +135,8 @@ function slotsOf(groups: StoreOption[], selection: StoreOptionSelection, showErr
     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}Placeholder`] = g?.choices.find(c => c.id === chosen)?.label ?? copyTemplate("product.optionPlaceholder", "Select {option}", { option: displayName || "option" });
+    const error = showErrors && g && !chosen ? copyTemplate("product.optionRequired", "Select a {option}", { option: g.name.toLowerCase() }) : "";
     out[`opt${n}Error`] = error;
     out[`noOpt${n}Error`] = !error;
     out[`hasOpt${n}Error`] = !!error;
@@ -261,6 +262,11 @@ interface S {
   /** FULL media gallery (media.items[] with the main image first) — the detail
    *  screen renders a Carousel over it when 2+ images exist. */
   gallery: GalleryItem[];
+  galleryIndex: number;
+  galleryLabel: string;
+  opt1ScrollRequest: string;
+  opt2ScrollRequest: string;
+  opt3ScrollRequest: string;
   hasGallery: boolean;
   noGallery: boolean;
   initial: string;
@@ -270,6 +276,7 @@ interface S {
   cartCount: number;
   /** An add-to-cart write is in flight (pending line under the CTA). */
   adding: boolean;
+  addLabel: string;
   notAdding: boolean;
   /** The last add succeeded (confirmation + View cart under the CTA). */
   added: boolean;
@@ -305,6 +312,8 @@ interface S {
   /** Add to cart is blocked: this product has options and they are not all chosen. */
   optionsIncomplete: boolean;
   showOptionErrors: boolean;
+  optionValidationRequest: number;
+  optionValidationTarget: string;
   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
@@ -352,7 +361,8 @@ export function productGallery(p: StoreProduct): GalleryItem[] {
   // image no matter what the read asked for. One reader, not a private copy per
   // worker — that is how the two layouts drifted apart in the first place.
   for (const url of sdkProductGallery(p, WIX_DETAIL_IMAGE)) push(url);
-  return urls.map((url) => ({ url }));
+  for (const group of productOptions(p, WIX_DETAIL_IMAGE)) for (const choice of group.choices) push(choice.image);
+  return urls.map((url) => ({ id: url, url }));
 }
 
 /** The product's public page URL when the payload carries one ("" otherwise) —
@@ -390,6 +400,7 @@ function parseQuantity(raw: string): number | undefined {
 
 function derive(s: S): S {
   const empty = s.status === "ready" && !s.name;
+  const galleryIndex = Math.min(Math.max(0, Math.floor(Number(s.galleryIndex) || 0)), Math.max(0, s.gallery.length - 1));
   const hasGallery = s.gallery.length > 1;
   const hasSingleImage = !!s.image && !hasGallery;
   const groups = s.optionGroups;
@@ -397,6 +408,8 @@ function derive(s: S): S {
   const optionsIncomplete = s.optionsUnknown || !!outOfStockPick(groups, s.selection) || (groups.length > 0 && (overflow || !isSelectionComplete(groups, s.selection)));
   return {
     ...s,
+    galleryIndex,
+    galleryLabel: s.gallery.length ? copyTemplate("product.galleryPage", "Image {index} of {count}", { index: String(galleryIndex + 1), count: String(s.gallery.length) }) : "",
     notOnSale: !s.wasPrice,
     wasPriceEmpty: !!s.wasPrice,
     noSku: !s.skuLabel,
@@ -425,9 +438,12 @@ function derive(s: S): S {
     // indistinguishable from one with none, and adding it would post the variant-less
     // line this whole feature exists to prevent.
     optionsIncomplete,
-    addDisabled: optionsIncomplete,
+    ...Object.fromEntries([1, 2, 3].map(n => [`opt${n}ScrollRequest`,
+      s.showOptionErrors && groups[n - 1]?.id === s.optionValidationTarget && !s.selection[groups[n - 1].id] ? String(s.optionValidationRequest || "") : ""])),
+    addDisabled: s.adding || s.optionsUnknown || overflow || !!outOfStockPick(groups, s.selection),
     optionsHint: groups.length ? optionsHint(groups, s.selection) : "",
     saveLabel: s.saved ? copyParam("savedProducts.removeLabel", "Remove from wishlist") : copyParam("savedProducts.addLabel", "Add to wishlist"),
+    addLabel: s.adding ? copyParam("product.adding", "Adding to cart…") : copyParam("product.addToCart", "Add to cart"),
     notAdding: !s.adding,
     notAdded: !s.added,
     isLoading: s.status === "loading",
@@ -461,7 +477,7 @@ const defineService = withIapPresentation<S>({
   register: withOnlineWrites(registerState, ["beginAdd", "addToCart", "buy"], { derive, messageFields: action => action === "buy" ? ["buyNote"] : ["cartHint"] }),
   adapters: SELLS_THROUGH_APPLE ? [storesProductOrders] : [],
   onCreate: commerce => { productPricing = commerce; }, prefix: "product",
-  transientKeys: ["price", "optionsIncomplete", "cartHint", "cartHidden", "buyHidden", "buyLabel", "buyDisabled", "buyNote", "purchasedNote", "addedSheetPresented", "shareHint"], contentActions: ["load", "paintCached"], concurrentPublishActions: ["buy"],
+  transientKeys: ["optionValidationTarget", "optionValidationRequest", "opt1ScrollRequest", "opt2ScrollRequest", "opt3ScrollRequest", "galleryIndex", "price", "optionsIncomplete", "cartHint", "cartHidden", "buyHidden", "buyLabel", "buyDisabled", "buyNote", "purchasedNote", "addedSheetPresented", "shareHint"], contentActions: ["load", "paintCached"], concurrentPublishActions: ["buy"],
   items: state => inputId() ? [{ reference: { kind: "storesProduct", id: inputId() }, commerceDisplayPrice: state.price }] : [],
   present: (state, price, allowed) => {
     const purchase = applePurchase(state);
@@ -469,9 +485,10 @@ const defineService = withIapPresentation<S>({
     const blocked = lastProduct?.productType?.toLowerCase() === "digital" || (!state.optionsUnknown && !allowed(inputId()));
     const cartHint = state.cartHint === offlineWriteMessage ? state.cartHint
       : !purchase.appleRoute && blocked ? unavailable : state.cartHint === unavailable ? "" : state.cartHint;
+    const productState = derive(state);
     return {
-      ...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,
+      ...state, price: price(inputId()), ...(purchase.appleRoute ? { wasPrice: "", wasPriceEmpty: false, notOnSale: true } : {}), optionsIncomplete: productState.optionsIncomplete || !allowed(inputId()) || lastProduct?.productType?.toLowerCase() === "digital",
+      cartHint, noCartHint: !cartHint || state.added, addDisabled: productState.addDisabled || blocked,
       cartHidden: purchase.appleRoute,
       buyHidden: !purchase.appleRoute || purchase.accessReady, buyLabel: purchase.buyLabel, buyDisabled: purchase.buyDisabled,
       buyNote: state.buyNote === offlineWriteMessage ? state.buyNote : purchase.buyNote,
@@ -505,6 +522,7 @@ const svc = defineService<S, {
   toggleReturnPolicy: (s: S) => S;
   toggleShippingInfo: (s: S) => S;
   selectOption: (s: S, arg?: unknown) => S;
+  setGalleryIndex: (s: S, arg?: unknown) => S;
   addToCart: (s: S) => Promise<S>;
   beginAdd: (s: S, arg?: unknown) => S;
   paintCached: (s: S, arg?: unknown) => S;
@@ -550,6 +568,9 @@ const svc = defineService<S, {
     shippingInfoExpanded: false,
     image: "",
     gallery: [],
+    galleryIndex: 0,
+    opt1ScrollRequest: "", opt2ScrollRequest: "", opt3ScrollRequest: "",
+    galleryLabel: "",
     hasGallery: false,
     noGallery: true,
     initial: "",
@@ -557,6 +578,7 @@ const svc = defineService<S, {
     cartHint: "",
     cartCount: 0,
     adding: false,
+    addLabel: "",
     notAdding: true,
     added: false,
     notAdded: true,
@@ -582,6 +604,8 @@ const svc = defineService<S, {
     noOptionsOverflow: true,
     optionsIncomplete: false,
     showOptionErrors: false,
+    optionValidationRequest: 0,
+    optionValidationTarget: "",
     addDisabled: false,
     optionsUnknown: false,
     optionsHint: "",
@@ -607,7 +631,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: "", shareHint: "", adding: false, added: false, addedSheetPresented: false, quantity: 1, showOptionErrors: false, returnPolicyExpanded: false, shippingInfoExpanded: false };
+        s = { ...s, saved, saveHint: "", shareHint: "", adding: false, added: false, addedSheetPresented: false, quantity: 1, showOptionErrors: false, optionValidationRequest: 0, optionValidationTarget: "", galleryIndex: 0, 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) {
@@ -625,7 +649,7 @@ const svc = defineService<S, {
         // The live product read goes out FIRST too — the local-db read below must never delay it.
         // Settled into a value so a failure is handled where it is awaited, never unhandled.
         // DESCRIPTION widens the default fieldset with the V3 Ricos description (a V1 catalog ignores it).
-        const live = getStoreProduct(id, ["DESCRIPTION"]).then(
+        const live = getStoreProduct(id, ["DESCRIPTION", "PRODUCT_CHOICES_DISPLAY_IMAGE"]).then(
           (r) => ({ ok: true as const, r }),
           () => ({ ok: false as const }),
         );
@@ -658,11 +682,11 @@ const svc = defineService<S, {
         if (outcome.ok) {
           const p = (outcome.r.product ?? (outcome.r as unknown as StoreProduct)) as StoreProduct;
           const name = cleanTitle(p.name) || "Product";
-          const image = productImage(p, WIX_DETAIL_IMAGE);
+          const image = productImage(p, WIX_DETAIL_IMAGE) || productGallery(p)[0]?.url || "";
           lastProduct = p;
           // 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 optionGroups = productOptions(p, WIX_DETAIL_IMAGE);
           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
@@ -749,6 +773,11 @@ const svc = defineService<S, {
     // 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).
+    setGalleryIndex: (s, arg) => {
+      const raw = argValue(arg, "index") || argValue(arg, "value");
+      const index = raw.trim() ? Number(raw) : NaN;
+      return Number.isInteger(index) && index >= 0 && index < s.gallery.length ? derive({ ...s, galleryIndex: index }) : s;
+    },
     selectOption: (s, arg) => {
       const slot = Math.floor(Number(argValue(arg, "group")));
       const group = s.optionGroups[slot - 1];
@@ -763,7 +792,9 @@ const svc = defineService<S, {
       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, addedSheetPresented: false, cartHint: "" });
+      const image = group.choices.find(c => c.id === choice)?.image;
+      const imageIndex = image ? s.gallery.findIndex(page => page.url === image) : -1;
+      return derive({ ...s, selection, optionValidationTarget: "", ...(imageIndex >= 0 ? { galleryIndex: imageIndex } : {}), 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
@@ -819,7 +850,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, showOptionErrors: true, cartHint: s.optionsUnknown
+        return derive({ ...s, showOptionErrors: true, optionValidationTarget: s.optionGroups.find(g => !s.selection[g.id])?.id ?? "", optionValidationRequest: (s.optionValidationRequest || 0) + 1, 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.") });
       }