diff --git a/src/Features/ThemeChange/ThemeChange.js b/src/Features/ThemeChange/ThemeChange.js index c097192..7cd788e 100644 --- a/src/Features/ThemeChange/ThemeChange.js +++ b/src/Features/ThemeChange/ThemeChange.js @@ -364,7 +364,14 @@ export const getPrintSelectionComponentData = createAsyncThunk( ); } ); - +export const getSalesTemplate = createAsyncThunk( + 'theme/getSalesTemplate', + async (Data) => { + return await axiosRetailInstanceData.get( + `${apiUrl}/ThemeMaster?compId=${Data.CompId}&branchId=${Data.BranchId}&appId=${Data.AppId}` + ); + } +); export const PricingAppPricingNameData = createAsyncThunk( 'theme/PricingAppPricingNameData', async (data) => { diff --git a/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx b/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx index 77aa16d..f968310 100644 --- a/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx +++ b/src/Pages/BookingScreen/Components/BSCombo/BSC1Search.jsx @@ -1942,6 +1942,8 @@ export default function BSC1Search(props) { ?.StockDetails?.[stockIndex]?.OnePcsPrice : a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex] ?.StockDetails?.[stockIndex]?.MRP, + FullProductIdentifierDtls:a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex] + ?.StockDetails?.[stockIndex]?.ProductIdentifierDtls, OrderRate: parseFloat(TotalOrderRate).toFixed(2), SellingPrice: parseFloat(TotalOrderRate).toFixed(2), SuppId: @@ -2071,6 +2073,8 @@ export default function BSC1Search(props) { Offer: a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex] ?.StockDetails?.[stockIndex]?.OfferPrice, + FullProductIdentifierDtls:a?.ProductDetail?.[QtyIndex]?.ProdVariantDetails?.[VarientIndex] + ?.StockDetails?.[stockIndex]?.ProductIdentifierDtls, BookingTypeName: BookingType, CounterName: a?.CounterName, }; diff --git a/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx index 7097f3d..29dc690 100644 --- a/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx +++ b/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx @@ -2278,6 +2278,7 @@ const SelectionComponent = forwardRef((props, ref) => { }); }; const validateFontsTable = async (values) => { + console.log(values,"table font") const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`; fetch(apiUrl) .then((response) => response.json()) @@ -4982,7 +4983,9 @@ const SelectionComponent = forwardRef((props, ref) => { className="plusOutlinedIcon" /> - + { handleSubmit={TablehandleSubmit} buttonText="SAVE" /> - {SelectedBillTableCheckValues?.filter( (item) => diff --git a/src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx b/src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx index 2a3abf5..f1294f6 100644 --- a/src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx +++ b/src/Pages/BookingScreen/Components/OtherConponents/Reprint/BSReprint.jsx @@ -1237,7 +1237,7 @@ function BSReprint() { CreatedDate={orderDetail?.CreatedDate} PaymentStatus={reprintData?.[0]?.OrderPaymentDtl} Preference={SettingDataSelector} - + printDatas={printDatas} /> ))} @@ -1370,7 +1370,7 @@ function BSReprint() { label: option.ConfigName, }))} label={ - + } className="field-DropDown-Emp" onChangeFunction={(e) => reprintReasonDropDownChange(e)} @@ -1565,6 +1565,7 @@ function BSReprint() { CreatedDate={orderDetail?.CreatedDate} PaymentStatus={reprintData?.[0]?.OrderPaymentDtl} Preference={SettingDataSelector} + printDatas={printDatas} /> ))} @@ -1626,6 +1627,7 @@ function BSReprint() { CreatedDate={orderDetail?.CreatedDate} PaymentStatus={reprintData?.[0]?.OrderPaymentDtl} Preference={SettingDataSelector} + printDatas={printDatas} /> ))} diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx index a561fbc..6deaca4 100644 --- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx @@ -1,67 +1,83 @@ import { useState } from "react"; -import { IoMdSettings } from "react-icons/io"; +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 [checkboxItems, setCheckboxItems] = useState([ - { id: 'item1', label: 'Show Details', checked: true }, - { id: 'item2', label: 'Auto Refresh', checked: false }, - { id: 'item3', label: 'Notifications', checked: true } - ]) - console.log(settingModal,"settingModal") + const [settingModal, setsettingModal] = useState(false) + const [selectedComponent, setselectedComponent] = useState('Payment') + + const onclose = () => { setsettingModal(false) } - return ( + const ComponentSelect = (value) => { + setselectedComponent(value); + }; + return ( <> - -
setsettingModal(true)} - style={{ - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - gap: '5px', - padding: '5px 10px', - borderRadius: '4px', - - fontSize: '14px', - }} - > - -
- + +
setsettingModal(true)} + style={{ + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + gap: '5px', + padding: '5px 10px', + borderRadius: '4px', + fontSize: '14px', + }} + > + +
+ -
- {checkboxItems.map(item => ( -
- + title={"Settings"} + width={700} + > + +
+
+
ComponentSelect('Payment')} + > + Payment Option
- ))} +
ComponentSelect('Table')} + > + Table +
+
+ {selectedComponent == "Payment" && +
+ +
+ } + + { + selectedComponent === "Table" && + + } +
- - + + ) } diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss new file mode 100644 index 0000000..25ef74c --- /dev/null +++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss @@ -0,0 +1,76 @@ +/// Another swtich button style code + +.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; + } +} \ No newline at end of file diff --git a/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx new file mode 100644 index 0000000..2bf0876 --- /dev/null +++ b/src/Pages/BookingScreen/Components/UtillComponents/TableHeadersetting.jsx @@ -0,0 +1,955 @@ +import { Checkbox, Form, Modal, Row } from 'antd'; +import { DropDowns } from '../../../../Components/Forms/DropDown'; +import { InputField } from '../../../../Components/Forms/InputField'; +import { validateSafeInput } from '../../../../Services/Others'; +import { DefaultModal } from '../../../../Components/Modal/DefaultModal'; +import { CloseOutlined, ArrowRightOutlined } from '@ant-design/icons'; +import { IoMdAdd } from 'react-icons/io'; +import { useCallback, useEffect, useState } from 'react'; +import { SwatchesPicker } from 'react-color'; +import { RadioGrpButton } from '../../../../Components/Forms/RadioGroup'; +import { useSelector } from 'react-redux'; +import { + getSalesTemplate, + postColorData, + postTableFontData, + putSelectionComponentData, + StoredSessionData, +} from '../../../../Features/ThemeChange/ThemeChange'; +import { useDispatch } from 'react-redux'; +import Buttons from '../../../../Components/Forms/Buttons'; +import { Messages } from '../../../../Components/Notifications/Messages'; + +const TableHeadersetting = () => { + const dispatch = useDispatch(); + const SessionData = useSelector(StoredSessionData); + const AppId = SessionData?.AppId; + const CompId = SessionData?.CompId; + const BranchId = SessionData?.BranchId; + const UserId = SessionData?.UserId; + const UserType = SessionData?.UserType; + const [messageType, setMessageType] = useState(null); + const [messageData, setMessageData] = useState(null); + const [TemplateDetails, setTemplateDetails] = useState([]); + const [TableFontData, setTableFontData] = useState([ + { FontId: 1, SessionFont: 'Arial' }, + { FontId: 2, SessionFont: 'Roboto' }, + { FontId: 3, SessionFont: 'Open Sans' }, + { FontId: 4, SessionFont: 'Lato' }, + { FontId: 5, SessionFont: 'Montserrat' }, + ]); + const [selectedTableFont, setSelectedTableFont] = useState(); + console.log(selectedTableFont, 'selectedTableFontselectedTableFont'); + const [TableFontModelopen, setTableFontModelopen] = useState(false); + const [SelectedTableColor, setSelectedTableColor] = useState(null); + const [Tableform] = Form.useForm(); + const [billingSettings, setBillingSettings] = useState(); + console.log(billingSettings,"billingSettingsbillingSettings") + const [SelectedBillTableCheckValues, setSelectedBillTableCheckValues] = + useState([]); + const backgroundOptionId = billingSettings?.ComponentOptionsDetails?.find( + (item) => item?.OptionName === 'Background' + )?.OptionId; + + const hasBackground = + SelectedBillTableCheckValues?.includes(backgroundOptionId); + const OverallbackgroundOptionId = + billingSettings?.ComponentOptionsDetails?.find( + (item) => item?.OptionName === 'OverallBackground' + )?.OptionId; + + const hasOverallBackground = SelectedBillTableCheckValues?.includes( + OverallbackgroundOptionId + ); + console.log(billingSettings, 'billingSettingsbillingSettings'); + const [TableBackgroundColorData, setTableBackgroundColorData] = useState([ + { + ColorId: 4, + SessionId: 55, + OptionId: 108, + FontColor: '#000000', + BackgroundColor: '#f06292', + ThemeName: 'Theme 4', + ActiveStatus: 'A', + }, + { + ColorId: 14, + SessionId: 55, + OptionId: 108, + FontColor: '#000000', + BackgroundColor: '#52C41A', + ThemeName: 'Theme 14', + ActiveStatus: 'A', + }, + { + ColorId: 23, + SessionId: 55, + OptionId: 108, + FontColor: '#000000', + BackgroundColor: '#0d47a1', + ThemeName: 'Theme 23', + ActiveStatus: 'A', + }, + { + ColorId: 25, + SessionId: 55, + OptionId: 108, + FontColor: '#000000', + BackgroundColor: '#f8bbd0', + ThemeName: 'Theme 25', + ActiveStatus: 'A', + }, + { + ColorId: 29, + SessionId: 55, + OptionId: 108, + FontColor: '#000000', + BackgroundColor: '#ffcdd2', + ThemeName: 'Theme 29', + 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 [BillUploadColor, setBillUploadColor] = useState(false); + const [TableColorType, setTableColorType] = useState('Y'); + const [TablebackgroundColor, setTablebackgroundColor] = useState('#009b00'); + const [tableBGHex, setTableBGHex] = useState( + TablebackgroundColor?.replace('#', '').trim() + ); + const [TablefontColor, setTablefontColor] = useState('#000000'); + const [tableFontHex, setTableFontHex] = useState( + TablefontColor?.replace('#', '').trim() + ); + const [BillingUploadOverallColor, setBillingUploadOverallColor] = + useState(false); + const [BillingOverallColor, setBillingOverallColor] = useState('#000000'); + const [billingOverallHex, setBillingOverallHex] = useState( + BillingOverallColor?.replace('#', '').trim() + ); + const [selectOverallSelected, setSelectOverallSelected] = useState(true); + const [dropdownBillingOverallColor, setdropdownBillingOverallColor] = + useState(null); + const [FirstOnClick, setFirstOnClick] = useState(false); + + useEffect(() => { + GetTemplatedetails(); + }, []); + + const GetTemplatedetails = async () => { + let Data = { + CompId: CompId, + AppId: AppId, + BranchId: BranchId, + }; + const templateresponse = await dispatch(getSalesTemplate(Data)).unwrap(); + let AllDetails = templateresponse?.data?.data; + setTemplateDetails(AllDetails?.Templates); + let selectedBilling = AllDetails?.Templates?.[0]?.ComponentDetails?.find( + (item) => item?.SessionName === 'BookingBilling' + ); + let AllBillingdetails = AllDetails?.Components?.find( + (item) => item?.ComponentName === selectedBilling?.ComponentName + ); + console.log(AllDetails, AllDetails?.Templates, '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) + // setTableBackgroundColorData + console.log(Allfontdata, 'All table colors'); + // BookingBilling templateData?.['BookingBilling']?.[0] + }; + + const BillTableSelectlistonChange = (checkedValues) => { + setSelectedBillTableCheckValues(checkedValues); + }; + const handleChange = (itemId, checked) => { + setBillingSettings((prev) => + prev.map((item) => (item.id === itemId ? { ...item, checked } : item)) + ); + }; + const selectFont3 = (value) => { + setSelectedTableFont(value); + }; + const TablehandleUploadFonts = () => { + setTableFontModelopen(true); + }; + const TablehandleCancel = () => { + setTableFontModelopen(false); + Tableform.resetFields(); + }; + const selectTableColor = async (value) => { + await setSelectedTableColor(value); + formRef.current?.setFieldsValue({ TableColor: value }); + }; + const BillhandleUploadColor = () => { + setBillUploadColor(true); + }; + const handleColorChange4 = (color, event) => { + if (TableColorType == 'Y') { + setTablebackgroundColor(color['hex']); + setTableBGHex(color?.hex?.replace('#', '').trim()); + } + if (TableColorType == 'N') { + setTablefontColor(color['hex']); + 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, + }; + 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); + } + + } else { + setMessageData(response?.data?.response); + setMessageType('error'); + } + } else { + setMessageData('Please select different color for background and font'); + setMessageType('warning'); + } + }; + const TableonCancel4 = () => { + setBillUploadColor(false); + }; + const handleTableHexChange = (e) => { + if (TableColorType?.toLowerCase() === 'y') { + setTableBGHex(e?.target?.value); + if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) { + e.target.value = '009b00'; + } + setTablebackgroundColor(`#${e.target.value}`); + } + if (TableColorType?.toLowerCase() === 'n') { + setTableFontHex(e?.target?.value); + if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) { + e.target.value = '000000'; + } + setTablefontColor(`#${e.target.value}`); + } + }; + const handleBillingOverallHexCode = (e) => { + setBillingOverallHex(e?.target?.value); + if (e?.target?.value === '' || !isHexColor(`#${e.target.value}`)) { + e.target.value = '000000'; + } + setBillingOverallColor(`#${e.target.value}`); + }; + const handleBillingOverallColorChange = (color, event) => { + setBillingOverallColor(color['hex']); + setBillingOverallHex(color?.hex?.replace('#', '').trim()); + }; + 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'); + // } + }; + const selectBillingOverallColor = async (value) => { + await setdropdownBillingOverallColor(value); + formRef.current?.setFieldsValue({ BillingOverallColor: value }); + let billOverallColorVal = BillingOverallColorsList?.filter( + (data) => data?.ColorId === value + ); + }; + const openColour4 = (value) => { + setTableColorType(value); + }; + const handleBillingUploadOverallColor = () => { + setBillingUploadOverallColor(true); + }; + + const TablehandleSubmit = async () => { + const values = await Tableform.validateFields(); + validateFontsTable(values); + }; + const validateFontsTable = async (values) => { + console.log(values,"valuesvalues") + const apiUrl = `https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDP1HqNkLI53iIAH-SB9_mt_24QdkUZ_24`; + 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 = { + SessionFont: formatFontName(values['TableFont']), + CreatedBy: UserId, + SessionId: billingSettings?.SessionId, + }; + response = await dispatch(postTableFontData(postData)).unwrap(); + } catch (err) { + if (err['message'] == 'Request failed with status code 422') { + response = { + data: { + statusCode: 0, + response: 'Font Not Added', + data: [], + }, + }; + } + } + if (response?.data?.statusCode == 1) { + setTableFontModelopen(false); + setMessageData(response?.data?.response); + if (response?.data?.response == 'Font Already Exists') { + setMessageType('warning'); + } else { + setMessageType('success'); + } + + dispatch(getTableFonts(BillingTableData?.[0]?.SessionId)).unwrap; + Tableform.resetFields(); + } else { + setMessageData(response?.data?.response); + setMessageType('error'); + } + } else { + setMessageType('warning'); + setMessageData('Please give the Correct google fonts Name!'); + + } + }) + .catch((error) => { + console.error('Error fetching fonts:', error); + }); + }; + function formatFontName(input) { + return input + ?.toLowerCase() + .split(/\s+/) + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word + .join(' '); + } + const HandleSubmit = async () => { + console.log(TemplateDetails, 'TemplateDetails.ColorDetail'); + const result = { + AppId: AppId, + CompId: CompId, + UserId: UserId, + BranchId: BranchId, + ColorId: TemplateDetails?.[0]?.ColorDetail?.map((c) => c.ColorId), + FontId: TemplateDetails?.[0]?.FontDetail?.map(f => + f.SessionName === "BookingBilling" ? selectedTableFont : f.FontId + ), + CreatedBy: UserId, + TemplateDetails: TemplateDetails?.[0]?.ComponentDetails.map((comp) => ({ + ComponentId: comp.ComponentId, // ✅ dynamic + ComponentDetails: + 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); + } + dispatch(changeScanTemplate({})) + + } else { + setMessageType('error'); + setMessageData(response?.data?.response); + setFirstOnClick(false); + } + }; + const onComplete = useCallback(() => { + setMessageData(null); + setMessageType(null); + }, []); + + return ( + <> + +
+ + + {billingSettings?.ComponentOptionsDetails?.map((value, key) => ( + Navholdoption(value.OptionName)} + key={value?.OptionId} + disabled={value.OptionName === 'Item' ? true : false} + > + {value.OptionName} + + ))} + + + {/* {billingSettings?.ComponentOptionsDetails?.map((item) => ( +
+ handleChange(item.id, e.target.checked)} + > + {item.label} + +
+ ))} */} +
+
+

BillTable Font

+ ({ + value: option.FontId, + label: option.SessionFont, + }))} + label="Font" + onChangeFunction={selectFont3} + className="settingsales-DropDown-Selection" + isOnchanges={!!selectedTableFont} + valueData={selectedTableFont} + /> +
+ Add + +
+
+ +
+
+ { + await validateSafeInput(value); // To block HTML tags & SQL keywords + return Promise.resolve(); + }, + }, + ]} + > + + +
+
+

* Google Fonts Only

+ + } + handleCancel={TablehandleCancel} + 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} + } + width={400} + footer={null} + > +
+
+ openColour4(e)} + /> +
+ +
+
+ +
+
+

+ {' '} + Selected Background Color :{' '} +

+
+ <>| +
+
+

+ {' '} + Selected Font Color :{' '} +

+
+
+
+
+ + + +
+ +
+ +
+ } + htmlType={true} + handleSubmit={HandleSubmit} + + /> +
+ + ); +}; +export default TableHeadersetting; diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss index 3ae00bf..581fe75 100644 --- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss +++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar3.scss @@ -552,31 +552,31 @@ } } - &::before { - content: ''; - position: absolute; - inset: 0; - padding: 1px; // border thickness - border-radius: inherit; - background: linear-gradient( - 270deg, - #fff3bac4, - #ffcc00, - #fff3baa1, - #ffcc00, - #fff3baab, - #ffcc00 - ); - background-size: 300% 300%; - animation: rainbowBorder 5s linear infinite; - // -webkit-mask: - // linear-gradient(#fff 0 0) content-box, - // linear-gradient(#fff 0 0); - -webkit-mask-composite: xor; - mask-composite: exclude; - pointer-events: none; - z-index: -1; - } + // &::before { + // content: ''; + // position: absolute; + // inset: 0; + // padding: 1px; // border thickness + // border-radius: inherit; + // background: linear-gradient( + // 270deg, + // #fff3bac4, + // #ffcc00, + // #fff3baa1, + // #ffcc00, + // #fff3baab, + // #ffcc00 + // ); + // background-size: 300% 300%; + // animation: rainbowBorder 5s linear infinite; + // // -webkit-mask: + // // linear-gradient(#fff 0 0) content-box, + // // linear-gradient(#fff 0 0); + // -webkit-mask-composite: xor; + // mask-composite: exclude; + // pointer-events: none; + // z-index: -1; + // } @keyframes rainbowBorder { 0% {