diff --git a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx index 7bb7913..6945e2b 100644 --- a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx +++ b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx @@ -6,7 +6,7 @@ import React, { forwardRef, useImperativeHandle, } from 'react'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; import { Form, Checkbox, @@ -69,12 +69,34 @@ import { changeSelectedCredit, changeSelectedTax, changeSelectedHeaderColor, + changeSelectedTableHeaderColor, + changeSelectedTableBodyColor, + changeSelectedFooterColor, + changeRowType, + GlobalSelectedPrintHeaderColor, + GlobalSelectedPrintHeaderFontColor, + GlobalSelectedTableHeaderColor, + GlobalSelectedTableHeaderFontColor, + GlobalSelectedTableBodyColor, + GlobalSelectedTableBodyFontColor, + GlobalSelectedFooterColor, + GlobalSelectedFooterFontColor, + GlobalRowType, + changeSelectedNetAmountColor, + GlobalSelectedNetAmountColor, + GlobalSelectedNetAmountFontColor, + changeSelectedHeaderColour, + changeSelectedTableHeaderColour, + changeSelectedTableBodyColour, + changeSelectedFooterColour, + changeSelectedNetAmountColour, } from '../../../../Features/ThemeChange/ThemeChange'; import '../../../../Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss'; import { useAuth } from '../../../../AuthContext.jsx'; import { InputField } from '../../../../Components/Forms/InputField.jsx'; import ColorPicker from '../../../../Components/Forms/ColorPicker.jsx'; import { FaChevronDown, FaChevronUp } from 'react-icons/fa'; +import ColorsSelected from '../UtillComponents/ColorsSelected.jsx'; const subDirectory = import.meta.env.BASE_URL; @@ -92,6 +114,13 @@ const SelectionComponent = forwardRef((props, ref) => { } }; + // helper to read a color object from the newer `PrintColors` array + const getColor = (printColors, key) => { + if (!printColors || !Array.isArray(printColors)) return {}; + const entry = printColors.find((c) => c && c[key]); + return entry ? entry[key] : {}; + }; + useImperativeHandle(ref, () => ({ doSomething, })); @@ -138,6 +167,10 @@ const SelectionComponent = forwardRef((props, ref) => { const [isTermscondChecking, setisTermscondChecking] = useState(false); const [isSignatureChecking, setisSignatureChecking] = useState(false); const [isheadercolour, setisheadercolour] = useState(false); + const [isTableHeaderColour, setisTableHeaderColour] = useState(false); + const [isTableBodyColour, setisTableBodyColour] = useState(false); + const [isFooterColour, setisFooterColour] = useState(false); + const [isNetAmountColour, setisNetAmountColour] = useState(false); const [showMore, setShowMore] = useState(false); const visibleConfigs = showMore ? styleData : styleData.slice(0, 4); const defaultImage = @@ -150,6 +183,25 @@ const SelectionComponent = forwardRef((props, ref) => { const [previewTitle, setPreviewTitle] = useState(''); const [Notes, setNote] = useState(''); const [BillName, setBillName] = useState(''); + const [openColorModal, setOpenColorModal] = useState(false); + const [bgColor, setBgColor] = useState("#ffffff"); + const [fontColor, setFontColor] = useState("#000000"); + const [selectedHeaderFontColor, setSelectedHeaderFontColor] = useState("#ffffff"); + const [colorModalTarget, setColorModalTarget] = useState(null); // 'header' | 'tableHeader' | 'tableBody' | 'footer' + const rowType = useSelector(GlobalRowType); + + // derived from global store + const headerColor = useSelector(GlobalSelectedPrintHeaderColor); + const headerFontColor = useSelector(GlobalSelectedPrintHeaderFontColor); + const tableHeaderColor = useSelector(GlobalSelectedTableHeaderColor); + const tableHeaderFontColor = useSelector(GlobalSelectedTableHeaderFontColor); + const tableBodyColor = useSelector(GlobalSelectedTableBodyColor); + const tableBodyFontColor = useSelector(GlobalSelectedTableBodyFontColor); + const footerColor = useSelector(GlobalSelectedFooterColor); + const footerFontColor = useSelector(GlobalSelectedFooterFontColor); + const netAmountColor = useSelector(GlobalSelectedNetAmountColor); + const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); + const items = [ { @@ -358,6 +410,66 @@ const SelectionComponent = forwardRef((props, ref) => { ); setisSignatureChecking(checkedList?.includes(CheckSignature?.ConfigId)); setisheadercolour(checkedList?.includes(headerColour?.ConfigId)); + setisTableHeaderColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour') + ?.ConfigId + ) + ); + setisTableBodyColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour') + ?.ConfigId + ) + ); + setisFooterColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Footer Colour') + ?.ConfigId + ) + ); + setisNetAmountColour( + checkedList?.includes( + sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour') + ?.ConfigId + ) + ); + + // update global toggle states as well so print components can read them + if (checkedList?.includes(headerColour?.ConfigId)) { + dispatch(changeSelectedHeaderColour(true)); + } else { + dispatch(changeSelectedHeaderColour(false)); + dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + } + const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + if (checkedList?.includes(tblHdr2)) { + dispatch(changeSelectedTableHeaderColour(true)); + } else { + dispatch(changeSelectedTableHeaderColour(false)); + dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); + } + const tblBody2 = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + if (checkedList?.includes(tblBody2)) { + dispatch(changeSelectedTableBodyColour(true)); + } else { + dispatch(changeSelectedTableBodyColour(false)); + dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); + } + const ftr2 = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + if (checkedList?.includes(ftr2)) { + dispatch(changeSelectedFooterColour(true)); + } else { + dispatch(changeSelectedFooterColour(false)); + dispatch(changeSelectedFooterColor({ background: '', font: '' })); + } + const net2 = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + if (checkedList?.includes(net2)) { + dispatch(changeSelectedNetAmountColour(true)); + } else { + dispatch(changeSelectedNetAmountColour(false)); + dispatch(changeSelectedNetAmountColor({ background: '', font: '' })); + } }; const fetchInitialData = async () => { @@ -422,7 +534,30 @@ const SelectionComponent = forwardRef((props, ref) => { Signature: item.Signature, PrintType: item.PrintType, PrintHdrName: item.PrintHdrName, - PrintHdrColor: item.PrintHdrColor, + // legacy fields are filled from the array so older code still works + PrintHdrColor: + item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background, + PrintHdrFontColor: + item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font, + TableHeaderColor: + item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background, + TableHeaderFontColor: + item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font, + TableBodyColor: + item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background, + TableBodyFontColor: + item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font, + footerColor: + item.footerColor || getColor(item.PrintColors, 'footerColor')?.background, + footerFontColor: + item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font, + netAmountColor: + item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background, + netAmountFontColor: + item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font, + rowType: + item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd', + PrintColors: item.PrintColors, Notes: item?.Notes, PageSize: item?.PageSize?.trim() || '3inch', PrintTypeId: item?.PrintTypeId, @@ -474,6 +609,7 @@ const SelectionComponent = forwardRef((props, ref) => { OptionDetails, PrintTypeId, PrintHdrColor, + PrintColors } = row; if (index >= 4) setShowMore(true); if (index <= 4) setShowMore(false); @@ -487,7 +623,11 @@ const SelectionComponent = forwardRef((props, ref) => { setNote(Notes); setBillName(PrintHdrName); setEdit(true); - setSelectedColour(PrintHdrColor); + // load existing header color, falling back to array + setSelectedColour( + PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000' + ); + // setSelectedHeaderFontColor(PrintHdrFontColor); setSelectedStyleId(StyleId); if (Signature) { @@ -538,6 +678,44 @@ const SelectionComponent = forwardRef((props, ref) => { dispatch(changeNotes(helperFunction('Notes'))); dispatch(changeSignatureImage(Signature)); dispatch(changeBillName(PrintHdrName)); + // derive color objects; prefer the legacy fields but fall back to the PrintColors array + const hdr = getColor(PrintColors, 'headerColor'); + const tblHdr = getColor(PrintColors, 'tableHeaderColor'); + const tblBody = getColor(PrintColors, 'tableBodyColor'); + const ftr = getColor(PrintColors, 'footerColor'); + const net = getColor(PrintColors, 'netAmtColor'); + + dispatch( + changeSelectedHeaderColor({ + background: PrintHdrColor || hdr.background, + font: hdr.font, + }) + ); + dispatch( + changeSelectedTableHeaderColor({ + background: tblHdr.background || row.TableHeaderColor, + font: tblHdr.font || row.TableHeaderFontColor, + }) + ); + dispatch( + changeSelectedTableBodyColor({ + background: tblBody.background || row.TableBodyColor, + font: tblBody.font || row.TableBodyFontColor, + }) + ); + dispatch(changeRowType(tblBody.rowType || row.rowType || 'odd')); + dispatch( + changeSelectedFooterColor({ + background: ftr.background || row.footerColor, + font: ftr.font || row.footerFontColor, + }) + ); + dispatch( + changeSelectedNetAmountColor({ + background: net.background || row.netAmountColor, + font: net.font || row.netAmountFontColor, + }) + ); dispatch( changeSelectedprintStyle({ ConfigId: StyleId, @@ -613,6 +791,8 @@ const SelectionComponent = forwardRef((props, ref) => { setSelectedStyleName( styleData.find((item) => item.ConfigId === e)?.ConfigName ); + // reset rowType when selecting a new style + dispatch(changeRowType('odd')); dispatch( changeSelectedprintStyle({ ConfigId: e, @@ -733,13 +913,42 @@ const SelectionComponent = forwardRef((props, ref) => { ) ? dispatch(changeNotes(true)) : dispatch(changeNotes(false)); - - checkedValues?.includes( - sizeCheckList.find((item) => item.ConfigName === 'Header Colour') - ?.ConfigId - ) - ? setisheadercolour(true) - : setisheadercolour(false); + const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId; + if (checkedValues?.includes(hdrId)) { + dispatch(changeSelectedHeaderColour(true)); + } else { + dispatch(changeSelectedHeaderColour(false)); + // reset colours when option disabled + dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + } + const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + if (checkedValues?.includes(tblHdrId)) { + dispatch(changeSelectedTableHeaderColour(true)); + } else { + dispatch(changeSelectedTableHeaderColour(false)); + dispatch(changeSelectedTableHeaderColor({ background: '', font: '' })); + } + const tblBodyId = sizeCheckList.find((item) => item.ConfigName === 'Table Body Colour')?.ConfigId; + if (checkedValues?.includes(tblBodyId)) { + dispatch(changeSelectedTableBodyColour(true)); + } else { + dispatch(changeSelectedTableBodyColour(false)); + dispatch(changeSelectedTableBodyColor({ background: '', font: '' })); + } + const ftrId = sizeCheckList.find((item) => item.ConfigName === 'Footer Colour')?.ConfigId; + if (checkedValues?.includes(ftrId)) { + dispatch(changeSelectedFooterColour(true)); + } else { + dispatch(changeSelectedFooterColour(false)); + dispatch(changeSelectedFooterColor({ background: '', font: '' })); + } + const netId = sizeCheckList.find((item) => item.ConfigName === 'Net Amount Colour')?.ConfigId; + if (checkedValues?.includes(netId)) { + dispatch(changeSelectedNetAmountColour(true)); + } else { + dispatch(changeSelectedNetAmountColour(false)); + dispatch(changeSelectedNetAmountColor({ background: '', font: '' })); + } }; const handleOptions = async () => { @@ -790,13 +999,28 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrName: BillName, PrintType: PrintType ? 'S' : 'C', PrintTypeId: segmentValue, - PrintHdrColor: getConcatenatedArray().some( + // Header color (background) and font + PrintHdrColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? selectedColour + ? (headerColor || selectedColour) : null, + PrintHdrFontColor: getConcatenatedArray()?.some( + (e) => e?.ConfigName?.toLowerCase() == 'header colour' + ) + ? (headerFontColor || selectedHeaderFontColor) + : null, + // Table header / body / footer / net amount colors + TableHeaderColor: tableHeaderColor || null, + TableHeaderFontColor: tableHeaderFontColor || null, + TableBodyColor: tableBodyColor || null, + TableBodyFontColor: tableBodyFontColor || null, + footerColor: footerColor || null, + footerFontColor: footerFontColor || null, + netAmountColor: netAmountColor || null, + netAmountFontColor: netAmountFontColor || null, + rowType: rowType || 'odd', }); - // Validation if (isSignatureChecking && fileList?.length === 0) return message.warning('Please upload Signature'); @@ -865,7 +1089,39 @@ const SelectionComponent = forwardRef((props, ref) => { StyleId: item.StyleId, SetasDefault: item.SetasDefault, SetasDefaultInvoice: item.SetasDefaultInvoice, - PrintHdrColor: item.PrintHdrColor, + PrintHdrColor: [ + { + headerColor: { + background: item.PrintHdrColor, + font: item.PrintHdrFontColor, + }, + }, + { + tableHeaderColor: { + background: item?.TableHeaderColor, + font: item?.TableHeaderFontColor, + }, + }, + { + tableBodyColor: { + background: item?.TableBodyColor, + font: item?.TableBodyFontColor, + rowType: rowType, + }, + }, + { + footerColor: { + background: item?.footerColor, + font: item?.footerFontColor, + }, + }, + { + netAmtColor: { + background: item?.netAmountColor, + font: item?.netAmountFontColor, + }, + }, + ], PrintTypeId: item?.PrintTypeId, SizeDetails: item.OptionDetails.map((item) => ({ OptionId: item.ConfigId, @@ -1045,6 +1301,37 @@ const SelectionComponent = forwardRef((props, ref) => { // } + const handleColorSave = (colors) => { + // common handler called when ColorsSelected modal returns values + console.log("Received from modal:", colors); + switch (colorModalTarget) { + case 'header': + dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + setSelectedColour(colors.background); + setSelectedHeaderFontColor(colors.font); + break; + case 'tableHeader': + dispatch(changeSelectedTableHeaderColor({ background: colors.background, font: colors.font })); + break; + case 'tableBody': + dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font })); + break; + case 'footer': + dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font })); + break; + case 'netAmount': + dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font })); + break; + default: + dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + break; + } + // update local previews as well (not strictly necessary if UI reads from store) + setBgColor(colors.background); + setFontColor(colors.font); + setOpenColorModal(false); + setColorModalTarget(null); + }; return ( <> { )} {isheadercolour && ( - // {isheadercolour && SelectedStyleName == 'TaxInvoice' && (
Header Color - { - setSelectedColour(color); - dispatch(changeSelectedHeaderColor(color)); +
)} + {isTableHeaderColour && ( +
+ + Table Header Colour + + +
+ )} + {isTableBodyColour && ( +
+ + Table Body Colour + + + + + dispatch(changeRowType(checked ? "even" : "odd"))} + /> + +
+ )} + {isFooterColour && ( +
+ + Footer Colour + + +
+ )} + + {isNetAmountColour && ( +
+ + Net Amount Colour + + +
+ )} + {openColorModal && ( + setOpenColorModal(false)} + onSave={handleColorSave} + initial={{ + background: + colorModalTarget === 'header' + ? headerColor + : colorModalTarget === 'tableHeader' + ? tableHeaderColor + : colorModalTarget === 'tableBody' + ? tableBodyColor + : colorModalTarget === 'footer' + ? footerColor + : colorModalTarget === 'netAmount' + ? netAmountColor + : bgColor, + font: + colorModalTarget === 'header' + ? headerFontColor + : colorModalTarget === 'tableHeader' + ? tableHeaderFontColor + : colorModalTarget === 'tableBody' + ? tableBodyFontColor + : colorModalTarget === 'footer' + ? footerFontColor + : colorModalTarget === 'netAmount' + ? netAmountFontColor + : fontColor, + }} + /> + )} + {isTermscondChecking && (