hide unnecessary elements

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);