diy-template-components 0.2.43 → 0.2.45

package/build/index.es.js

@@ -142,14 +142,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'
@@ -221,6 +226,9 @@ const useSectionStyles$a = createUseStyles(theme => ({
     mobileHeader: {
       height: '80px'
     },
+    sideDrawerImg: {
+      width: '15%'
+    },
     menuItem: {
       padding: '0'
     },
@@ -1100,6 +1108,24 @@ 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,
@@ -1107,31 +1133,48 @@ const NextImageRenderer = ({
 }) => {
   const {
     isCustomWebsite,
-    pageData
+    pageData,
+    isMobile
   } = useContext(PageContext);
-  console.log('contexttest___', sectionIndex);
-  const imageLoader = ({
-    src,
-    quality,
-    width
-  }) => {
-    return `${process.env.NEXT_PUBLIC_ENV_ASSET_PREFIX}/_next/image?url=${src}&q=${quality || 75}&w=${640}`;
-  };
-  let {
-    refSetter,
-    className
-  } = props;
-  if (isCustomWebsite) {
-    const NextImage = require('next/image').default;
-    return /*#__PURE__*/React.createElement(NextImage, _extends({
-      priority: sectionIndex == '0' ? true : false,
-      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.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.createElement("img", {
+        ref: refSetter,
+        className: className,
+        src: src
+      });
+    }
+  } catch (err) {
+    console.log('next image failed', err);
     return /*#__PURE__*/React.createElement("img", {
       ref: refSetter,
       className: className,
@@ -1149,12 +1192,16 @@ function DesktopHeader({
   const {
     isFixed = true
   } = header;
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
   const logoUrl = useLinkBuilder({
     isLink: true,
     link: '/'
   });
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const optionDataFn = () => {
     let optionsArr = navData;
@@ -1220,6 +1267,9 @@ function MobileHeader({
   isTutorWebsite,
   isLandingPage = false
 }) {
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
   const {
     isFixed = true
   } = header;
@@ -1229,7 +1279,8 @@ function MobileHeader({
   });
   const theme = useTheme();
   const classes = useSectionStyles$a({
-    isFixed
+    isFixed,
+    isCustomWebsite
   });
   const [sideMenu, openSideMenu] = useState(false);
   const navEl = useRef(null);
@@ -1540,6 +1591,11 @@ const useSectionStyles$9 = createUseStyles(theme => ({
   poweredDivImg: {
     width: '100px !important'
   },
+  footerLogoImage: {
+    objectFit: ({
+      isCustomWebsite
+    }) => isCustomWebsite ? 'contain' : ''
+  },
   '@media screen and (max-width: 767px)': {
     section: {
       padding: '45px 30px',
@@ -1609,8 +1665,12 @@ function Footer({
   data
 }) {
   const theme = useTheme();
-  const classes = useSectionStyles$9();
-  console.log(data, 'this is data');
+  const {
+    isCustomWebsite
+  } = useContext(PageContext);
+  const classes = useSectionStyles$9({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React.createElement("footer", {
     className: data.metadata.isCpBranding ? `${classes.section}` : `${classes.section} ${classes.sectionNoBranding}`
   }, /*#__PURE__*/React.createElement("div", {
@@ -1621,7 +1681,8 @@ function Footer({
     className: classes.upperContainerItem1Img
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: data?.logo?.metadata?.url,
-    ref: data?.logo?.refSetter
+    ref: data?.logo?.refSetter,
+    className: classes.footerLogoImage
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.upperContainerItem2
   }, data?.address?.metadata.value && data?.address?.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("p", {
@@ -1673,7 +1734,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.facebookLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Facebook Solid',
     color: theme.palette.background.default,
@@ -1684,7 +1746,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.twitterLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Twitter Solid',
     color: theme.palette.background.default,
@@ -1695,7 +1758,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.instagramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Instagram',
     color: theme.palette.background.default,
@@ -1706,7 +1770,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.telegramLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'Telegram',
     color: theme.palette.background.default,
@@ -1717,7 +1782,8 @@ function Footer({
     className: classes.socialMediaCta,
     onClick: () => {
       window.open(data?.youtubeLink?.metadata?.value, '_blank');
-    }
+    },
+    "aria-label": "Name"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: 'YouTube',
     color: theme.palette.background.default,
@@ -1922,7 +1988,6 @@ const MemoisedSection$1 = /*#__PURE__*/memo(({
   extraProps,
   sectionIndex
 }) => {
-  console.log('sectionIndex MEMO', sectionIndex);
   const SectionComp = getCompToRender$1(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
@@ -2010,7 +2075,6 @@ function PageRenderer$1({
     _id
   }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || Fragment;
-  // console.log("CONTEXT______", context)
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, /*#__PURE__*/React.createElement(PageContext.Provider, {
@@ -2077,6 +2141,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   },
   contentContainer: {
     position: 'relative',
+    width: '100%',
     zIndex: '1',
     display: 'grid',
     gridTemplateColumns: 'repeat(2,minmax(0, 1fr))',
@@ -2385,7 +2450,6 @@ function Section$4({
     },
     isMobile
   } = useContext(PageContext);
-  console.log('nodedata_____', nodeData?.metadata?.order);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -2747,9 +2811,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}")`,
@@ -2775,7 +2843,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     height: '100%'
   },
   textContainer: {
-    padding: '0 18%',
+    padding: '100px 0',
     margin: '0 auto',
     width: '80%'
   },
@@ -2814,7 +2882,8 @@ const useSectionStyles$6 = createUseStyles(theme => ({
       padding: '0px'
     },
     textContainer: {
-      padding: '20px'
+      padding: '0px 20px',
+      height: '100%'
     },
     heading: {
       fontSize: '40px'
@@ -2846,7 +2915,6 @@ const Section$3 = ({
     imageUrl: nodeData.image.metadata.value,
     containerWidth
   });
-  console.log('isCustomWebsite______', isCustomWebsite);
   return /*#__PURE__*/React.createElement("section", {
     className: classes.bannerCarouselCenterSection
   }, /*#__PURE__*/React.createElement("div", {
@@ -2893,7 +2961,6 @@ function BannerCarouselCenter({
   isCustomWebsite,
   sectionIndex
 }) {
-  console.log('isCustomWebsite______', isCustomWebsite);
   const classes = useSectionStyles$6();
   const [{
     bannerCarousel
@@ -2953,7 +3020,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}`,
@@ -3004,6 +3077,14 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%',
         padding: '0'
       },
+      // imageContainer: {
+
+      //   '& img': {
+      //     height: "520px",
+      //     objectFit: "cover"
+      //   }
+
+      // },
       imageContainerDiv: {
         width: '100%'
       },
@@ -3032,14 +3113,16 @@ function Section$2({
   nodeData,
   sectionIndex
 }) {
-  const classes = useSectionStyles$5();
   const {
     layout: {
       containerWidth
     },
-    isMobile
+    isMobile,
+    isCustomWebsite
   } = useContext(PageContext);
-  console.log('nodedata_____SDF', sectionIndex);
+  const classes = useSectionStyles$5({
+    isCustomWebsite
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: classes.centerData
   }, /*#__PURE__*/React.createElement("div", {
@@ -3079,13 +3162,15 @@ function Section$2({
     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,
-  sectionIndex
+  sectionIndex,
+  isMobile
 }) {
   const {
     layout: {
@@ -3265,7 +3350,6 @@ async function postApiCall(baseURLs, data) {
         return res.data;
       }
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3288,7 +3372,6 @@ async function postApiCallForm(baseURLs, data, extraProps) {
         return res.data;
       });
     } catch (err) {
-      console.log(err);
       return;
     }
   }
@@ -3704,7 +3787,6 @@ function Section$1({
     centerMode: true,
     centerPadding: isMobile ? '10px 0 0' : '80px 0 0'
   };
-  console.log('nodedata_____', nodeData?.metadata?.order);
   const carouselContent = carouselList.map((el, idx) =>
   /*#__PURE__*/
   // kept an extra element as slick mutates this element and gives it 100% width
@@ -6512,7 +6594,6 @@ function Contact({
   } = useContext(PageContext);
   let [btnDisabled, setBtnDisabled] = useState(false);
   const [nodeData] = sectionData.components;
-  console.log('nodedata_____', nodeData?.metadata?.order);
   const classes = useSectionStyles({
     containerWidth
   });
@@ -6694,7 +6775,8 @@ function Contact({
     onClick: () => handleSubmit(),
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium',
-    disabled: btnDisabled
+    disabled: btnDisabled,
+    name: "button"
   }))))));
 }
 
@@ -6996,7 +7078,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();
@@ -7433,15 +7514,6 @@ const SingleVideoSlide = props => {
     isMobile,
     isEdit
   } = useContext(PageContext);
-  console.log(isEdit, 'isEdit');
-  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,
@@ -7616,6 +7688,7 @@ const SingleVideoSlide = props => {
     type: 'primary',
     size: 'medium',
     target: null,
+    name: "button",
     rel: null
     // styling={isMobile ? { margin: '0 40px' } : {}}
   })))), showCourseInstallmentData && InstalmentData && /*#__PURE__*/React.createElement("div", {
@@ -7650,7 +7723,6 @@ function CoursePromotionPage({
   const classes = useCoursePromotionPage({
     containerWidth
   });
-  console.log(sectionData, 'sectionData');
   return /*#__PURE__*/React.createElement("div", {
     className: classes.courseSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -8100,9 +8172,7 @@ function Tiles({
     isEdit
   } = useContext(PageContext);
   const nodeData = sectionData.components;
-  console.log(nodeData);
   const tilesList = nodeData[0]?.tilesList.components;
-  console.log('nodedata_____', nodeData?.metadata?.order);
   const handleClick = value => {
     if (!isEdit && value) {
       if (value.indexOf('http://') == 0 || value.indexOf('https://') == 0) {
@@ -8577,7 +8647,6 @@ function EmailDripMarket({
   sectionData,
   extraProps = {}
 }) {
-  console.log('extrapropstemplate', extraProps);
   const isInitialMount = useRef(true);
   const convertToHtml = sectionData => {
     const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(Section, {
@@ -8651,8 +8720,6 @@ const MemoisedSection = /*#__PURE__*/memo(({
   isCustomWebsite,
   sectionIndex
 }) => {
-  // console.log("isCustomWebsite______", isCustomWebsite)
-  console.log('templatesectiondata', sectionData);
   const SectionComp = getCompToRender(sectionData.type);
   return /*#__PURE__*/React.createElement(SectionComp, {
     sectionData: sectionData,
@@ -8667,7 +8734,6 @@ function SectionRenderer({
   isCustomWebsite,
   sectionIndex
 }) {
-  // console.log("isCustomWebsite______", isCustomWebsite)
   return /*#__PURE__*/React.createElement(MemoisedSection, {
     sectionData: sectionData,
     extraProps: extraProps,