hide unnecessary elements

src/assets/locals/ar.json

@@ -321,7 +321,8 @@
     "today": "اليوم",
     "change": "تغيير",
     "pickup": "استلام",
-    "setPickupTime": "تحديد وقت الاستلام"
+    "setPickupTime": "تحديد وقت الاستلام",
+    "carPlateNumber": "رقم لوحة السيارة"
   },
   "address": {
     "title": "العنوان",

src/assets/locals/en.json

@@ -341,7 +341,8 @@
     "today": "Today",
     "change": "Change",
     "pickup": "Pickup",
-    "setPickupTime": "Set Pickup Time"
+    "setPickupTime": "Set Pickup Time",
+    "carPlateNumber": "Car Plate Number"
   },
   "address": {
     "title": "Address",

src/pages/cart/components/CartMobileTabletLayout.tsx

@@ -148,8 +148,8 @@ export default function CartMobileTabletLayout({
           <SpecialRequestCard />
 
           {/* Car Plate*/}
-          {((orderType === OrderType.Pickup && pickup_type === "car") ||
-            orderType === OrderType.ScheduledOrder) && <CarPlateCard />}
+          {/* {((orderType === OrderType.Pickup && pickup_type === "car") ||
+            orderType === OrderType.ScheduledOrder) && <CarPlateCard />} */}
 
           {/* Estimate Time */}
           {/* {(orderType === OrderType.Pickup ||

src/pages/checkout/components/CarBottomSheet.tsx

@@ -7,6 +7,8 @@ import CarRatioGroups from "./CarRatioGroups/CarRatioGroups";
 import PlusIcon from "components/Icons/PlusIcon";
 import styles from "../checkout.module.css";
 import { AddCarBottomSheet } from "components/CustomBottomSheet/AddCarBottomSheet";
+import { updatePlateCar } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
 
 interface CarBottomSheetProps {
   isOpen: boolean;
@@ -17,6 +19,7 @@ export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState<string | null>(null);
   const [isAddCarOpen, setIsAddCarOpen] = useState(false);
+  const dispatch = useAppDispatch();
 
   const handleCancel = () => {
     setValue(null);
@@ -24,8 +27,8 @@ export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
   };
 
   const handleSave = () => {
+    dispatch(updatePlateCar(value || ""));
     onClose();
-    setValue(value);
   };
 
   const handleAddCarClick = () => {
@@ -38,9 +41,8 @@ export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
     // The parent component should handle reopening, but we'll ensure state is correct
   };
 
-  const handleAddCarSave = (carDetails: any) => {
-    // Handle saving the new car details
-    console.log("Car details saved:", carDetails);
+  const handleAddCarSave = () => {
+    dispatch(updatePlateCar(value || ""));
     // After saving, close AddCarBottomSheet which will trigger reopening CarBottomSheet
     setIsAddCarOpen(false);
   };

src/pages/checkout/components/CarCard.tsx

@@ -13,11 +13,15 @@ export function CarCard() {
   const { t } = useTranslation();
   const { isRTL } = useAppSelector((state) => state.locale);
   const [isCarBottomSheetOpen, setIsCarBottomSheetOpen] = useState(false);
+  const { plateCar } = useAppSelector((state) => state.order);
+
   return (
     <>
-      <Card onClick={() => {
-        setIsCarBottomSheetOpen(true);
-      }}>
+      <Card
+        onClick={() => {
+          setIsCarBottomSheetOpen(true);
+        }}
+      >
         <div className={styles.carCard}>
           <Button
             shape="circle"
@@ -54,17 +58,56 @@ export function CarCard() {
               {t("checkout.addCarDetails")}
             </ProText>
 
-            <ProText
-              style={{
-                fontWeight: 400,
-                fontStyle: "Regular",
-                fontSize: 16,
-                lineHeight: "140%",
-                color: "#777580",
-              }}
-            >
-              {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
-            </ProText>
+            {plateCar ? (
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 10,
+                  marginTop: 6,
+                }}
+              >
+                <ProText
+                  style={{
+                    fontWeight: 400,
+                    fontStyle: "Regular",
+                    fontSize: 16,
+                    lineHeight: "140%",
+                    color: "#777580",
+                  }}
+                >{t("checkout.carPlateNumber")}:</ProText>
+                <div
+                  style={{
+                    backgroundColor: "#FFC600",
+                    color: "#333333",
+                    padding: "3px 14px",
+                    borderRadius: "20px",
+                    fontSize: 15,
+                    fontWeight: 600,
+                    fontStyle: "SemiBold",
+                    letterSpacing: "0.8px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    boxShadow: "0 2px 6px rgba(255, 198, 0, 0.25)",
+                    fontFamily: "monospace",
+                  }}
+                >
+                  {plateCar}
+                </div>
+              </div>
+            ) : (
+              <ProText
+                style={{
+                  fontWeight: 400,
+                  fontStyle: "Regular",
+                  fontSize: 16,
+                  lineHeight: "140%",
+                  color: "#777580",
+                }}
+              >
+                {t("checkout.soTheRestaurantCanRecognizeYourCarWhenYouArrive")}
+              </ProText>
+            )}
           </div>
           {isRTL ? <BackIcon iconSize={24} /> : <NextIcon iconSize={24} />}
         </div>

src/pages/checkout/components/CarRatioGroups/CarRatioGroups.tsx

@@ -24,9 +24,7 @@ const CarRatioGroups = ({
   showDivider = false,
   ...props
 }: CarRatioGroupsProps) => {
-  const { t } = useTranslation();
   const handleChange = (e: RadioChangeEvent) => {
-    console.log(e.target.value);
     // If onChange is provided (from Form.Item), use it
     if (onChange) {
       onChange(e);

src/pages/checkout/page.tsx

@@ -1,29 +1,25 @@
-import { Flex, Form, Layout } from "antd";
 import InputCard from "components/InputCard";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
-import { selectCart, updateCollectionMethod } from "features/order/orderSlice";
+import { selectCart } from "features/order/orderSlice";
 import { useTranslation } from "react-i18next";
-import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { useAppSelector } from "redux/hooks";
 import styles from "../address/address.module.css";
 import { AddressSummary } from "./components/AddressSummary";
 import CheckoutButton from "./components/CheckoutButton";
 import { GiftCard } from "./components/GiftCard";
 import { OrderType } from "./hooks/types";
-import RewardWaiterCard from "pages/cart/components/RewardWaiterCard";
-import ProInputCard from "components/ProInputCard/ProInputCard";
-import ProRatioGroups from "components/ProRatioGroups/ProRatioGroups";
 import CouponCard from "pages/cart/components/CouponCard";
 import BriefMenuCard from "./components/BriefMenuCard";
 import CustomerInformationCard from "./components/CustomerInformationCard";
-import Ads1 from "components/Ads/Ads1";
 import { useEffect } from "react";
 import { CarCard } from "./components/CarCard";
 import { CollectWay } from "./components/CollectWay/CollectWay";
 import PickupTimeCard from "./components/pickupEstimate/TimeEstimateCard";
 import VoucherSummary from "pages/redeem/components/VoucherSummary/VoucherSummary";
 import EarnLoyaltyPointsCard from "pages/cart/components/earnLoyaltyPointsCard/EarnLoyaltyPointsCard";
+import { Form, Layout } from "antd";
 
 export default function CheckoutPage() {
   const { t } = useTranslation();
@@ -38,7 +34,6 @@ export default function CheckoutPage() {
     tip,
   } = useAppSelector(selectCart);
   const { token } = useAppSelector((state) => state.auth);
-  const dispatch = useAppDispatch();
   useEffect(() => {
     form.setFieldsValue({ coupon, collectionMethod, phone, customerName, tip });
   }, [form, phone, coupon, collectionMethod, customerName, tip]);