diy-template-components 2.0.88 → 2.0.90

package/build/index.es.js

@@ -16,6 +16,7 @@ import moment from 'moment';
 import Countdown from 'react-countdown';
 import koreanLocale from 'moment/locale/ko';
 import ReactDOMServer from 'react-dom/server';
+import { useEffect as useEffect$1 } from '@storybook/addons';
 import { createTheming, createUseStyles as createUseStyles$1, useTheme as useTheme$1 } from 'react-jss';
 
 function _extends() {
@@ -240,7 +241,8 @@ const useSectionStyles$a = createUseStyles(theme => ({
   },
   rightNav: {
     marginRight: '120px',
-    display: 'flex'
+    display: 'flex',
+    alignItems: "center"
   },
   priceBox: {
     marginRight: '16px'
@@ -281,7 +283,8 @@ const useSectionStyles$a = createUseStyles(theme => ({
   BottomSheetPriceContainer: {
     display: 'flex',
     justifyContent: 'space-between',
-    padding: '16px 16px 24px'
+    padding: '16px 16px 24px',
+    alignItems: "center"
   },
   BottomSheetOfferContainer: {
     padding: '12px 0 ',
@@ -1508,7 +1511,6 @@ function DesktopHeader({
           value: 'BUY NOW'
           // isExternal: 1
         },
-
         onClick: extraProps?.courseBuyNow,
         type: 'primary',
         size: 'small',
@@ -1524,7 +1526,6 @@ function DesktopHeader({
         value: 'BUY NOW'
         // isExternal: 1
       },
-
       onClick: extraProps?.courseBuyNow,
       type: 'primary',
       size: 'medium',
@@ -1534,7 +1535,6 @@ function DesktopHeader({
       // styling={isMobile ? { margin: '0 40px' } : {}}
     });
   };
-
   return /*#__PURE__*/React.createElement("nav", {
     className: classes.section
   }, !(header?.websiteLogo === DEFAULT_HEADER_IMAGE_LP && isCustomWebsite) ? /*#__PURE__*/React.createElement("div", {
@@ -1612,6 +1612,16 @@ function MobileHeader({
       body?.removeAttribute('style');
     }
   }, [sideMenu]);
+  useEffect$1(() => {
+    if (header?.effectivePrice) {
+      const body = navEl?.current?.ownerDocument?.body;
+      console.log("body", body);
+      console.log("body 1", document?.getElementsByClassName(classes.section)?.closest('body'));
+      if (body) {
+        body.style.marginBottom = '130px';
+      }
+    }
+  }, []);
   let downloadLink = null;
   const downloadAppText = countryCode === 'KR' ? '앱다운로드' : 'Download App';
   const apkURL = header?.apkURL;
@@ -1683,10 +1693,6 @@ function MobileHeader({
     if (!header?.effectivePrice) {
       return null;
     }
-    // const body = document?.body;
-    // if (body) {
-    //   body.style.marginBottom = '130px';
-    // }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: classes.BottomSheetContainer
     }, OfferDetailsJSX(), /*#__PURE__*/React.createElement("div", {
@@ -1710,7 +1716,6 @@ function MobileHeader({
         value: 'BUY NOW'
         // isExternal: 1
       },
-
       onClick: extraProps?.courseBuyNow,
       type: 'primary',
       size: 'medium',
@@ -1720,7 +1725,6 @@ function MobileHeader({
       // styling={isMobile ? { margin: '0 40px' } : {}}
     }))));
   };
-
   if (isTutorWebsite) {
     if (isAndroidDelisted && apkURL) {
       downloadLink = /*#__PURE__*/React.createElement(Button, {
@@ -1913,7 +1917,6 @@ const useSectionStyles$9 = createUseStyles(theme => ({
 
     // '& img': { maxHeight: '55px' }
   },
-
   upperContainerItem1Img: {
     maxHeight: '55px',
     paddingBottom: '84px',
@@ -2354,7 +2357,6 @@ const mobilePadding = {
   // 24px
   medium: baseFactor * 6 // 48px
 };
-
 const padding = {
   minute: baseFactor * 2,
   // 16px
@@ -2824,7 +2826,6 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -3394,7 +3395,6 @@ const useSectionStyles$7 = createUseStyles(theme => ({
           // padding: '0'
         }
       },
-
       '&:nth-child(2n+1)': {
         marginRight: '0',
         '& $contentText': {
@@ -3404,7 +3404,6 @@ const useSectionStyles$7 = createUseStyles(theme => ({
         }
       }
     },
-
     contentNumber: {
       width: '100%',
       padding: '24px',
@@ -3811,7 +3810,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -3825,7 +3823,6 @@ 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'
@@ -3897,7 +3894,6 @@ const useSectionStyles$5 = createUseStyles(theme => {
         width: '100%'
         // padding: `${theme?.spacing?.padding?.medium}px ${theme?.spacing?.padding?.regular}px`
       },
-
       imageContainer: {
         height: 'unset !important',
         '& img': {
@@ -4904,7 +4900,6 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
         fontFamily: theme?.typography?.fontFamily
         // boxSizing: 'border-box'
       },
-
       '& h2,& h3,& p': {
         marginTop: '0'
       }
@@ -4929,7 +4924,6 @@ const useVideoTestimonialStyles = createUseStyles(theme => {
       wordBreak: 'break-word'
       // marginBottom: '8px'
     },
-
     videoTestimonialTitle: {
       fontSize: theme.typography.fontSize.h2,
       // lineHeight: '71px',
@@ -5370,7 +5364,6 @@ const useSectionStyles$3 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   sectionContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -5728,7 +5721,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -5759,7 +5751,6 @@ const usePhotoGalleryStyles = createUseStyles(theme => {
       position: 'relative',
       paddingBottom: '59.83%' // keeping aspect ratio 585x350
     },
-
     contentRow: {
       display: 'grid',
       gridTemplateColumns: ({
@@ -6306,7 +6297,6 @@ const useCourseStyles = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -6339,7 +6329,6 @@ const useCourseStyles = createUseStyles(theme => {
       // textAlign: 'center',
       // wordBreak: 'break-word'
     },
-
     slickContainer: {
       marginRight: '-20px'
     },
@@ -6387,7 +6376,6 @@ const useCourseStyles = createUseStyles(theme => {
       justifyContent: 'space-between'
       //alignItems: 'center',
     },
-
     courseCardTags: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -6418,7 +6406,6 @@ const useCourseStyles = createUseStyles(theme => {
       // whiteSpace: 'nowrap',
       // textOverflow: 'ellipsis'
     },
-
     courseCardDiscount: {
       display: 'flex',
       justifyContent: 'flex-start',
@@ -6525,7 +6512,6 @@ const useCourseStyles = createUseStyles(theme => {
         // whiteSpace: 'nowrap',
         // textOverflow: 'ellipsis'
       },
-
       singleCard: {
         margin: '6px 2px'
         // width: 'calc(100% - 12px)'
@@ -6873,7 +6859,6 @@ const useTeamStyles = createUseStyles(theme => {
       // gridTemplateColumns: ({ slidesToShow } = {}) =>
       //   `repeat(${slidesToShow},minmax(0, 1fr))`
     },
-
     singleSlideContainer: {
       backgroundColor: theme?.palette?.background?.default,
       margin: '20px 0',
@@ -6899,7 +6884,6 @@ const useTeamStyles = createUseStyles(theme => {
       padding: '24px'
       // overflowWrap: 'break-word'
     },
-
     teamDetailsHeading: {
       fontSize: theme.typography.fontSize.h6,
       fontWeight: theme.typography.fontWeight.bold,
@@ -7162,7 +7146,6 @@ const useSectionStyles$1 = createUseStyles(theme => ({
     //   }
     // }
   },
-
   formContainer: {
     margin: '0 auto',
     maxWidth: ({
@@ -7199,14 +7182,12 @@ 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,
@@ -7274,7 +7255,6 @@ const useSectionStyles$1 = createUseStyles(theme => ({
       width: '100%'
       // padding: '0 16ox'
     },
-
     rightContainer: {
       width: '100%',
       padding: '0'
@@ -7587,7 +7567,6 @@ const useSectionStyles = createUseStyles(theme => ({
     //   }
     // }
   },
-
   contactContainer: {
     width: '100%',
     margin: '0 auto',
@@ -7626,7 +7605,6 @@ const useSectionStyles = createUseStyles(theme => ({
     // justifyContent: 'space-between',
     // flex: 1
   },
-
   subtitle: {
     // margin: '0 0 auto 0',
     fontSize: theme.typography.fontSize.h6,
@@ -8071,7 +8049,6 @@ const useWebinarPromotionPage = createUseStyles(theme => {
       marginTop: '5%'
       // padding: '0px 5% 0px 5%'
     },
-
     iframe: {
       position: 'absolute',
       width: '100%',
@@ -8419,7 +8396,6 @@ const SingleVideoSlide$1 = props => {
       value: data.isPaid ? buyNowText : registerNowText
       // isExternal: 1
     },
-
     onClick: webinarCtaClick,
     type: 'primary',
     size: 'medium',
@@ -8488,7 +8464,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
       //   }
       // }
     },
-
     sectionContainer: {
       margin: '0 auto',
       maxWidth: ({
@@ -8606,7 +8581,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
       // paddingBottom: '10px',
       // paddingTop: '10px'
     },
-
     bannerContainer: {
       width: '100%',
       background: theme?.colors?.bannerColor,
@@ -8621,7 +8595,6 @@ 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)'
     },
@@ -8734,7 +8707,6 @@ const useCoursePromotionPage = createUseStyles(theme => {
         height: 'max-content'
         // paddingRight: '10px'
       },
-
       videoDetails: {
         width: '100%'
       },
@@ -8993,7 +8965,6 @@ const SingleVideoSlide = props => {
       value: buyNowText
       // isExternal: 1
     },
-
     onClick: courseBuyNow,
     type: 'primary',
     size: 'medium',
@@ -9098,7 +9069,6 @@ const useFormPageStyles = createUseStyles(theme => ({
     // border: '1px solid #D8E0F0',
     // borderRadius: '16px'
   },
-
   inputFieldLabel: {
     color: theme?.colors?.lightblack,
     fontSize: theme.typography.fontSize.body,
@@ -9411,7 +9381,6 @@ const FormPage = ({
       value: countryCode === 'KR' ? '제출하기' : 'SUBMIT'
       // isExternal: 1
     },
-
     type: 'primary',
     size: 'medium',
     target: null,
@@ -9594,7 +9563,6 @@ const useEmailStyles = createUseStyles(theme => ({
     height: '48px'
     /* margin: 18px 0px; */
   },
-
   'p-young-guru-title': {
     fontFamily: theme?.typography?.fontFamily,
     fontStyle: 'normal',
@@ -9622,7 +9590,6 @@ const useEmailStyles = createUseStyles(theme => ({
     textAlign: 'center'
     /* padding:35px 0 40px */
   },
-
   'two-columns .column': {
     width: '100%',
     maxWidth: '275px',
@@ -10092,7 +10059,6 @@ const useAboutInstituteStyles = createUseStyles(theme => ({
     // borderRadius: '16px',
     // border: '1px solid var(--stroke, #D8E0F0)',
   },
-
   image: {
     width: '100%',
     height: '100%',
@@ -10571,7 +10537,6 @@ const TimerAndCall = ({
       value: nodeData.timerButton.metadata.value
       // isExternal: 1
     },
-
     onClick: extraProps?.courseBuyNow,
     type: 'primary',
     size: 'medium',