@trafilea/afrodita-components 6.29.0 → 6.29.2
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 +2 -1
- package/build/index.esm.js +11 -11
- package/build/index.js +11 -11
- package/package.json +1 -1
package/build/index.d.ts
CHANGED
|
@@ -3645,6 +3645,7 @@ interface TooltipProps {
|
|
|
3645
3645
|
text: string;
|
|
3646
3646
|
color?: string;
|
|
3647
3647
|
};
|
|
3648
|
+
elementContent?: React__default.ReactNode;
|
|
3648
3649
|
backgroundColor?: string;
|
|
3649
3650
|
maxWidth?: string;
|
|
3650
3651
|
showCloseIcon?: boolean;
|
|
@@ -3659,7 +3660,7 @@ interface TooltipProps {
|
|
|
3659
3660
|
withArrow?: boolean;
|
|
3660
3661
|
closeBtnSize?: number;
|
|
3661
3662
|
}
|
|
3662
|
-
declare const Tooltip: ({ children, position, content, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, }: TooltipProps) => JSX.Element;
|
|
3663
|
+
declare const Tooltip: ({ children, position, content, elementContent, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, }: TooltipProps) => JSX.Element;
|
|
3663
3664
|
|
|
3664
3665
|
declare type SubtotalOption = {
|
|
3665
3666
|
label: string;
|
package/build/index.esm.js
CHANGED
|
@@ -5925,7 +5925,7 @@ var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObjec
|
|
|
5925
5925
|
|
|
5926
5926
|
var Tooltip = function (_a) {
|
|
5927
5927
|
var _b;
|
|
5928
|
-
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;
|
|
5928
|
+
var children = _a.children, position = _a.position, content = _a.content, elementContent = _a.elementContent, 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;
|
|
5929
5929
|
var theme = useTheme();
|
|
5930
5930
|
var _f = useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
5931
5931
|
var childrenRef = createRef();
|
|
@@ -5946,7 +5946,7 @@ var Tooltip = function (_a) {
|
|
|
5946
5946
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5947
5947
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5948
5948
|
: theme.colors.pallete.secondary.color,
|
|
5949
|
-
}) }, void 0)), jsx$1(Title$a, __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)
|
|
5949
|
+
}) }, void 0)), jsx$1(Title$a, __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) ? (jsx$1(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, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
|
|
5950
5950
|
};
|
|
5951
5951
|
|
|
5952
5952
|
var colorsMapper = function (colors) { return ({
|
|
@@ -6175,9 +6175,9 @@ var AutoshipV2 = function (_a) {
|
|
|
6175
6175
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6176
6176
|
};
|
|
6177
6177
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6178
|
-
return (jsxs$1(Container$16, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, { children: [jsxs$1(FlexContainer$1, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "
|
|
6178
|
+
return (jsxs$1(Container$16, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsx$1(DiscountTag$1, __assign$1({ isSelected: radioIds$1.autoship.id === radioCheck.id }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(autoShipPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(autoShipSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader$1, { children: [jsxs$1(FlexContainer$1, { 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, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltipContent, header: tooltipHeader, maxWidth: "248px", showCloseIcon: closeIcon, closeBtnSize: 0.7 }, { children: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }, void 0), jsx$1(StyledPrice$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer$1, { children: updatedAutoshipBenefits.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
|
|
6179
6179
|
? benefitsColor.selected
|
|
6180
|
-
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { 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)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), 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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "
|
|
6180
|
+
: benefitsColor.base }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(Fragment$2, { children: dropdownOptions.length > 1 ? (jsxs$1(FlexContainer$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { 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)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), void 0)) }, void 0)] }), void 0), 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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsx$1(StyledPrice$1, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6181
6181
|
};
|
|
6182
6182
|
|
|
6183
6183
|
var _a$2;
|
|
@@ -7009,10 +7009,10 @@ var MultiColorPicker = function (_a) {
|
|
|
7009
7009
|
|
|
7010
7010
|
var renderOptions = function (options, showCross) {
|
|
7011
7011
|
if (showCross === void 0) { showCross = false; }
|
|
7012
|
-
if (options.length === 0) {
|
|
7012
|
+
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7013
7013
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7014
7014
|
}
|
|
7015
|
-
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7015
|
+
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7016
7016
|
var checked = _a.checked;
|
|
7017
7017
|
if (option.meta.color) {
|
|
7018
7018
|
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
@@ -14918,7 +14918,7 @@ var Container$y = newStyled.div(function (_a) {
|
|
|
14918
14918
|
background: backgroundColor,
|
|
14919
14919
|
});
|
|
14920
14920
|
});
|
|
14921
|
-
var
|
|
14921
|
+
var MessageContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14922
14922
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14923
14923
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14924
14924
|
};
|
|
@@ -14940,11 +14940,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14940
14940
|
var getRemainingAmountMessage = function () {
|
|
14941
14941
|
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
14942
14942
|
if (isClubBarMotivatorTest) {
|
|
14943
|
-
return (jsxs$1(
|
|
14943
|
+
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsx$1("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
14944
14944
|
}
|
|
14945
|
-
return (jsxs$1(
|
|
14945
|
+
return (jsxs$1(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsx$1("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14946
14946
|
};
|
|
14947
|
-
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(
|
|
14947
|
+
return (jsxs$1(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxs$1(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxs$1(Value, { children: [currencyCode, currentAmount] }, void 0), jsx$1(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsx$1(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxs$1(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsx$1(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14948
14948
|
};
|
|
14949
14949
|
var templateObject_1$K, templateObject_2$A;
|
|
14950
14950
|
|
|
@@ -20449,7 +20449,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20449
20449
|
marginRight: '10px',
|
|
20450
20450
|
}, labelStyle: {
|
|
20451
20451
|
color: ClubBorderColor,
|
|
20452
|
-
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "
|
|
20452
|
+
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsx$1(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsx$1(Benefit, { children: jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ isNoMember: true, "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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsx$1(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20453
20453
|
};
|
|
20454
20454
|
|
|
20455
20455
|
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
package/build/index.js
CHANGED
|
@@ -5951,7 +5951,7 @@ var templateObject_1$1N, templateObject_2$1f, templateObject_3$10, templateObjec
|
|
|
5951
5951
|
|
|
5952
5952
|
var Tooltip = function (_a) {
|
|
5953
5953
|
var _b;
|
|
5954
|
-
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;
|
|
5954
|
+
var children = _a.children, position = _a.position, content = _a.content, elementContent = _a.elementContent, 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;
|
|
5955
5955
|
var theme = useTheme();
|
|
5956
5956
|
var _f = React$2.useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
|
|
5957
5957
|
var childrenRef = React$2.createRef();
|
|
@@ -5972,7 +5972,7 @@ var Tooltip = function (_a) {
|
|
|
5972
5972
|
fill: (header === null || header === void 0 ? void 0 : header.iconFill)
|
|
5973
5973
|
? header === null || header === void 0 ? void 0 : header.iconFill
|
|
5974
5974
|
: theme.colors.pallete.secondary.color,
|
|
5975
|
-
}) }, void 0)), jsxRuntime.jsx(Title$a, __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)
|
|
5975
|
+
}) }, void 0)), jsxRuntime.jsx(Title$a, __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, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0)) : (elementContent)] }), void 0)] }), void 0)] }), void 0));
|
|
5976
5976
|
};
|
|
5977
5977
|
|
|
5978
5978
|
var colorsMapper = function (colors) { return ({
|
|
@@ -6201,9 +6201,9 @@ var AutoshipV2 = function (_a) {
|
|
|
6201
6201
|
onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
|
|
6202
6202
|
};
|
|
6203
6203
|
var benefitsColor = benefitsColorMapper(theme);
|
|
6204
|
-
return (jsxRuntime.jsxs(Container$16, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$1, __assign$1({ isSelected: radioIds$1.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$1, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper, { 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$1, { testId: "subscription", finalPrice: "
|
|
6204
|
+
return (jsxRuntime.jsxs(Container$16, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer$1, __assign$1({ onClick: function () { return handleChange(radioIds$1.autoship, 'radio'); }, "data-testid": "subscription-purchase-block", selected: radioIds$1.autoship.id === radioCheck.id }, { children: [jsxRuntime.jsx(DiscountTag$1, __assign$1({ isSelected: radioIds$1.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$1, { children: [jsxRuntime.jsxs(FlexContainer$1, { children: [jsxRuntime.jsx(RadioInput, { label: subscriptionLabel, name: radioIds$1.autoship.id, id: radioIds$1.autoship.id, value: radioIds$1.autoship.id, checked: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds$1.autoship.id) }, void 0), jsxRuntime.jsx(TooltipWrapper, { 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$1, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(autoshipFinalPrice))), selected: radioIds$1.autoship.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer$1, { children: updatedAutoshipBenefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$1, { children: [jsxRuntime.jsx(Icon.Actions.Check, { width: 1.2, height: 1.2, fill: radioIds$1.autoship.id === radioCheck.id
|
|
6205
6205
|
? benefitsColor.selected
|
|
6206
|
-
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { 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$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "single-purchase", finalPrice: "
|
|
6206
|
+
: benefitsColor.base }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsxRuntime.jsx(jsxRuntime.Fragment, { children: dropdownOptions.length > 1 ? (jsxRuntime.jsxs(FlexContainer$1, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { 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$1, __assign$1({ "data-testid": "single-purchase-block", selected: radioIds$1.oneTime.id === radioCheck.id, onClick: function () { return handleChange(radioIds$1.oneTime, 'radio'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: singlePurchaseLabel, name: radioIds$1.oneTime.id, id: radioIds$1.oneTime.id, value: radioIds$1.oneTime.id, checked: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Medium, onChange: function () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds$1.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice$1, { testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds$1.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
6207
6207
|
};
|
|
6208
6208
|
|
|
6209
6209
|
var _a$2;
|
|
@@ -7035,10 +7035,10 @@ var MultiColorPicker = function (_a) {
|
|
|
7035
7035
|
|
|
7036
7036
|
var renderOptions = function (options, showCross) {
|
|
7037
7037
|
if (showCross === void 0) { showCross = false; }
|
|
7038
|
-
if (options.length === 0) {
|
|
7038
|
+
if ((options === null || options === void 0 ? void 0 : options.length) === 0) {
|
|
7039
7039
|
return jsx(OutOfStock, { title: "out of stock color" }, void 0);
|
|
7040
7040
|
}
|
|
7041
|
-
return options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7041
|
+
return options === null || options === void 0 ? void 0 : options.map(function (option) { return (jsx(ColorRadioGroup$1.Option, __assign$1({ value: option }, { children: function (_a) {
|
|
7042
7042
|
var checked = _a.checked;
|
|
7043
7043
|
if (option.meta.color) {
|
|
7044
7044
|
return (jsx(ColorSelector, { color: option.meta.color, selected: checked, testId: "".concat(option.label.split(' ').join('-').toLowerCase(), "-selector"), noStock: option.noStock, showCross: showCross }, void 0));
|
|
@@ -14944,7 +14944,7 @@ var Container$y = newStyled.div(function (_a) {
|
|
|
14944
14944
|
background: backgroundColor,
|
|
14945
14945
|
});
|
|
14946
14946
|
});
|
|
14947
|
-
var
|
|
14947
|
+
var MessageContainer = newStyled.div(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n padding: 0 1rem;\n text-align: center;\n"], ["\n padding: 0 1rem;\n text-align: center;\n"])));
|
|
14948
14948
|
var getBarWithBasedOnPercent$1 = function (percent) {
|
|
14949
14949
|
return percent <= 100 && percent >= 0 ? "".concat(percent, "%") : '0%';
|
|
14950
14950
|
};
|
|
@@ -14966,11 +14966,11 @@ var MotivatorProgressBar = function (_a) {
|
|
|
14966
14966
|
var getRemainingAmountMessage = function () {
|
|
14967
14967
|
var remainingAmount = Math.round((endingValue - currentAmount) * 100) / 100;
|
|
14968
14968
|
if (isClubBarMotivatorTest) {
|
|
14969
|
-
return (jsxRuntime.jsxs(
|
|
14969
|
+
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to unlock ", jsxRuntime.jsx("strong", { children: "Free Priority Shipping" }, void 0), " with Club!"] }, void 0));
|
|
14970
14970
|
}
|
|
14971
|
-
return (jsxRuntime.jsxs(
|
|
14971
|
+
return (jsxRuntime.jsxs(MessageContainer, { children: ["Spend ", currencyCode, remainingAmount, " more to get ", jsxRuntime.jsx("strong", { children: "Free Shipping" }, void 0)] }, void 0));
|
|
14972
14972
|
};
|
|
14973
|
-
return (jsxRuntime.jsxs(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(
|
|
14973
|
+
return (jsxRuntime.jsxs(Container$y, __assign$1({ backgroundColor: backgroundColor }, { children: [jsxRuntime.jsxs(BarContainer, __assign$1({ "data-testid": "MPBContainer" }, { children: [jsxRuntime.jsxs(Value, { children: [currencyCode, currentAmount] }, void 0), jsxRuntime.jsx(Background$1, __assign$1({ backgroundColor: unfilledColor || theme.colors.shades['100'].color, "data-testid": "MPBBackground" }, { children: jsxRuntime.jsx(Bar$1, { "data-testid": "MPBBar", backgroundColor: fillColor, percent: progress }, void 0) }), void 0), jsxRuntime.jsxs(Value, __assign$1({ isBold: true }, { children: [currencyCode, endingValue] }), void 0)] }), void 0), isRewardUnlocked ? (jsxRuntime.jsx(MessageContainer, { dangerouslySetInnerHTML: { __html: rewardUnlockedMessage } }, void 0)) : (getRemainingAmountMessage())] }), void 0));
|
|
14974
14974
|
};
|
|
14975
14975
|
var templateObject_1$K, templateObject_2$A;
|
|
14976
14976
|
|
|
@@ -20475,7 +20475,7 @@ var ClubOfferSelector = function (_a) {
|
|
|
20475
20475
|
marginRight: '10px',
|
|
20476
20476
|
}, labelStyle: {
|
|
20477
20477
|
color: ClubBorderColor,
|
|
20478
|
-
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "
|
|
20478
|
+
}, useV2Style: true, onChange: function () { }, disabled: disabledInputs && disabledInputs.includes(radioIds.clubOfferSelector.id) }, void 0) }, void 0), jsxRuntime.jsx(StyledPrice, { testId: "subscription", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(clubOfferFinalPrice))), selected: isSelected, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), isSelected && (jsxRuntime.jsx(BenefitsContainer, { children: updatedClubOfferBenefits.map(function (benefit) { return (jsxRuntime.jsx(Benefit, { children: jsxRuntime.jsx(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0) }, benefit)); }) }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ isNoMember: true, "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 () { }, useV2Style: true, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, void 0), jsxRuntime.jsx(StyledPrice, { isNoMember: true, testId: "single-purchase", finalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(discountedPrice))), selected: radioIds.oneTime.id === radioCheck.id, size: exports.ComponentSize.Large, originalPrice: "".concat(currencySymbol).concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0)] }), void 0));
|
|
20479
20479
|
};
|
|
20480
20480
|
|
|
20481
20481
|
var ContainerWrapper = newStyled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"], ["\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n padding: 8px 10px 8px 15px;\n background: white;\n gap: 10px;\n border-radius: 6px;\n background: ", ";\n border: 1px solid ", ";\n"])), function (_a) {
|
package/package.json
CHANGED