@trafilea/afrodita-components 6.9.0 → 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 +31 -1
- package/build/index.esm.js +228 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +229 -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,14 +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
5051
|
var theme = _a.theme;
|
|
5052
5052
|
return theme.component.radio.textSize;
|
|
5053
5053
|
}, function (_a) {
|
|
5054
5054
|
var theme = _a.theme;
|
|
5055
5055
|
return theme.component.radio.lineHeight;
|
|
5056
5056
|
});
|
|
5057
|
-
var StyledLabelV2 = newStyled(Label$4)(templateObject_4$
|
|
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) {
|
|
5058
5058
|
var theme = _a.theme;
|
|
5059
5059
|
return theme.component.radio.textSize;
|
|
5060
5060
|
}, function (_a) {
|
|
@@ -5068,9 +5068,9 @@ var RadioInput = function (_a) {
|
|
|
5068
5068
|
var value = event.currentTarget.value;
|
|
5069
5069
|
onChange({ value: value, label: label });
|
|
5070
5070
|
};
|
|
5071
|
-
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));
|
|
5072
5072
|
};
|
|
5073
|
-
var templateObject_1$
|
|
5073
|
+
var templateObject_1$1K, templateObject_2$19, templateObject_3$W, templateObject_4$I;
|
|
5074
5074
|
|
|
5075
5075
|
var getWrapperFlexDirection = function (position) {
|
|
5076
5076
|
switch (position) {
|
|
@@ -5121,7 +5121,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5121
5121
|
}
|
|
5122
5122
|
};
|
|
5123
5123
|
|
|
5124
|
-
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) {
|
|
5125
5125
|
var position = _a.position;
|
|
5126
5126
|
return getWrapperFlexDirection(position);
|
|
5127
5127
|
}, function (_a) {
|
|
@@ -5131,7 +5131,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5131
5131
|
var disableHover = _a.disableHover;
|
|
5132
5132
|
return (disableHover ? 0 : 1);
|
|
5133
5133
|
});
|
|
5134
|
-
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) {
|
|
5135
5135
|
var position = _a.position;
|
|
5136
5136
|
return getContainerFlexDirection(position);
|
|
5137
5137
|
}, function (_a) {
|
|
@@ -5159,25 +5159,25 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5159
5159
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5160
5160
|
return actual === expected ? margin : '0';
|
|
5161
5161
|
};
|
|
5162
|
-
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) {
|
|
5163
5163
|
var borderColor = _a.borderColor;
|
|
5164
5164
|
return borderColor;
|
|
5165
5165
|
}, function (_a) {
|
|
5166
5166
|
var backgroundColor = _a.backgroundColor;
|
|
5167
5167
|
return backgroundColor;
|
|
5168
5168
|
});
|
|
5169
|
-
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) {
|
|
5170
5170
|
var color = _a.color;
|
|
5171
5171
|
return color;
|
|
5172
5172
|
});
|
|
5173
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5174
|
-
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) {
|
|
5175
5175
|
var color = _a.color;
|
|
5176
5176
|
return color;
|
|
5177
5177
|
});
|
|
5178
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5179
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5180
|
-
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;
|
|
5181
5181
|
|
|
5182
5182
|
var useOnClickOutside = function (ref, handler) {
|
|
5183
5183
|
React$2.useEffect(function () {
|
|
@@ -5320,7 +5320,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5320
5320
|
};
|
|
5321
5321
|
}
|
|
5322
5322
|
};
|
|
5323
|
-
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) {
|
|
5324
5324
|
var backgroundColor = _a.backgroundColor;
|
|
5325
5325
|
return backgroundColor;
|
|
5326
5326
|
}, function (_a) {
|
|
@@ -5342,7 +5342,7 @@ var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5342
5342
|
var size = _a.size;
|
|
5343
5343
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5344
5344
|
});
|
|
5345
|
-
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) {
|
|
5346
5346
|
var textColor = _a.textColor;
|
|
5347
5347
|
return textColor;
|
|
5348
5348
|
}, function (_a) {
|
|
@@ -5357,9 +5357,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5357
5357
|
var ClubOfferTag = function (_a) {
|
|
5358
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;
|
|
5359
5359
|
var theme = useTheme();
|
|
5360
|
-
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));
|
|
5361
5361
|
};
|
|
5362
|
-
var templateObject_1$
|
|
5362
|
+
var templateObject_1$1I, templateObject_2$17;
|
|
5363
5363
|
|
|
5364
5364
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5365
5365
|
var _a, _b, _c;
|
|
@@ -5390,7 +5390,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5390
5390
|
};
|
|
5391
5391
|
}
|
|
5392
5392
|
};
|
|
5393
|
-
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) {
|
|
5394
5394
|
var backgroundColor = _a.backgroundColor;
|
|
5395
5395
|
return backgroundColor;
|
|
5396
5396
|
}, function (_a) {
|
|
@@ -5412,7 +5412,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5412
5412
|
var size = _a.size;
|
|
5413
5413
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5414
5414
|
});
|
|
5415
|
-
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) {
|
|
5416
5416
|
var textColor = _a.textColor;
|
|
5417
5417
|
return textColor;
|
|
5418
5418
|
}, function (_a) {
|
|
@@ -5424,12 +5424,12 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5424
5424
|
var size = _a.size;
|
|
5425
5425
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5426
5426
|
});
|
|
5427
|
-
var DiscountTag = function (_a) {
|
|
5427
|
+
var DiscountTag$1 = function (_a) {
|
|
5428
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;
|
|
5429
5429
|
var theme = useTheme();
|
|
5430
|
-
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));
|
|
5431
5431
|
};
|
|
5432
|
-
var templateObject_1$
|
|
5432
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5433
5433
|
|
|
5434
5434
|
var getStylesBySize$b = function (size, theme) {
|
|
5435
5435
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5471,8 +5471,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5471
5471
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5472
5472
|
}
|
|
5473
5473
|
};
|
|
5474
|
-
var Container$
|
|
5475
|
-
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) {
|
|
5476
5476
|
var weight = _a.weight;
|
|
5477
5477
|
return (weight ? weight : '400');
|
|
5478
5478
|
}, function (_a) {
|
|
@@ -5496,7 +5496,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5496
5496
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5497
5497
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5498
5498
|
});
|
|
5499
|
-
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) {
|
|
5500
5500
|
var _b;
|
|
5501
5501
|
var size = _a.size;
|
|
5502
5502
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5527,11 +5527,11 @@ var PriceLabel = function (_a) {
|
|
|
5527
5527
|
: exports.ComponentSize.XSmall;
|
|
5528
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));
|
|
5529
5529
|
};
|
|
5530
|
-
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));
|
|
5531
5531
|
};
|
|
5532
|
-
var templateObject_1$
|
|
5532
|
+
var templateObject_1$1G, templateObject_2$15, templateObject_3$U;
|
|
5533
5533
|
|
|
5534
|
-
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"])));
|
|
5535
5535
|
var PriceLabelV2 = function (_a) {
|
|
5536
5536
|
var _b;
|
|
5537
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"]);
|
|
@@ -5584,13 +5584,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
5584
5584
|
var savetoString = saveto.toFixed(2);
|
|
5585
5585
|
var OriginalPrice = function () { return (jsxRuntime.jsx(Price, __assign$1({ size: originalPriceStyled ? size : exports.ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5586
5586
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5587
|
-
return (jsxRuntime.jsxs(Container$
|
|
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: {
|
|
5588
5588
|
marginTop: '-5px',
|
|
5589
5589
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5590
5590
|
? finalPriceArray[0]
|
|
5591
5591
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5592
5592
|
marginTop: '-6px',
|
|
5593
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsxRuntime.jsx(Price, __assign$1({ size: exports.ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
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: {
|
|
5594
5594
|
letterSpacing: '-0.05rem',
|
|
5595
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: {
|
|
5596
5596
|
borderRadius: '8px',
|
|
@@ -5602,11 +5602,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5602
5602
|
lineHeight: '22px',
|
|
5603
5603
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5604
5604
|
};
|
|
5605
|
-
var templateObject_1$
|
|
5605
|
+
var templateObject_1$1F;
|
|
5606
5606
|
|
|
5607
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5608
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5609
|
-
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"])));
|
|
5610
5610
|
var PriceLabelV3 = function (_a) {
|
|
5611
5611
|
var _b;
|
|
5612
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"]);
|
|
@@ -5661,11 +5661,11 @@ var PriceLabelV3 = function (_a) {
|
|
|
5661
5661
|
return null;
|
|
5662
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));
|
|
5663
5663
|
};
|
|
5664
|
-
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: {
|
|
5665
5665
|
marginTop: '-5px',
|
|
5666
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: {
|
|
5667
5667
|
marginTop: '-6px',
|
|
5668
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsxRuntime.jsx(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: exports.ComponentSize.Small }, { children: discount && (jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: exports.ComponentSize.Medium, style: {
|
|
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: {
|
|
5669
5669
|
letterSpacing: '-0.05rem',
|
|
5670
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: {
|
|
5671
5671
|
borderRadius: '8px',
|
|
@@ -5677,10 +5677,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5677
5677
|
lineHeight: '22px',
|
|
5678
5678
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5679
5679
|
};
|
|
5680
|
-
var templateObject_1$
|
|
5680
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$T;
|
|
5681
5681
|
|
|
5682
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5683
|
-
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) {
|
|
5684
5684
|
var selected = _a.selected, theme = _a.theme;
|
|
5685
5685
|
return selected
|
|
5686
5686
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5694,32 +5694,32 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5694
5694
|
var theme = _a.theme;
|
|
5695
5695
|
return theme.colors.pallete.primary.color;
|
|
5696
5696
|
});
|
|
5697
|
-
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) {
|
|
5698
5698
|
var onClick = _a.onClick;
|
|
5699
5699
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5700
5700
|
});
|
|
5701
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5702
|
-
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) {
|
|
5703
5703
|
var theme = _a.theme;
|
|
5704
5704
|
return theme.colors.shades[200].color;
|
|
5705
5705
|
}, function (_a) {
|
|
5706
5706
|
var theme = _a.theme;
|
|
5707
5707
|
return theme.colors.pallete.primary.color;
|
|
5708
5708
|
});
|
|
5709
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5710
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5711
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5712
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5713
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5714
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$
|
|
5715
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$
|
|
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) {
|
|
5716
5716
|
var selected = _a.selected, theme = _a.theme;
|
|
5717
5717
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5718
5718
|
});
|
|
5719
|
-
var Container$
|
|
5720
|
-
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;
|
|
5721
5721
|
|
|
5722
|
-
var radioIds = {
|
|
5722
|
+
var radioIds$1 = {
|
|
5723
5723
|
oneTime: {
|
|
5724
5724
|
id: 'one-time-purchase',
|
|
5725
5725
|
},
|
|
@@ -5727,18 +5727,18 @@ var radioIds = {
|
|
|
5727
5727
|
id: 'autoship-subscribe-and-save',
|
|
5728
5728
|
},
|
|
5729
5729
|
};
|
|
5730
|
-
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5731
|
-
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';
|
|
5732
5732
|
var Autoship = function (_a) {
|
|
5733
|
-
var tooltipContent = _a.tooltipContent, tooltipHeader = _a.tooltipHeader, pricing = _a.pricing, frequencyValues = _a.frequencyValues, _b = _a.frequencyUnit, frequencyUnit = _b === void 0 ? DEFAULT_FREQUENCY_UNIT : _b, autoshipBenefits = _a.autoshipBenefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon;
|
|
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;
|
|
5734
5734
|
var theme = useTheme();
|
|
5735
5735
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5736
5736
|
? frequencyValues.map(function (value) {
|
|
5737
5737
|
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5738
5738
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5739
5739
|
})
|
|
5740
|
-
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5741
|
-
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];
|
|
5742
5742
|
var _d = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _d[0], setSubscriptionPeriod = _d[1];
|
|
5743
5743
|
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
5744
5744
|
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
@@ -5747,7 +5747,7 @@ var Autoship = function (_a) {
|
|
|
5747
5747
|
var createDataObject = function () {
|
|
5748
5748
|
return {
|
|
5749
5749
|
subscriptionPeriod: subscriptionPeriod,
|
|
5750
|
-
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5750
|
+
autoship: radioCheck.id === radioIds$1.autoship.id,
|
|
5751
5751
|
originalPrice: discountedProdPrice,
|
|
5752
5752
|
discountedPrice: Number(discountedAutoshipPrice),
|
|
5753
5753
|
};
|
|
@@ -5755,6 +5755,103 @@ var Autoship = function (_a) {
|
|
|
5755
5755
|
React$2.useEffect(function () {
|
|
5756
5756
|
onChange(createDataObject());
|
|
5757
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
|
+
}, []);
|
|
5758
5855
|
var handleChange = function (value, type) {
|
|
5759
5856
|
var dataObj = createDataObject();
|
|
5760
5857
|
if (type === 'radio') {
|
|
@@ -5767,9 +5864,17 @@ var Autoship = function (_a) {
|
|
|
5767
5864
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5768
5865
|
};
|
|
5769
5866
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5770
|
-
|
|
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
|
|
5771
5876
|
? benefitsColor.selected
|
|
5772
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsxRuntime.
|
|
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));
|
|
5773
5878
|
};
|
|
5774
5879
|
|
|
5775
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; });
|
|
@@ -6254,9 +6359,9 @@ var PriceLabelV4 = function (_a) {
|
|
|
6254
6359
|
: exports.ComponentSize.XSmall;
|
|
6255
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));
|
|
6256
6361
|
};
|
|
6257
|
-
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]
|
|
6258
6363
|
? finalPriceArray[0]
|
|
6259
|
-
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsxRuntime.jsx(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsxRuntime.jsx(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsxRuntime.jsx(TagContainer, __assign$1({ size: size }, { children: jsxRuntime.jsx(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
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));
|
|
6260
6365
|
};
|
|
6261
6366
|
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6262
6367
|
|
|
@@ -19706,6 +19811,7 @@ exports.AccordionOptions = AccordionOptions;
|
|
|
19706
19811
|
exports.AmazonButton = AmazonButton;
|
|
19707
19812
|
exports.AssetsProvider = AssetsProvider;
|
|
19708
19813
|
exports.Autoship = Autoship;
|
|
19814
|
+
exports.AutoshipV2 = AutoshipV2;
|
|
19709
19815
|
exports.BeforeAfterCard = BeforeAfterCard;
|
|
19710
19816
|
exports.Bundle = Bundle;
|
|
19711
19817
|
exports.ButtonPrimary = ButtonPrimary;
|
|
@@ -19722,7 +19828,7 @@ exports.ClubRadioGroupInput = ClubRadioGroupInput;
|
|
|
19722
19828
|
exports.Collection = Collection;
|
|
19723
19829
|
exports.CrossSell = index$1;
|
|
19724
19830
|
exports.DeliveryDetails = DeliveryDetails;
|
|
19725
|
-
exports.DiscountTag = DiscountTag;
|
|
19831
|
+
exports.DiscountTag = DiscountTag$1;
|
|
19726
19832
|
exports.Drawer = Drawer;
|
|
19727
19833
|
exports.DropdownDialog = DropdownDialog;
|
|
19728
19834
|
exports.DropdownListIcons = DropdownListIcons;
|