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 (

src/pages/checkout/components/phoneCard.tsx

@@ -0,0 +1,27 @@
+import { Form, Input } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { selectCart, updatePhone } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+
+export default function PhoneCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { phone } = useAppSelector(selectCart);
+  return (
+    <>
+      <ProInputCard title={t("checkout.phoneNumber")}>
+        <Form.Item name="phone" required rules={[{ required: true }]}>
+          <Input
+            placeholder={t("checkout.phoneNumber")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 50, borderRadius: 888 }}
+            value={phone}
+            onChange={(e) => dispatch(updatePhone(e.target.value))}
+          />
+        </Form.Item>
+      </ProInputCard>
+    </>
+  );
+}

src/pages/checkout/hooks/useOrder.ts

@@ -13,14 +13,14 @@ export default function useOrder() {
   const { mobilenumber, user_uuid } = JSON.parse(
     localStorage.getItem("customer") || "{}"
   ) as Customer;
-  const { items, coupon, tip, tables, specialRequest } =
+  const { items, coupon, tip, tables, specialRequest, phone } =
     useAppSelector(selectCart);
 
   const [createOrder] = useCreateOrderMutation();
 
   const handleCreateOrder = useCallback(() => {
     createOrder({
-      phone: mobilenumber,
+      phone: mobilenumber || phone,
       couponID: coupon,
       discountAmount: 0,
       comment: specialRequest,

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>
     </>
   );
 }