@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 CHANGED
@@ -1154,6 +1154,7 @@ declare type AutoshipProps = {
1154
1154
  };
1155
1155
  declare const Autoship: React.FC<AutoshipProps>;
1156
1156
 
1157
+ declare type AutoshipRadios = 'one-time-purchase' | 'autoship-subscribe-and-save';
1157
1158
  declare type AutoshipPropsV2 = {
1158
1159
  singlePurchaseLabel: string;
1159
1160
  subscriptionLabel: string;
@@ -1163,6 +1164,8 @@ declare type AutoshipPropsV2 = {
1163
1164
  };
1164
1165
  tooltipHeader?: {
1165
1166
  title: string;
1167
+ iconFill?: string;
1168
+ iconRight?: string;
1166
1169
  };
1167
1170
  pricing: {
1168
1171
  listPrice: number;
@@ -1183,8 +1186,9 @@ declare type AutoshipPropsV2 = {
1183
1186
  closeIcon?: boolean;
1184
1187
  currencySymbol: string;
1185
1188
  discountLabel?: string;
1189
+ disabledInputs?: AutoshipRadios[];
1186
1190
  };
1187
- declare const AutoshipV2: React.FC<AutoshipPropsV2>;
1191
+ declare const AutoshipV2: React__default.FC<AutoshipPropsV2>;
1188
1192
 
1189
1193
  declare enum BeforeAfterVariant {
1190
1194
  UserInfoText = "UserInfoText",
@@ -3354,7 +3358,7 @@ declare type TextTagProps = {
3354
3358
  href?: never;
3355
3359
  };
3356
3360
  declare type TextProps<T = Element> = AriaAttributes & HTMLAttributes<T> & {
3357
- children: ReactNode;
3361
+ children?: ReactNode;
3358
3362
  style?: CSSProperties;
3359
3363
  className?: string;
3360
3364
  testId?: string;
@@ -3413,11 +3417,13 @@ interface TooltipProps {
3413
3417
  titleColor?: string;
3414
3418
  Icon?: IconType;
3415
3419
  iconFill?: string;
3420
+ iconRight?: string;
3416
3421
  };
3417
3422
  onClick?: () => void;
3418
3423
  withArrow?: boolean;
3424
+ closeBtnSize?: number;
3419
3425
  }
3420
- declare const Tooltip: ({ children, position, content, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, }: TooltipProps) => JSX.Element;
3426
+ declare const Tooltip: ({ children, position, content, backgroundColor, showCloseIcon, align, maxWidth, onClick, header, withArrow, closeBtnSize, }: TooltipProps) => JSX.Element;
3421
3427
 
3422
3428
  declare type SubtotalOption = {
3423
3429
  label: string;
@@ -5204,7 +5204,10 @@ var Title$7 = newStyled.h1(templateObject_6$q || (templateObject_6$q = __makeTem
5204
5204
  return color;
5205
5205
  });
5206
5206
  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"])));
5207
- 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: 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"])));
5207
+ 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) {
5208
+ var _b = _a.right, right = _b === void 0 ? '.3rem' : _b;
5209
+ return right;
5210
+ });
5208
5211
  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;
5209
5212
 
5210
5213
  var useOnClickOutside = function (ref, handler) {
@@ -5281,13 +5284,13 @@ var useWindowDimensions = function (breakpoints, _a) {
5281
5284
 
5282
5285
  var Tooltip = function (_a) {
5283
5286
  var _b;
5284
- 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;
5287
+ 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;
5285
5288
  var theme = useTheme();
5286
- var _e = useState(0), childrenWidth = _e[0], setChildrenWidth = _e[1];
5289
+ var _f = useState(0), childrenWidth = _f[0], setChildrenWidth = _f[1];
5287
5290
  var childrenRef = createRef();
5288
- var _f = useState(0), tooltipHeight = _f[0], setTooltipHeight = _f[1];
5291
+ var _g = useState(0), tooltipHeight = _g[0], setTooltipHeight = _g[1];
5289
5292
  var tooltipRef = createRef();
5290
- var _g = useState(false), closeTooltip = _g[0], setCloseTooltip = _g[1];
5293
+ var _h = useState(false), closeTooltip = _h[0], setCloseTooltip = _h[1];
5291
5294
  var isMobile = useWindowDimensions().isMobile;
5292
5295
  useLayoutEffect(function () {
5293
5296
  var ref = childrenRef.current;
@@ -5297,12 +5300,12 @@ var Tooltip = function (_a) {
5297
5300
  var ref = tooltipRef.current;
5298
5301
  setTooltipHeight((ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0);
5299
5302
  }, [tooltipRef]);
5300
- return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip === true && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("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), jsxs$1(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) && (jsx$1(CloseToolTip, __assign$1({ onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(Icon.Actions.Close, { width: 0.5, height: 0.5, 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)), jsxs$1(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 && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
5303
+ return (jsxs$1(Wrapper$6, __assign$1({ position: position, disableHover: closeTooltip, onMouseEnter: function () { return setCloseTooltip(closeTooltip && false); }, "data-testid": "TooltipWrapper" }, { children: [jsx$1("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), jsxs$1(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) && (jsx$1(CloseToolTip, __assign$1({ right: header === null || header === void 0 ? void 0 : header.iconRight, onClick: function () { return setCloseTooltip(true); } }, { children: jsx$1(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)), jsxs$1(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 && (jsxs$1(TopSection, __assign$1({ "data-testid": "TooltipHeader" }, { children: [(header === null || header === void 0 ? void 0 : header.Icon) && (jsx$1(IconContainer$5, { children: React__default.createElement(header.Icon, {
5301
5304
  testId: 'HeaderIcon',
5302
5305
  fill: (header === null || header === void 0 ? void 0 : header.iconFill)
5303
5306
  ? header === null || header === void 0 ? void 0 : header.iconFill
5304
5307
  : theme.colors.pallete.secondary.color,
5305
- }) }, void 0)), jsx$1(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) && (jsx$1(TooltipText, __assign$1({ 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" }, { children: content.text }), void 0))] }), void 0)] }), void 0)] }), void 0));
5308
+ }) }, void 0)), jsx$1(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) && (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, style: { textAlign: 'left', maxWidth: '243px' }, "data-testid": "TooltipText", dangerouslySetInnerHTML: { __html: content.text } }, void 0))] }), void 0)] }), void 0)] }), void 0));
5306
5309
  };
