diy-template-components 5.12.0 → 5.14.0

package/build/index.es.js

@@ -349,7 +349,7 @@ const useSectionStyles$b = createUseStyles(theme => ({
       bottom: 0,
       left: 0,
       width: '100%',
-      zIndex: '100'
+      zIndex: '10000'
     }
   },
   mobileAppNameClass: {
@@ -609,7 +609,11 @@ const Button = /*#__PURE__*/forwardRef(function Button({
     rel: data?.isExternal ? 'nofollow noopener' : null,
     className: (active ? classes.active : '') + ' ' + classes[type] + ' ' + classes[size] + ' ' + classes.anchorClass,
     style: styling
-  }, elementProps), data?.value) : /*#__PURE__*/React.createElement("button", _extends({
+  }, elementProps), /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: data?.value || ''
+    }
+  })) : /*#__PURE__*/React.createElement("button", _extends({
     ref: ref,
     className: (active ? classes.active : '') + ' ' + classes[type] + ' ' + classes[size],
     onClick: isEdit ? null : onClick,
@@ -10910,7 +10914,7 @@ const SingleVideoSlide$1 = props => {
     currencySymbol
   } = props;
   const showCourseInstallmentData = data?.courseOverviewData;
-  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
+  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments?.[0]?.installmentPrice;
   const checkIfOfferIsValid = () => moment().diff(moment(props?.data?.endDate || 0)) < 0;
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
@@ -12609,29 +12613,125 @@ const useCounterSectionStyles = createUseStyles(theme => {
 const DURATION_MS = 2000;
 const EASING = t => 1 - Math.pow(1 - t, 3); // easeOutCubic
 
-function parseCounterValue(value) {
+function getPlainTextFromHtml(html) {
+  if (typeof document === 'undefined') {
+    return String(html).replace(/<[^>]*>/g, '');
+  }
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  return div.textContent || div.innerText || '';
+}
+function parseStyleString(styleStr) {
+  if (!styleStr || typeof styleStr !== 'string') return {};
+  const obj = {};
+  styleStr.split(';').forEach(part => {
+    const colonIdx = part.indexOf(':');
+    if (colonIdx > 0) {
+      const key = part.slice(0, colonIdx).trim();
+      const val = part.slice(colonIdx + 1).trim();
+      if (key && val) obj[key] = val;
+    }
+  });
+  return obj;
+}
+const SEMANTIC_TAG_STYLES = {
+  strong: {
+    fontWeight: 'bold'
+  },
+  b: {
+    fontWeight: 'bold'
+  },
+  em: {
+    fontStyle: 'italic'
+  },
+  i: {
+    fontStyle: 'italic'
+  },
+  u: {
+    textDecoration: 'underline'
+  }
+};
+
+/**
+ * Parses value (plain text or HTML) to extract number for animation and wrapper attributes.
+ * Returns { end, suffix, wrapperProps } or null if not parseable.
+ * wrapperProps: { className, style } for the rich text wrapper, or null if plain text.
+ */
+function parseCounterValueFromHtml(value) {
   if (value == null || value === '') return null;
-  const match = String(value).trim().match(/^([\d.]+)(.*)$/);
+  const str = String(value).trim();
+  const plainText = /<[^>]+>/.test(str) ? getPlainTextFromHtml(str) : str;
+  const match = plainText.match(/^([\d.]+)(.*)$/);
   if (!match) return null;
   const num = parseFloat(match[1]);
   if (Number.isNaN(num)) return null;
-  return {
-    end: num,
-    suffix: match[2] || ''
-  };
+  const suffix = match[2] || '';
+  if (!/<[^>]+>/.test(str)) {
+    return {
+      end: num,
+      suffix,
+      wrapperProps: null
+    };
+  }
+  if (typeof document === 'undefined') {
+    return {
+      end: num,
+      suffix,
+      wrapperProps: null
+    };
+  }
+  try {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(str, 'text/html');
+    const root = doc.body?.firstElementChild;
+    if (!root) return {
+      end: num,
+      suffix,
+      wrapperProps: null
+    };
+    const classes = [];
+    const styleObj = {};
+    const collectFromElement = el => {
+      const c = el.getAttribute('class');
+      if (c) classes.push(...c.split(/\s+/).filter(Boolean));
+      const s = el.getAttribute('style');
+      if (s) Object.assign(styleObj, parseStyleString(s));
+      const tagStyles = SEMANTIC_TAG_STYLES[el.tagName?.toLowerCase()];
+      if (tagStyles) Object.assign(styleObj, tagStyles);
+      for (const child of el.children) {
+        collectFromElement(child);
+      }
+    };
+    collectFromElement(root);
+    const className = [...new Set(classes)].join(' ');
+    return {
+      end: num,
+      suffix,
+      wrapperProps: className || Object.keys(styleObj).length ? {
+        className,
+        style: styleObj
+      } : null
+    };
+  } catch {
+    return {
+      end: num,
+      suffix,
+      wrapperProps: null
+    };
+  }
 }
 function AnimatedCounter({
   value,
   className,
   refSetter
 }) {
-  const elRef = useRef(null);
+  const animSpanRef = useRef(null);
   const rafIdRef = useRef(null);
   const hasAnimatedRef = useRef(false);
   useLayoutEffect(() => {
     hasAnimatedRef.current = false; // Reset so we can re-animate when value changes (e.g. live edit)
-    const parsed = parseCounterValue(value);
-    if (!parsed || !elRef.current) return;
+    const parsed = parseCounterValueFromHtml(value);
+    if (!parsed || !animSpanRef.current) return;
     const observer = new IntersectionObserver(entries => {
       const [entry] = entries;
       if (!entry.isIntersecting || hasAnimatedRef.current) return;
@@ -12646,9 +12746,9 @@ function AnimatedCounter({
         const progress = Math.min(elapsed / DURATION_MS, 1);
         const eased = EASING(progress);
         const current = eased * end;
-        if (elRef.current) {
+        if (animSpanRef.current) {
           const displayValue = Number.isInteger(end) ? Math.round(current) : parseFloat(current.toFixed(2));
-          elRef.current.textContent = displayValue + suffix;
+          animSpanRef.current.textContent = displayValue + suffix;
         }
         if (progress < 1) {
           rafIdRef.current = requestAnimationFrame(tick);
@@ -12658,22 +12758,34 @@ function AnimatedCounter({
     }, {
       threshold: 0.2
     });
-    observer.observe(elRef.current);
+    observer.observe(animSpanRef.current);
     return () => {
       observer.disconnect();
       if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
     };
   }, [value]);
-  const parsed = parseCounterValue(value);
+  const parsed = parseCounterValueFromHtml(value);
   const setRef = el => {
-    elRef.current = el;
     refSetter?.(el);
   };
   if (parsed) {
+    const {
+      end,
+      suffix,
+      wrapperProps
+    } = parsed;
+    const initialDisplay = Number.isInteger(end) ? '0' : '0.00';
+    const animatedContent = /*#__PURE__*/React.createElement("span", {
+      ref: animSpanRef
+    }, initialDisplay, suffix);
+    const content = wrapperProps ? /*#__PURE__*/React.createElement("span", {
+      className: wrapperProps.className || undefined,
+      style: Object.keys(wrapperProps.style || {}).length ? wrapperProps.style : undefined
+    }, animatedContent) : animatedContent;
     return /*#__PURE__*/React.createElement("h2", {
       ref: setRef,
       className: className
-    }, "0", parsed.suffix);
+    }, content);
   }
   return /*#__PURE__*/React.createElement("h2", {
     ref: refSetter,
@@ -12725,6 +12837,7 @@ function CounterSection({
       key: item._id || index,
       className: classes.counterItem
     }, value != null && value !== '' && /*#__PURE__*/React.createElement(AnimatedCounter, {
+      key: `${item._id || index}-${/<[^>]+>/.test(value || '') ? 'html' : 'plain'}`,
       value: value,
       className: classes.value,
       refSetter: getValueRefSetter(item)
@@ -12852,8 +12965,8 @@ const getFloatingButtonBase = theme => ({
   zIndex: 9999,
   display: 'inline-flex',
   alignItems: 'center',
-  gap: '10px',
-  padding: '12px 20px',
+  gap: '8px',
+  padding: '14px',
   backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
   border: `1px solid ${theme?.palette?.border?.secondary ?? '#E5E7EB'}`,
   borderRadius: '9999px',
@@ -12863,7 +12976,6 @@ const getFloatingButtonBase = theme => ({
   fontFamily: theme?.typography?.fontFamily ?? 'inherit',
   fontWeight: theme?.typography?.fontWeight?.bold ?? 700,
   fontSize: '14px',
-  textTransform: 'uppercase',
   letterSpacing: '0.02em',
   color: theme?.colors?.CtaTextColor || 'white',
   transition: 'box-shadow 0.2s ease, transform 0.2s ease'
@@ -12875,7 +12987,7 @@ const getFloatingButtonResponsive = theme => {
       ...base,
       bottom: 142,
       left: 16,
-      padding: '10px 16px',
+      padding: '10px',
       gap: '8px',
       fontSize: '12px',
       background: theme?.colors?.ctaColor || '#FFFFFF'
@@ -12908,6 +13020,17 @@ const whatsAppIconSvgSize = {
 };
 const getWhatsAppIconSize = breakpoint => whatsAppIconSvgSize[breakpoint] ?? whatsAppIconSvgSize.mobile;
 
+/**
+ * Height of the sticky bar (full-width CTA) by breakpoint for page padding.
+ * Used to prevent content overlap when the sticky bar is fixed at the bottom.
+ * Values match the sticky bar's padding + content height per breakpoint.
+ */
+const STICKY_BAR_HEIGHT_BY_BREAKPOINT = {
+  mobile: 0,
+  tablet: 78,
+  desktop: 82
+};
+
 const DEFAULT_WHATSAPP_ICON_COLOR = '#25D366';
 
 /** Build WhatsApp wa.me URL from phone number (digits only, optional + prefix). */
@@ -12999,6 +13122,7 @@ function StickyCta({
   const contentList = node?.contentList?.components || [];
   const showEditHint = sectionData?.isDefaultEditor ?? false;
   sectionData?.bgSection?.components?.[0]?.sectionBgData?.metadata?.value;
+  const redirectUrl = node?.subheading?.metadata?.value || '';
   const propsFromSection = node ? {
     type: node?.title?.metadata?.value ?? type,
     stickyMessage: contentList[1]?.contentPara?.metadata?.value ?? stickyMessage,
@@ -13021,7 +13145,7 @@ function StickyCta({
     whatsAppButtonBackgroundColor,
     iconImageUrl
   };
-  const whatsAppUrl = buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
+  buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
   const theme = useTheme() || {};
   const [breakpoint, setBreakpoint] = useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, isMobile) : 'mobile');
   useEffect(() => {
@@ -13060,7 +13184,7 @@ function StickyCta({
     const iconSize = getWhatsAppIconSize(breakpoint);
     const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("a", {
-      href: whatsAppUrl,
+      href: redirectUrl,
       target: "_blank",
       rel: "noopener noreferrer",
       "access-cta": "DIY",
@@ -13078,23 +13202,53 @@ function StickyCta({
       size: iconSize,
       color: iconColor,
       iconImageUrl: p.iconImageUrl
-    }), /*#__PURE__*/React.createElement("span", null, p.whatsAppLabel)));
+    }), p.whatsAppLabel ? /*#__PURE__*/React.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: p.whatsAppLabel
+      }
+    }) : null));
   }
 
   // type === 'sticky' – use primary Button (same as other sections) linking to WhatsApp
   const barStyle = getStickyBarStyle(breakpoint, theme);
   const textStyle = getStickyTextStyle(breakpoint, theme);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("div", {
+  useEffect(() => {
+    document.body.classList.add('has-sticky-cta');
+    return () => document.body.classList.remove('has-sticky-cta');
+  }, []);
+  const stickyBarPaddingStyles = `
+    body.has-sticky-cta {
+      padding-bottom: ${STICKY_BAR_HEIGHT_BY_BREAKPOINT.mobile}px;
+    }
+    @media (min-width: ${BREAKPOINTS.tablet}px) {
+      body.has-sticky-cta {
+        padding-bottom: ${STICKY_BAR_HEIGHT_BY_BREAKPOINT.tablet}px;
+      }
+    }
+    @media (min-width: ${BREAKPOINTS.desktop}px) {
+      body.has-sticky-cta {
+        padding-bottom: ${STICKY_BAR_HEIGHT_BY_BREAKPOINT.desktop}px;
+      }
+    }
+  `;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: stickyBarPaddingStyles
+    }
+  }), isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("div", {
     style: barStyle,
     role: "banner",
     "access-cta-sticky": "DIY"
   }, /*#__PURE__*/React.createElement("p", {
-    style: textStyle
-  }, p.stickyMessage), /*#__PURE__*/React.createElement(Button, {
+    style: textStyle,
+    dangerouslySetInnerHTML: {
+      __html: p.stickyMessage || ''
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
     data: {
       isLink: 1,
       isExternal: 1,
-      link: whatsAppUrl,
+      link: redirectUrl,
       value: p.stickyButtonText
     },
     type: "primary",
@@ -13658,7 +13812,13 @@ function VideoWorkshopPromotion({
     ref: videoData?.videoTextContent?.metadata?.refSetter,
     data: videoData?.videoTextContent?.metadata,
     type: 'primary',
-    size: isMobile ? 'small' : 'medium'
+    size: isMobile ? 'small' : 'medium',
+    onClick: () => {
+      const url = videoData?.videoTextHeading?.metadata?.value;
+      if (url) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+      }
+    }
   }))), /*#__PURE__*/React.createElement("div", {
     className: classes.videoBlock
   }, /*#__PURE__*/React.createElement("div", {