@trafilea/afrodita-components 6.55.5 → 6.55.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +31 -1
- package/build/index.esm.js +137 -87
- package/build/index.esm.js.map +1 -1
- package/build/index.js +137 -87
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +20 -0
- package/build/theme/shapermint.theme.d.ts +20 -0
- package/build/theme/thebodcon.theme.d.ts +20 -0
- package/build/theme/thespadr.theme.d.ts +20 -0
- package/build/theme/thespadr.theme.js +25 -5
- package/build/theme/truekind.theme.d.ts +20 -0
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -111,6 +111,7 @@ interface PriceLabelProps {
|
|
|
111
111
|
testId?: string;
|
|
112
112
|
clubStyle?: boolean;
|
|
113
113
|
bordersRounded?: boolean;
|
|
114
|
+
invertDirection?: boolean;
|
|
114
115
|
}
|
|
115
116
|
declare const PriceLabel: react__default.FC<PriceLabelProps>;
|
|
116
117
|
|
|
@@ -1438,6 +1439,8 @@ declare type AutoshipPropsV2 = {
|
|
|
1438
1439
|
currencySymbol: string;
|
|
1439
1440
|
discountLabel?: string;
|
|
1440
1441
|
disabledInputs?: AutoshipRadios[];
|
|
1442
|
+
hasInfoBulletIcons?: boolean;
|
|
1443
|
+
borderRadiusValue?: string;
|
|
1441
1444
|
};
|
|
1442
1445
|
declare const AutoshipV2: react__default.FC<AutoshipPropsV2>;
|
|
1443
1446
|
|
|
@@ -1700,6 +1703,26 @@ declare type ThemeComponent = {
|
|
|
1700
1703
|
color: string;
|
|
1701
1704
|
};
|
|
1702
1705
|
};
|
|
1706
|
+
outline?: {
|
|
1707
|
+
active: {
|
|
1708
|
+
backgroundColor: string;
|
|
1709
|
+
color: string;
|
|
1710
|
+
};
|
|
1711
|
+
hover: {
|
|
1712
|
+
backgroundColor: string;
|
|
1713
|
+
color: string;
|
|
1714
|
+
};
|
|
1715
|
+
};
|
|
1716
|
+
tertiary?: {
|
|
1717
|
+
active: {
|
|
1718
|
+
backgroundColor: string;
|
|
1719
|
+
color: string;
|
|
1720
|
+
};
|
|
1721
|
+
hover: {
|
|
1722
|
+
backgroundColor: string;
|
|
1723
|
+
color: string;
|
|
1724
|
+
};
|
|
1725
|
+
};
|
|
1703
1726
|
};
|
|
1704
1727
|
input: {
|
|
1705
1728
|
background: string;
|
|
@@ -2816,6 +2839,9 @@ interface ProductItemSmallMobileProps extends ProductItemProps {
|
|
|
2816
2839
|
};
|
|
2817
2840
|
likeBtn?: LikeButtonProps;
|
|
2818
2841
|
showDecimals?: boolean;
|
|
2842
|
+
showDivider?: boolean;
|
|
2843
|
+
invertPriceDirection?: boolean;
|
|
2844
|
+
priceAndReviewInOneLine?: boolean;
|
|
2819
2845
|
}
|
|
2820
2846
|
|
|
2821
2847
|
declare function withProductGrid<P extends ProductItemProps>(ProductItemComponent: react__default.FC<P>, data: ProductItemProps[]): {
|
|
@@ -3219,6 +3245,7 @@ declare type ModalProps = {
|
|
|
3219
3245
|
children: react__default.ReactNode;
|
|
3220
3246
|
width?: string;
|
|
3221
3247
|
initialTop?: string;
|
|
3248
|
+
countryRedirModalWithCoupon?: boolean;
|
|
3222
3249
|
};
|
|
3223
3250
|
interface ContainerProps {
|
|
3224
3251
|
maxFullScreen: boolean;
|
|
@@ -3226,6 +3253,7 @@ interface ContainerProps {
|
|
|
3226
3253
|
padding?: string;
|
|
3227
3254
|
width?: string;
|
|
3228
3255
|
initialTop?: string;
|
|
3256
|
+
countryRedirModalWithCoupon?: boolean;
|
|
3229
3257
|
}
|
|
3230
3258
|
declare const Overlay: _emotion_styled.StyledComponent<{
|
|
3231
3259
|
theme?: _emotion_react.Theme | undefined;
|
|
@@ -3657,8 +3685,10 @@ interface CategoryTagProps {
|
|
|
3657
3685
|
className?: string;
|
|
3658
3686
|
styledBorder?: boolean;
|
|
3659
3687
|
backgroundColor?: string;
|
|
3688
|
+
hasMargin?: boolean;
|
|
3689
|
+
noBorderRadius?: boolean;
|
|
3660
3690
|
}
|
|
3661
|
-
declare const CategoryTag: ({ text, size, className, styledBorder, backgroundColor, }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3691
|
+
declare const CategoryTag: ({ text, size, className, styledBorder, backgroundColor, hasMargin, noBorderRadius, }: CategoryTagProps) => _emotion_react_jsx_runtime.JSX.Element;
|
|
3662
3692
|
|
|
3663
3693
|
interface CategorySquareTagProps {
|
|
3664
3694
|
text: string;
|
package/build/index.esm.js
CHANGED
|
@@ -3373,6 +3373,42 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
3373
3373
|
return __assign$1(__assign$1({}, state), { isMobile: isMobile, isTablet: isTablet, isDesktop: isDesktop });
|
|
3374
3374
|
};
|
|
3375
3375
|
|
|
3376
|
+
var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3377
|
+
var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3378
|
+
var weight = _a.weight;
|
|
3379
|
+
return (weight ? weight : '400');
|
|
3380
|
+
}, function (_a) {
|
|
3381
|
+
var size = _a.size, theme = _a.theme, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
|
|
3382
|
+
return getFontSize(size, theme, finalPriceStyled, finalPriceStyledSmall);
|
|
3383
|
+
}, function (_a) {
|
|
3384
|
+
var _b;
|
|
3385
|
+
var size = _a.size;
|
|
3386
|
+
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
3387
|
+
}, function (_a) {
|
|
3388
|
+
var color = _a.color;
|
|
3389
|
+
return color;
|
|
3390
|
+
}, function (_a) {
|
|
3391
|
+
var underlined = _a.underlined;
|
|
3392
|
+
return (underlined ? 'line-through' : 'none');
|
|
3393
|
+
}, function (_a) {
|
|
3394
|
+
var _b;
|
|
3395
|
+
var margin = _a.margin, size = _a.size;
|
|
3396
|
+
return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
3397
|
+
}, function (_a) {
|
|
3398
|
+
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3399
|
+
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3400
|
+
});
|
|
3401
|
+
var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3402
|
+
var _b;
|
|
3403
|
+
var size = _a.size;
|
|
3404
|
+
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
3405
|
+
});
|
|
3406
|
+
var PriceContainer$3 = newStyled.div(templateObject_4$19 || (templateObject_4$19 = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"], ["\n display: flex;\n flex-direction: ", ";\n gap: 0.5rem;\n"])), function (_a) {
|
|
3407
|
+
var invertDirection = _a.invertDirection;
|
|
3408
|
+
return (invertDirection ? 'row-reverse' : 'row');
|
|
3409
|
+
});
|
|
3410
|
+
var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t, templateObject_4$19;
|
|
3411
|
+
|
|
3376
3412
|
var getStylesBySize$e = function (size, theme) {
|
|
3377
3413
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3378
3414
|
switch (size) {
|
|
@@ -3413,36 +3449,6 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
3413
3449
|
return (_c = getStylesBySize$e(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
3414
3450
|
}
|
|
3415
3451
|
};
|
|
3416
|
-
var Container$1x = newStyled.div(templateObject_1$2D || (templateObject_1$2D = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
3417
|
-
var Price$1 = newStyled.p(templateObject_2$1T || (templateObject_2$1T = __makeTemplateObject(["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"], ["\n font-weight: ", ";\n font-size: ", ";\n line-height: ", ";\n color: ", ";\n text-decoration: ", ";\n margin: ", ";\n position: relative;\n margin-top: ", ";\n"])), function (_a) {
|
|
3418
|
-
var weight = _a.weight;
|
|
3419
|
-
return (weight ? weight : '400');
|
|
3420
|
-
}, function (_a) {
|
|
3421
|
-
var size = _a.size, theme = _a.theme, finalPriceStyled = _a.finalPriceStyled, finalPriceStyledSmall = _a.finalPriceStyledSmall;
|
|
3422
|
-
return getFontSize(size, theme, finalPriceStyled, finalPriceStyledSmall);
|
|
3423
|
-
}, function (_a) {
|
|
3424
|
-
var _b;
|
|
3425
|
-
var size = _a.size;
|
|
3426
|
-
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
3427
|
-
}, function (_a) {
|
|
3428
|
-
var color = _a.color;
|
|
3429
|
-
return color;
|
|
3430
|
-
}, function (_a) {
|
|
3431
|
-
var underlined = _a.underlined;
|
|
3432
|
-
return (underlined ? 'line-through' : 'none');
|
|
3433
|
-
}, function (_a) {
|
|
3434
|
-
var _b;
|
|
3435
|
-
var margin = _a.margin, size = _a.size;
|
|
3436
|
-
return (margin ? (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin : '0');
|
|
3437
|
-
}, function (_a) {
|
|
3438
|
-
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
3439
|
-
return finalPriceStyledSmall ? (size === 'large' ? '-6px' : '-7px') : '0';
|
|
3440
|
-
});
|
|
3441
|
-
var TagContainer = newStyled.div(templateObject_3$1t || (templateObject_3$1t = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
3442
|
-
var _b;
|
|
3443
|
-
var size = _a.size;
|
|
3444
|
-
return (_b = getStylesBySize$e(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
3445
|
-
});
|
|
3446
3452
|
function getTestId$2() {
|
|
3447
3453
|
var args = [];
|
|
3448
3454
|
for (var _i = 0; _i < arguments.length; _i++) {
|
|
@@ -3451,7 +3457,7 @@ function getTestId$2() {
|
|
|
3451
3457
|
return args.filter(Boolean).join('-');
|
|
3452
3458
|
}
|
|
3453
3459
|
var PriceLabel$1 = function (_a) {
|
|
3454
|
-
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _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.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle"]);
|
|
3460
|
+
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _b = _a.finalPriceStyled, finalPriceStyled = _b === void 0 ? false : _b, finalPriceStyle = _a.finalPriceStyle, _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.Medium : _e, _f = _a.clubStyle, clubStyle = _f === void 0 ? false : _f, _g = _a.invertDirection, invertDirection = _g === void 0 ? false : _g, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "invertDirection"]);
|
|
3455
3461
|
var theme = useTheme();
|
|
3456
3462
|
var isMobile = useWindowDimensions().isMobile;
|
|
3457
3463
|
var priceCommonProps = {
|
|
@@ -3467,11 +3473,10 @@ var PriceLabel$1 = function (_a) {
|
|
|
3467
3473
|
: isMobile
|
|
3468
3474
|
? ComponentSize.Small
|
|
3469
3475
|
: ComponentSize.XSmall;
|
|
3470
|
-
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor,
|
|
3476
|
+
return (jsx$1(Price$1, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId$2(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
3471
3477
|
};
|
|
3472
|
-
return (jsxs$1(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(
|
|
3473
|
-
};
|
|
3474
|
-
var templateObject_1$2D, templateObject_2$1T, templateObject_3$1t;
|
|
3478
|
+
return (jsxs$1(Container$1x, __assign$1({}, rest, { id: "priceLabel" }, { children: [clubStyle ? (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price$1, __assign$1({ margin: true, "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }), void 0)) : (jsxs$1(PriceContainer$3, __assign$1({ invertDirection: invertDirection }, { children: [jsx$1(Price$1, __assign$1({ "data-testid": getTestId$2(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }), void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$4, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
3479
|
+
};
|
|
3475
3480
|
|
|
3476
3481
|
var supportedCurrencies = ['AU$', 'CA$', '€', 'kr', '£', 'NZ$', 'S$'];
|
|
3477
3482
|
|
|
@@ -4874,12 +4879,12 @@ var TAGS = {
|
|
|
4874
4879
|
display3: newStyled.h3(templateObject_6$K || (templateObject_6$K = __makeTemplateObject([""], [""]))),
|
|
4875
4880
|
heading1: newStyled.h1(templateObject_7$A || (templateObject_7$A = __makeTemplateObject([""], [""]))),
|
|
4876
4881
|
heading2: newStyled.h2(templateObject_8$t || (templateObject_8$t = __makeTemplateObject([""], [""]))),
|
|
4877
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4878
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4882
|
+
heading3: newStyled.h3(templateObject_9$h || (templateObject_9$h = __makeTemplateObject([""], [""]))),
|
|
4883
|
+
heading4: newStyled.h4(templateObject_10$f || (templateObject_10$f = __makeTemplateObject([""], [""]))),
|
|
4879
4884
|
heading5: newStyled.h5(templateObject_11$a || (templateObject_11$a = __makeTemplateObject([""], [""]))),
|
|
4880
4885
|
heading6: newStyled.h6(templateObject_12$7 || (templateObject_12$7 = __makeTemplateObject([""], [""]))),
|
|
4881
4886
|
heading7: newStyled.h1(templateObject_13$6 || (templateObject_13$6 = __makeTemplateObject([""], [""]))),
|
|
4882
|
-
heading8: newStyled.h1(templateObject_14$
|
|
4887
|
+
heading8: newStyled.h1(templateObject_14$4 || (templateObject_14$4 = __makeTemplateObject([""], [""]))),
|
|
4883
4888
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
4884
4889
|
link: newStyled.a(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "], ["\n cursor: pointer;\n color: inherit;\n text-decoration: ", ";\n "])), function (props) { return (props.underline ? 'underline' : 'none'); }),
|
|
4885
4890
|
button: newStyled.span(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["\n display: inline-block;\n "], ["\n display: inline-block;\n "]))),
|
|
@@ -5006,7 +5011,7 @@ var DEFAULTS = {
|
|
|
5006
5011
|
size: 'regular',
|
|
5007
5012
|
},
|
|
5008
5013
|
};
|
|
5009
|
-
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$
|
|
5014
|
+
var templateObject_1$2r, templateObject_2$1N, templateObject_3$1q, templateObject_4$18, templateObject_5$T, templateObject_6$K, templateObject_7$A, templateObject_8$t, templateObject_9$h, templateObject_10$f, templateObject_11$a, templateObject_12$7, templateObject_13$6, templateObject_14$4, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
5010
5015
|
|
|
5011
5016
|
var Container$1u = newStyled.div(templateObject_1$2q || (templateObject_1$2q = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
5012
5017
|
var Card$4 = newStyled.div(templateObject_2$1M || (templateObject_2$1M = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
@@ -6208,15 +6213,15 @@ var SubscriptionHeader$5 = newStyled.div(templateObject_5$P || (templateObject_5
|
|
|
6208
6213
|
var BenefitsContainer$4 = newStyled.div(templateObject_6$H || (templateObject_6$H = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6209
6214
|
var Benefit$4 = newStyled.div(templateObject_7$y || (templateObject_7$y = __makeTemplateObject(["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0px;\n svg {\n overflow: visible;\n }\n"])));
|
|
6210
6215
|
var BenefitText$4 = newStyled(Text$7)(templateObject_8$r || (templateObject_8$r = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
6211
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
6212
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
6216
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$g || (templateObject_9$g = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
6217
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$e || (templateObject_10$e = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
6213
6218
|
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$9 || (templateObject_11$9 = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6214
6219
|
var StyledPrice$4 = newStyled(PriceLabelV2$1)(templateObject_12$6 || (templateObject_12$6 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6215
6220
|
var selected = _a.selected, theme = _a.theme;
|
|
6216
6221
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
6217
6222
|
});
|
|
6218
6223
|
var Container$1m = newStyled.div(templateObject_13$5 || (templateObject_13$5 = __makeTemplateObject([""], [""])));
|
|
6219
|
-
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$
|
|
6224
|
+
var templateObject_1$2c, templateObject_2$1C, templateObject_3$1j, templateObject_4$13, templateObject_5$P, templateObject_6$H, templateObject_7$y, templateObject_8$r, templateObject_9$g, templateObject_10$e, templateObject_11$9, templateObject_12$6, templateObject_13$5;
|
|
6220
6225
|
|
|
6221
6226
|
var radioIds$3 = {
|
|
6222
6227
|
oneTime: {
|
|
@@ -6292,7 +6297,10 @@ var getSelectedBorder$1 = function (_a) {
|
|
|
6292
6297
|
}
|
|
6293
6298
|
return "1.5px solid ".concat(colors.shades['700'].color);
|
|
6294
6299
|
};
|
|
6295
|
-
var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n border-radius:
|
|
6300
|
+
var ContainerBase$4 = newStyled.div(templateObject_3$1i || (templateObject_3$1i = __makeTemplateObject(["\n border-radius: ", ";\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"], ["\n border-radius: ", ";\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
6301
|
+
var borderRadiusValue = _a.borderRadiusValue;
|
|
6302
|
+
return borderRadiusValue !== null && borderRadiusValue !== void 0 ? borderRadiusValue : '8px';
|
|
6303
|
+
}, function (_a) {
|
|
6296
6304
|
var selected = _a.selected, theme = _a.theme;
|
|
6297
6305
|
return selected ? getSelectedBorder$1(theme) : "1px solid ".concat(theme.colors.shades[200].color);
|
|
6298
6306
|
}, function (_a) {
|
|
@@ -6318,8 +6326,8 @@ var SubscriptionHeader$4 = newStyled.div(templateObject_6$G || (templateObject_6
|
|
|
6318
6326
|
});
|
|
6319
6327
|
var BenefitsContainer$3 = newStyled.div(templateObject_7$x || (templateObject_7$x = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
6320
6328
|
var Benefit$3 = newStyled.div(templateObject_8$q || (templateObject_8$q = __makeTemplateObject(["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"], ["\n display: flex;\n padding: 8px 0;\n svg {\n overflow: visible;\n }\n"])));
|
|
6321
|
-
var BenefitText$3 = newStyled(Text$7)(templateObject_9$
|
|
6322
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$
|
|
6329
|
+
var BenefitText$3 = newStyled(Text$7)(templateObject_9$f || (templateObject_9$f = __makeTemplateObject(["\n line-height: 20px;\n"], ["\n line-height: 20px;\n"])));
|
|
6330
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$d || (templateObject_10$d = __makeTemplateObject(["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"], ["\n line-height: 35px;\n margin-right: 8px;\n align-self: center;\n"])));
|
|
6323
6331
|
var StyledPrice$3 = newStyled(PriceLabelV2$1)(templateObject_11$8 || (templateObject_11$8 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
6324
6332
|
var selected = _a.selected, theme = _a.theme;
|
|
6325
6333
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
@@ -6329,7 +6337,8 @@ var TooltipWrapper$1 = newStyled.div(templateObject_13$4 || (templateObject_13$4
|
|
|
6329
6337
|
var theme = _a.theme;
|
|
6330
6338
|
return theme.component.autoship.tooltip.margin;
|
|
6331
6339
|
});
|
|
6332
|
-
var
|
|
6340
|
+
var BulletIconWrapper = newStyled.div(templateObject_14$3 || (templateObject_14$3 = __makeTemplateObject(["\n margin-right: 9px;\n"], ["\n margin-right: 9px;\n"])));
|
|
6341
|
+
var templateObject_1$2b, templateObject_2$1B, templateObject_3$1i, templateObject_4$12, templateObject_5$O, templateObject_6$G, templateObject_7$x, templateObject_8$q, templateObject_9$f, templateObject_10$d, templateObject_11$8, templateObject_12$5, templateObject_13$4, templateObject_14$3;
|
|
6333
6342
|
|
|
6334
6343
|
var radioIds$2 = {
|
|
6335
6344
|
oneTime: {
|
|
@@ -6342,7 +6351,7 @@ var radioIds$2 = {
|
|
|
6342
6351
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
6343
6352
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
6344
6353
|
var AutoshipV2 = function (_a) {
|
|
6345
|
-
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
6354
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs, _d = _a.hasInfoBulletIcons, hasInfoBulletIcons = _d === void 0 ? true : _d, borderRadiusValue = _a.borderRadiusValue;
|
|
6346
6355
|
var theme = useTheme();
|
|
6347
6356
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
6348
6357
|
? frequencyValues.map(function (value) {
|
|
@@ -6352,8 +6361,8 @@ var AutoshipV2 = function (_a) {
|
|
|
6352
6361
|
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
6353
6362
|
var initialRadioChecked = radioIds$2.autoship &&
|
|
6354
6363
|
((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds$2.autoship.id)) ? radioIds$2.oneTime : radioIds$2.autoship);
|
|
6355
|
-
var
|
|
6356
|
-
var
|
|
6364
|
+
var _e = useState(initialRadioChecked), radioCheck = _e[0], setRadioCheck = _e[1];
|
|
6365
|
+
var _f = useState(dropdownOptions[0].value), subscriptionPeriod = _f[0], setSubscriptionPeriod = _f[1];
|
|
6357
6366
|
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
6358
6367
|
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
6359
6368
|
var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
|
|
@@ -6389,9 +6398,9 @@ var AutoshipV2 = function (_a) {
|
|
|
6389
6398
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6390
6399
|
};
|
|
6391
6400
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6392
|
-
return (jsxs$1(Container$1l, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$4, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6393
|
-
|
|
6394
|
-
|
|
6401
|
+
return (jsxs$1(Container$1l, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$4, __assign$1({ onClick: function () { return handleChange(radioIds$2.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$2.autoship.id === radioCheck.id, borderRadiusValue: borderRadiusValue }, { children: [jsx$1(DiscountTag$3, __assign$1({ isSelected: radioIds$2.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$4, { children: [jsxs$1(FlexContainer$3, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$2.autoship.id, id: radioIds$2.autoship.id, value: radioIds$2.autoship.id, checked: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$2.autoship.id) }, void 0), jsx$1(TooltipWrapper$1, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$3, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$2.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$3, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$3, { children: [hasInfoBulletIcons && (jsx$1(BulletIconWrapper, { children: jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$2.autoship.id === radioCheck.id
|
|
6402
|
+
? benefitsColor.selected
|
|
6403
|
+
: benefitsColor.base }, void 0) }, void 0)), jsx$1(BenefitText$3, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$3, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Delivery Every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }), void 0)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Delivery Every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxs$1(SinglePurchaseContainer$3, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$2.oneTime.id === radioCheck.id, borderRadiusValue: borderRadiusValue, onClick: function () { return handleChange(radioIds$2.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$2.oneTime.id, id: radioIds$2.oneTime.id, value: radioIds$2.oneTime.id, checked: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$2.oneTime.id) }, void 0), jsx$1(StyledPrice$3, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$2.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6395
6404
|
};
|
|
6396
6405
|
|
|
6397
6406
|
var _a$2;
|
|
@@ -6876,7 +6885,7 @@ var Rating = function (_a) {
|
|
|
6876
6885
|
href: reviewsContainerId,
|
|
6877
6886
|
}
|
|
6878
6887
|
: {};
|
|
6879
|
-
return (jsxs$1(Container$1b, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6888
|
+
return (jsxs$1(Container$1b, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsx$1(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsx$1(StarList, { rating: rating, size: size, starsNumber: STARTS_NUMBER, fill: theme.component.stars.element.color }, void 0), (reviews || reviewsText) && (jsxs$1(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0))] }), void 0));
|
|
6880
6889
|
};
|
|
6881
6890
|
|
|
6882
6891
|
var ImageWrapper$4 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"], ["\n position: relative;\n display: flex;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n width: ", ";\n height: ", ";\n"])), function (_a) {
|
|
@@ -7313,11 +7322,11 @@ var STYLES_BY_THEME = {
|
|
|
7313
7322
|
mobile: {
|
|
7314
7323
|
fontSize: '14px',
|
|
7315
7324
|
},
|
|
7316
|
-
fontSize: '
|
|
7317
|
-
fontWeight: '
|
|
7325
|
+
fontSize: '14px',
|
|
7326
|
+
fontWeight: '400',
|
|
7318
7327
|
},
|
|
7319
7328
|
image: {
|
|
7320
|
-
borderRadius: '
|
|
7329
|
+
borderRadius: '0px',
|
|
7321
7330
|
},
|
|
7322
7331
|
},
|
|
7323
7332
|
Revel: {
|
|
@@ -7389,7 +7398,7 @@ var Title$7 = newStyled.h2(templateObject_4$U || (templateObject_4$U = __makeTem
|
|
|
7389
7398
|
return STYLES_BY_THEME[theme.name].title.fontWeight;
|
|
7390
7399
|
}, function (_a) {
|
|
7391
7400
|
var theme = _a.theme;
|
|
7392
|
-
return theme.colors.
|
|
7401
|
+
return theme.colors.text.color;
|
|
7393
7402
|
}, function (_a) {
|
|
7394
7403
|
var _b = _a.align, align = _b === void 0 ? 'center' : _b;
|
|
7395
7404
|
return align;
|
|
@@ -7442,7 +7451,12 @@ var BottomTagContainer$9 = newStyled.div(templateObject_6$C || (templateObject_6
|
|
|
7442
7451
|
});
|
|
7443
7452
|
var MarginTopContainer$1 = newStyled.div(templateObject_7$v || (templateObject_7$v = __makeTemplateObject(["\n margin-top: 8px;\n"], ["\n margin-top: 8px;\n"])));
|
|
7444
7453
|
var ClubOfferPriceLabelWrapper = newStyled.div(templateObject_8$o || (templateObject_8$o = __makeTemplateObject(["\n margin-top: 2px;\n margin-bottom: 2px;\n"], ["\n margin-top: 2px;\n margin-bottom: 2px;\n"])));
|
|
7445
|
-
var
|
|
7454
|
+
var Divider = newStyled.div(templateObject_9$e || (templateObject_9$e = __makeTemplateObject(["\n width: 100%;\n height: 1px;\n background-color: ", ";\n"], ["\n width: 100%;\n height: 1px;\n background-color: ", ";\n"])), function (_a) {
|
|
7455
|
+
var theme = _a.theme;
|
|
7456
|
+
return theme.colors.shades['100'].color;
|
|
7457
|
+
});
|
|
7458
|
+
var OneLineInfoWrapper = newStyled.div(templateObject_10$c || (templateObject_10$c = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n"], ["\n width: 100%;\n display: flex;\n justify-content: space-between;\n"])));
|
|
7459
|
+
var templateObject_1$1G, templateObject_2$1k, templateObject_3$16, templateObject_4$U, templateObject_5$J, templateObject_6$C, templateObject_7$v, templateObject_8$o, templateObject_9$e, templateObject_10$c;
|
|
7446
7460
|
|
|
7447
7461
|
var ProductItemMobile = function (_a) {
|
|
7448
7462
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
@@ -7462,7 +7476,7 @@ var ProductItemMobile = function (_a) {
|
|
|
7462
7476
|
} : _s, _t = _a.hasStrength, hasStrength = _t === void 0 ? {
|
|
7463
7477
|
strength: -1,
|
|
7464
7478
|
description: '',
|
|
7465
|
-
} : _t, _u = _a.clubPrice, clubPrice = _u === void 0 ? '' : _u, _v = _a.showClubPriceLabel, showClubPriceLabel = _v === void 0 ? false : _v, isRatingLoading = _a.isRatingLoading, _w = _a.version, version = _w === void 0 ? 1 : _w, _x = _a.showDiscountPercentageTag, showDiscountPercentageTag = _x === void 0 ? false : _x, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _y = _a.isOnViewport, isOnViewport = _y === void 0 ? false : _y, _z = _a.hasDefaultSize, hasDefaultSize = _z === void 0 ? false : _z, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton, _0 = _a.showDecimals, showDecimals = _0 === void 0 ? true : _0;
|
|
7479
|
+
} : _t, _u = _a.clubPrice, clubPrice = _u === void 0 ? '' : _u, _v = _a.showClubPriceLabel, showClubPriceLabel = _v === void 0 ? false : _v, isRatingLoading = _a.isRatingLoading, _w = _a.version, version = _w === void 0 ? 1 : _w, _x = _a.showDiscountPercentageTag, showDiscountPercentageTag = _x === void 0 ? false : _x, discountTagLoading = _a.discountTagLoading, discountTag = _a.discountTag, _y = _a.isOnViewport, isOnViewport = _y === void 0 ? false : _y, _z = _a.hasDefaultSize, hasDefaultSize = _z === void 0 ? false : _z, clubOffer = _a.clubOffer, likeBtn = _a.likeBtn, onClickBottomButton = _a.onClickBottomButton, _0 = _a.showDecimals, showDecimals = _0 === void 0 ? true : _0, _1 = _a.showDivider, showDivider = _1 === void 0 ? false : _1, _2 = _a.invertPriceDirection, invertPriceDirection = _2 === void 0 ? false : _2, _3 = _a.priceAndReviewInOneLine, priceAndReviewInOneLine = _3 === void 0 ? false : _3;
|
|
7466
7480
|
var theme = useTheme();
|
|
7467
7481
|
var styles = getStylesBySize$b(size);
|
|
7468
7482
|
var isMobile = useWindowDimensions().isMobile;
|
|
@@ -7507,7 +7521,7 @@ var ProductItemMobile = function (_a) {
|
|
|
7507
7521
|
case 5:
|
|
7508
7522
|
return (jsx(ClubOfferPriceLabelWrapper, __assign$1({ style: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.wrapperStyle }, { children: jsx(ClubPriceMemberLabel, { isClub: true, isPDP: true, finalPrice: (_e = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _e === void 0 ? void 0 : _e.finalPrice, originalPrice: (_f = clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.price) === null || _f === void 0 ? void 0 : _f.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount-v4", clubStyle: showClubPriceLabel, icon: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.clubOfferIcon, isCollections: clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isCollections }, void 0) }), void 0));
|
|
7509
7523
|
default:
|
|
7510
|
-
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount", showDecimals: showDecimals }, void 0)) : (jsx(PriceLabel$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
7524
|
+
return priceDisplayType === 'styled' ? (jsx(PriceLabelV2$1, { finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Large, testId: "volume-discount", showDecimals: showDecimals }, void 0)) : (jsx(PriceLabel$1, { invertDirection: invertPriceDirection, finalPrice: price.finalPrice, originalPrice: price.originalPrice, finalPriceStyled: false, color: price.color, size: ComponentSize.Medium, testId: "volume-discount", clubStyle: showClubPriceLabel, finalPriceStyle: showClubPriceLabel
|
|
7511
7525
|
? !isMobile
|
|
7512
7526
|
? { fontSize: '16px', fontWeight: 700 }
|
|
7513
7527
|
: { fontSize: '12px', fontWeight: 700 }
|
|
@@ -7515,14 +7529,16 @@ var ProductItemMobile = function (_a) {
|
|
|
7515
7529
|
}
|
|
7516
7530
|
};
|
|
7517
7531
|
var RatingDisplay = function () {
|
|
7518
|
-
if (isRatingLoading)
|
|
7532
|
+
if (isRatingLoading) {
|
|
7519
7533
|
return jsx(SkeletonBox, { height: "20px", width: "80px" }, void 0);
|
|
7520
|
-
|
|
7534
|
+
}
|
|
7535
|
+
if (!rating.reviews && !rating.rating) {
|
|
7521
7536
|
return jsx(Fragment, {}, void 0);
|
|
7522
|
-
|
|
7537
|
+
}
|
|
7538
|
+
return (jsx(Rating, { size: size === ComponentSize.Large ? ComponentSize.Small : ComponentSize.XSmall, rating: rating.rating, reviews: rating === null || rating === void 0 ? void 0 : rating.reviews, reviewsText: "", wrapWithParenthesis: true }, void 0));
|
|
7523
7539
|
};
|
|
7524
|
-
var
|
|
7525
|
-
var
|
|
7540
|
+
var _4 = useState((_b = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.isLiked) !== null && _b !== void 0 ? _b : false), isLiked = _4[0], setIsLiked = _4[1];
|
|
7541
|
+
var _5 = useState((_c = likeBtn === null || likeBtn === void 0 ? void 0 : likeBtn.likes) !== null && _c !== void 0 ? _c : 0), likesCount = _5[0], setLikesCount = _5[1];
|
|
7526
7542
|
var handleLikeClick = function (e) {
|
|
7527
7543
|
e.stopPropagation();
|
|
7528
7544
|
if (isLiked) {
|
|
@@ -7539,9 +7555,9 @@ var ProductItemMobile = function (_a) {
|
|
|
7539
7555
|
active: (_f = (_e = (_d = likeBtn.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.active) !== null && _f !== void 0 ? _f : theme.colors.shades.white.color,
|
|
7540
7556
|
hover: (_m = (_j = (_h = (_g = likeBtn.colors) === null || _g === void 0 ? void 0 : _g.background) === null || _h === void 0 ? void 0 : _h.hover) !== null && _j !== void 0 ? _j : (_l = (_k = likeBtn.colors) === null || _k === void 0 ? void 0 : _k.background) === null || _l === void 0 ? void 0 : _l.active) !== null && _m !== void 0 ? _m : theme.colors.shades.white.color,
|
|
7541
7557
|
},
|
|
7542
|
-
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$17, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7558
|
+
} }, void 0)), !!topTag || !!bottomTag ? (jsxs(ImageContainer$6, __assign$1({ width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, "data-testid": "tags-image-container" }, { children: [jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.width : '100%', height: hasDefaultSize ? styles === null || styles === void 0 ? void 0 : styles.height : '100%', loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0), jsx(TopTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: topTag }), void 0), jsx(BottomTagContainer$9, __assign$1({ style: { width: colorPicker.display ? '100%' : 'inherit' } }, { children: bottomTag }), void 0)] }), void 0)) : (jsx(Image$3, { src: image.src, srcSet: getSrcSet(image.src, 180, 360, 720, 960), alt: image.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height, loading: isOnViewport ? 'eager' : 'lazy', decoding: isOnViewport ? 'sync' : 'async', borderRadius: STYLES_BY_THEME[theme.name].image.borderRadius }, void 0)), imageHover ? (jsx(ImageHoverContainer$3, { className: "hover__image", src: imageHover.src, srcSet: getSrcSet(imageHover.src, 180, 360, 720, 960), loading: "lazy", decoding: "async", alt: imageHover.alt, width: styles === null || styles === void 0 ? void 0 : styles.width, height: styles === null || styles === void 0 ? void 0 : styles.height }, void 0)) : null] }), void 0), colorPicker.display && colorPicker.position === 'top' && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), colorPicker.component] }, void 0)), ratingOnTop && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsx(RatingDisplay, {}, void 0)] }, void 0)), jsxs(Container$17, __assign$1({ as: url ? 'a' : 'div', href: url, rel: noFollow ? 'nofollow' : '', onClick: onClick, className: "textContainer", style: { alignItems: showClubPriceLabel ? 'flex-start' : 'center' } }, { children: [jsx(Spacing, { size: space }, void 0), jsx(Title$7, __assign$1({ theme: theme, align: showClubPriceLabel ? 'left' : alignName, "data-testid": "product-card-title" }, { children: title }), void 0), jsx(Spacing, { size: space }, void 0), showDivider && (jsxs(Fragment, { children: [jsx(Divider, { theme: theme }, void 0), jsx(Spacing, { size: space }, void 0)] }, void 0)), hasStrength && hasStrength.strength !== -1 && (jsxs(Fragment, { children: [jsx(StrengthBars, { barsFilled: hasStrength.strength, supportText: hasStrength.description }, void 0), jsx(Spacing, { size: 10 }, void 0)] }, void 0)), priceAtBottom && !ratingOnTop ? (jsxs(Fragment, { children: [jsx(RatingDisplay, {}, void 0), jsx(Spacing, { size: space }, void 0), jsxs(MarginTopContainer$1, __assign$1({ style: { marginTop: (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) ? 0 : 8 } }, { children: [priceLoading ? jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0) : PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5)] }), void 0)] }, void 0)) : (jsxs(Fragment, { children: [priceLoading ? (jsx(SkeletonBox, { height: "20px", width: "140px" }, void 0)) : priceAndReviewInOneLine && !ratingOnTop ? (jsxs(OneLineInfoWrapper, { children: [PriceLabelDisplay(), jsx(RatingDisplay, {}, void 0)] }, void 0)) : (jsxs(Fragment, { children: [!(clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubMember) && PriceLabelDisplay(), (clubOffer === null || clubOffer === void 0 ? void 0 : clubOffer.isClubOffer) && PriceLabelDisplay(5), jsx(BuyNowPayLater, { displayBNPL: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.displayBNPL, installments: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installments) || 0, installmentPrice: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.installmentPrice) || '', iconFolder: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconFolder, iconName: (isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconName) || '', showLogo: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.showLogo, iconColor: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.iconColor, fontSize: isBNPL === null || isBNPL === void 0 ? void 0 : isBNPL.fontSize }, void 0)] }, void 0)), showClubPriceLabel && jsx(ClubPriceLabel, { clubPrice: clubPrice }, void 0), discountTagLoading ? (jsx(SkeletonBox, { height: "22px", width: "75px" }, void 0)) : (showDiscountPercentageTag && (jsx(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discountTag && (jsx(DiscountTag$4, __assign$1({}, discountTag, { size: ComponentSize.Medium, style: {
|
|
7543
7559
|
letterSpacing: '-0.05rem',
|
|
7544
|
-
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7560
|
+
} }), void 0)) }), void 0))), jsx(Spacing, { size: space }, void 0), !ratingOnTop && !priceAndReviewInOneLine && jsx(RatingDisplay, {}, void 0)] }, void 0)), !!onClickBottomButton && (jsxs(Fragment, { children: [jsx(Spacing, { size: space }, void 0), jsx(Spacing, { size: space }, void 0), jsxs(IconButton, __assign$1({ size: ComponentSize.Small, width: "100%", onClick: function (e) {
|
|
7545
7561
|
e.preventDefault();
|
|
7546
7562
|
e.stopPropagation();
|
|
7547
7563
|
onClickBottomButton === null || onClickBottomButton === void 0 ? void 0 : onClickBottomButton(e);
|
|
@@ -7983,23 +7999,45 @@ var ButtonSecondary = function (props) {
|
|
|
7983
7999
|
} }), void 0));
|
|
7984
8000
|
};
|
|
7985
8001
|
|
|
7986
|
-
|
|
7987
|
-
var
|
|
7988
|
-
|
|
7989
|
-
|
|
7990
|
-
|
|
7991
|
-
|
|
8002
|
+
function getStyle(theme) {
|
|
8003
|
+
var _a;
|
|
8004
|
+
var outlineStyle = (_a = theme.component.button) === null || _a === void 0 ? void 0 : _a.outline;
|
|
8005
|
+
if (outlineStyle) {
|
|
8006
|
+
return {
|
|
8007
|
+
backgroundColor: outlineStyle.active.backgroundColor,
|
|
8008
|
+
color: outlineStyle.active.color,
|
|
8009
|
+
border: "2px solid ".concat(outlineStyle.active.color),
|
|
7992
8010
|
fontFamily: 'inherit',
|
|
7993
8011
|
'&:hover': {
|
|
7994
|
-
backgroundColor:
|
|
7995
|
-
color:
|
|
8012
|
+
backgroundColor: outlineStyle.hover.backgroundColor,
|
|
8013
|
+
color: outlineStyle.hover.color,
|
|
7996
8014
|
},
|
|
7997
8015
|
'&:disabled': {
|
|
7998
8016
|
backgroundColor: theme.colors.background.disabled,
|
|
7999
8017
|
color: theme.colors.text.disabled,
|
|
8000
8018
|
border: 'none',
|
|
8001
8019
|
},
|
|
8002
|
-
}
|
|
8020
|
+
};
|
|
8021
|
+
}
|
|
8022
|
+
return {
|
|
8023
|
+
backgroundColor: theme.component.button.secondary.active.color,
|
|
8024
|
+
color: theme.component.button.secondary.active.backgroundColor,
|
|
8025
|
+
border: "1px solid ".concat(theme.component.button.secondary.active.backgroundColor),
|
|
8026
|
+
fontFamily: 'inherit',
|
|
8027
|
+
'&:hover': {
|
|
8028
|
+
backgroundColor: theme.component.button.secondary.active.backgroundColor,
|
|
8029
|
+
color: theme.component.button.secondary.active.color,
|
|
8030
|
+
},
|
|
8031
|
+
'&:disabled': {
|
|
8032
|
+
backgroundColor: theme.colors.background.disabled,
|
|
8033
|
+
color: theme.colors.text.disabled,
|
|
8034
|
+
border: 'none',
|
|
8035
|
+
},
|
|
8036
|
+
};
|
|
8037
|
+
}
|
|
8038
|
+
var ButtonSecondaryOutline = function (props) {
|
|
8039
|
+
var theme = useTheme();
|
|
8040
|
+
return jsx(BaseCTA, __assign$1({}, props, { css: getStyle(theme) }), void 0);
|
|
8003
8041
|
};
|
|
8004
8042
|
|
|
8005
8043
|
var Container$13 = newStyled.div(templateObject_1$1y || (templateObject_1$1y = __makeTemplateObject(["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"], ["\n padding: 0.625rem 1.25rem;\n background-color: ", ";\n border-radius: 0.313rem;\n display: flex;\n margin-bottom: 1.25rem;\n"])), function (props) { return props.color; });
|
|
@@ -14973,7 +15011,9 @@ var transformStyle = function (_a) {
|
|
|
14973
15011
|
return opened
|
|
14974
15012
|
? css(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(0)' : 'translate(-50%, -50%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%') : css(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n transform: ", ";\n top: ", ";\n "], ["\n transform: ", ";\n top: ", ";\n "])), maxFullScreen ? 'translateY(10%)' : 'translate(-50%, -40%)', maxFullScreen ? '0' : initialTop ? initialTop : '50%');
|
|
14975
15013
|
};
|
|
14976
|
-
var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
15014
|
+
var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __makeTemplateObject(["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"], ["\n border: 1px solid var(--colors-pallete-primary-color);\n border-radius: ", ";\n padding: ", ";\n position: fixed;\n left: ", ";\n top: ", ";\n z-index: var(--zIndex-modal);\n background-color: var(--colors-background-color);\n transition: transform 0.3s, opacity 0.3s;\n overflow-y: auto;\n max-width: ", ";\n max-height: ", ";\n width: ", ";\n height: ", ";\n ", "\n ", "\n ", "\n"])), function (props) {
|
|
15015
|
+
return "".concat(props.maxFullScreen || props.countryRedirModalWithCoupon ? '0' : 'var(--radius-regular)');
|
|
15016
|
+
}, function (props) { return "".concat(props.padding ? props.padding : '20px 10px'); }, function (props) { return "".concat(props.maxFullScreen ? '0' : '50%'); }, function (props) { return (props.maxFullScreen ? '0' : props.initialTop ? props.initialTop : '50%'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vw'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : '90vh'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'auto'); }, function (props) { return "".concat(props.maxFullScreen ? '100%' : 'inherit'); }, function (_a) {
|
|
14977
15017
|
var width = _a.width;
|
|
14978
15018
|
return width
|
|
14979
15019
|
? css(templateObject_5$x || (templateObject_5$x = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), width) : mediaQueries({
|
|
@@ -14982,15 +15022,15 @@ var Container$T = newStyled.div(templateObject_6$s || (templateObject_6$s = __ma
|
|
|
14982
15022
|
}, visibleStyle, transformStyle);
|
|
14983
15023
|
var Overlay = newStyled.div(templateObject_7$p || (templateObject_7$p = __makeTemplateObject(["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"], ["\n position: fixed;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.75);\n z-index: var(--zIndex-overlay);\n transition: opacity 0.3s;\n ", "\n"])), visibleStyle);
|
|
14984
15024
|
var Modal = function (_a) {
|
|
14985
|
-
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d;
|
|
14986
|
-
var
|
|
15025
|
+
var id = _a.id, children = _a.children, _b = _a.dismissable, dismissable = _b === void 0 ? true : _b, _c = _a.maxFullScreen, maxFullScreen = _c === void 0 ? false : _c, padding = _a.padding, onClickOverlayHandler = _a.onClickOverlayHandler, width = _a.width, _d = _a.initialTop, initialTop = _d === void 0 ? '50%' : _d, _e = _a.countryRedirModalWithCoupon, countryRedirModalWithCoupon = _e === void 0 ? false : _e;
|
|
15026
|
+
var _f = useModal(id), opened = _f.opened, close = _f.close;
|
|
14987
15027
|
var onDismiss = function () {
|
|
14988
15028
|
if (!dismissable) {
|
|
14989
15029
|
return;
|
|
14990
15030
|
}
|
|
14991
15031
|
close();
|
|
14992
15032
|
};
|
|
14993
|
-
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$T, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
15033
|
+
return (jsxs(Portal, __assign$1({ id: id }, { children: [jsx(Container$T, __assign$1({ opened: opened, maxFullScreen: maxFullScreen, padding: padding, width: width, initialTop: initialTop, countryRedirModalWithCoupon: countryRedirModalWithCoupon }, { children: children }), void 0), jsx(Overlay, { "data-testid": "modal-overlay", opened: opened, onClick: function () {
|
|
14994
15034
|
onClickOverlayHandler === null || onClickOverlayHandler === void 0 ? void 0 : onClickOverlayHandler();
|
|
14995
15035
|
onDismiss();
|
|
14996
15036
|
} }, void 0)] }), void 0));
|
|
@@ -19954,12 +19994,22 @@ var Tag = function (_a) {
|
|
|
19954
19994
|
};
|
|
19955
19995
|
var templateObject_1$K;
|
|
19956
19996
|
|
|
19957
|
-
var
|
|
19997
|
+
var getBorderRadius = function (size, styledBorder, noBorderRadius) {
|
|
19998
|
+
var styledBorderValue = '20px';
|
|
19999
|
+
var defaultValue = size === ComponentSize.Small ? '0 0.125em 0.125rem 0' : '0 0.25rem 0.25rem 0';
|
|
20000
|
+
if (noBorderRadius)
|
|
20001
|
+
return '0px';
|
|
20002
|
+
if (styledBorder)
|
|
20003
|
+
return styledBorderValue;
|
|
20004
|
+
return defaultValue;
|
|
20005
|
+
};
|
|
20006
|
+
var getStylesBySize$6 = function (size, styledBorder, noBorderRadius) {
|
|
20007
|
+
var borderRadius = getBorderRadius(size, styledBorder, noBorderRadius);
|
|
19958
20008
|
switch (size) {
|
|
19959
20009
|
case ComponentSize.Large:
|
|
19960
20010
|
return {
|
|
19961
20011
|
padding: '0.125rem 1.25rem 0 1.25rem',
|
|
19962
|
-
borderRadius:
|
|
20012
|
+
borderRadius: borderRadius,
|
|
19963
20013
|
fontSize: '0.875rem',
|
|
19964
20014
|
lineHeight: '0.875rem',
|
|
19965
20015
|
height: '1.5rem',
|
|
@@ -19967,7 +20017,7 @@ var getStylesBySize$6 = function (size, styledBorder) {
|
|
|
19967
20017
|
case ComponentSize.Medium:
|
|
19968
20018
|
return {
|
|
19969
20019
|
padding: '0.063rem 0.625rem',
|
|
19970
|
-
borderRadius:
|
|
20020
|
+
borderRadius: borderRadius,
|
|
19971
20021
|
fontSize: '0.625rem',
|
|
19972
20022
|
lineHeight: '0.625rem',
|
|
19973
20023
|
height: '1rem',
|
|
@@ -19975,7 +20025,7 @@ var getStylesBySize$6 = function (size, styledBorder) {
|
|
|
19975
20025
|
case ComponentSize.Small:
|
|
19976
20026
|
return {
|
|
19977
20027
|
padding: '0.125rem 0.625rem',
|
|
19978
|
-
borderRadius:
|
|
20028
|
+
borderRadius: borderRadius,
|
|
19979
20029
|
fontSize: '0.5rem',
|
|
19980
20030
|
lineHeight: '0.75rem',
|
|
19981
20031
|
height: '0.875rem',
|
|
@@ -19983,10 +20033,10 @@ var getStylesBySize$6 = function (size, styledBorder) {
|
|
|
19983
20033
|
}
|
|
19984
20034
|
};
|
|
19985
20035
|
var CategoryTag = function (_a) {
|
|
19986
|
-
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor;
|
|
20036
|
+
var text = _a.text, size = _a.size, className = _a.className, _b = _a.styledBorder, styledBorder = _b === void 0 ? false : _b, backgroundColor = _a.backgroundColor, _c = _a.hasMargin, hasMargin = _c === void 0 ? false : _c, _d = _a.noBorderRadius, noBorderRadius = _d === void 0 ? false : _d;
|
|
19987
20037
|
var theme = useTheme();
|
|
19988
|
-
var stylesBySize = getStylesBySize$6(size, styledBorder);
|
|
19989
|
-
return (jsx(Tag, { css: __assign$1({ backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
20038
|
+
var stylesBySize = getStylesBySize$6(size, styledBorder, noBorderRadius);
|
|
20039
|
+
return (jsx(Tag, { css: __assign$1({ margin: hasMargin ? '0.5rem' : 'unset', backgroundColor: backgroundColor || theme.colors.shades.white.color, fontWeight: 600, color: theme.colors.shades['700'].color }, stylesBySize), text: text, className: className }, void 0));
|
|
19990
20040
|
};
|
|
19991
20041
|
|
|
19992
20042
|
var getStylesBySize$5 = function (size) {
|