@trafilea/afrodita-components 6.39.9 → 6.39.10

package/build/index.d.ts

@@ -3374,8 +3374,9 @@ interface SizeSelectorProps {
     width?: string;
     hasSizeGuide?: boolean;
     sizeTipReferences?: SizeTip[];
+    showExtendedSize?: boolean;
 }
-declare const SizeSelector: ({ label, sizes, selectedValue, onChange, onClickSizeTip, inline, width, hasSizeGuide, sizeTipReferences, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SizeSelector: ({ label, sizes, selectedValue, onChange, onClickSizeTip, inline, width, hasSizeGuide, sizeTipReferences, showExtendedSize, }: SizeSelectorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface SliderNavigationProps {
     children: JSX.Element | JSX.Element[] | StyledComponent<any>;

package/build/index.esm.js

@@ -19407,7 +19407,7 @@ var templateObject_1$E, templateObject_2$v;
 
 var SizeSelector = function (_a) {
     var _b;
-    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _c = _a.inline, inline = _c === void 0 ? false : _c, width = _a.width, _d = _a.hasSizeGuide, hasSizeGuide = _d === void 0 ? false : _d, sizeTipReferences = _a.sizeTipReferences;
+    var label = _a.label, sizes = _a.sizes, selectedValue = _a.selectedValue, onChange = _a.onChange, onClickSizeTip = _a.onClickSizeTip, _c = _a.inline, inline = _c === void 0 ? false : _c, width = _a.width, _d = _a.hasSizeGuide, hasSizeGuide = _d === void 0 ? false : _d, sizeTipReferences = _a.sizeTipReferences, _e = _a.showExtendedSize, showExtendedSize = _e === void 0 ? false : _e;
     var activeSizeTip = hasSizeGuide
         ? sizeTipReferences === null || sizeTipReferences === void 0 ? void 0 : sizeTipReferences.find(function (sizeTip) { return (sizeTip === null || sizeTip === void 0 ? void 0 : sizeTip.size) === (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.label); })
         : null;
@@ -19415,7 +19415,7 @@ var SizeSelector = function (_a) {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : 'start',
-        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, __assign$1({ "data-testid": "sizing-tip" }, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.tip }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { hideIcon: true, onClick: onClickSizeTip, title: (_b = activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.cta) !== null && _b !== void 0 ? _b : 'Size and Fit Guide' }, void 0))] }), void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes === null || sizes === void 0 ? void 0 : sizes.map(function (size) {
+        } }, { children: [jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", css: { alignSelf: inline ? 'start' : 'inherit', padding: inline ? '0.75rem 0' : '0' } }, { children: [label, !inline && !showExtendedSize && (jsx(Text$7, __assign$1({ variant: "label", weight: "demi", size: "regular" }, { children: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.description }), void 0))] }), void 0), hasSizeGuide && (jsxs(Row, __assign$1({ "data-testid": "sizing-tip" }, { children: [jsx(Icon.Actions.CircleInfo, { width: 1.2 }, void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", css: { display: 'flex' } }, { children: "Sizing Tip:" }), void 0), jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.tip }), void 0), onClickSizeTip && (jsx(SizeFitGuide, { hideIcon: true, onClick: onClickSizeTip, title: (_b = activeSizeTip === null || activeSizeTip === void 0 ? void 0 : activeSizeTip.cta) !== null && _b !== void 0 ? _b : 'Size and Fit Guide' }, void 0))] }), void 0)), jsx(ButtonsContainer, __assign$1({ inline: inline }, { children: sizes === null || sizes === void 0 ? void 0 : sizes.map(function (size) {
                     var active = !size.disabled && size.label === selectedValue.label;
                     return (jsx(SelectorSecondary, { css: {
                             padding: '0.75rem 1rem 0.625rem',
@@ -20518,6 +20518,26 @@ function usePreventVerticalScroll(ref, dragThreshold) {
     }, [preventTouch, ref, touchStart]);
 }
 
+var sendCommandToIframe = function (command, elementId) {
+    if (elementId === void 0) { elementId = 'vwo-video'; }
+    var iframe = document.getElementById(elementId);
+    var origin = new URL(iframe === null || iframe === void 0 ? void 0 : iframe.src).origin;
+    // TODO: Add verification to only allow specific origins
+    // const allowedOrigins = ['https://youtube.com'];
+    // if (!allowedOrigins.includes(origin)) return;
+    (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
+        iframe.contentWindow.postMessage(JSON.stringify({
+            event: 'command',
+            func: command,
+        }), origin);
+};
+var stopVideoCommand = function () {
+    sendCommandToIframe('stopVideo');
+};
+var playVideoCommand = function () {
+    sendCommandToIframe('playVideo');
+};
+
 var Container$g = newStyled.div(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n"], ["\n  ", "\n  position: relative;\n  max-height: 524px;\n  overflow: hidden;\n  & .slick-dots li.slick-active button:before {\n    background-color: ", ";\n  }\n"])), function (_a) {
     var borderRadiusVariant = _a.borderRadiusVariant;
     return borderRadiusVariant &&
@@ -20526,7 +20546,6 @@ var Container$g = newStyled.div(templateObject_1$i || (templateObject_1$i = __ma
     var theme = _a.theme;
     return theme.component.slideNavigation.slideDots.selectedDotColor;
 });
-// max-height: 31.875rem;
 var TopTagContainer$4 = newStyled.div(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
 var TopRightTagContainer$1 = newStyled.div(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n  position: absolute;\n  right: 0;\n  top: 0;\n"], ["\n  position: absolute;\n  right: 0;\n  top: 0;\n"])));
 var BottomTagContainer$4 = newStyled.div(templateObject_4$7 || (templateObject_4$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
@@ -20556,28 +20575,29 @@ var ImageProductSlide = function (_a) {
     var contents = _a.contents, _b = _a.customClick, customClick = _b === void 0 ? false : _b, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, testId = _a.testId, borderRadiusVariant = _a.borderRadiusVariant, selectedValue = _a.selectedValue, onChange = _a.onChange, _c = _a.itemsOnViewport, itemsOnViewport = _c === void 0 ? 0 : _c;
     var slick = useRef(null);
     var sliderWrapper = useRef(null);
-    useRef(null);
     var _d = useState(false); _d[0]; var setIsPlaying = _d[1];
     usePreventVerticalScroll(sliderWrapper);
     var onButtonClick = useCallback(function (i) {
         var _a;
         (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
     }, [slick]);
-    var _sendCommandToIframe = function (command) {
-        var iframe = document.getElementById('vwo-video');
-        (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-            iframe.contentWindow.postMessage(JSON.stringify({
-                event: 'command',
-                func: command,
-            }), '*');
-    };
-    var _stopVideo = function () {
-        _sendCommandToIframe('stopVideo');
-        setIsPlaying(false);
+    var stopVideo = function () {
+        stopVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (prevIsPlaying) {
+                return !prevIsPlaying;
+            }
+            return prevIsPlaying;
+        });
     };
-    var _playVideo = function () {
-        _sendCommandToIframe('playVideo');
-        setIsPlaying(true);
+    var playVideo = function () {
+        playVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (!prevIsPlaying) {
+                return prevIsPlaying;
+            }
+            return !prevIsPlaying;
+        });
     };
     useEffect(function () {
         var _a;
@@ -20593,7 +20613,7 @@ var ImageProductSlide = function (_a) {
                         var activeSlide = contents[e];
                         // If autoplay is true and iframe is the active slide, play the video
                         var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
-                        autoplay ? _playVideo() : _stopVideo();
+                        autoplay ? playVideo() : stopVideo();
                         onChange === null || onChange === void 0 ? void 0 : onChange(e);
                     } }, settings$3, { nextArrow: jsx$1(NavButtonContainer$3, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$3, { children: jsx$1(Button$4, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: contents.map(function (content, idx) {
                         var _a;
@@ -20966,7 +20986,6 @@ var Container$b = newStyled.div(templateObject_1$b || (templateObject_1$b = __ma
     var theme = _a.theme;
     return theme.component.slideNavigation.slideDots.selectedDotColor;
 });
-// max-height: 31.875rem;
 var TopTagContainer$2 = newStyled.div(templateObject_2$9 || (templateObject_2$9 = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '13px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '11px' : '0'); });
 var BottomTagContainer$2 = newStyled.div(templateObject_3$7 || (templateObject_3$7 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var VideoOverlay = newStyled.div(templateObject_4$6 || (templateObject_4$6 = __makeTemplateObject(["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"], ["\n  content: '';\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  min-height: 1px;\n  position: absolute;\n  top: 0;\n"])));
@@ -20994,21 +21013,23 @@ var ImageProductSlideV3 = function (_a) {
         var _a;
         (_a = slick.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(i);
     }, [slick]);
-    var _sendCommandToIframe = function (command) {
-        var iframe = document.getElementById('vwo-video');
-        (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-            iframe.contentWindow.postMessage(JSON.stringify({
-                event: 'command',
-                func: command,
-            }), '*');
-    };
-    var _stopVideo = function () {
-        _sendCommandToIframe('stopVideo');
-        setIsPlaying(false);
+    var stopVideo = function () {
+        stopVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (prevIsPlaying) {
+                return !prevIsPlaying;
+            }
+            return prevIsPlaying;
+        });
     };
-    var _playVideo = function () {
-        _sendCommandToIframe('playVideo');
-        setIsPlaying(true);
+    var playVideo = function () {
+        playVideoCommand();
+        setIsPlaying(function (prevIsPlaying) {
+            if (!prevIsPlaying) {
+                return prevIsPlaying;
+            }
+            return !prevIsPlaying;
+        });
     };
     useEffect(function () {
         var _a;
@@ -21024,11 +21045,11 @@ var ImageProductSlideV3 = function (_a) {
                         var activeSlide = images[e];
                         // If autoplay is true and iframe is the active slide, play the video
                         var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
-                        autoplay ? _playVideo() : _stopVideo();
+                        autoplay ? playVideo() : stopVideo();
                     } }, settings$2, { nextArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$2, { children: jsx$1(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsx$1(NavButtonContainer$2, { children: jsx$1(Button$2, { children: jsx$1(Icon.Arrows.ChevronLeft, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), ref: slick }, { children: images.map(function (image) {
                         var _a, _b;
                         return (jsxs$1("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxs$1(Fragment$2, { children: [jsx$1(InnerImageZoom, { src: image.url, zoomSrc: image.url, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$2, __assign$1({ "data-testid": "bottomTag" }, { children: bottomTag }), void 0)] }, void 0)), ((_b = image === null || image === void 0 ? void 0 : image.alt) === null || _b === void 0 ? void 0 : _b.includes('-video')) && (jsxs$1(Video, { children: [jsx$1("iframe", { id: "vwo-video", ref: iframeRef, allowFullScreen: true, title: image.alt, width: "100%", height: "220px", src: image === null || image === void 0 ? void 0 : image.url, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay, { onClick: function () {
-                                                isPlaying ? _stopVideo() : _playVideo();
+                                                isPlaying ? stopVideo() : playVideo();
                                             } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
@@ -21041,21 +21062,6 @@ var ProductGalleryMobileV3 = function (_a) {
 };
 var templateObject_1$a;
 
-var _sendCommandToIframe = function (command) {
-    var iframe = document.getElementById('vwo-video');
-    (iframe === null || iframe === void 0 ? void 0 : iframe.contentWindow) &&
-        iframe.contentWindow.postMessage(JSON.stringify({
-            event: 'command',
-            func: command,
-        }), '*' + '');
-};
-var _stopVideo = function () {
-    _sendCommandToIframe('stopVideo');
-};
-var _playVideo = function () {
-    _sendCommandToIframe('playVideo');
-};
-
 function closeZoom() {
     var closeButton = document.querySelectorAll('.iiz__btn.iiz__close.iiz__close--visible')[0];
     if (closeButton) {
@@ -21069,7 +21075,7 @@ var afterChangeSlide = function (_a) {
     var activeSlide = contents[slide];
     // If autoplay is true and iframe is the active slide, play the video
     var autoplay = (_b = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.url) === null || _b === void 0 ? void 0 : _b.includes('autoplay=1');
-    autoplay ? _playVideo() : _stopVideo();
+    autoplay ? playVideoCommand() : stopVideoCommand();
     setSelectedImageIndex(Math.round(slide));
     onChange === null || onChange === void 0 ? void 0 : onChange(slide);
     closeZoom();