5307
5310
 
5308
5311
  var colorsMapper = function (colors) { return ({
@@ -5805,12 +5808,14 @@ var FlexContainer = newStyled.div(templateObject_1$1C || (templateObject_1$1C =
5805
5808
  return theme.name === 'TheSpaDr' &&
5806
5809
  "\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 ";
5807
5810
  });
5808
- var DiscountTag = newStyled.div(templateObject_2$13 || (templateObject_2$13 = __makeTemplateObject(["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: ", ";\n font-weight: 600;\n"], ["\n position: absolute;\n top: -25px;\n right: 5px;\n background-color: ", ";\n color: white;\n padding: 5px 10px;\n font-size: 12px;\n line-height: 14px;\n border-radius: ", ";\n font-weight: 600;\n"])), function (_a) {
5809
- var theme = _a.theme;
5810
- return theme.component.autoship.discountTag.backgroundColor;
5811
+ 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) {
5812
+ var theme = _a.theme, isSelected = _a.isSelected;
5813
+ return isSelected
5814
+ ? theme.component.autoship.discountTag.backgroundColor
5815
+ : theme.colors.shades[350].color;
5811
5816
  }, function (_a) {
5812
5817
  var theme = _a.theme;
5813
- return theme.component.autoship.discountTag.borderRadius;
5818
+ return "".concat(theme.component.autoship.discountTag.borderRadius, " \n ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
5814
5819
  });
5815
5820
  var getSelectedBorder = function (_a) {
5816
5821
  var name = _a.name, colors = _a.colors;
@@ -5865,7 +5870,7 @@ var radioIds = {
5865
5870
  var DEFAULT_DROPDOWN_OPTIONS = { key: '1', label: '1 Month', value: 1, disabled: false };
5866
5871
  var DEFAULT_FREQUENCY_UNIT = 'months';
5867
5872
  var AutoshipV2 = function (_a) {
5868
- 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;
5873
+ 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;
5869
5874
  var theme = useTheme();
5870
5875
  var dropdownOptions = frequencyValues && (frequencyValues === null || frequencyValues === void 0 ? void 0 : frequencyValues.length) > 0
5871
5876
  ? frequencyValues.map(function (value) {
@@ -5873,7 +5878,9 @@ var AutoshipV2 = function (_a) {
5873
5878
  return { key: "".concat(value), label: label, value: value, disabled: false };
5874
5879
  })
5875
5880
  : [DEFAULT_DROPDOWN_OPTIONS];
5876
- var _d = useState(radioIds.autoship), radioCheck = _d[0], setRadioCheck = _d[1];
5881
+ var initialRadioChecked = radioIds.autoship &&
5882
+ ((disabledInputs === null || disabledInputs === void 0 ? void 0 : disabledInputs.includes(radioIds.autoship.id)) ? radioIds.oneTime : radioIds.autoship);
5883
+ var _d = useState(initialRadioChecked), radioCheck = _d[0], setRadioCheck = _d[1];
5877
5884
  var _e = useState(dropdownOptions[0].value), subscriptionPeriod = _e[0], setSubscriptionPeriod = _e[1];
5878
5885
  var listPrice = pricing.listPrice, discountedPrice = pricing.discountedPrice, autoshipDiscountPercentage = pricing.autoshipDiscountPercentage;
5879
5886
  var autoShipAdditionalDiscount = discountedPrice * (autoshipDiscountPercentage / 100);
@@ -5882,7 +5889,7 @@ var AutoshipV2 = function (_a) {
5882
5889
  var autoShipPctOverListPrice = (autoShipSaving / listPrice) * 100;
5883
5890
  var autoShipPctOverListPriceRounded = Math.round(autoShipPctOverListPrice / 5) * 5;
5884
5891
  var updatedAutoshipBenefits = benefits !== null && benefits !== void 0 ? benefits : __spreadArray([
5885
- "Save up to ".concat(autoShipPctOverListPriceRounded, "% always")
5892
+ "<span style=\"font-weight: 600\">Save up to ".concat(autoShipPctOverListPriceRounded, "% always.</span>")
5886
5893
  ], autoshipBenefits.slice(0), true);
5887
5894
  var createDataObject = function () {
5888
5895
  return {
@@ -5896,6 +5903,9 @@ var AutoshipV2 = function (_a) {
5896
5903
  onChange(createDataObject());
5897
5904
  }, []);
5898
5905
  var handleChange = function (value, type) {
5906
+ if (disabledInputs && disabledInputs.includes(value.id)) {
5907
+ return;
5908
+ }
5899
5909
  var dataObj = createDataObject();
5900
5910
  if (type === 'radio') {
5901
5911
  setRadioCheck(value);
@@ -5907,9 +5917,9 @@ var AutoshipV2 = function (_a) {
5907
5917
  onChange(__assign$1(__assign$1({}, dataObj), { subscriptionPeriod: value }));
5908
5918
  };
5909
5919
  var benefitsColor = benefitsColorMapper(theme);
5910
- return (jsxs$1(Container$11, __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: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".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
5920
+ return (jsxs$1(Container$11, __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, __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), 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, disabled: disabledInputs && disabledInputs.includes(radioIds.autoship.id) }, 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: "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, { 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
5911
5921
  ? benefitsColor.selected
5912
- : 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(FlexContainer, { children: dropdownOptions.length > 1 ? (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)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), 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));
5922
+ : benefitsColor.base }, void 0), jsx$1(BenefitText, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0), jsx$1(FlexContainer, { children: dropdownOptions.length > 1 ? (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)) : (jsxs$1(DeliveryFrequencyLabel, __assign$1({ variant: "body" }, { children: ["Deliver every ", dropdownOptions[0].label.toLowerCase()] }), 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, disabled: disabledInputs && disabledInputs.includes(radioIds.oneTime.id) }, 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));
5913
5923
  };
5914
5924
 
5915
5925
  var _a$2;