diy-template-components 5.1.4 → 5.10.0

package/build/index.es.js

@@ -5,6 +5,7 @@ import moment from 'moment';
 import Countdown from 'react-countdown';
 import koreanLocale from 'moment/locale/ko';
 import ReactDOMServer from 'react-dom/server';
+import '@storybook/theming';
 import { createTheming, createUseStyles as createUseStyles$1, useTheme as useTheme$1 } from 'react-jss';
 
 function insertStyle(css) {
@@ -11786,7 +11787,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       } = {}) => backgroundImage ? `url("${backgroundImage}")` : 'none',
       backgroundColor: ({
         backgroundColor
-      } = {}) => backgroundColor || '#f8f8fa',
+      } = {}) => backgroundColor || theme?.colors?.background2,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',
@@ -11807,7 +11808,8 @@ const useCounterSectionStyles = createUseStyles(theme => {
     },
     grid: {
       display: 'grid',
-      gridTemplateColumns: 'repeat(4, 1fr)',
+      gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
+      // fits 4 columns in desktop
       gap: ({
         isMobile
       } = {}) => isMobile ? '24px' : '32px',
@@ -11826,7 +11828,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '64px',
       fontWeight: theme.typography?.fontWeight?.bold,
       lineHeight: 1.1,
-      color: 'rgba(247, 37, 133, 1)' ,
+      color: theme?.colors?.AccentColor,
       wordBreak: 'break-word'
     },
     description: {
@@ -11834,7 +11836,7 @@ const useCounterSectionStyles = createUseStyles(theme => {
       fontSize: '20px',
       lineHeight: 1.4,
       fontWeight: '700',
-      color: 'rgba(51, 51, 51, 1)' ,
+      color: theme?.colors?.font3,
       wordBreak: 'break-word'
     },
     '@media (max-width: 1024px)': {
@@ -11864,6 +11866,83 @@ const useCounterSectionStyles = createUseStyles(theme => {
   };
 });
 
+const DURATION_MS = 2000;
+const EASING = t => 1 - Math.pow(1 - t, 3); // easeOutCubic
+
+function parseCounterValue(value) {
+  if (value == null || value === '') return null;
+  const match = String(value).trim().match(/^([\d.]+)(.*)$/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  if (Number.isNaN(num)) return null;
+  return {
+    end: num,
+    suffix: match[2] || ''
+  };
+}
+function AnimatedCounter({
+  value,
+  className,
+  refSetter
+}) {
+  const elRef = 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 observer = new IntersectionObserver(entries => {
+      const [entry] = entries;
+      if (!entry.isIntersecting || hasAnimatedRef.current) return;
+      hasAnimatedRef.current = true;
+      const startTime = performance.now();
+      const {
+        end,
+        suffix
+      } = parsed;
+      const tick = now => {
+        const elapsed = now - startTime;
+        const progress = Math.min(elapsed / DURATION_MS, 1);
+        const eased = EASING(progress);
+        const current = eased * end;
+        if (elRef.current) {
+          const displayValue = Number.isInteger(end) ? Math.round(current) : parseFloat(current.toFixed(2));
+          elRef.current.textContent = displayValue + suffix;
+        }
+        if (progress < 1) {
+          rafIdRef.current = requestAnimationFrame(tick);
+        }
+      };
+      rafIdRef.current = requestAnimationFrame(tick);
+    }, {
+      threshold: 0.2
+    });
+    observer.observe(elRef.current);
+    return () => {
+      observer.disconnect();
+      if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    };
+  }, [value]);
+  const parsed = parseCounterValue(value);
+  const setRef = el => {
+    elRef.current = el;
+    refSetter?.(el);
+  };
+  if (parsed) {
+    return /*#__PURE__*/React.createElement("h2", {
+      ref: setRef,
+      className: className
+    }, "0", parsed.suffix);
+  }
+  return /*#__PURE__*/React.createElement("h2", {
+    ref: refSetter,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: value
+    }
+  });
+}
 function CounterSection({
   sectionData,
   sectionIndex
@@ -11874,44 +11953,49 @@ function CounterSection({
     },
     isMobile
   } = useContext(PageContext);
-  console.log('llll', sectionData);
-  sectionData.components = sectionData.components;
   const metadata = sectionData.metadata || {};
   const backgroundImage = metadata.backgroundImage || '';
-  const backgroundColor = metadata.backgroundColor || '#f8f8fa';
+  const backgroundColor = metadata.backgroundColor;
   const classes = useCounterSectionStyles({
     containerWidth,
     isMobile,
     backgroundImage: backgroundImage || null,
     backgroundColor
   });
-  const cardData = sectionData?.components[0];
-  const [sectionComponent] = sectionData.components || [];
+  const cardData = sectionData?.components?.[0];
+  const [sectionComponent] = sectionData?.components || [];
   const counterSection = sectionComponent?.counterSection;
-  counterSection?.components || [];
+  const counters = counterSection?.components || [];
+  const items = cardData?.contentList?.components || counters;
   if (!cardData) return null;
+  const getValue = item => item?.contentHeading?.metadata?.value ?? item?.value?.metadata?.value;
+  const getDescription = item => item?.contentPara?.metadata?.value ?? item?.description?.metadata?.value;
+  const getValueRefSetter = item => item?.contentHeading?.refSetter ?? item?.value?.refSetter;
+  const getDescRefSetter = item => item?.contentPara?.refSetter ?? item?.description?.refSetter;
   return /*#__PURE__*/React.createElement("section", {
     className: classes.section
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.container
   }, /*#__PURE__*/React.createElement("div", {
     className: classes.grid
-  }, cardData?.contentList?.components?.map((item, index) => /*#__PURE__*/React.createElement("div", {
-    key: item._id || index,
-    className: classes.counterItem
-  }, item.contentHeading?.metadata?.value != null && item.contentHeading?.metadata?.value !== '' && /*#__PURE__*/React.createElement("h2", {
-    ref: item.contentHeading?.refSetter,
-    className: classes.value,
-    dangerouslySetInnerHTML: {
-      __html: item.contentHeading.metadata.value
-    }
-  }), item.contentPara?.metadata?.value != null && item.contentPara?.metadata?.value !== '' && /*#__PURE__*/React.createElement("p", {
-    ref: item.contentPara?.refSetter,
-    className: classes.description,
-    dangerouslySetInnerHTML: {
-      __html: item.contentPara.metadata.value
-    }
-  }))))));
+  }, items?.map((item, index) => {
+    const value = getValue(item);
+    const description = getDescription(item);
+    return /*#__PURE__*/React.createElement("div", {
+      key: item._id || index,
+      className: classes.counterItem
+    }, value != null && value !== '' && /*#__PURE__*/React.createElement(AnimatedCounter, {
+      value: value,
+      className: classes.value,
+      refSetter: getValueRefSetter(item)
+    }), description != null && description !== '' && /*#__PURE__*/React.createElement("p", {
+      ref: getDescRefSetter(item),
+      className: classes.description,
+      dangerouslySetInnerHTML: {
+        __html: description
+      }
+    }));
+  }))));
 }
 
 var index$5 = /*#__PURE__*/Object.freeze({
@@ -11928,12 +12012,13 @@ const BREAKPOINTS = {
 /**
  * Get current breakpoint from window width
  */
-const getBreakpoint = width => {
+const getBreakpoint = (width, isMobile) => {
+  if (isMobile) return 'mobile';
   if (width >= BREAKPOINTS.desktop) return 'desktop';
   if (width >= BREAKPOINTS.tablet) return 'tablet';
   return 'mobile';
 };
-const stickyBarBase = {
+const getStickyBarBase = theme => ({
   position: 'fixed',
   left: 0,
   right: 0,
@@ -11942,100 +12027,86 @@ const stickyBarBase = {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  backgroundColor: '#F8F9FB',
-  boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.06)',
-  borderTop: '1px solid #E5E7EB'
-};
-const stickyBarResponsive = {
-  mobile: {
-    ...stickyBarBase,
-    padding: '12px 16px',
-    gap: '12px',
-    flexDirection: 'column',
-    alignItems: 'stretch'
-  },
-  tablet: {
-    ...stickyBarBase,
-    padding: '14px 24px',
-    gap: '16px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  desktop: {
-    ...stickyBarBase,
-    padding: '16px 32px',
-    gap: '24px',
-    flexDirection: 'row',
-    alignItems: 'center'
-  }
+  fontFamily: theme?.typography?.fontFamily,
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  boxShadow: theme?.shadows?.secondary ?? '0 -2px 8px rgba(0, 0, 0, 0.06)',
+  borderTop: `1px solid ${theme?.colors?.border2}`
+});
+const getStickyBarResponsive = (theme, bgColor) => {
+  const base = getStickyBarBase(theme);
+  return {
+    mobile: {
+      ...base,
+      padding: '12px 16px',
+      gap: '12px',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    tablet: {
+      ...base,
+      padding: '14px 24px',
+      gap: '16px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    },
+    desktop: {
+      ...base,
+      padding: '16px 32px',
+      gap: '24px',
+      flexDirection: 'row',
+      alignItems: 'center',
+      background: '#FFFFFF',
+      color: theme?.colors?.CtaTextColor || 'white'
+    }
+  };
 };
-const getStickyBarStyle = breakpoint => stickyBarResponsive[breakpoint] || stickyBarResponsive.mobile;
-const stickyTextBase = {
-  color: '#343A40',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+const getStickyBarStyle = (breakpoint, theme = {}, bgColor) => getStickyBarResponsive(theme)[breakpoint] || getStickyBarResponsive(theme).mobile;
+const getStickyTextBase = theme => ({
+  color: theme?.colors?.font2,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
   margin: 0
+});
+const getStickyTextResponsive = (theme, bgColor) => {
+  const base = getStickyTextBase(theme);
+  return {
+    mobile: {
+      ...base,
+      fontSize: '13px',
+      lineHeight: 1.4,
+      textAlign: 'center',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    tablet: {
+      ...base,
+      fontSize: '14px',
+      lineHeight: 1.45,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    },
+    desktop: {
+      ...base,
+      fontSize: '15px',
+      lineHeight: 1.5,
+      textAlign: 'left',
+      color: '#000000' ,
+      background: '#FFFFFF'
+    }
+  };
 };
-const stickyTextResponsive = {
-  mobile: {
-    ...stickyTextBase,
-    fontSize: '13px',
-    lineHeight: 1.4,
-    textAlign: 'center'
-  },
-  tablet: {
-    ...stickyTextBase,
-    fontSize: '14px',
-    lineHeight: 1.45,
-    textAlign: 'left'
-  },
-  desktop: {
-    ...stickyTextBase,
-    fontSize: '15px',
-    lineHeight: 1.5,
-    textAlign: 'left'
-  }
-};
-const getStickyTextStyle = breakpoint => stickyTextResponsive[breakpoint] || stickyTextResponsive.mobile;
-const stickyButtonBase = {
-  backgroundColor: '#3366FF',
-  color: '#FFFFFF',
-  border: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 600,
-  textTransform: 'uppercase',
-  letterSpacing: '0.02em',
-  cursor: 'pointer',
-  whiteSpace: 'nowrap',
-  flexShrink: 0
-};
-const stickyButtonResponsive = {
-  mobile: {
-    ...stickyButtonBase,
-    padding: '10px 20px',
-    fontSize: '12px',
-    borderRadius: '6px'
-  },
-  tablet: {
-    ...stickyButtonBase,
-    padding: '12px 24px',
-    fontSize: '13px',
-    borderRadius: '8px'
-  },
-  desktop: {
-    ...stickyButtonBase,
-    padding: '14px 28px',
-    fontSize: '14px',
-    borderRadius: '8px'
-  }
-};
-const getStickyButtonStyle = breakpoint => stickyButtonResponsive[breakpoint] || stickyButtonResponsive.mobile;
+const getStickyTextStyle = (breakpoint, theme = {}) => getStickyTextResponsive(theme)[breakpoint] || getStickyTextResponsive(theme).mobile;
 
 // --- Floating (WhatsApp) type ---
 
-const floatingButtonBase = {
+const getFloatingButtonBase = theme => ({
   position: 'fixed',
   bottom: 24,
-  right: 24,
+  right: 9,
   width: 'fit-content',
   marginLeft: 'auto',
   zIndex: 9999,
@@ -12043,47 +12114,50 @@ const floatingButtonBase = {
   alignItems: 'center',
   gap: '10px',
   padding: '12px 20px',
-  backgroundColor: '#FFFFFF',
-  border: '1px solid #E5E7EB',
+  backgroundColor: theme?.colors?.ctaColor || '#FFFFFF',
+  border: `1px solid ${theme?.palette?.border?.secondary ?? '#E5E7EB'}`,
   borderRadius: '9999px',
-  boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+  boxShadow: theme?.shadows?.primary ?? '0 4px 12px rgba(0, 0, 0, 0.1)',
   cursor: 'pointer',
   textDecoration: 'none',
-  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  fontWeight: 700,
+  fontFamily: theme?.typography?.fontFamily ?? 'inherit',
+  fontWeight: theme?.typography?.fontWeight?.bold ?? 700,
   fontSize: '14px',
   textTransform: 'uppercase',
   letterSpacing: '0.02em',
-  color: '#000000',
+  color: theme?.colors?.CtaTextColor || 'white',
   transition: 'box-shadow 0.2s ease, transform 0.2s ease'
+});
+const getFloatingButtonResponsive = theme => {
+  const base = getFloatingButtonBase(theme);
+  return {
+    mobile: {
+      ...base,
+      bottom: 142,
+      left: 16,
+      padding: '10px 16px',
+      gap: '8px',
+      fontSize: '12px'
+    },
+    tablet: {
+      ...base,
+      bottom: 20,
+      left: 20,
+      padding: '12px 18px',
+      gap: '10px',
+      fontSize: '13px'
+    },
+    desktop: {
+      ...base,
+      bottom: 24,
+      left: 24,
+      padding: '12px 20px',
+      gap: '10px',
+      fontSize: '14px'
+    }
+  };
 };
-const floatingButtonResponsive = {
-  mobile: {
-    ...floatingButtonBase,
-    bottom: 16,
-    left: 16,
-    padding: '10px 16px',
-    gap: '8px',
-    fontSize: '12px'
-  },
-  tablet: {
-    ...floatingButtonBase,
-    bottom: 20,
-    left: 20,
-    padding: '12px 18px',
-    gap: '10px',
-    fontSize: '13px'
-  },
-  desktop: {
-    ...floatingButtonBase,
-    bottom: 24,
-    left: 24,
-    padding: '12px 20px',
-    gap: '10px',
-    fontSize: '14px'
-  }
-};
-const getFloatingButtonStyle = breakpoint => floatingButtonResponsive[breakpoint] || floatingButtonResponsive.mobile;
+const getFloatingButtonStyle = (breakpoint, theme = {}) => getFloatingButtonResponsive(theme)[breakpoint] || getFloatingButtonResponsive(theme).mobile;
 const whatsAppIconSvgSize = {
   mobile: 24,
   tablet: 26,
@@ -12171,12 +12245,17 @@ function StickyCta({
   whatsAppLabel = 'SUPPORT',
   whatsAppIconColor,
   whatsAppButtonBackgroundColor,
-  iconImageUrl
+  iconImageUrl,
+  nodeData,
+  extraProps
 }) {
-  console.log('nishu03333', sectionData);
+  const {
+    isMobile
+  } = useContext(PageContext);
   const node = sectionData?.components?.[0];
   const contentList = node?.contentList?.components || [];
   const showEditHint = sectionData?.isDefaultEditor ?? false;
+  sectionData?.bgSection?.components?.[0]?.sectionBgData?.metadata?.value;
   const propsFromSection = node ? {
     type: node?.title?.metadata?.value ?? type,
     stickyMessage: contentList[1]?.contentPara?.metadata?.value ?? stickyMessage,
@@ -12199,8 +12278,9 @@ function StickyCta({
     whatsAppButtonBackgroundColor,
     iconImageUrl
   };
-  const whatsAppUrl = p?.whatsAppPhoneNumber ? p?.whatsAppPhoneNumber : buildWhatsAppUrl(p?.whatsAppPhoneNumber);
-  const [breakpoint, setBreakpoint] = useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : 'mobile');
+  const whatsAppUrl = buildWhatsAppUrl(p?.whatsAppPhoneNumber) ?? p?.whatsAppHref ?? '#';
+  const theme = useTheme() || {};
+  const [breakpoint, setBreakpoint] = useState(() => typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, isMobile) : 'mobile');
   useEffect(() => {
     if (typeof window === 'undefined') return;
     const onResize = () => setBreakpoint(getBreakpoint(window.innerWidth));
@@ -12229,14 +12309,14 @@ function StickyCta({
   }, "Click on edit button to edit this section")) : null;
   if (p.type === 'floating') {
     const buttonStyle = {
-      ...getFloatingButtonStyle(breakpoint),
+      ...getFloatingButtonStyle(breakpoint, theme),
       ...(p.whatsAppButtonBackgroundColor != null && {
         backgroundColor: p.whatsAppButtonBackgroundColor
       })
     };
     const iconSize = getWhatsAppIconSize(breakpoint);
     const iconColor = p.whatsAppIconColor ?? DEFAULT_WHATSAPP_ICON_COLOR;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, editHintBlock, /*#__PURE__*/React.createElement("a", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React.createElement("a", {
       href: whatsAppUrl,
       target: "_blank",
       rel: "noopener noreferrer",
@@ -12258,28 +12338,29 @@ function StickyCta({
     }), /*#__PURE__*/React.createElement("span", null, p.whatsAppLabel)));
   }
 
-  // type === 'sticky' – button uses mobile number from props to build URL; click redirects to WhatsApp
-  const barStyle = getStickyBarStyle(breakpoint);
-  const textStyle = getStickyTextStyle(breakpoint);
-  const buttonStyle = getStickyButtonStyle(breakpoint);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, editHintBlock, /*#__PURE__*/React.createElement("div", {
+  // 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", {
     style: barStyle,
-    role: "banner"
+    role: "banner",
+    "access-cta-sticky": "DIY"
   }, /*#__PURE__*/React.createElement("p", {
     style: textStyle
-  }, p.stickyMessage), /*#__PURE__*/React.createElement("a", {
-    href: whatsAppUrl,
-    target: "_blank",
-    rel: "noopener noreferrer",
-    "access-cta-container": "DIY",
-    style: {
-      ...buttonStyle,
-      textDecoration: 'none',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    }
-  }, p.stickyButtonText)));
+  }, p.stickyMessage), /*#__PURE__*/React.createElement(Button, {
+    data: {
+      isLink: 1,
+      isExternal: 1,
+      link: whatsAppUrl,
+      value: p.stickyButtonText
+    },
+    type: "primary",
+    styling: {
+      background: theme?.colors?.ctaColor
+    },
+    size: breakpoint === 'mobile' ? 'small' : 'medium',
+    "access-cta-container": "DIY"
+  })));
 }
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -12624,7 +12705,8 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
   return {
     section: {
       width: '100%',
-      background: 'linear-gradient(135deg, #6b2d5c 0%, #4a3f6b 40%, #2d5a6b 70%, #3d6b5a 100%)',
+      background: theme?.colors?.background2,
+      color: theme?.colors?.font3,
       minHeight: '100%',
       '&, & *, & *:before, & *:after': {
         fontFamily: theme?.typography?.fontFamily,
@@ -12664,7 +12746,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       lineHeight: 1.25,
       letterSpacing: '3px',
       textTransform: 'uppercase',
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.9)',
       wordBreak: 'break-word',
       fontWeight: theme.typography?.fontWeight?.regular
     },
@@ -12673,15 +12754,12 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       fontSize: theme.typography.fontSize.h2,
       lineHeight: 1.1,
       letterSpacing: '-1px',
-      fontWeight: theme.typography?.fontWeight?.bold,
-      color: theme.palette?.font?.invertedDefault || '#ffffff',
       wordBreak: 'break-word'
     },
     subHeading: {
       margin: 0,
       fontSize: theme.typography.fontSize.body,
       lineHeight: 1.5,
-      color: theme.palette?.font?.invertedDefault || 'rgba(255,255,255,0.95)',
       wordBreak: 'break-word',
       maxWidth: '600px'
     },
@@ -12727,7 +12805,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
         fontWeight: theme.typography?.fontWeight?.semiBold,
-        color: '#ffffff',
         lineHeight: 1.3
       }
     },
@@ -12742,7 +12819,6 @@ const useVideoWorkshopPromotionStyles = createUseStyles(theme => {
       '& p': {
         margin: 0,
         fontSize: theme.typography.fontSize.body,
-        color: '#ffffff',
         lineHeight: 1.4
       }
     },