@trafilea/afrodita-components 6.14.3 → 6.15.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 +9 -3
- package/build/index.esm.js +26 -16
- package/build/index.esm.js.map +1 -1
- package/build/index.js +26 -16
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -5230,7 +5230,10 @@ var Title$7 = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTem
|
|
|
5230
5230
|
return color;
|
|
5231
5231
|
});
|
|
5232
5232
|
var IconContainer$5 = newStyled.div(templateObject_7$i || (templateObject_7$i = __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"])));
|
|
5233
|
-
var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right:
|
|
5233
|
+
var CloseToolTip = newStyled.button(templateObject_8$g || (templateObject_8$g = __makeTemplateObject(["\n position: absolute;\n background: none;\n border: none;\n cursor: pointer;\n right: ", ";\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: ", ";\n top: 0.25rem;\n padding: 0px;\n z-index: 2;\n"])), function (_a) {
|
|
5234
|
+
var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
|
|
5235
|
+
return right;
|
|
5236
|
+
});
|
|
5234
5237
|
var templateObject_1$1J, templateObject_2$19, templateObject_3$W, templateObject_4$I, templateObject_5$v, templateObject_6$q, templateObject_7$i, templateObject_8$g;
|
|
5235
5238
|
|
|
5236
5239
|
var useOnClickOutside = function (ref, handler) {
|
|
@@ -5307,13 +5310,13 @@ var useWindowDimensions = function (breakpoints, _a) {
|
|
|
5307
5310
|
|
|
5308
5311
|
var Tooltip = function (_a) {
|
|
5309
5312
|
var _b;
|
|
5310
|
-
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d;
|
|
5313
|
+
var children = _a.children, position = _a.position, content = _a.content, backgroundColor = _a.backgroundColor, showCloseIcon = _a.showCloseIcon, _c = _a.align, align = _c === void 0 ? 'center' : _c, maxWidth = _a.maxWidth, onClick = _a.onClick, header = _a.header, _d = _a.withArrow, withArrow = _d === void 0 ? false : _d, _e = _a.closeBtnSize, closeBtnSize = _e === void 0 ? 0.5 : _e;
|
|
5311
5314
|
var theme = useTheme();
|
|
5312
|
-
var
|
|
5315
|
+
var _f = React$2.useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
5313
5316
|
var childrenRef = React$2.createRef();
|
|
5314
|
-
var
|
|
5317
|
+
var _g = React$2.useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
|
|
5315
5318
|
var tooltipRef = React$2.createRef();
|
|
5316
|
-
var
|
|
5319
|
+
var _h = React$2.useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
|
|
5317
5320
|
var isMobile = useWindowDimensions().isMobile;
|
|
5318
5321
|
React$2.useLayoutEffect(function () {
|
|
5319
5322
|
var ref = childrenRef.current;
|
|
@@ -5323,12 +5326,12 @@ var Tooltip = function (_a) {
|
|
|
5323
5326
|
var ref = tooltipRef.current;
|
|
5324
5327
|
setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
|
|
5325
5328
|
}, [tooltipRef]);
|
|
5326
|
-
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip
|
|
5329
|
+
return (jsxRuntime.jsxs(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsxRuntime.jsx("div", __assign$1({ ref: childrenRef, onClick: function () { return closeTooltip && setCloseTooltip(false); }, onKeyDown: function (e) { return e.key === 'Enter' && closeTooltip && setCloseTooltip(false); }, role: "button", tabIndex: 0 }, { children: children }), void 0), jsxRuntime.jsxs(TooltipContainer, __assign$1({ position: position, align: align, maxWidth: maxWidth, childrenWidth: childrenWidth, tooltipHeight: tooltipHeight, ref: tooltipRef, onClick: onClick, "data-testid": "TooltipContainer", className: "tooltip-container ".concat(closeTooltip ? 'hidden' : ''), borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor ? backgroundColor : theme.colors.shades.white.color, withArrow: withArrow }, { children: [(showCloseIcon || isMobile) && (jsxRuntime.jsx(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsxRuntime.jsx(Icon.Actions.Close, { width: closeBtnSize, height: closeBtnSize, fill: (_b = header === null || header === void 0 ? void 0 : header.iconFill) !== null && _b !== void 0 ? _b : theme.colors.pallete.secondary.color }, void 0) }), void 0)), jsxRuntime.jsxs(ContentWrapper, __assign$1({ className: "tooltip-wrapper", borderColor: theme.colors.shades['200'].color, backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : theme.colors.shades.white.color }, { children: [header && (jsxRuntime.jsxs(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsxRuntime.jsx(IconContainer$5, { children: React__default["default"].createElement(header.Icon, {
|
|
5327
5330
|
testId: 'HeaderIcon',
|
|
5328
5331
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5329
5332
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5330
5333
|
: theme.colors.pallete.secondary.color,
|
|
5331
|
-
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText,
|
|
5334
|
+
}) }, void 0)), jsxRuntime.jsx(Title$7, __assign$1({ color: (header === null || header === void 0 ? void 0 : header.titleColor) ? header === null || header === void 0 ? void 0 : header.titleColor : theme.colors.pallete.secondary.color }, { children: header.title }), void 0)] }), void 0)), content && (content === null || content === void 0 ? void 0 : content.text) && (jsxRuntime.jsx(TooltipText, { color: (content === null || content === void 0 ? void 0 : content.color) ? content === null || content === void 0 ? void 0 : content.color : theme.colors.pallete.secondary.color, style: { textAlign: 'left', maxWidth: '243px' }, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
|
|
5332
5335
|
};
|
|
5333
5336
|
|
|
5334
5337
|
var colorsMapper = function (colors) { return ({
|
|
@@ -5831,12 +5834,14 @@ var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
|
|
|
5831
5834
|
return theme.name === 'TheSpaDr' &&
|
|
5832
5835
|
"\n [data-testid='subscription-frequency'] {\n border: 0;\n padding-left: 0 !important;\n padding-right: 32px !important;\n }\n\n [role='listbox']{\n margin-left: -20px;\n }\n ";
|
|
5833
5836
|
});
|
|
5834
|
-
var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n top: -
|
|
5835
|
-
var theme = _a.theme;
|
|
5836
|
-
return
|
|
5837
|
+
var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"], ["\n position: absolute;\n top: -24px;\n right: 18px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n font-weight: bold;\n line-height: 14px;\n border-radius: ", ";\n"])), function (_a) {
|
|
5838
|
+
var theme = _a.theme, isSelected = _a.isSelected;
|
|
5839
|
+
return isSelected
|
|
5840
|
+
? theme.component.autoship.discountTag.backgroundColor
|
|
5841
|
+
: theme.colors.shades[350].color;
|
|
5837
5842
|
}, function (_a) {
|
|
5838
5843
|
var theme = _a.theme;
|
|
5839
|
-
return theme.component.autoship.discountTag.borderRadius;
|
|
5844
|
+
return "".concat(theme.component.autoship.discountTag.borderRadius, " \n ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
|
|
5840
5845
|
});
|
|
5841
5846
|
var getSelectedBorder = function (_a) {
|
|
5842
5847
|
var name = _a.name, colors = _a.colors;
|
|
@@ -5891,7 +5896,7 @@ var radioIds = {
|
|
|
5891
5896
|
var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
|
|
5892
5897
|
var DEFAULT_FREQUENCY_UNIT = 'months';
|
|
5893
5898
|
var AutoshipV2 = function (_a) {
|
|
5894
|
-
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, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel;
|
|
5899
|
+
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, benefits = _a.benefits, onChange = _a.onChange, singlePurchaseLabel = _a.singlePurchaseLabel, subscriptionLabel = _a.subscriptionLabel, className = _a.className, closeIcon = _a.closeIcon, _c = _a.currencySymbol, currencySymbol = _c === void 0 ? '$' : _c, discountLabel = _a.discountLabel, disabledInputs = _a.disabledInputs;
|
|
5895
5900
|
var theme = useTheme();
|
|
5896
5901
|
var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
|
|
5897
5902
|
? frequencyValues.map(function (value) {
|
|
@@ -5899,7 +5904,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5899
5904
|
return { key: "".concat(value), label: label, value: value, disabled: false };
|
|
5900
5905
|
})
|
|
5901
5906
|
: [DEFAULT_DROPDOWN_OPTIONS];
|
|
5902
|
-
var
|
|
5907
|
+
var initialRadioChecked = radioIds.autoship &&
|
|
5908
|
+
((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds.autoship.id)) ? radioIds.oneTime : radioIds.autoship);
|
|
5909
|
+
var _d = React$2.useState(initialRadioChecked), radioCheck = _d[0], setRadioCheck = _d[1];
|
|
5903
5910
|
var _e = React$2.useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
|
|
5904
5911
|
var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
|
|
5905
5912
|
var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
|
|
@@ -5908,7 +5915,7 @@ var AutoshipV2 = function (_a) {
|
|
|
5908
5915
|
var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
|
|
5909
5916
|
var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
|
|
5910
5917
|
var updatedAutoshipBenefits = benefits !== null && benefits !== void 0 ? benefits : __spreadArray([
|
|
5911
|
-
"Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
|
|
5918
|
+
"<span style=\"font-weight: 600\">Save up to ".concat(autoShipPctOverListPriceRounded, "% always.</span>")
|
|
5912
5919
|
], autoshipBenefits.slice(0), true);
|
|
5913
5920
|
var createDataObject = function () {
|
|
5914
5921
|
return {
|
|
@@ -5922,6 +5929,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5922
5929
|
onChange(createDataObject());
|
|
5923
5930
|
}, []);
|
|
5924
5931
|
var handleChange = function (value, type) {
|
|
5932
|
+
if (disabledInputs && disabledInputs.includes(value.id)) {
|
|
5933
|
+
return;
|
|
5934
|
+
}
|
|
5925
5935
|
var dataObj = createDataObject();
|
|
5926
5936
|
if (type === 'radio') {
|
|
5927
5937
|
setRadioCheck(value);
|
|
@@ -5933,9 +5943,9 @@ var AutoshipV2 = function (_a) {
|
|
|
5933
5943
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
5934
5944
|
};
|
|
5935
5945
|
var benefitsColor = benefitsColorMapper(theme);
|
|
5936
|
-
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }, void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "
|
|
5946
|
+
return (jsxRuntime.jsxs(Container$11, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ "data-testid": "subscription-purchase-block", selected: radioIds.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ isSelected: radioIds.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ onClick: function () { return handleChange(radioIds.autoship, 'radio'); } }, { children: [jsxRuntime.jsxs(FlexContainer, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds.autoship.id, id: radioIds.autoship.id, value: radioIds.autoship.id, checked: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.autoship, 'radio'); }, style: { marginRight: '10px' }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, void 0), jsxRuntime.jsx("div", __assign$1({ style: { marginTop: '5px', marginLeft: '5px' } }, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsxRuntime.jsx(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }), void 0)] }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), jsxRuntime.jsx(BenefitsContainer, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds.autoship.id === radioCheck.id
|
|
5937
5947
|
? benefitsColor.selected
|
|
5938
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText,
|
|
5948
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(FlexContainer, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: "Deliver every:" }), void 0), jsxRuntime.jsx(SimpleDropdown, { testId: "subscription-frequency", initialValue: dropdownOptions[0], options: dropdownOptions, onChange: function (value) { return handleChange(value.value, 'dropdown'); }, placeHolder: "" }, void 0)] }, void 0)) : (jsxRuntime.jsxs(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds.oneTime.id, id: radioIds.oneTime.id, value: radioIds.oneTime.id, checked: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { return handleChange(radioIds.oneTime, 'radio'); }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "single-purchase", finalPrice: "$".concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
5939
5949
|
};
|
|
5940
5950
|
|
|
5941
5951
|
var _a$2;
|