@trafilea/afrodita-components 6.16.3 → 6.16.5

package/build/index.js

@@ -3534,6 +3534,8 @@ var ChevronLeftVariant = function (props) { return (jsxRuntime.jsx(Icon$1, __ass
 
 var ChevronRight = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "arrows/chevron_right" }), void 0)); };
 
+var ChevronRightGrey = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "arrows/chevron_right_grey" }), void 0)); };
+
 var ChevronRightLite = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "arrows/chevron_right_lite" }), void 0)); };
 
 var ChevronRightVariant = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "arrows/chevron_right_variant" }), void 0)); };
@@ -3572,6 +3574,7 @@ var Arrows = /*#__PURE__*/Object.freeze({
     ChevronLeftLite: ChevronLeftLite,
     ChevronLeftVariant: ChevronLeftVariant,
     ChevronRight: ChevronRight,
+    ChevronRightGrey: ChevronRightGrey,
     ChevronRightLite: ChevronRightLite,
     ChevronRightVariant: ChevronRightVariant,
     ChevronUp: ChevronUp,
@@ -3864,6 +3867,8 @@ var ShoppingBagV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1
 
 var ShoppingBagV3 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v3" }), void 0)); };
 
+var ShoppingBagV4 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_bag_v4" }), void 0)); };
+
 var ShoppingCart = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart" }), void 0)); };
 
 var ShoppingCartV2 = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "navigation/shopping_cart_v2" }), void 0)); };
@@ -3901,6 +3906,7 @@ var Navigation = /*#__PURE__*/Object.freeze({
     ShoppingBag: ShoppingBag,
     ShoppingBagV2: ShoppingBagV2,
     ShoppingBagV3: ShoppingBagV3,
+    ShoppingBagV4: ShoppingBagV4,
     ShoppingCart: ShoppingCart,
     ShoppingCartV2: ShoppingCartV2,
     SlideDot: SlideDot$1,
@@ -3918,6 +3924,8 @@ var CallUs = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, pro
 
 var Chat = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/chat" }), void 0); };
 
+var Coupons = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/coupons" }), void 0); };
+
 var Email = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/email" }), void 0); };
 
 var ExpressShipping = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/express_shipping" }), void 0)); };
@@ -3932,6 +3940,8 @@ var GetDiscount = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}
 
 var HasselFreeReturns = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/hassel_free_returns" }), void 0)); };
 
+var HelpCenter = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/help_center" }), void 0); };
+
 var Loading = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "Loading" }, props, { name: "other/loading" }), void 0)); };
 
 var McAfee = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "other/mc_afee" }), void 0); };
@@ -3974,6 +3984,7 @@ var Other = /*#__PURE__*/Object.freeze({
     BodConMobileLabel: BodConMobileLabel,
     CallUs: CallUs,
     Chat: Chat,
+    Coupons: Coupons,
     Email: Email,
     ExpressShipping: ExpressShipping,
     FitGuarantee: FitGuarantee$1,
@@ -3981,6 +3992,7 @@ var Other = /*#__PURE__*/Object.freeze({
     FreeExchange: FreeExchange,
     GetDiscount: GetDiscount,
     HasselFreeReturns: HasselFreeReturns,
+    HelpCenter: HelpCenter,
     Loading: Loading,
     McAfee: McAfee,
     Play: Play,
@@ -4089,29 +4101,32 @@ var PDP = /*#__PURE__*/Object.freeze({
     TrustBadge: TrustBadge
 });
 
-var Visa = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/visa" }), void 0); };
-
-var MasterCard = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/master_card" }), void 0); };
+var Amazon = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "AmazonIcon" }, props, { name: "payment/amazon" }), void 0)); };
 
 var Amex = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/amex" }), void 0); };
 
 var JCB = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/jcb" }), void 0); };
 
-var Paypal = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "PaypalIcon" }, props, { name: "payment/paypal" }), void 0)); };
-
 var Klarna = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/klarna" }), void 0); };
 
-var Amazon = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "AmazonIcon" }, props, { name: "payment/amazon" }), void 0)); };
+var MasterCard = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/master_card" }), void 0); };
+
+var PaymentMethods = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/payment_methods" }), void 0)); };
+
+var Paypal = function (props) { return (jsxRuntime.jsx(Icon$1, __assign$1({ testId: "PaypalIcon" }, props, { name: "payment/paypal" }), void 0)); };
+
+var Visa = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "payment/visa" }), void 0); };
 
 var Payment = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Visa: Visa,
