table settings Full functionality

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

@@ -1,84 +1,77 @@
-import { useState } from "react";
+import { useState } from 'react';
-import { IoMdAdd, IoMdSettings } from "react-icons/io";
+import { IoMdAdd, IoMdSettings } from 'react-icons/io';
-import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
+import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
-import TooltipWrapper from "../../../../Components/Tooltip/Tooltip";
+import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
-
-import "./AllSalesPageSettings.scss"
-import TableHeadersetting from "./TableHeadersetting";
-import PaymentOptions from "../../../Payment/PaymentOptions/PaymentOptions";
-
 
+import './AllSalesPageSettings.scss';
+import TableHeadersetting from './TableHeadersetting';
+import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions';
 
 const AllSalesPageSettings = () => {
-    const [settingModal, setsettingModal] = useState(false)
+  const [settingModal, setsettingModal] = useState(false);
-    const [selectedComponent, setselectedComponent] = useState('Payment')
+  const [selectedComponent, setselectedComponent] = useState('Payment');
- 
-    
-    const onclose = () => {
-        setsettingModal(false)
-    }
-     const ComponentSelect = (value) => {
-        setselectedComponent(value);
-        };
-     return (
-        <>
-            <TooltipWrapper>
-                <div
-                    onClick={() => setsettingModal(true)}
-                    style={{
-                        cursor: 'pointer',
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: '5px',
-                        padding: '5px 10px',
-                        borderRadius: '4px',
-                        fontSize: '14px',
-                    }}
-                >
-                    <IoMdSettings />  
-                </div>
-            </TooltipWrapper>  
-       
-            <DefaultModal 
-                open={settingModal} 
-                footer={false}
-                handleCancel={onclose}
-                title={"Settings"} 
-                width={700}
-            >
 
-                <div>
+  const onclose = () => {
-                     <div
+    setsettingModal(false);
-                        className="SettingsListSwitchBTN"
+  };
-                        >
+  const ComponentSelect = (value) => {
-                        <div
+    setselectedComponent(value);
-                            className={selectedComponent === 'Payment' ? 'selected' : ''}
+  };
-                            onClick={() => ComponentSelect('Payment')}
+  return (
-                        >
+    <>
-                            Payment Option
+      <TooltipWrapper>
-                        </div>
+        <div
-                        <div
+          onClick={() => setsettingModal(true)}
-                        className={selectedComponent === 'Table' ? 'selected' : ''}
+          style={{
-                        onClick={() => ComponentSelect('Table')}
+            cursor: 'pointer',
-                        >
+            display: 'flex',
-                                Table
+            alignItems: 'center',
-                        </div>
+            gap: '5px',
-                        </div>  
+            padding: '5px 10px',
-                          {selectedComponent == "Payment" &&
+            borderRadius: '4px',
-                                                <div>
+            fontSize: '14px',
-                                                    <PaymentOptions />
+            backgroundColor: '#f0f0f0',
-                                                </div>
+          }}
-                                            }
+        >
-                        
+          <IoMdSettings size={16} />
-                        {
+        </div>
-                            selectedComponent === "Table" && 
+      </TooltipWrapper>
-                            <TableHeadersetting />
+
-                        }
+      <DefaultModal
-                     
+        open={settingModal}
-                </div>
+        footer={false}
-            </DefaultModal>
+        handleCancel={onclose}
-        </>
+        title={'Settings'}
-    )
+        width={850}
-}
+      >
- 
+        <div className="AllSalesPageSettingsMainDiv">
-export default AllSalesPageSettings;
+          <div className="SettingsListSwitchBTN">
+            <div
+              className={selectedComponent === 'Payment' ? 'selected' : ''}
+              onClick={() => ComponentSelect('Payment')}
+            >
+              Payment Option
+            </div>
+            <div
+              className={selectedComponent === 'Table' ? 'selected' : ''}
+              onClick={() => ComponentSelect('Table')}
+            >
+              Table
+            </div>
+          </div>
+          <div className="SettingsComponentDiv">
+            {selectedComponent == 'Payment' && (
+              <div>
+                <PaymentOptions />
+              </div>
+            )}
+
+            {selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />}
+          </div>
+        </div>
+      </DefaultModal>
+    </>
+  );
+};
+
+export default AllSalesPageSettings;

