@trafilea/afrodita-components 6.44.0 → 6.44.1

package/build/index.js

@@ -20581,20 +20581,44 @@ var OfferAtCart = function (_a) {
     return (jsxRuntime.jsxs(Container$i, __assign$1({ className: className }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsxRuntime.jsxs(RightContent, { children: [jsxRuntime.jsx(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0), !isMobile && ActionsSection, !isMobile && ErrorMessage] }, void 0)] }), void 0), isMobile && ActionsSection, isMobile && ErrorMessage] }), void 0));
 };
 
+var renderBottomCopy = function (text) {
+    if (typeof text === 'string') {
+        return jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: text } }, void 0);
+    }
+    return text;
+};
+
 var VariantType;
 (function (VariantType) {
     VariantType["V1"] = "v1";
     VariantType["V2"] = "v2";
 })(VariantType || (VariantType = {}));
-newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"])), function (_a) {
+var ContainerV2 = newStyled.div(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  padding: 12px;\n  border: 1px solid #e5e5e5;\n  border-radius: 8px;\n  gap: 14px;\n  margin: auto;\n  background-color: ", ";\n"])), function (_a) {
     var variant = _a.variant;
     return (variant === VariantType.V2 ? '#F7F7F7' : 'white');
 });
-newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"])));
-newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"])));
-newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"], ["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"])));
+var ActionsV2 = newStyled.div(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"], ["\n  display: flex;\n  width: 100%;\n  gap: 8px;\n  flex-direction: column;\n"])));
+var SizeCardItem = newStyled.div(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"], ["\n  width: 59px;\n  height: 36px;\n  border-radius: 8px;\n  border: 1px 0px 0px 0px;\n  border-color: #bbbbbb;\n  border-style: solid;\n  border-width: 1px;\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n"])));
+var SizeCardWrapper = newStyled.div(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"], ["\n  display: grid;\n  gap: 4px;\n  grid-template-columns: repeat(5, 1fr);\n\n  @media only screen and (max-width: 375px) {\n    grid-template-columns: repeat(3, 1fr);\n  }\n"])));
 var templateObject_1$j, templateObject_2$d, templateObject_3$d, templateObject_4$a;
 
+var SizeOptions = function (_a) {
+    var onAddToCart = _a.onAddToCart, sizeOptions = _a.sizeOptions;
+    return (jsxRuntime.jsx(SizeCardWrapper, __assign$1({ "data-testid": "sizeCardWrapper" }, { children: sizeOptions.map(function (sizeOption) { return (jsxRuntime.jsx(SizeCardItem, __assign$1({ onClick: function () {
+                onAddToCart(sizeOption.key);
+            } }, { children: sizeOption.label }), sizeOption.key)); }) }), void 0));
+};
+
+var OfferAtCartV2 = function (_a) {
+    var className = _a.className, _b = _a.title, titleContent = _b.content, bold = _b.bold, _c = _a.image, src = _c.src, alt = _c.alt, benefits = _a.benefits, _d = _a.ctaText, ctaText = _d === void 0 ? 'Yes, I want this offer' : _d, sizeOptions = _a.sizeOptions, rating = _a.rating, onAddToCart = _a.onAddToCart, bottomCopy = _a.bottomCopy;
+    var isMobile = useDeviceType() === 'mobile';
+    var _e = React$2.useState(true), showButton = _e[0], setShowButton = _e[1];
+    var ActionsSection = (jsxRuntime.jsx(ActionsV2, { children: showButton ? (jsxRuntime.jsx(ButtonSecondary, { wide: true, text: ctaText, size: exports.ComponentSize.Small, onClick: function () {
+                setShowButton(false);
+            } }, void 0)) : (jsxRuntime.jsx(SizeOptions, { sizeOptions: sizeOptions, onAddToCart: onAddToCart }, void 0)) }, void 0));
+    return (jsxRuntime.jsxs(ContainerV2, __assign$1({ className: className, variant: bottomCopy ? VariantType.V2 : VariantType.V1 }, { children: [jsxRuntime.jsx(OfferAtCartTitle, __assign$1({}, getTitleProps({ content: titleContent, bold: bold })), void 0), jsxRuntime.jsxs(Body, __assign$1({ height: isMobile ? '120px' : '162px' }, { children: [jsxRuntime.jsx(OfferAtCartImage, { isMobile: isMobile, src: src, alt: alt, rating: rating }, void 0), jsxRuntime.jsx(RightContent, { children: jsxRuntime.jsx(Benefits, __assign$1({ height: isMobile ? '100%' : '65%' }, { children: jsxRuntime.jsx(OfferAtCartBenefits, { benefits: benefits }, void 0) }), void 0) }, void 0)] }), void 0), jsxRuntime.jsx("div", { children: !isMobile && ActionsSection }, void 0), isMobile && ActionsSection, bottomCopy && renderBottomCopy(bottomCopy)] }), void 0));
+};
+
 var ImageContainer$1 = newStyled.div(function (_a) {
     var width = _a.width, height = _a.height;
     return ({
@@ -22247,6 +22271,7 @@ exports.MotivatorProgressBar = MotivatorProgressBar;
 exports.MultiColorPicker = MultiColorPicker;
 exports.Note = Note;
 exports.OfferAtCart = OfferAtCart;
+exports.OfferAtCartV2 = OfferAtCartV2;
 exports.OfferBanner = OfferBanner;
 exports.OrderBar = OrderBar;
 exports.Overlay = Overlay;