@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.js
CHANGED
|
@@ -3093,11 +3093,13 @@ var inline = function (text) {
|
|
|
3093
3093
|
};
|
|
3094
3094
|
|
|
3095
3095
|
var ThemeProvider = function (_a) {
|
|
3096
|
-
var
|
|
3096
|
+
var _b;
|
|
3097
|
+
var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
|
|
3097
3098
|
//TODO Analyze why we are doing this and remove
|
|
3098
|
-
var
|
|
3099
|
-
var
|
|
3100
|
-
|
|
3099
|
+
var theme = React$2.useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
|
|
3100
|
+
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 });
|
|
3101
|
+
var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
|
|
3102
|
+
return (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
|
|
3101
3103
|
};
|
|
3102
3104
|
var useTheme = function () { return useTheme$1(); };
|
|
3103
3105
|
var DefaultContainer = function (props) { return jsxRuntime.jsx("div", __assign$1({}, props), void 0); };
|
|
@@ -3151,7 +3153,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3153
|
desktop: 1280,
|
|
3152
3154
|
};
|
|
3153
3155
|
|
|
3154
|
-
var Container$
|
|
3156
|
+
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) {
|
|
3155
3157
|
var height = _a.height;
|
|
3156
3158
|
return (height ? height : '1.5em');
|
|
3157
3159
|
}, function (_a) {
|
|
@@ -3176,11 +3178,11 @@ var Container$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3176
3178
|
var SkeletonBox = function (_a) {
|
|
3177
3179
|
var width = _a.width, height = _a.height;
|
|
3178
3180
|
var theme = useTheme();
|
|
3179
|
-
return jsxRuntime.jsx(Container$
|
|
3181
|
+
return jsxRuntime.jsx(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3182
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3183
|
+
var templateObject_1$1X;
|
|
3182
3184
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3185
|
+
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) {
|
|
3184
3186
|
var width = _a.width;
|
|
3185
3187
|
return width;
|
|
3186
3188
|
}, function (_a) {
|
|
@@ -3196,7 +3198,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V
|
|
|
3196
3198
|
var opacity = _a.opacity;
|
|
3197
3199
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3200
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3201
|
+
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) {
|
|
3200
3202
|
var width = _a.width;
|
|
3201
3203
|
return width;
|
|
3202
3204
|
}, function (_a) {
|
|
@@ -3209,7 +3211,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$
|
|
|
3209
3211
|
var opacity = _a.opacity;
|
|
3210
3212
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3213
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3214
|
+
var templateObject_1$1W, templateObject_2$1h;
|
|
3213
3215
|
|
|
3214
3216
|
/* eslint-disable no-undef */
|
|
3215
3217
|
var cache = new Map();
|
|
@@ -3324,7 +3326,7 @@ var UnmemoIconFromExtSource = function (_a) {
|
|
|
3324
3326
|
if (!fill && !svgProps) {
|
|
3325
3327
|
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3326
3328
|
}
|
|
3327
|
-
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", {
|
|
3329
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3328
3330
|
};
|
|
3329
3331
|
var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
|
|
3330
3332
|
|
|
@@ -3338,12 +3340,62 @@ var UnmemoIcon = function (_a) {
|
|
|
3338
3340
|
var svgSplit = name.split('/');
|
|
3339
3341
|
var svgId = svgSplit[svgSplit.length - 1];
|
|
3340
3342
|
if (assets.isSameOriginIcons) {
|
|
3341
|
-
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", {
|
|
3343
|
+
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: newHeight, type: "image/svg+xml", width: newWidth }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { href: "".concat(iconURL, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3342
3344
|
}
|
|
3343
3345
|
return (jsxRuntime.jsx(IconFromExtSource, __assign$1({ svgId: svgId, iconURL: iconURL, testId: testId, fill: fill, height: newHeight, svgProps: svgProps, width: newWidth, name: name, title: title }, rest), void 0));
|
|
3344
3346
|
};
|
|
3345
3347
|
var Icon$1 = React__default["default"].memo(UnmemoIcon, function (prevProps, nextProps) { return prevProps.name !== nextProps.name; });
|
|
3346
3348
|
|
|
3349
|
+
var getValidSize = function (size) {
|
|
3350
|
+
if (!size) {
|
|
3351
|
+
return 'auto';
|
|
3352
|
+
}
|
|
3353
|
+
if (typeof size === 'number') {
|
|
3354
|
+
return String(size);
|
|
3355
|
+
}
|
|
3356
|
+
if (size.endsWith('px')) {
|
|
3357
|
+
return size.replace('px', '');
|
|
3358
|
+
}
|
|
3359
|
+
if (Number(size))
|
|
3360
|
+
return String(Number(size));
|
|
3361
|
+
return 'auto';
|
|
3362
|
+
};
|
|
3363
|
+
|
|
3364
|
+
var DEFAULT_QUALITY = 100;
|
|
3365
|
+
var buildImageUrl = function (_a) {
|
|
3366
|
+
var cdn = _a.cdn, src = _a.src, widthString = _a.width, heightString = _a.height, _b = _a.quality, quality = _b === void 0 ? DEFAULT_QUALITY : _b;
|
|
3367
|
+
try {
|
|
3368
|
+
new URL(src);
|
|
3369
|
+
var baseUrl = new URL(src);
|
|
3370
|
+
if (!baseUrl.host) {
|
|
3371
|
+
return src;
|
|
3372
|
+
}
|
|
3373
|
+
if (cdn.includes(baseUrl.host)) {
|
|
3374
|
+
return src;
|
|
3375
|
+
}
|
|
3376
|
+
var url = encodeURIComponent(src);
|
|
3377
|
+
var source = "/external/".concat(baseUrl.host.replaceAll('.', ''));
|
|
3378
|
+
var width = getValidSize(widthString);
|
|
3379
|
+
var height = getValidSize(heightString);
|
|
3380
|
+
return "".concat(cdn).concat(source, "/images").concat(baseUrl.pathname, "?width=").concat(width, "&height=").concat(height, "&quality=").concat(quality, "&url=").concat(url);
|
|
3381
|
+
}
|
|
3382
|
+
catch (e) {
|
|
3383
|
+
console.warn("[Afrodita][buildImageUrl] [src:".concat(src, "] ERROR:").concat(e));
|
|
3384
|
+
return src;
|
|
3385
|
+
}
|
|
3386
|
+
};
|
|
3387
|
+
|
|
3388
|
+
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; });
|
|
3389
|
+
var Image$3 = function (_a) {
|
|
3390
|
+
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;
|
|
3391
|
+
var config = useTheme().config;
|
|
3392
|
+
var source = (config === null || config === void 0 ? void 0 : config.useTrafileaImages)
|
|
3393
|
+
? buildImageUrl({ cdn: config.cdn, src: src, height: height, width: width, quality: quality })
|
|
3394
|
+
: src;
|
|
3395
|
+
return (jsxRuntime.jsx(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));
|
|
3396
|
+
};
|
|
3397
|
+
var templateObject_1$1V;
|
|
3398
|
+
|
|
3347
3399
|
var Add = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/add" }), void 0); };
|
|
3348
3400
|
|
|
3349
3401
|
var Check$2 = function (props) { return jsxRuntime.jsx(Icon$1, __assign$1({}, props, { name: "actions/check" }), void 0); };
|
|
@@ -4128,17 +4180,17 @@ function jsxs(type, props, key) {
|
|
|
4128
4180
|
// `variants` styles that are consistent through all themes.
|
|
4129
4181
|
var TAGS = {
|
|
4130
4182
|
hero1: newStyled.h1(templateObject_1$1U || (templateObject_1$1U = __makeTemplateObject([""], [""]))),
|
|
4131
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4132
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4133
|
-
display1: newStyled.h1(templateObject_4$
|
|
4134
|
-
display2: newStyled.h2(templateObject_5$
|
|
4135
|
-
display3: newStyled.h3(templateObject_6$
|
|
4136
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4137
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4138
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4139
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4140
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4141
|
-
heading6: newStyled.h6(templateObject_12$
|
|
4183
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4184
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4185
|
+
display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
|
|
4186
|
+
display2: newStyled.h2(templateObject_5$v || (templateObject_5$v = __makeTemplateObject([""], [""]))),
|
|
4187
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4188
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4189
|
+
heading2: newStyled.h2(templateObject_8$f || (templateObject_8$f = __makeTemplateObject([""], [""]))),
|
|
4190
|
+
heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
|
|
4191
|
+
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4192
|
+
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4193
|
+
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4142
4194
|
heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
|
|
4143
4195
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4144
4196
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4263,17 +4315,17 @@ var DEFAULTS = {
|
|
|
4263
4315
|
size: 'regular',
|
|
4264
4316
|
},
|
|
4265
4317
|
};
|
|
4266
|
-
var templateObject_1$1U, templateObject_2$
|
|
4267
|
-
|
|
4268
|
-
var Container$
|
|
4269
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4270
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4271
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4272
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4273
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4318
|
+
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;
|
|
4319
|
+
|
|
4320
|
+
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"])));
|
|
4321
|
+
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"])));
|
|
4322
|
+
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"])));
|
|
4323
|
+
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"])));
|
|
4324
|
+
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"])));
|
|
4325
|
+
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"])));
|
|
4274
4326
|
var PackSelectorV2 = function (_a) {
|
|
4275
4327
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4276
|
-
return (jsxRuntime.jsx(Container$
|
|
4328
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4277
4329
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4278
4330
|
}) }), void 0));
|
|
4279
4331
|
};
|
|
@@ -4295,27 +4347,27 @@ var PackCard$1 = function (_a) {
|
|
|
4295
4347
|
currency: currencyCode || 'USD',
|
|
4296
4348
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4297
4349
|
};
|
|
4298
|
-
var templateObject_1$1T, templateObject_2$
|
|
4350
|
+
var templateObject_1$1T, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
|
|
4299
4351
|
|
|
4300
|
-
var Container$
|
|
4301
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4352
|
+
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"])));
|
|
4353
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4302
4354
|
var DropList = function (_a) {
|
|
4303
4355
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4304
|
-
return (jsxRuntime.jsx(Container$
|
|
4356
|
+
return (jsxRuntime.jsx(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4305
4357
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4306
4358
|
}) }, void 0));
|
|
4307
4359
|
};
|
|
4308
|
-
var templateObject_1$1S, templateObject_2$
|
|
4360
|
+
var templateObject_1$1S, templateObject_2$1e;
|
|
4309
4361
|
|
|
4310
4362
|
var DROPS_TOTAL = 5;
|
|
4311
|
-
var Container$
|
|
4312
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4313
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4363
|
+
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"])));
|
|
4364
|
+
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"])));
|
|
4365
|
+
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"])));
|
|
4314
4366
|
var AbsorbencyLevel = function (_a) {
|
|
4315
4367
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4316
|
-
return (jsxRuntime.jsxs(Container$
|
|
4368
|
+
return (jsxRuntime.jsxs(Container$19, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4317
4369
|
};
|
|
4318
|
-
var templateObject_1$1R, templateObject_2$
|
|
4370
|
+
var templateObject_1$1R, templateObject_2$1d, templateObject_3$X;
|
|
4319
4371
|
|
|
4320
4372
|
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]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.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===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.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(`
|
|
4321
4373
|
`),"","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(`
|
|
@@ -4417,7 +4469,7 @@ var Accordion$1 = function (_a) {
|
|
|
4417
4469
|
};
|
|
4418
4470
|
var templateObject_1$1Q;
|
|
4419
4471
|
|
|
4420
|
-
var Container$
|
|
4472
|
+
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"])));
|
|
4421
4473
|
var AccordionOptions = function (_a) {
|
|
4422
4474
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4423
4475
|
var _b = React$2.useState({
|
|
@@ -4430,7 +4482,7 @@ var AccordionOptions = function (_a) {
|
|
|
4430
4482
|
}
|
|
4431
4483
|
return false;
|
|
4432
4484
|
};
|
|
4433
|
-
return (jsxRuntime.jsx(Container$
|
|
4485
|
+
return (jsxRuntime.jsx(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4434
4486
|
var forceOpenValue = getForceOpen(index);
|
|
4435
4487
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4436
4488
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4604,13 +4656,13 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4604
4656
|
});
|
|
4605
4657
|
|
|
4606
4658
|
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; });
|
|
4607
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4659
|
+
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"])));
|
|
4608
4660
|
var Error$1 = function (_a) {
|
|
4609
4661
|
var error = _a.error;
|
|
4610
4662
|
var theme = useTheme();
|
|
4611
4663
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4612
4664
|
};
|
|
4613
|
-
var templateObject_1$1O, templateObject_2$
|
|
4665
|
+
var templateObject_1$1O, templateObject_2$1c;
|
|
4614
4666
|
|
|
4615
4667
|
var BaseSelectButton = function (_a) {
|
|
4616
4668
|
var children = _a.children, as = _a.as;
|
|
@@ -4863,7 +4915,7 @@ var CustomCheckboxStyles = {
|
|
|
4863
4915
|
},
|
|
4864
4916
|
};
|
|
4865
4917
|
|
|
4866
|
-
var Container$
|
|
4918
|
+
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"])));
|
|
4867
4919
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4868
4920
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4869
4921
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4874,7 +4926,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4874
4926
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4875
4927
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4876
4928
|
]; });
|
|
4877
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4929
|
+
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) {
|
|
4878
4930
|
var disabled = _a.disabled;
|
|
4879
4931
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4880
4932
|
});
|
|
@@ -4888,9 +4940,9 @@ var Checkbox = function (_a) {
|
|
|
4888
4940
|
}
|
|
4889
4941
|
onChange(e.target.checked);
|
|
4890
4942
|
};
|
|
4891
|
-
return (jsxRuntime.jsxs(Container$
|
|
4943
|
+
return (jsxRuntime.jsxs(Container$17, { children: [jsxRuntime.jsx(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsxRuntime.jsx(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsxRuntime.jsx(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsxRuntime.jsx(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4892
4944
|
};
|
|
4893
|
-
var templateObject_1$1L, templateObject_2$
|
|
4945
|
+
var templateObject_1$1L, templateObject_2$1b;
|
|
4894
4946
|
|
|
4895
4947
|
var CustomOption = newStyled.li(function (_a) {
|
|
4896
4948
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4939,8 +4991,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4939
4991
|
Option: BaseDropdownOption,
|
|
4940
4992
|
});
|
|
4941
4993
|
|
|
4942
|
-
var Container$
|
|
4943
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4994
|
+
var Container$16 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject([""], [""])));
|
|
4995
|
+
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"])));
|
|
4944
4996
|
function SimpleDropdown(_a) {
|
|
4945
4997
|
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;
|
|
4946
4998
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4969,10 +5021,10 @@ function SimpleDropdown(_a) {
|
|
|
4969
5021
|
}
|
|
4970
5022
|
setSelectedValue(value);
|
|
4971
5023
|
}, [value, options, initialValue]);
|
|
4972
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
5024
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
|
|
4973
5025
|
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4974
5026
|
}
|
|
4975
|
-
var templateObject_1$1K, templateObject_2$
|
|
5027
|
+
var templateObject_1$1K, templateObject_2$1a;
|
|
4976
5028
|
|
|
4977
5029
|
/* base styles & size variants */
|
|
4978
5030
|
var CustomRadioStyles$2 = {
|
|
@@ -5038,8 +5090,8 @@ var ContainerStyles$2 = {
|
|
|
5038
5090
|
};
|
|
5039
5091
|
|
|
5040
5092
|
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"])));
|
|
5041
|
-
var Container$
|
|
5042
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5093
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5094
|
+
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) {
|
|
5043
5095
|
var disabled = _a.disabled;
|
|
5044
5096
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5045
5097
|
});
|
|
@@ -5047,14 +5099,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5047
5099
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5048
5100
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5049
5101
|
]; });
|
|
5050
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5102
|
+
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) {
|
|
5051
5103
|
var theme = _a.theme;
|
|
5052
5104
|
return theme.component.radio.textSize;
|
|
5053
5105
|
}, function (_a) {
|
|
5054
5106
|
var theme = _a.theme;
|
|
5055
5107
|
return theme.component.radio.lineHeight;
|
|
5056
5108
|
});
|
|
5057
|
-
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$
|
|
5109
|
+
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) {
|
|
5058
5110
|
var theme = _a.theme;
|
|
5059
5111
|
return theme.component.radio.textSize;
|
|
5060
5112
|
}, function (_a) {
|
|
@@ -5068,9 +5120,9 @@ var RadioInput = function (_a) {
|
|
|
5068
5120
|
var value = event.currentTarget.value;
|
|
5069
5121
|
onChange({ value: value, label: label });
|
|
5070
5122
|
};
|
|
5071
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5123
|
+
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsxRuntime.jsx(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), jsxRuntime.jsx(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsxRuntime.jsx(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsxRuntime.jsx(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5072
5124
|
};
|
|
5073
|
-
var templateObject_1$1J, templateObject_2$
|
|
5125
|
+
var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I;
|
|
5074
5126
|
|
|
5075
5127
|
var getWrapperFlexDirection = function (position) {
|
|
5076
5128
|
switch (position) {
|
|
@@ -5131,7 +5183,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5131
5183
|
var disableHover = _a.disableHover;
|
|
5132
5184
|
return (disableHover ? 0 : 1);
|
|
5133
5185
|
});
|
|
5134
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5186
|
+
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) {
|
|
5135
5187
|
var position = _a.position;
|
|
5136
5188
|
return getContainerFlexDirection(position);
|
|
5137
5189
|
}, function (_a) {
|
|
@@ -5159,25 +5211,25 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5159
5211
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5160
5212
|
return actual === expected ? margin : '0';
|
|
5161
5213
|
};
|
|
5162
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5214
|
+
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) {
|
|
5163
5215
|
var borderColor = _a.borderColor;
|
|
5164
5216
|
return borderColor;
|
|
5165
5217
|
}, function (_a) {
|
|
5166
5218
|
var backgroundColor = _a.backgroundColor;
|
|
5167
5219
|
return backgroundColor;
|
|
5168
5220
|
});
|
|
5169
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5221
|
+
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) {
|
|
5170
5222
|
var color = _a.color;
|
|
5171
5223
|
return color;
|
|
5172
5224
|
});
|
|
5173
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5174
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5225
|
+
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"])));
|
|
5226
|
+
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) {
|
|
5175
5227
|
var color = _a.color;
|
|
5176
5228
|
return color;
|
|
5177
5229
|
});
|
|
5178
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5179
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5180
|
-
var templateObject_1$1I, templateObject_2$
|
|
5230
|
+
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"])));
|
|
5231
|
+
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"])));
|
|
5232
|
+
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;
|
|
5181
5233
|
|
|
5182
5234
|
var useOnClickOutside = function (ref, handler) {
|
|
5183
5235
|
React$2.useEffect(function () {
|
|
@@ -5320,7 +5372,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5320
5372
|
};
|
|
5321
5373
|
}
|
|
5322
5374
|
};
|
|
5323
|
-
var Container$
|
|
5375
|
+
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) {
|
|
5324
5376
|
var backgroundColor = _a.backgroundColor;
|
|
5325
5377
|
return backgroundColor;
|
|
5326
5378
|
}, function (_a) {
|
|
@@ -5342,7 +5394,7 @@ var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5342
5394
|
var size = _a.size;
|
|
5343
5395
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5344
5396
|
});
|
|
5345
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5397
|
+
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) {
|
|
5346
5398
|
var textColor = _a.textColor;
|
|
5347
5399
|
return textColor;
|
|
5348
5400
|
}, function (_a) {
|
|
@@ -5357,9 +5409,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5357
5409
|
var ClubOfferTag = function (_a) {
|
|
5358
5410
|
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 ? exports.ComponentSize.Medium : _e, style = _a.style;
|
|
5359
5411
|
var theme = useTheme();
|
|
5360
|
-
return (jsxRuntime.jsx(Container$
|
|
5412
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsx(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));
|
|
5361
5413
|
};
|
|
5362
|
-
var templateObject_1$1H, templateObject_2$
|
|
5414
|
+
var templateObject_1$1H, templateObject_2$17;
|
|
5363
5415
|
|
|
5364
5416
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5365
5417
|
var _a, _b, _c;
|
|
@@ -5390,7 +5442,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5390
5442
|
};
|
|
5391
5443
|
}
|
|
5392
5444
|
};
|
|
5393
|
-
var Container$
|
|
5445
|
+
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) {
|
|
5394
5446
|
var backgroundColor = _a.backgroundColor;
|
|
5395
5447
|
return backgroundColor;
|
|
5396
5448
|
}, function (_a) {
|
|
@@ -5412,7 +5464,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5412
5464
|
var size = _a.size;
|
|
5413
5465
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5414
5466
|
});
|
|
5415
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5467
|
+
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) {
|
|
5416
5468
|
var textColor = _a.textColor;
|
|
5417
5469
|
return textColor;
|
|
5418
5470
|
}, function (_a) {
|
|
@@ -5424,12 +5476,12 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5424
5476
|
var size = _a.size;
|
|
5425
5477
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5426
5478
|
});
|
|
5427
|
-
var DiscountTag = function (_a) {
|
|
5479
|
+
var DiscountTag$1 = function (_a) {
|
|
5428
5480
|
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 ? exports.ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5429
5481
|
var theme = useTheme();
|
|
5430
|
-
return (jsxRuntime.jsx(Container$
|
|
5482
|
+
return (jsxRuntime.jsx(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: jsxRuntime.jsxs(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));
|
|
5431
5483
|
};
|
|
5432
|
-
var templateObject_1$1G, templateObject_2$
|
|
5484
|
+
var templateObject_1$1G, templateObject_2$16;
|
|
5433
5485
|
|
|
5434
5486
|
var getStylesBySize$b = function (size, theme) {
|
|
5435
5487
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5471,8 +5523,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5471
5523
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5472
5524
|
}
|
|
5473
5525
|
};
|
|
5474
|
-
var Container$
|
|
5475
|
-
var Price = newStyled.p(templateObject_2$
|
|
5526
|
+
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"])));
|
|
5527
|
+
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) {
|
|
5476
5528
|
var weight = _a.weight;
|
|
5477
5529
|
return (weight ? weight : '400');
|
|
5478
5530
|
}, function (_a) {
|
|
@@ -5496,7 +5548,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5496
5548
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5497
5549
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5498
5550
|
});
|
|
5499
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5551
|
+
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) {
|
|
5500
5552
|
var _b;
|
|
5501
5553
|
var size = _a.size;
|
|
5502
5554
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5527,9 +5579,9 @@ var PriceLabel = function (_a) {
|
|
|
5527
5579
|
: exports.ComponentSize.XSmall;
|
|
5528
5580
|
return (jsxRuntime.jsx(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));
|
|
5529
5581
|
};
|
|
5530
|
-
return (jsxRuntime.jsxs(Container$
|
|
5582
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5531
5583
|
};
|
|
5532
|
-
var templateObject_1$1F, templateObject_2$
|
|
5584
|
+
var templateObject_1$1F, templateObject_2$15, templateObject_3$U;
|
|
5533
5585
|
|
|
5534
5586
|
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5535
5587
|
var PriceLabelV2 = function (_a) {
|
|
@@ -5584,13 +5636,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
5584
5636
|
var savetoString = saveto.toFixed(2);
|
|
5585
5637
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5586
5638
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5587
|
-
return (jsxRuntime.jsxs(Container$
|
|
5639
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsxs(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5588
5640
|
marginTop: '-5px',
|
|
5589
5641
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5590
5642
|
? finalPriceArray[0]
|
|
5591
5643
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5592
5644
|
marginTop: '-6px',
|
|
5593
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5645
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5594
5646
|
letterSpacing: '-0.05rem',
|
|
5595
5647
|
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5596
5648
|
borderRadius: '8px',
|
|
@@ -5605,8 +5657,8 @@ var PriceLabelV2 = function (_a) {
|
|
|
5605
5657
|
var templateObject_1$1E;
|
|
5606
5658
|
|
|
5607
5659
|
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5608
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5609
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5660
|
+
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"])));
|
|
5661
|
+
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"])));
|
|
5610
5662
|
var PriceLabelV3 = function (_a) {
|
|
5611
5663
|
var _b;
|
|
5612
5664
|
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 ? exports.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"]);
|
|
@@ -5661,11 +5713,11 @@ var PriceLabelV3 = function (_a) {
|
|
|
5661
5713
|
return null;
|
|
5662
5714
|
return (jsxRuntime.jsxs(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxRuntime.jsxs(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsxRuntime.jsx(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5663
5715
|
};
|
|
5664
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5716
|
+
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsxRuntime.jsx(OriginalPrice, {}, void 0) }), void 0), jsxRuntime.jsxs(Container$12, { children: [jsxRuntime.jsxs(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5665
5717
|
marginTop: '-5px',
|
|
5666
5718
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(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), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5667
5719
|
marginTop: '-6px',
|
|
5668
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5720
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5669
5721
|
letterSpacing: '-0.05rem',
|
|
5670
5722
|
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Medium }, { children: clubOffer && (jsxRuntime.jsx(ClubOfferTag, __assign$1({}, clubOffer, { size: exports.ComponentSize.Small, style: {
|
|
5671
5723
|
borderRadius: '8px',
|
|
@@ -5677,10 +5729,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5677
5729
|
lineHeight: '22px',
|
|
5678
5730
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5679
5731
|
};
|
|
5680
|
-
var templateObject_1$1D, templateObject_2$
|
|
5732
|
+
var templateObject_1$1D, templateObject_2$14, templateObject_3$T;
|
|
5681
5733
|
|
|
5682
|
-
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5683
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5734
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5735
|
+
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) {
|
|
5684
5736
|
var selected = _a.selected, theme = _a.theme;
|
|
5685
5737
|
return selected
|
|
5686
5738
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5694,32 +5746,32 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5694
5746
|
var theme = _a.theme;
|
|
5695
5747
|
return theme.colors.pallete.primary.color;
|
|
5696
5748
|
});
|
|
5697
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5749
|
+
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) {
|
|
5698
5750
|
var onClick = _a.onClick;
|
|
5699
5751
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5700
5752
|
});
|
|
5701
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5702
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5753
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5754
|
+
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) {
|
|
5703
5755
|
var theme = _a.theme;
|
|
5704
5756
|
return theme.colors.shades[200].color;
|
|
5705
5757
|
}, function (_a) {
|
|
5706
5758
|
var theme = _a.theme;
|
|
5707
5759
|
return theme.colors.pallete.primary.color;
|
|
5708
5760
|
});
|
|
5709
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5710
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5711
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5712
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5713
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5714
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$
|
|
5715
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$
|
|
5761
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5762
|
+
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"])));
|
|
5763
|
+
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"])));
|
|
5764
|
+
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"])));
|
|
5765
|
+
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"])));
|
|
5766
|
+
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"])));
|
|
5767
|
+
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) {
|
|
5716
5768
|
var selected = _a.selected, theme = _a.theme;
|
|
5717
5769
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5718
5770
|
});
|
|
5719
|
-
var Container$
|
|
5720
|
-
var templateObject_1$1C, templateObject_2$
|
|
5771
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5772
|
+
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;
|
|
5721
5773
|
|
|
5722
|
-
var radioIds = {
|
|
5774
|
+
var radioIds$1 = {
|
|
5723
5775
|
oneTime: {
|
|
5724
5776
|
id: 'one-time-purchase',
|
|
5725
5777
|
},
|
|
@@ -5727,18 +5779,18 @@ var radioIds = {
|
|
|
5727
5779
|
id: 'autoship-subscribe-and-save',
|
|
5728
5780
|
},
|
|
5729
5781
|
};
|
|
5730
|
-
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5731
|
-
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5782
|
+
var DEFAULT_DROPDOWN_OPTIONS$1 = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5783
|
+
var DEFAULT_FREQUENCY_UNIT$1 = 'months';
|
|
5732
5784
|
var Autoship = function (_a) {
|
|
5733
|
-
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;
|
|
5785
|
+
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;
|
|
5734
5786
|
var theme = useTheme();
|
|
5735
5787
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5736
5788
|
? frequencyValues.map(function (value) {
|
|
5737
5789
|
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5738
5790
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5739
5791
|
})
|
|
5740
|
-
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5741
|
-
var _c = React$2.useState(radioIds.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5792
|
+
: [DEFAULT_DROPDOWN_OPTIONS$1];
|
|
5793
|
+
var _c = React$2.useState(radioIds$1.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5742
5794
|
var _d = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _d[0], setSubscriptionPeriod = _d[1];
|
|
5743
5795
|
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
5744
5796
|
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
@@ -5747,7 +5799,7 @@ var Autoship = function (_a) {
|
|
|
5747
5799
|
var createDataObject = function () {
|
|
5748
5800
|
return {
|
|
5749
5801
|
subscriptionPeriod: subscriptionPeriod,
|
|
5750
|
-
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5802
|
+
autoship: radioCheck.id === radioIds$1.autoship.id,
|
|
5751
5803
|
originalPrice: discountedProdPrice,
|
|
5752
5804
|
discountedPrice: Number(discountedAutoshipPrice),
|
|
5753
5805
|
};
|
|
@@ -5759,7 +5811,7 @@ var Autoship = function (_a) {
|
|
|
5759
5811
|
var dataObj = createDataObject();
|
|
5760
5812
|
if (type === 'radio') {
|
|
5761
5813
|
setRadioCheck(value);
|
|
5762
|
-
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds.autoship.id }));
|
|
5814
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds$1.autoship.id }));
|
|
5763
5815
|
return;
|
|
5764
5816
|
}
|
|
5765
5817
|
setSubscriptionPeriod(value);
|
|
@@ -5767,17 +5819,115 @@ var Autoship = function (_a) {
|
|
|
5767
5819
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5768
5820
|
};
|
|
5769
5821
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5770
|
-
return (jsxRuntime.jsxs(Container$
|
|
5822
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(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: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsxs(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsxRuntime.jsx(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: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5771
5823
|
? benefitsColor.selected
|
|
5772
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5824
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsxRuntime.jsx(SubscriptionDetailsContainer, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5773
5825
|
};
|
|
5774
5826
|
|
|
5775
|
-
var
|
|
5776
|
-
var
|
|
5777
|
-
|
|
5778
|
-
|
|
5827
|
+
var FlexContainer = newStyled.div(templateObject_1$1B || (templateObject_1$1B = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5828
|
+
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"])));
|
|
5829
|
+
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) {
|
|
5830
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5831
|
+
return selected
|
|
5832
|
+
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
5833
|
+
: "1px solid ".concat(theme.colors.shades[200].color);
|
|
5834
|
+
}, function (_a) {
|
|
5835
|
+
var selected = _a.selected;
|
|
5836
|
+
return selected
|
|
5837
|
+
? "& label {\n font-weight: 700;\n }"
|
|
5838
|
+
: '';
|
|
5839
|
+
}, function (_a) {
|
|
5840
|
+
var theme = _a.theme;
|
|
5841
|
+
return theme.colors.pallete.primary.color;
|
|
5842
|
+
});
|
|
5843
|
+
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) {
|
|
5844
|
+
var onClick = _a.onClick;
|
|
5845
|
+
return (onClick ? 'cursor: pointer;' : '');
|
|
5846
|
+
});
|
|
5847
|
+
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"])));
|
|
5848
|
+
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) {
|
|
5849
|
+
var theme = _a.theme;
|
|
5850
|
+
return theme.colors.shades[200].color;
|
|
5851
|
+
}, function (_a) {
|
|
5852
|
+
var theme = _a.theme;
|
|
5853
|
+
return theme.colors.pallete.primary.color;
|
|
5854
|
+
});
|
|
5855
|
+
var BenefitsContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5856
|
+
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"])));
|
|
5857
|
+
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"])));
|
|
5858
|
+
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"])));
|
|
5859
|
+
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) {
|
|
5860
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5861
|
+
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5862
|
+
});
|
|
5863
|
+
var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5864
|
+
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;
|
|
5865
|
+
|
|
5866
|
+
var radioIds = {
|
|
5867
|
+
oneTime: {
|
|
5868
|
+
id: 'one-time-purchase',
|
|
5869
|
+
},
|
|
5870
|
+
autoship: {
|
|
5871
|
+
id: 'autoship-subscribe-and-save',
|
|
5872
|
+
},
|
|
5779
5873
|
};
|
|
5780
|
-
var
|
|
5874
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5875
|
+
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5876
|
+
var AutoshipV2 = function (_a) {
|
|
5877
|
+
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;
|
|
5878
|
+
var theme = useTheme();
|
|
5879
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5880
|
+
? frequencyValues.map(function (value) {
|
|
5881
|
+
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5882
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5883
|
+
})
|
|
5884
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5885
|
+
var _d = React$2.useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5886
|
+
var _e = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5887
|
+
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5888
|
+
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
5889
|
+
var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
|
|
5890
|
+
var autoShipSaving = Math.floor(listPrice - autoshipFinalPrice);
|
|
5891
|
+
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5892
|
+
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5893
|
+
var updatedAutoshipBenefits = __spreadArray([
|
|
5894
|
+
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5895
|
+
], autoshipBenefits.slice(0), true);
|
|
5896
|
+
var createDataObject = function () {
|
|
5897
|
+
return {
|
|
5898
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
5899
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5900
|
+
originalPrice: listPrice,
|
|
5901
|
+
discountedPrice: Number(autoshipFinalPrice),
|
|
5902
|
+
};
|
|
5903
|
+
};
|
|
5904
|
+
React$2.useEffect(function () {
|
|
5905
|
+
onChange(createDataObject());
|
|
5906
|
+
}, []);
|
|
5907
|
+
var handleChange = function (value, type) {
|
|
5908
|
+
var dataObj = createDataObject();
|
|
5909
|
+
if (type === 'radio') {
|
|
5910
|
+
setRadioCheck(value);
|
|
5911
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds.autoship.id }));
|
|
5912
|
+
return;
|
|
5913
|
+
}
|
|
5914
|
+
setSubscriptionPeriod(value);
|
|
5915
|
+
dataObj.subscriptionPeriod = value;
|
|
5916
|
+
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5917
|
+
};
|
|
5918
|
+
var benefitsColor = benefitsColorMapper(theme);
|
|
5919
|
+
function DeliveryFrequencySelector() {
|
|
5920
|
+
if (dropdownOptions.length > 1) {
|
|
5921
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0));
|
|
5922
|
+
}
|
|
5923
|
+
else {
|
|
5924
|
+
return (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5925
|
+
}
|
|
5926
|
+
}
|
|
5927
|
+
return (jsxRuntime.jsxs(Container$10, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, { children: "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5928
|
+
? benefitsColor.selected
|
|
5929
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(FlexContainer, { children: jsxRuntime.jsx(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5930
|
+
};
|
|
5781
5931
|
|
|
5782
5932
|
var _a$2;
|
|
5783
5933
|
exports.BeforeAfterVariant = void 0;
|
|
@@ -6095,10 +6245,69 @@ var StrengthBars = function (_a) {
|
|
|
6095
6245
|
};
|
|
6096
6246
|
var templateObject_1$1m, templateObject_2$X, templateObject_3$K, templateObject_4$z;
|
|
6097
6247
|
|
|
6098
|
-
var
|
|
6099
|
-
var
|
|
6248
|
+
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"])));
|
|
6249
|
+
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"])));
|
|
6250
|
+
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"])));
|
|
6251
|
+
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6252
|
+
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"])));
|
|
6253
|
+
var RegularPriceTag = function () {
|
|
6254
|
+
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6255
|
+
};
|
|
6256
|
+
var ClubPriceTag = function () {
|
|
6257
|
+
return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6258
|
+
};
|
|
6259
|
+
function getTestId() {
|
|
6260
|
+
var args = [];
|
|
6261
|
+
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6262
|
+
args[_i] = arguments[_i];
|
|
6263
|
+
}
|
|
6264
|
+
return args.filter(Boolean).join('-');
|
|
6265
|
+
}
|
|
6266
|
+
var PriceLabelV4 = function (_a) {
|
|
6267
|
+
var _b;
|
|
6268
|
+
_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 ? exports.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"]);
|
|
6269
|
+
var theme = useTheme();
|
|
6270
|
+
var isMobile = useWindowDimensions().isMobile;
|
|
6271
|
+
var productFinalPrice = clubPrice;
|
|
6272
|
+
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6273
|
+
var currencySymbol = '$';
|
|
6274
|
+
if (typeof productFinalPrice === 'string') {
|
|
6275
|
+
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6276
|
+
if (productFinalPrice.includes(availableCurrency)) {
|
|
6277
|
+
currencySymbol = availableCurrency;
|
|
6278
|
+
}
|
|
6279
|
+
});
|
|
6280
|
+
}
|
|
6281
|
+
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6282
|
+
productFinalPrice.includes('.') &&
|
|
6283
|
+
productFinalPrice.includes(currencySymbol)
|
|
6284
|
+
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6285
|
+
: ['', ''];
|
|
6286
|
+
var priceCommonProps = {
|
|
6287
|
+
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6288
|
+
color: color || theme.colors.pallete.secondary.color,
|
|
6289
|
+
weight: 700,
|
|
6290
|
+
};
|
|
6291
|
+
var OriginalPrice = function () {
|
|
6292
|
+
var sizeProp = !clubStyle
|
|
6293
|
+
? originalPriceStyled
|
|
6294
|
+
? size
|
|
6295
|
+
: exports.ComponentSize.Small
|
|
6296
|
+
: isMobile
|
|
6297
|
+
? exports.ComponentSize.Small
|
|
6298
|
+
: exports.ComponentSize.XSmall;
|
|
6299
|
+
return (jsxRuntime.jsx(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));
|
|
6300
|
+
};
|
|
6301
|
+
return (jsxRuntime.jsxs(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6302
|
+
? finalPriceArray[0]
|
|
6303
|
+
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6304
|
+
};
|
|
6305
|
+
var templateObject_1$1l, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6306
|
+
|
|
6307
|
+
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"])));
|
|
6308
|
+
var templateObject_1$1k;
|
|
6100
6309
|
|
|
6101
|
-
var StarContainer = newStyled.div(templateObject_1$
|
|
6310
|
+
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) {
|
|
6102
6311
|
var marginRight = _a.marginRight;
|
|
6103
6312
|
return marginRight;
|
|
6104
6313
|
});
|
|
@@ -6114,7 +6323,7 @@ var StarList = function (_a) {
|
|
|
6114
6323
|
return (jsxRuntime.jsx(StarContainer, __assign$1({ "data-testid": "star-container", marginRight: theme.component.stars.element[size].marginRight }, { children: index < Math.floor(rating) ? (jsxRuntime.jsx(Icon.PDP.Star, __assign$1({}, iconProps), void 0)) : index === Math.floor(rating) && rating % 1 != 0 ? (jsxRuntime.jsx(Icon.PDP.StarHalf, __assign$1({}, iconProps), void 0)) : (jsxRuntime.jsx(Icon.PDP.StarEmpty, __assign$1({}, iconProps), void 0)) }), "star-container-".concat(index)));
|
|
6115
6324
|
}) }, void 0));
|
|
6116
6325
|
};
|
|
6117
|
-
var templateObject_1$
|
|
6326
|
+
var templateObject_1$1j;
|
|
6118
6327
|
|
|
6119
6328
|
/* base styles & size variants */
|
|
6120
6329
|
var LabelStyles = {
|
|
@@ -6155,8 +6364,8 @@ var LabelStyles = {
|
|
|
6155
6364
|
});
|
|
6156
6365
|
},
|
|
6157
6366
|
};
|
|
6158
|
-
var Container$T = newStyled.a(templateObject_1$
|
|
6159
|
-
var templateObject_1$
|
|
6367
|
+
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"])));
|
|
6368
|
+
var templateObject_1$1i;
|
|
6160
6369
|
|
|
6161
6370
|
var CustomLabel = newStyled.div(function (_a) {
|
|
6162
6371
|
var theme = _a.theme, size = _a.size, wrapWithParenthesis = _a.wrapWithParenthesis, underline = _a.underline;
|
|
@@ -6176,7 +6385,7 @@ var CustomLabel = newStyled.div(function (_a) {
|
|
|
6176
6385
|
}),
|
|
6177
6386
|
];
|
|
6178
6387
|
});
|
|
6179
|
-
var RatingLabel = newStyled.span(templateObject_1$
|
|
6388
|
+
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; });
|
|
6180
6389
|
var starsNumber = 5;
|
|
6181
6390
|
var Rating = function (_a) {
|
|
6182
6391
|
var _b = _a.size, size = _b === void 0 ? exports.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;
|
|
@@ -6199,66 +6408,7 @@ var Rating = function (_a) {
|
|
|
6199
6408
|
: {};
|
|
6200
6409
|
return (jsxRuntime.jsxs(Container$T, __assign$1({ as: reviewsContainerId ? 'a' : 'div' }, containerAttributes, { "data-testid": "Container", onClick: handleAnchorClick }, { children: [showRatingText && (jsxRuntime.jsx(RatingLabel, __assign$1({ color: theme.colors.shades['700'].color, "data-testid": "RatingLabel" }, { children: rating }), void 0)), jsxRuntime.jsx(StarList, { rating: rating, size: size, starsNumber: starsNumber, fill: theme.component.stars.element.color }, void 0), jsxRuntime.jsxs(CustomLabel, __assign$1({ theme: theme, size: size, wrapWithParenthesis: wrapWithParenthesis, underline: underline, "data-testid": "CustomLabel" }, { children: [reviews ? reviews : '', " ", reviewsText ? reviewsText : ''] }), void 0)] }), void 0));
|
|
6201
6410
|
};
|
|
6202
|
-
var templateObject_1$
|
|
6203
|
-
|
|
6204
|
-
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"])));
|
|
6205
|
-
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"])));
|
|
6206
|
-
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"])));
|
|
6207
|
-
var PriceContainerV2 = newStyled.span(templateObject_4$y || (templateObject_4$y = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
6208
|
-
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"])));
|
|
6209
|
-
var RegularPriceTag = function () {
|
|
6210
|
-
return jsxRuntime.jsx(RegularPriceTagSpan, { children: "REGULAR PRICE" }, void 0);
|
|
6211
|
-
};
|
|
6212
|
-
var ClubPriceTag = function () {
|
|
6213
|
-
return jsxRuntime.jsx(ClubPriceTagSpan, { children: "CLUB MEMBERS" }, void 0);
|
|
6214
|
-
};
|
|
6215
|
-
function getTestId() {
|
|
6216
|
-
var args = [];
|
|
6217
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
|
6218
|
-
args[_i] = arguments[_i];
|
|
6219
|
-
}
|
|
6220
|
-
return args.filter(Boolean).join('-');
|
|
6221
|
-
}
|
|
6222
|
-
var PriceLabelV4 = function (_a) {
|
|
6223
|
-
var _b;
|
|
6224
|
-
_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 ? exports.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"]);
|
|
6225
|
-
var theme = useTheme();
|
|
6226
|
-
var isMobile = useWindowDimensions().isMobile;
|
|
6227
|
-
var productFinalPrice = clubPrice;
|
|
6228
|
-
var supportedCurrencies = ['AU$', 'CA$', '£'];
|
|
6229
|
-
var currencySymbol = '$';
|
|
6230
|
-
if (typeof productFinalPrice === 'string') {
|
|
6231
|
-
supportedCurrencies.forEach(function (availableCurrency) {
|
|
6232
|
-
if (productFinalPrice.includes(availableCurrency)) {
|
|
6233
|
-
currencySymbol = availableCurrency;
|
|
6234
|
-
}
|
|
6235
|
-
});
|
|
6236
|
-
}
|
|
6237
|
-
var finalPriceArray = typeof productFinalPrice === 'string' &&
|
|
6238
|
-
productFinalPrice.includes('.') &&
|
|
6239
|
-
productFinalPrice.includes(currencySymbol)
|
|
6240
|
-
? productFinalPrice.split(currencySymbol)[1].split('.')
|
|
6241
|
-
: ['', ''];
|
|
6242
|
-
var priceCommonProps = {
|
|
6243
|
-
size: finalPriceStyled ? exports.ComponentSize.Small : size,
|
|
6244
|
-
color: color || theme.colors.pallete.secondary.color,
|
|
6245
|
-
weight: 700,
|
|
6246
|
-
};
|
|
6247
|
-
var OriginalPrice = function () {
|
|
6248
|
-
var sizeProp = !clubStyle
|
|
6249
|
-
? originalPriceStyled
|
|
6250
|
-
? size
|
|
6251
|
-
: exports.ComponentSize.Small
|
|
6252
|
-
: isMobile
|
|
6253
|
-
? exports.ComponentSize.Small
|
|
6254
|
-
: exports.ComponentSize.XSmall;
|
|
6255
|
-
return (jsxRuntime.jsx(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));
|
|
6256
|
-
};
|
|
6257
|
-
return (jsxRuntime.jsxs(Container$11, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxRuntime.jsxs(PriceContainer$1, { children: [jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsx(OriginalPrice, {}, void 0), jsxRuntime.jsx(RegularPriceTag, {}, void 0)] }, void 0), jsxRuntime.jsxs(PriceWithTagContainer, { children: [jsxRuntime.jsxs(PriceContainerV2, { children: [jsxRuntime.jsx(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), jsxRuntime.jsxs(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6258
|
-
? finalPriceArray[0]
|
|
6259
|
-
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6260
|
-
};
|
|
6261
|
-
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6411
|
+
var templateObject_1$1h;
|
|
6262
6412
|
|
|
6263
6413
|
var ImageContainer$4 = newStyled.div(function (_a) {
|
|
6264
6414
|
var width = _a.width, height = _a.height;
|
|
@@ -19706,6 +19856,7 @@ exports.AccordionOptions = AccordionOptions;
|
|
|
19706
19856
|
exports.AmazonButton = AmazonButton;
|
|
19707
19857
|
exports.AssetsProvider = AssetsProvider;
|
|
19708
19858
|
exports.Autoship = Autoship;
|
|
19859
|
+
exports.AutoshipV2 = AutoshipV2;
|
|
19709
19860
|
exports.BeforeAfterCard = BeforeAfterCard;
|
|
19710
19861
|
exports.Bundle = Bundle;
|
|
19711
19862
|
exports.ButtonPrimary = ButtonPrimary;
|
|
@@ -19722,7 +19873,7 @@ exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
|
19722
19873
|
exports.Collection = Collection;
|
|
19723
19874
|
exports.CrossSell = index$1;
|
|
19724
19875
|
exports.DeliveryDetails = DeliveryDetails;
|
|
19725
|
-
exports.DiscountTag = DiscountTag;
|
|
19876
|
+
exports.DiscountTag = DiscountTag$1;
|
|
19726
19877
|
exports.Drawer = Drawer;
|
|
19727
19878
|
exports.DropdownDialog = DropdownDialog;
|
|
19728
19879
|
exports.DropdownListIcons = DropdownListIcons;
|