stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from "react";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import CommonLayout from "./CommonLayout";
+import "../../styles/description.scss";
+import FormField from "../../shared/FormField/FormField";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import {
+  createProperties,
+  getallupdateProperties,
+  getPropertyCategories,
+  getPropertyType,
+  setId,
+  updateProperties,
+  clearPropertyToEdit,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import { useNavigate } from "react-router-dom";
+import { useParams } from "react-router-dom";
+import successHandler from "../../utils/helpers/SuccessHandler";
+
+const Description = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { slug } = useParams();
+  const id = slug;
+  const RouteID = slug;
+
+  const [filteredPropertyTypes, setFilteredPropertyTypes] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const { globalId, propertiesCategories, propertyTypes, PropertyToEdit } =
+    useSelector((state) => state.property);
+
+  const initialValues = {
+    title: PropertyToEdit?.title || "",
+    property_category: PropertyToEdit?.property_category?.id || "",
+    property_type_id: PropertyToEdit?.property_type?.id || "",
+    country: PropertyToEdit?.country || "",
+    address: PropertyToEdit?.address || "",
+
+    description: PropertyToEdit?.description || "",
+  };
+
+  const formik = useFormik({
+    initialValues,
+    enableReinitialize: true,
+    //   validationSchema: descriptionValidationSchemas,
+    onSubmit: (values, { setSubmitting, resetForm }) => {
+      const payload = {
+        title: values.title,
+        property_category_id: values.property_category,
+        property_type_id: values.property_type_id,
+        address: values.address,
+        state: values.state,
+        country: values.country,
+        description: values.description,
+
+        ...(slug ? { id: slug } : {}),
+      };
+
+      setSubmitting(true);
+
+      if (id) {
+        if (isEditing) {
+          dispatch(updateProperties({ property: payload }))
+            .unwrap()
+            .then((response) => {
+              const newSlug = response?.property?.slug || slug;
+              if (response?.success) {
+                successHandler("Updated successfully");
+                navigate(`/property-2/${newSlug}`);
+                resetForm();
+              }
+            })
+            .catch(console.error)
+            .finally(() => setSubmitting(false));
+        } else {
+          navigate(`/property-2/${slug}`);
+        }
+      } else {
+        dispatch(createProperties({ property: payload }))
+          .unwrap()
+          .then((response) => {
+            if (response?.success) {
+              successHandler("Created successfully");
+              dispatch(setId(response.property.id));
+              resetForm();
+              navigate(`/property-2/${response?.property?.slug}`);
+            }
+          })
+          .catch(console.error)
+          .finally(() => {
+            setLoading(false);
+            setSubmitting(false);
+          });
+      }
+    },
+  });
+
+  const initialFormValues = JSON.stringify(initialValues);
+
+  useEffect(() => {
+    const currentFormValues = JSON.stringify(formik.values);
+    setIsEditing(currentFormValues !== initialFormValues);
+  }, [formik.values, initialFormValues]);
+
+  useEffect(() => {
+    dispatch(getPropertyCategories());
+    dispatch(getPropertyType());
+    if (id) {
+      dispatch(getallupdateProperties({ propertyId: id }));
+    } else {
+      dispatch(clearPropertyToEdit()); // 🧹 Clear old edit data
+    }
+  }, [dispatch, id]);
+
+  useEffect(() => {
+    if (Array.isArray(propertyTypes)) {
+      setFilteredPropertyTypes(propertyTypes);
+    }
+  }, [propertyTypes]);
+
+  return (
+    <CommonLayout currentHref="/property-1" PropertyID={RouteID}>
+      <div className="description-container">
+        <h2 className="title">Listing Details</h2>
+        <div className="divider" />
+
+        <form onSubmit={formik.handleSubmit} className="form-container">
+          <FormField
+            label="Title"
+            name="title"
+            type="text"
+            placeholder="Enter title"
+            value={formik.values.title}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.title && formik.errors.title}
+          />
+
+          <FormField
+            label="Choose a property Category"
+            name="property_category"
+            type="select"
+            value={formik.values.property_category}
+            onChange={(e) => {
+              formik.handleChange(e);
+              formik.setFieldValue("property_type_id", "");
+            }}
+            onBlur={formik.handleBlur}
+            options={
+              propertiesCategories?.map((item) => ({
+                value: String(item.id),
+                label: item.name,
+              })) || []
+            }
+            error={
+              formik.touched.property_category &&
+              formik.errors.property_category
+                ? formik.errors.property_category
+                : undefined
+            }
+          />
+
+          <FormField
+            label="Choose a property type"
+            name="property_type_id"
+            type="select"
+            value={formik.values.property_type_id}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            options={filteredPropertyTypes.map((type) => ({
+              value: String(type.id),
+              label: type.name,
+            }))}
+            error={
+              formik.touched.property_type_id && formik.errors.property_type_id
+                ? formik.errors.property_type_id
+                : undefined
+            }
+          />
+
+          <FormField
+            label="Country"
+            name="country"
+            type="text"
+            placeholder="Enter country"
+            value={formik.values.country}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.country && formik.errors.country}
+          />
+
+          <FormField
+            label="Address"
+            name="address"
+            type="text"
+            placeholder="Enter address"
+            value={formik.values.address}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.address && formik.errors.address}
+          />
+
+          <FormField
+            label="Description"
+            name="description"
+            type="textarea"
+            placeholder="Enter description"
+            value={formik.values.description}
+            onChange={formik.handleChange}
+            onBlur={formik.handleBlur}
+            error={formik.touched.description && formik.errors.description}
+          />
+          <ButtonPrimary
+            type="submit"
+            className="submit-btn"
+            disabled={loading}
+          >
+            {loading ? "Submitting..." : "Submit"}
+          </ButtonPrimary>
+        </form>
+      </div>
+    </CommonLayout>
+  );
+};
+
+export default Description;

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

