From 7617a934318691446db9806c8affe946dedde3d5 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 3 Feb 2026 13:52:53 +0530 Subject: [PATCH] sales page Setting modal Design --- .../UtillComponents/AllSalesPageSettings.jsx | 4 +- .../UtillComponents/AllSalesPageSettings.scss | 35 +- .../UtillComponents/TableHeadersetting.jsx | 829 +++++++++--------- 3 files changed, 458 insertions(+), 410 deletions(-) diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx index 43f933e..04d54df 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx @@ -66,7 +66,9 @@ const AllSalesPageSettings = () => { )} - {selectedComponent === 'Table' && } + {selectedComponent === 'Table' && ( + + )} diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss index 4c41b2f..06f24ca 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss @@ -92,11 +92,14 @@ scrollbar-width: thin; padding-right: 10px; overflow: auto; - .option-maindiv{ - display: flex; - align-items: flex-start; - flex-wrap: wrap; - } + .option-maindiv { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + } + .ant-checkbox-wrapper { + padding: 8px !important; + } } .SettingsListSwitchBTN { @@ -157,3 +160,25 @@ font-size: 16px; } } + +// Table Header Setting CSS start here||| + +.SelectionComponentSubHeading { + color: #333; + font-size: 12px; + font-weight: 500; + font-family: "Poppins", sans-serif; +} + +.selctfontBackInputMain { + display: flex; + align-items: flex-start; + gap: 8px; + flex-wrap: wrap; + margin-top: 10px; +} +.selctfontBackInput { + display: flex; + flex-direction: column; + gap: 4px; +} diff --git a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx index 5c9c47b..5ba7045 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx @@ -20,8 +20,9 @@ import { import { useDispatch } from 'react-redux'; import Buttons from '../../../../Components/Forms/Buttons'; import { Messages } from '../../../../Components/Notifications/Messages'; +import './AllSalesPageSettings.scss'; -const TableHeadersetting = ({setModalOpen}) => { +const TableHeadersetting = ({ setModalOpen }) => { const dispatch = useDispatch(); const SessionData = useSelector(StoredSessionData); const AppId = SessionData?.AppId; @@ -45,7 +46,7 @@ const TableHeadersetting = ({setModalOpen}) => { const [SelectedTableColor, setSelectedTableColor] = useState(null); const [Tableform] = Form.useForm(); const [billingSettings, setBillingSettings] = useState(); - console.log(billingSettings,"billingSettingsbillingSettings") + console.log(billingSettings, 'billingSettingsbillingSettings'); const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] = useState([]); const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find( @@ -63,9 +64,9 @@ const TableHeadersetting = ({setModalOpen}) => { OverallbackgroundOptionId ); // Hold and addcustomer OptionsDetails - const [HoldButton, setHoldButton] = useState(false); - const [AddCustomerButton, setAddCustomerButton] = useState(false); - const [DineInChecked,setDineInChecked] = useState(false) + const [HoldButton, setHoldButton] = useState(false); + const [AddCustomerButton, setAddCustomerButton] = useState(false); + const [DineInChecked, setDineInChecked] = useState(false); console.log(billingSettings, 'billingSettingsbillingSettings'); const [TableBackgroundColorData, setTableBackgroundColorData] = useState([ { @@ -152,7 +153,7 @@ const TableHeadersetting = ({setModalOpen}) => { let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find( (item) => item?.SessionName === 'BookingBilling' ); - let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find( + let selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find( (item) => item?.SessionName === 'BookingNavbar' ); let AllBillingdetails = AllDetails?.Components?.find( @@ -164,43 +165,55 @@ const TableHeadersetting = ({setModalOpen}) => { (item) => item?.OptionId ); setSelectedBillTableCheckValues(optionIds); - - let Allfontdata = AllDetails?.Fonts?.filter(item => item.SessionId === selectedBilling?.SessionId) - setTableFontData(Allfontdata) - let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find(item=>item?.SessionId === selectedBilling?.SessionId) - setSelectedTableFont(selectedFont?.FontId) + let Allfontdata = AllDetails?.Fonts?.filter( + (item) => item.SessionId === selectedBilling?.SessionId + ); + setTableFontData(Allfontdata); + let selectedFont = AllDetails?.Templates?.[0]?.FontDetail?.find( + (item) => item?.SessionId === selectedBilling?.SessionId + ); + + setSelectedTableFont(selectedFont?.FontId); const hasHold = selectedNavbar?.FieldDetails?.some( - item => item.OptionName === "Hold" + (item) => item.OptionName === 'Hold' ); - const hasAddcustomer = selectedNavbar?.FieldDetails?.some( - item => item.OptionName === "AddCustomer" + const hasAddcustomer = selectedNavbar?.FieldDetails?.some( + (item) => item.OptionName === 'AddCustomer' ); - const hasDinein = selectedNavbar?.FieldDetails?.some( - item => item.OptionName === "DineIn" + const hasDinein = selectedNavbar?.FieldDetails?.some( + (item) => item.OptionName === 'DineIn' + ); + setHoldButton(hasHold); + setAddCustomerButton(hasAddcustomer); + setDineInChecked(hasDinein); + let allcolordata = AllDetails?.Colors?.filter( + (item) => + item.SessionId === selectedBilling?.SessionId && + item.OptionName === 'OverallBackground' + ); + setBillingOverallColorsList(allcolordata); + let allBackcolordata = AllDetails?.Colors?.filter( + (item) => + item.SessionId === selectedBilling?.SessionId && + item.OptionName === 'Background' ); - setHoldButton(hasHold) - setAddCustomerButton(hasAddcustomer) - setDineInChecked(hasDinein) - let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "OverallBackground") - setBillingOverallColorsList(allcolordata) - let allBackcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId && item.OptionName === "Background") - setTableBackgroundColorData(allBackcolordata) - let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter(item=>item?.SessionName === 'BookingBilling') - console.log(selectedcolors, 'selectedOverallBackgroudcolor') - selectedcolors?.forEach((item) => { - if (item?.['BackgroundColor']) { - setSelectedTableColor(item?.['ColorId']); - } else if (item?.['OverallBackgroundColor']) { - - setdropdownBillingOverallColor(item?.['ColorId']); - - } - }); + setTableBackgroundColorData(allBackcolordata); + let selectedcolors = AllDetails?.Templates?.[0]?.ColorDetail?.filter( + (item) => item?.SessionName === 'BookingBilling' + ); + console.log(selectedcolors, 'selectedOverallBackgroudcolor'); + selectedcolors?.forEach((item) => { + if (item?.['BackgroundColor']) { + setSelectedTableColor(item?.['ColorId']); + } else if (item?.['OverallBackgroundColor']) { + setdropdownBillingOverallColor(item?.['ColorId']); + } + }); // await setdropdownBillingOverallColor(selectedOverallBackgroudcolor); // formRef.current?.setFieldsValue({ BillingOverallColor: value }); - + // setTableBackgroundColorData console.log(Allfontdata, 'All table colors'); // BookingBilling templateData?.['BookingBilling']?.[0] @@ -241,49 +254,49 @@ const TableHeadersetting = ({setModalOpen}) => { setTableFontHex(color?.hex?.replace('#', '').trim()); } }; - - const handleBackgroundColorSubmit= async () => { - if (TablebackgroundColor !== TablefontColor) { - let response; - try { - let postData = { - BackgroundColor: TablebackgroundColor, - FontColor: TablefontColor, - CreatedBy: UserId, - SessionId: billingSettings?.SessionId, - OptionId: backgroundOptionId, + + const handleBackgroundColorSubmit = async () => { + if (TablebackgroundColor !== TablefontColor) { + let response; + try { + let postData = { + BackgroundColor: TablebackgroundColor, + FontColor: TablefontColor, + CreatedBy: UserId, + SessionId: billingSettings?.SessionId, + OptionId: backgroundOptionId, + }; + response = await dispatch(postColorData(postData)).unwrap(); + } catch (err) { + if (err['message'] == 'Request failed with status code 422') { + response = { + data: { + statusCode: 0, + response: 'Color Not Added', + data: [], + }, }; - response = await dispatch(postColorData(postData)).unwrap(); - } catch (err) { - if (err['message'] == 'Request failed with status code 422') { - response = { - data: { - statusCode: 0, - response: 'Color Not Added', - data: [], - }, - }; - } } - if (response?.data?.statusCode == 1) { - if (response?.data?.response == 'Color Already Exists') { - setMessageType('warning'); - setMessageData(response?.data?.response); - } else { - setMessageType('success'); - setMessageData(response?.data?.response); - // BillsetUploadColor(false); - } - GetTemplatedetails() - setBillUploadColor(false) - } else { - setMessageData(response?.data?.response); - setMessageType('error'); - } - } else { - setMessageData('Please select different color for background and font'); - setMessageType('warning'); } + if (response?.data?.statusCode == 1) { + if (response?.data?.response == 'Color Already Exists') { + setMessageType('warning'); + setMessageData(response?.data?.response); + } else { + setMessageType('success'); + setMessageData(response?.data?.response); + // BillsetUploadColor(false); + } + GetTemplatedetails(); + setBillUploadColor(false); + } else { + setMessageData(response?.data?.response); + setMessageType('error'); + } + } else { + setMessageData('Please select different color for background and font'); + setMessageType('warning'); + } }; const TableonCancel4 = () => { setBillUploadColor(false); @@ -317,47 +330,46 @@ const TableHeadersetting = ({setModalOpen}) => { }; const handleBillingOverallColorSubmit = async () => { let response; - - try { - let postData = { - BackgroundColor: BillingOverallColor, - FontColor: '#000000', - CreatedBy:UserId, - SessionId: billingSettings?.SessionId, - OptionId: OverallbackgroundOptionId, + + try { + let postData = { + BackgroundColor: BillingOverallColor, + FontColor: '#000000', + CreatedBy: UserId, + SessionId: billingSettings?.SessionId, + OptionId: OverallbackgroundOptionId, + }; + response = await dispatch(postColorData(postData)).unwrap(); + } catch (err) { + if (err['message'] == 'Request failed with status code 422') { + response = { + data: { + statusCode: 0, + response: 'Color Not Added', + data: [], + }, }; - response = await dispatch(postColorData(postData)).unwrap(); - } catch (err) { - if (err['message'] == 'Request failed with status code 422') { - response = { - data: { - statusCode: 0, - response: 'Color Not Added', - data: [], - }, - }; - } } - if (response?.data?.statusCode == 1) { - if (response?.data?.response == 'Color Already Exists') { - setMessageType('warning'); - setMessageData(response?.data?.response); - } else { - setMessageType('success'); - setMessageData(response?.data?.response); - setBillingUploadOverallColor(false); - } - GetTemplatedetails() - BillingUploadOverallColor(false) - } else { + } + if (response?.data?.statusCode == 1) { + if (response?.data?.response == 'Color Already Exists') { + setMessageType('warning'); setMessageData(response?.data?.response); - setMessageType('error'); + } else { + setMessageType('success'); + setMessageData(response?.data?.response); + setBillingUploadOverallColor(false); } + GetTemplatedetails(); + BillingUploadOverallColor(false); + } else { + setMessageData(response?.data?.response); + setMessageType('error'); + } }; const selectBillingOverallColor = async (value) => { await setdropdownBillingOverallColor(value); // formRef.current?.setFieldsValue({ BillingOverallColor: value }); - }; const openColour4 = (value) => { setTableColorType(value); @@ -371,18 +383,17 @@ const TableHeadersetting = ({setModalOpen}) => { validateFontsTable(values); }; const validateFontsTable = async (values) => { - console.log(values,"valuesvalues") + console.log(values, 'valuesvalues'); const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`; - fetch(apiUrl) + fetch(apiUrl) .then((response) => response.json()) .then(async (data) => { const fontNames = data?.items?.map((item) => item.family); - + if (fontNames.includes(formatFontName(values['TableFont']))) { let response; try { - - let postData = { + let postData = { SessionFont: formatFontName(values['TableFont']), CreatedBy: UserId, SessionId: billingSettings?.SessionId, @@ -409,16 +420,15 @@ const TableHeadersetting = ({setModalOpen}) => { } dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap; - GetTemplatedetails() + GetTemplatedetails(); Tableform.resetFields(); } else { setMessageData(response?.data?.response); setMessageType('error'); } } else { - setMessageType('warning'); + setMessageType('warning'); setMessageData('Please give the Correct google fonts Name!'); - } }) .catch((error) => { @@ -439,17 +449,17 @@ const TableHeadersetting = ({setModalOpen}) => { CompId: CompId, UserId: UserId, BranchId: BranchId, - ColorId: [ - ...(TemplateDetails?.[0]?.ColorDetail - ?.filter(c => c.SessionName !== "BookingBilling") - ?.map(c => c.ColorId) || []), + ColorId: [ + ...(TemplateDetails?.[0]?.ColorDetail?.filter( + (c) => c.SessionName !== 'BookingBilling' + )?.map((c) => c.ColorId) || []), - SelectedTableColor, - dropdownBillingOverallColor, -], - FontId: TemplateDetails?.[0]?.FontDetail?.map(f => - f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId - ), + SelectedTableColor, + dropdownBillingOverallColor, + ], + FontId: TemplateDetails?.[0]?.FontDetail?.map((f) => + f.SessionName === 'BookingBilling' ? selectedTableFont : f.FontId + ), CreatedBy: UserId, TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({ ComponentId: comp.ComponentId, // ✅ dynamic @@ -457,42 +467,40 @@ const TableHeadersetting = ({setModalOpen}) => { comp.SessionName === 'BookingBilling' ? SelectedBillTableCheckValues?.map((id) => ({ OptionId: id })) // ✅ NEW checked list : comp.FieldDetails.map((field) => ({ OptionId: field.OptionId })), // existing - })), + })), }; console.log(result, 'final result to submit'); var response = await dispatch(putSelectionComponentData(result)).unwrap(); - if (response?.data?.statusCode == 1) { - if ( - response?.data?.response === 'Application Template Already Exists' - ) { - setMessageType('warning'); - setMessageData('Application Template Already Exists'); - setFirstOnClick(false); - } else { - setMessageType('success'); - setMessageData('Template Details Added Successfully'); - setFirstOnClick(false); - } - await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap(); - setModalOpen(false) - } else { - setMessageType('error'); - setMessageData(response?.data?.response); - setFirstOnClick(false); - } + if (response?.data?.statusCode == 1) { + if (response?.data?.response === 'Application Template Already Exists') { + setMessageType('warning'); + setMessageData('Application Template Already Exists'); + setFirstOnClick(false); + } else { + setMessageType('success'); + setMessageData('Template Details Added Successfully'); + setFirstOnClick(false); + } + await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap(); + setModalOpen(false); + } else { + setMessageType('error'); + setMessageData(response?.data?.response); + setFirstOnClick(false); + } }; - const onComplete = useCallback(() => { - setMessageData(null); - setMessageType(null); - }, []); + const onComplete = useCallback(() => { + setMessageData(null); + setMessageType(null); + }, []); return ( <> - +
{ // onClick={() => Navholdoption(value.OptionName)} key={value?.OptionId} disabled={ - value.OptionName === 'Hold' && HoldButton - ? true - : value.OptionName === 'AddCustomer' && - AddCustomerButton - ? true - : value.OptionName === 'Item' - ? true - : value.OptionName === 'UnpaidBill' && - !DineInChecked - ? true - : false - } + value.OptionName === 'Hold' && HoldButton + ? true + : value.OptionName === 'AddCustomer' && AddCustomerButton + ? true + : value.OptionName === 'Item' + ? true + : value.OptionName === 'UnpaidBill' && !DineInChecked + ? true + : false + } > {value.OptionName} @@ -545,28 +551,259 @@ const TableHeadersetting = ({setModalOpen}) => {
))} */} -
-

