diff --git a/src/Features/BookingScreen/BookingData/BookingData.js b/src/Features/BookingScreen/BookingData/BookingData.js
index 7f368ad..1e5ec99 100644
--- a/src/Features/BookingScreen/BookingData/BookingData.js
+++ b/src/Features/BookingScreen/BookingData/BookingData.js
@@ -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) =>
diff --git a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx
index 29d0a7d..459e1ad 100644
--- a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx
+++ b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx
@@ -1,13 +1,8 @@
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,
- SearchOutlined,
- ArrowRightOutlined,
-} from '@ant-design/icons';
import '../../../../Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss';
+import '../../../../Styles/BookingScreen/Components/BSCategories/BSCategoryVertical.scss';
import {
SelectedGlobalCatgColorDetail,
SelectedGlobalCatgFont,
@@ -21,7 +16,6 @@ import {
GlobalCategorieData,
changeProductCategorie,
getSelectedFavItems,
- changeothersdata,
GlobalFocusCatCard,
ChangeFocusCatCard,
changeProductSubCategorieProdCatfun,
@@ -49,23 +43,8 @@ import {
GlobalProductCardTrigger,
} 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.jsx';
-import { DropDowns } from '../../../../Components/Forms/DropDown.jsx';
-import { InputField } from '../../../../Components/Forms/InputField.jsx';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
-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';
@@ -73,9 +52,11 @@ import { ApplicationPreferences } from '../../../../Features/BrachLogin/BranchLo
import { IoMdHeart } from 'react-icons/io';
import StandardSubcategory from '../BSSubCategories/StandardSubcategory.jsx';
import { useDateStore } from '../../../../Features/BookingScreen/BookingData/DateStore.js';
+import OtherItemsModal from './OtherItemsModal.jsx';
function BSCategoryHorizontal(props) {
- const formRef = useRef(null);
+ const { categoryType = 'horizontal' } = props;
+
const dispatch = useDispatch();
const CardData = useSelector(GlobalItemCard);
const FavData = useSelector(GlobalSelectedDatas);
@@ -116,26 +97,14 @@ function BSCategoryHorizontal(props) {
);
const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(null);
+ const [startY, setStartY] = useState(null);
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 [width, setWidth] = useState(window.innerWidth);
+ const [height, setHeight] = useState(window.innerHeight);
const [isSortClicked, setIsSortClicked] = useState(false);
const [ComboListdata, setComboListdata] = useState([]);
const Comboglobal = useSelector(GlobalCombosearch);
@@ -144,32 +113,40 @@ function BSCategoryHorizontal(props) {
const AppId = SessionData?.AppId;
const CompId = SessionData?.CompId;
const BranchId = SessionData?.BranchId;
- const UserId = SessionData?.UserId;
const [showLeftButton, setShowLeftButton] = useState(false);
const [showRightButton, setShowRightButton] = useState(false);
+ const [showUpButton, setShowUpButton] = useState(false);
+ const [showDownButton, setShowDownButton] = useState(false);
const Isdragging = useSelector(Globaldragging);
const draggingComponent = useSelector(GlobaldraggingComponent);
const alphabeticFormat = useSelector(GlobalisAlphabeticFormat);
const [subCat, setSubCat] = useState(false);
const [isClosing, setIsClosing] = useState(false);
console.log(subCat, 'subCat');
+
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 handleScroll = () => {
+ if (categoryType === 'horizontal') {
+ setShowLeftButton(container.scrollLeft > 0);
+ setShowRightButton(
+ container.scrollLeft + container.clientWidth < container.scrollWidth
+ );
+ } else {
+ setShowUpButton(container.scrollTop > 0);
+ setShowDownButton(
+ container.scrollTop + container.clientHeight < container.scrollHeight
+ );
+ }
+ };
+
+ container.addEventListener('scroll', handleScroll);
+ handleScroll(); // initial check
+
+ return () => container.removeEventListener('scroll', handleScroll);
+ }, [categoryType]);
const handleScrollClickLeft = (
scrollAmountX,
@@ -225,6 +202,59 @@ function BSCategoryHorizontal(props) {
}
};
+ const handleScrollClickUp = (
+ scrollAmountX,
+ scrollAmountY,
+ steps = 25,
+ duration = 200
+ ) => {
+ const container = containerRef.current;
+ scrollUp();
+ if (container) {
+ const scrollStepX = scrollAmountX / steps;
+ const scrollStepY = scrollAmountY / steps;
+
+ const animateScrollStep = (currentStep) => {
+ if (currentStep <= steps) {
+ container.scrollTop += scrollStepY;
+ container.scrollLeft += scrollStepX;
+ setTimeout(() => {
+ animateScrollStep(currentStep + 1);
+ }, duration / steps);
+ }
+ };
+
+ animateScrollStep(1);
+ }
+ };
+
+ const handleScrollClickDown = (
+ scrollAmountX,
+ scrollAmountY,
+ steps = 25,
+ duration = 200
+ ) => {
+ scrollDown();
+ const container = containerRef.current;
+
+ if (container) {
+ const scrollStepX = scrollAmountX / steps;
+ const scrollStepY = scrollAmountY / steps;
+
+ const animateScrollStep = (currentStep) => {
+ if (currentStep <= steps) {
+ container.scrollTop += scrollStepY;
+ container.scrollLeft += scrollStepX;
+ setTimeout(() => {
+ animateScrollStep(currentStep + 1);
+ }, duration / steps);
+ }
+ };
+
+ animateScrollStep(1);
+ }
+ };
+
useEffect(() => {
Combodata();
const container = containerRef.current;
@@ -268,18 +298,12 @@ function BSCategoryHorizontal(props) {
useEffect(() => {
function handleResize() {
- setWidth(window.innerWidth);
+ setHeight(window.innerHeight);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
- }, [width]);
- useEffect(() => {
- function handleResize() {
- setWidth(window.innerWidth);
- }
- window.addEventListener('resize', handleResize);
- return () => window.removeEventListener('resize', handleResize);
- }, [categoryData]);
+ }, [height, categoryData]);
+
const Combodata = async () => {
let data = {
AppId: AppId,
@@ -327,27 +351,6 @@ function BSCategoryHorizontal(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);
- 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 easeLinear = (t) => {
return t;
@@ -407,21 +410,75 @@ function BSCategoryHorizontal(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 handleMouseDown = (e) => {
e.preventDefault();
setIsDragging(true);
- setStartX(e.clientX);
+
+ if (categoryType === 'horizontal') {
+ setStartX(e.clientX);
+ } else {
+ setStartY(e.clientY);
+ }
};
const handleMouseMove = (e) => {
if (!isDragging) return;
- const scrollContainer = scrollContainerRef.current;
- if (!scrollContainer) return;
+ const container = scrollContainerRef.current;
+ if (!container) return;
- const deltaX = e.clientX - startX;
- scrollContainer.scrollLeft -= deltaX;
- setStartX(e.clientX);
+ if (categoryType === 'horizontal') {
+ const deltaX = e.clientX - startX;
+ container.scrollLeft -= deltaX;
+ setStartX(e.clientX);
+ } else {
+ const deltaY = startY - e.clientY;
+ container.scrollTop += deltaY;
+ setStartY(e.clientY);
+ }
+ };
+
+ const handleTouchStart = (e) => {
+ setIsDragging(true);
+
+ if (categoryType === 'horizontal') {
+ setStartX(e.touches[0].clientX);
+ } else {
+ setStartY(e.touches[0].clientY);
+ }
+ };
+
+ const handleTouchMove = (e) => {
+ if (!isDragging) return;
+
+ const container = scrollContainerRef.current;
+ if (!container) return;
+
+ if (categoryType === 'horizontal') {
+ const deltaX = e.touches[0].clientX - startX;
+ container.scrollLeft -= deltaX;
+ setStartX(e.touches[0].clientX);
+ } else {
+ const deltaY = startY - e.touches[0].clientY;
+ container.scrollTop += deltaY;
+ setStartY(e.touches[0].clientY);
+ }
+
+ e.preventDefault();
};
const handleMouseUp = () => {
@@ -481,6 +538,7 @@ function BSCategoryHorizontal(props) {
}
}
}, [SubcategorieData, templateData]);
+
useEffect(() => {
if (typeof searchData === 'string' && categoryData?.length > 0) {
const searchTerm = searchData?.trim()?.toLowerCase();
@@ -498,6 +556,7 @@ function BSCategoryHorizontal(props) {
setIndexVal(0);
}
}, [searchData, categoryData]);
+
const handleClick = async (e, ProdCat, index) => {
let data1 = {
compId: CompId,
@@ -549,15 +608,16 @@ function BSCategoryHorizontal(props) {
AppId: AppId,
...(AvailableDate && selectedDate
? {
- fromDate: selectedDate?.[0],
- toDate: selectedDate?.[1],
- }
+ fromDate: selectedDate?.[0],
+ toDate: selectedDate?.[1],
+ }
: {}),
};
// await dispatch(getSelectedFavItems(data1));
await dispatch(ChangeFocusCatCard(!FocusStatus));
};
+
const handleClickOtherItems = async () => {
dispatch(ChangedraggingComponent(null));
dispatch(Changedragging(false));
@@ -566,8 +626,6 @@ function BSCategoryHorizontal(props) {
};
const handleClick2 = async () => {
- getTaxname();
- getUom();
setIndexVal(-1);
setAccessOther(true);
setIsModalOpen(true);
@@ -575,11 +633,13 @@ function BSCategoryHorizontal(props) {
let data = true;
await dispatch(changeAccessForOthers(data));
};
+
useEffect(() => {
if (AppId && CompId && BranchId && !sportsAppPreference) {
getselectCards();
}
}, [AppId, CompId, BranchId]);
+
const getselectCards = async () => {
let data = {
CompId: CompId,
@@ -587,9 +647,9 @@ function BSCategoryHorizontal(props) {
AppId: AppId,
...(AvailableDate && selectedDate
? {
- fromDate: selectedDate?.[0],
- toDate: selectedDate?.[1],
- }
+ fromDate: selectedDate?.[0],
+ toDate: selectedDate?.[1],
+ }
: {}),
};
let res = await dispatch(getSelectedFavItems(data)).unwrap();
@@ -598,20 +658,6 @@ function BSCategoryHorizontal(props) {
}
};
- const handleTouchStart = (e) => {
- setIsDragging(true);
- setStartX(e.touches[0].clientX);
- };
- const handleTouchMove = (e) => {
- if (!isDragging) return;
-
- const scrollContainer = scrollContainerRef.current;
- if (!scrollContainer) return;
-
- const deltaX = e.touches[0].clientX - startX;
- scrollContainer.scrollLeft -= deltaX;
- setStartX(e.touches[0].clientX);
- };
const handleTouchEnd = () => {
setIsDragging(false);
};
@@ -621,299 +667,31 @@ function BSCategoryHorizontal(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();
-
- // setTableuomname(response?.data?.data);
- // let UomId = response?.data?.data?.filter(
- // (item) => item.ConfigName?.toLowerCase() === 'pcs'
- // )?.[0]?.['ConfigId'];
- // formRef.current?.setFieldsValue({ UOM: UomId });
- // setselectedUom(UomId);
-
- 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) => {
- const pattern = /(.+?) \(\d*[^\d]+\)/;
- const matches = selectedprod.match(pattern);
-
- let postData = {};
-
- 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(() => {
const container = scrollContainerRef.current;
if (!container) return;
const handleWheel = (e) => {
- container.scrollLeft += e.deltaX;
+ if (categoryType === 'horizontal') {
+ container.scrollLeft += e.deltaY || e.deltaX;
+ } else {
+ container.scrollTop += e.deltaY;
+ }
+
e.preventDefault();
};
- container.addEventListener('wheel', handleWheel);
+ container.addEventListener('wheel', handleWheel, { passive: false });
return () => {
container.removeEventListener('wheel', handleWheel);
};
- }, [scrollContainerRef]);
+ }, [scrollContainerRef, categoryType]);
useEffect(() => {
// Accessing the DOM elements
@@ -932,21 +710,25 @@ function BSCategoryHorizontal(props) {
useEffect(() => {
const container = scrollContainerRef?.current;
+ if (!container) return;
- if (scrollContainerRef?.current?.scrollLeft == 0) {
- setShowLeftButton(false);
+ const {
+ scrollLeft,
+ scrollTop,
+ scrollWidth,
+ scrollHeight,
+ clientWidth,
+ clientHeight,
+ } = container;
+
+ if (categoryType === 'horizontal') {
+ setShowLeftButton(scrollLeft > 0);
+ setShowRightButton(scrollLeft + clientWidth < scrollWidth);
} else {
- setShowLeftButton(true);
+ setShowUpButton(scrollTop > 0);
+ setShowDownButton(scrollTop + clientHeight < scrollHeight);
}
- if (
- container?.scrollLeft + container?.clientWidth ===
- container?.scrollWidth
- ) {
- setShowRightButton(false);
- } else {
- setShowRightButton(true);
- }
- }, [count]);
+ }, [count, categoryType]);
const lightenColor = (color, percent) => {
let r = parseInt(color.substring(1, 3), 16);
@@ -961,6 +743,7 @@ function BSCategoryHorizontal(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
@@ -1004,7 +787,11 @@ function BSCategoryHorizontal(props) {
<>
{templateData?.BookingCategory?.[0] != 'Category5' ? (
@@ -1022,9 +809,10 @@ function BSCategoryHorizontal(props) {
display: 'flex',
alignItems: 'center',
padding: '0 0.5rem',
+ gap: '4px',
}}
>
- {showLeftButton && (
+ {showLeftButton && categoryType !== 'vertical' && (
handleScrollClickLeft(-50, 0)}
@@ -1032,6 +820,14 @@ function BSCategoryHorizontal(props) {
◄
)}
+ {showUpButton && categoryType === 'vertical' && (
+
handleScrollClickUp(-50, 0)}
+ >
+ ▲
+
+ )}
{/* writed by sree */}
+
+ {showDownButton && categoryType === 'vertical' && (
+
handleScrollClickDown(50, 0)}
+ >
+ ▼
+
+ )}
{item.SmallIcon && categoryFunction?.Image && (
{(provided) => (
{categoryData?.map((item, index) => (
@@ -1268,11 +1088,11 @@ function BSCategoryHorizontal(props) {
? index !== indexval
? SelectedCatgColor?.['BackgroundColor']
: lightenColor(
- SelectedCatgColor?.[
- 'BackgroundColor'
- ],
- 0.4
- )
+ SelectedCatgColor?.[
+ 'BackgroundColor'
+ ],
+ 0.4
+ )
: SelectedCatgColor?.['BackgroundColor'],
padding: padding,
border: '1px solid',
@@ -1280,18 +1100,18 @@ function BSCategoryHorizontal(props) {
index !== indexval
? SelectedCatgColor?.['BackgroundColor']
: SelectedCatgColor?.['BackgroundColor'] ===
- '#ffffff'
+ '#ffffff'
? '#000000'
: SelectedCatgColor?.[
- 'BackgroundColor'
- ] === '#000000'
+ 'BackgroundColor'
+ ] === '#000000'
? '#ffffff'
: darkenColor(
- SelectedCatgColor?.[
- 'BackgroundColor'
- ],
- 70
- ),
+ SelectedCatgColor?.[
+ 'BackgroundColor'
+ ],
+ 70
+ ),
userSelect: 'none',
minWidth: 'max-content', // set a width if needed
}}
@@ -1302,7 +1122,11 @@ function BSCategoryHorizontal(props) {
>
{item.SmallIcon && categoryFunction?.Image && (
![]()
- {showRightButton && (
+ {showRightButton && categoryType !== 'vertical' && (
handleScrollClickRight(5, 5)}
@@ -1442,15 +1266,6 @@ function BSCategoryHorizontal(props) {
) : (
<>
- {/* Back Navigation Icon - Only show if there's more data */}
- {/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
-
handleScrollClickLeft(-300, 0)}
- >
- ◄
-
- )} */}
{!subCat && (
- {/* {categoryFunction?.Image &&

} */}
)}
- {/* Forward Navigation Icon - Only show if there's more data */}
- {/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
-
handleScrollClickRight(300, 0)}
- >
- ►
-
- )} */}
- {/*
*/}
+
{subCat && (
<>
>
)}
- {isModalOpen && (
-
-
-
-
- ({
- value: option.ConfigId,
- label: option.ConfigName,
- }))}
- placeholder="ConfigType"
- label={}
- optionsNames={{ value: "TypeId", label: "TypeName" }}
- className="field-DropDown"
- onChangeFunction={(selectedValues) =>
- onChangeuomFunction(selectedValues)
- }
- valueData={selectedUom}
- disabled={add || !EditState ? false : true}
- />
- */}
-
-
-
{
- 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();
- }
- },
- },
- ]}
- >
- Quantity}
- valueData={defaultQuantity}
- autocomplete="off"
- onChange={(e) =>
- handleValuesChange({
- ...formRef.current.getFieldsValue(),
- Quantity: e.target.value,
- })
- }
- inputMode="decimal"
- onInput={(e) => {
- let cleanedValue = e.target.value.replace(
- /[^0-9.]/g,
- ''
- ); // Remove invalid characters
- const parts = cleanedValue.split('.');
-
- if (cleanedValue.startsWith('.')) {
- cleanedValue = '0' + cleanedValue;
- }
-
- e.target.value =
- parts.length > 2
- ? `${parts[0]}.${parts.slice(1).join('')}`
- : cleanedValue;
- }}
- isOnChange={defaultQuantity ? true : false}
- />
-
-
-
{
- 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();
- },
- },
- ]}
- >
-
- Amount / Per Item
-
- }
- autocomplete="off"
- onChange={(e) =>
- handleValuesChange({
- ...formRef.current.getFieldsValue(),
- MRP: e.target.value,
- })
- }
- isOnChange={EditState ? true : false}
- inputMode="decimal"
- onInput={(e) => {
- let cleanedValue = e.target.value.replace(
- /[^0-9.]/g,
- ''
- ); // Remove invalid characters
- const parts = cleanedValue.split('.');
-
- if (cleanedValue.startsWith('.')) {
- cleanedValue = '0' + cleanedValue;
- }
-
- e.target.value =
- parts.length > 2
- ? `${parts[0]}.${parts.slice(1).join('')}`
- : cleanedValue;
- }}
- // disabled={!!EditState}
- />
-
-
-
-
-
Bill Amount {isNaN(billAmount) ? 0 : billAmount}
-
Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}
-
Total Amount {isNaN(totalAmount) ? 0 : totalAmount}
-
-
- }
- onClick={() => onFinish()}
- />
-
-
-
- >
- }
- handleCancel={handleCancel}
- />
- )}
+
>
);
}
diff --git a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx
index 355079d..e76cd88 100644
--- a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx
+++ b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryVertical.jsx
@@ -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 && (
-
-
-
- >
- }
- handleCancel={handleCancel}
- />
- )}
+ {isModalOpen && }
{ },
+ 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 (
+ <>
+
+
+
+
+ >
+ }
+ handleCancel={handleCancel}
+ />
+ >
+ )
+};
+
+export default OtherItemsModal;
\ No newline at end of file
diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
index dbdfb99..e7bf7eb 100644
--- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
+++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx
@@ -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);
diff --git a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx
index 15e70ef..6a009a2 100644
--- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx
+++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx
@@ -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'
) && (
-
-
-
- )}
+
+
+
+ )}
{FeatureAddonData?.FeatureDtls?.find(
(item) => item?.FeatureAddonName?.toLowerCase() === 'preorder'
) && (
-
-
-
- {
- openPreOrder();
- }}
- HandleClose={preOrderHandleclose}
- />
-
-
-
- )}
+
+
+
+ {
+ openPreOrder();
+ }}
+ HandleClose={preOrderHandleclose}
+ />
+
+
+
+ )}
>
)}
{preOrderOpen && (
@@ -793,16 +794,16 @@ const BSNavbar3 = ({ optionNames }) => {
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'customer display'
) && (
-
-
-
-
-
- )}
+
+
+
+
+
+ )}
{reprintOption && (
{
pointerEvents: orderType === 'Failed' ? 'none' : 'auto',
}}
>
-
{}}>
+
diff --git a/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx b/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
index 5338f2b..3b16d34 100644
--- a/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
+++ b/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
@@ -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 (
- <>
+
{!globalAccessForOthers && !CardAccess && (
-
- {/* {isRightDisabled &&
} */}
-
-
- {showLeftButton && (
-
handleScrollClickLeft(-50, 0)}
- >
- ◄
-
- )}
-
+ <>
+ {!isVertical ? (
+
+ {showLeftButton && (
+
handleScrollClickLeft(-50, 0)}
+ >
+ ◄
+
+ )}
+
+ ) : (
+
+ {showUpButton && (
+
+ )}
+ {showDownButton && (
+
+ )}
+
+ )}
{draggingComponent !== 'sub-category' &&
categoryData?.map((eachData, index) => (
handleClick(e, eachData.ProdSubCat, index + 1)
}
>
-
-
- {eachData.ProdSubCatName
- ? eachData.ProdSubCatName
- : 'General'}
-
-
+
+
+ {eachData.ProdSubCatName || 'General'}
+
+
+
+ }
))}
{draggingComponent == 'sub-category' && (
-
-
+
+
{(provided) => (
{categoryData?.map((eachData, index) => (
handleClick(e, eachData.ProdSubCat, index + 1)
}
>
-
-
- {eachData.ProdSubCatName
- ? eachData.ProdSubCatName
- : 'General'}
-
-
+
+ {eachData.ProdSubCatName || 'General'}
+
+
+
)}
@@ -625,21 +728,24 @@ function BSSubCategoryHorizontal(props) {
)}
-
- {showRightButton && (
-
handleScrollClickRight(50, 0)}
- >
- ►
-
- )}
-
-
+
+ {!isVertical && (
+
+ {showRightButton && (
+
handleScrollClickRight(50, 0)}
+ >
+ ►
+
+ )}
+
+ )}
+ >
)}
- >
+
);
}
diff --git a/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx b/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx
index 2d1fdc9..8c8c289 100644
--- a/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx
+++ b/src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx
@@ -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);
diff --git a/src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx b/src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx
index 22d250e..74f27fd 100644
--- a/src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx
+++ b/src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx
@@ -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],
+ }
+ : {}),
+ };
-
-
-
- {
- 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 (
-
handleSubCatClick(e, item?.ProdSubCat, index)}
- >
- {displayName}
-
- );
- })}
-
-
-
- )
- }
- export default StandardSubcategory;
\ No newline at end of file
+ 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 (
+
+
+
+ {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 (
+
handleSubCatClick(e, item?.ProdSubCat, index)}
+ >
+ {displayName}
+
+ );
+ })}
+
+
+ );
+};
+export default StandardSubcategory;
diff --git a/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx b/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx
index 376df17..93e25fd 100644
--- a/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx
+++ b/src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx
@@ -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) => {
)}
- {ShowDropDownData?.find(
- (a) => a.OptionName === 'SubCategory'
- ) && (
-
-
Sub Category
+ {selectedCategoryName !== 'Category5' &&
+ ShowDropDownData?.find(
+ (a) => a.OptionName === 'SubCategory'
+ ) && (
+
+
+ Sub Category
+
-
- ({
- value: option.ComponentId,
- label: option.ComponentName,
- }))}
- label="Sub Category"
- onChangeFunction={selectSubCategory}
- className="field-DropDown-Selection"
- isOnchanges={SelectedSubCategoryId ? true : false}
- valueData={SelectedSubCategoryId}
- />
-
-
- )}
+
+ ({
+ value: option.ComponentId,
+ label: option.ComponentName,
+ }))}
+ label="Sub Category"
+ onChangeFunction={selectSubCategory}
+ className="field-DropDown-Selection"
+ isOnchanges={SelectedSubCategoryId ? true : false}
+ valueData={SelectedSubCategoryId}
+ />
+
+
+ )}
{ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
Card
@@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
)}
- {ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
+ {selectedCategoryName !== 'Category5' &&
+ ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
SubCategoryCheckList?.length > 0 && (
diff --git a/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx b/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx
index b9b4fbc..765bde3 100644
--- a/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx
+++ b/src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx
@@ -83,22 +83,25 @@ const PreviewLayout3 = (props) => {
)}
/>
-
+ {Preview3Data?.BookingSubCategory?.[0] !== undefined && (
+
+ )}
diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
index 849e2b3..b0edb0e 100644
--- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
+++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.jsx
@@ -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 = () => {
{
>
Table
+ ComponentSelect('Preference')}
+ >
+ Preference
+
-
+
{selectedComponent == 'Payment' && (
@@ -69,6 +77,10 @@ const AllSalesPageSettings = () => {
{selectedComponent === 'Table' && (
)}
+ {selectedComponent === 'Preference' && (
+
+ )}
+
diff --git a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
index 06f24ca..097cb91 100644
--- a/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
+++ b/src/Pages/BookingScreen/Components/UtillComponents/AllSalesPageSettings.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/Pages/Preference/PreferenceList.jsx b/src/Pages/Preference/PreferenceList.jsx
index 318a887..3df82f5 100644
--- a/src/Pages/Preference/PreferenceList.jsx
+++ b/src/Pages/Preference/PreferenceList.jsx
@@ -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 = () => {
/>
-
-
+
+
handleMenuClick(e, 'general')}
style={{
@@ -586,25 +592,25 @@ const PreferenceList = () => {
{(allSettingsMap['onlineindividualslots'] !== undefined ||
allSettingsMap['allow individual booking'] !== undefined ||
allSettingsMap['single booking only'] !== undefined) && (
-
-
- {allSettingsMap['allow individual booking'] !==
- undefined && (
-
- Allow online individual booking
-
- )}
- {allSettingsMap['single booking only'] !== undefined && (
-
- Allow single booking Only
-
- )}
-
-
- )}
+
+
+ {allSettingsMap['allow individual booking'] !==
+ undefined && (
+
+ Allow online individual booking
+
+ )}
+ {allSettingsMap['single booking only'] !== undefined && (
+
+ Allow single booking Only
+
+ )}
+
+
+ )}
{featureaddDetails?.find(
(item) =>
item?.FeatureAddonName?.toLowerCase() === 'kiosk sales'
@@ -734,23 +740,23 @@ const PreferenceList = () => {
{(allSettingsMap['onbilltime'] !== undefined ||
allSettingsMap['1daybefore'] !== undefined ||
allSettingsMap['1hourbefore'] !== undefined) && (
-
-
- {allSettingsMap['onbilltime'] !== undefined && (
- On Bill Time
- )}
- {allSettingsMap['1daybefore'] !== undefined && (
- 1 Day Before
- )}
- {allSettingsMap['1hourbefore'] !== undefined && (
- 1 Hour Before
- )}
-
-
- )}
+
+
+ {allSettingsMap['onbilltime'] !== undefined && (
+ On Bill Time
+ )}
+ {allSettingsMap['1daybefore'] !== undefined && (
+ 1 Day Before
+ )}
+ {allSettingsMap['1hourbefore'] !== undefined && (
+ 1 Hour Before
+ )}
+
+
+ )}
{
{(allSettingsMap['offer'] !== undefined ||
allSettingsMap['parking'] !== undefined) && (
-
-
- {allSettingsMap['parking'] !== undefined && (
- Parking
- )}
- {allSettingsMap['offer'] !== undefined && (
- Offer
- )}
-
-
- )}
+
+
+ {allSettingsMap['parking'] !== undefined && (
+ Parking
+ )}
+ {allSettingsMap['offer'] !== undefined && (
+ Offer
+ )}
+
+
+ )}
{((allSettingsMap['dinein'] !== undefined && dinePreference) ||
allSettingsMap['estimation'] !== undefined) && (
-
-
- {allSettingsMap['dinein'] !== undefined &&
- dinePreference && (
- Dine-In
+
+
+ {allSettingsMap['dinein'] !== undefined &&
+ dinePreference && (
+ Dine-In
+ )}
+ {allSettingsMap['estimation'] !== undefined && (
+ Estimation
)}
- {allSettingsMap['estimation'] !== undefined && (
- Estimation
- )}
-
-
- )}
+
+
+ )}
{renderCheckbox('stockselection', 'Enable stock selection?')}
{renderCheckbox('weightasquantity', 'Use Weight as Quantity?')}
@@ -896,72 +902,72 @@ const PreferenceList = () => {
{(allSettingsMap['overalllimit'] !== undefined ||
allSettingsMap['itemwiselimit'] !== undefined) && (
- <>
-
- Yes
-
+ <>
+
+ Yes
+
-
- prev.quantityrestriction !== curr.quantityrestriction
- }
- >
- {({ getFieldValue }) =>
- getFieldValue('quantityrestriction') && (
- <>
-
-
- formRef.current?.setFieldsValue({
- maxquantity: undefined,
- })
- }
+
+ prev.quantityrestriction !== curr.quantityrestriction
+ }
+ >
+ {({ getFieldValue }) =>
+ getFieldValue('quantityrestriction') && (
+ <>
+
- {allSettingsMap['overalllimit'] !== undefined && (
-
- Overall Order Quantity
-
- )}
- {allSettingsMap['itemwiselimit'] !==
- undefined && (
-
- Item-wise Quantity
-
- )}
-
-
+
+ formRef.current?.setFieldsValue({
+ maxquantity: undefined,
+ })
+ }
+ >
+ {allSettingsMap['overalllimit'] !== undefined && (
+
+ Overall Order Quantity
+
+ )}
+ {allSettingsMap['itemwiselimit'] !==
+ undefined && (
+
+ Item-wise Quantity
+
+ )}
+
+
-
-
-
- >
- )
- }
-
- >
- )}
+
+
+
+ >
+ )
+ }
+
+ >
+ )}
@@ -984,46 +990,46 @@ const PreferenceList = () => {
{['whatsapp', 'sms', 'email'].some(
(k) => allSettingsMap[k] !== undefined
) && (
- <>
-
-
- Print Bill
- Send PDF
-
-
+ <>
+
+
+ Print Bill
+ Send PDF
+
+
-
- prev.billOption !== curr.billOption
- }
- >
- {({ getFieldValue }) =>
- getFieldValue('billOption') === 'pdf' && (
-
-
- {allSettingsMap['whatsapp'] !== undefined && (
- WhatsApp
- )}
- {allSettingsMap['email'] !== undefined && (
- Email
- )}
- {allSettingsMap['sms'] !== undefined && (
- SMS
- )}
-
-
- )
- }
-
- >
- )}
+
+ prev.billOption !== curr.billOption
+ }
+ >
+ {({ getFieldValue }) =>
+ getFieldValue('billOption') === 'pdf' && (
+
+
+ {allSettingsMap['whatsapp'] !== undefined && (
+ WhatsApp
+ )}
+ {allSettingsMap['email'] !== undefined && (
+ Email
+ )}
+ {allSettingsMap['sms'] !== undefined && (
+ SMS
+ )}
+
+
+ )
+ }
+
+ >
+ )}
{renderCheckbox(
'tokenonly',
@@ -1053,25 +1059,25 @@ const PreferenceList = () => {
{['printuom', 'printlogo', 'printgreetings'].some(
(k) => allSettingsMap[k] !== undefined
) && (
-
-
- {allSettingsMap['printuom'] !== undefined && (
-
- Unit of Measure (UOM)
-
- )}
- {allSettingsMap['printlogo'] !== undefined && (
- Branch Logo
- )}
- {allSettingsMap['printgreetings'] !== undefined && (
- Greetings
- )}
-
-
- )}
+
+
+ {allSettingsMap['printuom'] !== undefined && (
+
+ Unit of Measure (UOM)
+
+ )}
+ {allSettingsMap['printlogo'] !== undefined && (
+ Branch Logo
+ )}
+ {allSettingsMap['printgreetings'] !== undefined && (
+ Greetings
+ )}
+
+
+ )}
{renderCheckbox(
'mobilea4',
@@ -1079,24 +1085,24 @@ const PreferenceList = () => {
)}
{(allSettingsMap['estimateprintheader'] !== undefined ||
allSettingsMap['estimatetitle'] !== undefined) && (
-
-
- {allSettingsMap['estimateprintheader'] !== undefined && (
-
- Show shop header (Name, Address, GST)
-
- )}
- {allSettingsMap['estimatetitle'] !== undefined && (
-
- Show “Estimate (R/W)” title
-
- )}
-
-
- )}
+
+
+ {allSettingsMap['estimateprintheader'] !== undefined && (
+
+ Show shop header (Name, Address, GST)
+
+ )}
+ {allSettingsMap['estimatetitle'] !== undefined && (
+
+ Show “Estimate (R/W)” title
+
+ )}
+
+
+ )}
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;
}
-}
+}
\ No newline at end of file
diff --git a/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss b/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
index caf3854..415c771 100644
--- a/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
+++ b/src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
@@ -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;
diff --git a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
index bbf81da..3034877 100644
--- a/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
+++ b/src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
@@ -562,7 +562,7 @@
padding: 10px 30px 10px 30px;
}
.search-icon {
- top: 53%;
+ top: 43%;
}
}
.BsNavbar1FullScreen {
diff --git a/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss b/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss
index 6ed9644..f19bbb1 100644
--- a/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss
+++ b/src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss
@@ -106,7 +106,7 @@
.SubCategoryVertical-sampleCard {
min-width: max-content;
- flex-grow: 1;
+ // flex-grow: 1;
}
.SubCategoryVertical-sub-samplecard p {
diff --git a/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss b/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
index 9cc95db..a766298 100644
--- a/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout1/BSLayout1.scss
@@ -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;
-}
+}
\ No newline at end of file
diff --git a/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss b/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
index ff75f35..da61aa1 100644
--- a/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
@@ -90,6 +90,7 @@ body {
overflow: hidden;
justify-content: space-between;
background-color: #f1f5f9;
+ width: 100%;
@media (max-width: 768px) {
height: 85vh;
diff --git a/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss b/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
index dfff899..4dc721f 100644
--- a/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
@@ -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;
+ }
+}
diff --git a/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss b/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
index 2a8907a..cc03414 100644
--- a/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
+++ b/src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
@@ -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;
}