src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss

@@ -1,58 +1,141 @@
-/// Another  swtich button style code
+// /// Another  swtich button style code
 
-.SettingsListSwitchBTN {
+// .SettingsListSwitchBTN {
-  display: inline-flex;
+//   display: inline-flex;
-  gap: 16px;
+//   gap: 16px;
-  font-family: "Poppins";
+//   font-family: "Poppins";
-  margin-bottom: 12px; 
+//   margin-bottom: 12px;
-  border-bottom: 1px solid #d1d5db;
+//   border-bottom: 1px solid #d1d5db;
+// }
+
+// .SettingsListSwitchBTN > div {
+//   font-size: 22px;
+//   font-weight: 600;
+//   cursor: pointer;
+//   color: #6b7280;
+//   display: flex;
+//   align-items: center;
+//   gap: 6px;
+//   position: relative;
+//   border: none;
+//   background: transparent;
+//   font-family: "Gilroy";
+//   transition: color 0.2s ease;
+//   @media (max-width: 600px) {
+//     font-size: 18px;
+//   }
+// }
+
+// .SettingsListSwitchBTN > div:hover {
+//   color: #0f172a;
+// }
+
+// .SettingsSwitchBTN > div.selected {
+//   color: #0f172a;
+// }
+
+// .SettingsListSwitchBTN > div.selected::after {
+//   content: "";
+//   position: absolute;
+//   left: 0;
+//   bottom: -1px;
+//   width: 100%;
+//   height: 2px;
+//   background: #2c88ee;
+//   border-radius: 2px;
+// }
+
+// .SettingsListSwitchBTN > div.selected svg {
+//   color: #4765db !important;
+// }
+
+// // End
+// .settingsales-DropDown-Selection {
+//   width: 150px !important;
+// }
+// .settingaddNewSalesFiledBTN {
+//   background-color: #2563eb;
+//   // background-color: #1292ee;
+//   color: #fff !important;
+//   width: max-content;
+//   height: max-content;
+//   padding: 4px 8px;
+//   font-size: 13px;
+//   font-weight: 400;
+//   display: flex;
+//   align-items: center;
+//   gap: 4px;
+//   cursor: pointer;
+//   border-radius: 6px;
+//   svg {
+//     color: #fff !important;
+//     font-weight: 500;
+//     display: flex;
+//     font-size: 16px;
+//   }
+// }
+
+.AllSalesPageSettingsMainDiv {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  font-family: "Poppins", sans-serif;
+  justify-content: flex-start;
 }
 
-.SettingsListSwitchBTN > div {
+.SettingsComponentDiv {
-  font-size: 22px;
+  height: max-content;
-  font-weight: 600; 
+  max-height: 80vh;
-  cursor: pointer;
+  width: 100%;
-  color: #6b7280;
+  scrollbar-width: thin;
+  padding-right: 10px;
+  overflow: auto;
+ .option-maindiv{
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+ }
+}
+
+.SettingsListSwitchBTN {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
   gap: 6px;
-  position: relative;
+  width: 210px;
-  border: none;
+  height: 100%;
-  background: transparent;
+  overflow: auto;
-  font-family: "Gilroy";
+  background-color: #d8e5ff;
-  transition: color 0.2s ease;
+  padding: 5px;
-  @media (max-width: 600px) {
+  border-radius: 4px;
-    font-size: 18px;
+  height: 80vh;
+  div {
+    width: 100%;
+    background-color: #fff;
+    outline: none;
+    border: none;
+    font-family: "Poppins", sans-serif;
+    padding: 8px 6px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease-in-out;
+    font-size: 14px;
+    font-weight: 400;
+
+    &:hover {
+      background-color: #d1d8ec;
+    }
+    &.selected {
+      background-color: #ffffff;
+      color: #2563eb;
+      font-weight: 500;
+      border-right: 3px solid #2563eb;
+    }
   }
 }
 
-.SettingsListSwitchBTN > div:hover {
-  color: #0f172a;
-}
-
-.SettingsSwitchBTN > div.selected {
-  color: #0f172a;
-}
-
-.SettingsListSwitchBTN > div.selected::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -1px;
-  width: 100%;
-  height: 2px;
-  background: #2c88ee;
-  border-radius: 2px;
-}
-
-.SettingsListSwitchBTN > div.selected svg {
-  color: #4765db !important;
-}
-
-// End
-.settingsales-DropDown-Selection {
-  width: 150px !important;
-}
 .settingaddNewSalesFiledBTN {
   background-color: #2563eb;
   // background-color: #1292ee;
@@ -73,4 +156,4 @@
     display: flex;
     font-size: 16px;
   }
-}
+}

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

