diy-template-components 2.0.68 → 2.0.70

package/build/index.es.js

@@ -271,6 +271,31 @@ const useSectionStyles$a = createUseStyles(theme => ({
     fontWeight: '700',
     padding: '6px 16px'
   },
+  BottomSheetContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderTop: '1px solid #e5e5e5',
+    background: '#021927',
+    color: '#FFFFFF'
+  },
+  BottomSheetPriceContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '16px 16px 24px'
+  },
+  BottomSheetOfferContainer: {
+    padding: '12px 0 ',
+    padding: '16px 16px 24px',
+    border: '1px solid rgba(0, 0, 0, 1)'
+  },
+  offerBottom: {
+    display: 'flex',
+    justifyContent: 'space-between'
+  },
+  smallText: {
+    fontWeight: '400',
+    fontSize: '8px'
+  },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
       flexDirection: 'column',
@@ -306,6 +331,24 @@ const useSectionStyles$a = createUseStyles(theme => ({
         borderBottom: '1px solid #F3F3F3',
         width: '100%'
       }
+    },
+    offerPrice: {
+      color: '#FFFFFF',
+      fontSize: '18px'
+    },
+    offerDiscount: {
+      color: 'rgba(8, 189, 128, 1)'
+    },
+    originalPrice: {
+      color: '#FFFFFF',
+      textDecoration: 'line-through'
+    },
+    BottomSheetContainer: {
+      position: 'fixed',
+      bottom: 0,
+      left: 0,
+      width: '100%',
+      zIndex: '2'
     }
   },
   mobileAppNameClass: {
@@ -1537,13 +1580,24 @@ function DesktopHeader({
   }));
 }
 
+var timer = "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M7.99996%2015.1667C4.50663%2015.1667%201.66663%2012.3267%201.66663%208.83333C1.66663%205.34%204.50663%202.5%207.99996%202.5C11.4933%202.5%2014.3333%205.34%2014.3333%208.83333C14.3333%2012.3267%2011.4933%2015.1667%207.99996%2015.1667ZM7.99996%203.5C5.05996%203.5%202.66663%205.89333%202.66663%208.83333C2.66663%2011.7733%205.05996%2014.1667%207.99996%2014.1667C10.94%2014.1667%2013.3333%2011.7733%2013.3333%208.83333C13.3333%205.89333%2010.94%203.5%207.99996%203.5Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M8%209.16671C7.72667%209.16671%207.5%208.94004%207.5%208.66671V5.33337C7.5%205.06004%207.72667%204.83337%208%204.83337C8.27333%204.83337%208.5%205.06004%208.5%205.33337V8.66671C8.5%208.94004%208.27333%209.16671%208%209.16671Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M10%201.83337H6C5.72667%201.83337%205.5%201.60671%205.5%201.33337C5.5%201.06004%205.72667%200.833374%206%200.833374H10C10.2733%200.833374%2010.5%201.06004%2010.5%201.33337C10.5%201.60671%2010.2733%201.83337%2010%201.83337Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E";
+
 function MobileHeader({
   header,
   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 {
     isCustomWebsite,
     countryCode
@@ -1579,6 +1633,94 @@ function MobileHeader({
 
   // console.log(header, 'sakshat header mobile');
 
+  const getDiscount = (price, discount) => {
+    return (discount / price * 100).toFixed(2);
+  };
+  const renderer = ({
+    days,
+    hours,
+    minutes,
+    seconds
+  }) => {
+    if (days === 0 && hours < 24) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.offerBottom
+      }, /*#__PURE__*/React.createElement("div", null, "Offer ends in"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '5px'
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: timer,
+        alt: ""
+      }), ' ', /*#__PURE__*/React.createElement("div", null, hours, " ", /*#__PURE__*/React.createElement("span", {
+        className: classes.smallText
+      }, "hrs"), " : ", minutes, ' ', /*#__PURE__*/React.createElement("span", {
+        className: classes.smallText
+      }, "Mins"), " : ", seconds, ' ', /*#__PURE__*/React.createElement("span", {
+        className: classes.smallText
+      }, "Secs"))));
+    } else {
+      let given = moment(mockHeader.endDate);
+      let current = moment().startOf('day');
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.offerBottom
+      }, /*#__PURE__*/React.createElement("div", null, "This offer is only valid for"), /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '5px'
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: timer,
+        alt: ""
+      }), ' ', /*#__PURE__*/React.createElement("div", null, Math.floor(moment.duration(given.diff(current)).asDays()), /*#__PURE__*/React.createElement("span", {
+        className: classes.smallText
+      }, "\xA0\xA0Days"))));
+    }
+  };
+  const OfferDetailsJSX = () => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.BottomSheetOfferContainer
+    }, ' ', /*#__PURE__*/React.createElement(Countdown, {
+      renderer: renderer,
+      date: mockHeader?.endDate
+    }));
+  };
+  const BottomSheetJSX = () => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: classes.BottomSheetContainer
+    }, OfferDetailsJSX(), /*#__PURE__*/React.createElement("div", {
+      className: classes.BottomSheetPriceContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.BottomSheetPrice
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        textAlign: 'start'
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: classes.offerPrice
+    }, mockHeader?.effectivePrice), ' '), /*#__PURE__*/React.createElement("span", {
+      className: classes.originalPrice
+    }, mockHeader?.price), ' ', /*#__PURE__*/React.createElement("span", {
+      className: classes.offerDiscount
+    }, `${getDiscount(mockHeader?.price, mockHeader?.discount)}%`, "\xA0OFF"), "\xA0\xA0")), /*#__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' } : {}}
+    }))));
+  };
+
   if (isTutorWebsite) {
     if (isAndroidDelisted && apkURL) {
       downloadLink = /*#__PURE__*/React.createElement(Button, {
@@ -1651,7 +1793,7 @@ function MobileHeader({
       downloadLink = null;
     }
   }
-  return /*#__PURE__*/React.createElement("nav", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("nav", {
     ref: navEl,
     className: classes.section
   }, !(header?.websiteLogo === DEFAULT_HEADER_IMAGE_LP && isCustomWebsite) ? /*#__PURE__*/React.createElement("div", {
@@ -1684,7 +1826,7 @@ function MobileHeader({
     order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React.createElement("p", {
     className: classes.mobileAppNameClass
-  }, " ", header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React.createElement("div", {
+  }, ' ', header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React.createElement("div", {
     className: classes.mobileMenu
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.backdrop,
@@ -1704,7 +1846,7 @@ function MobileHeader({
     style: {
       paddingTop: '30px'
     }
-  }));
+  })), /*#__PURE__*/React.createElement(BottomSheetJSX, null));
 }
 
 function Header({