Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintstyle9.jsx

@@ -2,9 +2,20 @@ import React from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import {
-    GlobalPritdummyData,
+  GlobalPritdummyData,
-    changeReprintDataFound,
+  changeReprintDataFound,
-    GlobalprinttermsAndConditions
+  GlobalprinttermsAndConditions,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../Features/ThemeChange/ThemeChange';
 import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle9.scss';
 import { extractLastNumber } from "../../../Services/Others";
@@ -28,11 +39,26 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
   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 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
@@ -71,7 +97,51 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
   }
   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 ?
@@ -80,9 +150,9 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
             <div className={`container print-chunk${chunkIndex > 0 ? ' print-page-break' : ''}`} style={{ display: "flex", flexDirection: "column", justifyContent: ((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme ? "space-between" : "", height: FormatTheme ? PageSize == "A5" ? '170mm' : "257mm" : "", }} key={chunkIndex}>
 
 
-             <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
+              <div className="header" style={{ position: isMobile ? GlobaldummyData ? "absolute" : "fixed" : "", top: 0, width: "100%" }}>
-                <div className="PrintStyle9-print" >
+                <div className="PrintStyle9-print" style={{ ...headerStyle }}>
-                  <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{ table2Data?.[0]?.BrName}</div>
+                  <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{table2Data?.[0]?.BrName}</div>
 
                   <div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}>
                     {GlobaldummyData ?
@@ -94,42 +164,52 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
 
                   <div className='' style={{ textTransform: 'uppercase', fontSize: '11px', fontWeight: '600' }}>{BillName} </div>
                   {/* 
-             <div > 
+                   <div > 
-              {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>}
+                   {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>}
-             <div >  PH : +91 {table2Data?.[0]?.BrMobile}</div>   
+                   <div >  PH : +91 {table2Data?.[0]?.BrMobile}</div>   
-             </div>} */}
+                    </div>} */}
-                  <div >
+                </div>
-                    <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO   :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
+                <div >
-                    <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div>
+                  <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO   :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
-                  </div>
+                  <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div>
                 </div>
-
                 <div className='straight-line9'></div>
 
               </div>
 
               <div style={{ marginTop: "0rem" }} className="print-body">
-                {(TakeawayData?.length > 0 ) &&
+                {(TakeawayData?.length > 0) &&
                   <>
                     <table className="PrintStyle9-print-table">
                       <thead>
                         <tr>
-                          { SLNO && <th style={{ width: '10px' }}>S.No</th>}
+                          {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</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}
-                              { SLNO && <td>{chunkIndex * chunkSize + index + 1}</td>}
+                              style={
-                              { Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
+                                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>
                                 <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}&nbsp;
                                   {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null))
@@ -141,12 +221,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                                       }
                                       ) : ""}</div>
                               </td>}
-                                                     { Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>}
+                              {Quantity && <td style={{ textAlign: 'right' }}>{item?.Qty}</td>}
-                              { HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>}
+                              {HsnCode && <td style={{ textAlign: 'right' }}>{item?.HSN}</td>}
-                              { MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
+                              {MRP && <td style={{ textAlign: 'right' }}>{item?.SinglePc === 'Y' ? item?.Price : item?.MRP}</td>}
-                              { Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
+                              {Discount && <td style={{ textAlign: 'right' }}>{item?.Type != "C" ? item?.OfferAmt || 0 : item?.OfferValue || 0}</td>}
-                              { Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>}
+                              {Rate && <td style={{ textAlign: 'right' }}>{item?.Price}</td>}
-                              { Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
+                              {Amount && <td style={{ textAlign: 'right' }}>{item?.NetAmt?.toFixed(2)}</td>}
                             </tr>
                           )
                         })}