BillTable Font

- ({ - value: option.FontId, - label: option.SessionFont, - }))} - label="Font" - onChangeFunction={selectFont3} - className="settingsales-DropDown-Selection" - isOnchanges={!!selectedTableFont} - valueData={selectedTableFont} - /> -
- Add - +
+
+

BillTable Font

+
+ ({ + value: option.FontId, + label: option.SessionFont, + }))} + label="Font" + onChangeFunction={selectFont3} + className="settingsales-DropDown-Selection" + isOnchanges={!!selectedTableFont} + valueData={selectedTableFont} + /> +
+ Add + +
+
+ + {hasBackground ? ( +
+
+
+ +

+ BillTable Background Color +

+ ({ + value: option.ColorId, + label: ( +
+
+ +     + +
+
{option.ThemeName}
+
+ ), + }))} + labelChange={true} + label="Color" + className="field-DropDown-Selection" + onChangeFunction={selectTableColor} + isOnchanges={SelectedTableColor ? true : false} + valueData={SelectedTableColor} + /> + +
+
+ Add + +
+
+
+ ) : null} + + {hasOverallBackground ? ( +
+ { + setBillingUploadOverallColor(false); + }} + /> + } + width={400} + footer={null} + > +
+
+

+ Selected Color:{' '} +

+
+
+
+ +
+
+ + + +
+ +
+ +
+
+ +

