138 lines
5.0 KiB
TypeScript
138 lines
5.0 KiB
TypeScript
import { Flex, 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, updateCollectionMethod } from "features/order/orderSlice";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useAppDispatch, useAppSelector } from "redux/hooks";
|
|
import styles from "../address/address.module.css";
|
|
import { AddressSummary } from "./components/AddressSummary";
|
|
import CheckoutButton from "./components/CheckoutButton";
|
|
import { GiftCard } from "./components/GiftCard";
|
|
import { OrderType } from "./hooks/types";
|
|
import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
|
|
import ProInputCard from "components/ProInputCard/ProInputCard";
|
|
import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
|
|
import CouponCard from "pages/cart/components/CouponCard";
|
|
import BriefMenuCard from "./components/BriefMenuCard";
|
|
import CustomerInformationCard from "./components/CustomerInformationCard";
|
|
import Ads1 from "components/Ads/Ads1";
|
|
import { useEffect } from "react";
|
|
import { CarCard } from "./components/CarCard";
|
|
import { CollectWay } from "./components/CollectWay/CollectWay";
|
|
import PickupTimeCard from "./components/pickupEstimate/TimeEstimateCard";
|
|
import VoucherSummary from "pages/redeem/components/VoucherSummary/VoucherSummary";
|
|
|
|
export default function CheckoutPage() {
|
|
const { t } = useTranslation();
|
|
const [form] = Form.useForm();
|
|
const {
|
|
phone,
|
|
order,
|
|
orderType,
|
|
collectionMethod,
|
|
coupon,
|
|
customerName,
|
|
tip,
|
|
} = useAppSelector(selectCart);
|
|
const { token } = useAppSelector((state) => state.auth);
|
|
const dispatch = useAppDispatch();
|
|
useEffect(() => {
|
|
form.setFieldsValue({ coupon, collectionMethod, phone, customerName, tip });
|
|
}, [form, phone, coupon, collectionMethod, customerName, tip]);
|
|
|
|
return (
|
|
<>
|
|
<Form
|
|
form={form}
|
|
initialValues={{
|
|
phone,
|
|
}}
|
|
layout="vertical"
|
|
>
|
|
<Layout>
|
|
<ProHeader>{t("checkout.title")}</ProHeader>
|
|
<Layout.Content className={styles.checkoutContainer}>
|
|
{orderType === OrderType.Pickup && <CollectWay />}
|
|
{(orderType === OrderType.Pickup ||
|
|
orderType === OrderType.ScheduledOrder) && <PickupTimeCard />}
|
|
|
|
{orderType === OrderType.Pickup && <CarCard />}
|
|
{orderType === OrderType.Gift && <GiftCard />}
|
|
<PaymentMethods />
|
|
{!token && <CustomerInformationCard />}
|
|
<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.Redeem && <VoucherSummary />}
|
|
{/* {orderType === OrderType.Gift && <GiftCard />} */}
|
|
{/* <RoomDetails />
|
|
<OfficeDetails /> */}
|
|
{/* <GiftDetails /> */}
|
|
{/* <BriefMenu /> */}
|
|
{orderType !== OrderType.Redeem && <CouponCard />}
|
|
|
|
{/* Collection Method */}
|
|
{orderType === OrderType.Pickup && (
|
|
<ProInputCard title={t("cart.collectionMethod")}>
|
|
<Form.Item
|
|
name="collectionMethod"
|
|
required
|
|
rules={[
|
|
{
|
|
required: true,
|
|
message: t("cart.pleaseSelectCollectionMethod"),
|
|
},
|
|
]}
|
|
>
|
|
<ProRatioGroups
|
|
options={[
|
|
{ label: t("cart.Cash"), value: "cod", price: "" },
|
|
{
|
|
label: t("cart.e-payment"),
|
|
value: "paymentgateway",
|
|
price: "",
|
|
},
|
|
]}
|
|
value={collectionMethod}
|
|
onRatioClick={(value) => {
|
|
if (value === "cod") {
|
|
dispatch(updateCollectionMethod(value));
|
|
} else {
|
|
dispatch(updateCollectionMethod(value));
|
|
}
|
|
}}
|
|
/>
|
|
</Form.Item>
|
|
</ProInputCard>
|
|
)}
|
|
|
|
{/* Reward Your Waiter */}
|
|
{orderType !== OrderType.Redeem && <RewardWaiterCard />}
|
|
<BriefMenuCard />
|
|
<Ads1 />
|
|
<OrderSummary />
|
|
</Layout.Content>
|
|
|
|
<CheckoutButton form={form} />
|
|
</Layout>
|
|
</Form>
|
|
</>
|
|
);
|
|
}
|