@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from "react";
+import { useLocation, useParams, useNavigate } from "react-router-dom";
+import { Formik } from "formik";
+import { useDispatch } from "react-redux";
+import CommonLayout from "./CommonLayout";
+import "../../styles/description.scss";
+import FormField from "../../shared/FormField/FormField";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import {
+  getallupdateProperties,
+  updateProperties,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import "../../styles/details.scss";
+import { useSelector } from "react-redux";
+import successHandler from "../../utils/helpers/SuccessHandler";
+
+const Details = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { slug } = useParams();
+  const routeId = slug;
+  const [isEdit, setIsEdit] = useState({ state: false, itemId: null });
+  const [initialValues, setInitialValues] = useState({
+    property_size: "",
+    total_rooms: "",
+    additionalRules: [],
+  });
+  const [newRuleInput, setNewRuleInput] = useState("");
+  const [deletedRuleIds, setDeletedRuleIds] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    if (slug) {
+      dispatch(getallupdateProperties({ propertyId: slug }))
+        .unwrap()
+        .then((response) => {
+          if (response) {
+            setInitialValues({
+              property_size: response.property_size || "",
+              total_rooms: response.total_rooms || "",
+              additionalRules: response.additional_rules || [],
+            });
+          }
+        });
+    }
+  }, [dispatch, slug]);
+
+  const submitHandler = (values, { setSubmitting }) => {
+    const dirty =
+      values.property_size !== initialValues.property_size ||
+      values.total_rooms !== initialValues.total_rooms;
+
+    const additional_rules_attributes = [
+      ...values.additionalRules.map((rule) => ({
+        id: String(rule.id).startsWith("temp_") ? undefined : rule.id,
+        name: rule.name,
+      })),
+      ...deletedRuleIds.map((id) => ({ id, _destroy: true })),
+    ];
+
+    const payload = {
+      id: slug,
+      property_size: values.property_size,
+      total_rooms: values.total_rooms,
+      additional_rules_attributes,
+    };
+
+    if (dirty || additional_rules_attributes.length) {
+      dispatch(updateProperties({ property: payload }))
+        .unwrap()
+        .then((response) => {
+          if (response?.property) {
+            successHandler("Updated successfully");
+            setDeletedRuleIds([]);
+            navigate(`/property-4/${slug}`);
+          }
+        })
+        .catch((error) => {
+          console.error("Error in operation:", error);
+        })
+        .finally(() => setSubmitting(false));
+    } else {
+      navigate(`/property-4/${slug}`);
+    }
+  };
+
+  const handleAddRule = (values, setFieldValue) => {
+    if (newRuleInput.trim() === "") return;
+
+    const newRule = {
+      id: `temp_${Date.now()}`,
+      name: newRuleInput,
+    };
+
+    if (isEdit.state) {
+      const updated = values.additionalRules.map((rule) =>
+        rule.id === isEdit.itemId ? { ...rule, name: newRuleInput } : rule
+      );
+      setFieldValue("additionalRules", updated);
+    } else {
+      setFieldValue("additionalRules", [...values.additionalRules, newRule]);
+    }
+
+    setNewRuleInput("");
+    setIsEdit({ state: false, itemId: null });
+  };
+
+  const handleEditRule = (rule) => {
+    setNewRuleInput(rule.name);
+    setIsEdit({ state: true, itemId: rule.id });
+  };
+
+  const handleDeleteRule = (id, values, setFieldValue) => {
+    const filtered = values.additionalRules.filter((rule) => rule.id !== id);
+    if (filtered.length > 0) {
+      setFieldValue("additionalRules", filtered);
+
+      if (!String(id).startsWith("temp_")) {
+        setDeletedRuleIds((prev) => [...prev, id]);
+      }
+
+      setIsEdit({ state: false, itemId: null });
+      setNewRuleInput("");
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => setLoading(false), 1000);
+  }, []);
+
+  return (
+    <CommonLayout currentHref="/property-2" PropertyID={routeId}>
+      <div className="description-container">
+        <h2 className="title">Property Details</h2>
+        <div className="divider" />
+        <Formik
+          enableReinitialize
+          initialValues={initialValues}
+          onSubmit={submitHandler}
+        >
+          {({
+            values,
+            errors,
+            touched,
+            handleChange,
+            handleBlur,
+            setFieldValue,
+            isSubmitting,
+            handleSubmit,
+          }) => (
+            <form onSubmit={handleSubmit} className="form-container">
+              <FormField
+                label="Property Size (sq ft)"
+                name="property_size"
+                type="number"
+                placeholder="Enter property size"
+                value={values.property_size}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                error={touched.property_size && errors.property_size}
+              />
+
+              <FormField
+                label="Total Rooms"
+                name="total_rooms"
+                type="number"
+                placeholder="Enter total rooms"
+                value={values.total_rooms}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                error={touched.total_rooms && errors.total_rooms}
+              />
+
+              <div className="additional-rules">
+                <h3>Additional Rules</h3>
+                <div className="rules-list">
+                  {values.additionalRules.map((rule, index) => (
+                    <div className="rule-item" key={rule.id || index}>
+                      <span>{rule.name}</span>
+                      <div className="rule-actions">
+                        <button
+                          type="button"
+                          onClick={() => handleEditRule(rule)}
+                        >
+                          ✏️
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() =>
+                            handleDeleteRule(rule.id, values, setFieldValue)
+                          }
+                        >
+                          🗑️
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <div className="rule-input-group">
+                  <input
+                    type="text"
+                    placeholder="No smoking, no pets..."
+                    value={newRuleInput}
+                    onChange={(e) => setNewRuleInput(e.target.value)}
+                  />
+                  <ButtonPrimary
+                    type="button"
+                    onClick={() => handleAddRule(values, setFieldValue)}
+                  >
+                    {isEdit.state ? "Update Rule" : "Add Rule"}
+                  </ButtonPrimary>
+                </div>
+              </div>
+
+              <div className="actions">
+                <ButtonPrimary href={`/property-2/${slug}`}>
+                  Go back
+                </ButtonPrimary>
+                <ButtonPrimary
+                  type="submit"
+                  className="submit-btn"
+                  disabled={isSubmitting}
+                >
+                  {isSubmitting ? "Saving..." : "Save"}
+                </ButtonPrimary>
+              </div>
+            </form>
+          )}
+        </Formik>
+      </div>
+    </CommonLayout>
+  );
+};
+
+export default Details;

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

@@ -0,0 +1,196 @@
+import React, { useState, useEffect } from "react";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import * as Yup from "yup";
+import { useNavigate, useParams } from "react-router-dom";
+import {
+  uploadImageProperties,
+  getallupdateProperties,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+import CommonLayout from "./CommonLayout";
+import "../../styles/images.scss";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import { useDropzone } from "react-dropzone";
+import successHandler from "../../utils/helpers/SuccessHandler";
+
+const validationSchema = Yup.object({
+  place_images: Yup.array()
+    .min(1, "Please upload at least one image")
+    .required("Images are required"),
+});
+
+const Images = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { slug } = useParams();
+  const routeId = slug;
+
+  const { PropertyToEdit } = useSelector((state) => state.property);
+  const [previews, setPreviews] = useState([]);
+  const [isEditing, setIsEditing] = useState(false);
+
+  const initialValues = {
+    place_images: PropertyToEdit?.place_images || [],
+  };
+
+  const formik = useFormik({
+    initialValues,
+    enableReinitialize: true,
+    validationSchema,
+    onSubmit: async (values, { setSubmitting }) => {
+      setSubmitting(true);
+
+      const formData = new FormData();
+      formData.append("property[id]", slug);
+
+      // Append only new File objects to FormData
+      values.place_images.forEach((file) => {
+        if (file instanceof File) {
+          formData.append("property[place_images][]", file);
+        }
+      });
+
+      try {
+        const response = await dispatch(
+          uploadImageProperties(formData)
+        ).unwrap();
+        if (response) {
+          successHandler("Images uploaded successfully");
+          navigate(`/property-3/${slug}`);
+        } else {
+          console.error("Operation failed:", response);
+        }
+      } catch (error) {
+        console.error("Error uploading images:", error);
+      } finally {
+        setSubmitting(false);
+      }
+    },
+  });
+
+  const initialFormValues = JSON.stringify(initialValues);
+
+  useEffect(() => {
+    const currentFormValues = JSON.stringify(formik.values);
+    setIsEditing(currentFormValues !== initialFormValues);
+  }, [formik.values, initialFormValues]);
+
+  const onDrop = (acceptedFiles) => {
+    const newImages = [...formik.values.place_images, ...acceptedFiles];
+    formik.setFieldValue("place_images", newImages);
+    setPreviews((prev) => [
+      ...prev,
+      ...acceptedFiles.map((file) => URL.createObjectURL(file)),
+    ]);
+  };
+
+  const handleRemoveImage = (index) => {
+    const newImages = [...formik.values.place_images];
+    const newPreviews = [...previews];
+
+    newImages.splice(index, 1);
+    newPreviews.splice(index, 1);
+
+    formik.setFieldValue("place_images", newImages);
+    setPreviews(newPreviews);
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: { "image/*": [] },
+    onDrop,
+  });
+
+  useEffect(() => {
+    if (slug) {
+      dispatch(getallupdateProperties({ propertyId: slug }));
+    }
+  }, [dispatch, slug]);
+
+  useEffect(() => {
+    const existingUrls = Array.isArray(PropertyToEdit?.place_images)
+      ? PropertyToEdit.place_images.filter((img) => typeof img === "string")
+      : [];
+
+    if (existingUrls.length > 0) {
+      setPreviews(existingUrls);
+      formik.setFieldValue("place_images", PropertyToEdit.place_images);
+    }
+  }, [PropertyToEdit]);
+
+  const isSubmitDisabled =
+    formik.isSubmitting || formik.values.place_images.length === 0;
+
+  return (
+    <CommonLayout currentHref="/property-2" PropertyID={routeId}>
+      <div className="image-step-container">
+        <h2 className="title">Upload Property Images</h2>
+        <div className="divider" />
+        <form className="image-form" onSubmit={formik.handleSubmit}>
+          <div className="form-group">
+            <label>Images</label>
+            <div {...getRootProps()} className="dropzone">
+              <input {...getInputProps()} />
+              <div className="dropzone-content">
+                <svg
+                  className="upload-icon"
+                  stroke="currentColor"
+                  fill="none"
+                  viewBox="0 0 48 48"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+                <p>
+                  <span className="highlight">Upload multiple files</span> or
+                  drag and drop
+                </p>
+                <p className="note">PNG, JPG, GIF up to 10MB</p>
+              </div>
+            </div>
+            {formik.touched.place_images && formik.errors.place_images && (
+              <div className="error">{formik.errors.place_images}</div>
+            )}
+          </div>
+
+          {previews.length > 0 && (
+            <div className="preview-images">
+              {previews.map((src, idx) => (
+                <div key={idx} className="image-wrapper">
+                  <img
+                    src={src}
+                    alt={`Preview ${idx}`}
+                    className="preview-img"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveImage(idx)}
+                    className="remove-btn"
+                  >
+                    ✕
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+          <div className="actions">
+            <ButtonPrimary href={`/property-1/${slug}`}>Go back</ButtonPrimary>
+            <ButtonPrimary
+              type="submit"
+              className="submit-btn"
+              disabled={isSubmitDisabled}
+            >
+              {formik.isSubmitting ? "Saving..." : "Save"}
+            </ButtonPrimary>
+          </div>
+        </form>
+      </div>
+    </CommonLayout>
+  );
+};
+
+export default Images;