diy-template-components 0.3.6 → 0.3.7

package/build/index.es.js

@@ -2260,12 +2260,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: {
@@ -2292,7 +2292,7 @@ const useSectionStyles$8 = createUseStyles(theme => ({
   sideBannerImage: {
     width: '100%',
     height: 'calc(100% - 100px)',
-    objectFit: 'cover',
+    // objectFit: 'cover',
     objectPosition: '50% 50%'
   },
   absoluteButtonsBannerRight: {
@@ -4385,6 +4385,8 @@ function VideoTestimonial({
     layout: {
       containerWidth
     },
+    countryCode,
+    currencySymbol,
     isMobile
   } = useContext(PageContext);
   const classes = useVideoTestimonialStyles({
@@ -4416,7 +4418,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
   }))))));
 }
 
@@ -7325,7 +7329,9 @@ const SingleVideoSlide$1 = props => {
   const {
     data,
     webinarCtaClick,
-    conversions = 0
+    conversions = 0,
+    countryCode,
+    currencySymbol
   } = props;
   const renderer = ({
     days,
@@ -7335,11 +7341,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;
@@ -7371,6 +7380,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", {
@@ -7383,11 +7430,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: {
@@ -7427,14 +7474,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, {
@@ -7451,13 +7491,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
@@ -7469,7 +7509,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
     },
 
@@ -7487,10 +7527,12 @@ function CoursePromotionPage$1({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = useContext(PageContext);
   const classes = useWebinarPromotionPage({
     containerWidth,
@@ -7506,7 +7548,9 @@ function CoursePromotionPage$1({
     data: sectionData.components[0].metadata,
     webinarCtaClick: extraProps.webinarCtaClick,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }
 
@@ -7826,18 +7870,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;
@@ -7870,6 +7919,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", {
@@ -7882,11 +7959,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", {
@@ -7951,14 +8028,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, {
@@ -7972,14 +8042,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: {
@@ -7988,7 +8058,7 @@ const SingleVideoSlide = props => {
     data: {
       // link: 'headerData?.loginCtaLink',
       // isLink: 1,
-      value: 'BUY NOW'
+      value: buyNowText
       // isExternal: 1
     },
 
@@ -8024,10 +8094,12 @@ function CoursePromotionPage({
   sectionIndex
 }) {
   const {
-    isMobile,
     layout: {
       containerWidth
-    }
+    },
+    countryCode,
+    currencySymbol,
+    isMobile
   } = useContext(PageContext);
   const classes = useCoursePromotionPage({
     containerWidth,
@@ -8044,7 +8116,9 @@ function CoursePromotionPage({
     courseBuyNow: extraProps.courseBuyNow,
     showCourseInstallment: extraProps.showCourseInstallment,
     conversions: extraProps.conversions,
-    sectionIndex: sectionIndex
+    sectionIndex: sectionIndex,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   }))));
 }