@thefittingroom/shop-ui 5.0.2 → 5.0.3

package/dist/index.js

@@ -20731,7 +20731,7 @@ function TextT({
   return /* @__PURE__ */ jsx$1(Text, { ...props, children: translatedText });
 }
 const SvgArrowBack = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("path", { d: "M7.825 13L13.425 18.6L12 20L4 12L12 4L13.425 5.4L7.825 11H20V13H7.825Z", fill: "#1E1E1E" }));
-const AvatarBottomBackgroundUrl = "data:image/png;base64,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";
+const AVATAR_BOTTOM_BACKGROUND_URL = "data:image/png;base64,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";
 const SvgCheckCircle = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { clipPath: "url(#clip0_4454_620)" }, /* @__PURE__ */ reactExports.createElement("path", { d: "M14.6666 7.38674V8.00007C14.6658 9.43769 14.2003 10.8365 13.3395 11.988C12.4787 13.1394 11.2688 13.9817 9.89016 14.3893C8.51154 14.797 7.03809 14.748 5.68957 14.2498C4.34104 13.7516 3.18969 12.8308 2.40723 11.6248C1.62476 10.4188 1.25311 8.99211 1.3477 7.55761C1.44229 6.12312 1.99806 4.75762 2.93211 3.66479C3.86615 2.57195 5.12844 1.81033 6.53071 1.4935C7.93298 1.17668 9.4001 1.32163 10.7133 1.90674M14.6666 2.66674L7.99992 9.34007L5.99992 7.34007", stroke: "#21201F", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ reactExports.createElement("defs", null, /* @__PURE__ */ reactExports.createElement("clipPath", { id: "clip0_4454_620" }, /* @__PURE__ */ reactExports.createElement("rect", { width: 16, height: 16, fill: "white" }))));
 const SvgChevronLeft = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M30 36L18 24L30 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
 const SvgChevronRight = (props) => /* @__PURE__ */ reactExports.createElement("svg", { width: 48, height: 48, viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ reactExports.createElement("g", { opacity: 0.35 }, /* @__PURE__ */ reactExports.createElement("path", { d: "M18 36L30 24L18 12", stroke: "#1E1E1E", strokeWidth: 4, strokeLinecap: "round", strokeLinejoin: "round" })));
@@ -20891,6 +20891,9 @@ function SidecarModalFrame({
       left: 0,
       width: "100vw",
       height: "100vh",
+      margin: 0,
+      padding: 0,
+      border: "none",
       backgroundColor: "#FFFFFF"
     }
   }));
@@ -41517,93 +41520,22 @@ async function getStyleByExternalId(brandId, externalId) {
   recordCache[cacheKey] = record;
   return record;
 }