-    MasterCard: MasterCard,
+    Amazon: Amazon,
     Amex: Amex,
     JCB: JCB,
-    Paypal: Paypal,
     Klarna: Klarna,
-    Amazon: Amazon
+    MasterCard: MasterCard,
+    PaymentMethods: PaymentMethods,
+    Paypal: Paypal,
+    Visa: Visa
 });
 
 var SlideDot = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "slidedots/slide_dot" }), void 0); };
@@ -11875,11 +11890,11 @@ var ImagePreviewList = function (_a) {
         var element = document.querySelector(".imageListContainer");
         element.scrollBy(0, 200);
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$L, __assign$1({ "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Container$L, __assign$1({ role: "list", "data-testid": dataTestId, position: position, className: hasOverflowArrows ? 'imageListContainer' : position, hasOverflowArrows: hasOverflowArrows }, { children: position == 'horizontal' ? (jsxRuntime.jsx("div", __assign$1({ style: { maxWidth: '360px' } }, { children: jsxRuntime.jsx(SliderNavigation, __assign$1({ speed: 200, infinite: false, arrows: {
                             arrowWidth: 0.75,
                             arrowHeight: 1.25,
                             arrowPadding: 1.625,
-                        }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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.url, 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 (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item); } }, { children: jsxRuntime.jsx(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.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }, void 0))] }, void 0));
+                        }, adaptiveHeight: true, dots: false, slidesToShow: 4 }, { children: images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item, index); } }, { children: jsxRuntime.jsx(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.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); }) }), void 0) }), void 0)) : (images.map(function (item, index) { return (jsxRuntime.jsx(Button$6, __assign$1({ onClick: function () { return onClick(item, index); } }, { children: jsxRuntime.jsx(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.url, alt: item.alt, selected: item.key === selectedImage.key, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor }, void 0) }), item.key)); })) }), void 0), hasOverflowArrows && (jsxRuntime.jsxs(ArrowsContainer, __assign$1({ role: "navigation" }, { children: [jsxRuntime.jsx(ArrowPrev, { onClick: handleScrollVerticalPrev }, void 0), jsxRuntime.jsx(ArrowNext, { onClick: handleScrollVerticalNext }, void 0)] }), void 0))] }, void 0));
 };
 var templateObject_1$_, templateObject_2$G, templateObject_3$x, templateObject_4$n, templateObject_5$h, templateObject_6$e, templateObject_7$a, templateObject_8$9;
 
@@ -13551,17 +13566,34 @@ var ImageProductSlide$1 = function (_a) {
 };
 var templateObject_1$X, templateObject_2$D, templateObject_3$v, templateObject_4$l, templateObject_5$f;
 
