diy-template-components 5.13.0 → 5.14.0

package/build/index.js

@@ -363,7 +363,7 @@ const useSectionStyles$b = createUseStyles(theme => ({
       bottom: 0,
       left: 0,
       width: '100%',
-      zIndex: '100'
+      zIndex: '10000'
     }
   },
   mobileAppNameClass: {
@@ -10928,7 +10928,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__default["default"]().diff(moment__default["default"](props?.data?.endDate || 0)) < 0;
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
@@ -13034,6 +13034,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). */
@@ -13215,7 +13226,30 @@ function StickyCta({
   // 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__default["default"].createElement(React__default["default"].Fragment, null, isMobile ? null : editHintBlock, /*#__PURE__*/React__default["default"].createElement("div", {
+  React.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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("style", {
+    dangerouslySetInnerHTML: {
+      __html: stickyBarPaddingStyles
+    }
+  }), isMobile ? null : editHintBlock, /*#__PURE__*/React__default["default"].createElement("div", {
     style: barStyle,
     role: "banner",
     "access-cta-sticky": "DIY"
@@ -13792,7 +13826,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__default["default"].createElement("div", {
     className: classes.videoBlock
   }, /*#__PURE__*/React__default["default"].createElement("div", {