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
+        <Form.Item
+          name="tables"
+          required
+          rules={[{ required: true }]}
+          initialValue={tables}
+        >
+          <Select
             value={tables}
+            mode="multiple"
             placeholder={t("cart.tableNumber")}
             size="large"
-          optionList={getTableOptions()}
+            options={getTableOptions()}
             style={{
               width: "100%",
               height: 50,
               fontSize: 12,
             }}
-          onSelect={(value) => {
+            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,12 +50,6 @@ export default function CartFooter() {
         </Button>
       </Link>
 
-      <Link
-        to={`/${id}/checkout`}
-        style={{
-          width: "100%",
-        }}
-      >
       <Button
         style={{
           backgroundColor: colors.primary,
@@ -49,11 +60,11 @@ export default function CartFooter() {
           color: "white",
           width: "100%",
         }}
-          disabled={items.length === 0}
+        disabled={isCheckoutDisabled}
+        onClick={handleCheckoutClick}
       >
         {t("cart.checkout")}
       </Button>
-      </Link>
     </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>
+  );
 }