stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/AddNewProperty/Room.jsx

@@ -21,11 +21,14 @@ import successHandler from "../../utils/helpers/SuccessHandler";
 import Checkbox from "../../shared/Checkbox/Checkbox";
 import CommonLayout from "./CommonLayout";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
-import CustomDatePicker from "../../shared/DateField/CustomDatePicker";
 import { useDropzone } from "react-dropzone";
 import NcImage from "../../shared/NcImage/NcImage";
 import moment from "moment";
 import "../../styles/room.scss";
+import DatePicker from "react-datepicker";
+import { roomValidationSchema } from "../../shared/Schema/FormSchema";
+import { showToastError } from "../../utils/helpers/ToastErros";
+import SecondryButton from "../../shared/Button/SecondryButton";
 
 const Rooms = () => {
   const dispatch = useDispatch();
@@ -34,7 +37,8 @@ const Rooms = () => {
   const { slug } = useParams();
   const id = slug;
   const [property, setProperty] = useState(null);
-
+  const [originalValues, setOrignalValues] = useState(null);
+  const [showAddRoomButton, setShowAddRoomButton] = useState(true);
   const initialRoomValues = {
     id: "",
     name: "",
@@ -67,27 +71,26 @@ const Rooms = () => {
   const [roomImagePreviews, setRoomImagePreviews] = useState({});
   const [roomImagesToDelete, setRoomImagesToDelete] = useState({});
   const [isLoading, setIsLoading] = useState(true);
+
   useEffect(() => {
     if (initialValues?.rooms_attributes?.length > 0) {
       setCount(initialValues?.rooms_attributes?.length);
     }
   }, [initialValues]);
-
   useEffect(() => {
     if (id) {
       const fetchPropertyData = async () => {
         const response = await dispatch(
           getallupdateProperties({ propertyId: id })
         ).unwrap();
-        if (response.payload?.success) {
+
+        if (response) {
           setProperty(response);
-        }
-        if (response?.rooms) {
-          const mappedRooms = response?.rooms.map((room) => {
-            const sortedPlaceImages = [...room?.room_images].sort(
-              (a, b) => a.position - b.position
-            );
-            return {
+          // Set total rooms from API, default to 1 if not provided
+          setTotalRooms(response.total_rooms || 1);
+          let roomsToShow = [];
+          if (response?.rooms?.length > 0) {
+            roomsToShow = response.rooms.map((room) => ({
               id: room.id,
               name: room.name,
               price_per_month:
@@ -108,27 +111,52 @@ const Rooms = () => {
               amenities: room.amenities || [],
               features: room.features || [],
               room_images: [],
-              existing_room_images: sortedPlaceImages || [],
+              existing_room_images:
+                [...room?.room_images].sort(
+                  (a, b) => a.position - b.position
+                ) || [],
               max_guests: room.max_guests?.toString() || "",
-            };
-          });
-          const uniqueRooms = Array.from(
-            new Map(mappedRooms.map((room) => [room?.id, room])).values()
+            }));
+            roomsToShow = Array.from(
+              new Map(roomsToShow.map((room) => [room.id, room])).values()
+            );
+          } else {
+            roomsToShow = [{ ...initialRoomValues }];
+          }
+          const finalValues = {
+            rooms_attributes: Array.from(roomsToShow),
+          };
+
+          setInitialValues(finalValues);
+          setOrignalValues(JSON.parse(JSON.stringify(finalValues)));
+          setShowAddRoomButton(
+            roomsToShow.length < (response.total_rooms || 1)
           );
-          setInitialValues({
-            rooms_attributes:
-              uniqueRooms.length > 0
-                ? uniqueRooms
-                : initialValues.rooms_attributes?.map((item) => ({
-                    ...item,
-                  })),
-          });
         }
       };
       fetchPropertyData();
     }
   }, [dispatch, globalId, id]);
 
+  const hasFormChanged = (currentValues, originalValues) => {
+    if (!originalValues) return true;
+    const currentStr = JSON.stringify(currentValues);
+    const originalStr = JSON.stringify(originalValues);
+
+    return currentStr !== originalStr;
+  };
+  const normalizeArrayForComparison = (arr) => {
+    return (
+      arr
+        ?.map((item) => ({
+          id: item.id || item.amenity_id || item.feature_id,
+          amenity_id: item.amenity_id,
+          feature_id: item.feature_id,
+        }))
+        .sort((a, b) => (a.id || 0) - (b.id || 0)) || []
+    );
+  };
+
   const handleAmenitiesChange = (
     amenityId,
     roomIndex,
@@ -181,6 +209,10 @@ const Rooms = () => {
   };
 
   const handleSubmit = async (values) => {
+    if (!hasFormChanged(values, originalValues)) {
+      navigate(`/listing-stay-detail/${slug}`);
+      return;
+    }
     const formData = new FormData();
 
     if (id) {
@@ -313,6 +345,38 @@ const Rooms = () => {
     }
   };
 
+  const formatFieldName = (field) => {
+    return field.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
+  };
+  const displayValidationErrors = (formErrors) => {
+    if (
+      formErrors.rooms_attributes &&
+      Array.isArray(formErrors.rooms_attributes)
+    ) {
+      for (let index = 0; index < formErrors.rooms_attributes.length; index++) {
+        const roomError = formErrors.rooms_attributes[index];
+        if (roomError && typeof roomError === "object") {
+          for (const field of Object.keys(roomError)) {
+            if (roomError[field]) {
+              return [`Room ${index + 1} -${roomError[field]}`];
+            }
+          }
+        }
+      }
+    }
+    for (const key of Object.keys(formErrors)) {
+      if (key !== "rooms_attributes") {
+        const error = formErrors[key];
+        if (typeof error === "string") {
+          const formattedKey = formatFieldName(key);
+          return [`${formattedKey}: ${error}`];
+        }
+      }
+    }
+
+    return [];
+  };
+
   function arraysEqual(arr1, arr2) {
     if (arr1.length !== arr2.length) return false;
     for (let i = 0; i < arr1.length; i++) {
@@ -321,24 +385,6 @@ const Rooms = () => {
     return true;
   }
 
-  const handleRoomImagesChange = (e, index, setFieldValue, values) => {
-    const files = e.target.files;
-    const newFiles = files ? Array.from(files) : [];
-    if (files) {
-      const newPreviews = newFiles.map((file) => URL.createObjectURL(file));
-
-      setRoomImagePreviews((prevPreviews) => ({
-        ...prevPreviews,
-        [index]: [...(prevPreviews[index] || []), ...newPreviews],
-      }));
-
-      const existingImages =
-        values.rooms_attributes?.[index]?.room_images || [];
-      const combinedImages = [...existingImages, ...newFiles];
-      setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
-    }
-  };
-
   const handleRemoveRoomImage = async (
     previewIndex,
     index,
@@ -427,53 +473,85 @@ const Rooms = () => {
     fetchRoomTypes();
   }, [dispatch]);
 
-  const useRoomsImagesDropzone = (index, values, setFieldValue) => {
-    return useDropzone({
-      onDrop: (acceptedFiles) => {
-        const files = acceptedFiles.map((file) => URL.createObjectURL(file));
-
-        setRoomImagePreviews((prevPreviews) => ({
-          ...prevPreviews,
-          [index]: [...(prevPreviews[index] || []), ...files],
-        }));
-
-        const existingImages =
-          values.rooms_attributes?.[index]?.room_images || [];
-        const combinedImages = [...existingImages, ...acceptedFiles];
-        setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
-      },
-    });
-  };
-
   const RoomImagesUploader = ({ index }) => {
-    const { values, setFieldValue } = useFormikContext();
+    const { values, setFieldValue, errors, touched } = useFormikContext();
+
     const handleImageUpload = (files) => {
       if (!files || files.length === 0) return;
-      const newFiles = Array.from(files);
-      const newPreviews = newFiles.map((file) => ({
+      const allowedTypes = [
+        "image/png",
+        "image/jpg",
+        "image/jpeg",
+        "image/gif",
+      ];
+      const maxSize = 10 * 1024 * 1024; // 10MB
+
+      const validFiles = [];
+      const invalidFiles = [];
+
+      Array.from(files).forEach((file) => {
+        if (!allowedTypes.includes(file.type)) {
+          invalidFiles.push(`${file.name}: Invalid file type`);
+        } else if (file.size > maxSize) {
+          invalidFiles.push(`${file.name}: File too large (max 10MB)`);
+        } else {
+          validFiles.push(file);
+        }
+      });
+
+      if (invalidFiles.length > 0) {
+        alert(`Invalid files:\n${invalidFiles.join("\n")}`);
+      }
+
+      if (validFiles.length === 0) return;
+      const existingImages =
+        values.rooms_attributes?.[index]?.existing_room_images || [];
+      const currentImages = values.rooms_attributes?.[index]?.room_images || [];
+      const totalImages =
+        existingImages.length + currentImages.length + validFiles.length;
+
+      if (totalImages > 10) {
+        alert(
+          `Maximum 10 images allowed per room. You can add ${
+            10 - (existingImages.length + currentImages.length)
+          } more images.`
+        );
+        return;
+      }
+
+      const newPreviews = validFiles.map((file) => ({
         previewUrl: URL.createObjectURL(file),
         file,
       }));
-      setRoomImagePreviews((prevPreviews) => ({
-        ...prevPreviews,
-        [index]: [...(prevPreviews[index] || []), ...newPreviews],
-      }));
-      const existingImages =
-        values.rooms_attributes?.[index]?.room_images || [];
-      const combinedImages = [...existingImages, ...newFiles];
+      const combinedImages = [...currentImages, ...validFiles];
       setFieldValue(`rooms_attributes[${index}].room_images`, combinedImages);
     };
+
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
       accept: {
         "image/*": [".jpeg", ".jpg", ".png", ".gif"],
       },
       onDrop: handleImageUpload,
+      maxSize: 10 * 1024 * 1024,
     });
-
+    const getImageError = () => {
+      if (
+        errors.rooms_attributes &&
+        Array.isArray(errors.rooms_attributes) &&
+        errors.rooms_attributes[index] &&
+        errors.rooms_attributes[index].room_images
+      ) {
+        return errors.rooms_attributes[index].room_images;
+      }
+      return null;
+    };
+    const imageError = getImageError();
     return (
       <div
         {...getRootProps()}
-        className={`upload-container ${isDragActive ? "drag-active" : ""}`}
+        className={`upload-container ${isDragActive ? "drag-active" : ""} ${
+          imageError ? "error" : ""
+        }`}
       >
         <input
           {...getInputProps()}
@@ -482,7 +560,6 @@ const Rooms = () => {
           type="file"
           className="sr-only"
           multiple
-          // No need for onChange here as the dropzone will handle all inputs
         />
         <div className="upload-content">
           <svg
@@ -505,6 +582,7 @@ const Rooms = () => {
           </div>
           <p className="upload-info">PNG, JPG, GIF up to 10MB</p>
         </div>
+        {imageError && <div className="error-message">{imageError}</div>}
       </div>
     );
   };
@@ -524,7 +602,7 @@ const Rooms = () => {
         <div className="divider" />
         <Formik
           initialValues={initialValues}
-          //   validationSchema={roomRuleValidationSchema}
+          validationSchema={roomValidationSchema}
           onSubmit={handleSubmit}
           enableReinitialize={true}
         >
@@ -536,477 +614,421 @@ const Rooms = () => {
             isSubmitting,
             getFieldProps,
             setFieldValue,
-          }) => (
-            <form onSubmit={handleSubmit} className="form-container">
-              {values.rooms_attributes.map((room, index) => (
-                <div
-                  key={index}
-                  className={`room-section ${
-                    index > 0 ? "room-section-bordered" : ""
-                  }`}
-                >
-                  <h3 className="room-title">Room {index + 1}</h3>
-                  <FormItem label="Room Name" className="form-item">
-                    <Input
-                      type="text"
-                      placeholder="Enter Room name"
-                      {...getFieldProps(`rooms_attributes[${index}].name`)}
-                      className="common-input"
-                    />
-                    {errors.rooms_attributes &&
-                      Array.isArray(errors.rooms_attributes) &&
-                      typeof errors.rooms_attributes[index] === "object" &&
-                      errors.rooms_attributes[index] !== null &&
-                      errors.rooms_attributes[index].name && (
-                        <div className="error-text">
-                          {errors.rooms_attributes[index].name}
-                        </div>
-                      )}
-                  </FormItem>
-                  <FormItem label="Price per Month" className="form-item">
-                    <div className="relative">
-                      <Input
-                        type="text"
-                        name={`rooms_attributes[${index}].price_per_month`}
-                        placeholder="Please enter price per month"
-                        onChange={handleChange}
-                        value={values.rooms_attributes[index]?.price_per_month}
-                        className="common-input"
-                      />
-                    </div>
-                    {errors.rooms_attributes &&
-                      Array.isArray(errors.rooms_attributes) &&
-                      typeof errors.rooms_attributes[index] === "object" &&
-                      errors.rooms_attributes[index] !== null &&
-                      errors.rooms_attributes[index].price_per_month && (
-                        <div className="error-text">
-                          {errors.rooms_attributes[index].price_per_month}
-                        </div>
-                      )}
-                  </FormItem>
-                  <FormItem label="Status" className="form-item">
-                    <Select
-                      name={`rooms_attributes[${index}].status`}
-                      onChange={handleChange}
-                      value={room.status}
-                      className="common-input"
-                    >
-                      <option value="">Select status</option>
-                      <option value="active">Active</option>
-                      <option value="inactive">Inactive</option>
-                    </Select>
-                    {errors.rooms_attributes &&
-                      Array.isArray(errors.rooms_attributes) &&
-                      typeof errors.rooms_attributes[index] === "object" &&
-                      errors.rooms_attributes[index] !== null &&
-                      errors.rooms_attributes[index].status && (
-                        <div className="error-text">
-                          {errors.rooms_attributes[index].status}
-                        </div>
-                      )}
-                  </FormItem>
-                  <FormItem label="Max Guests" className="form-item">
-                    <div className="relative">
+            validateForm,
+          }) => {
+            const handleFormSubmit = async (e) => {
+              e.preventDefault();
+              const formErrors = await validateForm();
+              if (Object.keys(formErrors).length > 0) {
+                const errorMessages = displayValidationErrors(formErrors);
+                if (errorMessages.length > 0) {
+                  showToastError(errorMessages[0]);
+                  return;
+                }
+              }
+              await handleSubmit(values);
+            };
+
+            return (
+              <form onSubmit={handleFormSubmit} className="form-container">
+                {values.rooms_attributes.map((room, index) => (
+                  <div
+                    key={index}
+                    className={`room-section ${
+                      index > 0 ? "room-section-bordered" : ""
+                    }`}
+                  >
+                    <h3 className="room-title">Room {index + 1}</h3>
+                    <FormItem label="Room Name" className="form-item">
                       <Input
                         type="text"
-                        name={`rooms_attributes[${index}].max_guests`}
-                        placeholder="Max-Guests"
-                        onChange={handleChange}
-                        value={values.rooms_attributes[index]?.max_guests}
-                        className="common-input"
-                      />
-                    </div>
-                    {errors.rooms_attributes &&
-                      Array.isArray(errors.rooms_attributes) &&
-                      typeof errors.rooms_attributes[index] === "object" &&
-                      errors.rooms_attributes[index] !== null &&
-                      errors.rooms_attributes[index].max_guests && (
-                        <div className="error-text">
-                          {errors.rooms_attributes[index].max_guests}
-                        </div>
-                      )}
-                  </FormItem>
-                  <div className="date-picker-container">
-                    <FormItem label="Availability Start Date">
-                      <input
-                        type="date"
+                        placeholder="Enter Room name"
+                        {...getFieldProps(`rooms_attributes[${index}].name`)}
                         className="common-input"
-                        value={
-                          room.booking_start
-                            ? room.booking_start.split("T")[0]
-                            : ""
-                        }
-                        onChange={(e) => {
-                          const selectedDate = e.target.value;
-                          setFieldValue(
-                            `rooms_attributes[${index}].booking_start`,
-                            selectedDate
-                          );
-                          setFieldValue(
-                            `rooms_attributes[${index}].booking_end`,
-                            null
-                          );
-                        }}
-                        min={new Date().toISOString().split("T")[0]}
                       />
                       {errors.rooms_attributes &&
                         Array.isArray(errors.rooms_attributes) &&
-                        errors.rooms_attributes[index] &&
                         typeof errors.rooms_attributes[index] === "object" &&
                         errors.rooms_attributes[index] !== null &&
-                        errors.rooms_attributes[index].booking_start && (
+                        errors.rooms_attributes[index].name && (
                           <div className="error-text">
-                            {typeof errors.rooms_attributes[index]
-                              .booking_start === "string" &&
-                              errors.rooms_attributes[index].booking_start}
+                            {errors.rooms_attributes[index].name}
                           </div>
                         )}
                     </FormItem>
-
-                    <FormItem
-                      label="Availability End Date"
-                      className="form-item"
-                    >
-                      <input
-                        type="date"
-                        className="common-input"
-                        value={
-                          room.booking_end ? room.booking_end.split("T")[0] : ""
-                        }
-                        onChange={(e) => {
-                          const selectedDate = e.target.value;
-                          setFieldValue(
-                            `rooms_attributes[${index}].booking_end`,
-                            selectedDate
-                          );
-                        }}
-                        min={
-                          room.booking_start
-                            ? new Date(
-                                new Date(room.booking_start).getTime() +
-                                  86400000
-                              )
-                                .toISOString()
-                                .split("T")[0]
-                            : new Date().toISOString().split("T")[0]
-                        }
-                      />
+                    <FormItem label="Price per Month" className="form-item">
+                      <div className="relative">
+                        <Input
+                          type="text"
+                          name={`rooms_attributes[${index}].price_per_month`}
+                          placeholder="Please enter price per month"
+                          onChange={handleChange}
+                          value={
+                            values.rooms_attributes[index]?.price_per_month
+                          }
+                          className="common-input"
+                        />
+                      </div>
                       {errors.rooms_attributes &&
                         Array.isArray(errors.rooms_attributes) &&
-                        errors.rooms_attributes[index] &&
                         typeof errors.rooms_attributes[index] === "object" &&
                         errors.rooms_attributes[index] !== null &&
-                        errors.rooms_attributes[index].booking_end && (
+                        errors.rooms_attributes[index].price_per_month && (
                           <div className="error-text">
-                            {typeof errors.rooms_attributes[index]
-                              .booking_end === "string" &&
-                              errors.rooms_attributes[index].booking_end}
+                            {errors.rooms_attributes[index].price_per_month}
                           </div>
                         )}
                     </FormItem>
-                  </div>
-                  <FormItem label="Description" className="form-item">
-                    <textarea
-                      className="description-textarea"
-                      name={`rooms_attributes[${index}].description`}
-                      placeholder="Enter room description"
-                      onChange={handleChange}
-                      value={room.description}
-                    />
-                    {errors.rooms_attributes &&
-                      Array.isArray(errors.rooms_attributes) &&
-                      typeof errors.rooms_attributes[index] === "object" &&
-                      errors.rooms_attributes[index] !== null &&
-                      errors.rooms_attributes[index].description && (
-                        <div className="error-text">
-                          {errors.rooms_attributes[index].description}
-                        </div>
-                      )}
-                  </FormItem>
-                  <div className="room-details-container">
-                    <FormItem label="Bed Type" className="form-item">
+                    <FormItem label="Status" className="form-item">
                       <Select
-                        name={`rooms_attributes[${index}].bed_type_id`}
+                        name={`rooms_attributes[${index}].status`}
                         onChange={handleChange}
-                        value={room.bed_type_id}
+                        value={room.status}
                         className="common-input"
                       >
-                        <option value="">Select bed type</option>
-                        {bedTypes.map((bedType) => (
-                          <option key={bedType.id} value={bedType.id}>
-                            {bedType.name}
-                          </option>
-                        ))}
+                        <option value="">Select status</option>
+                        <option value="active">Active</option>
+                        <option value="inactive">Inactive</option>
                       </Select>
                       {errors.rooms_attributes &&
                         Array.isArray(errors.rooms_attributes) &&
                         typeof errors.rooms_attributes[index] === "object" &&
                         errors.rooms_attributes[index] !== null &&
-                        errors.rooms_attributes[index].bed_type_id && (
+                        errors.rooms_attributes[index].status && (
                           <div className="error-text">
-                            {errors.rooms_attributes[index].bed_type_id}
+                            {errors.rooms_attributes[index].status}
                           </div>
                         )}
                     </FormItem>
-                    <FormItem label="Room Size (sq ft)" className="form-item">
-                      <Input
-                        type="text"
-                        name={`rooms_attributes[${index}].size`}
-                        placeholder="Enter room size"
-                        onChange={handleChange}
-                        value={room.size}
-                        className="common-input"
-                      />
+                    <FormItem label="Max Guests" className="form-item">
+                      <div className="relative">
+                        <Input
+                          type="text"
+                          name={`rooms_attributes[${index}].max_guests`}
+                          placeholder="Max-Guests"
+                          onChange={handleChange}
+                          value={values.rooms_attributes[index]?.max_guests}
+                          className="common-input"
+                        />
+                      </div>
                       {errors.rooms_attributes &&
                         Array.isArray(errors.rooms_attributes) &&
                         typeof errors.rooms_attributes[index] === "object" &&
                         errors.rooms_attributes[index] !== null &&
-                        errors.rooms_attributes[index].size && (
+                        errors.rooms_attributes[index].max_guests && (
                           <div className="error-text">
-                            {errors.rooms_attributes[index].size}
+                            {errors.rooms_attributes[index].max_guests}
                           </div>
                         )}
                     </FormItem>
-                    <FormItem label="Room Type" className="form-item">
-                      <Select
-                        name={`rooms_attributes[${index}].room_type_id`}
-                        onChange={handleChange}
-                        value={room.room_type_id}
-                        className="common-input"
+                    <div className="date-picker-container">
+                      <FormItem label="Availability Start Date">
+                        <DatePicker
+                          selected={
+                            room.booking_start
+                              ? new Date(room.booking_start)
+                              : null
+                          }
+                          onChange={(date) => {
+                            setFieldValue(
+                              `rooms_attributes[${index}].booking_start`,
+                              date
+                            );
+                            setFieldValue(
+                              `rooms_attributes[${index}].booking_end`,
+                              null
+                            );
+                          }}
+                          minDate={new Date()}
+                          placeholderText="Select start date"
+                          dateFormat="yyyy-MM-dd"
+                          className="common-input"
+                          isClearable
+                        />
+                        {errors.rooms_attributes &&
+                          Array.isArray(errors.rooms_attributes) &&
+                          errors.rooms_attributes[index] &&
+                          typeof errors.rooms_attributes[index] === "object" &&
+                          errors.rooms_attributes[index] !== null &&
+                          errors.rooms_attributes[index].booking_start && (
+                            <div className="error-text">
+                              {errors.rooms_attributes[index].booking_start}
+                            </div>
+                          )}
+                      </FormItem>
+
+                      <FormItem
+                        label="Availability End Date"
+                        className="form-item"
                       >
-                        <option value="">Select room type</option>
-                        {roomTypes.map((roomType) => (
-                          <option key={roomType.id} value={roomType.id}>
-                            {roomType.name}
-                          </option>
-                        ))}
-                      </Select>
+                        <DatePicker
+                          selected={
+                            room.booking_end ? new Date(room.booking_end) : null
+                          }
+                          onChange={(date) =>
+                            setFieldValue(
+                              `rooms_attributes[${index}].booking_end`,
+                              date
+                            )
+                          }
+                          minDate={
+                            room.booking_start
+                              ? moment(room.booking_start)
+                                  .add(1, "days")
+                                  .toDate()
+                              : new Date()
+                          }
+                          placeholderText="Select end date"
+                          dateFormat="yyyy-MM-dd"
+                          className="common-input"
+                          isClearable
+                        />
+                        {errors.rooms_attributes &&
+                          Array.isArray(errors.rooms_attributes) &&
+                          errors.rooms_attributes[index] &&
+                          typeof errors.rooms_attributes[index] === "object" &&
+                          errors.rooms_attributes[index] !== null &&
+                          errors.rooms_attributes[index].booking_end && (
+                            <div className="error-text">
+                              {errors.rooms_attributes[index].booking_end}
+                            </div>
+                          )}
+                      </FormItem>
+                    </div>
+                    <FormItem label="Description" className="form-item">
+                      <textarea
+                        className="description-textarea"
+                        name={`rooms_attributes[${index}].description`}
+                        placeholder="Enter room description"
+                        onChange={handleChange}
+                        value={room.description}
+                      />
                       {errors.rooms_attributes &&
                         Array.isArray(errors.rooms_attributes) &&
                         typeof errors.rooms_attributes[index] === "object" &&
                         errors.rooms_attributes[index] !== null &&
-                        errors.rooms_attributes[index].room_type_id && (
+                        errors.rooms_attributes[index].description && (
                           <div className="error-text">
-                            {errors.rooms_attributes[index].room_type_id}
+                            {errors.rooms_attributes[index].description}
                           </div>
                         )}
                     </FormItem>
-                  </div>
-                  <FormItem>
-                    <h2 className="section-title">Amenities</h2>
-                    <div className="checkbox-grid">
-                      {amenities.map((amenity) => (
-                        <Checkbox
-                          key={amenity.id.toString()}
-                          id={amenity.id.toString()}
-                          label={amenity.name}
-                          name={`rooms_attributes[${index}].amenities`}
-                          onChange={(checked) =>
-                            handleAmenitiesChange(
-                              amenity?.id,
-                              index,
-                              values,
-                              setFieldValue
-                            )
-                          }
-                          checked={values.rooms_attributes[
-                            index
-                          ]?.amenities?.some(
-                            (item) =>
-                              item.amenity_id === amenity.id ||
-                              item.id === amenity.id
+                    <div className="room-details-container">
+                      <FormItem label="Bed Type" className="form-item">
+                        <Select
+                          name={`rooms_attributes[${index}].bed_type_id`}
+                          onChange={handleChange}
+                          value={room.bed_type_id}
+                          className="common-input"
+                        >
+                          <option value="">Select bed type</option>
+                          {bedTypes.map((bedType) => (
+                            <option key={bedType.id} value={bedType.id}>
+                              {bedType.name}
+                            </option>
+                          ))}
+                        </Select>
+                        {errors.rooms_attributes &&
+                          Array.isArray(errors.rooms_attributes) &&
+                          typeof errors.rooms_attributes[index] === "object" &&
+                          errors.rooms_attributes[index] !== null &&
+                          errors.rooms_attributes[index].bed_type_id && (
+                            <div className="error-text">
+                              {errors.rooms_attributes[index].bed_type_id}
+                            </div>
                           )}
+                      </FormItem>
+                      <FormItem label="Room Size (sq ft)" className="form-item">
+                        <Input
+                          type="text"
+                          name={`rooms_attributes[${index}].size`}
+                          placeholder="Enter room size"
+                          onChange={handleChange}
+                          value={room.size}
+                          className="common-input"
                         />
-                      ))}
-                    </div>
-                  </FormItem>
-                  <FormItem>
-                    <h2 className="section-title">Features</h2>
-                    <div className="checkbox-grid">
-                      {features.map((feature) => (
-                        <Checkbox
-                          key={feature.id.toString()}
-                          id={feature.id.toString()}
-                          label={feature.name}
+                        {errors.rooms_attributes &&
+                          Array.isArray(errors.rooms_attributes) &&
+                          typeof errors.rooms_attributes[index] === "object" &&
+                          errors.rooms_attributes[index] !== null &&
+                          errors.rooms_attributes[index].size && (
+                            <div className="error-text">
+                              {errors.rooms_attributes[index].size}
+                            </div>
+                          )}
+                      </FormItem>
+                      <FormItem label="Room Type" className="form-item">
+                        <Select
+                          name={`rooms_attributes[${index}].room_type_id`}
+                          onChange={handleChange}
+                          value={room.room_type_id}
                           className="common-input"
-                          name={`rooms_attributes[${index}].features`}
-                          onChange={(checked) =>
-                            handleFeaturesChange(
-                              feature?.id,
-                              index,
-                              values,
-                              setFieldValue
-                            )
-                          }
-                          checked={values.rooms_attributes[
-                            index
-                          ]?.features?.some(
-                            (item) =>
-                              item.feature_id === feature.id ||
-                              item.id === feature.id
+                        >
+                          <option value="">Select room type</option>
+                          {roomTypes.map((roomType) => (
+                            <option key={roomType.id} value={roomType.id}>
+                              {roomType.name}
+                            </option>
+                          ))}
+                        </Select>
+                        {errors.rooms_attributes &&
+                          Array.isArray(errors.rooms_attributes) &&
+                          typeof errors.rooms_attributes[index] === "object" &&
+                          errors.rooms_attributes[index] !== null &&
+                          errors.rooms_attributes[index].room_type_id && (
+                            <div className="error-text">
+                              {errors.rooms_attributes[index].room_type_id}
+                            </div>
                           )}
-                        />
-                      ))}
+                      </FormItem>
                     </div>
-                  </FormItem>
-                  <div key={index}>
-                    <div className="image-upload-section">
-                      <span className="image-upload-title">Room images</span>
-                      <div className="image-upload-content">
-                        <RoomImagesUploader key={index} index={index} />
-                        {isLoading ? (
-                          <div className="image-preview-container">
-                            {Array.from({
-                              length: room.existing_room_images?.length,
-                            }).map((_, previewIndex) => (
-                              <div
-                                key={previewIndex}
-                                className="image-placeholder"
-                              ></div>
-                            ))}
-                          </div>
-                        ) : (
-                          <DragDropContext
-                            onDragEnd={(result) => {
-                              const { source, destination } = result;
-                              if (!destination) return;
-                              const existingImages =
-                                room.existing_room_images || [];
-                              const newImages = room.room_images || [];
-                              const combinedImages = [
-                                ...existingImages,
-                                ...newImages,
-                              ];
+                    <FormItem>
+                      <h2 className="section-title">Amenities</h2>
+                      <div className="checkbox-grid">
+                        {amenities?.map((amenity) => (
+                          <Checkbox
+                            key={amenity.id.toString()}
+                            id={amenity.id.toString()}
+                            label={amenity.name}
+                            name={`rooms_attributes[${index}].amenities`}
+                            onChange={(checked) =>
+                              handleAmenitiesChange(
+                                amenity?.id,
+                                index,
+                                values,
+                                setFieldValue
+                              )
+                            }
+                            checked={values.rooms_attributes[
+                              index
+                            ]?.amenities?.some(
+                              (item) =>
+                                item.amenity_id === amenity.id ||
+                                item.id === amenity.id
+                            )}
+                          />
+                        ))}
+                      </div>
+                    </FormItem>
+                    <FormItem>
+                      <h2 className="section-title">Features</h2>
+                      <div className="checkbox-grid">
+                        {features?.map((feature) => (
+                          <Checkbox
+                            key={feature.id.toString()}
+                            id={feature.id.toString()}
+                            label={feature.name}
+                            name={`rooms_attributes[${index}].features`}
+                            onChange={(checked) =>
+                              handleFeaturesChange(
+                                feature?.id,
+                                index,
+                                values,
+                                setFieldValue
+                              )
+                            }
+                            checked={values.rooms_attributes[
+                              index
+                            ]?.features?.some(
+                              (item) =>
+                                item.feature_id === feature.id ||
+                                item.id === feature.id
+                            )}
+                          />
+                        ))}
+                      </div>
+                    </FormItem>
+                    <div key={index}>
+                      <div className="image-upload-section">
+                        <span className="image-upload-title">Room images</span>
+                        <div className="image-upload-content">
+                          <RoomImagesUploader key={index} index={index} />
+                          {isLoading ? (
+                            <div className="image-preview-container">
+                              {Array.from({
+                                length: room.existing_room_images?.length,
+                              }).map((_, previewIndex) => (
+                                <div
+                                  key={previewIndex}
+                                  className="image-placeholder"
+                                ></div>
+                              ))}
+                            </div>
+                          ) : (
+                            <DragDropContext
+                              onDragEnd={(result) => {
+                                const { source, destination } = result;
+                                if (!destination) return;
+                                const existingImages =
+                                  room.existing_room_images || [];
+                                const newImages = room.room_images || [];
+                                const combinedImages = [
+                                  ...existingImages,
+                                  ...newImages,
+                                ];
 
-                              // Reorder the images
-                              const reorderedImages = [...combinedImages];
-                              const [removed] = reorderedImages.splice(
-                                source.index,
-                                1
-                              );
-                              reorderedImages.splice(
-                                destination.index,
-                                0,
-                                removed
-                              );
-                              const newPosition = destination.index + 1;
-                              if (removed.id) {
-                                setReorderImages((prev) => {
-                                  const updated = prev.filter(
-                                    (item) =>
-                                      item.position !== newPosition ||
-                                      item.blob_id === removed.id
-                                  );
-                                  return [
-                                    ...updated,
-                                    {
-                                      blob_id: removed.id,
-                                      position: newPosition,
-                                    },
-                                  ];
-                                });
-                              }
+                                // Reorder the images
+                                const reorderedImages = [...combinedImages];
+                                const [removed] = reorderedImages.splice(
+                                  source.index,
+                                  1
+                                );
+                                reorderedImages.splice(
+                                  destination.index,
+                                  0,
+                                  removed
+                                );
+                                const newPosition = destination.index + 1;
+                                if (removed.id) {
+                                  setReorderImages((prev) => {
+                                    const updated = prev.filter(
+                                      (item) =>
+                                        item.position !== newPosition ||
+                                        item.blob_id === removed.id
+                                    );
+                                    return [
+                                      ...updated,
+                                      {
+                                        blob_id: removed.id,
+                                        position: newPosition,
+                                      },
+                                    ];
+                                  });
+                                }
 
-                              const updatedExistingRoomImages =
-                                reorderedImages.filter((item) => item.id);
-                              const updatedRoomImages = reorderedImages.filter(
-                                (item) => !item.id
-                              );
-                              setFieldValue(
-                                `rooms_attributes[${index}].existing_room_images`,
-                                updatedExistingRoomImages
-                              );
-                              setFieldValue(
-                                `rooms_attributes[${index}].room_images`,
-                                updatedRoomImages
-                              );
-                            }}
-                          >
-                            <Droppable
-                              droppableId={`room-images-${index}`}
-                              direction="horizontal"
+                                const updatedExistingRoomImages =
+                                  reorderedImages.filter((item) => item.id);
+                                const updatedRoomImages =
+                                  reorderedImages.filter((item) => !item.id);
+                                setFieldValue(
+                                  `rooms_attributes[${index}].existing_room_images`,
+                                  updatedExistingRoomImages
+                                );
+                                setFieldValue(
+                                  `rooms_attributes[${index}].room_images`,
+                                  updatedRoomImages
+                                );
+                              }}
                             >
-                              {(provided) => (
-                                <div
-                                  className="image-preview-container"
-                                  {...provided.droppableProps}
-                                  ref={provided.innerRef}
-                                >
-                                  {(room.existing_room_images || []).map(
-                                    (image, previewIndex) => (
-                                      <Draggable
-                                        key={`existing-image-${
-                                          image.id || previewIndex
-                                        }`}
-                                        draggableId={`existing-image-${
-                                          image.id || previewIndex
-                                        }`}
-                                        index={previewIndex}
-                                      >
-                                        {(provided) => (
-                                          <div
-                                            ref={provided.innerRef}
-                                            {...provided.draggableProps}
-                                            {...provided.dragHandleProps}
-                                            className="image-wrapper"
-                                          >
-                                            <div className="image-container">
-                                              <NcImage
-                                                src={image.url || image}
-                                                alt={`Room ${index + 1} Image ${
-                                                  previewIndex + 1
-                                                }`}
-                                                className="image"
-                                              />
-                                            </div>
-                                            <button
-                                              type="button"
-                                              onClick={() =>
-                                                handleRemoveRoomImage(
-                                                  previewIndex,
-                                                  index,
-                                                  values,
-                                                  setFieldValue
-                                                )
-                                              }
-                                              className="remove-image-button"
-                                            >
-                                              <svg
-                                                className="remove-image-icon"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                                fill="none"
-                                                viewBox="0 0 24 24"
-                                                stroke="currentColor"
-                                              >
-                                                <path
-                                                  strokeLinecap="round"
-                                                  strokeLinejoin="round"
-                                                  strokeWidth={2}
-                                                  d="M6 18L18 6M6 6l12 12"
-                                                />
-                                              </svg>
-                                            </button>
-                                          </div>
-                                        )}
-                                      </Draggable>
-                                    )
-                                  )}
-                                  {(room.room_images || []).map(
-                                    (image, newIndex) => {
-                                      const previewIndex =
-                                        (room.existing_room_images?.length ||
-                                          0) + newIndex;
-                                      const previewUrl =
-                                        roomImagePreviews[index]?.[newIndex]
-                                          ?.previewUrl ||
-                                        (image instanceof File
-                                          ? URL.createObjectURL(image)
-                                          : null);
-
-                                      return (
+                              <Droppable
+                                droppableId={`room-images-${index}`}
+                                direction="horizontal"
+                              >
+                                {(provided) => (
+                                  <div
+                                    className="image-preview-container"
+                                    {...provided.droppableProps}
+                                    ref={provided.innerRef}
+                                  >
+                                    {(room.existing_room_images || []).map(
+                                      (image, previewIndex) => (
                                         <Draggable
-                                          key={`new-image-${previewIndex}`}
-                                          draggableId={`new-image-${previewIndex}`}
+                                          key={`existing-image-${
+                                            image.id || previewIndex
+                                          }`}
+                                          draggableId={`existing-image-${
+                                            image.id || previewIndex
+                                          }`}
                                           index={previewIndex}
                                         >
                                           {(provided) => (
@@ -1018,7 +1040,7 @@ const Rooms = () => {
                                             >
                                               <div className="image-container">
                                                 <NcImage
-                                                  src={previewUrl || image}
+                                                  src={image.url || image}
                                                   alt={`Room ${
                                                     index + 1
                                                   } Image ${previewIndex + 1}`}
@@ -1055,74 +1077,143 @@ const Rooms = () => {
                                             </div>
                                           )}
                                         </Draggable>
-                                      );
-                                    }
-                                  )}
-                                  {provided.placeholder}
-                                </div>
-                              )}
-                            </Droppable>
-                          </DragDropContext>
-                        )}
+                                      )
+                                    )}
+                                    {(room.room_images || []).map(
+                                      (image, newIndex) => {
+                                        const previewIndex =
+                                          (room.existing_room_images?.length ||
+                                            0) + newIndex;
+                                        const previewUrl =
+                                          roomImagePreviews[index]?.[newIndex]
+                                            ?.previewUrl ||
+                                          (image instanceof File
+                                            ? URL.createObjectURL(image)
+                                            : null);
+
+                                        return (
+                                          <Draggable
+                                            key={`new-image-${previewIndex}`}
+                                            draggableId={`new-image-${previewIndex}`}
+                                            index={previewIndex}
+                                          >
+                                            {(provided) => (
+                                              <div
+                                                ref={provided.innerRef}
+                                                {...provided.draggableProps}
+                                                {...provided.dragHandleProps}
+                                                className="image-wrapper"
+                                              >
+                                                <div className="image-container">
+                                                  <NcImage
+                                                    src={previewUrl || image}
+                                                    alt={`Room ${
+                                                      index + 1
+                                                    } Image ${
+                                                      previewIndex + 1
+                                                    }`}
+                                                    className="image"
+                                                  />
+                                                </div>
+                                                <button
+                                                  type="button"
+                                                  onClick={() =>
+                                                    handleRemoveRoomImage(
+                                                      previewIndex,
+                                                      index,
+                                                      values,
+                                                      setFieldValue
+                                                    )
+                                                  }
+                                                  className="remove-image-button"
+                                                >
+                                                  <svg
+                                                    className="remove-image-icon"
+                                                    xmlns="http://www.w3.org/2000/svg"
+                                                    fill="none"
+                                                    viewBox="0 0 24 24"
+                                                    stroke="currentColor"
+                                                  >
+                                                    <path
+                                                      strokeLinecap="round"
+                                                      strokeLinejoin="round"
+                                                      strokeWidth={2}
+                                                      d="M6 18L18 6M6 6l12 12"
+                                                    />
+                                                  </svg>
+                                                </button>
+                                              </div>
+                                            )}
+                                          </Draggable>
+                                        );
+                                      }
+                                    )}
+                                    {provided.placeholder}
+                                  </div>
+                                )}
+                              </Droppable>
+                            </DragDropContext>
+                          )}
+                        </div>
                       </div>
                     </div>
                   </div>
+                ))}
+                <div
+                  className="room-actions-container"
+                  style={{
+                    display: "flex",
+                    gap: "10px",
+                    flexWrap: "wrap",
+                  }}
+                >
+                  {values.rooms_attributes.length > 1 && (
+                    <ButtonPrimary
+                      type="button"
+                      onClick={() => {
+                        const newRooms = values.rooms_attributes.slice(0, -1);
+                        setFieldValue("rooms_attributes", newRooms);
+                        setShowAddRoomButton(newRooms.length < totalRooms);
+                      }}
+                      className="action-button"
+                    >
+                      Remove Last Room
+                    </ButtonPrimary>
+                  )}
+
+                  {showAddRoomButton && (
+                    <ButtonPrimary
+                      type="button"
+                      onClick={() => {
+                        const newRooms = [
+                          ...values.rooms_attributes,
+                          initialRoomValues,
+                        ];
+                        setFieldValue("rooms_attributes", newRooms);
+                        setShowAddRoomButton(newRooms.length < totalRooms);
+                      }}
+                      className="action-button"
+                    >
+                      Add Another Room
+                    </ButtonPrimary>
+                  )}
                 </div>
-              ))}
-              <div
-                className="room-actions-container"
-                style={{
-                  display: "flex",
-                  gap: "10px",
-                  flexWrap: "wrap",
-                }}
-              >
-                {values.rooms_attributes.length > 1 && (
+
+                <div className="form-actions">
+                  <SecondryButton href={`/property-4/${slug}`}>
+                    Go back
+                  </SecondryButton>
                   <ButtonPrimary
-                    type="button"
-                    onClick={() => {
-                      setCount((prev) => prev - 1);
-                      setFieldValue(
-                        "rooms_attributes",
-                        values.rooms_attributes.filter(
-                          (_, idx) => idx !== values.rooms_attributes.length - 1
-                        )
-                      );
-                    }}
-                    className="action-button"
+                    type="submit"
+                    onClick={() => handleFormSubmit()}
+                    disabled={isSubmitting}
                   >
-                    Remove Last Room
+                    {isSubmitting ? "Loading..." : "Continue"}
                   </ButtonPrimary>
-                )}
-                <ButtonPrimary
-                  type="button"
-                  onClick={() => {
-                    setCount((prev) => prev + 1);
-                    setFieldValue("rooms_attributes", [
-                      ...values.rooms_attributes,
-                      initialRoomValues,
-                    ]);
-                  }}
-                  className="action-button"
-                >
-                  Add Another Room
-                </ButtonPrimary>
-              </div>
-
-              <div className="form-actions">
-                <ButtonPrimary href={`/property-4/${slug}`}>
-                  Go back
-                </ButtonPrimary>
-                <ButtonPrimary
-                  type="submit"
-                  onClick={handleSubmit}
-                  disabled={isSubmitting}
-                >
-                  {isSubmitting ? "Loading..." : "Continue"}
-                </ButtonPrimary>
-              </div>
-            </form>
-          )}
+                </div>
+              </form>
+            );
+          }}
         </Formik>
       </div>
     </CommonLayout>