Implement dynamic header and table color functionality

src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle5.jsx

@@ -29,6 +29,16 @@ import {
   GlobalprintCredit,
   GlobalprintTax,
   GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import {
   GlobalUpiIDprint,
@@ -102,6 +112,16 @@ const PrintStyle5 = ({
   const SettingData = useSelector(PreferenceData);
   const GlobalCashierName = useSelector(GlobalprintCashierName);
   const GlobalLogo = useSelector(GlobalprintLogo);
+  const SelectedHeaderFontColor = useSelector(GlobalSelectedPrintHeaderFontColor);
+  const SelectedTableHeaderColor = useSelector(GlobalSelectedTableHeaderColor);
+  const SelectedTableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor);
+  const SelectedTableBodyColor = useSelector(GlobalSelectedTableBodyColor);
+  const SelectedTableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor);
+  const SelectedRowType = useSelector(GlobalRowType);
+  const SelectedTableFooterColor = useSelector(GlobalSelectedFooterColor);
+  const SelectedTableFooterFontColor = useSelector(GlobalSelectedFooterFontColor);
+  const SelectedNetAmountColor = useSelector(GlobalSelectedNetAmountColor);
+  const SelectedNetAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor);
   const GlobalCredit = useSelector(GlobalprintCredit);
   const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter(
     (i) => i.SettingIdName === 'PrintUom'
@@ -134,8 +154,12 @@ const PrintStyle5 = ({
   );
 
   const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
-
+  let printColors = printDatas?.PrintColors;
-  console.log(GlobalDiscount, Discount, 'Discount');
+  const headerColor = printColors?.find(obj => obj.headerColor)?.headerColor;
+  const tableHeaderColor = printColors?.find(obj => obj.tableHeaderColor)?.tableHeaderColor;
+  const tableBodyColor = printColors?.find(obj => obj.tableBodyColor)?.tableBodyColor;
+  const footerColor = printColors?.find(obj => obj.footerColor)?.footerColor;
+  const netAmtColor = printColors?.find(obj => obj.netAmtColor)?.netAmtColor;
 
   let TermsAndConditions = printDatas?.TermsandConditions;
   let SignatureImg = printDatas?.Signature;
@@ -319,7 +343,51 @@ const PrintStyle5 = ({
       ? paginatedChunks[paginatedChunks.length - 1].length
       : 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == 'A5' ? 2 : 7);
+  const headerStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedHeaderColor
+      : headerColor?.background,
 
+    color: GlobaldummyData
+      ? SelectedHeaderFontColor
+      : headerColor?.font,
+  }
+  const tableHeaderStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableHeaderColor
+      : tableHeaderColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedTableHeaderFontColor
+      : tableHeaderColor?.font,
+  }
+  const tableBodyStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableBodyColor
+      : tableBodyColor?.background,
+    color: GlobaldummyData
+      ? SelectedTableBodyFontColor
+      : tableBodyColor?.font,
+  }
+  const rowtypeStyle = GlobaldummyData ? SelectedRowType : tableBodyColor?.rowType;
+  const footerColorStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedTableFooterColor
+      : footerColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedTableFooterFontColor
+      : footerColor?.font,
+  }
+  const netAmountStyle = {
+    backgroundColor: GlobaldummyData
+      ? SelectedNetAmountColor
+      : netAmtColor?.background,
+
+    color: GlobaldummyData
+      ? SelectedNetAmountFontColor
+      : netAmtColor?.font,
+  }
   return (
     <>
       {FormatTheme ? (
@@ -377,7 +445,7 @@ const PrintStyle5 = ({
                 {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
                   ''
                 ) : (
-                  <div className="PrintStyle5-Head">
+                  <div className="PrintStyle5-Head" style={{ ...headerStyle }}>
                     <div
                       style={{
                         alignItems: 'center',
@@ -405,7 +473,6 @@ const PrintStyle5 = ({
                         style={{
                           fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                           fontWeight: '600',
-                          color: SelectedHeaderColor,
                         }}
                       >
                         {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -532,6 +599,7 @@ const PrintStyle5 = ({
                         fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
                         width: '100%',
                         gap: '0.5rem',
+                        ...tableHeaderStyle
                       }}
                     >
                       {GlobaldummyData
@@ -652,6 +720,11 @@ const PrintStyle5 = ({
                           fontWeight: '600',
                           width: '100%',
                           gap: '0.5rem',
+                          ...(index % 2 === 0 && rowtypeStyle === "even"
+                            ? tableBodyStyle
+                            : index % 2 === 1 && rowtypeStyle === "odd"
+                              ? tableBodyStyle
+                              : {})
                         }}
                       >
                         {GlobaldummyData
@@ -940,6 +1013,7 @@ const PrintStyle5 = ({
                         fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
                         width: '100%',
                         gap: '0.5rem',
+                        ...tableHeaderStyle
                       }}
                     >
                       {GlobaldummyData
@@ -1060,6 +1134,11 @@ const PrintStyle5 = ({
                           fontWeight: '600',
                           width: '100%',
                           gap: '0.5rem',
+                          ...(index % 2 === 0 && rowtypeStyle === "even"
+                            ? tableBodyStyle
+                            : index % 2 === 1 && rowtypeStyle === "odd"
+                              ? tableBodyStyle
+                              : {})
                         }}
                       >
                         {GlobaldummyData
@@ -1444,7 +1523,7 @@ const PrintStyle5 = ({
 
                       <div
                         className="align-style"
-                        style={{ fontWeight: '600', fontSize: '19px' }}
+                        style={{ fontWeight: '600', fontSize: '19px',...netAmountStyle, }}
                       >
                         {' '}
                         <div>Amount </div> <div> : </div>{' '}
@@ -1777,6 +1856,7 @@ const PrintStyle5 = ({
                         pageBreakBefore: 'avoid',
                         pageBreakInside: 'avoid',
                         minHeight: 'auto',
+                        ...footerColorStyle
                       }}
                     >
                       {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
@@ -2191,7 +2271,7 @@ const PrintStyle5 = ({
 
                     <div
                       className="align-style"
-                      style={{ fontWeight: '600', fontSize: '19px' }}
+                      style={{ fontWeight: '600', fontSize: '19px',...netAmountStyle, }}
                     >
                       {' '}
                       <div>Amount </div> <div> : </div>{' '}
@@ -2505,6 +2585,7 @@ const PrintStyle5 = ({
                       pageBreakBefore: 'avoid',
                       pageBreakInside: 'avoid',
                       minHeight: 'auto',
+                      ...footerColorStyle
                     }}
                   >
                     {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
@@ -2711,7 +2792,7 @@ const PrintStyle5 = ({
           {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (
             ''
           ) : (
-            <div className="PrintStyle5-Head">
+            <div className="PrintStyle5-Head" style={{ ...headerStyle }}>
               <div
                 style={{
                   display: 'flex',
@@ -2739,7 +2820,6 @@ const PrintStyle5 = ({
                   style={{
                     fontSize: 'clamp(2rem, 2.5vw, 2rem)',
                     fontWeight: '600',
-                    color: SelectedHeaderColor,
                   }}
                 >
                   {GlobaldummyData ? 'XYZ Shop' : table2Data?.BrName}
@@ -2857,6 +2937,7 @@ const PrintStyle5 = ({
                     fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
                     width: '100%',
                     gap: '0.5rem',
+                    ...tableHeaderStyle
                   }}
                 >
                   {GlobaldummyData
@@ -2976,6 +3057,11 @@ const PrintStyle5 = ({
                         fontWeight: '600',
                         width: '100%',
                         gap: '0.5rem',
+                        ...(index % 2 === 0 && rowtypeStyle === "even"
+                          ? tableBodyStyle
+                          : index % 2 === 1 && rowtypeStyle === "odd"
+                            ? tableBodyStyle
+                            : {})
                       }}
                     >
                       {GlobaldummyData
@@ -3088,17 +3174,17 @@ const PrintStyle5 = ({
                                     {/* 📏 Size + UOM */}
                                     <div>
 
-                                        {UomPrint?.SettingValue === 'Y' && (
+                                      {UomPrint?.SettingValue === 'Y' && (
-                                          <>
+                                        <>
-                                            {item?.Size || "1"}{" "}
+                                          {item?.Size || "1"}{" "}
-                                            {item?.SinglePc === "Y"
+                                          {item?.SinglePc === "Y"
-                                              ? "PCS"
+                                            ? "PCS"
-                                              : item?.Type !== "C"
+                                            : item?.Type !== "C"
-                                                ? item?.UomName
+                                              ? item?.UomName
-                                                : "COMBO"}
+                                              : "COMBO"}
-                                          </>
+                                        </>
-                                        )}
+                                      )}
-                                      </div>
+                                    </div>
 
 
                                     {/* 🏷 Brand */}
@@ -3241,6 +3327,7 @@ const PrintStyle5 = ({
                     fontSize: 'clamp(1rem, 2.5vw, 1.2rem)',
                     width: '100%',
                     gap: '0.5rem',
+                    ...tableHeaderStyle
                   }}
                 >
                   {GlobaldummyData
@@ -3360,6 +3447,11 @@ const PrintStyle5 = ({
                         fontWeight: '600',
                         width: '100%',
                         gap: '0.5rem',
+                        ...(index % 2 === 0 && rowtypeStyle === "even"
+                          ? tableBodyStyle
+                          : index % 2 === 1 && rowtypeStyle === "odd"
+                            ? tableBodyStyle
+                            : {})
                       }}
                     >
                       {GlobaldummyData
@@ -3683,7 +3775,7 @@ const PrintStyle5 = ({
 
               <div
                 className="align-style"
-                style={{ fontWeight: '600', fontSize: '19px' }}
+                style={{...netAmountStyle, fontWeight: '600', fontSize: '19px' }}
               >
                 {' '}
                 <div>Amount </div> <div> : </div>{' '}
@@ -3992,6 +4084,7 @@ const PrintStyle5 = ({
                   pageBreakBefore: 'avoid',
                   pageBreakInside: 'avoid',
                   minHeight: 'auto',
+                  ...footerColorStyle
                 }}
               >
                 {!estimatePrintHeader && table2Data?.OrderType === 'E' ? (