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';
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' ? (
<div
className={categoryType === 'vertical' ? "CategoryVertical" : "CategoryHorizontal bs1"}
className={
categoryType === 'vertical'
? 'CategoryVertical'
: 'CategoryHorizontal bs1'
}
ref={containerRef}
style={{ maxWidth: '100%' }}
>
@ -799,14 +809,23 @@ function BSCategoryHorizontal(props) {
display: 'flex',
alignItems: 'center',
padding: '0 0.5rem',
gap: '4px',
}}
>
{(showLeftButton || showUpButton) && (
{showLeftButton && categoryType !== 'vertical' && (
<div
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>
)}
@ -827,11 +846,24 @@ function BSCategoryHorizontal(props) {
)}
</div>
</div>
{showDownButton && categoryType === 'vertical' && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickDown(50, 0)}
>
▼
</div>
)}
</div>
<div
id="mainDiv"
className={categoryType === 'vertical' ? "CategoryVertical-scroll-container" : "CategoryHorizontal-scroll-container"}
className={
categoryType === 'vertical'
? 'CategoryVertical-scroll-container'
: 'CategoryHorizontal-scroll-container'
}
ref={scrollContainerRef}
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
@ -841,7 +873,7 @@ function BSCategoryHorizontal(props) {
onTouchEnd={handleTouchEnd}
onMouseLeave={handleMouseUp}
style={{
marginTop: '1rem',
marginTop: '2px',
display: 'flex',
pointerEvents: OrderType === 'Failed' ? 'none' : 'auto',
}}
@ -854,9 +886,9 @@ function BSCategoryHorizontal(props) {
backgroundColor:
!accessOther && accessToCard
? lightenColor(
SelectedCatgColor?.['BackgroundColor'],
0.4
)
SelectedCatgColor?.['BackgroundColor'],
0.4
)
: SelectedCatgColor?.['BackgroundColor'],
padding: padding,
border: accessToCard ? '1px solid' : undefined,
@ -867,9 +899,9 @@ function BSCategoryHorizontal(props) {
: SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff'
: darkenColor(
SelectedCatgColor?.['BackgroundColor'],
70
)
SelectedCatgColor?.['BackgroundColor'],
70
)
: undefined,
}}
className="sampleCard"
@ -903,9 +935,9 @@ function BSCategoryHorizontal(props) {
backgroundColor:
!accessOther && !accessToCard && -2 == indexval
? lightenColor(
SelectedCatgColor?.['BackgroundColor'],
0.4
)
SelectedCatgColor?.['BackgroundColor'],
0.4
)
: SelectedCatgColor?.['BackgroundColor'],
padding: padding,
border:
@ -951,9 +983,9 @@ function BSCategoryHorizontal(props) {
? index != indexval
? SelectedCatgColor?.['BackgroundColor']
: lightenColor(
SelectedCatgColor?.['BackgroundColor'],
0.4
)
SelectedCatgColor?.['BackgroundColor'],
0.4
)
: SelectedCatgColor?.['BackgroundColor'],
padding: padding,
border: '1px solid',
@ -977,7 +1009,11 @@ function BSCategoryHorizontal(props) {
>
<div
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 && (
<img
@ -1013,8 +1049,14 @@ function BSCategoryHorizontal(props) {
{Isdragging && draggingComponent == 'category' && (
<DragDropContext onDragEnd={handleDragEnd}>
<Droppable
droppableId={categoryType === 'vertical' ? "categories" : "droppable-category"}
direction={categoryType === 'vertical' ? "vertical" : "horizontal"}
droppableId={
categoryType === 'vertical'
? 'categories'
: 'droppable-category'
}
direction={
categoryType === 'vertical' ? 'vertical' : 'horizontal'
}
>
{(provided) => (
<div
@ -1022,9 +1064,9 @@ function BSCategoryHorizontal(props) {
{...provided.droppableProps}
style={{
display: 'flex',
flexDirection: categoryType === 'vertical' ? 'column' : 'row',
// overflowX: "auto",
gap: '8px', // optional spacing between cards
flexDirection:
categoryType === 'vertical' ? 'column' : 'row',
gap: '8px',
}}
>
{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) {
>
<div
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 && (
<img
@ -1124,16 +1170,16 @@ function BSCategoryHorizontal(props) {
backgroundColor:
!accessOther && accessToCard
? lightenColor(
SelectedCatgColor?.['BackgroundColor'],
0.4
)
SelectedCatgColor?.['BackgroundColor'],
0.4
)
: SelectedCatgColor?.['BackgroundColor'],
padding: padding,
border: accessToCard && '1px solid',
borderColor:
accessToCard &&
!accessOther &&
SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
!accessOther &&
SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
? '#000000'
: SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff'
@ -1173,7 +1219,7 @@ function BSCategoryHorizontal(props) {
border: accessOther && '1px solid',
borderColor:
accessOther &&
SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
SelectedCatgColor?.['BackgroundColor'] == '#ffffff'
? '#000000'
: SelectedCatgColor?.['BackgroundColor'] === '#000000'
? '#ffffff'
@ -1207,12 +1253,12 @@ function BSCategoryHorizontal(props) {
<div
style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
>
{(showRightButton || showDownButton) && (
{showRightButton && categoryType !== 'vertical' && (
<div
className="CategoryHorizontal-icon"
onClick={categoryType === 'vertical' ? () => handleScrollClickDown(50, 0) : () => handleScrollClickRight(5, 5)}
onClick={() => handleScrollClickRight(5, 5)}
>
{categoryType === 'vertical' ? '▼' : '►'}
►
</div>
)}
</div>
@ -1220,15 +1266,6 @@ function BSCategoryHorizontal(props) {
) : (
<>
<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 && (
<div
className="CategoryHorizontalNew-scroll-container"
@ -1263,7 +1300,6 @@ function BSCategoryHorizontal(props) {
style={{ flexDirection: Reverse1 }}
className="CategoryHorizontal-sub-samplecard"
>
{/* {categoryFunction?.Image && <img src={catLogo} alt="" />} */}
<p
style={{
textTransform: Uppercase,
@ -1303,16 +1339,7 @@ function BSCategoryHorizontal(props) {
{/* )} */}
</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 && (
<>
<StandardSubcategory
@ -1324,7 +1351,11 @@ function BSCategoryHorizontal(props) {
</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 '../../../../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 (
<>
<div
className={
isVertical ? 'SubCategoryVertical' : 'SubCategoryHorizontal bs1'
}
ref={!isVertical ? containerRef : null}
style={
!isVertical
? {
overflowX: 'auto',
width: '100%',
whiteSpace: 'nowrap',
margin: '0',
}
: {}
}
>
{!globalAccessForOthers && !CardAccess && (
<div
className="SubCategoryHorizontal bs1"
ref={containerRef}
style={{ overflowX: 'auto', width: '100%', whiteSpace: 'nowrap' }}
>
{/* {isRightDisabled && <button className="SubCategoryHorizontal-icon" onClick={scrollLeft}>
<LeftOutlined />
</button>} */}
<div style={{ width: '50px' }}>
{showLeftButton && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickLeft(-50, 0)}
>
◄
</div>
)}
</div>
<>
{!isVertical ? (
<div style={{ width: '50px' }}>
{showLeftButton && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickLeft(-50, 0)}
>
◄
</div>
)}
</div>
) : (
<div className="SubCategoryVertical-buttons">
{showUpButton && (
<button className="SubCategoryVertical-icon" onClick={scrollUp}>
<UpOutlined />
</button>
)}
{showDownButton && (
<button
className="SubCategoryVertical-icon"
onClick={scrollDown}
>
<DownOutlined />
</button>
)}
</div>
)}
<div
id="mainDiv"
className="SubCategoryHorizontal-scroll-container"
className={
isVertical
? 'SubCategoryVertical-scroll-container'
: 'SubCategoryHorizontal-scroll-container'
}
ref={scrollContainerRef}
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
@ -476,12 +541,13 @@ function BSSubCategoryHorizontal(props) {
style={{
cursor: isDragging ? 'grabbing' : 'grab',
touchAction: isDragging ? 'none' : 'auto',
whiteSpace: 'nowrap',
whiteSpace: isVertical ? 'normal' : 'nowrap',
}}
>
{draggingComponent !== 'sub-category' &&
categoryData?.map((eachData, index) => (
<div
key={index}
style={{
borderRadius: Radius,
backgroundColor:
@ -491,8 +557,6 @@ function BSSubCategoryHorizontal(props) {
SelectedSubCatgColor['BackgroundColor'],
0.4
),
// backgroundColor:
// index + 1 != indexval ? SelectedSubCatgColor["BackgroundColor"] : "white",
padding: padding,
border: '1px solid',
borderColor:
@ -509,43 +573,65 @@ function BSSubCategoryHorizontal(props) {
70
),
}}
key={index}
className="sampleCardhorizontalsubcat"
className={
isVertical
? 'SubCategoryVertical-sampleCard'
: 'sampleCardhorizontalsubcat'
}
onClick={(e) =>
handleClick(e, eachData.ProdSubCat, index + 1)
}
>
<div
style={{ flexDirection: Reverse1 }}
className="SubCategoryHorizontal-sub-samplecard"
>
<p
style={{
textTransform: Uppercase,
fontFamily: SelectedFontFamily
? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className="SubCategoryHorizontal-text"
{
<TooltipWrapper
title={eachData.ProdSubCatName}
placement="rightTop"
isMobile={isMobile}
>
{eachData.ProdSubCatName
? eachData.ProdSubCatName
: 'General'}
</p>
</div>
<div
style={{ flexDirection: Reverse1 }}
className={
isVertical
? '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>
))}
{draggingComponent == 'sub-category' && (
<DragDropContext onDragEnd={handleSubCatDragEnd}>
<Droppable droppableId="subCategories" direction="horizontal">
<DragDropContext onDragEnd={handleSubCategoryDragEnd}>
<Droppable
droppableId={
isVertical ? 'sub-category-droppable' : 'subCategories'
}
direction={isVertical ? 'vertical' : 'horizontal'}
>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
style={{ display: 'flex', gap: '8px' }} // or your preferred spacing
style={isVertical ? {} : { display: 'flex', gap: '8px' }}
>
{categoryData?.map((eachData, index) => (
<Draggable
@ -561,6 +647,7 @@ function BSSubCategoryHorizontal(props) {
style={{
...provided.draggableProps.style,
borderRadius: Radius,
marginBottom: isVertical ? 8 : 0,
backgroundColor:
index + 1 !== indexval
? SelectedSubCatgColor['BackgroundColor']
@ -588,32 +675,48 @@ function BSSubCategoryHorizontal(props) {
70
),
}}
className="sampleCardhorizontalsubcat"
className={
isVertical
? 'SubCategoryVertical-sampleCard'
: 'sampleCardhorizontalsubcat'
}
onClick={(e) =>
handleClick(e, eachData.ProdSubCat, index + 1)
}
>
<div
style={{ flexDirection: Reverse1 }}
className="SubCategoryHorizontal-sub-samplecard"
<TooltipWrapper
title={eachData.ProdSubCatName}
placement="rightTop"
isMobile={isMobile}
>
<p
style={{
textTransform: Uppercase,
fontFamily: SelectedFontFamily
? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className="SubCategoryHorizontal-text"
<div
style={{ flexDirection: Reverse1 }}
className={
isVertical
? 'SubCategoryVertical-sub-samplecard'
: 'SubCategoryHorizontal-sub-samplecard'
}
>
{eachData.ProdSubCatName
? eachData.ProdSubCatName
: 'General'}
</p>
</div>
<p
style={{
textTransform: Uppercase,
fontFamily: SelectedFontFamily
? SelectedFontFamily
: '',
color: SelectedSubCatgColor
? SelectedSubCatgColor['FontColor']
: '',
}}
className={
isVertical
? 'SubCategoryVertical-text'
: 'SubCategoryHorizontal-text'
}
>
{eachData.ProdSubCatName || 'General'}
</p>
</div>
</TooltipWrapper>
</div>
)}
</Draggable>
@ -625,21 +728,24 @@ function BSSubCategoryHorizontal(props) {
</DragDropContext>
)}
</div>
<div
style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
>
{showRightButton && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickRight(50, 0)}
>
►
</div>
)}
</div>
</div>
{!isVertical && (
<div
style={{ width: '50px', display: 'flex', justifyContent: 'end' }}
>
{showRightButton && (
<div
className="CategoryHorizontal-icon"
onClick={() => handleScrollClickRight(50, 0)}
>
►
</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(() => {
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);

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

@ -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],
}
: {}),
};
<div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
<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;
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 (
<div className={`subCategoryNewDiv-Main ${isClosing ? 'closing' : ''}`}>
<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([]);
// 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) => {
</Form.Item>
</div>
)}
{ShowDropDownData?.find(
(a) => a.OptionName === 'SubCategory'
) && (
<div>
<p className="Selection-Component-SubHeading">Sub Category</p>
{selectedCategoryName !== 'Category5' &&
ShowDropDownData?.find(
(a) => a.OptionName === 'SubCategory'
) && (
<div>
<p className="Selection-Component-SubHeading">
Sub Category
</p>
<Form.Item
name="SubCategoryId"
rules={[
{
required: true,
message: 'Please Select SubCategory',
},
]}
>
<DropDowns
options={SubCategoryData?.map((option) => ({
value: option.ComponentId,
label: option.ComponentName,
}))}
label="Sub Category"
onChangeFunction={selectSubCategory}
className="field-DropDown-Selection"
isOnchanges={SelectedSubCategoryId ? true : false}
valueData={SelectedSubCategoryId}
/>
</Form.Item>
</div>
)}
<Form.Item
name="SubCategoryId"
rules={[
{
required: true,
message: 'Please Select SubCategory',
},
]}
>
<DropDowns
options={SubCategoryData?.map((option) => ({
value: option.ComponentId,
label: option.ComponentName,
}))}
label="Sub Category"
onChangeFunction={selectSubCategory}
className="field-DropDown-Selection"
isOnchanges={SelectedSubCategoryId ? true : false}
valueData={SelectedSubCategoryId}
/>
</Form.Item>
</div>
)}
{ShowDropDownData?.find((a) => a.OptionName === 'Card') && (
<div>
<p className="Selection-Component-SubHeading">Card</p>
@ -4006,7 +4024,8 @@ const SelectionComponent = forwardRef((props, ref) => {
</div>
</div>
)}
{ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
{selectedCategoryName !== 'Category5' &&
ShowDropDownData?.find((a) => a.OptionName === 'SubCategory') &&
SubCategoryCheckList?.length > 0 && (
<div className="Selection-Component-selectContainer">
<div className="Selection-Component-selectheadingMainDiv">

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

@ -83,22 +83,25 @@ const PreviewLayout3 = (props) => {
)}
/>
</div>
<div
style={{
backgroundColor: SelectedSubCatgColor?.['OverallBackgroundColor'],
}}
>
<PCSubCategoryHor
categoryFunction={dynamicComponentProps(
'SubCategory',
dynamicPreviewOptions(
Preview3Data?.BookingSubCategory?.[1],
selectedSubCategoryOptions
),
Preview3Data?.BookingSubCategory?.[0]
)}
/>
</div>
{Preview3Data?.BookingSubCategory?.[0] !== undefined && (
<div
style={{
backgroundColor:
SelectedSubCatgColor?.['OverallBackgroundColor'],
}}
>
<PCSubCategoryHor
categoryFunction={dynamicComponentProps(
'SubCategory',
dynamicPreviewOptions(
Preview3Data?.BookingSubCategory?.[1],
selectedSubCategoryOptions
),
Preview3Data?.BookingSubCategory?.[0]
)}
/>
</div>
)}
</div>
</div>
<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 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 = () => {
</div>
<div className="BSCategory1-Cardcont">
<div
style={{
backgroundColor:
SelectedSubCatgColor?.['OverallBackgroundColor'],
}}
>
{Comboglobal === false && !OtherServicesglobal && (
<SubCategoryVertical
categoryFunction={dynamicComponentProps(
'SubCategory',
BSLayout1Data?.BookingSubCategory?.[1],
BSLayout1Data?.BookingSubCategory?.[0]
)}
/>
)}
</div>
{
<div
style={{
backgroundColor:
SelectedSubCatgColor?.['OverallBackgroundColor'],
display: BookingSubCategory ? 'block' : 'none',
}}
>
{Comboglobal === false && !OtherServicesglobal && (
<SubCategory
subCategoryType={'vertical'}
categoryFunction={dynamicComponentProps(
'SubCategory',
BSLayout1Data?.BookingSubCategory?.[1],
BSLayout1Data?.BookingSubCategory?.[0]
)}
/>
)}
</div>
}
<div
className="layout1-card-content"
@ -648,10 +652,10 @@ const BSLayout1 = () => {
{BookingBilling == 'Billing8' && <ComboSalesBillTable />}
{BSLayout1Data?.BookingBilling?.[0] ==
'StandardBilling' && (
<div className="BSCategory2New">
<StandardTable />
</div>
)}
<div className="BSCategory2New">
<StandardTable />
</div>
)}
</>
)}
</div>

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

@ -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',
}}
/>
{/* <button className="BookingCloseButton"
>Booking Close</button> */}
</TooltipWrapper>
</div>
)
@ -488,7 +486,14 @@ const BSLayout4 = () => {
backgroundColor: GlobalLayoutColorDetail?.OverallBackgroundColor,
}}
>
<div className="BSlayout_subdiv">
{/* <div className="BSlayout_subdiv"> */}
<div
className={
BookingCategory?.[0] === 'Category5'
? 'bslayout4Cat5Flex'
: 'BSlayout_subdiv'
}
>
<div
className="Bslayout4_ctg"
style={{

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

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

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

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

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

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

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

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

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

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

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

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

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

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