@trafilea/afrodita-components 6.39.9 → 6.39.11

package/build/index.js

@@ -4669,9 +4669,9 @@ var Stopwatch = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({},
 
 var TrustBadge = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trust_badge" }), void 0); };
 
-var TrustPilotHalfStart = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_half_start" }), void 0)); };
+var TrustPilotHalfStar = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_half_star" }), void 0)); };
 
-var TrustPilotStart = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_start" }), void 0)); };
+var TrustPilotStar = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/trustpilot_star" }), void 0)); };
 
 var Verified = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "pdp/verified" }), void 0); };
 
@@ -4708,8 +4708,8 @@ var PDP = /*#__PURE__*/Object.freeze({
     Stars: Stars,
     Stopwatch: Stopwatch,
     TrustBadge: TrustBadge,
-    TrustPilotHalfStart: TrustPilotHalfStart,
-    TrustPilotStart: TrustPilotStart,
+    TrustPilotHalfStar: TrustPilotHalfStar,
+    TrustPilotStar: TrustPilotStar,
     Verified: Verified
 });
 
@@ -5087,9 +5087,9 @@ var StyledButton$3 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
 var StyledPanel$1 = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
 var StyledContent$1 = newStyled.button(templateObject_1$24 || (templateObject_1$24 = __makeTemplateObject(["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"], ["\n  appearance: none;\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n  cursor: auto;\n  user-select: text;\n  writing-mode: unset;\n  font-family: inherit;\n"])));
 var Accordion$1 = function (_a) {
-    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
+    var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, testId = _a.testId;
     var theme = useTheme();
-    return (jsxRuntime.jsx(StyledDisclosure$1, __assign$1({ theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
+    return (jsxRuntime.jsx(StyledDisclosure$1, __assign$1({ "data-testid": testId, theme: theme, as: "div", defaultOpen: defaultOpen, variant: variant, disabled: disabled, onClick: onClick, controlIconPos: controlIconPos }, { children: function (_a) {
             var open = _a.open;
             var openWithForce = forceOpenHandler ? forceOpenValue : open;
             var ControlIcon = disabled ? openIcon : openWithForce ? closeIcon : openIcon;
@@ -20544,6 +20544,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 &&
@@ -20552,7 +20572,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"])));
@@ -20582,28 +20601,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 = React$2.useRef(null);
     var sliderWrapper = React$2.useRef(null);
-    React$2.useRef(null);
     var _d = React$2.useState(false); _d[0]; var setIsPlaying = _d[1];
     usePreventVerticalScroll(sliderWrapper);
     var onButtonClick = React$2.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;
+        });
     };
     React$2.useEffect(function () {
         var _a;
@@ -20619,7 +20639,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: jsxRuntime.jsx(NavButtonContainer$3, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$3, { children: jsxRuntime.jsx(Button$4, { children: jsxRuntime.jsx(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;
@@ -20992,7 +21012,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"])));
@@ -21020,21 +21039,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;
+        });
     };
     React$2.useEffect(function () {
         var _a;
@@ -21050,11 +21071,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: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(Icon.Arrows.ChevronRight, { height: 2.125, width: 1.25, fill: "#292929" }, void 0) }, void 0) }, void 0), prevArrow: jsxRuntime.jsx(NavButtonContainer$2, { children: jsxRuntime.jsx(Button$2, { children: jsxRuntime.jsx(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 (jsxRuntime.jsxs("div", { children: [!((_a = image === null || image === void 0 ? void 0 : image.alt) === null || _a === void 0 ? void 0 : _a.includes('-video')) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(TopTagContainer$2, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsxRuntime.jsx(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')) && (jsxRuntime.jsxs(Video, { children: [jsxRuntime.jsx("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), jsxRuntime.jsx(VideoOverlay, { onClick: function () {
-                                                isPlaying ? _stopVideo() : _playVideo();
+                                                isPlaying ? stopVideo() : playVideo();
                                             } }, void 0), jsxRuntime.jsxs(VideoTag, { children: [jsxRuntime.jsx(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsxRuntime.jsx(Text, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
@@ -21067,21 +21088,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) {
@@ -21095,7 +21101,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();