Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle11.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/PrintStyle11.scss";
 import { extractLastNumber } from "../../../Services/Others";
@@ -29,11 +40,26 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
   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
@@ -70,7 +96,51 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
   }
   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 ?
@@ -83,7 +153,8 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
 
               {/* <div className="header" style={{ position: "fixed", top: 0, width: "100%" }}> */}
               <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}>
-                <div className="PrintStyle11-print">
+                <div style={{ ...headerStyle }}>
+                  <div className="PrintStyle11-print" style={{ ...headerStyle }}>
                     {base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null}
                     <div>
                       <div style={{
@@ -104,6 +175,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                     </div>
                     <div style={{ fontSize: "11px", fontWeight: '600' }}> MOBILE NO :{table2Data?.[0]?.BrMobile}</div>
                   </div>
+                </div>
                 <hr style={{ margin: '0.1rem 0rem' }} />
                 <div style={{ margin: '0rem 0.5rem', display: 'flex', justifyContent: 'center', fontWeight: '600', textTransform: 'capitalize' }} className='PrintStyle11-print-BillNO' >{BillName} </div>
                 <div style={{ margin: '0rem 0.5rem', fontSize: '14px', fontWeight: '600', }} className='PrintA4Style11-print-BillNO'  >Bill No : {table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
@@ -118,20 +190,31 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                     <table className="PrintStyle11-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>{chunkIndex * chunkSize + index + 1}</td>}
                               {Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
                                 <div>{item?.ProdName}</div>
@@ -165,7 +248,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                 <>
                   <hr className="PrintStyle11-print-dottline" />
                   <div className='PrintStyle11-print-ThirdDiv'>
-                    <div>
+                    <div style={{ ...netAmountStyle}}>
                       <div className='PrintStyle11-print-ThirdDivSub'>
                         <div style={{ display: 'flex', flexDirection: 'column', }}>
                           <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
@@ -344,6 +427,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {
@@ -406,7 +490,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                 <>
                   <hr className="PrintStyle11-print-dottline" />
                   <div className='PrintStyle11-print-ThirdDiv'>
-                    <div>
+                    <div style={{ ...netAmountStyle}}>
                       <div className='PrintStyle11-print-ThirdDivSub'>
                         <div style={{ display: 'flex', flexDirection: 'column', }}>
                           <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
@@ -598,6 +682,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {GlobaldummyData ? GlobalIsnotes &&
@@ -658,7 +743,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
         :
         <div className="PrintStyle11MasterDiv" id={`SQPrintStyle11`} style={{ fontFamily: "'Courier New', Courier, monospace" }}
         >
-          <div className="PrintStyle11-print">
+          <div className="PrintStyle11-print"  style={{ ...headerStyle }}>
             {base64Image ? <img className='PrintStyle11-BrandImage' src={base64Image} alt='image' style={{ width: '40px', height: '40px', }} /> : null}
             <div>
               <div style={{
@@ -674,7 +759,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
             </div>
           </div>
           <hr style={{ margin: '0.1rem 0rem' }} />
-          <div className='PrintStyle11-print-SecondDiv' >
+          <div className='PrintStyle11-print-SecondDiv' style={{ ...headerStyle }} >
             <div style={{ fontSize: "12px", fontWeight: '600' }}>
               {GlobaldummyData ?
                 'BranchAddress, Town- 635XXX City - State' :
@@ -693,20 +778,31 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                 <table className="PrintStyle11-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>{index + 1}</td>}
                           {Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
                             <div>{item?.ProdName}</div>
@@ -736,7 +832,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
 
             <hr className="PrintStyle11-print-dottline" />
             <div className='PrintStyle11-print-ThirdDiv'>
-              <div>
+              <div style={{ ...netAmountStyle}}>
                 <div className='PrintStyle11-print-ThirdDivSub'>
                   <div style={{ display: 'flex', flexDirection: 'column', }}>
                     <div style={{ fontSize: "15px", fontWeight: '600' }}>Qty</div>
@@ -916,6 +1012,7 @@ const PurPrintStyle11 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                 pageBreakBefore: "avoid",
                 pageBreakInside: "avoid",
                 minHeight: "auto",
+                ...footerColorStyle
               }}
             >
               {