@trafilea/afrodita-components 6.43.4 → 6.43.7

package/build/index.js

@@ -4909,7 +4909,7 @@ var Text$7 = function (_a) {
         }
         return propsHref;
     }, [props.disabled, propsHref]);
-    return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, "data-testid": testId }, { children: children }), void 0));
+    return (jsx(Tag, __assign$1({}, props, { css: commonCSS, href: href, target: variant === 'link' ? props.target : undefined, "data-testid": testId }, { children: children }), void 0));
 };
 var DEFAULTS = {
     heading1: {
@@ -6702,8 +6702,12 @@ var BenefitText$1 = newStyled(Text$7)(templateObject_2$1g || (templateObject_2$1
 var templateObject_1$1G, templateObject_2$1g;
 
 var BenefitsList = function (_a) {
-    var benefits = _a.benefits, isSelected = _a.isSelected, selectedColor = _a.selectedColor, baseColor = _a.baseColor;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (benefit) { return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
+    var benefits = _a.benefits, disabled = _a.disabled;
+    var colors = useTheme().colors;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: benefits.map(function (benefit) {
+            var _a;
+            return (jsxRuntime.jsxs(Benefit$2, { children: [jsxRuntime.jsx(Icon$1, { name: benefit.iconName, fill: disabled ? colors.shades['250'].color : (_a = benefit.fill) !== null && _a !== void 0 ? _a : colors.shades['700'].color, width: "24px", height: "24px" }, void 0), jsxRuntime.jsx(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit.htmlText } }, void 0)] }, benefit.iconName));
+        }) }, void 0));
 };
 
 var TimerContainer$1 = newStyled.div(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
@@ -20457,8 +20461,8 @@ var ClubCopyTextWrapper = newStyled.div(templateObject_5$a || (templateObject_5$
 var templateObject_1$l, templateObject_2$e, templateObject_3$e, templateObject_4$b, templateObject_5$a;
 
 function Card(_a) {
-    var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style;
-    return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: "Terms here." }), void 0)] }), void 0))] }), void 0));
+    var children = _a.children, link = _a.link, icon = _a.icon, _b = _a.isChecked, isChecked = _b === void 0 ? false : _b, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _c = _a.termsText, termsText = _c === void 0 ? 'Terms here.' : _c;
+    return (jsxRuntime.jsxs(ContainerWrapper, __assign$1({ "$checked": isChecked, style: style }, { children: [jsxRuntime.jsxs(CardHeaderWrapper, { children: [jsxRuntime.jsxs(ClubCopyWrapper, { children: [icon, jsxRuntime.jsx(ClubCopyTextWrapper, { children: titleCopy }, void 0)] }, void 0), jsxRuntime.jsx("div", { children: children }, void 0)] }, void 0), !isChecked && (jsxRuntime.jsxs(CardBody, __assign$1({ id: "joinClubCardBody" }, { children: [bodyCopy, ' ', jsxRuntime.jsx("a", __assign$1({ href: link, target: "_blank", rel: "noreferrer" }, { children: termsText }), void 0)] }), void 0))] }), void 0));
 }
 
 var StyledButton = newStyled.button(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n  padding: 10px 20px;\n  border-radius: 8px;\n  background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n  color: var(--neutrals-white-ffffff, #fff);\n  text-align: center;\n  font-family: 'Avenir Next';\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 18px;\n  text-transform: uppercase;\n  border: none;\n  cursor: pointer;\n  ", ";\n"], ["\n  padding: 10px 20px;\n  border-radius: 8px;\n  background: var(--shapermint-default-complementary-wine-882-a-2-b, #882a2b);\n  color: var(--neutrals-white-ffffff, #fff);\n  text-align: center;\n  font-family: 'Avenir Next';\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 18px;\n  text-transform: uppercase;\n  border: none;\n  cursor: pointer;\n  ", ";\n"])), function (_a) {
@@ -20466,13 +20470,13 @@ var StyledButton = newStyled.button(templateObject_1$k || (templateObject_1$k =
     return customStyle && __assign$1({}, customStyle);
 });
 var JoinClubCard = function (_a) {
-    var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d;
+    var onCheckToggle = _a.onCheckToggle, isChecked = _a.isChecked, icon = _a.icon, link = _a.link, bodyCopy = _a.bodyCopy, titleCopy = _a.titleCopy, style = _a.style, _b = _a.showButton, showButton = _b === void 0 ? false : _b, _c = _a.buttonText, buttonText = _c === void 0 ? 'ADD' : _c, _d = _a.buttonStyle, buttonStyle = _d === void 0 ? {} : _d, termsText = _a.termsText;
     var _e = React$2.useState(isChecked), checked = _e[0], setChecked = _e[1];
     var handleToggleValue = function (value) {
         setChecked(value);
         onCheckToggle(value);
     };
-    return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
+    return (jsxRuntime.jsx(Card, __assign$1({ link: link, icon: icon, isChecked: checked, bodyCopy: bodyCopy, titleCopy: titleCopy, style: style, termsText: termsText }, { children: showButton ? (jsxRuntime.jsx(StyledButton, __assign$1({ onClick: function () { return handleToggleValue(!checked); }, customStyle: buttonStyle }, { children: buttonText }), void 0)) : (jsxRuntime.jsx(ToggleComponent, { onToggle: handleToggleValue, isChecked: checked }, void 0)) }), void 0));
 };
 var templateObject_1$k;
 
@@ -21926,8 +21930,12 @@ var getSelectedBorder = function (_a) {
     return "1.5px solid ".concat(colors.shades['700'].color);
 };
 var ContainerBase = newStyled.div(templateObject_3$1 || (templateObject_3$1 = __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) {
-    var disabled = _a.disabled, theme = _a.theme;
-    return disabled ? "1px solid ".concat(theme.colors.shades[200].color) : getSelectedBorder(theme);
+    var disabled = _a.disabled, highlighted = _a.highlighted, theme = _a.theme;
+    return disabled
+        ? "1px solid ".concat(theme.colors.shades[200].color)
+        : highlighted
+            ? getSelectedBorder(theme)
+            : "1.5px solid ".concat(theme.colors.shades[150].color);
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled
@@ -21942,9 +21950,15 @@ var SinglePurchaseContainer = newStyled(ContainerBase)(templateObject_4$1 || (te
     return (onClick ? 'cursor: pointer;' : '');
 });
 var SubscriptionContainer = newStyled(ContainerBase)(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  padding: 16px;\n  margin-bottom: 8px;\n  position: relative;\n"], ["\n  padding: 16px;\n  margin-bottom: 8px;\n  position: relative;\n"])));
-var SubscriptionHeader = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __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) {
-    var theme = _a.theme;
-    return theme.colors.shades[200].color;
+var SubscriptionHeader = newStyled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  margin-bottom: ", ";\n  cursor: pointer;\n  border-bottom: ", ";\n\n  & input:checked + div {\n    border-color: ", ";\n  }\n"])), function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b;
+    return (showBorder ? '10px' : '');
+}, function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b;
+    return (showBorder ? '8px' : '0');
+}, function (_a) {
+    var _b = _a.showBorder, showBorder = _b === void 0 ? true : _b, theme = _a.theme;
+    return showBorder ? "1px solid ".concat(theme.colors.shades[200].color) : 'none';
 }, function (_a) {
     var theme = _a.theme;
     return theme.colors.pallete.primary.color;
@@ -21972,8 +21986,7 @@ var TooltipWrapper = newStyled.div(templateObject_10 || (templateObject_10 = __m
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7$1, templateObject_8$1, templateObject_9$1, templateObject_10;
 
 var SubscriptionPlanSelector = function (_a) {
-    var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios;
-    var theme = useTheme();
+    var children = _a.children, benefits = _a.benefits, tooltip = _a.tooltip, pricing = _a.pricing, frequency = _a.frequency, onChange = _a.onChange, className = _a.className, discountTagClassName = _a.discountTagClassName, closeIcon = _a.closeIcon, currencySymbol = _a.currencySymbol, discountLabel = _a.discountLabel, radios = _a.radios, termsAndConditions = _a.termsAndConditions;
     var _b = React$2.useState({
         oneTime: radios.oneTime,
         subscription: radios.subscription,
@@ -22024,7 +22037,6 @@ var SubscriptionPlanSelector = function (_a) {
     var handleFrequencyChange = function (value) {
         setSubscriptionPeriod(radiosStatuses.subscription.checked ? value.value : undefined);
     };
-    var benefitsColor = benefitsColorMapper(theme);
     var renderBenefitsOrChildren = function () {
         var isDisabled = radiosStatuses.subscription.disabled;
         if (children) {
@@ -22036,17 +22048,16 @@ var SubscriptionPlanSelector = function (_a) {
             });
         }
         else if (benefits) {
-            var isSelected = radiosStatuses.subscription.checked;
-            return (jsxRuntime.jsx(BenefitsList, { benefits: benefits, isSelected: isSelected, selectedColor: benefitsColor.selected, baseColor: isDisabled ? 'var(--colors-shades-250-color)' : benefitsColor.base }, void 0));
+            return jsxRuntime.jsx(BenefitsList, { benefits: benefits, disabled: isDisabled }, void 0);
         }
         return null;
     };
-    return (jsxRuntime.jsxs(Container$1, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ className: discountTagClassName, disabled: radiosStatuses.subscription.disabled }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, { children: [jsxRuntime.jsxs(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxRuntime.jsxs(Container$1, __assign$1({ className: className }, { children: [jsxRuntime.jsxs(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsxRuntime.jsx(DiscountTag, __assign$1({ className: discountTagClassName, disabled: radiosStatuses.subscription.disabled }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxRuntime.jsxs(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxRuntime.jsxs(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: exports.ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
                                             setRadiosStatuses(function (prev) { return ({
                                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: true }),
                                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: false }),
                                             }); });
-                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltip === null || tooltip === void 0 ? void 0 : tooltip.content, header: tooltip === null || tooltip === void 0 ? void 0 : tooltip.header, 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(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsxRuntime.jsx(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), radiosStatuses.subscription.checked && frequency && (jsxRuntime.jsx(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: exports.ComponentSize.Medium, onChange: function () {
+                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), tooltip && (jsxRuntime.jsx(TooltipWrapper, { children: jsxRuntime.jsx(Tooltip, __assign$1({ position: 0, content: tooltip.content, header: tooltip.header, 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(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: exports.ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), radiosStatuses.subscription.checked && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), termsAndConditions && (jsxRuntime.jsx(Text$7, __assign$1({ variant: "link", underline: true, href: termsAndConditions.url, size: "regular", target: "_blank" }, { children: termsAndConditions.text }), void 0)), (frequency === null || frequency === void 0 ? void 0 : frequency.showFrequencyText) && (jsxRuntime.jsx(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }, void 0))] }), void 0), jsxRuntime.jsxs(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", highlighted: radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsxRuntime.jsx(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: exports.ComponentSize.Medium, onChange: function () {
                             setRadiosStatuses(function (prev) { return ({
                                 subscription: __assign$1(__assign$1({}, prev.subscription), { checked: false }),
                                 oneTime: __assign$1(__assign$1({}, prev.oneTime), { checked: true }),