@trafilea/afrodita-components 5.0.0-beta.251 → 5.0.0-beta.253

package/build/index.d.ts

@@ -1837,6 +1837,11 @@ declare type ThemeComponent = {
         lineHeight: string;
         color: string;
     };
+    thankyouFooterText: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
     textButton: {
         fontWeight: number;
         lineHeight: string;
@@ -1845,15 +1850,23 @@ declare type ThemeComponent = {
         title: {
             fontSize: string;
             lineHeight: string;
-            weight: number;
+            fontWeight: number;
         };
         note: {
             accentColor: string;
             color: string;
             backgroundColor: string;
         };
-        SectionDetails?: {
-            marginLeft: string;
+        sectionTitle: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+        };
+        sectionDetails: {
+            fontSize: string;
+            lineHeight: string;
+            fontWeight: number;
+            marginLeft?: string;
         };
     };
     text: {

package/build/index.esm.js

@@ -10010,7 +10010,7 @@ var ImagePreviewList = function (_a) {
                     arrowWidth: 0.75,
                     arrowHeight: 1.25,
                     arrowPadding: 1.625,
-                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: item.alt.includes('-video') ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
+                }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item) { return (jsx$1(Button$3, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsx$1(ImageSmallPreview, { imageUrl: (item === null || item === void 0 ? void 0 : item.alt.includes('-video')) ? item === null || item === void 0 ? void 0 : item.thumbnailUrl : item === null || item === void 0 ? void 0 : item.imageUrl, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0));
 };
 var templateObject_1$1i, templateObject_2$S, templateObject_3$H, templateObject_4$w;
 
@@ -11613,7 +11613,7 @@ var Container$W = newStyled.div(templateObject_1$1h || (templateObject_1$1h = __
 var TopTagContainer$3 = newStyled.div(templateObject_2$R || (templateObject_2$R = __makeTemplateObject(["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"], ["\n  position: absolute;\n  left: ", ";\n  top: ", ";\n"])), function (props) { return (props.borderRadiusVariant ? '50px' : '0'); }, function (props) { return (props.borderRadiusVariant ? '10px' : '0'); });
 var BottomTagContainer$3 = newStyled.div(templateObject_3$G || (templateObject_3$G = __makeTemplateObject(["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"], ["\n  position: absolute;\n  bottom: 3.75rem;\n  left: 0;\n"])));
 var ButtonSecondaryOutlineWrapper = newStyled(ButtonSecondaryOutline)(templateObject_4$v || (templateObject_4$v = __makeTemplateObject(["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"], ["\n  text-transform: capitalize;\n  margin-top: 12px;\n\n  @media (max-width: 992px) {\n    margin-top: 4px;\n  }\n"])));
-var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 706px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 706px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
+var Video$1 = newStyled.div(templateObject_5$j || (templateObject_5$j = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 666px;\n  background: #efefef;\n\n  & > iframe {\n    border: none;\n  }\n\n  @media (max-width: 768px) {\n    height: 506px;\n  }\n"])));
 var VideoTag$1 = newStyled.div(templateObject_6$h || (templateObject_6$h = __makeTemplateObject(["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"], ["\n  gap: 8px;\n  display: flex;\n  padding: 8.6px 0;\n  font-weight: 600;\n  align-items: center;\n  background: #f7f7f7;\n  justify-content: center;\n"])));
 var Text$7 = newStyled.div(templateObject_7$b || (templateObject_7$b = __makeTemplateObject(["\n  padding-top: 3px;\n"], ["\n  padding-top: 3px;\n"])));
 var ImageProductWithTags$1 = function (_a) {
@@ -12887,7 +12887,10 @@ var Note = function (_a) {
 };
 var templateObject_1$U, templateObject_2$D, templateObject_3$x, templateObject_4$p;
 
-var Title$5 = newStyled.h1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  font-size: 1.25rem;\n  line-height: 1.75rem;\n  font-weight: 600;\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; });
+var Title$5 = newStyled.h1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  text-align: center;\n"])), function (props) { return props.color; }, function (_a) {
+    var theme = _a.theme;
+    return "\n    font-size: ".concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n  ");
+});
 var Line = newStyled.div(templateObject_2$C || (templateObject_2$C = __makeTemplateObject(["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"], ["\n  width: 100%;\n  height: 0.063rem;\n  background-color: ", ";\n  margin: 0.938rem 0;\n"])), function (props) { return props.backgroundColor; });
 var Row$1 = newStyled.div(templateObject_3$w || (templateObject_3$w = __makeTemplateObject(["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  ", "\n  justify-content: space-between;\n  align-items: flex-start;\n"])), mediaQueries({
     flexDirection: ['column', 'row'],
@@ -12904,26 +12907,20 @@ var IconContainer$2 = newStyled.div(templateObject_5$f || (templateObject_5$f =
     marginBottom: ['10px', '0'],
     width: ['auto', '1.375rem'],
 }));
-var SectionTitle = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  ", "\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  color: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin: 0;\n  text-transform: uppercase;\n"])), mediaQueries({
+var SectionTitle = newStyled.h1(templateObject_6$d || (templateObject_6$d = __makeTemplateObject(["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"], ["\n  ", "\n  ", "\n  margin: 0;\n  text-transform: uppercase;\n"])), mediaQueries({
     display: ['block', 'flex'],
 }), function (_a) {
     var theme = _a.theme;
-    return theme.colors.shades['700'].color;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.component.deliveryDetails.title.fontSize;
-}, function (_a) {
+    return "\n    color: ".concat(theme.colors.shades['700'].color, ";\n    font-size: ").concat(theme.component.deliveryDetails.sectionTitle.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionTitle.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionTitle.fontWeight, ";\n  ");
+});
+var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"], ["\n  color: ", ";\n  ", "\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"])), function (props) { return props.color; }, function (_a) {
     var theme = _a.theme;
-    return theme.component.deliveryDetails.title.lineHeight;
+    return "\n    font-size: ".concat(theme.component.deliveryDetails.sectionDetails.fontSize, ";\n    line-height: ").concat(theme.component.deliveryDetails.sectionDetails.lineHeight, ";\n    font-weight: ").concat(theme.component.deliveryDetails.sectionDetails.fontWeight, ";\n  ");
 }, function (_a) {
     var theme = _a.theme;
-    return theme.component.deliveryDetails.title.weight;
-});
-var SectionDetails = newStyled.p(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"], ["\n  color: ", ";\n  font-size: 1rem;\n  line-height: 1.25rem;\n  font-weight: 400;\n  margin: 0;\n  margin-top: 0.625rem;\n  ", ";\n"])), function (props) { return props.color; }, function (_a) {
-    var theme = _a.theme;
-    return theme.component.deliveryDetails.SectionDetails
+    return theme.component.deliveryDetails.sectionDetails.marginLeft
         ? mediaQueries({
-            marginLeft: ['0', theme.component.deliveryDetails.SectionDetails.marginLeft],
+            marginLeft: ['0', theme.component.deliveryDetails.sectionDetails.marginLeft],
         })
         : '';
 });
@@ -13796,17 +13793,15 @@ var ImageProductWithTags = function (_a) {
     }, [images, selectedValue]);
     return (jsxs$1(Fragment$1, { children: [customClick && (jsx$1("div", __assign$1({ style: { display: 'flex', marginBottom: '20px', gap: '10px' } }, { children: images.map(function (_, i) { return (jsx$1(ButtonPrimary, { onClick: function () { return onButtonClick(i); }, text: String(i + 1), inline: true }, i)); }) }), void 0)), jsx$1(Container$o, __assign$1({ "data-testid": testId, borderRadiusVariant: borderRadiusVariant, ref: sliderWrapper }, { children: jsx$1(Slider, __assign$1({ afterChange: function (e) {
                         var _a;
+                        var activeSlide = images[e];
                         // If autoplay is true and iframe is the active slide, play the video
-                        // @ts-ignore
-                        var urlParams = new URLSearchParams((_a = document.getElementById('vwo-video')) === null || _a === void 0 ? void 0 : _a.src);
-                        var autoplay = urlParams.get('autoplay') === '1';
-                        var vwoIndex = Number(urlParams.get('vwo-index'));
-                        e == vwoIndex && autoplay ? _playVideo() : _stopVideo();
+                        var autoplay = (_a = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.imageUrl) === null || _a === void 0 ? void 0 : _a.includes('autoplay=1');
+                        autoplay ? _playVideo() : _stopVideo();
                     } }, settings, { 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$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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')) && (jsx$1(Fragment$1, { children: 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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
-                                                    isPlaying ? _stopVideo() : _playVideo();
-                                                } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0) }, void 0))] }, image.key));
+                        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$1, { children: [jsx$1(InnerImageZoom, { src: image.imageUrl, zoomSrc: image.imageUrl, zoomType: "hover", imgAttributes: { alt: image.alt, width: '100%', height: '510px' }, height: 510, fullscreenOnMobile: true, className: "zoomWrapper" }, void 0), jsx$1(TopTagContainer$1, __assign$1({ borderRadiusVariant: borderRadiusVariant, "data-testid": "topTag" }, { children: topTag }), void 0), jsx$1(BottomTagContainer$1, __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.imageUrl, allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" }, void 0), jsx$1(VideoOverlay$1, { onClick: function () {
+                                                isPlaying ? _stopVideo() : _playVideo();
+                                            } }, void 0), jsxs$1(VideoTag, { children: [jsx$1(Icon.PDP.PlayMini, { width: 1.5 }, void 0), jsx$1(Text$3, { children: "VIDEO" }, void 0)] }, void 0)] }, void 0))] }, image.key));
                     }) }), void 0) }), void 0)] }, void 0));
 };
 function usePreventVerticalScroll(ref, dragThreshold) {