diy-template-components 5.12.0 → 5.13.0

package/build/index.js

@@ -623,7 +623,11 @@ const Button = /*#__PURE__*/React.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__default["default"].createElement("button", _extends({
+  }, elementProps), /*#__PURE__*/React__default["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: data?.value || ''
+    }
+  })) : /*#__PURE__*/React__default["default"].createElement("button", _extends({
     ref: ref,
     className: (active ? classes.active : '') + ' ' + classes[type] + ' ' + classes[size],
     onClick: isEdit ? null : onClick,
@@ -12623,29 +12627,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 = React.useRef(null);
+  const animSpanRef = React.useRef(null);
   const rafIdRef = React.useRef(null);
   const hasAnimatedRef = React.useRef(false);
   React.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;
@@ -12660,9 +12760,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);
@@ -12672,22 +12772,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__default["default"].createElement("span", {
+      ref: animSpanRef
+    }, initialDisplay, suffix);
+    const content = wrapperProps ? /*#__PURE__*/React__default["default"].createElement("span", {
+      className: wrapperProps.className || undefined,
+      style: Object.keys(wrapperProps.style || {}).length ? wrapperProps.style : undefined
+    }, animatedContent) : animatedContent;
     return /*#__PURE__*/React__default["default"].createElement("h2", {
       ref: setRef,
       className: className
-    }, "0", parsed.suffix);
+    }, content);
   }
   return /*#__PURE__*/React__default["default"].createElement("h2", {
     ref: refSetter,
@@ -12739,6 +12851,7 @@ function CounterSection({
       key: item._id || index,
       className: classes.counterItem
     }, value != null && value !== '' && /*#__PURE__*/React__default["default"].createElement(AnimatedCounter, {
+      key: `${item._id || index}-${/<[^>]+>/.test(value || '') ? 'html' : 'plain'}`,
       value: value,
       className: classes.value,
       refSetter: getValueRefSetter(item)
@@ -12866,8 +12979,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',
@@ -12877,7 +12990,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'
@@ -12889,7 +13001,7 @@ const getFloatingButtonResponsive = theme => {
       ...base,
       bottom: 142,
       left: 16,
-      padding: '10px 16px',
+      padding: '10px',
       gap: '8px',
       fontSize: '12px',
       background: theme?.colors?.ctaColor || '#FFFFFF'
@@ -13013,6 +13125,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,
@@ -13035,7 +13148,7 @@ function StickyCta({
     whatsAppButtonBackgroundColor,
     iconImageUrl
   };
-  const whatsAppUrl = buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
+  buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
   const theme = useTheme() || {};
   const [breakpoint, setBreakpoint] = React.useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, isMobile) : 'mobile');
   React.useEffect(() => {
@@ -13074,7 +13187,7 @@ function StickyCta({
     const iconSize = getWhatsAppIconSize(breakpoint);
     const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React__default["default"].createElement("a", {
-      href: whatsAppUrl,
+      href: redirectUrl,
       target: "_blank",
       rel: "noopener noreferrer",
       "access-cta": "DIY",
@@ -13092,7 +13205,11 @@ function StickyCta({
       size: iconSize,
       color: iconColor,
       iconImageUrl: p.iconImageUrl
-    }), /*#__PURE__*/React__default["default"].createElement("span", null, p.whatsAppLabel)));
+    }), p.whatsAppLabel ? /*#__PURE__*/React__default["default"].createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: p.whatsAppLabel
+      }
+    }) : null));
   }
 
   // type === 'sticky' – use primary Button (same as other sections) linking to WhatsApp
@@ -13103,12 +13220,15 @@ function StickyCta({
     role: "banner",
     "access-cta-sticky": "DIY"
   }, /*#__PURE__*/React__default["default"].createElement("p", {
-    style: textStyle
-  }, p.stickyMessage), /*#__PURE__*/React__default["default"].createElement(Button, {
+    style: textStyle,
+    dangerouslySetInnerHTML: {
+      __html: p.stickyMessage || ''
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Button, {
     data: {
       isLink: 1,
       isExternal: 1,
-      link: whatsAppUrl,
+      link: redirectUrl,
       value: p.stickyButtonText
     },
     type: "primary",