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

src/pages/checkout/components/CheckoutButton.tsx

@@ -1,11 +1,11 @@
-import { Button } from "antd";
+import { Button, FormInstance } from "antd";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import styles from "../../address/address.module.css";
 import useOrder from "../hooks/useOrder";
 
-export default function CheckoutButton() {
+export default function CheckoutButton({ form }: { form: FormInstance }) {
   const { t } = useTranslation();
   const orderType = useMemo(() => localStorage.getItem("orderType"), []);
   const navigate = useNavigate();
@@ -16,13 +16,18 @@ export default function CheckoutButton() {
     navigate(`/${id}/split-bill`);
   }, [navigate, id]);
 
-  const handlePlaceOrderClick = useCallback(() => {
-    handleCreateOrder();
-  }, [handleCreateOrder]);
+  const handlePlaceOrderClick = useCallback(async () => {
+    try {
+      await form.validateFields();
+      handleCreateOrder();
+    } catch (error) {
+      console.log(error);
+    }
+  }, [handleCreateOrder, form]);
 
   const shouldShowSplitBill = useMemo(
     () => orderType === "dine-in",
-    [orderType]
+    [orderType],
   );
 
   return (