karthikalakshmi
/
Android_Retail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

category and subcategory

This commit is contained in:
vignesh 2026-03-12 16:31:02 +05:30
parent c837984398
commit 4bc0e4e3f0
15 changed files with 696 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/Pages/BookingScreen/Components/BSCategories/BSCategoryHorizontal.jsx
View File

@ -55,7 +55,6 @@ import { useDateStore } from '../../../../Features/BookingScreen/BookingData/Dat
import OtherItemsModal from './OtherItemsModal.jsx'; import OtherItemsModal from './OtherItemsModal.jsx';
function BSCategoryHorizontal(props) { function BSCategoryHorizontal(props) {
const { categoryType = 'horizontal' } = props; const { categoryType = 'horizontal' } = props;
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -130,7 +129,7 @@ function BSCategoryHorizontal(props) {
if (!container) return; if (!container) return;
const handleScroll = () => { const handleScroll = () => {
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
setShowLeftButton(container.scrollLeft > 0); setShowLeftButton(container.scrollLeft > 0);
setShowRightButton( setShowRightButton(
container.scrollLeft + container.clientWidth < container.scrollWidth container.scrollLeft + container.clientWidth < container.scrollWidth
@ -143,10 +142,10 @@ function BSCategoryHorizontal(props) {
} }
}; };
container.addEventListener("scroll", handleScroll); container.addEventListener('scroll', handleScroll);
handleScroll(); // initial check handleScroll(); // initial check
return () => container.removeEventListener("scroll", handleScroll); return () => container.removeEventListener('scroll', handleScroll);
}, [categoryType]); }, [categoryType]);
const handleScrollClickLeft = ( const handleScrollClickLeft = (
@ -429,7 +428,7 @@ function BSCategoryHorizontal(props) {
e.preventDefault(); e.preventDefault();
setIsDragging(true); setIsDragging(true);
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
setStartX(e.clientX); setStartX(e.clientX);
} else { } else {
setStartY(e.clientY); setStartY(e.clientY);
@ -442,7 +441,7 @@ function BSCategoryHorizontal(props) {
const container = scrollContainerRef.current; const container = scrollContainerRef.current;
if (!container) return; if (!container) return;
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
const deltaX = e.clientX - startX; const deltaX = e.clientX - startX;
container.scrollLeft -= deltaX; container.scrollLeft -= deltaX;
setStartX(e.clientX); setStartX(e.clientX);
@ -456,7 +455,7 @@ function BSCategoryHorizontal(props) {
const handleTouchStart = (e) => { const handleTouchStart = (e) => {
setIsDragging(true); setIsDragging(true);
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
setStartX(e.touches[0].clientX); setStartX(e.touches[0].clientX);
} else { } else {
setStartY(e.touches[0].clientY); setStartY(e.touches[0].clientY);
@ -469,7 +468,7 @@ function BSCategoryHorizontal(props) {
const container = scrollContainerRef.current; const container = scrollContainerRef.current;
if (!container) return; if (!container) return;
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
const deltaX = e.touches[0].clientX - startX; const deltaX = e.touches[0].clientX - startX;
container.scrollLeft -= deltaX; container.scrollLeft -= deltaX;
setStartX(e.touches[0].clientX); setStartX(e.touches[0].clientX);
@ -609,9 +608,9 @@ function BSCategoryHorizontal(props) {
AppId: AppId, AppId: AppId,
...(AvailableDate && selectedDate ...(AvailableDate && selectedDate
? { ? {
fromDate: selectedDate?.[0], fromDate: selectedDate?.[0],
toDate: selectedDate?.[1], toDate: selectedDate?.[1],
} }
: {}), : {}),
}; };
@ -648,9 +647,9 @@ function BSCategoryHorizontal(props) {
AppId: AppId, AppId: AppId,
...(AvailableDate && selectedDate ...(AvailableDate && selectedDate
? { ? {
fromDate: selectedDate?.[0], fromDate: selectedDate?.[0],
toDate: selectedDate?.[1], toDate: selectedDate?.[1],
} }
: {}), : {}),
}; };
let res = await dispatch(getSelectedFavItems(data)).unwrap(); let res = await dispatch(getSelectedFavItems(data)).unwrap();
@ -678,7 +677,7 @@ function BSCategoryHorizontal(props) {
if (!container) return; if (!container) return;
const handleWheel = (e) => { const handleWheel = (e) => {
if (categoryType === "horizontal") { if (categoryType === 'horizontal') {
container.scrollLeft += e.deltaY || e.deltaX; container.scrollLeft += e.deltaY || e.deltaX;
} else { } else {
container.scrollTop += e.deltaY; container.scrollTop += e.deltaY;
@ -687,10 +686,10 @@ function BSCategoryHorizontal(props) {
e.preventDefault(); e.preventDefault();
}; };
container.addEventListener("wheel", handleWheel, { passive: false }); container.addEventListener('wheel', handleWheel, { passive: false });
return () => { return () => {
container.removeEventListener("wheel", handleWheel); container.removeEventListener('wheel', handleWheel);
}; };
}, [scrollContainerRef, categoryType]); }, [scrollContainerRef, categoryType]);
@ -713,9 +712,16 @@ function BSCategoryHorizontal(props) {
const container = scrollContainerRef?.current; const container = scrollContainerRef?.current;
if (!container) return; 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); setShowLeftButton(scrollLeft > 0);
setShowRightButton(scrollLeft + clientWidth < scrollWidth); setShowRightButton(scrollLeft + clientWidth < scrollWidth);
} else { } else {
@ -781,7 +787,11 @@ function BSCategoryHorizontal(props) {
<> <>
{templateData?.BookingCategory?.[0] != 'Category5' ? ( {templateData?.BookingCategory?.[0] != 'Category5' ? (
<div <div
className={categoryType === 'vertical' ? "CategoryVertical" : "CategoryHorizontal bs1"} className={
categoryType === 'vertical'
? 'CategoryVertical'
: 'CategoryHorizontal bs1'
}
ref={containerRef} ref={containerRef}
style={{ maxWidth: '100%' }} style={{ maxWidth: '100%' }}
> >
@ -799,14 +809,23 @@ function BSCategoryHorizontal(props) {
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
padding: '0 0.5rem', padding: '0 0.5rem',
gap: '4px',
}} }}
> >
{(showLeftButton || showUpButton) && ( {showLeftButton && categoryType !== 'vertical' && (
<div <div
className="CategoryHorizontal-icon" className="CategoryHorizontal-icon"
onClick={categoryType === 'vertical' ? () => handleScrollClickUp(-50, 0) : () => handleScrollClickLeft(-50, 0)} onClick={() => handleScrollClickLeft(-50, 0)}
> >
{categoryType === 'vertical' ? '▲' : '◄'} ◄
</div>
)}
{showUpButton && categoryType === 'vertical' && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickUp(-50, 0)}
>
▲
</div> </div>
)} )}
@ -827,11 +846,24 @@ function BSCategoryHorizontal(props) {
)} )}
</div> </div>
</div> </div>
{showDownButton && categoryType === 'vertical' && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickDown(50, 0)}
>
▼
</div>
)}
</div> </div>
<div <div
id="mainDiv" id="mainDiv"
className={categoryType === 'vertical' ? "CategoryVertical-scroll-container" : "CategoryHorizontal-scroll-container"} className={
categoryType === 'vertical'
? 'CategoryVertical-scroll-container'
: 'CategoryHorizontal-scroll-container'
}
ref={scrollContainerRef} ref={scrollContainerRef}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
@ -841,7 +873,7 @@ function BSCategoryHorizontal(props) {
onTouchEnd={handleTouchEnd} onTouchEnd={handleTouchEnd}
onMouseLeave={handleMouseUp} onMouseLeave={handleMouseUp}
style={{ style={{
marginTop: '1rem', marginTop: '2px',
display: 'flex', display: 'flex',
pointerEvents: OrderType === 'Failed' ? 'none' : 'auto', pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
}} }}
@ -854,9 +886,9 @@ function BSCategoryHorizontal(props) {
backgroundColor: backgroundColor:
!accessOther && accessToCard !accessOther && accessToCard
? lightenColor( ? lightenColor(
SelectedCatgColor?.['BackgroundColor'], SelectedCatgColor?.['BackgroundColor'],
0.4 0.4
) )
: SelectedCatgColor?.['BackgroundColor'], : SelectedCatgColor?.['BackgroundColor'],
padding: padding, padding: padding,
border: accessToCard ? '1px solid' : undefined, border: accessToCard ? '1px solid' : undefined,
@ -867,9 +899,9 @@ function BSCategoryHorizontal(props) {
: SelectedCatgColor?.['BackgroundColor'] === '#000000' : SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff' ? '#ffffff'
: darkenColor( : darkenColor(
SelectedCatgColor?.['BackgroundColor'], SelectedCatgColor?.['BackgroundColor'],
70 70
) )
: undefined, : undefined,
}} }}
className="sampleCard" className="sampleCard"
@ -903,9 +935,9 @@ function BSCategoryHorizontal(props) {
backgroundColor: backgroundColor:
!accessOther && !accessToCard && -2 == indexval !accessOther && !accessToCard && -2 == indexval
? lightenColor( ? lightenColor(
SelectedCatgColor?.['BackgroundColor'], SelectedCatgColor?.['BackgroundColor'],
0.4 0.4
) )
: SelectedCatgColor?.['BackgroundColor'], : SelectedCatgColor?.['BackgroundColor'],
padding: padding, padding: padding,
border: border:
@ -951,9 +983,9 @@ function BSCategoryHorizontal(props) {
? index != indexval ? index != indexval
? SelectedCatgColor?.['BackgroundColor'] ? SelectedCatgColor?.['BackgroundColor']
: lightenColor( : lightenColor(
SelectedCatgColor?.['BackgroundColor'], SelectedCatgColor?.['BackgroundColor'],
0.4 0.4
) )
: SelectedCatgColor?.['BackgroundColor'], : SelectedCatgColor?.['BackgroundColor'],
padding: padding, padding: padding,
border: '1px solid', border: '1px solid',
@ -977,7 +1009,11 @@ function BSCategoryHorizontal(props) {
> >
<div <div
style={{ flexDirection: Reverse1 }} style={{ flexDirection: Reverse1 }}
className={categoryType === 'vertical' ? "CategoryVertical-sub-samplecard" : "CategoryHorizontal-sub-samplecard"} className={
categoryType === 'vertical'
? 'CategoryVertical-sub-samplecard'
: 'CategoryHorizontal-sub-samplecard'
}
> >
{item.SmallIcon && categoryFunction?.Image && ( {item.SmallIcon && categoryFunction?.Image && (
<img <img
@ -1013,8 +1049,14 @@ function BSCategoryHorizontal(props) {
{Isdragging && draggingComponent == 'category' && ( {Isdragging && draggingComponent == 'category' && (
<DragDropContext onDragEnd={handleDragEnd}> <DragDropContext onDragEnd={handleDragEnd}>
<Droppable <Droppable
droppableId={categoryType === 'vertical' ? "categories" : "droppable-category"} droppableId={
direction={categoryType === 'vertical' ? "vertical" : "horizontal"} categoryType === 'vertical'
? 'categories'
: 'droppable-category'
}
direction={
categoryType === 'vertical' ? 'vertical' : 'horizontal'
}
> >
{(provided) => ( {(provided) => (
<div <div
@ -1022,9 +1064,9 @@ function BSCategoryHorizontal(props) {
{...provided.droppableProps} {...provided.droppableProps}
style={{ style={{
display: 'flex', display: 'flex',
flexDirection: categoryType === 'vertical' ? 'column' : 'row', flexDirection:
// overflowX: "auto", categoryType === 'vertical' ? 'column' : 'row',
gap: '8px', // optional spacing between cards gap: '8px',
}} }}
> >
{categoryData?.map((item, index) => ( {categoryData?.map((item, index) => (
@ -1046,11 +1088,11 @@ function BSCategoryHorizontal(props) {
? index !== indexval ? index !== indexval
? SelectedCatgColor?.['BackgroundColor'] ? SelectedCatgColor?.['BackgroundColor']
: lightenColor( : lightenColor(
SelectedCatgColor?.[ SelectedCatgColor?.[
'BackgroundColor' 'BackgroundColor'
], ],
0.4 0.4
) )
: SelectedCatgColor?.['BackgroundColor'], : SelectedCatgColor?.['BackgroundColor'],
padding: padding, padding: padding,
border: '1px solid', border: '1px solid',
@ -1058,18 +1100,18 @@ function BSCategoryHorizontal(props) {
index !== indexval index !== indexval
? SelectedCatgColor?.['BackgroundColor'] ? SelectedCatgColor?.['BackgroundColor']
: SelectedCatgColor?.['BackgroundColor'] === : SelectedCatgColor?.['BackgroundColor'] ===
'#ffffff' '#ffffff'
? '#000000' ? '#000000'
: SelectedCatgColor?.[ : SelectedCatgColor?.[
'BackgroundColor' 'BackgroundColor'
] === '#000000' ] === '#000000'
? '#ffffff' ? '#ffffff'
: darkenColor( : darkenColor(
SelectedCatgColor?.[ SelectedCatgColor?.[
'BackgroundColor' 'BackgroundColor'
], ],
70 70
), ),
userSelect: 'none', userSelect: 'none',
minWidth: 'max-content', // set a width if needed minWidth: 'max-content', // set a width if needed
}} }}
@ -1080,7 +1122,11 @@ function BSCategoryHorizontal(props) {
> >
<div <div
style={{ flexDirection: Reverse1 }} style={{ flexDirection: Reverse1 }}
className={categoryType === 'vertical' ? "CategoryVertical-sub-samplecard" : "CategoryHorizontal-sub-samplecard"} className={
categoryType === 'vertical'
? 'CategoryVertical-sub-samplecard'
: 'CategoryHorizontal-sub-samplecard'
}
> >
{item.SmallIcon && categoryFunction?.Image && ( {item.SmallIcon && categoryFunction?.Image && (
<img <img
@ -1124,16 +1170,16 @@ function BSCategoryHorizontal(props) {
backgroundColor: backgroundColor:
!accessOther && accessToCard !accessOther && accessToCard
? lightenColor( ? lightenColor(
SelectedCatgColor?.['BackgroundColor'], SelectedCatgColor?.['BackgroundColor'],
0.4 0.4
) )
: SelectedCatgColor?.['BackgroundColor'], : SelectedCatgColor?.['BackgroundColor'],
padding: padding, padding: padding,
border: accessToCard && '1px solid', border: accessToCard && '1px solid',
borderColor: borderColor:
accessToCard && accessToCard &&
!accessOther && !accessOther &&
SelectedCatgColor?.['BackgroundColor'] == '#ffffff' SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
? '#000000' ? '#000000'
: SelectedCatgColor?.['BackgroundColor'] === '#000000' : SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff' ? '#ffffff'
@ -1173,7 +1219,7 @@ function BSCategoryHorizontal(props) {
border: accessOther && '1px solid', border: accessOther && '1px solid',
borderColor: borderColor:
accessOther && accessOther &&
SelectedCatgColor?.['BackgroundColor'] == '#ffffff' SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
? '#000000' ? '#000000'
: SelectedCatgColor?.['BackgroundColor'] === '#000000' : SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff' ? '#ffffff'
@ -1207,12 +1253,12 @@ function BSCategoryHorizontal(props) {
<div <div
style={{ width: '50px', display: 'flex', justifyContent: 'end' }} style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
> >
{(showRightButton || showDownButton) && ( {showRightButton && categoryType !== 'vertical' && (
<div <div
className="CategoryHorizontal-icon" className="CategoryHorizontal-icon"
onClick={categoryType === 'vertical' ? () => handleScrollClickDown(50, 0) : () => handleScrollClickRight(5, 5)} onClick={() => handleScrollClickRight(5, 5)}
> >
{categoryType === 'vertical' ? '▼' : '►'} ►
</div> </div>
)} )}
</div> </div>
@ -1220,15 +1266,6 @@ function BSCategoryHorizontal(props) {
) : ( ) : (
<> <>
<div className="CategoryHorizontalNew"> <div className="CategoryHorizontalNew">
{/* Back Navigation Icon - Only show if there's more data */}
{/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
<div
className="CategoryHorizontal-nav-icon CategoryHorizontal-nav-left"
onClick={() => handleScrollClickLeft(-300, 0)}
>
◄
</div>
)} */}
{!subCat && ( {!subCat && (
<div <div
className="CategoryHorizontalNew-scroll-container" className="CategoryHorizontalNew-scroll-container"
@ -1263,7 +1300,6 @@ function BSCategoryHorizontal(props) {
style={{ flexDirection: Reverse1 }} style={{ flexDirection: Reverse1 }}
className="CategoryHorizontal-sub-samplecard" className="CategoryHorizontal-sub-samplecard"
> >
{/* {categoryFunction?.Image && <img src={catLogo} alt="" />} */}
<p <p
style={{ style={{
textTransform: Uppercase, textTransform: Uppercase,
@ -1303,16 +1339,7 @@ function BSCategoryHorizontal(props) {
{/* )} */} {/* )} */}
</div> </div>
)} )}
{/* Forward Navigation Icon - Only show if there's more data */}
{/* {(categoryData?.length > 5 || globalAllItemdata?.length > 0) && (
<div
className="CategoryHorizontal-nav-icon CategoryHorizontal-nav-right"
onClick={() => handleScrollClickRight(300, 0)}
>
►
</div>
)} */}
{/* </div> */}
{subCat && ( {subCat && (
<> <>
<StandardSubcategory <StandardSubcategory
@ -1324,7 +1351,11 @@ function BSCategoryHorizontal(props) {
</div> </div>
</> </>
)} )}
<OtherItemsModal open={isModalOpen} setOpen={setIsModalOpen} getselectCards={getselectCards} /> <OtherItemsModal
open={isModalOpen}
setOpen={setIsModalOpen}
getselectCards={getselectCards}
/>
</> </>
); );
} }

440
src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.jsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import '../../../../Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss'; import '../../../../Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryHorizontal.scss';
import { import {
@ -6,6 +6,7 @@ import {
SelectedGlobalSubCatgFont, SelectedGlobalSubCatgFont,
StoredSessionData, StoredSessionData,
} from '../../../../Features/ThemeChange/ThemeChange'; } from '../../../../Features/ThemeChange/ThemeChange';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import { import {
GlobalProductCategorie, GlobalProductCategorie,
getLayoutSubCategories, getLayoutSubCategories,
@ -20,8 +21,12 @@ import {
} from '../../../../Features/BookingScreen/BookingData/BookingData'; } from '../../../../Features/BookingScreen/BookingData/BookingData';
import WebFont from 'webfontloader'; import WebFont from 'webfontloader';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { isMobile } from 'react-device-detect';
import TooltipWrapper from '../../../../Components/Tooltip/Tooltip';
function BSSubCategoryHorizontal(props) { function BSSubCategoryHorizontal(props) {
const { subCategoryType = null } = props;
const isVertical = subCategoryType === 'vertical';
const dispatch = useDispatch(); const dispatch = useDispatch();
const prevRef = useRef(); const prevRef = useRef();
const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail); const SelectedSubCatgColor = useSelector(SelectedGlobalSubCatgColorDetail);
@ -40,6 +45,7 @@ function BSSubCategoryHorizontal(props) {
const scrollContainerRef = useRef(null); const scrollContainerRef = useRef(null);
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const [startX, setStartX] = useState(null); const [startX, setStartX] = useState(null);
const [startY, setStartY] = useState(null);
const AppId = SessionData?.AppId; const AppId = SessionData?.AppId;
const CompId = SessionData?.CompId; const CompId = SessionData?.CompId;
@ -52,14 +58,18 @@ function BSSubCategoryHorizontal(props) {
const Reverse1 = categoryFunction?.ImageRight && 'row-reverse'; const Reverse1 = categoryFunction?.ImageRight && 'row-reverse';
const padding = categoryFunction?.BigCard && '12px'; const padding = categoryFunction?.BigCard && '12px';
const Uppercase = categoryFunction?.TextCapitalize && 'uppercase'; 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 containerRef = useRef(null);
const [showLeftButton, setShowLeftButton] = useState(false); const [showLeftButton, setShowLeftButton] = useState(false);
const [showRightButton, setShowRightButton] = useState(true); const [showRightButton, setShowRightButton] = useState(true);
const [showUpButton, setShowUpButton] = useState(false);
const [showDownButton, setShowDownButton] = useState(false);
useEffect(() => { useEffect(() => {
const container = containerRef.current; const container = containerRef.current;
@ -73,46 +83,40 @@ function BSSubCategoryHorizontal(props) {
}, []); }, []);
useEffect(() => { useEffect(() => {
function handleResize() { const handleResize = () => {
setWidth(window.innerWidth); 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); window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); handleResize(); // initial value
}, [categoryData]);
useEffect(() => {
function handleResize() {
setWidth(window.innerWidth);
}
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);
}, [width, categoryData]); }, []);
useEffect(() => { useEffect(() => {
const container = scrollContainerRef?.current; const container = scrollContainerRef?.current;
if (!container) return;
if (scrollContainerRef?.current?.scrollLeft == 0) { const updateButtons = () => {
setShowLeftButton(false); if (isVertical) {
} else { setShowUpButton(container.scrollTop > 0);
setShowLeftButton(true); setShowDownButton(
} container.scrollTop + container.clientHeight < container.scrollHeight
if ( );
container?.scrollLeft + container?.clientWidth === } else {
container?.scrollWidth setShowLeftButton(container.scrollLeft > 0);
) { setShowRightButton(
setShowRightButton(false); container.scrollLeft + container.clientWidth < container.scrollWidth
} else { );
setShowRightButton(true); }
} };
}, [scrollContainerRef?.current?.scrollLeft, width]);
container.addEventListener('scroll', updateButtons);
updateButtons(); // initial check
return () => container.removeEventListener('scroll', updateButtons);
}, [subCategoryType]);
useEffect(() => { useEffect(() => {
// Accessing the DOM elements // 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) => { const easeLinear = (t) => {
return t; return t;
}; };
@ -258,27 +276,6 @@ function BSSubCategoryHorizontal(props) {
).unwrap(); ).unwrap();
}, [ProdCat]); }, [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) => { const handleClick = async (e, ProdSubCat, index) => {
let data = { let data = {
compId: CompId, compId: CompId,
@ -310,22 +307,73 @@ function BSSubCategoryHorizontal(props) {
// useEffect(() => { // useEffect(() => {
// setIndexVal(1); // setIndexVal(1);
// }, [ProdCat]); // }, [ProdCat]);
const handleMouseDown = (e) => {
e.preventDefault();
setIsDragging(true);
if (isVertical) {
setStartY(e.clientY);
} else {
setStartX(e.clientX);
}
};
const handleTouchStart = (e) => { const handleTouchStart = (e) => {
setIsDragging(true); 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) => { const handleTouchMove = (e) => {
if (!isDragging) return; if (!isDragging) return;
const scrollContainer = scrollContainerRef.current; const container = scrollContainerRef.current;
if (!scrollContainer) return; if (!container) return;
const deltaX = e.touches[0].clientX - startX; if (isVertical) {
scrollContainer.scrollLeft -= deltaX; const deltaY = startY - e.touches[0].clientY;
setStartX(e.touches[0].clientX); 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 = () => { const handleTouchEnd = () => {
setIsDragging(false); setIsDragging(false);
if (isVertical) {
document.body.style.overscrollBehaviorY = 'auto';
}
}; };
useEffect(() => { useEffect(() => {
@ -375,24 +423,6 @@ function BSSubCategoryHorizontal(props) {
const maindiv = document.getElementById('mainDiv'); const maindiv = document.getElementById('mainDiv');
const count = maindiv?.querySelectorAll('div'); 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) => { const lightenColor = (color, percent) => {
let r = parseInt(color.substring(1, 3), 16); let r = parseInt(color.substring(1, 3), 16);
let g = parseInt(color.substring(3, 5), 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')}`; 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; if (!result.destination) return;
let index = result?.destination?.index + 1;
const index = result.destination.index + 1;
setIndexVal(index); setIndexVal(index);
const items = Array.from(categoryData); const items = Array.from(categoryData);
const items2 = Array.from(categoryData); const itemsCopy = Array.from(categoryData);
let selectData = items2?.splice(result.source.index, 1)?.[0];
const selectedData = itemsCopy.splice(result.source.index, 1)[0];
const [movedItem] = items.splice(result.source.index, 1); const [movedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, movedItem); items.splice(result.destination.index, 0, movedItem);
await dispatch(ChangeSubcategoryData(items)); await dispatch(ChangeSubcategoryData(items));
handleClick('e', selectData.ProdSubCat, index);
handleClick('e', selectedData.ProdSubCat, index);
}; };
return ( return (
<> <div
className={
isVertical ? 'SubCategoryVertical' : 'SubCategoryHorizontal bs1'
}
ref={!isVertical ? containerRef : null}
style={
!isVertical
? {
overflowX: 'auto',
width: '100%',
whiteSpace: 'nowrap',
margin: '0',
}
: {}
}
>
{!globalAccessForOthers && !CardAccess && ( {!globalAccessForOthers && !CardAccess && (
<div <>
className="SubCategoryHorizontal bs1" {!isVertical ? (
ref={containerRef} <div style={{ width: '50px' }}>
style={{ overflowX: 'auto', width: '100%', whiteSpace: 'nowrap' }} {showLeftButton && (
> <div
{/* {isRightDisabled && <button className="SubCategoryHorizontal-icon" onClick={scrollLeft}> className="CategoryHorizontal-icon"
<LeftOutlined /> onClick={() => handleScrollClickLeft(-50, 0)}
</button>} */} >
◄
<div style={{ width: '50px' }}> </div>
{showLeftButton && ( )}
<div </div>
className="CategoryHorizontal-icon" ) : (
onClick={() => handleScrollClickLeft(-50, 0)} <div className="SubCategoryVertical-buttons">
> {showUpButton && (
◄ <button className="SubCategoryVertical-icon" onClick={scrollUp}>
</div> <UpOutlined />
)} </button>
</div> )}
{showDownButton && (
<button
className="SubCategoryVertical-icon"
onClick={scrollDown}
>
<DownOutlined />
</button>
)}
</div>
)}
<div <div
id="mainDiv" id="mainDiv"
className="SubCategoryHorizontal-scroll-container" className={
isVertical
? 'SubCategoryVertical-scroll-container'
: 'SubCategoryHorizontal-scroll-container'
}
ref={scrollContainerRef} ref={scrollContainerRef}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart} onTouchStart={handleTouchStart}
@ -476,12 +541,13 @@ function BSSubCategoryHorizontal(props) {
style={{ style={{
cursor: isDragging ? 'grabbing' : 'grab', cursor: isDragging ? 'grabbing' : 'grab',
touchAction: isDragging ? 'none' : 'auto', touchAction: isDragging ? 'none' : 'auto',
whiteSpace: 'nowrap', whiteSpace: isVertical ? 'normal' : 'nowrap',
}} }}
> >
{draggingComponent !== 'sub-category' && {draggingComponent !== 'sub-category' &&
categoryData?.map((eachData, index) => ( categoryData?.map((eachData, index) => (
<div <div
key={index}
style={{ style={{
borderRadius: Radius, borderRadius: Radius,
backgroundColor: backgroundColor:
@ -491,8 +557,6 @@ function BSSubCategoryHorizontal(props) {
SelectedSubCatgColor['BackgroundColor'], SelectedSubCatgColor['BackgroundColor'],
0.4 0.4
), ),
// backgroundColor:
// index + 1 != indexval ? SelectedSubCatgColor["BackgroundColor"] : "white",
padding: padding, padding: padding,
border: '1px solid', border: '1px solid',
borderColor: borderColor:
@ -509,43 +573,65 @@ function BSSubCategoryHorizontal(props) {
70 70
), ),
}} }}
key={index} className={
className="sampleCardhorizontalsubcat" isVertical
? 'SubCategoryVertical-sampleCard'
: 'sampleCardhorizontalsubcat'
}
onClick={(e) => onClick={(e) =>
handleClick(e, eachData.ProdSubCat, index + 1) handleClick(e, eachData.ProdSubCat, index + 1)
} }
> >
<div {
style={{ flexDirection: Reverse1 }} <TooltipWrapper
className="SubCategoryHorizontal-sub-samplecard" title={eachData.ProdSubCatName}
> placement="rightTop"
<p isMobile={isMobile}
style={{
textTransform: Uppercase,
fontFamily: SelectedFontFamily
? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className="SubCategoryHorizontal-text"
> >
{eachData.ProdSubCatName <div
? eachData.ProdSubCatName style={{ flexDirection: Reverse1 }}
: 'General'} className={
</p> isVertical
</div> ? 'SubCategoryVertical-sub-samplecard'
: 'SubCategoryHorizontal-sub-samplecard'
}
>
<p
style={{
textTransform: Uppercase,
fontFamily: SelectedFontFamily
? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className={
isVertical
? 'SubCategoryVertical-text'
: 'SubCategoryHorizontal-text'
}
>
{eachData.ProdSubCatName || 'General'}
</p>
</div>
</TooltipWrapper>
}
</div> </div>
))} ))}
{draggingComponent == 'sub-category' && ( {draggingComponent == 'sub-category' && (
<DragDropContext onDragEnd={handleSubCatDragEnd}> <DragDropContext onDragEnd={handleSubCategoryDragEnd}>
<Droppable droppableId="subCategories" direction="horizontal"> <Droppable
droppableId={
isVertical ? 'sub-category-droppable' : 'subCategories'
}
direction={isVertical ? 'vertical' : 'horizontal'}
>
{(provided) => ( {(provided) => (
<div <div
ref={provided.innerRef} ref={provided.innerRef}
{...provided.droppableProps} {...provided.droppableProps}
style={{ display: 'flex', gap: '8px' }} // or your preferred spacing style={isVertical ? {} : { display: 'flex', gap: '8px' }}
> >
{categoryData?.map((eachData, index) => ( {categoryData?.map((eachData, index) => (
<Draggable <Draggable
@ -561,6 +647,7 @@ function BSSubCategoryHorizontal(props) {
style={{ style={{
...provided.draggableProps.style, ...provided.draggableProps.style,
borderRadius: Radius, borderRadius: Radius,
marginBottom: isVertical ? 8 : 0,
backgroundColor: backgroundColor:
index + 1 !== indexval index + 1 !== indexval
? SelectedSubCatgColor['BackgroundColor'] ? SelectedSubCatgColor['BackgroundColor']
@ -588,32 +675,48 @@ function BSSubCategoryHorizontal(props) {
70 70
), ),
}} }}
className="sampleCardhorizontalsubcat" className={
isVertical
? 'SubCategoryVertical-sampleCard'
: 'sampleCardhorizontalsubcat'
}
onClick={(e) => onClick={(e) =>
handleClick(e, eachData.ProdSubCat, index + 1) handleClick(e, eachData.ProdSubCat, index + 1)
} }
> >
<div <TooltipWrapper
style={{ flexDirection: Reverse1 }} title={eachData.ProdSubCatName}
className="SubCategoryHorizontal-sub-samplecard" placement="rightTop"
isMobile={isMobile}
> >
<p <div
style={{ style={{ flexDirection: Reverse1 }}
textTransform: Uppercase, className={
fontFamily: SelectedFontFamily isVertical
? SelectedFontFamily ? 'SubCategoryVertical-sub-samplecard'
: '', : 'SubCategoryHorizontal-sub-samplecard'
color: SelectedSubCatgColor }
? SelectedSubCatgColor['FontColor']
: '',
}}
className="SubCategoryHorizontal-text"
> >
{eachData.ProdSubCatName <p
? eachData.ProdSubCatName style={{
: 'General'} textTransform: Uppercase,
</p> fontFamily: SelectedFontFamily
</div> ? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className={
isVertical
? 'SubCategoryVertical-text'
: 'SubCategoryHorizontal-text'
}
>
{eachData.ProdSubCatName || 'General'}
</p>
</div>
</TooltipWrapper>
</div> </div>
)} )}
</Draggable> </Draggable>
@ -625,21 +728,24 @@ function BSSubCategoryHorizontal(props) {
</DragDropContext> </DragDropContext>
)} )}
</div> </div>
<div
style={{ width: '50px', display: 'flex', justifyContent: 'end' }} {!isVertical && (
> <div
{showRightButton && ( style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
<div >
className="CategoryHorizontal-icon" {showRightButton && (
onClick={() => handleScrollClickRight(50, 0)} <div
> className="CategoryHorizontal-icon"
► onClick={() => handleScrollClickRight(50, 0)}
</div> >
)} ►
</div> </div>
</div> )}
</div>
)}
</>
)} )}
</> </div>
); );
} }

22
src/Pages/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.jsx
View File

@ -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(() => { useEffect(() => {
if (SelectedFontFamily) { if (SelectedFontFamily) {
WebFont.load({ WebFont.load({
@ -279,7 +259,7 @@ function BSSubCategoryVertical(props) {
useEffect(() => { useEffect(() => {
function handleResize() { function handleResize() {
setHeight(window.innerheight); setHeight(window.innerHeight);
} }
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize);

251
src/Pages/BookingScreen/Components/BSSubCategories/StandardSubcategory.jsx
View File

@ -1,135 +1,136 @@
import { useEffect, useRef, useState } from "react"; import { useEffect, useRef, useState } from 'react';
import { useSelector } from "react-redux"; import { useSelector } from 'react-redux';
import { changeProductSubCategorie, getCardDataWithoutSub, getLayoutproductCard, getLayoutSubCategories, GlobalProductCategorie, GlobalSubcategorieData } from "../../../../Features/BookingScreen/BookingData/BookingData"; import {
import { FaAngleUp } from "react-icons/fa"; changeProductSubCategorie,
import { useDispatch } from "react-redux"; getCardDataWithoutSub,
import { StoredSessionData } from "../../../../Features/ThemeChange/ThemeChange"; getLayoutproductCard,
import { ApplicationPreferences } from "../../../../Features/BrachLogin/BranchLogin"; getLayoutSubCategories,
import { useDateStore } from "../../../../Features/BookingScreen/BookingData/DateStore"; 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 StandardSubcategory = ({ handleSubCatClose, isClosing }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const ProdCat = useSelector(GlobalProductCategorie); const ProdCat = useSelector(GlobalProductCategorie);
const SubcategorieData = useSelector(GlobalSubcategorieData); const SubcategorieData = useSelector(GlobalSubcategorieData);
const SessionData = useSelector(StoredSessionData); const SessionData = useSelector(StoredSessionData);
const formRef = useRef(null); const formRef = useRef(null);
const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData); const [selectedSubCat, setSelectedSubCat] = useState(SubcategorieData);
const AppId = SessionData?.AppId; const AppId = SessionData?.AppId;
const CompId = SessionData?.CompId; const CompId = SessionData?.CompId;
const BranchId = SessionData?.BranchId; const BranchId = SessionData?.BranchId;
const UserId = SessionData?.UserId; const UserId = SessionData?.UserId;
const ApplicationPreferenceData = useSelector(ApplicationPreferences); const ApplicationPreferenceData = useSelector(ApplicationPreferences);
const { selectedDate } = useDateStore(); const { selectedDate } = useDateStore();
const salespagefields = ApplicationPreferenceData const salespagefields = ApplicationPreferenceData?.find(
?.find(pref => pref?.PreferredCatName === "Sales Page Fields") (pref) => pref?.PreferredCatName === 'Sales Page Fields'
?.PreferenceCatDetails )?.PreferenceCatDetails;
const AvailableDate = salespagefields const AvailableDate = salespagefields?.find(
?.find(type => type?.PreferredSubCatName?.toLowerCase() === "available date" && type?.PreferredStatus === "Y"); (type) =>
useEffect(() => { type?.PreferredSubCatName?.toLowerCase() === 'available date' &&
// ProdCat && type?.PreferredStatus === 'Y'
// dispatch( );
// getLayoutSubCategories({ useEffect(() => {
// CompId: CompId, // ProdCat &&
// BranchId: BranchId, // dispatch(
// AppId: AppId, // getLayoutSubCategories({
// ProdCat: ProdCat, // CompId: CompId,
// ...(AvailableDate && selectedDate // BranchId: BranchId,
// ? { // AppId: AppId,
// fromDate: selectedDate?.[0], // ProdCat: ProdCat,
// toDate:selectedDate?.[1], // ...(AvailableDate && selectedDate
// } // ? {
// : {}), // fromDate: selectedDate?.[0],
// }) // toDate:selectedDate?.[1],
// ).unwrap(); // }
setSelectedSubCat(0) // : {}),
// })
// ).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 handleSubCatClick = async (e, ProdSubCat, index) => { const data1 = {
await dispatch(changeProductSubCategorie(ProdSubCat)); CompId: CompId,
const data = { BranchId: BranchId,
compId: CompId, ProdSubCat: ProdSubCat,
branchId: BranchId, AppId: AppId,
appId: AppId, ...(AvailableDate && selectedDate
prodCat: ProdCat, ? {
...(AvailableDate && selectedDate fromDate: selectedDate?.[0],
? { toDate: selectedDate?.[1],
fromDate: selectedDate?.[0], }
toDate:selectedDate?.[1], : {}),
} };
: {}),
};
const data1 = { setSelectedSubCat(index);
CompId: CompId, if (ProdSubCat == null) {
BranchId: BranchId, console.log(selectedDate, 'selectedDate');
ProdSubCat: ProdSubCat, await dispatch(getCardDataWithoutSub(data)).unwrap();
AppId: AppId, } else {
...(AvailableDate && selectedDate // console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate")
? { // Call API with subcategory - fetch items for this subcategory
fromDate: selectedDate?.[0], await dispatch(getLayoutproductCard(data1));
toDate:selectedDate?.[1], // await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap();
} }
: {}),
};
setSelectedSubCat(index); // Remove previous border styling
if (ProdSubCat == null) { if (formRef.current && formRef.current !== e.currentTarget) {
formRef.current.classList.remove('SubCategoryVertical-sampleCard-border');
}
console.log(selectedDate,"selectedDate") // Add border to clicked element
await dispatch(getCardDataWithoutSub(data)).unwrap(); e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border');
} else { formRef.current = e.currentTarget;
};
// console.log((AvailableDate && selectedDate ? { date: selectedDate.format('YYYY-MM-DD') } : {}),selectedDate,"subcatedate") return (
// Call API with subcategory - fetch items for this subcategory <div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
await dispatch(getLayoutproductCard(data1)); <button className="closeSubCatBTN" onClick={handleSubCatClose}>
// await dispatch(changeProductSubCategorie(ProdSubCat)).unwrap(); <FaAngleUp />
</button>
<div className="subCategoryNewDiv">
{SubcategorieData?.map((item, index) => {
const key = item?.ProdSubCat ?? `general-${index}`;
const isActive = selectedSubCat === index;
} // Check if the name is null, undefined, or empty string
const displayName =
item?.ProdSubCatName && item.ProdSubCatName.trim() !== ''
? item.ProdSubCatName
: 'General';
// Remove previous border styling return (
if (formRef.current && formRef.current !== e.currentTarget) { <div
formRef.current.classList.remove('SubCategoryVertical-sampleCard-border'); key={key}
} className={`subcatNewLayout ${isActive ? 'active' : ''}`}
onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
// Add border to clicked element >
e.currentTarget?.classList?.add('SubCategoryVertical-sampleCard-border'); {displayName}
formRef.current = e.currentTarget; </div>
}; );
})}
</div>
</div>
return ( );
};
<div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}> export default StandardSubcategory;
<button className='closeSubCatBTN' onClick={handleSubCatClose}>
<FaAngleUp />
</button>
<div className="subCategoryNewDiv">
{
SubcategorieData?.map((item, index) => {
const key = item?.ProdSubCat ?? `general-${index}`;
const isActive = selectedSubCat === index;
// Check if the name is null, undefined, or empty string
const displayName =
item?.ProdSubCatName && item.ProdSubCatName.trim() !== ""
? item.ProdSubCatName
: "General";
return (
<div
key={key}
className={`subcatNewLayout ${isActive ? "active" : ""}`}
onClick={(e) => handleSubCatClick(e, item?.ProdSubCat, index)}
>
{displayName}
</div>
);
})}
</div>
</div>
)
}
export default StandardSubcategory;

87
src/Pages/BookingScreen/Components/MainPage/SelectionComponent.jsx
View File

@ -237,10 +237,12 @@ const SelectionComponent = forwardRef((props, ref) => {
const [BillingTableData, setBillingTableData] = useState([]); const [BillingTableData, setBillingTableData] = useState([]);
// selected Dropdown ids // selected Dropdown ids
const [manualChange, setManualChange] = useState(null);
const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null); const [currentLayoutsessionID, setCurrentLayoutsessionID] = useState(null);
const [SelectedLayoutId, setSelectedLayoutId] = useState(null); const [SelectedLayoutId, setSelectedLayoutId] = useState(null);
const [SelectedNavbarId, setSelectedNavbarId] = useState(null); const [SelectedNavbarId, setSelectedNavbarId] = useState(null);
const [SelectedCategoryId, setSelectedCategoryId] = useState(null); const [SelectedCategoryId, setSelectedCategoryId] = useState(null);
const [selectedCategoryName, setSelectedCategoryName] = useState(null);
const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null); const [SelectedSubCategoryId, setSelectedSubCategoryId] = useState(null);
const [SelectedCardId, setSelectedCardId] = useState(null); const [SelectedCardId, setSelectedCardId] = useState(null);
const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null); const [SelectedBillingTableId, setSelectedBillingTableId] = useState(null);
@ -439,6 +441,12 @@ const SelectionComponent = forwardRef((props, ref) => {
} }
}, [UserType]); }, [UserType]);
useEffect(() => {
if (selectedCategoryName === 'Category5') {
setSelectedSubCategoryId(null);
}
}, [selectedCategoryName]);
useEffect(() => { useEffect(() => {
let hasAccess = false; let hasAccess = false;
@ -707,7 +715,11 @@ const SelectionComponent = forwardRef((props, ref) => {
} }
dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap; dispatch(getCatFonts(CategoryData[0]?.SessionId)).unwrap;
selectCategory(editCategoryrVal?.[0]?.['ComponentId']); selectCategory(
manualChange
? CategoryData?.[0]?.['ComponentId']
: editCategoryrVal?.[0]?.['ComponentId']
);
let optionIds = templateData?.['BookingCategory']?.[1]?.map( let optionIds = templateData?.['BookingCategory']?.[1]?.map(
(item) => item?.OptionId (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(); const gettingCategoryData = await dispatch(getCategory()).unwrap();
if (gettingCategoryData?.data?.statusCode === 1) { if (gettingCategoryData?.data?.statusCode === 1) {
dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId)) dispatch(getCatFonts(gettingCategoryData?.data?.data?.[0]?.SessionId))
.unwrap; .unwrap;
setCategoryData(gettingCategoryData?.data?.data); setCategoryData(gettingCategoryData?.data?.data);
setManualChange(manualChange);
} }
}; };
const GetSubCategoryFun = async () => { const GetSubCategoryFun = async () => {
@ -1193,7 +1206,7 @@ const SelectionComponent = forwardRef((props, ref) => {
}; };
// Selected value functions // Selected value functions
const selectLayout = (e) => { const selectLayout = async (e, manualChange = false) => {
formRef.current?.setFieldsValue({ LayoutId: e }); formRef.current?.setFieldsValue({ LayoutId: e });
setSelectedLayoutId(e); setSelectedLayoutId(e);
dispatch( dispatch(
@ -1214,7 +1227,7 @@ const SelectionComponent = forwardRef((props, ref) => {
GetNavbarFun(); GetNavbarFun();
GetLayoutBackgroundFun(); GetLayoutBackgroundFun();
GetCategoryFun(); await GetCategoryFun(manualChange);
GetCardFun(); GetCardFun();
GetSubCategoryFun(); GetSubCategoryFun();
GetBillingTableFun(); GetBillingTableFun();
@ -1294,6 +1307,7 @@ const SelectionComponent = forwardRef((props, ref) => {
setSelectedCategoryId(e); setSelectedCategoryId(e);
dispatch(changeSelectedCategory({ CategoryId: e })); dispatch(changeSelectedCategory({ CategoryId: e }));
let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e); let CategoryItems = CategoryData?.filter((a) => a.ComponentId === e);
setSelectedCategoryName(CategoryItems[0]?.ComponentName);
dispatch( dispatch(
changePreviewComponents({ changePreviewComponents({
BookingCategory: [ BookingCategory: [
@ -2779,6 +2793,7 @@ const SelectionComponent = forwardRef((props, ref) => {
SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [], SelectedCategoryCheckList != undefined ? SelectedCategoryCheckList : [],
}); });
selectedCategoryName !== 'Category5' &&
ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') ShowDropDownData?.find((a) => a.OptionName === 'SubCategory')
? tempData.push({ ? tempData.push({
ComponentId: SelectedSubCategoryId, ComponentId: SelectedSubCategoryId,
@ -3140,7 +3155,7 @@ const SelectionComponent = forwardRef((props, ref) => {
label: option.ComponentName, label: option.ComponentName,
}))} }))}
label="Layout" label="Layout"
onChangeFunction={selectLayout} onChangeFunction={(e) => selectLayout(e, true)}
className="field-DropDown-Selection" className="field-DropDown-Selection"
isOnchanges={SelectedLayoutId ? true : false} isOnchanges={SelectedLayoutId ? true : false}
valueData={SelectedLayoutId} valueData={SelectedLayoutId}
@ -3306,35 +3321,38 @@ const SelectionComponent = forwardRef((props, ref) => {
</Form.Item> </Form.Item>
</div> </div>
)} )}
{ShowDropDownData?.find( {selectedCategoryName !== 'Category5' &&
(a) => a.OptionName === 'SubCategory' ShowDropDownData?.find(
) && ( (a) => a.OptionName === 'SubCategory'
<div> ) && (
<p className="Selection-Component-SubHeading">Sub Category</p> <div>
<p className="Selection-Component-SubHeading">
Sub Category
</p>
<Form.Item <Form.Item
name="SubCategoryId" name="SubCategoryId"
rules={[ rules={[
{ {
required: true, required: true,
message: 'Please Select SubCategory', message: 'Please Select SubCategory',
}, },
]} ]}
> >
<DropDowns <DropDowns
options={SubCategoryData?.map((option) => ({ options={SubCategoryData?.map((option) => ({
value: option.ComponentId, value: option.ComponentId,
label: option.ComponentName, label: option.ComponentName,
}))} }))}
label="Sub Category" label="Sub Category"
onChangeFunction={selectSubCategory} onChangeFunction={selectSubCategory}
className="field-DropDown-Selection" className="field-DropDown-Selection"
isOnchanges={SelectedSubCategoryId ? true : false} isOnchanges={SelectedSubCategoryId ? true : false}
valueData={SelectedSubCategoryId} valueData={SelectedSubCategoryId}
/> />
</Form.Item> </Form.Item>
</div> </div>
)} )}
{ShowDropDownData?.find((a) => a.OptionName === 'Card') && ( {ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
<div> <div>
<p className="Selection-Component-SubHeading">Card</p> <p className="Selection-Component-SubHeading">Card</p>
@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
</div> </div>
</div> </div>
)} )}
{ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') && {selectedCategoryName !== 'Category5' &&
ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
SubCategoryCheckList?.length > 0 && ( SubCategoryCheckList?.length > 0 && (
<div className="Selection-Component-selectContainer"> <div className="Selection-Component-selectContainer">
<div className="Selection-Component-selectheadingMainDiv"> <div className="Selection-Component-selectheadingMainDiv">

35
src/Pages/BookingScreen/Components/PreviewLayouts/PreviewLayout3.jsx
View File

@ -83,22 +83,25 @@ const PreviewLayout3 = (props) => {
)} )}
/> />
</div> </div>
<div {Preview3Data?.BookingSubCategory?.[0] !== undefined && (
style={{ <div
backgroundColor: SelectedSubCatgColor?.['OverallBackgroundColor'], style={{
}} backgroundColor:
> SelectedSubCatgColor?.['OverallBackgroundColor'],
<PCSubCategoryHor }}
categoryFunction={dynamicComponentProps( >
'SubCategory', <PCSubCategoryHor
dynamicPreviewOptions( categoryFunction={dynamicComponentProps(
Preview3Data?.BookingSubCategory?.[1], 'SubCategory',
selectedSubCategoryOptions dynamicPreviewOptions(
), Preview3Data?.BookingSubCategory?.[1],
Preview3Data?.BookingSubCategory?.[0] selectedSubCategoryOptions
)} ),
/> Preview3Data?.BookingSubCategory?.[0]
</div> )}
/>
</div>
)}
</div> </div>
</div> </div>
<div className="PCLayout3-content"> <div className="PCLayout3-content">

52
src/Pages/BookingScreen/Template/BSLayout1/BSLayout1.jsx
View File

@ -16,7 +16,7 @@ import BSBillingTable6 from '../../Components/BSBillingTables/BSBillingTable6/BS
import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx'; import BSBillingTable7 from '../../Components/BSBillingTables/BSBillingTable7/BSBillingTable7Overall.jsx';
import BSItemCard from '../../Components/BSItemCards/BSItemCard'; import BSItemCard from '../../Components/BSItemCards/BSItemCard';
import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal'; import CategoryHorizontal from '../../Components/BSCategories/BSCategoryHorizontal';
import SubCategoryVertical from '../../Components/BSSubCategories/BSSubCategoryVertical'; import SubCategory from '../../Components/BSSubCategories/BSSubCategoryHorizontal';
import { dynamicComponentProps } from '../DynamicComponentProps.js'; import { dynamicComponentProps } from '../DynamicComponentProps.js';
import { import {
SelectedGlobalLayoutColorDetail, SelectedGlobalLayoutColorDetail,
@ -185,9 +185,9 @@ const BSLayout1 = () => {
? '575px' ? '575px'
: '595px' : '595px'
: (UserType != 'Super Admin' && : (UserType != 'Super Admin' &&
UserType != 'Super Admin User' && UserType != 'Super Admin User' &&
AppExpDate?.RemainingDays <= 7) || AppExpDate?.RemainingDays <= 7) ||
AppExpDate?.PlanType?.toLowerCase() === 'extend' AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '96vh' ? '96vh'
: '99vh'; : '99vh';
@ -549,22 +549,26 @@ const BSLayout1 = () => {
</div> </div>
<div className="BSCategory1-Cardcont"> <div className="BSCategory1-Cardcont">
<div {
style={{ <div
backgroundColor: style={{
SelectedSubCatgColor?.['OverallBackgroundColor'], backgroundColor:
}} SelectedSubCatgColor?.['OverallBackgroundColor'],
> display: BookingSubCategory ? 'block' : 'none',
{Comboglobal === false && !OtherServicesglobal && ( }}
<SubCategoryVertical >
categoryFunction={dynamicComponentProps( {Comboglobal === false && !OtherServicesglobal && (
'SubCategory', <SubCategory
BSLayout1Data?.BookingSubCategory?.[1], subCategoryType={'vertical'}
BSLayout1Data?.BookingSubCategory?.[0] categoryFunction={dynamicComponentProps(
)} 'SubCategory',
/> BSLayout1Data?.BookingSubCategory?.[1],
)} BSLayout1Data?.BookingSubCategory?.[0]
</div> )}
/>
)}
</div>
}
<div <div
className="layout1-card-content" className="layout1-card-content"
@ -648,10 +652,10 @@ const BSLayout1 = () => {
{BookingBilling == 'Billing8' && <ComboSalesBillTable />} {BookingBilling == 'Billing8' && <ComboSalesBillTable />}
{BSLayout1Data?.BookingBilling?.[0] == {BSLayout1Data?.BookingBilling?.[0] ==
'StandardBilling' && ( 'StandardBilling' && (
<div className="BSCategory2New"> <div className="BSCategory2New">
<StandardTable /> <StandardTable />
</div> </div>
)} )}
</> </>
)} )}
</div> </div>

19
src/Pages/BookingScreen/Template/BSLayout4/BSLayout4.jsx
View File

@ -179,7 +179,7 @@ const BSLayout4 = () => {
const BookingCategory = BSLayout4Data?.BookingCategory; const BookingCategory = BSLayout4Data?.BookingCategory;
const BookingCard = BSLayout4Data?.BookingCard; const BookingCard = BSLayout4Data?.BookingCard;
const BookingBilling = BSLayout4Data?.BookingBilling?.[0]; const BookingBilling = BSLayout4Data?.BookingBilling?.[0];
console.log('BSLayout4Data', BookingBilling); console.log('BSLayout4Data', BookingCategory);
const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter( const DineInAccess = SettingDataSelector?.[0]?.SettingDtlDetails.filter(
(i) => i.SettingIdName === 'DineIn' (i) => i.SettingIdName === 'DineIn'
)?.[0]; )?.[0];
@ -195,9 +195,9 @@ const BSLayout4 = () => {
? '575px' ? '575px'
: '590px' : '590px'
: (UserType != 'Super Admin' && : (UserType != 'Super Admin' &&
UserType != 'Super Admin User' && UserType != 'Super Admin User' &&
AppExpDate?.RemainingDays <= 7) || AppExpDate?.RemainingDays <= 7) ||
AppExpDate?.PlanType?.toLowerCase() === 'extend' AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '96vh' ? '96vh'
: '99vh'; : '99vh';
const [ListOfInvoices, setListOfInvoices] = useState(false); const [ListOfInvoices, setListOfInvoices] = useState(false);
@ -431,8 +431,6 @@ const BSLayout4 = () => {
cursor: 'pointer', cursor: 'pointer',
}} }}
/> />
{/* <button className="BookingCloseButton"
>Booking Close</button> */}
</TooltipWrapper> </TooltipWrapper>
</div> </div>
) )
@ -488,7 +486,14 @@ const BSLayout4 = () => {
backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor, backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
}} }}
> >
<div className="BSlayout_subdiv"> {/* <div className="BSlayout_subdiv"> */}
<div
className={
BookingCategory?.[0] === 'Category5'
? 'bslayout4Cat5Flex'
: 'BSlayout_subdiv'
}
>
<div <div
className="Bslayout4_ctg" className="Bslayout4_ctg"
style={{ style={{

25
src/Pages/BookingScreen/Template/BSLayout5/BSLayout5.jsx
View File

@ -162,9 +162,9 @@ const BSLayout5 = () => {
? '580px' ? '580px'
: '590px' : '590px'
: (UserType != 'Super Admin' && : (UserType != 'Super Admin' &&
UserType != 'Super Admin User' && UserType != 'Super Admin User' &&
AppExpDate?.RemainingDays <= 7) || AppExpDate?.RemainingDays <= 7) ||
AppExpDate?.PlanType?.toLowerCase() === 'extend' AppExpDate?.PlanType?.toLowerCase() === 'extend'
? '96vh' ? '96vh'
: '99vh'; : '99vh';
const [ListOfInvoices, setListOfInvoices] = useState(false); const [ListOfInvoices, setListOfInvoices] = useState(false);
@ -432,8 +432,6 @@ const BSLayout5 = () => {
cursor: 'pointer', cursor: 'pointer',
}} }}
/> />
{/* <button className="BookingCloseButton"
>Booking Close</button> */}
</TooltipWrapper> </TooltipWrapper>
</div> </div>
) : ( ) : (
@ -509,20 +507,15 @@ const BSLayout5 = () => {
)} )}
</> </>
)} )}
{/* <div
className="salesStoreName"
style={{
color: SelectedBillColor?.['FontColor'],
backgroundColor: SelectedBillColor?.['BackgroundColor'],
}}
>
<BranchName />
</div> */}
</div> </div>
{/* <div className="BSCategory5-Contentcont"> */}
<div <div
className="BSCategory5-Contentcont" className={
style={{ width: '100vw' }} BookingCategory?.[0] === 'Category5'
? 'BSlayout5Cat5Flex'
: 'BSCategory5-Contentcont'
}
> >
<div <div
style={{ style={{

91
src/Styles/BookingScreen/Components/BSCategories/BSCategoryHorizontal.scss
View File

@ -1,8 +1,9 @@
.CategoryHorizontal { .CategoryHorizontal {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 4px 10px 10px 10px; margin: 4px 8px 10px 8px;
justify-content: space-between; justify-content: space-between;
gap: 4px;
} }
.bs1 { .bs1 {
@ -12,7 +13,6 @@
.CategoryHorizontal-master-container { .CategoryHorizontal-master-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
// flex-wrap: wrap;
column-gap: 0.7rem; column-gap: 0.7rem;
row-gap: 0.7rem; row-gap: 0.7rem;
width: max-content; width: max-content;
@ -21,11 +21,15 @@
.CategoryHorizontal-icon { .CategoryHorizontal-icon {
border: none; border: none;
font-size: 15px; font-size: 15px;
padding: 3px; padding: 8px;
border-radius: 30px; border-radius: 6px;
background-color: #e2e2e2; background-color: #d8d8d8;
margin: 10px; margin: 3px;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
} }
.CategoryHorizontal-image { .CategoryHorizontal-image {
@ -39,18 +43,8 @@
position: absolute; position: absolute;
} }
.CategoryHorizontal-icon {
border: none;
font-size: 15px;
padding: 3px;
border-radius: 30px;
background-color: #e2e2e2;
margin: 10px;
cursor: pointer;
}
.CategoryHorizontal-scroll-container { .CategoryHorizontal-scroll-container {
overflow-y: scroll; overflow-y: auto;
max-height: 300px; max-height: 300px;
scrollbar-width: none; scrollbar-width: none;
display: flex; display: flex;
@ -63,28 +57,12 @@
font-size: 14px; font-size: 14px;
} }
// ::-webkit-scrollbar-button:start {
// background-color: #333;
// border: 1px solid #666;
// }
// /* Style the scroll-down button */
// ::-webkit-scrollbar-button:end {
// background-color: #333;
// border: 1px solid #666;
// }
// ::-webkit-scrollbar {
// display: none;
// }
.CategoryHorizontal-btn-option2 { .CategoryHorizontal-btn-option2 {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 10px; padding: 8px 10px;
width: max-content !important; width: max-content !important;
cursor: pointer; cursor: pointer;
// border-radius: 20px;
} }
.CategoryHorizontal-input-style:checked + span { .CategoryHorizontal-input-style:checked + span {
@ -97,19 +75,12 @@
} }
} }
// .CategoryHorizontal-btn-option2 {
// display: flex;
// align-items: center;
// padding: 10px 10px;
// width: max-content !important;
// }
.CategoryHorizontal-btn-option2-reverse { .CategoryHorizontal-btn-option2-reverse {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
align-items: center; align-items: center;
padding: 10px 10px; padding: 10px 10px;
width: max-content !important; width: max-content !important;
// border-radius: 20px;
} }
.CategoryHorizontal-curved { .CategoryHorizontal-curved {
@ -121,7 +92,6 @@
} }
.CategoryHorizontal-scroll-container { .CategoryHorizontal-scroll-container {
// overflow: hidden !important;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
} }
@ -130,7 +100,6 @@
min-width: max-content; min-width: max-content;
display: flex; display: flex;
align-items: center; align-items: center;
// flex-grow: 1;
} }
.sampleCard:active, .sampleCard:active,
@ -140,7 +109,7 @@
.CategoryHorizontal-sub-samplecard { .CategoryHorizontal-sub-samplecard {
width: max-content; width: max-content;
padding: 3px 5px; padding: 2px 8px;
display: flex; display: flex;
align-items: center; align-items: center;
p { p {
@ -157,13 +126,8 @@
} }
.sampleCard { .sampleCard {
/* Your existing styles for sampleCard */
/* ... */
/* Add this to specify the border style */
border: 1px solid transparent; border: 1px solid transparent;
cursor: pointer; cursor: pointer;
/* Optional: add a pointer cursor to indicate clickability */
} }
.sampleCard1 { .sampleCard1 {
@ -172,7 +136,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-top: 16px; margin-top: 2px;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-weight: 400; font-weight: 400;
@ -192,14 +156,6 @@
.sampleCard-border { .sampleCard-border {
border-color: black; border-color: black;
/* Specify the border color you want */
}
.CategoryHorizontal-icon {
background-color: transparent;
border: none;
padding: 8px;
cursor: pointer;
} }
.uom-container .ant-select { .uom-container .ant-select {
@ -236,9 +192,6 @@
width: 110px !important; width: 110px !important;
} }
// .ant-input-group-wrapper {
// width: 70% !important;
// }
.quantity-amt .example { .quantity-amt .example {
width: auto !important; width: auto !important;
} }
@ -279,12 +232,8 @@
.CategoryHorizontal-scroll-container { .CategoryHorizontal-scroll-container {
overflow-y: auto !important; overflow-y: auto !important;
/* Add a vertical scrollbar when content overflows */
max-height: 300px; max-height: 300px;
/* Set a maximum height for the container */
display: flex; display: flex;
// flex-direction: row;
column-gap: 0.5rem; column-gap: 0.5rem;
} }
@ -304,18 +253,12 @@
} }
.bill-inother { .bill-inother {
// flex-direction: column;
column-gap: 1rem !important; column-gap: 1rem !important;
flex-wrap: wrap; flex-wrap: wrap;
font-size: 12px !important; font-size: 12px !important;
} }
} }
//////////////////
///
/// new
///
.CategoryHorizontalNew { .CategoryHorizontalNew {
padding: 1.5rem; padding: 1.5rem;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
@ -418,13 +361,8 @@
font-size: 15px; font-size: 15px;
line-height: 1.25rem; line-height: 1.25rem;
color: #4b5563; color: #4b5563;
// font-family: "Inter", sans-serif !important;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
// -webkit-text-stroke-width: 0.2px;
width: max-content; width: max-content;
// min-width: 150px;
// max-width: 250px;
text-align: center; text-align: center;
transition: all 0.2s ease; transition: all 0.2s ease;
white-space: nowrap; white-space: nowrap;
@ -461,7 +399,6 @@
align-items: center; align-items: center;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
// padding: 2px 16px;
gap: 10px; gap: 10px;
animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: top; transform-origin: top;
@ -522,7 +459,6 @@
.subcatNewLayout { .subcatNewLayout {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
height: 100%; height: 100%;
// background-color: #f9fafb;
cursor: pointer; cursor: pointer;
font-weight: 500; font-weight: 500;
font-size: 15px; font-size: 15px;
@ -530,7 +466,6 @@
color: #4b5563; color: #4b5563;
font-family: "Inter", ui-sans-serif, system-ui, sans-serif; font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
width: max-content; width: max-content;
// min-width: 150px;
border-radius: 4px; border-radius: 4px;
text-align: center; text-align: center;
transition: all 0.2s ease; transition: all 0.2s ease;

2
src/Styles/BookingScreen/Components/BSNavbar/BSNavbar1.scss
View File

@ -520,7 +520,7 @@
padding: 10px 30px 10px 30px; padding: 10px 30px 10px 30px;
} }
.search-icon { .search-icon {
top: 53%; top: 43%;
} }
} }
.BsNavbar1FullScreen { .BsNavbar1FullScreen {

2
src/Styles/BookingScreen/Components/BSSubCategories/BSSubCategoryVertical.scss
View File

@ -106,7 +106,7 @@
.SubCategoryVertical-sampleCard { .SubCategoryVertical-sampleCard {
min-width: max-content; min-width: max-content;
flex-grow: 1; // flex-grow: 1;
} }
.SubCategoryVertical-sub-samplecard p { .SubCategoryVertical-sub-samplecard p {

1
src/Styles/BookingScreen/Template/BSLayout2/BSLayout2.scss
View File

@ -90,6 +90,7 @@ body {
overflow: hidden; overflow: hidden;
justify-content: space-between; justify-content: space-between;
background-color: #f1f5f9; background-color: #f1f5f9;
width: 100%;
@media (max-width: 768px) { @media (max-width: 768px) {
height: 85vh; height: 85vh;

20
src/Styles/BookingScreen/Template/BSLayout4/BSLayout4.scss
View File

@ -25,12 +25,14 @@
display: flex; display: flex;
overflow: scroll; overflow: scroll;
height: 100%; height: 100%;
margin-top: 10px;
} }
.BSlayout_subdiv { .BSlayout_subdiv {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
width: 100%;
flex-direction: row; flex-direction: row;
} }
@ -43,7 +45,7 @@
} }
.Bslayout4_table { .Bslayout4_table {
width: 426px !important; width: 425px !important;
height: clamp(68vh, 71rem, 50vh); height: clamp(68vh, 71rem, 50vh);
background-color: #fff; background-color: #fff;
} }
@ -264,3 +266,19 @@
font-size: 10px !important; font-size: 10px !important;
} }
} }
.bslayout4Cat5Flex {
display: flex;
flex-direction: column;
width: 68%;
@media (max-width: 768px) {
width: 100%;
}
.CategoryHorizontalNew {
width: 100%;
}
.Bslayout4_card {
width: 100% !important;
}
}

19
src/Styles/BookingScreen/Template/BSLayout5/BSLayout5.scss
View File

@ -18,11 +18,27 @@
.BSCategory5-Contentcont { .BSCategory5-Contentcont {
display: flex; display: flex;
height: 100%; height: 100%;
width: 70%;
@media (max-width: 768px) {
width: 100%;
}
}
.BSlayout5Cat5Flex {
display: flex;
height: 100%;
width: 70%;
flex-direction: column;
@media (max-width: 768px) {
width: 100%;
}
.CategoryHorizontalNew-scroll-container {
width: 97%;
}
} }
.BSCategory5-tablecont { .BSCategory5-tablecont {
width: 430px; width: 430px;
height: clamp(73vh, 71rem, 50vh); height: clamp(85vh, 71rem, 50vh);
background-color: #fff; background-color: #fff;
} }
@media (min-width: 500px) and (max-width: 768px) { @media (min-width: 500px) and (max-width: 768px) {
@ -34,7 +50,6 @@
width: 0px !important; width: 0px !important;
z-index: 3; z-index: 3;
} }
//nk
.BSLayout5-Master .BsTable2-Master { .BSLayout5-Master .BsTable2-Master {
height: 0 !important; height: 0 !important;
} }