sales page Setting modal Design

2026-02-03 13:52:53 +05:30 · 2026-02-03 13:52:53 +05:30 · 7617a93431
parent 441aab2d70
commit 7617a93431
3 changed files with 458 additions and 410 deletions
--- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
+++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
@ -66,7 +66,9 @@ const AllSalesPageSettings = () => {
              </div>
            )}

-            {selectedComponent === 'Table' && <TableHeadersetting setModalOpen={setsettingModal} />}
+            {selectedComponent === 'Table' && (
+              <TableHeadersetting setModalOpen={setsettingModal} />
+            )}
          </div>
        </div>
      </DefaultModal>
--- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
+++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
@ -92,11 +92,14 @@
  scrollbar-width: thin;
  padding-right: 10px;
  overflow: auto;
- .option-maindiv{
+  .option-maindiv {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }
+  .ant-checkbox-wrapper {
+    padding: 8px !important;
+  }
 }

 .SettingsListSwitchBTN {
@ -157,3 +160,25 @@
    font-size: 16px;
  }
 }
+
+// Table Header Setting CSS start here|||
+
+.SelectionComponentSubHeading {
+  color: #333;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Poppins", sans-serif;
+}
+
+.selctfontBackInputMain {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+}
+.selctfontBackInput {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
--- a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx
+++ b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx
@ -20,8 +20,9 @@ import {
 import { useDispatch } from 'react-redux';
 import Buttons from '../../../../Components/Forms/Buttons';
 import { Messages } from '../../../../Components/Notifications/Messages';
+import './AllSalesPageSettings.scss';

-const TableHeadersetting = ({setModalOpen}) => {
+const TableHeadersetting = ({ setModalOpen }) => {
  const dispatch = useDispatch();
  const SessionData = useSelector(StoredSessionData);
  const AppId = SessionData?.AppId;
@ -45,7 +46,7 @@ const TableHeadersetting = ({setModalOpen}) => {
  const [SelectedTableColor, setSelectedTableColor] = useState(null);
  const [Tableform] = Form.useForm();
  const [billingSettings, setBillingSettings] = useState();
-  console.log(billingSettings,"billingSettingsbillingSettings")
+  console.log(billingSettings, 'billingSettingsbillingSettings');
  const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] =
    useState([]);
  const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find(
@ -65,7 +66,7 @@ const TableHeadersetting = ({setModalOpen}) => {
  // Hold and addcustomer OptionsDetails
  const [HoldButton, setHoldButton] = useState(false);
  const [AddCustomerButton, setAddCustomerButton] = useState(false);
-    const [DineInChecked,setDineInChecked] = useState(false)
+  const [DineInChecked, setDineInChecked] = useState(false);
  console.log(billingSettings, 'billingSettingsbillingSettings');
  const [TableBackgroundColorData, setTableBackgroundColorData] = useState([
    {
@ -152,7 +153,7 @@ const TableHeadersetting = ({setModalOpen}) => {
    let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
      (item) => item?.SessionName === 'BookingBilling'
    );
-    let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find(
+    let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
      (item) => item?.SessionName === 'BookingNavbar'
    );
    let AllBillingdetails = AllDetails?.Components?.find(
@ -165,37 +166,49 @@ const TableHeadersetting = ({setModalOpen}) => {
    );
    setSelectedBillTableCheckValues(optionIds);

-    let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId)
-    setTableFontData(Allfontdata)
-    let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(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)
+    setSelectedTableFont(selectedFont?.FontId);
    const hasHold = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "Hold"
+      (item) => item.OptionName === 'Hold'
    );
    const hasAddcustomer = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "AddCustomer"
+      (item) => item.OptionName === 'AddCustomer'
    );
    const hasDinein = selectedNavbar?.FieldDetails?.some(
-      item => item.OptionName === "DineIn"
+      (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'
    );
-    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')
+    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);
@ -242,7 +255,7 @@ const TableHeadersetting = ({setModalOpen}) => {
    }
  };

-  const handleBackgroundColorSubmit= async () => {
+  const handleBackgroundColorSubmit = async () => {
    if (TablebackgroundColor !== TablefontColor) {
      let response;
      try {
@ -274,8 +287,8 @@ const TableHeadersetting = ({setModalOpen}) => {
          setMessageData(response?.data?.response);
          // BillsetUploadColor(false);
        }
-         GetTemplatedetails()
-         setBillUploadColor(false)
+        GetTemplatedetails();
+        setBillUploadColor(false);
      } else {
        setMessageData(response?.data?.response);
        setMessageType('error');
@ -322,7 +335,7 @@ const TableHeadersetting = ({setModalOpen}) => {
      let postData = {
        BackgroundColor: BillingOverallColor,
        FontColor: '#000000',
-          CreatedBy:UserId,
+        CreatedBy: UserId,
        SessionId: billingSettings?.SessionId,
        OptionId: OverallbackgroundOptionId,
      };
@ -347,8 +360,8 @@ const TableHeadersetting = ({setModalOpen}) => {
        setMessageData(response?.data?.response);
        setBillingUploadOverallColor(false);
      }
-        GetTemplatedetails()
-        BillingUploadOverallColor(false)
+      GetTemplatedetails();
+      BillingUploadOverallColor(false);
    } else {
      setMessageData(response?.data?.response);
      setMessageType('error');
@ -357,7 +370,6 @@ const TableHeadersetting = ({setModalOpen}) => {
  const selectBillingOverallColor = async (value) => {
    await setdropdownBillingOverallColor(value);
    // formRef.current?.setFieldsValue({ BillingOverallColor: value });
-  
  };
  const openColour4 = (value) => {
    setTableColorType(value);
@ -371,7 +383,7 @@ const TableHeadersetting = ({setModalOpen}) => {
    validateFontsTable(values);
  };
  const validateFontsTable = async (values) => {
-    console.log(values,"valuesvalues")
+    console.log(values, 'valuesvalues');
    const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`;
    fetch(apiUrl)
      .then((response) => response.json())
@ -381,7 +393,6 @@ const TableHeadersetting = ({setModalOpen}) => {
        if (fontNames.includes(formatFontName(values['TableFont']))) {
          let response;
          try {
-            
            let postData = {
              SessionFont: formatFontName(values['TableFont']),
              CreatedBy: UserId,
@ -409,7 +420,7 @@ const TableHeadersetting = ({setModalOpen}) => {
            }

            dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap;
-            GetTemplatedetails()
+            GetTemplatedetails();
            Tableform.resetFields();
          } else {
            setMessageData(response?.data?.response);
@ -418,7 +429,6 @@ const TableHeadersetting = ({setModalOpen}) => {
        } else {
          setMessageType('warning');
          setMessageData('Please give the Correct google fonts Name!');
-         
        }
      })
      .catch((error) => {
@ -440,15 +450,15 @@ const TableHeadersetting = ({setModalOpen}) => {
      UserId: UserId,
      BranchId: BranchId,
      ColorId: [
-  ...(TemplateDetails?.[0]?.ColorDetail
-    ?.filter(c => c.SessionName !== "BookingBilling")
-    ?.map(c => c.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
+      ],
+      FontId: TemplateDetails?.[0]?.FontDetail?.map((f) =>
+        f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId
      ),
      CreatedBy: UserId,
      TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({
@ -462,9 +472,7 @@ const TableHeadersetting = ({setModalOpen}) => {
    console.log(result, 'final result to submit');
    var response = await dispatch(putSelectionComponentData(result)).unwrap();
    if (response?.data?.statusCode == 1) {
-            if (
-              response?.data?.response === 'Application Template Already Exists'
-            ) {
+      if (response?.data?.response === 'Application Template Already Exists') {
        setMessageType('warning');
        setMessageData('Application Template Already Exists');
        setFirstOnClick(false);
@ -474,7 +482,7 @@ const TableHeadersetting = ({setModalOpen}) => {
        setFirstOnClick(false);
      }
      await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap();
-            setModalOpen(false)
+      setModalOpen(false);
    } else {
      setMessageType('error');
      setMessageData(response?.data?.response);
@ -518,13 +526,11 @@ const TableHeadersetting = ({setModalOpen}) => {
                disabled={
                  value.OptionName === 'Hold' && HoldButton
                    ? true
-                                  : value.OptionName === 'AddCustomer' &&
-                                    AddCustomerButton
+                    : value.OptionName === 'AddCustomer' && AddCustomerButton
                      ? true
                      : value.OptionName === 'Item'
                        ? true
-                                      : value.OptionName === 'UnpaidBill' &&
-                                        !DineInChecked
+                        : value.OptionName === 'UnpaidBill' && !DineInChecked
                          ? true
                          : false
                }
@ -545,8 +551,17 @@ const TableHeadersetting = ({setModalOpen}) => {
          </div>
        ))} */}
      </div>
-      <div style={{ flex: '0 0 48%' }}>
-        <p style={{ marginBottom: '8px', fontWeight: '500' }}>BillTable Font</p>
+      <div className="selctfontBackInputMain">
+        <div className="selctfontBackInput">
+          <p className="SelectionComponentSubHeading">BillTable Font</p>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              gap: '10px',
+              alignItems: 'center',
+            }}
+          >
            <DropDowns
              options={TableFontData?.map((option) => ({
                value: option.FontId,
@ -568,54 +583,14 @@ const TableHeadersetting = ({setModalOpen}) => {
              />
            </div>
          </div>
-      <DefaultModal
-        open={TableFontModelopen}
-        title="Fonts"
-        footer={true}
-        children={
-          <Form form={Tableform}>
-            <div className="fontInputs">
-              <div>
-                <Form.Item
-                  name="TableFont"
-                  rules={[
-                    {
-                      required: true,
-                      pattern: /^(?!\s*$).+/,
-                      message: 'Please Enter Font',
-                    },
-                    {
-                      validator: async (_, value) => {
-                        await validateSafeInput(value); // To block HTML tags & SQL keywords
-                        return Promise.resolve();
-                      },
-                    },
-                  ]}
-                >
-                  <InputField
-                    field="TableFont"
-                    label="Font"
-                    className="Input"
-                    fieldState={true}
-                    fieldApi={true}
-                    autoComplete="off"
-                  />
-                </Form.Item>
        </div>
-            </div>
-            <p style={{ color: 'red' }}>* Google Fonts Only</p>
-          </Form>
-        }
-        handleCancel={TablehandleCancel}
-        handleSubmit={TablehandleSubmit}
-        buttonText="SAVE"
-      />
+
        {hasBackground ? (
          <div>
            <div
              style={{
                display: 'flex',
-              gap: '1rem',
+                gap: '10px',
                flexWrap: 'nowrap',
                alignItems: 'center',
              }}
@ -630,7 +605,7 @@ const TableHeadersetting = ({setModalOpen}) => {
                    },
                  ]}
                >
-                <p className="Selection-Component-SubHeading">
+                  <p className="SelectionComponentSubHeading">
                    BillTable Background Color
                  </p>
                  <DropDowns
@ -686,6 +661,7 @@ const TableHeadersetting = ({setModalOpen}) => {
            </div>
          </div>
        ) : null}
+
        {hasOverallBackground ? (
          <div>
            <Modal
@ -767,7 +743,7 @@ const TableHeadersetting = ({setModalOpen}) => {
                    },
                  ]}
                >
-                <p className="Selection-Component-SubHeading">
+                  <p className="SelectionComponentSubHeading">
                    BillTable Overall-Background
                  </p>
                  <DropDowns
@ -805,7 +781,9 @@ const TableHeadersetting = ({setModalOpen}) => {
                      ),
                    }))}
                    labelChange={true}
-                  label={<p style={{ fontSize: '11px' }}>Overall Background</p>}
+                    label={
+                      <p style={{ fontSize: '11px' }}>Overall Background</p>
+                    }
                    className="field-DropDown-Selection"
                    onChangeFunction={selectBillingOverallColor}
                    isOnchanges={dropdownBillingOverallColor ? true : false}
@ -826,6 +804,50 @@ const TableHeadersetting = ({setModalOpen}) => {
            </div>
          </div>
        ) : null}
+      </div>
+      <DefaultModal
+        open={TableFontModelopen}
+        title="Fonts"
+        footer={true}
+        children={
+          <Form form={Tableform}>
+            <div className="fontInputs">
+              <div>
+                <Form.Item
+                  name="TableFont"
+                  rules={[
+                    {
+                      required: true,
+                      pattern: /^(?!\s*$).+/,
+                      message: 'Please Enter Font',
+                    },
+                    {
+                      validator: async (_, value) => {
+                        await validateSafeInput(value); // To block HTML tags & SQL keywords
+                        return Promise.resolve();
+                      },
+                    },
+                  ]}
+                >
+                  <InputField
+                    field="TableFont"
+                    label="Font"
+                    className="Input"
+                    fieldState={true}
+                    fieldApi={true}
+                    autoComplete="off"
+                  />
+                </Form.Item>
+              </div>
+            </div>
+            <p style={{ color: 'red' }}>* Google Fonts Only</p>
+          </Form>
+        }
+        handleCancel={TablehandleCancel}
+        handleSubmit={TablehandleSubmit}
+        buttonText="SAVE"
+      />
+
      <Modal
        open={BillUploadColor}
        title="Colors"
@ -935,7 +957,6 @@ const TableHeadersetting = ({setModalOpen}) => {
          icon={<ArrowRightOutlined />}
          htmlType={true}
          handleSubmit={HandleSubmit}
-          
        />
      </div>
    </>