@trafilea/afrodita-components 6.43.7 → 6.43.9

package/build/index.d.ts

@@ -4074,7 +4074,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

@@ -21538,7 +21538,7 @@ var Container$5 = newStyled.div({
     width: '100vw',
     position: 'fixed',
     overflowY: 'scroll',
-    zIndex: '99999',
+    zIndex: '99999999999',
     top: 0,
     left: 0,
     display: 'flex',
@@ -21609,13 +21609,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) {
@@ -21888,10 +21894,10 @@ var FlexContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __
         "\n    [data-testid='subscription-frequency'] {\n      border: 0;\n      padding-left: 0 !important;\n      padding-right: 32px !important;\n    }\n\n    [role='listbox']{\n      margin-left: -20px;\n    }\n  ";
 });
 var DiscountTag = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"], ["\n  position: absolute;\n  top: -24px;\n  right: 18px;\n  background-color: ", ";\n  color: white;\n  padding: 5px 10px;\n  font-size: 12px;\n  font-weight: bold;\n  line-height: 14px;\n  border-radius: ", ";\n"])), function (_a) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled
-        ? theme.colors.shades[350].color
-        : theme.component.autoship.discountTag.backgroundColor;
+    var theme = _a.theme, selected = _a.selected;
+    return selected
+        ? theme.component.autoship.discountTag.backgroundColor
+        : theme.colors.shades[350].color;
 }, function (_a) {
     var theme = _a.theme;
     return "".concat(theme.component.autoship.discountTag.borderRadius, " \n      ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
@@ -22026,7 +22032,7 @@ var SubscriptionPlanSelector = function (_a) {
         }
         return null;
     };
-    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, disabled: radiosStatuses.subscription.disabled }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, selected: radiosStatuses.subscription.checked }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
                                             setRadiosStatuses(function (prev) { return ({
                                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: true }),
                                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: false }),