diy-template-components 2.0.16 → 2.0.18

package/build/index.js

@@ -378,9 +378,10 @@ const buttonStyles = createUseStyles(theme => ({
     color: ({
       disabled
     } = {}) => disabled ? colorMixer(theme?.palette?.background?.default, 0.5).color : theme?.colors?.CtaTextColor,
-    background: ({
+    background: theme?.colors?.ctaColor,
+    opacity: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.primary.main, 0.5).color : theme?.colors?.ctaColor,
+    } = {}) => disabled ? 0.5 : 1,
     border: 'none',
     textDecoration: 'none',
     cursor: ({
@@ -404,9 +405,10 @@ const buttonStyles = createUseStyles(theme => ({
     color: ({
       disabled
     } = {}) => disabled ? colorMixer(theme.palette.primary.main, 0.5).color : theme?.colors?.CtaTextColor,
-    background: ({
+    background: theme?.colors?.ctaColor,
+    opacity: ({
       disabled
-    } = {}) => disabled ? colorMixer(theme?.palette?.parimar?.default, 0.5).color : theme?.colors?.ctaColor,
+    } = {}) => disabled ? 0.5 : 1,
     border: ({
       disabled
     } = {}) => disabled ? `1px solid ${colorMixer(theme.palette.primary.main, 0.5).color}` : `1px solid ${theme?.colors?.ctaColor}`,
@@ -1097,6 +1099,7 @@ function OptionList({
   const downloadAppText = countryCode === 'KR' ? '앱다운로드' : 'Download App';
   const renderDownloadAppButton = () => {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, apkURL && /*#__PURE__*/React__default["default"].createElement("a", {
+      download: true,
       href: headerData?.apkURL,
       target: "_blank",
       className: classes.socialBtnItems,
@@ -1430,7 +1433,7 @@ function MobileHeader({
         onClick: () => {
           let url = getAppDownloadLink(apkURL, iosDownloadLink);
           window.open(url, '_blank');
-          if (url === apkURL && typeof onDownloadAppTriggered == 'function') {
+          if (!header?.iosUrl && typeof onDownloadAppTriggered == 'function') {
             onDownloadAppTriggered(header?.isAndroidDelisted, header?.apkURL);
           }
         }
@@ -1465,7 +1468,7 @@ function MobileHeader({
         onClick: () => {
           let url = getAppDownloadLink(apkURL, iosDownloadLink);
           window.open(url, '_blank');
-          if (url === apkURL && typeof onDownloadAppTriggered == 'function') {
+          if (!header?.iosUrl && typeof onDownloadAppTriggered == 'function') {
             onDownloadAppTriggered(header?.isAndroidDelisted, header?.apkURL);
           }
         }
@@ -1606,6 +1609,7 @@ const useSectionStyles$9 = createUseStyles(theme => ({
 
     // '& img': { maxHeight: '55px' }
   },
+
   upperContainerItem1Img: {
     maxHeight: '55px',
     paddingBottom: '84px',
@@ -2032,6 +2036,7 @@ const mobilePadding = {
   // 24px
   medium: baseFactor * 6 // 48px
 };
+
 const padding = {
   minute: baseFactor * 2,
   // 16px
@@ -2497,6 +2502,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     //   }
     // }
   },
+
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -3066,6 +3072,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
           // padding: '0'
         }
       },
+
       '&:nth-child(2n+1)': {
         marginRight: '0',
         '& $contentText': {
@@ -3075,6 +3082,7 @@ const useSectionStyles$7 = createUseStyles(theme => ({
         }
       }
     },
+
     contentNumber: {
       width: '100%',
       padding: '24px',
@@ -3467,6 +3475,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
       //   }
       // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -3480,6 +3489,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
 
       // padding: `${theme?.spacing?.padding?.regular}px ${theme?.spacing?.padding?.medium}px 0px ${theme?.spacing?.padding?.medium}px`
     },
+
     imageContainerDiv: {
       width: '50%',
       position: 'relative'
@@ -3551,6 +3561,7 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%'
         // padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
+
       imageContainer: {
         height: 'unset !important',
         '& img': {
@@ -4557,6 +4568,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
       },
+
       '& h2,& h3,& p': {
         marginTop: '0'
       }
@@ -4581,6 +4593,7 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       wordBreak: 'break-word'
       // marginBottom: '8px'
     },
+
     videoTestimonialTitle: {
       fontSize: theme.typography.fontSize.h2,
       // lineHeight: '71px',
@@ -5021,6 +5034,7 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     //   }
     // }
   },
+
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -5378,6 +5392,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       //   }
       // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5408,6 +5423,7 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
     },
+
     contentRow: {
       display: 'grid',
       gridTemplateColumns: ({
@@ -5954,6 +5970,7 @@ const useCourseStyles = createUseStyles(theme => {
       //   }
       // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5986,6 +6003,7 @@ const useCourseStyles = createUseStyles(theme => {
       // textAlign: 'center',
       // wordBreak: 'break-word'
     },
+
     slickContainer: {
       marginRight: '-20px'
     },
@@ -6033,6 +6051,7 @@ const useCourseStyles = createUseStyles(theme => {
       justifyContent: 'space-between'
       //alignItems: 'center',
     },
+
     courseCardTags: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -6063,6 +6082,7 @@ const useCourseStyles = createUseStyles(theme => {
       // whiteSpace: 'nowrap',
       // textOverflow: 'ellipsis'
     },
+
     courseCardDiscount: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -6169,6 +6189,7 @@ const useCourseStyles = createUseStyles(theme => {
         // whiteSpace: 'nowrap',
         // textOverflow: 'ellipsis'
       },
+
       singleCard: {
         margin: '6px 2px'
         // width: 'calc(100% - 12px)'
@@ -6544,6 +6565,7 @@ const useTeamStyles = createUseStyles(theme => {
       margin: '20px 0 0'
       // overflowWrap: 'break-word'
     },
+
     teamDetailsHeading: {
       fontSize: theme.typography.fontSize.h6,
       fontWeight: theme.typography.fontWeight.bold,
@@ -6587,6 +6609,7 @@ const useTeamStyles = createUseStyles(theme => {
         // margin: '15px 0 0',
         // paddingBottom: '0'
       },
+
       teamDetailsHeading: {
         fontSize: '16px',
         lineHeight: '24px',
@@ -6719,6 +6742,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     //   }
     // }
   },
+
   formContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -6755,12 +6779,14 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     display: 'flex'
     // alignItems: 'flex-start',
   },
+
   leftContainerForm: {
     width: '65%',
     display: 'flex',
     flexDirection: 'column'
     // justifyContent: 'space-between'
   },
+
   subtitle: {
     // margin: '0 0 40px 0',
     fontSize: theme.typography.fontSize.h5,
@@ -6828,6 +6854,7 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       width: '100%'
       // padding: '0 16ox'
     },
+
     rightContainer: {
       width: '100%',
       padding: '0'
@@ -6879,6 +6906,7 @@ function FormEnquiry({
     isMobile
   });
   const [nodeData] = sectionData.components;
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const theme = useTheme();
   let [btnDisabled, setBtnDisabled] = React.useState(false);
   let formInitialValue = {
@@ -6895,12 +6923,12 @@ function FormEnquiry({
     messageValid: 1
   });
   React.useEffect(() => {
-    if (validData?.nameValid && validData?.emailValid && validData?.phoneValid && validData?.messageValid) {
+    if (validData?.nameValid && validData?.emailValid && validData?.phoneValid && validData?.messageValid && inputVal?.email && inputVal?.name && inputVal?.phone && inputVal?.message) {
       setBtnDisabled(false);
     } else {
       setBtnDisabled(true);
     }
-  }, [validData]);
+  }, [validData, inputVal]);
   const handleSubmit = () => {
     let data = {
       sectionId: sectionData?._id || null,
@@ -6915,6 +6943,10 @@ function FormEnquiry({
     if (!(isPreview || isEdit)) postApiCall(baseURLs, data);
     setBtnDisabled(true);
     setInputVal(formInitialValue);
+    setIsSubmitted(true);
+    setTimeout(() => {
+      setIsSubmitted(false);
+    }, 1000);
   };
   const checkValidity = (regexField, fieldname, fieldValidity) => {
     if (validations?.[regexField]?.length) {
@@ -7095,7 +7127,7 @@ function FormEnquiry({
     className: classes.btnContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
-    data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
+    data: isSubmitted ? {
       value: 'Submitted'
     } : {
       value: nodeData.cta.metadata.value
@@ -7135,6 +7167,7 @@ const useSectionStyles = createUseStyles(theme => ({
     //   }
     // }
   },
+
   contactContainer: {
     width: '100%',
     margin: '0 auto',
@@ -7173,6 +7206,7 @@ const useSectionStyles = createUseStyles(theme => ({
     // justifyContent: 'space-between',
     // flex: 1
   },
+
   subtitle: {
     // margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
@@ -7329,6 +7363,7 @@ function Contact({
     extraProps
   } = React.useContext(PageContext);
   let [btnDisabled, setBtnDisabled] = React.useState(false);
+  const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [nodeData] = sectionData.components;
   const classes = useSectionStyles({
     containerWidth,
@@ -7361,14 +7396,18 @@ function Contact({
     if (!(isPreview || isEdit)) postApiCall(baseURLs, data);
     setBtnDisabled(true);
     setInputVal(formInitialValue);
+    setIsSubmitted(true);
+    setTimeout(() => {
+      setIsSubmitted(false);
+    }, 1000);
   };
   React.useEffect(() => {
-    if (validData?.nameValid && validData?.emailValid && validData?.phoneValid && validData?.messageValid) {
+    if (validData?.nameValid && validData?.emailValid && validData?.phoneValid && validData?.messageValid && inputVal?.email && inputVal?.name && inputVal?.phone && inputVal?.message) {
       setBtnDisabled(false);
     } else {
       setBtnDisabled(true);
     }
-  }, [validData]);
+  }, [validData, inputVal]);
   const checkValidity = (regexField, fieldname, fieldValidity) => {
     if (validations?.[regexField]?.length) {
       let regex = new RegExp(validations[regexField]);
@@ -7511,7 +7550,7 @@ function Contact({
     className: classes.btnContainer
   }, /*#__PURE__*/React__default["default"].createElement(Button, {
     ref: nodeData?.cta?.refSetter,
-    data: btnDisabled && validData?.messageValid && validData?.emailValid && validData?.nameValid && validData?.phoneValid ? {
+    data: isSubmitted ? {
       value: 'Submitted'
     } : {
       value: nodeData.cta.metadata.value
@@ -7612,6 +7651,7 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       marginTop: '5%'
       // padding: '0px 5% 0px 5%'
     },
+
     iframe: {
       position: 'absolute',
       width: '100%',
@@ -7959,6 +7999,7 @@ const SingleVideoSlide$1 = props => {
       value: data.isPaid ? buyNowText : registerNowText
       // isExternal: 1
     },
+
     onClick: webinarCtaClick,
     type: 'primary',
     size: 'medium',
@@ -8027,6 +8068,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       //   }
       // }
     },
+
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -8144,6 +8186,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       // paddingBottom: '10px',
       // paddingTop: '10px'
     },
+
     bannerContainer: {
       width: '100%',
       background: theme?.colors?.bannerColor,
@@ -8158,6 +8201,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
       clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 10px), 0 calc(100% - 10px), 15px calc(50% - 10px/2))'
       // marginBottom: '16px'
     },
+
     bannerContainerText: {
       transform: 'rotate(180deg)'
     },
@@ -8270,6 +8314,7 @@ const useCoursePromotionPage = createUseStyles(theme => {
         height: 'max-content'
         // paddingRight: '10px'
       },
+
       videoDetails: {
         width: '100%'
       },
@@ -8528,6 +8573,7 @@ const SingleVideoSlide = props => {
       value: buyNowText
       // isExternal: 1
     },
+
     onClick: courseBuyNow,
     type: 'primary',
     size: 'medium',
@@ -8632,6 +8678,7 @@ const useFormPageStyles = createUseStyles(theme => ({
     // border: '1px solid #D8E0F0',
     // borderRadius: '16px'
   },
+
   inputFieldLabel: {
     color: theme?.colors?.lightblack,
     fontSize: theme.typography.fontSize.body,
@@ -8944,6 +8991,7 @@ const FormPage = ({
       value: countryCode === 'KR' ? '제출하기' : 'SUBMIT'
       // isExternal: 1
     },
+
     type: 'primary',
     size: 'medium',
     target: null,
@@ -9126,6 +9174,7 @@ const useEmailStyles = createUseStyles(theme => ({
     height: '48px'
     /* margin: 18px 0px; */
   },
+
   'p-young-guru-title': {
     fontFamily: theme?.typography?.fontFamily,
     fontStyle: 'normal',
@@ -9153,6 +9202,7 @@ const useEmailStyles = createUseStyles(theme => ({
     textAlign: 'center'
     /* padding:35px 0 40px */
   },
+
   'two-columns .column': {
     width: '100%',
     maxWidth: '275px',