cart & checkout: apply validation based on required inputs in each service & add phone input in checkout page

src/pages/checkout/page.tsx

@@ -1,3 +1,4 @@
+import { Form } from "antd";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
@@ -9,12 +10,15 @@ import CheckoutButton from "./components/CheckoutButton";
 import { GiftDetails } from "./components/GiftDetails";
 import { OfficeDetails } from "./components/OfficeDetails";
 import { RoomDetails } from "./components/RoomDetails";
+import PhoneCard from "./components/phoneCard";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
+  const [form] = Form.useForm();
 
   return (
     <>
+    <Form form={form}>
       <ProHeader>{t("checkout.title")}</ProHeader>
       <div className={styles.checkoutContainer}>
         <AddressSummary />
@@ -22,11 +26,13 @@ export default function CheckoutPage() {
         <OfficeDetails />
         <GiftDetails />
         <BriefMenu />
+        <PhoneCard />
         <PaymentMethods />
         <OrderSummary />
       </div>
 
-      <CheckoutButton />
+      <CheckoutButton form={form} />
+      </Form>
     </>
   );
 }