From c837984398e91bb3be3b9de0b59b59282b17cc68 Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 11 Mar 2026 19:19:10 +0530 Subject: [PATCH] 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