order page: integration

src/pages/checkout/page.tsx

@@ -2,7 +2,9 @@ import { Form } from "antd";
 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 { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
 import { AddressSummary } from "./components/AddressSummary";
 import BriefMenu from "./components/BriefMenu";
@@ -15,23 +17,28 @@ import PhoneCard from "./components/phoneCard";
 export default function CheckoutPage() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
-
+  const { phone } = useAppSelector(selectCart);
   return (
     <>
-    <Form form={form}>
-      <ProHeader>{t("checkout.title")}</ProHeader>
-      <div className={styles.checkoutContainer}>
-        <AddressSummary />
-        <RoomDetails />
-        <OfficeDetails />
-        <GiftDetails />
-        <BriefMenu />
-        <PhoneCard />
-        <PaymentMethods />
-        <OrderSummary />
-      </div>
+      <Form
+        form={form}
+        initialValues={{
+          phone,
+        }}
+      >
+        <ProHeader>{t("checkout.title")}</ProHeader>
+        <div className={styles.checkoutContainer}>
+          <AddressSummary />
+          <RoomDetails />
+          <OfficeDetails />
+          <GiftDetails />
+          <BriefMenu />
+          <PhoneCard />
+          <PaymentMethods />
+          <OrderSummary />
+        </div>
 
-      <CheckoutButton form={form} />
+        <CheckoutButton form={form} />
       </Form>
     </>
   );