cart: apply form validation

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