diy-template-components 0.3.4 → 0.3.5

package/build/index.es.js

@@ -1,12 +1,12 @@
-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;
 }
 
 import React, { createContext, useContext, forwardRef, useRef, useEffect, useState, useMemo, useLayoutEffect, Suspense, memo, lazy, Fragment } from 'react';
@@ -4382,6 +4382,8 @@ function VideoTestimonial({
     layout: {
       containerWidth
     },
+    countryCode,
+    currencySymbol,
     isMobile
   } = useContext(PageContext);
   const classes = useVideoTestimonialStyles({
@@ -4413,7 +4415,9 @@ function VideoTestimonial({
   })), /*#__PURE__*/React.createElement(Wrapper, null, videoData.videoCarousel.components.map((data, index) => /*#__PURE__*/React.createElement(SingleVideoSlide$2, {
     data: data,
     key: index,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))))));
 }
 
@@ -7322,7 +7326,9 @@ const SingleVideoSlide$1 = props => {
   const {
     data,
     webinarCtaClick,
-    conversions = 0
+    conversions = 0,
+    countryCode,
+    currencySymbol
   } = props;
   const renderer = ({
     days,
@@ -7332,11 +7338,14 @@ 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()), " day(s)");
+      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.duration(given.diff(current)).asDays()), ' ', countryCode === 'KR' ? '날' : 'day(s)');
     }
   };
   const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
@@ -7368,6 +7377,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.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", {
@@ -7380,11 +7427,11 @@ const SingleVideoSlide$1 = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.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.createElement("div", {
+  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("h3", {
+  }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("h3", {
     ref: data?.videoTextHeading?.refSetter,
     className: classes.videoDetailsHeading,
     dangerouslySetInnerHTML: {
@@ -7424,14 +7471,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, 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", {
+  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7448,13 +7488,13 @@ const SingleVideoSlide$1 = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9", data?.effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
+  }, effectivePrice), checkForShowDiscount() && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
       fontSize: '20px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
-  }, "\u20B9", data?.price), ' ', /*#__PURE__*/React.createElement("span", {
+  }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))) : null, /*#__PURE__*/React.createElement("div", {
     className: classes.webinarButtonContainer
@@ -7466,7 +7506,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
     },
 
@@ -7484,10 +7524,12 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = useContext(PageContext);
   const classes = useWebinarPromotionPage({
     containerWidth,
@@ -7503,7 +7545,9 @@ function CoursePromotionPage$1({
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }
 
@@ -7823,18 +7867,23 @@ 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()), " day(s)");
+      return /*#__PURE__*/React.createElement("span", null, Math.floor(moment.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;
@@ -7867,6 +7916,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.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", {
@@ -7879,11 +7956,11 @@ const SingleVideoSlide = props => {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer left for", ' ', data.offerPriceValidFor - conversions, " users now")) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
+  }, renderHurryUpBannerText())) : checkIfOfferIsValid() && /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
-  }, "Hurry up! Offer for limited period only"))), /*#__PURE__*/React.createElement("div", {
+  }, limitedPeriodOfferText))), /*#__PURE__*/React.createElement("div", {
     className: classes.emblemContainer
   }, data?.courseOverviewData?.courseTagList.length && data?.courseOverviewData?.courseTagList?.map(data => {
     return /*#__PURE__*/React.createElement("div", {
@@ -7948,14 +8025,7 @@ const SingleVideoSlide = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, 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", {
+  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== null ? data.offerPriceValidFor - conversions > 0 : true) && renderOfferEndsInText(), /*#__PURE__*/React.createElement("div", {
     ref: data?.videoFrame?.refSetter,
     className: classes.iframeContainer
   }, /*#__PURE__*/React.createElement(VideoPlayer, {
@@ -7969,14 +8039,14 @@ const SingleVideoSlide = props => {
     className: classes.priceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.offerPrice
-  }, "\u20B9 ", data.effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
+  }, effectivePrice), checkForShowDiscount() && (data.endDate ? checkIfOfferIsValid() : true) && /*#__PURE__*/React.createElement("p", {
     style: {
       // fontSize: '20px',
       marginTop: '0px'
     }
   }, /*#__PURE__*/React.createElement("span", {
     className: classes.originalPrice
-  }, "\u20B9 ", data.price), ' ', /*#__PURE__*/React.createElement("span", {
+  }, finalPrice), ' ', /*#__PURE__*/React.createElement("span", {
     className: classes.offerDiscount
   }, `${data && discount(data)}%`))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
     style: {
@@ -7985,7 +8055,7 @@ const SingleVideoSlide = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: 'BUY NOW'
+      value: buyNowText
       // isExternal: 1
     },
 
@@ -8021,10 +8091,12 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = useContext(PageContext);
   const classes = useCoursePromotionPage({
     containerWidth,
@@ -8041,7 +8113,9 @@ function CoursePromotionPage({
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }