worling on add car bottom sheet

src/assets/locals/ar.json

@@ -511,6 +511,11 @@
   },
   "car":{
     "addCar":"إضافة سيارة",
-    "selectCar":"اختر السيارة"
+    "selectCar":"اختر السيارة",
+    "addCarDetails":"إضافة تفاصيل السيارة",
+    "brand":"العلامة التجارية",
+    "color":"اللون",
+    "category":"الفئة",
+    "plateNumber":"رقم السيارة"
   }
 }

src/assets/locals/en.json

@@ -523,6 +523,11 @@
   },
   "car": {
     "addCar": "Add Car",
-    "selectCar": "Select Car"
+    "selectCar": "Select Car",
+    "addCarDetails": "Add Car Details",
+    "brand": "Brand",
+    "color": "Color",
+    "category": "Category",
+    "plateNumber": "Plate Number"
   }
 }

src/components/CustomBottomSheet/AddCarBottomSheet.tsx

@@ -0,0 +1,126 @@
+import { Button, Form, Input } from "antd";
+import ProPhoneInput from "components/ProPhoneInput";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { ProBottomSheet } from "../ProBottomSheet/ProBottomSheet";
+
+const { TextArea } = Input;
+
+interface CarDetailsType {
+  brandId: string;
+  category: string;
+  color: string;
+  plateNumber: string;
+}
+
+interface AddCarBottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (value: CarDetailsType) => void;
+}
+
+export function AddCarBottomSheet({
+  isOpen,
+  onClose,
+  onSave,
+}: AddCarBottomSheetProps) {
+  const { t } = useTranslation();
+  const [carForm] = Form.useForm();
+  useEffect(() => {
+    carForm.setFieldsValue({});
+  }, [carForm]);
+
+  const handleSave = () => {
+    onSave(carForm.getFieldsValue());
+    carForm.resetFields();
+    onClose();
+  };
+
+  const handleCancel = () => {
+    carForm.resetFields();
+    onClose();
+  };
+
+  return (
+    <ProBottomSheet
+      isOpen={isOpen}
+      onClose={handleCancel}
+      title={t("car.addCarDetails")}
+      showCloseButton={false}
+      initialSnap={1}
+      height={475}
+      snapPoints={[475]}
+    >
+      <Form
+        layout="vertical"
+        style={{ marginTop: 24}}
+        name="carForm"
+        form={carForm}
+      >
+        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+          <Form.Item
+            name="brandId"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.brand")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="color"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.color")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="category"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.category")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+
+          <Form.Item
+            name="plateNumber"
+            rules={[{ required: true, message: "" }]}
+            colon={false}
+          >
+            <Input
+              placeholder={t("car.plateNumber")}
+              size="large"
+              style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+              autoFocus={false}
+            />
+          </Form.Item>
+        </div>
+      </Form>
+
+      <br />
+
+      <Button
+        type="primary"
+        style={{ width: "100%", boxShadow: "none" }}
+        onClick={handleSave}
+      >
+        {t("car.save")}
+      </Button>
+    </ProBottomSheet>
+  );
+}

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}
+          onClick={handleAddCarClick}
-          disabled={!value}
+          icon={
-          icon={<PlusIcon color="#5F6C7B" dimension="16" className={styles.plusIcon} />}
+            <PlusIcon
+              color="#5F6C7B"
+              dimension="16"
+              className={styles.plusIcon}
+            />
+          }
         >
           {t("car.addCar")}
         </Button>