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 {
-  updateTables,
-  removeTable,
-  selectCart,
-  selectCartTotal,
-} from "features/order/orderSlice.ts";
+import { 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
-                className={styles.desktopSidebarCard}
-                style={{ "--animation-order": 3 } as React.CSSProperties}
-              >
-                <ProInputCard title={t("tableNumber")}>
-                  <ProInModalMultiSelect
-                    value={tables}
-                    placeholder={t("tableNumberPlaceholder")}
-                    size="large"
-                    optionList={getTableOptions()}
-                    style={{
-                      width: "100%",
-                      height: "50px",
-                    }}
-                    onSelect={(value) => {
-                      updateTables(value);
-                    }}
-                    onClear={() => {
-                      removeTable();
-                    }}
-                  />
-                </ProInputCard>
-              </div>
+              {orderType === "dine-in" && (
+                <div
+                  className={styles.desktopSidebarCard}
+                  style={{ "--animation-order": 3 } as React.CSSProperties}
+                >
+                  <TableNumberCard />
+                </div>
+              )}
 
               {/* Order Summary */}
               <Card