pay flow: initial commit

src/pages/pay/page.tsx

@@ -0,0 +1,66 @@
+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 CheckoutButton from "pages/checkout/components/CheckoutButton";
+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";
+
+
+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>
+
+          <CheckoutButton form={form} />
+        </Layout>
+      </Form>
+    </>
+  );
+}