From c837984398e91bb3be3b9de0b59b59282b17cc68 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 11 Mar 2026 19:19:10 +0530 Subject: [PATCH 1/3] added preference in sales and category horizontal and vertical clean --- .../BookingScreen/BookingData/BookingData.js | 4 + .../BSCategories/BSCategoryHorizontal.jsx | 1017 +++-------------- .../BSCategories/BSCategoryVertical.jsx | 687 +---------- .../BSCategories/OtherItemsModal.jsx | 665 +++++++++++ .../Components/BSNavbar/BSNavbar2.jsx | 1 + .../Components/BSNavbar/BSNavbar3.jsx | 91 +- .../UtillComponents/AllSalesPageSettings.jsx | 14 +- .../UtillComponents/AllSalesPageSettings.scss | 36 + .../Template/BSLayout1/BSLayout1.jsx | 32 +- .../Template/BSLayout4/BSLayout4.jsx | 15 +- .../Template/BSLayout5/BSLayout5.jsx | 15 +- src/Pages/Preference/PreferenceList.jsx | 420 +++---- src/Pages/Preference/PreferenceList.scss | 40 +- .../Template/BSLayout1/BSLayout1.scss | 46 +- 14 files changed, 1274 insertions(+), 1809 deletions(-) create mode 100644 src/Pages/BookingScreen/Components/BSCategories/OtherItemsModal.jsx diff --git a/src/Features/BookingScreen/BookingData/BookingData.js b/src/Features/BookingScreen/BookingData/BookingData.js index d167ffd..6874547 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..98bf184 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,12 @@ 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 +98,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 +114,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 +203,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 +299,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 +352,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 +411,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 +539,7 @@ function BSCategoryHorizontal(props) { } } }, [SubcategorieData, templateData]); + useEffect(() => { if (typeof searchData === 'string' && categoryData?.length > 0) { const searchTerm = searchData?.trim()?.toLowerCase(); @@ -498,6 +557,7 @@ function BSCategoryHorizontal(props) { setIndexVal(0); } }, [searchData, categoryData]); + const handleClick = async (e, ProdCat, index) => { let data1 = { compId: CompId, @@ -558,6 +618,7 @@ function BSCategoryHorizontal(props) { // await dispatch(getSelectedFavItems(data1)); await dispatch(ChangeFocusCatCard(!FocusStatus)); }; + const handleClickOtherItems = async () => { dispatch(ChangedraggingComponent(null)); dispatch(Changedragging(false)); @@ -566,8 +627,6 @@ function BSCategoryHorizontal(props) { }; const handleClick2 = async () => { - getTaxname(); - getUom(); setIndexVal(-1); setAccessOther(true); setIsModalOpen(true); @@ -575,11 +634,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, @@ -598,20 +659,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 +668,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); + container.removeEventListener("wheel", handleWheel); }; - }, [scrollContainerRef]); + }, [scrollContainerRef, categoryType]); useEffect(() => { // Accessing the DOM elements @@ -932,21 +711,18 @@ 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 +737,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 +781,7 @@ function BSCategoryHorizontal(props) { <> {templateData?.BookingCategory?.[0] != 'Category5' ? (
@@ -1024,12 +801,12 @@ function BSCategoryHorizontal(props) { padding: '0 0.5rem', }} > - {showLeftButton && ( + {(showLeftButton || showUpButton) && (
handleScrollClickLeft(-50, 0)} + onClick={categoryType === 'vertical' ? () => handleScrollClickUp(-50, 0) : () => handleScrollClickLeft(-50, 0)} > - ◄ + {categoryType === 'vertical' ? '▲' : '◄'}
)} @@ -1054,7 +831,7 @@ function BSCategoryHorizontal(props) {
{item.SmallIcon && categoryFunction?.Image && ( {(provided) => (
{item.SmallIcon && categoryFunction?.Image && ( - {showRightButton && ( + {(showRightButton || showDownButton) && (
handleScrollClickRight(5, 5)} + onClick={categoryType === 'vertical' ? () => handleScrollClickDown(50, 0) : () => handleScrollClickRight(5, 5)} > - ► + {categoryType === 'vertical' ? '▼' : '►'}
)}
@@ -1546,434 +1324,7 @@ function BSCategoryHorizontal(props) {
)} - {isModalOpen && ( - -
-
-
- handleValuesChange(allValues) - } - > -
-
-
- { - await validateSafeInput(value); - - if (value && value.length > 50) { - return Promise.reject( - 'Product Name should not exceed 50 characters' - ); - } - - return Promise.resolve(); - }, - }, - ]} - > - ({ - value: - option.ProdName + - ' ' + - '(' + - option.Size + - option.UomName + - ')', - label: - option.ProdName + - ' ' + - '(' + - option.Size + - option.UomName + - ')', - }))} - style={{ width: '250px', height: '48px' }} - onSelect={(value, option) => - onAutocompleteChange(option) - } - filterOption={(inputValue, option) => - option.label - ?.toLowerCase() - ?.includes(inputValue?.toLowerCase()) || - option.value - ?.toString() - ?.toLowerCase() - ?.includes(inputValue?.toLowerCase()) - } - > - - onChangeprodFunction(e?.target?.value) - } - onPressEnter={(e) => - onChangeprodFunction(e?.target?.value) - } - isOnChange={EditState ? true : false} - suffix={ - - - - } - /> - - -
-
-
- - ({ - value: option.TaxId, - label: getOptionLabel( - option, - selectedTaxPercentage === option.TaxId - ), - // label: option.TaxIdName + ' - ' + option.TaxPercentage + ' % ', - }))} - className="field-DropDown" - // placeholder="ConfigType" - label={} - // optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }} - onChangeFunction={(selectedValue) => - onChangeFunction(selectedValue) - } - valueData={selectedTaxPercentage} - isOnChange={EditState ? true : false} - disabled={add || !EditState ? false : true} - /> - -
- { - await validateSafeInput(value); - if (value && value.length > 10) { - return Promise.reject( - 'No.of.Units should not exceed 10 characters' - ); - } - - return Promise.resolve(); - }, - }, - ]} - > - - - ({ - 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} - /> - -
- } - // inputMode="numeric" - // onInput={(e) => { - // e.target.value = e.target.value.replace(/\D/g, ""); - // }} - className="size-input" - label={ - - } - autocomplete="off" - onChange={(e) => - handleValuesChange({ - ...formRef.current.getFieldsValue(), - Size: e.target.value, - }) - } - isOnChange={ - !EditState ? (add ? true : false) : true - } - disabled={add || !EditState ? false : true} - suffix={ - -
Enter No.of.Units as:
-
- - Single number (5) -
-
- - Decimal (1.500 or 1.5) -
-
- - Width x Height (10x10) -
- - } - > - - - } - /> - -
-
- {/* - ({ - 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 && ( - -
-
-
- handleValuesChange(allValues) - } - > -
- { - await validateSafeInput(value); - if (value && value.length > 50) { - return Promise.reject( - 'Product Name should not exceed 50 characters' - ); - } - - return Promise.resolve(); - }, - }, - ]} - > - ({ - value: - option.ProdName + - ' ' + - '(' + - option.Size + - option.UomName + - ')', - label: - option.ProdName + - ' ' + - '(' + - option.Size + - option.UomName + - ')', - }))} - style={{ width: '250px', height: '48px' }} - onSelect={(value, option) => - onAutocompleteChange(option) - } - filterOption={(inputValue, option) => - option.label - .toLowerCase() - .includes(inputValue.toLowerCase()) || - option.value - .toString() - .toLowerCase() - .includes(inputValue.toLowerCase()) - } - > - - onChangeprodFunction(e?.target?.value) - } - onPressEnter={(e) => - onChangeprodFunction(e?.target?.value) - } - isOnChange={EditState ? true : false} - suffix={ - - - - } - /> - - - - ({ - value: option.TaxId, - label: getOptionLabel( - option, - selectedTaxPercentage === option.TaxId - ), - // label: - // option.TaxIdName + - // " - " + - // option.TaxPercentage + - // " % ", - }))} - className="field-DropDown" - label={} - // optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }} - onChangeFunction={(selectedValue) => - onChangeFunction(selectedValue) - } - valueData={selectedTaxPercentage} - isOnChange={EditState ? true : false} - disabled={add || !EditState ? false : true} - /> - - { - await validateSafeInput(value); - if (value && value.length > 10) { - return Promise.reject( - 'No.of.Units should not exceed 10 characters' - ); - } - - return Promise.resolve(); - }, - }, - ]} - > - No.of.Units} - autocomplete="off" - onChange={(e) => - handleValuesChange({ - ...formRef.current.getFieldsValue(), - Size: e?.target?.value, - }) - } - isOnChange={!EditState ? (add ? true : false) : true} - disabled={add || !EditState ? false : true} - suffix={ - -
Enter No.of.Units as:
-
- - Single number (5) -
-
- - Decimal (1.500 or 1.5) -
-
- - Width x Height (10x10) -
- - } - > - - - } - /> - - - ({ - 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, - }) - } - 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} - // disabled={!!EditState} - /> - -
-
-

Bill Amount {isNaN(billAmount) ? 0 : billAmount}

-

Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}

-

Total Amount {isNaN(totalAmount) ? 0 : totalAmount}

-
-
- } - onClick={() => onFinish()} - /> -
-
-
- - } - 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 ( + <> + + +
+
+
+ handleValuesChange(allValues) + } + > +
+ { + await validateSafeInput(value); + + if (value && value.length > 50) { + return Promise.reject( + 'Product Name should not exceed 50 characters' + ); + } + + return Promise.resolve(); + }, + }, + ]} + > + ({ + value: + option.ProdName + + ' ' + + '(' + + option.Size + + option.UomName + + ')', + label: + option.ProdName + + ' ' + + '(' + + option.Size + + option.UomName + + ')', + }))} + style={{ width: '250px', height: '48px' }} + onSelect={(value, option) => + handleAutoCompleteChange(option) + } + filterOption={(inputValue, option) => + option.label + .toLowerCase() + .includes(inputValue.toLowerCase()) || + option.value + .toString() + .toLowerCase() + .includes(inputValue.toLowerCase()) + } + > + + handleProductChange(e?.target?.value) + } + onPressEnter={(e) => + handleProductChange(e?.target?.value) + } + isOnChange={editState ? true : false} + suffix={ + + + + } + /> + + + + ({ + value: option.TaxId, + label: getOptionLabel( + option, + selectedTaxPercentage === option.TaxId + ), + // label: + // option.TaxIdName + + // " - " + + // option.TaxPercentage + + // " % ", + }))} + className="field-DropDown" + label={} + // optionsNames={{ value: "TaxPercentage", label: "TaxIdName" }} + onChangeFunction={handleTaxChange} + valueData={selectedTaxPercentage} + isOnChange={editState ? true : false} + disabled={add || !editState ? false : true} + /> + + { + await validateSafeInput(value); + if (value && value.length > 10) { + return Promise.reject( + 'No.of.Units should not exceed 10 characters' + ); + } + + return Promise.resolve(); + }, + }, + ]} + > + No.of.Units} + autocomplete="off" + onChange={(e) => + handleValuesChange({ + ...formRef.current.getFieldsValue(), + Size: e?.target?.value, + }) + } + isOnChange={!editState ? (add ? true : false) : true} + disabled={add || !editState ? false : true} + suffix={ + +
Enter No.of.Units as:
+
+ - Single number (5) +
+
+ - Decimal (1.500 or 1.5) +
+
+ - Width x Height (10x10) +
+ + } + > + + + } + /> + + + ({ + value: option.ConfigId, + label: option.ConfigName, + }))} + placeholder="ConfigType" + label={} + optionsNames={{ value: 'TypeId', label: 'TypeName' }} + className="field-DropDown" + onChangeFunction={handleUOMChange} + 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, + }) + } + 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} + // disabled={!!editState} + /> + +
+
+

Bill Amount {isNaN(billAmount) ? 0 : billAmount}

+

Tax Amount {isNaN(taxAmount) ? 0 : taxAmount}

+

Total Amount {isNaN(totalAmount) ? 0 : totalAmount}

+
+
+ } + /> +
+
+
+ + } + 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 9e5c595..683f1a0 100644 --- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx +++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar2.jsx @@ -212,6 +212,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 57007df..5afeafa 100644 --- a/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx +++ b/src/Pages/BookingScreen/Components/BSNavbar/BSNavbar3.jsx @@ -187,6 +187,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); @@ -712,43 +713,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 && ( @@ -818,16 +819,16 @@ const BSNavbar3 = ({ optionNames }) => { (item) => item?.FeatureAddonName?.toLowerCase() === 'customer display' ) && ( - -
- -
- - )} + +
+ +
+ + )} {reprintOption && (
{ pointerEvents: orderType === 'Failed' ? 'none' : 'auto', }} > -
{}}> +
{ }}>
Estimate
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/BookingScreen/Template/BSLayout1/BSLayout1.jsx b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx index b0c79e9..4d9ee66 100644 --- a/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx +++ b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx @@ -101,10 +101,10 @@ const ComboSalesBillTable = lazy( () => import('../../Components/BSBillingTables/ComboSalesBillTable/ComboSalesBillTable.jsx') ); -const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx')); +const SalesCountComponent = lazy(() => import('../SalesCountComponent.jsx')); // const PlanExpireNotification = lazy(() => import('../PlanExpireNotification.jsx')); import PlanExpireNotification from '../PlanExpireNotification.jsx'; - + const BSLayout1 = () => { const dispatch = useDispatch(); @@ -185,9 +185,9 @@ const BSLayout1 = () => { ? '575px' : '595px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; @@ -317,9 +317,9 @@ const BSLayout1 = () => { }; const handleInvoiceClose = () => { setListOfInvoices(false); - }; - return ( - }> + }; + return ( + }> <> {
{ GlobalsalesDetailData={GlobalsalesDetailData} /> )} -
-
+
+
{ {BookingBilling == 'Billing8' && } {BSLayout1Data?.BookingBilling?.[0] == 'StandardBilling' && ( -
- -
- )} +
+ +
+ )} )}
@@ -671,7 +671,7 @@ const BSLayout1 = () => { /> )} - + ); }; diff --git a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx index b957b5d..7d07c5a 100644 --- a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx +++ b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx @@ -6,8 +6,8 @@ import { isMobile } from 'react-device-detect'; import BookingCloseIcon from '../../Components/UtillComponents/BookingCloseIcon.jsx'; const BSNavbar1 = lazy(() => import('../../Components/BSNavbar/BSNavbar1')); const BSNavbar2 = lazy(() => import('../../Components/BSNavbar/BSNavbar2')); -const CategoryVertical = lazy( - () => import('../../Components/BSCategories/BSCategoryVertical') +const CategoryHorizontal = lazy( + () => import('../../Components/BSCategories/BSCategoryHorizontal') ); const BSItemCard = lazy( () => import('../../Components/BSItemCards/BSItemCard') @@ -195,9 +195,9 @@ const BSLayout4 = () => { ? '575px' : '590px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; const [ListOfInvoices, setListOfInvoices] = useState(false); @@ -497,12 +497,13 @@ const BSLayout4 = () => { }} > {!OtherServicesglobal && ( - )} {OtherServicesglobal && ( @@ -612,7 +613,7 @@ const BSLayout4 = () => { /> )} - + ); }; diff --git a/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx b/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx index 486209e..c0850ff 100644 --- a/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx +++ b/src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx @@ -38,7 +38,9 @@ const BSBillingTable7 = lazy( import('../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx') ); import BSItemCard from '../../Components/BSItemCards/BSItemCard'; -import CategoryVertical from '../../Components/BSCategories/BSCategoryVertical'; +const CategoryHorizontal = lazy( + () => import('../../Components/BSCategories/BSCategoryHorizontal') +); import { dynamicComponentProps } from '../DynamicComponentProps.js'; import { GlobalPricingAppPricingName, @@ -160,9 +162,9 @@ const BSLayout5 = () => { ? '580px' : '590px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; const [ListOfInvoices, setListOfInvoices] = useState(false); @@ -529,12 +531,13 @@ const BSLayout5 = () => { }} > {!OtherServicesglobal && ( - )} {OtherServicesglobal && ( @@ -603,7 +606,7 @@ const BSLayout5 = () => { /> )} - + ); }; 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/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 From 4bc0e4e3f0dca0db899fcc6784719cde6fae6579 Mon Sep 17 00:00:00 2001 From: vignesh Date: Thu, 12 Mar 2026 16:31:02 +0530 Subject: [PATCH 2/3] category and subcategory --- .../BSCategories/BSCategoryHorizontal.jsx | 205 ++++---- .../BSSubCategoryHorizontal.jsx | 440 +++++++++++------- .../BSSubCategories/BSSubCategoryVertical.jsx | 22 +- .../BSSubCategories/StandardSubcategory.jsx | 261 +++++------ .../MainPage/SelectionComponent.jsx | 87 ++-- .../PreviewLayouts/PreviewLayout3.jsx | 35 +- .../Template/BSLayout1/BSLayout1.jsx | 52 ++- .../Template/BSLayout4/BSLayout4.jsx | 19 +- .../Template/BSLayout5/BSLayout5.jsx | 25 +- .../BSCategories/BSCategoryHorizontal.scss | 91 +--- .../Components/BSNavbar/BSNavbar1.scss | 2 +- .../BSSubCategoryVertical.scss | 2 +- .../Template/BSLayout2/BSLayout2.scss | 1 + .../Template/BSLayout4/BSLayout4.scss | 20 +- .../Template/BSLayout5/BSLayout5.scss | 19 +- 15 files changed, 696 insertions(+), 585 deletions(-) diff --git a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx index 98bf184..459e1ad 100644 --- a/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx +++ b/src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx @@ -55,7 +55,6 @@ import { useDateStore } from '../../../../Features/BookingScreen/BookingData/Dat import OtherItemsModal from './OtherItemsModal.jsx'; function BSCategoryHorizontal(props) { - const { categoryType = 'horizontal' } = props; const dispatch = useDispatch(); @@ -130,7 +129,7 @@ function BSCategoryHorizontal(props) { if (!container) return; const handleScroll = () => { - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { setShowLeftButton(container.scrollLeft > 0); setShowRightButton( container.scrollLeft + container.clientWidth < container.scrollWidth @@ -143,10 +142,10 @@ function BSCategoryHorizontal(props) { } }; - container.addEventListener("scroll", handleScroll); + container.addEventListener('scroll', handleScroll); handleScroll(); // initial check - return () => container.removeEventListener("scroll", handleScroll); + return () => container.removeEventListener('scroll', handleScroll); }, [categoryType]); const handleScrollClickLeft = ( @@ -429,7 +428,7 @@ function BSCategoryHorizontal(props) { e.preventDefault(); setIsDragging(true); - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { setStartX(e.clientX); } else { setStartY(e.clientY); @@ -442,7 +441,7 @@ function BSCategoryHorizontal(props) { const container = scrollContainerRef.current; if (!container) return; - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { const deltaX = e.clientX - startX; container.scrollLeft -= deltaX; setStartX(e.clientX); @@ -456,7 +455,7 @@ function BSCategoryHorizontal(props) { const handleTouchStart = (e) => { setIsDragging(true); - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { setStartX(e.touches[0].clientX); } else { setStartY(e.touches[0].clientY); @@ -469,7 +468,7 @@ function BSCategoryHorizontal(props) { const container = scrollContainerRef.current; if (!container) return; - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { const deltaX = e.touches[0].clientX - startX; container.scrollLeft -= deltaX; setStartX(e.touches[0].clientX); @@ -609,9 +608,9 @@ function BSCategoryHorizontal(props) { AppId: AppId, ...(AvailableDate && selectedDate ? { - fromDate: selectedDate?.[0], - toDate: selectedDate?.[1], - } + fromDate: selectedDate?.[0], + toDate: selectedDate?.[1], + } : {}), }; @@ -648,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(); @@ -678,7 +677,7 @@ function BSCategoryHorizontal(props) { if (!container) return; const handleWheel = (e) => { - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { container.scrollLeft += e.deltaY || e.deltaX; } else { container.scrollTop += e.deltaY; @@ -687,10 +686,10 @@ function BSCategoryHorizontal(props) { e.preventDefault(); }; - container.addEventListener("wheel", handleWheel, { passive: false }); + container.addEventListener('wheel', handleWheel, { passive: false }); return () => { - container.removeEventListener("wheel", handleWheel); + container.removeEventListener('wheel', handleWheel); }; }, [scrollContainerRef, categoryType]); @@ -713,9 +712,16 @@ function BSCategoryHorizontal(props) { const container = scrollContainerRef?.current; if (!container) return; - const { scrollLeft, scrollTop, scrollWidth, scrollHeight, clientWidth, clientHeight } = container; + const { + scrollLeft, + scrollTop, + scrollWidth, + scrollHeight, + clientWidth, + clientHeight, + } = container; - if (categoryType === "horizontal") { + if (categoryType === 'horizontal') { setShowLeftButton(scrollLeft > 0); setShowRightButton(scrollLeft + clientWidth < scrollWidth); } else { @@ -781,7 +787,11 @@ function BSCategoryHorizontal(props) { <> {templateData?.BookingCategory?.[0] != 'Category5' ? (
@@ -799,14 +809,23 @@ function BSCategoryHorizontal(props) { display: 'flex', alignItems: 'center', padding: '0 0.5rem', + gap: '4px', }} > - {(showLeftButton || showUpButton) && ( + {showLeftButton && categoryType !== 'vertical' && (
handleScrollClickUp(-50, 0) : () => handleScrollClickLeft(-50, 0)} + onClick={() => handleScrollClickLeft(-50, 0)} > - {categoryType === 'vertical' ? '▲' : '◄'} + ◄ +
+ )} + {showUpButton && categoryType === 'vertical' && ( +
handleScrollClickUp(-50, 0)} + > + ▲
)} @@ -827,11 +846,24 @@ function BSCategoryHorizontal(props) { )}
+ + {showDownButton && categoryType === 'vertical' && ( +
handleScrollClickDown(50, 0)} + > + ▼ +
+ )}
{item.SmallIcon && categoryFunction?.Image && ( {(provided) => (
{categoryData?.map((item, index) => ( @@ -1046,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', @@ -1058,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 }} @@ -1080,7 +1122,11 @@ function BSCategoryHorizontal(props) { >
{item.SmallIcon && categoryFunction?.Image && ( - {(showRightButton || showDownButton) && ( + {showRightButton && categoryType !== 'vertical' && (
handleScrollClickDown(50, 0) : () => handleScrollClickRight(5, 5)} + onClick={() => handleScrollClickRight(5, 5)} > - {categoryType === 'vertical' ? '▼' : '►'} + ►
)}
@@ -1220,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 && ( <> )} - + ); } 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/Template/BSLayout1/BSLayout1.jsx b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx index 4d9ee66..c03c917 100644 --- a/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx +++ b/src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx @@ -16,7 +16,7 @@ import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BS import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx'; import BSItemCard from '../../Components/BSItemCards/BSItemCard'; import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal'; -import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical'; +import SubCategory from '../../Components/BSSubCategories/BSSubCategoryHorizontal'; import { dynamicComponentProps } from '../DynamicComponentProps.js'; import { SelectedGlobalLayoutColorDetail, @@ -185,9 +185,9 @@ const BSLayout1 = () => { ? '575px' : '595px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; @@ -549,22 +549,26 @@ const BSLayout1 = () => {
-
- {Comboglobal === false && !OtherServicesglobal && ( - - )} -
+ { +
+ {Comboglobal === false && !OtherServicesglobal && ( + + )} +
+ }
{ {BookingBilling == 'Billing8' && } {BSLayout1Data?.BookingBilling?.[0] == 'StandardBilling' && ( -
- -
- )} +
+ +
+ )} )}
diff --git a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx index 7d07c5a..4e24afb 100644 --- a/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx +++ b/src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx @@ -179,7 +179,7 @@ const BSLayout4 = () => { const BookingCategory = BSLayout4Data?.BookingCategory; const BookingCard = BSLayout4Data?.BookingCard; const BookingBilling = BSLayout4Data?.BookingBilling?.[0]; - console.log('BSLayout4Data', BookingBilling); + console.log('BSLayout4Data', BookingCategory); const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter( (i) => i.SettingIdName === 'DineIn' )?.[0]; @@ -195,9 +195,9 @@ const BSLayout4 = () => { ? '575px' : '590px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; const [ListOfInvoices, setListOfInvoices] = useState(false); @@ -431,8 +431,6 @@ const BSLayout4 = () => { cursor: 'pointer', }} /> - {/* */}
) @@ -488,7 +486,14 @@ const BSLayout4 = () => { backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor, }} > -
+ {/*
*/} +
{ ? '580px' : '590px' : (UserType != 'Super Admin' && - UserType != 'Super Admin User' && - AppExpDate?.RemainingDays <= 7) || - AppExpDate?.PlanType?.toLowerCase() === 'extend' + UserType != 'Super Admin User' && + AppExpDate?.RemainingDays <= 7) || + AppExpDate?.PlanType?.toLowerCase() === 'extend' ? '96vh' : '99vh'; const [ListOfInvoices, setListOfInvoices] = useState(false); @@ -432,8 +432,6 @@ const BSLayout5 = () => { cursor: 'pointer', }} /> - {/* */}
) : ( @@ -509,20 +507,15 @@ const BSLayout5 = () => { )} )} - {/*
- -
*/}
+ {/*
*/}