Merge pull request 'temp/preference-category-change' (#278) from temp/preference-category-change into main
Reviewed-on: Pozomind/pozo-retail-app#278
This commit is contained in:
commit
cc49fb12dd
|
|
@ -1764,6 +1764,9 @@ const BookingData = createSlice({
|
|||
changeothersdata: (state, action) => {
|
||||
state.othersdata = action?.payload;
|
||||
},
|
||||
changePreferenceData: (state, action) => {
|
||||
state.PreferenceData = action?.payload || [];
|
||||
},
|
||||
ChangeNewQrProduct: (state, action) => {
|
||||
state.NewQrProduct = action?.payload;
|
||||
},
|
||||
|
|
@ -2258,6 +2261,7 @@ export const {
|
|||
changeBillEditingMode,
|
||||
changePreviousOrderPayment,
|
||||
changePreviousOrderOfferDetail,
|
||||
changePreferenceData
|
||||
} = BookingData.actions;
|
||||
|
||||
export const GlobalComboRedirectionToDefaultLayoutForParking = (state) =>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,12 +1,6 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { Form, Tooltip, AutoComplete } from 'antd';
|
||||
import horizontal from '../../../../Images/others.png';
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
ArrowRightOutlined,
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import '../../../../Styles/BookingScreen/Components/BSCategories/BSCategoryVertical.scss';
|
||||
import {
|
||||
SelectedGlobalCatgColorDetail,
|
||||
|
|
@ -21,7 +15,6 @@ import {
|
|||
GlobalCategorieData,
|
||||
changeProductCategorie,
|
||||
getSelectedFavItems,
|
||||
changeothersdata,
|
||||
GlobalFocusCatCard,
|
||||
ChangeFocusCatCard,
|
||||
changeProductSubCategorieProdCatfun,
|
||||
|
|
@ -46,28 +39,16 @@ import {
|
|||
ChangeisFavClicked,
|
||||
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
|
||||
import catLogo from '../../../../Images/heart-outline-19.png';
|
||||
import {
|
||||
othernamedrop,
|
||||
getproducttypeid,
|
||||
getsupplierBasedOnCmpIdBrIdAppId,
|
||||
getUomData,
|
||||
getAdmin,
|
||||
postProductData,
|
||||
} from '../../../../Features/BookingScreen/BookingData/BookingData.js';
|
||||
import { DefaultModal } from '../../../../Components/Modal/DefaultModal';
|
||||
import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
|
||||
import { InputField } from '../../../../Components/Forms/InputField.jsx';
|
||||
import { Messages } from '../../../../Components/Notifications/Messages';
|
||||
import Buttons from '../../../../Components/Forms/Buttons.jsx';
|
||||
import WebFont from 'webfontloader';
|
||||
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import { validateSafeInput } from '../../../../Services/Others.js';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import { BsSortAlphaDown } from 'react-icons/bs';
|
||||
import { BsSortAlphaDownAlt } from 'react-icons/bs';
|
||||
import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin.js';
|
||||
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
|
||||
import OtherItemsModal from './OtherItemsModal.jsx';
|
||||
|
||||
function BSCategoryVertical(props) {
|
||||
const formRef = useRef(null);
|
||||
|
|
@ -116,22 +97,9 @@ function BSCategoryVertical(props) {
|
|||
const [accessToCard, setaccessToCard] = useState(false);
|
||||
const [accessOther, setAccessOther] = useState(false);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [EditState, setEditState] = useState();
|
||||
const [messageType, setMessageType] = useState(null);
|
||||
const [messageData, setMessageData] = useState(null);
|
||||
const [Tabledropname, setTabledropname] = useState();
|
||||
const [Tableuomname, setTableuomname] = useState();
|
||||
const [Tabletaxname, setTabletaxname] = useState();
|
||||
const [supplierid, setsupplierid] = useState();
|
||||
const [billAmount, setbillAmount] = useState(0);
|
||||
const [taxAmount, settaxAmount] = useState(0);
|
||||
const [totalAmount, settotalAmount] = useState(0);
|
||||
const [selectedTaxPercentage, setSelectedTaxPercentage] = useState();
|
||||
const [selectedUom, setselectedUom] = useState(null);
|
||||
const [selectedprod, setselectedprod] = useState('');
|
||||
const [prodtype, setprodtype] = useState([]);
|
||||
const [add, setAdd] = useState(false);
|
||||
const [defaultQuantity, setdefaultQuantity] = useState(1);
|
||||
|
||||
const [isSortClicked, setIsSortClicked] = useState(false);
|
||||
const [ComboListdata, setComboListdata] = useState([]);
|
||||
const Comboglobal = useSelector(GlobalCombosearch);
|
||||
|
|
@ -139,7 +107,6 @@ function BSCategoryVertical(props) {
|
|||
const AppId = SessionData?.AppId;
|
||||
const CompId = SessionData?.CompId;
|
||||
const BranchId = SessionData?.BranchId;
|
||||
const UserId = SessionData?.UserId;
|
||||
|
||||
const [height, setHeight] = useState(window.innerHeight);
|
||||
|
||||
|
|
@ -310,30 +277,6 @@ function BSCategoryVertical(props) {
|
|||
}
|
||||
}, [SelectedFontFamily]);
|
||||
|
||||
const getTaxname = async () => {
|
||||
const responses = await dispatch(
|
||||
getAdmin({ CompId: CompId, AppId: AppId })
|
||||
).unwrap();
|
||||
if (responses?.data?.statusCode === 1) {
|
||||
setTabletaxname(responses?.data?.data);
|
||||
let nilltax = responses?.data?.data?.find(
|
||||
(item) => item.TaxIdName?.toLowerCase() === 'nil'
|
||||
);
|
||||
onChangeFunction(nilltax?.TaxId);
|
||||
// setSelectedTaxPercentage(nilltax?.TaxId)
|
||||
// formRef.current?.setFieldsValue({TaxId:nilltax?.TaxId});
|
||||
formRef.current?.setFieldsValue({ Quantity: defaultQuantity });
|
||||
}
|
||||
};
|
||||
const getUom = async () => {
|
||||
const getUomResponse = await dispatch(getUomData()).unwrap();
|
||||
let UomId = getUomResponse?.data?.data?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId'];
|
||||
formRef.current?.setFieldsValue({ UOM: UomId });
|
||||
setselectedUom(UomId);
|
||||
};
|
||||
|
||||
const scrollUp = () => {
|
||||
const container = scrollContainerRef.current;
|
||||
if (container.scrollTop > 0) {
|
||||
|
|
@ -374,10 +317,6 @@ function BSCategoryVertical(props) {
|
|||
dispatch(ChangeCardAccess(accessToCard));
|
||||
};
|
||||
|
||||
const easeLinear = (t) => {
|
||||
return t;
|
||||
};
|
||||
|
||||
const handleClick = async (e, ProdCat, index) => {
|
||||
let data = false;
|
||||
setaccessToCard(false);
|
||||
|
|
@ -397,6 +336,7 @@ function BSCategoryVertical(props) {
|
|||
await dispatch(changeProductSubCategorieProdCatfun());
|
||||
}
|
||||
};
|
||||
|
||||
const handleClick1 = async () => {
|
||||
await dispatch(changeCombosearch(false));
|
||||
let data = false;
|
||||
|
|
@ -424,20 +364,19 @@ function BSCategoryVertical(props) {
|
|||
};
|
||||
|
||||
const handleClick2 = async () => {
|
||||
getTaxname();
|
||||
getUom();
|
||||
setIndexVal(-1);
|
||||
setAccessOther(true);
|
||||
setIsModalOpen(true);
|
||||
|
||||
let data = true;
|
||||
await dispatch(changeAccessForOthers(data));
|
||||
await dispatch(changeAccessForOthers(true));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (AppId && CompId && BranchId) {
|
||||
getselectCards();
|
||||
}
|
||||
}, [AppId, CompId, BranchId]);
|
||||
|
||||
const getselectCards = async () => {
|
||||
let data = {
|
||||
CompId: CompId,
|
||||
|
|
@ -483,289 +422,18 @@ function BSCategoryVertical(props) {
|
|||
}
|
||||
}, [AutoLocatetofav]);
|
||||
|
||||
const resetForm = () => {
|
||||
formRef?.current?.resetFields();
|
||||
formRef?.current?.setFieldsValue({
|
||||
TaxId: null,
|
||||
Size: null,
|
||||
UOM: null,
|
||||
MRP: null,
|
||||
ProdName: null,
|
||||
Quantity: null,
|
||||
});
|
||||
setSelectedTaxPercentage(null);
|
||||
setselectedUom(null);
|
||||
setselectedprod('');
|
||||
setEditState();
|
||||
setbillAmount(0);
|
||||
settaxAmount(0);
|
||||
settotalAmount(0);
|
||||
getselectCards();
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setIsModalOpen(false);
|
||||
formRef?.current?.resetFields();
|
||||
resetForm();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isModalOpen) {
|
||||
holdnamedrop();
|
||||
}
|
||||
}, [isModalOpen]);
|
||||
|
||||
const holdnamedrop = async () => {
|
||||
let data = {
|
||||
CompId: CompId,
|
||||
BranchId: BranchId,
|
||||
AppId: AppId,
|
||||
ProdType: 'O',
|
||||
};
|
||||
const respons = await dispatch(othernamedrop(data)).unwrap();
|
||||
setTabledropname(respons?.data?.data);
|
||||
|
||||
const response = await dispatch(getUomData()).unwrap();
|
||||
|
||||
const UomTypePreference = ApplicationPreferenceData?.find(
|
||||
(preference) => preference?.PreferredCatName === 'Product Uom'
|
||||
)?.PreferenceCatDetails;
|
||||
const UomPreference = response?.data?.data?.filter((item) =>
|
||||
UomTypePreference?.some?.(
|
||||
(e) =>
|
||||
e?.PreferredSubCatName?.toLowerCase() ==
|
||||
item?.ConfigName?.toLowerCase() && e?.PreferredStatus == 'Y'
|
||||
)
|
||||
);
|
||||
|
||||
setTableuomname(UomPreference);
|
||||
let UomId = UomPreference?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId'];
|
||||
formRef.current?.setFieldsValue({ UOM: UomId });
|
||||
setselectedUom(UomId);
|
||||
|
||||
const responses = await dispatch(
|
||||
getAdmin({ CompId: CompId, AppId: AppId })
|
||||
).unwrap();
|
||||
setTabletaxname(responses?.data?.data);
|
||||
|
||||
const responsess = await dispatch(
|
||||
getsupplierBasedOnCmpIdBrIdAppId({
|
||||
CompId: CompId,
|
||||
AppId: AppId,
|
||||
BranchId: BranchId,
|
||||
})
|
||||
).unwrap();
|
||||
let suppid = responsess?.data?.data?.filter(
|
||||
(item) => item.SuppName?.toLowerCase() === 'self'
|
||||
);
|
||||
setsupplierid(suppid?.[0]?.SuppId);
|
||||
|
||||
const res = await dispatch(getproducttypeid()).unwrap();
|
||||
let productname = res?.data?.data?.filter(
|
||||
(item) => item.ConfigName === 'Others'
|
||||
);
|
||||
setprodtype(productname?.[0]?.ConfigId);
|
||||
};
|
||||
|
||||
const onComplete = useCallback(() => {
|
||||
setMessageData(null);
|
||||
setMessageType(null);
|
||||
}, []);
|
||||
|
||||
const onChangeFunction = (selectedValue) => {
|
||||
formRef.current?.setFieldsValue({ TaxId: selectedValue });
|
||||
setSelectedTaxPercentage(selectedValue);
|
||||
let data = {
|
||||
TaxId: selectedValue,
|
||||
Size: formRef.current?.getFieldsValue()?.Size,
|
||||
MRP: formRef.current?.getFieldsValue()?.MRP,
|
||||
Quantity: formRef.current?.getFieldsValue()?.Quantity,
|
||||
};
|
||||
handleValuesChange(data);
|
||||
};
|
||||
const getOptionLabel = (option, selected) => {
|
||||
return selected
|
||||
? option.TaxPercentage + ' %'
|
||||
: option.TaxIdName + ' - ' + option.TaxPercentage + ' % ';
|
||||
};
|
||||
|
||||
const onChangeuomFunction = (selectedValues) => {
|
||||
formRef.current?.setFieldsValue({ UOM: selectedValues });
|
||||
setselectedUom(selectedValues);
|
||||
};
|
||||
|
||||
const onChangeprodFunction = (e) => {
|
||||
setAdd(true);
|
||||
setselectedprod(e);
|
||||
formRef.current?.setFieldsValue({
|
||||
UOM: Tableuomname?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId'],
|
||||
});
|
||||
formRef.current?.setFieldsValue({ Quantity: 1 });
|
||||
formRef?.current?.setFieldsValue({ MRP: null });
|
||||
formRef?.current?.setFieldsValue({ Size: 1 });
|
||||
setselectedUom(
|
||||
Tableuomname?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId']
|
||||
);
|
||||
setdefaultQuantity(1);
|
||||
setEditState();
|
||||
};
|
||||
const onAutocompleteChange = (selectedOption) => {
|
||||
setAdd(false);
|
||||
const pattern = /(.+?) \(\d*[^\d]+\)/;
|
||||
const matches = selectedOption?.value.match(pattern);
|
||||
const value = Tabledropname?.filter(
|
||||
(item) => item.ProdName === String(matches[1]?.trim())
|
||||
)?.[0]?.ProdId;
|
||||
let PreviousProduct = Tabledropname?.find(
|
||||
(item) => item?.ProdId === String(value)
|
||||
);
|
||||
|
||||
setEditState(PreviousProduct);
|
||||
if (PreviousProduct) {
|
||||
formRef.current?.setFieldsValue({
|
||||
TaxId: PreviousProduct?.TaxId,
|
||||
UOM: PreviousProduct?.UOM,
|
||||
Size: PreviousProduct?.Size,
|
||||
MRP: PreviousProduct?.SellPrice,
|
||||
});
|
||||
setSelectedTaxPercentage(PreviousProduct?.TaxId);
|
||||
setselectedUom(PreviousProduct?.UOM);
|
||||
|
||||
let data = {
|
||||
TaxId: PreviousProduct?.TaxId,
|
||||
Size: PreviousProduct?.Size,
|
||||
MRP: PreviousProduct?.SellPrice,
|
||||
Quantity: formRef.current?.getFieldsValue()?.Quantity,
|
||||
};
|
||||
handleValuesChange(data);
|
||||
}
|
||||
};
|
||||
|
||||
var today = new Date();
|
||||
var formattedDate = today.toISOString()?.split('T')[0];
|
||||
|
||||
const onFinish = async (values) => {
|
||||
let postData = {};
|
||||
const pattern = /(.+?) \(\d*[^\d]+\)/;
|
||||
const matches = selectedprod.match(pattern);
|
||||
|
||||
let response = {};
|
||||
|
||||
postData['CompId'] = CompId;
|
||||
postData['BranchId'] = BranchId;
|
||||
postData['AppId'] = AppId;
|
||||
postData['CreatedBy'] = UserId;
|
||||
postData['ProdType'] = prodtype;
|
||||
postData['QtyBasedPrice'] = 'N';
|
||||
postData['StockAvailable'] = 'N';
|
||||
postData['InwardDate'] = formattedDate;
|
||||
postData['SuppId'] = supplierid;
|
||||
postData['SellPrice'] = values.MRP;
|
||||
postData['AutoGenerateQr'] = 'N';
|
||||
postData['ProdName'] = matches ? matches : selectedprod;
|
||||
postData['TokenAvailable'] = 'N';
|
||||
postData['UOM'] = values.UOM;
|
||||
postData['Size'] = values.Size;
|
||||
postData['MRP'] = values.MRP;
|
||||
postData['TaxId'] = values.TaxId;
|
||||
postData['SinglePc'] = 'N';
|
||||
if (EditState) {
|
||||
const updatedData = {
|
||||
...EditState,
|
||||
Quantity: parseInt(values.Quantity),
|
||||
SellPrice: values.MRP,
|
||||
OtherProduct: 'Others',
|
||||
SinglePc: 'N',
|
||||
};
|
||||
dispatch(changeothersdata(updatedData));
|
||||
setEditState();
|
||||
} else {
|
||||
response = await dispatch(postProductData(postData)).unwrap();
|
||||
if (response?.data?.statusCode != 0) {
|
||||
let othersdata = response?.data?.ProductDetails?.[0];
|
||||
|
||||
const updatedData = {
|
||||
...othersdata,
|
||||
Quantity: parseInt(values.Quantity),
|
||||
OtherProduct: 'Others',
|
||||
SinglePc: 'N',
|
||||
};
|
||||
dispatch(changeothersdata(updatedData));
|
||||
|
||||
setMessageType('success');
|
||||
setMessageData(response?.data?.response);
|
||||
setIsModalOpen(false);
|
||||
} else {
|
||||
setMessageType('error');
|
||||
|
||||
setMessageData(response?.data?.response);
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
setselectedprod(null);
|
||||
handleCancel();
|
||||
|
||||
formRef?.current?.resetFields();
|
||||
resetForm();
|
||||
// let data = {
|
||||
// CompId: CompId,
|
||||
// BranchId: BranchId,
|
||||
// AppId: AppId,
|
||||
// ProdType: 'O',
|
||||
// };
|
||||
// const respons = await dispatch(othernamedrop(data)).unwrap();
|
||||
// if (respons?.data?.statusCode == 1) {
|
||||
// setTabledropname(respons?.data?.data);
|
||||
// }
|
||||
};
|
||||
|
||||
const handleValuesChange = (values) => {
|
||||
const { Size, MRP, TaxId, Quantity } = values;
|
||||
let taxpercentagevalue = Tabletaxname?.find((item) => item.TaxId === TaxId);
|
||||
|
||||
const parsedSize = parseInt(Quantity);
|
||||
const parsedMRP = parseInt(MRP);
|
||||
const taxRate = parseFloat(taxpercentagevalue?.TaxPercentage);
|
||||
|
||||
if (!isNaN(parsedSize) && !isNaN(parsedMRP)) {
|
||||
const newBillAmount = parsedSize * parsedMRP;
|
||||
|
||||
const newTaxAmount =
|
||||
taxRate === 0 ? 0 : (newBillAmount * taxRate) / (100 + taxRate);
|
||||
|
||||
const finalBillAmount = newBillAmount - newTaxAmount;
|
||||
const newTotalAmount = newBillAmount;
|
||||
|
||||
setbillAmount(finalBillAmount.toFixed(2));
|
||||
settaxAmount(newTaxAmount.toFixed(2));
|
||||
settotalAmount(newTotalAmount.toFixed(2));
|
||||
} else {
|
||||
setbillAmount(0);
|
||||
settaxAmount(0);
|
||||
settotalAmount(0);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [height]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [categoryData]);
|
||||
}, [height, categoryData]);
|
||||
|
||||
// ...
|
||||
|
||||
|
|
@ -785,14 +453,6 @@ function BSCategoryVertical(props) {
|
|||
};
|
||||
}, [scrollContainerRef]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerheight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [height, categoryData]);
|
||||
|
||||
const maindiv = document.getElementById('mainDiv');
|
||||
const count = maindiv?.querySelectorAll('div');
|
||||
|
||||
|
|
@ -828,6 +488,7 @@ function BSCategoryVertical(props) {
|
|||
// Return the lightened color as a HEX string
|
||||
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
function darkenColor(hex, percent) {
|
||||
if (!hex) return '#000000'; // Default to black if no color is provided
|
||||
|
||||
|
|
@ -901,336 +562,8 @@ function BSCategoryVertical(props) {
|
|||
onComplete={onComplete}
|
||||
/>
|
||||
)}
|
||||
{isModalOpen && (
|
||||
<DefaultModal
|
||||
open={isModalOpen}
|
||||
title="Other Items"
|
||||
footer={false}
|
||||
children={
|
||||
<>
|
||||
<br />
|
||||
<div className="configMsrMainDiv">
|
||||
<Form
|
||||
ref={formRef}
|
||||
onFinish={onFinish}
|
||||
// onValuesChange={handleValuesChange}
|
||||
onValuesChange={(changedValues, allValues) =>
|
||||
handleValuesChange(allValues)
|
||||
}
|
||||
>
|
||||
<div className="configMsrSubDiv">
|
||||
<Form.Item
|
||||
name="ProdName"
|
||||
style={{ margin: '-17px 8px 0px -7px' }}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please enter Product Name',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
|
||||
if (value && value.length > 50) {
|
||||
return Promise.reject(
|
||||
'Product Name should not exceed 50 characters'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<AutoComplete
|
||||
options={Tabledropname?.map((option) => ({
|
||||
value:
|
||||
option.ProdName +
|
||||
' ' +
|
||||
'(' +
|
||||
option.Size +
|
||||
option.UomName +
|
||||
')',
|
||||
label:
|
||||
option.ProdName +
|
||||
' ' +
|
||||
'(' +
|
||||
option.Size +
|
||||
option.UomName +
|
||||
')',
|
||||
}))}
|
||||
style={{ width: '250px', height: '48px' }}
|
||||
onSelect={(value, option) =>
|
||||
onAutocompleteChange(option)
|
||||
}
|
||||
filterOption={(inputValue, option) =>
|
||||
option.label
|
||||
.toLowerCase()
|
||||
.includes(inputValue.toLowerCase()) ||
|
||||
option.value
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(inputValue.toLowerCase())
|
||||
}
|
||||
>
|
||||
<InputField
|
||||
label="Product Name"
|
||||
style={{}}
|
||||
value={selectedprod}
|
||||
onChange={(e) =>
|
||||
onChangeprodFunction(e?.target?.value)
|
||||
}
|
||||
onPressEnter={(e) =>
|
||||
onChangeprodFunction(e?.target?.value)
|
||||
}
|
||||
isOnChange={EditState ? true : false}
|
||||
suffix={
|
||||
<TooltipWrapper
|
||||
title="Search Product Name"
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<SearchOutlined
|
||||
style={{ color: 'rgba(0,0,0,.45)' }}
|
||||
/>
|
||||
</TooltipWrapper>
|
||||
}
|
||||
/>
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item name="TaxId">
|
||||
<DropDowns
|
||||
options={Tabletaxname?.map((option) => ({
|
||||
value: option.TaxId,
|
||||
label: getOptionLabel(
|
||||
option,
|
||||
selectedTaxPercentage === option.TaxId
|
||||
),
|
||||
// label:
|
||||
// option.TaxIdName +
|
||||
// " - " +
|
||||
// option.TaxPercentage +
|
||||
// " % ",
|
||||
}))}
|
||||
className="field-DropDown"
|
||||
label={<label class="required">Tax</label>}
|
||||
// optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }}
|
||||
onChangeFunction={(selectedValue) =>
|
||||
onChangeFunction(selectedValue)
|
||||
}
|
||||
valueData={selectedTaxPercentage}
|
||||
isOnChange={EditState ? true : false}
|
||||
disabled={add || !EditState ? false : true}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="Size"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Enter No.of.Units',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
if (value && value.length > 10) {
|
||||
return Promise.reject(
|
||||
'No.of.Units should not exceed 10 characters'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={<label class="required">No.of.Units</label>}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
Size: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={!EditState ? (add ? true : false) : true}
|
||||
disabled={add || !EditState ? false : true}
|
||||
suffix={
|
||||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<div>Enter No.of.Units as:</div>
|
||||
<div>
|
||||
- Single number (<strong>5</strong>)
|
||||
</div>
|
||||
<div>
|
||||
- Decimal (<strong>1.500 or 1.5</strong>)
|
||||
</div>
|
||||
<div>
|
||||
- Width x Height (<strong>10x10</strong>)
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
style={{
|
||||
color: 'rgba(0,0,0,.45)',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="UOM"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select UOM',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DropDowns
|
||||
options={Tableuomname?.map((option) => ({
|
||||
value: option.ConfigId,
|
||||
label: option.ConfigName,
|
||||
}))}
|
||||
placeholder="ConfigType"
|
||||
label={<label class="required">UOM</label>}
|
||||
optionsNames={{ value: 'TypeId', label: 'TypeName' }}
|
||||
className="field-DropDown"
|
||||
onChangeFunction={(selectedValues) =>
|
||||
onChangeuomFunction(selectedValues)
|
||||
}
|
||||
valueData={selectedUom}
|
||||
disabled={add || !EditState ? false : true}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="Quantity"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[1-9]\d*(\.\d+)?$/,
|
||||
message: 'Please Enter Quantity',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
if (!value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
return Promise.reject(
|
||||
'Enter valid Quantity (Max 2 decimal places)'
|
||||
);
|
||||
}
|
||||
if (parseFloat(value) === 0) {
|
||||
return Promise.reject(' Quantity cannot be 0');
|
||||
}
|
||||
if (value?.length > 10) {
|
||||
return Promise.reject(
|
||||
'Quantity cannot exceed 10 digits'
|
||||
);
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={<label class="required">Quantity</label>}
|
||||
valueData={defaultQuantity}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
Quantity: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={defaultQuantity ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="MRP"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[1-9]\d*(\.\d+)?$/,
|
||||
message: 'Please Enter MRP',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
|
||||
if (!value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
return Promise.reject(
|
||||
'Enter valid MRP (Max 2 decimal places)'
|
||||
);
|
||||
}
|
||||
|
||||
if (parseFloat(value) === 0) {
|
||||
return Promise.reject('MRP cannot be 0');
|
||||
}
|
||||
|
||||
if (value?.length > 10) {
|
||||
return Promise.reject(
|
||||
'MRP cannot exceed 10 digits'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={
|
||||
<label class="required">Amount / Per Item</label>
|
||||
}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
MRP: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={EditState ? true : false}
|
||||
// disabled={!!EditState}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
columnGap: '5rem',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
<p>Bill Amount {isNaN(billAmount) ? 0 : billAmount}</p>
|
||||
<p>Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}</p>
|
||||
<p>Total Amount {isNaN(totalAmount) ? 0 : totalAmount}</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Buttons
|
||||
buttonText="SUBMIT"
|
||||
color="901D77"
|
||||
icon={<ArrowRightOutlined />}
|
||||
onClick={() => onFinish()}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
handleCancel={handleCancel}
|
||||
/>
|
||||
)}
|
||||
{isModalOpen && <OtherItemsModal open={isModalOpen} setOpen={isModalOpen} getselectCards={getselectCards} />}
|
||||
|
||||
<div className="CategoryVertical-buttons" ref={containerRef}>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -0,0 +1,665 @@
|
|||
import { getSession, validateSafeInput } from "../../../../Services/Others";
|
||||
import { TooltipWrapper } from "../../../../../ownLib/my-ui-lib";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import { InputField } from "../../../../Components/Forms/InputField";
|
||||
import { AutoComplete, Form, Tooltip } from "antd";
|
||||
import { DropDowns } from "../../../../Components/Forms/DropDown";
|
||||
import Buttons from "../../../../Components/Forms/Buttons";
|
||||
import { changeothersdata, getAdmin, getproducttypeid, getsupplierBasedOnCmpIdBrIdAppId, getUomData, othernamedrop, postProductData } from "../../../../Features/BookingScreen/BookingData/BookingData";
|
||||
import { useState, useRef, useEffect, useCallback } from "react";
|
||||
import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";
|
||||
import { useSelector, useDispatch } from "react-redux";
|
||||
import { Messages } from "../../../../Components/Notifications/Messages";
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
ArrowRightOutlined,
|
||||
SearchOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { DefaultModal } from "../../../../Components/Modal/DefaultModal";
|
||||
|
||||
const OtherItemsModal = ({
|
||||
open = false,
|
||||
setOpen = () => { },
|
||||
getselectCards = () => { }
|
||||
}) => {
|
||||
|
||||
const formRef = useRef(null);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const AppId = getSession('AppId');
|
||||
const CompId = getSession('CompId');
|
||||
const BranchId = getSession('BranchId');
|
||||
const UserId = getSession('UserId');
|
||||
|
||||
const ApplicationPreferenceData = useSelector(ApplicationPreferences);
|
||||
|
||||
const [billAmount, setBillAmount] = useState(0);
|
||||
const [prevOtherItems, setPrevOtherItems] = useState([]);
|
||||
const [uomConfigs, setUomConfigs] = useState([]);
|
||||
const [taxAmount, setTaxAmount] = useState(0);
|
||||
const [totalAmount, setTotalAmount] = useState(0);
|
||||
const [taxData, setTaxData] = useState([]);
|
||||
const [selectedTaxPercentage, setSelectedTaxPercentage] = useState(null);
|
||||
const [selectedUom, setSelectedUom] = useState(null);
|
||||
const [selectedProduct, setSelectedProduct] = useState(null);
|
||||
const [editState, setEditState] = useState(false);
|
||||
const [prodType, setProdType] = useState(null);
|
||||
const [add, setAdd] = useState(false);
|
||||
const [supplierId, setSupplierId] = useState(null);
|
||||
const [messageType, setMessageType] = useState(null);
|
||||
const [messageData, setMessageData] = useState(null);
|
||||
const [defaultQuantity, setDefaultQuantity] = useState(1);
|
||||
console.log(formRef?.current?.getFieldsValue(), "formRef", defaultQuantity, taxData)
|
||||
|
||||
const getOptionLabel = (option, selected) => {
|
||||
return selected
|
||||
? option.TaxPercentage + ' %'
|
||||
: option.TaxIdName + ' - ' + option.TaxPercentage + ' % ';
|
||||
};
|
||||
|
||||
const handleTaxChange = (selectedValue) => {
|
||||
formRef.current?.setFieldsValue({ TaxId: selectedValue });
|
||||
setSelectedTaxPercentage(selectedValue);
|
||||
let data = {
|
||||
TaxId: selectedValue,
|
||||
Size: formRef.current?.getFieldsValue()?.Size,
|
||||
MRP: formRef.current?.getFieldsValue()?.MRP,
|
||||
Quantity: formRef.current?.getFieldsValue()?.Quantity,
|
||||
};
|
||||
handleValuesChange(data);
|
||||
};
|
||||
|
||||
const handleProductChange = (e) => {
|
||||
setAdd(true);
|
||||
setSelectedProduct(e);
|
||||
formRef.current?.setFieldsValue({
|
||||
UOM: uomConfigs?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId'],
|
||||
});
|
||||
formRef.current?.setFieldsValue({ Quantity: 1 });
|
||||
formRef?.current?.setFieldsValue({ MRP: null });
|
||||
formRef?.current?.setFieldsValue({ Size: 1 });
|
||||
setSelectedUom(
|
||||
uomConfigs?.filter(
|
||||
(item) => item.ConfigName?.toLowerCase() === 'pcs'
|
||||
)?.[0]?.['ConfigId']
|
||||
);
|
||||
setDefaultQuantity(1);
|
||||
setEditState(false);
|
||||
};
|
||||
|
||||
const handleUOMChange = (selectedValues) => {
|
||||
formRef.current?.setFieldsValue({ UOM: selectedValues });
|
||||
setSelectedUom(selectedValues);
|
||||
};
|
||||
|
||||
const handleValuesChange = (values) => {
|
||||
const { Size, MRP, TaxId, Quantity } = values;
|
||||
let taxPercentageValue = taxData?.find((item) => item.TaxId === TaxId);
|
||||
|
||||
const parsedSize = parseInt(Quantity);
|
||||
const parsedMRP = parseInt(MRP);
|
||||
const taxRate = parseFloat(taxPercentageValue?.TaxPercentage);
|
||||
|
||||
if (!isNaN(parsedSize) && !isNaN(parsedMRP)) {
|
||||
const newBillAmount = parsedSize * parsedMRP;
|
||||
|
||||
const newTaxAmount =
|
||||
taxRate === 0 ? 0 : (newBillAmount * taxRate) / (100 + taxRate);
|
||||
|
||||
const finalBillAmount = newBillAmount - newTaxAmount;
|
||||
const newTotalAmount = newBillAmount;
|
||||
|
||||
setBillAmount(finalBillAmount.toFixed(2));
|
||||
setTaxAmount(newTaxAmount.toFixed(2));
|
||||
setTotalAmount(newTotalAmount.toFixed(2));
|
||||
} else {
|
||||
setBillAmount(0);
|
||||
setTaxAmount(0);
|
||||
setTotalAmount(0);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
fetchOtherProductsData();
|
||||
}, [open]);
|
||||
|
||||
const fetchOtherProductsData = async () => {
|
||||
try {
|
||||
const data = {
|
||||
CompId,
|
||||
BranchId,
|
||||
AppId,
|
||||
ProdType: "O",
|
||||
};
|
||||
|
||||
const [
|
||||
otherProducts,
|
||||
uomResponse,
|
||||
taxResponse,
|
||||
supplierResponse,
|
||||
prodTypeResponse
|
||||
] = await Promise.all([
|
||||
dispatch(othernamedrop(data)).unwrap(),
|
||||
dispatch(getUomData()).unwrap(),
|
||||
dispatch(getAdmin({ CompId, AppId })).unwrap(),
|
||||
dispatch(getsupplierBasedOnCmpIdBrIdAppId({ CompId, AppId, BranchId })).unwrap(),
|
||||
dispatch(getproducttypeid()).unwrap()
|
||||
]);
|
||||
|
||||
/* OTHER PRODUCTS */
|
||||
setPrevOtherItems(otherProducts?.data?.data || []);
|
||||
|
||||
/* UOM */
|
||||
const UomTypePreference = ApplicationPreferenceData?.find(
|
||||
(preference) => preference?.PreferredCatName === "Product Uom"
|
||||
)?.PreferenceCatDetails;
|
||||
|
||||
const UomPreference = uomResponse?.data?.data?.filter((item) =>
|
||||
UomTypePreference?.some(
|
||||
(e) =>
|
||||
e?.PreferredSubCatName?.toLowerCase() ===
|
||||
item?.ConfigName?.toLowerCase() &&
|
||||
e?.PreferredStatus === "Y"
|
||||
)
|
||||
);
|
||||
|
||||
setUomConfigs(UomPreference || []);
|
||||
|
||||
const pcsUom = UomPreference?.find(
|
||||
(item) => item.ConfigName?.toLowerCase() === "pcs"
|
||||
);
|
||||
|
||||
formRef.current?.setFieldsValue({ UOM: pcsUom?.ConfigId });
|
||||
setSelectedUom(pcsUom?.ConfigId);
|
||||
|
||||
/* TAX */
|
||||
if (taxResponse?.data?.statusCode === 1) {
|
||||
const taxList = taxResponse?.data?.data || [];
|
||||
setTaxData(taxList);
|
||||
|
||||
const nilTax = taxList.find(
|
||||
(item) => item.TaxIdName?.toLowerCase() === "nil"
|
||||
);
|
||||
|
||||
handleTaxChange(nilTax?.TaxId);
|
||||
formRef.current?.setFieldsValue({ Quantity: defaultQuantity });
|
||||
} else {
|
||||
setTaxData([]);
|
||||
}
|
||||
|
||||
/* SUPPLIER */
|
||||
const supp = supplierResponse?.data?.data?.find(
|
||||
(item) => item.SuppName?.toLowerCase() === "self"
|
||||
);
|
||||
|
||||
setSupplierId(supp?.SuppId || "");
|
||||
|
||||
/* PRODUCT TYPE */
|
||||
const prodType = prodTypeResponse?.data?.data?.find(
|
||||
(item) => item.ConfigName === "Others"
|
||||
);
|
||||
|
||||
setProdType(prodType?.ConfigId);
|
||||
|
||||
} catch (error) {
|
||||
console.error("Failed to load Other Items data", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAutoCompleteChange = (selectedOption) => {
|
||||
setAdd(false);
|
||||
const pattern = /(.+?) \(\d*[^\d]+\)/;
|
||||
const matches = selectedOption?.value?.match(pattern);
|
||||
const value = prevOtherItems?.filter(
|
||||
(item) => item.ProdName === String(matches[1]?.trim())
|
||||
)?.[0]?.ProdId;
|
||||
const previousProduct = prevOtherItems?.find(
|
||||
(item) => item?.ProdId === String(value)
|
||||
);
|
||||
|
||||
setEditState(previousProduct);
|
||||
if (previousProduct) {
|
||||
formRef.current?.setFieldsValue({
|
||||
TaxId: previousProduct?.TaxId,
|
||||
UOM: previousProduct?.UOM,
|
||||
Size: previousProduct?.Size,
|
||||
MRP: previousProduct?.SellPrice,
|
||||
});
|
||||
setSelectedTaxPercentage(previousProduct?.TaxId);
|
||||
setSelectedUom(previousProduct?.UOM);
|
||||
|
||||
let data = {
|
||||
TaxId: previousProduct?.TaxId,
|
||||
Size: previousProduct?.Size,
|
||||
MRP: previousProduct?.SellPrice,
|
||||
Quantity: formRef.current?.getFieldsValue()?.Quantity,
|
||||
};
|
||||
handleValuesChange(data);
|
||||
}
|
||||
};
|
||||
|
||||
const resetForm = async () => {
|
||||
formRef?.current?.resetFields();
|
||||
formRef?.current?.setFieldsValue({
|
||||
TaxId: null,
|
||||
Size: null,
|
||||
UOM: null,
|
||||
MRP: null,
|
||||
ProdName: null,
|
||||
Quantity: null,
|
||||
});
|
||||
setSelectedTaxPercentage(null);
|
||||
setSelectedUom(null);
|
||||
setSelectedProduct(null);
|
||||
setEditState(false);
|
||||
setBillAmount(0);
|
||||
setTaxAmount(0);
|
||||
setTotalAmount(0);
|
||||
await getselectCards();
|
||||
};
|
||||
|
||||
const today = new Date();
|
||||
const formattedDate = today.toISOString()?.split('T')[0];
|
||||
|
||||
const handleSubmit = async (values) => {
|
||||
let postData = {};
|
||||
const pattern = /(.+?) \(\d*[^\d]+\)/;
|
||||
const matches = selectedProduct?.match(pattern);
|
||||
|
||||
postData['CompId'] = CompId;
|
||||
postData['BranchId'] = BranchId;
|
||||
postData['AppId'] = AppId;
|
||||
postData['CreatedBy'] = UserId;
|
||||
postData['ProdType'] = prodType;
|
||||
postData['QtyBasedPrice'] = 'N';
|
||||
postData['StockAvailable'] = 'N';
|
||||
postData['InwardDate'] = formattedDate;
|
||||
postData['SuppId'] = supplierId;
|
||||
postData['SellPrice'] = values.MRP;
|
||||
postData['AutoGenerateQr'] = 'N';
|
||||
postData['ProdName'] = matches ? matches : selectedProduct;
|
||||
postData['TokenAvailable'] = 'N';
|
||||
postData['UOM'] = values.UOM;
|
||||
postData['Size'] = values.Size;
|
||||
postData['MRP'] = values.MRP;
|
||||
postData['TaxId'] = values.TaxId;
|
||||
postData['SinglePc'] = 'N';
|
||||
if (editState) {
|
||||
const updatedData = {
|
||||
...editState,
|
||||
Quantity: parseInt(values.Quantity),
|
||||
SellPrice: values.MRP,
|
||||
OtherProduct: 'Others',
|
||||
SinglePc: 'N',
|
||||
};
|
||||
dispatch(changeothersdata(updatedData));
|
||||
setEditState(null);
|
||||
await handleCancel();
|
||||
} else {
|
||||
const response = await dispatch(postProductData(postData)).unwrap();
|
||||
if (response?.data?.statusCode != 0) {
|
||||
let othersdata = response?.data?.ProductDetails?.[0];
|
||||
|
||||
const updatedData = {
|
||||
...othersdata,
|
||||
Quantity: parseInt(values.Quantity),
|
||||
OtherProduct: 'Others',
|
||||
SinglePc: 'N',
|
||||
};
|
||||
dispatch(changeothersdata(updatedData));
|
||||
|
||||
setMessageType('success');
|
||||
setMessageData(response?.data?.response);
|
||||
await handleCancel();
|
||||
} else {
|
||||
setMessageType('error');
|
||||
setMessageData(response?.data?.response);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async () => {
|
||||
setOpen(false);
|
||||
formRef?.current?.resetFields();
|
||||
await resetForm();
|
||||
};
|
||||
|
||||
const onComplete = useCallback(() => {
|
||||
setMessageData(null)
|
||||
setMessageType(null)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<Messages messageData={messageData} messageType={messageType} onComplete={onComplete} />
|
||||
<DefaultModal
|
||||
open={open}
|
||||
title="Other Items"
|
||||
footer={false}
|
||||
children={
|
||||
<>
|
||||
<br />
|
||||
<div className="configMsrMainDiv">
|
||||
<Form
|
||||
ref={formRef}
|
||||
onFinish={handleSubmit}
|
||||
// onValuesChange={handleValuesChange}
|
||||
onValuesChange={(changedValues, allValues) =>
|
||||
handleValuesChange(allValues)
|
||||
}
|
||||
>
|
||||
<div className="configMsrSubDiv">
|
||||
<Form.Item
|
||||
name="ProdName"
|
||||
style={{ margin: '-17px 8px 0px -7px' }}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please enter Product Name',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
|
||||
if (value && value.length > 50) {
|
||||
return Promise.reject(
|
||||
'Product Name should not exceed 50 characters'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<AutoComplete
|
||||
options={prevOtherItems?.map((option) => ({
|
||||
value:
|
||||
option.ProdName +
|
||||
' ' +
|
||||
'(' +
|
||||
option.Size +
|
||||
option.UomName +
|
||||
')',
|
||||
label:
|
||||
option.ProdName +
|
||||
' ' +
|
||||
'(' +
|
||||
option.Size +
|
||||
option.UomName +
|
||||
')',
|
||||
}))}
|
||||
style={{ width: '250px', height: '48px' }}
|
||||
onSelect={(value, option) =>
|
||||
handleAutoCompleteChange(option)
|
||||
}
|
||||
filterOption={(inputValue, option) =>
|
||||
option.label
|
||||
.toLowerCase()
|
||||
.includes(inputValue.toLowerCase()) ||
|
||||
option.value
|
||||
.toString()
|
||||
.toLowerCase()
|
||||
.includes(inputValue.toLowerCase())
|
||||
}
|
||||
>
|
||||
<InputField
|
||||
label="Product Name"
|
||||
value={selectedProduct}
|
||||
onChange={(e) =>
|
||||
handleProductChange(e?.target?.value)
|
||||
}
|
||||
onPressEnter={(e) =>
|
||||
handleProductChange(e?.target?.value)
|
||||
}
|
||||
isOnChange={editState ? true : false}
|
||||
suffix={
|
||||
<TooltipWrapper
|
||||
title="Search Product Name"
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<SearchOutlined
|
||||
style={{ color: 'rgba(0,0,0,.45)' }}
|
||||
/>
|
||||
</TooltipWrapper>
|
||||
}
|
||||
/>
|
||||
</AutoComplete>
|
||||
</Form.Item>
|
||||
<Form.Item name="TaxId">
|
||||
<DropDowns
|
||||
options={taxData?.map((option) => ({
|
||||
value: option.TaxId,
|
||||
label: getOptionLabel(
|
||||
option,
|
||||
selectedTaxPercentage === option.TaxId
|
||||
),
|
||||
// label:
|
||||
// option.TaxIdName +
|
||||
// " - " +
|
||||
// option.TaxPercentage +
|
||||
// " % ",
|
||||
}))}
|
||||
className="field-DropDown"
|
||||
label={<label class="required">Tax</label>}
|
||||
// optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }}
|
||||
onChangeFunction={handleTaxChange}
|
||||
valueData={selectedTaxPercentage}
|
||||
isOnChange={editState ? true : false}
|
||||
disabled={add || !editState ? false : true}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="Size"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Enter No.of.Units',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
if (value && value.length > 10) {
|
||||
return Promise.reject(
|
||||
'No.of.Units should not exceed 10 characters'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={<label class="required">No.of.Units</label>}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
Size: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={!editState ? (add ? true : false) : true}
|
||||
disabled={add || !editState ? false : true}
|
||||
suffix={
|
||||
<Tooltip
|
||||
title={
|
||||
<>
|
||||
<div>Enter No.of.Units as:</div>
|
||||
<div>
|
||||
- Single number (<strong>5</strong>)
|
||||
</div>
|
||||
<div>
|
||||
- Decimal (<strong>1.500 or 1.5</strong>)
|
||||
</div>
|
||||
<div>
|
||||
- Width x Height (<strong>10x10</strong>)
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<InfoCircleOutlined
|
||||
style={{
|
||||
color: 'rgba(0,0,0,.45)',
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="UOM"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select UOM',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DropDowns
|
||||
options={uomConfigs?.map((option) => ({
|
||||
value: option.ConfigId,
|
||||
label: option.ConfigName,
|
||||
}))}
|
||||
placeholder="ConfigType"
|
||||
label={<label class="required">UOM</label>}
|
||||
optionsNames={{ value: 'TypeId', label: 'TypeName' }}
|
||||
className="field-DropDown"
|
||||
onChangeFunction={handleUOMChange}
|
||||
valueData={selectedUom}
|
||||
disabled={add || !editState ? false : true}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="Quantity"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[1-9]\d*(\.\d+)?$/,
|
||||
message: 'Please Enter Quantity',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
if (!value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
return Promise.reject(
|
||||
'Enter valid Quantity (Max 2 decimal places)'
|
||||
);
|
||||
}
|
||||
if (parseFloat(value) === 0) {
|
||||
return Promise.reject(' Quantity cannot be 0');
|
||||
}
|
||||
if (value?.length > 10) {
|
||||
return Promise.reject(
|
||||
'Quantity cannot exceed 10 digits'
|
||||
);
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={<label class="required">Quantity</label>}
|
||||
valueData={defaultQuantity}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
Quantity: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={defaultQuantity ? true : false}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="MRP"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
pattern: /^[1-9]\d*(\.\d+)?$/,
|
||||
message: 'Please Enter MRP',
|
||||
},
|
||||
{
|
||||
validator: async (_, value) => {
|
||||
await validateSafeInput(value);
|
||||
|
||||
if (!value) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
if (!/^\d+(\.\d{1,2})?$/.test(value)) {
|
||||
return Promise.reject(
|
||||
'Enter valid MRP (Max 2 decimal places)'
|
||||
);
|
||||
}
|
||||
|
||||
if (parseFloat(value) === 0) {
|
||||
return Promise.reject('MRP cannot be 0');
|
||||
}
|
||||
|
||||
if (value?.length > 10) {
|
||||
return Promise.reject(
|
||||
'MRP cannot exceed 10 digits'
|
||||
);
|
||||
}
|
||||
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputField
|
||||
label={
|
||||
<label class="required">Amount / Per Item</label>
|
||||
}
|
||||
autocomplete="off"
|
||||
onChange={(e) =>
|
||||
handleValuesChange({
|
||||
...formRef.current.getFieldsValue(),
|
||||
MRP: e?.target?.value,
|
||||
})
|
||||
}
|
||||
isOnChange={editState ? true : false}
|
||||
// disabled={!!editState}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
columnGap: '5rem',
|
||||
fontSize: '16px',
|
||||
}}
|
||||
>
|
||||
<p>Bill Amount {isNaN(billAmount) ? 0 : billAmount}</p>
|
||||
<p>Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}</p>
|
||||
<p>Total Amount {isNaN(totalAmount) ? 0 : totalAmount}</p>
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Buttons
|
||||
buttonText="SUBMIT"
|
||||
color="901D77"
|
||||
icon={<ArrowRightOutlined />}
|
||||
/>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</>
|
||||
}
|
||||
handleCancel={handleCancel}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
};
|
||||
|
||||
export default OtherItemsModal;
|
||||
|
|
@ -213,6 +213,7 @@ const BSNavbar2 = () => {
|
|||
?.ScreenStatus ?? 'Open';
|
||||
const navbarOptions = BSLayout1Data?.BookingNavbar?.[1];
|
||||
const PreferenceDatas = useSelector(PreferenceData);
|
||||
|
||||
const userProfileData = useSelector(userDataByUserId);
|
||||
const [preOrderOpen, setPreOrderOpen] = useState(false);
|
||||
const [preOrderhiseandShow, setpreOrderhiseandShow] = useState(false);
|
||||
|
|
|
|||
|
|
@ -180,6 +180,7 @@ const BSNavbar3 = ({ optionNames }) => {
|
|||
const userProfileData = useSelector(userDataByUserId);
|
||||
const appPreferences = useSelector(ApplicationPreferences);
|
||||
const preferences = useSelector(PreferenceData);
|
||||
console.log(preferences, "preferencespreferences")
|
||||
const orderType = useSelector(GlobalOrderType);
|
||||
const bookingType = useSelector(GlobalBookingType, shallowEqual);
|
||||
const layoutData = useSelector(getTemplateData);
|
||||
|
|
@ -687,43 +688,43 @@ const BSNavbar3 = ({ optionNames }) => {
|
|||
(item) =>
|
||||
item?.FeatureAddonName?.toLowerCase() !== 'weight scale'
|
||||
) && (
|
||||
<div
|
||||
style={{
|
||||
pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<BSNavBarWeightScale />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<BSNavBarWeightScale />
|
||||
</div>
|
||||
)}
|
||||
{FeatureAddonData?.FeatureDtls?.find(
|
||||
(item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
|
||||
) && (
|
||||
<div
|
||||
className="BSBillingNavBar2-AllIcons"
|
||||
style={{
|
||||
pointerEvents:
|
||||
tableData || orderType === 'Failed' ? 'none' : 'auto',
|
||||
opacity: tableData ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
|
||||
<Badge
|
||||
count={preOrderPendingCount}
|
||||
offset={[-5, 10]}
|
||||
size="small"
|
||||
>
|
||||
<PozoPreOrderIcon
|
||||
className="BSBillingNav-icon"
|
||||
fill={preOrderOpen ? '#52C41A' : '#1292EE'}
|
||||
onClick={() => {
|
||||
openPreOrder();
|
||||
}}
|
||||
HandleClose={preOrderHandleclose}
|
||||
/>
|
||||
</Badge>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="BSBillingNavBar2-AllIcons"
|
||||
style={{
|
||||
pointerEvents:
|
||||
tableData || orderType === 'Failed' ? 'none' : 'auto',
|
||||
opacity: tableData ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
<TooltipWrapper title={'Pre Booking'} isMobile={isMobile}>
|
||||
<Badge
|
||||
count={preOrderPendingCount}
|
||||
offset={[-5, 10]}
|
||||
size="small"
|
||||
>
|
||||
<PozoPreOrderIcon
|
||||
className="BSBillingNav-icon"
|
||||
fill={preOrderOpen ? '#52C41A' : '#1292EE'}
|
||||
onClick={() => {
|
||||
openPreOrder();
|
||||
}}
|
||||
HandleClose={preOrderHandleclose}
|
||||
/>
|
||||
</Badge>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{preOrderOpen && (
|
||||
|
|
@ -793,16 +794,16 @@ const BSNavbar3 = ({ optionNames }) => {
|
|||
(item) =>
|
||||
item?.FeatureAddonName?.toLowerCase() === 'customer display'
|
||||
) && (
|
||||
<TooltipWrapper title="Customer Display" isMobile={isMobile}>
|
||||
<div
|
||||
onClick={openNewTab}
|
||||
className="BSBillingNavBar1-AllIcons"
|
||||
style={{ width: '1.3rem', margin: '10px', cursor: 'pointer' }}
|
||||
>
|
||||
<CustomerDisplayicon />
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
<TooltipWrapper title="Customer Display" isMobile={isMobile}>
|
||||
<div
|
||||
onClick={openNewTab}
|
||||
className="BSBillingNavBar1-AllIcons"
|
||||
style={{ width: '1.3rem', margin: '10px', cursor: 'pointer' }}
|
||||
>
|
||||
<CustomerDisplayicon />
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
)}
|
||||
<TooltipWrapper title="Reprint (Alt+R)" isMobile={isMobile}>
|
||||
{reprintOption && (
|
||||
<div
|
||||
|
|
@ -1125,7 +1126,7 @@ const BSNavbar3 = ({ optionNames }) => {
|
|||
pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
|
||||
}}
|
||||
>
|
||||
<div className="mobile-action-item" onClick={() => {}}>
|
||||
<div className="mobile-action-item" onClick={() => { }}>
|
||||
<BSNavBarEstimate />
|
||||
<div>Estimate</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import '../../../../Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss';
|
||||
import {
|
||||
|
|
@ -6,6 +6,7 @@ import {
|
|||
SelectedGlobalSubCatgFont,
|
||||
StoredSessionData,
|
||||
} from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { DownOutlined, UpOutlined } from '@ant-design/icons';
|
||||
import {
|
||||
GlobalProductCategorie,
|
||||
getLayoutSubCategories,
|
||||
|
|
@ -20,8 +21,12 @@ import {
|
|||
} from '../../../../Features/BookingScreen/BookingData/BookingData';
|
||||
import WebFont from 'webfontloader';
|
||||
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||
import { isMobile } from 'react-device-detect';
|
||||
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
|
||||
|
||||
function BSSubCategoryHorizontal(props) {
|
||||
const { subCategoryType = null } = props;
|
||||
const isVertical = subCategoryType === 'vertical';
|
||||
const dispatch = useDispatch();
|
||||
const prevRef = useRef();
|
||||
const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
|
||||
|
|
@ -40,6 +45,7 @@ function BSSubCategoryHorizontal(props) {
|
|||
const scrollContainerRef = useRef(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
const [startX, setStartX] = useState(null);
|
||||
const [startY, setStartY] = useState(null);
|
||||
|
||||
const AppId = SessionData?.AppId;
|
||||
const CompId = SessionData?.CompId;
|
||||
|
|
@ -52,14 +58,18 @@ function BSSubCategoryHorizontal(props) {
|
|||
const Reverse1 = categoryFunction?.ImageRight && 'row-reverse';
|
||||
const padding = categoryFunction?.BigCard && '12px';
|
||||
const Uppercase = categoryFunction?.TextCapitalize && 'uppercase';
|
||||
const [width, setWidth] = useState(window.innerWidth);
|
||||
|
||||
console.log(AppId, CompId, 'CompIdCompIdCompId');
|
||||
const [width, setWidth] = useState(window.innerWidth);
|
||||
const [height, setHeight] = useState(window.innerHeight);
|
||||
|
||||
console.log(categoryData, 'categoryData');
|
||||
|
||||
const containerRef = useRef(null);
|
||||
|
||||
const [showLeftButton, setShowLeftButton] = useState(false);
|
||||
const [showRightButton, setShowRightButton] = useState(true);
|
||||
const [showUpButton, setShowUpButton] = useState(false);
|
||||
const [showDownButton, setShowDownButton] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
|
|
@ -73,46 +83,40 @@ function BSSubCategoryHorizontal(props) {
|
|||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
const handleResize = () => {
|
||||
setWidth(window.innerWidth);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [width]);
|
||||
setHeight(window.innerHeight);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWidth(window.innerWidth);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [categoryData]);
|
||||
handleResize(); // initial value
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setWidth(window.innerWidth);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [width, categoryData]);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const container = scrollContainerRef?.current;
|
||||
if (!container) return;
|
||||
|
||||
if (scrollContainerRef?.current?.scrollLeft == 0) {
|
||||
setShowLeftButton(false);
|
||||
} else {
|
||||
setShowLeftButton(true);
|
||||
}
|
||||
if (
|
||||
container?.scrollLeft + container?.clientWidth ===
|
||||
container?.scrollWidth
|
||||
) {
|
||||
setShowRightButton(false);
|
||||
} else {
|
||||
setShowRightButton(true);
|
||||
}
|
||||
}, [scrollContainerRef?.current?.scrollLeft, width]);
|
||||
const updateButtons = () => {
|
||||
if (isVertical) {
|
||||
setShowUpButton(container.scrollTop > 0);
|
||||
setShowDownButton(
|
||||
container.scrollTop + container.clientHeight < container.scrollHeight
|
||||
);
|
||||
} else {
|
||||
setShowLeftButton(container.scrollLeft > 0);
|
||||
setShowRightButton(
|
||||
container.scrollLeft + container.clientWidth < container.scrollWidth
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
container.addEventListener('scroll', updateButtons);
|
||||
updateButtons(); // initial check
|
||||
|
||||
return () => container.removeEventListener('scroll', updateButtons);
|
||||
}, [subCategoryType]);
|
||||
|
||||
useEffect(() => {
|
||||
// Accessing the DOM elements
|
||||
|
|
@ -180,6 +184,20 @@ function BSSubCategoryHorizontal(props) {
|
|||
}
|
||||
};
|
||||
|
||||
const scrollUp = () => {
|
||||
const container = scrollContainerRef.current;
|
||||
if (container.scrollTop > 0) {
|
||||
container.scrollTop -= 100;
|
||||
}
|
||||
};
|
||||
|
||||
const scrollDown = () => {
|
||||
const container = scrollContainerRef.current;
|
||||
if (container.scrollTop + container.clientHeight < container.scrollHeight) {
|
||||
container.scrollTop += 100;
|
||||
}
|
||||
};
|
||||
|
||||
const easeLinear = (t) => {
|
||||
return t;
|
||||
};
|
||||
|
|
@ -258,27 +276,6 @@ function BSSubCategoryHorizontal(props) {
|
|||
).unwrap();
|
||||
}, [ProdCat]);
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
setStartX(e.clientX);
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const scrollContainer = scrollContainerRef.current;
|
||||
if (!scrollContainer) return;
|
||||
|
||||
const deltaX = e.clientX - startX;
|
||||
scrollContainer.scrollLeft -= deltaX;
|
||||
setStartX(e.clientX);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleClick = async (e, ProdSubCat, index) => {
|
||||
let data = {
|
||||
compId: CompId,
|
||||
|
|
@ -310,22 +307,73 @@ function BSSubCategoryHorizontal(props) {
|
|||
// useEffect(() => {
|
||||
// setIndexVal(1);
|
||||
// }, [ProdCat]);
|
||||
|
||||
const handleMouseDown = (e) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(true);
|
||||
|
||||
if (isVertical) {
|
||||
setStartY(e.clientY);
|
||||
} else {
|
||||
setStartX(e.clientX);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchStart = (e) => {
|
||||
setIsDragging(true);
|
||||
setStartX(e.touches[0].clientX);
|
||||
|
||||
if (isVertical) {
|
||||
setStartY(e.touches[0].clientY);
|
||||
} else {
|
||||
setStartX(e.touches[0].clientX);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const container = scrollContainerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
if (isVertical) {
|
||||
const deltaY = startY - e.clientY;
|
||||
container.scrollTop += deltaY;
|
||||
setStartY(e.clientY);
|
||||
} else {
|
||||
const deltaX = e.clientX - startX;
|
||||
container.scrollLeft -= deltaX;
|
||||
setStartX(e.clientX);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTouchMove = (e) => {
|
||||
if (!isDragging) return;
|
||||
|
||||
const scrollContainer = scrollContainerRef.current;
|
||||
if (!scrollContainer) return;
|
||||
const container = scrollContainerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
const deltaX = e.touches[0].clientX - startX;
|
||||
scrollContainer.scrollLeft -= deltaX;
|
||||
setStartX(e.touches[0].clientX);
|
||||
if (isVertical) {
|
||||
const deltaY = startY - e.touches[0].clientY;
|
||||
container.scrollTop += deltaY;
|
||||
setStartY(e.touches[0].clientY);
|
||||
} else {
|
||||
const deltaX = e.touches[0].clientX - startX;
|
||||
container.scrollLeft -= deltaX;
|
||||
setStartX(e.touches[0].clientX);
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleTouchEnd = () => {
|
||||
setIsDragging(false);
|
||||
if (isVertical) {
|
||||
document.body.style.overscrollBehaviorY = 'auto';
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -375,24 +423,6 @@ function BSSubCategoryHorizontal(props) {
|
|||
const maindiv = document.getElementById('mainDiv');
|
||||
const count = maindiv?.querySelectorAll('div');
|
||||
|
||||
useEffect(() => {
|
||||
const container = scrollContainerRef?.current;
|
||||
|
||||
if (scrollContainerRef?.current?.scrollLeft == 0) {
|
||||
setShowLeftButton(false);
|
||||
} else {
|
||||
setShowLeftButton(true);
|
||||
}
|
||||
if (
|
||||
container?.scrollLeft + container?.clientWidth ===
|
||||
container?.scrollWidth
|
||||
) {
|
||||
setShowRightButton(false);
|
||||
} else {
|
||||
setShowRightButton(true);
|
||||
}
|
||||
}, [count]);
|
||||
|
||||
const lightenColor = (color, percent) => {
|
||||
let r = parseInt(color.substring(1, 3), 16);
|
||||
let g = parseInt(color.substring(3, 5), 16);
|
||||
|
|
@ -426,45 +456,80 @@ function BSSubCategoryHorizontal(props) {
|
|||
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
const handleSubCatDragEnd = async (result) => {
|
||||
const handleSubCategoryDragEnd = async (result) => {
|
||||
if (!result.destination) return;
|
||||
let index = result?.destination?.index + 1;
|
||||
|
||||
const index = result.destination.index + 1;
|
||||
setIndexVal(index);
|
||||
|
||||
const items = Array.from(categoryData);
|
||||
const items2 = Array.from(categoryData);
|
||||
let selectData = items2?.splice(result.source.index, 1)?.[0];
|
||||
const itemsCopy = Array.from(categoryData);
|
||||
|
||||
const selectedData = itemsCopy.splice(result.source.index, 1)[0];
|
||||
|
||||
const [movedItem] = items.splice(result.source.index, 1);
|
||||
items.splice(result.destination.index, 0, movedItem);
|
||||
|
||||
await dispatch(ChangeSubcategoryData(items));
|
||||
handleClick('e', selectData.ProdSubCat, index);
|
||||
|
||||
handleClick('e', selectedData.ProdSubCat, index);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
isVertical ? 'SubCategoryVertical' : 'SubCategoryHorizontal bs1'
|
||||
}
|
||||
ref={!isVertical ? containerRef : null}
|
||||
style={
|
||||
!isVertical
|
||||
? {
|
||||
overflowX: 'auto',
|
||||
width: '100%',
|
||||
whiteSpace: 'nowrap',
|
||||
margin: '0',
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{!globalAccessForOthers && !CardAccess && (
|
||||
<div
|
||||
className="SubCategoryHorizontal bs1"
|
||||
ref={containerRef}
|
||||
style={{ overflowX: 'auto', width: '100%', whiteSpace: 'nowrap' }}
|
||||
>
|
||||
{/* {isRightDisabled && <button className="SubCategoryHorizontal-icon" onClick={scrollLeft}>
|
||||
<LeftOutlined />
|
||||
</button>} */}
|
||||
|
||||
<div style={{ width: '50px' }}>
|
||||
{showLeftButton && (
|
||||
<div
|
||||
className="CategoryHorizontal-icon"
|
||||
onClick={() => handleScrollClickLeft(-50, 0)}
|
||||
>
|
||||
◄
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<>
|
||||
{!isVertical ? (
|
||||
<div style={{ width: '50px' }}>
|
||||
{showLeftButton && (
|
||||
<div
|
||||
className="CategoryHorizontal-icon"
|
||||
onClick={() => handleScrollClickLeft(-50, 0)}
|
||||
>
|
||||
◄
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="SubCategoryVertical-buttons">
|
||||
{showUpButton && (
|
||||
<button className="SubCategoryVertical-icon" onClick={scrollUp}>
|
||||
<UpOutlined />
|
||||
</button>
|
||||
)}
|
||||
{showDownButton && (
|
||||
<button
|
||||
className="SubCategoryVertical-icon"
|
||||
onClick={scrollDown}
|
||||
>
|
||||
<DownOutlined />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
id="mainDiv"
|
||||
className="SubCategoryHorizontal-scroll-container"
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-scroll-container'
|
||||
: 'SubCategoryHorizontal-scroll-container'
|
||||
}
|
||||
ref={scrollContainerRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
onTouchStart={handleTouchStart}
|
||||
|
|
@ -476,12 +541,13 @@ function BSSubCategoryHorizontal(props) {
|
|||
style={{
|
||||
cursor: isDragging ? 'grabbing' : 'grab',
|
||||
touchAction: isDragging ? 'none' : 'auto',
|
||||
whiteSpace: 'nowrap',
|
||||
whiteSpace: isVertical ? 'normal' : 'nowrap',
|
||||
}}
|
||||
>
|
||||
{draggingComponent !== 'sub-category' &&
|
||||
categoryData?.map((eachData, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
borderRadius: Radius,
|
||||
backgroundColor:
|
||||
|
|
@ -491,8 +557,6 @@ function BSSubCategoryHorizontal(props) {
|
|||
SelectedSubCatgColor['BackgroundColor'],
|
||||
0.4
|
||||
),
|
||||
// backgroundColor:
|
||||
// index + 1 != indexval ? SelectedSubCatgColor["BackgroundColor"] : "white",
|
||||
padding: padding,
|
||||
border: '1px solid',
|
||||
borderColor:
|
||||
|
|
@ -509,43 +573,65 @@ function BSSubCategoryHorizontal(props) {
|
|||
70
|
||||
),
|
||||
}}
|
||||
key={index}
|
||||
className="sampleCardhorizontalsubcat"
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-sampleCard'
|
||||
: 'sampleCardhorizontalsubcat'
|
||||
}
|
||||
onClick={(e) =>
|
||||
handleClick(e, eachData.ProdSubCat, index + 1)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{ flexDirection: Reverse1 }}
|
||||
className="SubCategoryHorizontal-sub-samplecard"
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
textTransform: Uppercase,
|
||||
fontFamily: SelectedFontFamily
|
||||
? SelectedFontFamily
|
||||
: '',
|
||||
color: SelectedSubCatgColor
|
||||
? SelectedSubCatgColor['FontColor']
|
||||
: '',
|
||||
}}
|
||||
className="SubCategoryHorizontal-text"
|
||||
{
|
||||
<TooltipWrapper
|
||||
title={eachData.ProdSubCatName}
|
||||
placement="rightTop"
|
||||
isMobile={isMobile}
|
||||
>
|
||||
{eachData.ProdSubCatName
|
||||
? eachData.ProdSubCatName
|
||||
: 'General'}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
style={{ flexDirection: Reverse1 }}
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-sub-samplecard'
|
||||
: 'SubCategoryHorizontal-sub-samplecard'
|
||||
}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
textTransform: Uppercase,
|
||||
fontFamily: SelectedFontFamily
|
||||
? SelectedFontFamily
|
||||
: '',
|
||||
color: SelectedSubCatgColor
|
||||
? SelectedSubCatgColor['FontColor']
|
||||
: '',
|
||||
}}
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-text'
|
||||
: 'SubCategoryHorizontal-text'
|
||||
}
|
||||
>
|
||||
{eachData.ProdSubCatName || 'General'}
|
||||
</p>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
}
|
||||
</div>
|
||||
))}
|
||||
{draggingComponent == 'sub-category' && (
|
||||
<DragDropContext onDragEnd={handleSubCatDragEnd}>
|
||||
<Droppable droppableId="subCategories" direction="horizontal">
|
||||
<DragDropContext onDragEnd={handleSubCategoryDragEnd}>
|
||||
<Droppable
|
||||
droppableId={
|
||||
isVertical ? 'sub-category-droppable' : 'subCategories'
|
||||
}
|
||||
direction={isVertical ? 'vertical' : 'horizontal'}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
style={{ display: 'flex', gap: '8px' }} // or your preferred spacing
|
||||
style={isVertical ? {} : { display: 'flex', gap: '8px' }}
|
||||
>
|
||||
{categoryData?.map((eachData, index) => (
|
||||
<Draggable
|
||||
|
|
@ -561,6 +647,7 @@ function BSSubCategoryHorizontal(props) {
|
|||
style={{
|
||||
...provided.draggableProps.style,
|
||||
borderRadius: Radius,
|
||||
marginBottom: isVertical ? 8 : 0,
|
||||
backgroundColor:
|
||||
index + 1 !== indexval
|
||||
? SelectedSubCatgColor['BackgroundColor']
|
||||
|
|
@ -588,32 +675,48 @@ function BSSubCategoryHorizontal(props) {
|
|||
70
|
||||
),
|
||||
}}
|
||||
className="sampleCardhorizontalsubcat"
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-sampleCard'
|
||||
: 'sampleCardhorizontalsubcat'
|
||||
}
|
||||
onClick={(e) =>
|
||||
handleClick(e, eachData.ProdSubCat, index + 1)
|
||||
}
|
||||
>
|
||||
<div
|
||||
style={{ flexDirection: Reverse1 }}
|
||||
className="SubCategoryHorizontal-sub-samplecard"
|
||||
<TooltipWrapper
|
||||
title={eachData.ProdSubCatName}
|
||||
placement="rightTop"
|
||||
isMobile={isMobile}
|
||||
>
|
||||
<p
|
||||
style={{
|
||||
textTransform: Uppercase,
|
||||
fontFamily: SelectedFontFamily
|
||||
? SelectedFontFamily
|
||||
: '',
|
||||
color: SelectedSubCatgColor
|
||||
? SelectedSubCatgColor['FontColor']
|
||||
: '',
|
||||
}}
|
||||
className="SubCategoryHorizontal-text"
|
||||
<div
|
||||
style={{ flexDirection: Reverse1 }}
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-sub-samplecard'
|
||||
: 'SubCategoryHorizontal-sub-samplecard'
|
||||
}
|
||||
>
|
||||
{eachData.ProdSubCatName
|
||||
? eachData.ProdSubCatName
|
||||
: 'General'}
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
textTransform: Uppercase,
|
||||
fontFamily: SelectedFontFamily
|
||||
? SelectedFontFamily
|
||||
: '',
|
||||
color: SelectedSubCatgColor
|
||||
? SelectedSubCatgColor['FontColor']
|
||||
: '',
|
||||
}}
|
||||
className={
|
||||
isVertical
|
||||
? 'SubCategoryVertical-text'
|
||||
: 'SubCategoryHorizontal-text'
|
||||
}
|
||||
>
|
||||
{eachData.ProdSubCatName || 'General'}
|
||||
</p>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
|
|
@ -625,21 +728,24 @@ function BSSubCategoryHorizontal(props) {
|
|||
</DragDropContext>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
|
||||
>
|
||||
{showRightButton && (
|
||||
<div
|
||||
className="CategoryHorizontal-icon"
|
||||
onClick={() => handleScrollClickRight(50, 0)}
|
||||
>
|
||||
►
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isVertical && (
|
||||
<div
|
||||
style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
|
||||
>
|
||||
{showRightButton && (
|
||||
<div
|
||||
className="CategoryHorizontal-icon"
|
||||
onClick={() => handleScrollClickRight(50, 0)}
|
||||
>
|
||||
►
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -102,26 +102,6 @@ function BSSubCategoryVertical(props) {
|
|||
};
|
||||
}, []);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
},
|
||||
[height],
|
||||
categoryData
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
}, [categoryData]);
|
||||
|
||||
useEffect(() => {
|
||||
if (SelectedFontFamily) {
|
||||
WebFont.load({
|
||||
|
|
@ -279,7 +259,7 @@ function BSSubCategoryVertical(props) {
|
|||
|
||||
useEffect(() => {
|
||||
function handleResize() {
|
||||
setHeight(window.innerheight);
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
window.addEventListener('resize', handleResize);
|
||||
return () => window.removeEventListener('resize', handleResize);
|
||||
|
|
|
|||
|
|
@ -1,135 +1,136 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { changeProductSubCategorie, getCardDataWithoutSub, getLayoutproductCard, getLayoutSubCategories, GlobalProductCategorie, GlobalSubcategorieData } from "../../../../Features/BookingScreen/BookingData/BookingData";
|
||||
import { FaAngleUp } from "react-icons/fa";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { StoredSessionData } from "../../../../Features/ThemeChange/ThemeChange";
|
||||
import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin";
|
||||
import { useDateStore } from "../../../../Features/BookingScreen/BookingData/DateStore";
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import {
|
||||
changeProductSubCategorie,
|
||||
getCardDataWithoutSub,
|
||||
getLayoutproductCard,
|
||||
getLayoutSubCategories,
|
||||
GlobalProductCategorie,
|
||||
GlobalSubcategorieData,
|
||||
} from '../../../../Features/BookingScreen/BookingData/BookingData';
|
||||
import { FaAngleUp } from 'react-icons/fa';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { StoredSessionData } from '../../../../Features/ThemeChange/ThemeChange';
|
||||
import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLogin';
|
||||
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore';
|
||||
|
||||
const StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
|
||||
const dispatch = useDispatch();
|
||||
const ProdCat = useSelector(GlobalProductCategorie);
|
||||
const SubcategorieData = useSelector(GlobalSubcategorieData);
|
||||
const SessionData = useSelector(StoredSessionData);
|
||||
const formRef = useRef(null);
|
||||
const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData);
|
||||
const AppId = SessionData?.AppId;
|
||||
const CompId = SessionData?.CompId;
|
||||
const BranchId = SessionData?.BranchId;
|
||||
const UserId = SessionData?.UserId;
|
||||
const ApplicationPreferenceData = useSelector(ApplicationPreferences);
|
||||
const { selectedDate } = useDateStore();
|
||||
const salespagefields = ApplicationPreferenceData
|
||||
?.find(pref => pref?.PreferredCatName === "Sales Page Fields")
|
||||
?.PreferenceCatDetails
|
||||
const AvailableDate = salespagefields
|
||||
?.find(type => type?.PreferredSubCatName?.toLowerCase() === "available date" && type?.PreferredStatus === "Y");
|
||||
useEffect(() => {
|
||||
// ProdCat &&
|
||||
// dispatch(
|
||||
// getLayoutSubCategories({
|
||||
// CompId: CompId,
|
||||
// BranchId: BranchId,
|
||||
// AppId: AppId,
|
||||
// ProdCat: ProdCat,
|
||||
// ...(AvailableDate && selectedDate
|
||||
// ? {
|
||||
// fromDate: selectedDate?.[0],
|
||||
// toDate:selectedDate?.[1],
|
||||
// }
|
||||
// : {}),
|
||||
// })
|
||||
// ).unwrap();
|
||||
setSelectedSubCat(0)
|
||||
const dispatch = useDispatch();
|
||||
const ProdCat = useSelector(GlobalProductCategorie);
|
||||
const SubcategorieData = useSelector(GlobalSubcategorieData);
|
||||
const SessionData = useSelector(StoredSessionData);
|
||||
const formRef = useRef(null);
|
||||
const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData);
|
||||
const AppId = SessionData?.AppId;
|
||||
const CompId = SessionData?.CompId;
|
||||
const BranchId = SessionData?.BranchId;
|
||||
const UserId = SessionData?.UserId;
|
||||
const ApplicationPreferenceData = useSelector(ApplicationPreferences);
|
||||
const { selectedDate } = useDateStore();
|
||||
const salespagefields = ApplicationPreferenceData?.find(
|
||||
(pref) => pref?.PreferredCatName === 'Sales Page Fields'
|
||||
)?.PreferenceCatDetails;
|
||||
const AvailableDate = salespagefields?.find(
|
||||
(type) =>
|
||||
type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
|
||||
type?.PreferredStatus === 'Y'
|
||||
);
|
||||
useEffect(() => {
|
||||
// ProdCat &&
|
||||
// dispatch(
|
||||
// getLayoutSubCategories({
|
||||
// CompId: CompId,
|
||||
// BranchId: BranchId,
|
||||
// AppId: AppId,
|
||||
// ProdCat: ProdCat,
|
||||
// ...(AvailableDate && selectedDate
|
||||
// ? {
|
||||
// fromDate: selectedDate?.[0],
|
||||
// toDate:selectedDate?.[1],
|
||||
// }
|
||||
// : {}),
|
||||
// })
|
||||
// ).unwrap();
|
||||
setSelectedSubCat(0);
|
||||
}, [ProdCat]);
|
||||
|
||||
}, [ProdCat]);
|
||||
|
||||
const handleSubCatClick = async (e, ProdSubCat, index) => {
|
||||
await dispatch(changeProductSubCategorie(ProdSubCat));
|
||||
const data = {
|
||||
compId: CompId,
|
||||
branchId: BranchId,
|
||||
appId: AppId,
|
||||
prodCat: ProdCat,
|
||||
...(AvailableDate && selectedDate
|
||||
? {
|
||||
fromDate: selectedDate?.[0],
|
||||
toDate:selectedDate?.[1],
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
const data1 = {
|
||||
CompId: CompId,
|
||||
BranchId: BranchId,
|
||||
ProdSubCat: ProdSubCat,
|
||||
AppId: AppId,
|
||||
...(AvailableDate && selectedDate
|
||||
? {
|
||||
fromDate: selectedDate?.[0],
|
||||
toDate:selectedDate?.[1],
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
setSelectedSubCat(index);
|
||||
if (ProdSubCat == null) {
|
||||
|
||||
console.log(selectedDate,"selectedDate")
|
||||
await dispatch(getCardDataWithoutSub(data)).unwrap();
|
||||
} else {
|
||||
|
||||
// console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
|
||||
// Call API with subcategory - fetch items for this subcategory
|
||||
await dispatch(getLayoutproductCard(data1));
|
||||
// await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
|
||||
|
||||
}
|
||||
|
||||
// Remove previous border styling
|
||||
if (formRef.current && formRef.current !== e.currentTarget) {
|
||||
formRef.current.classList.remove('SubCategoryVertical-sampleCard-border');
|
||||
}
|
||||
|
||||
// Add border to clicked element
|
||||
e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border');
|
||||
formRef.current = e.currentTarget;
|
||||
};
|
||||
|
||||
|
||||
const handleSubCatClick = async (e, ProdSubCat, index) => {
|
||||
await dispatch(changeProductSubCategorie(ProdSubCat));
|
||||
const data = {
|
||||
compId: CompId,
|
||||
branchId: BranchId,
|
||||
appId: AppId,
|
||||
prodCat: ProdCat,
|
||||
...(AvailableDate && selectedDate
|
||||
? {
|
||||
fromDate: selectedDate?.[0],
|
||||
toDate: selectedDate?.[1],
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
return (
|
||||
const data1 = {
|
||||
CompId: CompId,
|
||||
BranchId: BranchId,
|
||||
ProdSubCat: ProdSubCat,
|
||||
AppId: AppId,
|
||||
...(AvailableDate && selectedDate
|
||||
? {
|
||||
fromDate: selectedDate?.[0],
|
||||
toDate: selectedDate?.[1],
|
||||
}
|
||||
: {}),
|
||||
};
|
||||
|
||||
<div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
|
||||
<button className='closeSubCatBTN' onClick={handleSubCatClose}>
|
||||
<FaAngleUp />
|
||||
</button>
|
||||
<div className="subCategoryNewDiv">
|
||||
{
|
||||
SubcategorieData?.map((item, index) => {
|
||||
const key = item?.ProdSubCat ?? `general-${index}`;
|
||||
const isActive = selectedSubCat === index;
|
||||
|
||||
// Check if the name is null, undefined, or empty string
|
||||
const displayName =
|
||||
item?.ProdSubCatName && item.ProdSubCatName.trim() !== ""
|
||||
? item.ProdSubCatName
|
||||
: "General";
|
||||
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`subcatNewLayout ${isActive ? "active" : ""}`}
|
||||
onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
|
||||
>
|
||||
{displayName}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default StandardSubcategory;
|
||||
setSelectedSubCat(index);
|
||||
if (ProdSubCat == null) {
|
||||
console.log(selectedDate, 'selectedDate');
|
||||
await dispatch(getCardDataWithoutSub(data)).unwrap();
|
||||
} else {
|
||||
// console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
|
||||
// Call API with subcategory - fetch items for this subcategory
|
||||
await dispatch(getLayoutproductCard(data1));
|
||||
// await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
|
||||
}
|
||||
|
||||
// Remove previous border styling
|
||||
if (formRef.current && formRef.current !== e.currentTarget) {
|
||||
formRef.current.classList.remove('SubCategoryVertical-sampleCard-border');
|
||||
}
|
||||
|
||||
// Add border to clicked element
|
||||
e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border');
|
||||
formRef.current = e.currentTarget;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
|
||||
<button className="closeSubCatBTN" onClick={handleSubCatClose}>
|
||||
<FaAngleUp />
|
||||
</button>
|
||||
<div className="subCategoryNewDiv">
|
||||
{SubcategorieData?.map((item, index) => {
|
||||
const key = item?.ProdSubCat ?? `general-${index}`;
|
||||
const isActive = selectedSubCat === index;
|
||||
|
||||
// Check if the name is null, undefined, or empty string
|
||||
const displayName =
|
||||
item?.ProdSubCatName && item.ProdSubCatName.trim() !== ''
|
||||
? item.ProdSubCatName
|
||||
: 'General';
|
||||
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={`subcatNewLayout ${isActive ? 'active' : ''}`}
|
||||
onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
|
||||
>
|
||||
{displayName}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default StandardSubcategory;
|
||||
|
|
|
|||
|
|
@ -237,10 +237,12 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
const [BillingTableData, setBillingTableData] = useState([]);
|
||||
|
||||
// selected Dropdown ids
|
||||
const [manualChange, setManualChange] = useState(null);
|
||||
const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null);
|
||||
const [SelectedLayoutId, setSelectedLayoutId] = useState(null);
|
||||
const [SelectedNavbarId, setSelectedNavbarId] = useState(null);
|
||||
const [SelectedCategoryId, setSelectedCategoryId] = useState(null);
|
||||
const [selectedCategoryName, setSelectedCategoryName] = useState(null);
|
||||
const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null);
|
||||
const [SelectedCardId, setSelectedCardId] = useState(null);
|
||||
const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
|
||||
|
|
@ -439,6 +441,12 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
}
|
||||
}, [UserType]);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedCategoryName === 'Category5') {
|
||||
setSelectedSubCategoryId(null);
|
||||
}
|
||||
}, [selectedCategoryName]);
|
||||
|
||||
useEffect(() => {
|
||||
let hasAccess = false;
|
||||
|
||||
|
|
@ -707,7 +715,11 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
}
|
||||
|
||||
dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap;
|
||||
selectCategory(editCategoryrVal?.[0]?.['ComponentId']);
|
||||
selectCategory(
|
||||
manualChange
|
||||
? CategoryData?.[0]?.['ComponentId']
|
||||
: editCategoryrVal?.[0]?.['ComponentId']
|
||||
);
|
||||
let optionIds = templateData?.['BookingCategory']?.[1]?.map(
|
||||
(item) => item?.OptionId
|
||||
);
|
||||
|
|
@ -1104,12 +1116,13 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
);
|
||||
}
|
||||
};
|
||||
const GetCategoryFun = async () => {
|
||||
const GetCategoryFun = async (manualChange) => {
|
||||
const gettingCategoryData = await dispatch(getCategory()).unwrap();
|
||||
if (gettingCategoryData?.data?.statusCode === 1) {
|
||||
dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId))
|
||||
.unwrap;
|
||||
setCategoryData(gettingCategoryData?.data?.data);
|
||||
setManualChange(manualChange);
|
||||
}
|
||||
};
|
||||
const GetSubCategoryFun = async () => {
|
||||
|
|
@ -1193,7 +1206,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
};
|
||||
|
||||
// Selected value functions
|
||||
const selectLayout = (e) => {
|
||||
const selectLayout = async (e, manualChange = false) => {
|
||||
formRef.current?.setFieldsValue({ LayoutId: e });
|
||||
setSelectedLayoutId(e);
|
||||
dispatch(
|
||||
|
|
@ -1214,7 +1227,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
|
||||
GetNavbarFun();
|
||||
GetLayoutBackgroundFun();
|
||||
GetCategoryFun();
|
||||
await GetCategoryFun(manualChange);
|
||||
GetCardFun();
|
||||
GetSubCategoryFun();
|
||||
GetBillingTableFun();
|
||||
|
|
@ -1294,6 +1307,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
setSelectedCategoryId(e);
|
||||
dispatch(changeSelectedCategory({ CategoryId: e }));
|
||||
let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e);
|
||||
setSelectedCategoryName(CategoryItems[0]?.ComponentName);
|
||||
dispatch(
|
||||
changePreviewComponents({
|
||||
BookingCategory: [
|
||||
|
|
@ -2779,6 +2793,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [],
|
||||
});
|
||||
|
||||
selectedCategoryName !== 'Category5' &&
|
||||
ShowDropDownData?.find((a) => a.OptionName === 'SubCategory')
|
||||
? tempData.push({
|
||||
ComponentId: SelectedSubCategoryId,
|
||||
|
|
@ -3140,7 +3155,7 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
label: option.ComponentName,
|
||||
}))}
|
||||
label="Layout"
|
||||
onChangeFunction={selectLayout}
|
||||
onChangeFunction={(e) => selectLayout(e, true)}
|
||||
className="field-DropDown-Selection"
|
||||
isOnchanges={SelectedLayoutId ? true : false}
|
||||
valueData={SelectedLayoutId}
|
||||
|
|
@ -3306,35 +3321,38 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
{ShowDropDownData?.find(
|
||||
(a) => a.OptionName === 'SubCategory'
|
||||
) && (
|
||||
<div>
|
||||
<p className="Selection-Component-SubHeading">Sub Category</p>
|
||||
{selectedCategoryName !== 'Category5' &&
|
||||
ShowDropDownData?.find(
|
||||
(a) => a.OptionName === 'SubCategory'
|
||||
) && (
|
||||
<div>
|
||||
<p className="Selection-Component-SubHeading">
|
||||
Sub Category
|
||||
</p>
|
||||
|
||||
<Form.Item
|
||||
name="SubCategoryId"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select SubCategory',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DropDowns
|
||||
options={SubCategoryData?.map((option) => ({
|
||||
value: option.ComponentId,
|
||||
label: option.ComponentName,
|
||||
}))}
|
||||
label="Sub Category"
|
||||
onChangeFunction={selectSubCategory}
|
||||
className="field-DropDown-Selection"
|
||||
isOnchanges={SelectedSubCategoryId ? true : false}
|
||||
valueData={SelectedSubCategoryId}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
<Form.Item
|
||||
name="SubCategoryId"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: 'Please Select SubCategory',
|
||||
},
|
||||
]}
|
||||
>
|
||||
<DropDowns
|
||||
options={SubCategoryData?.map((option) => ({
|
||||
value: option.ComponentId,
|
||||
label: option.ComponentName,
|
||||
}))}
|
||||
label="Sub Category"
|
||||
onChangeFunction={selectSubCategory}
|
||||
className="field-DropDown-Selection"
|
||||
isOnchanges={SelectedSubCategoryId ? true : false}
|
||||
valueData={SelectedSubCategoryId}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
)}
|
||||
{ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
|
||||
<div>
|
||||
<p className="Selection-Component-SubHeading">Card</p>
|
||||
|
|
@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
{ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
|
||||
{selectedCategoryName !== 'Category5' &&
|
||||
ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
|
||||
SubCategoryCheckList?.length > 0 && (
|
||||
<div className="Selection-Component-selectContainer">
|
||||
<div className="Selection-Component-selectheadingMainDiv">
|
||||
|
|
|
|||
|
|
@ -83,22 +83,25 @@ const PreviewLayout3 = (props) => {
|
|||
)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: SelectedSubCatgColor?.['OverallBackgroundColor'],
|
||||
}}
|
||||
>
|
||||
<PCSubCategoryHor
|
||||
categoryFunction={dynamicComponentProps(
|
||||
'SubCategory',
|
||||
dynamicPreviewOptions(
|
||||
Preview3Data?.BookingSubCategory?.[1],
|
||||
selectedSubCategoryOptions
|
||||
),
|
||||
Preview3Data?.BookingSubCategory?.[0]
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
{Preview3Data?.BookingSubCategory?.[0] !== undefined && (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor:
|
||||
SelectedSubCatgColor?.['OverallBackgroundColor'],
|
||||
}}
|
||||
>
|
||||
<PCSubCategoryHor
|
||||
categoryFunction={dynamicComponentProps(
|
||||
'SubCategory',
|
||||
dynamicPreviewOptions(
|
||||
Preview3Data?.BookingSubCategory?.[1],
|
||||
selectedSubCategoryOptions
|
||||
),
|
||||
Preview3Data?.BookingSubCategory?.[0]
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="PCLayout3-content">
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
|
|||
import './AllSalesPageSettings.scss';
|
||||
import TableHeadersetting from './TableHeadersetting';
|
||||
import PaymentOptions from '../../../Payment/PaymentOptions/PaymentOptions';
|
||||
import PreferenceList from '../../../Preference/PreferenceList';
|
||||
|
||||
const AllSalesPageSettings = () => {
|
||||
const [settingModal, setsettingModal] = useState(false);
|
||||
|
|
@ -38,6 +39,7 @@ const AllSalesPageSettings = () => {
|
|||
</TooltipWrapper>
|
||||
|
||||
<DefaultModal
|
||||
className={'sales-setting-modal'}
|
||||
open={settingModal}
|
||||
footer={false}
|
||||
handleCancel={onclose}
|
||||
|
|
@ -58,8 +60,14 @@ const AllSalesPageSettings = () => {
|
|||
>
|
||||
Table
|
||||
</div>
|
||||
<div
|
||||
className={selectedComponent === 'Preference' ? 'selected' : ''}
|
||||
onClick={() => ComponentSelect('Preference')}
|
||||
>
|
||||
Preference
|
||||
</div>
|
||||
</div>
|
||||
<div className="SettingsComponentDiv">
|
||||
<div className={`SettingsComponentDiv ${selectedComponent === 'Preference' ? 'no-overflow' : ''}`}>
|
||||
{selectedComponent == 'Payment' && (
|
||||
<div>
|
||||
<PaymentOptions setModalOpen={setsettingModal} />
|
||||
|
|
@ -69,6 +77,10 @@ const AllSalesPageSettings = () => {
|
|||
{selectedComponent === 'Table' && (
|
||||
<TableHeadersetting setModalOpen={setsettingModal} />
|
||||
)}
|
||||
{selectedComponent === 'Preference' && (
|
||||
<PreferenceList setting={true} />
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</DefaultModal>
|
||||
|
|
|
|||
|
|
@ -92,14 +92,20 @@
|
|||
scrollbar-width: thin;
|
||||
padding-right: 10px;
|
||||
overflow: auto;
|
||||
|
||||
.option-maindiv {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
padding: 8px !important;
|
||||
}
|
||||
|
||||
&.no-overflow {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
.SettingsListSwitchBTN {
|
||||
|
|
@ -114,6 +120,7 @@
|
|||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
height: 80vh;
|
||||
|
||||
div {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
|
|
@ -130,6 +137,7 @@
|
|||
&:hover {
|
||||
background-color: #d1d8ec;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: #ffffff;
|
||||
color: #2563eb;
|
||||
|
|
@ -153,6 +161,7 @@
|
|||
gap: 4px;
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
|
||||
svg {
|
||||
color: #fff !important;
|
||||
font-weight: 500;
|
||||
|
|
@ -177,8 +186,35 @@
|
|||
flex-wrap: wrap;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.selctfontBackInput {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.sales-setting-modal {
|
||||
.PreferencesBTN {
|
||||
// bottom: 40px !important;
|
||||
// right: 160px !important;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.SettingsComponentDiv {
|
||||
.formHeader {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-and-preferences {
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
.preferences-list {
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
|
||||
.modal-menu {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,8 +21,9 @@ import { useAuth } from '../../AuthContext.jsx';
|
|||
import { ApplicationPreferences } from '../../Features/BrachLogin/BranchLogin.js';
|
||||
import './PreferenceList.scss';
|
||||
import { InputField } from '../../Components/Forms/InputField.jsx';
|
||||
import { changePreferenceData } from '../../Features/BookingScreen/BookingData/BookingData.js';
|
||||
|
||||
const PreferenceList = () => {
|
||||
const PreferenceList = ({ setting = false }) => {
|
||||
const { SadminuserAccess, featureaddDetails } = useAuth();
|
||||
const dispatch = useDispatch();
|
||||
const formRef = useRef();
|
||||
|
|
@ -301,7 +302,12 @@ const PreferenceList = () => {
|
|||
};
|
||||
|
||||
const fetchTableData = async () => {
|
||||
await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
|
||||
const res = await dispatch(gettableData({ CompId, BranchId, AppId })).unwrap();
|
||||
if (res?.data?.statusCode === 1 && res?.data?.data?.length > 0) {
|
||||
await dispatch(changePreferenceData(res?.data?.data));
|
||||
} else {
|
||||
await dispatch(changePreferenceData([]));
|
||||
}
|
||||
handleApplicationChange(AppId);
|
||||
};
|
||||
|
||||
|
|
@ -477,8 +483,8 @@ const PreferenceList = () => {
|
|||
/>
|
||||
<div className="userPageTable" style={{ overflow: 'hidden' }}>
|
||||
<FormHeader title="Preference" />
|
||||
<div className="menu-and-preferences">
|
||||
<div className="menu-section">
|
||||
<div className={`menu-and-preferences ${setting ? 'preferences-menu' : ''}`}>
|
||||
<div className={`menu-section ${setting ? 'modal-menu' : ''}`}>
|
||||
<div
|
||||
onClick={(e) => handleMenuClick(e, 'general')}
|
||||
style={{
|
||||
|
|
@ -586,25 +592,25 @@ const PreferenceList = () => {
|
|||
{(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>
|
||||
)}
|
||||
<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'
|
||||
|
|
@ -734,23 +740,23 @@ const PreferenceList = () => {
|
|||
{(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>
|
||||
)}
|
||||
<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
|
||||
|
|
@ -777,37 +783,37 @@ const PreferenceList = () => {
|
|||
|
||||
{(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>
|
||||
)}
|
||||
<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>
|
||||
<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>
|
||||
)}
|
||||
{allSettingsMap['estimation'] !== undefined && (
|
||||
<Checkbox value="estimation">Estimation</Checkbox>
|
||||
)}
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Checkbox.Group>
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{renderCheckbox('stockselection', 'Enable stock selection?')}
|
||||
{renderCheckbox('weightasquantity', 'Use Weight as Quantity?')}
|
||||
|
|
@ -896,72 +902,72 @@ const PreferenceList = () => {
|
|||
|
||||
{(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
|
||||
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,
|
||||
})
|
||||
}
|
||||
<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?"
|
||||
>
|
||||
{allSettingsMap['overalllimit'] !== undefined && (
|
||||
<Radio value="overall">
|
||||
Overall Order Quantity
|
||||
</Radio>
|
||||
)}
|
||||
{allSettingsMap['itemwiselimit'] !==
|
||||
undefined && (
|
||||
<Radio value="itemwise">
|
||||
Item-wise Quantity
|
||||
</Radio>
|
||||
)}
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
<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 />
|
||||
|
|
@ -984,46 +990,46 @@ const PreferenceList = () => {
|
|||
{['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
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
<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',
|
||||
|
|
@ -1053,25 +1059,25 @@ const PreferenceList = () => {
|
|||
{['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>
|
||||
)}
|
||||
<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',
|
||||
|
|
@ -1079,24 +1085,24 @@ const PreferenceList = () => {
|
|||
)}
|
||||
{(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>
|
||||
)}
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
color: #1890ff; // Ant Design blue
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
.ant-form-item-label>label {
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
.submitButton {
|
||||
position: unset;
|
||||
|
||||
> button {
|
||||
>button {
|
||||
width: max-content;
|
||||
bottom: 30px;
|
||||
}
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
.menu-section {
|
||||
padding: 10px 0;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
|
@ -99,17 +99,45 @@
|
|||
&:hover {
|
||||
background-color: #c0cbf8;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
border: none !important;
|
||||
text-decoration: none !important;
|
||||
font-style: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
white-space: nowrap;
|
||||
width: 75vw;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
>div {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
border-radius: unset;
|
||||
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preferences-menu {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
.menu-and-preferences {
|
||||
flex-direction: column;
|
||||
|
|
@ -126,7 +154,7 @@
|
|||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.ant-form-item-label > label {
|
||||
.ant-form-item-label>label {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -149,7 +177,7 @@
|
|||
margin: 0;
|
||||
text-decoration: underline;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
background-color: unset;
|
||||
|
|
@ -174,4 +202,4 @@
|
|||
.primary_Button {
|
||||
width: 200px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
.CategoryHorizontal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 4px 10px 10px 10px;
|
||||
margin: 4px 8px 10px 8px;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.bs1 {
|
||||
|
|
@ -12,7 +13,6 @@
|
|||
.CategoryHorizontal-master-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
// flex-wrap: wrap;
|
||||
column-gap: 0.7rem;
|
||||
row-gap: 0.7rem;
|
||||
width: max-content;
|
||||
|
|
@ -21,11 +21,15 @@
|
|||
.CategoryHorizontal-icon {
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
padding: 3px;
|
||||
border-radius: 30px;
|
||||
background-color: #e2e2e2;
|
||||
margin: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
background-color: #d8d8d8;
|
||||
margin: 3px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.CategoryHorizontal-image {
|
||||
|
|
@ -39,18 +43,8 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.CategoryHorizontal-icon {
|
||||
border: none;
|
||||
font-size: 15px;
|
||||
padding: 3px;
|
||||
border-radius: 30px;
|
||||
background-color: #e2e2e2;
|
||||
margin: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.CategoryHorizontal-scroll-container {
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
max-height: 300px;
|
||||
scrollbar-width: none;
|
||||
display: flex;
|
||||
|
|
@ -63,28 +57,12 @@
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
// ::-webkit-scrollbar-button:start {
|
||||
// background-color: #333;
|
||||
// border: 1px solid #666;
|
||||
// }
|
||||
|
||||
// /* Style the scroll-down button */
|
||||
// ::-webkit-scrollbar-button:end {
|
||||
// background-color: #333;
|
||||
// border: 1px solid #666;
|
||||
// }
|
||||
|
||||
// ::-webkit-scrollbar {
|
||||
// display: none;
|
||||
// }
|
||||
|
||||
.CategoryHorizontal-btn-option2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
width: max-content !important;
|
||||
cursor: pointer;
|
||||
// border-radius: 20px;
|
||||
}
|
||||
|
||||
.CategoryHorizontal-input-style:checked + span {
|
||||
|
|
@ -97,19 +75,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .CategoryHorizontal-btn-option2 {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// padding: 10px 10px;
|
||||
// width: max-content !important;
|
||||
// }
|
||||
.CategoryHorizontal-btn-option2-reverse {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
padding: 10px 10px;
|
||||
width: max-content !important;
|
||||
// border-radius: 20px;
|
||||
}
|
||||
|
||||
.CategoryHorizontal-curved {
|
||||
|
|
@ -121,7 +92,6 @@
|
|||
}
|
||||
|
||||
.CategoryHorizontal-scroll-container {
|
||||
// overflow: hidden !important;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -130,7 +100,6 @@
|
|||
min-width: max-content;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// flex-grow: 1;
|
||||
}
|
||||
|
||||
.sampleCard:active,
|
||||
|
|
@ -140,7 +109,7 @@
|
|||
|
||||
.CategoryHorizontal-sub-samplecard {
|
||||
width: max-content;
|
||||
padding: 3px 5px;
|
||||
padding: 2px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
p {
|
||||
|
|
@ -157,13 +126,8 @@
|
|||
}
|
||||
|
||||
.sampleCard {
|
||||
/* Your existing styles for sampleCard */
|
||||
/* ... */
|
||||
|
||||
/* Add this to specify the border style */
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
/* Optional: add a pointer cursor to indicate clickability */
|
||||
}
|
||||
|
||||
.sampleCard1 {
|
||||
|
|
@ -172,7 +136,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 16px;
|
||||
margin-top: 2px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: 400;
|
||||
|
||||
|
|
@ -192,14 +156,6 @@
|
|||
|
||||
.sampleCard-border {
|
||||
border-color: black;
|
||||
/* Specify the border color you want */
|
||||
}
|
||||
|
||||
.CategoryHorizontal-icon {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.uom-container .ant-select {
|
||||
|
|
@ -236,9 +192,6 @@
|
|||
width: 110px !important;
|
||||
}
|
||||
|
||||
// .ant-input-group-wrapper {
|
||||
// width: 70% !important;
|
||||
// }
|
||||
.quantity-amt .example {
|
||||
width: auto !important;
|
||||
}
|
||||
|
|
@ -279,12 +232,8 @@
|
|||
|
||||
.CategoryHorizontal-scroll-container {
|
||||
overflow-y: auto !important;
|
||||
/* Add a vertical scrollbar when content overflows */
|
||||
max-height: 300px;
|
||||
/* Set a maximum height for the container */
|
||||
|
||||
display: flex;
|
||||
// flex-direction: row;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -304,18 +253,12 @@
|
|||
}
|
||||
|
||||
.bill-inother {
|
||||
// flex-direction: column;
|
||||
column-gap: 1rem !important;
|
||||
flex-wrap: wrap;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
//////////////////
|
||||
///
|
||||
/// new
|
||||
///
|
||||
|
||||
.CategoryHorizontalNew {
|
||||
padding: 1.5rem;
|
||||
font-family: "Inter", sans-serif;
|
||||
|
|
@ -418,13 +361,8 @@
|
|||
font-size: 15px;
|
||||
line-height: 1.25rem;
|
||||
color: #4b5563;
|
||||
// font-family: "Inter", sans-serif !important;
|
||||
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
// -webkit-text-stroke-width: 0.2px;
|
||||
width: max-content;
|
||||
// min-width: 150px;
|
||||
// max-width: 250px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
|
|
@ -461,7 +399,6 @@
|
|||
align-items: center;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
// padding: 2px 16px;
|
||||
gap: 10px;
|
||||
animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transform-origin: top;
|
||||
|
|
@ -522,7 +459,6 @@
|
|||
.subcatNewLayout {
|
||||
padding: 1rem 1.5rem;
|
||||
height: 100%;
|
||||
// background-color: #f9fafb;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
|
|
@ -530,7 +466,6 @@
|
|||
color: #4b5563;
|
||||
font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
width: max-content;
|
||||
// min-width: 150px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
transition: all 0.2s ease;
|
||||
|
|
|
|||
|
|
@ -562,7 +562,7 @@
|
|||
padding: 10px 30px 10px 30px;
|
||||
}
|
||||
.search-icon {
|
||||
top: 53%;
|
||||
top: 43%;
|
||||
}
|
||||
}
|
||||
.BsNavbar1FullScreen {
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
.SubCategoryVertical-sampleCard {
|
||||
min-width: max-content;
|
||||
flex-grow: 1;
|
||||
// flex-grow: 1;
|
||||
}
|
||||
|
||||
.SubCategoryVertical-sub-samplecard p {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 3rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.BSLayout1Standard {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
@ -16,10 +18,12 @@
|
|||
@media (max-width: 768px) {
|
||||
top: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 500px) {
|
||||
top: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.layout1-card-content {
|
||||
height: 100% !important;
|
||||
}
|
||||
|
|
@ -34,11 +38,11 @@ body {
|
|||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
.BSLayout1 {
|
||||
.BSLayout1Main {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 2rem;
|
||||
height: 99vh;
|
||||
top: 34px;
|
||||
height: 98vh;
|
||||
}
|
||||
|
||||
.BSBillingTable-oCbtn {
|
||||
|
|
@ -49,11 +53,13 @@ body {
|
|||
top: 5rem;
|
||||
}
|
||||
|
||||
.BSCategory1-Contentcont {
|
||||
.BSCategoryCardDiv {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0rem 0rem;
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
}
|
||||
|
||||
.BSCategory1-Cardcont {
|
||||
|
|
@ -62,18 +68,28 @@ body {
|
|||
height: 85vh;
|
||||
}
|
||||
|
||||
.BSLayout1-ContentDiv {
|
||||
.BSLayout1Master {
|
||||
display: flex;
|
||||
height: 95vh;
|
||||
height: 98vh;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
overflow: hidden;
|
||||
gap: 6px;
|
||||
padding: 3px 5px;
|
||||
|
||||
.BsTable2-Master {
|
||||
height: 84vh !important;
|
||||
}
|
||||
|
||||
.BSTable3_overall {
|
||||
height: 84vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
.BSCategory1-tablecont {
|
||||
width: 430px;
|
||||
height: clamp(100vh, 51rem, 45vh);
|
||||
margin: 0.5rem 0.3rem 1rem 0.3rem;
|
||||
margin: 0.1rem 0.1rem;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -95,7 +111,7 @@ body {
|
|||
column-gap: 0 !important;
|
||||
}
|
||||
|
||||
.BSLayout1 {
|
||||
.BSLayout1Main {
|
||||
height: 88vh !important;
|
||||
}
|
||||
|
||||
|
|
@ -216,7 +232,7 @@ body {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-search .ant-input-affix-wrapper > input.ant-input {
|
||||
.custom-search .ant-input-affix-wrapper>input.ant-input {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
|
@ -230,22 +246,27 @@ body {
|
|||
white-space: nowrap;
|
||||
margin-left: 8rem;
|
||||
font-weight: 400;
|
||||
|
||||
@media (max-width: 500px) {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
|
@ -271,13 +292,15 @@ body {
|
|||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.BookingCloseButton {
|
||||
background: red;
|
||||
background: #f70000;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.BookingOpenButton {
|
||||
background: #52c41a;
|
||||
color: white;
|
||||
|
|
@ -285,6 +308,7 @@ body {
|
|||
padding: 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.BookingCloseModal {
|
||||
.ant-modal .ant-modal-content {
|
||||
padding: 10px 10px !important;
|
||||
|
|
@ -295,4 +319,4 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
}
|
||||
|
|
@ -90,6 +90,7 @@ body {
|
|||
overflow: hidden;
|
||||
justify-content: space-between;
|
||||
background-color: #f1f5f9;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 85vh;
|
||||
|
|
|
|||
|
|
@ -25,12 +25,14 @@
|
|||
display: flex;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.BSlayout_subdiv {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
|
|
@ -43,7 +45,7 @@
|
|||
}
|
||||
|
||||
.Bslayout4_table {
|
||||
width: 426px !important;
|
||||
width: 425px !important;
|
||||
height: clamp(68vh, 71rem, 50vh);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
|
@ -264,3 +266,19 @@
|
|||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bslayout4Cat5Flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 68%;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.CategoryHorizontalNew {
|
||||
width: 100%;
|
||||
}
|
||||
.Bslayout4_card {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,11 +18,27 @@
|
|||
.BSCategory5-Contentcont {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.BSlayout5Cat5Flex {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 70%;
|
||||
flex-direction: column;
|
||||
@media (max-width: 768px) {
|
||||
width: 100%;
|
||||
}
|
||||
.CategoryHorizontalNew-scroll-container {
|
||||
width: 97%;
|
||||
}
|
||||
}
|
||||
|
||||
.BSCategory5-tablecont {
|
||||
width: 430px;
|
||||
height: clamp(73vh, 71rem, 50vh);
|
||||
height: clamp(85vh, 71rem, 50vh);
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (min-width: 500px) and (max-width: 768px) {
|
||||
|
|
@ -34,7 +50,6 @@
|
|||
width: 0px !important;
|
||||
z-index: 3;
|
||||
}
|
||||
//nk
|
||||
.BSLayout5-Master .BsTable2-Master {
|
||||
height: 0 !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue