@trafilea/afrodita-components 6.9.0 → 6.10.0
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 +55 -19
- package/build/index.esm.js +336 -186
- package/build/index.esm.js.map +1 -1
- package/build/index.js +337 -186
- package/build/index.js.map +1 -1
- package/build/theme/revel.theme.d.ts +4 -0
- package/build/theme/shapermint.theme.d.ts +4 -0
- package/build/theme/thebodcon.theme.d.ts +4 -0
- package/build/theme/thespadr.theme.d.ts +4 -0
- package/build/theme/truekind.theme.d.ts +4 -0
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3067,11 +3067,13 @@ var inline = function (text) {
|
|
|
3067
3067
|
};
|
|
3068
3068
|
|
|
3069
3069
|
var ThemeProvider = function (_a) {
|
|
3070
|
-
var
|
|
3070
|
+
var _b;
|
|
3071
|
+
var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
|
|
3071
3072
|
//TODO Analyze why we are doing this and remove
|
|
3072
|
-
var
|
|
3073
|
-
var
|
|
3074
|
-
|
|
3073
|
+
var theme = useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
|
|
3074
|
+
var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: theme.config ? "".concat(theme.config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
|
|
3075
|
+
var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
|
|
3076
|
+
return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
|
|
3075
3077
|
};
|
|
3076
3078
|
var useTheme = function () { return useTheme$1(); };
|
|
3077
3079
|
var DefaultContainer = function (props) { return jsx$1("div", __assign$1({}, props), void 0); };
|
|
@@ -3125,7 +3127,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3127
|
desktop: 1280,
|
|
3126
3128
|
};
|
|
3127
3129
|
|
|
3128
|
-
var Container$
|
|
3130
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3129
3131
|
var height = _a.height;
|
|
3130
3132
|
return (height ? height : '1.5em');
|
|
3131
3133
|
}, function (_a) {
|
|
@@ -3150,11 +3152,11 @@ var Container$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3150
3152
|
var SkeletonBox = function (_a) {
|
|
3151
3153
|
var width = _a.width, height = _a.height;
|
|
3152
3154
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3155
|
+
return jsx$1(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3156
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3157
|
+
var templateObject_1$1X;
|
|
3156
3158
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3159
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3158
3160
|
var width = _a.width;
|
|
3159
3161
|
return width;
|
|
3160
3162
|
}, function (_a) {
|
|
@@ -3170,7 +3172,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V
|
|
|
3170
3172
|
var opacity = _a.opacity;
|
|
3171
3173
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3174
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3175
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3174
3176
|
var width = _a.width;
|
|
3175
3177
|
return width;
|
|
3176
3178
|
}, function (_a) {
|
|
@@ -3183,7 +3185,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$
|
|
|
3183
3185
|
var opacity = _a.opacity;
|
|
3184
3186
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3187
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3188
|
+
var templateObject_1$1W, templateObject_2$1h;
|
|
3187
3189
|
|
|
3188
3190
|
/* eslint-disable no-undef */
|
|
3189
3191
|
var cache = new Map();
|
|
@@ -3298,7 +3300,7 @@ var UnmemoIconFromExtSource = function (_a) {
|
|
|
3298
3300
|
if (!fill && !svgProps) {
|
|
3299
3301
|
return jsx$1(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3300
3302
|
}
|
|
3301
|
-
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", {
|
|
3303
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3302
3304
|
};
|
|
3303
3305
|
var IconFromExtSource = React__default.memo(UnmemoIconFromExtSource);
|
|
3304
3306
|
|
|
@@ -3312,12 +3314,62 @@ var UnmemoIcon = function (_a) {
|
|
|
3312
3314
|
var svgSplit = name.split('/');
|
|
3313
3315
|
var svgId = svgSplit[svgSplit.length - 1];
|
|
3314
3316
|
if (assets.isSameOriginIcons) {
|
|
3315
|
-
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", {
|
|
3317
|
+
return (jsxs$1(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsx$1("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsx$1("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3316
3318
|
}
|
|
3317
3319
|
return (jsx$1(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3318
3320
|
};
|
|
3319
3321
|
var Icon$1 = React__default.memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3320
3322
|
|
|
3323
|
+
var getValidSize = function (size) {
|
|
3324
|
+
if (!size) {
|
|
3325
|
+
return 'auto';
|
|
3326
|
+
}
|
|
3327
|
+
if (typeof size === 'number') {
|
|
3328
|
+
return String(size);
|
|
3329
|
+
}
|
|
3330
|
+
if (size.endsWith('px')) {
|
|
3331
|
+
return size.replace('px', '');
|
|
3332
|
+
}
|
|
3333
|
+
if (Number(size))
|
|
3334
|
+
return String(Number(size));
|
|
3335
|
+
return 'auto';
|
|
3336
|
+
};
|
|
3337
|
+
|
|
3338
|
+
var DEFAULT_QUALITY = 100;
|
|
3339
|
+
var buildImageUrl = function (_a) {
|
|
3340
|
+
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3341
|
+
try {
|
|
3342
|
+
new URL(src);
|
|
3343
|
+
var baseUrl = new URL(src);
|
|
3344
|
+
if (!baseUrl.host) {
|
|
3345
|
+
return src;
|
|
3346
|
+
}
|
|
3347
|
+
if (cdn.includes(baseUrl.host)) {
|
|
3348
|
+
return src;
|
|
3349
|
+
}
|
|
3350
|
+
var url = encodeURIComponent(src);
|
|
3351
|
+
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3352
|
+
var width = getValidSize(widthString);
|
|
3353
|
+
var height = getValidSize(heightString);
|
|
3354
|
+
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?width=").concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url);
|
|
3355
|
+
}
|
|
3356
|
+
catch (e) {
|
|
3357
|
+
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3358
|
+
return src;
|
|
3359
|
+
}
|
|
3360
|
+
};
|
|
3361
|
+
|
|
3362
|
+
var Img = newStyled.img(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject(["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"], ["\n height: ", ";\n width: ", ";\n border-radius: ", ";\n object-fit: ", ";\n object-position: ", ";\n"])), function (props) { return props.height; }, function (props) { return props.width; }, function (props) { return props.borderRadius; }, function (props) { return props.objectFit; }, function (props) { return props.objectPosition; });
|
|
3363
|
+
var Image$3 = function (_a) {
|
|
3364
|
+
var src = _a.src, srcSet = _a.srcSet, _b = _a.sizes, sizes = _b === void 0 ? '100vw' : _b, _c = _a.loading, loading = _c === void 0 ? 'lazy' : _c, alt = _a.alt, height = _a.height, width = _a.width, borderRadius = _a.borderRadius, objectFit = _a.objectFit, objectPosition = _a.objectPosition, quality = _a.quality, className = _a.className;
|
|
3365
|
+
var config = useTheme().config;
|
|
3366
|
+
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3367
|
+
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3368
|
+
: src;
|
|
3369
|
+
return (jsx$1(Img, { src: source, srcSet: srcSet, sizes: sizes, loading: loading, alt: alt, height: height, width: width, borderRadius: borderRadius, objectFit: objectFit, objectPosition: objectPosition, className: className }, void 0));
|
|
3370
|
+
};
|
|
3371
|
+
var templateObject_1$1V;
|
|
3372
|
+
|
|
3321
3373
|
var Add = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3322
3374
|
|
|
3323
3375
|
var Check$2 = function (props) { return jsx$1(Icon$1, __assign$1({}, props, { name: "actions/check" }), void 0); };
|
|
@@ -4102,17 +4154,17 @@ function jsxs(type, props, key) {
|
|
|
4102
4154
|
// `variants` styles that are consistent through all themes.
|
|
4103
4155
|
var TAGS = {
|
|
4104
4156
|
hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4105
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4106
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4107
|
-
display1: newStyled.h1(templateObject_4$
|
|
4108
|
-
display2: newStyled.h2(templateObject_5$
|
|
4109
|
-
display3: newStyled.h3(templateObject_6$
|
|
4110
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4111
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4112
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4113
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4114
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4115
|
-
heading6: newStyled.h6(templateObject_12$
|
|
4157
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4158
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4159
|
+
display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
|
|
4160
|
+
display2: newStyled.h2(templateObject_5$v || (templateObject_5$v = __makeTemplateObject([""], [""]))),
|
|
4161
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4162
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4163
|
+
heading2: newStyled.h2(templateObject_8$f || (templateObject_8$f = __makeTemplateObject([""], [""]))),
|
|
4164
|
+
heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
|
|
4165
|
+
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4166
|
+
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4167
|
+
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4116
4168
|
heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
|
|
4117
4169
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4118
4170
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4237,17 +4289,17 @@ var DEFAULTS = {
|
|
|
4237
4289
|
size: 'regular',
|
|
4238
4290
|
},
|
|
4239
4291
|
};
|
|
4240
|
-
var templateObject_1$1U, templateObject_2$
|
|
4241
|
-
|
|
4242
|
-
var Container$
|
|
4243
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4244
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4245
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4246
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4247
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4292
|
+
var templateObject_1$1U, templateObject_2$1g, templateObject_3$Z, templateObject_4$K, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$f, templateObject_9$8, templateObject_10$7, templateObject_11$5, templateObject_12$4, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4293
|
+
|
|
4294
|
+
var Container$1b = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __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"])));
|
|
4295
|
+
var Card$3 = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __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"])));
|
|
4296
|
+
var Tag$2 = newStyled.div(templateObject_3$Y || (templateObject_3$Y = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4297
|
+
var Label$5 = newStyled.div(templateObject_4$J || (templateObject_4$J = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
4298
|
+
var Check$1 = newStyled.div(templateObject_5$u || (templateObject_5$u = __makeTemplateObject(["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"], ["\n position: absolute;\n width: 20px;\n height: 20px;\n background-color: var(--color);\n border-radius: 50%;\n left: 100%;\n top: 50%;\n transform: translate(6px, -50%) scale(0.5);\n opacity: 0;\n transition: opacity 0.3s, transform 0.3s;\n\n &[data-visible='true'] {\n transform: translate(6px, -50%) scale(1);\n opacity: 1;\n }\n"])));
|
|
4299
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4248
4300
|
var PackSelectorV2 = function (_a) {
|
|
4249
4301
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4250
|
-
return (jsx$1(Container$
|
|
4302
|
+
return (jsx$1(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4251
4303
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4252
4304
|
}) }), void 0));
|
|
4253
4305
|
};
|
|
@@ -4269,27 +4321,27 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4321
|
currency: currencyCode || 'USD',
|
|
4270
4322
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4271
4323
|
};
|
|
4272
|
-
var templateObject_1$1T, templateObject_2$
|
|
4324
|
+
var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
|
|
4273
4325
|
|
|
4274
|
-
var Container$
|
|
4275
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4326
|
+
var Container$1a = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4327
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4276
4328
|
var DropList = function (_a) {
|
|
4277
4329
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4278
|
-
return (jsx$1(Container$
|
|
4330
|
+
return (jsx$1(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4279
4331
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4280
4332
|
}) }, void 0));
|
|
4281
4333
|
};
|
|
4282
|
-
var templateObject_1$1S, templateObject_2$
|
|
4334
|
+
var templateObject_1$1S, templateObject_2$1e;
|
|
4283
4335
|
|
|
4284
4336
|
var DROPS_TOTAL = 5;
|
|
4285
|
-
var Container$
|
|
4286
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4287
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4337
|
+
var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4338
|
+
var Title$8 = newStyled.p(templateObject_2$1d || (templateObject_2$1d = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4339
|
+
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4288
4340
|
var AbsorbencyLevel = function (_a) {
|
|
4289
4341
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4290
|
-
return (jsxs$1(Container$
|
|
4342
|
+
return (jsxs$1(Container$19, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4291
4343
|
};
|
|
4292
|
-
var templateObject_1$1R, templateObject_2$
|
|
4344
|
+
var templateObject_1$1R, templateObject_2$1d, templateObject_3$X;
|
|
4293
4345
|
|
|
4294
4346
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4295
4347
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4391,7 +4443,7 @@ var Accordion$1 = function (_a) {
|
|
|
4391
4443
|
};
|
|
4392
4444
|
var templateObject_1$1Q;
|
|
4393
4445
|
|
|
4394
|
-
var Container$
|
|
4446
|
+
var Container$18 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4395
4447
|
var AccordionOptions = function (_a) {
|
|
4396
4448
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4397
4449
|
var _b = useState({
|
|
@@ -4404,7 +4456,7 @@ var AccordionOptions = function (_a) {
|
|
|
4404
4456
|
}
|
|
4405
4457
|
return false;
|
|
4406
4458
|
};
|
|
4407
|
-
return (jsx$1(Container$
|
|
4459
|
+
return (jsx$1(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4408
4460
|
var forceOpenValue = getForceOpen(index);
|
|
4409
4461
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4410
4462
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4578,13 +4630,13 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4578
4630
|
});
|
|
4579
4631
|
|
|
4580
4632
|
var ErrorText = newStyled.h3(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4581
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4633
|
+
var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4582
4634
|
var Error$1 = function (_a) {
|
|
4583
4635
|
var error = _a.error;
|
|
4584
4636
|
var theme = useTheme();
|
|
4585
4637
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4586
4638
|
};
|
|
4587
|
-
var templateObject_1$1O, templateObject_2$
|
|
4639
|
+
var templateObject_1$1O, templateObject_2$1c;
|
|
4588
4640
|
|
|
4589
4641
|
var BaseSelectButton = function (_a) {
|
|
4590
4642
|
var children = _a.children, as = _a.as;
|
|
@@ -4837,7 +4889,7 @@ var CustomCheckboxStyles = {
|
|
|
4837
4889
|
},
|
|
4838
4890
|
};
|
|
4839
4891
|
|
|
4840
|
-
var Container$
|
|
4892
|
+
var Container$17 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: fit-content;\n user-select: none;\n position: relative;\n"])));
|
|
4841
4893
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4842
4894
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4843
4895
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4848,7 +4900,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4848
4900
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4849
4901
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4850
4902
|
]; });
|
|
4851
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4903
|
+
var Input$5 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4852
4904
|
var disabled = _a.disabled;
|
|
4853
4905
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4854
4906
|
});
|
|
@@ -4862,9 +4914,9 @@ var Checkbox = function (_a) {
|
|
|
4862
4914
|
}
|
|
4863
4915
|
onChange(e.target.checked);
|
|
4864
4916
|
};
|
|
4865
|
-
return (jsxs$1(Container$
|
|
4917
|
+
return (jsxs$1(Container$17, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4866
4918
|
};
|
|
4867
|
-
var templateObject_1$1L, templateObject_2$
|
|
4919
|
+
var templateObject_1$1L, templateObject_2$1b;
|
|
4868
4920
|
|
|
4869
4921
|
var CustomOption = newStyled.li(function (_a) {
|
|
4870
4922
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4913,8 +4965,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4913
4965
|
Option: BaseDropdownOption,
|
|
4914
4966
|
});
|
|
4915
4967
|
|
|
4916
|
-
var Container$
|
|
4917
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4968
|
+
var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4969
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4918
4970
|
function SimpleDropdown(_a) {
|
|
4919
4971
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4920
4972
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4943,10 +4995,10 @@ function SimpleDropdown(_a) {
|
|
|
4943
4995
|
}
|
|
4944
4996
|
setSelectedValue(value);
|
|
4945
4997
|
}, [value, options, initialValue]);
|
|
4946
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4998
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
|
|
4947
4999
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4948
5000
|
}
|
|
4949
|
-
var templateObject_1$1K, templateObject_2$
|
|
5001
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
4950
5002
|
|
|
4951
5003
|
/* base styles & size variants */
|
|
4952
5004
|
var CustomRadioStyles$2 = {
|
|
@@ -5012,8 +5064,8 @@ var ContainerStyles$2 = {
|
|
|
5012
5064
|
};
|
|
5013
5065
|
|
|
5014
5066
|
var Wrapper$7 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5015
|
-
var Container$
|
|
5016
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5067
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5068
|
+
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5017
5069
|
var disabled = _a.disabled;
|
|
5018
5070
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5019
5071
|
});
|
|
@@ -5021,14 +5073,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5021
5073
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5022
5074
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5023
5075
|
]; });
|
|
5024
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5076
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5025
5077
|
var theme = _a.theme;
|
|
5026
5078
|
return theme.component.radio.textSize;
|
|
5027
5079
|
}, function (_a) {
|
|
5028
5080
|
var theme = _a.theme;
|
|
5029
5081
|
return theme.component.radio.lineHeight;
|
|
5030
5082
|
});
|
|
5031
|
-
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$
|
|
5083
|
+
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$I || (templateObject_4$I = __makeTemplateObject(["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n font-weight: 600 !important;\n line-height: ", " !important;\n"])), function (_a) {
|
|
5032
5084
|
var theme = _a.theme;
|
|
5033
5085
|
return theme.component.radio.textSize;
|
|
5034
5086
|
}, function (_a) {
|
|
@@ -5042,9 +5094,9 @@ var RadioInput = function (_a) {
|
|
|
5042
5094
|
var value = event.currentTarget.value;
|
|
5043
5095
|
onChange({ value: value, label: label });
|
|
5044
5096
|
};
|
|
5045
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5097
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5046
5098
|
};
|
|
5047
|
-
var templateObject_1$1J, templateObject_2$
|
|
5099
|
+
var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I;
|
|
5048
5100
|
|
|
5049
5101
|
var getWrapperFlexDirection = function (position) {
|
|
5050
5102
|
switch (position) {
|
|
@@ -5105,7 +5157,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5105
5157
|
var disableHover = _a.disableHover;
|
|
5106
5158
|
return (disableHover ? 0 : 1);
|
|
5107
5159
|
});
|
|
5108
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5160
|
+
var TooltipContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n margin-left: ", ";\n margin-right: ", ";\n margin-top: ", ";\n margin-bottom: ", ";\n max-width: ", ";\n transition: opacity 0.2s ease;\n userselect: none;\n opacity: 0;\n visibility: hidden;\n\n ", "\n"])), function (_a) {
|
|
5109
5161
|
var position = _a.position;
|
|
5110
5162
|
return getContainerFlexDirection(position);
|
|
5111
5163
|
}, function (_a) {
|
|
@@ -5133,25 +5185,25 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5133
5185
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5134
5186
|
return actual === expected ? margin : '0';
|
|
5135
5187
|
};
|
|
5136
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5188
|
+
var ContentWrapper = newStyled.div(templateObject_3$V || (templateObject_3$V = __makeTemplateObject(["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"], ["\n border: 0.063rem solid ", ";\n padding: 0.563rem 0.75rem;\n border-radius: 0.5rem;\n background-color: ", ";\n z-index: 999;\n position: relative;\n box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);\n z-index: 1;\n"])), function (_a) {
|
|
5137
5189
|
var borderColor = _a.borderColor;
|
|
5138
5190
|
return borderColor;
|
|
5139
5191
|
}, function (_a) {
|
|
5140
5192
|
var backgroundColor = _a.backgroundColor;
|
|
5141
5193
|
return backgroundColor;
|
|
5142
5194
|
});
|
|
5143
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5195
|
+
var TooltipText = newStyled.div(templateObject_4$H || (templateObject_4$H = __makeTemplateObject(["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"], ["\n font-style: normal;\n font-weight: normal;\n font-size: 0.875rem;\n line-height: 1.125rem;\n margin: 0;\n text-align: center;\n color: ", ";\n"])), function (_a) {
|
|
5144
5196
|
var color = _a.color;
|
|
5145
5197
|
return color;
|
|
5146
5198
|
});
|
|
5147
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5148
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5199
|
+
var TopSection = newStyled.div(templateObject_5$t || (templateObject_5$t = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 0.688rem;\n"])));
|
|
5200
|
+
var Title$7 = newStyled.h1(templateObject_6$o || (templateObject_6$o = __makeTemplateObject(["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"], ["\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.375rem;\n margin: 0;\n color: ", ";\n"])), function (_a) {
|
|
5149
5201
|
var color = _a.color;
|
|
5150
5202
|
return color;
|
|
5151
5203
|
});
|
|
5152
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5153
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5154
|
-
var templateObject_1$1I, templateObject_2$
|
|
5204
|
+
var IconContainer$5 = newStyled.div(templateObject_7$h || (templateObject_7$h = __makeTemplateObject(["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"], ["\n width: 1.375rem;\n height: 1.125rem;\n margin-right: 0.563rem;\n"])));
|
|
5205
|
+
var CloseToolTip = newStyled.button(templateObject_8$e || (templateObject_8$e = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"], ["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: 0.3rem;\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])));
|
|
5206
|
+
var templateObject_1$1I, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$e;
|
|
5155
5207
|
|
|
5156
5208
|
var useOnClickOutside = function (ref, handler) {
|
|
5157
5209
|
useEffect(function () {
|
|
@@ -5294,7 +5346,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5294
5346
|
};
|
|
5295
5347
|
}
|
|
5296
5348
|
};
|
|
5297
|
-
var Container$
|
|
5349
|
+
var Container$14 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5298
5350
|
var backgroundColor = _a.backgroundColor;
|
|
5299
5351
|
return backgroundColor;
|
|
5300
5352
|
}, function (_a) {
|
|
@@ -5316,7 +5368,7 @@ var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5316
5368
|
var size = _a.size;
|
|
5317
5369
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5318
5370
|
});
|
|
5319
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5371
|
+
var H3$3 = newStyled.h3(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5320
5372
|
var textColor = _a.textColor;
|
|
5321
5373
|
return textColor;
|
|
5322
5374
|
}, function (_a) {
|
|
@@ -5331,9 +5383,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5331
5383
|
var ClubOfferTag = function (_a) {
|
|
5332
5384
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5333
5385
|
var theme = useTheme();
|
|
5334
|
-
return (jsx$1(Container$
|
|
5386
|
+
return (jsx$1(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5335
5387
|
};
|
|
5336
|
-
var templateObject_1$1H, templateObject_2$
|
|
5388
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
5337
5389
|
|
|
5338
5390
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5339
5391
|
var _a, _b, _c;
|
|
@@ -5364,7 +5416,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5364
5416
|
};
|
|
5365
5417
|
}
|
|
5366
5418
|
};
|
|
5367
|
-
var Container$
|
|
5419
|
+
var Container$13 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"], ["\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", ";\n padding: ", ";\n display: inline-flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: ", ";\n height: ", ";\n text-align: center;\n cursor: default;\n"])), function (_a) {
|
|
5368
5420
|
var backgroundColor = _a.backgroundColor;
|
|
5369
5421
|
return backgroundColor;
|
|
5370
5422
|
}, function (_a) {
|
|
@@ -5386,7 +5438,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5386
5438
|
var size = _a.size;
|
|
5387
5439
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5388
5440
|
});
|
|
5389
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5441
|
+
var H3$2 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"], ["\n color: ", ";\n font-weight: bold;\n margin: 0;\n font-size: ", ";\n line-height: ", ";\n"])), function (_a) {
|
|
5390
5442
|
var textColor = _a.textColor;
|
|
5391
5443
|
return textColor;
|
|
5392
5444
|
}, function (_a) {
|
|
@@ -5398,12 +5450,12 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5398
5450
|
var size = _a.size;
|
|
5399
5451
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5400
5452
|
});
|
|
5401
|
-
var DiscountTag = function (_a) {
|
|
5453
|
+
var DiscountTag$1 = function (_a) {
|
|
5402
5454
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5403
5455
|
var theme = useTheme();
|
|
5404
|
-
return (jsx$1(Container$
|
|
5456
|
+
return (jsx$1(Container$13, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5405
5457
|
};
|
|
5406
|
-
var templateObject_1$1G, templateObject_2$
|
|
5458
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
5407
5459
|
|
|
5408
5460
|
var getStylesBySize$b = function (size, theme) {
|
|
5409
5461
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5445,8 +5497,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5445
5497
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5446
5498
|
}
|
|
5447
5499
|
};
|
|
5448
|
-
var Container$
|
|
5449
|
-
var Price = newStyled.p(templateObject_2$
|
|
5500
|
+
var Container$12 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5501
|
+
var Price = newStyled.p(templateObject_2$15 || (templateObject_2$15 = __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) {
|
|
5450
5502
|
var weight = _a.weight;
|
|
5451
5503
|
return (weight ? weight : '400');
|
|
5452
5504
|
}, function (_a) {
|
|
@@ -5470,7 +5522,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5470
5522
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5471
5523
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5472
5524
|
});
|
|
5473
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5525
|
+
var TagContainer = newStyled.div(templateObject_3$U || (templateObject_3$U = __makeTemplateObject(["\n margin: ", ";\n display: flex;\n align-items: center;\n"], ["\n margin: ", ";\n display: flex;\n align-items: center;\n"])), function (_a) {
|
|
5474
5526
|
var _b;
|
|
5475
5527
|
var size = _a.size;
|
|
5476
5528
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5501,9 +5553,9 @@ var PriceLabel = function (_a) {
|
|
|
5501
5553
|
: ComponentSize.XSmall;
|
|
5502
5554
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5503
5555
|
};
|
|
5504
|
-
return (jsxs$1(Container$
|
|
5556
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(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$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5505
5557
|
};
|
|
5506
|
-
var templateObject_1$1F, templateObject_2$
|
|
5558
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$U;
|
|
5507
5559
|
|
|
5508
5560
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5509
5561
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5558,13 +5610,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
5558
5610
|
var savetoString = saveto.toFixed(2);
|
|
5559
5611
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5560
5612
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5561
|
-
return (jsxs$1(Container$
|
|
5613
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5562
5614
|
marginTop: '-5px',
|
|
5563
5615
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5564
5616
|
? finalPriceArray[0]
|
|
5565
5617
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5566
5618
|
marginTop: '-6px',
|
|
5567
|
-
} }, 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: {
|
|
5619
|
+
} }, 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$1, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5568
5620
|
letterSpacing: '-0.05rem',
|
|
5569
5621
|
}, 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: {
|
|
5570
5622
|
borderRadius: '8px',
|
|
@@ -5579,8 +5631,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5579
5631
|
var templateObject_1$1E;
|
|
5580
5632
|
|
|
5581
5633
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5582
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5583
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5634
|
+
var ContainerDirectionColumn = newStyled.div(templateObject_2$14 || (templateObject_2$14 = __makeTemplateObject(["\n display: column;\n align-items: center;\n"], ["\n display: column;\n align-items: center;\n"])));
|
|
5635
|
+
var DiscountEachOneContainer = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n display: flex;\n padding-left: 0.5rem;\n"], ["\n display: flex;\n padding-left: 0.5rem;\n"])));
|
|
5584
5636
|
var PriceLabelV3 = function (_a) {
|
|
5585
5637
|
var _b;
|
|
5586
5638
|
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"]);
|
|
@@ -5635,11 +5687,11 @@ var PriceLabelV3 = function (_a) {
|
|
|
5635
5687
|
return null;
|
|
5636
5688
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(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));
|
|
5637
5689
|
};
|
|
5638
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5690
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$12, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5639
5691
|
marginTop: '-5px',
|
|
5640
5692
|
} }, 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: {
|
|
5641
5693
|
marginTop: '-6px',
|
|
5642
|
-
} }, 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: {
|
|
5694
|
+
} }, 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$1, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5643
5695
|
letterSpacing: '-0.05rem',
|
|
5644
5696
|
}, 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: {
|
|
5645
5697
|
borderRadius: '8px',
|
|
@@ -5651,10 +5703,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5651
5703
|
lineHeight: '22px',
|
|
5652
5704
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5653
5705
|
};
|
|
5654
|
-
var templateObject_1$1D, templateObject_2$
|
|
5706
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$T;
|
|
5655
5707
|
|
|
5656
|
-
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5657
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5708
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5709
|
+
var ContainerBase$1 = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n border-radius: 8px;\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: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5658
5710
|
var selected = _a.selected, theme = _a.theme;
|
|
5659
5711
|
return selected
|
|
5660
5712
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5668,32 +5720,32 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5668
5720
|
var theme = _a.theme;
|
|
5669
5721
|
return theme.colors.pallete.primary.color;
|
|
5670
5722
|
});
|
|
5671
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5723
|
+
var SinglePurchaseContainer$1 = newStyled(ContainerBase$1)(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 8px;\n\n ", "\n"])), function (_a) {
|
|
5672
5724
|
var onClick = _a.onClick;
|
|
5673
5725
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5674
5726
|
});
|
|
5675
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5676
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5727
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5728
|
+
var SubscriptionHeader$1 = newStyled.div(templateObject_5$s || (templateObject_5$s = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5677
5729
|
var theme = _a.theme;
|
|
5678
5730
|
return theme.colors.shades[200].color;
|
|
5679
5731
|
}, function (_a) {
|
|
5680
5732
|
var theme = _a.theme;
|
|
5681
5733
|
return theme.colors.pallete.primary.color;
|
|
5682
5734
|
});
|
|
5683
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5684
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5685
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5686
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5687
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5688
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$
|
|
5689
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$
|
|
5735
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5736
|
+
var Benefit$1 = newStyled.div(templateObject_7$g || (templateObject_7$g = __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"])));
|
|
5737
|
+
var BenefitText$1 = newStyled(Text$7)(templateObject_8$d || (templateObject_8$d = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5738
|
+
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n font-size: 16px;\n margin-right: 7px;\n"], ["\n font-size: 16px;\n margin-right: 7px;\n"])));
|
|
5739
|
+
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n margin-top: 18px;\n display: flex;\n"], ["\n margin-top: 18px;\n display: flex;\n"])));
|
|
5740
|
+
var DeliveryFrequencyLabel$1 = newStyled(Text$7)(templateObject_11$4 || (templateObject_11$4 = __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"])));
|
|
5741
|
+
var StyledPrice$1 = newStyled(PriceLabelV2)(templateObject_12$3 || (templateObject_12$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5690
5742
|
var selected = _a.selected, theme = _a.theme;
|
|
5691
5743
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5692
5744
|
});
|
|
5693
|
-
var Container$
|
|
5694
|
-
var templateObject_1$1C, templateObject_2$
|
|
5745
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5746
|
+
var templateObject_1$1C, templateObject_2$13, templateObject_3$S, templateObject_4$G, templateObject_5$s, templateObject_6$n, templateObject_7$g, templateObject_8$d, templateObject_9$7, templateObject_10$6, templateObject_11$4, templateObject_12$3, templateObject_13$2;
|
|
5695
5747
|
|
|
5696
|
-
var radioIds = {
|
|
5748
|
+
var radioIds$1 = {
|
|
5697
5749
|
oneTime: {
|
|
5698
5750
|
id: 'one-time-purchase',
|
|
5699
5751
|
},
|
|
@@ -5701,18 +5753,18 @@ var radioIds = {
|
|
|
5701
5753
|
id: 'autoship-subscribe-and-save',
|
|
5702
5754
|
},
|
|
5703
5755
|
};
|
|
5704
|
-
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5705
|
-
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5756
|
+
var DEFAULT_DROPDOWN_OPTIONS$1 = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5757
|
+
var DEFAULT_FREQUENCY_UNIT$1 = 'months';
|
|
5706
5758
|
var Autoship = function (_a) {
|
|
5707
|
-
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, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon;
|
|
5759
|
+
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT$1 : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon;
|
|
5708
5760
|
var theme = useTheme();
|
|
5709
5761
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5710
5762
|
? frequencyValues.map(function (value) {
|
|
5711
5763
|
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5712
5764
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5713
5765
|
})
|
|
5714
|
-
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5715
|
-
var _c = useState(radioIds.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5766
|
+
: [DEFAULT_DROPDOWN_OPTIONS$1];
|
|
5767
|
+
var _c = useState(radioIds$1.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5716
5768
|
var _d = useState(dropdownOptions[0].value), subscriptionPeriod = _d[0], setSubscriptionPeriod = _d[1];
|
|
5717
5769
|
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
5718
5770
|
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
@@ -5721,7 +5773,7 @@ var Autoship = function (_a) {
|
|
|
5721
5773
|
var createDataObject = function () {
|
|
5722
5774
|
return {
|
|
5723
5775
|
subscriptionPeriod: subscriptionPeriod,
|
|
5724
|
-
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5776
|
+
autoship: radioCheck.id === radioIds$1.autoship.id,
|
|
5725
5777
|
originalPrice: discountedProdPrice,
|
|
5726
5778
|
discountedPrice: Number(discountedAutoshipPrice),
|
|
5727
5779
|
};
|
|
@@ -5733,7 +5785,7 @@ var Autoship = function (_a) {
|
|
|
5733
5785
|
var dataObj = createDataObject();
|
|
5734
5786
|
if (type === 'radio') {
|
|
5735
5787
|
setRadioCheck(value);
|
|
5736
|
-
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds.autoship.id }));
|
|
5788
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds$1.autoship.id }));
|
|
5737
5789
|
return;
|
|
5738
5790
|
}
|
|
5739
5791
|
setSubscriptionPeriod(value);
|
|
@@ -5741,17 +5793,115 @@ var Autoship = function (_a) {
|
|
|
5741
5793
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5742
5794
|
};
|
|
5743
5795
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5744
|
-
return (jsxs$1(Container$
|
|
5796
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5745
5797
|
? benefitsColor.selected
|
|
5746
|
-
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5798
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5747
5799
|
};
|
|
5748
5800
|
|
|
5749
|
-
var
|
|
5750
|
-
var
|
|
5751
|
-
|
|
5752
|
-
|
|
5801
|
+
var FlexContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5802
|
+
var DiscountTag = newStyled.div(templateObject_2$12 || (templateObject_2$12 = __makeTemplateObject(["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: #c64844;\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: 5px;\n font-weight: 600;\n"])));
|
|
5803
|
+
var ContainerBase = newStyled.div(templateObject_3$R || (templateObject_3$R = __makeTemplateObject(["\n border-radius: 8px;\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: 8px;\n\n border: ", ";\n\n ", "\n\n & input:checked + div {\n border-color: ", ";\n }\n\n & label {\n cursor: pointer;\n }\n"])), function (_a) {
|
|
5804
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5805
|
+
return selected
|
|
5806
|
+
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
5807
|
+
: "1px solid ".concat(theme.colors.shades[200].color);
|
|
5808
|
+
}, function (_a) {
|
|
5809
|
+
var selected = _a.selected;
|
|
5810
|
+
return selected
|
|
5811
|
+
? "& label {\n font-weight: 700;\n }"
|
|
5812
|
+
: '';
|
|
5813
|
+
}, function (_a) {
|
|
5814
|
+
var theme = _a.theme;
|
|
5815
|
+
return theme.colors.pallete.primary.color;
|
|
5816
|
+
});
|
|
5817
|
+
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$F || (templateObject_4$F = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n padding: 16px;\n\n ", "\n"])), function (_a) {
|
|
5818
|
+
var onClick = _a.onClick;
|
|
5819
|
+
return (onClick ? 'cursor: pointer;' : '');
|
|
5820
|
+
});
|
|
5821
|
+
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$r || (templateObject_5$r = __makeTemplateObject(["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"], ["\n padding: 16px;\n margin-bottom: 8px;\n position: relative;\n"])));
|
|
5822
|
+
var SubscriptionHeader = newStyled.div(templateObject_6$m || (templateObject_6$m = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"], ["\n display: flex;\n justify-content: space-between;\n border-bottom: 1px solid ", ";\n padding-bottom: 10px;\n margin-bottom: 8px;\n cursor: pointer;\n\n & input:checked + div {\n border-color: ", ";\n }\n"])), function (_a) {
|
|
5823
|
+
var theme = _a.theme;
|
|
5824
|
+
return theme.colors.shades[200].color;
|
|
5825
|
+
}, function (_a) {
|
|
5826
|
+
var theme = _a.theme;
|
|
5827
|
+
return theme.colors.pallete.primary.color;
|
|
5828
|
+
});
|
|
5829
|
+
var BenefitsContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5830
|
+
var Benefit = newStyled.div(templateObject_8$c || (templateObject_8$c = __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"])));
|
|
5831
|
+
var BenefitText = newStyled(Text$7)(templateObject_9$6 || (templateObject_9$6 = __makeTemplateObject(["\n line-height: 20px;\n margin-left: 9px;\n"], ["\n line-height: 20px;\n margin-left: 9px;\n"])));
|
|
5832
|
+
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_10$5 || (templateObject_10$5 = __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"])));
|
|
5833
|
+
var StyledPrice = newStyled(PriceLabelV2)(templateObject_11$3 || (templateObject_11$3 = __makeTemplateObject(["\n div p {\n color: ", ";\n }\n"], ["\n div p {\n color: ", ";\n }\n"])), function (_a) {
|
|
5834
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5835
|
+
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5836
|
+
});
|
|
5837
|
+
var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5838
|
+
var templateObject_1$1B, templateObject_2$12, templateObject_3$R, templateObject_4$F, templateObject_5$r, templateObject_6$m, templateObject_7$f, templateObject_8$c, templateObject_9$6, templateObject_10$5, templateObject_11$3, templateObject_12$2;
|
|
5839
|
+
|
|
5840
|
+
var radioIds = {
|
|
5841
|
+
oneTime: {
|
|
5842
|
+
id: 'one-time-purchase',
|
|
5843
|
+
},
|
|
5844
|
+
autoship: {
|
|
5845
|
+
id: 'autoship-subscribe-and-save',
|
|
5846
|
+
},
|
|
5753
5847
|
};
|
|
5754
|
-
var
|
|
5848
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5849
|
+
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5850
|
+
var AutoshipV2 = function (_a) {
|
|
5851
|
+
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, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c;
|
|
5852
|
+
var theme = useTheme();
|
|
5853
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5854
|
+
? frequencyValues.map(function (value) {
|
|
5855
|
+
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5856
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5857
|
+
})
|
|
5858
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5859
|
+
var _d = useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5860
|
+
var _e = useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5861
|
+
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5862
|
+
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
5863
|
+
var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
|
|
5864
|
+
var autoShipSaving = Math.floor(listPrice - autoshipFinalPrice);
|
|
5865
|
+
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5866
|
+
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5867
|
+
var updatedAutoshipBenefits = __spreadArray([
|
|
5868
|
+
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5869
|
+
], autoshipBenefits.slice(0), true);
|
|
5870
|
+
var createDataObject = function () {
|
|
5871
|
+
return {
|
|
5872
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
5873
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5874
|
+
originalPrice: listPrice,
|
|
5875
|
+
discountedPrice: Number(autoshipFinalPrice),
|
|
5876
|
+
};
|
|
5877
|
+
};
|
|
5878
|
+
useEffect(function () {
|
|
5879
|
+
onChange(createDataObject());
|
|
5880
|
+
}, []);
|
|
5881
|
+
var handleChange = function (value, type) {
|
|
5882
|
+
var dataObj = createDataObject();
|
|
5883
|
+
if (type === 'radio') {
|
|
5884
|
+
setRadioCheck(value);
|
|
5885
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds.autoship.id }));
|
|
5886
|
+
return;
|
|
5887
|
+
}
|
|
5888
|
+
setSubscriptionPeriod(value);
|
|
5889
|
+
dataObj.subscriptionPeriod = value;
|
|
5890
|
+
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5891
|
+
};
|
|
5892
|
+
var benefitsColor = benefitsColorMapper(theme);
|
|
5893
|
+
function DeliveryFrequencySelector() {
|
|
5894
|
+
if (dropdownOptions.length > 1) {
|
|
5895
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver 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));
|
|
5896
|
+
}
|
|
5897
|
+
else {
|
|
5898
|
+
return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5899
|
+
}
|
|
5900
|
+
}
|
|
5901
|
+
return (jsxs$1(Container$10, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5902
|
+
? benefitsColor.selected
|
|
5903
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5904
|
+
};
|
|
5755
5905
|
|
|
5756
5906
|
var _a$2;
|
|
5757
5907
|
var BeforeAfterVariant;
|
|
@@ -6069,10 +6219,69 @@ var StrengthBars = function (_a) {
|
|
|
6069
6219
|
};
|
|
6070
6220
|
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6071
6221
|
|
|
6072
|
-
var
|
|
6073
|
-
var
|
|
6222
|
+
var RegularPriceTagSpan = newStyled.span(templateObject_1$1l || (templateObject_1$1l = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6223
|
+
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6224
|
+
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6225
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6226
|
+
var PriceWithTagContainer = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6227
|
+
var RegularPriceTag = function () {
|
|
6228
|
+
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6229
|
+
};
|
|
6230
|
+
var ClubPriceTag = function () {
|
|
6231
|
+
return jsx$1(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6232
|
+
};
|
|
6233
|
+
function getTestId() {
|
|
6234
|
+
var args = [];
|
|
6235
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6236
|
+
args[_i] = arguments[_i];
|
|
6237
|
+
}
|
|
6238
|
+
return args.filter(Boolean).join('-');
|
|
6239
|
+
}
|
|
6240
|
+
var PriceLabelV4 = function (_a) {
|
|
6241
|
+
var _b;
|
|
6242
|
+
_a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
|
|
6243
|
+
var theme = useTheme();
|
|
6244
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6245
|
+
var productFinalPrice = clubPrice;
|
|
6246
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6247
|
+
var currencySymbol = '$';
|
|
6248
|
+
if (typeof productFinalPrice === 'string') {
|
|
6249
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6250
|
+
if (productFinalPrice.includes(availableCurrency)) {
|
|
6251
|
+
currencySymbol = availableCurrency;
|
|
6252
|
+
}
|
|
6253
|
+
});
|
|
6254
|
+
}
|
|
6255
|
+
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6256
|
+
productFinalPrice.includes('.') &&
|
|
6257
|
+
productFinalPrice.includes(currencySymbol)
|
|
6258
|
+
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6259
|
+
: ['', ''];
|
|
6260
|
+
var priceCommonProps = {
|
|
6261
|
+
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
6262
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
6263
|
+
weight: 700,
|
|
6264
|
+
};
|
|
6265
|
+
var OriginalPrice = function () {
|
|
6266
|
+
var sizeProp = !clubStyle
|
|
6267
|
+
? originalPriceStyled
|
|
6268
|
+
? size
|
|
6269
|
+
: ComponentSize.Small
|
|
6270
|
+
: isMobile
|
|
6271
|
+
? ComponentSize.Small
|
|
6272
|
+
: ComponentSize.XSmall;
|
|
6273
|
+
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6274
|
+
};
|
|
6275
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6276
|
+
? finalPriceArray[0]
|
|
6277
|
+
: (_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', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6278
|
+
};
|
|
6279
|
+
var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6280
|
+
|
|
6281
|
+
var Container$U = newStyled.div(templateObject_1$1k || (templateObject_1$1k = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
6282
|
+
var templateObject_1$1k;
|
|
6074
6283
|
|
|
6075
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6284
|
+
var StarContainer = newStyled.div(templateObject_1$1j || (templateObject_1$1j = __makeTemplateObject(["\n display: flex;\n margin-right: ", ";\n"], ["\n display: flex;\n margin-right: ", ";\n"])), function (_a) {
|
|
6076
6285
|
var marginRight = _a.marginRight;
|
|
6077
6286
|
return marginRight;
|
|
6078
6287
|
});
|
|
@@ -6088,7 +6297,7 @@ var StarList = function (_a) {
|
|
|
6088
6297
|
return (jsx$1(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsx$1(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsx$1(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsx$1(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6089
6298
|
}) }, void 0));
|
|
6090
6299
|
};
|
|
6091
|
-
var templateObject_1$
|
|
6300
|
+
var templateObject_1$1j;
|
|
6092
6301
|
|
|
6093
6302
|
/* base styles & size variants */
|
|
6094
6303
|
var LabelStyles = {
|
|
@@ -6129,8 +6338,8 @@ var LabelStyles = {
|
|
|
6129
6338
|
});
|
|
6130
6339
|
},
|
|
6131
6340
|
};
|
|
6132
|
-
var Container$T = newStyled.a(templateObject_1$
|
|
6133
|
-
var templateObject_1$
|
|
6341
|
+
var Container$T = newStyled.a(templateObject_1$1i || (templateObject_1$1i = __makeTemplateObject(["\n display: flex;\n align-items: center;\n text-decoration: none;\n"], ["\n display: flex;\n align-items: center;\n text-decoration: none;\n"])));
|
|
6342
|
+
var templateObject_1$1i;
|
|
6134
6343
|
|
|
6135
6344
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6136
6345
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6150,7 +6359,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6150
6359
|
}),
|
|
6151
6360
|
];
|
|
6152
6361
|
});
|
|
6153
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6362
|
+
var RatingLabel = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"], ["\n font-size: 16px;\n font-weight: 600;\n color: ", ";\n padding-right: 6px;\n text-decoration: none;\n"])), function (props) { return props.color; });
|
|
6154
6363
|
var starsNumber = 5;
|
|
6155
6364
|
var Rating = function (_a) {
|
|
6156
6365
|
var _b = _a.size, size = _b === void 0 ? ComponentSize.Medium : _b, reviews = _a.reviews, reviewsText = _a.reviewsText, rating = _a.rating, _c = _a.showRatingText, showRatingText = _c === void 0 ? false : _c, _d = _a.wrapWithParenthesis, wrapWithParenthesis = _d === void 0 ? false : _d, _e = _a.underline, underline = _e === void 0 ? false : _e, reviewsContainerId = _a.reviewsContainerId;
|
|
@@ -6173,66 +6382,7 @@ var Rating = function (_a) {
|
|
|
6173
6382
|
: {};
|
|
6174
6383
|
return (jsxs$1(Container$T, __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: starsNumber, 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));
|
|
6175
6384
|
};
|
|
6176
|
-
var templateObject_1$
|
|
6177
|
-
|
|
6178
|
-
var RegularPriceTagSpan = newStyled.span(templateObject_1$1h || (templateObject_1$1h = __makeTemplateObject(["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #e5e5e5;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: #5a5a5a;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6179
|
-
var ClubPriceTagSpan = newStyled.span(templateObject_2$W || (templateObject_2$W = __makeTemplateObject(["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"], ["\n background-color: #c64844;\n padding: 3px 4px;\n border-radius: 4px;\n gap: 10px;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n font-size: 0.6rem;\n line-height: 1rem;\n text-align: center;\n margin-bottom: 0.5rem;\n"])));
|
|
6180
|
-
var PriceContainer$1 = newStyled.span(templateObject_3$J || (templateObject_3$J = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
6181
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6182
|
-
var PriceWithTagContainer = newStyled.span(templateObject_5$o || (templateObject_5$o = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
6183
|
-
var RegularPriceTag = function () {
|
|
6184
|
-
return jsx$1(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6185
|
-
};
|
|
6186
|
-
var ClubPriceTag = function () {
|
|
6187
|
-
return jsx$1(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6188
|
-
};
|
|
6189
|
-
function getTestId() {
|
|
6190
|
-
var args = [];
|
|
6191
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6192
|
-
args[_i] = arguments[_i];
|
|
6193
|
-
}
|
|
6194
|
-
return args.filter(Boolean).join('-');
|
|
6195
|
-
}
|
|
6196
|
-
var PriceLabelV4 = function (_a) {
|
|
6197
|
-
var _b;
|
|
6198
|
-
_a.finalPrice; var originalPrice = _a.originalPrice, discount = _a.discount, color = _a.color, testId = _a.testId, _c = _a.finalPriceStyled, finalPriceStyled = _c === void 0 ? false : _c, finalPriceStyle = _a.finalPriceStyle, _d = _a.originalPriceStyled, originalPriceStyled = _d === void 0 ? false : _d, _e = _a.originalPriceUnderlined, originalPriceUnderlined = _e === void 0 ? true : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, _g = _a.clubStyle, clubStyle = _g === void 0 ? false : _g, _h = _a.styledPrice, styledPrice = _h === void 0 ? false : _h, clubPrice = _a.clubPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "color", "testId", "finalPriceStyled", "finalPriceStyle", "originalPriceStyled", "originalPriceUnderlined", "size", "clubStyle", "styledPrice", "clubPrice"]);
|
|
6199
|
-
var theme = useTheme();
|
|
6200
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
6201
|
-
var productFinalPrice = clubPrice;
|
|
6202
|
-
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6203
|
-
var currencySymbol = '$';
|
|
6204
|
-
if (typeof productFinalPrice === 'string') {
|
|
6205
|
-
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6206
|
-
if (productFinalPrice.includes(availableCurrency)) {
|
|
6207
|
-
currencySymbol = availableCurrency;
|
|
6208
|
-
}
|
|
6209
|
-
});
|
|
6210
|
-
}
|
|
6211
|
-
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6212
|
-
productFinalPrice.includes('.') &&
|
|
6213
|
-
productFinalPrice.includes(currencySymbol)
|
|
6214
|
-
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6215
|
-
: ['', ''];
|
|
6216
|
-
var priceCommonProps = {
|
|
6217
|
-
size: finalPriceStyled ? ComponentSize.Small : size,
|
|
6218
|
-
color: color || theme.colors.pallete.secondary.color,
|
|
6219
|
-
weight: 700,
|
|
6220
|
-
};
|
|
6221
|
-
var OriginalPrice = function () {
|
|
6222
|
-
var sizeProp = !clubStyle
|
|
6223
|
-
? originalPriceStyled
|
|
6224
|
-
? size
|
|
6225
|
-
: ComponentSize.Small
|
|
6226
|
-
: isMobile
|
|
6227
|
-
? ComponentSize.Small
|
|
6228
|
-
: ComponentSize.XSmall;
|
|
6229
|
-
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6230
|
-
};
|
|
6231
|
-
return (jsxs$1(Container$11, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6232
|
-
? finalPriceArray[0]
|
|
6233
|
-
: (_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', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6234
|
-
};
|
|
6235
|
-
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6385
|
+
var templateObject_1$1h;
|
|
6236
6386
|
|
|
6237
6387
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6238
6388
|
var width = _a.width, height = _a.height;
|
|
@@ -19674,5 +19824,5 @@ var Spinner = function (_a) {
|
|
|
19674
19824
|
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19675
19825
|
};
|
|
19676
19826
|
|
|
19677
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19827
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19678
19828
|
//# sourceMappingURL=index.esm.js.map
|