worling on add car bottom sheet

src/pages/checkout/components/CarBottomSheet.tsx

@@ -6,6 +6,7 @@ import { Button, Card } from "antd";
 import CarRatioGroups from "./CarRatioGroups/CarRatioGroups";
 import PlusIcon from "components/Icons/PlusIcon";
 import styles from "../checkout.module.css";
+import { AddCarBottomSheet } from "components/CustomBottomSheet/AddCarBottomSheet";
 
 interface CarBottomSheetProps {
   isOpen: boolean;
@@ -15,6 +16,7 @@ interface CarBottomSheetProps {
 export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
   const { t } = useTranslation();
   const [value, setValue] = useState<string | null>(null);
+  const [isAddCarOpen, setIsAddCarOpen] = useState(false);
 
   const handleCancel = () => {
     setValue(null);
@@ -26,6 +28,34 @@ export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
     setValue(value);
   };
 
+  const handleAddCarClick = () => {
+    setIsAddCarOpen(true);
+  };
+
+  const handleAddCarClose = () => {
+    setIsAddCarOpen(false);
+    // Reopen CarBottomSheet when AddCarBottomSheet closes
+    // 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);
+    // After saving, close AddCarBottomSheet which will trigger reopening CarBottomSheet
+    setIsAddCarOpen(false);
+  };
+
+  // Show AddCarBottomSheet when it's open, otherwise show CarBottomSheet
+  if (isAddCarOpen) {
+    return (
+      <AddCarBottomSheet
+        isOpen={isAddCarOpen}
+        onClose={handleAddCarClose}
+        onSave={handleAddCarSave}
+      />
+    );
+  }
+
   return (
     <ProBottomSheet
       isOpen={isOpen}
@@ -78,9 +108,14 @@ export function CarBottomSheet({ isOpen, onClose }: CarBottomSheetProps) {
             color: "#5F6C7B",
             marginTop: 16,
           }}
-          onClick={handleSave}
-          disabled={!value}
-          icon={<PlusIcon color="#5F6C7B" dimension="16" className={styles.plusIcon} />}
+          onClick={handleAddCarClick}
+          icon={
+            <PlusIcon
+              color="#5F6C7B"
+              dimension="16"
+              className={styles.plusIcon}
+            />
+          }
         >
           {t("car.addCar")}
         </Button>