+const AVATAR_IMAGE_ASPECT_RATIO = 2 / 3;
+const AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX = 100;
 const logger$1 = getLogger("vto-single");
 function VtoSingleOverlay() {
-  const {
-    t
-  } = useTranslation();
   const {
     brandId
   } = getStaticData();
   const userIsLoggedIn = useMainStore((state) => state.userIsLoggedIn);
   const userHasAvatar = useMainStore((state) => state.userHasAvatar);
   const userProfile = useMainStore((state) => state.userProfile);
+  const deviceLayout = useMainStore((state) => state.deviceLayout);
   const openOverlay = useMainStore((state) => state.openOverlay);
   const closeOverlay = useMainStore((state) => state.closeOverlay);
   const [loadedProductData, setLoadedProductData] = reactExports.useState(null);
   const [selectedSizeLabel, setSelectedSizeLabel] = reactExports.useState(null);
   const [selectedColorLabel, setSelectedColorLabel] = reactExports.useState(null);
-  const css2 = useCss((theme) => ({
-    mainContainer: {
-      display: "flex",
-      height: "100%"
-    },
-    rightContainer: {
-      flexGrow: 1,
-      padding: "16px",
-      display: "flex",
-      flexDirection: "column"
-    },
-    contentContainer: {
-      flexGrow: 1,
-      display: "flex",
-      flexDirection: "column",
-      margin: "8px 0px",
-      padding: "16px 48px",
-      overflowY: "auto"
-    },
-    productNameContainer: {},
-    productNameText: {
-      fontSize: "32px"
-    },
-    priceContainer: {
-      marginTop: "8px"
-    },
-    priceText: {
-      fontSize: "18px"
-    },
-    colorContainer: {
-      marginTop: "16px"
-    },
-    colorLabelText: {
-      fontSize: "12px"
-    },
-    colorSelect: {
-      border: "none",
-      color: theme.color_fg_text,
-      fontFamily: theme.font_family,
-      fontSize: "12px"
-    },
-    sizeRecContainer: {
-      marginTop: "16px"
-    },
-    buttonContainer: {
-      marginTop: "24px"
-    },
-    descriptionContainer: {
-      marginTop: "32px"
-    },
-    descriptionText: {
-      fontSize: "12px"
-    },
-    footerContainer: {
-      marginLeft: "auto",
-      marginRight: "auto",
-      paddingBottom: "16px",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      gap: "4px"
-    },
-    footerSignOutLink: {
-      fontSize: "10px",
-      color: theme.color_tfr_800
-    },
-    footerTfrIcon: {
-      width: "100px",
-      height: "24px"
-    }
-  }));
   reactExports.useEffect(() => {
     if (!userIsLoggedIn) {
       openOverlay(OverlayName.LANDING, {
@@ -41768,10 +41700,6 @@ function VtoSingleOverlay() {
       logger$1.logError("Error during logout:", error);
     });
   }, [closeOverlay, openOverlay]);
-  const handleColorSelectChange = reactExports.useCallback((e) => {
-    const newColorLabel = e.target.value || null;
-    setSelectedColorLabel(newColorLabel);
-  }, []);
   const handleAddToCartClick = reactExports.useCallback(async () => {
     try {
       if (!selectedSizeLabel) {
@@ -41792,35 +41720,158 @@ function VtoSingleOverlay() {
   if (!userIsLoggedIn || !userHasAvatar || !loadedProductData || !selectedColorSizeRecord) {
     return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(Loading, {}) });
   }
-  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
-    /* @__PURE__ */ jsx$1(VtoAvatar, { frameUrls }),
+  let Layout;
+  if (deviceLayout === DeviceLayout.MOBILE_PORTRAIT || deviceLayout === DeviceLayout.TABLET_PORTRAIT) {
+    Layout = MobileLayout;
+  } else {
+    Layout = DesktopLayout;
+  }
+  return /* @__PURE__ */ jsx$1(SidecarModalFrame, { onRequestClose: closeOverlay, children: /* @__PURE__ */ jsx$1(Layout, { loadedProductData, selectedColorSizeRecord, availableColorLabels, selectedColorLabel, selectedSizeLabel, frameUrls, onClose: closeOverlay, onChangeColor: setSelectedColorLabel, onChangeSize: setSelectedSizeLabel, onAddToCart: handleAddToCartClick, onSignOut: handleSignOutClick }) });
+}
+function MobileLayout({
+  // loadedProductData,
+  // selectedColorSizeRecord,
+  // availableColorLabels,
+  // selectedColorLabel,
+  // selectedSizeLabel,
+  frameUrls
+  // onClose,
+  // onChangeColor,
+  // onChangeSize,
+  // onAddToCart,
+  // onSignOut,
+}) {
+  const css2 = useCss((_theme) => ({
+    mainContainer: {
+      width: "100%",
+      height: "100%"
+    }
+  }));
+  return /* @__PURE__ */ jsx$1("div", { css: css2.mainContainer, children: /* @__PURE__ */ jsx$1(Avatar, { frameUrls }) });
+}
+function DesktopLayout({
+  loadedProductData,
+  selectedColorSizeRecord,
+  availableColorLabels,
+  selectedColorLabel,
+  selectedSizeLabel,
+  frameUrls,
+  onClose,
+  onChangeColor,
+  onChangeSize,
+  onAddToCart,
+  onSignOut
+}) {
+  const {
+    t
+  } = useTranslation();
+  const css2 = useCss((_theme) => ({
+    mainContainer: {
+      display: "flex",
+      height: "100%"
+    },
+    rightContainer: {
+      flexGrow: 1,
+      padding: "16px",
+      display: "flex",
+      flexDirection: "column"
+    },
+    contentContainer: {
+      flexGrow: 1,
+      display: "flex",
+      flexDirection: "column",
+      margin: "8px 0px",
+      padding: "16px 48px",
+      overflowY: "auto"
+    },
+    productNameContainer: {},
+    productNameText: {
+      fontSize: "32px"
+    },
+    priceContainer: {
+      marginTop: "8px"
+    },
+    priceText: {
+      fontSize: "18px"
+    },
+    colorContainer: {
+      marginTop: "16px"
+    },
+    sizeRecommendationContainer: {
+      marginTop: "16px",
+      display: "flex",
+      flexDirection: "column",
+      border: "1px solid rgba(33, 32, 31, 0.2)",
+      padding: "32px 56px",
+      justifyContent: "center",
+      alignItems: "center"
+    },
+    recommendedSizeContainer: {
+      display: "flex",
+      alignItems: "center",
+      gap: "6px",
+      lineHeight: "normal"
+    },
+    recommendedSizeText: {
+      fontWeight: "600"
+    },
+    itemFitContainer: {
+      marginTop: "8px",
+      lineHeight: "normal"
+    },
+    itemFitText: {},
+    selectSizeLabelContainer: {
+      lineHeight: "normal"
+    },
+    selectSizeLabelText: {},
+    sizeSelectorContainer: {
+      marginTop: "24px"
+    },
+    itemFitDetailsContainer: {
+      marginTop: "24px",
+      width: "100%"
+    },
+    buttonContainer: {
+      marginTop: "24px"
+    },
+    descriptionContainer: {
+      marginTop: "32px"
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.mainContainer, children: [
+    /* @__PURE__ */ jsx$1(Avatar, { frameUrls }),
     /* @__PURE__ */ jsxs("div", { css: css2.rightContainer, children: [
-      /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("try_it_on"), onCloseClick: closeOverlay }),
+      /* @__PURE__ */ jsx$1(ModalTitlebar, { title: t("try_it_on"), onCloseClick: onClose }),
       /* @__PURE__ */ jsxs("div", { css: css2.contentContainer, children: [
         /* @__PURE__ */ jsx$1("div", { css: css2.productNameContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "brand", css: css2.productNameText, children: loadedProductData.productName }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.priceContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.priceText, children: selectedColorSizeRecord.priceFormatted }) }),
-        availableColorLabels.length >= 2 && /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
-          /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "vto-single.color_label" }),
-          /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
-        ] }) }),
-        /* @__PURE__ */ jsx$1("div", { css: css2.sizeRecContainer, children: /* @__PURE__ */ jsx$1(SizeRecommendation, { loadedProductData, selectedSizeLabel, onChangeSize: setSelectedSizeLabel }) }),
-        /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "vto-single.add_to_cart", onClick: handleAddToCartClick }) }),
-        /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.descriptionText, children: /* @__PURE__ */ jsx$1("span", { dangerouslySetInnerHTML: {
-          __html: loadedProductData.productDescriptionHtml
-        } }) }) })
+        /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsx$1(ColorSelector, { availableColorLabels, selectedColorLabel, onChangeColor }) }),
+        /* @__PURE__ */ jsxs("div", { css: css2.sizeRecommendationContainer, children: [
+          /* @__PURE__ */ jsxs("div", { css: css2.recommendedSizeContainer, children: [
+            /* @__PURE__ */ jsx$1(SvgInfoIcon, {}),
+            /* @__PURE__ */ jsx$1(RecommendedSizeText, { loadedProductData, css: css2.recommendedSizeText })
+          ] }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.itemFitContainer, children: /* @__PURE__ */ jsx$1(ItemFitText, { loadedProductData, css: css2.itemFitText }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: /* @__PURE__ */ jsx$1(SizeSelector, { loadedProductData, selectedSizeLabel, onChangeSize }) }),
+          /* @__PURE__ */ jsx$1("div", { css: css2.itemFitDetailsContainer, children: /* @__PURE__ */ jsx$1(ItemFitDetails, { loadedProductData, selectedSizeLabel }) })
+        ] }),
+        /* @__PURE__ */ jsx$1("div", { css: css2.buttonContainer, children: /* @__PURE__ */ jsx$1(AddToCartButton, { onClick: onAddToCart }) }),
+        /* @__PURE__ */ jsx$1("div", { css: css2.descriptionContainer, children: /* @__PURE__ */ jsx$1(ProductDescriptionText, { loadedProductData }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { css: css2.footerContainer, children: [
-        /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.footerSignOutLink, onClick: handleSignOutClick, t: "vto-single.sign_out" }),
-        /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.footerTfrIcon })
-      ] })
+      /* @__PURE__ */ jsx$1(Footer, { onSignOutClick: onSignOut })
     ] })
