diy-template-components 2.0.97 → 2.0.99

package/build/index.js

@@ -1414,6 +1414,7 @@ function DesktopHeader({
   onDownloadAppTriggered,
   extraProps
 }) {
+  const [isVisible, setIsVisible] = React.useState(false);
   const {
     isFixed = true
   } = header;
@@ -1438,6 +1439,24 @@ function DesktopHeader({
     }
     return optionsData;
   };
+  React.useEffect(() => {
+    if (!header?.effectivePrice) {
+      return;
+    }
+    const handleScroll = () => {
+      if (window.scrollY > 200) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      if (header?.effectivePrice) {
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
   const moreContentFn = () => {
     let optionsArr = navData;
     let moreContent = [];
@@ -1491,7 +1510,7 @@ function DesktopHeader({
   };
   const OfferDetailsJSX = () => {
     console.log('header', header);
-    if (!header?.effectivePrice) {
+    if (!header?.effectivePrice || !isVisible) {
       return null;
     }
     let conversions = extraProps?.conversions || 0;
@@ -1619,40 +1638,45 @@ function MobileHeader({
     isCustomWebsite
   });
   const [sideMenu, openSideMenu] = React.useState(false);
+  const [isVisible, setIsVisible] = React.useState(false);
   const navEl = React.useRef(null);
   React.useLayoutEffect(() => {
     const body = navEl?.current?.ownerDocument?.body;
     if (body) {
-      console.log("here in nav");
       if (sideMenu) {
         // body?.setAttribute('style', 'overflow: hidden;');
-        console.log("here in nav before", body, header);
         body.style.overflow = 'hidden';
-        console.log("here in nav hidden after", body, header);
       } else {
         // body?.removeAttribute('style');
         body.style.overflow = '';
-        console.log("here in nav hidden else", body, header);
       }
       if (header?.effectivePrice) {
-        console.log("here in effectivePrice if before", body, header);
         body.style.marginBottom = '130px';
-        console.log("here in effectivePrice if after", body, header);
       } else {
-        console.log("here in effectivePrice else before", body, header);
         body.style.marginBottom = '';
-        console.log("here in effectivePrice else before", body, header);
       }
     }
   }, [sideMenu, header?.effectivePrice]);
   React.useEffect(() => {
     if (header?.effectivePrice) {
-      console.log("here in use effect");
       const body = navEl?.current?.ownerDocument?.body;
       if (body) {
         body.style.marginBottom = '130px';
       }
+      const handleScroll = () => {
+        if (window.scrollY > 200) {
+          setIsVisible(true);
+        } else {
+          setIsVisible(false);
+        }
+      };
+      window.addEventListener('scroll', handleScroll);
     }
+    return () => {
+      if (header?.effectivePrice) {
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
   }, []);
   let downloadLink = null;
   const downloadAppText = countryCode === 'KR' ? '앱다운로드' : 'Download App';
@@ -1709,7 +1733,11 @@ function MobileHeader({
     }
   };
   const OfferDetailsJSX = () => {
-    console.log('header', header);
+    console.log('offer details jsx', header);
+    const body = navEl?.current?.ownerDocument?.body;
+    if (body) {
+      body.style.marginBottom = '130px';
+    }
     let conversions = extraProps?.conversions || 0;
     const currentTimestamp = new Date().getTime();
     if (header?.isOfferActive && header?.endDate && header?.endDate && header?.endDate > currentTimestamp && (header?.offerPriceValidFor ? header.offerPriceValidFor - conversions > 0 : true)) {
@@ -1723,7 +1751,7 @@ function MobileHeader({
     return null;
   };
   const BottomSheetJSX = () => {
-    if (!header?.effectivePrice) {
+    if (!header?.effectivePrice || !isVisible) {
       return null;
     }
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {