diy-template-components 2.0.67 → 2.0.68

package/build/index.es.js

@@ -226,6 +226,51 @@ const useSectionStyles$a = createUseStyles(theme => ({
     justifyContent: 'center',
     width: '10%'
   },
+  offerPrice: {
+    fontSize: theme.typography.fontSize.h4,
+    fontWeight: '700'
+  },
+  originalPrice: {
+    textDecoration: 'line-through',
+    color: 'rgba(51, 51, 51, 0.6)'
+  },
+  offerDiscount: {
+    color: '#08BD80',
+    fontWeight: '600'
+  },
+  rightNav: {
+    marginRight: '120px',
+    display: 'flex'
+  },
+  priceBox: {
+    marginRight: '16px'
+  },
+  offerBox: {
+    marginRight: '24px',
+    display: 'flex',
+    flexDirection: 'column',
+    backgroundColor: 'rgba(244, 249, 253, 1)',
+    justifyContent: 'space-between',
+    borderRadius: '8px'
+  },
+  offerBoxText: {
+    color: 'rgba(51, 51, 51, 0.6)',
+    fontWeight: '600',
+    fontSize: '10px',
+    padding: '3px 12px 3px, 12px',
+    padding: '4px',
+    textAlign: 'center',
+    marginTop: '4px'
+  },
+  offerBoxCountDown: {
+    backgroundColor: 'rgba(235, 87, 87, 0.1)',
+    border: '0px 1px 1px 1px',
+    borderRadius: '8px',
+    color: '#EB5757',
+    fontSize: '16px',
+    fontWeight: '700',
+    padding: '6px 16px'
+  },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
       flexDirection: 'column',
@@ -1305,8 +1350,17 @@ function DesktopHeader({
   navData,
   isTutorWebsite,
   isLandingPage = false,
-  onDownloadAppTriggered
+  onDownloadAppTriggered,
+  extraProps
 }) {
+  let mockHeader = {
+    isOfferActive: true,
+    effectivePrice: 0.51,
+    price: 1,
+    discount: 0.5,
+    endDate: Date.now() + 24 * 60 * 60 * 1000,
+    offerPriceValidFor: 20
+  };
   const {
     isFixed = true
   } = header;
@@ -1342,13 +1396,113 @@ function DesktopHeader({
 
   // console.log(header, 'sakshat header desktop');
 
+  const renderer = ({
+    days,
+    hours,
+    minutes,
+    seconds
+  }) => {
+    if (days === 0 && hours < 24) {
+      return /*#__PURE__*/React.createElement("span", null, hours, "h : ", minutes, "m : ", seconds, "s");
+    } else {
+      let given = moment(mockHeader.endDate);
+      let current = moment().startOf('day');
+      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " ", 'Days');
+    }
+  };
+  const checkIfOfferIsValid = (endDate = null) => moment().diff(moment(endDate || 0)) < 0;
+  const checkForShowDiscount = (endDate = null, offerPriceValidFor = null, discount = 0) => {
+    let conversions = extraProps?.conversions || 0;
+    if (endDate === null || checkIfOfferIsValid()) {
+      if (discount > 0 && offerPriceValidFor === null) {
+        return true;
+      } else if (discount > 0 && offerPriceValidFor !== null && offerPriceValidFor - conversions <= 0) {
+        return false;
+      }
+    } else if (offerPriceValidFor >= null && discount) {
+      if (offerPriceValidFor <= conversions) {
+        return false;
+      }
+      if (offerPriceValidFor - conversions < 0) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+    if (discount > 0) {
+      return true;
+    }
+  };
+  const getDiscount = (price, discount) => {
+    return (discount / price * 100).toFixed(2);
+  };
+  const OfferDetailsJSX = () => {
+    let conversions = extraProps?.conversions || 0;
+    if (checkForShowDiscount(mockHeader?.endDate, mockHeader?.offerPriceValidFor, mockHeader?.discount) && mockHeader?.endDate ? checkIfOfferIsValid(mockHeader?.endDate) : true) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.rightNav
+      }, mockHeader?.isOfferActive && (mockHeader?.offerPriceValidFor ? mockHeader.offerPriceValidFor - conversions > 0 : true) ? /*#__PURE__*/React.createElement("div", {
+        className: classes.offerBox
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.offerBoxText
+      }, "Offer Ends In"), /*#__PURE__*/React.createElement("div", {
+        className: classes.offerBoxCountDown
+      }, /*#__PURE__*/React.createElement(Countdown, {
+        renderer: renderer,
+        date: mockHeader?.endDate
+      }))) : null, /*#__PURE__*/React.createElement("div", {
+        className: classes.priceBox
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+        className: classes.offerDiscount
+      }, `${getDiscount(mockHeader?.price, mockHeader?.discount)}%`, "\xA0OFF"), "\xA0\xA0", /*#__PURE__*/React.createElement("span", {
+        className: classes.originalPrice
+      }, mockHeader?.price), ' '), /*#__PURE__*/React.createElement("div", {
+        style: {
+          textAlign: 'end'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classes.offerPrice
+      }, mockHeader?.effectivePrice), ' ')), /*#__PURE__*/React.createElement(Button, {
+        data: {
+          // link: 'headerData?.loginCtaLink',
+          // isLink: 1,
+          value: 'BUY NOW'
+          // isExternal: 1
+        },
+
+        onClick: extraProps?.courseBuyNow,
+        type: 'primary',
+        size: 'small',
+        target: null,
+        name: "button",
+        rel: null
+        // styling={isMobile ? { margin: '0 40px' } : {}}
+      }));
+    } else return /*#__PURE__*/React.createElement(Button, {
+      data: {
+        // link: 'headerData?.loginCtaLink',
+        // isLink: 1,
+        value: 'BUY NOW'
+        // isExternal: 1
+      },
+
+      onClick: extraProps?.courseBuyNow,
+      type: 'primary',
+      size: 'medium',
+      target: null,
+      name: "button",
+      rel: null
+      // styling={isMobile ? { margin: '0 40px' } : {}}
+    });
+  };
+
   return /*#__PURE__*/React.createElement("nav", {
     className: classes.section
   }, !(header?.websiteLogo === DEFAULT_HEADER_IMAGE_LP && isCustomWebsite) ? /*#__PURE__*/React.createElement("div", {
     className: classes.headerSection
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.headerContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: classes.imageDiv
   }, header?.websiteLogo ? /*#__PURE__*/React.createElement("a", {
     href: logoUrl,
@@ -1376,7 +1530,7 @@ function DesktopHeader({
     moreContent: moreContentFn(),
     isTutorWebsite: isTutorWebsite,
     onDownloadAppTriggered: onDownloadAppTriggered
-  }))) : /*#__PURE__*/React.createElement("div", {
+  })), OfferDetailsJSX())) : /*#__PURE__*/React.createElement("div", {
     style: {
       paddingTop: '30px'
     }
@@ -1570,13 +1724,15 @@ function Header({
     header: data,
     isTutorWebsite: isTutorWebsite,
     isLandingPage: isLandingPage,
-    onDownloadAppTriggered: extraProps?.DownloadAppButtonTriggered
+    onDownloadAppTriggered: extraProps?.DownloadAppButtonTriggered,
+    extraProps: extraProps
   }) : /*#__PURE__*/React.createElement(DesktopHeader, {
     navData: filterHiddenNavs(),
     header: data,
     isTutorWebsite: isTutorWebsite,
     isLandingPage: isLandingPage,
-    onDownloadAppTriggered: extraProps?.DownloadAppButtonTriggered
+    onDownloadAppTriggered: extraProps?.DownloadAppButtonTriggered,
+    extraProps: extraProps
   });
 }
 
@@ -10206,21 +10362,28 @@ const TimerAndCall = ({
       text: "Secs"
     }));
   };
