diy-template-components 0.2.42 → 0.2.44

package/build/index.js

@@ -157,14 +157,19 @@ const useSectionStyles$a = createUseStyles(theme => ({
     position: 'relative',
     maxHeight: '55px',
     alignItems: 'center',
-    width: '24%'
+    width: '30%'
   },
   imageDivImageMobile: {},
+  imageDivImageNext: {
+    objectFit: ({
+      isCustomWebsite
+    } = {}) => isCustomWebsite ? 'contain' : ''
+  },
   imageAnchorMobile: {
     pointerEvents: 'auto',
     cursor: 'default',
     width: '100%',
-    maxWidth: '60px',
+    maxWidth: '85px',
     cursor: 'default',
     height: '46px',
     position: 'relative'
@@ -180,7 +185,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
   mobileContent: {
     display: 'flex',
     alignItems: 'center',
-    width: "100%",
+    width: '100%',
     '& img': {
       marginRight: '8px',
       maxWidth: '80px',
@@ -224,7 +229,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: "10%"
+    width: '10%'
   },
   '@media screen and (max-width: 767px)': {
     optionsContainer: {
@@ -236,6 +241,9 @@ const useSectionStyles$a = createUseStyles(theme => ({
     mobileHeader: {
       height: '80px'
     },
+    sideDrawerImg: {
+      width: '15%'
+    },
     menuItem: {
       padding: '0'
     },
@@ -1115,34 +1123,73 @@ function OptionList({
   }) : null));
 }
 
+const nextImageRendererStyles = createUseStyles(() => ({
+  '@media (max-width: 640px)': {
+    imageContainer: {
+      maxWidth: '100%'
+    }
+  },
+  '@media (min-width: 641px) and (max-width: 1280px)': {
+    imageContainer: {
+      maxWidth: '75%'
+    }
+  },
+  '@media (min-width: 1281px)': {
+    imageContainer: {
+      maxWidth: '50%'
+    }
+  }
+}));
+
 const NextImageRenderer = ({
   src,
+  sectionIndex,
   ...props
 }) => {
   const {
-    isCustomWebsite
+    isCustomWebsite,
+    pageData,
+    isMobile
   } = React.useContext(PageContext);
-  const imageLoader = ({
-    src,
-    quality,
-    width
-  }) => {
-    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${width}`;
-  };
-  let {
-    refSetter,
-    className
-  } = props;
-  if (isCustomWebsite) {
-    const NextImage = require('next/image').default;
-    return /*#__PURE__*/React__default["default"].createElement(NextImage, _extends({
-      loader: imageLoader,
-      src: src,
-      layout: 'fill',
-      ref: refSetter,
-      className: className
-    }, props));
-  } else {
+  try {
+    let {
+      refSetter,
+      className
+    } = props;
+    if (isCustomWebsite && typeof Image !== 'undefined') {
+      const classes = nextImageRendererStyles();
+      const imageLoader = ({
+        src,
+        quality,
+        width
+      }) => {
+        const breakpoints = {
+          mobile: 640,
+          desktop: 1200
+        };
+        const dynamicWidth = isMobile ? breakpoints.mobile : breakpoints?.desktop;
+        return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${dynamicWidth}`;
+      };
+      const NextImage = require('next/image').default;
+      return /*#__PURE__*/React__default["default"].createElement(NextImage, _extends({
+        priority: sectionIndex == '0' ? true : false,
+        loader: imageLoader,
+        src: src,
+        layout: 'fill',
+        ref: refSetter,
+        className: `${classes?.imageContainer} ${className}`
+      }, props, {
+        alt: "image"
+      }));
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("img", {
+        ref: refSetter,
+        className: className,
+        src: src
+      });
+    }
+  } catch (err) {
+    console.log('next image failed', err);
     return /*#__PURE__*/React__default["default"].createElement("img", {
       ref: refSetter,
       className: className,
@@ -1160,12 +1207,16 @@ function DesktopHeader({
   const {
     isFixed = true
   } = header;
+  const {
+    isCustomWebsite
+  } = React.useContext(PageContext);
   const logoUrl = useLinkBuilder({
     isLink: true,
     link: '/'
   });
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const optionDataFn = () => {
     let optionsArr = navData;
@@ -1204,7 +1255,8 @@ function DesktopHeader({
     className: classes?.imageDivImage
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React__default["default"].createElement("a", {
     href: logoUrl
   }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -1230,6 +1282,9 @@ function MobileHeader({
   isTutorWebsite,
   isLandingPage = false
 }) {
+  const {
+    isCustomWebsite
+  } = React.useContext(PageContext);
   const {
     isFixed = true
   } = header;
@@ -1239,7 +1294,8 @@ function MobileHeader({
   });
   const theme = useTheme();
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const [sideMenu, openSideMenu] = React.useState(false);
   const navEl = React.useRef(null);
@@ -1374,7 +1430,8 @@ function MobileHeader({
     className: classes?.imageDivImageMobile
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: header?.websiteLogo,
-    className: classes.imageDivImageNext
+    className: classes.imageDivImageNext,
+    order: 1
   }))) : null, isTutorWebsite && header?.appName ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: classes.mobileAppNameClass
   }, " ", header?.appName) : null), downloadLink), sideMenu ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1434,6 +1491,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       boxSizing: 'border-box'
     }
   },
+  sectionNoBranding: {
+    paddingBottom: '0px'
+  },
   upperContainer: {
     display: 'flex',
     justifyContent: 'space-between',
@@ -1442,6 +1502,9 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     borderBottom: '1px solid #E1EAF6',
     alignItems: 'flex-start'
   },
+  upperContainerNoBranding: {
+    borderBottom: '0px'
+  },
   upperContainerItem1: {
     width: '33%',
     display: 'flex',
@@ -1517,9 +1580,10 @@ const useSectionStyles$9 = createUseStyles(theme => ({
     color: theme.palette.font.primary
   },
   poweredDiv: {
-    display: 'flex',
-    textDecoration: 'none',
-    alignItems: 'center',
+    width: '15%',
+    height: 'auto',
+    position: 'relative',
+    paddingBottom: ' 6%',
     '& p': {
       margin: '0',
       paddingRight: '8px',
@@ -1532,6 +1596,21 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       width: '100px'
     }
   },
+  poweredByContainer: {
+    display: 'flex',
+    width: '60%',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    gap: '5%'
+  },
+  poweredDivImg: {
+    width: '100px !important'
+  },
+  footerLogoImage: {
+    objectFit: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? 'contain' : ''
+  },
   '@media screen and (max-width: 767px)': {
     section: {
       padding: '45px 30px',
@@ -1577,13 +1656,22 @@ const useSectionStyles$9 = createUseStyles(theme => ({
       padding: '0'
     },
     poweredDiv: {
-      marginTop: '15px'
+      // marginTop: '15px'
+      width: '28%',
+      paddingBottom: '9%'
     },
     socialMediaCta: {
       margin: '0 8px 16px 8px'
     },
     bottomLeftText: {
       padding: '48px 0 10px 0'
+    },
+    poweredByContainer: {
+      gap: '2%',
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
     }
   }
 }));
@@ -1592,19 +1680,24 @@ function Footer({
   data
 }) {
   const theme = useTheme();
-  const classes = useSectionStyles$9();
-  console.log(data, 'this is data');
+  const {
+    isCustomWebsite
+  } = React.useContext(PageContext);
+  const classes = useSectionStyles$9({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React__default["default"].createElement("footer", {
-    className: classes.section
+    className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classes.upperContainer
+    className: data.metadata.isCpBranding ? `${classes.upperContainer}` : `${classes.upperContainer} ${classes.upperContainerNoBranding}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.upperContainerItem1
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.upperContainerItem1Img
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: data?.logo?.metadata?.url,
-    ref: data?.logo?.refSetter
+    ref: data?.logo?.refSetter,
+    className: classes.footerLogoImage
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.upperContainerItem2
   }, data?.address?.metadata.value && data?.address?.metadata.value !== '<br>' ? /*#__PURE__*/React__default["default"].createElement("p", {
@@ -1656,7 +1749,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.facebookLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: 'Facebook Solid',
     color: theme.palette.background.default,
@@ -1667,7 +1761,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.twitterLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: 'Twitter Solid',
     color: theme.palette.background.default,
@@ -1678,7 +1773,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.instagramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: 'Instagram',
     color: theme.palette.background.default,
@@ -1689,7 +1785,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.telegramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: 'Telegram',
     color: theme.palette.background.default,
@@ -1700,7 +1797,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.youtubeLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: 'YouTube',
     color: theme.palette.background.default,
@@ -1710,15 +1808,18 @@ function Footer({
     className: classes.lowerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bottomLeftText
-  }, "2022 All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("a", {
+  }, "2022 All Rights Reserved"), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classes.poweredByContainer
+  }, /*#__PURE__*/React__default["default"].createElement("p", null, "Powered by"), /*#__PURE__*/React__default["default"].createElement("a", {
     title: "Powered by Classplus",
     target: "_blank",
     href: "https://classplusapp.com/",
     className: classes.poweredDiv
-  }, /*#__PURE__*/React__default["default"].createElement("p", null, "Powered by"), /*#__PURE__*/React__default["default"].createElement("img", {
+  }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
+    src: 'https://storage.googleapis.com/coursewebview/logo.png',
     alt: "classplus",
-    src: 'https://storage.googleapis.com/coursewebview/logo.png'
-  }))) : null);
+    className: classes.poweredDivImg
+  })))) : null);
 }
 
 const borderRadius = {
@@ -1899,24 +2000,27 @@ const TYPE_TO_COMPONENT_MAP$1 = {
 const getCompToRender$1 = type => TYPE_TO_COMPONENT_MAP$1[type] || (() => null);
 const MemoisedSection$1 = /*#__PURE__*/React.memo(({
   sectionData,
-  extraProps
+  extraProps,
+  sectionIndex
 }) => {
-  console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender$1(sectionData.type);
   return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   });
 });
 function SectionRenderer$1({
   sectionData,
+  sectionIndex,
   extraProps
 }) {
   return /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
     fallback: null /*GIF maybe*/
   }, /*#__PURE__*/React__default["default"].createElement(MemoisedSection$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -1986,7 +2090,6 @@ function PageRenderer$1({
     _id
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || React.Fragment;
-  // console.log("CONTEXT______", context)
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React__default["default"].createElement(PageContext.Provider, {
@@ -2007,7 +2110,8 @@ function PageRenderer$1({
     key: sectionData.type + (sectionData._id || sectionIndex)
   }), /*#__PURE__*/React__default["default"].createElement(SectionRenderer$1, {
     sectionData: sectionData,
-    extraProps: extraProps
+    extraProps: extraProps,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React__default["default"].createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true
@@ -2052,6 +2156,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   },
   contentContainer: {
     position: 'relative',
+    width: '100%',
     zIndex: '1',
     display: 'grid',
     gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
@@ -2350,7 +2455,8 @@ function Carousel({
 }
 
 function Section$4({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const classes = useSectionStyles$8();
   const {
@@ -2387,7 +2493,7 @@ function Section$4({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2397,11 +2503,13 @@ function Section$4({
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     ref: nodeData?.image?.refSetter,
     className: classes.sideBannerImage,
-    src: nodeData.image.metadata.value
+    src: nodeData.image.metadata.value,
+    sectionIndex: sectionIndex
   }))));
 }
 function BannerCarouselRight({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -2425,7 +2533,8 @@ function BannerCarouselRight({
     className: classes.sectionContainer
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$4, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -2717,9 +2826,13 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     width: '100%'
   },
   contentContainer: {
-    padding: '100px 0',
+    // padding: '100px 0',
+    // height: '100%',
+    // display: 'flex',
+    // alignItems: 'center'
     height: '100%',
     display: 'flex',
+    /* padding: 100px 0; */
     alignItems: 'center'
     // backgroundImage: ({ imageUrl } = {}) =>
     //   `linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), url("${imageUrl}")`,
@@ -2745,7 +2858,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     height: '100%'
   },
   textContainer: {
-    padding: '0 18%',
+    padding: '100px 0',
     margin: '0 auto',
     width: '80%'
   },
@@ -2803,7 +2916,8 @@ const useSectionStyles$6 = createUseStyles(theme => ({
 
 const Section$3 = ({
   nodeData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
   const {
     layout: {
@@ -2815,7 +2929,6 @@ const Section$3 = ({
     imageUrl: nodeData.image.metadata.value,
     containerWidth
   });
-  console.log('isCustomWebsite______', isCustomWebsite);
   return /*#__PURE__*/React__default["default"].createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2844,7 +2957,7 @@ const Section$3 = ({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
@@ -2853,14 +2966,15 @@ const Section$3 = ({
     className: classes?.centerBgImageContainer
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
-    className: classes?.centerBgImage
+    className: classes?.centerBgImage,
+    sectionIndex: sectionIndex
   }))));
 };
 function BannerCarouselCenter({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const classes = useSectionStyles$6();
   const [{
     bannerCarousel
@@ -2875,7 +2989,8 @@ function BannerCarouselCenter({
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, wrapperProps, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$3, {
     nodeData: node,
     isCustomWebsite: isCustomWebsite,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -2919,7 +3034,13 @@ const useSectionStyles$5 = createUseStyles(theme => {
       position: 'relative',
       width: '100%',
       // height: "650px"
-      paddingBottom: '82%'
+      paddingBottom: ({
+        isCustomWebsite
+      }) => isCustomWebsite ? '85%' : '',
+      '& img': {
+        height: '520px',
+        objectFit: 'cover'
+      }
     },
     imageBorder: {
       border: `2px solid ${theme?.palette?.primary?.light}`,
@@ -2970,6 +3091,14 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%',
         padding: '0'
       },
+      // imageContainer: {
+
+      //   '& img': {
+      //     height: "520px",
+      //     objectFit: "cover"
+      //   }
+
+      // },
       imageContainerDiv: {
         width: '100%'
       },
@@ -2995,15 +3124,19 @@ const useSectionStyles$5 = createUseStyles(theme => {
 });
 
 function Section$2({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
-  const classes = useSectionStyles$5();
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = React.useContext(PageContext);
+  const classes = useSectionStyles$5({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3013,7 +3146,8 @@ function Section$2({
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
     ref: nodeData?.image?.refSetter,
-    className: classes.sideBannerImage
+    className: classes.sideBannerImage,
+    sectionIndex: sectionIndex
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imageBorder
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3038,18 +3172,20 @@ function Section$2({
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), /*#__PURE__*/React__default["default"].createElement(Button, {
+  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
-    size: isMobile ? 'small' : 'medium'
+    size: isMobile ? 'small' : 'medium',
+    name: "button"
   })));
 }
 function BannerCarouselLeft({
   sectionData,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex,
+  isMobile
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const {
     layout: {
       containerWidth
@@ -3068,7 +3204,8 @@ function BannerCarouselLeft({
     className: classes.sectionContainer
   }, /*#__PURE__*/React__default["default"].createElement(Wrapper, null, bannerCarousel.components.map((node, idx) => /*#__PURE__*/React__default["default"].createElement(Section$2, {
     nodeData: node,
-    key: idx /* or some other unique property */
+    key: idx /* or some other unique property */,
+    sectionIndex: sectionIndex
   })))));
 }
 
@@ -3227,7 +3364,6 @@ async function postApiCall(baseURLs, data) {
         return res.data;
       }
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3250,7 +3386,6 @@ async function postApiCallForm(baseURLs, data, extraProps) {
         return res.data;
       });
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3437,7 +3572,7 @@ function SubscribeToNewsletter({
     onFocus: () => {
       setIsValid(true);
     }
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.btnContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
@@ -3503,7 +3638,8 @@ const useTestimonialStyles = createUseStyles(theme => {
       color: theme?.palette?.font?.default,
       margin: '10px 0 40px 10px',
       overflow: 'hidden',
-      whiteSpace: 'nowrap',
+      wordBreak: 'break-word',
+      // whiteSpace: 'nowrap',
       textOverflow: 'ellipsis'
     },
     sliderContainer: {
@@ -3594,7 +3730,8 @@ const useTestimonialStyles = createUseStyles(theme => {
         color: theme?.palette?.font?.default,
         margin: '4px 0 12px 0',
         overflow: 'hidden',
-        whiteSpace: 'nowrap',
+        // whiteSpace: 'nowrap',
+        wordBreak: 'break-word',
         textOverflow: 'ellipsis'
       },
       userImageDummy: {
@@ -3641,7 +3778,8 @@ function QuotesComponent() {
 }
 
 function Section$1({
-  nodeData
+  nodeData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -3697,7 +3835,8 @@ function Section$1({
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImage,
     src: el?.cardUserImage?.metadata?.value,
-    alt: "userImg"
+    alt: "userImg",
+    sectionIndex: sectionIndex
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     ref: el?.cardUserImage?.refSetter,
     className: classes.userImageDummy
@@ -3734,13 +3873,15 @@ function Section$1({
   }, carouselContent))));
 }
 function Testimonials({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTestimonialStyles();
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.testimonialContainer
   }, /*#__PURE__*/React__default["default"].createElement(Section$1, {
-    nodeData: sectionData.components[0]
+    nodeData: sectionData.components[0],
+    sectionIndex: sectionIndex
   }));
 }
 
@@ -3894,7 +4035,8 @@ function VideoPlayer(props) {
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLoaded && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.imgContainer
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
-    src: imageUrl
+    src: imageUrl,
+    sectionIndex: props?.sectionIndex
   }), isEnabled ? /*#__PURE__*/React__default["default"].createElement(Loader, null) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, props.onlyThumbnail ? null : /*#__PURE__*/React__default["default"].createElement(Icon, {
     name: "Video Play",
     color: theme.palette.font.invertedDefault,
@@ -4059,7 +4201,8 @@ const SingleVideoSlide$2 = props => {
     className: classes.iframeContainer
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     imageUrl: data.videoFrame.metadata?.thumbnail,
-    videoUrl: data.videoFrame.metadata?.value
+    videoUrl: data.videoFrame.metadata?.value,
+    sectionIndex: props?.sectionIndex
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.videoDetails
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -4084,7 +4227,8 @@ const SingleVideoSlide$2 = props => {
 };
 
 function VideoTestimonial({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -4118,7 +4262,8 @@ function VideoTestimonial({
     }
   })), /*#__PURE__*/React__default["default"].createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$2, {
     data: data,
-    key: index
+    key: index,
+    sectionIndex: sectionIndex
   }))))));
 }
 
@@ -4787,7 +4932,8 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
 });
 
 function PhotoGallery({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -4822,7 +4968,8 @@ function PhotoGallery({
     }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       src: el?.cardImage?.metadata?.value,
       ref: el?.cardImage?.refSetter,
-      className: classes?.carouselImage
+      className: classes?.carouselImage,
+      sectionIndex: sectionIndex
     })));
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5498,9 +5645,9 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF')), /*#__PURE__*/React__default["default"].createElement("a", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React__default["default"].createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5781,7 +5928,8 @@ const useTeamStyles = createUseStyles(theme => {
 });
 
 const SingleSlide = ({
-  data
+  data,
+  sectionIndex
 }) => {
   const classes = useTeamStyles();
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5792,7 +5940,8 @@ const SingleSlide = ({
     ref: data?.image?.refSetter,
     className: classes.image,
     alt: "Hero Image",
-    src: data.image.metadata.value
+    src: data.image.metadata.value,
+    sectionIndex: sectionIndex
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.teamDetailsContainer
   }, /*#__PURE__*/React__default["default"].createElement("h3", {
@@ -5811,7 +5960,8 @@ const SingleSlide = ({
 };
 
 function TeamCard({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     isMobile,
@@ -5838,7 +5988,8 @@ function TeamCard({
   const carouselContent = teamData.teamCarousel.components.map((data, idx) => {
     return /*#__PURE__*/React__default["default"].createElement(SingleSlide, {
       key: idx,
-      data: data
+      data: data,
+      sectionIndex: sectionIndex
     });
   });
   return /*#__PURE__*/React__default["default"].createElement("section", {
@@ -5930,7 +6081,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     marginTop: '32px'
   },
   leftContainer: {
-    width: '50%'
+    width: '65%'
   },
   subtitle: {
     margin: '0 0 40px 0',
@@ -6235,7 +6386,7 @@ function FormEnquiry({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6442,7 +6593,8 @@ const useSectionStyles = createUseStyles(theme => ({
 }));
 
 function Contact({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const {
     layout: {
@@ -6535,7 +6687,8 @@ function Contact({
   }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
     className: classes?.telephoneImage,
     ref: nodeData?.image?.refSetter,
-    src: nodeData?.image?.metadata?.value
+    src: nodeData?.image?.metadata?.value,
+    sectionIndex: sectionIndex
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.rightContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6626,7 +6779,7 @@ function Contact({
         messageValid: 1
       });
     }
-  })), /*#__PURE__*/React__default["default"].createElement(Button, {
+  })), nodeData.cta.metadata.value !== '' && /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
       value: 'Submitted'
@@ -6636,7 +6789,8 @@ function Contact({
     onClick: () => handleSubmit(),
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
-    disabled: btnDisabled
+    disabled: btnDisabled,
+    name: "button"
   }))))));
 }
 
@@ -6766,10 +6920,11 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     courseViewContainer: {
       width: '645px',
+      height: 'fit-content',
       backgroundColor: '#f4f9ff',
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'center',
+      justifyContent: 'start',
       paddingTop: '20px',
       borderRadius: '10px'
     },
@@ -6817,10 +6972,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     courseDetailContent: {
       marginTop: '16px',
       fontSize: '16px',
-      lineHeight: '24px',
       wordBreak: 'break-word',
       color: theme.palette.font.primary,
-      margin: '10px 0 20px'
+      margin: '10px 0 20px',
+      whiteSpace: 'pre-wrap'
     },
     courseDetailViewFullDetails: {
       cursor: 'pointer',
@@ -6937,7 +7092,6 @@ const SingleVideoSlide$1 = props => {
     price,
     discount
   }) => {
-    console.log('discountxx', props.data.price, props.data.discount);
     return (discount / price * 100).toFixed(2);
   };
   const classes = useWebinarPromotionPage();
@@ -7006,7 +7160,8 @@ const SingleVideoSlide$1 = props => {
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: data.isPaid ? 'flex' : 'block'
@@ -7049,7 +7204,8 @@ const SingleVideoSlide$1 = props => {
 
 function CoursePromotionPage$1({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7068,7 +7224,8 @@ function CoursePromotionPage$1({
   }, /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$1, {
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -7371,15 +7528,6 @@ const SingleVideoSlide = props => {
     isMobile,
     isEdit
   } = React.useContext(PageContext);
-  console.log(isEdit, 'isEdit');
-  React.useEffect(() => {
-    // remaining days epoch
-    // current date epoch
-    // subtract remaining days from current day epoch
-    // moment the result - and see if there are days
-    // days is present show days
-    // else start reverse timer
-  }, []);
   const renderer = ({
     days,
     hours,
@@ -7522,7 +7670,8 @@ const SingleVideoSlide = props => {
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
     onlyThumbnail: true,
     imageUrl: data.thumbnail,
-    videoUrl: data.thumbnail
+    videoUrl: data.thumbnail,
+    sectionIndex: props?.sectionIndex
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bottomContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7553,6 +7702,7 @@ const SingleVideoSlide = props => {
     type: 'primary',
     size: 'medium',
     target: null,
+    name: "button",
     rel: null
     // styling={isMobile ? { margin: '0 40px' } : {}}
   })))), showCourseInstallmentData && InstalmentData && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7576,7 +7726,8 @@ const SingleVideoSlide = props => {
 
 function CoursePromotionPage({
   sectionData,
-  extraProps = {}
+  extraProps = {},
+  sectionIndex
 }) {
   const {
     layout: {
@@ -7586,7 +7737,6 @@ function CoursePromotionPage({
   const classes = useCoursePromotionPage({
     containerWidth
   });
-  console.log(sectionData, 'sectionData');
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseSuperContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7597,7 +7747,8 @@ function CoursePromotionPage({
     data: sectionData.components[0].metadata,
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
-    conversions: extraProps.conversions
+    conversions: extraProps.conversions,
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -8022,7 +8173,8 @@ const useTilesStyles = createUseStyles(theme => {
 });
 
 function Tiles({
-  sectionData
+  sectionData,
+  sectionIndex
 }) {
   const classes = useTilesStyles({});
   const {
@@ -8034,7 +8186,6 @@ function Tiles({
     isEdit
   } = React.useContext(PageContext);
   const nodeData = sectionData.components;
-  console.log(nodeData);
   const tilesList = nodeData[0]?.tilesList.components;
   const handleClick = value => {
     if (!isEdit && value) {
@@ -8051,9 +8202,10 @@ function Tiles({
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.tileDiv,
       onClick: () => handleClick(tile.cta?.metadata?.value)
-    }, /*#__PURE__*/React__default["default"].createElement("img", {
+    }, /*#__PURE__*/React__default["default"].createElement(NextImageRenderer, {
       className: classes.tileImg,
-      src: tile?.tileImage?.metadata?.value
+      src: tile?.tileImage?.metadata?.value,
+      sectionIndex: sectionIndex
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       className: classes.title,
       ref: tile.tileName?.refSetter,
@@ -8509,7 +8661,6 @@ function EmailDripMarket({
   sectionData,
   extraProps = {}
 }) {
-  console.log('extrapropstemplate', extraProps);
   const isInitialMount = React.useRef(true);
   const convertToHtml = sectionData => {
     const html = ReactDOMServer__default["default"].renderToStaticMarkup( /*#__PURE__*/React__default["default"].createElement(Section, {
@@ -8580,27 +8731,28 @@ const getCompToRender = type => TYPE_TO_COMPONENT_MAP[type] || (() => null);
 const MemoisedSection = /*#__PURE__*/React.memo(({
   sectionData,
   extraProps,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) => {
-  // console.log("isCustomWebsite______", isCustomWebsite)
-  console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React__default["default"].createElement(SectionComp, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   });
 });
 function SectionRenderer({
   sectionData,
   extraProps,
-  isCustomWebsite
+  isCustomWebsite,
+  sectionIndex
 }) {
-  // console.log("isCustomWebsite______", isCustomWebsite)
   return /*#__PURE__*/React__default["default"].createElement(MemoisedSection, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   });
 }
 
@@ -8678,7 +8830,8 @@ function PageRenderer({
   }), /*#__PURE__*/React__default["default"].createElement(SectionRenderer, {
     sectionData: sectionData,
     extraProps: extraProps,
-    isCustomWebsite: isCustomWebsite
+    isCustomWebsite: isCustomWebsite,
+    sectionIndex: sectionIndex
   }))) : sectionPlaceholder, !!footer && /*#__PURE__*/React__default["default"].createElement(Wrapper, !!SectionWrapper && {
     sectionData: footer,
     isFooter: true