@@ -11,6 +11,7 @@ import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup';
 import { useSelector } from 'react-redux';
 import {
   getSalesTemplate,
+  getTemplate,
   postColorData,
   postTableFontData,
   putSelectionComponentData,
@@ -20,7 +21,7 @@ import { useDispatch } from 'react-redux';
 import Buttons from '../../../../Components/Forms/Buttons';
 import { Messages } from '../../../../Components/Notifications/Messages';
 
-const TableHeadersetting = () => {
+const TableHeadersetting = ({setModalOpen}) => {
   const dispatch = useDispatch();
   const SessionData = useSelector(StoredSessionData);
   const AppId = SessionData?.AppId;
@@ -61,6 +62,10 @@ const TableHeadersetting = () => {
   const hasOverallBackground = SelectedBillTableCheckValues?.includes(
     OverallbackgroundOptionId
   );
+  // Hold and addcustomer OptionsDetails
+    const [HoldButton, setHoldButton] = useState(false);
+    const [AddCustomerButton, setAddCustomerButton] = useState(false);
+    const [DineInChecked,setDineInChecked] = useState(false)
   console.log(billingSettings, 'billingSettingsbillingSettings');
   const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
     {
@@ -109,71 +114,7 @@ const TableHeadersetting = () => {
       ActiveStatus: 'A',
     },
   ]);
-  const [BillingOverallColorsList, setBillingOverallColorsList] = useState([
+  const [BillingOverallColorsList, setBillingOverallColorsList] = useState();
-    {
-      ColorId: 9,
-      SessionId: 57,
-      OptionId: 204,
-      FontColor: '#000000',
-      BackgroundColor: '#bbdefb',
-      ThemeName: 'Theme 9',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 19,
-      SessionId: 57,
-      OptionId: 204,
-      FontColor: '#000000',
-      BackgroundColor: '#d7ccc8',
-      ThemeName: 'Theme 19',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 20,
-      SessionId: 57,
-      OptionId: 209,
-      FontColor: '#000000',
-      BackgroundColor: '#c5cae9',
-      ThemeName: 'Theme 20',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 22,
-      SessionId: 57,
-      OptionId: 204,
-      FontColor: '#000000',
-      BackgroundColor: '#ffffff',
-      ThemeName: 'Theme 22',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 30,
-      SessionId: 57,
-      OptionId: 209,
-      FontColor: '#000000',
-      BackgroundColor: '#3f51b5',
-      ThemeName: 'Theme 30',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 66,
-      SessionId: 57,
-      OptionId: 205,
-      FontColor: '#000000',
-      BackgroundColor: '#d1c4e9',
-      ThemeName: 'Theme 65',
-      ActiveStatus: 'A',
-    },
-    {
-      ColorId: 67,
-      SessionId: 57,
-      OptionId: 205,
-      FontColor: '#000000',
-      BackgroundColor: '#8bc34a',
-      ThemeName: 'Theme 66',
-      ActiveStatus: 'A',
-    },
-  ]);
   const [BillUploadColor, setBillUploadColor] = useState(false);
   const [TableColorType, setTableColorType] = useState('Y');
   const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00');
@@ -211,21 +152,55 @@ const TableHeadersetting = () => {
     let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
       (item) => item?.SessionName === 'BookingBilling'
     );
+    let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find(
+      (item) => item?.SessionName === 'BookingNavbar'
+    );
     let AllBillingdetails = AllDetails?.Components?.find(
       (item) => item?.ComponentName === selectedBilling?.ComponentName
     );
-    console.log(AllDetails, AllDetails?.Templates, 'templateresponse');
+    console.log(AllDetails, selectedNavbar, 'templateresponse');
     setBillingSettings(AllBillingdetails);
     const optionIds = selectedBilling?.FieldDetails?.map(
       (item) => item?.OptionId
     );
     setSelectedBillTableCheckValues(optionIds);
-    let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId)
+   
     let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId)
     setTableFontData(Allfontdata)
     let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(item=>item?.SessionId === selectedBilling?.SessionId)
 
     setSelectedTableFont(selectedFont?.FontId)
+    const hasHold = selectedNavbar?.FieldDetails?.some(
+      item => item.OptionName === "Hold"
+    );
+     const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
+      item => item.OptionName === "AddCustomer"
+    );
+     const hasDinein = selectedNavbar?.FieldDetails?.some(
+      item => item.OptionName === "DineIn"
+    );
+    setHoldButton(hasHold)
+    setAddCustomerButton(hasAddcustomer)
+    setDineInChecked(hasDinein)
+  let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "OverallBackground")    
+  setBillingOverallColorsList(allcolordata)
+  let allBackcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "Background") 
+
+  setTableBackgroundColorData(allBackcolordata)
+  let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(item=>item?.SessionName === 'BookingBilling')
+  console.log(selectedcolors, 'selectedOverallBackgroudcolor')
+   selectedcolors?.forEach((item) => {
+          if (item?.['BackgroundColor']) {
+            setSelectedTableColor(item?.['ColorId']);
+          } else if (item?.['OverallBackgroundColor']) {
+            
+            setdropdownBillingOverallColor(item?.['ColorId']);
+           
+          }
+        });
+    // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor);
+    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
+  
     // setTableBackgroundColorData
     console.log(Allfontdata, 'All table colors');
     // BookingBilling templateData?.['BookingBilling']?.[0]
