@trafilea/afrodita-components 6.43.5 → 6.43.8

package/build/index.d.ts

@@ -2595,12 +2595,16 @@ interface ISubscriptionFrequencyDropdown {
 }
 declare const AutoshipFrequencyDropdown: FC<ISubscriptionFrequencyDropdown>;
 
-declare type BenefitsListProps = {
-    benefits: string[];
-    isSelected: boolean;
-    selectedColor: string;
-    baseColor: string;
+declare type Benefit = {
+    iconName: IconName;
+    htmlText: string;
+    fill?: string;
 };
+declare type BenefitsListProps = {
+    benefits: Benefit[];
+    disabled?: boolean;
+};
+
 declare const BenefitsList: FC<BenefitsListProps>;
 
 declare type TimeProps = {
@@ -3698,13 +3702,14 @@ declare type TextPricingProps = {
 declare type TextLinkProps = {
     variant: 'link';
     weight?: 'demi' | 'regular';
-    size?: 'regular' | 'small';
+    size?: 'regular' | 'small' | 'xsmall';
     underline?: boolean;
     disabled?: boolean;
     wide?: never;
     original?: never;
     allCaps?: never;
     href?: string;
+    target?: string;
 };
 declare type TextLabelProps = {
     variant: 'label';
@@ -4127,24 +4132,31 @@ interface TableProps {
 declare const SizeChartTableV3: React.FC<TableProps>;
 
 declare type WithBenefits = {
-    benefits: string[];
+    benefits: Benefit[];
     children?: never;
 };
 declare type WithChildren = {
     benefits?: never;
     children: ReactNode;
 };
+declare type TermsLink = {
+    text: string;
+    url: string;
+};
 declare type CommonProps = {
     pricing: PriceType;
     currencySymbol: string;
     radios: RadiosConfig;
     onChange: (values: SelectorOnChangeProps) => void;
     tooltip?: TooltipType;
-    frequency?: AutoshipFrequency;
+    frequency?: AutoshipFrequency & {
+        showFrequencyText?: boolean;
+    };
     className?: string;
     discountTagClassName?: string;
     closeIcon?: boolean;
     discountLabel?: string;
+    termsAndConditions?: TermsLink;
 };
 declare type SubscriptionPlanSelectorProps = (WithBenefits | WithChildren) & CommonProps;
 declare type SubscriptionPlanSelectorRadios = 'oneTime' | 'subscription';
@@ -4293,4 +4305,4 @@ declare const benefits: (size: 'xsmall' | 'small' | 'regular') => BenefitProps[]
 declare const benefitsRawHtml: BenefitProps[];
 declare const sizeOptions: SizeOptionProps[];
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitProps, BenefitsList, BenefitsListProps, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerOption, ColorPickerWithTooltip, ColorsState, CommonProps, ComponentPosition, ComponentSize, ContentType, CouponCard, index_d as CrossSell, DeliveryDetails, DeviceType, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HorizontalDivider, HorizontalDividerProps, HurryUp, HurryUpProps, ISubscriptionFrequencyDropdown, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, IconProps$1 as LibIconProps, LikeButton, LikeButtonColors, LikeButtonProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartProps, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioConfig, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, RadiosConfig, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SelectorOnChangeProps, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeOption, SizeOptionProps, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, SubscriptionPlanSelectorProps, SubscriptionPlanSelectorRadios, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, TooltipContent, TooltipHeader, TooltipType, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithBenefits, WithChildren, WithTestId, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipFrequency, AutoshipFrequencyDropdown, AutoshipOfferCard, AutoshipOfferCardCta, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, BenefitProps, BenefitsList, BenefitsListProps, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartItemCard, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferSelector, ClubOfferTag, ClubPriceMemberLabel, ClubRadioGroupInput, Collection, ColorPickerOption, ColorPickerWithTooltip, ColorsState, CommonProps, ComponentPosition, ComponentSize, ContentType, CouponCard, index_d as CrossSell, DeliveryDetails, DeviceType, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HorizontalDivider, HorizontalDividerProps, HurryUp, HurryUpProps, ISubscriptionFrequencyDropdown, Icon, IconButton, IconName, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, JoinClubCard, Icon$1 as LibIcon, IconProps$1 as LibIconProps, LikeButton, LikeButtonColors, LikeButtonProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferAtCart, OfferAtCartProps, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, PriceType, ProductCard, ProductCardV2, ProductCardV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProductGalleryMobileV5, ProgressBar, QuantityPicker, RadioConfig, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, RadiosConfig, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, SelectorOnChangeProps, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeChartTableV2, SizeChartTableV3, SizeDropdown, SizeFitGuide, SizeOption, SizeOptionProps, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, SubscriptionPlanSelector, SubscriptionPlanSelectorProps, SubscriptionPlanSelectorRadios, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Toast, ToggleComponent, Tooltip, TooltipContent, TooltipHeader, TooltipType, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithBenefits, WithChildren, WithTestId, benefits, benefitsRawHtml, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isDangerouslySetInnerHTML, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sizeOptions, sliceString, title, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -4883,7 +4883,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: {
@@ -6676,8 +6676,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 (jsx$1(Fragment$2, { children: benefits.map(function (benefit) { return (jsxs$1(Benefit$2, { children: [jsx$1(Icon.Actions.Check, { "data-testid": "icon-check", width: 1.2, height: 1.2, fill: isSelected ? selectedColor : baseColor }, void 0), jsx$1(BenefitText$1, { variant: "body", dangerouslySetInnerHTML: { __html: benefit } }, void 0)] }, benefit)); }) }, void 0));
+    var benefits = _a.benefits, disabled = _a.disabled;
+    var colors = useTheme().colors;
+    return (jsx$1(Fragment$2, { children: benefits.map(function (benefit) {
+            var _a;
+            return (jsxs$1(Benefit$2, { children: [jsx$1(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), jsx$1(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) {
@@ -21884,10 +21888,10 @@ var FlexContainer = newStyled.div(templateObject_1$1 || (templateObject_1$1 = __
         "\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  ";
 });
 var DiscountTag = newStyled.div(templateObject_2$1 || (templateObject_2$1 = __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) {
-    var theme = _a.theme, disabled = _a.disabled;
-    return disabled
-        ? theme.colors.shades[350].color
-        : theme.component.autoship.discountTag.backgroundColor;
+    var theme = _a.theme, selected = _a.selected;
+    return selected
+        ? theme.component.autoship.discountTag.backgroundColor
+        : theme.colors.shades[350].color;
 }, function (_a) {
     var theme = _a.theme;
     return "".concat(theme.component.autoship.discountTag.borderRadius, " \n      ").concat(theme.component.autoship.discountTag.borderRadius, " 0 0");
@@ -21900,8 +21904,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
@@ -21916,9 +21924,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;
@@ -21946,8 +21960,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 = useState({
         oneTime: radios.oneTime,
         subscription: radios.subscription,
@@ -21998,7 +22011,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) {
@@ -22010,17 +22022,16 @@ var SubscriptionPlanSelector = function (_a) {
             });
         }
         else if (benefits) {
-            var isSelected = radiosStatuses.subscription.checked;
-            return (jsx$1(BenefitsList, { benefits: benefits, isSelected: isSelected, selectedColor: benefitsColor.selected, baseColor: isDisabled ? 'var(--colors-shades-250-color)' : benefitsColor.base }, void 0));
+            return jsx$1(BenefitsList, { benefits: benefits, disabled: isDisabled }, void 0);
         }
         return null;
     };
-    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(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), jsxs$1(SubscriptionHeader, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: ComponentSize.Medium, style: { marginRight: '10px' }, useV2Style: true, onChange: function () {
+    return (jsxs$1(Container$1, __assign$1({ className: className }, { children: [jsxs$1(SubscriptionContainer, __assign$1({ highlighted: radiosStatuses.subscription.checked, onClick: function () { return handleRadioClicked('subscription'); }, "data-testid": "subscription-purchase-block", disabled: radiosStatuses.subscription.disabled }, { children: [jsx$1(DiscountTag, __assign$1({ className: discountTagClassName, selected: radiosStatuses.subscription.checked }, { children: discountLabel !== null && discountLabel !== void 0 ? discountLabel : "".concat(subscriptionPctOverListPriceRounded, "% OFF - SAVE ").concat(currencySymbol).concat(subscriptionSaving.toFixed(2)) }), void 0), jsxs$1(SubscriptionHeader, __assign$1({ showBorder: radiosStatuses.subscription.checked }, { children: [jsxs$1(FlexContainer, __assign$1({ "data-testid": "subscription-block", onClick: function () { return handleRadioClicked('subscription'); } }, { children: [jsx$1(RadioInput, { label: radios.subscription.label, icon: radios.subscription.icon, name: "subscription", id: "subscription", value: "subscription", size: 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), jsx$1(TooltipWrapper, { children: jsx$1(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: jsx$1(Icon.Actions.CircleQuestion, { width: 1 }, void 0) }), void 0) }, void 0)] }), void 0), jsx$1(StyledPrice, { testId: "subscription", finalPrice: "$".concat(decimalFormat(Number(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }, void 0), jsx$1(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), radiosStatuses.subscription.checked && frequency && (jsx$1(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsx$1(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: ComponentSize.Medium, onChange: function () {
+                                        }, checked: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.checked, disabled: radiosStatuses.subscription.disabled }, void 0), tooltip && (jsx$1(TooltipWrapper, { children: jsx$1(Tooltip, __assign$1({ position: 0, content: tooltip.content, header: tooltip.header, 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(subscriptionFinalPrice))), disabled: radiosStatuses.subscription.disabled, highlighted: !radiosStatuses.subscription.disabled && radiosStatuses.subscription.highlighted, size: ComponentSize.Large, originalPrice: "$".concat(decimalFormat(Number(listPrice))) }, void 0)] }), void 0), radiosStatuses.subscription.checked && (jsxs$1(Fragment$2, { children: [jsx$1(BenefitsContainer, __assign$1({ disabled: radiosStatuses.subscription.disabled }, { children: renderBenefitsOrChildren() }), void 0), termsAndConditions && (jsx$1(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) && (jsx$1(AutoshipFrequencyDropdown, { frequency: frequency, onChange: handleFrequencyChange }, void 0))] }, void 0))] }), void 0), jsxs$1(SinglePurchaseContainer, __assign$1({ "data-testid": "single-purchase-block", highlighted: radiosStatuses.oneTime.checked, disabled: radiosStatuses.oneTime.disabled, onClick: function () { return handleRadioClicked('oneTime'); } }, { children: [jsx$1(RadioInput, { label: radios.oneTime.label, icon: radios.oneTime.icon, name: "oneTime", id: "oneTime", value: "oneTime", size: 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 }),