998 lines
39 KiB
JavaScript
998 lines
39 KiB
JavaScript
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
import { Form, Checkbox, Radio, Divider, InputNumber } from 'antd';
|
|
import { ArrowRightOutlined } from '@ant-design/icons';
|
|
import FormHeader from '../PageComponents/FormHeader.jsx';
|
|
import Buttons from '../../Components/Forms/Buttons.jsx';
|
|
import { Messages } from '../../Components/Notifications/Messages';
|
|
import {
|
|
changeBreadCrumb,
|
|
getEmpAccess,
|
|
} from '../../Features/AppPage/CenterPage.js';
|
|
import {
|
|
getApplicationDtlsByAppId,
|
|
getPreferenceAppNames02,
|
|
gettableData,
|
|
postPreferenceAppNames,
|
|
settingDataSelector,
|
|
} from '../../Features/PreferenceMaster/PreferenceMaster.js';
|
|
import { getSession } from '../../Services/Others.js';
|
|
import { useAuth } from '../../AuthContext.jsx';
|
|
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
|
|
import './PreferenceList.scss';
|
|
import { InputField } from '../../Components/Forms/InputField.jsx';
|
|
|
|
const PreferenceList = () => {
|
|
const { SadminuserAccess, featureaddDetails } = useAuth();
|
|
const dispatch = useDispatch();
|
|
const formRef = useRef();
|
|
|
|
const CompId = getSession('CompId');
|
|
const BranchId = getSession('BranchId');
|
|
const AppId = getSession('AppId');
|
|
const UserId = getSession('UserId');
|
|
const UserType = getSession('UserType');
|
|
const SalesReport = getSession('SalesReport');
|
|
const [open, setOpen] = useState(false);
|
|
const [applicationValue, setApplicationValue] = useState(null);
|
|
const [applicationName, setApplicationName] = useState(null);
|
|
const [messageType, setMessageType] = useState(null);
|
|
const [messageData, setMessageData] = useState(null);
|
|
const [activeSection, setActiveSection] = useState('general');
|
|
const [empData, setEmpData] = useState();
|
|
const [preferenceConfigs, setPreferenceConfigs] = useState([]);
|
|
|
|
const [addnewAccess, setAddNewAccess] = useState(true);
|
|
|
|
const tableValue = useSelector(settingDataSelector);
|
|
const appPreferences = useSelector(ApplicationPreferences);
|
|
const bookingTypePreference = appPreferences?.find(
|
|
(pre) => pre?.PreferredCatName === 'Booking Type'
|
|
)?.PreferenceCatDetails;
|
|
const dinePreference = bookingTypePreference?.find(
|
|
(type) =>
|
|
type?.PreferredSubCatName?.toLowerCase() === 'dine in' &&
|
|
type?.PreferredStatus === 'Y'
|
|
);
|
|
|
|
const settingsList = tableValue[0]?.SettingDtlDetails ?? preferenceConfigs;
|
|
|
|
const allSettingsMap = {};
|
|
settingsList?.forEach(({ SettingIdName, SettingValue, SettingCount, SettingTime,Comments }) => {
|
|
allSettingsMap[SettingIdName?.toLowerCase()] = { value: SettingValue, count: SettingCount, time: SettingTime?.split(' ')?.[0], comments: Comments };
|
|
});
|
|
|
|
console.log(featureaddDetails, 'featureaddDetails');
|
|
|
|
const buildInitialValues = () => ({
|
|
dashboard: allSettingsMap['dashboard']?.value === 'Y',
|
|
shortcutkeys: allSettingsMap['shortcutkeys']?.value === 'Y',
|
|
autoreceivestock: allSettingsMap['autoreceivestock']?.value === 'Y',
|
|
salespageaskiosk: allSettingsMap['salespageaskiosk']?.value === 'Y',
|
|
kioskotp: allSettingsMap['kioskotp']?.value === 'Y',
|
|
decimal: allSettingsMap['decimal']?.value === 'Y',
|
|
enabledModules: [
|
|
...(allSettingsMap['dinein']?.value === 'Y' ? ['dinein'] : []),
|
|
...(allSettingsMap['estimation']?.value === 'Y' ? ['estimation'] : []),
|
|
],
|
|
searchfocus: allSettingsMap['searchfocus']?.value === 'Y',
|
|
addproductcard: allSettingsMap['addproductcard']?.value === 'Y',
|
|
enabledFeatures: [
|
|
...(allSettingsMap['parking']?.value === 'Y' ? ['parking'] : []),
|
|
...(allSettingsMap['offer']?.value === 'Y' ? ['offer'] : []),
|
|
],
|
|
stockselection: allSettingsMap['stockselection']?.value === 'Y',
|
|
weightasquantity: allSettingsMap['weightasquantity']?.value === 'Y',
|
|
expiredselection: allSettingsMap['expiredselection']?.value === 'Y',
|
|
salesmode: allSettingsMap['sales mode']?.value === 'Y',
|
|
retailshortname: allSettingsMap['retailshortname']?.comments || 'RT',
|
|
wholesaleshortname: allSettingsMap['wholesaleshortname']?.comments || 'WS',
|
|
billitemsorder: allSettingsMap['billitemsorder']?.value === 'Y',
|
|
preorderpricechange: allSettingsMap['preorderpricechange']?.value === 'Y',
|
|
quantityrestriction: allSettingsMap['overalllimit']?.value === 'Y' || allSettingsMap['itemwiselimit']?.value === 'Y',
|
|
quantityrestrictiontype: allSettingsMap['overalllimit']?.value === 'Y' ? 'overall' : allSettingsMap['itemwiselimit']?.value === 'Y' ? 'itemwise' : 'overall',
|
|
kiosktimelimit: allSettingsMap['hours']?.value === 'Y' || allSettingsMap['minutes']?.value === 'Y',
|
|
kiosktimelimittype: allSettingsMap['hours']?.value === 'Y' ? 'hours' : allSettingsMap['minutes']?.value === 'Y' ? 'minutes' : 'minutes',
|
|
maxquantity: allSettingsMap['overalllimit']?.value === 'Y' ? allSettingsMap['overalllimit']?.count || 1 : allSettingsMap['itemwiselimit']?.value === 'Y' ? allSettingsMap['itemwiselimit']?.count || 1 : 1,
|
|
maxtime:
|
|
allSettingsMap['hours']?.value === 'Y'
|
|
? (allSettingsMap['hours']?.time
|
|
? parseFloat(allSettingsMap['hours']?.time / 60)
|
|
: 0.5)
|
|
: allSettingsMap['minutes']?.value === 'Y'
|
|
? parseFloat(allSettingsMap['minutes']?.time || 30)
|
|
: 30,
|
|
billOption: ['whatsapp', 'sms', 'email'].some(
|
|
(k) => allSettingsMap[k]?.value === 'Y'
|
|
)
|
|
? 'pdf'
|
|
: 'print',
|
|
pdfSendOptions: ['whatsapp', 'email', 'sms'].filter(
|
|
(k) => allSettingsMap[k]?.value === 'Y'
|
|
),
|
|
tokenonly: allSettingsMap['tokenonly']?.value === 'Y',
|
|
allproductindividualtoken:
|
|
allSettingsMap['allproductindividualtoken']?.value === 'Y',
|
|
printOptions: ['printuom', 'printlogo', 'printgreetings'].filter(
|
|
(k) => allSettingsMap[k]?.value === 'Y'
|
|
),
|
|
mobilea4: allSettingsMap['mobilea4']?.value === 'Y',
|
|
estimateSettings: [
|
|
...(allSettingsMap['estimateprintheader']?.value === 'Y' ? ['estimateprintheader'] : []),
|
|
...(allSettingsMap['estimatetitle']?.value === 'Y' ? ['estimatetitle'] : []),
|
|
],
|
|
scanlayout: allSettingsMap['scanlayout']?.value === 'Y',
|
|
verifyproduct: allSettingsMap['verifyproduct']?.value === 'Y',
|
|
imeidetails: allSettingsMap['imeidetails']?.value === 'Y',
|
|
customisedbillnumber: allSettingsMap['customisedbillnumber']?.value === 'Y',
|
|
upiqr: allSettingsMap['upiqr']?.value === 'Y',
|
|
lowstockreport: allSettingsMap['lowstockreport']?.value === 'Y',
|
|
weeklysalesreport: allSettingsMap['weeklysalesreport']?.value === 'Y',
|
|
notificationblink: allSettingsMap['notificationblink']?.value === 'Y',
|
|
onlineindivdualslots: allSettingsMap['onlineindivdualslots']?.value === 'Y',
|
|
editbill: allSettingsMap['editbill']?.value === 'Y',
|
|
notification: [
|
|
...(allSettingsMap['onbilltime']?.value === 'Y' ? ['onbilltime'] : []),
|
|
...(allSettingsMap['1daybefore']?.value === 'Y' ? ['1daybefore'] : []),
|
|
...(allSettingsMap['1hourbefore']?.value === 'Y' ? ['1hourbefore'] : []),
|
|
],
|
|
BookingOptionsandmethod: [
|
|
...(allSettingsMap['allow individual booking']?.value === 'Y'
|
|
? ['allow individual booking']
|
|
: []),
|
|
...(allSettingsMap['single booking only']?.value === 'Y'
|
|
? ['single booking only']
|
|
: []),
|
|
],
|
|
});
|
|
|
|
const [initialValues, setInitialValues] = useState();
|
|
console.log(initialValues, 'initialValues');
|
|
useEffect(() => {
|
|
dispatch(
|
|
changeBreadCrumb({
|
|
items: [
|
|
{ name: 'Home', link: `${import.meta.env.BASE_URL}app-page/home` },
|
|
],
|
|
})
|
|
);
|
|
fetchTableData();
|
|
|
|
const centerPageSub = document.querySelector('.centerPageSub');
|
|
if (centerPageSub) {
|
|
centerPageSub.style.overflow = 'hidden';
|
|
}
|
|
|
|
return () => {
|
|
if (centerPageSub) {
|
|
centerPageSub.style.overflow = '';
|
|
}
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (settingsList) {
|
|
const built = buildInitialValues();
|
|
setInitialValues(built);
|
|
console.log(built, 'built');
|
|
formRef.current?.setFieldsValue(built);
|
|
}
|
|
}, [settingsList]);
|
|
|
|
useEffect(() => {
|
|
if (UserType === 'Employee') fetchEmpAccess();
|
|
}, [UserType]);
|
|
|
|
useEffect(() => {
|
|
let hasAccess =
|
|
['Admin', 'Super Admin'].includes(UserType) ||
|
|
(UserType === 'Employee' && empData?.AddAccess === 'Y') ||
|
|
(UserType === 'Super Admin User' &&
|
|
SadminuserAccess?.find((e) => e.MenuName === 'Preference')
|
|
?.AddAccess === 'Y');
|
|
setAddNewAccess(!hasAccess);
|
|
}, [empData, SadminuserAccess, UserType]);
|
|
|
|
useEffect(() => {
|
|
if (open) applicationDropdownData();
|
|
}, [open]);
|
|
|
|
useEffect(() => {
|
|
fetchTableData();
|
|
if (tableValue?.length === 0) {
|
|
getPreferenceConfigs();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const container = document.querySelector('.preferences-list');
|
|
if (!container) return;
|
|
|
|
const handleScroll = () => {
|
|
const sections = [
|
|
'general',
|
|
'notifications',
|
|
'sales-page',
|
|
'print-preferences',
|
|
];
|
|
const containerTop = container.scrollTop;
|
|
|
|
for (const sectionId of sections) {
|
|
const element = document.getElementById(sectionId);
|
|
if (element) {
|
|
const elementTop = element.offsetTop - container.offsetTop;
|
|
const elementBottom = elementTop + element.offsetHeight;
|
|
|
|
if (
|
|
elementTop <= containerTop + 100 &&
|
|
elementBottom > containerTop
|
|
) {
|
|
setActiveSection(sectionId);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
container.addEventListener('scroll', handleScroll);
|
|
return () => container.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
const getPreferenceConfigs = async () => {
|
|
const res = await dispatch(getPreferenceAppNames02())?.unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setPreferenceConfigs(
|
|
res?.data?.data?.map((i) => ({
|
|
SettingIdName: i.ConfigName,
|
|
SettingId: i.ConfigId,
|
|
Comments: i.Comments || "",
|
|
SettingValue: 'N',
|
|
}))
|
|
);
|
|
}
|
|
};
|
|
|
|
const fetchEmpAccess = async () => {
|
|
const data = { CompId, BranchId, AppId, EmpId: UserId };
|
|
const response = await dispatch(getEmpAccess(data)).unwrap();
|
|
const access = response?.data?.data?.[0]?.EmpAccessDetails?.find(
|
|
(i) => i.ConfigName === 'Preference'
|
|
);
|
|
setEmpData(access);
|
|
};
|
|
|
|
const applicationDropdownData = async () => {
|
|
const res = await dispatch(getApplicationDtlsByAppId({ AppId })).unwrap();
|
|
if (res?.data?.statusCode === 1) {
|
|
setApplicationName(res?.data?.data?.[0]?.AppName);
|
|
await fetchTableData();
|
|
}
|
|
};
|
|
|
|
const fetchTableData = async () => {
|
|
await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
|
|
handleApplicationChange(AppId);
|
|
};
|
|
|
|
const handleApplicationChange = async (value) => {
|
|
setApplicationValue(value);
|
|
formRef.current?.setFieldsValue({ AppId: value });
|
|
};
|
|
|
|
const onComplete = useCallback(() => {
|
|
setMessageData(null);
|
|
setMessageType(null);
|
|
}, []);
|
|
|
|
const handleMenuClick = (e, targetId) => {
|
|
e.preventDefault();
|
|
setActiveSection(targetId);
|
|
const container = document.querySelector('.preferences-list');
|
|
const target = document.getElementById(targetId);
|
|
|
|
if (container && target) {
|
|
const containerTop = container.offsetTop;
|
|
const targetTop = target.offsetTop;
|
|
const scrollPosition = targetTop - containerTop;
|
|
|
|
container.scrollTo({
|
|
top: scrollPosition,
|
|
behavior: 'smooth',
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
const values = formRef.current.getFieldsValue();
|
|
const salesMode = values.salesmode;
|
|
console.log("Sales Mode:", values.salesmode);
|
|
console.log("Retail Short Name:", values.retailshortname);
|
|
console.log("Wholesale Short Name:", values.wholesaleshortname);
|
|
const settings = settingsList || [];
|
|
console.log(values, 'values');
|
|
const updatedSettings = settings.map((setting) => {
|
|
const key = setting.SettingIdName.toLowerCase();
|
|
const boolValues = {
|
|
dashboard: values.dashboard,
|
|
shortcutkeys: values.shortcutkeys,
|
|
autoreceivestock: values.autoreceivestock,
|
|
salespageaskiosk: values.salespageaskiosk,
|
|
kioskotp: values.kioskotp,
|
|
decimal: values.decimal,
|
|
searchfocus: values.searchfocus,
|
|
addproductcard: values.addproductcard,
|
|
stockselection: values.stockselection,
|
|
weightasquantity: values.weightasquantity,
|
|
expiredselection: values.expiredselection,
|
|
'sales mode': values?.['salesmode'],
|
|
|
|
billitemsorder: values.billitemsorder,
|
|
preorderpricechange: values.preorderpricechange,
|
|
tokenonly: values.tokenonly,
|
|
allproductindividualtoken: values.allproductindividualtoken,
|
|
mobilea4: values.mobilea4,
|
|
scanlayout: values.scanlayout,
|
|
verifyproduct: values.verifyproduct,
|
|
imeidetails: values.imeidetails,
|
|
customisedbillnumber: values.customisedbillnumber,
|
|
upiqr: values.upiqr,
|
|
lowstockreport: values.lowstockreport,
|
|
weeklysalesreport: values.weeklysalesreport,
|
|
notificationblink: values.notificationblink,
|
|
editbill: values.editbill,
|
|
overalllimit: values.quantityrestriction && values.quantityrestrictiontype === 'overall',
|
|
itemwiselimit: values.quantityrestriction && values.quantityrestrictiontype === 'itemwise',
|
|
hours: values.kiosktimelimit && values.kiosktimelimittype === 'hours',
|
|
minutes: values.kiosktimelimit && values.kiosktimelimittype === 'minutes',
|
|
};
|
|
|
|
const arrayValues = {
|
|
dinein: values.enabledModules,
|
|
estimation: values.enabledModules,
|
|
parking: values.enabledFeatures,
|
|
estimateprintheader: values.estimateSettings,
|
|
estimatetitle: values.estimateSettings,
|
|
offer: values.enabledFeatures,
|
|
whatsapp: values.pdfSendOptions,
|
|
sms: values.pdfSendOptions,
|
|
email: values.pdfSendOptions,
|
|
printuom: values.printOptions,
|
|
printlogo: values.printOptions,
|
|
printgreetings: values.printOptions,
|
|
onbilltime: values.notification,
|
|
'1daybefore': values.notification,
|
|
'1hourbefore': values.notification,
|
|
'allow individual booking': values['BookingOptionsandmethod'],
|
|
'single booking only': values['BookingOptionsandmethod'],
|
|
};
|
|
|
|
const isChecked =
|
|
key in boolValues
|
|
? boolValues[key]
|
|
: (arrayValues[key]?.includes(key) ?? false);
|
|
|
|
return {
|
|
ConfigName: setting.SettingIdName,
|
|
SettingId: setting.SettingId,
|
|
|
|
Comments:
|
|
key === "retailshortname"
|
|
? values.retailshortname || ""
|
|
: key === "wholesaleshortname"
|
|
? values.wholesaleshortname || ""
|
|
: setting.Comments || "",
|
|
|
|
SettingValue:
|
|
key === "retailshortname" || key === "wholesaleshortname"
|
|
? salesMode
|
|
? "Y"
|
|
: "N"
|
|
: isChecked
|
|
? "Y"
|
|
: "N",
|
|
|
|
SettingCount:
|
|
(key === "overalllimit" || key === "itemwiselimit") && isChecked
|
|
? parseFloat(values.maxquantity) || null
|
|
: null,
|
|
|
|
SettingTime:
|
|
key === "hours" && isChecked
|
|
? (parseFloat(values.maxtime) * 60).toFixed(2) + " Minutes"
|
|
: key === "minutes" && isChecked
|
|
? parseFloat(values.maxtime).toFixed(2) + " Minutes"
|
|
: null,
|
|
};
|
|
});
|
|
|
|
const payload = {
|
|
CompId,
|
|
BranchId,
|
|
CreatedBy: UserId,
|
|
AppId,
|
|
SettingDtlDetails: updatedSettings,
|
|
};
|
|
const response = await dispatch(postPreferenceAppNames(payload)).unwrap();
|
|
|
|
if (response?.data?.statusCode === 1) {
|
|
setMessageType('success');
|
|
setMessageData(response?.data?.response);
|
|
await fetchTableData();
|
|
} else {
|
|
setMessageType('error');
|
|
setMessageData(response?.data?.response);
|
|
}
|
|
};
|
|
|
|
const renderCheckbox = (name, label) =>
|
|
allSettingsMap[name] !== undefined && (
|
|
<Form.Item name={name} label={label} valuePropName="checked">
|
|
<Checkbox>Yes</Checkbox>
|
|
</Form.Item>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Messages
|
|
messageType={messageType}
|
|
messageData={messageData}
|
|
onComplete={onComplete}
|
|
/>
|
|
<div className="userPageTable" style={{ overflow: 'hidden' }}>
|
|
<FormHeader title="Preference" />
|
|
<div className="menu-and-preferences">
|
|
<div className="menu-section">
|
|
<div
|
|
onClick={(e) => handleMenuClick(e, 'general')}
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'general' ? '#e6f3ff' : '#f4f4f4',
|
|
color: activeSection === 'general' ? '#1890ff' : '#23378a',
|
|
borderRight:
|
|
activeSection === 'general' ? '2px solid #1890ff' : 'none',
|
|
transform:
|
|
activeSection === 'general' ? 'scale(1.07)' : 'scale(1)',
|
|
}}
|
|
>
|
|
General
|
|
</div>
|
|
<div
|
|
onClick={(e) => handleMenuClick(e, 'notifications')}
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'notifications' ? '#e6f3ff' : '#f4f4f4',
|
|
color:
|
|
activeSection === 'notifications' ? '#1890ff' : '#23378a',
|
|
borderRight:
|
|
activeSection === 'notifications'
|
|
? '2px solid #1890ff'
|
|
: 'none',
|
|
transform:
|
|
activeSection === 'notifications'
|
|
? 'scale(1.07)'
|
|
: 'scale(1)',
|
|
}}
|
|
>
|
|
Notifications
|
|
</div>
|
|
<div
|
|
onClick={(e) => handleMenuClick(e, 'sales-page')}
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'sales-page' ? '#e6f3ff' : '#f4f4f4',
|
|
color: activeSection === 'sales-page' ? '#1890ff' : '#23378a',
|
|
borderRight:
|
|
activeSection === 'sales-page' ? '2px solid #1890ff' : 'none',
|
|
transform:
|
|
activeSection === 'sales-page' ? 'scale(1.07)' : 'scale(1)',
|
|
}}
|
|
>
|
|
Sales Page
|
|
</div>
|
|
<div
|
|
onClick={(e) => handleMenuClick(e, 'print-preferences')}
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'print-preferences' ? '#e6f3ff' : '#f4f4f4',
|
|
color:
|
|
activeSection === 'print-preferences' ? '#1890ff' : '#23378a',
|
|
borderRight:
|
|
activeSection === 'print-preferences'
|
|
? '2px solid #1890ff'
|
|
: 'none',
|
|
transform:
|
|
activeSection === 'print-preferences'
|
|
? 'scale(1.07)'
|
|
: 'scale(1)',
|
|
}}
|
|
>
|
|
Print Preferences
|
|
</div>
|
|
</div>
|
|
|
|
<Form
|
|
key={JSON.stringify(initialValues)}
|
|
ref={formRef}
|
|
layout="vertical"
|
|
onFinish={handleSubmit}
|
|
initialValues={initialValues}
|
|
className="preferences-list"
|
|
>
|
|
<div
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'general' ? '#e6f3ff' : 'transparent',
|
|
padding: '16px',
|
|
borderRadius: '10px',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
<div className="preference-headers" id="general">
|
|
General
|
|
</div>
|
|
{renderCheckbox(
|
|
'dashboard',
|
|
'Stay on the Dashboard when you open the app?'
|
|
)}
|
|
{renderCheckbox(
|
|
'autoreceivestock',
|
|
'Items received from godown. Add to stock Automatically ?'
|
|
)}
|
|
{renderCheckbox(
|
|
'decimal',
|
|
'Display values with 2 decimal places throughout the app?'
|
|
)}
|
|
{renderCheckbox(
|
|
'salespageaskiosk',
|
|
'Do you want to open sales page as kiosk layout?'
|
|
)}
|
|
{(allSettingsMap['onlineindividualslots'] !== undefined ||
|
|
allSettingsMap['allow individual booking'] !== undefined ||
|
|
allSettingsMap['single booking only'] !== undefined) && (
|
|
<Form.Item
|
|
name="BookingOptionsandmethod"
|
|
label="Individual Selling Setup"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['allow individual booking'] !==
|
|
undefined && (
|
|
<Checkbox value="allow individual booking">
|
|
Allow online individual booking
|
|
</Checkbox>
|
|
)}
|
|
{allSettingsMap['single booking only'] !== undefined && (
|
|
<Checkbox value="single booking only">
|
|
Allow single booking Only
|
|
</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
{featureaddDetails?.find(
|
|
(item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
|
|
) && renderCheckbox('kioskotp', 'Enable OTP verification for Kiosk Orders?')}
|
|
{featureaddDetails?.find(
|
|
(item) => item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
|
|
) && (allSettingsMap['hours'] !== undefined || allSettingsMap['minutes'] !== undefined) && <>
|
|
<Form.Item name="kiosktimelimit" label="Restrict orders for the same customer within a time limit?" valuePropName="checked">
|
|
<Checkbox>Yes</Checkbox>
|
|
</Form.Item>
|
|
<Form.Item noStyle shouldUpdate={(prev, curr) => prev.kiosktimelimit !== curr.kiosktimelimit}>
|
|
{({ getFieldValue }) => getFieldValue('kiosktimelimit') && (
|
|
<>
|
|
<Form.Item name="kiosktimelimittype" label="How would you like to apply the time restriction?">
|
|
<Radio.Group onChange={() => formRef.current?.setFieldsValue({ maxtime: undefined })}>
|
|
{allSettingsMap['minutes'] !== undefined && (
|
|
<Radio value="minutes">Minutes</Radio>
|
|
)}
|
|
{allSettingsMap['hours'] !== undefined && (
|
|
<Radio value="hours">Hours</Radio>
|
|
)}
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
noStyle
|
|
shouldUpdate={(prev, curr) =>
|
|
prev.kiosktimelimittype !== curr.kiosktimelimittype
|
|
}
|
|
>
|
|
{({ getFieldValue }) => {
|
|
const type = getFieldValue('kiosktimelimittype');
|
|
|
|
const isHours = type === 'hours';
|
|
|
|
return (
|
|
<Form.Item
|
|
name="maxtime"
|
|
label={`Maximum Time Limit (${isHours ? 'Hours' : 'Minutes'}):`}
|
|
rules={[
|
|
{ required: true, message: 'Please enter maximum time' },
|
|
{
|
|
type: 'number',
|
|
min: isHours ? 0.25 : 1,
|
|
message: isHours
|
|
? 'Minimum allowed is 0.25 hours'
|
|
: 'Minimum allowed is 1 minute',
|
|
},
|
|
]}
|
|
>
|
|
<InputNumber
|
|
min={isHours ? 0.25 : 1}
|
|
step={isHours ? 0.25 : 1}
|
|
precision={isHours ? 2 : 0}
|
|
style={{ width: '200px' }}
|
|
/>
|
|
</Form.Item>
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form.Item>
|
|
</>}
|
|
</div>
|
|
|
|
<Divider />
|
|
<div
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'notifications' ? '#e6f3ff' : 'transparent',
|
|
padding: '16px',
|
|
borderRadius: '10px',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
<div className="preference-headers" id="notifications">
|
|
Notifications{' '}
|
|
</div>
|
|
|
|
{renderCheckbox(
|
|
'lowstockreport',
|
|
'Do you want to receive a low-stock report every day?'
|
|
)}
|
|
{renderCheckbox(
|
|
'weeklysalesreport',
|
|
'Do you want to receive a Weekly Sales Report?'
|
|
)}
|
|
{renderCheckbox(
|
|
'notificationblink',
|
|
'Do you want to enable the low-stock blink notification?'
|
|
)}
|
|
{(allSettingsMap['onbilltime'] !== undefined ||
|
|
allSettingsMap['1daybefore'] !== undefined ||
|
|
allSettingsMap['1hourbefore'] !== undefined) && (
|
|
<Form.Item
|
|
name="notification"
|
|
label="Choose notification timing:"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['onbilltime'] !== undefined && (
|
|
<Checkbox value="onbilltime">On Bill Time</Checkbox>
|
|
)}
|
|
{allSettingsMap['1daybefore'] !== undefined && (
|
|
<Checkbox value="1daybefore">1 Day Before</Checkbox>
|
|
)}
|
|
{allSettingsMap['1hourbefore'] !== undefined && (
|
|
<Checkbox value="1hourbefore">1 Hour Before</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'sales-page' ? '#e6f3ff' : 'transparent',
|
|
padding: '16px',
|
|
borderRadius: '10px',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
<div className="preference-headers" id="sales-page">
|
|
Sales Page
|
|
</div>
|
|
{renderCheckbox('searchfocus', 'Always focus the search bar?')}
|
|
{renderCheckbox(
|
|
'shortcutkeys',
|
|
'Would you like to enable the shortcut keys?'
|
|
)}
|
|
{renderCheckbox(
|
|
'addproductcard',
|
|
'Would you like to remove Add Product card from sales page ?'
|
|
)}
|
|
|
|
{(allSettingsMap['offer'] !== undefined ||
|
|
allSettingsMap['parking'] !== undefined) && (
|
|
<Form.Item
|
|
name="enabledFeatures"
|
|
label="Select the features you want to enable:"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['parking'] !== undefined && (
|
|
<Checkbox value="parking">Parking</Checkbox>
|
|
)}
|
|
{allSettingsMap['offer'] !== undefined && (
|
|
<Checkbox value="offer">Offer</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
{((allSettingsMap['dinein'] !== undefined && dinePreference) ||
|
|
allSettingsMap['estimation'] !== undefined) && (
|
|
<Form.Item
|
|
name="enabledModules"
|
|
label="Select the modules you want to enable:"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['dinein'] !== undefined &&
|
|
dinePreference && (
|
|
<Checkbox value="dinein">Dine-In</Checkbox>
|
|
)}
|
|
{allSettingsMap['estimation'] !== undefined && (
|
|
<Checkbox value="estimation">Estimation</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
|
|
{renderCheckbox('stockselection', 'Enable stock selection?')}
|
|
{renderCheckbox('weightasquantity', 'Use Weight as Quantity?')}
|
|
{renderCheckbox('expiredselection', 'Show product expiry date?')}
|
|
{/* {renderCheckbox('sales mode', 'Retail or Wholesale mode?')} */}
|
|
{(allSettingsMap['sales mode'] !== undefined ) && (
|
|
<>
|
|
<Form.Item
|
|
name="salesmode"
|
|
label="Retail or Wholesale mode?"
|
|
valuePropName="checked"
|
|
>
|
|
<Checkbox>Yes</Checkbox>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
<Form.Item
|
|
noStyle
|
|
shouldUpdate={(prev, curr) => prev.salesmode !== curr.salesmode}
|
|
>
|
|
{({ getFieldValue }) =>
|
|
getFieldValue('salesmode') && (
|
|
<>
|
|
<Form.Item
|
|
name="retailshortname"
|
|
label="Retail Short Name"
|
|
|
|
rules={[
|
|
{ required: true, message: "Please enter Retail Short Name" },
|
|
]}
|
|
>
|
|
<InputField placeholder="Enter Retail Short Name" style={{ width: 250 }} />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="wholesaleshortname"
|
|
label="Wholesale Short Name"
|
|
|
|
rules={[
|
|
{ required: true, message: "Please enter Wholesale Short Name" },
|
|
]}
|
|
>
|
|
<InputField
|
|
placeholder="Enter Wholesale Short Name"
|
|
style={{ width: 250 }}
|
|
/>
|
|
</Form.Item>
|
|
</>
|
|
)
|
|
}
|
|
</Form.Item>
|
|
{renderCheckbox(
|
|
'billitemsorder',
|
|
'Show selected items first in Order Summary?'
|
|
)}
|
|
{renderCheckbox(
|
|
'preorderpricechange',
|
|
'Prefer price update for pre-bookings?'
|
|
)}
|
|
{renderCheckbox(
|
|
'verifyproduct',
|
|
'Do you Want Verify the Product?'
|
|
)}
|
|
{renderCheckbox(
|
|
'imeidetails',
|
|
'Do you want to open the IMEI model without IMEI details?'
|
|
)}
|
|
{renderCheckbox(
|
|
'customisedbillnumber',
|
|
'Do you Want Customised Bill Number?'
|
|
)}
|
|
{renderCheckbox('scanlayout', 'Do you Want Scan Layout Page?')}
|
|
{renderCheckbox('upiqr', 'Do you want to show the UPI QR code?')}
|
|
{/* {renderCheckbox('editbill', 'Do you want to edit the previously created bill?')} */}
|
|
|
|
{(allSettingsMap['overalllimit'] !== undefined || allSettingsMap['itemwiselimit'] !== undefined) && (
|
|
<>
|
|
<Form.Item name="quantityrestriction" label="Do you want to restrict the quantity that can be sold in a single order?" valuePropName="checked">
|
|
<Checkbox>Yes</Checkbox>
|
|
</Form.Item>
|
|
|
|
<Form.Item noStyle shouldUpdate={(prev, curr) => prev.quantityrestriction !== curr.quantityrestriction}>
|
|
{({ getFieldValue }) => getFieldValue('quantityrestriction') && (
|
|
<>
|
|
<Form.Item name="quantityrestrictiontype" label="How would you like to apply the quantity restriction?">
|
|
<Radio.Group onChange={() => formRef.current?.setFieldsValue({ maxquantity: undefined })}>
|
|
{allSettingsMap['overalllimit'] !== undefined && (
|
|
<Radio value="overall">Overall Order Quantity</Radio>
|
|
)}
|
|
{allSettingsMap['itemwiselimit'] !== undefined && (
|
|
<Radio value="itemwise">Item-wise Quantity</Radio>
|
|
)}
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
name="maxquantity"
|
|
label="Maximum quantity allowed:"
|
|
rules={[
|
|
{ required: true, message: 'Please enter maximum quantity' },
|
|
{ type: 'number', min: 1, message: 'Quantity must be greater than 0' }
|
|
]}
|
|
>
|
|
<InputNumber min={1} style={{ width: '200px' }} />
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<div
|
|
style={{
|
|
backgroundColor:
|
|
activeSection === 'print-preferences'
|
|
? '#e6f3ff'
|
|
: 'transparent',
|
|
padding: '16px',
|
|
borderRadius: '10px',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
<div className="preference-headers" id="print-preferences">
|
|
Print Preferences
|
|
</div>
|
|
|
|
{['whatsapp', 'sms', 'email'].some(
|
|
(k) => allSettingsMap[k] !== undefined
|
|
) && (
|
|
<>
|
|
<Form.Item
|
|
name="billOption"
|
|
label="Choose how to handle bills:"
|
|
>
|
|
<Radio.Group>
|
|
<Radio value="print">Print Bill</Radio>
|
|
<Radio value="pdf">Send PDF</Radio>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
noStyle
|
|
shouldUpdate={(prev, curr) =>
|
|
prev.billOption !== curr.billOption
|
|
}
|
|
>
|
|
{({ getFieldValue }) =>
|
|
getFieldValue('billOption') === 'pdf' && (
|
|
<Form.Item
|
|
name="pdfSendOptions"
|
|
label="Select how to send the PDF:"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['whatsapp'] !== undefined && (
|
|
<Checkbox value="whatsapp">WhatsApp</Checkbox>
|
|
)}
|
|
{allSettingsMap['email'] !== undefined && (
|
|
<Checkbox value="email">Email</Checkbox>
|
|
)}
|
|
{allSettingsMap['sms'] !== undefined && (
|
|
<Checkbox value="sms">SMS</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)
|
|
}
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
|
|
{renderCheckbox(
|
|
'tokenonly',
|
|
'Print only token for token-maintained products?'
|
|
)}
|
|
|
|
{allSettingsMap['allproductindividualtoken'] !== undefined && (
|
|
<Form.Item
|
|
noStyle
|
|
shouldUpdate={(prev, curr) =>
|
|
prev.tokenonly !== curr.tokenonly
|
|
}
|
|
>
|
|
{({ getFieldValue }) => {
|
|
const tokenOnlyTrue = getFieldValue('tokenonly');
|
|
return (
|
|
tokenOnlyTrue &&
|
|
renderCheckbox(
|
|
'allproductindividualtoken',
|
|
'Print individual token for each product?'
|
|
)
|
|
);
|
|
}}
|
|
</Form.Item>
|
|
)}
|
|
|
|
{['printuom', 'printlogo', 'printgreetings'].some(
|
|
(k) => allSettingsMap[k] !== undefined
|
|
) && (
|
|
<Form.Item
|
|
name="printOptions"
|
|
label="Select what you want to include in the print:"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['printuom'] !== undefined && (
|
|
<Checkbox value="printuom">
|
|
Unit of Measure (UOM)
|
|
</Checkbox>
|
|
)}
|
|
{allSettingsMap['printlogo'] !== undefined && (
|
|
<Checkbox value="printlogo">Branch Logo</Checkbox>
|
|
)}
|
|
{allSettingsMap['printgreetings'] !== undefined && (
|
|
<Checkbox value="printgreetings">Greetings</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
|
|
{renderCheckbox(
|
|
'mobilea4',
|
|
'Prefer printing in A4/A5 on mobile?'
|
|
)}
|
|
{(allSettingsMap['estimateprintheader'] !== undefined ||
|
|
allSettingsMap['estimatetitle'] !== undefined) && (
|
|
<Form.Item
|
|
name="estimateSettings"
|
|
label="Estimate Print Settings :"
|
|
>
|
|
<Checkbox.Group>
|
|
{allSettingsMap['estimateprintheader'] !== undefined && (
|
|
<Checkbox value="estimateprintheader">Show shop header (Name, Address, GST)</Checkbox>
|
|
)}
|
|
{allSettingsMap['estimatetitle'] !== undefined && (
|
|
<Checkbox value="estimatetitle">Show “Estimate (R/W)” title</Checkbox>
|
|
)}
|
|
</Checkbox.Group>
|
|
</Form.Item>
|
|
)}
|
|
</div>
|
|
<div className="PreferencesBTN">
|
|
<Buttons
|
|
buttonText="Submit Preferences"
|
|
color="901D77"
|
|
htmlType="SUBMIT"
|
|
disabled={addnewAccess}
|
|
icon={<ArrowRightOutlined />}
|
|
/>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default PreferenceList;
|