Implement dynamic header and table color functionality

src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx

@@ -6,7 +6,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Form,
   Checkbox,
@@ -69,12 +69,34 @@ import {
   changeSelectedCredit,
   changeSelectedTax,
   changeSelectedHeaderColor,
+  changeSelectedTableHeaderColor,
+  changeSelectedTableBodyColor,
+  changeSelectedFooterColor,
+  changeRowType,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalRowType,
+  changeSelectedNetAmountColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
+  changeSelectedHeaderColour,
+  changeSelectedTableHeaderColour,
+  changeSelectedTableBodyColour,
+  changeSelectedFooterColour,
+  changeSelectedNetAmountColour,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss';
 import { useAuth } from '../../../../AuthContext.jsx';
 import { InputField } from '../../../../Components/Forms/InputField.jsx';
 import ColorPicker from '../../../../Components/Forms/ColorPicker.jsx';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import ColorsSelected from '../UtillComponents/ColorsSelected.jsx';
 
 const subDirectory = import.meta.env.BASE_URL;
 
@@ -92,6 +114,13 @@ const SelectionComponent = forwardRef((props, ref) => {
     }
   };
 
+  // helper to read a color object from the newer `PrintColors` array
+  const getColor = (printColors, key) => {
+    if (!printColors || !Array.isArray(printColors)) return {};
+    const entry = printColors.find((c) => c && c[key]);
+    return entry ? entry[key] : {};
+  };
+
   useImperativeHandle(ref, () => ({
     doSomething,
   }));
@@ -138,6 +167,10 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [isTermscondChecking, setisTermscondChecking] = useState(false);
   const [isSignatureChecking, setisSignatureChecking] = useState(false);
   const [isheadercolour, setisheadercolour] = useState(false);
+  const [isTableHeaderColour, setisTableHeaderColour] = useState(false);
+  const [isTableBodyColour, setisTableBodyColour] = useState(false);
+  const [isFooterColour, setisFooterColour] = useState(false);
+  const [isNetAmountColour, setisNetAmountColour] = useState(false);
   const [showMore, setShowMore] = useState(false);
   const visibleConfigs = showMore ? styleData : styleData.slice(0, 4);
   const defaultImage =
@@ -150,6 +183,25 @@ const SelectionComponent = forwardRef((props, ref) => {
   const [previewTitle, setPreviewTitle] = useState('');
   const [Notes, setNote] = useState('');
   const [BillName, setBillName] = useState('');
+  const [openColorModal, setOpenColorModal] = useState(false);
+  const [bgColor, setBgColor] = useState("#ffffff");
+  const [fontColor, setFontColor] = useState("#000000");
+  const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff");
+  const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer'
+  const rowType = useSelector(GlobalRowType);
+
+  // derived from global store
+  const headerColor = useSelector(GlobalSelectedPrintHeaderColor);
+  const headerFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
+  const tableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
+  const tableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
+  const tableBodyColor = useSelector(GlobalSelectedTableBodyColor);
+  const tableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
+  const footerColor = useSelector(GlobalSelectedFooterColor);
+  const footerFontColor = useSelector(GlobalSelectedFooterFontColor);
+  const netAmountColor = useSelector(GlobalSelectedNetAmountColor);
+  const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
+
 
   const items = [
     {
@@ -358,6 +410,66 @@ const SelectionComponent = forwardRef((props, ref) => {
     );
     setisSignatureChecking(checkedList?.includes(CheckSignature?.ConfigId));
     setisheadercolour(checkedList?.includes(headerColour?.ConfigId));
+    setisTableHeaderColour(
+      checkedList?.includes(
+        sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')
+          ?.ConfigId
+      )
+    );
+    setisTableBodyColour(
+      checkedList?.includes(
+        sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')
+          ?.ConfigId
+      )
+    );
+    setisFooterColour(
+      checkedList?.includes(
+        sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')
+          ?.ConfigId
+      )
+    );
+    setisNetAmountColour(
+      checkedList?.includes(
+        sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')
+          ?.ConfigId
+      )
+    );
+
+    // update global toggle states as well so print components can read them
+    if (checkedList?.includes(headerColour?.ConfigId)) {
+      dispatch(changeSelectedHeaderColour(true));
+    } else {
+      dispatch(changeSelectedHeaderColour(false));
+      dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
+    }
+    const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
+    if (checkedList?.includes(tblHdr2)) {
+      dispatch(changeSelectedTableHeaderColour(true));
+    } else {
+      dispatch(changeSelectedTableHeaderColour(false));
+      dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
+    }
+    const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
+    if (checkedList?.includes(tblBody2)) {
+      dispatch(changeSelectedTableBodyColour(true));
+    } else {
+      dispatch(changeSelectedTableBodyColour(false));
+      dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
+    }
+    const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
+    if (checkedList?.includes(ftr2)) {
+      dispatch(changeSelectedFooterColour(true));
+    } else {
+      dispatch(changeSelectedFooterColour(false));
+      dispatch(changeSelectedFooterColor({ background: '', font: '' }));
+    }
+    const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
+    if (checkedList?.includes(net2)) {
+      dispatch(changeSelectedNetAmountColour(true));
+    } else {
+      dispatch(changeSelectedNetAmountColour(false));
+      dispatch(changeSelectedNetAmountColor({ background: '', font: '' }));
+    }
   };
 
   const fetchInitialData = async () => {
@@ -422,7 +534,30 @@ const SelectionComponent = forwardRef((props, ref) => {
           Signature: item.Signature,
           PrintType: item.PrintType,
           PrintHdrName: item.PrintHdrName,
-          PrintHdrColor: item.PrintHdrColor,
+          // legacy fields are filled from the array so older code still works
+          PrintHdrColor:
+            item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background,
+          PrintHdrFontColor:
+            item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font,
+          TableHeaderColor:
+            item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background,
+          TableHeaderFontColor:
+            item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font,
+          TableBodyColor:
+            item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background,
+          TableBodyFontColor:
+            item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font,
+          footerColor:
+            item.footerColor || getColor(item.PrintColors, 'footerColor')?.background,
+          footerFontColor:
+            item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font,
+          netAmountColor:
+            item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background,
+          netAmountFontColor:
+            item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font,
+          rowType:
+            item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd',
+          PrintColors: item.PrintColors,
           Notes: item?.Notes,
           PageSize: item?.PageSize?.trim() || '3inch',
           PrintTypeId: item?.PrintTypeId,
@@ -474,6 +609,7 @@ const SelectionComponent = forwardRef((props, ref) => {
       OptionDetails,
       PrintTypeId,
       PrintHdrColor,
+      PrintColors
     } = row;
     if (index >= 4) setShowMore(true);
     if (index <= 4) setShowMore(false);
@@ -487,7 +623,11 @@ const SelectionComponent = forwardRef((props, ref) => {
     setNote(Notes);
     setBillName(PrintHdrName);
     setEdit(true);
-    setSelectedColour(PrintHdrColor);
+    // load existing header color, falling back to array
+    setSelectedColour(
+      PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000'
+    );
+    // setSelectedHeaderFontColor(PrintHdrFontColor);
     setSelectedStyleId(StyleId);
 
     if (Signature) {
@@ -538,6 +678,44 @@ const SelectionComponent = forwardRef((props, ref) => {
     dispatch(changeNotes(helperFunction('Notes')));
     dispatch(changeSignatureImage(Signature));
     dispatch(changeBillName(PrintHdrName));
+    // derive color objects; prefer the legacy fields but fall back to the PrintColors array
+    const hdr = getColor(PrintColors, 'headerColor');
+    const tblHdr = getColor(PrintColors, 'tableHeaderColor');
+    const tblBody = getColor(PrintColors, 'tableBodyColor');
+    const ftr = getColor(PrintColors, 'footerColor');
+    const net = getColor(PrintColors, 'netAmtColor');
+
+    dispatch(
+      changeSelectedHeaderColor({
+        background: PrintHdrColor || hdr.background,
+        font: hdr.font,
+      })
+    );
+    dispatch(
+      changeSelectedTableHeaderColor({
+        background: tblHdr.background || row.TableHeaderColor,
+        font: tblHdr.font || row.TableHeaderFontColor,
+      })
+    );
+    dispatch(
+      changeSelectedTableBodyColor({
+        background: tblBody.background || row.TableBodyColor,
+        font: tblBody.font || row.TableBodyFontColor,
+      })
+    );
+    dispatch(changeRowType(tblBody.rowType || row.rowType || 'odd'));
+    dispatch(
+      changeSelectedFooterColor({
+        background: ftr.background || row.footerColor,
+        font: ftr.font || row.footerFontColor,
+      })
+    );
+    dispatch(
+      changeSelectedNetAmountColor({
+        background: net.background || row.netAmountColor,
+        font: net.font || row.netAmountFontColor,
+      })
+    );
     dispatch(
       changeSelectedprintStyle({
         ConfigId: StyleId,
@@ -613,6 +791,8 @@ const SelectionComponent = forwardRef((props, ref) => {
     setSelectedStyleName(
       styleData.find((item) => item.ConfigId === e)?.ConfigName
     );
+    // reset rowType when selecting a new style
+    dispatch(changeRowType('odd'));
     dispatch(
       changeSelectedprintStyle({
         ConfigId: e,
@@ -733,13 +913,42 @@ const SelectionComponent = forwardRef((props, ref) => {
     )
       ? dispatch(changeNotes(true))
       : dispatch(changeNotes(false));
-
+    const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId;
-    checkedValues?.includes(
+    if (checkedValues?.includes(hdrId)) {
-      sizeCheckList.find((item) => item.ConfigName === 'Header Colour')
+      dispatch(changeSelectedHeaderColour(true));
-        ?.ConfigId
+    } else {
-    )
+      dispatch(changeSelectedHeaderColour(false));
-      ? setisheadercolour(true)
+      // reset colours when option disabled
-      : setisheadercolour(false);
+      dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }));
+    }
+    const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId;
+    if (checkedValues?.includes(tblHdrId)) {
+      dispatch(changeSelectedTableHeaderColour(true));
+    } else {
+      dispatch(changeSelectedTableHeaderColour(false));
+      dispatch(changeSelectedTableHeaderColor({ background: '', font: '' }));
+    }
+    const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId;
+    if (checkedValues?.includes(tblBodyId)) {
+      dispatch(changeSelectedTableBodyColour(true));
+    } else {
+      dispatch(changeSelectedTableBodyColour(false));
+      dispatch(changeSelectedTableBodyColor({ background: '', font: '' }));
+    }
+    const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId;
+    if (checkedValues?.includes(ftrId)) {
+      dispatch(changeSelectedFooterColour(true));
+    } else {
+      dispatch(changeSelectedFooterColour(false));
+      dispatch(changeSelectedFooterColor({ background: '', font: '' }));
+    }
+    const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId;
+    if (checkedValues?.includes(netId)) {
+      dispatch(changeSelectedNetAmountColour(true));
+    } else {
+      dispatch(changeSelectedNetAmountColour(false));
+      dispatch(changeSelectedNetAmountColor({ background: '', font: '' }));
+    }
   };
 
   const handleOptions = async () => {
@@ -790,13 +999,28 @@ const SelectionComponent = forwardRef((props, ref) => {
       PrintHdrName: BillName,
       PrintType: PrintType ? 'S' : 'C',
       PrintTypeId: segmentValue,
-      PrintHdrColor: getConcatenatedArray().some(
+      // Header color (background) and font
+      PrintHdrColor: getConcatenatedArray()?.some(
         (e) => e?.ConfigName?.toLowerCase() == 'header colour'
       )
-        ? selectedColour
+        ? (headerColor || selectedColour)
         : null,
+      PrintHdrFontColor: getConcatenatedArray()?.some(
+        (e) => e?.ConfigName?.toLowerCase() == 'header colour'
+      )
+        ? (headerFontColor || selectedHeaderFontColor)
+        : null,
+      // Table header / body / footer / net amount colors
+      TableHeaderColor: tableHeaderColor || null,
+      TableHeaderFontColor: tableHeaderFontColor || null,
+      TableBodyColor: tableBodyColor || null,
+      TableBodyFontColor: tableBodyFontColor || null,
+      footerColor: footerColor || null,
+      footerFontColor: footerFontColor || null,
+      netAmountColor: netAmountColor || null,
+      netAmountFontColor: netAmountFontColor || null,
+      rowType: rowType || 'odd',
     });
-
     // Validation
     if (isSignatureChecking && fileList?.length === 0)
       return message.warning('Please upload Signature');
@@ -865,7 +1089,39 @@ const SelectionComponent = forwardRef((props, ref) => {
             StyleId: item.StyleId,
             SetasDefault: item.SetasDefault,
             SetasDefaultInvoice: item.SetasDefaultInvoice,
-            PrintHdrColor: item.PrintHdrColor,
+            PrintHdrColor: [
+              {
+                headerColor: {
+                  background: item.PrintHdrColor,
+                  font: item.PrintHdrFontColor,
+                },
+              },
+              {
+                tableHeaderColor: {
+                  background: item?.TableHeaderColor,
+                  font: item?.TableHeaderFontColor,
+                },
+              },
+              {
+                tableBodyColor: {
+                  background: item?.TableBodyColor,
+                  font: item?.TableBodyFontColor,
+                  rowType: rowType,
+                },
+              },
+              {
+                footerColor: {
+                  background: item?.footerColor,
+                  font: item?.footerFontColor,
+                },
+              },
+              {
+                netAmtColor: {
+                  background: item?.netAmountColor,
+                  font: item?.netAmountFontColor,
+                },
+              },
+            ],
             PrintTypeId: item?.PrintTypeId,
             SizeDetails: item.OptionDetails.map((item) => ({
               OptionId: item.ConfigId,
@@ -1045,6 +1301,37 @@ const SelectionComponent = forwardRef((props, ref) => {
 
   // }
 
+  const handleColorSave = (colors) => {
+    // common handler called when ColorsSelected modal returns values
+    console.log("Received from modal:", colors);
+    switch (colorModalTarget) {
+      case 'header':
+        dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
+        setSelectedColour(colors.background);
+        setSelectedHeaderFontColor(colors.font);
+        break;
+      case 'tableHeader':
+        dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font }));
+        break;
+      case 'tableBody':
+        dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font }));
+        break;
+      case 'footer':
+        dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font }));
+        break;
+      case 'netAmount':
+        dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font }));
+        break;
+      default:
+        dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font }));
+        break;
+    }
+    // update local previews as well (not strictly necessary if UI reads from store)
+    setBgColor(colors.background);
+    setFontColor(colors.font);
+    setOpenColorModal(false);
+    setColorModalTarget(null);
+  };
   return (
     <>
       <Messages
@@ -1387,21 +1674,215 @@ const SelectionComponent = forwardRef((props, ref) => {
               </div>
             )}
             {isheadercolour && (
-              // {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
               <div style={{ marginTop: '1rem' }}>
                 <Title level={5} style={{ marginBottom: 12 }}>
                   Header Color
                 </Title>
-                <ColorPicker
+                <button
-                  value={selectedColour}
+                  onClick={() => {
-                  onChange={(color) => {
+                    setColorModalTarget('header');
-                    setSelectedColour(color);
+                    setOpenColorModal(true);
-                    dispatch(changeSelectedHeaderColor(color));
+                  }}
+                  className="handleAddBTN"
+                >
+                  <PlusOutlined /> select color
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      backgroundColor: headerColor || '#ffffff',
+                      border: '1px solid #000',
+                      marginLeft: 6,
+                      verticalAlign: 'middle',
                     }}
-                  placeholder="Select color"
                   />
+                  <span
+                    style={{
+                      display: 'inline-block', width: 16, height: 16, backgroundColor: headerFontColor,
+                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                    }}
+                  />
+                </button>
               </div>
             )}
+            {isTableHeaderColour && (
+              <div style={{ marginTop: '1rem' }}>
+                <Title level={5} style={{ marginBottom: 12 }}>
+                  Table Header Colour
+                </Title>
+                <button
+                  onClick={() => {
+                    setColorModalTarget('tableHeader');
+
+                    setOpenColorModal(true);
+                  }}
+                  className="handleAddBTN"
+                >
+                  <PlusOutlined /> select color
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      backgroundColor: tableHeaderColor,
+                      border: '1px solid #000',
+                      marginLeft: 6,
+                      verticalAlign: 'middle',
+                    }}
+                  />
+                  <span
+                    style={{
+                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableHeaderFontColor,
+                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                    }}
+                  />
+                </button>
+              </div>
+            )}
+            {isTableBodyColour && (
+              <div style={{ marginTop: '1rem' }}>
+                <Title level={5} style={{ marginBottom: 12 }}>
+                  Table Body Colour
+                </Title>
+                <button
+                  onClick={() => {
+                    setColorModalTarget('tableBody');
+                    setOpenColorModal(true);
+                  }}
+                  className="handleAddBTN"
+                >
+                  <PlusOutlined /> select color
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      backgroundColor: tableBodyColor,
+                      border: '1px solid #000',
+                      marginLeft: 6,
+                      verticalAlign: 'middle',
+                    }}
+                  />
+                  <span
+                    style={{
+                      display: 'inline-block', width: 16, height: 16, backgroundColor: tableBodyFontColor,
+                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                    }}
+                  />
+                </button>
+
+                 <span style={{ margin: '0px 10px' }} className="handleAddBTN">
+                  <Switch
+                    checked={rowType === "even"}
+                    checkedChildren="Even"
+                    unCheckedChildren="Odd"
+                    onChange={(checked) => dispatch(changeRowType(checked ? "even" : "odd"))}
+                  />
+                </span>
+              </div>
+            )}
+            {isFooterColour && (
+              <div style={{ marginTop: '1rem' }}>
+                <Title level={5} style={{ marginBottom: 12 }}>
+                  Footer Colour
+                </Title>
+                <button
+                  onClick={() => {
+                    setColorModalTarget('footer');
+                    setOpenColorModal(true);
+                  }}
+                  className="handleAddBTN"
+                >
+                  <PlusOutlined /> select color
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      backgroundColor: footerColor || '#ffffff',
+                      border: '1px solid #000',
+                      marginLeft: 6,
+                      verticalAlign: 'middle',
+                    }}
+                  />
+                  <span
+                    style={{
+                      display: 'inline-block', width: 16, height: 16, backgroundColor: footerFontColor || '#000000',
+                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                    }}
+                  />
+                </button>
+              </div>
+            )}
+
+              {isNetAmountColour && (
+              <div style={{ marginTop: '1rem' }}>
+                <Title level={5} style={{ marginBottom: 12 }}>
+                  Net Amount Colour
+                </Title>
+                <button
+                  onClick={() => {
+                    setColorModalTarget('netAmount');
+                    setOpenColorModal(true);
+                  }}
+                  className="handleAddBTN"
+                >
+                  <PlusOutlined /> select color
+                  <span
+                    style={{
+                      display: 'inline-block',
+                      width: 16,
+                      height: 16,
+                      backgroundColor: netAmountColor || '#ffffff',
+                      border: '1px solid #000',
+                      marginLeft: 6,
+                      verticalAlign: 'middle',
+                    }}
+                  />
+                  <span
+                    style={{
+                      display: 'inline-block', width: 16, height: 16, backgroundColor: netAmountFontColor || '#000000',
+                      border: '1px solid #000', marginLeft: 6, verticalAlign: 'middle',
+                    }}
+                  />
+                </button>
+              </div>
+            )}
+            {openColorModal && (
+              <ColorsSelected
+                open={openColorModal}
+                onClose={() => setOpenColorModal(false)}
+                onSave={handleColorSave}
+                initial={{
+                  background:
+                    colorModalTarget === 'header'
+                      ? headerColor
+                      : colorModalTarget === 'tableHeader'
+                        ? tableHeaderColor
+                        : colorModalTarget === 'tableBody'
+                          ? tableBodyColor
+                          : colorModalTarget === 'footer'
+                            ? footerColor
+                            : colorModalTarget === 'netAmount'
+                              ? netAmountColor
+                              : bgColor,
+                  font:
+                    colorModalTarget === 'header'
+                      ? headerFontColor
+                      : colorModalTarget === 'tableHeader'
+                        ? tableHeaderFontColor
+                        : colorModalTarget === 'tableBody'
+                          ? tableBodyFontColor
+                          : colorModalTarget === 'footer'
+                            ? footerFontColor
+                            : colorModalTarget === 'netAmount'
+                              ? netAmountFontColor
+                              : fontColor,
+                }}
+              />
+            )}
+
             {isTermscondChecking && (
               <div style={{ marginTop: '1rem' }}>
                 <Title level={5} style={{ marginBottom: 12 }}>