stay_commerce-frontend 0.1.0

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

@@ -0,0 +1,239 @@
+import React, { useEffect, useState } from "react";
+import { useFormik } from "formik";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate, useParams } from "react-router-dom";
+import { MapPinIcon } from "@heroicons/react/24/solid";
+
+import {
+  getallupdateProperties,
+  updateProperties,
+} from "../../redux/slices/PropertySlice/PropertySlice";
+
+import CommonLayout from "./CommonLayout";
+import FormField from "../../shared/FormField/FormField";
+import ButtonPrimary from "../../shared/Button/ButtonPrimary";
+import "../../styles/location.scss";
+import successHandler from "../../utils/helpers/SuccessHandler";
+
+const Location = () => {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+  const { slug } = useParams();
+  const routeId = slug;
+  const { PropertyToEdit } = useSelector((state) => state.property);
+  const [loading, setLoading] = useState(false);
+  const [isSubmitting, setSubmitting] = useState(false);
+
+  const fetchProperty = async () => {
+    if (slug) {
+      try {
+        setLoading(true);
+        await dispatch(getallupdateProperties({ propertyId: slug })).unwrap();
+      } catch (error) {
+        console.error("Failed to fetch property data:", error);
+        setFetchError("Failed to fetch property data. Please try again.");
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  useEffect(() => {
+    let isMounted = true;
+    if (isMounted) {
+      fetchProperty();
+    }
+    return () => {
+      isMounted = false;
+    };
+  }, [dispatch, slug]);
+
+  const formik = useFormik({
+    enableReinitialize: true,
+    initialValues: {
+      city: PropertyToEdit?.city || "",
+      state: PropertyToEdit?.state || "",
+      zipcode: PropertyToEdit?.zipcode || "",
+      latitude: PropertyToEdit?.latitude || "",
+      longitude: PropertyToEdit?.longitude || "",
+    },
+    validate: (values) => {
+      const errors = {};
+      if (!values.city) errors.city = "City is required";
+      if (!values.state) errors.state = "State is required";
+      if (!values.zipcode) errors.zipcode = "Zipcode is required";
+      return errors;
+    },
+    onSubmit: async (values) => {
+      try {
+        const payload = {
+          id: slug,
+          city: values.city,
+          state: values.state,
+          zipcode: values.zipcode,
+          latitude: values.latitude,
+          longitude: values.longitude,
+        };
+
+        formik.setSubmitting(true);
+
+        const response = await dispatch(
+          updateProperties({ property: payload })
+        ).unwrap();
+
+        if (response?.success) {
+          successHandler("Location updated successfully");
+          navigate(`/property-5/${slug}`);
+        } else {
+          console.error("Update failed:", response);
+          alert("Failed to update property. Please try again.");
+        }
+      } catch (error) {
+        console.error("Error updating property:", error);
+        alert("An error occurred while updating the property.");
+      } finally {
+        formik.setSubmitting(false);
+      }
+    },
+  });
+
+  const getUserLocation = () => {
+    setLoading(true);
+    navigator.geolocation.getCurrentPosition(
+      async (position) => {
+        const { latitude, longitude } = position.coords;
+        formik.setFieldValue("latitude", latitude);
+        formik.setFieldValue("longitude", longitude);
+
+        try {
+          const reverseGeocodeUrl = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${latitude}&lon=${longitude}`;
+          const response = await fetch(reverseGeocodeUrl);
+          const data = await response.json();
+          const city =
+            data.address.city ||
+            data.address.town ||
+            data.address.village ||
+            data.address.hamlet ||
+            "";
+          const zipcode = data.address.postcode || "";
+          formik.setFieldValue("city", city);
+          formik.setFieldValue("zipcode", zipcode);
+          formik.setFieldValue("state", data.address.state || "");
+        } catch (err) {
+          console.error("Reverse geocoding error:", err);
+        } finally {
+          setLoading(false);
+        }
+      },
+      (error) => {
+        console.error("Geolocation error:", error);
+        alert(`Location access denied: ${error.message}`);
+        setLoading(false);
+      },
+      { enableHighAccuracy: true }
+    );
+  };
+
+  return (
+    <CommonLayout currentHref="/property-3" PropertyID={routeId}>
+      <div className="description-container">
+        <h2 className="title">Listing Location</h2>
+        <div className="divider" />
+
+        <form onSubmit={formik.handleSubmit}>
+          <div className="form-container">
+            <ButtonPrimary type="button" onClick={getUserLocation}>
+              {loading ? (
+                "Fetching..."
+              ) : (
+                <>
+                  <MapPinIcon className="icon" />
+                  <span className="ml-3">Use current location</span>
+                </>
+              )}
+            </ButtonPrimary>
+
+            <div className="autocomplete-wrapper">
+              <label className="form-label">Address</label>
+              {/* <GooglePlacesAutocomplete
+//                 apiKey={process.env.REACT_APP_GOOGLE_MAP_API_KEY || ""}
+//                 selectProps={{
+//                   inputValue: googleAddress,
+//                   onInputChange: (val, { action }) => {
+//                     if (action !== "input-blur" && action !== "menu-close") {
+//                       setGoogleAddress(val);
+//                     }
+//                   },
+//                   placeholder: "Search for places...",
+//                   onChange: handlePlaceSelect,
+//                   isClearable: true,
+//                   className: "autocomplete",
+//                 }}
+//               /> */}
+              {formik.touched.street && formik.errors.street && (
+                <div className="error">{formik.errors.street}</div>
+              )}
+            </div>
+
+            <div className="grid-3">
+              <FormField
+                label="City"
+                name="city"
+                value={formik.values.city}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.city && formik.errors.city}
+              />
+              <FormField
+                label="State"
+                name="state"
+                value={formik.values.state}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.state && formik.errors.state}
+              />
+              <FormField
+                label="Zipcode"
+                name="zipcode"
+                value={formik.values.zipcode}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.zipcode && formik.errors.zipcode}
+              />
+            </div>
+
+            <div className="grid-3">
+              <FormField
+                label="Latitude"
+                name="latitude"
+                value={formik.values.latitude}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.latitude && formik.errors.latitude}
+              />
+              <FormField
+                label="Longitude"
+                name="longitude"
+                value={formik.values.longitude}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                error={formik.touched.longitude && formik.errors.longitude}
+              />
+            </div>
+
+            <div className="action-buttons">
+              <ButtonPrimary href={`/property-3/${slug}`}>
+                Go back
+              </ButtonPrimary>
+              <ButtonPrimary type="submit" disabled={isSubmitting}>
+                {isSubmitting ? "Loading..." : "Continue"}
+              </ButtonPrimary>
+            </div>
+          </div>
+        </form>
+      </div>
+    </CommonLayout>
+  );
+};
+
+export default Location;