@@ -251,7 +226,7 @@ const TableHeadersetting = () => {
   };
   const selectTableColor = async (value) => {
     await setSelectedTableColor(value);
-    formRef.current?.setFieldsValue({ TableColor: value });
+    // formRef.current?.setFieldsValue({ TableColor: value });
   };
   const BillhandleUploadColor = () => {
     setBillUploadColor(true);
@@ -299,7 +274,8 @@ const TableHeadersetting = () => {
             setMessageData(response?.data?.response);
             // BillsetUploadColor(false);
           }
-         
+         GetTemplatedetails()
+         setBillUploadColor(false)
         } else {
           setMessageData(response?.data?.response);
           setMessageType('error');
@@ -341,54 +317,47 @@ const TableHeadersetting = () => {
   };
   const handleBillingOverallColorSubmit = async () => {
     let response;
-
+ 
-    //   try {
+      try {
-    //     let postData = {
+        let postData = {
-    //       BackgroundColor: BillingOverallColor,
+          BackgroundColor: BillingOverallColor,
-    //       FontColor: '#000000',
+          FontColor: '#000000',
-    //       CreatedBy: getSession('UserId'),
+          CreatedBy:UserId,
-    //       SessionId: BillingTableData[0]?.SessionId,
+          SessionId: billingSettings?.SessionId,
-    //       OptionId: BillTableCheckList[0]?.ComponentOptionsDetails?.filter(
+          OptionId: OverallbackgroundOptionId,
-    //         (item) => item.OptionName == 'OverallBackground'
+        };
-    //       )?.[0]?.OptionId,
+        response = await dispatch(postColorData(postData)).unwrap();
-    //     };
+      } catch (err) {
-    //     response = await dispatch(postColorData(postData)).unwrap();
+        if (err['message'] == 'Request failed with status code 422') {
-    //   } catch (err) {
+          response = {
-    //     if (err['message'] == 'Request failed with status code 422') {
+            data: {
-    //       response = {
+              statusCode: 0,
-    //         data: {
+              response: 'Color Not Added',
-    //           statusCode: 0,
+              data: [],
-    //           response: 'Color Not Added',
+            },
-    //           data: [],
+          };
-    //         },
+        }
-    //       };
+      }
-    //     }
+      if (response?.data?.statusCode == 1) {
-    //   }
+        if (response?.data?.response == 'Color Already Exists') {
-    //   if (response?.data?.statusCode == 1) {
+          setMessageType('warning');
-    //     if (response?.data?.response == 'Color Already Exists') {
+          setMessageData(response?.data?.response);
-    //       setMessageType('warning');
+        } else {
-    //       setMessageData(response?.data?.response);
+          setMessageType('success');
-    //     } else {
+          setMessageData(response?.data?.response);
-    //       setMessageType('success');
+          setBillingUploadOverallColor(false);
-    //       setMessageData(response?.data?.response);
+        }
-    //       setBillingUploadOverallColor(false);
+        GetTemplatedetails()
-    //     }
+        BillingUploadOverallColor(false)
-    //     let OverallBillingdata = {
+      } else {
-    //       SessionID: BillingTableData[0]?.SessionId,
+        setMessageData(response?.data?.response);
-    //       OptionName: 'OverallBackground',
+        setMessageType('error');
-    //     };
+      }
-    //     dispatch(getBillingOverallBackgroundColors(OverallBillingdata)).unwrap;
-    //   } else {
-    //     setMessageData(response?.data?.response);
-    //     setMessageType('error');
-    //   }
   };
   const selectBillingOverallColor = async (value) => {
     await setdropdownBillingOverallColor(value);
-    formRef.current?.setFieldsValue({ BillingOverallColor: value });
+    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
-    let billOverallColorVal = BillingOverallColorsList?.filter(
+  
-      (data) => data?.ColorId === value
-    );
   };
   const openColour4 = (value) => {
     setTableColorType(value);
@@ -440,6 +409,7 @@ const TableHeadersetting = () => {
             }
 
             dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
+            GetTemplatedetails()
             Tableform.resetFields();
           } else {
             setMessageData(response?.data?.response);
@@ -469,7 +439,14 @@ const TableHeadersetting = () => {
       CompId: CompId,
       UserId: UserId,
       BranchId: BranchId,
-      ColorId: TemplateDetails?.[0]?.ColorDetail?.map((c) => c.ColorId),
+      ColorId:  [
+  ...(TemplateDetails?.[0]?.ColorDetail
+    ?.filter(c => c.SessionName !== "BookingBilling")
+    ?.map(c => c.ColorId) || []),
+
+  SelectedTableColor,
+  dropdownBillingOverallColor,
+],
       FontId: TemplateDetails?.[0]?.FontDetail?.map(f =>
             f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId
           ),
@@ -496,8 +473,8 @@ const TableHeadersetting = () => {
               setMessageData('Template Details Added Successfully');
               setFirstOnClick(false);
             }
-            dispatch(changeScanTemplate({}))
+            await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
-    
+            setModalOpen(false)
           } else {
             setMessageType('error');
             setMessageData(response?.data?.response);
@@ -538,7 +515,19 @@ const TableHeadersetting = () => {
                 value={value?.OptionId}
                 // onClick={() => Navholdoption(value.OptionName)}
                 key={value?.OptionId}
-                disabled={value.OptionName === 'Item' ? true : false}
+                disabled={
+                                value.OptionName === 'Hold' && HoldButton
+                                  ? true
+                                  : value.OptionName === 'AddCustomer' &&
+                                    AddCustomerButton
+                                    ? true
+                                    : value.OptionName === 'Item'
+                                      ? true
+                                      : value.OptionName === 'UnpaidBill' &&
+                                        !DineInChecked
+                                        ? true
+                                        : false
+                              }
               >
                 {value.OptionName}
               </Checkbox>
@@ -682,8 +671,8 @@ const TableHeadersetting = () => {
                   label="Color"
                   className="field-DropDown-Selection"
                   onChangeFunction={selectTableColor}
-                  //   isOnchanges={SelectedTableColor ? true : false}
+                    isOnchanges={SelectedTableColor ? true : false}
-                  //   valueData={SelectedTableColor}
+                    valueData={SelectedTableColor}
                 />
               </Form.Item>
             </div>

src/Pages/BookingScreen/Template/SalesCountForStandard.jsx

@@ -60,6 +60,7 @@ import { GoPackageDependencies } from 'react-icons/go';
 import { Messages } from '../../../../ownLib/my-ui-lib.js';
 
 import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx';
+import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx';
 
 const SalesCountForStandard = ({
   DineInAccess,
@@ -830,6 +831,7 @@ const SalesCountForStandard = ({
         </button>
       )}
       {preferenceshortcutkey && <ShortcutKeyHelper />}
+      <AllSalesPageSettings />
       <div style={{ display: 'flex', alignItems: 'center' }}>
         {Customisebillno && <CustomisedInvoiceChange />}
         {SessionData?.FeatureAddonData?.FeatureDtls?.find(