Merge pull request 'Table settings insales page' (#48) from table-header-settings into main
Reviewed-on: Pozomind/pozo-retail-app#48
This commit is contained in:
commit
a96c91cd00
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -2640,6 +2640,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:
|
||||
|
|
@ -2769,6 +2771,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,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
/>
|
||||
<DefaultModal
|
||||
|
||||
</div>
|
||||
<DefaultModal
|
||||
open={TableModelopen}
|
||||
title="Fonts"
|
||||
footer={true}
|
||||
|
|
@ -5026,7 +5029,6 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
handleSubmit={TablehandleSubmit}
|
||||
buttonText="SAVE"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{SelectedBillTableCheckValues?.filter(
|
||||
(item) =>
|
||||
|
|
|
|||
|
|
@ -1237,7 +1237,7 @@ function BSReprint() {
|
|||
CreatedDate={orderDetail?.CreatedDate}
|
||||
PaymentStatus={reprintData?.[0]?.OrderPaymentDtl}
|
||||
Preference={SettingDataSelector}
|
||||
|
||||
printDatas={printDatas}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -1370,7 +1370,7 @@ function BSReprint() {
|
|||
label: option.ConfigName,
|
||||
}))}
|
||||
label={
|
||||
<label class="required">Reprint reason Type</label>
|
||||
<label className="required">Reprint reason Type</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}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -1626,6 +1627,7 @@ function BSReprint() {
|
|||
CreatedDate={orderDetail?.CreatedDate}
|
||||
PaymentStatus={reprintData?.[0]?.OrderPaymentDtl}
|
||||
Preference={SettingDataSelector}
|
||||
printDatas={printDatas}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<>
|
||||
<TooltipWrapper>
|
||||
<div
|
||||
onClick={() => setsettingModal(true)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
padding: '5px 10px',
|
||||
borderRadius: '4px',
|
||||
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
<IoMdSettings />
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
<TooltipWrapper>
|
||||
<div
|
||||
onClick={() => setsettingModal(true)}
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '5px',
|
||||
padding: '5px 10px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
<IoMdSettings />
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
|
||||
<DefaultModal
|
||||
open={settingModal}
|
||||
footer={false}
|
||||
handleCancel={onclose}
|
||||
|
||||
title={"Settings"} width={500}>
|
||||
<div style={{ padding: '20px' }}>
|
||||
{checkboxItems.map(item => (
|
||||
<div key={item.id} style={{ marginBottom: '10px' }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={item.checked}
|
||||
onChange={(e) => {
|
||||
setCheckboxItems(prev =>
|
||||
prev.map(i =>
|
||||
i.id === item.id ? { ...i, checked: e.target.checked } : i
|
||||
)
|
||||
)
|
||||
}}
|
||||
/>
|
||||
{item.label}
|
||||
</label>
|
||||
title={"Settings"}
|
||||
width={700}
|
||||
>
|
||||
|
||||
<div>
|
||||
<div
|
||||
className="SettingsListSwitchBTN"
|
||||
>
|
||||
<div
|
||||
className={selectedComponent === 'Payment' ? 'selected' : ''}
|
||||
onClick={() => ComponentSelect('Payment')}
|
||||
>
|
||||
Payment Option
|
||||
</div>
|
||||
))}
|
||||
<div
|
||||
className={selectedComponent === 'Table' ? 'selected' : ''}
|
||||
onClick={() => ComponentSelect('Table')}
|
||||
>
|
||||
Table
|
||||
</div>
|
||||
</div>
|
||||
{selectedComponent == "Payment" &&
|
||||
<div>
|
||||
<PaymentOptions />
|
||||
</div>
|
||||
}
|
||||
|
||||
{
|
||||
selectedComponent === "Table" &&
|
||||
<TableHeadersetting />
|
||||
}
|
||||
|
||||
</div>
|
||||
</DefaultModal>
|
||||
</>
|
||||
</DefaultModal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<>
|
||||
<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 === 'Item' ? 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 style={{ flex: '0 0 48%' }}>
|
||||
<p style={{ marginBottom: '8px', fontWeight: '500' }}>BillTable Font</p>
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
{hasBackground ? (
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '1rem',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div className="colorDropdown">
|
||||
<Form.Item
|
||||
name="TableColor"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select Color',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<p className="Selection-Component-SubHeading">
|
||||
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="Selection-Component-SubHeading">
|
||||
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}
|
||||
<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;
|
||||
Loading…
Reference in New Issue