diy-template-components 2.0.98 → 2.0.100

package/build/index.es.js

@@ -1398,6 +1398,7 @@ function DesktopHeader({
   onDownloadAppTriggered,
   extraProps
 }) {
+  const [isVisible, setIsVisible] = useState(false);
   const {
     isFixed = true
   } = header;
@@ -1422,6 +1423,24 @@ function DesktopHeader({
     }
     return optionsData;
   };
+  useEffect(() => {
+    if (!header?.effectivePrice) {
+      return;
+    }
+    const handleScroll = () => {
+      if (window.scrollY > 220) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      if (header?.effectivePrice) {
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
+  }, []);
   const moreContentFn = () => {
     let optionsArr = navData;
     let moreContent = [];
@@ -1475,7 +1494,7 @@ function DesktopHeader({
   };
   const OfferDetailsJSX = () => {
     console.log('header', header);
-    if (!header?.effectivePrice) {
+    if (!header?.effectivePrice || !isVisible) {
       return null;
     }
     let conversions = extraProps?.conversions || 0;
@@ -1603,6 +1622,7 @@ function MobileHeader({
     isCustomWebsite
   });
   const [sideMenu, openSideMenu] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const navEl = useRef(null);
   useLayoutEffect(() => {
     const body = navEl?.current?.ownerDocument?.body;
@@ -1627,7 +1647,20 @@ function MobileHeader({
       if (body) {
         body.style.marginBottom = '130px';
       }
+      const handleScroll = () => {
+        if (window.scrollY > 220) {
+          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';
@@ -1702,7 +1735,7 @@ function MobileHeader({
     return null;
   };
   const BottomSheetJSX = () => {
-    if (!header?.effectivePrice) {
+    if (!header?.effectivePrice || !isVisible) {
       return null;
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {