cart: apply form validation

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