Files
web-menu-react-version-/src/pages/pay/page.tsx

67 lines
2.2 KiB
TypeScript

import { Form, Layout } from "antd";
import InputCard from "components/InputCard";
import OrderSummary from "components/OrderSummary/OrderSummary";
import PaymentMethods from "components/PaymentMethods/PaymentMethods";
import ProHeader from "components/ProHeader/ProHeader";
import { selectCart } from "features/order/orderSlice";
import { AddressSummary } from "pages/checkout/components/AddressSummary";
import BriefMenu from "pages/checkout/components/BriefMenu";
import { GiftCard } from "pages/checkout/components/GiftCard";
import PhoneCard from "pages/checkout/components/PhoneCard";
import { OrderType } from "pages/checkout/hooks/types";
import { useTranslation } from "react-i18next";
import { useAppSelector } from "redux/hooks";
import styles from "../address/address.module.css";
import PayButton from "./components/PayButton";
export default function PayPage() {
const { t } = useTranslation();
const [form] = Form.useForm();
const { phone, order, orderType } = useAppSelector(selectCart);
return (
<>
<Form
form={form}
initialValues={{
phone,
}}
layout="vertical"
>
<Layout>
<ProHeader>{t("pay.title")}</ProHeader>
<Layout.Content className={styles.checkoutContainer}>
<AddressSummary />
{orderType === OrderType.ToRoom && (
<InputCard
title={t("address.roomNo")}
name="roomNumber"
placeholder={t("address.roomNo")}
value={order?.roomNumber}
/>
)}
{orderType === OrderType.ToOffice && (
<InputCard
title={t("address.officeNo")}
name="officeNumber"
placeholder={t("address.officeNo")}
value={order?.officeNumber}
/>
)}
{orderType === OrderType.Gift && <GiftCard />}
{/* <RoomDetails />
<OfficeDetails /> */}
{/* <GiftDetails /> */}
<BriefMenu />
<OrderSummary />
<PhoneCard />
<PaymentMethods />
</Layout.Content>
<PayButton form={form} />
</Layout>
</Form>
</>
);
}