@trafilea/afrodita-components 6.8.20 → 6.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.d.ts +33 -2
- package/build/index.esm.js +236 -123
- package/build/index.esm.js.map +1 -1
- package/build/index.js +237 -123
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.esm.js
CHANGED
|
@@ -3125,7 +3125,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3125
3125
|
desktop: 1280,
|
|
3126
3126
|
};
|
|
3127
3127
|
|
|
3128
|
-
var Container$
|
|
3128
|
+
var Container$1c = newStyled.div(templateObject_1$1X || (templateObject_1$1X = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3129
3129
|
var height = _a.height;
|
|
3130
3130
|
return (height ? height : '1.5em');
|
|
3131
3131
|
}, function (_a) {
|
|
@@ -3150,11 +3150,11 @@ var Container$1b = newStyled.div(templateObject_1$1W || (templateObject_1$1W = _
|
|
|
3150
3150
|
var SkeletonBox = function (_a) {
|
|
3151
3151
|
var width = _a.width, height = _a.height;
|
|
3152
3152
|
var theme = useTheme();
|
|
3153
|
-
return jsx$1(Container$
|
|
3153
|
+
return jsx$1(Container$1c, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3154
3154
|
};
|
|
3155
|
-
var templateObject_1$
|
|
3155
|
+
var templateObject_1$1X;
|
|
3156
3156
|
|
|
3157
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3157
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1W || (templateObject_1$1W = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3158
3158
|
var width = _a.width;
|
|
3159
3159
|
return width;
|
|
3160
3160
|
}, function (_a) {
|
|
@@ -3170,7 +3170,7 @@ var StyledSvgWrapper = newStyled.svg(templateObject_1$1V || (templateObject_1$1V
|
|
|
3170
3170
|
var opacity = _a.opacity;
|
|
3171
3171
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3172
3172
|
});
|
|
3173
|
-
var StyledImageWrapper = newStyled.img(templateObject_2$
|
|
3173
|
+
var StyledImageWrapper = newStyled.img(templateObject_2$1h || (templateObject_2$1h = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3174
3174
|
var width = _a.width;
|
|
3175
3175
|
return width;
|
|
3176
3176
|
}, function (_a) {
|
|
@@ -3183,7 +3183,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1g || (templateObject_2$
|
|
|
3183
3183
|
var opacity = _a.opacity;
|
|
3184
3184
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3185
3185
|
});
|
|
3186
|
-
var templateObject_1$
|
|
3186
|
+
var templateObject_1$1W, templateObject_2$1h;
|
|
3187
3187
|
|
|
3188
3188
|
/* eslint-disable no-undef */
|
|
3189
3189
|
var cache = new Map();
|
|
@@ -4101,18 +4101,18 @@ function jsxs(type, props, key) {
|
|
|
4101
4101
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4102
4102
|
// `variants` styles that are consistent through all themes.
|
|
4103
4103
|
var TAGS = {
|
|
4104
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4105
|
-
hero2: newStyled.h2(templateObject_2$
|
|
4106
|
-
hero3: newStyled.h3(templateObject_3$
|
|
4107
|
-
display1: newStyled.h1(templateObject_4$
|
|
4108
|
-
display2: newStyled.h2(templateObject_5$
|
|
4109
|
-
display3: newStyled.h3(templateObject_6$
|
|
4110
|
-
heading1: newStyled.h1(templateObject_7$
|
|
4111
|
-
heading2: newStyled.h2(templateObject_8$
|
|
4112
|
-
heading3: newStyled.h3(templateObject_9$
|
|
4113
|
-
heading4: newStyled.h4(templateObject_10$
|
|
4114
|
-
heading5: newStyled.h5(templateObject_11$
|
|
4115
|
-
heading6: newStyled.h6(templateObject_12$
|
|
4104
|
+
hero1: newStyled.h1(templateObject_1$1V || (templateObject_1$1V = __makeTemplateObject([""], [""]))),
|
|
4105
|
+
hero2: newStyled.h2(templateObject_2$1g || (templateObject_2$1g = __makeTemplateObject([""], [""]))),
|
|
4106
|
+
hero3: newStyled.h3(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject([""], [""]))),
|
|
4107
|
+
display1: newStyled.h1(templateObject_4$K || (templateObject_4$K = __makeTemplateObject([""], [""]))),
|
|
4108
|
+
display2: newStyled.h2(templateObject_5$v || (templateObject_5$v = __makeTemplateObject([""], [""]))),
|
|
4109
|
+
display3: newStyled.h3(templateObject_6$q || (templateObject_6$q = __makeTemplateObject([""], [""]))),
|
|
4110
|
+
heading1: newStyled.h1(templateObject_7$i || (templateObject_7$i = __makeTemplateObject([""], [""]))),
|
|
4111
|
+
heading2: newStyled.h2(templateObject_8$f || (templateObject_8$f = __makeTemplateObject([""], [""]))),
|
|
4112
|
+
heading3: newStyled.h3(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject([""], [""]))),
|
|
4113
|
+
heading4: newStyled.h4(templateObject_10$7 || (templateObject_10$7 = __makeTemplateObject([""], [""]))),
|
|
4114
|
+
heading5: newStyled.h5(templateObject_11$5 || (templateObject_11$5 = __makeTemplateObject([""], [""]))),
|
|
4115
|
+
heading6: newStyled.h6(templateObject_12$4 || (templateObject_12$4 = __makeTemplateObject([""], [""]))),
|
|
4116
4116
|
heading7: newStyled.h1(templateObject_13$3 || (templateObject_13$3 = __makeTemplateObject([""], [""]))),
|
|
4117
4117
|
heading8: newStyled.h1(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject([""], [""]))),
|
|
4118
4118
|
body: newStyled.p(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject([""], [""]))),
|
|
@@ -4237,17 +4237,17 @@ var DEFAULTS = {
|
|
|
4237
4237
|
size: 'regular',
|
|
4238
4238
|
},
|
|
4239
4239
|
};
|
|
4240
|
-
var templateObject_1$
|
|
4241
|
-
|
|
4242
|
-
var Container$
|
|
4243
|
-
var Card$3 = newStyled.div(templateObject_2$
|
|
4244
|
-
var Tag$2 = newStyled.div(templateObject_3$
|
|
4245
|
-
var Label$5 = newStyled.div(templateObject_4$
|
|
4246
|
-
var Check$1 = newStyled.div(templateObject_5$
|
|
4247
|
-
var DiscountContainer$1 = newStyled.div(templateObject_6$
|
|
4240
|
+
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;
|
|
4241
|
+
|
|
4242
|
+
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"])));
|
|
4243
|
+
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"])));
|
|
4244
|
+
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"])));
|
|
4245
|
+
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"])));
|
|
4246
|
+
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"])));
|
|
4247
|
+
var DiscountContainer$1 = newStyled.div(templateObject_6$p || (templateObject_6$p = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n"])));
|
|
4248
4248
|
var PackSelectorV2 = function (_a) {
|
|
4249
4249
|
var packs = _a.packs, selectedValue = _a.selectedValue, onChange = _a.onChange, currencyCode = _a.currencyCode;
|
|
4250
|
-
return (jsx$1(Container$
|
|
4250
|
+
return (jsx$1(Container$1b, __assign$1({ role: "radiogroup" }, { children: packs.map(function (pack) {
|
|
4251
4251
|
return (jsx$1(PackCard$1, { pack: pack, onChange: onChange, selected: selectedValue === pack, currencyCode: currencyCode }, pack.label));
|
|
4252
4252
|
}) }), void 0));
|
|
4253
4253
|
};
|
|
@@ -4269,27 +4269,27 @@ var PackCard$1 = function (_a) {
|
|
|
4269
4269
|
currency: currencyCode || 'USD',
|
|
4270
4270
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4271
4271
|
};
|
|
4272
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1U, templateObject_2$1f, templateObject_3$Y, templateObject_4$J, templateObject_5$u, templateObject_6$p;
|
|
4273
4273
|
|
|
4274
|
-
var Container$
|
|
4275
|
-
var DropContainer = newStyled.div(templateObject_2$
|
|
4274
|
+
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"])));
|
|
4275
|
+
var DropContainer = newStyled.div(templateObject_2$1e || (templateObject_2$1e = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4276
4276
|
var DropList = function (_a) {
|
|
4277
4277
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
4278
|
-
return (jsx$1(Container$
|
|
4278
|
+
return (jsx$1(Container$1a, { children: __spreadArray([], new Array(dropTotal), true).map(function (_, index) {
|
|
4279
4279
|
return (jsx$1(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsx$1(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsx$1(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4280
4280
|
}) }, void 0));
|
|
4281
4281
|
};
|
|
4282
|
-
var templateObject_1$
|
|
4282
|
+
var templateObject_1$1T, templateObject_2$1e;
|
|
4283
4283
|
|
|
4284
4284
|
var DROPS_TOTAL = 5;
|
|
4285
|
-
var Container$
|
|
4286
|
-
var Title$8 = newStyled.p(templateObject_2$
|
|
4287
|
-
var Description$3 = newStyled.p(templateObject_3$
|
|
4285
|
+
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"])));
|
|
4286
|
+
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"])));
|
|
4287
|
+
var Description$3 = newStyled.p(templateObject_3$X || (templateObject_3$X = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4288
4288
|
var AbsorbencyLevel = function (_a) {
|
|
4289
4289
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4290
|
-
return (jsxs$1(Container$
|
|
4290
|
+
return (jsxs$1(Container$19, { children: [jsx$1(Title$8, { children: absorbencyTitle }, void 0), jsx$1(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsx$1(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4291
4291
|
};
|
|
4292
|
-
var templateObject_1$
|
|
4292
|
+
var templateObject_1$1S, templateObject_2$1d, templateObject_3$X;
|
|
4293
4293
|
|
|
4294
4294
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=useState(k$1);return useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?useLayoutEffect:useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=useState(yt.serverHandoffComplete);return useEffect(()=>{e!==!0&&t(!0);},[e]),useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===Fragment$1&&Object.keys(l).length>0){if(!isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4295
4295
|
`),"","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(`
|
|
@@ -4365,7 +4365,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4365
4365
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4366
4366
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4367
4367
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4368
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4368
|
+
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"])));
|
|
4369
4369
|
var Accordion$1 = function (_a) {
|
|
4370
4370
|
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;
|
|
4371
4371
|
var theme = useTheme();
|
|
@@ -4389,9 +4389,9 @@ var Accordion$1 = function (_a) {
|
|
|
4389
4389
|
} }, { children: jsx$1(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 && (jsx$1(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsx$1(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsx$1("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4390
4390
|
} }), void 0));
|
|
4391
4391
|
};
|
|
4392
|
-
var templateObject_1$
|
|
4392
|
+
var templateObject_1$1R;
|
|
4393
4393
|
|
|
4394
|
-
var Container$
|
|
4394
|
+
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"])));
|
|
4395
4395
|
var AccordionOptions = function (_a) {
|
|
4396
4396
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4397
4397
|
var _b = useState({
|
|
@@ -4404,7 +4404,7 @@ var AccordionOptions = function (_a) {
|
|
|
4404
4404
|
}
|
|
4405
4405
|
return false;
|
|
4406
4406
|
};
|
|
4407
|
-
return (jsx$1(Container$
|
|
4407
|
+
return (jsx$1(Container$18, { children: accordions.map(function (accordion, index) {
|
|
4408
4408
|
var forceOpenValue = getForceOpen(index);
|
|
4409
4409
|
var accordionTitleColor = forceOpenValue && openAccordionIndex.open ? titleColor : undefined;
|
|
4410
4410
|
return (jsx$1(Accordion$1, __assign$1({ onClick: function () {
|
|
@@ -4415,7 +4415,7 @@ var AccordionOptions = function (_a) {
|
|
|
4415
4415
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4416
4416
|
}) }, void 0));
|
|
4417
4417
|
};
|
|
4418
|
-
var templateObject_1$
|
|
4418
|
+
var templateObject_1$1Q;
|
|
4419
4419
|
|
|
4420
4420
|
var CardSectionType;
|
|
4421
4421
|
(function (CardSectionType) {
|
|
@@ -4577,14 +4577,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4577
4577
|
literal: true,
|
|
4578
4578
|
});
|
|
4579
4579
|
|
|
4580
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4581
|
-
var ErrorContainer = newStyled.div(templateObject_2$
|
|
4580
|
+
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; });
|
|
4581
|
+
var ErrorContainer = newStyled.div(templateObject_2$1c || (templateObject_2$1c = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4582
4582
|
var Error$1 = function (_a) {
|
|
4583
4583
|
var error = _a.error;
|
|
4584
4584
|
var theme = useTheme();
|
|
4585
4585
|
return (jsxs$1(ErrorContainer, { children: [jsx$1(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsx$1(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4586
4586
|
};
|
|
4587
|
-
var templateObject_1$
|
|
4587
|
+
var templateObject_1$1P, templateObject_2$1c;
|
|
4588
4588
|
|
|
4589
4589
|
var BaseSelectButton = function (_a) {
|
|
4590
4590
|
var children = _a.children, as = _a.as;
|
|
@@ -4601,7 +4601,7 @@ function BaseSelectOption(_a) {
|
|
|
4601
4601
|
return (jsx$1(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4602
4602
|
}
|
|
4603
4603
|
|
|
4604
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4604
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4605
4605
|
function BaseSelect(_a) {
|
|
4606
4606
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4607
4607
|
return (jsx$1(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4611,7 +4611,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4611
4611
|
Options: BaseSelectOptions,
|
|
4612
4612
|
Option: BaseSelectOption,
|
|
4613
4613
|
});
|
|
4614
|
-
var templateObject_1$
|
|
4614
|
+
var templateObject_1$1O;
|
|
4615
4615
|
|
|
4616
4616
|
var CustomButton = newStyled.button(function (_a) {
|
|
4617
4617
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4650,7 +4650,7 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4650
4650
|
});
|
|
4651
4651
|
});
|
|
4652
4652
|
//TODO Remove this when we find the real solution
|
|
4653
|
-
var StyledIcon$1 = newStyled.span(templateObject_1$
|
|
4653
|
+
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) {
|
|
4654
4654
|
var open = _a.open;
|
|
4655
4655
|
return open &&
|
|
4656
4656
|
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
@@ -4670,7 +4670,7 @@ var BaseDropdownButton = function (_a) {
|
|
|
4670
4670
|
} }), void 0));
|
|
4671
4671
|
};
|
|
4672
4672
|
var BaseDropdownButton$1 = React__default.memo(BaseDropdownButton);
|
|
4673
|
-
var templateObject_1$
|
|
4673
|
+
var templateObject_1$1N;
|
|
4674
4674
|
|
|
4675
4675
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4676
4676
|
var theme = _a.theme;
|
|
@@ -4837,7 +4837,7 @@ var CustomCheckboxStyles = {
|
|
|
4837
4837
|
},
|
|
4838
4838
|
};
|
|
4839
4839
|
|
|
4840
|
-
var Container$
|
|
4840
|
+
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"])));
|
|
4841
4841
|
var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (props) { return [
|
|
4842
4842
|
CustomCheckboxStyles[props.size](props.theme),
|
|
4843
4843
|
CustomCheckboxStyles[props.variant](props.theme, props.isChecked, props.disabled),
|
|
@@ -4848,7 +4848,7 @@ var CustomCheckbox = newStyled.div(CustomCheckboxStyles.baseStyles, function (pr
|
|
|
4848
4848
|
? "\n svg {\n path {\n fill: var(--colors-shades-black-color);\n }\n }"
|
|
4849
4849
|
: '', "\n ").concat(props.text === 'White' ? "border: 0.27px var(--colors-shades-300-color) solid;" : ''),
|
|
4850
4850
|
]; });
|
|
4851
|
-
var Input$5 = newStyled.input(templateObject_2$
|
|
4851
|
+
var Input$5 = newStyled.input(templateObject_2$1b || (templateObject_2$1b = __makeTemplateObject(["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"], ["\n position: absolute;\n height: 100%;\n width: 100%;\n margin: 0;\n opacity: 0;\n cursor: ", ";\n"])), function (_a) {
|
|
4852
4852
|
var disabled = _a.disabled;
|
|
4853
4853
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
4854
4854
|
});
|
|
@@ -4862,9 +4862,9 @@ var Checkbox = function (_a) {
|
|
|
4862
4862
|
}
|
|
4863
4863
|
onChange(e.target.checked);
|
|
4864
4864
|
};
|
|
4865
|
-
return (jsxs$1(Container$
|
|
4865
|
+
return (jsxs$1(Container$17, { children: [jsx$1(Input$5, { type: "checkbox", checked: checked, disabled: disabled, onChange: handleChange, id: id }, void 0), jsx$1(CustomCheckbox, __assign$1({ theme: theme, size: size, disabled: disabled, isChecked: checked, "data-testid": "checkbox", variant: variant, backgroundColor: backgroundColor, text: text }, { children: checked && jsx$1(Icon.Actions.Check, { fill: "#fff" }, void 0) }), void 0), jsx$1(Label$4, __assign$1({ "data-testid": "checkbox-text", size: size, variant: checked ? 'demi' : 'regular', htmlFor: id, disabled: disabled }, { children: text }), void 0)] }, void 0));
|
|
4866
4866
|
};
|
|
4867
|
-
var templateObject_1$
|
|
4867
|
+
var templateObject_1$1M, templateObject_2$1b;
|
|
4868
4868
|
|
|
4869
4869
|
var CustomOption = newStyled.li(function (_a) {
|
|
4870
4870
|
var theme = _a.theme, selected = _a.selected, active = _a.active;
|
|
@@ -4913,8 +4913,8 @@ var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
|
4913
4913
|
Option: BaseDropdownOption,
|
|
4914
4914
|
});
|
|
4915
4915
|
|
|
4916
|
-
var Container$
|
|
4917
|
-
var RequiredPlaceholder = newStyled.p(templateObject_2$
|
|
4916
|
+
var Container$16 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject([""], [""])));
|
|
4917
|
+
var RequiredPlaceholder = newStyled.p(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject(["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"], ["\n margin: unset;\n &:after {\n content: '*';\n color: var(--colors-semantic-urgent-color);\n }\n"])));
|
|
4918
4918
|
function SimpleDropdown(_a) {
|
|
4919
4919
|
var options = _a.options, _b = _a.disabled, disabled = _b === void 0 ? false : _b, initialValue = _a.initialValue, placeHolder = _a.placeHolder, label = _a.label, _c = _a.wide, wide = _c === void 0 ? false : _c, _d = _a.sort, sort = _d === void 0 ? false : _d, onChange = _a.onChange, value = _a.value, _e = _a.testId, testId = _e === void 0 ? 'simple-dropdown' : _e, required = _a.required, showRequiredPlaceholder = _a.showRequiredPlaceholder;
|
|
4920
4920
|
var _f = useState(value || initialValue), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
@@ -4943,10 +4943,10 @@ function SimpleDropdown(_a) {
|
|
|
4943
4943
|
}
|
|
4944
4944
|
setSelectedValue(value);
|
|
4945
4945
|
}, [value, options, initialValue]);
|
|
4946
|
-
var DropdownContainer = showRequiredPlaceholder ? Container$
|
|
4946
|
+
var DropdownContainer = showRequiredPlaceholder ? Container$16 : Fragment$1;
|
|
4947
4947
|
return (jsxs$1(DropdownContainer, { children: [jsxs$1(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsx$1(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsx$1(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsx$1(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsx$1(Error$1, { error: required }, void 0)] }, void 0));
|
|
4948
4948
|
}
|
|
4949
|
-
var templateObject_1$
|
|
4949
|
+
var templateObject_1$1L, templateObject_2$1a;
|
|
4950
4950
|
|
|
4951
4951
|
/* base styles & size variants */
|
|
4952
4952
|
var CustomRadioStyles$2 = {
|
|
@@ -5011,9 +5011,9 @@ var ContainerStyles$2 = {
|
|
|
5011
5011
|
},
|
|
5012
5012
|
};
|
|
5013
5013
|
|
|
5014
|
-
var Wrapper$7 = newStyled.div(templateObject_1$
|
|
5015
|
-
var Container$
|
|
5016
|
-
var Input$4 = newStyled.input(templateObject_2$
|
|
5014
|
+
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"])));
|
|
5015
|
+
var Container$15 = newStyled.div(__assign$1({}, ContainerStyles$2.baseStyles), function (props) { return [ContainerStyles$2[props.size](props.theme)]; });
|
|
5016
|
+
var Input$4 = newStyled.input(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"], ["\n position: absolute;\n opacity: 0;\n cursor: ", ";\n height: 100%;\n width: 100%;\n margin: 0;\n"])), function (_a) {
|
|
5017
5017
|
var disabled = _a.disabled;
|
|
5018
5018
|
return (disabled ? 'not-allowed' : 'pointer');
|
|
5019
5019
|
});
|
|
@@ -5021,7 +5021,14 @@ var CustomRadio$2 = newStyled.div(function (props) { return [
|
|
|
5021
5021
|
CustomRadioStyles$2.baseStyles(props.theme, props.disabled),
|
|
5022
5022
|
CustomRadioStyles$2[props.size](props.theme, props.isChecked),
|
|
5023
5023
|
]; });
|
|
5024
|
-
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$
|
|
5024
|
+
var StyledLabel$3 = newStyled(Label$4)(templateObject_3$W || (templateObject_3$W = __makeTemplateObject(["\n font-size: ", ";\n line-height: ", " !important;\n"], ["\n font-size: ", ";\n line-height: ", " !important;\n"])), function (_a) {
|
|
5025
|
+
var theme = _a.theme;
|
|
5026
|
+
return theme.component.radio.textSize;
|
|
5027
|
+
}, function (_a) {
|
|
5028
|
+
var theme = _a.theme;
|
|
5029
|
+
return theme.component.radio.lineHeight;
|
|
5030
|
+
});
|
|
5031
|
+
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) {
|
|
5025
5032
|
var theme = _a.theme;
|
|
5026
5033
|
return theme.component.radio.textSize;
|
|
5027
5034
|
}, function (_a) {
|
|
@@ -5029,15 +5036,15 @@ var StyledLabel$3 = newStyled(Label$4)(templateObject_3$V || (templateObject_3$V
|
|
|
5029
5036
|
return theme.component.radio.lineHeight;
|
|
5030
5037
|
});
|
|
5031
5038
|
var RadioInput = function (_a) {
|
|
5032
|
-
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d;
|
|
5039
|
+
var style = _a.style, name = _a.name, value = _a.value, id = _a.id, label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? ComponentSize.Medium : _d, _e = _a.useV2Style, useV2Style = _e === void 0 ? false : _e;
|
|
5033
5040
|
var theme = useTheme();
|
|
5034
5041
|
var handleChange = function (event, label) {
|
|
5035
5042
|
var value = event.currentTarget.value;
|
|
5036
5043
|
onChange({ value: value, label: label });
|
|
5037
5044
|
};
|
|
5038
|
-
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$
|
|
5045
|
+
return (jsxs$1(Wrapper$7, { children: [jsxs$1(Container$15, __assign$1({ theme: theme, size: size, style: style, "data-testid": "container" }, { children: [jsx$1(Input$4, { id: "".concat(name, "-").concat(id), type: "radio", name: name, value: value, checked: checked, onChange: function (e) { return (disabled ? null : handleChange(e, label)); }, disabled: disabled, style: style }, void 0), jsx$1(CustomRadio$2, { size: size, isChecked: checked, disabled: disabled, theme: theme, "data-testid": "custom-radio", style: style }, void 0)] }), void 0), useV2Style ? (jsx$1(StyledLabelV2, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0)) : (jsx$1(StyledLabel$3, __assign$1({ htmlFor: "".concat(name, "-").concat(id), "data-testid": "label", variant: "regular", size: size, disabled: disabled }, { children: label }), void 0))] }, void 0));
|
|
5039
5046
|
};
|
|
5040
|
-
var templateObject_1$
|
|
5047
|
+
var templateObject_1$1K, templateObject_2$19, templateObject_3$W, templateObject_4$I;
|
|
5041
5048
|
|
|
5042
5049
|
var getWrapperFlexDirection = function (position) {
|
|
5043
5050
|
switch (position) {
|
|
@@ -5088,7 +5095,7 @@ var getTooltipAlignItems = function (position, align) {
|
|
|
5088
5095
|
}
|
|
5089
5096
|
};
|
|
5090
5097
|
|
|
5091
|
-
var Wrapper$6 = newStyled.div(templateObject_1$
|
|
5098
|
+
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) {
|
|
5092
5099
|
var position = _a.position;
|
|
5093
5100
|
return getWrapperFlexDirection(position);
|
|
5094
5101
|
}, function (_a) {
|
|
@@ -5098,7 +5105,7 @@ var Wrapper$6 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __ma
|
|
|
5098
5105
|
var disableHover = _a.disableHover;
|
|
5099
5106
|
return (disableHover ? 0 : 1);
|
|
5100
5107
|
});
|
|
5101
|
-
var TooltipContainer = newStyled.div(templateObject_2$
|
|
5108
|
+
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) {
|
|
5102
5109
|
var position = _a.position;
|
|
5103
5110
|
return getContainerFlexDirection(position);
|
|
5104
5111
|
}, function (_a) {
|
|
@@ -5126,25 +5133,25 @@ var TooltipContainer = newStyled.div(templateObject_2$17 || (templateObject_2$17
|
|
|
5126
5133
|
var getTooltipMargin = function (actual, expected, margin) {
|
|
5127
5134
|
return actual === expected ? margin : '0';
|
|
5128
5135
|
};
|
|
5129
|
-
var ContentWrapper = newStyled.div(templateObject_3$
|
|
5136
|
+
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) {
|
|
5130
5137
|
var borderColor = _a.borderColor;
|
|
5131
5138
|
return borderColor;
|
|
5132
5139
|
}, function (_a) {
|
|
5133
5140
|
var backgroundColor = _a.backgroundColor;
|
|
5134
5141
|
return backgroundColor;
|
|
5135
5142
|
});
|
|
5136
|
-
var TooltipText = newStyled.div(templateObject_4$
|
|
5143
|
+
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) {
|
|
5137
5144
|
var color = _a.color;
|
|
5138
5145
|
return color;
|
|
5139
5146
|
});
|
|
5140
|
-
var TopSection = newStyled.div(templateObject_5$
|
|
5141
|
-
var Title$7 = newStyled.h1(templateObject_6$
|
|
5147
|
+
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"])));
|
|
5148
|
+
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) {
|
|
5142
5149
|
var color = _a.color;
|
|
5143
5150
|
return color;
|
|
5144
5151
|
});
|
|
5145
|
-
var IconContainer$5 = newStyled.div(templateObject_7$
|
|
5146
|
-
var CloseToolTip = newStyled.button(templateObject_8$
|
|
5147
|
-
var templateObject_1$
|
|
5152
|
+
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"])));
|
|
5153
|
+
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"])));
|
|
5154
|
+
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;
|
|
5148
5155
|
|
|
5149
5156
|
var useOnClickOutside = function (ref, handler) {
|
|
5150
5157
|
useEffect(function () {
|
|
@@ -5246,6 +5253,7 @@ var Tooltip = function (_a) {
|
|
|
5246
5253
|
|
|
5247
5254
|
var colorsMapper = function (colors) { return ({
|
|
5248
5255
|
TheSpaDr: colors.pallete.primary.color,
|
|
5256
|
+
Shapermint: colors.shades['700'].color,
|
|
5249
5257
|
}); };
|
|
5250
5258
|
var benefitsColorMapper = function (_a) {
|
|
5251
5259
|
var _b;
|
|
@@ -5286,7 +5294,7 @@ var getStylesBySize$d = function (size) {
|
|
|
5286
5294
|
};
|
|
5287
5295
|
}
|
|
5288
5296
|
};
|
|
5289
|
-
var Container$
|
|
5297
|
+
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) {
|
|
5290
5298
|
var backgroundColor = _a.backgroundColor;
|
|
5291
5299
|
return backgroundColor;
|
|
5292
5300
|
}, function (_a) {
|
|
@@ -5308,7 +5316,7 @@ var Container$13 = newStyled.div(templateObject_1$1H || (templateObject_1$1H = _
|
|
|
5308
5316
|
var size = _a.size;
|
|
5309
5317
|
return (_b = getStylesBySize$d(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5310
5318
|
});
|
|
5311
|
-
var H3$3 = newStyled.h3(templateObject_2$
|
|
5319
|
+
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) {
|
|
5312
5320
|
var textColor = _a.textColor;
|
|
5313
5321
|
return textColor;
|
|
5314
5322
|
}, function (_a) {
|
|
@@ -5323,9 +5331,9 @@ var H3$3 = newStyled.h3(templateObject_2$16 || (templateObject_2$16 = __makeTemp
|
|
|
5323
5331
|
var ClubOfferTag = function (_a) {
|
|
5324
5332
|
var clubOfferText = _a.clubOfferText, className = _a.className, disabled = _a.disabled, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? '#882A2B' : _b, _c = _a.borderColor, borderColor = _c === void 0 ? 'transparent' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Medium : _e, style = _a.style;
|
|
5325
5333
|
var theme = useTheme();
|
|
5326
|
-
return (jsx$1(Container$
|
|
5334
|
+
return (jsx$1(Container$14, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "cluboffer-container", style: style, className: className }, { children: jsx$1(H3$3, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: { fontSize: '0.875rem', lineHeight: '18px' } }, { children: clubOfferText }), void 0) }), void 0));
|
|
5327
5335
|
};
|
|
5328
|
-
var templateObject_1$
|
|
5336
|
+
var templateObject_1$1I, templateObject_2$17;
|
|
5329
5337
|
|
|
5330
5338
|
var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
5331
5339
|
var _a, _b, _c;
|
|
@@ -5356,7 +5364,7 @@ var getStylesBySize$c = function (size, bordersRounded, theme) {
|
|
|
5356
5364
|
};
|
|
5357
5365
|
}
|
|
5358
5366
|
};
|
|
5359
|
-
var Container$
|
|
5367
|
+
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) {
|
|
5360
5368
|
var backgroundColor = _a.backgroundColor;
|
|
5361
5369
|
return backgroundColor;
|
|
5362
5370
|
}, function (_a) {
|
|
@@ -5378,7 +5386,7 @@ var Container$12 = newStyled.div(templateObject_1$1G || (templateObject_1$1G = _
|
|
|
5378
5386
|
var size = _a.size;
|
|
5379
5387
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.height;
|
|
5380
5388
|
});
|
|
5381
|
-
var H3$2 = newStyled.h3(templateObject_2$
|
|
5389
|
+
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) {
|
|
5382
5390
|
var textColor = _a.textColor;
|
|
5383
5391
|
return textColor;
|
|
5384
5392
|
}, function (_a) {
|
|
@@ -5390,12 +5398,12 @@ var H3$2 = newStyled.h3(templateObject_2$15 || (templateObject_2$15 = __makeTemp
|
|
|
5390
5398
|
var size = _a.size;
|
|
5391
5399
|
return (_b = getStylesBySize$c(size)) === null || _b === void 0 ? void 0 : _b.lineHeight;
|
|
5392
5400
|
});
|
|
5393
|
-
var DiscountTag = function (_a) {
|
|
5401
|
+
var DiscountTag$1 = function (_a) {
|
|
5394
5402
|
var discount = _a.discount, offText = _a.offText, savings = _a.savings, _b = _a.showSavings, showSavings = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#fff' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? 'transparent' : _d, _e = _a.textColor, textColor = _e === void 0 ? '#fff' : _e, _f = _a.size, size = _f === void 0 ? ComponentSize.Medium : _f, style = _a.style, _g = _a.bordersRounded, bordersRounded = _g === void 0 ? false : _g;
|
|
5395
5403
|
var theme = useTheme();
|
|
5396
|
-
return (jsx$1(Container$
|
|
5404
|
+
return (jsx$1(Container$13, __assign$1({ backgroundColor: disabled ? theme.colors.shades['50'].color : backgroundColor, borderColor: disabled ? theme.colors.shades['50'].color : borderColor, size: size, "data-testid": "discount-container", style: style, bordersRounded: bordersRounded }, { children: jsxs$1(H3$2, __assign$1({ textColor: disabled ? theme.colors.shades['250'].color : textColor, size: size, style: style, theme: theme }, { children: [discount, "% ", offText, " ", showSavings && savings && "- ".concat(savings)] }), void 0) }), void 0));
|
|
5397
5405
|
};
|
|
5398
|
-
var templateObject_1$
|
|
5406
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
5399
5407
|
|
|
5400
5408
|
var getStylesBySize$b = function (size, theme) {
|
|
5401
5409
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -5437,8 +5445,8 @@ var getFontSize = function (size, theme, finalPriceStyled, finalPriceStyledSmall
|
|
|
5437
5445
|
return (_c = getStylesBySize$b(size, theme)) === null || _c === void 0 ? void 0 : _c.fontSize;
|
|
5438
5446
|
}
|
|
5439
5447
|
};
|
|
5440
|
-
var Container$
|
|
5441
|
-
var Price = newStyled.p(templateObject_2$
|
|
5448
|
+
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"])));
|
|
5449
|
+
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) {
|
|
5442
5450
|
var weight = _a.weight;
|
|
5443
5451
|
return (weight ? weight : '400');
|
|
5444
5452
|
}, function (_a) {
|
|
@@ -5462,7 +5470,7 @@ var Price = newStyled.p(templateObject_2$14 || (templateObject_2$14 = __makeTemp
|
|
|
5462
5470
|
var finalPriceStyledSmall = _a.finalPriceStyledSmall, size = _a.size;
|
|
5463
5471
|
return finalPriceStyledSmall ? (size === 'large' ? '-10px' : '-7px') : '0';
|
|
5464
5472
|
});
|
|
5465
|
-
var TagContainer = newStyled.div(templateObject_3$
|
|
5473
|
+
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) {
|
|
5466
5474
|
var _b;
|
|
5467
5475
|
var size = _a.size;
|
|
5468
5476
|
return (_b = getStylesBySize$b(size)) === null || _b === void 0 ? void 0 : _b.margin;
|
|
@@ -5493,11 +5501,11 @@ var PriceLabel = function (_a) {
|
|
|
5493
5501
|
: ComponentSize.XSmall;
|
|
5494
5502
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, margin: !clubStyle, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
5495
5503
|
};
|
|
5496
|
-
return (jsxs$1(Container$
|
|
5504
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle ? (jsxs$1(Fragment$2, { children: [!!originalPrice && jsx$1(OriginalPrice, {}, void 0), jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0)] }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId$1(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: finalPrice }), void 0), !!originalPrice && jsx$1(OriginalPrice, {}, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
5497
5505
|
};
|
|
5498
|
-
var templateObject_1$
|
|
5506
|
+
var templateObject_1$1G, templateObject_2$15, templateObject_3$U;
|
|
5499
5507
|
|
|
5500
|
-
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$
|
|
5508
|
+
var FinalPriceStyledContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5501
5509
|
var PriceLabelV2 = function (_a) {
|
|
5502
5510
|
var _b;
|
|
5503
5511
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, 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"]);
|
|
@@ -5550,13 +5558,13 @@ var PriceLabelV2 = function (_a) {
|
|
|
5550
5558
|
var savetoString = saveto.toFixed(2);
|
|
5551
5559
|
var OriginalPrice = function () { return (jsx$1(Price, __assign$1({ size: originalPriceStyled ? size : ComponentSize.Small, color: theme.component.pricing.priceLabel.price.originalPriceColor ||
|
|
5552
5560
|
theme.colors.shades['300'].color, margin: true, underlined: originalPriceUnderlined, "data-testid": getTestId$1(testId, 'original-product-price') }, { children: originalPrice }), void 0)); };
|
|
5553
|
-
return (jsxs$1(Container$
|
|
5561
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [isOriginalPrice && jsx$1(OriginalPrice, {}, void 0), jsxs$1(FinalPriceStyledContainer$1, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5554
5562
|
marginTop: '-5px',
|
|
5555
5563
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0]
|
|
5556
5564
|
? finalPriceArray[0]
|
|
5557
5565
|
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5558
5566
|
marginTop: '-6px',
|
|
5559
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5567
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0), pricePerItem && (jsx$1(Price, __assign$1({ size: ComponentSize.Small, color: theme.colors.pallete.secondary.color }, { children: "/each" }), void 0))] }), void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag$1, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5560
5568
|
letterSpacing: '-0.05rem',
|
|
5561
5569
|
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "Save ".concat(currencySymbol).concat(savetoString) : undefined }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5562
5570
|
borderRadius: '8px',
|
|
@@ -5568,11 +5576,11 @@ var PriceLabelV2 = function (_a) {
|
|
|
5568
5576
|
lineHeight: '22px',
|
|
5569
5577
|
} }), void 0)) }), void 0))] }), void 0));
|
|
5570
5578
|
};
|
|
5571
|
-
var templateObject_1$
|
|
5579
|
+
var templateObject_1$1F;
|
|
5572
5580
|
|
|
5573
|
-
var FinalPriceStyledContainer = newStyled.div(templateObject_1$
|
|
5574
|
-
var ContainerDirectionColumn = newStyled.div(templateObject_2$
|
|
5575
|
-
var DiscountEachOneContainer = newStyled.div(templateObject_3$
|
|
5581
|
+
var FinalPriceStyledContainer = newStyled.div(templateObject_1$1E || (templateObject_1$1E = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5582
|
+
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"])));
|
|
5583
|
+
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"])));
|
|
5576
5584
|
var PriceLabelV3 = function (_a) {
|
|
5577
5585
|
var _b;
|
|
5578
5586
|
var finalPrice = _a.finalPrice, originalPrice = _a.originalPrice, discount = _a.discount, clubOffer = _a.clubOffer, color = _a.color, testId = _a.testId, _c = _a.originalPriceStyled, originalPriceStyled = _c === void 0 ? false : _c, _d = _a.originalPriceUnderlined, originalPriceUnderlined = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? ComponentSize.Small : _e, _f = _a.bordersRounded, bordersRounded = _f === void 0 ? false : _f, _g = _a.savingsDisplay, savingsDisplay = _g === void 0 ? true : _g, itemsQuantity = _a.itemsQuantity, packUnitPrice = _a.packUnitPrice, rest = __rest(_a, ["finalPrice", "originalPrice", "discount", "clubOffer", "color", "testId", "originalPriceStyled", "originalPriceUnderlined", "size", "bordersRounded", "savingsDisplay", "itemsQuantity", "packUnitPrice"]);
|
|
@@ -5627,11 +5635,11 @@ var PriceLabelV3 = function (_a) {
|
|
|
5627
5635
|
return null;
|
|
5628
5636
|
return (jsxs$1(DiscountEachOneContainer, __assign$1({ "data-testid": getTestId$1(testId, 'each-one-price') }, { children: [jsxs$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ["(", packUnitPrice] }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 400 }, { children: "/each" }), void 0), jsx$1(Price, __assign$1({}, priceCommonProps, { weight: 600 }, { children: ")" }), void 0)] }), void 0));
|
|
5629
5637
|
};
|
|
5630
|
-
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$
|
|
5638
|
+
return (jsxs$1(ContainerDirectionColumn, __assign$1({}, rest, { children: [jsx$1(Container$12, __assign$1({ style: { paddingBottom: '0.5rem' } }, { children: isOriginalPrice && jsx$1(OriginalPrice, {}, void 0) }), void 0), jsxs$1(Container$12, { children: [jsxs$1(FinalPriceStyledContainer, __assign$1({ "data-testid": getTestId$1(testId, 'final-product-price') }, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: {
|
|
5631
5639
|
marginTop: '-5px',
|
|
5632
5640
|
} }, priceCommonProps, { size: size }, { children: currencySymbol }), void 0), jsx$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size }, { children: finalPriceArray[0] ? finalPriceArray[0] : (_b = "".concat(finalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: {
|
|
5633
5641
|
marginTop: '-6px',
|
|
5634
|
-
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5642
|
+
} }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }), void 0), jsx$1(DiscountedPriceOfEach, {}, void 0), isDiscount && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Small }, { children: discount && (jsx$1(DiscountTag$1, __assign$1({}, discount, { size: ComponentSize.Medium, style: {
|
|
5635
5643
|
letterSpacing: '-0.05rem',
|
|
5636
5644
|
}, bordersRounded: bordersRounded, savings: savingsDisplay ? "SAVE ".concat(currencySymbol).concat(savetoString) : undefined, showSavings: true }), void 0)) }), void 0)), isClubOffer && (jsx$1(TagContainer, __assign$1({ size: ComponentSize.Medium }, { children: clubOffer && (jsx$1(ClubOfferTag, __assign$1({}, clubOffer, { size: ComponentSize.Small, style: {
|
|
5637
5645
|
borderRadius: '8px',
|
|
@@ -5643,10 +5651,10 @@ var PriceLabelV3 = function (_a) {
|
|
|
5643
5651
|
lineHeight: '22px',
|
|
5644
5652
|
} }), void 0)) }), void 0))] }, void 0)] }), void 0));
|
|
5645
5653
|
};
|
|
5646
|
-
var templateObject_1$
|
|
5654
|
+
var templateObject_1$1E, templateObject_2$14, templateObject_3$T;
|
|
5647
5655
|
|
|
5648
|
-
var FlexContainer = newStyled.div(templateObject_1$
|
|
5649
|
-
var ContainerBase = newStyled.div(templateObject_2$
|
|
5656
|
+
var FlexContainer$1 = newStyled.div(templateObject_1$1D || (templateObject_1$1D = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5657
|
+
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) {
|
|
5650
5658
|
var selected = _a.selected, theme = _a.theme;
|
|
5651
5659
|
return selected
|
|
5652
5660
|
? "2px solid ".concat(theme.colors.pallete.primary.color)
|
|
@@ -5660,32 +5668,32 @@ var ContainerBase = newStyled.div(templateObject_2$12 || (templateObject_2$12 =
|
|
|
5660
5668
|
var theme = _a.theme;
|
|
5661
5669
|
return theme.colors.pallete.primary.color;
|
|
5662
5670
|
});
|
|
5663
|
-
var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_3$
|
|
5671
|
+
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) {
|
|
5664
5672
|
var onClick = _a.onClick;
|
|
5665
5673
|
return (onClick ? 'cursor: pointer;' : '');
|
|
5666
5674
|
});
|
|
5667
|
-
var SubscriptionContainer = newStyled(ContainerBase)(templateObject_4$
|
|
5668
|
-
var SubscriptionHeader = newStyled.div(templateObject_5$
|
|
5675
|
+
var SubscriptionContainer$1 = newStyled(ContainerBase$1)(templateObject_4$G || (templateObject_4$G = __makeTemplateObject(["\n padding: 16px;\n"], ["\n padding: 16px;\n"])));
|
|
5676
|
+
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) {
|
|
5669
5677
|
var theme = _a.theme;
|
|
5670
5678
|
return theme.colors.shades[200].color;
|
|
5671
5679
|
}, function (_a) {
|
|
5672
5680
|
var theme = _a.theme;
|
|
5673
5681
|
return theme.colors.pallete.primary.color;
|
|
5674
5682
|
});
|
|
5675
|
-
var BenefitsContainer = newStyled.div(templateObject_6$
|
|
5676
|
-
var Benefit = newStyled.div(templateObject_7$
|
|
5677
|
-
var BenefitText = newStyled(Text$7)(templateObject_8$
|
|
5678
|
-
var SubscriptionDetails = newStyled(Text$7)(templateObject_9$
|
|
5679
|
-
var SubscriptionDetailsContainer = newStyled.div(templateObject_10$
|
|
5680
|
-
var DeliveryFrequencyLabel = newStyled(Text$7)(templateObject_11$
|
|
5681
|
-
var StyledPrice = newStyled(PriceLabelV2)(templateObject_12$
|
|
5683
|
+
var BenefitsContainer$1 = newStyled.div(templateObject_6$n || (templateObject_6$n = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5684
|
+
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"])));
|
|
5685
|
+
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"])));
|
|
5686
|
+
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"])));
|
|
5687
|
+
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"])));
|
|
5688
|
+
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"])));
|
|
5689
|
+
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) {
|
|
5682
5690
|
var selected = _a.selected, theme = _a.theme;
|
|
5683
5691
|
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5684
5692
|
});
|
|
5685
|
-
var Container$
|
|
5686
|
-
var templateObject_1$
|
|
5693
|
+
var Container$11 = newStyled.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject([""], [""])));
|
|
5694
|
+
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;
|
|
5687
5695
|
|
|
5688
|
-
var radioIds = {
|
|
5696
|
+
var radioIds$1 = {
|
|
5689
5697
|
oneTime: {
|
|
5690
5698
|
id: 'one-time-purchase',
|
|
5691
5699
|
},
|
|
@@ -5693,18 +5701,18 @@ var radioIds = {
|
|
|
5693
5701
|
id: 'autoship-subscribe-and-save',
|
|
5694
5702
|
},
|
|
5695
5703
|
};
|
|
5696
|
-
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5697
|
-
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5704
|
+
var DEFAULT_DROPDOWN_OPTIONS$1 = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5705
|
+
var DEFAULT_FREQUENCY_UNIT$1 = 'months';
|
|
5698
5706
|
var Autoship = function (_a) {
|
|
5699
|
-
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;
|
|
5707
|
+
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;
|
|
5700
5708
|
var theme = useTheme();
|
|
5701
5709
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5702
5710
|
? frequencyValues.map(function (value) {
|
|
5703
5711
|
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5704
5712
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5705
5713
|
})
|
|
5706
|
-
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5707
|
-
var _c = useState(radioIds.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5714
|
+
: [DEFAULT_DROPDOWN_OPTIONS$1];
|
|
5715
|
+
var _c = useState(radioIds$1.autoship), radioCheck = _c[0], setRadioCheck = _c[1];
|
|
5708
5716
|
var _d = useState(dropdownOptions[0].value), subscriptionPeriod = _d[0], setSubscriptionPeriod = _d[1];
|
|
5709
5717
|
var originalProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.originalPrice) || 0;
|
|
5710
5718
|
var discountedProdPrice = (pricing === null || pricing === void 0 ? void 0 : pricing.discountedPrice) || 0;
|
|
@@ -5713,7 +5721,7 @@ var Autoship = function (_a) {
|
|
|
5713
5721
|
var createDataObject = function () {
|
|
5714
5722
|
return {
|
|
5715
5723
|
subscriptionPeriod: subscriptionPeriod,
|
|
5716
|
-
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5724
|
+
autoship: radioCheck.id === radioIds$1.autoship.id,
|
|
5717
5725
|
originalPrice: discountedProdPrice,
|
|
5718
5726
|
discountedPrice: Number(discountedAutoshipPrice),
|
|
5719
5727
|
};
|
|
@@ -5721,6 +5729,103 @@ var Autoship = function (_a) {
|
|
|
5721
5729
|
useEffect(function () {
|
|
5722
5730
|
onChange(createDataObject());
|
|
5723
5731
|
}, []);
|
|
5732
|
+
var handleChange = function (value, type) {
|
|
5733
|
+
var dataObj = createDataObject();
|
|
5734
|
+
if (type === 'radio') {
|
|
5735
|
+
setRadioCheck(value);
|
|
5736
|
+
onChange(__assign$1(__assign$1({}, dataObj), { autoship: value.id === radioIds$1.autoship.id }));
|
|
5737
|
+
return;
|
|
5738
|
+
}
|
|
5739
|
+
setSubscriptionPeriod(value);
|
|
5740
|
+
dataObj.subscriptionPeriod = value;
|
|
5741
|
+
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5742
|
+
};
|
|
5743
|
+
var benefitsColor = benefitsColorMapper(theme);
|
|
5744
|
+
return (jsxs$1(Container$11, __assign$1({ className: className }, { children: [jsxs$1(SinglePurchaseContainer$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedProdPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsxs$1(SubscriptionContainer$1, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxs$1(SubscriptionHeader$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds$1.autoship, 'radio'); } }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(discountedAutoshipPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(originalProdPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer$1, { children: autoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit$1, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
5745
|
+
? benefitsColor.selected
|
|
5746
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds$1.autoship.id === radioCheck.id && (jsxs$1(Fragment$2, { children: [jsxs$1(FlexContainer$1, { children: [jsx$1(DeliveryFrequencyLabel$1, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frecuency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0), jsx$1(SubscriptionDetailsContainer, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsxs$1(FlexContainer$1, { children: [jsx$1(SubscriptionDetails, __assign$1({ variant: "body", weight: "demi" }, { children: "Subscription Details" }), void 0), jsx$1(Icon.Actions.CircleQuestion, { width: 1.2 }, void 0)] }, void 0) }), void 0) }, void 0)] }, void 0))] }), void 0)] }), void 0));
|
|
5747
|
+
};
|
|
5748
|
+
|
|
5749
|
+
var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
5750
|
+
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"])));
|
|
5751
|
+
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) {
|
|
5752
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5753
|
+
return selected
|
|
5754
|
+
? "1.5px solid ".concat(theme.colors.shades['700'].color)
|
|
5755
|
+
: "1px solid ".concat(theme.colors.shades[200].color);
|
|
5756
|
+
}, function (_a) {
|
|
5757
|
+
var selected = _a.selected;
|
|
5758
|
+
return selected
|
|
5759
|
+
? "& label {\n font-weight: 700;\n }"
|
|
5760
|
+
: '';
|
|
5761
|
+
}, function (_a) {
|
|
5762
|
+
var theme = _a.theme;
|
|
5763
|
+
return theme.colors.pallete.primary.color;
|
|
5764
|
+
});
|
|
5765
|
+
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) {
|
|
5766
|
+
var onClick = _a.onClick;
|
|
5767
|
+
return (onClick ? 'cursor: pointer;' : '');
|
|
5768
|
+
});
|
|
5769
|
+
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"])));
|
|
5770
|
+
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) {
|
|
5771
|
+
var theme = _a.theme;
|
|
5772
|
+
return theme.colors.shades[200].color;
|
|
5773
|
+
}, function (_a) {
|
|
5774
|
+
var theme = _a.theme;
|
|
5775
|
+
return theme.colors.pallete.primary.color;
|
|
5776
|
+
});
|
|
5777
|
+
var BenefitsContainer = newStyled.div(templateObject_7$f || (templateObject_7$f = __makeTemplateObject(["\n margin-bottom: 5px;\n"], ["\n margin-bottom: 5px;\n"])));
|
|
5778
|
+
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"])));
|
|
5779
|
+
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"])));
|
|
5780
|
+
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"])));
|
|
5781
|
+
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) {
|
|
5782
|
+
var selected = _a.selected, theme = _a.theme;
|
|
5783
|
+
return selected ? theme.colors.shades[700].color : theme.colors.shades[200].color;
|
|
5784
|
+
});
|
|
5785
|
+
var Container$10 = newStyled.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n margin-top: 20px;\n"], ["\n margin-top: 20px;\n"])));
|
|
5786
|
+
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;
|
|
5787
|
+
|
|
5788
|
+
var radioIds = {
|
|
5789
|
+
oneTime: {
|
|
5790
|
+
id: 'one-time-purchase',
|
|
5791
|
+
},
|
|
5792
|
+
autoship: {
|
|
5793
|
+
id: 'autoship-subscribe-and-save',
|
|
5794
|
+
},
|
|
5795
|
+
};
|
|
5796
|
+
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5797
|
+
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5798
|
+
var AutoshipV2 = function (_a) {
|
|
5799
|
+
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;
|
|
5800
|
+
var theme = useTheme();
|
|
5801
|
+
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5802
|
+
? frequencyValues.map(function (value) {
|
|
5803
|
+
var label = "".concat(value, " ").concat(value === 1 ? frequencyUnit.slice(0, -1) : frequencyUnit);
|
|
5804
|
+
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5805
|
+
})
|
|
5806
|
+
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5807
|
+
var _d = useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5808
|
+
var _e = useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5809
|
+
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5810
|
+
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
5811
|
+
var autoshipFinalPrice = Number((discountedPrice - autoShipAdditionalDiscount).toFixed(2));
|
|
5812
|
+
var autoShipSaving = Math.floor(listPrice - autoshipFinalPrice);
|
|
5813
|
+
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5814
|
+
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5815
|
+
var updatedAutoshipBenefits = __spreadArray([
|
|
5816
|
+
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5817
|
+
], autoshipBenefits.slice(0), true);
|
|
5818
|
+
var createDataObject = function () {
|
|
5819
|
+
return {
|
|
5820
|
+
subscriptionPeriod: subscriptionPeriod,
|
|
5821
|
+
autoship: radioCheck.id === radioIds.autoship.id,
|
|
5822
|
+
originalPrice: listPrice,
|
|
5823
|
+
discountedPrice: Number(autoshipFinalPrice),
|
|
5824
|
+
};
|
|
5825
|
+
};
|
|
5826
|
+
useEffect(function () {
|
|
5827
|
+
onChange(createDataObject());
|
|
5828
|
+
}, []);
|
|
5724
5829
|
var handleChange = function (value, type) {
|
|
5725
5830
|
var dataObj = createDataObject();
|
|
5726
5831
|
if (type === 'radio') {
|
|
@@ -5733,9 +5838,17 @@ var Autoship = function (_a) {
|
|
|
5733
5838
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5734
5839
|
};
|
|
5735
5840
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5736
|
-
|
|
5841
|
+
function DeliveryFrequencySelector() {
|
|
5842
|
+
if (dropdownOptions.length > 1) {
|
|
5843
|
+
return (jsxs$1(Fragment$2, { children: [jsx$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsx$1(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0));
|
|
5844
|
+
}
|
|
5845
|
+
else {
|
|
5846
|
+
return (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0));
|
|
5847
|
+
}
|
|
5848
|
+
}
|
|
5849
|
+
return (jsxs$1(Container$10, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag, { children: "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxs$1(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxs$1(FlexContainer, { children: [jsx$1(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsx$1("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "300px", showCloseIcon: closeIcon }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsx$1(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxs$1(Benefit, { children: [jsx$1(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5737
5850
|
? benefitsColor.selected
|
|
5738
|
-
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (
|
|
5851
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText, __assign$1({ variant: "body" }, { children: benefit }), void 0)] }, benefit)); }) }, void 0), radioIds.autoship.id === radioCheck.id && (jsx$1(Fragment$2, { children: jsx$1(FlexContainer, { children: jsx$1(DeliveryFrequencySelector, {}, void 0) }, void 0) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsx$1(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true }, void 0), jsx$1(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5739
5852
|
};
|
|
5740
5853
|
|
|
5741
5854
|
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; });
|
|
@@ -6220,9 +6333,9 @@ var PriceLabelV4 = function (_a) {
|
|
|
6220
6333
|
: ComponentSize.XSmall;
|
|
6221
6334
|
return (jsx$1(Price, __assign$1({ size: sizeProp, color: theme.component.pricing.priceLabel.price.originalPriceColor, underlined: originalPriceUnderlined, "data-testid": getTestId(testId, 'original-product-price'), theme: theme }, { children: originalPrice }), void 0));
|
|
6222
6335
|
};
|
|
6223
|
-
return (jsxs$1(Container$
|
|
6336
|
+
return (jsxs$1(Container$12, __assign$1({}, rest, { children: [clubStyle && !styledPrice ? (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsx$1(Price, __assign$1({ margin: true, "data-testid": getTestId(testId, 'final-product-price') }, priceCommonProps, { style: finalPriceStyle, size: size }, { children: clubPrice }), void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)) : (jsxs$1(PriceContainer$1, { children: [jsxs$1(PriceWithTagContainer, { children: [jsx$1(OriginalPrice, {}, void 0), jsx$1(RegularPriceTag, {}, void 0)] }, void 0), jsxs$1(PriceWithTagContainer, { children: [jsxs$1(PriceContainerV2, { children: [jsx$1(Price, __assign$1({ margin: true, finalPriceStyledSmall: true, style: { marginTop: '-5px', color: '#c64844' } }, priceCommonProps, { size: size, "data-testid": getTestId(testId, 'final-product-price') }, { children: currencySymbol }), void 0), jsxs$1(Price, __assign$1({ finalPriceStyled: true }, priceCommonProps, { size: size, style: { color: '#c64844' } }, { children: [finalPriceArray[0]
|
|
6224
6337
|
? finalPriceArray[0]
|
|
6225
|
-
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6338
|
+
: (_b = "".concat(productFinalPrice)) === null || _b === void 0 ? void 0 : _b.split(currencySymbol)[1], "."] }), void 0), jsx$1(Price, __assign$1({ finalPriceStyledSmall: true, style: { marginTop: '-6px', color: '#c64844' } }, priceCommonProps, { size: size }, { children: finalPriceArray[1] ? finalPriceArray[1] : '00' }), void 0)] }, void 0), jsx$1(ClubPriceTag, {}, void 0)] }, void 0)] }, void 0)), discount && (jsx$1(TagContainer, __assign$1({ size: size }, { children: jsx$1(DiscountTag$1, __assign$1({}, discount, { size: size }), void 0) }), void 0))] }), void 0));
|
|
6226
6339
|
};
|
|
6227
6340
|
var templateObject_1$1h, templateObject_2$W, templateObject_3$J, templateObject_4$y, templateObject_5$o;
|
|
6228
6341
|
|
|
@@ -19666,5 +19779,5 @@ var Spinner = function (_a) {
|
|
|
19666
19779
|
return (jsx$1(Container, __assign$1({ size: size, "data-testid": "Container" }, { children: complete ? (jsx$1(Icon.Actions.LightCheck, { fill: fill, svgProps: { strokeWidth: completeIconStroke } }, void 0)) : (jsx$1(StyledSpinner, { duration: animationDuration, "data-testid": "Loading", color: fill, background: background, size: borderSize !== null && borderSize !== void 0 ? borderSize : ComponentSize.Small }, void 0)) }), void 0));
|
|
19667
19780
|
};
|
|
19668
19781
|
|
|
19669
|
-
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19782
|
+
export { AbsorbencyLevel, Accordion$1 as Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, BuyNowPayLater, Card$2 as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ComponentPosition, ComponentSize, index$1 as CrossSell, DeliveryDetails, DiscountTag$1 as DiscountTag, Drawer, DropdownDialog, DropdownListIcons, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, Global, HurryUp, Icon, IconButton, IconsWithTitle, Image$3 as Image, ImageCardWithDescription, Input$3 as Input, InputValidationType, Icon$1 as LibIcon, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProgressBar, QuantityPicker, RadioGroupInput, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, StarList, StrengthBars, Tab, Tabs, Text$7 as Text, TextButton, TextWithImage, ThemeProvider, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, componentSizeMapper, css, decimalFormat, formatPrice, getSrcSet, isEmail, isEmpty, isNumber$1 as isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, newStyled as styled, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
|
|
19670
19783
|
//# sourceMappingURL=index.esm.js.map
|