@trafilea/afrodita-components 6.8.20 → 6.9.1
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 +33 -2
- package/build/index.esm.js +236 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +237 -123
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3151,7 +3151,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3151
3151
|
desktop: 1280,
|
|
3152
3152
|
};
|
|
3153
3153
|
|
|
3154
|
-
var Container$
|
|
3154
|
+
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
3155
|
var height = _a.height;
|
|
3156
3156
|
return (height ? height : '1.5em');
|
|
3157
3157
|
}, function (_a) {
|
|
@@ -3176,11 +3176,11 @@ var Container$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3176
3176
|
var SkeletonBox = function (_a) {
|
|
3177
3177
|
var width = _a.width, height = _a.height;
|
|
3178
3178
|
var theme = useTheme();
|
|
3179
|
-
return jsxRuntime.jsx(Container$
|
|
3179
|
+
return jsxRuntime.jsx(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3180
3180
|
};
|
|
3181
|
-
var templateObject_1$
|
|
3181
|
+
var templateObject_1$1X;
|
|
3182
3182
|
|
|
3183
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3183
|
+
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
3184
|
var width = _a.width;
|
|
3185
3185
|
return width;
|
|
3186
3186
|
}, function (_a) {
|
|
@@ -3196,7 +3196,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V
|
|
|
3196
3196
|
var opacity = _a.opacity;
|
|
3197
3197
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3198
3198
|
});
|
|
3199
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3199
|
+
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
3200
|
var width = _a.width;
|
|
3201
3201
|
return width;
|
|
3202
3202
|
}, function (_a) {
|
|
@@ -3209,7 +3209,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$
|
|
|
3209
3209
|
var opacity = _a.opacity;
|
|
3210
3210
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3211
3211
|
});
|
|
3212
|
-
var templateObject_1$
|
|
3212
|
+
var templateObject_1$1W, templateObject_2$1h;
|
|
3213
3213
|
|
|
3214
3214
|
/* eslint-disable no-undef */
|
|
3215
3215
|
var cache = new Map();
|
|
@@ -4127,18 +4127,18 @@ function jsxs(type, props, key) {
|
|
|
4127
4127
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4128
4128
|
// `variants` styles that are consistent through all themes.
|
|
4129
4129
|
var TAGS = {
|
|
4130
|
-
hero1: newStyled.h1(templateObject_1$
|
|
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$
|
|
4130
|
+
hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
|
|
4131
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4132
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4133
|
+
display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
|
|
4134
|
+
display2: newStyled.h2(templateObject_5$v || (templateObject_5$v = __makeTemplateObject([""], [""]))),
|
|
4135
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4136
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4137
|
+
heading2: newStyled.h2(templateObject_8$f || (templateObject_8$f = __makeTemplateObject([""], [""]))),
|
|
4138
|
+
heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
|
|
4139
|
+
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4140
|
+
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4141
|
+
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4142
4142
|
heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
|
|
4143
4143
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4144
4144
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4263,17 +4263,17 @@ var DEFAULTS = {
|
|
|
4263
4263
|
size: 'regular',
|
|
4264
4264
|
},
|
|
4265
4265
|
};
|
|
4266
|
-
var templateObject_1$
|
|
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$
|
|
4266
|
+
var templateObject_1$1V, 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;
|
|
4267
|
+
|
|
4268
|
+
var Container$1b = newStyled.div(templateObject_1$1U || (templateObject_1$1U = __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"])));
|
|
4269
|
+
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"])));
|
|
4270
|
+
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"])));
|
|
4271
|
+
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"])));
|
|
4272
|
+
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"])));
|
|
4273
|
+
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
4274
|
var PackSelectorV2 = function (_a) {
|
|
4275
4275
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4276
|
-
return (jsxRuntime.jsx(Container$
|
|
4276
|
+
return (jsxRuntime.jsx(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4277
4277
|
return (jsxRuntime.jsx(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4278
4278
|
}) }), void 0));
|
|
4279
4279
|
};
|
|
@@ -4295,27 +4295,27 @@ var PackCard$1 = function (_a) {
|
|
|
4295
4295
|
currency: currencyCode || 'USD',
|
|
4296
4296
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4297
4297
|
};
|
|
4298
|
-
var templateObject_1$
|
|
4298
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
|
|
4299
4299
|
|
|
4300
|
-
var Container$
|
|
4301
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4300
|
+
var Container$1a = newStyled.div(templateObject_1$1T || (templateObject_1$1T = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4301
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4302
4302
|
var DropList = function (_a) {
|
|
4303
4303
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4304
|
-
return (jsxRuntime.jsx(Container$
|
|
4304
|
+
return (jsxRuntime.jsx(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4305
4305
|
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
4306
|
}) }, void 0));
|
|
4307
4307
|
};
|
|
4308
|
-
var templateObject_1$
|
|
4308
|
+
var templateObject_1$1T, templateObject_2$1e;
|
|
4309
4309
|
|
|
4310
4310
|
var DROPS_TOTAL = 5;
|
|
4311
|
-
var Container$
|
|
4312
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4313
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4311
|
+
var Container$19 = newStyled.div(templateObject_1$1S || (templateObject_1$1S = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4312
|
+
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"])));
|
|
4313
|
+
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
4314
|
var AbsorbencyLevel = function (_a) {
|
|
4315
4315
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4316
|
-
return (jsxRuntime.jsxs(Container$
|
|
4316
|
+
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
4317
|
};
|
|
4318
|
-
var templateObject_1$
|
|
4318
|
+
var templateObject_1$1S, templateObject_2$1d, templateObject_3$X;
|
|
4319
4319
|
|
|
4320
4320
|
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
4321
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4391,7 +4391,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4391
4391
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4392
4392
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4393
4393
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4394
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4394
|
+
var StyledContent = newStyled.button(templateObject_1$1R || (templateObject_1$1R = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4395
4395
|
var Accordion$1 = function (_a) {
|
|
4396
4396
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4397
4397
|
var theme = useTheme();
|
|
@@ -4415,9 +4415,9 @@ var Accordion$1 = function (_a) {
|
|
|
4415
4415
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4416
4416
|
} }), void 0));
|
|
4417
4417
|
};
|
|
4418
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1R;
|
|
4419
4419
|
|
|
4420
|
-
var Container$
|
|
4420
|
+
var Container$18 = newStyled.div(templateObject_1$1Q || (templateObject_1$1Q = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4421
4421
|
var AccordionOptions = function (_a) {
|
|
4422
4422
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4423
4423
|
var _b = React$2.useState({
|
|
@@ -4430,7 +4430,7 @@ var AccordionOptions = function (_a) {
|
|
|
4430
4430
|
}
|
|
4431
4431
|
return false;
|
|
4432
4432
|
};
|
|
4433
|
-
return (jsxRuntime.jsx(Container$
|
|
4433
|
+
return (jsxRuntime.jsx(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4434
4434
|
var forceOpenValue = getForceOpen(index);
|
|
4435
4435
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4436
4436
|
return (jsxRuntime.jsx(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4441,7 +4441,7 @@ var AccordionOptions = function (_a) {
|
|
|
4441
4441
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4442
4442
|
}) }, void 0));
|
|
4443
4443
|
};
|
|
4444
|
-
var templateObject_1$
|
|
4444
|
+
var templateObject_1$1Q;
|
|
4445
4445
|
|
|
4446
4446
|
exports.CardSectionType = void 0;
|
|
4447
4447
|
(function (CardSectionType) {
|
|
@@ -4603,14 +4603,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4603
4603
|
literal: true,
|
|
4604
4604
|
});
|
|
4605
4605
|
|
|
4606
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4607
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4606
|
+
var ErrorText = newStyled.h3(templateObject_1$1P || (templateObject_1$1P = __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$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
4608
|
var Error$1 = function (_a) {
|
|
4609
4609
|
var error = _a.error;
|
|
4610
4610
|
var theme = useTheme();
|
|
4611
4611
|
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
4612
|
};
|
|
4613
|
-
var templateObject_1$
|
|
4613
|
+
var templateObject_1$1P, templateObject_2$1c;
|
|
4614
4614
|
|
|
4615
4615
|
var BaseSelectButton = function (_a) {
|
|
4616
4616
|
var children = _a.children, as = _a.as;
|
|
@@ -4627,7 +4627,7 @@ function BaseSelectOption(_a) {
|
|
|
4627
4627
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4628
4628
|
}
|
|
4629
4629
|
|
|
4630
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4630
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4631
4631
|
function BaseSelect(_a) {
|
|
4632
4632
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4633
4633
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4637,7 +4637,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4637
4637
|
Options: BaseSelectOptions,
|
|
4638
4638
|
Option: BaseSelectOption,
|
|
4639
4639
|
});
|
|
4640
|
-
var templateObject_1$
|
|
4640
|
+
var templateObject_1$1O;
|
|
4641
4641
|
|
|
4642
4642
|
var CustomButton = newStyled.button(function (_a) {
|
|
4643
4643
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4676,7 +4676,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4676
4676
|
});
|
|
4677
4677
|
});
|
|
4678
4678
|
//TODO Remove this when we find the real solution
|
|
4679
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4679
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4680
4680
|
var open = _a.open;
|
|
4681
4681
|
return open &&
|
|
4682
4682
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4696,7 +4696,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4696
4696
|
} }), void 0));
|
|
4697
4697
|
};
|
|
4698
4698
|
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4699
|
-
var templateObject_1$
|
|
4699
|
+
var templateObject_1$1N;
|
|
4700
4700
|
|
|
4701
4701
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4702
4702
|
var theme = _a.theme;
|
|
@@ -4863,7 +4863,7 @@ var CustomCheckboxStyles = {
|
|
|
4863
4863
|
},
|
|
4864
4864
|
};
|
|
4865
4865
|
|
|
4866
|
-
var Container$
|
|
4866
|
+
var Container$17 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __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
4867
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4868
4868
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4869
4869
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4874,7 +4874,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4874
4874
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4875
4875
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4876
4876
|
]; });
|
|
4877
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4877
|
+
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
4878
|
var disabled = _a.disabled;
|
|
4879
4879
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4880
4880
|
});
|
|
@@ -4888,9 +4888,9 @@ var Checkbox = function (_a) {
|
|
|
4888
4888
|
}
|
|
4889
4889
|
onChange(e.target.checked);
|
|
4890
4890
|
};
|
|
4891
|
-
return (jsxRuntime.jsxs(Container$
|
|
4891
|
+
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
4892
|
};
|
|
4893
|
-
var templateObject_1$
|
|
4893
|
+
var templateObject_1$1M, templateObject_2$1b;
|
|
4894
4894
|
|
|
4895
4895
|
var CustomOption = newStyled.li(function (_a) {
|
|
4896
4896
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4939,8 +4939,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4939
4939
|
Option: BaseDropdownOption,
|
|
4940
4940
|
});
|
|
4941
4941
|
|
|
4942
|
-
var Container$
|
|
4943
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4942
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
4943
|
+
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
4944
|
function SimpleDropdown(_a) {
|
|
4945
4945
|
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
4946
|
var _f = React$2.useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4969,10 +4969,10 @@ function SimpleDropdown(_a) {
|
|
|
4969
4969
|
}
|
|
4970
4970
|
setSelectedValue(value);
|
|
4971
4971
|
}, [value, options, initialValue]);
|
|
4972
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4972
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : React$2.Fragment;
|
|
4973
4973
|
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
4974
|
}
|
|
4975
|
-
var templateObject_1$
|
|
4975
|
+
var templateObject_1$1L, templateObject_2$1a;
|
|
4976
4976
|
|
|
4977
4977
|
/* base styles & size variants */
|
|
4978
4978
|
var CustomRadioStyles$2 = {
|
|
@@ -5037,9 +5037,9 @@ var ContainerStyles$2 = {
|
|
|
5037
5037
|
},
|
|
5038
5038
|
};
|
|
5039
5039
|
|
|
5040
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5041
|
-
var Container$
|
|
5042
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5040
|
+
var Wrapper$7 = 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"])));
|
|
5041
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5042
|
+
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
5043
|
var disabled = _a.disabled;
|
|
5044
5044
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5045
5045
|
});
|
|
@@ -5047,7 +5047,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5047
5047
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5048
5048
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5049
5049
|
]; });
|
|
5050
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5050
|
+
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
|
+
var theme = _a.theme;
|
|
5052
|
+
return theme.component.radio.textSize;
|
|
5053
|
+
}, function (_a) {
|
|
5054
|
+
var theme = _a.theme;
|
|
5055
|
+
return theme.component.radio.lineHeight;
|
|
5056
|
+
});
|
|
5057
|
+
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) {
|
|
5051
5058
|
var theme = _a.theme;
|
|
5052
5059
|
return theme.component.radio.textSize;
|
|
5053
5060
|
}, function (_a) {
|
|
@@ -5055,15 +5062,15 @@ var StyledLabel$3 = newStyled(Label$4)(templateObject_3$V || (templateObject_3$V
|
|
|
5055
5062
|
return theme.component.radio.lineHeight;
|
|
5056
5063
|
});
|
|
5057
5064
|
var RadioInput = function (_a) {
|
|
5058
|
-
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d;
|
|
5065
|
+
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? exports.ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e;
|
|
5059
5066
|
var theme = useTheme();
|
|
5060
5067
|
var handleChange = function (event, label) {
|
|
5061
5068
|
var value = event.currentTarget.value;
|
|
5062
5069
|
onChange({ value: value, label: label });
|
|
5063
5070
|
};
|
|
5064
|
-
return (jsxRuntime.jsxs(Wrapper$7, { children: [jsxRuntime.jsxs(Container$
|
|
5071
|
+
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));
|
|
5065
5072
|
};
|
|
5066
|
-
var templateObject_1$
|
|
5073
|
+
var templateObject_1$1K, templateObject_2$19, templateObject_3$W, templateObject_4$I;
|
|
5067
5074
|
|
|
5068
5075
|
var getWrapperFlexDirection = function (position) {
|
|
5069
5076
|
switch (position) {
|
|
@@ -5114,7 +5121,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5114
5121
|
}
|
|
5115
5122
|
};
|
|
5116
5123
|
|
|
5117
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5124
|
+
var Wrapper$6 = newStyled.div(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"], ["\n display: flex;\n flex-direction: ", ";\n align-items: center;\n cursor: pointer;\n\n &:hover {\n .tooltip-container {\n visibility: ", ";\n opacity: ", ";\n cursor: text;\n }\n }\n"])), function (_a) {
|
|
5118
5125
|
var position = _a.position;
|
|
5119
5126
|
return getWrapperFlexDirection(position);
|
|
5120
5127
|
}, function (_a) {
|
|
@@ -5124,7 +5131,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5124
5131
|
var disableHover = _a.disableHover;
|
|
5125
5132
|
return (disableHover ? 0 : 1);
|
|
5126
5133
|
});
|
|
5127
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5134
|
+
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) {
|
|
5128
5135
|
var position = _a.position;
|
|
5129
5136
|
return getContainerFlexDirection(position);
|
|
5130
5137
|
}, function (_a) {
|
|
@@ -5152,25 +5159,25 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5152
5159
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5153
5160
|
return actual === expected ? margin : '0';
|
|
5154
5161
|
};
|
|
5155
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5162
|
+
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) {
|
|
5156
5163
|
var borderColor = _a.borderColor;
|
|
5157
5164
|
return borderColor;
|
|
5158
5165
|
}, function (_a) {
|
|
5159
5166
|
var backgroundColor = _a.backgroundColor;
|
|
5160
5167
|
return backgroundColor;
|
|
5161
5168
|
});
|
|
5162
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5169
|
+
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) {
|
|
5163
5170
|
var color = _a.color;
|
|
5164
5171
|
return color;
|
|
5165
5172
|
});
|
|
5166
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5167
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5173
|
+
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"])));
|
|
5174
|
+
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) {
|
|
5168
5175
|
var color = _a.color;
|
|
5169
5176
|
return color;
|
|
5170
5177
|
});
|
|
5171
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5172
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5173
|
-
var templateObject_1$
|
|
5178
|
+
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"])));
|
|
5179
|
+
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"])));
|
|
5180
|
+
var templateObject_1$1J, templateObject_2$18, templateObject_3$V, templateObject_4$H, templateObject_5$t, templateObject_6$o, templateObject_7$h, templateObject_8$e;
|
|
5174
5181
|
|
|
5175
5182
|
var useOnClickOutside = function (ref, handler) {
|
|
5176
5183
|
React$2.useEffect(function () {
|
|
@@ -5272,6 +5279,7 @@ var Tooltip = function (_a) {
|
|
|
5272
5279
|
|
|
5273
5280
|
var colorsMapper = function (colors) { return ({
|
|
5274
5281
|
TheSpaDr: colors.pallete.primary.color,
|
|
5282
|
+
Shapermint: colors.shades['700'].color,
|
|
5275
5283
|
}); };
|
|
5276
5284
|
var benefitsColorMapper = function (_a) {
|
|
5277
5285
|
var _b;
|
|
@@ -5312,7 +5320,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5312
5320
|
};
|
|
5313
5321
|
}
|
|
5314
5322
|
};
|
|
5315
|
-
var Container$
|
|
5323
|
+
var Container$14 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __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) {
|
|
5316
5324
|
var backgroundColor = _a.backgroundColor;
|
|
5317
5325
|
return backgroundColor;
|
|
5318
5326
|
}, function (_a) {
|
|
@@ -5334,7 +5342,7 @@ var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5334
5342
|
var size = _a.size;
|
|
5335
5343
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5336
5344
|
});
|
|
5337
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5345
|
+
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) {
|
|
5338
5346
|
var textColor = _a.textColor;
|
|
5339
5347
|
return textColor;
|
|
5340
5348
|
}, function (_a) {
|
|
@@ -5349,9 +5357,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5349
5357
|
var ClubOfferTag = function (_a) {
|
|
5350
5358
|
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;
|
|
5351
5359
|
var theme = useTheme();
|
|
5352
|
-
return (jsxRuntime.jsx(Container$
|
|
5360
|
+
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));
|
|
5353
5361
|
};
|
|
5354
|
-
var templateObject_1$
|
|
5362
|
+
var templateObject_1$1I, templateObject_2$17;
|
|
5355
5363
|
|
|
5356
5364
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5357
5365
|
var _a, _b, _c;
|
|
@@ -5382,7 +5390,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5382
5390
|
};
|
|
5383
5391
|
}
|
|
5384
5392
|
};
|
|
5385
|
-
var Container$
|
|
5393
|
+
var Container$13 = 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) {
|
|
5386
5394
|
var backgroundColor = _a.backgroundColor;
|
|
5387
5395
|
return backgroundColor;
|
|
5388
5396
|
}, function (_a) {
|
|
@@ -5404,7 +5412,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5404
5412
|
var size = _a.size;
|
|
5405
5413
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5406
5414
|
});
|
|
5407
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5415
|
+
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) {
|
|
5408
5416
|
var textColor = _a.textColor;
|
|
5409
5417
|
return textColor;
|
|
5410
5418
|
}, function (_a) {
|
|
@@ -5416,12 +5424,12 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5416
5424
|
var size = _a.size;
|
|
5417
5425
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5418
5426
|
});
|
|
5419
|
-
var DiscountTag = function (_a) {
|
|
5427
|
+
var DiscountTag$1 = function (_a) {
|
|
5420
5428
|
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;
|
|
5421
5429
|
var theme = useTheme();
|
|
5422
|
-
return (jsxRuntime.jsx(Container$
|
|
5430
|
+
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));
|
|
5423
5431
|
};
|
|
5424
|
-
var templateObject_1$
|
|
5432
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5425
5433
|
|
|
5426
5434
|
var getStylesBySize$b = function (size, theme) {
|
|
5427
5435
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5463,8 +5471,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5463
5471
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5464
5472
|
}
|
|
5465
5473
|
};
|
|
5466
|
-
var Container$
|
|
5467
|
-
var Price = newStyled.p(templateObject_2$
|
|
5474
|
+
var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
5475
|
+
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) {
|
|
5468
5476
|
var weight = _a.weight;
|
|
5469
5477
|
return (weight ? weight : '400');
|
|
5470
5478
|
}, function (_a) {
|
|
@@ -5488,7 +5496,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5488
5496
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5489
5497
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5490
5498
|
});
|
|
5491
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5499
|
+
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) {
|
|
5492
5500
|
var _b;
|
|
5493
5501
|
var size = _a.size;
|
|
5494
5502
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5519,11 +5527,11 @@ var PriceLabel = function (_a) {
|
|
|
5519
5527
|
: exports.ComponentSize.XSmall;
|
|
5520
5528
|
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));
|
|
5521
5529
|
};
|
|
5522
|
-
return (jsxRuntime.jsxs(Container$
|
|
5530
|
+
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));
|
|
5523
5531
|
};
|
|
5524
|
-
var templateObject_1$
|
|
5532
|
+
var templateObject_1$1G, templateObject_2$15, templateObject_3$U;
|
|
5525
5533
|
|
|
5526
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5534
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5527
5535
|
var PriceLabelV2 = function (_a) {
|
|
5528
5536
|
var _b;
|
|
5529
5537
|
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, pricePerItem = _a.pricePerItem, _h = _a.hasRoundedSavings, hasRoundedSavings = _h === void 0 ? true : _h, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "pricePerItem", "hasRoundedSavings"]);
|
|
@@ -5576,13 +5584,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
5576
5584
|
var savetoString = saveto.toFixed(2);
|
|
5577
5585
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5578
5586
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5579
|
-
return (jsxRuntime.jsxs(Container$
|
|
5587
|
+
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: {
|
|
5580
5588
|
marginTop: '-5px',
|
|
5581
5589
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5582
5590
|
? finalPriceArray[0]
|
|
5583
5591
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5584
5592
|
marginTop: '-6px',
|
|
5585
|
-
} }, 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: {
|
|
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$1, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5586
5594
|
letterSpacing: '-0.05rem',
|
|
5587
5595
|
}, 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: {
|
|
5588
5596
|
borderRadius: '8px',
|
|
@@ -5594,11 +5602,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5594
5602
|
lineHeight: '22px',
|
|
5595
5603
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5596
5604
|
};
|
|
5597
|
-
var templateObject_1$
|
|
5605
|
+
var templateObject_1$1F;
|
|
5598
5606
|
|
|
5599
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5600
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5601
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5607
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5608
|
+
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"])));
|
|
5609
|
+
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"])));
|
|
5602
5610
|
var PriceLabelV3 = function (_a) {
|
|
5603
5611
|
var _b;
|
|
5604
5612
|
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"]);
|
|
@@ -5653,11 +5661,11 @@ var PriceLabelV3 = function (_a) {
|
|
|
5653
5661
|
return null;
|
|
5654
5662
|
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));
|
|
5655
5663
|
};
|
|
5656
|
-
return (jsxRuntime.jsxs(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsxRuntime.jsx(Container$
|
|
5664
|
+
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: {
|
|
5657
5665
|
marginTop: '-5px',
|
|
5658
5666
|
} }, 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: {
|
|
5659
5667
|
marginTop: '-6px',
|
|
5660
|
-
} }, 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: {
|
|
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$1, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
5661
5669
|
letterSpacing: '-0.05rem',
|
|
5662
5670
|
}, 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: {
|
|
5663
5671
|
borderRadius: '8px',
|
|
@@ -5669,10 +5677,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5669
5677
|
lineHeight: '22px',
|
|
5670
5678
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5671
5679
|
};
|
|
5672
|
-
var templateObject_1$
|
|
5680
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$T;
|
|
5673
5681
|
|
|
5674
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5675
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5682
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5683
|
+
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) {
|
|
5676
5684
|
var selected = _a.selected, theme = _a.theme;
|
|
5677
5685
|
return selected
|
|
5678
5686
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5686,32 +5694,32 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5686
5694
|
var theme = _a.theme;
|
|
5687
5695
|
return theme.colors.pallete.primary.color;
|
|
5688
5696
|
});
|
|
5689
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5697
|
+
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) {
|
|
5690
5698
|
var onClick = _a.onClick;
|
|
5691
5699
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5692
5700
|
});
|
|
5693
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5694
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5701
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5702
|
+
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) {
|
|
5695
5703
|
var theme = _a.theme;
|
|
5696
5704
|
return theme.colors.shades[200].color;
|
|
5697
5705
|
}, function (_a) {
|
|
5698
5706
|
var theme = _a.theme;
|
|
5699
5707
|
return theme.colors.pallete.primary.color;
|
|
5700
5708
|
});
|
|
5701
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5702
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5703
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5704
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5705
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5706
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$
|
|
5707
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$
|
|
5709
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5710
|
+
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"])));
|
|
5711
|
+
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"])));
|
|
5712
|
+
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"])));
|
|
5713
|
+
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"])));
|
|
5714
|
+
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"])));
|
|
5715
|
+
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) {
|
|
5708
5716
|
var selected = _a.selected, theme = _a.theme;
|
|
5709
5717
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5710
5718
|
});
|
|
5711
|
-
var Container$
|
|
5712
|
-
var templateObject_1$
|
|
5719
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5720
|
+
var templateObject_1$1D, 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;
|
|
5713
5721
|
|
|
5714
|
-
var radioIds = {
|
|
5722
|
+
var radioIds$1 = {
|
|
5715
5723
|
oneTime: {
|
|
5716
5724
|
id: 'one-time-purchase',
|
|
5717
5725
|
},
|
|
@@ -5719,18 +5727,18 @@ var radioIds = {
|
|
|
5719
5727
|
id: 'autoship-subscribe-and-save',
|
|
5720
5728
|
},
|
|
5721
5729
|
};
|
|
5722
|
-
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5723
|
-
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5730
|
+
var DEFAULT_DROPDOWN_OPTIONS$1 = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5731
|
+
var DEFAULT_FREQUENCY_UNIT$1 = 'months';
|
|
5724
5732
|
var Autoship = function (_a) {
|
|
5725
|
-
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;
|
|
5733
|
+
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;
|
|
5726
5734
|
var theme = useTheme();
|
|
5727
5735
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5728
5736
|
? frequencyValues.map(function (value) {
|
|
5729
5737
|
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5730
5738
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5731
5739
|
})
|
|
5732
|
-
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5733
|
-
var _c = React$2.useState(radioIds.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5740
|
+
: [DEFAULT_DROPDOWN_OPTIONS$1];
|
|
5741
|
+
var _c = React$2.useState(radioIds$1.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5734
5742
|
var _d = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _d[0], setSubscriptionPeriod = _d[1];
|
|
5735
5743
|
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
5736
5744
|
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
@@ -5739,7 +5747,7 @@ var Autoship = function (_a) {
|
|
|
5739
5747
|
var createDataObject = function () {
|
|
5740
5748
|
return {
|
|
5741
5749
|
subscriptionPeriod: subscriptionPeriod,
|
|
5742
|
-
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5750
|
+
autoship: radioCheck.id === radioIds$1.autoship.id,
|
|
5743
5751
|
originalPrice: discountedProdPrice,
|
|
5744
5752
|
discountedPrice: Number(discountedAutoshipPrice),
|
|
5745
5753
|
};
|
|
@@ -5747,6 +5755,103 @@ var Autoship = function (_a) {
|
|
|
5747
5755
|
React$2.useEffect(function () {
|
|
5748
5756
|
onChange(createDataObject());
|
|
5749
5757
|
}, []);
|
|
5758
|
+
var handleChange = function (value, type) {
|
|
5759
|
+
var dataObj = createDataObject();
|
|
5760
|
+
if (type === 'radio') {
|
|
5761
|
+
setRadioCheck(value);
|
|
5762
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds$1.autoship.id }));
|
|
5763
|
+
return;
|
|
5764
|
+
}
|
|
5765
|
+
setSubscriptionPeriod(value);
|
|
5766
|
+
dataObj.subscriptionPeriod = value;
|
|
5767
|
+
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5768
|
+
};
|
|
5769
|
+
var benefitsColor = benefitsColorMapper(theme);
|
|
5770
|
+
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
|
+
? benefitsColor.selected
|
|
5772
|
+
: 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
|
+
};
|
|
5774
|
+
|
|
5775
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5776
|
+
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"])));
|
|
5777
|
+
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) {
|
|
5778
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5779
|
+
return selected
|
|
5780
|
+
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
5781
|
+
: "1px solid ".concat(theme.colors.shades[200].color);
|
|
5782
|
+
}, function (_a) {
|
|
5783
|
+
var selected = _a.selected;
|
|
5784
|
+
return selected
|
|
5785
|
+
? "& label {\n font-weight: 700;\n }"
|
|
5786
|
+
: '';
|
|
5787
|
+
}, function (_a) {
|
|
5788
|
+
var theme = _a.theme;
|
|
5789
|
+
return theme.colors.pallete.primary.color;
|
|
5790
|
+
});
|
|
5791
|
+
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) {
|
|
5792
|
+
var onClick = _a.onClick;
|
|
5793
|
+
return (onClick ? 'cursor: pointer;' : '');
|
|
5794
|
+
});
|
|
5795
|
+
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"])));
|
|
5796
|
+
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) {
|
|
5797
|
+
var theme = _a.theme;
|
|
5798
|
+
return theme.colors.shades[200].color;
|
|
5799
|
+
}, function (_a) {
|
|
5800
|
+
var theme = _a.theme;
|
|
5801
|
+
return theme.colors.pallete.primary.color;
|
|
5802
|
+
});
|
|
5803
|
+
var BenefitsContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5804
|
+
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"])));
|
|
5805
|
+
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"])));
|
|
5806
|
+
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"])));
|
|
5807
|
+
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) {
|
|
5808
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5809
|
+
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5810
|
+
});
|
|
5811
|
+
var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5812
|
+
var templateObject_1$1C, 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;
|
|
5813
|
+
|
|
5814
|
+
var radioIds = {
|
|
5815
|
+
oneTime: {
|
|
5816
|
+
id: 'one-time-purchase',
|
|
5817
|
+
},
|
|
5818
|
+
autoship: {
|
|
5819
|
+
id: 'autoship-subscribe-and-save',
|
|
5820
|
+
},
|
|
5821
|
+
};
|
|
5822
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5823
|
+
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5824
|
+
var AutoshipV2 = function (_a) {
|
|
5825
|
+
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;
|
|
5826
|
+
var theme = useTheme();
|
|
5827
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5828
|
+
? frequencyValues.map(function (value) {
|
|
5829
|
+
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5830
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5831
|
+
})
|
|
5832
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5833
|
+
var _d = React$2.useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5834
|
+
var _e = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5835
|
+
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5836
|
+
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
5837
|
+
var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
|
|
5838
|
+
var autoShipSaving = Math.floor(listPrice - autoshipFinalPrice);
|
|
5839
|
+
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5840
|
+
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5841
|
+
var updatedAutoshipBenefits = __spreadArray([
|
|
5842
|
+
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5843
|
+
], autoshipBenefits.slice(0), true);
|
|
5844
|
+
var createDataObject = function () {
|
|
5845
|
+
return {
|
|
5846
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
5847
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5848
|
+
originalPrice: listPrice,
|
|
5849
|
+
discountedPrice: Number(autoshipFinalPrice),
|
|
5850
|
+
};
|
|
5851
|
+
};
|
|
5852
|
+
React$2.useEffect(function () {
|
|
5853
|
+
onChange(createDataObject());
|
|
5854
|
+
}, []);
|
|
5750
5855
|
var handleChange = function (value, type) {
|
|
5751
5856
|
var dataObj = createDataObject();
|
|
5752
5857
|
if (type === 'radio') {
|
|
@@ -5759,9 +5864,17 @@ var Autoship = function (_a) {
|
|
|
5759
5864
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5760
5865
|
};
|
|
5761
5866
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5762
|
-
|
|
5867
|
+
function DeliveryFrequencySelector() {
|
|
5868
|
+
if (dropdownOptions.length > 1) {
|
|
5869
|
+
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));
|
|
5870
|
+
}
|
|
5871
|
+
else {
|
|
5872
|
+
return (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5873
|
+
}
|
|
5874
|
+
}
|
|
5875
|
+
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
|
|
5763
5876
|
? benefitsColor.selected
|
|
5764
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.
|
|
5877
|
+
: 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));
|
|
5765
5878
|
};
|
|
5766
5879
|
|
|
5767
5880
|
var Img = newStyled.img(templateObject_1$1B || (templateObject_1$1B = __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; });
|
|
@@ -6246,9 +6359,9 @@ var PriceLabelV4 = function (_a) {
|
|
|
6246
6359
|
: exports.ComponentSize.XSmall;
|
|
6247
6360
|
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));
|
|
6248
6361
|
};
|
|
6249
|
-
return (jsxRuntime.jsxs(Container$
|
|
6362
|
+
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]
|
|
6250
6363
|
? finalPriceArray[0]
|
|
6251
|
-
: (_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));
|
|
6364
|
+
: (_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));
|
|
6252
6365
|
};
|
|
6253
6366
|
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6254
6367
|
|
|
@@ -19698,6 +19811,7 @@ exports.AccordionOptions = AccordionOptions;
|
|
|
19698
19811
|
exports.AmazonButton = AmazonButton;
|
|
19699
19812
|
exports.AssetsProvider = AssetsProvider;
|
|
19700
19813
|
exports.Autoship = Autoship;
|
|
19814
|
+
exports.AutoshipV2 = AutoshipV2;
|
|
19701
19815
|
exports.BeforeAfterCard = BeforeAfterCard;
|
|
19702
19816
|
exports.Bundle = Bundle;
|
|
19703
19817
|
exports.ButtonPrimary = ButtonPrimary;
|
|
@@ -19714,7 +19828,7 @@ exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
|
19714
19828
|
exports.Collection = Collection;
|
|
19715
19829
|
exports.CrossSell = index$1;
|
|
19716
19830
|
exports.DeliveryDetails = DeliveryDetails;
|
|
19717
|
-
exports.DiscountTag = DiscountTag;
|
|
19831
|
+
exports.DiscountTag = DiscountTag$1;
|
|
19718
19832
|
exports.Drawer = Drawer;
|
|
19719
19833
|
exports.DropdownDialog = DropdownDialog;
|
|
19720
19834
|
exports.DropdownListIcons = DropdownListIcons;
|