Implement dynamic header and table color functionality

src/Pages/PurchaseQuotation/PurchasePrintTemplate/PurPrintStyle12.jsx

@@ -4,21 +4,22 @@ import QrImage from '../../../Images/qrcode.jpg';
 import Logo from '../../../Images/Logo.jpg'
 import { extractLastNumber, extractLastNumberOrderId, printDiv } from '../../../Services/Others';
 import {
-
-
     changeReprintDataFound,
-    GloabalFieldDetails,
-    GlobalprintSignature,
     GlobalprinttermsAndConditions,
-    GlobalSignatureImage,
+    GlobalSelectedPrintHeaderFontColor,
-    Globalnotes,
+    GlobalSelectedTableHeaderColor,
-    GlobalthemeFormat,
+    GlobalSelectedTableHeaderFontColor,
-    GlobalBillName,
+    GlobalSelectedTableBodyColor,
+    GlobalSelectedTableBodyFontColor,
+    GlobalRowType,
+    GlobalSelectedFooterColor,
+    GlobalSelectedFooterFontColor,
+    GlobalSelectedNetAmountColor,
+    GlobalSelectedNetAmountFontColor,
+    GlobalPritdummyData,
+    GlobalSelectedPrintHeaderColor,
 } from '../../../Features/ThemeChange/ThemeChange'
-import { GlobalUpiIDprint } from '../../../Features/BookingScreen/BookingData/BookingData';
 import '../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle12.scss'
-import QRCode from 'react-qr-code';
-import signature from "../../../Images/signatureimage.jpg"
 import { ApplicationPreferences } from '../../../Features/BrachLogin/BranchLogin';
 import { isMobile } from 'react-device-detect';
 
@@ -28,8 +29,19 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
     OrderDetailGST, OrderDetailIGST, OrderDetailVAT, table2Data, PaymentStatus, PrintGreeting, printDatas }) => {
 
     const dispatch = useDispatch();
-    const GlobalUpiID = useSelector(GlobalUpiIDprint)
     // const FieldDetails = useSelector(GloabalFieldDetails);
+    const GlobaldummyData = useSelector(GlobalPritdummyData);
+    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);
 
     const FieldDetails = printDatas?.FieldDetails?.reduce((acc, item) => {
         acc[item.ConfigName] = true;
@@ -44,13 +56,14 @@ const PurPrintStyle12 = ({ 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 GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
-    const appPreferences = useSelector(ApplicationPreferences);
-
-
-
     let TermsAndConditions = printDatas?.TermsandConditions
     let SignatureImg = printDatas?.Signature
     let Notestext = printDatas?.Notes
@@ -229,20 +242,61 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
     const PrintA4 = async () => {
         await printDiv("SQPrintStyle12", style12, 'FontApply');
     };
-    console.log(table2Data, 'Address1');
 
+    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 ?
                     <div id="SQPrintStyle12" onClick={PrintA4} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace", position: "relative", width: "100%", minHeight: isMobile ? (PageSize === "A5" ? "210mm" : "297mm") : "auto" }}>
-
                         {paginatedChunks.map((dataChunk, chunkIndex) => (
                             <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 ? "fixed" : "", top: 0, width: "100%", ...headerStyle }}>
-
-                                <div className="header" style={{ position: isMobile ? "fixed" : "", top: 0, width: "100%" }}>
                                     <div className='PrintStyle12-firstDiv'>
 
                                         <div style={{ display: "flex", flexDirection: "column" }}>
@@ -257,22 +311,15 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                     return <div key={index}>{parts}</div>;
                                                 })}
                                             </div>
-
                                             <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}> Mobile : +91 {table2Data?.customerMobile}</div>
-
-
                                             {
                                                 <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer Name : {table2Data?.customerName}
                                                 </div>
                                             }
-
                                             {table2Data?.CustSuppName && table2Data?.CustSuppName !== undefined && table2Data?.CustSuppName !== null &&
                                                 <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName}
                                                 </div>
                                             }
-
-
-
                                             {table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>}
                                         </div>
                                         <div style={{ display: "flex" }}>  <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div>
@@ -292,19 +339,29 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                 <table className="PrintStyle12-print-table">
                                                     <thead>
                                                         <tr>
-                                                            {SLNO && <th>S.No</th>}
+                                                            {SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>}
-                                                            {Item && <th>Des</th>}
+                                                            {Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
-                                                            {Quantity && <th style={{ textAlign: "right" }}>Qty</th>}
+                                                            {Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>}
-                                                            {MRP && <th style={{ textAlign: 'right' }}>MRP</th>}
+                                                            {MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>}
-                                                            {Rate && <th style={{ textAlign: "right" }}>Rate</th>}
+                                                            {Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>}
-                                                            {HsnCode && <th style={{ textAlign: "right" }}>HSN</th>}
+                                                            {HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>}
-                                                            {Discount && <th style={{ textAlign: 'right' }}>(%)</th>}
+                                                            {Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>}
-                                                            {Amount && <th style={{ textAlign: "right" }}>Amt</th>}
+                                                            {Amount && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Amt</th>}
                                                         </tr>
                                                     </thead>
                                                     <tbody>
                                                         {dataChunk?.map((item, index) => (
-                                                            <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' }}>
@@ -383,7 +440,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                 <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
 
 
-                                                <div style={{ display: "flex", justifyContent: "space-between" }}>
+                                                <div style={{ display: "flex", justifyContent: "space-between" ,...netAmountStyle}}>
                                                     <div style={{ width: '45%', fontWeight: "600" }}>
                                                         Amount
                                                     </div>
@@ -391,9 +448,6 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                     <div style={{ padding: '0rem 1rem', display: "flex", justifyContent: "flex-end", fontWeight: "600", width: '35%' }}>
                                                         {Number(table2Data?.[0]?.NetAmount || 0).toFixed(2)}
                                                     </div>
-
-                                                    {console.log(table2Data?.[0]?.NetAmount, 'table2Data?.NetAmount')
-                                                    }
                                                 </div>
 
                                                 <div>
@@ -562,6 +616,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                 pageBreakBefore: "avoid",
                                                 pageBreakInside: "avoid",
                                                 minHeight: "auto",
+                                                ...footerColorStyle
                                             }}
                                         >
                                             {
@@ -663,7 +718,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                 <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
 
 
-                                                <div style={{ display: "flex", justifyContent: "space-between" }}>
+                                                <div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle }}>
                                                     <div style={{ width: '45%', fontWeight: "600" }}>
                                                         Amount
                                                     </div>
@@ -820,6 +875,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                                 pageBreakBefore: "avoid",
                                                 pageBreakInside: "avoid",
                                                 minHeight: "auto",
+                                                ...footerColorStyle
                                             }}
                                         >
                                             {
@@ -861,14 +917,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                             </div>
                         }
 
