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 = () => { )} )} - {/*
- -
*/}
+ {/*
*/}