Initial commit
This commit is contained in:
78
src/pages/menu/components/AddToCart.tsx
Normal file
78
src/pages/menu/components/AddToCart.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import { Button, Grid } from "antd";
|
||||
import { addItem } from "features/order/orderSlice";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export function AddToCart({ item }: { item: Product }) {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const { xs, sm } = useBreakpoint();
|
||||
|
||||
const handleQuickAdd = (item: Product) => {
|
||||
dispatch(
|
||||
addItem({
|
||||
item: {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
price: item.price,
|
||||
image: item.image,
|
||||
description: item.description,
|
||||
variant: "None",
|
||||
extras: [],
|
||||
extrasgroup: [],
|
||||
},
|
||||
quantity: 1,
|
||||
})
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Button
|
||||
shape="round"
|
||||
title="add"
|
||||
iconPosition="start"
|
||||
disabled={item.isHasVarint}
|
||||
icon={
|
||||
<PlusOutlined
|
||||
title="add"
|
||||
style={{
|
||||
position: "relative",
|
||||
top: "-1px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
size={xs || sm ? "small" : "middle"}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleQuickAdd(item);
|
||||
}}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -10,
|
||||
[isRTL ? "right" : "left"]: xs || sm ? "5%" : "15%",
|
||||
zIndex: 1,
|
||||
width: xs || sm ? 82 : 100,
|
||||
height: xs || sm ? 32 : 44,
|
||||
fontSize: xs || sm ? "1rem" : 18,
|
||||
fontWeight: 600,
|
||||
border: 0,
|
||||
backgroundColor: item.isHasVarint
|
||||
? "rgba(233, 233, 233, 1)"
|
||||
: colors.primary,
|
||||
color: "#FFF",
|
||||
// boxShadow:
|
||||
// theme === "light"
|
||||
// ? "0 2px 0 rgba(0,0,0,0.02)"
|
||||
// : "0 2px 0 #6b6b6b",
|
||||
}}
|
||||
>
|
||||
{t("common.add")}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
33
src/pages/menu/components/BackButton.tsx
Normal file
33
src/pages/menu/components/BackButton.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Button } from "antd";
|
||||
import BackIcon from "components/Icons/BackIcon";
|
||||
|
||||
|
||||
interface BackButtonProps {
|
||||
navigateBack?: boolean; // true = use router.back(), false = just clear state
|
||||
}
|
||||
|
||||
export default function BackButton({ navigateBack = true }: BackButtonProps) {
|
||||
const handleBack = () => {
|
||||
if (navigateBack) window.history.back();
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
style={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: 0,
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
icon={
|
||||
<div style={{ position: "relative", top: 2.5, right: 1 }}>
|
||||
<BackIcon />
|
||||
</div>
|
||||
}
|
||||
onClick={handleBack}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,634 @@
|
||||
/* MenuPage.module.css */
|
||||
|
||||
/* Product Link Transitions */
|
||||
/*
|
||||
.productLink {
|
||||
display: block;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* }
|
||||
|
||||
.productLink::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--link-glow),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.productLink:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.productLink:hover {
|
||||
transform: translateY(-8px);
|
||||
filter: brightness(1.05);
|
||||
}
|
||||
|
||||
.productLink:active {
|
||||
transform: translateY(-4px);
|
||||
transition: all 0.1s ease;
|
||||
} */
|
||||
|
||||
/* Enhanced card hover effects */
|
||||
/* .productLink:hover .ant-card {
|
||||
box-shadow: 0 12px 32px var(--link-shadow);
|
||||
transform: scale(1.02);
|
||||
border-color: var(--link-border);
|
||||
}
|
||||
|
||||
.productLink .ant-card {
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
border: 1px solid transparent;
|
||||
} */
|
||||
|
||||
/* Theme-aware glow effect */
|
||||
/* .productLink:hover .ant-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 20px var(--link-shadow-glow);
|
||||
opacity: 0;
|
||||
animation: glowPulse 2s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
} */
|
||||
|
||||
/* Dark theme adjustments for product links */
|
||||
/* @media (prefers-color-scheme: dark) {
|
||||
.productLink {
|
||||
--link-glow: rgba(255, 198, 0, 0.15);
|
||||
--link-glow-hover: rgba(255, 198, 0, 0.25);
|
||||
--link-border: rgba(255, 198, 0, 0.4);
|
||||
--link-shadow: rgba(255, 198, 0, 0.25);
|
||||
--link-shadow-glow: rgba(255, 198, 0, 0.4);
|
||||
}
|
||||
} */
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--ant-bg-container);
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
overflow: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
height: 8.5rem;
|
||||
overflow-x: auto;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: position, transform, opacity, filter;
|
||||
transform-origin: top center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem 1rem 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Enhanced responsive categories container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.categoriesContainer {
|
||||
height: 160px;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 12px 16px !important;
|
||||
height: 70px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.categoriesContainer {
|
||||
height: 180px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 16px 24px !important;
|
||||
height: 70px !important;
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.categoryMenuItemImage {
|
||||
width: 104px !important;
|
||||
min-width: 90px !important;
|
||||
height: 78px;
|
||||
object-fit: cover;
|
||||
border-radius: 0.375rem;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.categoryTab {
|
||||
padding: 0px 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.categoryTab {
|
||||
padding: 0px 14px;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab:hover {
|
||||
color: var(--primary) !important;
|
||||
background-color: rgba(54, 54, 54, 0.9) !important;
|
||||
border-color: rgba(255, 198, 0, 0.3) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab.active {
|
||||
color: var(--primary) !important;
|
||||
background-color: rgba(255, 198, 0, 0.1) !important;
|
||||
border-bottom-color: var(--primary) !important;
|
||||
box-shadow: 0 2px 8px rgba(255, 198, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Active category card styles */
|
||||
.activeCategoryCard {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.activeCategoryCard::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, var(--ant-color-primary), transparent);
|
||||
border-radius: 8px;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
animation: activePulse 2s ease-in-out infinite;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.activeCategoryCard:hover {
|
||||
border-color: var(--ant-color-primary) !important;
|
||||
}
|
||||
|
||||
/* Dark theme active category card styles */
|
||||
:global(.darkApp) .activeCategoryCard {
|
||||
box-shadow: 0 4px 12px rgba(255, 198, 0, 0.3) !important;
|
||||
background-color: rgba(255, 198, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .activeCategoryCard::before {
|
||||
background: linear-gradient(45deg, var(--primary), transparent);
|
||||
animation: darkActivePulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes darkActivePulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.darkApp) .activeCategoryCard:hover {
|
||||
border-color: var(--primary) !important;
|
||||
box-shadow: 0 6px 16px rgba(255, 198, 0, 0.4) !important;
|
||||
background-color: rgba(255, 198, 0, 0.08) !important;
|
||||
}
|
||||
|
||||
/* Smooth transitions for category cards */
|
||||
.categoryCard {
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.categoryCard:hover {
|
||||
transform: scale(1.02);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Enhanced smooth scrolling for category container */
|
||||
.categoriesContainer {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Staggered animation for category cards when becoming sticky */
|
||||
.categoriesSticky .ant-card {
|
||||
animation: cardEntrance 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation-delay: calc(var(--card-index, 0) * 0.05s);
|
||||
}
|
||||
|
||||
/* Smooth animation for category cards when returning to normal */
|
||||
.categoriesContainer:not(.categoriesSticky) .ant-card {
|
||||
animation: cardReturn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation-delay: calc(var(--card-index, 0) * 0.03s);
|
||||
}
|
||||
|
||||
/* Smooth entrance for category images */
|
||||
.categoriesSticky .popularMenuItemImage {
|
||||
animation: imageEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation-delay: calc(var(--card-index, 0) * 0.05s + 0.1s);
|
||||
}
|
||||
|
||||
/* Smooth return animation for category images */
|
||||
.categoriesContainer:not(.categoriesSticky) .popularMenuItemImage {
|
||||
animation: imageReturn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
|
||||
animation-delay: calc(var(--card-index, 0) * 0.03s + 0.05s);
|
||||
}
|
||||
|
||||
@keyframes imageEntrance {
|
||||
0% {
|
||||
transform: scale(0.9) rotate(-2deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imageReturn {
|
||||
0% {
|
||||
transform: scale(0.95) rotate(-1deg);
|
||||
opacity: 0.85;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sticky categories when scrolled past */
|
||||
.categoriesSticky {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 100vw !important;
|
||||
z-index: 1000 !important;
|
||||
border-bottom: 1px solid var(--ant-color-border) !important;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
|
||||
background: #fff !important;
|
||||
animation: slideDown 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
||||
transform-origin: top center !important;
|
||||
}
|
||||
|
||||
/* Subtle glow effect for sticky state */
|
||||
.categoriesSticky::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(24, 144, 255, 0.3),
|
||||
transparent
|
||||
);
|
||||
animation: glowPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Fade out glow effect when returning to normal */
|
||||
.categoriesContainer:not(.categoriesSticky)::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(24, 144, 255, 0.1),
|
||||
transparent
|
||||
);
|
||||
animation: glowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowFadeOut {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateY(-100%) scale(0.95);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20%) scale(0.98);
|
||||
opacity: 0.7;
|
||||
filter: blur(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth exit animation when returning to normal */
|
||||
.categoriesContainer:not(.categoriesSticky) {
|
||||
animation: slideUp 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
|
||||
transform-origin: top center !important;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
opacity: 0.9;
|
||||
filter: blur(2px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px) scale(0.99);
|
||||
opacity: 0.95;
|
||||
filter: blur(1px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme sticky categories */
|
||||
:global(.darkApp) .categoriesSticky {
|
||||
background: rgba(10, 10, 10, 0.95) !important;
|
||||
border-bottom-color: #363636 !important;
|
||||
box-shadow:
|
||||
0 4px 25px rgba(0, 0, 0, 0.4),
|
||||
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
||||
backdrop-filter: blur(25px) saturate(1.2) !important;
|
||||
border-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 198, 0, 0.2),
|
||||
transparent
|
||||
)
|
||||
1 !important;
|
||||
}
|
||||
|
||||
/* Dark theme glow effect */
|
||||
:global(.darkApp) .categoriesSticky::before {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 198, 0, 0.4),
|
||||
transparent
|
||||
);
|
||||
animation: darkGlowPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Dark theme glow fade out when returning to normal */
|
||||
:global(.darkApp) .categoriesContainer:not(.categoriesSticky)::before {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 198, 0, 0.2),
|
||||
transparent
|
||||
);
|
||||
animation: darkGlowFadeOut 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
/* Updating category indicator */
|
||||
.updatingCategory {
|
||||
animation: categoryUpdate 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes updatingCategory {
|
||||
0% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 32px rgba(24, 144, 255, 0.4);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme updating category indicator */
|
||||
:global(.darkApp) .updatingCategory {
|
||||
animation: darkCategoryUpdate 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes darkCategoryUpdate {
|
||||
0% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 8px 32px rgba(255, 198, 0, 0.4);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for container backgrounds */
|
||||
:global(.darkApp) .container,
|
||||
:global(.darkApp) .categoriesContainer {
|
||||
background-color: #0a0a0a !important;
|
||||
border-bottom-color: #363636 !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemDescriptionIcons path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
/* Enhanced dark theme animations */
|
||||
:global(.darkApp) .categoryTab {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth transitions for all elements */
|
||||
.categoryTab * {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive category cards */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.categoryCard {
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.categoryCard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.categoryCard {
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.categoryCard:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive focus states */
|
||||
.menuItem:focus,
|
||||
.categoryCard:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.menuItem:focus,
|
||||
.categoryCard:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive print styles */
|
||||
@media print {
|
||||
.menuItem,
|
||||
.categoryCard {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
.categoriesContainer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile-specific sticky categories */
|
||||
@media (max-width: 768px) {
|
||||
.categoriesSticky {
|
||||
padding: 16px !important;
|
||||
height: 70px !important;
|
||||
transition: all 0.3s ease !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth placeholder transition */
|
||||
.categoriesSticky + div {
|
||||
transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
|
||||
/* Enhanced smooth transitions for all sticky-related elements */
|
||||
.categoriesContainer,
|
||||
.categoriesContainer *,
|
||||
.categoriesSticky,
|
||||
.categoriesSticky * {
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
232
src/pages/menu/components/CategoriesList/CategoriesList.tsx
Normal file
232
src/pages/menu/components/CategoriesList/CategoriesList.tsx
Normal file
@@ -0,0 +1,232 @@
|
||||
import { Card, Grid, Space } from "antd";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import ProText from "components/ProText";
|
||||
import { useScrollHandler } from "contexts/ScrollHandlerContext";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { default_image } from "utils/constants";
|
||||
import { Category } from "utils/types/appTypes";
|
||||
import styles from "./CategoriesList.module.css";
|
||||
|
||||
interface CategoriesListProps {
|
||||
categories: Category[];
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export function CategoriesList({ categories }: CategoriesListProps) {
|
||||
const { xs, md } = useBreakpoint();
|
||||
const {
|
||||
isCategoriesSticky,
|
||||
categoriesContainerRef,
|
||||
scrollToCategory,
|
||||
activeCategory,
|
||||
setActiveCategory,
|
||||
} = useScrollHandler();
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
|
||||
const getCategoryCardStyle = useCallback(() => {
|
||||
if (xs) {
|
||||
return {
|
||||
width: 90,
|
||||
height: isCategoriesSticky ? 38 : 110,
|
||||
};
|
||||
} else if (md) {
|
||||
return {
|
||||
width: 120,
|
||||
height: isCategoriesSticky ? 38 : 110,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: isCategoriesSticky ? 38 : 160,
|
||||
};
|
||||
}
|
||||
}, [isCategoriesSticky, xs, md]);
|
||||
|
||||
// Set first category as active on initial load
|
||||
useEffect(() => {
|
||||
if (categories.length > 0 && !activeCategory) {
|
||||
setActiveCategory(categories[0].id);
|
||||
}
|
||||
}, [categories, activeCategory, setActiveCategory]);
|
||||
|
||||
// Function to scroll category card into view when active category changes automatically
|
||||
const scrollCategoryCardIntoView = useCallback((categoryId: number) => {
|
||||
const categoryCard = document.querySelector(
|
||||
`[data-category-id="${categoryId}"]`
|
||||
);
|
||||
if (categoryCard) {
|
||||
const categoriesContainer = categoryCard.closest(
|
||||
`.${styles.categoriesContainer}`
|
||||
);
|
||||
if (categoriesContainer) {
|
||||
const cardElement = categoryCard as HTMLElement;
|
||||
const containerElement = categoriesContainer as HTMLElement;
|
||||
const cardRect = cardElement.getBoundingClientRect();
|
||||
const containerRect = containerElement.getBoundingClientRect();
|
||||
|
||||
if (
|
||||
cardRect.left < containerRect.left ||
|
||||
cardRect.right > containerRect.right
|
||||
) {
|
||||
cardElement.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
inline: "center",
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Auto-scroll category card into view when active category changes
|
||||
useEffect(() => {
|
||||
if (activeCategory) {
|
||||
// Use a small delay to ensure the DOM has updated
|
||||
const timer = setTimeout(() => {
|
||||
scrollCategoryCardIntoView(activeCategory);
|
||||
}, 150);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [activeCategory, scrollCategoryCardIntoView]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
ref={categoriesContainerRef as React.RefObject<HTMLDivElement>}
|
||||
className={`${styles.categoriesContainer} ${
|
||||
isCategoriesSticky ? styles.categoriesSticky : ""
|
||||
}`}
|
||||
style={!isCategoriesSticky ? { paddingTop: "1rem" } : {}}
|
||||
>
|
||||
{categories?.map((category) => (
|
||||
<div key={category.id}>
|
||||
<Card
|
||||
key={category.id}
|
||||
onClick={() => {
|
||||
scrollToCategory(category.id);
|
||||
}}
|
||||
data-category-id={category.id}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
border: "none",
|
||||
}}
|
||||
styles={{
|
||||
body: {
|
||||
...getCategoryCardStyle(),
|
||||
width: 105,
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
className={`${
|
||||
activeCategory === category.id ? styles.activeCategoryCard : ""
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{!isCategoriesSticky && (
|
||||
<ImageWithFallback
|
||||
src={category.image || default_image}
|
||||
fallbackSrc={default_image}
|
||||
alt={category.name}
|
||||
className={`${styles.categoryMenuItemImage} ${
|
||||
xs
|
||||
? styles.categoryMenuItemImageMobile
|
||||
: md
|
||||
? styles.categoryMenuItemImageTablet
|
||||
: styles.categoryMenuItemImageDesktop
|
||||
}`}
|
||||
// {...getCategoryImageStyle()}
|
||||
width={105}
|
||||
height={80}
|
||||
style={{
|
||||
borderEndEndRadius: isCategoriesSticky ? 8 : 0,
|
||||
borderEndStartRadius: isCategoriesSticky ? 8 : 0,
|
||||
}}
|
||||
loadingContainerStyle={{
|
||||
borderEndEndRadius: isCategoriesSticky ? 8 : 0,
|
||||
borderEndStartRadius: isCategoriesSticky ? 8 : 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Space
|
||||
direction="vertical"
|
||||
size="small"
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: xs ? "4px" : md ? "4px" : "4px",
|
||||
textAlign: "center",
|
||||
...(xs || md
|
||||
? {
|
||||
// backgroundColor: "#fff6e0",
|
||||
borderBottom: "solid 1px var(--primary)",
|
||||
borderRight: "solid 1px var(--primary)",
|
||||
borderLeft: "solid 1px var(--primary)",
|
||||
borderTop: isCategoriesSticky
|
||||
? "solid 1px var(--primary)"
|
||||
: 0,
|
||||
borderStartStartRadius: isCategoriesSticky ? 8 : 0,
|
||||
borderStartEndRadius: isCategoriesSticky ? 8 : 0,
|
||||
borderEndEndRadius: 8,
|
||||
borderEndStartRadius: 8,
|
||||
backgroundColor:
|
||||
activeCategory === category.id
|
||||
? colors.primary
|
||||
: undefined,
|
||||
}
|
||||
: { borderRadius: 8 }),
|
||||
width: 104,
|
||||
height: 30,
|
||||
marginBottom: 1,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
lineClamp: 1,
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 1,
|
||||
lineHeight: isCategoriesSticky ? "1.5" : "1",
|
||||
maxHeight: "2.8em",
|
||||
textAlign: "center",
|
||||
|
||||
color:
|
||||
activeCategory === category.id ? "#FFF" : undefined,
|
||||
fontWeight:
|
||||
activeCategory === category.id ? "600" : "500",
|
||||
whiteSpace: "nowrap",
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
padding: 3,
|
||||
fontSize: xs ? 14 : md ? 14 : 16,
|
||||
width: xs ? 80 : md ? 100 : 120,
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
{isRTL
|
||||
? category.name || category.nameEN
|
||||
: category.nameEN || category.name}
|
||||
</ProText>
|
||||
</Space>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
54
src/pages/menu/components/LocalStorageHandler.tsx
Normal file
54
src/pages/menu/components/LocalStorageHandler.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
// Cart storage keys - same as in CartContext
|
||||
const CART_STORAGE_KEYS = {
|
||||
ITEMS: 'fascano_cart_items',
|
||||
SPECIAL_REQUEST: 'fascano_special_request',
|
||||
COUPON: 'fascano_coupon',
|
||||
TIP: 'fascano_tip',
|
||||
TABLES: 'fascano_tables',
|
||||
LOCATION: 'fascano_location',
|
||||
ROOM_DETAILS: 'fascano_room_details',
|
||||
OFFICE_DETAILS: 'fascano_office_details',
|
||||
GIFT_DETAILS: 'fascano_gift_details',
|
||||
ESTIMATE_TIME: 'fascano_estimate_time',
|
||||
ESTIMATE_TIME_DATE: 'fascano_estimate_time_date',
|
||||
ESTIMATE_TIME_TIME: 'fascano_estimate_time_time',
|
||||
COLLECTION_METHOD: 'fascano_collection_method',
|
||||
} as const;
|
||||
|
||||
const clearCartFromLocalStorage = () => {
|
||||
// Clear all cart-related data from localStorage
|
||||
Object.values(CART_STORAGE_KEYS).forEach(key => {
|
||||
localStorage.removeItem(key);
|
||||
});
|
||||
};
|
||||
|
||||
export default function LocalStorageHandler({
|
||||
restaurantID,
|
||||
restaurantName,
|
||||
orderType,
|
||||
}: {
|
||||
restaurantID: string;
|
||||
restaurantName: string;
|
||||
orderType: string;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
// Check if restaurant has changed
|
||||
const currentStoredRestaurantID = localStorage.getItem("restaurantID");
|
||||
|
||||
// If there's a stored restaurant ID and it's different from the current one, clear the cart
|
||||
if (currentStoredRestaurantID && currentStoredRestaurantID !== restaurantID) {
|
||||
clearCartFromLocalStorage();
|
||||
}
|
||||
|
||||
// Update localStorage with new values
|
||||
localStorage.setItem("restaurantID", restaurantID);
|
||||
localStorage.setItem("restaurantName", restaurantName);
|
||||
localStorage.setItem("orderType", orderType);
|
||||
}, [restaurantID, restaurantName, orderType]);
|
||||
|
||||
return null;
|
||||
}
|
||||
92
src/pages/menu/components/MenuFooter/MenuFooter.tsx
Normal file
92
src/pages/menu/components/MenuFooter/MenuFooter.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { Badge, Button, Grid } from "antd";
|
||||
import CartIcon from "components/Icons/cart/CartIcon";
|
||||
import ProText from "components/ProText";
|
||||
import { selectCartItems } from "features/order/orderSlice";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { colors, ProBlack2 } from "ThemeConstants";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export function MenuFooter() {
|
||||
const items = useAppSelector(selectCartItems);
|
||||
const restaurantName = localStorage.getItem("restaurantName");
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const { xs, sm } = useBreakpoint();
|
||||
const isMobile = xs;
|
||||
const isTablet = sm && !xs;
|
||||
const { t } = useTranslation();
|
||||
|
||||
const totalItems = items.reduce((sum, item) => sum + item.quantity, 0);
|
||||
|
||||
return (
|
||||
<>
|
||||
{(isMobile || isTablet) && (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "16px 16px 0",
|
||||
position: "fixed",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
height: "10vh",
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-around",
|
||||
gap: "1rem",
|
||||
zIndex: 999,
|
||||
backgroundColor: themeName === "light" ? "white" : ProBlack2,
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={`/${restaurantName}/cart`}
|
||||
style={{
|
||||
width: "100%",
|
||||
padding: "0 16px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="primary"
|
||||
shape="round"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: 48,
|
||||
marginBottom: 16,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Badge
|
||||
count={totalItems}
|
||||
size="default"
|
||||
style={{
|
||||
borderColor: colors.primary,
|
||||
color: "white",
|
||||
fontSize: isMobile ? 10 : 12,
|
||||
width: isMobile ? 10 : 12,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
color: "white",
|
||||
margin: "0 10px",
|
||||
}}
|
||||
>
|
||||
{t("menu.viewCart")}
|
||||
</ProText>
|
||||
<span
|
||||
style={{
|
||||
position: "relative",
|
||||
top: 2,
|
||||
}}
|
||||
>
|
||||
<CartIcon />
|
||||
</span>
|
||||
</Badge>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
769
src/pages/menu/components/MenuList/MenuList.module.css
Normal file
769
src/pages/menu/components/MenuList/MenuList.module.css
Normal file
@@ -0,0 +1,769 @@
|
||||
.container {
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--ant-bg-container);
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
overflow: auto;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menuSections {
|
||||
margin-bottom: 105px !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.menuSection:first-child h3 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.menuSection h3 {
|
||||
margin: 30px 0px 15px 0px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu section headers */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.menuSection h3 {
|
||||
margin: 40px 0px 20px 0px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menuSection h3 {
|
||||
margin: 50px 0px 25px 0px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemsGrid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.menuItemsGridMobile {
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menuItemsGridTablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu items grid */
|
||||
@media (min-width: 1280px) {
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.popularMenuItemsGrid {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
overflow-x: hidden;
|
||||
scroll-behavior: smooth;
|
||||
padding: 8px 0;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.popularMenuItemsGrid::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popularMenuItemImage {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popularMenuItemImageMobile {
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popularMenuItemImageTablet {
|
||||
height: 95px;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popularMenuItemImageDesktop {
|
||||
height: 120px;
|
||||
width: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menuItemImage {
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.menuItemImage:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu item images */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.menuItemImage {
|
||||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menuItemImage {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemDetails {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.itemDescription {
|
||||
/* font-size: 12px !important; */
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive item descriptions */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.itemDescription {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.itemDescription {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.container {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.container {
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
padding: 0 16px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive page container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.pageContainer {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.pageContainer {
|
||||
padding: 32px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar state adjustments */
|
||||
.sidebarCollapsed .pageContainer {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.sidebarExpanded .pageContainer {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
/* .itemDescriptionIcons path {
|
||||
fill: 000044 !important;
|
||||
} */
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebarCollapsed .pageContainer,
|
||||
.sidebarExpanded .pageContainer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced Dark theme styles */
|
||||
:global(.darkApp) .itemName {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemName:hover {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemDescription {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemPrice {
|
||||
color: var(--primary) !important;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for menu sections */
|
||||
:global(.darkApp) .menuSection h3 {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .menuSection {
|
||||
background-color: #0a0a0a;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for menu items */
|
||||
:global(.darkApp) .menuItem {
|
||||
background-color: #181818 !important;
|
||||
border-color: #363636 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .menuItem:hover {
|
||||
background-color: #363636 !important;
|
||||
border-color: #424242 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for popular menu items */
|
||||
:global(.darkApp) .popularMenuItem {
|
||||
background-color: #181818 !important;
|
||||
border-color: #363636 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .popularMenuItem:hover {
|
||||
background-color: #363636 !important;
|
||||
border-color: #424242 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@keyframes activePulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes darkActivePulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.05;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imageEntrance {
|
||||
0% {
|
||||
transform: scale(0.9) rotate(-2deg);
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes imageReturn {
|
||||
0% {
|
||||
transform: scale(0.95) rotate(-1deg);
|
||||
opacity: 0.85;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cardEntrance {
|
||||
0% {
|
||||
transform: translateY(20px) scale(0.95);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cardReturn {
|
||||
0% {
|
||||
transform: translateY(-5px) scale(0.98);
|
||||
opacity: 0.9;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes glowFadeOut {
|
||||
0% {
|
||||
opacity: 0.1;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
0% {
|
||||
transform: translateY(-100%) scale(0.95);
|
||||
opacity: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20%) scale(0.98);
|
||||
opacity: 0.7;
|
||||
filter: blur(5px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
0% {
|
||||
transform: translateY(-10px) scale(0.98);
|
||||
opacity: 0.9;
|
||||
filter: blur(2px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px) scale(0.99);
|
||||
opacity: 0.95;
|
||||
filter: blur(1px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0) scale(1);
|
||||
opacity: 1;
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes darkGlowPulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0.4;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes darkGlowFadeOut {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scaleX(0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for menu item images */
|
||||
:global(.darkApp) .menuItemImage,
|
||||
:global(.darkApp) .popularMenuItemImage {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for add to cart buttons */
|
||||
:global(.darkApp) .addToCartButton {
|
||||
background-color: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: #000000 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .addToCartButton:hover {
|
||||
background-color: #ffd633 !important;
|
||||
border-color: #ffd633 !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(255, 198, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for quantity controls */
|
||||
:global(.darkApp) .quantityControl {
|
||||
background-color: rgba(42, 42, 42, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityButton {
|
||||
background-color: rgba(54, 54, 54, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #ffffff !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityButton:hover {
|
||||
background-color: rgba(66, 66, 66, 0.9) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityInput {
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #ffffff !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for container backgrounds */
|
||||
:global(.darkApp) .container {
|
||||
background-color: #0a0a0a !important;
|
||||
border-bottom-color: #363636 !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemDescriptionIcons path {
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
/* Cart badge styles */
|
||||
.cartBadge {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
z-index: 2;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cartBadge:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.cartBadgeRTL {
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
.cartBadgeLTR {
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive cart badge */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.cartBadge {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.cartBadge {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* RTL support for cart badge */
|
||||
/* [dir="rtl"] .cartBadge {
|
||||
right: auto;
|
||||
left: -8px;
|
||||
} */
|
||||
|
||||
/* Animation for newly added items */
|
||||
@keyframes badgePulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cartBadge.animate {
|
||||
animation: badgePulse 0.6s ease-in-out;
|
||||
}
|
||||
|
||||
/* Enhanced dark theme animations */
|
||||
:global(.darkApp) .menuItem,
|
||||
:global(.darkApp) .popularMenuItem {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth transitions for all elements */
|
||||
.container *,
|
||||
.menuItem *,
|
||||
.popularMenuItem * {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu item cards */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.menuItem {
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menuItem {
|
||||
border-radius: 16px !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
|
||||
.menuItem:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive focus states */
|
||||
.menuItem:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.menuItem:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive print styles */
|
||||
@media print {
|
||||
.menuItem {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Skeleton Loading Styles */
|
||||
.skeletonContainer {
|
||||
animation: skeletonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@keyframes skeletonPulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes skeletonShimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200px 100%;
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Mobile-specific skeleton styles */
|
||||
@media (max-width: 768px) {
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme skeleton styles */
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
|
||||
background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
|
||||
background-size: 200px 100%;
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-input,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-image,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-button {
|
||||
background-color: #181818;
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
/* Tablet-specific skeleton styles */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.skeletonContainer {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemsGridSticky {
|
||||
height: 60;
|
||||
}
|
||||
|
||||
.heartButton {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
:global(.rtl) .heartButton {
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.productLink {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.categoryMenuItemImage {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
281
src/pages/menu/components/MenuList/MenuList.tsx
Normal file
281
src/pages/menu/components/MenuList/MenuList.tsx
Normal file
@@ -0,0 +1,281 @@
|
||||
import { Badge, Card, Grid } from "antd";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
|
||||
import ProText from "components/ProText";
|
||||
import ProTitle from "components/ProTitle";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
import { AddToCart } from "../AddToCart";
|
||||
import styles from "./MenuList.module.css";
|
||||
|
||||
interface MenuListProps {
|
||||
data:
|
||||
| {
|
||||
products: Product[];
|
||||
categories: { id: number; name: string; image?: string }[];
|
||||
}
|
||||
| undefined;
|
||||
id: string;
|
||||
categoryRefs: React.RefObject<{ [key: number]: HTMLDivElement | null }>;
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export function MenuList({ data, categoryRefs }: MenuListProps) {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const products = data?.products;
|
||||
const { xs, md } = useBreakpoint();
|
||||
const { items } = useAppSelector((state) => state.order);
|
||||
const restaurantName = localStorage.getItem("restaurantName");
|
||||
const navigate = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
|
||||
// Show error state if data exists but has no products
|
||||
if (data && (!data.products || data.products.length === 0)) {
|
||||
return (
|
||||
<div
|
||||
className={styles.menuSections}
|
||||
style={{ padding: "40px", textAlign: "center" }}
|
||||
>
|
||||
<ProText type="secondary">{t("menu.noMenuItemsAvailable")}</ProText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Group products by category
|
||||
const productsByCategory = products?.reduce((acc, product) => {
|
||||
if (product.categoryId && !acc[product?.categoryId]) {
|
||||
acc[product?.categoryId] = [];
|
||||
}
|
||||
acc[product?.categoryId || 0].push(product);
|
||||
return acc;
|
||||
}, {} as Record<number, Product[]>);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.menuSections}>
|
||||
{data?.categories?.map((category) => {
|
||||
const categoryProducts = productsByCategory?.[category.id] || [];
|
||||
if (categoryProducts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={category.id}
|
||||
ref={(el) => {
|
||||
if (categoryRefs.current) {
|
||||
categoryRefs.current[category.id] = el;
|
||||
}
|
||||
}}
|
||||
style={{ marginBottom: "1rem" }}
|
||||
>
|
||||
<ImageWithFallback
|
||||
src={category.image || "/default.png"}
|
||||
fallbackSrc="/default.png"
|
||||
alt={category.name}
|
||||
width="100%"
|
||||
height={130}
|
||||
style={{
|
||||
width: "100%",
|
||||
objectFit: "cover",
|
||||
borderRadius: 8,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
className={styles.categoryMenuItemImage}
|
||||
loadingContainerStyle={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
<ProTitle
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
fontWeight: "bold",
|
||||
marginBottom: "1rem",
|
||||
textAlign: "center",
|
||||
color: themeName === "dark" ? "#fff" : "#000044",
|
||||
}}
|
||||
level={5}
|
||||
>
|
||||
{isRTL ? category.name : category.name}
|
||||
</ProTitle>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
{categoryProducts.map((item: Product) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={styles.productLink}
|
||||
onClick={() => {
|
||||
localStorage.setItem("product", JSON.stringify(item));
|
||||
navigate(`/${restaurantName}/product/${item.id}`);
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
key={item.id}
|
||||
style={{
|
||||
borderRadius: 8,
|
||||
overflow: "hide",
|
||||
}}
|
||||
styles={{
|
||||
body: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: 8,
|
||||
padding: item.description
|
||||
? "16px 16px 8px 16px"
|
||||
: "16px 16px 24px 16px",
|
||||
overflow: "hide",
|
||||
boxShadow:
|
||||
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
gap: xs ? 10 : 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
gap: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
display: "inline-block",
|
||||
fontSize: xs ? "1rem" : 18,
|
||||
fontWeight: 600,
|
||||
letterSpacing: "-0.01em",
|
||||
lineHeight: 1.2,
|
||||
color: themeName === "dark" ? "#fff" : "#000044",
|
||||
}}
|
||||
>
|
||||
{isRTL ? item.name : item.nameOther}
|
||||
</ProText>
|
||||
{item.description && (
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={styles.itemDescription}
|
||||
style={{
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: xs ? 2 : 4,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.5rem",
|
||||
maxHeight: xs ? "3em" : "6.6em",
|
||||
fontSize: xs ? "1rem" : 18,
|
||||
letterSpacing: "0.01em",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</ProText>
|
||||
)}
|
||||
|
||||
<div>
|
||||
{item.original_price !== item.price && (
|
||||
<ArabicPrice
|
||||
price={item.original_price}
|
||||
strong
|
||||
style={{
|
||||
fontSize: xs ? "1rem" : 22,
|
||||
fontWeight: 700,
|
||||
color: colors.primary,
|
||||
textDecoration: "line-through",
|
||||
marginRight: isRTL ? 0 : 10,
|
||||
marginLeft: isRTL ? 10 : 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
strong
|
||||
style={{
|
||||
fontSize: xs ? "1rem" : 22,
|
||||
fontWeight: 700,
|
||||
color: colors.primary,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
...(isRTL ? { right: -5 } : {}),
|
||||
}}
|
||||
>
|
||||
<ItemDescriptionIcons
|
||||
className={styles.itemDescriptionIcons}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image_small || "/default.png"}
|
||||
fallbackSrc="/default.png"
|
||||
alt={item.name}
|
||||
className={`${styles.popularMenuItemImage} ${
|
||||
xs
|
||||
? styles.popularMenuItemImageMobile
|
||||
: md
|
||||
? styles.popularMenuItemImageTablet
|
||||
: styles.popularMenuItemImageDesktop
|
||||
}`}
|
||||
width={90}
|
||||
height={90}
|
||||
/>
|
||||
|
||||
<AddToCart item={item} />
|
||||
|
||||
{items.find((i) => i.id === item.id) && (
|
||||
<Badge
|
||||
count={
|
||||
items.find((i) => i.id === item.id)?.quantity
|
||||
}
|
||||
className={
|
||||
styles.cartBadge +
|
||||
" " +
|
||||
(isRTL
|
||||
? styles.cartBadgeRTL
|
||||
: styles.cartBadgeLTR)
|
||||
}
|
||||
style={{
|
||||
backgroundColor: colors.primary,
|
||||
}}
|
||||
title={`${
|
||||
items.find((i) => i.id === item.id)?.quantity
|
||||
} in cart`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
338
src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
Normal file
338
src/pages/menu/components/MenuSkeleton/MenuSkeleton.module.css
Normal file
@@ -0,0 +1,338 @@
|
||||
.categoriesContainer {
|
||||
display: flex;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--ant-bg-container);
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid var(--ant-color-border);
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
height: 96px;
|
||||
overflow-x: auto;
|
||||
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: position, transform, opacity, filter;
|
||||
transform-origin: top center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive categories container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.categoriesContainer {
|
||||
height: 160px;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 12px 16px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.categoriesContainer {
|
||||
height: 180px;
|
||||
padding: 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.categoriesSticky {
|
||||
padding: 16px 24px !important;
|
||||
height: 70px !important;
|
||||
max-width: 100vw !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Menu Sections and Grid Layout */
|
||||
/* .menuSections {
|
||||
margin-bottom: 105px !important;
|
||||
} */
|
||||
|
||||
.menuSection:first-child h3 {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
|
||||
.menuSection h3 {
|
||||
margin: 30px 0px 15px 0px;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu section headers */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.menuSection h3 {
|
||||
margin: 40px 0px 20px 0px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.menuSection h3 {
|
||||
margin: 50px 0px 25px 0px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemsGrid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.menuItemsGridMobile {
|
||||
gap: 12px;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menuItemsGridTablet {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
padding: 0 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive menu items grid */
|
||||
@media (min-width: 1280px) {
|
||||
.menuItemsGridDesktop {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Restaurant Header Skeleton */
|
||||
.restaurantHeader {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.leftShape {
|
||||
position: absolute;
|
||||
top: 133px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
left: -11px;
|
||||
background-color: var(--background);
|
||||
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
|
||||
}
|
||||
|
||||
:global(.darkApp) .leftShape {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
position: absolute;
|
||||
top: 133px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
left: 102px;
|
||||
background-color: var(--background);
|
||||
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
|
||||
transform: scale(-1, 1);
|
||||
}
|
||||
|
||||
:global(.darkApp) .rightShape {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
/* Restaurant Info Skeleton */
|
||||
.restaurantInfoSkeleton {
|
||||
text-align: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
/* Loyalty Card Skeleton */
|
||||
.loyaltySkeleton {
|
||||
margin: 16px 0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.loyaltyCardSkeleton {
|
||||
height: 115px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.loyaltyCardSkeleton :global(.ant-card-body) {
|
||||
height: 115px;
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
|
||||
/* Page Container */
|
||||
.pageContainer {
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Enhanced responsive page container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.pageContainer {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 24px;
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.pageContainer {
|
||||
padding: 32px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.restaurantInfoSkeleton {
|
||||
padding: 0 32px;
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
.loyaltySkeleton {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Skeleton Loading Styles */
|
||||
.skeletonContainer {
|
||||
animation: skeletonPulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
@keyframes skeletonPulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes skeletonShimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-input,
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-image,
|
||||
.skeletonContainer .ant-skeleton-active .ant-skeleton-button {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200px 100%;
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Mobile-specific skeleton styles */
|
||||
@media (max-width: 768px) {
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark theme skeleton styles */
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-input,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-image,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-active .ant-skeleton-button {
|
||||
background: linear-gradient(90deg, #181818 25%, #363636 50%, #181818 75%);
|
||||
background-size: 200px 100%;
|
||||
animation: skeletonShimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-input,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-image,
|
||||
:global(.darkApp) .skeletonContainer .ant-skeleton-button {
|
||||
background-color: #181818;
|
||||
border-color: #363636;
|
||||
}
|
||||
|
||||
/* Tablet-specific skeleton styles */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.skeletonContainer {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-image {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.skeletonContainer .ant-skeleton-button {
|
||||
border-radius: 18px;
|
||||
}
|
||||
}
|
||||
438
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
Normal file
438
src/pages/menu/components/MenuSkeleton/MenuSkeleton.tsx
Normal file
@@ -0,0 +1,438 @@
|
||||
import { Card, Grid, Skeleton } from "antd";
|
||||
import styles from "./MenuSkeleton.module.css";
|
||||
|
||||
interface MenuSkeletonProps {
|
||||
categoryCount?: number;
|
||||
itemCount?: number;
|
||||
variant?:
|
||||
| "default"
|
||||
| "minimal"
|
||||
| "detailed"
|
||||
| "categories-only"
|
||||
| "menu-only";
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
const MenuSkeleton = ({
|
||||
categoryCount = 6,
|
||||
itemCount = 8,
|
||||
variant = "default",
|
||||
}: MenuSkeletonProps) => {
|
||||
const { xs, sm, md } = useBreakpoint();
|
||||
const isMobile = xs;
|
||||
const isTablet = sm && !md;
|
||||
const isDesktop = md;
|
||||
|
||||
const getCategoryCardStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 95,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 140,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: 160,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getMenuItemCardStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
height: 140,
|
||||
padding: "12px 12px 12px 16px",
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
height: 160,
|
||||
padding: "16px",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: 180,
|
||||
padding: "20px",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getCategoryImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 60,
|
||||
borderTopLeftRadius: 8,
|
||||
borderTopRightRadius: 8,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 90,
|
||||
borderTopLeftRadius: 12,
|
||||
borderTopRightRadius: 12,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 120,
|
||||
height: 100,
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getMenuItemImageStyle = () => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 95,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: 140,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const getGridClass = () => {
|
||||
if (isMobile) {
|
||||
return styles.menuItemsGridMobile;
|
||||
} else if (isTablet) {
|
||||
return styles.menuItemsGridTablet;
|
||||
} else {
|
||||
return styles.menuItemsGridDesktop;
|
||||
}
|
||||
};
|
||||
|
||||
const getPageContainerStyle = () => {
|
||||
if (isDesktop) {
|
||||
return {
|
||||
maxWidth: "1200px",
|
||||
margin: "0 auto",
|
||||
padding: "32px",
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
padding: "24px",
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.pageContainer} ${styles.skeletonContainer}`}
|
||||
style={getPageContainerStyle()}
|
||||
>
|
||||
{/* Restaurant Header Skeleton */}
|
||||
<div className={styles.restaurantHeader}>
|
||||
{/* Cover Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: isMobile ? 182 : isTablet ? 200 : 220,
|
||||
borderRadius: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Logo Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: isMobile ? "33px" : "40px",
|
||||
top: isMobile ? "133px" : "-70px",
|
||||
borderRadius: "50%",
|
||||
width: isMobile ? "72px" : "80px",
|
||||
height: isMobile ? "72px" : "80px",
|
||||
border: "3px solid var(--background)",
|
||||
zIndex: 10,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Decorative Shapes Skeleton */}
|
||||
<div className={styles.leftShape}></div>
|
||||
<div className={styles.rightShape}></div>
|
||||
</div>
|
||||
|
||||
{/* Restaurant Info Skeleton */}
|
||||
<div className={styles.restaurantInfoSkeleton}>
|
||||
<div
|
||||
className={
|
||||
styles.restaurantDescriptionSkeleton +
|
||||
" " +
|
||||
"restaurant-description-skeleton"
|
||||
}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: 1,
|
||||
width: ["100%"],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Loyalty Card Skeleton */}
|
||||
<div className={styles.loyaltySkeleton}>
|
||||
<Card className={styles.loyaltyCardSkeleton}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
<Skeleton.Input
|
||||
active
|
||||
style={{
|
||||
width: "120px",
|
||||
height: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
width: "24px",
|
||||
height: "24px",
|
||||
borderRadius: "4px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", gap: "4px" }}>
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<Skeleton.Image
|
||||
key={index}
|
||||
active
|
||||
style={{
|
||||
width: "32px",
|
||||
height: "32px",
|
||||
borderRadius: "50%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Skeleton.Button
|
||||
active
|
||||
style={{
|
||||
width: "80px",
|
||||
height: "32px",
|
||||
borderRadius: "16px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Categories Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "categories-only") && (
|
||||
<div style={{ padding: "0 1rem", display: "flex", gap: 8, overflow: "hidden" }}>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(categoryCount, 4)
|
||||
: categoryCount,
|
||||
}).map((_, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginRight: isMobile ? "3px" : "8px",
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getCategoryCardStyle(),
|
||||
padding: 0,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
gap: "0px",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getCategoryImageStyle(),
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
padding: isMobile ? "4px" : "8px",
|
||||
textAlign: "center",
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{ rows: 1 }}
|
||||
style={{
|
||||
margin: 0,
|
||||
padding: isMobile ? 3 : 8,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Menu Items Skeleton */}
|
||||
{(variant === "default" ||
|
||||
variant === "minimal" ||
|
||||
variant === "detailed" ||
|
||||
variant === "menu-only") && (
|
||||
<div className={styles.menuSections} style={{ padding: "0 1rem" }}>
|
||||
{Array.from({ length: variant === "minimal" ? 1 : 3 }).map(
|
||||
(_, sectionIndex) => (
|
||||
<div key={sectionIndex} className={styles.menuSection}>
|
||||
{/* Section Header Skeleton */}
|
||||
{/* <div
|
||||
style={{
|
||||
margin: isMobile ? "20px 0 15px 0" : isTablet ? "30px 0 20px 0" : "40px 0 25px 0",
|
||||
padding: isTablet ? "0 12px" : isDesktop ? "0 16px" : "0"
|
||||
}}
|
||||
>
|
||||
<Skeleton.Input
|
||||
active
|
||||
size="large"
|
||||
style={{
|
||||
width: isMobile ? 120 : isTablet ? 160 : 200,
|
||||
height: isMobile ? 24 : isTablet ? 28 : 32,
|
||||
}}
|
||||
/>
|
||||
</div> */}
|
||||
|
||||
<div className={`${styles.menuItemsGrid} ${getGridClass()}`}>
|
||||
{Array.from({
|
||||
length:
|
||||
variant === "minimal"
|
||||
? Math.min(itemCount, 4)
|
||||
: itemCount,
|
||||
}).map((_, itemIndex) => (
|
||||
<Card
|
||||
key={itemIndex}
|
||||
className="responsive-card"
|
||||
style={{ borderRadius: 8 }}
|
||||
styles={{
|
||||
body: {
|
||||
...getMenuItemCardStyle(),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
gap: isMobile ? 12 : 16,
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
lineHeight: 1,
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
{/* Item Name Skeleton */}
|
||||
<Skeleton.Input
|
||||
active
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
height: isMobile ? 16 : isTablet ? 18 : 20,
|
||||
width: "80%",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Item Description Skeleton */}
|
||||
<Skeleton
|
||||
active
|
||||
paragraph={{
|
||||
rows: isMobile ? 1 : 2,
|
||||
width: ["100%", "90%", "70%"],
|
||||
}}
|
||||
style={{
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
}}
|
||||
/>
|
||||
{/* Action Icons Skeleton */}
|
||||
</div>
|
||||
|
||||
<div style={{ position: "relative" }}>
|
||||
{/* Item Image Skeleton */}
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
...getMenuItemImageStyle(),
|
||||
}}
|
||||
/>{" "}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MenuSkeleton;
|
||||
276
src/pages/menu/components/ProductCard/ProductCard.tsx
Normal file
276
src/pages/menu/components/ProductCard/ProductCard.tsx
Normal file
@@ -0,0 +1,276 @@
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import { Badge, Button, Card, Grid } from "antd";
|
||||
import ArabicPrice from "components/ArabicPrice";
|
||||
import HeartIcon from "components/Icons/HeartIcon";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import { ItemDescriptionIcons } from "components/ItemDescriptionIcons/ItemDescriptionIcons";
|
||||
import ProText from "components/ProText";
|
||||
import { addItem, selectCartItems } from "features/order/orderSlice";
|
||||
import { useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
||||
import { colors } from "ThemeConstants";
|
||||
import { Product } from "utils/types/appTypes";
|
||||
import styles from "../MenuList/MenuList.module.css";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
interface ProductCardProps {
|
||||
products: Product[];
|
||||
}
|
||||
|
||||
export function ProductCard({ products }: ProductCardProps) {
|
||||
const { id } = useParams();
|
||||
const { isRTL, locale } = useAppSelector((state) => state.locale);
|
||||
const { sm, md } = useBreakpoint();
|
||||
const isMobile = !sm;
|
||||
const isTablet = sm && !md;
|
||||
const { themeName } = useAppSelector((state) => state.theme);
|
||||
const dispatch = useAppDispatch();
|
||||
const cartItems = useAppSelector(selectCartItems);
|
||||
const getItemQuantity = (id: number | string) => {
|
||||
const item = cartItems.find((i) => i.id === id);
|
||||
return item ? item.quantity : 0;
|
||||
};
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Memoized handlers for better performance
|
||||
const handleQuickAdd = useCallback(
|
||||
(item: Product) => {
|
||||
dispatch(
|
||||
addItem({
|
||||
item: {
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
price: item.price,
|
||||
image: item.image,
|
||||
description: item.description,
|
||||
variant: "None",
|
||||
extras: [],
|
||||
extrasgroup: [],
|
||||
},
|
||||
quantity: 1,
|
||||
})
|
||||
);
|
||||
},
|
||||
[dispatch]
|
||||
);
|
||||
|
||||
const getMenuItemCardStyle = useCallback(
|
||||
(itemDescription: string) => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
height: itemDescription?.length > 0 ? 160 : 130,
|
||||
padding: "12px 12px 12px 16px",
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
height: 160,
|
||||
padding: "16px",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
height: 180,
|
||||
padding: "20px",
|
||||
};
|
||||
}
|
||||
},
|
||||
[isMobile, isTablet]
|
||||
);
|
||||
|
||||
const getMenuItemImageStyle = useCallback(() => {
|
||||
if (isMobile) {
|
||||
return {
|
||||
width: 90,
|
||||
height: 95,
|
||||
};
|
||||
} else if (isTablet) {
|
||||
return {
|
||||
width: 120,
|
||||
height: 120,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: 140,
|
||||
height: 140,
|
||||
};
|
||||
}
|
||||
}, [isMobile, isTablet]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{products?.map((item) => (
|
||||
<Link
|
||||
to={`/${id}/product/${item.id}`}
|
||||
key={item.id}
|
||||
className={styles.productLink}
|
||||
>
|
||||
<Card
|
||||
key={item.id}
|
||||
styles={{
|
||||
body: {
|
||||
...getMenuItemCardStyle(item.description),
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "space-between",
|
||||
borderRadius: 16,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
height: "100%",
|
||||
gap: isMobile ? 10 : 16,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
lineHeight: 1,
|
||||
height: "100%",
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<ProText
|
||||
style={{
|
||||
margin: 0,
|
||||
marginBottom: isMobile ? 8 : isTablet ? 16 : 20,
|
||||
display: "inline-block",
|
||||
fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
|
||||
fontWeight: 600,
|
||||
letterSpacing: "-0.01em",
|
||||
lineHeight: 1.2,
|
||||
}}
|
||||
>
|
||||
{locale == "ar" ? item.nameOther : item.name}
|
||||
</ProText>
|
||||
<ProText
|
||||
type="secondary"
|
||||
className={styles.itemDescription}
|
||||
style={{
|
||||
display: "-webkit-box",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: isMobile ? 2 : 4,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
wordWrap: "break-word",
|
||||
overflowWrap: "break-word",
|
||||
lineHeight: "1.5rem",
|
||||
maxHeight: isMobile ? "3em" : "6.6em",
|
||||
fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
|
||||
letterSpacing: "0.01em",
|
||||
}}
|
||||
>
|
||||
{item.description}
|
||||
</ProText>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
justifyContent: "start",
|
||||
gap: isMobile ? 16 : 24,
|
||||
position: "absolute",
|
||||
bottom: isMobile ? 16 : 20,
|
||||
[isRTL ? "right" : "left"]: isMobile ? 16 : 20,
|
||||
}}
|
||||
>
|
||||
<ArabicPrice
|
||||
price={item.price}
|
||||
strong
|
||||
style={{
|
||||
fontSize: isMobile ? "1rem" : isTablet ? 18 : 22,
|
||||
fontWeight: 700,
|
||||
color: themeName === "dark" ? "#FFC600" : "#1a1a1a",
|
||||
}}
|
||||
/>
|
||||
<ItemDescriptionIcons className={styles.itemDescriptionIcons} />
|
||||
</div>
|
||||
<div style={{ position: "relative" }}>
|
||||
<ImageWithFallback
|
||||
src={item.image_small || ""}
|
||||
alt={item.name}
|
||||
fallbackSrc="/default.png"
|
||||
className={`${styles.popularMenuItemImage} ${
|
||||
isMobile
|
||||
? styles.popularMenuItemImageMobile
|
||||
: isTablet
|
||||
? styles.popularMenuItemImageTablet
|
||||
: styles.popularMenuItemImageDesktop
|
||||
}`}
|
||||
{...getMenuItemImageStyle()}
|
||||
/>
|
||||
<Button
|
||||
className={styles.heartButton}
|
||||
icon={<HeartIcon />}
|
||||
style={{ width: 24, height: 24 }}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
console.log("heart");
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
shape="round"
|
||||
title="add"
|
||||
iconPosition="start"
|
||||
icon={
|
||||
<PlusOutlined
|
||||
title="add"
|
||||
style={{
|
||||
position: "relative",
|
||||
top: "-1px",
|
||||
}}
|
||||
/>
|
||||
}
|
||||
size={isMobile ? "small" : "middle"}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleQuickAdd(item);
|
||||
}}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -10,
|
||||
[isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
|
||||
zIndex: 1,
|
||||
width: isMobile ? 82 : isTablet ? 90 : 100,
|
||||
height: isMobile ? 32 : isTablet ? 40 : 44,
|
||||
fontSize: isMobile ? "1rem" : isTablet ? 16 : 18,
|
||||
fontWeight: 600,
|
||||
border: 0,
|
||||
color: themeName === "light" ? "#333333" : "#FFFFFF",
|
||||
boxShadow:
|
||||
themeName === "light"
|
||||
? "0 2px 0 rgba(0,0,0,0.02)"
|
||||
: "0 2px 0 #6b6b6b",
|
||||
}}
|
||||
>
|
||||
{t("common.add")}
|
||||
</Button>
|
||||
{/* Cart quantity badge - shows current quantity in cart */}
|
||||
{getItemQuantity(item.id) > 0 && (
|
||||
<Badge
|
||||
count={getItemQuantity(item.id)}
|
||||
className={
|
||||
styles.cartBadge +
|
||||
" " +
|
||||
(isRTL ? styles.cartBadgeRTL : styles.cartBadgeLTR)
|
||||
}
|
||||
style={{
|
||||
backgroundColor: colors.primary,
|
||||
}}
|
||||
title={`${getItemQuantity(item.id)} in cart`}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
74
src/pages/menu/components/ResponsiveServices.tsx
Normal file
74
src/pages/menu/components/ResponsiveServices.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { Button, Grid } from "antd";
|
||||
import DineInIcon from "components/Icons/DineInIcon";
|
||||
import DownIcon from "components/Icons/DownIcon";
|
||||
import PickupIcon from "components/Icons/PickupIcon";
|
||||
import styles from "../menu.module.css";
|
||||
|
||||
interface ResponsiveServicesProps {
|
||||
orderType: string;
|
||||
translations: {
|
||||
common: {
|
||||
dineIn: string;
|
||||
pickup: string;
|
||||
more: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
export default function ResponsiveServices({ orderType, translations }: ResponsiveServicesProps) {
|
||||
const { xs } = useBreakpoint();
|
||||
|
||||
// Hide pickup service if screen width is less than 400px (insufficient for 3 services)
|
||||
const shouldHidePickup = xs;
|
||||
|
||||
return (
|
||||
<div className={styles.services}>
|
||||
<Button
|
||||
className={
|
||||
orderType == "dine-in"
|
||||
? styles.activeServiceButton
|
||||
: styles.serviceButton
|
||||
}
|
||||
icon={
|
||||
<div className={styles.dineInIcon}>
|
||||
<DineInIcon className={`${styles.icon}`} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{translations.common.dineIn}
|
||||
</Button>
|
||||
|
||||
{!shouldHidePickup && (
|
||||
<Button
|
||||
className={
|
||||
orderType == "pickup"
|
||||
? styles.activeServiceButton
|
||||
: styles.serviceButton
|
||||
}
|
||||
icon={
|
||||
<div className={styles.pickupIcon}>
|
||||
<PickupIcon className={`${styles.pickupIcon} ${styles.icon}`} />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{translations.common.pickup}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button
|
||||
className={
|
||||
orderType == "more"
|
||||
? styles.activeServiceButton
|
||||
: styles.serviceButton
|
||||
}
|
||||
>
|
||||
{translations.common.more}{" "}
|
||||
<DownIcon className={`${styles.downIcon} ${styles.icon}`} />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
src/pages/menu/components/ScrollEventHandler.tsx
Normal file
97
src/pages/menu/components/ScrollEventHandler.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useScrollHandler } from "contexts/ScrollHandlerContext";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
export default function ScrollEventHandler() {
|
||||
const {
|
||||
setShowScrollTop,
|
||||
setIsCategoriesSticky,
|
||||
categoriesContainerRef,
|
||||
categoryRefs,
|
||||
activeCategory,
|
||||
setActiveCategory
|
||||
} = useScrollHandler();
|
||||
|
||||
const hasSetInitialCategory = useRef(false);
|
||||
|
||||
// Set initial active category when categories are available
|
||||
useEffect(() => {
|
||||
if (categoryRefs.current && Object.keys(categoryRefs.current).length > 0 && !hasSetInitialCategory.current) {
|
||||
// Set the first category as active initially
|
||||
const firstCategoryId = parseInt(Object.keys(categoryRefs.current)[0]);
|
||||
setActiveCategory(firstCategoryId);
|
||||
hasSetInitialCategory.current = true;
|
||||
}
|
||||
}, [categoryRefs, setActiveCategory]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollTop =
|
||||
window.pageYOffset || document.documentElement.scrollTop;
|
||||
setShowScrollTop(scrollTop > 300); // Show button after scrolling 300px
|
||||
|
||||
// Check if we should make categories sticky
|
||||
if (categoriesContainerRef.current) {
|
||||
// Get the original position of the categories container
|
||||
const originalTop = categoriesContainerRef.current.offsetTop;
|
||||
|
||||
// Only make sticky when we've scrolled past the original position
|
||||
// and return to normal when we scroll back above it
|
||||
// Add a small threshold (10px) to prevent flickering
|
||||
const shouldBeSticky = scrollTop > originalTop + 10;
|
||||
setIsCategoriesSticky(shouldBeSticky);
|
||||
}
|
||||
|
||||
// Find the most visible category based on scroll position
|
||||
if (categoryRefs.current) {
|
||||
let mostVisibleCategory: { id: number; visibility: number } | null = null;
|
||||
|
||||
Object.entries(categoryRefs.current).forEach(([categoryId, element]) => {
|
||||
if (element) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const viewportHeight = window.innerHeight;
|
||||
|
||||
// Calculate visibility ratio
|
||||
const elementTop = rect.top;
|
||||
const elementBottom = rect.bottom;
|
||||
const elementHeight = rect.height;
|
||||
|
||||
// Calculate how much of the element is visible
|
||||
let visibleHeight = 0;
|
||||
if (elementTop >= 0 && elementBottom <= viewportHeight) {
|
||||
// Element is fully visible
|
||||
visibleHeight = elementHeight;
|
||||
} else if (elementTop < 0 && elementBottom > 0) {
|
||||
// Element is partially visible from top
|
||||
visibleHeight = elementBottom;
|
||||
} else if (elementTop < viewportHeight && elementBottom > viewportHeight) {
|
||||
// Element is partially visible from bottom
|
||||
visibleHeight = viewportHeight - elementTop;
|
||||
}
|
||||
|
||||
const visibility = visibleHeight / elementHeight;
|
||||
|
||||
// Only consider elements that are at least 30% visible
|
||||
if (visibility > 0.3) {
|
||||
if (!mostVisibleCategory || visibility > mostVisibleCategory.visibility) {
|
||||
mostVisibleCategory = {
|
||||
id: parseInt(categoryId),
|
||||
visibility
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update active category if we found a visible one
|
||||
if (mostVisibleCategory) {
|
||||
setActiveCategory((mostVisibleCategory as { id: number; visibility: number }).id);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, [categoriesContainerRef, setIsCategoriesSticky, setShowScrollTop, categoryRefs, setActiveCategory, activeCategory]);
|
||||
|
||||
return null;
|
||||
}
|
||||
23
src/pages/menu/components/SearchButton.tsx
Normal file
23
src/pages/menu/components/SearchButton.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { Button } from "antd";
|
||||
import SearchIcon from "components/Icons/SearchIcon";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import styles from "../menu.module.css";
|
||||
|
||||
export default function SearchButton() {
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
|
||||
return (
|
||||
<div className={styles.searchButtonContainer}>
|
||||
<Button
|
||||
className={styles.searchButton}
|
||||
icon={<SearchIcon />}
|
||||
onClick={() =>
|
||||
// router.push(`?orderType=${orderType}&search=true`)
|
||||
// setSelectedClientRoute("search")
|
||||
navigate(`/${id}/search`)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
src/pages/menu/helper.ts
Normal file
39
src/pages/menu/helper.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
const menuParser = (data: any) => {
|
||||
// Transform the data to match the expected format
|
||||
let products: any[] = [];
|
||||
(data.result?.menu || []).forEach((m: any) => {
|
||||
if (!m?.items?.data) return;
|
||||
|
||||
products = [
|
||||
...m.items.data.map((i: any) => ({
|
||||
...i,
|
||||
categoryId: m.caregory?.id || '',
|
||||
category_name: m.caregory?.name || '',
|
||||
is_available: true,
|
||||
nameAR: i.name,
|
||||
descriptionAR: i.description,
|
||||
category_nameAR: m.caregory?.name || '',
|
||||
is_featured: false,
|
||||
order: 0,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
ingredients: [],
|
||||
nutritionalInfo: {
|
||||
calories: 0,
|
||||
protein: 0,
|
||||
carbs: 0,
|
||||
fat: 0,
|
||||
},
|
||||
})),
|
||||
...products,
|
||||
];
|
||||
});
|
||||
return {
|
||||
products,
|
||||
categories: data.result.menu
|
||||
.filter((m: any) => m.items.data.length > 0)
|
||||
.map((m: any) => m.caregory),
|
||||
};
|
||||
};
|
||||
|
||||
export default menuParser;
|
||||
9
src/pages/menu/loading.tsx
Normal file
9
src/pages/menu/loading.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import LoadingSpinner from "components/LoadingSpinner";
|
||||
|
||||
const MenuLoading = () => (
|
||||
<>
|
||||
<LoadingSpinner />
|
||||
</>
|
||||
);
|
||||
|
||||
export default MenuLoading;
|
||||
651
src/pages/menu/menu.module.css
Normal file
651
src/pages/menu/menu.module.css
Normal file
@@ -0,0 +1,651 @@
|
||||
.menuContainer {
|
||||
overflow: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.itemDescription {
|
||||
font-size: 14px !important;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: "auto";
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* .restaurantHeader {
|
||||
margin-bottom: 24px;
|
||||
} */
|
||||
|
||||
.leftShape {
|
||||
position: absolute;
|
||||
top: 133px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
left: -11px;
|
||||
background-color: var(--background); /* Color of the shape */
|
||||
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
|
||||
}
|
||||
|
||||
:global(.darkApp) .leftShape {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.rightShape {
|
||||
position: absolute;
|
||||
top: 133px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
left: 102px;
|
||||
background-color: var(--background); /* Color of the shape */
|
||||
clip-path: path("M 0 53 Q 50 50, 50 0 Q 50 50, 100 100 L 0 100 Z");
|
||||
transform: scale(-1, 1); /* Mirror the shape on the Y-axis */
|
||||
}
|
||||
|
||||
:global(.darkApp) .rightShape {
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 33px;
|
||||
top: -64px;
|
||||
border-radius: 50%;
|
||||
/* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
|
||||
z-index: 10;
|
||||
border: 3px solid var(--background);
|
||||
width: 72px !important;
|
||||
height: 72px !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .logo {
|
||||
border-color: var(--background);
|
||||
}
|
||||
|
||||
.services {
|
||||
height: 36px;
|
||||
position: absolute;
|
||||
left: 105px;
|
||||
top: 163px;
|
||||
border-radius: 154px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
padding: 6px 9px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.serviceButton {
|
||||
height: 24px;
|
||||
color: #99a2ae;
|
||||
background-color: #f7f7f7;
|
||||
border: none;
|
||||
padding: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.activeServiceButton {
|
||||
height: 24px;
|
||||
border: none;
|
||||
color: var(--primary);
|
||||
background-color: rgba(255, 183, 0, 0.12);
|
||||
font-size: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.activeServiceButton path {
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
.logo[dir="rtl"] {
|
||||
right: 20px;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
/* Enhanced responsive item description */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.itemDescription {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
/* .logo {
|
||||
display: none;
|
||||
} */
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: "auto";
|
||||
object-fit: cover;
|
||||
}
|
||||
.restaurantHeader {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.itemDescription {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
/* .logo {
|
||||
display: none !important;
|
||||
} */
|
||||
.restaurantHeader {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
}
|
||||
|
||||
.pageContainer {
|
||||
padding: 0;
|
||||
transition: all 0.3s ease;
|
||||
background-color: "#F7F7F7"
|
||||
}
|
||||
|
||||
/* Enhanced responsive page container */
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.pageContainer {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.pageContainer {
|
||||
padding: 32px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar state adjustments */
|
||||
.sidebarCollapsed .pageContainer {
|
||||
margin-left: 80px;
|
||||
}
|
||||
|
||||
.sidebarExpanded .pageContainer {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sidebarCollapsed .pageContainer,
|
||||
.sidebarExpanded .pageContainer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.darkApp) .restaurantHeader path {
|
||||
fill: none !important;
|
||||
stroke: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Enhanced Dark theme styles */
|
||||
:global(.darkApp) .itemName {
|
||||
color: rgba(255, 255, 255, 0.95) !important;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemName:hover {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemDescription {
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .itemPrice {
|
||||
color: var(--primary) !important;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab {
|
||||
color: rgba(255, 255, 255, 0.75) !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
backdrop-filter: blur(12px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab:hover {
|
||||
color: var(--primary) !important;
|
||||
background-color: rgba(54, 54, 54, 0.9) !important;
|
||||
border-color: rgba(255, 198, 0, 0.3) !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
:global(.darkApp) .categoryTab.active {
|
||||
color: var(--primary) !important;
|
||||
background-color: rgba(255, 198, 0, 0.1) !important;
|
||||
border-bottom-color: var(--primary) !important;
|
||||
box-shadow: 0 2px 8px rgba(255, 198, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Enhanced dark theme for page container */
|
||||
:global(.darkApp) .pageContainer {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
:global(.darkApp) .pageContainer h1,
|
||||
:global(.darkApp) .pageContainer h2,
|
||||
:global(.darkApp) .pageContainer h3,
|
||||
:global(.darkApp) .pageContainer h4,
|
||||
:global(.darkApp) .pageContainer h5,
|
||||
:global(.darkApp) .pageContainer h6 {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Dark theme for menu items */
|
||||
:global(.darkApp) .menuItem {
|
||||
background-color: #181818 !important;
|
||||
border-color: #363636 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .menuItem:hover {
|
||||
background-color: #363636 !important;
|
||||
border-color: #424242 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Dark theme for restaurant header */
|
||||
|
||||
:global(.darkApp) .restaurantLogo {
|
||||
border-color: rgba(255, 198, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
/* Dark theme for navigation buttons */
|
||||
:global(.darkApp) .navButton {
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
border-color: rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .navButton:hover {
|
||||
background-color: #ffffff !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Dark theme for search functionality */
|
||||
:global(.darkApp) .searchContainer {
|
||||
background-color: rgba(42, 42, 42, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
:global(.darkApp) .searchInput {
|
||||
background-color: rgba(54, 54, 54, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .searchInput::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
|
||||
/* Dark theme for ratings and reviews */
|
||||
:global(.darkApp) .ratingContainer {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
:global(.darkApp) .ratingText {
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
:global(.darkApp) .ratingCount {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
/* Dark theme for product cards */
|
||||
:global(.darkApp) .productCard {
|
||||
background-color: #181818 !important;
|
||||
border-color: #363636 !important;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .productCard:hover {
|
||||
background-color: #363636 !important;
|
||||
border-color: #424242 !important;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Dark theme for product images */
|
||||
:global(.darkApp) .productImage {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Dark theme for add to cart buttons */
|
||||
:global(.darkApp) .addToCartButton {
|
||||
background-color: var(--primary) !important;
|
||||
border-color: var(--primary) !important;
|
||||
color: #000000 !important;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .addToCartButton:hover {
|
||||
background-color: #ffd633 !important;
|
||||
border-color: #ffd633 !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(255, 198, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Dark theme for quantity controls */
|
||||
:global(.darkApp) .quantityControl {
|
||||
background-color: rgba(42, 42, 42, 0.8);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityButton {
|
||||
background-color: rgba(54, 54, 54, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #ffffff !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityButton:hover {
|
||||
background-color: rgba(66, 66, 66, 0.9) !important;
|
||||
border-color: var(--primary) !important;
|
||||
}
|
||||
|
||||
:global(.darkApp) .quantityInput {
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
color: #ffffff !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.darkApp) .services {
|
||||
color: #ffffff !important;
|
||||
background-color: #000000 !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
:global(.darkApp) .serviceButton {
|
||||
color: #ffffff !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border: none;
|
||||
border-radius: 888px;
|
||||
}
|
||||
|
||||
:global(.darkApp) .activeServiceButton {
|
||||
color: var(--primary) !important;
|
||||
background-color: rgba(42, 42, 42, 0.8) !important;
|
||||
border: none;
|
||||
border-radius: 888px;
|
||||
}
|
||||
|
||||
:global(.darkApp) .activeServiceButton path {
|
||||
stroke: var(--primary) !important;
|
||||
}
|
||||
|
||||
/* Smooth transitions for all elements */
|
||||
.pageContainer *,
|
||||
.menuItem *,
|
||||
.productCard *,
|
||||
.categoryTab * {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Enhanced responsive restaurant header */
|
||||
.restaurantHeader {
|
||||
position: relative;
|
||||
/* overflow: hidden; */
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.restaurantHeader {
|
||||
border-radius: 0 0 20px 20px;
|
||||
/* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); */
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.restaurantHeader {
|
||||
border-radius: 0 0 24px 24px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive restaurant logo */
|
||||
/* .restaurantLogo {
|
||||
transition: all 0.3s ease;
|
||||
} */
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.restaurantLogo {
|
||||
width: 96px !important;
|
||||
height: 96px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.restaurantLogo {
|
||||
width: 120px !important;
|
||||
height: 120px !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive navigation buttons */
|
||||
.navButton {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.navButton {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
.navButton {
|
||||
width: 48px !important;
|
||||
height: 48px !important;
|
||||
border-radius: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive animations */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.pageContainer {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
/* .restaurantHeader {
|
||||
animation: fadeInDown 0.8s ease-out;
|
||||
} */
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive focus states */
|
||||
.pageContainer:focus,
|
||||
.restaurantHeader:focus,
|
||||
.navButton:focus {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.pageContainer:focus,
|
||||
.restaurantHeader:focus,
|
||||
.navButton:focus {
|
||||
outline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Enhanced responsive print styles */
|
||||
@media print {
|
||||
.pageContainer {
|
||||
background-color: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.restaurantHeader {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
.navButton {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dineInIcon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pickupIcon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.downIcon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.backButtonContainer {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
left: 20px;
|
||||
top: 70px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.searchButtonContainer {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
right: 20px;
|
||||
top: 70px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
max-width: 800px;
|
||||
margin: 0px auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.restaurantTitle {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.restaurantDescription {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.ratingContainer {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ratingStar {
|
||||
color: var(--primary);
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
top: 0.5px;
|
||||
}
|
||||
|
||||
.ratingScore {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ratingCount {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* RTL support for back button */
|
||||
.backButtonContainer[dir="rtl"] {
|
||||
left: auto;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
/* RTL support for search button */
|
||||
.searchButtonContainer[dir="rtl"] {
|
||||
right: auto;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
:global(.rtl) .dineInIcon {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.restaurantDescriptionSkeleton .ant-skeleton-content .ant-skeleton-paragraph{
|
||||
margin-block-start: 8px !important;
|
||||
}
|
||||
164
src/pages/menu/page.tsx
Normal file
164
src/pages/menu/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { StarFilled } from "@ant-design/icons";
|
||||
import { Grid, Image, Space } from "antd";
|
||||
import { FloatingButton } from "components/FloatingButton/FloatingButton";
|
||||
import ImageWithFallback from "components/ImageWithFallback";
|
||||
import LoyaltyCard from "components/LoyaltyCard/LoyaltyCard";
|
||||
import ProText from "components/ProText";
|
||||
import ProTitle from "components/ProTitle";
|
||||
import { useScrollHandler } from "contexts/ScrollHandlerContext";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import {
|
||||
useGetMenuQuery,
|
||||
useGetRestaurantDetailsQuery,
|
||||
} from "redux/api/others";
|
||||
import { useAppSelector } from "redux/hooks";
|
||||
import { default_image } from "utils/constants";
|
||||
import BackButton from "./components/BackButton";
|
||||
import { CategoriesList } from "./components/CategoriesList/CategoriesList";
|
||||
import LocalStorageHandler from "./components/LocalStorageHandler";
|
||||
import { MenuFooter } from "./components/MenuFooter/MenuFooter";
|
||||
import { MenuList } from "./components/MenuList/MenuList";
|
||||
import MenuSkeleton from "./components/MenuSkeleton/MenuSkeleton";
|
||||
import ScrollEventHandler from "./components/ScrollEventHandler";
|
||||
import SearchButton from "./components/SearchButton";
|
||||
import styles from "./menu.module.css";
|
||||
|
||||
const { useBreakpoint } = Grid;
|
||||
|
||||
function MenuPage() {
|
||||
const { id } = useParams();
|
||||
const [searchParams] = useSearchParams();
|
||||
const orderType = searchParams.get("orderType");
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { t } = useTranslation();
|
||||
const { data: restaurantDetails, isLoading: isLoadingRestaurant } =
|
||||
useGetRestaurantDetailsQuery(id, {
|
||||
skip: !id,
|
||||
});
|
||||
const { restaurant } = restaurantDetails || {};
|
||||
const { data: menuData, isLoading: isLoadingMenu } = useGetMenuQuery(
|
||||
restaurantDetails?.restaurant.id,
|
||||
{
|
||||
skip: !restaurantDetails?.restaurant.id,
|
||||
}
|
||||
);
|
||||
const { categoryRefs, isCategoriesSticky } = useScrollHandler();
|
||||
const { xs, md } = useBreakpoint();
|
||||
|
||||
const isLoading = isLoadingRestaurant || isLoadingMenu;
|
||||
|
||||
return (
|
||||
<>
|
||||
<LocalStorageHandler
|
||||
restaurantID={restaurant?.id || ""}
|
||||
restaurantName={restaurant?.subdomain || ""}
|
||||
orderType={orderType || ""}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<MenuSkeleton categoryCount={6} itemCount={8} variant="default" />
|
||||
) : (
|
||||
<div className={styles.menuContainer}>
|
||||
<div className={styles.restaurantHeader}>
|
||||
<ImageWithFallback
|
||||
src={restaurant?.coverm}
|
||||
fallbackSrc={default_image}
|
||||
alt={t("menu.restaurantCover")}
|
||||
className={styles.cover}
|
||||
width={"100%"}
|
||||
height={182}
|
||||
preview={false}
|
||||
loadingContainerStyle={{
|
||||
width:"100vw"
|
||||
}}
|
||||
/>
|
||||
|
||||
<Image
|
||||
src={restaurant?.logom}
|
||||
alt={t("menu.restaurantLogo")}
|
||||
className={styles.logo}
|
||||
width={"100%"}
|
||||
preview={false}
|
||||
/>
|
||||
|
||||
<div className={styles.leftShape}></div>
|
||||
<div className={styles.rightShape}></div>
|
||||
|
||||
{/* <ResponsiveServices
|
||||
orderType={orderType}
|
||||
translations={{
|
||||
common: {
|
||||
dineIn: translations.common?.dineIn || "Dine In",
|
||||
pickup: translations.common?.pickup || "Pickup",
|
||||
more: translations.common?.more || "More",
|
||||
},
|
||||
}}
|
||||
/> */}
|
||||
|
||||
<div className={styles.backButtonContainer}>
|
||||
<BackButton />
|
||||
</div>
|
||||
<SearchButton />
|
||||
</div>
|
||||
|
||||
<div className={`${styles.pageContainer}`}>
|
||||
<div className={styles.contentWrapper}>
|
||||
<ProTitle level={4} className={styles.restaurantTitle}>
|
||||
{isRTL ? restaurant?.nameAR : restaurant?.name}
|
||||
</ProTitle>
|
||||
|
||||
<div className={styles.ratingContainer}>
|
||||
<StarFilled className={styles.ratingStar} />
|
||||
<ProText className={styles.ratingScore}>4.5</ProText>
|
||||
<ProText className={styles.ratingCount}>(2567)</ProText>
|
||||
<ProText
|
||||
className={`${styles.itemDescription} ${styles.restaurantDescription} responsive-text`}
|
||||
>
|
||||
{isRTL ? restaurant?.descriptionAR : restaurant?.description}
|
||||
</ProText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`${styles.pageContainer}`}
|
||||
// style={{
|
||||
// maxWidth: isDesktop ? "1200px" : "100%",
|
||||
// margin: isDesktop ? "0 auto" : "0",
|
||||
// }}
|
||||
>
|
||||
<Space
|
||||
direction="vertical"
|
||||
// size={isMobile ? "middle" : isTablet ? "large" : "large"}
|
||||
style={{ width: "100%", gap: 16 }}
|
||||
>
|
||||
{/* Placeholder to prevent content jumping when categories become sticky */}
|
||||
{/* {isCategoriesSticky && (
|
||||
<div style={{ height: xs ? 95 : md ? 160 : 180 }} />
|
||||
)} */}
|
||||
|
||||
<div>
|
||||
<LoyaltyCard />
|
||||
<CategoriesList categories={menuData?.categories || []} />
|
||||
</div>
|
||||
|
||||
<MenuList
|
||||
data={menuData}
|
||||
id={id || ""}
|
||||
categoryRefs={categoryRefs}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<MenuFooter />
|
||||
|
||||
<ScrollEventHandler />
|
||||
<FloatingButton />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MenuPage;
|
||||
Reference in New Issue
Block a user