fascano/web-menu-react-version-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes

Browse Source 
- clean coupon on success order
- in menu on clicking on the sticky categories make scroll jump to the category title postion exactly
This commit is contained in:
Mohammed Al-yaseen
2026-01-04 07:46:21 +03:00
parent f294138d30
commit 102415fe8b
3 changed files with 119 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/contexts/ScrollHandlerContext.tsx
View File

@@ -42,12 +42,22 @@ export function ScrollHandlerProvider({ children }: { children: ReactNode }) {
const scrollToCategory = useCallback((categoryId: number) => {
const categoryRef = categoryRefs.current?.[categoryId];
if (categoryRef) {
categoryRef.scrollIntoView({
// Get the sticky header height (70px when sticky, 0 when not)
const stickyHeaderHeight = isCategoriesSticky && categoriesContainerRef.current
? categoriesContainerRef.current.offsetHeight
: 0;
// Calculate the position of the category element
const elementPosition = categoryRef.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - stickyHeaderHeight;
// Scroll to the exact position, accounting for sticky header
window.scrollTo({
top: offsetPosition,
behavior: "smooth",
block: "start",
});
}
}, []);
}, [isCategoriesSticky, categoriesContainerRef]);
return (
<ScrollHandlerContext.Provider

13
src/features/order/orderSlice.ts
View File

@@ -364,6 +364,19 @@ const orderSlice = createSlice({
state.collectionMethod = "";
state.paymentMethod = "";
state.loyaltyValidationError = null;
state.discount = {
value: 0,
isGift: false,
isDiscount: false,
};
state.plateCar = "";
state.pickupDate = "";
state.pickupTime = "";
state.pickupType = "";
state.estimateWay = "";
state.order = null;
state.splitBillAmount = 0;
state.customerName = "";
// Clear all cart data from localStorage
if (typeof window !== "undefined") {
Object.values(CART_STORAGE_KEYS)

191
src/pages/menu/components/AddToCartButton/AddToCartButton.tsx
View File

@@ -158,107 +158,102 @@ export function AddToCartButton({ item }: { item: Product }) {
}
};
return isInCart && !hasOptions ? (
<>
<div
className={styles.cartItemActions}
onClick={(e) => {
e.stopPropagation();
e.preventDefault;
}}
>
<div className={styles.quantityControls}>
<div className={styles.quantityInputContainer}>
<Button
shape="circle"
iconPlacement="start"
icon={<MinusOutlined title="minus" style={{ color: "black" }} />}
size="small"
onClick={handleMinusClick}
className={styles.addButton}
style={{
backgroundColor: "white",
width: 28,
height: 28,
border: "none",
}}
/>
<InputNumber
min={1}
max={99}
value={totalQuantity}
onClick={(e) => {
e.stopPropagation();
e.preventDefault;
}}
onChange={(value: number | null) =>
dispatch(
updateQuantity({
id: item.id,
uniqueId: basicCartItem?.uniqueId || "",
quantity: value || 1,
}),
)
}
size="small"
controls={false}
className={styles.quantityInput}
name="id"
/>
<Button
shape="circle"
iconPlacement="start"
icon={<PlusIcon color="#FFF" />}
size="small"
onClick={handlePlusClick}
disabled={totalQuantity >= 99}
className={styles.addButton}
style={{
backgroundColor: "#FFC600",
width: 28,
height: 28,
}}
/>
</div>
</div>
</div>
</>
) : (
return (
<div
style={{
position: "absolute",
bottom: -11,
[isRTL ? "left" : "right"]: -2,
borderRadius: "50%",
className={styles.cartItemActions}
onClick={(e) => {
e.stopPropagation();
e.preventDefault;
}}
>
<Button
shape="circle"
iconPlacement="start"
size="small"
icon={
hasOptions ? (
<NextIcon iconColor="#302E3E" iconSize={16} />
) : (
<PlusOutlined title="add" />
)
}
onClick={handleClick}
disabled={!hasOptions && totalQuantity >= 99}
className={styles.addButton}
style={{
color: "#302E3E",
backgroundColor: "white",
width: 28,
height: 28,
position: "absolute",
bottom: 16,
[isRTL ? "left" : "right"]: 7,
minWidth: 28,
boxShadow:
"0px 1px 2px 0px #8585851A, 0px 3px 3px 0px #85858517, -1px 7px 4px 0px #8585850D, -1px 13px 5px 0px #85858503, -2px 20px 6px 0px #85858500",
}}
/>
{isInCart && !hasOptions ? (
<>
<div className={styles.quantityControls}>
<div className={styles.quantityInputContainer}>
<Button
shape="circle"
iconPlacement="start"
icon={
<MinusOutlined title="minus" style={{ color: "black" }} />
}
size="small"
onClick={handleMinusClick}
className={styles.addButton}
style={{
backgroundColor: "white",
width: 28,
height: 28,
border: "none",
}}
/>
<InputNumber
min={1}
max={99}
value={totalQuantity}
onClick={(e) => {
e.stopPropagation();
e.preventDefault;
}}
onChange={(value: number | null) =>
dispatch(
updateQuantity({
id: item.id,
uniqueId: basicCartItem?.uniqueId || "",
quantity: value || 1,
}),
)
}
size="small"
controls={false}
className={styles.quantityInput}
name="id"
/>
<Button
shape="circle"
iconPlacement="start"
icon={<PlusIcon color="#FFF" />}
size="small"
onClick={handlePlusClick}
disabled={totalQuantity >= 99}
className={styles.addButton}
style={{
backgroundColor: "#FFC600",
width: 28,
height: 28,
}}
/>
</div>
</div>
</>
) : (
<Button
shape="circle"
iconPlacement="start"
size="small"
icon={
hasOptions ? (
<NextIcon iconColor="#302E3E" iconSize={16} />
) : (
<PlusOutlined title="add" />
)
}
onClick={handleClick}
disabled={!hasOptions && totalQuantity >= 99}
className={styles.addButton}
style={{
color: "#302E3E",
backgroundColor: "white",
width: 28,
height: 28,
position: "absolute",
[isRTL ? "left" : "right"]: -87,
bottom: 3,
minWidth: 28,
boxShadow:
"0px 1px 2px 0px #8585851A, 0px 3px 3px 0px #85858517, -1px 7px 4px 0px #8585850D, -1px 13px 5px 0px #85858503, -2px 20px 6px 0px #85858500",
}}
/>
)}
</div>
);
}