@trafilea/afrodita-components 6.5.3 → 6.5.5

package/build/index.d.ts

@@ -2045,19 +2045,19 @@ interface PriceLabelProps {
     testId?: string;
     clubStyle?: boolean;
     bordersRounded?: boolean;
-    hasPricePerItem?: boolean;
-    quantity?: number;
 }
 declare const PriceLabel: React__default.FC<PriceLabelProps>;
 
 declare type Props$1 = PriceLabelProps & {
     savingsDisplay?: boolean;
+    pricePerItem?: string;
 };
 declare const PriceLabelV2: React__default.FC<Props$1>;
 
 declare type Props = PriceLabelProps & {
     savingsDisplay?: boolean;
     itemsQuantity?: number;
+    packUnitPrice?: string;
 };
 declare const PriceLabelV3: React__default.FC<Props>;
 
@@ -2295,8 +2295,9 @@ interface ColorPickerProps {
     label: string;
     onChange: (color: ColorPickerOption) => void;
     inline?: boolean;
+    showCross?: boolean;
 }
-declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const SingleColorPicker: ({ options, selectedValue, label, onChange, inline, showCross, }: ColorPickerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 interface CrossSellCheckboxProps extends rightToLeftProps {
     imageURL: string;

package/build/index.esm.js

@@ -5454,31 +5454,26 @@ var templateObject_1$1A, templateObject_2$10, templateObject_3$Q;
 var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1z || (templateObject_1$1z = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 var PriceLabelV2 = function (_a) {
     var _b;
-    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, hasPricePerItem = _a.hasPricePerItem, _h = _a.quantity, quantity = _h === void 0 ? 0 : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "hasPricePerItem", "quantity"]);
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, pricePerItem = _a.pricePerItem, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem"]);
     var theme = useTheme();
-    var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
+    var productFinalPrice = pricePerItem ? pricePerItem : finalPrice;
+    var isDiffFinalAndOriginalPrice = originalPrice !== productFinalPrice;
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
     var isDiscount = discount && isDiffFinalAndOriginalPrice;
     var isClubOffer = clubOffer && isDiffFinalAndOriginalPrice;
     var supportedCurrencies = ['A$', 'CA$', '£'];
     var currencySymbol = '$';
-    if (typeof finalPrice === 'string') {
+    if (typeof productFinalPrice === 'string') {
         supportedCurrencies.forEach(function (availableCurrency) {
-            if (finalPrice.includes(availableCurrency)) {
+            if (productFinalPrice.includes(availableCurrency)) {
                 currencySymbol = availableCurrency;
             }
         });
     }
-    var priceSymbolRemoved = typeof finalPrice === 'string' && finalPrice.includes(currencySymbol)
-        ? finalPrice.split(currencySymbol)[1]
-        : finalPrice;
-    var finalPricePerQuantity = hasPricePerItem
-        ? "".concat(currencySymbol).concat((Number(priceSymbolRemoved) / quantity).toFixed(2))
-        : finalPrice;
-    var finalPriceArray = typeof finalPricePerQuantity === 'string' &&
-        finalPricePerQuantity.includes('.') &&
-        finalPricePerQuantity.includes(currencySymbol)
-        ? finalPricePerQuantity.split(currencySymbol)[1].split('.')
+    var finalPriceArray = typeof productFinalPrice === 'string' &&
+        productFinalPrice.includes('.') &&
+        productFinalPrice.includes(currencySymbol)
+        ? productFinalPrice.split(currencySymbol)[1].split('.')
         : ['', ''];
     var priceCommonProps = {
         size: ComponentSize.Small,
@@ -5488,13 +5483,13 @@ var PriceLabelV2 = function (_a) {
         weight: 700,
     };
     var originalPriceNum, finalPriceNum;
-    if (typeof originalPrice === 'string' && typeof finalPrice === 'string') {
+    if (typeof originalPrice === 'string' && typeof productFinalPrice === 'string') {
         originalPriceNum = Number(originalPrice.replace(currencySymbol, ''));
-        finalPriceNum = Number(finalPrice.replace(currencySymbol, ''));
+        finalPriceNum = Number(productFinalPrice.replace(currencySymbol, ''));
     }
     else {
         originalPriceNum = typeof originalPrice === 'number' ? originalPrice : 0;
-        finalPriceNum = typeof finalPrice === 'number' ? finalPrice : 0;
+        finalPriceNum = typeof productFinalPrice === 'number' ? productFinalPrice : 0;
     }
     var saveto = originalPriceNum - finalPriceNum;
     var decimalPart = Number((saveto - Math.floor(saveto)).toFixed(2));
@@ -5509,9 +5504,11 @@ var PriceLabelV2 = function (_a) {
             theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
     return (jsxs$1(Container$Z, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
                             marginTop: '-5px',
-                        } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
+                        } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
+                            ? finalPriceArray[0]
+                            : (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
                             marginTop: '-6px',
-                        } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), hasPricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
+                        } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
                         letterSpacing: '-0.05rem',
                     }, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
                         borderRadius: '8px',
@@ -5530,7 +5527,7 @@ var ContainerDirectionColumn = newStyled.div(templateObject_2$$ || (templateObje
 var DiscountEachOneContainer = newStyled.div(templateObject_3$P || (templateObject_3$P = __makeTemplateObject(["\n  display: flex;\n  padding-left: 0.5rem;\n"], ["\n  display: flex;\n  padding-left: 0.5rem;\n"])));
 var PriceLabelV3 = function (_a) {
     var _b;
-    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity"]);
+    var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
     var theme = useTheme();
     var isDiffFinalAndOriginalPrice = originalPrice !== finalPrice;
     var isOriginalPrice = originalPrice && isDiffFinalAndOriginalPrice;
@@ -5578,17 +5575,15 @@ var PriceLabelV3 = function (_a) {
     var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
             theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
     var DiscountedPriceOfEach = function () {
-        var priceEachOne;
         if (!itemsQuantity || itemsQuantity < 2)
             return null;
-        priceEachOne = (finalPriceNum / itemsQuantity).toFixed(2);
-        return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", currencySymbol, priceEachOne] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
+        return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
     };
     return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$Z, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$Z, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
                                     marginTop: '-5px',
                                 } }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
                                     marginTop: '-6px',
-                                } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), itemsQuantity ? jsx$1(DiscountedPriceOfEach, {}, void 0) : null, isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
+                                } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
                                 letterSpacing: '-0.05rem',
                             }, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
                                 borderRadius: '8px',
@@ -6340,10 +6335,10 @@ var Collection = {
 };
 
 var OneColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
     var theme = useTheme();
     var outerBorder = selected ? theme.colors.shades['550'].color : 'none';
-    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? 0.4 : 1 } }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0)] }), void 0));
+    return (jsxs$1("svg", __assign$1({ width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "data-testid": testId, style: { opacity: noStock ? (showCross ? 1 : 0.4) : 1 } }, { children: [jsx$1("circle", { cx: "16", cy: "16", r: "12", fill: color, stroke: "#9E9E9E", strokeWidth: "0.5" }, void 0), jsx$1("circle", { cx: "16", cy: "16", r: "15.5", stroke: outerBorder }, void 0), showCross && noStock && (jsxs$1(Fragment$2, { children: [jsx$1("line", { x1: "12", y1: "12", x2: "20", y2: "20", stroke: "#9E9E9E", strokeWidth: "1" }, void 0), jsx$1("line", { x1: "12", y1: "20", x2: "20", y2: "12", stroke: "#9E9E9E", strokeWidth: "1" }, void 0)] }, void 0))] }), void 0));
 };
 
 var ThreeColorSelector = function (_a) {
@@ -6361,7 +6356,7 @@ var TwoColorSelector = function (_a) {
 };
 
 var ColorSelector = function (_a) {
-    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock;
+    var color = _a.color, selected = _a.selected, testId = _a.testId, noStock = _a.noStock, _b = _a.showCross, showCross = _b === void 0 ? false : _b;
     var primaryColor = color[0], secondaryColor = color[1], tertiaryColor = color[2];
     if (tertiaryColor) {
         return (jsx$1(ThreeColorSelector, { primaryColor: primaryColor, secondaryColor: secondaryColor, tertiaryColor: tertiaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
@@ -6369,7 +6364,7 @@ var ColorSelector = function (_a) {
     if (secondaryColor) {
         return (jsx$1(TwoColorSelector, { secondaryColor: secondaryColor, primaryColor: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
     }
-    return (jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock }, void 0));
+    return (jsx$1(OneColorSelector, { color: primaryColor, selected: selected, testId: testId, noStock: noStock, showCross: showCross }, void 0));
 };
 
 var OutOfStock = function (_a) {
@@ -6454,14 +6449,15 @@ var MultiColorPicker = function (_a) {
     return (jsxs$1(ColorRadioGroup$1, __assign$1({ value: selectedColor, onChange: onChangeHandler }, { children: [jsx$1(ColorRadioGroup$1.Label, { label: label, values: valueLabels }, void 0), jsx$1(ColorRadioGroup$1.OptionsContainer, { children: renderOptions$1(selectedColor, options) }, void 0)] }), void 0));
 };
 
-var renderOptions = function (options) {
+var renderOptions = function (options, showCross) {
+    if (showCross === void 0) { showCross = false; }
     if (options.length === 0) {
         return jsx(OutOfStock, { title: "out of stock color" }, void 0);
     }
     return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
             var checked = _a.checked;
             if (option.meta.color) {
-                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock }, void 0));
+                return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
             }
             if (option.meta.pattern) {
                 return (jsx(PatternSelector, { url: option.meta.pattern.url, selected: checked, noStock: option.noStock }, void 0));
@@ -6470,8 +6466,8 @@ var renderOptions = function (options) {
         } }), option.label)); });
 };
 var SingleColorPicker = function (_a) {
-    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b;
-    return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options) }), void 0)] }), void 0));
+    var options = _a.options, selectedValue = _a.selectedValue, label = _a.label, onChange = _a.onChange, _b = _a.inline, inline = _b === void 0 ? false : _b, _c = _a.showCross, showCross = _c === void 0 ? false : _c;
+    return (jsxs(ColorRadioGroup$1, __assign$1({ value: selectedValue, onChange: onChange, css: { flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'center' : 'start' } }, { children: [jsx(ColorRadioGroup$1.Label, { label: label, values: selectedValue && !inline ? selectedValue.label : undefined }, void 0), jsx(ColorRadioGroup$1.OptionsContainer, __assign$1({ css: { marginTop: inline ? '0' : '0.63rem', marginLeft: inline ? '1.5rem' : '0' }, "data-testid": "radio-group-options-container" }, { children: renderOptions(options, showCross) }), void 0)] }), void 0));
 };
 
 var Wrapper$5 = newStyled.div(templateObject_1$17 || (templateObject_1$17 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.625rem 1.25rem;\n  background-color: ", ";\n  width: 36.875rem;\n  max-width: 100%;\n  border-radius: 0.5rem;\n\n  img {\n    margin-right: ", ";\n  }\n"])), function (props) { return props.backgroundColor; }, function (props) { return (props.rightToLeft ? '0' : '1.25rem'); });