tables: update data source

src/components/CustomBottomSheet/TablesBottomSheet.tsx

@@ -1,212 +0,0 @@
-import Circle4PeopleIcon from "components/Icons/tables/Circle4PeopleIcon";
-import Rectangle6PeopleIcon from "components/Icons/tables/Rectangle6PeopleIcon";
-import Square4PeopleIcon from "components/Icons/tables/Square4PeopleIcon";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
-import styles from "./CustomBottomSheet.module.css";
-
-interface TablesBottomSheetProps {
-  isOpen: boolean;
-  onClose: () => void;
-  initialValue: string;
-  onSave: (value: string) => void;
-}
-
-export function TablesBottomSheet({
-  isOpen,
-  onClose,
-  initialValue,
-  onSave,
-}: TablesBottomSheetProps) {
-  const { t } = useTranslation();
-  const [value, setValue] = useState(initialValue);
-
-  useEffect(() => {
-    setValue(initialValue);
-  }, [initialValue]);
-
-  const handleSave = () => {
-    onSave(value);
-    onClose();
-  };
-
-  const handleCancel = () => {
-    setValue(initialValue);
-    onClose();
-  };
-
-  const tableList = [
-    {
-      id: 1,
-      name: "Table 1",
-      value: "table1",
-      shape: "rectangle",
-      number: 6,
-      is_booked: true,
-    },
-    {
-      id: 2,
-      name: "Table 2",
-      value: "table2",
-      shape: "square",
-      number: 4,
-      is_booked: false,
-    },
-    {
-      id: 3,
-      name: "Table 3",
-      value: "table3",
-      shape: "circle",
-      number: 4,
-      is_booked: false,
-    },
-    {
-      id: 4,
-      name: "Table 4",
-      value: "table4",
-      shape: "rectangle",
-      number: 6,
-      is_booked: false,
-    },
-    {
-      id: 5,
-      name: "Table 5",
-      value: "table5",
-      shape: "rectangle",
-      number: 6,
-      is_booked: false,
-    },
-    {
-      id: 6,
-      name: "Table 6",
-      value: "table6",
-      shape: "rectangle",
-      number: 6,
-      is_booked: false,
-    },
-    {
-      id: 7,
-      name: "Table 7",
-      value: "table7",
-      shape: "square",
-      number: 4,
-      is_booked: false,
-    },
-    {
-      id: 8,
-      name: "Table 8",
-      value: "table8",
-      shape: "square",
-      number: 4,
-      is_booked: false,
-    },
-    {
-      id: 9,
-      name: "Table 9",
-      value: "table9",
-      shape: "circle",
-      number: 4,
-      is_booked: false,
-    },
-    {
-      id: 10,
-      name: "Table 10",
-      value: "table10",
-      shape: "circle",
-      number: 4,
-      is_booked: false,
-    },
-  ];
-
-  return (
-    <ProBottomSheet
-      isOpen={isOpen}
-      onClose={handleCancel}
-      title={t("cart.tables")}
-      showCloseButton={false}
-      initialSnap={1}
-      height={"70vh"}
-      snapPoints={["70vh"]}
-    >
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(4, 1fr)",
-          gap: 20,
-          columnGap: 20,
-        }}
-      >
-        {tableList.map((table) => {
-          if (table.shape === "rectangle") {
-            return (
-              <div
-                key={table.id}
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-                onClick={handleSave}
-              >
-                <Rectangle6PeopleIcon
-                  title={table.name}
-                  timer={
-                    table.is_booked ? table.number.toFixed(2).toString() : ""
-                  }
-                  className={styles.bookedStyles}
-                  fill={table.is_booked ? "#FFE299" : "#C8E6A9"}
-                />
-              </div>
-            );
-          } else if (table.shape === "square") {
-            return (
-              <div
-                key={table.id}
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-                onClick={handleSave}
-              >
-                <Square4PeopleIcon
-                  title={table.name}
-                  timer={
-                    table.is_booked ? table.number.toFixed(2).toString() : ""
-                  }
-                  className={styles.bookedStyles}
-                  fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
-                />
-              </div>
-            );
-          } else if (table.shape === "circle") {
-            return (
-              <div
-                key={table.id}
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-                onClick={handleSave}
-              >
-                <Circle4PeopleIcon
-                  title={table.name}
-                  timer={
-                    table.is_booked ? table.number.toFixed(2).toString() : ""
-                  }
-                  className={styles.bookedStyles}
-                  fill={table.is_booked ? "#FFE299" : "#5F6C7B"}
-                />
-              </div>
-            );
-          }
-        })}
-      </div>
-    </ProBottomSheet>
-  );
-}

src/pages/cart/components/TableNumberCard.tsx

@@ -5,28 +5,21 @@ import {
   selectCart,
   updateTables,
 } from "features/order/orderSlice.ts";
-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";
+import { useGetTablesQuery } from "redux/api/others";
-
+import { useAppDispatch, useAppSelector } from "redux/hooks.ts";
-// Function to get translated table names
-export const getTableOptions = () => [
-  { 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);
+  const dispatch = useAppDispatch();
+  const { data: tableList } = useGetTablesQuery({
+    restaurantID: localStorage.getItem("restaurantID") || "",
+    tableType: "1",
+  }, {
+    skip: !localStorage.getItem("restaurantID"),
+  });
 
   return (
     <>
@@ -45,17 +38,18 @@ export default function TableNumberCard() {
             mode="multiple"
             placeholder={t("cart.tableNumber")}
             size="large"
-            options={getTableOptions()}
+            options={tableList}
             style={{
               width: "100%",
               height: 50,
               fontSize: 12,
             }}
             onChange={(value) => {
-              updateTables(value);
+              console.log(value);
+              dispatch(updateTables(value));
             }}
             onClear={() => {
-              removeTable();
+              dispatch(removeTable());
             }}
             allowClear
           />