diy-template-components 0.3.5 → 0.3.6

package/build/index.es.js

@@ -1,12 +1,12 @@
-function ___$insertStyle(css) {
-    if (!css || !window) {
-        return;
-    }
-    const style = document.createElement('style');
-    style.setAttribute('type', 'text/css');
-    style.innerHTML = css;
-    document.head.appendChild(style);
-    return css;
+function ___$insertStyle(css) {
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
 
 import React, { createContext, useContext, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Suspense, memo, lazy, Fragment } from 'react';
@@ -98,7 +98,7 @@ const useSectionStyles$a = createUseStyles(theme => ({
     cursor: 'default',
     position: 'relative',
     height: '55px',
-    width: 'inherit'
+    width: '100%'
   },
   optionsContainer: {
     display: 'flex',
@@ -148,7 +148,10 @@ const useSectionStyles$a = createUseStyles(theme => ({
   imageDivImageNext: {
     objectFit: ({
       isCustomWebsite
-    } = {}) => isCustomWebsite ? 'contain' : ''
+    } = {}) => isCustomWebsite ? 'contain' : '',
+    objectPosition: ({
+      isCustomWebsite
+    } = {}) => isCustomWebsite ? 'left' : ''
   },
   imageAnchorMobile: {
     pointerEvents: 'auto',
@@ -2257,12 +2260,12 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   imageContainer: {
     width: '50%',
     position: 'relative',
-    height: '90%',
     paddingBottom: ({
       isCustomWebsite
     }) => isCustomWebsite ? '35%' : '',
     '& img': {
-      // objectFit: 'cover'
+      height: '520px',
+      objectFit: 'cover'
     }
   },
   subTitleHeading: {
@@ -2289,7 +2292,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   sideBannerImage: {
     width: '100%',
     height: 'calc(100% - 100px)',
-    // objectFit: 'cover',
+    objectFit: 'cover',
     objectPosition: '50% 50%'
   },
   absoluteButtonsBannerRight: {
@@ -4382,8 +4385,6 @@ function VideoTestimonial({
     layout: {
       containerWidth
     },
-    countryCode,
-    currencySymbol,
     isMobile
   } = useContext(PageContext);
   const classes = useVideoTestimonialStyles({
@@ -4415,9 +4416,7 @@ function VideoTestimonial({
   })), /*#__PURE__*/React.createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleVideoSlide$2, {
     data: data,
     key: index,
-    sectionIndex: sectionIndex,
-    countryCode: countryCode,
-    currencySymbol: currencySymbol
+    sectionIndex: sectionIndex
   }))))));
 }
 
@@ -7326,9 +7325,7 @@ const SingleVideoSlide$1 = props => {
   const {
     data,
     webinarCtaClick,
-    conversions = 0,
-    countryCode,
-    currencySymbol
+    conversions = 0
   } = props;
   const renderer = ({
     days,
@@ -7338,14 +7335,11 @@ const SingleVideoSlide$1 = props => {
     completed
   }) => {
     if (days === 0 && hours < 24) {
-      if (countryCode === 'KR') {
-        return /*#__PURE__*/React.createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
-      }
       return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
     } else {
       let given = moment(props.data.offerPriceEndDate);
       let current = moment().startOf('day');
-      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
+      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
     }
   };
   const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
@@ -7377,44 +7371,6 @@ const SingleVideoSlide$1 = props => {
     return (discount / price * 100).toFixed(2);
   };
   const classes = useWebinarPromotionPage();
-  const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
-  const renderHurryUpBannerText = () => {
-    let count = data.offerPriceValidFor - conversions;
-    if (countryCode === 'KR') {
-      if (count > 1) {
-        return `서두르세요! 현재 신청 가능 인원은 ${count}명 입니다.`;
-      } else {
-        return `서두르세요! ${count}명까지만 신청 가능이 가능합니다.`;
-      }
-    } else {
-      return `Hurry up! Offer left for ${count} ${count > 1 ? 'users now' : 'user only'}`;
-    }
-  };
-  const limitedPeriodOfferText = countryCode === 'KR' ? '기간 한정 딜이므로 서두르세요!' : 'Hurry up! Offer for limited period only';
-  const renderOfferEndsInText = () => {
-    if (countryCode === 'KR') {
-      return /*#__PURE__*/React.createElement("p", {
-        className: classes.offerText
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classes.courseDetailTime
-      }, /*#__PURE__*/React.createElement(Countdown, {
-        renderer: renderer,
-        date: data.offerPriceEndDate
-      })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
-    } else {
-      return /*#__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.offerPriceEndDate
-      })));
-    }
-  };
-  const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
-  const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
-  const registerNowText = countryCode === 'KR' ? '지금 신청하기' : 'REGISTER NOW';
   return /*#__PURE__*/React.createElement("div", {
     className: classes.videoCarouselContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -7427,11 +7383,11 @@ const SingleVideoSlide$1 = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React.createElement("div", {
+  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, ' ', data.offerPriceValidFor - conversions > 1 ? 'users now' : 'user only')) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("h3", {
+  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -7471,7 +7427,14 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__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.offerPriceEndDate
+  }))), /*#__PURE__*/React.createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7488,13 +7451,13 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
+  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
       fontSize: '20px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
-  }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
+  }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React.createElement("div", {
     className: classes.webinarButtonContainer
@@ -7506,7 +7469,7 @@ const SingleVideoSlide$1 = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: data.isPaid ? buyNowText : registerNowText
+      value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
       // isExternal: 1
     },
 
@@ -7524,12 +7487,10 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
+    isMobile,
     layout: {
       containerWidth
-    },
-    countryCode,
-    currencySymbol,
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useWebinarPromotionPage({
     containerWidth,
@@ -7545,9 +7506,7 @@ function CoursePromotionPage$1({
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex,
-    countryCode: countryCode,
-    currencySymbol: currencySymbol
+    sectionIndex: sectionIndex
   }))));
 }
 
@@ -7867,23 +7826,18 @@ const SingleVideoSlide = props => {
     completed
   }) => {
     if (days === 0 && hours < 24) {
-      if (countryCode === 'KR') {
-        return /*#__PURE__*/React.createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
-      }
       return /*#__PURE__*/React.createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
     } else {
       let given = moment(props.data.endDate);
       let current = moment().startOf('day');
-      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
+      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), " day(s)");
     }
   };
   const {
     data,
     courseBuyNow,
     conversions = 20,
-    showCourseInstallment,
-    countryCode,
-    currencySymbol
+    showCourseInstallment
   } = props;
   const showCourseInstallmentData = data?.courseOverviewData;
   const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7916,34 +7870,6 @@ const SingleVideoSlide = props => {
   }) => {
     return (discount / price * 100).toFixed(2);
   };
-  const renderHurryUpBannerText = () => {
-    return countryCode === 'KR' ? `서두르세요! 현재 신청 가능 인원은 ${data.offerPriceValidFor - conversions}명 입니다.` : `Hurry up! Offer left for ${data.offerPriceValidFor - conversions} users now`;
-  };
-  const limitedPeriodOfferText = countryCode === 'KR' ? `기간 한정 딜이므로 서두르세요!` : 'Hurry up! Offer for limited period only';
-  const renderOfferEndsInText = () => {
-    if (countryCode === 'KR') {
-      return /*#__PURE__*/React.createElement("p", {
-        className: classes.offerText
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classes.courseDetailTime
-      }, /*#__PURE__*/React.createElement(Countdown, {
-        renderer: renderer,
-        date: data.endDate
-      })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
-    } else {
-      return /*#__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
-      })));
-    }
-  };
-  const effectivePrice = formatCurrency(countryCode, data?.effectivePrice, currencySymbol);
-  const finalPrice = formatCurrency(countryCode, data?.price, currencySymbol);
-  const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'BUY NOW';
   return /*#__PURE__*/React.createElement("div", {
     className: classes.videoCarouselContainer
   }, /*#__PURE__*/React.createElement("div", {
@@ -7956,11 +7882,11 @@ const SingleVideoSlide = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
+  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("div", {
+  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("div", {
     className: classes.emblemContainer
   }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
     return /*#__PURE__*/React.createElement("div", {
@@ -8025,7 +7951,14 @@ const SingleVideoSlide = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
+  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__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", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -8039,14 +7972,14 @@ const SingleVideoSlide = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
+  }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
       // fontSize: '20px',
       marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
-  }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
+  }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     style: {
@@ -8055,7 +7988,7 @@ const SingleVideoSlide = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: buyNowText
+      value: 'BUY NOW'
       // isExternal: 1
     },
 
@@ -8091,12 +8024,10 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
+    isMobile,
     layout: {
       containerWidth
-    },
-    countryCode,
-    currencySymbol,
-    isMobile
+    }
   } = useContext(PageContext);
   const classes = useCoursePromotionPage({
     containerWidth,
@@ -8113,9 +8044,7 @@ function CoursePromotionPage({
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex,
-    countryCode: countryCode,
-    currencySymbol: currencySymbol
+    sectionIndex: sectionIndex
   }))));
 }