Merge pull request 'Navbar component Reduce the code using 1 code to show Differences' (#274) from OptimUpdate into main

Reviewed-on: Pozomind/pozo-retail-app#274

src/Pages/BookingScreen/Components/BSCombo/BSC1Payment.jsx

@@ -154,7 +154,7 @@ import {
   getDefaultPaymentOptions,
   GlobalAddCustomerDetails,
   triggerCustomerRefresh,
-  VerifiedPaymentDtl
+  VerifiedPaymentDtl,
 } from '../../../../Features/BookingScreen/Customer/addCustomer';
 import PozoHoldIcon from '../UtillComponents/Pozo retail icons/PozoHoldIcon';
 import PozoDineInIcon from '../UtillComponents/Pozo retail icons/PozoDineIn.jsx';
@@ -748,7 +748,7 @@ const BSC1Payment = (props) => {
     if (!preOrder) {
       const totalSum = OrderCardDetail?.reduce(
         // (acc, card) => acc + parseFloat(card.OrderRate * card.OrderQty || 0),
-         (acc, card) => acc + parseFloat(card.TotalAmt || 0),
+        (acc, card) => acc + parseFloat(card.TotalAmt || 0),
         0
       );
 
@@ -840,7 +840,7 @@ const BSC1Payment = (props) => {
           ? (Number(withdiscTotal) + Number(globalTipAmount)).toFixed(2)
           : (Number(Total) + Number(globalTipAmount)).toFixed(2)
       );
-console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
+      console.log(currentOrderNetAmount, totalSum, 'currentOrderNetAmount');
       setTotalAmount(
         salesBillEdit
           ? currentOrderNetAmount > previousNetAmount
@@ -875,37 +875,38 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
     OtherServiceTicketClaim,
     Discount,
   ]);
-   useEffect(() => {
+  useEffect(() => {
-  
     const fetchPrinterMapping = async () => {
       try {
-        if (UserType !== 'Super Admin'  && isMobile && MobileA4Print) {
+        if (UserType !== 'Super Admin' && isMobile && MobileA4Print) {
           const data = {
             CompId: CompId,
             BranchId: BranchId,
             AppId: AppId,
             UserId: UserId,
           };
-  // && isMobile && MobileA4Print
+          // && isMobile && MobileA4Print
-          const response = await dispatch(getPrinterMappingDetails(data)).unwrap();
+          const response = await dispatch(
+            getPrinterMappingDetails(data)
+          ).unwrap();
           if (response?.data?.statusCode === 0) {
-                handlePrintMappingClick()  
+            handlePrintMappingClick();
-            }
+          }
-          console.log(response, "printer mapping response");
+          console.log(response, 'printer mapping response');
         }
       } catch (error) {
-        console.error("Error fetching printer mapping:", error);
+        console.error('Error fetching printer mapping:', error);
       }
     };
-  
+
     fetchPrinterMapping();
     handleOtherData();
   }, []);
-   const handlePrintMappingClick = () => {
+  const handlePrintMappingClick = () => {
-      // setReprint1(true)
+    // setReprint1(true)
-      window.dispatchEvent(new Event('CLICK PRINTER MAPPING'));
+    window.dispatchEvent(new Event('CLICK PRINTER MAPPING'));
-    };
+  };
- 
+
   useEffect(() => {
     if (!preferenceshortcutkey) return;
 
@@ -2241,7 +2242,7 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
       PackageDtl: a.PackageDtl,
       ...(a?.DiscountValue && { DiscountValue: a.DiscountValue }),
       ...(a?.DiscountType && { DiscountType: a.DiscountType }),
-      ...(a?.DiscountAmt && { DiscountAmt: a.DiscountAmt })
+      ...(a?.DiscountAmt && { DiscountAmt: a.DiscountAmt }),
     }));
     const NotSlectedTypeFind = temporderdetail?.find(
       (a) => a?.BookingType != SelectedBookingType
@@ -3961,8 +3962,6 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
                         : handlePaymentMode(payment.ModeId, payment.ModeName)
                     }
                   >
-                    {/* {UpiOption === "" && payment?.ModeName?.toLowerCase() === "upi" && <p> UPI</p>} */}
-
                     <div
                       style={{
                         display: 'flex',
@@ -4426,40 +4425,42 @@ console.log(currentOrderNetAmount,totalSum,"currentOrderNetAmount")
               </>
             )}
             {/* Customer Orders */}
-            {(SelCustId && BSComboData?.BookingBilling?.[1]?.filter((item) => item.OptionName === 'PreviousBillFetch')
+            {SelCustId &&
-                .length === 1) && (
+              BSComboData?.BookingBilling?.[1]?.filter(
-              <Tooltip title="Customer Orders" isMobile={isMobile}>
+                (item) => item.OptionName === 'PreviousBillFetch'
-                {' '}
+              ).length === 1 && (
-                <div
+                <Tooltip title="Customer Orders" isMobile={isMobile}>
-                  className="BSBillingNav-icon-table-icon"
+                  {' '}
-                  onClick={() => {
+                  <div
-                    if (
+                    className="BSBillingNav-icon-table-icon"
-                      CheckBookingStatus !== 'Close' &&
+                    onClick={() => {
-                      !addnewAccess &&
+                      if (
-                      !(OrderCardDetail?.length > 0)
+                        CheckBookingStatus !== 'Close' &&
-                    ) {
+                        !addnewAccess &&
-                      setCustomerPreviesOrders(true);
+                        !(OrderCardDetail?.length > 0)
-                    }
+                      ) {
-                  }}
+                        setCustomerPreviesOrders(true);
-                  style={{
+                      }
-                    cursor: OrderCardDetail?.length > 0 && 'not-allowed',
+                    }}
-                    color:
+                    style={{
-                      OrderCardDetail?.length > 0 ||
+                      cursor: OrderCardDetail?.length > 0 && 'not-allowed',
-                      (OrderCardDetail?.length > 0 &&
+                      color:
-                        GetCustId?.CustMobile === undefined)
+                        OrderCardDetail?.length > 0 ||
-                        ? 'gray'
+                        (OrderCardDetail?.length > 0 &&
-                        : 'rgb(18, 146, 238)',
+                          GetCustId?.CustMobile === undefined)
-                    fontSize: '25px',
+                          ? 'gray'
-                    display: 'flex',
+                          : 'rgb(18, 146, 238)',
-                    alignItems: 'center',
+                      fontSize: '25px',
-                    height: '2.46rem',
+                      display: 'flex',
-                    width: '1.5rem',
+                      alignItems: 'center',
-                  }}
+                      height: '2.46rem',
-                >
+                      width: '1.5rem',
-                  <FaCartPlus />
+                    }}
-                </div>
+                  >
-              </Tooltip>
+                    <FaCartPlus />
-            )}
+                  </div>
+                </Tooltip>
+              )}
             {preOrderOpen && <BSNavBarPreOrder />}
             {sportsAppPreference && <BSMembership />}
             {dinePreference &&

src/Pages/BookingScreen/Components/BSItemCards/BSItemCard.jsx

@@ -162,6 +162,8 @@ export function SortableCard({ id, children, item }) {
 
 const BSItemCard = (props) => {
   const cardFunction = props?.cardFunctionality;
+  const { connectingState = null, setConnectingState = () => {} } = props;
+  console.log(connectingState?.positionChange, 'positionChange');
   // const applyOffer = useApplyOfferto_CardDetail();
   const preferenceDatas = useSelector(PreferenceData, shallowEqual);
   const { selectedDate } = useDateStore();
@@ -6106,7 +6108,8 @@ const BSItemCard = (props) => {
             }}
             style={{
               position: 'absolute',
-              zIndex: '12',
+              // zIndex: '12',
+              zIndex: connectingState?.positionChange ? '0' : '20',
               top:
                 templateData?.BookingNavbar?.[0] === 'Navbar3' &&
                 templateData?.BookingLayout?.[0] === 'Layout3'

src/Pages/BookingScreen/Components/BookingFunctionality/FeaturesFunctionalities.jsx

@@ -587,7 +587,7 @@ const FeaturesFunctionalities = (props) => {
   ];
   useEffect(() => {
     setWeightScale(props.WeightScale);
-  }, [props.WeightScale]); 
+  }, [props.WeightScale]);
   const ExtTabledata = async () => {
     const data = {
       CompId: CompId,
@@ -1652,6 +1652,10 @@ const FeaturesFunctionalities = (props) => {
       }
       formRef.current?.setFieldsValue(response?.data?.data?.[0]);
 
+      if (response?.data?.data?.[0]?.Gender) {
+        setGender(response?.data?.data?.[0]?.Gender);
+      }
+
       if (response?.data?.data?.[0]?.InitialOutStanding) {
         setInitialOutStandingType(
           response?.data?.data?.[0]?.InitialOutStanding
@@ -2978,7 +2982,7 @@ const FeaturesFunctionalities = (props) => {
                           },
                           {
                             validator: async (_, value) => {
-                              await validateSafeInput(value); // To block HTML tags & SQL keywords
+                              await validateSafeInput(value);
                               return Promise.resolve();
                             },
                           },
@@ -3021,6 +3025,7 @@ const FeaturesFunctionalities = (props) => {
                           }
                         />
                       </Form.Item>
+
                       <Form.Item name={'Gender'}>
                         <RadioGrpButton
                           Header={'Gender'}
@@ -3028,7 +3033,6 @@ const FeaturesFunctionalities = (props) => {
                             { label: 'Male', value: 'M' },
                             { label: 'Female', value: 'F' },
                           ]}
-                          // value={formRef.current?.getFieldsValue()?.Gender}
                           defaultSelect={gender}
                           onSelectFuntion={(e) => {
                             setGender(e);
@@ -3036,6 +3040,7 @@ const FeaturesFunctionalities = (props) => {
                           }}
                         />
                       </Form.Item>
+
                       <Form.Item name={'AadhaarNo'}>
                         <InputField
                           label={'Aadhaar No'}
@@ -3075,22 +3080,7 @@ const FeaturesFunctionalities = (props) => {
                       </div>
                     </div>
                   </div>
-                  {/* <p
+
-                    onClick={handleToggle}
-                    style={{
-                      fontSize: '13px',
-                      cursor: 'pointer',
-                      padding: '1rem 0.3rem',
-                      display: 'flex',
-                      // alignItems: "center",
-                      flexDirection: 'row',
-                      columnGap: '0.3rem',
-                    }}
-                  >
-                    {' '}
-                    {isOpen ? 'More info close' : 'More info open'}{' '}
-                    <AiOutlineDownCircle />
-                  </p> */}
                   <p
                     style={{
                       fontSize: '13px',
@@ -3516,7 +3506,9 @@ const FeaturesFunctionalities = (props) => {
                                   borderRadius: '6px',
                                   cursor: 'pointer',
                                   marginTop: '8px',
-                                  fontWeight: '500',
+                                  fontWeight: '400',
+                                  fontFamily: 'Poppins',
+                                  fontSize: '12px',
                                 }}
                               >
                                 {editingIndex !== null
@@ -3984,10 +3976,6 @@ const FeaturesFunctionalities = (props) => {
                             option?.BookingTypeName +
                             ' ' +
                             option?.SinglePc,
-                          // label: option.Type === 'P'  ? option.ProdVariantName !== 'Variant 1'
-                          // ? `${option?.ProdName} (${option.Size} ${option.UomName}) (${option.ProdVariantName}${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''})`
-                          //   : `${option?.ProdName} (${option.Size} ${option.UomName}) ${BookingTypeBoth ? ` (${option?.BookingTypeName})` : ''}`
-                          //   : `${option?.ProdName} (1 Combo)`
                           label:
                             option.Type === 'P'
                               ? option.ProdVariantName !== 'Variant 1'

src/Pages/BookingScreen/Components/UtillComponents/BSNavBarSearch.jsx

@@ -392,7 +392,7 @@ const BSNavBarSearch = (props) => {
   }, []);
 
   return (
-    <div>
+    <div className="BSNavBarSearchMaster">
       <Messages
         messageData={messageData}
         messageType={messageType}
@@ -416,16 +416,16 @@ const BSNavBarSearch = (props) => {
             value={searchDataFocus}
             ref={searchInputRef}
             className="custom-input"
-            placeholder="Search (SHIFT + S)"
+            placeholder={
+              isMobile && screenWidth <= 768
+                ? 'SHIFT + S'
+                : 'Search (SHIFT + S)'
+            }
             onChange={(e) => searchdata(e?.target?.value)}
             onBlur={handleBlur}
             disabled={props.OrderType === 'Failed' ? true : false}
           />
           {isMobile && screenWidth <= 768 ? (
-            // <BiBarcodeReader
-            //   className="search-icon"
-            //   onClick={() => handleQrcode()}
-            // />
             <BarCodeScan
               onScan={(value) => {
                 searchdata(value);

src/Pages/BookingScreen/Components/UtillComponents/BSNavBarWholeSale.jsx

@@ -1,72 +1,83 @@
 import { useDispatch, useSelector } from 'react-redux';
-import { GlobalRetailWSSalesType, changeRetailWSSalesType } from '../../../../Features/BookingScreen/BookingData/BookingData';
+import {
-import { MdAddShoppingCart } from "react-icons/md";
+  GlobalRetailWSSalesType,
-import { FaBoxes } from "react-icons/fa";
+  changeRetailWSSalesType,
+} from '../../../../Features/BookingScreen/BookingData/BookingData';
+import { MdAddShoppingCart } from 'react-icons/md';
+import { FaBoxes } from 'react-icons/fa';
 import { useEffect } from 'react';
 
- 
+const BSNavBarWholeSale = ({
+  drawerOpen = false,
+  setDrawerOpen = () => {},
+}) => {
+  const dispatch = useDispatch();
+  const SaleType = useSelector(GlobalRetailWSSalesType);
+  const isWholesale = SaleType === 'W';
 
-const BSNavBarWholeSale = ({ drawerOpen = false, setDrawerOpen = () => { } }) => {
+  const toggleSaleType = () => {
-    const dispatch = useDispatch();
+    dispatch(changeRetailWSSalesType(isWholesale ? 'R' : 'W'));
-    const SaleType = useSelector(GlobalRetailWSSalesType);
+  };
-    const isWholesale = SaleType === 'W';
 
-    const toggleSaleType = () => {
+  const btnStyle = {
-        dispatch(changeRetailWSSalesType(isWholesale ? 'R' : 'W'));
+    width: '30px',
-    };
+    height: '30px',
+    borderRadius: '6px',
+    backgroundColor: isWholesale ? '#45ca00' : '#1292ee',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    padding: '10px',
+    color: '#fff',
+  };
 
-    const btnStyle = {
+  const iconStyle = {
-        width: '33px',
+    fontSize: '17px',
-        height: '33px',
+    color: 'white',
-        borderRadius: '8px',
+    display: 'flex',
-        backgroundColor: isWholesale ? '#22c55e' : '#3b82f6',
+  };
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        position: 'relative',
-        border: 'none',
-        outline: 'none',
-        cursor: 'pointer',
-        padding:"10px",
-    };
 
-    const iconStyle = {
+  const badgeStyle = {
-        fontSize: '16px',
+    position: 'absolute',
-        color: 'white',
+    top: '-2px',
-        display : 'flex',
+    right: '-10px',
-    };
+    backgroundColor: isWholesale ? '#3bb100' : '#0078ce',
+    color: 'white',
+    fontSize: '11px',
+    fontWeight: '500',
+    borderRadius: '9999px',
+    width: '20px',
+    height: '20px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontFamily: 'Poppins',
+    color: '#fff',
+  };
 
-    const badgeStyle = {
+  useEffect(() => {
-        position: 'absolute',
+    if (drawerOpen?.wholesale) {
-        top: '-2px',
+      toggleSaleType();
-        right: '-10px',
+      setDrawerOpen((prev) => ({ ...prev, wholesale: false }));
-        backgroundColor: isWholesale ? '#15803d' : '#1e40af',
+    }
-        color: 'white',
+  }, [drawerOpen?.wholesale]);
-        fontSize: '12px',
-        fontWeight: 'bold',
-        borderRadius: '9999px',
-        width: '20px',
-        height: '20px',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-    };
 
-    useEffect(() => {
+  return (
-        if (drawerOpen?.wholesale) {
+    <button
-            toggleSaleType();
+      className="WholesaleretialChangeIcon"
-            setDrawerOpen(prev => ({ ...prev, wholesale: false }));
+      onClick={toggleSaleType}
-        }
+      style={btnStyle}
-    }, [drawerOpen?.wholesale])
+    >
-
+      <span style={iconStyle}>
-    return (
+        {isWholesale ? <FaBoxes /> : <MdAddShoppingCart />}
-        <button className='WholesaleretialChangeIcon' onClick={toggleSaleType} style={btnStyle}>
+      </span>
-            <span style={iconStyle}>
+      <span style={badgeStyle}>{SaleType}</span>
-                {isWholesale ? <FaBoxes/> : <MdAddShoppingCart />}
+    </button>
-            </span>
+  );
-            <span style={badgeStyle}>{SaleType}</span>
-        </button>
-    );
 };
 
 export default BSNavBarWholeSale;

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

@@ -101,10 +101,10 @@ const ComboSalesBillTable = lazy(
   () =>
     import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx')
 );
-const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx')); 
+const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx'));
 // const PlanExpireNotification = lazy(() => import('../PlanExpireNotification.jsx'));
 import PlanExpireNotification from '../PlanExpireNotification.jsx';
- 
+
 const BSLayout1 = () => {
   const dispatch = useDispatch();
 
@@ -147,6 +147,7 @@ const BSLayout1 = () => {
   const BookingBilling = BSLayout1Data?.BookingBilling?.[0];
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
+  const [connectingState, setConnectingState] = useState({});
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [screenHeight, setScreenHeight] = useState(window.innerHeight);
   const [Kioskopen, setKioskopen] = useState(false);
@@ -317,9 +318,9 @@ const BSLayout1 = () => {
   };
   const handleInvoiceClose = () => {
     setListOfInvoices(false);
-  }; 
+  };
-  return ( 
+  return (
-      <Suspense fallback={<CardSkeleton />}>
+    <Suspense fallback={<CardSkeleton />}>
       <>
         <Messages
           messageType={messageType}
@@ -338,8 +339,11 @@ const BSLayout1 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout1-NavBar">
-             <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
-     
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
           <div
             className={
@@ -349,176 +353,167 @@ const BSLayout1 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
+            <div
+              className="Layout-bill-container"
+              style={{ marginTop: '12px' }}
+            >
               <div
-                className="Layout-bill-container"
+                className="Layout-bill-Subcontainer"
-                style={{ marginTop: '12px' }}
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
               >
-                <div
+                {UserType !== 'Employee' && (
-                  className="Layout-bill-Subcontainer"
+                  <div className="pricing-name-details">
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                    {PricingAppPricingName?.[0]?.PricingName +
-                >
+                      ' / ' +
-                  {UserType !== 'Employee' && (
+                      PricingAppPricingName?.[0]?.Type}
-                    <div className="pricing-name-details">
+                  </div>
-                      {PricingAppPricingName?.[0]?.PricingName +
+                )}
-                        ' / ' +
+                {AvailableDate && (
-                        PricingAppPricingName?.[0]?.Type}
+                  <div
-                    </div>
+                    style={{
-                  )}
+                      padding: '3px 5px',
-                  {AvailableDate && (
+                      marginLeft: '1rem',
+                    }}
+                  >
+                    <DatePicker
+                      disabledDate={disablePastDates}
+                      // defaultValue={moment()} // today’s date
+                      format="DD-MMM-YYYY"
+                      value={selectedDate ? dayjs(selectedDate) : null}
+                      onChange={(date) => setSelectedDate(date)}
+                    />
+                  </div>
+                )}
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
+                  />
+                )}
+                {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  (item) =>
+                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                ) &&
+                  !sportsAppPreference && (
                     <div
                       style={{
-                        padding: '3px 5px',
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                        marginLeft: '1rem',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
                       }}
                     >
-                      <DatePicker
+                      {!OtherServicesglobal && (
-                        disabledDate={disablePastDates}
+                        <Tooltip title={'Kiosk Sales'}>
-                        // defaultValue={moment()} // today’s date
+                          <Badge
-                        format="DD-MMM-YYYY"
+                            count={badgeCount}
-                        value={selectedDate ? dayjs(selectedDate) : null}
+                            offset={[-10, 3]}
-                        onChange={(date) => setSelectedDate(date)}
+                            size="small"
+                          >
+                            <PozoKioskIcon
+                              onClick={() => openModalKiosk()}
+                              style={{
+                                cursor: 'pointer',
+                                fontSize: '1.5rem',
+                              }}
+                              className="iconsize"
+                            />
+                          </Badge>
+                        </Tooltip>
+                      )}
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
                       />
                     </div>
                   )}
-                  {!OtherServicesglobal && (
+                {!OtherServicesglobal && (
-                    <SalesCountComponent
+                  <>
-                      DineInAccess={DineInAccess}
+                    <div>
-                      GlobalsalesDetailData={GlobalsalesDetailData}
+                      {CheckBookingStatus == 'Open' ? (
-                    />
+                        <div style={{ marginLeft: '10px' }}>
-                  )}
+                          <TooltipWrapper
-                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                            title={'Booking Close'}
-                    (item) =>
+                            isMobile={isMobile}
-                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                          >
-                  ) &&
+                            {' '}
-                    !sportsAppPreference && (
+                            <BookingCloseIcon
-                      <div
+                              onClick={OpenBookingModal}
-                        style={{
+                              bgFill={'#52c41a'}
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                              style={{
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                                fontSize: '16px',
-                        }}
+                                marginTop: '4px',
-                      >
+                                color: '#52c41a',
-                        {!OtherServicesglobal && (
+                                cursor: 'pointer',
-                          <Tooltip title={'Kiosk Sales'}>
+                              }}
-                            <Badge
+                            />
-                              count={badgeCount}
+                          </TooltipWrapper>
-                              offset={[-10, 3]}
+                        </div>
-                              size="small"
+                      ) : (
-                            >
+                        <div style={{ marginLeft: '10px' }}>
-                              <PozoKioskIcon
+                          <TooltipWrapper
-                                onClick={() => openModalKiosk()}
+                            title="Booking Open"
-                                style={{
+                            isMobile={isMobile}
-                                  cursor: 'pointer',
+                          >
-                                  fontSize: '1.5rem',
+                            <Popconfirm
-                                }}
+                              placement="leftTop"
-                                className="iconsize"
-                              />
-                            </Badge>
-                          </Tooltip>
-                        )}
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
-                    >
-                      {' '}
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <>
-                      <div>
-                        {CheckBookingStatus == 'Open' ? (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
-                              title={'Booking Close'}
-                              isMobile={isMobile}
-                            >
-                              {' '}
-                              <BookingCloseIcon
-                                onClick={OpenBookingModal}
-                                bgFill={'#52c41a'}
-                                style={{
-                                  fontSize: '16px',
-                                  marginTop: '4px',
-                                  color: '#52c41a',
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            </TooltipWrapper>
-                          </div>
-                        ) : (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
                               title="Booking Open"
-                              isMobile={isMobile}
+                              description="Are you sure you want to Open the sales?"
+                              okText="Yes"
+                              cancelText="No"
+                              onConfirm={() => BookingOpenFun('Open')}
                             >
-                              <Popconfirm
+                              <span>
-                                placement="leftTop"
+                                <BookingCloseIcon
-                                title="Booking Open"
+                                  bgFill="red"
-                                description="Are you sure you want to Open the sales?"
+                                  style={{
-                                okText="Yes"
+                                    fontSize: '16px',
-                                cancelText="No"
+                                    marginTop: '4px',
-                                onConfirm={() => BookingOpenFun('Open')}
+                                    color: '#52c41a',
-                              >
+                                    cursor: 'pointer',
-                                <span>
+                                  }}
-                                  <BookingCloseIcon
+                                />
-                                    bgFill="red"
+                              </span>
-                                    style={{
+                            </Popconfirm>
-                                      fontSize: '16px',
+                          </TooltipWrapper>
-                                      marginTop: '4px',
+                        </div>
-                                      color: '#52c41a',
+                      )}
-                                      cursor: 'pointer',
+                    </div>
-                                    }}
+                    <div style={{ marginLeft: '10px' }}>
-                                  />
+                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                                </span>
+                        {''}
-                              </Popconfirm>
+                        <BSEwayBillicon
-                            </TooltipWrapper>
+                          style={{ cursor: 'pointer', marginTop: '5px' }}
-                          </div>
+                          onClick={OpenListOfInvoices}
-                        )}
+                        />
-                      </div>
+                      </TooltipWrapper>
-                      <div style={{ marginLeft: '10px' }}>
+                    </div>
-                        <TooltipWrapper
+                  </>
-                          title={'E-way Bill'}
+                )}
-                          isMobile={isMobile}
-                        >
-                          {''}
-                          <BSEwayBillicon
-                            style={{ cursor: 'pointer', marginTop: '5px' }}
-                            onClick={OpenListOfInvoices}
-                          />
-                        </TooltipWrapper>
-                      </div>
-                    </>
-                  )}
-                </div>
               </div>
-            ) : (
+            </div>
-              <SalesCountForStandard
+
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
             <div className="BSLayout1-ContentDiv">
               <div className="BSCategory1-Contentcont">
                 <div
@@ -587,6 +582,8 @@ const BSLayout1 = () => {
                         />
                       ) : (
                         <BSItemCard
+                          connectingState={connectingState}
+                          setConnectingState={setConnectingState}
                           screenHeight={screenHeight}
                           cardFunctionality={dynamicComponentProps(
                             'Card',
@@ -670,7 +667,7 @@ const BSLayout1 = () => {
           />
         )}
       </>
-     </Suspense> 
+    </Suspense>
   );
 };
 

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

@@ -168,6 +168,7 @@ const BSLayout2 = () => {
   const [messageType, setMessageType] = useState(null);
   const [messageData, setMessageData] = useState(null);
   const [popOverOpen, setPopOverOpen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const BookingStatus = useSelector(GlobalBookingStatus);
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -348,7 +349,11 @@ const BSLayout2 = () => {
             style={{ height: containerHeight, overflow: 'hidden' }}
           >
             <div className="BSLayout2-NavBar">
-              <BSNavbar1 BookingNavbar={BookingNavbar}/>
+              <BSNavbar1
+                BookingNavbar={BookingNavbar}
+                connectingState={connectingState}
+                setConnectingState={setConnectingState}
+              />
             </div>
 
             <div
@@ -357,169 +362,160 @@ const BSLayout2 = () => {
                 BookingNavbar != 'Navbar3' ? 'BSLayout2Standard' : 'BSLayout2'
               }
             >
-              {BookingNavbar != 'Navbar3' ? (
+              <div
+                className="Layout-bill-container"
+                style={{ marginTop: '9px' }}
+              >
                 <div
-                  className="Layout-bill-container"
+                  className="Layout-bill-Subcontainer"
-                  style={{ marginTop: '9px' }}
+                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
                 >
-                  <div
+                  {UserType !== 'Employee' && (
-                    className="Layout-bill-Subcontainer"
+                    <div className="pricing-name-details">
-                    style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                      {PricingAppPricingName?.[0]?.PricingName +
-                  >
+                        ' / ' +
-                    {UserType !== 'Employee' && (
+                        PricingAppPricingName?.[0]?.Type}
-                      <div className="pricing-name-details">
+                    </div>
-                        {PricingAppPricingName?.[0]?.PricingName +
+                  )}
-                          ' / ' +
+                  {!OtherServicesglobal && (
-                          PricingAppPricingName?.[0]?.Type}
+                    <Suspense fallback={null}>
+                      <SalesCountComponent
+                        DineInAccess={DineInAccess}
+                        GlobalsalesDetailData={GlobalsalesDetailData}
+                        BookingNavbar={BookingNavbar}
+                      />
+                    </Suspense>
+                  )}
+                  {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                    !sportsAppPreference && (
+                      <div
+                        style={{
+                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                        }}
+                      >
+                        {!OtherServicesglobal && (
+                          <Tooltip title={'Kiosk Sales'}>
+                            <Badge
+                              count={badgeCount}
+                              offset={[-10, 3]}
+                              size="small"
+                            >
+                              <PozoKioskIcon
+                                onClick={() => openModalKiosk()}
+                                style={{
+                                  cursor: 'pointer',
+                                  fontSize: '1.5rem',
+                                }}
+                                className="iconsize"
+                              />
+                            </Badge>
+                          </Tooltip>
+                        )}
                       </div>
                     )}
-                    {!OtherServicesglobal && (
+                  {!OtherServicesglobal && (
+                    <TooltipWrapper
+                      title={'Low Stock Alerts'}
+                      isMobile={isMobile}
+                    >
+                      {' '}
                       <Suspense fallback={null}>
-                        <SalesCountComponent
+                        <BSExpireProductsList />
-                          DineInAccess={DineInAccess}
-                          GlobalsalesDetailData={GlobalsalesDetailData}
-                        />
                       </Suspense>
-                    )}
+                    </TooltipWrapper>
-                    {SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  )}
-                      (item) =>
+                  {Kioskopen && (
-                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                    <Suspense fallback={null}>
-                    ) &&
+                      <BSKioskCounterPayment
-                      !sportsAppPreference && (
+                        Kioskopen={Kioskopen}
-                        <div
+                        closeKioskModal={closeModalKiosk}
-                          style={{
+                      />
-                            pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                    </Suspense>
-                            opacity: OrderStatus > 0 ? 0.5 : 1,
+                  )}
-                          }}
-                        >
-                          {!OtherServicesglobal && (
-                            <Tooltip title={'Kiosk Sales'}>
-                              <Badge
-                                count={badgeCount}
-                                offset={[-10, 3]}
-                                size="small"
-                              >
-                                <PozoKioskIcon
-                                  onClick={() => openModalKiosk()}
-                                  style={{
-                                    cursor: 'pointer',
-                                    fontSize: '1.5rem',
-                                  }}
-                                  className="iconsize"
-                                />
-                              </Badge>
-                            </Tooltip>
-                          )}
-                        </div>
-                      )}
-                    {!OtherServicesglobal && (
-                      <TooltipWrapper
-                        title={'Low Stock Alerts'}
-                        isMobile={isMobile}
-                      >
-                        {' '}
-                        <Suspense fallback={null}>
-                          <BSExpireProductsList />
-                        </Suspense>
-                      </TooltipWrapper>
-                    )}
-                    {Kioskopen && (
-                      <Suspense fallback={null}>
-                        <BSKioskCounterPayment
-                          Kioskopen={Kioskopen}
-                          closeKioskModal={closeModalKiosk}
-                        />
-                      </Suspense>
-                    )}
 
-                    {SAdminuserPin?.length > 0 &&
+                  {SAdminuserPin?.length > 0 &&
-                      UserType != 'Super Admin User' && (
+                    UserType != 'Super Admin User' && (
-                        <Suspense fallback={null}>
+                      <Suspense fallback={null}>
-                          <div>
+                        <div>
-                            <SAdminUserNotification
+                          <SAdminUserNotification
-                              SAdminuserPin={SAdminuserPin}
+                            SAdminuserPin={SAdminuserPin}
-                              popOverOpen={popOverOpen}
+                            popOverOpen={popOverOpen}
-                              handleSupportUser={handleSupportUser}
+                            handleSupportUser={handleSupportUser}
-                              handlePopOverOpen={handlePopOverOpen}
+                            handlePopOverOpen={handlePopOverOpen}
-                            />
+                          />
-                          </div>
+                        </div>
-                        </Suspense>
+                      </Suspense>
-                      )}
+                    )}
-                    {!OtherServicesglobal && (
+                  {!OtherServicesglobal && (
-                      <>
+                    <>
-                        {CheckBookingStatus == 'Open' ? (
+                      {CheckBookingStatus == 'Open' ? (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
-                              title={'Booking Close'}
-                              isMobile={isMobile}
-                            >
-                              {' '}
-                              <BookingCloseIcon
-                                onClick={OpenBookingModal}
-                                bgFill={'#52c41a'}
-                                style={{
-                                  fontSize: '16px',
-                                  marginTop: '4px',
-                                  color: '#52c41a',
-                                  cursor: 'pointer',
-                                }}
-                              />
-                            </TooltipWrapper>
-                          </div>
-                        ) : (
-                          <div style={{ marginLeft: '10px' }}>
-                            <TooltipWrapper
-                              title="Booking Open"
-                              isMobile={isMobile}
-                            >
-                              <Popconfirm
-                                placement="leftTop"
-                                title="Booking Open"
-                                description="Are you sure you want to Open the sales?"
-                                okText="Yes"
-                                cancelText="No"
-                                onConfirm={() => BookingOpenFun('Open')}
-                              >
-                                <span>
-                                  <BookingCloseIcon
-                                    bgFill="red"
-                                    style={{
-                                      fontSize: '16px',
-                                      marginTop: '4px',
-                                      color: '#52c41a',
-                                      cursor: 'pointer',
-                                    }}
-                                  />
-                                </span>
-                              </Popconfirm>
-                            </TooltipWrapper>
-                          </div>
-                        )}
                         <div style={{ marginLeft: '10px' }}>
                           <TooltipWrapper
-                            title={'E-way Bill'}
+                            title={'Booking Close'}
                             isMobile={isMobile}
                           >
-                            {''}
+                            {' '}
-                            <BSEwayBillicon
+                            <BookingCloseIcon
-                              style={{ cursor: 'pointer', marginTop: '5px' }}
+                              onClick={OpenBookingModal}
-                              onClick={OpenListOfInvoices}
+                              bgFill={'#52c41a'}
+                              style={{
+                                fontSize: '16px',
+                                marginTop: '4px',
+                                color: '#52c41a',
+                                cursor: 'pointer',
+                              }}
                             />
                           </TooltipWrapper>
                         </div>
-                      </>
+                      ) : (
-                    )}
+                        <div style={{ marginLeft: '10px' }}>
-                  </div>
+                          <TooltipWrapper
+                            title="Booking Open"
+                            isMobile={isMobile}
+                          >
+                            <Popconfirm
+                              placement="leftTop"
+                              title="Booking Open"
+                              description="Are you sure you want to Open the sales?"
+                              okText="Yes"
+                              cancelText="No"
+                              onConfirm={() => BookingOpenFun('Open')}
+                            >
+                              <span>
+                                <BookingCloseIcon
+                                  bgFill="red"
+                                  style={{
+                                    fontSize: '16px',
+                                    marginTop: '4px',
+                                    color: '#52c41a',
+                                    cursor: 'pointer',
+                                  }}
+                                />
+                              </span>
+                            </Popconfirm>
+                          </TooltipWrapper>
+                        </div>
+                      )}
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'E-way Bill'}
+                          isMobile={isMobile}
+                        >
+                          {''}
+                          <BSEwayBillicon
+                            style={{ cursor: 'pointer', marginTop: '5px' }}
+                            onClick={OpenListOfInvoices}
+                          />
+                        </TooltipWrapper>
+                      </div>
+                    </>
+                  )}
                 </div>
-              ) : (
+              </div>
-                <Suspense fallback={null}>
-                  <SalesCountForStandard
-                    PricingAppPricingName={PricingAppPricingName}
-                    DineInAccess={DineInAccess}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
-                  />
-                </Suspense>
-              )}
 
               <div
                 className="BsLayout2-ContentDiv"
@@ -582,6 +578,8 @@ const BSLayout2 = () => {
                         />
                       ) : (
                         <BSItemCard
+                          connectingState={connectingState}
+                          setConnectingState={setConnectingState}
                           cardFunctionality={dynamicComponentProps(
                             'Card',
                             BSLayout2Data?.BookingCard?.[1],

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

@@ -112,8 +112,6 @@ const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2'));
 import '../../../../Styles/BookingScreen/Template/BSLayout3/BSLayout3.scss';
 import CardSkeleton from '../../../../Components/Skeleton/CardSkeleton.jsx';
 
-
-
 const BSLayout3 = () => {
   const dispatch = useDispatch();
   const { action, selectedProducts } = useSelector(
@@ -168,6 +166,7 @@ const BSLayout3 = () => {
       (i) => i.SettingIdName === 'DineIn'
     )?.[0];
   }, [SettingDataSelector]);
+  const [connectingState, setConnectingState] = useState({});
   const [ListOfInvoices, setListOfInvoices] = useState(false);
   const AppId = SessionData?.AppId;
   const CompId = SessionData?.CompId;
@@ -321,7 +320,11 @@ const BSLayout3 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout3-NavBar">
-            <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
           <div
             className={
@@ -331,156 +334,149 @@ const BSLayout3 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
+            <div className="Layout-bill-container" style={{ marginTop: '9px' }}>
               <div
-                className="Layout-bill-container"
+                className="Layout-bill-Subcontainer"
-                style={{ marginTop: '9px' }}
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
               >
-                <div
+                {UserType !== 'Employee' && (
-                  className="Layout-bill-Subcontainer"
+                  <div className="pricing-name-details">
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+                    {PricingAppPricingName?.[0]?.PricingName +
-                >
+                      ' / ' +
-                  {UserType !== 'Employee' && (
+                      PricingAppPricingName?.[0]?.Type}
-                    <div className="pricing-name-details">
+                  </div>
-                      {PricingAppPricingName?.[0]?.PricingName +
+                )}
-                        ' / ' +
+                {!OtherServicesglobal && (
-                        PricingAppPricingName?.[0]?.Type}
+                  <SalesCountComponent
-                    </div>
+                    DineInAccess={DineInAccess}
-                  )}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
-                  {!OtherServicesglobal && (
+                    BookingNavbar={BookingNavbar}
-                    <SalesCountComponent
+                  />
-                      DineInAccess={DineInAccess}
+                )}
-                      GlobalsalesDetailData={GlobalsalesDetailData}
+                {!OtherServicesglobal &&
-                    />
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                  )}
+                    (item) =>
-                  {!OtherServicesglobal &&
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  ) &&
-                      (item) =>
+                  !sportsAppPreference && (
-                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                    <div
-                    ) &&
+                      style={{
-                    !sportsAppPreference && (
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                      <div
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
-                        style={{
+                      }}
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
-                        }}
-                      >
-                        <Tooltip title={'Kiosk Sales'}>
-                          {''}
-                          <Badge
-                            count={badgeCount}
-                            offset={[-10, 3]}
-                            size="small"
-                          >
-                            <PozoKioskIcon
-                              onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                              className="iconsize"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
                     >
-                      {' '}
+                      <Tooltip title={'Kiosk Sales'}>
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {!OtherServicesglobal && Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-
-                  {!OtherServicesglobal && (
-                    <>
-                      {' '}
-                      {CheckBookingStatus == 'Open' ? (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title={'Booking Close'}
-                            isMobile={isMobile}
-                          >
-                            {' '}
-                            <BookingCloseIcon
-                              onClick={OpenBookingModal}
-                              bgFill={'#52c41a'}
-                              style={{
-                                fontSize: '16px',
-                                marginTop: '4px',
-                                color: '#52c41a',
-                                cursor: 'pointer',
-                              }}
-                            />
-                            {/* <button className="BookingCloseButton"
-                                                    onClick={OpenBookingModal}>Booking Close</button> */}
-                          </TooltipWrapper>
-                        </div>
-                      ) : (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title="Booking Open"
-                            isMobile={isMobile}
-                          >
-                            <Popconfirm
-                              placement="leftTop"
-                              title="Booking Open"
-                              description="Are you sure you want to Open the sales?"
-                              okText="Yes"
-                              cancelText="No"
-                              onConfirm={() => BookingOpenFun('Open')}
-                            >
-                              <span>
-                                <BookingCloseIcon
-                                  bgFill="red"
-                                  style={{
-                                    fontSize: '16px',
-                                    marginTop: '4px',
-                                    color: '#52c41a',
-                                    cursor: 'pointer',
-                                  }}
-                                />
-                              </span>
-                            </Popconfirm>
-                          </TooltipWrapper>
-                        </div>
-                      )}{' '}
-                    </>
-                  )}
-                  {!OtherServicesglobal && (
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                         {''}
-                        <BSEwayBillicon
+                        <Badge
-                          style={{ cursor: 'pointer', marginTop: '5px' }}
+                          count={badgeCount}
-                          onClick={OpenListOfInvoices}
+                          offset={[-10, 3]}
-                        />
+                          size="small"
-                      </TooltipWrapper>
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
                     </div>
                   )}
-                </div>
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {!OtherServicesglobal && Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+
+                {!OtherServicesglobal && (
+                  <>
+                    {' '}
+                    {CheckBookingStatus == 'Open' ? (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'Booking Close'}
+                          isMobile={isMobile}
+                        >
+                          {' '}
+                          <BookingCloseIcon
+                            onClick={OpenBookingModal}
+                            bgFill={'#52c41a'}
+                            style={{
+                              fontSize: '16px',
+                              marginTop: '4px',
+                              color: '#52c41a',
+                              cursor: 'pointer',
+                            }}
+                          />
+                          {/* <button className="BookingCloseButton"
+                                                    onClick={OpenBookingModal}>Booking Close</button> */}
+                        </TooltipWrapper>
+                      </div>
+                    ) : (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title="Booking Open"
+                          isMobile={isMobile}
+                        >
+                          <Popconfirm
+                            placement="leftTop"
+                            title="Booking Open"
+                            description="Are you sure you want to Open the sales?"
+                            okText="Yes"
+                            cancelText="No"
+                            onConfirm={() => BookingOpenFun('Open')}
+                          >
+                            <span>
+                              <BookingCloseIcon
+                                bgFill="red"
+                                style={{
+                                  fontSize: '16px',
+                                  marginTop: '4px',
+                                  color: '#52c41a',
+                                  cursor: 'pointer',
+                                }}
+                              />
+                            </span>
+                          </Popconfirm>
+                        </TooltipWrapper>
+                      </div>
+                    )}{' '}
+                  </>
+                )}
+                {!OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      {''}
+                      <BSEwayBillicon
+                        style={{ cursor: 'pointer', marginTop: '5px' }}
+                        onClick={OpenListOfInvoices}
+                      />
+                    </TooltipWrapper>
+                  </div>
+                )}
               </div>
-            ) : (
+            </div>
-              <>
+
-                <SalesCountForStandard />
-              </>
-            )}
             <div
               className="BsLayout3-ContentDiv"
               style={{
@@ -542,6 +538,8 @@ const BSLayout3 = () => {
                 >
                   {!OtherServicesglobal && Comboglobal === false && (
                     <BSItemCard
+                      connectingState={connectingState}
+                      setConnectingState={setConnectingState}
                       cardFunctionality={dynamicComponentProps(
                         'Card',
                         BookingCard?.[1],
@@ -623,7 +621,7 @@ const BSLayout3 = () => {
           />
         )}
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 

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

@@ -170,6 +170,7 @@ const BSLayout4 = () => {
   );
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [Kioskopen, setKioskopen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const BookingStatus = useSelector(GlobalBookingStatus);
   const CheckBookingStatus =
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
@@ -337,91 +338,111 @@ const BSLayout4 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="Bslayout4_navbar">
-           <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+              BookingNavbar={BookingNavbar}
+            />
           </div>
-          {BookingNavbar != 'Navbar3' ? (
+
-            <div className="Layout-bill-container" style={{ margin: '0' }}>
+          <div className="Layout-bill-container" style={{ margin: '0' }}>
-              <div
+            <div
-                className="Layout-bill-Subcontainer"
+              className="Layout-bill-Subcontainer"
-                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-              >
+            >
-                {UserType !== 'Employee' && (
+              {UserType !== 'Employee' && (
-                  <div className="pricing-name-details">
+                <div className="pricing-name-details">
-                    {PricingAppPricingName?.[0]?.PricingName +
+                  {PricingAppPricingName?.[0]?.PricingName +
-                      ' / ' +
+                    ' / ' +
-                      PricingAppPricingName?.[0]?.Type}
+                    PricingAppPricingName?.[0]?.Type}
+                </div>
+              )}
+              {!OtherServicesglobal && (
+                <SalesCountComponent
+                  DineInAccess={DineInAccess}
+                  GlobalsalesDetailData={GlobalsalesDetailData}
+                  BookingNavbar={BookingNavbar}
+                />
+              )}
+              {!OtherServicesglobal &&
+                SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  (item) =>
+                    item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                ) &&
+                !sportsAppPreference && (
+                  <div
+                    style={{
+                      pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                      opacity: OrderStatus > 0 ? 0.5 : 1,
+                    }}
+                  >
+                    <Tooltip title={'Kiosk Sales'}>
+                      <Badge count={badgeCount} offset={[-10, 3]} size="small">
+                        <PozoKioskIcon
+                          onClick={() => openModalKiosk()}
+                          style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                          className="iconsize"
+                        />
+                      </Badge>
+                    </Tooltip>
                   </div>
                 )}
-                {!OtherServicesglobal && (
+              {!OtherServicesglobal && (
-                  <SalesCountComponent
+                <TooltipWrapper title={'Low Stock Alerts'} isMobile={isMobile}>
-                    DineInAccess={DineInAccess}
+                  {' '}
-                    GlobalsalesDetailData={GlobalsalesDetailData}
+                  <BSExpireProductsList />
+                </TooltipWrapper>
+              )}
+              {!OtherServicesglobal && Kioskopen && (
+                <BSKioskCounterPayment
+                  Kioskopen={Kioskopen}
+                  closeKioskModal={closeModalKiosk}
+                />
+              )}
+              {SAdminuserPin?.length > 0 && UserType != 'Super Admin User' && (
+                <div>
+                  <SAdminUserNotification
+                    SAdminuserPin={SAdminuserPin}
+                    popOverOpen={popOverOpen}
+                    handleSupportUser={handleSupportUser}
+                    handlePopOverOpen={handlePopOverOpen}
                   />
-                )}
+                </div>
-                {!OtherServicesglobal &&
+              )}
-                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
+              {CheckBookingStatus == 'Open' ? (
-                    (item) =>
+                !OtherServicesglobal && (
-                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  <div style={{ marginLeft: '10px' }}>
-                  ) &&
+                    <TooltipWrapper title={'Booking Close'} isMobile={isMobile}>
-                  !sportsAppPreference && (
+                      {' '}
-                    <div
+                      <BookingCloseIcon
-                      style={{
+                        onClick={OpenBookingModal}
-                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        bgFill={'#52c41a'}
-                        opacity: OrderStatus > 0 ? 0.5 : 1,
+                        style={{
-                      }}
+                          fontSize: '16px',
-                    >
+                          marginTop: '4px',
-                      <Tooltip title={'Kiosk Sales'}>
+                          color: '#52c41a',
-                        <Badge
+                          cursor: 'pointer',
-                          count={badgeCount}
+                        }}
-                          offset={[-10, 3]}
-                          size="small"
-                        >
-                          <PozoKioskIcon
-                            onClick={() => openModalKiosk()}
-                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                            className="iconsize"
-                          />
-                        </Badge>
-                      </Tooltip>
-                    </div>
-                  )}
-                {!OtherServicesglobal && (
-                  <TooltipWrapper
-                    title={'Low Stock Alerts'}
-                    isMobile={isMobile}
-                  >
-                    {' '}
-                    <BSExpireProductsList />
-                  </TooltipWrapper>
-                )}
-                {!OtherServicesglobal && Kioskopen && (
-                  <BSKioskCounterPayment
-                    Kioskopen={Kioskopen}
-                    closeKioskModal={closeModalKiosk}
-                  />
-                )}
-                {SAdminuserPin?.length > 0 &&
-                  UserType != 'Super Admin User' && (
-                    <div>
-                      <SAdminUserNotification
-                        SAdminuserPin={SAdminuserPin}
-                        popOverOpen={popOverOpen}
-                        handleSupportUser={handleSupportUser}
-                        handlePopOverOpen={handlePopOverOpen}
                       />
-                    </div>
+                      {/* <button className="BookingCloseButton"
-                  )}
+                                        >Booking Close</button> */}
-                {CheckBookingStatus == 'Open' ? (
+                    </TooltipWrapper>
-                  !OtherServicesglobal && (
+                  </div>
-                    <div style={{ marginLeft: '10px' }}>
+                )
-                      <TooltipWrapper
+              ) : (
-                        title={'Booking Close'}
+                <div style={{ marginLeft: '10px' }}>
-                        isMobile={isMobile}
+                  <TooltipWrapper title="Booking Open" isMobile={isMobile}>
-                      >
+                    <Popconfirm
-                        {' '}
+                      placement="leftTop"
+                      title="Booking Open"
+                      description="Are you sure you want to Open the sales?"
+                      okText="Yes"
+                      cancelText="No"
+                      onConfirm={() => BookingOpenFun('Open')}
+                    >
+                      <span>
                         <BookingCloseIcon
-                          onClick={OpenBookingModal}
+                          bgFill="red"
-                          bgFill={'#52c41a'}
                           style={{
                             fontSize: '16px',
                             marginTop: '4px',
@@ -429,57 +450,25 @@ const BSLayout4 = () => {
                             cursor: 'pointer',
                           }}
                         />
-                        {/* <button className="BookingCloseButton"
+                      </span>
-                                        >Booking Close</button> */}
+                    </Popconfirm>
-                      </TooltipWrapper>
+                  </TooltipWrapper>
-                    </div>
+                </div>
-                  )
+              )}
-                ) : (
+              {!OtherServicesglobal && (
-                  <div style={{ marginLeft: '10px' }}>
+                <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title="Booking Open" isMobile={isMobile}>
+                  <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                      <Popconfirm
+                    {''}
-                        placement="leftTop"
+                    <BSEwayBillicon
-                        title="Booking Open"
+                      style={{ cursor: 'pointer', marginTop: '5px' }}
-                        description="Are you sure you want to Open the sales?"
+                      onClick={OpenListOfInvoices}
-                        okText="Yes"
+                    />
-                        cancelText="No"
+                  </TooltipWrapper>
-                        onConfirm={() => BookingOpenFun('Open')}
+                </div>
-                      >
+              )}
-                        <span>
-                          <BookingCloseIcon
-                            bgFill="red"
-                            style={{
-                              fontSize: '16px',
-                              marginTop: '4px',
-                              color: '#52c41a',
-                              cursor: 'pointer',
-                            }}
-                          />
-                        </span>
-                      </Popconfirm>
-                    </TooltipWrapper>
-                  </div>
-                )}
-                {!OtherServicesglobal && (
-                  <div style={{ marginLeft: '10px' }}>
-                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                      {''}
-                      <BSEwayBillicon
-                        style={{ cursor: 'pointer', marginTop: '5px' }}
-                        onClick={OpenListOfInvoices}
-                      />
-                    </TooltipWrapper>
-                  </div>
-                )}
-              </div>
             </div>
-          ) : (
+          </div>
-            <SalesCountForStandard
+
-              PricingAppPricingName={PricingAppPricingName}
-              DineInAccess={DineInAccess}
-              GlobalsalesDetailData={GlobalsalesDetailData}
-            />
-          )}
           <div
             className="Bslayout4_overall"
             style={{
@@ -524,6 +513,8 @@ const BSLayout4 = () => {
               >
                 {!OtherServicesglobal && Comboglobal === false && (
                   <BSItemCard
+                    connectingState={connectingState}
+                    setConnectingState={setConnectingState}
                     cardFunctionality={dynamicComponentProps(
                       'Card',
                       BookingCard?.[1],
@@ -610,7 +601,7 @@ const BSLayout4 = () => {
           />
         )}
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 

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

@@ -136,6 +136,7 @@ const BSLayout5 = () => {
   // const [AppExpDate, setAppExpDate] = useState(0);
   const [screenHeight, setScreenHeight] = useState(window.innerHeight);
   const [Kioskopen, setKioskopen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const PricingAppPricingName = useSelector(GlobalPricingAppPricingName);
   const SAdminuserPin = useSelector(GLobalSadminUserPin);
   const BookingNavbar = BSLayout5Data?.BookingNavbar?.[0];
@@ -325,7 +326,11 @@ const BSLayout5 = () => {
           style={{ height: containerHeight, overflow: 'hidden' }}
         >
           <div className="BSLayout5-NavBar">
-            <BSNavbar1 BookingNavbar={BookingNavbar}/>
+            <BSNavbar1
+              BookingNavbar={BookingNavbar}
+              connectingState={connectingState}
+              setConnectingState={setConnectingState}
+            />
           </div>
 
           <div
@@ -334,155 +339,148 @@ const BSLayout5 = () => {
               backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
             }}
           >
-            {BookingNavbar != 'Navbar3' ? (
+            <div className="Layout-bill-container">
-              <div className="Layout-bill-container">
+              <div
-                <div
+                className="Layout-bill-Subcontainer"
-                  className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              >
-                >
+                {UserType !== 'Employee' && (
-                  {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
-                    <div className="pricing-name-details">
+                    {PricingAppPricingName?.[0]?.PricingName +
-                      {PricingAppPricingName?.[0]?.PricingName +
+                      ' / ' +
-                        ' / ' +
+                      PricingAppPricingName?.[0]?.Type}
-                        PricingAppPricingName?.[0]?.Type}
+                  </div>
-                    </div>
+                )}
-                  )}
+                {!OtherServicesglobal && (
-                  {!OtherServicesglobal && (
+                  <SalesCountComponent
-                    <SalesCountComponent
+                    DineInAccess={DineInAccess}
-                      DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
-                      GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
-                    />
+                  />
-                  )}
+                )}
 
-                  {!OtherServicesglobal &&
+                {!OtherServicesglobal &&
-                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                      (item) =>
+                    (item) =>
-                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                    ) &&
+                  ) &&
-                    !sportsAppPreference && (
+                  !sportsAppPreference && (
-                      <div
+                    <div
-                        style={{
+                      style={{
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
-                        }}
+                      }}
-                      >
-                        <Tooltip title={'Kiosk Sales'}>
-                          {''}
-                          <Badge
-                            count={badgeCount}
-                            offset={[-10, 3]}
-                            size="small"
-                          >
-                            <PozoKioskIcon
-                              onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                              className="iconsize"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
                     >
-                      {' '}
+                      <Tooltip title={'Kiosk Sales'}>
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {!OtherServicesglobal && Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <>
-                      {' '}
-                      {CheckBookingStatus == 'Open' ? (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title={'Booking Close'}
-                            isMobile={isMobile}
-                          >
-                            {' '}
-                            <BookingCloseIcon
-                              onClick={OpenBookingModal}
-                              bgFill={'#52c41a'}
-                              style={{
-                                fontSize: '16px',
-                                marginTop: '4px',
-                                color: '#52c41a',
-                                cursor: 'pointer',
-                              }}
-                            />
-                            {/* <button className="BookingCloseButton"
-                                                      >Booking Close</button> */}
-                          </TooltipWrapper>
-                        </div>
-                      ) : (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title="Booking Open"
-                            isMobile={isMobile}
-                          >
-                            <Popconfirm
-                              placement="leftTop"
-                              title="Booking Open"
-                              description="Are you sure you want to Open the sales?"
-                              okText="Yes"
-                              cancelText="No"
-                              onConfirm={() => BookingOpenFun('Open')}
-                            >
-                              <span>
-                                <BookingCloseIcon
-                                  bgFill="red"
-                                  style={{
-                                    fontSize: '16px',
-                                    marginTop: '4px',
-                                    color: '#52c41a',
-                                    cursor: 'pointer',
-                                  }}
-                                />
-                              </span>
-                            </Popconfirm>
-                          </TooltipWrapper>
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {!OtherServicesglobal && (
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
                         {''}
-                        <BSEwayBillicon
+                        <Badge
-                          style={{ cursor: 'pointer', marginTop: '5px' }}
+                          count={badgeCount}
-                          onClick={OpenListOfInvoices}
+                          offset={[-10, 3]}
-                        />
+                          size="small"
-                      </TooltipWrapper>
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
                     </div>
                   )}
-                </div>
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {!OtherServicesglobal && Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <>
+                    {' '}
+                    {CheckBookingStatus == 'Open' ? (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'Booking Close'}
+                          isMobile={isMobile}
+                        >
+                          {' '}
+                          <BookingCloseIcon
+                            onClick={OpenBookingModal}
+                            bgFill={'#52c41a'}
+                            style={{
+                              fontSize: '16px',
+                              marginTop: '4px',
+                              color: '#52c41a',
+                              cursor: 'pointer',
+                            }}
+                          />
+                          {/* <button className="BookingCloseButton"
+                                                      >Booking Close</button> */}
+                        </TooltipWrapper>
+                      </div>
+                    ) : (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title="Booking Open"
+                          isMobile={isMobile}
+                        >
+                          <Popconfirm
+                            placement="leftTop"
+                            title="Booking Open"
+                            description="Are you sure you want to Open the sales?"
+                            okText="Yes"
+                            cancelText="No"
+                            onConfirm={() => BookingOpenFun('Open')}
+                          >
+                            <span>
+                              <BookingCloseIcon
+                                bgFill="red"
+                                style={{
+                                  fontSize: '16px',
+                                  marginTop: '4px',
+                                  color: '#52c41a',
+                                  cursor: 'pointer',
+                                }}
+                              />
+                            </span>
+                          </Popconfirm>
+                        </TooltipWrapper>
+                      </div>
+                    )}
+                  </>
+                )}
+                {!OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      {''}
+                      <BSEwayBillicon
+                        style={{ cursor: 'pointer', marginTop: '5px' }}
+                        onClick={OpenListOfInvoices}
+                      />
+                    </TooltipWrapper>
+                  </div>
+                )}
               </div>
-            ) : (
+            </div>
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
-              />
-            )}
 
             <div className="BsLayout5-ContentDiv">
               <div className="BSCategory5-tablecont">
@@ -557,6 +555,8 @@ const BSLayout5 = () => {
                 >
                   {!OtherServicesglobal && Comboglobal === false && (
                     <BSItemCard
+                      connectingState={connectingState}
+                      setConnectingState={setConnectingState}
                       cardFunctionality={dynamicComponentProps(
                         'Card',
                         BookingCard?.[1],
@@ -601,7 +601,7 @@ const BSLayout5 = () => {
           />
         )}
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 

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

@@ -148,6 +148,7 @@ const BSLayout6 = () => {
     BookingStatus?.find((item) => item.ScreenType === 'Booking')
       ?.ScreenStatus ?? 'Open';
   const [BookingModalOpen, setBookingModalOpen] = useState(false);
+  const [connectingState, setConnectingState] = useState({});
   const [Kioskopen, setKioskopen] = useState(false);
   const AppExpDate = useSelector(GlobalAppExpDateData);
   const [screenHeight, setScreenHeight] = useState(window?.innerHeight);
@@ -336,156 +337,155 @@ const BSLayout6 = () => {
         >
           <div className="BSLayout6-fullnav">
             <div className="BSLayout6-Navbar">
-             <BSNavbar1 BookingNavbar={BookingNavbar}/>
+              <BSNavbar1
-            </div>
+                BookingNavbar={BookingNavbar}
-            {BookingNavbar != 'Navbar3' ? (
+                connectingState={connectingState}
-              <div className="Layout-bill-container">
+                setConnectingState={setConnectingState}
-                <div
-                  className="Layout-bill-Subcontainer"
-                  style={{ width: OtherServicesglobal ? '10%' : '100%' }}
-                >
-                  {UserType !== 'Employee' && (
-                    <div className="pricing-name-details">
-                      {PricingAppPricingName?.[0]?.PricingName +
-                        ' / ' +
-                        PricingAppPricingName?.[0]?.Type}
-                    </div>
-                  )}
-                  {!OtherServicesglobal && (
-                    <SalesCountComponent
-                      DineInAccess={DineInAccess}
-                      GlobalsalesDetailData={GlobalsalesDetailData}
-                    />
-                  )}
-                  {!OtherServicesglobal &&
-                    SessionData?.FeatureAddonData?.FeatureDtls?.find(
-                      (item) =>
-                        item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
-                    ) &&
-                    !sportsAppPreference && (
-                      <div
-                        style={{
-                          pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
-                          opacity: OrderStatus > 0 ? 0.5 : 1,
-                        }}
-                      >
-                        <Tooltip title={'Kiosk Sales'}>
-                          {''}
-                          <Badge
-                            count={badgeCount}
-                            offset={[-10, 3]}
-                            size="small"
-                          >
-                            <PozoKioskIcon
-                              onClick={() => openModalKiosk()}
-                              style={{ cursor: 'pointer', fontSize: '1.5rem' }}
-                              className="iconsize"
-                            />
-                          </Badge>
-                        </Tooltip>
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <TooltipWrapper
-                      title={'Low Stock Alerts'}
-                      isMobile={isMobile}
-                    >
-                      {' '}
-                      <BSExpireProductsList />
-                    </TooltipWrapper>
-                  )}
-                  {!OtherServicesglobal && Kioskopen && (
-                    <BSKioskCounterPayment
-                      Kioskopen={Kioskopen}
-                      closeKioskModal={closeModalKiosk}
-                    />
-                  )}
-                  {SAdminuserPin?.length > 0 &&
-                    UserType != 'Super Admin User' && (
-                      <div>
-                        <SAdminUserNotification
-                          SAdminuserPin={SAdminuserPin}
-                          popOverOpen={popOverOpen}
-                          handleSupportUser={handleSupportUser}
-                          handlePopOverOpen={handlePopOverOpen}
-                        />
-                      </div>
-                    )}
-                  {!OtherServicesglobal && (
-                    <>
-                      {' '}
-                      {CheckBookingStatus == 'Open' ? (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title={'Booking Close'}
-                            isMobile={isMobile}
-                          >
-                            {' '}
-                            <BookingCloseIcon
-                              onClick={OpenBookingModal}
-                              bgFill={'#52c41a'}
-                              style={{
-                                fontSize: '16px',
-                                marginTop: '4px',
-                                color: '#52c41a',
-                                cursor: 'pointer',
-                              }}
-                            />
-                            {/* <button className="BookingCloseButton"
-                                        >Booking Close</button> */}
-                          </TooltipWrapper>
-                        </div>
-                      ) : (
-                        <div style={{ marginLeft: '10px' }}>
-                          <TooltipWrapper
-                            title="Booking Open"
-                            isMobile={isMobile}
-                          >
-                            <Popconfirm
-                              placement="leftTop"
-                              title="Booking Open"
-                              description="Are you sure you want to Open the sales?"
-                              okText="Yes"
-                              cancelText="No"
-                              onConfirm={() => BookingOpenFun('Open')}
-                            >
-                              <span>
-                                <BookingCloseIcon
-                                  bgFill="red"
-                                  style={{
-                                    fontSize: '16px',
-                                    marginTop: '4px',
-                                    color: '#52c41a',
-                                    cursor: 'pointer',
-                                  }}
-                                />
-                              </span>
-                            </Popconfirm>
-                          </TooltipWrapper>
-                        </div>
-                      )}
-                    </>
-                  )}
-                  {!OtherServicesglobal && (
-                    <div style={{ marginLeft: '10px' }}>
-                      <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
-                        {''}
-                        <BSEwayBillicon
-                          style={{ cursor: 'pointer', marginTop: '5px' }}
-                          onClick={OpenListOfInvoices}
-                        />
-                      </TooltipWrapper>
-                    </div>
-                  )}
-                </div>
-              </div>
-            ) : (
-              <SalesCountForStandard
-                PricingAppPricingName={PricingAppPricingName}
-                DineInAccess={DineInAccess}
-                GlobalsalesDetailData={GlobalsalesDetailData}
               />
-            )}
+            </div>
+
+            <div className="Layout-bill-container">
+              <div
+                className="Layout-bill-Subcontainer"
+                style={{ width: OtherServicesglobal ? '10%' : '100%' }}
+              >
+                {UserType !== 'Employee' && (
+                  <div className="pricing-name-details">
+                    {PricingAppPricingName?.[0]?.PricingName +
+                      ' / ' +
+                      PricingAppPricingName?.[0]?.Type}
+                  </div>
+                )}
+                {!OtherServicesglobal && (
+                  <SalesCountComponent
+                    DineInAccess={DineInAccess}
+                    GlobalsalesDetailData={GlobalsalesDetailData}
+                    BookingNavbar={BookingNavbar}
+                  />
+                )}
+                {!OtherServicesglobal &&
+                  SessionData?.FeatureAddonData?.FeatureDtls?.find(
+                    (item) =>
+                      item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
+                  ) &&
+                  !sportsAppPreference && (
+                    <div
+                      style={{
+                        pointerEvents: OrderStatus > 0 ? 'none' : 'auto',
+                        opacity: OrderStatus > 0 ? 0.5 : 1,
+                      }}
+                    >
+                      <Tooltip title={'Kiosk Sales'}>
+                        {''}
+                        <Badge
+                          count={badgeCount}
+                          offset={[-10, 3]}
+                          size="small"
+                        >
+                          <PozoKioskIcon
+                            onClick={() => openModalKiosk()}
+                            style={{ cursor: 'pointer', fontSize: '1.5rem' }}
+                            className="iconsize"
+                          />
+                        </Badge>
+                      </Tooltip>
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <TooltipWrapper
+                    title={'Low Stock Alerts'}
+                    isMobile={isMobile}
+                  >
+                    {' '}
+                    <BSExpireProductsList />
+                  </TooltipWrapper>
+                )}
+                {!OtherServicesglobal && Kioskopen && (
+                  <BSKioskCounterPayment
+                    Kioskopen={Kioskopen}
+                    closeKioskModal={closeModalKiosk}
+                  />
+                )}
+                {SAdminuserPin?.length > 0 &&
+                  UserType != 'Super Admin User' && (
+                    <div>
+                      <SAdminUserNotification
+                        SAdminuserPin={SAdminuserPin}
+                        popOverOpen={popOverOpen}
+                        handleSupportUser={handleSupportUser}
+                        handlePopOverOpen={handlePopOverOpen}
+                      />
+                    </div>
+                  )}
+                {!OtherServicesglobal && (
+                  <>
+                    {' '}
+                    {CheckBookingStatus == 'Open' ? (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title={'Booking Close'}
+                          isMobile={isMobile}
+                        >
+                          {' '}
+                          <BookingCloseIcon
+                            onClick={OpenBookingModal}
+                            bgFill={'#52c41a'}
+                            style={{
+                              fontSize: '16px',
+                              marginTop: '4px',
+                              color: '#52c41a',
+                              cursor: 'pointer',
+                            }}
+                          />
+                          {/* <button className="BookingCloseButton"
+                                        >Booking Close</button> */}
+                        </TooltipWrapper>
+                      </div>
+                    ) : (
+                      <div style={{ marginLeft: '10px' }}>
+                        <TooltipWrapper
+                          title="Booking Open"
+                          isMobile={isMobile}
+                        >
+                          <Popconfirm
+                            placement="leftTop"
+                            title="Booking Open"
+                            description="Are you sure you want to Open the sales?"
+                            okText="Yes"
+                            cancelText="No"
+                            onConfirm={() => BookingOpenFun('Open')}
+                          >
+                            <span>
+                              <BookingCloseIcon
+                                bgFill="red"
+                                style={{
+                                  fontSize: '16px',
+                                  marginTop: '4px',
+                                  color: '#52c41a',
+                                  cursor: 'pointer',
+                                }}
+                              />
+                            </span>
+                          </Popconfirm>
+                        </TooltipWrapper>
+                      </div>
+                    )}
+                  </>
+                )}
+                {!OtherServicesglobal && (
+                  <div style={{ marginLeft: '10px' }}>
+                    <TooltipWrapper title={'E-way Bill'} isMobile={isMobile}>
+                      {''}
+                      <BSEwayBillicon
+                        style={{ cursor: 'pointer', marginTop: '5px' }}
+                        onClick={OpenListOfInvoices}
+                      />
+                    </TooltipWrapper>
+                  </div>
+                )}
+              </div>
+            </div>
+
             <div
               className="BSLayout6-category-div"
               style={{
@@ -529,6 +529,8 @@ const BSLayout6 = () => {
             >
               {!OtherServicesglobal && Comboglobal === false && (
                 <BSItemCard
+                  connectingState={connectingState}
+                  setConnectingState={setConnectingState}
                   // screenHeight={screenHeight}
                   cardFunctionality={dynamicComponentProps(
                     'Card',
@@ -623,7 +625,7 @@ const BSLayout6 = () => {
           )}
         </div>
       </>
-     </Suspense>
+    </Suspense>
   );
 };
 export default BSLayout6;

src/Pages/BookingScreen/Template/SalesCountComponent.jsx

@@ -18,7 +18,6 @@ import { MdOutlineCallReceived } from 'react-icons/md';
 import { GoPackageDependencies } from 'react-icons/go';
 import { Messages } from '../../../Components/Notifications/Messages';
 import { useSelector } from 'react-redux';
-import { DefaultModal } from '../../../Components/Modal/DefaultModal';
 import {
   getCardDataWithoutSub,
   getCardDataWithoutSubmodule,
@@ -56,11 +55,19 @@ const ShortcutKeyHelper = lazy(
 );
 // Scss
 import './SalesCountComponent.scss';
-import { SalesDetailsModal, SalesNetAmountModal } from '../Components/UtillComponents/SalesDetailsNetAmountModal.jsx';
+import {
+  SalesDetailsModal,
+  SalesNetAmountModal,
+} from '../Components/UtillComponents/SalesDetailsNetAmountModal.jsx';
 
 const SalesCountComponent = React.memo(
-  ({ DineInAccess, GlobalsalesDetailData }) => {
+  ({ DineInAccess, GlobalsalesDetailData, BookingNavbar }) => {
     // Destructure to simplify access to required values
+    console.log(
+      BookingNavbar,
+      'BookingNavbarBookingNavbar'
+    );
+
     const {
       DineInOrderCount,
       TakeAwayOrderCount,
@@ -541,9 +548,9 @@ const SalesCountComponent = React.memo(
                         <div>
                           {safeRound(
                             TakeAwayAmount +
-                            SelfTakeAwayAmount +
+                              SelfTakeAwayAmount +
-                            PreOrderAmount -
+                              PreOrderAmount -
-                            OverAllTakeAwayOfferAmount
+                              OverAllTakeAwayOfferAmount
                           )}
                         </div>
                       </div>
@@ -616,8 +623,8 @@ const SalesCountComponent = React.memo(
                         <div>
                           {safeRound(
                             DineInAmount +
-                            SelfDineInAmount -
+                              SelfDineInAmount -
-                            OverAllDineInOfferAmount
+                              OverAllDineInOfferAmount
                           )}
                         </div>
                       </div>
@@ -629,8 +636,8 @@ const SalesCountComponent = React.memo(
                     <span>
                       {safeRound(
                         DineInAmount +
-                        SelfDineInAmount -
+                          SelfDineInAmount -
-                        OverAllDineInOfferAmount
+                          OverAllDineInOfferAmount
                       )}
                     </span>
                   </p>
@@ -648,7 +655,7 @@ const SalesCountComponent = React.memo(
                     SelfTakeAwayAmount +
                     PreOrderAmount -
                     OverAllTakeAwayOfferAmount || 0) +
-                  (DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount)
+                    (DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount)
                 ) > 0 && setIsNetAmtModalOpen(true)
               }
             >
@@ -659,7 +666,7 @@ const SalesCountComponent = React.memo(
                     SelfTakeAwayAmount +
                     PreOrderAmount -
                     OverAllTakeAwayOfferAmount || 0) +
-                  (DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount)
+                    (DineInAmount + SelfDineInAmount - OverAllDineInOfferAmount)
                 )}
               </span>
             </p>

src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss

@@ -1,11 +1,55 @@
-.BSBillingNavBar1 {
+.BSBillingNavBar1,
+.BSBillingNavBar2 {
   display: flex;
   align-items: center;
   width: 100vw;
-  height: 40px;
+  height: 42px;
-  background-color: #ffffff;
   box-shadow: var(--BOX_SHADOW_LEVEL2);
-  padding: 0 6px;
+  padding: 1px 6px;
+  gap: 12px;
+  background-color: #fff;
+  .NavbarSearchModified {
+    background-color: #e5e5e5;
+  }
+  .custom-input {
+    background-color: #e5e5e5;
+    border: none;
+    font-family: "Poppins";
+    font-weight: 500;
+  }
+  .search-input {
+    border: none !important;
+  }
+
+  @media (max-width: 1024px) {
+    .nameofBracnchmain {
+      width: 100px !important;
+    }
+  }
+  .ParkingIconDea {
+    background-color: #fff !important;
+    fill: #1292ee;
+  }
+  .ParkingIconActive {
+    background-color: #fff !important;
+    fill: #52c41a;
+  }
+}
+.BSBillingNavBar3 {
+  display: flex;
+  align-items: center;
+  width: 100vw;
+  height: 42px;
+  box-shadow: var(--BOX_SHADOW_LEVEL2);
+  padding: 1px 6px;
+  gap: 12px;
+  background: linear-gradient(to bottom right, #1e2536, #2a3447);
+
+  @media (max-width: 1024px) {
+    .nameofBracnchmain {
+      width: 100px !important;
+    }
+  }
 }
 
 .BSBillingNav1div2 {
@@ -15,13 +59,14 @@
   align-items: center;
   width: 100vw;
   color: var(--DEFAULT_SELECTED_COLOR);
+
   .BSBillingNavBar1-SearchBar {
     font-size: 12px !important;
     font-family: "Poppins" !important;
     font-weight: 500;
     justify-content: center;
     white-space: nowrap;
-    background-color: #f4f4f4;
+    background-color: #e5e5e5;
     padding: 1px 6px;
     div {
       text-align: center;
@@ -90,6 +135,10 @@
   width: 1.7rem;
   margin-right: 1rem;
   color: var(--DEFAULT_SELECTED_COLOR);
+  @media (max-width: 1024px) {
+    display: flex;
+    margin-right: 1rem;
+  }
 }
 
 .BSBillingNavBar1-smallscreen-Inputsearch-container {
@@ -121,11 +170,6 @@
 }
 
 @media (max-width: 1000px) {
-  .BSBillingnav1-threedots {
-    display: flex;
-    margin-right: 1rem;
-  }
-
   .BSBillingNavBar1-AllIcons {
     display: none;
   }
@@ -147,9 +191,8 @@
   .BSBillingNav1div2 {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
-    column-gap: 0rem !important;
     width: 100%;
     .ant-select-selector {
       height: max-content !important;
@@ -164,23 +207,6 @@
     text-align: center;
     font-size: 14px;
   }
-
-  .BSBillingnav1-Smallscreen {
-    position: absolute;
-    right: 0;
-    top: 40px;
-    display: flex !important;
-    border-right: 1px solid rgb(204, 198, 198);
-    background-color: rgb(255, 255, 255);
-    z-index: 3 !important;
-    justify-content: center;
-    padding: 10px;
-    box-shadow:
-      rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
-      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
-    height: 100vh;
-    width: 100px;
-  }
 }
 
 @media all and (max-width: 499px) {
@@ -252,10 +278,8 @@
 .BSNavbar1-time-user {
   display: flex;
   align-items: center;
-  column-gap: 1rem;
+  gap: 12px;
   justify-content: flex-end;
-  margin-right: 1rem;
-  margin-left: 1rem;
 }
 
 .UserProfile {
@@ -334,6 +358,22 @@
 
 .BSBillingnav1-Smallscreen {
   display: none;
+  @media (max-width: 1024px) {
+    position: absolute;
+    right: 0;
+    top: 40px;
+    display: flex !important;
+    border-right: 1px solid rgb(204, 198, 198);
+    background-color: rgb(255, 255, 255);
+    z-index: 3 !important;
+    justify-content: center;
+    padding: 10px;
+    box-shadow:
+      rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
+      rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
+    height: 100vh;
+    width: 100px;
+  }
 }
 
 .BSNavbar1-timer .mytimer-width-container {
@@ -492,9 +532,11 @@
   align-items: center;
   column-gap: 4px;
   position: relative;
+  width: 100%;
+  max-width: 300px;
   .BarCodeScanMaster {
     position: absolute;
-    right: 10px;
+    right: 15px;
     top: 20%;
     padding: 0 !important;
     svg {
@@ -504,7 +546,7 @@
   }
 
   .MultiSearchIconDiv {
-    color: #1292ee !important;
+    color: #333 !important;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -513,7 +555,7 @@
     height: 27px;
     position: absolute;
     z-index: 10;
-    left: 6px;
+    right: 6px;
     background-color: unset !important;
   }
   .custom-input {
@@ -525,8 +567,8 @@
 }
 .BsNavbar1FullScreen {
   background-color: #1292ee;
-  height: 28px;
+  height: max-content;
-  width: 28px;
+  width: max-content;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -534,17 +576,248 @@
   cursor: pointer;
   font-size: 18px;
   color: #fff;
+  padding: 6px;
 }
 
 .BsNavbar1FullScreenExit {
   background-color: #ef4444;
-  height: 28px;
+  height: max-content;
-  width: 28px;
+  width: max-content;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  color: #fff;
-  font-size: 18px;
   cursor: pointer;
+  font-size: 19px;
+  color: #fff;
+  padding: 6px;
+}
+
+.BSNavbarHomeIcon {
+  color: #1292ee;
+  cursor: pointer;
+  width: 30px !important;
+  height: 30px !important;
+}
+
+.NavbarCus-Add {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.PrinterSettingMB {
+  color: #1292ee;
+  font-size: 20px;
+}
+
+.BsNavbar-IconSections {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  @media (max-width: 1024px) {
+    display: none;
+  }
+}
+.BSBillingNav1div2 .EstimateButton {
+  flex-direction: row !important;
+}
+//
+//
+//
+// Responsive navbar code
+//
+//
+//
+
+.resNavbarMain {
+  width: 100vw;
+  height: 100vh;
+  background-color: #00000056;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  overflow: visible;
+  backdrop-filter: blur(6px);
+  animation: fadeInRes 0.3s ease;
+
+  &.closing {
+    animation: fadeOutRes 0.3s ease;
+  }
+
+  .ResBsNavbar-IconSections {
+    background-color: #fff;
+    display: flex;
+    height: 100%;
+    width: max-content;
+    padding: 0 16px;
+    gap: 10px;
+    flex-direction: column;
+    align-items: center;
+    animation: slideInRightRes 0.3s ease;
+    .BSBillingNav-icon {
+      color: #1292ee;
+    }
+  }
+
+  &.closing .ResBsNavbar-IconSections {
+    animation: slideOutRightRes 0.3s ease;
+  }
+
+  .EstimateButton {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #52c41a;
+    background-color: #1292ee;
+    height: 30px;
+    width: max-content;
+    justify-content: space-around;
+    border-radius: 6px;
+    padding: 0 5px;
+    padding: 10px;
+  }
+  .resnavbarClose {
+    display: flex;
+    width: 100%;
+    padding: 12px 0px 0 12px;
+    justify-content: flex-end;
+    cursor: pointer;
+    color: #ff0000;
+    font-size: 24px;
+    font-weight: 800;
+  }
+}
+
+.ReprintIconRes {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ParkingIconDea {
+  background-color: #1292ee !important;
+}
+.ParkingIconActive {
+  background-color: #52c41a !important;
+}
+
+.NavbarSearchModified {
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 2px 6px;
+  gap: 10px;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 300px;
+
+  .BSNavBarSearchMaster {
+    width: 80%;
+  }
+  .custom-input {
+    padding: 6px 0 !important;
+    height: unset;
+    border: none !important;
+    color: #333 !important;
+    width: 100%;
+    border-radius: 0 !important;
+  }
+  .search-icon {
+    display: none;
+  }
+  .Prdinput-container {
+    width: 100%;
+  }
+
+  .bothnbavbarIcon {
+    color: #333;
+  }
+}
+
+@keyframes fadeInRes {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutRes {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideInRightRes {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideOutRightRes {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+.BSBillingNavBar3 {
+  .BSNavbarHomeIcon,
+  .nameofBracnchmain,
+  .BSBillingNav-icon,
+  .favIcon,
+  .PrinterSettingMB,
+  .UserProfile {
+    color: #fff !important;
+  }
+  .OtherServiceParking,
+  .EstimateButton,
+  .WholesaleretialChangeIcon,
+  .BsNavbar1FullScreen,
+  .BSBillingNavBar1-SearchBar {
+    background-color: #fff !important;
+  }
+  .ParkingIconDea {
+    background-color: #000000 !important;
+    fill: #fff !important;
+  }
+
+  .ParkingIconActive {
+    background-color: #ffffff !important;
+    fill: #52c41a;
+  }
+  .WholesaleretialChangeIcon svg {
+    color: #1292ee !important;
+  }
+  .favIcon svg {
+    color: #fff !important;
+  }
+  .BsNavbar1FullScreen {
+    color: #1292ee !important;
+  }
+  .BSBillingNavBar1-SearchBar {
+    font-size: 11px !important;
+    line-height: 1.3;
+  }
+}
+
+.BSBillingNavBar3 {
+  .ResBsNavbar-IconSections {
+    background: linear-gradient(to bottom right, #1e2536, #2a3447);
+  }
 }

src/Styles/BookingScreen/Components/UtillComponents/BSNavBarComponents.scss

@@ -347,8 +347,6 @@
 
 @media only screen and (max-width: 1000px) {
   .BSBillingNav1div2 .EstimateButton {
-    flex-direction: column !important;
-    height: max-content !important;
     padding: 5px 2px;
   }
 }

src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss

@@ -40,7 +40,7 @@ body {
 .BSLayout2Standard {
   overflow: hidden;
   position: relative;
-  top: 2rem;
+  top: 2.1rem;
   height: 100%;
 
   @media (max-width: 768px) {
@@ -359,12 +359,12 @@ body {
 
 .salesStoreName {
   color: #000000;
-  padding: 0.1rem 0.5rem;
+  padding: 0;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
   font-family: "Poppins";
-  margin: 3px 3px 1px 3px;
+  margin: 0;
 
   svg {
     display: flex;

src/Styles/OverAllStyle/OverAllStyle.scss

@@ -1473,7 +1473,6 @@ table {
     height: 70vh;
     overflow-y: auto;
     scrollbar-width: thin;
-    /* Firefox */
     scroll-behavior: auto;
   }
 
@@ -1490,8 +1489,8 @@ table {
 .bulkChangePriceTable {
   width: 83vw;
   overflow: auto;
-  height: 60vh;
   scrollbar-width: thin;
+  height: 60vh;
   position: relative;
 
   .ant-table-cell {
@@ -1580,7 +1579,7 @@ table {
   height: max-content;
   max-height: 300px;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   & .ant-table-wrapper table {
     width: 80%;
   }
@@ -1592,7 +1591,7 @@ table {
   flex-wrap: wrap;
   height: 400px;
   width: 100%;
-  overflow-y: scroll;
+  overflow-y: auto;
   & .ant-table-wrapper table {
     width: 100%;
   }
@@ -1688,3 +1687,16 @@ table {
     padding: 10px 0 !important;
   }
 }
+
+.CusAddressAddBtn {
+  background-color: #1677ff;
+  color: #fff;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  margin-top: 8px;
+  font-weight: 400;
+  font-family: "Poppins";
+}