59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
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 { colors } from "ThemeConstants.ts";
|
|
import { Product } from "utils/types/appTypes.ts";
|
|
import styles from "./AddToCartButton.module.css";
|
|
|
|
export function AddToCartButton({ item }: { item: Product }) {
|
|
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"
|
|
title="add"
|
|
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);
|
|
}
|
|
}}
|
|
className={`${styles.addButton} ${isRTL ? styles.addButtonRTL : styles.addButtonLTR}`}
|
|
style={{ backgroundColor: colors.primary }}
|
|
>
|
|
{t("common.add")}
|
|
</Button>
|
|
);
|
|
}
|