diy-template-components 2.0.92 → 2.0.94

package/build/index.es.js

@@ -241,7 +241,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   rightNav: {
     marginRight: '120px',
     display: 'flex',
-    alignItems: "center"
+    alignItems: 'center'
   },
   priceBox: {
     marginRight: '16px'
@@ -283,7 +283,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     display: 'flex',
     justifyContent: 'space-between',
     padding: '16px 16px 24px',
-    alignItems: "center"
+    alignItems: 'center'
   },
   BottomSheetOfferContainer: {
     padding: '12px 0 ',
@@ -1474,6 +1474,7 @@ function DesktopHeader({
     return (discount / price * 100).toFixed(2);
   };
   const OfferDetailsJSX = () => {
+    console.log('header', header);
     if (!header?.effectivePrice) {
       return null;
     }
@@ -1497,13 +1498,13 @@ function DesktopHeader({
         className: classes.offerDiscount
       }, `${getDiscount(header?.price, header?.discount)}%`, "\xA0OFF"), "\xA0\xA0", /*#__PURE__*/React.createElement("span", {
         className: classes.originalPrice
-      }, header?.price), ' ') : null, /*#__PURE__*/React.createElement("div", {
+      }, "\u20B9 ", header?.price), ' ') : null, header?.effectivePrice ? /*#__PURE__*/React.createElement("div", {
         style: {
           textAlign: 'end'
         }
       }, /*#__PURE__*/React.createElement("span", {
         className: classes.offerPrice
-      }, header?.effectivePrice), ' ')), /*#__PURE__*/React.createElement(Button, {
+      }, "\u20B9 ", header?.effectivePrice)) : null), /*#__PURE__*/React.createElement(Button, {
         data: {
           // link: 'headerData?.loginCtaLink',
           // isLink: 1,
@@ -1615,7 +1616,7 @@ function MobileHeader({
     if (header?.effectivePrice) {
       const body = navEl?.current?.ownerDocument?.body;
       if (body) {
-        body.style.marginBottom = '130px';
+        body?.setAttribute('style', 'margin-bottom: 130px');
       }
     }
   }, []);
@@ -1674,6 +1675,7 @@ function MobileHeader({
     }
   };
   const OfferDetailsJSX = () => {
+    console.log('header', header);
     let conversions = extraProps?.conversions || 0;
     const currentTimestamp = new Date().getTime();
     if (header?.isOfferActive && header?.endDate && header?.endDate && header?.endDate > currentTimestamp && (header?.offerPriceValidFor ? header.offerPriceValidFor - conversions > 0 : true)) {
@@ -1696,15 +1698,15 @@ function MobileHeader({
       className: classes.BottomSheetPriceContainer
     }, /*#__PURE__*/React.createElement("div", {
       className: classes.BottomSheetPrice
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", null, header?.effectivePrice ? /*#__PURE__*/React.createElement("div", {
       style: {
         textAlign: 'start'
       }
     }, /*#__PURE__*/React.createElement("span", {
       className: classes.offerPrice
-    }, header?.effectivePrice), ' '), header?.price && header?.discount && header?.effectivePrice && header?.price !== header?.effectivePrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    }, "\u20B9 ", header?.effectivePrice), ' ') : null, header?.price && header?.discount && header?.effectivePrice && header?.price !== header?.effectivePrice ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
       className: classes.originalPrice
-    }, header?.price), ' ', /*#__PURE__*/React.createElement("span", {
+    }, "\u20B9 ", header?.price), ' ', /*#__PURE__*/React.createElement("span", {
       className: classes.offerDiscount
     }, `${getDiscount(header?.price, header?.discount)}%`, "\xA0OFF"), "\xA0\xA0") : null)), /*#__PURE__*/React.createElement(Button, {
       data: {
@@ -3164,7 +3166,8 @@ const wordBreakValue = countryCode => {
 
 function Section$4({
   nodeData,
-  sectionIndex
+  sectionIndex,
+  extraProps
 }) {
   const {
     layout: {
@@ -3179,6 +3182,9 @@ function Section$4({
     isMobile,
     wordBreakValue: wordBreakValue(countryCode)
   });
+  const handleButton = () => {
+    extraProps?.courseBuyNow();
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -3207,7 +3213,13 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : nodeData?.cta?.metadata?.default === true ? /*#__PURE__*/React.createElement(Button, {
+    data: nodeData.cta.metadata,
+    ref: nodeData?.cta?.refSetter,
+    type: nodeData?.cta?.metadata?.type,
+    size: isMobile ? 'small' : 'medium',
+    onClick: handleButton
+  }) : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -3223,7 +3235,8 @@ function Section$4({
 }
 function BannerCarouselRight({
   sectionData,
-  sectionIndex
+  sectionIndex,
+  extraProps
 }) {
   const {
     isMobile,
@@ -3250,7 +3263,8 @@ function BannerCarouselRight({
   }, /*#__PURE__*/React.createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$4, {
     nodeData: node,
     key: idx /* or some other unique property */,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    extraProps: extraProps
   })))));
 }
 
@@ -3930,7 +3944,8 @@ const useSectionStyles$5 = createUseStyles(theme => {
 
 function Section$2({
   nodeData,
-  sectionIndex
+  sectionIndex,
+  extraProps
 }) {
   const {
     layout: {
@@ -3945,6 +3960,9 @@ function Section$2({
     isMobile,
     wordBreakValue: wordBreakValue(countryCode)
   });
+  const handleButton = () => {
+    extraProps?.courseBuyNow();
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -3978,7 +3996,13 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : nodeData?.cta?.metadata?.default === true ? /*#__PURE__*/React.createElement(Button, {
+    data: nodeData.cta.metadata,
+    ref: nodeData?.cta?.refSetter,
+    type: nodeData?.cta?.metadata?.type,
+    size: isMobile ? 'small' : 'medium',
+    onClick: handleButton
+  }) : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -3990,7 +4014,8 @@ function BannerCarouselLeft({
   sectionData,
   isCustomWebsite,
   sectionIndex,
-  isMobile
+  isMobile,
+  extraProps
 }) {
   const {
     layout: {
@@ -4011,7 +4036,8 @@ function BannerCarouselLeft({
   }, /*#__PURE__*/React.createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React.createElement(Section$2, {
     nodeData: node,
     key: idx /* or some other unique property */,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    extraProps: extraProps
   })))));
 }