@trafilea/afrodita-components 6.16.1 → 6.16.2

package/build/index.d.ts

@@ -1318,6 +1318,7 @@ declare type Theme = {
     config?: {
         cdn: string;
         useTrafileaImages?: boolean;
+        useTrafileaAssets?: boolean;
     };
     fontSizes: number[];
     fontWeights: number[];
@@ -3514,6 +3515,7 @@ interface CouponProps {
     title: string;
     content: ReactNode;
     width?: string;
+    height?: string;
     btnText?: string;
     couponCode?: string;
     offerLink?: string;
@@ -3531,7 +3533,7 @@ declare type BasicAccordionProps = {
     openIcon: IconType;
     closeIcon: IconType;
     fillControlsCollor: string;
-    contentWidth?: string;
+    width?: string;
     onClick?: (index: number) => void;
 };
 declare const BasicAccordion: FC<BasicAccordionProps>;
@@ -3634,7 +3636,8 @@ declare const isNumber: (value: string) => boolean;
 declare const isPhoneNumber: (value: string) => boolean;
 declare const isValidDate: (value: string) => boolean;
 
+declare type Partner = 'RevelBeauty' | 'TheSpaDr' | 'TheBodCon';
 declare type PartnerContent = 'RevelBeauty-1' | 'RevelBeauty-2' | 'TheSpaDr-1' | 'TheSpaDr-2' | 'TheBodCon';
-declare const CancellationFlowAccordionContentPerPartner: Record<string, JSX.Element[]>;
+declare const CancellationFlowAccordionContentPerPartner: Record<Partner, JSX.Element[]>;
 
-export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, Coupon, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithTestId, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };
+export { AbsorbencyLevel, Accordion, AccordionOptions, AmazonButton, AssetsProvider, Autoship, AutoshipV2, BasicAccordion, BeforeAfterCard, BeforeAfterVariant, Bundle, ButtonPrimary, ButtonSecondary, ButtonSecondaryOutline, ButtonType, BuyNowPayLater, CTAProps, CancellationFlowAccordionContentPerPartner, _default as Card, CardSectionType, CartProductItem, CategorySquareTag, CategoryTag, Checkbox, ClubOfferTag, ClubRadioGroupInput, Collection, ColorPickerOption, ComponentPosition, ComponentSize, ContentType, Coupon, index_d as CrossSell, DeliveryDetails, DiscountTag, Drawer, DropdownDialog, DropdownListIcons, DropdownListIconsItem, DropdownListIconsSubItem, DropdownOption, Filter, FilterChange, FilteringDropdown, Tags as FilteringTags, Filters, FitGuarantee, FitPredictor, HurryUp, HurryUpProps, Icon, IconButton, IconProps, IconWithOpacityProps, IconsWithTitle, Image, ImageCardWithDescription, ImageProps, Input, InputValidationType, Icon$1 as LibIcon, IconProps$1 as LibIconProps, Modal, MotivatorProgressBar, MultiColorPicker, Note, OfferBanner, OrderBar, Overlay, PackSelector, PackSelectorV2, Pagination, PaginatorBlog, Partner, PartnerContent, Pattern, PaymentMethod, PaypalButton, Portal, PriceLabel, PriceLabelV2, PriceLabelV3, ProductGallery, ProductGalleryMobile, ProductGalleryMobileV2, ProductGalleryMobileV3, ProductGalleryMobileV4, ProgressBar, QuantityPicker, RadioGroupInput, RadioGroupOption, RadioInput, RadioPrimary, Rating, Review, Review$1 as ReviewDetail, ReviewsHeader, ScrollToTop, SearchBar, SearchBarOptionItem, SearchNavigation, SeasonOfferTag, ShortBanner, SimpleDropdown, SimpleOrderItem, SingleColorPicker, SizeChartTable, SizeDropdown, SizeFitGuide, SizeOption, SizeSelector, SizeTable, SliderNavigation, Spacing, Spinner, SpinnerProps, StarList, StrengthBars, Tab, Tabs, Text, TextButton, TextWithImage, Theme, ThemeAssets, ThemeBasicPallete, ThemeBreakpoints, ThemeColorPallete, ThemeColors, ThemeComponent, ThemeFonts, ThemeProvider, ThemeProviderProps, ThemeTypography, ThemeVariables, Timer, Tooltip, Totals, TrackingProgress, TrackingProgressV2, Video, VideoProps, WithTestId, buildImageUrl, componentSizeMapper, decimalFormat, formatPrice, getSrcSet, imageVideoProps, isEmail, isEmpty, isNumber, isPhoneNumber, isValidDate, mediaQueries, modalEvent, SeasonOfferRoundedTag as seasonOfferRoundedTag, simulateMouseClick, sliceString, useDeviceType, useModal, useModalEvent, useOnClickOutside, useTheme, useThemeAssets, useWindowDimensions };

package/build/index.esm.js

@@ -3070,9 +3070,9 @@ var ThemeProvider = function (_a) {
     var _b;
     var unparsedTheme = _a.theme, isSameOriginIcons = _a.isSameOriginIcons, children = _a.children, config = _a.config;
     //TODO Analyze why we are doing this and remove
-    var theme = useMemo(function () { return (__assign$1(__assign$1({}, applyVariablesIntoTheme(__assign$1({}, unparsedTheme))), { config: config })); }, [unparsedTheme]);
-    var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: theme.config ? "".concat(theme.config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
-    var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets });
+    var theme = useMemo(function () { return applyVariablesIntoTheme(__assign$1({}, unparsedTheme)); }, [unparsedTheme]);
+    var assets = __assign$1(__assign$1({}, theme.assets), { isSameOriginIcons: isSameOriginIcons, cdn: config && config.useTrafileaAssets ? "".concat(config.cdn, "/assets/common") : (_b = theme.assets) === null || _b === void 0 ? void 0 : _b.cdn });
+    var themeWithOtherVariables = __assign$1(__assign$1({}, theme), { assets: assets, config: config });
     return (jsx$1(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsx$1(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
 };
 var useTheme = function () { return useTheme$1(); };
@@ -4645,22 +4645,18 @@ var Container$19 = newStyled.div(templateObject_1$1R || (templateObject_1$1R = _
     var _b = _a.height, height = _b === void 0 ? '100%' : _b;
     return height;
 });
-var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  margin-bottom: 3px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 10px;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  margin-bottom: 3px;\n"])));
-var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  width: 40%;\n  height: 100%;\n  resize: vertical;\n"], ["\n  width: 40%;\n  height: 100%;\n  resize: vertical;\n"])));
-var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 60%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 60%;\n  height: 100%;\n"])));
+var FlexCentered = newStyled.div(templateObject_2$1f || (templateObject_2$1f = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 90%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  width: 90%;\n  height: 100%;\n"])));
+var LeftSide = newStyled.div(templateObject_3$Z || (templateObject_3$Z = __makeTemplateObject(["\n  width: 110px;\n  height: 100%;\n  flex-shrink: 0;\n  resize: vertical;\n"], ["\n  width: 110px;\n  height: 100%;\n  flex-shrink: 0;\n  resize: vertical;\n"])));
+var RightSide = newStyled.div(templateObject_4$K || (templateObject_4$K = __makeTemplateObject(["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n  height: 100%;\n"])));
 var FlexStart = newStyled.div(templateObject_5$w || (templateObject_5$w = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 5px;\n  width: 100%;\n  padding: 12px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: 5px;\n  width: 100%;\n  padding: 12px;\n"])));
 var templateObject_1$1R, templateObject_2$1f, templateObject_3$Z, templateObject_4$K, templateObject_5$w;
 
 var _this$1 = undefined;
 var Coupon = function (_a) {
-    var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
+    var imgSrc = _a.imgSrc, title = _a.title, content = _a.content, couponCode = _a.couponCode, offerLink = _a.offerLink, width = _a.width, height = _a.height, _b = _a.btnText, btnText = _b === void 0 ? 'Redeem Offer' : _b;
     var _c = useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
-    var _d = useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
     var handleCopy = useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
-    useEffect(function () {
-        setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
-    }, [showCoupon]);
-    return (jsxs$1(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
+    return (jsxs$1(Container$19, __assign$1({ height: height, width: width }, { children: [jsx$1(LeftSide, { children: jsx$1(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxs$1(RightSide, { children: [jsxs$1(FlexStart, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsx$1(FlexCentered, { children: !showCoupon ? (jsx$1(ButtonPrimary, { type: "button", text: btnText, wide: true, size: ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxs$1(Fragment$2, { children: [jsx$1(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: ComponentSize.Small, icon: {
                                         name: 'actions/copy_outlined',
                                         position: 'right',
                                         margin: '10px',
@@ -4680,15 +4676,18 @@ var cancellationFlowContentPerKey = {
     'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
     TheBodCon: TheBodConContent(),
 };
-var couponWidth = '90%';
+var couponDimensions = {
+    width: '95%',
+    height: '215px',
+};
 var CancellationFlowAccordionContentPerPartner = {
     RevelBeauty: [
-        jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
-        jsx$1(Coupon, { width: couponWidth, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823', content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588', content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
     ],
     TheSpaDr: [
-        jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
-        jsx$1(Coupon, { width: couponWidth, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
+        jsx$1(Coupon, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, imgSrc: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354', content: cancellationFlowContentPerKey['TheSpaDr-2'], couponCode: 'SHMCLUB10OFF', offerLink: 'https://thespadr.com/products/step-2-age-defying-lift-tight-serum?variant=15992476860510' }, "TheSpaDr-2"),
     ],
     TheBodCon: [cancellationFlowContentPerKey['TheBodCon']],
 };
@@ -19865,6 +19864,7 @@ var templateObject_1$4, templateObject_2$3, templateObject_3$1, templateObject_4
 var StyledButton = newStyled(Ye.Button)(function (props) { return ({
     background: props.bgColor,
     height: '100%',
+    width: '100%',
     maxHeight: '48px',
     border: 'none',
     display: 'flex',
@@ -19894,14 +19894,14 @@ var StyledController = newStyled.div(templateObject_2$2 || (templateObject_2$2 =
 var templateObject_1$3, templateObject_2$2;
 
 var StyledDisclosure = newStyled(Ye)(function (_a) {
-    var background = _a.background;
+    var background = _a.background, width = _a.width;
     return ({
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
         gap: '10px',
         background: background !== null && background !== void 0 ? background : '',
-        width: 'auto',
+        width: width !== null && width !== void 0 ? width : 'auto',
         borderRadius: '8px',
         border: '0.063rem solid',
         borderColor: '#e5e5e5',
@@ -19925,10 +19925,10 @@ var AccordionContent = function (_a) {
     return (jsxs$1(Fragment$2, { children: [jsxs$1(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsx$1(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxs$1(StyledController, { children: [jsx$1(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsx$1("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsx$1(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsx$1(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsx$1(StyledPanel, { children: children }, void 0) }), void 0))] }, void 0));
 };
 var BasicAccordion = function (_a) {
-    var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.contentWidth, contentWidth = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
-    return (jsx$1(StyledDisclosure, __assign$1({ as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick }, { children: function (_a) {
+    var children = _a.children, header = _a.header, bgColor = _a.bgColor, headerOnOpen = _a.headerOnOpen, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick, _d = _a.width, width = _d === void 0 ? '100%' : _d, fillControlsCollor = _a.fillControlsCollor;
+    return (jsx$1(StyledDisclosure, __assign$1({ "data-testid": "accordion-container", as: "div", background: bgColor, defaultOpen: defaultOpen, disabled: disabled, onClick: onClick, width: width }, { children: function (_a) {
             var open = _a.open;
-            return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon, contentWidth: contentWidth }, { children: children }), void 0));
+            return (jsx$1(AccordionContent, __assign$1({ open: open, disabled: disabled, bgColor: bgColor, fillControlsCollor: fillControlsCollor, header: header, headerOnOpen: headerOnOpen, openIcon: openIcon, closeIcon: closeIcon }, { children: children }), void 0));
         } }), void 0));
 };