navigate to product description always
This commit is contained in:
@@ -1,38 +1,18 @@
|
||||
import { PlusOutlined } from "@ant-design/icons";
|
||||
import { Button } from "antd";
|
||||
import { addItem } from "features/order/orderSlice.ts";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
|
||||
import { useAppSelector } from "redux/hooks.ts";
|
||||
import { colors } from "ThemeConstants.ts";
|
||||
import { Product } from "utils/types/appTypes.ts";
|
||||
import styles from "./AddToCartButton.module.css";
|
||||
|
||||
export function AddToCartButton({ item }: { item: Product }) {
|
||||
export function AddToCartButton() {
|
||||
const { isRTL } = useAppSelector((state) => state.locale);
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
const { id } = useParams();
|
||||
const navigate = useNavigate();
|
||||
|
||||
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"
|
||||
@@ -40,14 +20,8 @@ export function AddToCartButton({ item }: { item: Product }) {
|
||||
iconPosition="start"
|
||||
icon={<PlusOutlined title="add" className={styles.plusIcon} />}
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
if (item.isHasVarint) {
|
||||
navigate(`/${id}/menu`);
|
||||
} else {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleQuickAdd(item);
|
||||
}
|
||||
onClick={() => {
|
||||
navigate(`/${id}/menu`);
|
||||
}}
|
||||
className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
|
||||
style={{ backgroundColor: colors.primary }}
|
||||
|
||||
@@ -41,8 +41,8 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
|
||||
|
||||
// Handle product click - open dialog on desktop, navigate on mobile/tablet
|
||||
const handleProductClick = (item: Product) => {
|
||||
localStorage.setItem("product", JSON.stringify(item));
|
||||
if (isDesktop) {
|
||||
localStorage.setItem("product", JSON.stringify(item));
|
||||
if (isDesktop) {
|
||||
setIsDialogOpen(true);
|
||||
} else {
|
||||
navigate(`/${restaurantName}/product/${item.id}`);
|
||||
@@ -95,17 +95,19 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
|
||||
}}
|
||||
style={{ marginBottom: "1rem" }}
|
||||
>
|
||||
{!isDesktop && <ImageWithFallback
|
||||
src={category.image || "/default.png"}
|
||||
fallbackSrc="/default.png"
|
||||
alt={category.name}
|
||||
width="100%"
|
||||
height={130}
|
||||
className={styles.categoryMenuItemImage}
|
||||
loadingContainerStyle={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>}
|
||||
{!isDesktop && (
|
||||
<ImageWithFallback
|
||||
src={category.image || "/default.png"}
|
||||
fallbackSrc="/default.png"
|
||||
alt={category.name}
|
||||
width="100%"
|
||||
height={130}
|
||||
className={styles.categoryMenuItemImage}
|
||||
loadingContainerStyle={{
|
||||
width: "100%",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<ProTitle
|
||||
style={{
|
||||
fontSize: "1.25rem",
|
||||
@@ -251,7 +253,7 @@ export function MenuList({ data, categoryRefs }: MenuListProps) {
|
||||
height={90}
|
||||
/>
|
||||
|
||||
<AddToCartButton item={item} />
|
||||
<AddToCartButton />
|
||||
|
||||
{items.find((i) => i.id === item.id) && (
|
||||
<Badge
|
||||
|
||||
Reference in New Issue
Block a user