@trafilea/afrodita-components 6.16.1 → 6.16.3

package/build/index.js

@@ -3096,9 +3096,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 = React$2.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 = React$2.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 (jsxRuntime.jsx(ThemeProvider$1, __assign$1({ theme: themeWithOtherVariables }, { children: jsxRuntime.jsx(AssetsProvider, __assign$1({ assets: assets }, { children: children }), void 0) }), void 0));
 };
 var useTheme = function () { return useTheme$1(); };
@@ -4671,22 +4671,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 CouponCard = function (_a) {
+    var image = _a.image, 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 = React$2.useState(false), showCoupon = _c[0], setShowCoupon = _c[1];
-    var _d = React$2.useState('176px'), containerHeight = _d[0], setContainerHeight = _d[1];
     var handleCopy = React$2.useCallback(function (couponCode) { return (couponCode ? navigator.clipboard.writeText(couponCode) : undefined); }, []);
-    React$2.useEffect(function () {
-        setContainerHeight(function (prev) { return (showCoupon ? '220px' : prev); });
-    }, [showCoupon]);
-    return (jsxRuntime.jsxs(Container$19, __assign$1({ height: containerHeight, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { src: imgSrc, alt: "Product", width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Small, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
+    return (jsxRuntime.jsxs(Container$19, __assign$1({ height: height, width: width }, { children: [jsxRuntime.jsx(LeftSide, { children: jsxRuntime.jsx(Image$3, { objectFit: "cover", src: image.src, alt: image.alt, width: "100%", height: "100%", borderRadius: "8px 0 0 8px" }, void 0) }, void 0), jsxRuntime.jsxs(RightSide, { children: [jsxRuntime.jsxs(FlexStart, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "bold", size: "small" }, { children: title }), void 0), content] }, void 0), jsxRuntime.jsx(FlexCentered, { children: !showCoupon ? (jsxRuntime.jsx(ButtonPrimary, { type: "button", text: btnText, wide: true, size: exports.ComponentSize.Large, onClick: function () { return setShowCoupon(function (prev) { return !prev; }); } }, void 0)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ButtonSecondaryOutline, { "data-testid": "coupon-code-btn", testId: "coupon-code-btn", type: "button", text: couponCode !== null && couponCode !== void 0 ? couponCode : '', wide: true, size: exports.ComponentSize.Small, icon: {
                                         name: 'actions/copy_outlined',
                                         position: 'right',
                                         margin: '10px',
@@ -4696,7 +4692,7 @@ var Coupon = function (_a) {
 // Partner titles
 var REVEL_BEAUTY_TITLE = 'REVEL BEAUTY';
 var THE_SPA_DR_TITLE = 'THE SPA DR.';
-// Coupon contents
+// CouponCard contents
 var CouponDefaultBody = function (firstLine, secondLine) { return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small", style: { textAlign: 'initial' } }, { children: firstLine }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "heading5", weight: "bold" }, { children: secondLine }), void 0)] }, void 0)); };
 var TheBodConContent = function () { return (jsxRuntime.jsxs(FlexContainer$2, { children: [jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE and PREMIUM" }, void 0), " access to The BodCon Community App."] }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: ["The #1 Body Confidence Community. You'll have ", jsxRuntime.jsx(Bold, { children: "FREE access to:" }, void 0)] }), void 0), jsxRuntime.jsxs("ul", __assign$1({ style: { marginBottom: '5px', padding: '11px' } }, { children: [jsxRuntime.jsx("li", __assign$1({ style: { marginBottom: '5px' } }, { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our confidence series: great courses made by the top influencers in the field, just for you to start your body-confidence journey!" }), void 0) }), void 0), jsxRuntime.jsx("li", { children: jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Our more than 1.000 women's community and get-togethers to talk about women's empowerment." }), void 0) }, void 0)] }), void 0), jsxRuntime.jsxs(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: [jsxRuntime.jsx(Bold, { children: "FREE" }, void 0), " access to The BodCon 2023 replays!"] }), void 0), jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "regular", size: "small" }, { children: "Empower yourself and change how you see and feel about your body forever." }), void 0)] }, void 0)); };
 var cancellationFlowContentPerKey = {
@@ -4706,15 +4702,30 @@ var cancellationFlowContentPerKey = {
     'TheSpaDr-2': CouponDefaultBody('Nourish Antioxidant Serum', '$10 OFF'),
     TheBodCon: TheBodConContent(),
 };
-var couponWidth = '90%';
+var couponDimensions = {
+    width: '95%',
+    height: '215px',
+};
 var CancellationFlowAccordionContentPerPartner = {
     RevelBeauty: [
-        jsxRuntime.jsx(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"),
-        jsxRuntime.jsx(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"),
+        jsxRuntime.jsx(CouponCard, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, image: {
+                src: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Beauty_Lift_and_Tighten_Serum.png?v=1709316823',
+                alt: 'Daily Essentials 4-Step Skin Care System',
+            }, content: cancellationFlowContentPerKey['RevelBeauty-1'], couponCode: 'CLUBFRIENDS', offerLink: 'https://revelbeauty.com/products/lift-tighten-serum' }, "RevelBeauty-1"),
+        jsxRuntime.jsx(CouponCard, { width: couponDimensions.width, height: couponDimensions.height, title: REVEL_BEAUTY_TITLE, image: {
+                src: 'https://cdn.shopify.com/s/files/1/2679/8624/files/revel-beauty-orders-above-50.png?v=1709326588',
+                alt: 'Daily Essentials 4-Step Skin Care System',
+            }, content: cancellationFlowContentPerKey['RevelBeauty-2'], couponCode: 'SHIPPINGONUS', offerLink: 'https://revelbeauty.com/' }, "RevelBeauty-2"),
     ],
     TheSpaDr: [
-        jsxRuntime.jsx(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"),
-        jsxRuntime.jsx(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"),
+        jsxRuntime.jsx(CouponCard, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, image: {
+                src: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Daily_Essentials_4-Step_Skin_Care_System.png?v=1709333354',
+                alt: 'Daily Essentials 4-Step Skin Care System',
+            }, content: cancellationFlowContentPerKey['TheSpaDr-1'], couponCode: 'SHMCLUBFRIENDS', offerLink: 'https://thespadr.com/products/4-step-age-defying-clean-skincare-system-3?variant=42658350727366' }, "TheSpaDr-1"),
+        jsxRuntime.jsx(CouponCard, { width: couponDimensions.width, height: couponDimensions.height, title: THE_SPA_DR_TITLE, image: {
+                src: 'https://cdn.shopify.com/s/files/1/2679/8624/files/Nourish_Antioxidant_Serum.png?v=1709333354',
+                alt: 'Daily Essentials 4-Step Skin Care System',
+            }, 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']],
 };
@@ -19891,6 +19902,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',
@@ -19920,14 +19932,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',
@@ -19951,10 +19963,10 @@ var AccordionContent = function (_a) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledButton, __assign$1({ "data-testid": "styled-button", disabled: disabled, bgColor: bgColor }, { children: [jsxRuntime.jsx(HeaderContentComponent, { open: open, header: header, headerOnOpen: headerOnOpen }, void 0), jsxRuntime.jsxs(StyledController, { children: [jsxRuntime.jsx(Text$7, __assign$1({ variant: "body", weight: "demi", size: "small", color: fillControlsCollor }, { children: "View Offers" }), void 0), jsxRuntime.jsx("span", __assign$1({ style: { marginTop: '3px' } }, { children: jsxRuntime.jsx(ControlIconComponent, { open: open, openIcon: openIcon, closeIcon: closeIcon, fillControlsCollor: fillControlsCollor }, void 0) }), void 0)] }, void 0)] }), void 0), open && (jsxRuntime.jsx(StyledContent, __assign$1({ width: contentWidth, bgColor: bgColor, onClick: function (e) { return e.stopPropagation(); } }, { children: jsxRuntime.jsx(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 (jsxRuntime.jsx(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 (jsxRuntime.jsx(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 (jsxRuntime.jsx(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 (jsxRuntime.jsx(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));
 };
 
@@ -20140,7 +20152,7 @@ exports.Checkbox = Checkbox;
 exports.ClubOfferTag = ClubOfferTag;
 exports.ClubRadioGroupInput = ClubRadioGroupInput;
 exports.Collection = Collection;
-exports.Coupon = Coupon;
+exports.CouponCard = CouponCard;
 exports.CrossSell = index$1;
 exports.DeliveryDetails = DeliveryDetails;
 exports.DiscountTag = DiscountTag$1;