+var getActiveContent = function (preserveOrder, activeIndex, selectedValue, images) {
+    var initialContent = images === null || images === void 0 ? void 0 : images[0];
+    if (preserveOrder && (images === null || images === void 0 ? void 0 : images[activeIndex])) {
+        initialContent = images === null || images === void 0 ? void 0 : images[activeIndex];
+    }
+    else if (preserveOrder && !(images === null || images === void 0 ? void 0 : images[activeIndex])) {
+        // Fallback in case image does not exist at the index
+        initialContent = images === null || images === void 0 ? void 0 : images[0];
+    }
+    else if (selectedValue && images.includes(selectedValue)) {
+        initialContent = selectedValue;
+    }
+    return initialContent;
+};
+
 var Container$I = newStyled.div(templateObject_1$W || (templateObject_1$W = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"], ["\n  display: grid;\n  grid-template-columns: minmax(6rem, max-content) 1fr;\n  grid-column-gap: 20px;\n  max-height: 50rem;\n  width: fit-content;\n"])));
 var ProductGallery = function (_a) {
-    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e;
-    var initialValue = selectedValue && images.includes(selectedValue) ? selectedValue : images[0];
-    var _f = React$2.useState(initialValue), selectedImage = _f[0], setSelectedImage = _f[1];
+    var images = _a.images, selectedValue = _a.selectedValue, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, previewListDataTestId = _a.previewListDataTestId, thumbnailPosition = _a.thumbnailPosition, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, previewImgBorderColor = _a.previewImgBorderColor, ctaText = _a.ctaText, ctaAction = _a.ctaAction, _c = _a.hideCTA, hideCTA = _c === void 0 ? false : _c, _d = _a.hasOverflowArrows, hasOverflowArrows = _d === void 0 ? false : _d, _e = _a.withZoom, withZoom = _e === void 0 ? true : _e, _f = _a.hasToPreserveOrder, hasToPreserveOrder = _f === void 0 ? false : _f;
+    var _g = React$2.useState(0), activeIndex = _g[0], setActiveIndex = _g[1];
+    var _h = React$2.useState(selectedValue !== null && selectedValue !== void 0 ? selectedValue : images === null || images === void 0 ? void 0 : images[0]), selectedImage = _h[0], setSelectedImage = _h[1];
+    var initialValue = getActiveContent(hasToPreserveOrder, activeIndex, selectedImage, images);
     React$2.useEffect(function () {
         setSelectedImage(initialValue);
     }, [initialValue]);
-    return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: function (value) {
-                    setSelectedImage(value);
-                }, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
+    var updateActiveContent = function (value, index) {
+        hasToPreserveOrder ? setActiveIndex(index) : setSelectedImage(value);
+    };
+    return (jsxRuntime.jsxs(Container$I, { children: [jsxRuntime.jsx(ImagePreviewList, { images: images, selectedImage: selectedImage, dataTestId: previewListDataTestId, onClick: updateActiveContent, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, previewImgBorderColor: previewImgBorderColor, hasOverflowArrows: hasOverflowArrows }, void 0), jsxRuntime.jsx(ImageProductSlide$1, { content: selectedImage, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, position: thumbnailPosition, borderRadiusVariant: borderRadiusVariant, ctaText: ctaText, ctaAction: ctaAction, hideCTA: hideCTA, withZoom: withZoom }, void 0)] }, void 0));
 };
 var templateObject_1$W;
 
@@ -13967,7 +13999,7 @@ var settings$1 = {
     initialSlide: 0,
 };
 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;
+    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;
     var slick = React$2.useRef(null);
     var sliderWrapper = React$2.useRef(null);
     React$2.useRef(null);
@@ -14008,6 +14040,7 @@ var ImageProductSlide = function (_a) {
                         // 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();
+                        onChange === null || onChange === void 0 ? void 0 : onChange(e);
                     } }, settings$1, { nextArrow: jsxRuntime.jsx(NavButtonContainer$2, { 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$2, { 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) {
                         var _a;
                         var source = content === null || content === void 0 ? void 0 : content.url;
@@ -14019,8 +14052,10 @@ var templateObject_1$M, templateObject_2$w, templateObject_3$r, templateObject_4
 
 var Container$A = newStyled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  position: relative;\n  max-width: 450px;\n"])));
 var ProductGalleryMobile = function (_a) {
-    var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue;
-    return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedValue }, void 0) }), void 0));
+    var images = _a.images, customClick = _a.customClick, topTag = _a.topTag, topRightTag = _a.topRightTag, bottomTag = _a.bottomTag, productImageDataTestId = _a.productImageDataTestId, _b = _a.borderRadiusVariant, borderRadiusVariant = _b === void 0 ? false : _b, selectedValue = _a.selectedValue, _c = _a.hasToPreserveOrder, hasToPreserveOrder = _c === void 0 ? false : _c;
+    var _d = React$2.useState(0), activeIndex = _d[0], setActiveIndex = _d[1];
+    var selectedContent = hasToPreserveOrder ? images === null || images === void 0 ? void 0 : images[activeIndex] : selectedValue;
+    return (jsxRuntime.jsx(Container$A, __assign$1({ "data-testid": "product-gallery-mobile-v1" }, { children: jsxRuntime.jsx(ImageProductSlide, { contents: images, customClick: customClick, topTag: topTag, topRightTag: topRightTag, bottomTag: bottomTag, testId: productImageDataTestId, borderRadiusVariant: borderRadiusVariant, selectedValue: selectedContent, onChange: function (index) { return setActiveIndex(index); } }, void 0) }), void 0));
 };
 var templateObject_1$L;
 
@@ -19467,7 +19502,9 @@ var templateObject_1$e, templateObject_2$a;
 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 activeSizeTip = 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); });
+    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;
     return (jsxs("div", __assign$1({ css: {
             display: 'flex',
             flexDirection: inline ? 'row' : 'column',