diy-template-components 0.1.4 → 0.1.7

package/build/index.es.js

@@ -3139,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
       });
@@ -3153,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: {
@@ -6556,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%',
@@ -6576,8 +6606,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: '32px',
-      fontWeight: '700'
+      fontSize: '28px',
+      fontWeight: '600'
     },
     priceContainer: {
       display: 'flex',
@@ -6594,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',
@@ -6623,7 +6654,8 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
-      paddingTop: '20px'
+      paddingTop: '20px',
+      borderRadius: '10px'
     },
     bannerContainer: {
       background: '#EB5757',
@@ -6743,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');
@@ -6756,7 +6788,7 @@ const SingleVideoSlide$1 = props => {
     discount
   }) => {
     console.log('discountxx', props.data.price, props.data.discount);
-    return (price - discount) / price * 100;
+    return ((price - discount) / price * 100).toFixed(2);
   };
 
   const classes = useWebinarPromotionPage();
@@ -6768,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: {
@@ -6816,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?.discount), /*#__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?.price), ' ', /*#__PURE__*/React.createElement("span", {
+  }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
-  }, `${data && discount(data)}%`))), /*#__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',
@@ -6929,7 +6963,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
     coursePageCarousel: {
       display: 'flex',
       justifyContent: 'flex-start',
-      gap: '60px'
+      gap: '20px'
     },
     iframeSuperContainer: {
       height: '100%',
@@ -6949,7 +6983,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       color: theme.palette.font.primary
     },
     offerPrice: {
-      fontSize: '32px',
+      fontSize: '28px',
       fontWeight: '700'
     },
     priceContainer: {
@@ -6994,7 +7028,8 @@ const useCoursePromotionPage = createUseStyles(theme => {
       width: '645px',
       backgroundColor: '#f4f9ff',
       display: 'flex',
-      flexDirection: 'column'
+      flexDirection: 'column',
+      borderRadius: '10px'
     },
     bannerContainer: {
       background: '#EB5757',
@@ -7188,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
@@ -7399,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 => {
@@ -7413,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", {
@@ -7445,6 +7478,7 @@ const FormPage = ({
     className: classes.inputFieldLabel
   }, item.text), /*#__PURE__*/React.createElement("input", {
     className: classes.inputFieldControl,
+    required: item.isRequired,
     type: "text",
     placeholder: "Short answer",
     name: item._id,
@@ -7505,7 +7539,8 @@ const FormPage = ({
   }, /*#__PURE__*/React.createElement("input", {
     // value={option.value}
     type: "radio",
-    name: "text" // name={option.value}
+    name: "text",
+    required: item.isRequired // name={option.value}
     // id={option.value}
     ,
     onChange: e => {
@@ -7586,7 +7621,8 @@ function PageRenderer({
     sections,
     header,
     footer,
-    validations = {}
+    validations = {},
+    _id
   },
   isMobile = false,
   isLandingPages = false,
@@ -7620,8 +7656,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