cart: apply form validation

src/pages/cart/components/CartDesktopLayout.tsx

@@ -9,6 +9,7 @@ import styles from "pages/cart/cart.module.css";
 import { colors } from "ThemeConstants.ts";
 import { CartItem } from "utils/types/appTypes.ts";
 
+import { FormInstance } from "antd";
 import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { selectCart } from "features/order/orderSlice.ts";
 import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
@@ -22,7 +23,11 @@ import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks.ts";
 import CartFooter from "./cartFooter/CartFooter";
 
-export default function CartDesktopLayout() {
+interface CartDesktopLayoutProps {
+  form: FormInstance;
+}
+
+export default function CartDesktopLayout({ form }: CartDesktopLayoutProps) {
   const { t } = useTranslation();
   const { items } = useAppSelector(selectCart);
 
@@ -152,7 +157,7 @@ export default function CartDesktopLayout() {
             </Card>
 
             <div style={{ marginTop: "1rem" }}>
-              <CartFooter />
+              <CartFooter form={form} />
             </div>
           </Col>
 

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -1,36 +1,41 @@
-import ProHeader from "components/ProHeader/ProHeader.tsx";
-import styles from "pages/cart/cart.module.css";
-import { Space, Card, Divider } from "antd";
-import ProTitle from "components/ProTitle.tsx";
-import { Link, useParams } from "react-router-dom";
-import { colors } from "ThemeConstants.ts";
 import { PlusOutlined } from "@ant-design/icons";
-import ProText from "components/ProText.tsx";
+import { Card, Divider, Space } from "antd";
 import ArabicPrice from "components/ArabicPrice";
-import ImageWithFallback from "components/ImageWithFallback";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
-import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
+import ImageWithFallback from "components/ImageWithFallback";
+import ProHeader from "components/ProHeader/ProHeader.tsx";
 import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
+import ProText from "components/ProText.tsx";
+import ProTitle from "components/ProTitle.tsx";
 import {
-  updateCollectionMethod,
   selectCart,
+  updateCollectionMethod,
 } from "features/order/orderSlice.ts";
+import styles from "pages/cart/cart.module.css";
+import YouMightAlsoLike from "pages/cart/components/youMayLike/YouMightAlsoLike.tsx";
+import { Link, useParams } from "react-router-dom";
+import { colors } from "ThemeConstants.ts";
 
 import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { useAppSelector } from "redux/hooks.ts";
 
-import { useTranslation } from "react-i18next";
-import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
+import { FormInstance } from "antd";
 import useBreakPoint from "hooks/useBreakPoint.ts";
+import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
+import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
-import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
+import SpecialRequestCard from "pages/cart/components/specialRequest/SpecialRequestCard.tsx";
 import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 import TimeEstimateCard from "pages/cart/components/timeEstimate/TimeEstimateCard.tsx";
-import CartFooter from "pages/cart/components/cartFooter/CartFooter.tsx";
+import { useTranslation } from "react-i18next";
 
-export default function CartMobileTabletLayout() {
+interface CartMobileTabletLayoutProps {
+  form: FormInstance;
+}
+
+export default function CartMobileTabletLayout({ form }: CartMobileTabletLayoutProps) {
   const { t } = useTranslation();
   const { items, collectionMethod } = useAppSelector(selectCart);
   const { id } = useParams();
@@ -263,7 +268,7 @@ export default function CartMobileTabletLayout() {
           <div style={{ height: "10vh" }} />
         </Space>
       </div>
-      <CartFooter />
+      <CartFooter form={form} />
     </>
   );
 }

src/pages/cart/components/TableNumberCard.tsx

@@ -1,55 +1,65 @@
-import styles from "pages/cart/cart.module.css";
-import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import { Form, Select } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import {
-  updateTables,
   removeTable,
   selectCart,
+  updateTables,
 } from "features/order/orderSlice.ts";
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
-import { useAppSelector } from "redux/hooks.ts";
-import { useTranslation } from "react-i18next";
 import i18n from "i18n/i18n.ts";
+import styles from "pages/cart/cart.module.css";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks.ts";
 
 // Function to get translated table names
 export const getTableOptions = () => [
-  { id: "1", name: `${i18n.t("checkout.table")} 1` },
-  { id: "2", name: `${i18n.t("checkout.table")} 2` },
-  { id: "3", name: `${i18n.t("checkout.table")} 3` },
-  { id: "4", name: `${i18n.t("checkout.table")} 4` },
-  { id: "5", name: `${i18n.t("checkout.table")} 5` },
-  { id: "6", name: `${i18n.t("checkout.table")} 6` },
-  { id: "7", name: `${i18n.t("checkout.table")} 7` },
-  { id: "8", name: `${i18n.t("checkout.table")} 8` },
-  { id: "9", name: `${i18n.t("checkout.table")} 9` },
-  { id: "10", name: `${i18n.t("checkout.table")} 10` },
+  { value: "1", label: `${i18n.t("checkout.table")} 1` },
+  { value: "2", label: `${i18n.t("checkout.table")} 2` },
+  { value: "3", label: `${i18n.t("checkout.table")} 3` },
+  { value: "4", label: `${i18n.t("checkout.table")} 4` },
+  { value: "5", label: `${i18n.t("checkout.table")} 5` },
+  { value: "6", label: `${i18n.t("checkout.table")} 6` },
+  { value: "7", label: `${i18n.t("checkout.table")} 7` },
+  { value: "8", label: `${i18n.t("checkout.table")} 8` },
+  { value: "9", label: `${i18n.t("checkout.table")} 9` },
+  { value: "10", label: `${i18n.t("checkout.table")} 10` },
 ];
 
 export default function TableNumberCard() {
   const { t } = useTranslation();
   const { tables } = useAppSelector(selectCart);
+
   return (
     <>
       <ProInputCard
         title={t("cart.tableNumber")}
         className={styles.tableNumberCard}
       >
-        <ProInModalMultiSelect
-          value={tables}
-          placeholder={t("cart.tableNumber")}
-          size="large"
-          optionList={getTableOptions()}
-          style={{
-            width: "100%",
-            height: 50,
-            fontSize: 12,
-          }}
-          onSelect={(value) => {
-            updateTables(value);
-          }}
-          onClear={() => {
-            removeTable();
-          }}
-        />
+        <Form.Item
+          name="tables"
+          required
+          rules={[{ required: true }]}
+          initialValue={tables}
+        >
+          <Select
+            value={tables}
+            mode="multiple"
+            placeholder={t("cart.tableNumber")}
+            size="large"
+            options={getTableOptions()}
+            style={{
+              width: "100%",
+              height: 50,
+              fontSize: 12,
+            }}
+            onChange={(value) => {
+              updateTables(value);
+            }}
+            onClear={() => {
+              removeTable();
+            }}
+            allowClear
+          />
+        </Form.Item>
       </ProInputCard>
     </>
   );

src/pages/cart/components/cartFooter/CartFooter.tsx

@@ -1,16 +1,33 @@
 import { colors } from "ThemeConstants.ts";
-import { Button } from "antd";
+import { Button, FormInstance } from "antd";
 import { selectCart } from "features/order/orderSlice.ts";
 import { useTranslation } from "react-i18next";
-import { Link, useParams } from "react-router-dom";
+import { Link, useNavigate, useParams } from "react-router-dom";
 import { useAppSelector } from "redux/hooks.ts";
 import styles from "./footer.module.css";
 
-export default function CartFooter() {
+interface CartFooterProps {
+  form: FormInstance;
+}
+
+export default function CartFooter({ form }: CartFooterProps) {
   const { t } = useTranslation();
   const { items } = useAppSelector(selectCart);
   const { id } = useParams();
   const orderType = localStorage.getItem("orderType");
+  const navigate = useNavigate();
+
+  // Check if checkout should be disabled
+  const isCheckoutDisabled = items.length === 0;
+
+  const handleCheckoutClick = async () => {
+    try {
+      await form.validateFields();
+      navigate(`/${id}/checkout`);
+    } catch (error) {
+      console.log("Form validation failed:", error);
+    }
+  };
 
   return (
     <div className={styles.cartFooter}>
@@ -33,27 +50,21 @@ export default function CartFooter() {
         </Button>
       </Link>
 
-      <Link
-        to={`/${id}/checkout`}
+      <Button
         style={{
+          backgroundColor: colors.primary,
+          borderRadius: 100,
+          height: 50,
+          borderColor: "#F2F2F2",
+          fontSize: 16,
+          color: "white",
           width: "100%",
         }}
+        disabled={isCheckoutDisabled}
+        onClick={handleCheckoutClick}
       >
-        <Button
-          style={{
-            backgroundColor: colors.primary,
-            borderRadius: 100,
-            height: 50,
-            borderColor: "#F2F2F2",
-            fontSize: 16,
-            color: "white",
-            width: "100%",
-          }}
-          disabled={items.length === 0}
-        >
-          {t("cart.checkout")}
-        </Button>
-      </Link>
+        {t("cart.checkout")}
+      </Button>
     </div>
   );
 }

src/pages/cart/page.tsx

@@ -1,11 +1,14 @@
+import { Form } from "antd";
 import { useEffect } from "react";
 
+import useBreakPoint from "hooks/useBreakPoint.ts";
 import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
 import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
-import useBreakPoint from "hooks/useBreakPoint.ts";
 
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
+  const [form] = Form.useForm();
+  
   // Prevent keyboard from appearing automatically on mobile
   useEffect(() => {
     // Blur any focused element when component mounts
@@ -24,9 +27,17 @@ export default function CartPage() {
 
   // Enhanced desktop layout
   if (isDesktop) {
-    return <CartDesktopLayout />;
+    return (
+      <Form form={form}>
+        <CartDesktopLayout form={form} />
+      </Form>
+    );
   }
 
   // Mobile/Tablet Layout (existing code)
-  return <CartMobileTabletLayout />;
+  return (
+    <Form form={form}>
+      <CartMobileTabletLayout form={form} />
+    </Form>
+  );
 }