-  ] }) });
+  ] });
 }
-const AVATAR_CONTROLS_HEIGHT_PX = 100;
-function VtoAvatar({
+function Avatar({
   frameUrls
 }) {
-  const [containerHeightPx, setContainerHeightPx] = reactExports.useState(window.innerHeight);
+  const deviceLayout = useMainStore((state) => state.deviceLayout);
+  const isMobileLayout = deviceLayout === DeviceLayout.MOBILE_PORTRAIT || deviceLayout === DeviceLayout.TABLET_PORTRAIT;
+  const [containerSize, setContainerSize] = reactExports.useState({
+    width: window.innerWidth,
+    height: window.innerHeight
+  });
   const topContainerRef = reactExports.useRef(null);
   const [selectedFrameIndex, setSelectedFrameIndex] = reactExports.useState(null);
   const css2 = useCss((theme) => ({
@@ -41853,17 +41904,17 @@ function VtoAvatar({
       width: "48px",
       height: "48px"
     },
-    controlsContainer: {
+    bottomContainer: {
       position: "absolute",
       bottom: "0",
-      height: AVATAR_CONTROLS_HEIGHT_PX + "px",
+      height: "50px",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
       justifyContent: "center",
       paddingBottom: "32px",
       backgroundColor: "#FFFFFF",
-      backgroundImage: `url(${AvatarBottomBackgroundUrl})`,
+      backgroundImage: `url(${AVATAR_BOTTOM_BACKGROUND_URL})`,
       backgroundSize: "contain",
       backgroundRepeat: "repeat-y"
     },
@@ -41877,7 +41928,15 @@ function VtoAvatar({
   }));
   reactExports.useEffect(() => {
     const handleResize = () => {
-      setContainerHeightPx(topContainerRef.current?.clientHeight ?? window.innerHeight);
+      const containerEl = topContainerRef.current;
+      const size = containerEl ? {
+        width: containerEl.clientWidth,
+        height: containerEl.clientHeight
+      } : {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+      setContainerSize(size);
     };
     handleResize();
     window.addEventListener("resize", handleResize);
@@ -41898,8 +41957,42 @@ function VtoAvatar({
       }, 200);
     }
   }, [frameUrls, selectedFrameIndex]);
-  const imageHeightPx = containerHeightPx - AVATAR_CONTROLS_HEIGHT_PX;
-  const imageWidthPx = Math.floor(imageHeightPx / 1.5);
+  const {
+    imageSize,
+    bottomContainerSize
+  } = reactExports.useMemo(() => {
+    let imageSize2;
+    let bottomContainerSize2;
+    if (isMobileLayout) {
+      const imageWidthPx = containerSize.width;
+      const imageHeightPx = Math.floor(imageWidthPx / AVATAR_IMAGE_ASPECT_RATIO);
+      const bottomContainerHeightPx = containerSize.height - imageHeightPx;
+      imageSize2 = {
+        width: imageWidthPx,
+        height: imageHeightPx
+      };
+      bottomContainerSize2 = {
+        width: imageWidthPx,
+        height: bottomContainerHeightPx
+      };
+    } else {
+      const imageHeightPx = containerSize.height - AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX;
+      const imageWidthPx = Math.floor(imageHeightPx * AVATAR_IMAGE_ASPECT_RATIO);
+      const bottomContainerHeightPx = AVATAR_DESKTOP_BOTTOM_CONTAINER_HEIGHT_PX;
+      imageSize2 = {
+        width: imageWidthPx,
+        height: imageHeightPx
+      };
+      bottomContainerSize2 = {
+        width: imageWidthPx,
+        height: bottomContainerHeightPx
+      };
+    }
+    return {
+      imageSize: imageSize2,
+      bottomContainerSize: bottomContainerSize2
+    };
+  }, [isMobileLayout, containerSize]);
   const rotateLeft = reactExports.useCallback(() => {
     setSelectedFrameIndex((prevIndex) => {
       if (prevIndex == null) {
@@ -41941,86 +42034,127 @@ function VtoAvatar({
   if (frameUrls && selectedFrameIndex != null) {
     contentNode = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { css: css2.imageContainer, style: {
-        width: imageWidthPx + "px",
-        height: imageHeightPx + "px"
+        width: imageSize.width + "px",
+        height: imageSize.height + "px"
       }, children: [
         /* @__PURE__ */ jsx$1("img", { src: frameUrls[selectedFrameIndex], css: css2.image, style: {
-          width: imageWidthPx + "px",
-          height: imageHeightPx + "px"
+          width: imageSize.width + "px",
+          height: imageSize.height + "px"
         }, onMouseDown: handleImageDrag }),
         /* @__PURE__ */ jsx$1("div", { css: css2.chevronLeftContainer, onClick: rotateLeft, children: /* @__PURE__ */ jsx$1(SvgChevronLeft, { css: css2.chevronIcon }) }),
         /* @__PURE__ */ jsx$1("div", { css: css2.chevronRightContainer, onClick: rotateRight, children: /* @__PURE__ */ jsx$1(SvgChevronRight, { css: css2.chevronIcon }) })
       ] }),
-      /* @__PURE__ */ jsxs("div", { css: css2.controlsContainer, style: {
-        width: imageWidthPx + "px"
-      }, children: [
+      /* @__PURE__ */ jsx$1("div", { css: css2.bottomContainer, style: {
+        width: bottomContainerSize.width + "px",
+        height: bottomContainerSize.height + "px"
+      }, children: isMobileLayout ? /* @__PURE__ */ jsx$1(Fragment, { children: " " }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx$1("input", { type: "range", min: 0, max: frameUrls.length - 1, step: 1, value: selectedFrameIndex, onChange: (e) => setSelectedFrameIndex(Number(e.target.value)), css: css2.sliderInput }),
         /* @__PURE__ */ jsx$1(TextT, { variant: "base", t: "vto-single.slide_to_rotate", css: css2.sliderText })
-      ] })
+      ] }) })
     ] });
   } else {
     contentNode = /* @__PURE__ */ jsx$1(Loading, { t: "vto-single.avatar_loading" });
   }
   return /* @__PURE__ */ jsx$1("div", { ref: topContainerRef, css: css2.topContainer, style: {
-    width: imageWidthPx + "px"
+    width: imageSize.width + "px"
   }, children: contentNode });
 }
-function SizeRecommendation({
+function ColorSelector({
+  availableColorLabels,
+  selectedColorLabel,
+  onChangeColor
+}) {
+  const css2 = useCss((theme) => ({
+    colorContainer: {},
+    colorLabelText: {
+      fontSize: "12px"
+    },
+    colorSelect: {
+      border: "none",
+      color: theme.color_fg_text,
+      fontFamily: theme.font_family,
+      fontSize: "12px"
+    }
+  }));
+  const handleColorSelectChange = reactExports.useCallback((e) => {
+    const newColorLabel = e.target.value || null;
+    onChangeColor(newColorLabel);
+  }, []);
+  if (availableColorLabels.length < 2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx$1("div", { css: css2.colorContainer, children: /* @__PURE__ */ jsxs("label", { children: [
+    /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.colorLabelText, t: "vto-single.color_label" }),
+    /* @__PURE__ */ jsx$1("select", { value: selectedColorLabel ?? "", onChange: handleColorSelectChange, css: css2.colorSelect, children: availableColorLabels.map((colorLabel) => /* @__PURE__ */ jsx$1("option", { value: colorLabel, children: colorLabel }, colorLabel)) })
+  ] }) });
+}
+function SizeSelector({
   loadedProductData,
   selectedSizeLabel,
   onChangeSize
 }) {
-  const {
-    t
-  } = useTranslation();
   const css2 = useCss((_theme) => ({
-    frame: {
-      display: "flex",
-      flexDirection: "column",
-      border: "1px solid rgba(33, 32, 31, 0.2)",
-      padding: "32px 56px",
-      justifyContent: "center",
-      alignItems: "center"
-    },
-    recommendedSizeContainer: {
-      display: "flex",
-      alignItems: "center",
-      gap: "6px",
-      lineHeight: "normal"
-    },
-    recommendedSizeText: {
-      fontWeight: "600"
-    },
-    itemFitContainer: {
-      marginTop: "8px",
-      lineHeight: "normal"
-    },
-    itemFitText: {},
-    selectSizeLabelContainer: {
-      lineHeight: "normal"
-    },
-    selectSizeLabelText: {},
-    sizeSelectorContainer: {
-      marginTop: "24px",
+    container: {
       display: "flex",
       alignItems: "center",
       gap: "12px"
     },
-    sizeSelectorButton: {
+    button: {
       width: "54px",
       height: "44px",
       border: "1px solid rgba(33, 32, 31, 0.2)",
       padding: "9px 5px"
     },
-    sizeSelectorButtonSelected: {
+    selectedButton: {
       border: "1px solid rgb(33, 32, 31)",
       cursor: "default"
-    },
-    fitContainer: {
-      marginTop: "24px",
+    }
+  }));
+  const sizeSelectorNodeList = reactExports.useMemo(() => loadedProductData.sizes.map((sizeRecord) => {
+    const isSelected = sizeRecord.sizeLabel === selectedSizeLabel;
+    return /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
+      ...css2.button,
+      ...isSelected && css2.selectedButton
+    }, "", ""), onClick: () => {
+      if (isSelected) {
+        return;
+      }
+      onChangeSize(sizeRecord.sizeLabel);
+    }, children: sizeRecord.sizeLabel }, sizeRecord.sizeLabel);
+  }), [loadedProductData.sizes, selectedSizeLabel, onChangeSize]);
+  return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: sizeSelectorNodeList });
+}
+function RecommendedSizeText({
+  loadedProductData,
+  css: css2
+}) {
+  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2, t: "size-rec.recommended_size", vars: {
+    size: loadedProductData.recommendedSizeLabel
+  } });
+}
+function ItemFitText({
+  loadedProductData,
+  css: css2
+}) {
+  const {
+    t
+  } = useTranslation();
+  return /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2, t: "size-rec.item_fit", vars: {
+    fit: t(`size-rec.fitClassification.${loadedProductData.fitClassification}`) || loadedProductData.fitClassification
+  } });
+}
+function ItemFitDetails({
+  loadedProductData,
+  selectedSizeLabel
+}) {
+  const {
+    t
+  } = useTranslation();
+  const css2 = useCss((_theme) => ({
+    container: {
       width: "100%"
     },
-    fitLine: {
+    line: {
       display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
@@ -42029,29 +42163,17 @@ function SizeRecommendation({
       borderTop: "1px solid rgb(33, 32, 31)",
       paddingTop: "4px"
     },
-    fitFirstLine: {
+    firstLine: {
       borderTop: "none",
       marginTop: "0px",
       paddingTop: "0px"
     },
-    fitDetail: {
+    detailCell: {
       display: "flex",
       alignItems: "center",
       gap: "6px"
     }
   }));
-  const sizeSelectorNodeList = reactExports.useMemo(() => loadedProductData.sizes.map((sizeRecord) => {
-    const isSelected = sizeRecord.sizeLabel === selectedSizeLabel;
-    return /* @__PURE__ */ jsx$1(Button, { variant: "base", css: /* @__PURE__ */ css$1({
-      ...css2.sizeSelectorButton,
-      ...isSelected && css2.sizeSelectorButtonSelected
-    }, "", ""), onClick: () => {
-      if (isSelected) {
-        return;
-      }
-      onChangeSize(sizeRecord.sizeLabel);
-    }, children: sizeRecord.sizeLabel }, sizeRecord.sizeLabel);
-  }), [loadedProductData.sizes, selectedSizeLabel, onChangeSize]);
   const fitLineNodeList = reactExports.useMemo(() => {
     const selectedSizeRecord = loadedProductData.sizes.find((s) => s.sizeLabel === selectedSizeLabel);
     if (!selectedSizeRecord) {
@@ -42061,9 +42183,9 @@ function SizeRecommendation({
       const locationLabel = t(`size-rec.measurementLocation.${mlf.measurement_location}`) || mlf.measurement_location;
       const fit = mlf.fit;
       const fitLabel = t(`size-rec.fit.${fit}`) || fit;
-      return /* @__PURE__ */ jsxs("div", { css: [css2.fitLine, index === 0 && css2.fitFirstLine, "", ""], children: [
-        /* @__PURE__ */ jsx$1("div", { css: css2.fitDetail, children: locationLabel }),
-        /* @__PURE__ */ jsx$1("div", { css: css2.fitDetail, children: fit === "perfect_fit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      return /* @__PURE__ */ jsxs("div", { css: [css2.line, index === 0 && css2.firstLine, "", ""], children: [
+        /* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: locationLabel }),
+        /* @__PURE__ */ jsx$1("div", { css: css2.detailCell, children: fit === "perfect_fit" ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx$1(SvgCheckCircle, {}),
           " ",
           fitLabel
@@ -42071,19 +42193,50 @@ function SizeRecommendation({
       ] }, index);
     });
   }, [loadedProductData, selectedSizeLabel]);
-  return /* @__PURE__ */ jsxs("div", { css: css2.frame, children: [
-    /* @__PURE__ */ jsxs("div", { css: css2.recommendedSizeContainer, children: [
-      /* @__PURE__ */ jsx$1(SvgInfoIcon, {}),
-      /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.recommendedSizeText, t: "size-rec.recommended_size", vars: {
-        size: loadedProductData.recommendedSizeLabel
-      } })
-    ] }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.itemFitContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.itemFitText, t: "size-rec.item_fit", vars: {
-      fit: t(`size-rec.fitClassification.${loadedProductData.fitClassification}`) || loadedProductData.fitClassification
-    } }) }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.selectSizeLabelContainer, children: /* @__PURE__ */ jsx$1(TextT, { variant: "base", css: css2.selectSizeLabelText, t: "size-rec.select_size" }) }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.sizeSelectorContainer, children: sizeSelectorNodeList }),
-    /* @__PURE__ */ jsx$1("div", { css: css2.fitContainer, children: fitLineNodeList })
+  return /* @__PURE__ */ jsx$1("div", { css: css2.container, children: fitLineNodeList });
+}
+function AddToCartButton({
+  onClick
+}) {
+  return /* @__PURE__ */ jsx$1(ButtonT, { variant: "brand", t: "vto-single.add_to_cart", onClick });
+}
+function ProductDescriptionText({
+  loadedProductData
+}) {
+  const css2 = useCss((_theme) => ({
+    descriptionText: {
+      fontSize: "12px"
+    }
+  }));
+  return /* @__PURE__ */ jsx$1(Text, { variant: "base", css: css2.descriptionText, children: /* @__PURE__ */ jsx$1("span", { dangerouslySetInnerHTML: {
+    __html: loadedProductData.productDescriptionHtml
+  } }) });
+}
+function Footer({
+  onSignOutClick
+}) {
+  const css2 = useCss((theme) => ({
+    container: {
+      marginLeft: "auto",
+      marginRight: "auto",
+      paddingBottom: "16px",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: "4px"
+    },
+    signOutLink: {
+      fontSize: "10px",
+      color: theme.color_tfr_800
+    },
+    tfrIcon: {
+      width: "100px",
+      height: "24px"
+    }
+  }));
+  return /* @__PURE__ */ jsxs("div", { css: css2.container, children: [
+    /* @__PURE__ */ jsx$1(LinkT, { variant: "underline", css: css2.signOutLink, onClick: onSignOutClick, t: "vto-single.sign_out" }),
+    /* @__PURE__ */ jsx$1(SvgTfrName, { css: css2.tfrIcon })
   ] });
 }
 function useSizeRecommendation(load) {
@@ -42383,9 +42536,9 @@ const SHARED_CONFIG = {
     appGooglePlayUrl: "https://play.google.com/store/apps/details?id=com.thefittingroom.marketplace"
   },
   build: {
-    version: `${"5.0.2"}`,
-    commitHash: `${"cc69523"}`,
-    date: `${"2026-01-07T05:13:26.880Z"}`
+    version: `${"5.0.3"}`,
+    commitHash: `${"7ef9b58"}`,
+    date: `${"2026-01-07T07:58:58.896Z"}`
   }
 };
 const CONFIGS = {

package/package.json

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