navbar code optimization

src/Pages/BookingScreen/Components/BSNavbar/BSNavBarCommon.js

@@ -0,0 +1,30 @@
+import { useState } from 'react';
+
+export const useNavbarCommon = () => {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleFullscreen = async () => {
+    if (!isFullscreen) {
+      try {
+        await document.documentElement.requestFullscreen();
+        setIsFullscreen(true);
+      } catch (error) {
+        console.error('Fullscreen error:', error);
+      }
+    } else {
+      try {
+        if (document.fullscreenElement) {
+          await document.exitFullscreen();
+        }
+        setIsFullscreen(false);
+      } catch (error) {
+        console.error('Exit fullscreen error:', error);
+      }
+    }
+  };
+
+  return {
+    handleFullscreen,
+    isFullscreen,
+  };
+};

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar1.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, lazy } from 'react';
+import  { useCallback, useEffect, useRef, useState, lazy } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import { Badge, Popconfirm, Popover, Tooltip } from 'antd';
@@ -8,7 +8,6 @@ import {
   PreferenceData,
   GlobalCombosearch,
   getPreferenceData,
-  GlobalOrderCardDetails,
   changeEstimateBooking,
   GlobalOrderStatus,
   GlobalEstimateBooking,
@@ -158,11 +157,14 @@ import { isMobile } from 'react-device-detect';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss';
 import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
+import { useNavbarCommon } from './BSNavBarCommon.js';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
 
 const BSNavbar1 = (props) => {
+
+  console.log(props?.BookingNavbar,"propspropspropspropspropspropspropsprops")
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const [Navmenu, setNavmenu] = useState(false);
@@ -264,30 +266,14 @@ const BSNavbar1 = (props) => {
       setAccIsOpen(false);
     }
   };
-  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const {
+    handleFullscreen, 
+    isFullscreen,
+  } = useNavbarCommon();
 
 
   
-  const handleFullscreen = useCallback(async () => {
-    if (!isFullscreen) {
-      try {
-        await document.documentElement.requestFullscreen();
-        setIsFullscreen(true);
-      } catch (error) {
-        console.error('Fullscreen error:', error);
-      }
-    } else {
-      try {
-        if (document.fullscreenElement) {
-          await document.exitFullscreen();
-        }
-        setIsFullscreen(false);
-      } catch (error) {
-        console.error('Exit fullscreen error:', error);
-      }
-    }
-  }, [isFullscreen]);
-
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;
 

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx

@@ -130,6 +130,7 @@ const BSCustomerSelect = lazy(
 );
  import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar2.scss';
 import { RiFullscreenExitFill, RiFullscreenFill } from 'react-icons/ri';
+import { useNavbarCommon } from './BSNavBarCommon.js';
 
 const subDirectory = import.meta.env.ENV_BASE_URL;
 const commonUrl = import.meta.env.ENV_COMMON_BASE_URL;
@@ -238,27 +239,12 @@ const BSNavbar2 = () => {
     (item) =>
       item.SettingIdName === 'VerifyProduct' && item?.SettingValue === 'Y'
   );
+    const {
+      handleFullscreen, 
+      isFullscreen,
+    } = useNavbarCommon();
+
 
-  const [isFullscreen, setIsFullscreen] = useState(false);
-  const handleFullscreen = useCallback(async () => {
-    if (!isFullscreen) {
-      try {
-        await document.documentElement.requestFullscreen();
-        setIsFullscreen(true);
-      } catch (error) {
-        console.error('Fullscreen error:', error);
-      }
-    } else {
-      try {
-        if (document.fullscreenElement) {
-          await document.exitFullscreen();
-        }
-        setIsFullscreen(false);
-      } catch (error) {
-        console.error('Exit fullscreen error:', error);
-      }
-    }
-  }, [isFullscreen]);
 
   useEffect(() => {
     if (!FeatureAddonData?.FeatureDtls?.length) return;

src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx

@@ -38,14 +38,7 @@ import '../../../../Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss';
 // UI Imports
 import { Badge, Popconfirm, Tooltip } from 'antd';
 import { AiFillHome } from 'react-icons/ai';
-import {
+import { FaPlus, FaHandPaper, FaUserAlt, FaParking } from 'react-icons/fa';
-  FaPlus,
-  FaHandPaper,
-  FaHeart,
-  FaUserAlt,
-  FaPhoneAlt,
-  FaParking,
-} from 'react-icons/fa';
 import { CiMenuBurger } from 'react-icons/ci';
 import { IoCloseOutline } from 'react-icons/io5';
 import {
@@ -105,6 +98,7 @@ import BSNavBarWeightScale from '../UtillComponents/BSNavBarWeightScale.jsx';
 import { TbSettingsSearch } from 'react-icons/tb';
 import { DefaultModal } from '../../../../Components/Modal/DefaultModal.jsx';
 import MultipleSearch from '../UtillComponents/MultipleSearch.jsx';
+import { useNavbarCommon } from './BSNavBarCommon.js';
 
 // Jsx Files
 const BSNavBarFavItems = lazy(
@@ -180,7 +174,6 @@ const BSNavbar3 = ({ optionNames }) => {
   const [quickAdd, setQuickAdd] = useState(false);
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-  const [isFullscreen, setIsFullscreen] = useState(false);
   const [multiple, setMultiple] = useState(false);
   const GlobEstBooking = useSelector(GlobalEstimateBooking);
   const compBranchData = useSelector(GlobalCompBranchData);
@@ -408,25 +401,7 @@ const BSNavbar3 = ({ optionNames }) => {
   const handleHomePageNavigate = () => navigate(`${subDirectory}app-page/home`);
   const handleMobileMenuToggle = () => setIsMobileMenuOpen((prev) => !prev);
 
-  const handleFullscreen = async () => {
+  const { handleFullscreen, isFullscreen } = useNavbarCommon();
-    if (!isFullscreen) {
-      try {
-        await document.documentElement.requestFullscreen();
-        setIsFullscreen(true);
-      } catch (error) {
-        console.error('Fullscreen error:', error);
-      }
-    } else {
-      try {
-        if (document.fullscreenElement) {
-          await document.exitFullscreen();
-        }
-        setIsFullscreen(false);
-      } catch (error) {
-        console.error('Exit fullscreen error:', error);
-      }
-    }
-  };
 
   const renderWithTooltip = (element, title, placement = 'bottom') => (
     <Tooltip title={title} placement={placement}>

src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx

@@ -338,9 +338,8 @@ const BSLayout1 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout1-NavBar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+             <BSNavbar1 BookingNavbar={BookingNavbar}/>
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
+     
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
           </div>
           <div
             className={

src/Pages/BookingScreen/Template/BSLayout2/BSLayout2.jsx

@@ -348,9 +348,7 @@ const BSLayout2 = () => {
             style={{ height: containerHeight, overflow: 'hidden' }}
           >
             <div className="BSLayout2-NavBar">
-              {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+              <BSNavbar1 BookingNavbar={BookingNavbar}/>
-              {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-              {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
             </div>
 
             <div

src/Pages/BookingScreen/Template/BSLayout3/BSLayout3.jsx

@@ -321,9 +321,7 @@ const BSLayout3 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout3-NavBar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+            <BSNavbar1 BookingNavbar={BookingNavbar}/>
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
           </div>
           <div
             className={

src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx

@@ -337,9 +337,7 @@ const BSLayout4 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="Bslayout4_navbar">
-            {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+           <BSNavbar1 BookingNavbar={BookingNavbar}/>
-            {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-            {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
           </div>
           {BookingNavbar != 'Navbar3' ? (
             <div className="Layout-bill-container" style={{ margin: '0' }}>

src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx

@@ -325,9 +325,7 @@ const BSLayout5 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout5-NavBar">
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar1' && <BSNavbar1 />}
+            <BSNavbar1 BookingNavbar={BookingNavbar}/>
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar2' && <BSNavbar2 />}
-            {BSLayout5Data?.BookingNavbar?.[0] == 'Navbar3' && <BSNavbar3 />}
           </div>
 
           <div

src/Pages/BookingScreen/Template/BSLayout6/BSLayout6.jsx

@@ -336,9 +336,7 @@ const BSLayout6 = () => {
         >
           <div className="BSLayout6-fullnav">
             <div className="BSLayout6-Navbar">
-              {BookingNavbar == 'Navbar1' && <BSNavbar1 />}
+             <BSNavbar1 BookingNavbar={BookingNavbar}/>
-              {BookingNavbar == 'Navbar2' && <BSNavbar2 />}
-              {BookingNavbar == 'Navbar3' && <BSNavbar3 />}
             </div>
             {BookingNavbar != 'Navbar3' ? (
               <div className="Layout-bill-container">