cart refactor code

src/pages/cart/components/CartDesktopLayout.tsx

@@ -9,25 +9,21 @@ import ImageWithFallback from "components/ImageWithFallback";
 import ArabicPrice from "components/ArabicPrice";
 import CartActionsButtons from "components/CartActionsButtons/CartActionsButtons.tsx";
 import { CartItem } from "utils/types/appTypes.ts";
-import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
 
-import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import { selectCart, selectCartTotal } from "features/order/orderSlice.ts";
-import {
-  updateTables,
-  removeTable,
-  selectCart,
-  selectCartTotal,
-} from "features/order/orderSlice.ts";
 import { useTranslation } from "react-i18next";
 import { useAppSelector } from "redux/hooks.ts";
-import { getTableOptions } from "pages/cart/page.tsx";
 import SpecialRequestCard from "pages/cart/components/SpecialRequestCard.tsx";
 import CouponCard from "pages/cart/components/CouponCard.tsx";
 import RewardWaiterCard from "pages/cart/components/RewardWaiterCard.tsx";
+import TableNumberCard from "pages/cart/components/TableNumberCard.tsx";
+import CarPlateCard from "pages/cart/components/CarPlateCard.tsx";
 
 export default function CartDesktopLayout() {
   const { t } = useTranslation();
-  const { items, tables } = useAppSelector(selectCart);
+  const { items } = useAppSelector(selectCart);
+  const orderType = localStorage.getItem("orderType");
+
   const subtotal = useAppSelector(selectCartTotal);
   const tax = subtotal * 0.1; // 10% tax
   const total = subtotal + tax;
@@ -184,6 +180,9 @@ export default function CartDesktopLayout() {
               >
                 <CouponCard />
               </div>
+
+              {orderType === "pickup" && <CarPlateCard />}
+
               <div
                 className={styles.desktopSidebarCard}
                 style={{ "--animation-order": 1 } as React.CSSProperties}
@@ -192,29 +191,14 @@ export default function CartDesktopLayout() {
               </div>
 
               {/* Table Number */}
-              <div
+              {orderType === "dine-in" && (
-                className={styles.desktopSidebarCard}
+                <div
-                style={{ "--animation-order": 3 } as React.CSSProperties}
+                  className={styles.desktopSidebarCard}
-              >
+                  style={{ "--animation-order": 3 } as React.CSSProperties}
-                <ProInputCard title={t("tableNumber")}>
+                >
-                  <ProInModalMultiSelect
+                  <TableNumberCard />
-                    value={tables}
+                </div>
-                    placeholder={t("tableNumberPlaceholder")}
+              )}
-                    size="large"
-                    optionList={getTableOptions()}
-                    style={{
-                      width: "100%",
-                      height: "50px",
-                    }}
-                    onSelect={(value) => {
-                      updateTables(value);
-                    }}
-                    onClear={() => {
-                      removeTable();
-                    }}
-                  />
-                </ProInputCard>
-              </div>
 
               {/* Order Summary */}
               <Card

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" && (
+          {orderType === "dine-in" && <TableNumberCard />}
-            <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>
-          )}
 
           {/* Invoice Summary */}
           <OrderSummary />

src/pages/cart/components/TableNumberCard.tsx

@@ -0,0 +1,56 @@
+import styles from "pages/cart/cart.module.css";
+import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import {
+  updateTables,
+  removeTable,
+  selectCart,
+} 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";
+
+// Function to get translated table names
+export const getTableOptions = () => [
+  { id: "1", name: i18n.t("table1") },
+  { id: "2", name: i18n.t("table2") },
+  { id: "3", name: i18n.t("table3") },
+  { id: "4", name: i18n.t("table4") },
+  { id: "5", name: i18n.t("table5") },
+  { id: "6", name: i18n.t("table6") },
+  { id: "7", name: i18n.t("table7") },
+  { id: "8", name: i18n.t("table8") },
+  { id: "9", name: i18n.t("table9") },
+  { id: "10", name: i18n.t("table10") },
+];
+
+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("tableNumber")}
+          size="large"
+          optionList={getTableOptions()}
+          style={{
+            width: "100%",
+            height: 50,
+            fontSize: 12,
+          }}
+          onSelect={(value) => {
+            updateTables(value);
+          }}
+          onClear={() => {
+            removeTable();
+          }}
+        />
+      </ProInputCard>
+    </>
+  );
+}

src/pages/cart/page.tsx

@@ -1,24 +1,9 @@
 import { useEffect } from "react";
 
 import CartDesktopLayout from "pages/cart/components/CartDesktopLayout.tsx";
-import i18n from "i18n/i18n.ts";
 import CartMobileTabletLayout from "pages/cart/components/CartMobileTabletLayout.tsx";
 import useBreakPoint from "hooks/useBreakPoint.ts";
 
-// Function to get translated table names
-export const getTableOptions = () => [
-  { id: "1", name: i18n.t("table1") },
-  { id: "2", name: i18n.t("table2") },
-  { id: "3", name: i18n.t("table3") },
-  { id: "4", name: i18n.t("table4") },
-  { id: "5", name: i18n.t("table5") },
-  { id: "6", name: i18n.t("table6") },
-  { id: "7", name: i18n.t("table7") },
-  { id: "8", name: i18n.t("table8") },
-  { id: "9", name: i18n.t("table9") },
-  { id: "10", name: i18n.t("table10") },
-];
-
 export default function CartPage() {
   const { isDesktop } = useBreakPoint();
   // Prevent keyboard from appearing automatically on mobile