70 lines
1.8 KiB
TypeScript
70 lines
1.8 KiB
TypeScript
import { colors } from "ThemeConstants.ts";
|
|
import { Button, FormInstance, message, Layout } from "antd";
|
|
import { selectCart } from "features/order/orderSlice.ts";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useNavigate, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks.ts";
|
|
import styles from "./footer.module.css";
|
|
|
|
interface CartFooterProps {
|
|
form: FormInstance;
|
|
}
|
|
|
|
export default function CartFooter({ form }: CartFooterProps) {
|
|
const { t } = useTranslation();
|
|
const { items } = useAppSelector(selectCart);
|
|
const { subdomain } = useParams();
|
|
const orderType = localStorage.getItem("orderType");
|
|
const navigate = useNavigate();
|
|
|
|
const handleCheckoutClick = async () => {
|
|
if (items.length === 0) message.warning(t("cart.pleaseAddItemsToCart"));
|
|
else {
|
|
try {
|
|
await form.validateFields();
|
|
navigate(`/${subdomain}/checkout`);
|
|
} catch (error) {
|
|
console.log("Form validation failed:", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layout.Footer className={styles.cartFooter}>
|
|
<Link
|
|
to={`/${subdomain}/menu?${orderType ? `orderType=${orderType}` : ""}`}
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<Button
|
|
style={{
|
|
borderRadius: 100,
|
|
height: 50,
|
|
borderColor: "black",
|
|
width: "100%",
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
{t("cart.addItem")}
|
|
</Button>
|
|
</Link>
|
|
|
|
<Button
|
|
style={{
|
|
backgroundColor: colors.primary,
|
|
borderRadius: 100,
|
|
height: 50,
|
|
borderColor: "#F2F2F2",
|
|
fontSize: 16,
|
|
color: "white",
|
|
width: "100%",
|
|
}}
|
|
onClick={handleCheckoutClick}
|
|
>
|
|
{t("cart.checkout")}
|
|
</Button>
|
|
</Layout.Footer>
|
|
);
|
|
}
|