cart refactor code

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -14,16 +14,12 @@ import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups.tsx";
 import {
   updateCollectionMethod,
-  updateTables,
-  removeTable,
   updateEstimateTime,
   selectCart,
 } from "features/order/orderSlice.ts";
 
-import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
 import OrderSummary from "components/OrderSummary/OrderSummary.tsx";
 import { EstimateTimeBottomSheet } from "components/CustomBottomSheet/EstimateTimeBottomSheet.tsx";
-import { getTableOptions } from "pages/cart/page.tsx";
 import { useAppSelector, useAppDispatch } from "redux/hooks.ts";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -32,11 +28,12 @@ import useBreakPoint from "hooks/useBreakPoint.ts";
 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 TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
 
 export default function CartMobileTabletLayout() {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const { items, tables, estimateTimeDate, collectionMethod } =
+  const { items, estimateTimeDate, collectionMethod } =
     useAppSelector(selectCart);
   const { id } = useParams();
 
@@ -290,30 +287,7 @@ export default function CartMobileTabletLayout() {
           <RewardWaiterCard />
 
           {/* Table Number */}
-          {orderType === "dine-in" && (
-            <ProInputCard
-              title={t("cart.tableNumber")}
-              className={styles.tableNumberCard}
-            >
-              <ProInModalMultiSelect
-                value={tables}
-                placeholder={t("tableNumber")}
-                size="large"
-                optionList={getTableOptions()}
-                style={{
-                  width: "100%",
-                  height: 50,
-                  fontSize: 12,
-                }}
-                onSelect={(value) => {
-                  updateTables(value);
-                }}
-                onClear={() => {
-                  removeTable();
-                }}
-              />
-            </ProInputCard>
-          )}
+          {orderType === "dine-in" && <TableNumberCard />}
 
           {/* Invoice Summary */}
           <OrderSummary />