diy-template-components 0.3.3 → 0.3.5

package/build/index.js

@@ -2,15 +2,15 @@
 
 
 
-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;
+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;
 }
 
 Object.defineProperty(exports, '__esModule', { value: true });
@@ -2272,12 +2272,12 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   imageContainer: {
     width: '50%',
     position: 'relative',
+    height: '90%',
     paddingBottom: ({
       isCustomWebsite
     }) => isCustomWebsite ? '35%' : '',
     '& img': {
-      height: '520px',
-      objectFit: 'cover'
+      // objectFit: 'cover'
     }
   },
   subTitleHeading: {
@@ -2304,7 +2304,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   sideBannerImage: {
     width: '100%',
     height: 'calc(100% - 100px)',
-    objectFit: 'cover',
+    // objectFit: 'cover',
     objectPosition: '50% 50%'
   },
   absoluteButtonsBannerRight: {
@@ -2329,14 +2329,14 @@ const useSectionStyles$8 = createUseStyles(theme => ({
     },
     textContainer: {
       textAlign: 'center',
-      maxWidth: "100%"
+      maxWidth: '100%'
     },
     linkButton: {
       padding: '12px 16px'
     },
     imageContainer: {
       height: 'undefined',
-      width: "100%",
+      width: '100%',
       paddingBottom: ({
         isCustomWebsite
       }) => isCustomWebsite ? '100%' : 'unset'
@@ -4397,6 +4397,8 @@ function VideoTestimonial({
     layout: {
       containerWidth
     },
+    countryCode,
+    currencySymbol,
     isMobile
   } = React.useContext(PageContext);
   const classes = useVideoTestimonialStyles({
@@ -4428,7 +4430,9 @@ function VideoTestimonial({
   })), /*#__PURE__*/React__default["default"].createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React__default["default"].createElement(SingleVideoSlide$2, {
     data: data,
     key: index,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))))));
 }
 
@@ -7337,7 +7341,9 @@ const SingleVideoSlide$1 = props => {
   const {
     data,
     webinarCtaClick,
-    conversions = 0
+    conversions = 0,
+    countryCode,
+    currencySymbol
   } = props;
   const renderer = ({
     days,
@@ -7347,11 +7353,14 @@ const SingleVideoSlide$1 = props => {
     completed
   }) => {
     if (days === 0 && hours < 24) {
+      if (countryCode === 'KR') {
+        return /*#__PURE__*/React__default["default"].createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
+      }
       return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
     } else {
       let given = moment__default["default"](props.data.offerPriceEndDate);
       let current = moment__default["default"]().startOf('day');
-      return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), " day(s)");
+      return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
     }
   };
   const checkIfOfferIsValid = () => moment__default["default"]().diff(moment__default["default"](props.data.offerPriceEndDate)) < 0;
@@ -7383,6 +7392,44 @@ 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__default["default"].createElement("p", {
+        className: classes.offerText
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: classes.courseDetailTime
+      }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
+        renderer: renderer,
+        date: data.offerPriceEndDate
+      })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        className: classes.offerText
+      }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+        className: classes.courseDetailTime
+      }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
+        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__default["default"].createElement("div", {
     className: classes.videoCarouselContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7395,11 +7442,11 @@ const SingleVideoSlide$1 = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainerText
-  }, "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__default["default"].createElement("div", {
+  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("h3", {
+  }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -7439,14 +7486,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
-    className: classes.offerText
-  }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classes.courseDetailTime
-  }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
-    renderer: renderer,
-    date: data.offerPriceEndDate
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7463,13 +7503,13 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       fontSize: '20px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.originalPrice
-  }, "\u20B9", data?.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.webinarButtonContainer
@@ -7481,7 +7521,7 @@ const SingleVideoSlide$1 = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: data.isPaid ? 'BUY NOW' : 'REGISTER NOW'
+      value: data.isPaid ? buyNowText : registerNowText
       // isExternal: 1
     },
 
@@ -7499,10 +7539,12 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = React.useContext(PageContext);
   const classes = useWebinarPromotionPage({
     containerWidth,
@@ -7518,7 +7560,9 @@ function CoursePromotionPage$1({
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }
 
@@ -7838,18 +7882,23 @@ const SingleVideoSlide = props => {
     completed
   }) => {
     if (days === 0 && hours < 24) {
+      if (countryCode === 'KR') {
+        return /*#__PURE__*/React__default["default"].createElement("span", null, hours, " \uC2DC\uAC04 ", minutes, " \uBD84 ", seconds, "\uCD08");
+      }
       return /*#__PURE__*/React__default["default"].createElement("span", null, hours, "h ", minutes, "m ", seconds, "s");
     } else {
       let given = moment__default["default"](props.data.endDate);
       let current = moment__default["default"]().startOf('day');
-      return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), " day(s)");
+      return /*#__PURE__*/React__default["default"].createElement("span", null, Math.floor(moment__default["default"].duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
     }
   };
   const {
     data,
     courseBuyNow,
     conversions = 20,
-    showCourseInstallment
+    showCourseInstallment,
+    countryCode,
+    currencySymbol
   } = props;
   const showCourseInstallmentData = data?.courseOverviewData;
   const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
@@ -7882,6 +7931,34 @@ 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__default["default"].createElement("p", {
+        className: classes.offerText
+      }, /*#__PURE__*/React__default["default"].createElement("span", {
+        className: classes.courseDetailTime
+      }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
+        renderer: renderer,
+        date: data.endDate
+      })), ' ', "\uD6C4\xA0\uC2E0\uCCAD\xA0\uB9C8\uAC10\xA0\uC608\uC815");
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement("p", {
+        className: classes.offerText
+      }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+        className: classes.courseDetailTime
+      }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
+        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__default["default"].createElement("div", {
     className: classes.videoCarouselContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7894,11 +7971,11 @@ const SingleVideoSlide = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, limitedPeriodOfferText))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.emblemContainer
   }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7963,14 +8040,7 @@ const SingleVideoSlide = props => {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.courseViewContainer
-  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React__default["default"].createElement("p", {
-    className: classes.offerText
-  }, "Offer Ends in", ' ', /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classes.courseDetailTime
-  }, /*#__PURE__*/React__default["default"].createElement(Countdown__default["default"], {
-    renderer: renderer,
-    date: data.endDate
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React__default["default"].createElement(VideoPlayer, {
@@ -7984,14 +8054,14 @@ const SingleVideoSlide = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       // fontSize: '20px',
       marginTop: '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.originalPrice
-  }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
+  }, finalPrice), ' ', /*#__PURE__*/React__default["default"].createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Button, {
     style: {
@@ -8000,7 +8070,7 @@ const SingleVideoSlide = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: 'BUY NOW'
+      value: buyNowText
       // isExternal: 1
     },
 
@@ -8036,10 +8106,12 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = React.useContext(PageContext);
   const classes = useCoursePromotionPage({
     containerWidth,
@@ -8056,7 +8128,9 @@ function CoursePromotionPage({
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }