966 lines
32 KiB
JavaScript
966 lines
32 KiB
JavaScript
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,
|
|
getTemplate,
|
|
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';
|
|
import './AllSalesPageSettings.scss';
|
|
|
|
const TableHeadersetting = ({ setModalOpen }) => {
|
|
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
|
|
);
|
|
// 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([
|
|
{
|
|
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();
|
|
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 selectedNavbar = AllDetails?.Templates?.[0]?.ComponentDetails?.find(
|
|
(item) => item?.SessionName === 'BookingNavbar'
|
|
);
|
|
let AllBillingdetails = AllDetails?.Components?.find(
|
|
(item) => item?.ComponentName === selectedBilling?.ComponentName
|
|
);
|
|
console.log(AllDetails, selectedNavbar, 'templateresponse');
|
|
setBillingSettings(AllBillingdetails);
|
|
const optionIds = selectedBilling?.FieldDetails?.map(
|
|
(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);
|
|
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]
|
|
};
|
|
|
|
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);
|
|
}
|
|
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);
|
|
};
|
|
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: 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 });
|
|
};
|
|
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;
|
|
GetTemplatedetails();
|
|
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?.filter(
|
|
(c) => c.SessionName !== 'BookingBilling'
|
|
)?.map((c) => c.ColorId) || []),
|
|
|
|
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
|
|
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);
|
|
}
|
|
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);
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexWrap: 'wrap',
|
|
gap: '10px',
|
|
marginTop: '20px',
|
|
}}
|
|
>
|
|
<Checkbox.Group
|
|
style={{
|
|
width: '100%',
|
|
}}
|
|
onChange={BillTableSelectlistonChange}
|
|
value={SelectedBillTableCheckValues}
|
|
>
|
|
<Row>
|
|
{billingSettings?.ComponentOptionsDetails?.map((value, key) => (
|
|
<Checkbox
|
|
style={{ padding: '12px' }}
|
|
value={value?.OptionId}
|
|
// 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}
|
|
</Checkbox>
|
|
))}
|
|
</Row>
|
|
</Checkbox.Group>
|
|
{/* {billingSettings?.ComponentOptionsDetails?.map((item) => (
|
|
<div key={item.id} style={{ flex: '0 0 48%' }}>
|
|
<Checkbox
|
|
checked={item.checked}
|
|
onChange={(e) => handleChange(item.id, e.target.checked)}
|
|
>
|
|
{item.label}
|
|
</Checkbox>
|
|
</div>
|
|
))} */}
|
|
</div>
|
|
<div className="selctfontBackInputMain">
|
|
<div className="selctfontBackInput">
|
|
<p className="SelectionComponentSubHeading">BillTable Font</p>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: '10px',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<DropDowns
|
|
options={TableFontData?.map((option) => ({
|
|
value: option.FontId,
|
|
label: option.SessionFont,
|
|
}))}
|
|
label="Font"
|
|
onChangeFunction={selectFont3}
|
|
className="settingsales-DropDown-Selection"
|
|
isOnchanges={!!selectedTableFont}
|
|
valueData={selectedTableFont}
|
|
/>
|
|
<div
|
|
className="settingaddNewSalesFiledBTN"
|
|
onClick={TablehandleUploadFonts}
|
|
>
|
|
Add
|
|
<IoMdAdd
|
|
// className="plusOutlinedIcon"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{hasBackground ? (
|
|
<div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '10px',
|
|
flexWrap: 'nowrap',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="colorDropdown">
|
|
<Form.Item
|
|
name="TableColor"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Color',
|
|
},
|
|
]}
|
|
>
|
|
<p className="SelectionComponentSubHeading">
|
|
BillTable Background Color
|
|
</p>
|
|
<DropDowns
|
|
options={TableBackgroundColorData?.map((option) => ({
|
|
value: option.ColorId,
|
|
label: (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '27px',
|
|
height: '27px',
|
|
borderRadius: '25.774192810058594px',
|
|
backgroundColor: option.BackgroundColor,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: '27px',
|
|
height: '27px',
|
|
borderRadius: '50px',
|
|
marginLeft: '15px',
|
|
backgroundColor: option.FontColor,
|
|
}}
|
|
>
|
|
|
|
</span>
|
|
</div>
|
|
<div>{option.ThemeName}</div>
|
|
</div>
|
|
),
|
|
}))}
|
|
labelChange={true}
|
|
label="Color"
|
|
className="field-DropDown-Selection"
|
|
onChangeFunction={selectTableColor}
|
|
isOnchanges={SelectedTableColor ? true : false}
|
|
valueData={SelectedTableColor}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
<div
|
|
className="addNewSalesFiledBTN"
|
|
onClick={BillhandleUploadColor}
|
|
>
|
|
Add
|
|
<IoMdAdd className="plusOutlinedIcon" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{hasOverallBackground ? (
|
|
<div>
|
|
<Modal
|
|
open={BillingUploadOverallColor}
|
|
title="BillTable Overall Background Color"
|
|
closeIcon={
|
|
<CloseOutlined
|
|
onClick={() => {
|
|
setBillingUploadOverallColor(false);
|
|
}}
|
|
/>
|
|
}
|
|
width={400}
|
|
footer={null}
|
|
>
|
|
<div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
align: 'center',
|
|
width: '60%',
|
|
gap: '0.5rem',
|
|
border: '1px solid black',
|
|
borderRadius: '10px',
|
|
padding: '10px',
|
|
}}
|
|
>
|
|
<p style={{ fontSize: '14px', fontWeight: 700 }}>
|
|
Selected Color:{' '}
|
|
</p>
|
|
<div
|
|
style={{
|
|
width: '35px',
|
|
height: '23px',
|
|
borderRadius: '5px',
|
|
backgroundColor: BillingOverallColor
|
|
? BillingOverallColor
|
|
: null,
|
|
}}
|
|
></div>
|
|
</div>
|
|
<div className="hex-input">
|
|
<InputField
|
|
prefix="#"
|
|
value={billingOverallHex}
|
|
inputMode="numeric"
|
|
maxLength={8}
|
|
onChange={handleBillingOverallHexCode}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<SwatchesPicker onChange={handleBillingOverallColorChange} />
|
|
|
|
<div>
|
|
<button
|
|
className="colorBtn"
|
|
onClick={handleBillingOverallColorSubmit}
|
|
>
|
|
SAVE
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '1rem',
|
|
flexWrap: 'nowrap',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<div className="colorDropdown">
|
|
<Form.Item
|
|
name="BillingOverallColor"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: 'Please Select Color',
|
|
},
|
|
]}
|
|
>
|
|
<p className="SelectionComponentSubHeading">
|
|
BillTable Overall-Background
|
|
</p>
|
|
<DropDowns
|
|
options={BillingOverallColorsList?.map((option) => ({
|
|
value: option.ColorId,
|
|
label: (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
gap: '0.5rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: '27px',
|
|
height: '27px',
|
|
borderRadius: '25.774192810058594px',
|
|
backgroundColor: option.BackgroundColor,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
width: '27px',
|
|
height: '27px',
|
|
borderRadius: '50px',
|
|
marginLeft: '15px',
|
|
backgroundColor: option.FontColor,
|
|
}}
|
|
>
|
|
|
|
</span>
|
|
</div>
|
|
<div>{option.ThemeName}</div>
|
|
</div>
|
|
),
|
|
}))}
|
|
labelChange={true}
|
|
label={
|
|
<p style={{ fontSize: '11px' }}>Overall Background</p>
|
|
}
|
|
className="field-DropDown-Selection"
|
|
onChangeFunction={selectBillingOverallColor}
|
|
isOnchanges={dropdownBillingOverallColor ? true : false}
|
|
valueData={dropdownBillingOverallColor}
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
<div
|
|
className="addNewSalesFiledBTN"
|
|
onClick={handleBillingUploadOverallColor}
|
|
>
|
|
Add
|
|
<IoMdAdd
|
|
className="plusOutlinedIcon"
|
|
onClick={handleBillingUploadOverallColor}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<DefaultModal
|
|
open={TableFontModelopen}
|
|
title="Fonts"
|
|
footer={true}
|
|
children={
|
|
<Form form={Tableform}>
|
|
<div className="fontInputs">
|
|
<div>
|
|
<Form.Item
|
|
name="TableFont"
|
|
rules={[
|
|
{
|
|
required: true,
|
|
pattern: /^(?!\s*$).+/,
|
|
message: 'Please Enter Font',
|
|
},
|
|
{
|
|
validator: async (_, value) => {
|
|
await validateSafeInput(value); // To block HTML tags & SQL keywords
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
<InputField
|
|
field="TableFont"
|
|
label="Font"
|
|
className="Input"
|
|
fieldState={true}
|
|
fieldApi={true}
|
|
autoComplete="off"
|
|
/>
|
|
</Form.Item>
|
|
</div>
|
|
</div>
|
|
<p style={{ color: 'red' }}>* Google Fonts Only</p>
|
|
</Form>
|
|
}
|
|
handleCancel={TablehandleCancel}
|
|
handleSubmit={TablehandleSubmit}
|
|
buttonText="SAVE"
|
|
/>
|
|
|
|
<Modal
|
|
open={BillUploadColor}
|
|
title="Colors"
|
|
closeIcon={<CloseOutlined onClick={TableonCancel4} />}
|
|
width={400}
|
|
footer={null}
|
|
>
|
|
<div>
|
|
<div className="color-hex-select">
|
|
<RadioGrpButton
|
|
content={[
|
|
{ value: 'Y', label: 'Background' },
|
|
{ value: 'N', label: 'Font' },
|
|
]}
|
|
defaultSelect={TableColorType}
|
|
fieldState={true}
|
|
onSelectFuntion={(e) => openColour4(e)}
|
|
/>
|
|
<div className="hex-input">
|
|
<InputField
|
|
prefix="#"
|
|
value={
|
|
TableColorType?.toLowerCase() === 'y'
|
|
? tableBGHex
|
|
: TableColorType?.toLowerCase() === 'n'
|
|
? tableFontHex
|
|
: ''
|
|
}
|
|
inputMode="numeric"
|
|
maxLength={8}
|
|
onChange={handleTableHexChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
gap: '1rem',
|
|
justifyContent: 'center',
|
|
marginTop: '10px',
|
|
borderRadius: '10px',
|
|
border: '1px solid #000',
|
|
padding: '10px',
|
|
width: '110%',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
}}
|
|
>
|
|
<p style={{ fontSize: '10px', fontWeight: 700 }}>
|
|
{' '}
|
|
Selected Background Color :{' '}
|
|
</p>
|
|
<div
|
|
style={{
|
|
width: '35px',
|
|
height: '23px',
|
|
borderRadius: '5px',
|
|
backgroundColor: TablebackgroundColor
|
|
? TablebackgroundColor
|
|
: null,
|
|
}}
|
|
></div>
|
|
<>|</>
|
|
</div>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '0.5rem',
|
|
}}
|
|
>
|
|
<p style={{ fontSize: '10px', fontWeight: 700 }}>
|
|
{' '}
|
|
Selected Font Color :{' '}
|
|
</p>
|
|
<div
|
|
style={{
|
|
width: '35px',
|
|
height: '23px',
|
|
borderRadius: '5px',
|
|
backgroundColor: TablefontColor ? TablefontColor : null,
|
|
}}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<SwatchesPicker onChange={handleColorChange4} />
|
|
|
|
<div>
|
|
<button className="colorBtn" onClick={handleBackgroundColorSubmit}>
|
|
SAVE
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
<div className=" submitButtonDiv">
|
|
<Buttons
|
|
buttonText="SUBMIT"
|
|
color="901D77"
|
|
icon={<ArrowRightOutlined />}
|
|
htmlType={true}
|
|
handleSubmit={HandleSubmit}
|
|
/>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
export default TableHeadersetting;
|