@thefittingroom/shop-ui 5.0.32 → 5.0.34

package/dist/index.js

@@ -41660,11 +41660,74 @@ async function loadProductData(externalId) {
     throw new Error(`Style not found for externalId: ${externalId}`);
   }
   const sizeFitRecommendation = await getSizeRecommendation(style.id);
+  const container = style.is_container ? {
+    children: style.children ?? [],
+    setSizeMappings: style.set_size_mappings ?? []
+  } : void 0;
   return {
     externalId,
     style,
-    sizeFitRecommendation
-  };
+    sizeFitRecommendation,
+    container
+  };
+}
+function buildVtoWireItems(loaded, parentCsaId, untucked) {
+  const untuckFrag = untucked ? {
+    untucked: true
+  } : {};
+  if (!loaded.container) {
+    return [{
+      colorway_size_asset_id: parentCsaId,
+      ...untuckFrag
+    }];
+  }
+  const childCsaIds = resolveContainerExpansion(loaded, parentCsaId);
+  if (!childCsaIds) {
+    return null;
+  }
+  return childCsaIds.map((csaId) => ({
+    colorway_size_asset_id: csaId,
+    ...untuckFrag
+  }));
+}
+function resolveContainerExpansion(loaded, parentCsaId) {
+  if (!loaded.container) {
+    return null;
+  }
+  for (const sz of loaded.sizeFitRecommendation.available_sizes) {
+    const csa = sz.colorway_size_assets.find((c) => c.id === parentCsaId);
+    if (!csa || !csa.colorway_name) {
+      continue;
+    }
+    return resolveContainerChildCSAs(loaded.container, sz.id, csa.colorway_name);
+  }
+  return null;
+}
+function resolveContainerChildCSAs(container, parentSizeId, parentColorwayName) {
+  const relevantMappings = container.setSizeMappings.filter((m) => m.parent_size_id === parentSizeId);
+  if (relevantMappings.length === 0) {
+    return null;
+  }
+  const csaIds = [];
+  for (const mapping of relevantMappings) {
+    let matchedCsaId = null;
+    for (const child of container.children) {
+      const size = (child.sizes ?? []).find((s) => s.id === mapping.child_size_id);
+      if (!size) {
+        continue;
+      }
+      const csa = (child.colorway_size_assets ?? []).find((a) => a.size_id === size.id && a.colorway_name === parentColorwayName);
+      if (csa) {
+        matchedCsaId = csa.id;
+      }
+      break;
+    }
+    if (matchedCsaId == null) {
+      return null;
+    }
+    csaIds.push(matchedCsaId);
+  }
+  return csaIds;
 }
 function loadProductDataToStore(externalId) {
   async function loadAndStore() {
@@ -41748,6 +41811,9 @@ function peekStyleCategoryIndex() {
   return cached;
 }
 const logger$a = getLogger("fitting-room-data");
+function isItemTuckable(item) {
+  return item.effective.some((e) => !!e.category.tuckable);
+}
 async function loadFittingRoomData() {
   const state = useMainStore.getState();
   const items = state.fittingRoom;
@@ -41831,10 +41897,28 @@ function resolveItem(item, merchantSlot, loadedSlot, index) {
   const loadedError = loadedSlot && isLoadedError(loadedSlot) ? loadedSlot.error : null;
   let styleCategory = null;
   let styleCategoryGroup = null;
+  const effective = [];
   if (loadedProduct && index) {
     const categoryName = String(loadedProduct.style.style_category_name);
     styleCategory = index.byName(categoryName);
     styleCategoryGroup = index.groupForCategory(categoryName);
+    if (loadedProduct.container) {
+      for (const child of loadedProduct.container.children) {
+        const childName = String(child.style_category_name);
+        const childCat = index.byName(childName);
+        if (childCat) {
+          effective.push({
+            category: childCat,
+            group: index.groupForCategory(childName)
+          });
+        }
+      }
+    } else if (styleCategory) {
+      effective.push({
+        category: styleCategory,
+        group: styleCategoryGroup
+      });
+    }
   }
   let needsResize = item.colorwaySizeAssetId == null;
   if (!needsResize && loadedProduct && item.colorwaySizeAssetId != null) {
@@ -41852,6 +41936,16 @@ function resolveItem(item, merchantSlot, loadedSlot, index) {
         needsResize = true;
       }
     }
+    if (!needsResize && loadedProduct.container && item.colorwaySizeAssetId != null) {
+      const expanded = resolveContainerExpansion(loadedProduct, item.colorwaySizeAssetId);
+      if (!expanded) {
+        needsResize = true;
+        logger$a.logDebug("container mapping resolved to empty, marking needsResize", {
+          externalId: item.externalId,
+          csa: item.colorwaySizeAssetId
+        });
+      }
+    }
   }
   const isReady = !!merchantProduct && !!loadedProduct && !!styleCategory && !needsResize;
   return {
@@ -41863,6 +41957,7 @@ function resolveItem(item, merchantSlot, loadedSlot, index) {
     loadedError,
     styleCategory,
     styleCategoryGroup,
+    effective,
     isReady,
     needsResize
   };
@@ -42052,6 +42147,12 @@ function useMobileSheetSnap(initial = "collapsed") {
   };
 }
 const MAX_OUTFIT_ITEMS = 4;
+function getGarmentCount(item) {
+  if (item.effective.length > 0) {
+    return item.effective.length;
+  }
+  return item.styleCategory ? 1 : 0;
+}
 function asStringList(value) {
   if (!Array.isArray(value)) {
     return [];
@@ -42069,6 +42170,19 @@ function asStringList(value) {
 function catName(c) {
   return String(c.name);
 }
+function itemsCompatible(a, b) {
+  if (a.effective.length === 0 || b.effective.length === 0) {
+    return true;
+  }
+  for (const ae of a.effective) {
+    for (const be of b.effective) {
+      if (!pairCompatible(ae.category, be.category, ae.group)) {
+        return false;
+      }
+    }
+  }
+  return true;
+}
 function pairCompatible(a, b, group) {
   const aName = catName(a);
   const bName = catName(b);
@@ -42121,11 +42235,7 @@ function computeAvailability(item, selectedExternalIds, resolved) {
     return "disabled";
   }
   const sameCategoryEvictions = new Set(getSameCategoryConflicts(item, selectedExternalIds, resolved));
-  const effectiveSize = selectedExternalIds.size - sameCategoryEvictions.size + 1;
-  if (effectiveSize > MAX_OUTFIT_ITEMS) {
-    return "disabled";
-  }
-  const itemCat = item.styleCategory;
+  let effectiveGarments = getGarmentCount(item);
   for (const sel of resolved.items) {
     if (!selectedExternalIds.has(sel.externalId)) {
       continue;
@@ -42133,10 +42243,19 @@ function computeAvailability(item, selectedExternalIds, resolved) {
     if (sameCategoryEvictions.has(sel.externalId)) {
       continue;
     }
-    if (!sel.styleCategory) {
+    effectiveGarments += getGarmentCount(sel);
+  }
+  if (effectiveGarments > MAX_OUTFIT_ITEMS) {
+    return "disabled";
+  }
+  for (const sel of resolved.items) {
+    if (!selectedExternalIds.has(sel.externalId)) {
+      continue;
+    }
+    if (sameCategoryEvictions.has(sel.externalId)) {
       continue;
     }
-    if (!pairCompatible(sel.styleCategory, itemCat, sel.styleCategoryGroup)) {
+    if (!itemsCompatible(sel, item)) {
       return "disabled";
     }
   }
@@ -42149,19 +42268,31 @@ function makeOutfitItem(r, forceUntuck) {
   if (r.storage.colorwaySizeAssetId == null) {
     return null;
   }
-  const tuckable = !!r.styleCategory.tuckable;
+  const tuckable = isItemTuckable(r);
   const untucked = forceUntuck && tuckable;
   const layerOrder = untucked ? r.styleCategory.layer_order_untucked : r.styleCategory.layer_order;
+  let childCsaIds;
+  if (r.loadedProduct?.container) {
+    const resolved = resolveContainerExpansion(r.loadedProduct, r.storage.colorwaySizeAssetId);
+    if (!resolved) {
+      return null;
+    }
+    childCsaIds = resolved;
+  }
   const outfitItem = {
     externalId: r.externalId,
     colorwaySizeAssetId: r.storage.colorwaySizeAssetId,
     ...untucked ? {
       untucked: true
+    } : {},
+    ...childCsaIds ? {
+      childCsaIds
     } : {}
   };
   return {
     outfitItem,
-    layerOrder
+    layerOrder,
+    garmentCount: childCsaIds?.length ?? 1
   };
 }
 function buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExternalId) {
@@ -42180,7 +42311,15 @@ function buildOutfit(selectedExternalIds, resolved, forceUntuck, lastAddedExtern
     }
   }
   entries.sort((a, b) => a.layerOrder - b.layerOrder);
-  const items = entries.slice(0, MAX_OUTFIT_ITEMS).map((e) => e.outfitItem);
+  const items = [];
+  let cumulativeGarments = 0;
+  for (const entry of entries) {
+    if (cumulativeGarments + entry.garmentCount > MAX_OUTFIT_ITEMS) {
+      break;
+    }
+    items.push(entry.outfitItem);
+    cumulativeGarments += entry.garmentCount;
+  }
   const alternates = buildAlternateOutfits(items, lastAddedResolved);
   return {
     items,
@@ -42213,9 +42352,20 @@ function buildAlternateOutfits(primary, lastAddedResolved) {
     if (!altCsa) {
       continue;
     }
+    let altChildCsaIds;
+    if (lastAddedResolved.loadedProduct.container) {
+      const resolved = resolveContainerExpansion(lastAddedResolved.loadedProduct, altCsa.id);
+      if (!resolved) {
+        continue;
+      }
+      altChildCsaIds = resolved;
+    }
     const alternate = primary.map((it) => it.externalId === lastAddedResolved.externalId ? {
       ...it,
-      colorwaySizeAssetId: altCsa.id
+      colorwaySizeAssetId: altCsa.id,
+      ...altChildCsaIds ? {
+        childCsaIds: altChildCsaIds
+      } : {}
     } : it);
     out.push(alternate);
   }
@@ -43339,7 +43489,7 @@ function DetailAccordionItem({
   }, [productData, selectedSizeLabel]);
   const categoryLabel = item.styleCategory?.label_singular ?? item.styleCategory?.label ?? "";
   const productName = item.merchantProduct?.productName ?? item.externalId;
-  const tuckable = !!item.styleCategory?.tuckable && canTuck;
+  const tuckable = isItemTuckable(item) && canTuck;
   if (platform === "desktop") {
     return /* @__PURE__ */ jsx$1(DesktopAccordionItem, { isOpen, categoryLabel, productData, currentPrice, selectedSizeLabel, availableColorLabels, selectedColorLabel: item.storage.color, onToggleOpen, onChangeSize, onChangeColor, onAddToCart });
   }
@@ -44518,12 +44668,21 @@ function useVtoRequests() {
   };
 }
 function toWireItems(items) {
-  return items.map((i) => ({
-    colorway_size_asset_id: i.colorwaySizeAssetId,
-    ...i.untucked ? {
+  return items.flatMap((i) => {
+    const untuckFrag = i.untucked ? {
       untucked: true
-    } : {}
-  }));
+    } : {};
+    if (i.childCsaIds && i.childCsaIds.length > 0) {
+      return i.childCsaIds.map((csaId) => ({
+        colorway_size_asset_id: csaId,
+        ...untuckFrag
+      }));
+    }
+    return [{
+      colorway_size_asset_id: i.colorwaySizeAssetId,
+      ...untuckFrag
+    }];
+  });
 }
 const logger$8 = getLogger("overlays/fitting-room");
 function measureTopOffset() {
@@ -45671,6 +45830,7 @@ function QuickViewOverlay() {
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
   const [modalStyle, setModalStyle] = reactExports.useState({});
+  const [containerUntucked, setContainerUntucked] = reactExports.useState(false);
   const {
     request: vtoRequest,
     framesForOutfit,
@@ -45849,12 +46009,46 @@ function QuickViewOverlay() {
       availableColorLabels: availableColorLabels2
     };
   }, [vtoProductData, selectedSizeLabel, selectedColorLabel]);
+  const loadedProduct = reactExports.useMemo(() => {
+    const {
+      currentProduct
+    } = getStaticData();
+    if (!currentProduct) {
+      return null;
+    }
+    const entry = storeProductData[currentProduct.externalId];
+    if (!entry || "error" in entry) {
+      return null;
+    }
+    return entry;
+  }, [storeProductData]);
+  const containerHasTuckableChild = reactExports.useMemo(() => {
+    if (!loadedProduct?.container) {
+      return false;
+    }
+    const index = peekStyleCategoryIndex();
+    if (!index) {
+      return false;
+    }
+    return loadedProduct.container.children.some((c) => {
+      const cat = index.byName(String(c.style_category_name));
+      return !!cat?.tuckable;
+    });
+  }, [loadedProduct]);
+  const handleToggleContainerUntucked = reactExports.useCallback(() => {
+    setContainerUntucked((prev2) => !prev2);
+  }, []);
   const requestVto2 = reactExports.useCallback((sizeColorRecord, priority) => {
-    vtoRequest([{
-      colorway_size_asset_id: sizeColorRecord.colorwaySizeAssetId,
-      untucked: false
-    }], priority);
-  }, [vtoRequest]);
+    if (!loadedProduct) {
+      return;
+    }
+    const untucked = loadedProduct.container ? containerUntucked : false;
+    const wireItems = buildVtoWireItems(loadedProduct, sizeColorRecord.colorwaySizeAssetId, untucked);
+    if (!wireItems) {
+      return;
+    }
+    vtoRequest(wireItems, priority);
+  }, [vtoRequest, loadedProduct, containerUntucked]);
   reactExports.useEffect(() => {
     if (selectedColorSizeRecord) {
       requestVto2(selectedColorSizeRecord, true);
@@ -45875,13 +46069,15 @@ function QuickViewOverlay() {
     }
   }, [requestVto2, vtoProductData, selectedColorLabel]);
   const frameUrls = reactExports.useMemo(() => {
-    if (!selectedColorSizeRecord) {
+    if (!selectedColorSizeRecord || !loadedProduct) {
       return null;
     }
-    const rewritten = framesForOutfit([{
-      colorway_size_asset_id: selectedColorSizeRecord.colorwaySizeAssetId,
-      untucked: false
-    }]);
+    const untucked = loadedProduct.container ? containerUntucked : false;
+    const wireItems = buildVtoWireItems(loadedProduct, selectedColorSizeRecord.colorwaySizeAssetId, untucked);
+    if (!wireItems) {
+      return null;
+    }
+    const rewritten = framesForOutfit(wireItems);
     if (!rewritten) {
       return null;
     }
@@ -45891,7 +46087,7 @@ function QuickViewOverlay() {
       img.src = url;
     });
     return rewritten;
-  }, [selectedColorSizeRecord, framesForOutfit]);
+  }, [selectedColorSizeRecord, framesForOutfit, loadedProduct, containerUntucked]);
   const handleSignOutClick = reactExports.useCallback(() => {
     closeOverlay();
     const authManager2 = getAuthManager();
@@ -45957,7 +46153,7 @@ function QuickViewOverlay() {
     Layout = DesktopLayout;
   }
   return /* @__PURE__ */ jsxs(SidecarModalFrame, { onRequestClose: closeOverlay, contentStyle: modalStyle, children: [
-    /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: handleChangeColor, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }),
+    /* @__PURE__ */ jsx$1(Layout, { loadedProductData: vtoProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, setModalStyle, onClose: closeOverlay, onChangeColor: handleChangeColor, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick, containerTuckable: containerHasTuckableChild, containerUntucked, onToggleUntuck: handleToggleContainerUntucked }),
     vtoError ? /* @__PURE__ */ jsx$1(Snackbar, { messageKey: "quick-view.vto_error", onDismiss: clearVtoError }) : null
   ] });
 }
@@ -46044,6 +46240,31 @@ function FittingRoomToggleButton() {
     /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: isInFittingRoom ? "added_to_fitting_room" : "add_to_fitting_room" })
   ] });
 }
+function ContainerTuckToggleButton({
+  untucked,
+  onToggle
+}) {
+  const css2 = useCss((theme) => ({
+    button: {
+      marginTop: "10px",
+      width: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "10px",
+      padding: "13px",
+      backgroundColor: "#FFFFFF",
+      border: `1px solid ${theme.color_fg_text}`,
+      borderRadius: "30px",
+      cursor: "pointer"
+    },
+    text: {
+      fontSize: "14px",
+      textTransform: "uppercase"
+    }
+  }));
+  return /* @__PURE__ */ jsx$1("button", { type: "button", onClick: onToggle, css: css2.button, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.text, t: untucked ? "fitting_room.try_it_tucked_in" : "fitting_room.try_it_untucked" }) });
+}
 function MobileLayout({
   loadedProductData,
   selectedColorSizeRecord,
@@ -46393,7 +46614,10 @@ function DesktopLayout({
   onChangeColor,
   onChangeSize,
   onAddToCart,
-  onSignOut
+  onSignOut,
+  containerTuckable,
+  containerUntucked,
+  onToggleUntuck
 }) {
   const {
     t
@@ -46521,7 +46745,8 @@ function DesktopLayout({
         fitChartNode,
         /* @__PURE__ */ jsxs("div", { css: css2.buttonContainer, children: [
           /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }),
-          /* @__PURE__ */ jsx$1(FittingRoomToggleButton, {})
+          /* @__PURE__ */ jsx$1(FittingRoomToggleButton, {}),
+          containerTuckable ? /* @__PURE__ */ jsx$1(ContainerTuckToggleButton, { untucked: containerUntucked, onToggle: onToggleUntuck }) : null
         ] }),
         /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(ProductDescriptionText, { loadedProductData }) })
       ] }),
@@ -47796,9 +48021,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.32"}`,
-    commitHash: `${"1e960c2"}`,
-    date: `${"2026-06-28T19:41:53.726Z"}`
+    version: `${"5.0.34"}`,
+    commitHash: `${"5b52e20"}`,
+    date: `${"2026-07-13T13:49:10.971Z"}`
   }
 };
 const CONFIGS = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thefittingroom/shop-ui",
-  "version": "5.0.32",
+  "version": "5.0.34",
   "description": "the fitting room UI library",
   "type": "module",
   "main": "./dist/index.js",