diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx index 6deaca4..43f933e 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx @@ -1,84 +1,77 @@ -import { useState } from "react"; -import { IoMdAdd, IoMdSettings } from "react-icons/io"; -import { DefaultModal } from "../../../../Components/Modal/DefaultModal"; -import TooltipWrapper from "../../../../Components/Tooltip/Tooltip"; - -import "./AllSalesPageSettings.scss" -import TableHeadersetting from "./TableHeadersetting"; -import PaymentOptions from "../../../Payment/PaymentOptions/PaymentOptions"; - +import { useState } from 'react'; +import { IoMdAdd, IoMdSettings } from 'react-icons/io'; +import { DefaultModal } from '../../../../Components/Modal/DefaultModal'; +import TooltipWrapper from '../../../../Components/Tooltip/Tooltip'; +import './AllSalesPageSettings.scss'; +import TableHeadersetting from './TableHeadersetting'; +import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions'; const AllSalesPageSettings = () => { - const [settingModal, setsettingModal] = useState(false) - const [selectedComponent, setselectedComponent] = useState('Payment') - - - const onclose = () => { - setsettingModal(false) - } - const ComponentSelect = (value) => { - setselectedComponent(value); - }; - return ( - <> - -
setsettingModal(true)} - style={{ - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - gap: '5px', - padding: '5px 10px', - borderRadius: '4px', - fontSize: '14px', - }} - > - -
- - - + const [settingModal, setsettingModal] = useState(false); + const [selectedComponent, setselectedComponent] = useState('Payment'); -
-
-
ComponentSelect('Payment')} - > - Payment Option -
-
ComponentSelect('Table')} - > - Table -
-
- {selectedComponent == "Payment" && -
- -
- } - - { - selectedComponent === "Table" && - - } - -
- - - ) -} - -export default AllSalesPageSettings; \ No newline at end of file + const onclose = () => { + setsettingModal(false); + }; + const ComponentSelect = (value) => { + setselectedComponent(value); + }; + return ( + <> + +
setsettingModal(true)} + style={{ + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + gap: '5px', + padding: '5px 10px', + borderRadius: '4px', + fontSize: '14px', + backgroundColor: '#f0f0f0', + }} + > + +
+ + + +
+
+
ComponentSelect('Payment')} + > + Payment Option +
+
ComponentSelect('Table')} + > + Table +
+
+
+ {selectedComponent == 'Payment' && ( +
+ +
+ )} + + {selectedComponent === 'Table' && } +
+
+ + + ); +}; + +export default AllSalesPageSettings; diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss index 25ef74c..4c41b2f 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss @@ -1,58 +1,141 @@ -/// Another swtich button style code +// /// Another swtich button style code -.SettingsListSwitchBTN { - display: inline-flex; - gap: 16px; - font-family: "Poppins"; - margin-bottom: 12px; - border-bottom: 1px solid #d1d5db; +// .SettingsListSwitchBTN { +// display: inline-flex; +// gap: 16px; +// font-family: "Poppins"; +// margin-bottom: 12px; +// border-bottom: 1px solid #d1d5db; +// } + +// .SettingsListSwitchBTN > div { +// font-size: 22px; +// font-weight: 600; +// cursor: pointer; +// color: #6b7280; +// display: flex; +// align-items: center; +// gap: 6px; +// position: relative; +// border: none; +// background: transparent; +// font-family: "Gilroy"; +// transition: color 0.2s ease; +// @media (max-width: 600px) { +// font-size: 18px; +// } +// } + +// .SettingsListSwitchBTN > div:hover { +// color: #0f172a; +// } + +// .SettingsSwitchBTN > div.selected { +// color: #0f172a; +// } + +// .SettingsListSwitchBTN > div.selected::after { +// content: ""; +// position: absolute; +// left: 0; +// bottom: -1px; +// width: 100%; +// height: 2px; +// background: #2c88ee; +// border-radius: 2px; +// } + +// .SettingsListSwitchBTN > div.selected svg { +// color: #4765db !important; +// } + +// // End +// .settingsales-DropDown-Selection { +// width: 150px !important; +// } +// .settingaddNewSalesFiledBTN { +// background-color: #2563eb; +// // background-color: #1292ee; +// color: #fff !important; +// width: max-content; +// height: max-content; +// padding: 4px 8px; +// font-size: 13px; +// font-weight: 400; +// display: flex; +// align-items: center; +// gap: 4px; +// cursor: pointer; +// border-radius: 6px; +// svg { +// color: #fff !important; +// font-weight: 500; +// display: flex; +// font-size: 16px; +// } +// } + +.AllSalesPageSettingsMainDiv { + width: 100%; + height: 100%; + display: flex; + align-items: flex-start; + gap: 1rem; + font-family: "Poppins", sans-serif; + justify-content: flex-start; } -.SettingsListSwitchBTN > div { - font-size: 22px; - font-weight: 600; - cursor: pointer; - color: #6b7280; +.SettingsComponentDiv { + height: max-content; + max-height: 80vh; + width: 100%; + scrollbar-width: thin; + padding-right: 10px; + overflow: auto; + .option-maindiv{ display: flex; - align-items: center; + align-items: flex-start; + flex-wrap: wrap; + } +} + +.SettingsListSwitchBTN { + display: flex; + align-items: flex-start; + flex-direction: column; gap: 6px; - position: relative; - border: none; - background: transparent; - font-family: "Gilroy"; - transition: color 0.2s ease; - @media (max-width: 600px) { - font-size: 18px; + width: 210px; + height: 100%; + overflow: auto; + background-color: #d8e5ff; + padding: 5px; + border-radius: 4px; + height: 80vh; + div { + width: 100%; + background-color: #fff; + outline: none; + border: none; + font-family: "Poppins", sans-serif; + padding: 8px 6px; + cursor: pointer; + border-radius: 4px; + transition: all 0.2s ease-in-out; + font-size: 14px; + font-weight: 400; + + &:hover { + background-color: #d1d8ec; + } + &.selected { + background-color: #ffffff; + color: #2563eb; + font-weight: 500; + border-right: 3px solid #2563eb; + } } } -.SettingsListSwitchBTN > div:hover { - color: #0f172a; -} - -.SettingsSwitchBTN > div.selected { - color: #0f172a; -} - -.SettingsListSwitchBTN > div.selected::after { - content: ""; - position: absolute; - left: 0; - bottom: -1px; - width: 100%; - height: 2px; - background: #2c88ee; - border-radius: 2px; -} - -.SettingsListSwitchBTN > div.selected svg { - color: #4765db !important; -} - -// End -.settingsales-DropDown-Selection { - width: 150px !important; -} .settingaddNewSalesFiledBTN { background-color: #2563eb; // background-color: #1292ee; @@ -73,4 +156,4 @@ display: flex; font-size: 16px; } -} \ No newline at end of file +} diff --git a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx index 2bf0876..5c9c47b 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx @@ -11,6 +11,7 @@ import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup'; import { useSelector } from 'react-redux'; import { getSalesTemplate, + getTemplate, postColorData, postTableFontData, putSelectionComponentData, @@ -20,7 +21,7 @@ import { useDispatch } from 'react-redux'; import Buttons from '../../../../Components/Forms/Buttons'; import { Messages } from '../../../../Components/Notifications/Messages'; -const TableHeadersetting = () => { +const TableHeadersetting = ({setModalOpen}) => { const dispatch = useDispatch(); const SessionData = useSelector(StoredSessionData); const AppId = SessionData?.AppId; @@ -61,6 +62,10 @@ const TableHeadersetting = () => { const hasOverallBackground = SelectedBillTableCheckValues?.includes( OverallbackgroundOptionId ); + // Hold and addcustomer OptionsDetails + const [HoldButton, setHoldButton] = useState(false); + const [AddCustomerButton, setAddCustomerButton] = useState(false); + const [DineInChecked,setDineInChecked] = useState(false) console.log(billingSettings, 'billingSettingsbillingSettings'); const [TableBackgroundColorData, setTableBackgroundColorData] = useState([ { @@ -109,71 +114,7 @@ const TableHeadersetting = () => { ActiveStatus: 'A', }, ]); - const [BillingOverallColorsList, setBillingOverallColorsList] = useState([ - { - ColorId: 9, - SessionId: 57, - OptionId: 204, - FontColor: '#000000', - BackgroundColor: '#bbdefb', - ThemeName: 'Theme 9', - ActiveStatus: 'A', - }, - { - ColorId: 19, - SessionId: 57, - OptionId: 204, - FontColor: '#000000', - BackgroundColor: '#d7ccc8', - ThemeName: 'Theme 19', - ActiveStatus: 'A', - }, - { - ColorId: 20, - SessionId: 57, - OptionId: 209, - FontColor: '#000000', - BackgroundColor: '#c5cae9', - ThemeName: 'Theme 20', - ActiveStatus: 'A', - }, - { - ColorId: 22, - SessionId: 57, - OptionId: 204, - FontColor: '#000000', - BackgroundColor: '#ffffff', - ThemeName: 'Theme 22', - ActiveStatus: 'A', - }, - { - ColorId: 30, - SessionId: 57, - OptionId: 209, - FontColor: '#000000', - BackgroundColor: '#3f51b5', - ThemeName: 'Theme 30', - ActiveStatus: 'A', - }, - { - ColorId: 66, - SessionId: 57, - OptionId: 205, - FontColor: '#000000', - BackgroundColor: '#d1c4e9', - ThemeName: 'Theme 65', - ActiveStatus: 'A', - }, - { - ColorId: 67, - SessionId: 57, - OptionId: 205, - FontColor: '#000000', - BackgroundColor: '#8bc34a', - ThemeName: 'Theme 66', - ActiveStatus: 'A', - }, - ]); + const [BillingOverallColorsList, setBillingOverallColorsList] = useState(); const [BillUploadColor, setBillUploadColor] = useState(false); const [TableColorType, setTableColorType] = useState('Y'); const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00'); @@ -211,21 +152,55 @@ const TableHeadersetting = () => { let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find( (item) => item?.SessionName === 'BookingBilling' ); + let selectedNavbar =AllDetails?.Templates?.[0]?.ComponentDetails?.find( + (item) => item?.SessionName === 'BookingNavbar' + ); let AllBillingdetails = AllDetails?.Components?.find( (item) => item?.ComponentName === selectedBilling?.ComponentName ); - console.log(AllDetails, AllDetails?.Templates, 'templateresponse'); + console.log(AllDetails, selectedNavbar, 'templateresponse'); setBillingSettings(AllBillingdetails); const optionIds = selectedBilling?.FieldDetails?.map( (item) => item?.OptionId ); setSelectedBillTableCheckValues(optionIds); - let allcolordata = AllDetails?.Colors?.filter(item => item.SessionId === selectedBilling?.SessionId) + 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" + ); + const hasAddcustomer = selectedNavbar?.FieldDetails?.some( + item => item.OptionName === "AddCustomer" + ); + 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") + + 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] @@ -251,7 +226,7 @@ const TableHeadersetting = () => { }; const selectTableColor = async (value) => { await setSelectedTableColor(value); - formRef.current?.setFieldsValue({ TableColor: value }); + // formRef.current?.setFieldsValue({ TableColor: value }); }; const BillhandleUploadColor = () => { setBillUploadColor(true); @@ -299,7 +274,8 @@ const TableHeadersetting = () => { setMessageData(response?.data?.response); // BillsetUploadColor(false); } - + GetTemplatedetails() + setBillUploadColor(false) } else { setMessageData(response?.data?.response); setMessageType('error'); @@ -341,54 +317,47 @@ const TableHeadersetting = () => { }; const handleBillingOverallColorSubmit = async () => { let response; - - // try { - // let postData = { - // BackgroundColor: BillingOverallColor, - // FontColor: '#000000', - // CreatedBy: getSession('UserId'), - // SessionId: BillingTableData[0]?.SessionId, - // OptionId: BillTableCheckList[0]?.ComponentOptionsDetails?.filter( - // (item) => item.OptionName == 'OverallBackground' - // )?.[0]?.OptionId, - // }; - // 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); - // } - // let OverallBillingdata = { - // SessionID: BillingTableData[0]?.SessionId, - // OptionName: 'OverallBackground', - // }; - // dispatch(getBillingOverallBackgroundColors(OverallBillingdata)).unwrap; - // } else { - // setMessageData(response?.data?.response); - // setMessageType('error'); - // } + + 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: [], + }, + }; + } + } + 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 { + setMessageData(response?.data?.response); + setMessageType('error'); + } }; const selectBillingOverallColor = async (value) => { await setdropdownBillingOverallColor(value); - formRef.current?.setFieldsValue({ BillingOverallColor: value }); - let billOverallColorVal = BillingOverallColorsList?.filter( - (data) => data?.ColorId === value - ); + // formRef.current?.setFieldsValue({ BillingOverallColor: value }); + }; const openColour4 = (value) => { setTableColorType(value); @@ -440,6 +409,7 @@ const TableHeadersetting = () => { } dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap; + GetTemplatedetails() Tableform.resetFields(); } else { setMessageData(response?.data?.response); @@ -469,7 +439,14 @@ const TableHeadersetting = () => { CompId: CompId, UserId: UserId, BranchId: BranchId, - ColorId: TemplateDetails?.[0]?.ColorDetail?.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 ), @@ -496,8 +473,8 @@ const TableHeadersetting = () => { setMessageData('Template Details Added Successfully'); setFirstOnClick(false); } - dispatch(changeScanTemplate({})) - + await dispatch(getTemplate({ CompId, BranchId, AppId })).unwrap(); + setModalOpen(false) } else { setMessageType('error'); setMessageData(response?.data?.response); @@ -538,7 +515,19 @@ const TableHeadersetting = () => { value={value?.OptionId} // onClick={() => Navholdoption(value.OptionName)} key={value?.OptionId} - disabled={value.OptionName === 'Item' ? true : false} + disabled={ + value.OptionName === 'Hold' && HoldButton + ? true + : value.OptionName === 'AddCustomer' && + AddCustomerButton + ? true + : value.OptionName === 'Item' + ? true + : value.OptionName === 'UnpaidBill' && + !DineInChecked + ? true + : false + } > {value.OptionName} @@ -682,8 +671,8 @@ const TableHeadersetting = () => { label="Color" className="field-DropDown-Selection" onChangeFunction={selectTableColor} - // isOnchanges={SelectedTableColor ? true : false} - // valueData={SelectedTableColor} + isOnchanges={SelectedTableColor ? true : false} + valueData={SelectedTableColor} /> diff --git a/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx b/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx index 2ec42d9..1bd9777 100644 --- a/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx +++ b/src/Pages/BookingScreen/Template/SalesCountForStandard.jsx @@ -60,6 +60,7 @@ import { GoPackageDependencies } from 'react-icons/go'; import { Messages } from '../../../../ownLib/my-ui-lib.js'; import ShortcutKeyHelper from '../Components/UtillComponents/ShortcutKeyHelper.jsx'; +import AllSalesPageSettings from '../Components/UtillComponents/AllSalesPageSettings.jsx'; const SalesCountForStandard = ({ DineInAccess, @@ -830,6 +831,7 @@ const SalesCountForStandard = ({ )} {preferenceshortcutkey && } +
{Customisebillno && } {SessionData?.FeatureAddonData?.FeatureDtls?.find(