diy-template-components 2.0.65 → 2.0.67

package/build/index.es.js

@@ -2436,8 +2436,7 @@ function PageRenderer$1({
   hideLogin,
   isCustomWebsite,
   countryCode,
-  currencySymbol,
-  pageData: fullPageData = {}
+  currencySymbol
 }) {
   const navList = header?.navs;
   const context = useMemo(() => ({
@@ -2459,9 +2458,8 @@ function PageRenderer$1({
     isCustomWebsite,
     _id,
     countryCode,
-    currencySymbol,
-    fullPageData
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol, fullPageData]);
+    currencySymbol
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -10104,14 +10102,50 @@ const useTimerCallPageStyles = createUseStyles(theme => ({
   },
   timerAndCallContainer: {
     padding: '72px',
-    background: theme?.colors?.background3,
+    background: '#F4F9FF',
     borderRadius: '8px',
     boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
   },
   timerAndCallBox: {
     display: 'flex',
     flexDirection: 'column',
-    gap: '42px'
+    gap: '42px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  title: {
+    fontWeight: '700',
+    fontSize: '40px',
+    textAlign: 'center',
+    lineHeight: '45px'
+  },
+  offerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  offerEndsTitle: {
+    fontWeight: '700',
+    fontSize: '16px'
+  },
+  countdown: {
+    display: 'flex',
+    gap: '10px'
+  },
+  counterBox: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '0.56px solid #2C88FF',
+    borderRadius: '8px',
+    background: '#FFFFFF',
+    color: '#2C88FF',
+    padding: '12px 16px 12px 16px',
+    fontWeight: '600',
+    fontSize: '14px'
   },
   // SMALL SCREEN
   '@media screen and (max-width: 767px)': {
@@ -10123,6 +10157,12 @@ const useTimerCallPageStyles = createUseStyles(theme => ({
     },
     timerAndCallBox: {
       gap: '32px'
+    },
+    title: {
+      fontSize: '24px'
+    },
+    offerWrapper: {
+      gap: '16px'
     }
   }
 }));
@@ -10131,6 +10171,7 @@ const TimerAndCall = ({
   sectionData,
   extraProps = {}
 }) => {
+  console.log('extraProps in timer', extraProps);
   const {
     isMobile,
     fullPageData
@@ -10140,18 +10181,73 @@ const TimerAndCall = ({
   const classes = useTimerCallPageStyles({
     isMobile
   });
+  const CounterBox = ({
+    value,
+    text
+  }) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.counterBox
+    }, /*#__PURE__*/React.createElement("div", null, value), /*#__PURE__*/React.createElement("div", null, text));
+  };
+  const renderer = ({
+    formatted,
+    completed
+  }) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.countdown
+    }, /*#__PURE__*/React.createElement(CounterBox, {
+      value: formatted?.hours,
+      text: "Hours"
+    }), /*#__PURE__*/React.createElement(CounterBox, {
+      value: formatted?.minutes,
+      text: "Mins"
+    }), /*#__PURE__*/React.createElement(CounterBox, {
+      value: formatted?.seconds,
+      text: "Secs"
+    }));
+  };
   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 ? /*#__PURE__*/React.createElement(React.Fragment, null) : null, nodeData?.title?.metadata?.value ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+  }, 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", {
+    className: classes.title
+  }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.heading?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData?.title?.metadata?.value
     }
-  })) : null)));
+  })) : null, nodeData?.timerButton?.metadata?.value ? /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: '100%',
+      fontWeight: '700',
+      fontSize: '14px'
+    },
+    data: {
+      // link: 'headerData?.loginCtaLink',
+      // isLink: 1,
+      value: nodeData.timerButton.metadata.value
+      // isExternal: 1
+    },
+
+    onClick: extraProps?.courseBuyNow,
+    type: 'primary',
+    size: 'medium',
+    target: null,
+    name: "button",
+    rel: null
+    // styling={isMobile ? { margin: '0 40px' } : {}}
+  }) : null)));
 };
 
 var index = /*#__PURE__*/Object.freeze({
@@ -10192,6 +10288,7 @@ const MemoisedSection = /*#__PURE__*/memo(({
   isCustomWebsite,
   sectionIndex
 }) => {
+  console.log('extraProps in section data', extraProps);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
@@ -10246,8 +10343,7 @@ function PageRenderer({
   templateId,
   isTutorWebsite = false,
   extraProps,
-  hideLogin,
-  pageData: fullPageData = {}
+  hideLogin
 }) {
   const navList = header?.navs;
   const context = useMemo(() => ({
@@ -10269,9 +10365,8 @@ function PageRenderer({
     isCustomWebsite,
     _id,
     countryCode,
-    currencySymbol,
-    fullPageData
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol, fullPageData]);
+    currencySymbol
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const theme = useMemo(() => generateTheme(color, font, context.isMobile), [color, font, context.isMobile]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {