From 47745687eed37592a6166ddd98e1cbad582f8eb2 Mon Sep 17 00:00:00 2001 From: Srinath Date: Wed, 4 Mar 2026 16:32:27 +0530 Subject: [PATCH] Implement dynamic header and table color functionality --- .../ThermalPrinter/PrintStyle10.jsx | 280 +++++++++++++----- 1 file changed, 198 insertions(+), 82 deletions(-) diff --git a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx index cf0ae0d..6e26caf 100644 --- a/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx +++ b/src/Pages/BookingScreen/PrintTemplates/ThermalPrinter/PrintStyle10.jsx @@ -28,6 +28,16 @@ import { GlobalprintCredit, GlobalprintTax, GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedTableBodyColor, + GlobalRowType, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, } from '../../../../Features/ThemeChange/ThemeChange'; import { GlobalUpiIDprint, @@ -131,6 +141,22 @@ const PrintStyle10 = ({ (ps) => ps.PaymentTypeName === 'UPI' ); 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 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 isEditedBill = PaymentStatus?.some((payment) => { const type = payment?.AdjustmentType?.toLowerCase(); @@ -349,7 +375,51 @@ const PrintStyle10 = ({ ? 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 ? ( @@ -407,7 +477,7 @@ const PrintStyle10 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobalLogo && GlobaldummyData ? ( @@ -433,7 +503,6 @@ const PrintStyle10 = ({ className="ShopName" style={{ fontWeight: '600', - color: SelectedHeaderColor, }} > {GlobaldummyData @@ -541,25 +610,25 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -567,14 +636,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -582,14 +651,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -597,14 +666,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -612,7 +681,7 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -620,7 +689,7 @@ const PrintStyle10 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -628,14 +697,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -643,14 +712,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -660,7 +729,18 @@ const PrintStyle10 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( {GlobaldummyData ? GlobalSlNo && ( - S.N + S.N ) - : SLNO && S.N} + : SLNO && S.N} {GlobaldummyData ? GlobalItem && ( - Item + Item ) - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( Qty ) : Quantity && ( {WeightasKg ? 'Qty/Kg' : 'Qty'} @@ -898,14 +978,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalHsnCode && ( HSN ) : HsnCode && ( HSN @@ -913,14 +993,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalMRP && ( MRP ) : MRP && ( MRP @@ -928,14 +1008,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalDiscount && ( Dis{' '} ) : Discount && ( Dis{' '} @@ -943,7 +1023,7 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalTax && ( Tax %{' '} @@ -951,7 +1031,7 @@ const PrintStyle10 = ({ : Tax && table2Data?.OrderType !== 'E' && ( Tax %{' '} @@ -959,14 +1039,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalRate && ( Rate ) : Rate && ( Rate @@ -974,14 +1054,14 @@ const PrintStyle10 = ({ {GlobaldummyData ? GlobalAmount && ( Amt ) : Amount && ( Amt @@ -991,7 +1071,18 @@ const PrintStyle10 = ({ {dataChunk?.map((item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( @@ -1898,6 +1989,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -2118,7 +2210,7 @@ const PrintStyle10 = ({ flexDirection: 'column', rowGap: '0.1rem', fontSize: 'clamp(0.7rem, 2.5vw, 1rem)', - + ...netAmountStyle, fontWeight: '600', }} > @@ -2840,6 +2932,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData @@ -3036,7 +3129,7 @@ const PrintStyle10 = ({ {!estimatePrintHeader && table2Data?.OrderType === 'E' ? ( '' ) : ( -
+
{GlobalLogo && GlobaldummyData ? ( @@ -3060,7 +3153,7 @@ const PrintStyle10 = ({
{GlobaldummyData ? 'ABC Shop' : table2Data?.BrName}{' '}
@@ -3152,86 +3245,86 @@ const PrintStyle10 = ({ {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData - ? GlobalItem && Item - : Item && Item} + ? GlobalItem && Item + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) : Discount && ( - + Dis{' '} )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3241,7 +3334,18 @@ const PrintStyle10 = ({ {(GlobaldummyData ? products : TakeawayData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && ( {GlobaldummyData - ? GlobalSlNo && S.N - : SLNO && S.N} + ? GlobalSlNo && S.N + : SLNO && S.N} {GlobaldummyData ? GlobalItem && Item - : Item && Item} + : Item && Item} {GlobaldummyData ? GlobalQuantity && ( - + Qty ) : Quantity && ( - + {WeightasKg ? 'Qty/Kg' : 'Qty'} )} {GlobaldummyData ? GlobalHsnCode && ( - + HSN ) : HsnCode && ( - + HSN )} {GlobaldummyData ? GlobalMRP && ( - + MRP ) : MRP && ( - + MRP )} {GlobaldummyData ? GlobalDiscount && ( - + Dis{' '} ) @@ -3511,35 +3615,35 @@ const PrintStyle10 = ({ )} {GlobaldummyData ? GlobalTax && ( - + Tax %{' '} ) : Tax && table2Data?.OrderType !== 'E' && ( - + Tax %{' '} )} {GlobaldummyData ? GlobalRate && ( - + Rate ) : Rate && ( - + Rate )} {GlobaldummyData ? GlobalAmount && ( - + Amt ) : Amount && ( - + Amt )} @@ -3549,7 +3653,18 @@ const PrintStyle10 = ({ {(GlobaldummyData ? products : DineInData)?.map( (item, index) => { return ( - + {GlobaldummyData ? GlobalSlNo && (
@@ -3739,7 +3854,7 @@ const PrintStyle10 = ({
{Number(DineInTotal).toFixed(2)}
)} -
+
Amount :
{GlobaldummyData @@ -4381,6 +4496,7 @@ const PrintStyle10 = ({ pageBreakBefore: 'avoid', pageBreakInside: 'avoid', minHeight: 'auto', + ...footerColorStyle }} > {GlobaldummyData