68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import { Button } from "antd";
|
|
import ArabicPrice from "components/ArabicPrice";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProText from "components/ProText";
|
|
import { selectCart } from "features/order/orderSlice";
|
|
import { OrderType } from "pages/checkout/hooks/types.ts";
|
|
import { useMemo } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link, useParams } from "react-router-dom";
|
|
import { useAppSelector } from "redux/hooks";
|
|
import { colors } from "ThemeConstants";
|
|
import styles from "../../address/address.module.css";
|
|
|
|
export default function BriefMenu() {
|
|
const { tables, items } = useAppSelector(selectCart);
|
|
const { t } = useTranslation();
|
|
const { orderType } = useAppSelector(selectCart);
|
|
const { subdomain } = useParams();
|
|
|
|
const menuItems = useMemo(
|
|
() =>
|
|
items.map((item, index) => (
|
|
<div key={item.id}>
|
|
<div className={styles.briefMenuItem}>
|
|
<Button
|
|
type="text"
|
|
shape="circle"
|
|
className={styles.quantityButton}
|
|
>
|
|
{index + 1}X
|
|
</Button>
|
|
<div>
|
|
<ProText className={styles.itemName}>{item.name}</ProText>
|
|
<br />
|
|
<ArabicPrice price={item.price} type="secondary" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)),
|
|
[items],
|
|
);
|
|
|
|
const cardTitle = useMemo(
|
|
() =>
|
|
orderType === OrderType.DineIn || orderType === OrderType.Pay
|
|
? t("checkout.table") + " " + tables
|
|
: t("checkout.items"),
|
|
[orderType, t, tables],
|
|
);
|
|
|
|
return (
|
|
<ProInputCard
|
|
title={cardTitle}
|
|
titleRight={
|
|
orderType === OrderType.Pay ? (
|
|
<Link to={`/${subdomain}/menu?orderType=${OrderType.Pay}`} style={{ textDecoration: "none" }}>
|
|
<ProText style={{ color: colors.primary }}>
|
|
{t("menu.title")}
|
|
</ProText>
|
|
</Link>
|
|
) : undefined
|
|
}
|
|
>
|
|
<div className={styles.briefMenuContainer}>{menuItems}</div>
|
|
</ProInputCard>
|
|
);
|
|
}
|