diy-template-components 0.1.3 → 0.1.6

package/build/index.es.js

@@ -449,6 +449,10 @@ function useLinkBuilder(data) {
     return data.link;
   }
 
+  if (data?.isExternal) {
+    return data.link;
+  }
+
   if (!isPreview) {
     const link = data.link === '/' ? '' : '/' + data.link;
     return basePath ? `//${basePath}${link}` : null;
@@ -487,8 +491,8 @@ const Button = /*#__PURE__*/forwardRef(function Button({
   return data?.isLink ? /*#__PURE__*/React.createElement("a", _extends({
     ref: ref,
     href: link,
-    target: data?.isExistingLink === false ? '_blank' : null,
-    rel: data?.isExistingLink === false ? 'nofollow noopener' : null,
+    target: data?.isExternal ? '_blank' : null,
+    rel: data?.isExternal ? 'nofollow noopener' : null,
     className: (active ? classes.active : '') + ' ' + classes[type] + ' ' + classes[size] + ' ' + classes.anchorClass,
     style: styling
   }, elementProps), data?.value) : /*#__PURE__*/React.createElement("button", _extends({
@@ -987,7 +991,7 @@ function Dropdown(props) {
         link: dt.slug,
         isLink: true,
         value: dt.title,
-        isExternal: false
+        isExternal: 0
       },
       fluid: true,
       active: dt.active,
@@ -1019,7 +1023,7 @@ function OptionList({
         link: dt.slug,
         active: dt.active,
         isLink: true,
-        isExistingLink: false
+        isExternal: 0
       };
     });
   };
@@ -1070,7 +1074,7 @@ function OptionList({
       link: headerData?.appLink,
       isLink: 1,
       value: 'Download App',
-      isExistingLink: false
+      isExternal: 1
     },
     type: 'primary',
     size: 'small',
@@ -1084,7 +1088,7 @@ function OptionList({
       link: headerData?.loginCtaLink,
       isLink: 1,
       value: 'Login',
-      isExistingLink: false
+      isExternal: 1
     },
     type: 'primary',
     size: isMobile ? 'small' : 'medium',
@@ -1211,7 +1215,7 @@ function MobileHeader({
             src: phoneIos,
             alt: "iosUrl"
           }),
-          isExistingLink: false
+          isExternal: 1
         },
         type: '',
         size: 'small',
@@ -1233,7 +1237,7 @@ function MobileHeader({
             src: phoneAndroid,
             alt: "iosUrl"
           }),
-          isExistingLink: false
+          isExternal: 1
         },
         type: '',
         size: 'small',
@@ -1253,7 +1257,7 @@ function MobileHeader({
           link: header?.iosUrl,
           isLink: 1,
           value: 'Download App',
-          isExistingLink: false
+          isExternal: 1
         },
         type: 'primary',
         size: 'small',
@@ -1266,7 +1270,7 @@ function MobileHeader({
           link: header?.androidURL,
           isLink: 1,
           value: 'Download App',
-          isExistingLink: false
+          isExternal: 1
         },
         type: 'primary',
         size: 'small',
@@ -1283,7 +1287,7 @@ function MobileHeader({
           link: header?.appLink,
           isLink: 1,
           value: 'Download App',
-          isExistingLink: false
+          isExternal: 1
         },
         type: 'primary',
         size: 'small',
@@ -3135,7 +3139,7 @@ async function postApiCall(baseURLs, data) {
         baseURL: baseURLs?.API_DIY_URL,
         url: '/v1/section/form',
         headers: {
-          'website-url': 'http://' + location.host + location.pathname
+          'website-url': 'https://' + location.host + location.pathname
         },
         data
       });
@@ -3149,6 +3153,30 @@ async function postApiCall(baseURLs, data) {
     }
   }
 }
+async function postApiCallForm(baseURLs, data, extraProps) {
+  if (baseURLs) {
+    try {
+      let res = await axios({
+        method: 'POST',
+        baseURL: baseURLs?.API_DIY_URL,
+        url: '/v1/diy/landingPages/form',
+        headers: {
+          'website-url': 'https://' + location.host + location.pathname
+        },
+        data
+      }).then(res => {
+        if (extraProps && extraProps.formSubmitSuccess) {
+          extraProps.formSubmitSuccess();
+        }
+
+        return res.data;
+      });
+    } catch (err) {
+      console.log(err);
+      return;
+    }
+  }
+}
 
 const inputStyles = createUseStyles(theme => ({
   inputField: {
@@ -6552,7 +6580,13 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     webinarCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '60px'
+      gap: '20px'
+    },
+    '@media screen and (max-width: 767px)': {
+      webinarCarousel: {
+        display: 'flex',
+        flexDirection: 'column-reverse'
+      }
     },
     iframeSuperContainer: {
       height: '100%',
@@ -6572,8 +6606,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: '32px',
-      fontWeight: '700'
+      fontSize: '28px',
+      fontWeight: '600'
     },
     priceContainer: {
       display: 'flex',
@@ -6590,8 +6624,9 @@ const useWebinarPromotionPage = createUseStyles(theme => {
     },
     bottomContainer: {
       display: 'flex',
-      justifyContent: 'space-around',
-      marginTop: '5%'
+      justifyContent: 'space-between',
+      marginTop: '5%',
+      padding: '0px 5% 0px 5%'
     },
     iframe: {
       position: 'absolute',
@@ -6617,7 +6652,10 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       width: '645px',
       backgroundColor: '#f4f9ff',
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      justifyContent: 'center',
+      paddingTop: '20px',
+      borderRadius: '10px'
     },
     bannerContainer: {
       background: '#EB5757',
@@ -6737,7 +6775,7 @@ const SingleVideoSlide$1 = props => {
     completed
   }) => {
     if (hours < 24) {
-      return /*#__PURE__*/React.createElement("span", null, hours, ":", minutes, ":", seconds);
+      return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
     } else {
       let given = moment(props.data.endTime);
       let current = moment().startOf('day');
@@ -6745,6 +6783,14 @@ const SingleVideoSlide$1 = props => {
     }
   };
 
+  const discount = ({
+    price,
+    discount
+  }) => {
+    console.log('discountxx', props.data.price, props.data.discount);
+    return ((price - discount) / price * 100).toFixed(2);
+  };
+
   const classes = useWebinarPromotionPage();
   return /*#__PURE__*/React.createElement("div", {
     className: classes.videoCarouselContainer
@@ -6754,9 +6800,9 @@ const SingleVideoSlide$1 = props => {
     className: classes.iframeSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, data?.isPaid ? /*#__PURE__*/React.createElement("h3", {
     className: classes.bannerContainer
-  }, data.offerPriceValidFor <= 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, "Hurry up! Offer for limited period only") : /*#__PURE__*/React.createElement(React.Fragment, null, "Hurry up! Offer is left for ", data.offerPriceValidFor, " users now")), /*#__PURE__*/React.createElement("h3", {
+  }, data.offerPriceValidFor <= 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, "Hurry up! Offer for limited period only") : /*#__PURE__*/React.createElement(React.Fragment, null, "Hurry up! Offer is left for ", data.offerPriceValidFor, " users now")) : null, /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -6786,14 +6832,14 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, /*#__PURE__*/React.createElement("p", {
+  }, data.isPaid ? /*#__PURE__*/React.createElement("p", {
     className: classes.offerText
   }, "Offer Ends in", ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.courseDetailTime
   }, /*#__PURE__*/React.createElement(Countdown, {
     renderer: renderer,
-    date: data.endDate
-  }))), /*#__PURE__*/React.createElement("div", {
+    date: data.offerPriceEndDate
+  }))) : null, /*#__PURE__*/React.createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -6802,24 +6848,26 @@ const SingleVideoSlide$1 = props => {
     videoUrl: data.thumbnail
   })), /*#__PURE__*/React.createElement("div", {
     className: classes.bottomContainer
-  }, data.isPaid && /*#__PURE__*/React.createElement("div", {
+  }, data.isPaid ? /*#__PURE__*/React.createElement("div", {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, data.offerPrice), /*#__PURE__*/React.createElement("p", {
+  }, "\u20B9", data?.discount), /*#__PURE__*/React.createElement("p", {
     style: {
-      fontSize: '20px'
+      fontSize: '20px',
+      marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
-  }, data.regularPrice), ' ', /*#__PURE__*/React.createElement("span", {
+  }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
-  }, "50% OFF"))), /*#__PURE__*/React.createElement("div", {
+  }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React.createElement("div", {
     className: classes.webinarButtonContainer
   }, /*#__PURE__*/React.createElement(Button, {
     style: {
       backgroundColor: '#009AE0',
-      width: data.isPaid ? '150px' : '250px'
+      width: data.isPaid ? '100%' : '250px',
+      fontSize: 'large'
     },
     data: {
       // link: 'headerData?.loginCtaLink',
@@ -6847,7 +6895,6 @@ function CoursePromotionPage$1({
   const classes = useWebinarPromotionPage({
     containerWidth
   });
-  console.log(sectionData);
   return /*#__PURE__*/React.createElement("div", {
     className: classes.webinarSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -6916,7 +6963,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
     coursePageCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '60px'
+      gap: '20px'
     },
     iframeSuperContainer: {
       height: '100%',
@@ -6936,7 +6983,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: '32px',
+      fontSize: '28px',
       fontWeight: '700'
     },
     priceContainer: {
@@ -6981,7 +7028,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
       width: '645px',
       backgroundColor: '#f4f9ff',
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      borderRadius: '10px'
     },
     bannerContainer: {
       background: '#EB5757',
@@ -7175,7 +7223,8 @@ const SingleVideoSlide = props => {
     className: classes.offerPrice
   }, "\u20B9 ", data.effectivePrice), /*#__PURE__*/React.createElement("p", {
     style: {
-      fontSize: '20px'
+      fontSize: '20px',
+      marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
@@ -7386,7 +7435,8 @@ const FormPage = ({
   const classes = useFormPageStyles();
   const metadata = sectionData?.components?.[0]?.metadata || formPageMock;
   const {
-    _id
+    _id,
+    baseURLs
   } = useContext(PageContext);
 
   const handleSubmit = async e => {
@@ -7400,18 +7450,14 @@ const FormPage = ({
         questionType: value.questionType,
         solutionArray: value.solutionArray
       });
-    } // page id - section id
-
+    }
 
-    axios.post(`https://diy.clp.staging.classplus.co/v1/diy/landingPages/form`, {
-      paylaod: formResponse,
+    const data = {
       sectionId: sectionData?.components?.[0]?._id || null,
-      landingPageId: _id || null
-    }).then(() => {
-      if (extraProps && extraProps.formSubmitSuccess) {
-        extraProps.formSubmitSuccess();
-      }
-    });
+      landingPageId: _id || null,
+      payload: formResponse
+    };
+    postApiCallForm(baseURLs, data, extraProps);
   };
 
   return /*#__PURE__*/React.createElement("section", {
@@ -7573,7 +7619,8 @@ function PageRenderer({
     sections,
     header,
     footer,
-    validations = {}
+    validations = {},
+    _id
   },
   isMobile = false,
   isLandingPages = false,
@@ -7607,8 +7654,9 @@ function PageRenderer({
     validations,
     isTutorWebsite,
     extraProps,
-    hideLogin
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin]);
+    hideLogin,
+    _id
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme