Implement dynamic header and table color functionality

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

@@ -25,6 +25,17 @@ import {
   GlobalprintLogo,
   GlobalprintCredit,
   GlobalprintTax,
+  GlobalSelectedPrintHeaderColor,
+  GlobalSelectedPrintHeaderFontColor,
+  GlobalSelectedTableHeaderColor,
+  GlobalSelectedTableHeaderFontColor,
+  GlobalSelectedTableBodyFontColor,
+  GlobalSelectedTableBodyColor,
+  GlobalRowType,
+  GlobalSelectedFooterColor,
+  GlobalSelectedFooterFontColor,
+  GlobalSelectedNetAmountColor,
+  GlobalSelectedNetAmountFontColor,
 } from '../../../../Features/ThemeChange/ThemeChange';
 import Logo from '../../../../Images/Logo.jpg'
 import '../../../../Styles/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle3.scss'
@@ -68,7 +79,6 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
   const GlobalHsnCode = useSelector(GlobalprintHsnCode);
   const GlobalQrcodet = useSelector(GlobalprintQrcodet);
   const GlobaldummyData = useSelector(GlobalPritdummyData);
-  console.log(GlobaldummyData, "GlobaldummyData print3");
   const GlobalSignature = useSelector(GlobalprintSignature);
   const GlobaltermsAndConditions = useSelector(GlobalprinttermsAndConditions);
   const GlobalSignatureImages = useSelector(GlobalSignatureImage);
@@ -79,6 +89,17 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
   const GlobalCashierName = useSelector(GlobalprintCashierName);
   const GlobalLogo = useSelector(GlobalprintLogo);
   const GlobalCredit = useSelector(GlobalprintCredit);
+  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 SettingData = useSelector(PreferenceData);
   const UomPrint = SettingData?.[0]?.SettingDtlDetails?.filter(
     (i) => i.SettingIdName === 'PrintUom'
@@ -106,7 +127,12 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
   const PackageDetails = table2Data?.PackageDtl
 
-  console.log(PackageDetails, 'PackageDetailsPackageDetails',);
+  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;
 
   let PaymentStatusSuccess = PaymentStatus?.filter(ps => ps.PaymentStatus === "S")
   const keysLength = Object.keys(table2Data ?? {}).length;
@@ -208,7 +234,51 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
   }
   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 (
     <>
@@ -219,7 +289,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
               {/* <div className="header" style={{ position: isMobile ? "" : GlobaldummyData ? "absolute" : "fixed", top: 0, width: "100%" }}> */}
               <div className="header" style={{ position: isMobile ? "" : GlobaldummyData ? "absolute" : isPdf ? "static" : "fixed", top: 0, width: "100%" }}>
-                {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div className="PrintStyle3-print" >
+                {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div className="PrintStyle3-print" style={{ ...headerStyle,}} >
                   <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                     {GlobaldummyData && GlobalLogo ? <img className='PrintStyle2-BrandImage' src={Logo} alt='image' width={100} /> : null}
                     {(base64Image && (PrintLogo?.SettingValue === "Y" || LogoField)) ? <img className='PrintStyle2-BrandImage' src={base64Image} alt='image' width={100} /> : null}
@@ -265,7 +335,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
                   {(TakeawayData?.length > 0 || GlobaldummyData) &&
                     <div style={{ width: '95%' }} className="PrintStyle3-print-table">
                       {takeAwayPreference && <div style={{ display: 'flex', width: '100%', justifyContent: 'center', alignItems: "center" }} >TakeAway</div>}
-                      <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
+                      <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
                         {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
                         {GlobaldummyData ? GlobalItem && <div style={{ width: '200%', textAlign: 'left', fontWeight: 600 }}>ITEM</div> : Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>}
                         {GlobaldummyData ? GlobalHsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div> : HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
@@ -279,7 +349,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
                       <div style={{ marginTop: '5px' }}>
                         {dataChunk?.map((item, index) => (
-                          <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
+                          <div style={{
+                            display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem',
+                            ...(index % 2 === 0 && rowtypeStyle === "even"
+                              ? tableBodyStyle
+                              : index % 2 === 1 && rowtypeStyle === "odd"
+                                ? tableBodyStyle
+                                : {})
+                          }}>
                             {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{chunkIndex * chunkSize + index + 1}</div>}
                             {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'left' }}>{item?.ProdName}</div> : Item &&
                               <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
@@ -355,7 +432,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
                   {(DineInData?.length > 0 && dinePreference) &&
                     <div style={{ width: '95%' }} className="PrintStyle3-print-table">
                       <div style={{ display: 'flex', width: '100%', justifyContent: 'center', alignItems: "center" }} >Dine In</div>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
+                      <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
                         {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
                         {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'center', fontWeight: 600 }}>ITEM</div> : Item && <div style={{ width: '300%', textAlign: 'center', fontWeight: 600 }}>ITEM</div>}
                         {GlobaldummyData ? GlobalHsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div> : HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
@@ -369,7 +446,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
                       <div style={{ marginTop: '5px' }}>
                         {dataChunk?.map((item, index) => (
-                          <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
+                          <div style={{
+                            display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem',
+                            ...(index % 2 === 0 && rowtypeStyle === "even"
+                              ? tableBodyStyle
+                              : index % 2 === 1 && rowtypeStyle === "odd"
+                                ? tableBodyStyle
+                                : {})
+                          }}>
                             {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{chunkIndex * chunkSize + index + 1}</div>}
                             {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'left' }}>{item?.ProdName}</div> : Item &&
                               <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
@@ -404,7 +488,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
               {((chunkIndex === paginatedChunks.length - 1) && (!shouldFooterBeOnNewPage)) && FormatTheme &&
 
                 <>
-                  <div className="PrintStyle3-print-ttlovrl">
+                  <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
                     <div>
                       <div style={{ fontWeight: '600' }}> Items :  </div>
                       <div style={{ fontWeight: '600' }}> Qty :  </div>
@@ -719,6 +803,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div>
@@ -804,7 +889,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
                 }}
               >
                 <>
-                  <div className="PrintStyle3-print-ttlovrl">
+                  <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
                     <div>
                       <div style={{ fontWeight: '600' }}> Items :  </div>
                       <div style={{ fontWeight: '600' }}> Qty :  </div>
@@ -1114,6 +1199,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
                       pageBreakBefore: "avoid",
                       pageBreakInside: "avoid",
                       minHeight: "auto",
+                      ...footerColorStyle
                     }}
                   >
                     {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div>
@@ -1183,7 +1269,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
         :
         <div className="PrintStyle3MasterDiv" id={`PrintStyle3-${index}`} style={{ fontFamily: "'Courier New', Courier, monospace" }}>
 
-          {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div className="PrintStyle3-print" >
+          {((!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div className="PrintStyle3-print" style={{ ...headerStyle }}>
             <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
               {GlobaldummyData && GlobalLogo ? <img className='PrintStyle2-BrandImage' src={Logo} alt='image' width={100} /> : null}
               {(base64Image && (PrintLogo?.SettingValue === "Y" || LogoField)) ? <img className='PrintStyle2-BrandImage' src={base64Image} alt='image' width={100} /> : null}
@@ -1225,7 +1311,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
             {(TakeawayData?.length > 0 || GlobaldummyData) &&
               <div style={{ width: '95%' }} className="PrintStyle3-print-table">
                 {takeAwayPreference && <div style={{ display: 'flex', width: '100%', justifyContent: 'center', alignItems: "center" }} >TakeAway</div>}
-                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
+                <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
                   {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
                   {GlobaldummyData ? GlobalItem && <div style={{ width: '200%', textAlign: 'left', fontWeight: 600 }}>ITEM</div> : Item && <div style={{ width: '300%', textAlign: 'left', fontWeight: 600 }}>ITEM</div>}
                   {GlobaldummyData ? GlobalHsnCode && <div style={{ width: '150%', textAlign: 'right', fontWeight: 600 }}>HSN</div> : HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
@@ -1239,7 +1325,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
                 <div style={{ marginTop: '5px' }}>
                   {(GlobaldummyData ? products : TakeawayData)?.map((item, index) => (
-                    <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
+                    <div style={{
+                      display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem',
+                      ...(index % 2 === 0 && rowtypeStyle === "even"
+                        ? tableBodyStyle
+                        : index % 2 === 1 && rowtypeStyle === "odd"
+                          ? tableBodyStyle
+                          : {})
+                    }}>
                       {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{index + 1}</div>}
                       {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'left' }}>{item?.ProdName}</div> : Item &&
                         <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
@@ -1315,7 +1408,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
             {(DineInData?.length > 0 && dinePreference) &&
               <div style={{ width: '95%' }} className="PrintStyle3-print-table">
                 <div style={{ display: 'flex', width: '100%', justifyContent: 'center', alignItems: "center" }} >Dine In</div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
+                <div style={{ ...tableHeaderStyle, display: 'flex', justifyContent: 'space-between', width: '100%', fontweight: '600', gap: '0.2rem' }}>
                   {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>S.No</div>}
                   {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'center', fontWeight: 600 }}>ITEM</div> : Item && <div style={{ width: '300%', textAlign: 'center', fontWeight: 600 }}>ITEM</div>}
                   {GlobaldummyData ? GlobalHsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div> : HsnCode && <div style={{ width: '100%', textAlign: 'right', fontWeight: 600 }}>HSN</div>}
@@ -1329,7 +1422,14 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
 
                 <div style={{ marginTop: '5px' }}>
                   {(GlobaldummyData ? products : DineInData)?.map((item, index) => (
-                    <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem' }}>
+                    <div style={{
+                      display: 'flex', justifyContent: 'space-between', width: '100%', gap: '0.2rem',
+                      ...(index % 2 === 0 && rowtypeStyle === "even"
+                        ? tableBodyStyle
+                        : index % 2 === 1 && rowtypeStyle === "odd"
+                          ? tableBodyStyle
+                          : {})
+                    }}>
                       {GlobaldummyData ? GlobalSlNo && <div style={{ width: '100%', textAlign: 'center' }}>{index + 1}</div> : SLNO && <div style={{ width: '100%', textAlign: 'center', fontWeight: 600 }}>{index + 1}</div>}
                       {GlobaldummyData ? GlobalItem && <div style={{ width: '300%', textAlign: 'left' }}>{item?.ProdName}</div> : Item &&
                         <div style={{ display: 'flex', flexDirection: 'column', width: '300%', textAlign: 'left', fontWeight: 600 }}>
@@ -1359,7 +1459,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
             </div>
           }
           {/* <br/> */}
-          <div className="PrintStyle3-print-ttlovrl">
+          <div className="PrintStyle3-print-ttlovrl" style={{...netAmountStyle}}>
             <div>
               <div style={{ fontWeight: '600' }}> Items :  </div>
               <div style={{ fontWeight: '600' }}> Qty :  </div>
@@ -1670,6 +1770,7 @@ const PrintStyle3 = ({ index, totalQuantityFilter, Date1, CashierName, totalQuan
               pageBreakBefore: "avoid",
               pageBreakInside: "avoid",
               minHeight: "auto",
+              ...footerColorStyle
             }}
           >
             {(!estimatePrintHeader && table2Data?.OrderType === "E") ? '' : <div>