Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle10.jsx

@@ -4,7 +4,18 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   GlobalPritdummyData,
   changeReprintDataFound,
-  GlobalprinttermsAndConditions
+  GlobalprinttermsAndConditions,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../Features/ThemeChange/ThemeChange'
 import "../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.scss";
 
@@ -13,7 +24,7 @@ import { isMobile } from "react-device-detect";
 
 const PurPrintStyle10 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, CashierName, totalQuantity, OrderDetailGST, OrderDetailIGST,
   OrderDetailVAT, table2Data, PaymentStatus, PrintGreeting, printDatas }) => {
-console.log(OrderDetailGST,'OrderDetailGST');
+  console.log(OrderDetailGST, 'OrderDetailGST');
 
   const dispatch = useDispatch();
 
@@ -30,11 +41,26 @@ console.log(OrderDetailGST,'OrderDetailGST');
   const Rate = FieldDetails?.["Rate"];
   const Amount = FieldDetails?.["Amount"];
   const HsnCode = FieldDetails?.["HsnCode"];
-
+  let printColors = printDatas?.PrintColors;
+  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;
 
   const GlobaldummyData = useSelector(GlobalPritdummyData);
   const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
-
+  const SelectedHeaderColor = useSelector(GlobalSelectedPrintHeaderColor);
+  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);
 
   let TermsAndConditions = printDatas?.TermsandConditions
   let SignatureImg = printDatas?.Signature
@@ -75,7 +101,51 @@ console.log(OrderDetailGST,'OrderDetailGST');
   }
   const lastChunkRows = paginatedChunks.length > 0 ? paginatedChunks[paginatedChunks.length - 1].length : 0;
   const shouldFooterBeOnNewPage = lastChunkRows > (PageSize == "A5" ? 5 : 10);
+  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 ?
@@ -89,7 +159,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
 
 
               <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
-                <div className="PrintStyle10-print">
+                <div className="PrintStyle10-print" style={{ ...headerStyle }} >
                   <div className="ShopName"
                     style={{
                       fontWeight: "600",
@@ -124,20 +194,31 @@ console.log(OrderDetailGST,'OrderDetailGST');
                     <table className="PrintStyle10-print-table">
                       <thead>
                         <tr>
-                          {SLNO && <th style={{ width: '10px' }}>S.N</th>}
+                          {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
-                          {Item && <th style={{ width: '10px' }}>Item</th>}
+                          {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
-                          {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
+                          {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
-                          {HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
+                          {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
-                          {MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
+                          {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
-                          {Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
+                          {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
-                          {Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
+                          {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
-                          {Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
+                          {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
                         </tr>
                       </thead>
                       <tbody>
                         {dataChunk?.map((item, index) => {
                           return (
-                            <tr key={index}>
+                            <tr key={index}
+                              style={
+                                index % 2 !== 1 && rowtypeStyle === "even"
+                                  ? {
+                                    ...tableBodyStyle
+                                  }
+                                  : index % 2 === 1 && rowtypeStyle === "odd"
+                                    ? {
+                                      ...tableBodyStyle
+                                    }
+                                    : {}
+                              }>
                               {SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{chunkIndex * chunkSize + index + 1}</td>}
                               {Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
                                 <div>{item?.ProdName}</div>
@@ -179,9 +260,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
                       display: "flex",
                       flexDirection: "column",
                       rowGap: "0.1rem",
-                      fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
+                      fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
-
+                       fontWeight: '600',
-                      , fontWeight: '600'
+                        ...netAmountStyle
                     }}
                   >
                     <div className="PrintStyle10-items" >
@@ -359,6 +440,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {
@@ -428,9 +510,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
                       display: "flex",
                       flexDirection: "column",
                       rowGap: "0.1rem",
-                      fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
+                      fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
-
+                       fontWeight: '600',
-                      , fontWeight: '600'
+                        ...netAmountStyle
                     }}
                   >
                     <div className="PrintStyle10-items" >
@@ -607,6 +689,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {
@@ -651,7 +734,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
           id={`SQPrintStyle10`}
           style={{ fontFamily: "'Courier New', Courier, monospace" }}
         >
-          <div className="PrintStyle10-print">
+          <div className="PrintStyle10-print" style={{ ...headerStyle }}>
             <div className="ShopName"
               style={{
                 fontWeight: "600",
@@ -673,8 +756,6 @@ console.log(OrderDetailGST,'OrderDetailGST');
 
               {<div style={{ textTransform: 'uppercase' }}>{BillName}</div>}
             </div>
-
-
           </div>
           <div style={{ fontSize: '9.27px', fontWeight: '600', textAlign: 'right' }}> {Date1} </div>
           <hr class="straightline" />
@@ -685,20 +766,31 @@ console.log(OrderDetailGST,'OrderDetailGST');
               <table className="PrintStyle10-print-table">
                 <thead>
                   <tr>
-                    {SLNO && <th style={{ width: '10px' }}>S.N</th>}
+                    {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.N</th>}
-                    {Item && <th style={{ width: '10px' }}>Item</th>}
+                    {Item && <th style={{ ...tableHeaderStyle, width: '10px' }}>Item</th>}
-                    {Quantity && <th style={{ width: '10px', textAlign: 'right' }}>Qty</th>}
+                    {Quantity && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Qty</th>}
-                    {HsnCode && <th style={{ width: '10px', textAlign: 'right' }}>HSN</th>}
+                    {HsnCode && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>HSN</th>}
-                    {MRP && <th style={{ width: '10px', textAlign: 'right' }}>MRP</th>}
+                    {MRP && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>MRP</th>}
-                    {Discount && <th style={{ width: '10px', textAlign: 'right' }}>Dis </th>}
+                    {Discount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Dis </th>}
-                    {Rate && <th style={{ width: '10px', textAlign: 'right' }}>Rate</th>}
+                    {Rate && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Rate</th>}
-                    {Amount && <th style={{ width: '10px', textAlign: 'right' }}>Amt</th>}
+                    {Amount && <th style={{ ...tableHeaderStyle, width: '10px', textAlign: 'right' }}>Amt</th>}
                   </tr>
                 </thead>
                 <tbody>
                   {(TakeawayData)?.map((item, index) => {
                     return (
-                      <tr key={index}>
+                      <tr key={index}
+                        style={
+                          index % 2 !== 1 && rowtypeStyle === "even"
+                            ? {
+                              ...tableBodyStyle
+                            }
+                            : index % 2 === 1 && rowtypeStyle === "odd"
+                              ? {
+                                ...tableBodyStyle
+                              }
+                              : {}
+                        }>
                         {SLNO && <td style={{ width: '10px', textAlign: 'center' }} >{index + 1}</td>}
                         {Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
                           <div>{item?.ProdName}</div>
@@ -739,9 +831,9 @@ console.log(OrderDetailGST,'OrderDetailGST');
               display: "flex",
               flexDirection: "column",
               rowGap: "0.1rem",
-              fontSize: "clamp(0.7rem, 2.5vw, 1rem)"
+              fontSize: "clamp(0.7rem, 2.5vw, 1rem)",
-
+              fontWeight: '600',
-              , fontWeight: '600'
+              ...netAmountStyle
             }}
           >
             <div className="PrintStyle10-items" >
@@ -918,6 +1010,7 @@ console.log(OrderDetailGST,'OrderDetailGST');
               pageBreakBefore: "avoid",
               pageBreakInside: "avoid",
               minHeight: "auto",
+              ...footerColorStyle
             }}
           >
             {