-                    </div>
+                    </div> :
-
-
-                    :
                     <div id={`SQPrintStyle12`} className='PrintStyle12MasterDiv' style={{ fontFamily: "'Courier New', Courier, monospace" }}>
-                        <div className='PrintStyle12-firstDiv'>
+                        <div className='PrintStyle12-firstDiv' style={{ ...headerStyle }}>
-
-                            {/* <h3>{table2Data?.BrName}</h3> */}
                             <div style={{ display: "flex", flexDirection: "column" }}>
                                 <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px dashed rgb(0, 0, 0)' }} />
 
@@ -886,19 +937,9 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                     <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)" }}>Customer : {table2Data?.CustSuppName}
                                     </div>
                                 }
-
-
-                                {table2Data?.BookingTypeName == 'Dine In' &&
-                                    <div>
-                                        Waiter : {table2Data?.SalesTableLinkDetails?.[0]?.WaiterName}
-                                    </div>}
-                                {table2Data?.OrderType === "E" && <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", fontWeight: '600' }}>Estimate </div>}
                             </div>
                             <div style={{ display: "flex" }}>  <img style={{ width: "60px", height: "60px" }} src={base64Image} alt='image' /></div>
                         </div>
-                        {/* <div style={{ display: "flex", justifyContent: "left", marginTop: '5px' }}>
-          <p style={{ marginTop: '5px', padding: 0, fontSize: "17px", fontWeight: "600" }}>{table2Data?.PaymentTypeName} &nbsp;Payment : &nbsp;{Number(table2Data?.NetAmount).toFixed(2)}/- </p>
-        </div> */}
                         <div className='PrintStyle12-SecondDiv'>
                             <div style={{ fontWeight: '600', fontSize: "clamp(0.9286rem, 2.5vw, 1rem)" }}>Bill No :  {table2Data?.[0]?.QuotationNo && extractLastNumber(table2Data?.[0]?.QuotationNo)}</div>
                             <div style={{ fontSize: "clamp(0.75rem, 2.5vw, 1rem)", padding: '0 1rem' }}>{Date1}</div>
@@ -913,20 +954,30 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                     <table className="PrintStyle12-print-table">
                                         <thead>
                                             <tr>
-                                                {SLNO && <th>S.No</th>}
+                                                {SLNO && <th style={{ ...tableHeaderStyle }}>S.No</th>}
-                                                {Item && <th>Des</th>}
+                                                {Item && <th style={{ ...tableHeaderStyle }}>Des</th>}
-                                                {Quantity && <th style={{ textAlign: "right" }}>Qty</th>}
+                                                {Quantity && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Qty</th>}
-                                                {MRP && <th style={{ textAlign: 'right' }}>MRP</th>}
+                                                {MRP && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>MRP</th>}
-                                                {Rate && <th style={{ textAlign: "right" }}>Rate</th>}
+                                                {Rate && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>Rate</th>}
-                                                {HsnCode && <th style={{ textAlign: "right" }}>HSN</th>}
+                                                {HsnCode && <th style={{ ...tableHeaderStyle, textAlign: "right" }}>HSN</th>}
-                                                {Discount && <th style={{ textAlign: 'right' }}>(%)</th>}
+                                                {Discount && <th style={{ ...tableHeaderStyle, textAlign: 'right' }}>(%)</th>}
-                                                {Amount && <th style={{ textAlign: "right" }}>Amt</th>}
+                                                {Amount && <th style={{ ...tableHeaderStyle, 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' }}>
@@ -1010,7 +1061,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                 <hr style={{ width: '100%', borderWidth: '0.7px', borderTop: '0.5px solid rgb(0, 0, 0)' }} />
 
 
-                                <div style={{ display: "flex", justifyContent: "space-between" }}>
+                                <div style={{ display: "flex", justifyContent: "space-between",...netAmountStyle}}>
                                     <div style={{ width: '45%', fontWeight: "600" }}>
                                         Amount
                                     </div>
@@ -1173,6 +1224,7 @@ const PurPrintStyle12 = ({ index, ExtraChargeTotal, Date1, base64Image, totalQua
                                 pageBreakBefore: "avoid",
                                 pageBreakInside: "avoid",
                                 minHeight: "auto",
+                                ...footerColorStyle
                             }}
                         >
                             {