@@ -159,7 +239,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
               {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
                 <>
 
-                  <div style={{ display: 'flex', flexDirection: 'column', }}>
+                  <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
 
 
                     {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
@@ -359,13 +439,14 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {Notestext && (<div>
-                        <p style={{ padding: "0rem 1rem" }}>{Notestext}</p>
+                      <p style={{ padding: "0rem 1rem" }}>{Notestext}</p>
 
-                        <hr className="PrintA4Style11-print-dottline" />
+                      <hr className="PrintA4Style11-print-dottline" />
-                      </div>)
+                    </div>)
                     }
 
 
@@ -422,7 +503,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
               >
                 <>
 
-                  <div style={{ display: 'flex', flexDirection: 'column', }}>
+                  <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
 
 
                     {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
@@ -617,6 +698,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {
@@ -641,7 +723,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                         </div>)
                       }
 
-                      { Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
+                      {Signature == true && (<div style={{ display: "flex", flexDirection: "column", alignItems: "center", marginTop: "1rem", paddingBottom: "1rem" }}>
                         <p style={{ fontSize: "13px", fontWeight: "bold", marginBottom: "6px" }}>Signature</p>
                         <img style={{ width: "100px", height: "60px" }} src={SignatureImg} alt="" />
                       </div>)}
@@ -659,7 +741,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
         :
         <div className="PrintStyle9MasterDiv" id={`SQPrintStyle9`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
 
-          <div className="PrintStyle9-print" >
+          <div className="PrintStyle9-print" style={{ ...headerStyle }} >
             <div style={{ fontSize: 'clamp(1.5rem, 2.5vw, 2rem)', fontWeight: '600' }} className="PrintStyle9-Branch">{GlobaldummyData ? 'XYZ Shop' : table2Data?.[0]?.BrName}</div>
 
             <div style={{ display: 'flex', flexDirection: 'column', fontWeight: '400', fontSize: '11px' }}>
@@ -676,12 +758,12 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
               {table2Data?.BrGSTIN &&<div>GST NO :{table2Data?.BrGSTIN}, CIN :u00045hhsgbubufsdug</div>}
              <div >  PH : +91 {table2Data?.[0]?.BrMobile}</div>   
              </div>} */}
-            <div >
-              <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO   :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
-              <div style={{ fontSize: '12px', fontWeight: '400' }}> { Date1} </div>
-            </div>
-          </div>
 
+          </div>
+          <div >
+            <div style={{ fontSize: '14px', fontWeight: '600' }} > BILL NO   :{table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
+            <div style={{ fontSize: '12px', fontWeight: '400' }}> {Date1} </div>
+          </div>
           <div className='straight-line9'></div>
 
 
@@ -692,22 +774,33 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                 <table className="PrintStyle9-print-table">
                   <thead>
                     <tr>
-                      { SLNO && <th style={{ width: '10px' }}>S.No</th>}
+                      {SLNO && <th style={{ ...tableHeaderStyle, width: '10px' }}>S.No</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}
-                          { SLNO && <td>{index + 1}</td>}
+                          style={
-                          { Item && <td style={{ display: 'flex', flexDirection: 'column' }}>
+                            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>
                             <div>({item?.Size ? item?.Size : "1"} {item?.SinglePc == 'Y' ? 'PCS' : item?.Type != "C" ? item?.UomName : "COMBO"}){item?.BrandName !== null ? item?.BrandName : ""}&nbsp;
                               {item?.ProductIdentifierDtls?.length > 0 ? (item?.ProductIdentifierDtls?.filter((items) => !(items.SerialNumber == "" || items.SerialNumber == null))
@@ -733,7 +826,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
               </>
             }
 
-            <div style={{ display: 'flex', flexDirection: 'column', }}>
+            <div style={{ display: 'flex', flexDirection: 'column',...netAmountStyle }}>
 
 
               {(table2Data?.OverallDisc > 0 || TotalOfferAmount > 0) &&
@@ -772,7 +865,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
 
             <div style={{ display: 'flex', justifyContent: 'space-between' }}>
               <div style={{ fontWeight: '700' }}>Net Amount:</div>
-              <div style={{ fontWeight: '700', marginRight: '0.5rem' }}>{ Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
+              <div style={{ fontWeight: '700', marginRight: '0.5rem' }}>{Number(table2Data?.[0]?.NetAmount).toFixed(2)}</div>
             </div>
 
 
@@ -936,6 +1029,7 @@ const PurPrintStyle9 = ({ index, ExtraChargeTotal, Date1, totalQuantityFilter, C
                 pageBreakBefore: "avoid",
                 pageBreakInside: "avoid",
                 minHeight: "auto",
+                ...footerColorStyle
               }}
             >
               {