79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
}
|