78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
import { PlusOutlined } from "@ant-design/icons";
|
|
import { Button } from "antd";
|
|
import { addItem } from "features/order/orderSlice";
|
|
import useBreakPoint from "hooks/useBreakPoint";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import { colors } from "ThemeConstants";
|
|
import { Product } from "utils/types/appTypes";
|
|
|
|
export function AddToCart({ item }: { item: Product }) {
|
|
const { isRTL } = useAppSelector((state) => state.locale);
|
|
const { t } = useTranslation();
|
|
const dispatch = useAppDispatch();
|
|
const { isMobile, isTablet } = useBreakPoint();
|
|
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"
|
|
style={{
|
|
position: "relative",
|
|
top: "-1px",
|
|
}}
|
|
/>
|
|
}
|
|
size={isMobile || isTablet ? "small" : "middle"}
|
|
onClick={(e) => {
|
|
if (item.isHasVarint) {
|
|
navigate(`/${id}/menu`);
|
|
} else {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
handleQuickAdd(item);
|
|
}
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
bottom: -10,
|
|
[isRTL ? "right" : "left"]: isMobile ? "5%" : "15%",
|
|
zIndex: 1,
|
|
width: isMobile ? 82 : 100,
|
|
height: isMobile ? 32 : 44,
|
|
fontSize: isMobile ? "1rem" : 18,
|
|
fontWeight: 600,
|
|
border: 0,
|
|
backgroundColor: colors.primary,
|
|
color: "#FFF",
|
|
}}
|
|
>
|
|
{t("common.add")}
|
|
</Button>
|
|
);
|
|
}
|