diy-template-components 0.2.68 → 0.2.70

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';
@@ -2068,7 +2068,9 @@ function PageRenderer$1({
   isTutorWebsite = false,
   extraProps,
   hideLogin,
-  isCustomWebsite
+  isCustomWebsite,
+  countryCode,
+  currencySymbol
 }) {
   const theme = useMemo(() => getTheme(color, font), [color, font]);
   const navList = header?.navs;
@@ -2089,8 +2091,10 @@ function PageRenderer$1({
     extraProps,
     hideLogin,
     isCustomWebsite,
-    _id
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
+    _id,
+    countryCode,
+    currencySymbol
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -2803,7 +2807,7 @@ var index$k = /*#__PURE__*/Object.freeze({
 const useSectionStyles$6 = createUseStyles(theme => ({
   bannerCarouselCenterSection: {
     width: '100%',
-    height: '100%',
+    // height: '100%',
     textAlign: 'center',
     position: 'relative',
     '&, & *, & *:before, & *:after': {
@@ -2837,7 +2841,7 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     // height: '100%',
     // display: 'flex',
     // alignItems: 'center'
-    height: '100%',
+    // height: '100%',
     display: 'flex',
     /* padding: 100px 0; */
     alignItems: 'center'
@@ -2908,9 +2912,10 @@ const useSectionStyles$6 = createUseStyles(theme => ({
     textContainer: {
       padding: '20px 20px',
       height: '100%',
-      width: '100%',
-      backgroundColor: theme?.palette?.background?.primary
+      width: '100%'
+      // backgroundColor: theme?.palette?.background?.primary
     },
+
     subTitleHeading: {
       color: theme?.palette?.font?.tertiary
     },
@@ -2964,34 +2969,34 @@ const Section$3 = ({
     className: classes.contentContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.sectionContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, !(nodeData.cardHeading.metadata.value === '<br>' && nodeData.title.metadata.value === '<br>' && nodeData.description.metadata.value === '<br>' && nodeData?.cta?.metadata?.value === '') ? /*#__PURE__*/React.createElement("div", {
     className: classes.textContainer
-  }, /*#__PURE__*/React.createElement("div", {
+  }, nodeData.cardHeading.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("div", {
     className: classes.subTitleHeading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.cardHeading?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData.cardHeading.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("h2", {
+  })) : null, nodeData.title.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("h2", {
     className: classes.heading
   }, /*#__PURE__*/React.createElement("span", {
     ref: nodeData?.title?.refSetter,
     dangerouslySetInnerHTML: {
       __html: nodeData.title.metadata.value
     }
-  })), /*#__PURE__*/React.createElement("p", {
+  })) : null, nodeData.description.metadata.value !== '<br>' ? /*#__PURE__*/React.createElement("p", {
     ref: nodeData?.description?.refSetter,
     className: classes.description,
     dangerouslySetInnerHTML: {
       __html: nodeData.description.metadata.value
     }
-  }), nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
+  }) : null, nodeData?.cta?.validations?.isEmptyAllowed && nodeData?.cta?.metadata?.value === '' ? null : /*#__PURE__*/React.createElement(Button, {
     ref: nodeData?.cta?.refSetter,
     data: nodeData.cta.metadata,
     type: nodeData?.cta?.metadata?.type,
     size: isMobile ? 'small' : 'medium'
-  }))), /*#__PURE__*/React.createElement("div", {
+  })) : null), /*#__PURE__*/React.createElement("div", {
     className: classes?.centerBgImageContainer
   }, /*#__PURE__*/React.createElement(NextImageRenderer, {
     src: nodeData.image.metadata.value,
@@ -5460,7 +5465,11 @@ const useCourseStyles = createUseStyles(theme => {
     },
     courseCardImgThumbnail: {
       borderTopLeftRadius: theme?.shape?.borderRadius?.regular,
-      borderTopRightRadius: theme?.shape?.borderRadius?.regular
+      borderTopRightRadius: theme?.shape?.borderRadius?.regular,
+      maxWidth: '100%',
+      minHeight: '100%',
+      maxHeight: '100%',
+      minWidth: '100%'
     },
     courseCardData: {
       padding: '20px',
@@ -5641,8 +5650,61 @@ function getShortenedSubstring(name, length, allowDots = true) {
   return '';
 }
 
+const formatCurrency = (countryCode, value, currencySymbol) => {
+  let formattedValue = Number(value);
+  const getFormattedValue = (countryCode, currencySymbol, value) => {
+    return new Intl.NumberFormat(countryCode, {
+      // style: "currency",
+      // currency: currency,
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    }).format(value);
+  };
+  const getFormattedFractionValue = (countryCode, currencySymbol, value) => {
+    return new Intl.NumberFormat(countryCode, {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    }).format(value);
+  };
+  let func = getFormattedValue;
+  if (countryCode === 'IN' || countryCode === 'SG') {
+    if (value % 1 !== 0) {
+      func = getFormattedFractionValue;
+    }
+  }
+
+  // India
+  if (countryCode === 'IN') {
+    formattedValue = `₹ ${func('en-IN', 'INR', value)}`;
+  }
+  // Vietnam
+  else if (countryCode === 'VI' || countryCode === 'VN') {
+    if (currencySymbol === '$') {
+      formattedValue = `$ ${func('en-US', 'USD', value)}`;
+    } else {
+      formattedValue = `${func('vi-VN', 'VND', value)} đ`;
+      formattedValue = formattedValue.replace(/[.]/g, ',');
+    }
+  }
+  // South Korea
+  else if (countryCode === 'KR') {
+    if (currencySymbol === '$') {
+      formattedValue = `$ ${func('en-US', 'USD', value)}`;
+    } else {
+      formattedValue = `${func('ko-KR', 'KRW', value)} 원`;
+    }
+  }
+  // Singapore
+  else if (countryCode === 'SG') {
+    formattedValue = `S$ ${func('en-SG', 'SGD', value)}`;
+  }
+  return formattedValue;
+};
+
 function CourseCard({
-  card
+  card,
+  countryCode,
+  currencySymbol
 }) {
   const classes = useCourseStyles();
   const {
@@ -5650,6 +5712,10 @@ function CourseCard({
   } = useContext(PageContext);
   const discount = parseInt((card?.price - card?.finalPrice) / card?.price * 100).toFixed(2);
   const defaultCardImg = 'https://cp-assets-public.s3.ap-south-1.amazonaws.com/cams/cards-icon/default_course.png';
+  const price = formatCurrency(countryCode, card?.price, currencySymbol);
+  const finalPrice = formatCurrency(countryCode, card?.finalPrice, currencySymbol);
+  const buyNowText = countryCode === 'KR' ? '이 강좌를 수강하세요.' : 'Buy Now';
+  const offText = countryCode === 'KR' ? '할인' : 'OFF';
   return /*#__PURE__*/React.createElement("div", {
     className: classes.singleCard
   }, /*#__PURE__*/React.createElement("div", {
@@ -5684,14 +5750,14 @@ function CourseCard({
     className: classes.courseCardPriceContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardPrice
-  }, '₹', card?.finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React.createElement("div", {
+  }, finalPrice), card?.price !== card?.finalPrice ? /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardStrikePrice
-  }, /*#__PURE__*/React.createElement("span", null, '₹', card?.price), ' ', discount > 0 && discount + '% OFF') : null), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement("span", null, price), " ", discount > 0 && discount + `% ${offText}`) : null), /*#__PURE__*/React.createElement("a", {
     className: classes.coursesAnchorTag,
     href: isEdit ? null : card?.shareableLink
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseCardBuyBtn
-  }, "Buy Now")))));
+  }, buyNowText)))));
 }
 
 function courses({
@@ -5705,7 +5771,9 @@ function courses({
     baseURLs,
     hashToken,
     isMasterTemplate,
-    isEdit
+    isEdit,
+    countryCode,
+    currencySymbol
   } = useContext(PageContext);
   const [cardList, setCardList] = useState(null);
   const [errored, setErrored] = useState(false);
@@ -5795,7 +5863,9 @@ function courses({
     }
   })), !showShimmer ? /*#__PURE__*/React.createElement(Wrapper, wrapperProps, cardList != null ? cardList?.map((card, index) => /*#__PURE__*/React.createElement(CourseCard, {
     key: index,
-    card: card
+    card: card,
+    countryCode: countryCode,
+    currencySymbol: currencySymbol
   })) : fallBackImages?.map((dt, ind) => {
     return /*#__PURE__*/React.createElement(Fragment, {
       key: ind
@@ -7103,16 +7173,13 @@ const SingleVideoSlide$1 = props => {
   };
   const checkIfOfferIsValid = () => moment().diff(moment(props.data.offerPriceEndDate)) < 0;
   const checkForShowDiscount = () => {
-    if (checkIfOfferIsValid() && data?.discount) {
-      return true;
-    }
     if (props.data.endDate === null || checkIfOfferIsValid()) {
-      if (data.discount > 0 && data.offerPriceValidFor === 0) {
+      if (data.discount > 0 && data.offerPriceValidFor === null) {
         return true;
-      } else if (data.discount > 0 && data.offerPriceValidFor !== 0 && data.offerPriceValidFor - conversions <= 0) {
+      } else if (data.discount > 0 && data.offerPriceValidFor !== null && data.offerPriceValidFor - conversions <= 0) {
         return false;
       }
-    } else if (data.offerPriceValidFor >= 0 && data.discount) {
+    } else if (data.offerPriceValidFor >= null && data.discount) {
       if (data.offerPriceValidFor <= conversions) {
         return false;
       }
@@ -7141,11 +7208,11 @@ const SingleVideoSlide$1 = props => {
     className: classes.iframeSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, data?.isPaid !== 0 && (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && (data.offerPriceEndDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
+  }, data?.isPaid !== 0 && (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor > conversions && (data.discount && data.offerPriceEndDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
     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() && /*#__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
@@ -7189,7 +7256,7 @@ const SingleVideoSlide$1 = props => {
     }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, data.isPaid !== 0 && checkIfOfferIsValid() && (data.offerPriceValidFor === 0 ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
+  }, 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
@@ -7595,12 +7662,12 @@ const SingleVideoSlide = props => {
   const checkIfOfferIsValid = () => moment().diff(moment(props?.data?.endDate || 0)) < 0;
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
-      if (data.discount > 0 && data.offerPriceValidFor === 0) {
+      if (data.discount > 0 && data.offerPriceValidFor === null) {
         return true;
-      } else if (data.discount > 0 && data.offerPriceValidFor !== 0 && data.offerPriceValidFor - conversions <= 0) {
+      } else if (data.discount > 0 && data.offerPriceValidFor !== null && data.offerPriceValidFor - conversions <= 0) {
         return false;
       }
-    } else if (data.offerPriceValidFor >= 0 && data.discount) {
+    } else if (data.offerPriceValidFor >= null && data.discount) {
       if (data.offerPriceValidFor <= conversions) {
         return false;
       }
@@ -7629,7 +7696,7 @@ const SingleVideoSlide = props => {
     className: classes.iframeSuperContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.videoDetails
-  }, (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && data.offerPriceValidFor > conversions && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.endDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
+  }, (checkIfOfferIsValid() || data.offerPriceValidFor > 0) && (data.offerPriceValidFor > conversions || data.offerPriceValidFor === null) && /*#__PURE__*/React.createElement("div", null, data.offerPriceValidFor - conversions > 0 && data.discount && (data.endDate ? checkIfOfferIsValid() : true) ? /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainer
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.bannerContainerText
@@ -7702,7 +7769,7 @@ const SingleVideoSlide = props => {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.courseViewContainer
-  }, checkIfOfferIsValid() && (data.offerPriceValidFor !== 0 ? data.offerPriceValidFor - conversions > 0 : true) && /*#__PURE__*/React.createElement("p", {
+  }, 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
@@ -8825,6 +8892,8 @@ function PageRenderer({
   SectionWrapper,
   isMasterTemplate,
   basePath,
+  countryCode,
+  currencySymbol,
   isPreview,
   isEdit,
   sectionPlaceholder,
@@ -8852,8 +8921,10 @@ function PageRenderer({
     extraProps,
     hideLogin,
     isCustomWebsite,
-    _id
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id]);
+    _id,
+    countryCode,
+    currencySymbol
+  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme