@trafilea/afrodita-components 6.43.8 → 6.43.10

package/build/index.d.ts

@@ -1454,8 +1454,9 @@ interface BuyNowPayLaterProps {
     iconColor?: string;
     fontSize?: string;
     bnplWithAfterPay?: boolean;
+    textTemplate?: string;
 }
-declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, bnplWithAfterPay, }: BuyNowPayLaterProps) => JSX.Element | null;
+declare const BuyNowPayLater: ({ displayBNPL, installments, installmentPrice, iconFolder, iconName, showLogo, iconColor, fontSize, bnplWithAfterPay, textTemplate, }: BuyNowPayLaterProps) => JSX.Element | null;
 
 interface CloseButtonProps {
     onClick: () => void;
@@ -4074,7 +4075,8 @@ declare type IMobileGalleryProps = {
     bottomTag?: JSX.Element;
     productImageDataTestId?: string;
     borderRadiusVariant?: boolean;
-    selectedValue?: number;
+    selectedIndex?: number;
+    selectedValue?: IImage;
     itemsOnViewport?: number;
 };
 declare const ProductGalleryMobileV4: React.FC<IMobileGalleryProps>;

package/build/index.esm.js

@@ -6530,16 +6530,24 @@ var TextContainer$1 = newStyled.div(templateObject_2$1j || (templateObject_2$1j
 var IconWrapper$1 = newStyled.div(templateObject_3$11 || (templateObject_3$11 = __makeTemplateObject(["\n  display: inline;\n  top: -1px;\n  position: relative;\n\n  svg {\n    vertical-align: -webkit-baseline-middle;\n  }\n"], ["\n  display: inline;\n  top: -1px;\n  position: relative;\n\n  svg {\n    vertical-align: -webkit-baseline-middle;\n  }\n"])));
 var BuyNowPayLater = function (_a) {
     var _b;
-    var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f;
+    var displayBNPL = _a.displayBNPL, installments = _a.installments, installmentPrice = _a.installmentPrice, _c = _a.iconFolder, iconFolder = _c === void 0 ? 'PDP' : _c, iconName = _a.iconName, _d = _a.showLogo, showLogo = _d === void 0 ? true : _d, _e = _a.iconColor, iconColor = _e === void 0 ? '#292929' : _e, fontSize = _a.fontSize, _f = _a.bnplWithAfterPay, bnplWithAfterPay = _f === void 0 ? false : _f, textTemplate = _a.textTemplate;
     // @ts-ignore
     var IconComponent = (_b = Icon === null || Icon === void 0 ? void 0 : Icon[iconFolder]) === null || _b === void 0 ? void 0 : _b[iconName];
     if (!IconComponent) {
         console.error('Icon', iconName, 'not found');
         return null;
     }
-    return (jsx$1(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [!bnplWithAfterPay
-                            ? "Or ".concat(installments, " payments of ")
-                            : "or 4 interest-free payments of ", jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
+    var dynamicText = '';
+    if (textTemplate) {
+        dynamicText = "".concat(textTemplate.replace('{installments}', installments.toString()).trimEnd(), " ");
+    }
+    else if (!bnplWithAfterPay) {
+        dynamicText = "Or ".concat(installments, " payments of ");
+    }
+    else {
+        dynamicText = "or 4 interest-free payments of ";
+    }
+    return (jsx$1(Container$19, __assign$1({ displayBNPL: displayBNPL }, { children: jsxs$1(TextContainer$1, __assign$1({ style: { fontSize: fontSize }, "data-testid": "mainText" }, { children: [jsxs$1("div", { children: [dynamicText, jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", style: {
                                 display: 'inline',
                                 fontSize: fontSize,
                                 paddingLeft: '0.25rem',
@@ -21538,7 +21546,7 @@ var Container$5 = newStyled.div({
     width: '100vw',
     position: 'fixed',
     overflowY: 'scroll',
-    zIndex: '99999',
+    zIndex: '99999999999',
     top: 0,
     left: 0,
     display: 'flex',
@@ -21609,13 +21617,19 @@ var GalleryDetailed = function (_a) {
 };
 
 var ProductGalleryMobileV4 = 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, _c = _a.selectedValue, selectedValue = _c === void 0 ? 0 : _c, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
+    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, _c = _a.selectedIndex, selectedIndex = _c === void 0 ? 0 : _c, selectedValue = _a.selectedValue, _d = _a.itemsOnViewport, itemsOnViewport = _d === void 0 ? 1 : _d;
     var containerRef = useRef(null);
-    var _e = useState(selectedValue), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
+    var _e = useState(selectedIndex), selectedImageIndex = _e[0], setSelectedImageIndex = _e[1];
     var _f = useState(false), galleryOpened = _f[0], setGalleryOpened = _f[1];
     useEffect(function () {
-        setSelectedImageIndex(selectedValue);
-    }, [selectedValue]);
+        if (selectedIndex) {
+            setSelectedImageIndex(selectedIndex);
+        }
+        else if (selectedValue) {
+            var actualIndex = images.findIndex(function (el) { return el.key === selectedValue.key; });
+            setSelectedImageIndex(actualIndex);
+        }
+    }, [selectedIndex, selectedValue, images]);
     useEffect(function () {
         var body = document.querySelector('body');
         if (!body) {