diff --git a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx index 6ef38e2..79ce36b 100644 --- a/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx +++ b/src/Pages/BookingScreen/Components/PrintMainPage/SelectionComponent.jsx @@ -184,9 +184,10 @@ const SelectionComponent = forwardRef((props, ref) => { 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 [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); @@ -202,7 +203,6 @@ const SelectionComponent = forwardRef((props, ref) => { const netAmountColor = useSelector(GlobalSelectedNetAmountColor); const netAmountFontColor = useSelector(GlobalSelectedNetAmountFontColor); - const items = [ { name: 'Home', @@ -440,30 +440,40 @@ const SelectionComponent = forwardRef((props, ref) => { dispatch(changeSelectedHeaderColour(true)); } else { dispatch(changeSelectedHeaderColour(false)); - dispatch(changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' })); + dispatch( + changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }) + ); } - const tblHdr2 = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + 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; + 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; + 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; + const net2 = sizeCheckList.find( + (item) => item.ConfigName === 'Net Amount Colour' + )?.ConfigId; if (checkedList?.includes(net2)) { dispatch(changeSelectedNetAmountColour(true)); } else { @@ -536,27 +546,39 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrName: item.PrintHdrName, // legacy fields are filled from the array so older code still works PrintHdrColor: - item.PrintHdrColor || getColor(item.PrintColors, 'headerColor')?.background, + item.PrintHdrColor || + getColor(item.PrintColors, 'headerColor')?.background, PrintHdrFontColor: - item.PrintHdrFontColor || getColor(item.PrintColors, 'headerColor')?.font, + item.PrintHdrFontColor || + getColor(item.PrintColors, 'headerColor')?.font, TableHeaderColor: - item.TableHeaderColor || getColor(item.PrintColors, 'tableHeaderColor')?.background, + item.TableHeaderColor || + getColor(item.PrintColors, 'tableHeaderColor')?.background, TableHeaderFontColor: - item.TableHeaderFontColor || getColor(item.PrintColors, 'tableHeaderColor')?.font, + item.TableHeaderFontColor || + getColor(item.PrintColors, 'tableHeaderColor')?.font, TableBodyColor: - item.TableBodyColor || getColor(item.PrintColors, 'tableBodyColor')?.background, + item.TableBodyColor || + getColor(item.PrintColors, 'tableBodyColor')?.background, TableBodyFontColor: - item.TableBodyFontColor || getColor(item.PrintColors, 'tableBodyColor')?.font, + item.TableBodyFontColor || + getColor(item.PrintColors, 'tableBodyColor')?.font, footerColor: - item.footerColor || getColor(item.PrintColors, 'footerColor')?.background, + item.footerColor || + getColor(item.PrintColors, 'footerColor')?.background, footerFontColor: - item.footerFontColor || getColor(item.PrintColors, 'footerColor')?.font, + item.footerFontColor || + getColor(item.PrintColors, 'footerColor')?.font, netAmountColor: - item.netAmountColor || getColor(item.PrintColors, 'netAmtColor')?.background, + item.netAmountColor || + getColor(item.PrintColors, 'netAmtColor')?.background, netAmountFontColor: - item.netAmountFontColor || getColor(item.PrintColors, 'netAmtColor')?.font, + item.netAmountFontColor || + getColor(item.PrintColors, 'netAmtColor')?.font, rowType: - item.rowType || getColor(item.PrintColors, 'tableBodyColor')?.rowType || 'odd', + item.rowType || + getColor(item.PrintColors, 'tableBodyColor')?.rowType || + 'odd', PrintColors: item.PrintColors, Notes: item?.Notes, PageSize: item?.PageSize?.trim() || '3inch', @@ -609,7 +631,7 @@ const SelectionComponent = forwardRef((props, ref) => { OptionDetails, PrintTypeId, PrintHdrColor, - PrintColors + PrintColors, } = row; if (index >= 4) setShowMore(true); if (index <= 4) setShowMore(false); @@ -625,7 +647,9 @@ const SelectionComponent = forwardRef((props, ref) => { setEdit(true); // load existing header color, falling back to array setSelectedColour( - PrintHdrColor || getColor(PrintColors, 'headerColor')?.background || '#000000' + PrintHdrColor || + getColor(PrintColors, 'headerColor')?.background || + '#000000' ); // setSelectedHeaderFontColor(PrintHdrFontColor); setSelectedStyleId(StyleId); @@ -913,36 +937,48 @@ const SelectionComponent = forwardRef((props, ref) => { ) ? dispatch(changeNotes(true)) : dispatch(changeNotes(false)); - const hdrId = sizeCheckList.find((item) => item.ConfigName === 'Header Colour')?.ConfigId; + 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' })); + dispatch( + changeSelectedHeaderColor({ background: '#ffffff', font: '#000000' }) + ); } - const tblHdrId = sizeCheckList.find((item) => item.ConfigName === 'Table Header Colour')?.ConfigId; + 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; + 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; + 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; + const netId = sizeCheckList.find( + (item) => item.ConfigName === 'Net Amount Colour' + )?.ConfigId; if (checkedValues?.includes(netId)) { dispatch(changeSelectedNetAmountColour(true)); } else { @@ -1003,12 +1039,12 @@ const SelectionComponent = forwardRef((props, ref) => { PrintHdrColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? (headerColor || selectedColour) + ? headerColor || selectedColour : null, PrintHdrFontColor: getConcatenatedArray()?.some( (e) => e?.ConfigName?.toLowerCase() == 'header colour' ) - ? (headerFontColor || selectedHeaderFontColor) + ? headerFontColor || selectedHeaderFontColor : null, // Table header / body / footer / net amount colors TableHeaderColor: tableHeaderColor || null, @@ -1303,27 +1339,57 @@ const SelectionComponent = forwardRef((props, ref) => { const handleColorSave = (colors) => { // common handler called when ColorsSelected modal returns values - console.log("Received from modal:", colors); + console.log('Received from modal:', colors); switch (colorModalTarget) { case 'header': - dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + 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 })); + dispatch( + changeSelectedTableHeaderColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'tableBody': - dispatch(changeSelectedTableBodyColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedTableBodyColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'footer': - dispatch(changeSelectedFooterColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedFooterColor({ + background: colors.background, + font: colors.font, + }) + ); break; case 'netAmount': - dispatch(changeSelectedNetAmountColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedNetAmountColor({ + background: colors.background, + font: colors.font, + }) + ); break; default: - dispatch(changeSelectedHeaderColor({ background: colors.background, font: colors.font })); + dispatch( + changeSelectedHeaderColor({ + background: colors.background, + font: colors.font, + }) + ); break; } // update local previews as well (not strictly necessary if UI reads from store) @@ -1588,329 +1654,68 @@ const SelectionComponent = forwardRef((props, ref) => {
- {isFooterChecking && ( -
- - Notes - - notes Description} - value={Notes} - onChange={(e) => { - setNote(e.target.value); - }} - /> -
- )} +
+ {isFooterChecking && ( +
+ + Notes + + notes Description} + value={Notes} + onChange={(e) => { + setNote(e.target.value); + }} + /> +
+ )} - { -
- - BillName - - Bill Name} - value={BillName} - onChange={(e) => { - setBillName(e.target.value); - dispatch(changeBillName(e.target.value)); - }} - /> -
- } + { +
+ + BillName + + Bill Name} + value={BillName} + onChange={(e) => { + setBillName(e.target.value); + dispatch(changeBillName(e.target.value)); + }} + /> +
+ } - {isSignatureChecking && ( -
- - Upload Signature: - - - {fileList.length < 1 && ( -
- + + Terms and Conditions + + {terms.map((term, index) => ( + + handleChange(index, e.target.value)} + autoSize={{ minRows: 1, maxRows: 3 }} + style={{ width: 290 }} /> - Click to Upload -
- )} -
+ {terms.length > 1 && ( + handleRemove(index)} + style={{ color: 'red', cursor: 'pointer' }} + /> + )} + + ))} - - Preview - -
- )} - {isheadercolour && ( -
- - Header Color - - -
- )} - {isTableHeaderColour && ( -
- - Table Header Colour - - -
- )} - {isTableBodyColour && ( -
- - Table Body Colour - - - - - dispatch(changeRowType(checked ? "odd" :"even" ))} - /> - -
- )} - {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 && ( -
- - Terms and Conditions - - {terms.map((term, index) => ( - - handleChange(index, e.target.value)} - autoSize={{ minRows: 1, maxRows: 3 }} - style={{ width: 290 }} - /> - {terms.length > 1 && ( - handleRemove(index)} - style={{ color: 'red', cursor: 'pointer' }} - /> - )} - - ))} - - {/* */} - -
- )} + +
+ )} + + {isSignatureChecking && ( +
+ + Upload Signature: + + + {fileList.length < 1 && ( +
+ + Click to Upload +
+ )} +
+ + + Preview + +
+ )} +
+ +
+ {isheadercolour && ( +
+ + Header Color + + +
+ )} + {isTableHeaderColour && ( +
+ + Table Header Colour + + +
+ )} + {isTableBodyColour && ( +
+ + Table Body Colour + + + + + + dispatch(changeRowType(checked ? 'odd' : 'even')) + } + /> + +
+ )} + {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, + }} + /> + )} +
+
div:hover { -// background-color: #f2f2f2; -// border-radius: 50pc; -// } - .defaultandCustomisedThemeSales > div.selected { background-color: #ffffff; border-radius: 5px; @@ -255,7 +249,6 @@ flex-wrap: nowrap; flex-grow: 1; width: 100%; - // gap: 20px; justify-content: space-between; border: 1px solid #dddddd; @media (max-width: 768px) { @@ -301,8 +294,8 @@ border: none; height: 100vh; background-color: #eeeeee !important; - width: 1.5px; - @media (max-width:768px){ + width: 1.5px; + @media (max-width: 768px) { display: none; - } + } } diff --git a/src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss b/src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss index a73046f..5b532a7 100644 --- a/src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss +++ b/src/Styles/BookingScreen/Components/SelectionComponent/SelectionComponent.scss @@ -94,10 +94,10 @@ flex-wrap: wrap; } -//nk .Selection-Component-OverallDiv { height: 80vh; overflow: auto; + scrollbar-width: thin; width: 100%; padding-bottom: 10rem; background-color: #fbf9fa; @@ -176,7 +176,6 @@ .Selection-Component-SubDivContainer { display: flex; flex-direction: column; - // row-gap: 1rem; } .SelectComp-SubmitButton { @@ -203,8 +202,8 @@ font-size: 14px; font-family: "Poppins"; font-weight: 400; - padding: 6px 12px; - border-radius: 8px; + padding: 6px 16px; + border-radius: 6px; cursor: pointer; } .Selection-selectheading { @@ -352,8 +351,9 @@ padding-right: 4px; height: max-content; max-height: 160px; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; + scrollbar-width: thin; border-radius: 4px; width: 100%; @@ -534,17 +534,20 @@ } .handleAddBTN { - width: max-content; + width: 90%; padding: 6px 12px; - margin-top: 10px; - border-radius: 6px; + border-radius: 4px; border: none; - background-color: #1292ee; - color: #fff; + background-color: #c9cee5; + color: #000000; font-family: "Poppins"; - font-size: 12px; + font-size: 13px; cursor: pointer; - font-weight: 400; + font-weight: 500; + display: flex; + align-items: center; + justify-content: space-around; + gap: 10px; } .selectBillFiledInput { display: flex; @@ -554,7 +557,7 @@ border-radius: 10px; width: 100%; padding: 0 14px; - margin-top: 12px; + margin: 12px 0; &:hover { background-color: #fff; box-shadow: @@ -617,3 +620,56 @@ margin-top: 16px !important; } } +.PrintCutColor { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + .example, + .ant-space, + .ant-space-item { + width: 180px; + + @media (max-width: 1024px) { + width: unset; + } + } + .float-label { + margin-bottom: 0 !important; + } + + @media (max-width: 1024px) { + grid-template-columns: 1fr; + } +} +.filedCusColor { + display: flex; + flex-direction: column; + gap: 5px; + .ant-typography { + margin-bottom: 0 !important; + } +} + +.ColorChoosePrintColor { + width: 20px; + height: 20px; + border: none; + outline: none; + cursor: pointer; + border-radius: 3px; +} + +.AddTermBTN { + width: max-content; + height: max-content; + padding: 6px 10px; + border-radius: 6px; + font-family: "Poppins"; + font-weight: 500; + font-size: 12px; + cursor: pointer; + background-color: #1292ee; + color: #fff; + border: none; + outline: none; +}