+  const CountDownJSX = offerPriceValidFor => {
+    let conversions = extraProps?.conversions || 0;
+    if (offerPriceValidFor && offerPriceValidFor - conversions <= 0) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.offerWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.offerEndsTitle
+    }, "Offer ends in"), /*#__PURE__*/React.createElement(Countdown, {
+      renderer: renderer,
+      date: nodeData.offerCounter?.metadata?.endDate,
+      daysInHours: true
+    }));
+  };
   return /*#__PURE__*/React.createElement("section", {
     className: classes.timerAndCallSection
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.timerAndCallContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.timerAndCallBox
-  }, nodeData?.showOffer?.metadata?.value && nodeData.offerCounter?.metadata?.isOfferActive ? /*#__PURE__*/React.createElement("div", {
-    className: classes.offerWrapper
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classes.offerEndsTitle
-  }, "Offer ends in"), /*#__PURE__*/React.createElement(Countdown, {
-    renderer: renderer,
-    date: nodeData.offerCounter?.metadata?.endDate,
-    daysInHours: true
-  })) : null, nodeData?.title?.metadata?.value ? /*#__PURE__*/React.createElement("div", {
+  }, nodeData?.showOffer?.metadata?.value && nodeData.offerCounter?.metadata?.isOfferActive ? CountDownJSX(nodeData.offerCounter?.metadata?.offerPriceValidFor) : null, nodeData?.title?.metadata?.value ? /*#__PURE__*/React.createElement("div", {
     className: classes.title
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.heading?.refSetter,