+ BillTable Overall-Background +

+ ({ + value: option.ColorId, + label: ( +
+
+ +     + +
+
{option.ThemeName}
+
+ ), + }))} + labelChange={true} + label={ +

Overall Background

+ } + className="field-DropDown-Selection" + onChangeFunction={selectBillingOverallColor} + isOnchanges={dropdownBillingOverallColor ? true : false} + valueData={dropdownBillingOverallColor} + /> + +
+
+ Add + +
+
+
+ ) : null}
{ handleSubmit={TablehandleSubmit} buttonText="SAVE" /> - {hasBackground ? ( -
-
-
- -

- BillTable Background Color -

- ({ - value: option.ColorId, - label: ( -
-
- -     - -
-
{option.ThemeName}
-
- ), - }))} - labelChange={true} - label="Color" - className="field-DropDown-Selection" - onChangeFunction={selectTableColor} - isOnchanges={SelectedTableColor ? true : false} - valueData={SelectedTableColor} - /> - -
-
- Add - -
-
-
- ) : null} - {hasOverallBackground ? ( -
- { - setBillingUploadOverallColor(false); - }} - /> - } - width={400} - footer={null} - > -
-
-

- Selected Color:{' '} -

-
-
-
- -
-
- - -
- -
- -
-
- -

- BillTable Overall-Background -

- ({ - value: option.ColorId, - label: ( -
-
- -     - -
-
{option.ThemeName}
-
- ), - }))} - labelChange={true} - label={

Overall Background

} - className="field-DropDown-Selection" - onChangeFunction={selectBillingOverallColor} - isOnchanges={dropdownBillingOverallColor ? true : false} - valueData={dropdownBillingOverallColor} - /> - -
-
- Add - -
-
-
- ) : null} { icon={} htmlType={true} handleSubmit={HandleSubmit} - />