stay_commerce-frontend 0.1.0 → 0.1.1

data/app/javascript/react/components/Accountpage/AccountInfo.jsx

@@ -18,6 +18,7 @@ import moment from "moment";
 const AccountInfo = () => {
   const dispatch = useDispatch();
   const { data: currentUser, loading } = useSelector((state) => state.user);
+  const user = useSelector((state) => state.user.data);
   const fileInputRef = React.useRef(null);
   useEffect(() => {
     if (currentUser) {
@@ -103,7 +104,7 @@ const AccountInfo = () => {
             className="avatar-wrapper"
             onClick={() => fileInputRef.current.click()}
           >
-            <Avatar sizeClass="large-avatar" />
+            <Avatar sizeClass="large-avatar" userData={user} />
           </div>
 
           <input

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

@@ -10,8 +10,6 @@ const CommonLayout = ({ children, PropertyID }) => {
       navigate("/property-1");
     }
   }, [PropertyID, navigate]);
-
-  // Define your steps
   const pathArray = [
     { path: 1, type: "Description", href: "/property-1" },
     { path: 2, type: "Images", href: "/property-2" },

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

@@ -17,6 +17,7 @@ import {
 import { useNavigate } from "react-router-dom";
 import { useParams } from "react-router-dom";
 import successHandler from "../../utils/helpers/SuccessHandler";
+import { descriptionValidationSchemas } from "../../shared/Schema/FormSchema";
 
 const Description = () => {
   const dispatch = useDispatch();
@@ -38,62 +39,58 @@ const Description = () => {
     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 {
+    validationSchema: descriptionValidationSchemas,
+    onSubmit: async (values, { setSubmitting, resetForm }) => {
+      try {
+        const payload = {
+          title: values.title,
+          property_category_id: values.property_category,
+          property_type_id: values.property_type_id,
+          address: values.address,
+          country: values.country,
+          description: values.description,
+          ...(slug ? { id: slug } : {}),
+        };
+        setSubmitting(true);
+        setLoading(true);
+        if (id && isEditing) {
+          const response = await dispatch(
+            updateProperties({ property: payload })
+          ).unwrap();
+          const newSlug = response?.property?.slug || slug;
+          if (response?.success) {
+            successHandler("Updated successfully");
+            navigate(`/property-2/${newSlug}`);
+            resetForm();
+          } else {
+            console.error("Update failed:", response);
+          }
+        } else if (id && !isEditing) {
           navigate(`/property-2/${slug}`);
+        } else {
+          const response = await dispatch(
+            createProperties({ property: payload })
+          ).unwrap();
+          if (response?.success) {
+            successHandler("Created successfully");
+            dispatch(setId(response.property.id));
+            resetForm();
+            navigate(`/property-2/${response?.property?.slug}`);
+          } else {
+            console.error("Create failed:", response);
+          }
         }
-      } 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);
-          });
+      } catch (error) {
+        console.error("Submit error:", error);
+      } finally {
+        setLoading(false);
+        setSubmitting(false);
       }
     },
   });
@@ -102,7 +99,8 @@ const Description = () => {
 
   useEffect(() => {
     const currentFormValues = JSON.stringify(formik.values);
-    setIsEditing(currentFormValues !== initialFormValues);
+    const hasChanged = currentFormValues !== initialFormValues;
+    setIsEditing(hasChanged);
   }, [formik.values, initialFormValues]);
 
   useEffect(() => {
@@ -111,7 +109,7 @@ const Description = () => {
     if (id) {
       dispatch(getallupdateProperties({ propertyId: id }));
     } else {
-      dispatch(clearPropertyToEdit()); // 🧹 Clear old edit data
+      dispatch(clearPropertyToEdit());
     }
   }, [dispatch, id]);
 
@@ -213,12 +211,13 @@ const Description = () => {
             onBlur={formik.handleBlur}
             error={formik.touched.description && formik.errors.description}
           />
+
           <ButtonPrimary
             type="submit"
             className="submit-btn"
-            disabled={loading}
+            disabled={loading || formik.isSubmitting}
           >
-            {loading ? "Submitting..." : "Submit"}
+            {loading || formik.isSubmitting ? "Submitting..." : "Submit"}
           </ButtonPrimary>
         </form>
       </div>

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

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useLocation, useParams, useNavigate } from "react-router-dom";
 import { Formik } from "formik";
+import * as Yup from "yup";
 import { useDispatch } from "react-redux";
 import CommonLayout from "./CommonLayout";
 import "../../styles/description.scss";
@@ -11,92 +12,128 @@ import {
   updateProperties,
 } from "../../redux/slices/PropertySlice/PropertySlice";
 import "../../styles/details.scss";
-import { useSelector } from "react-redux";
 import successHandler from "../../utils/helpers/SuccessHandler";
+import { detailsvalidationSchema } from "../../shared/Schema/FormSchema";
+import SecondryButton from "../../shared/Button/SecondryButton";
 
 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 [initialFormState, setInitialFormState] = useState(null);
   const [newRuleInput, setNewRuleInput] = useState("");
   const [deletedRuleIds, setDeletedRuleIds] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [isEditing, setIsEditing] = useState(false);
+
   useEffect(() => {
     if (slug) {
       dispatch(getallupdateProperties({ propertyId: slug }))
         .unwrap()
         .then((response) => {
           if (response) {
-            setInitialValues({
+            const values = {
               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}`);
+            };
+            setInitialValues(values);
+            setInitialFormState(JSON.stringify(values));
           }
         })
         .catch((error) => {
-          console.error("Error in operation:", error);
+          console.error("Error loading property details:", error);
         })
-        .finally(() => setSubmitting(false));
+        .finally(() => {
+          setLoading(false);
+        });
     } else {
-      navigate(`/property-4/${slug}`);
+      setLoading(false);
     }
+  }, [dispatch, slug]);
+  const checkForChanges = (currentValues) => {
+    const currentState = JSON.stringify({
+      property_size: currentValues.property_size,
+      total_rooms: currentValues.total_rooms,
+      additionalRules: currentValues.additionalRules,
+    });
+    const hasFormChanges = currentState !== initialFormState;
+    const hasDeletedRules = deletedRuleIds.length > 0;
+    const hasChanges = hasFormChanges || hasDeletedRules;
+    setIsEditing(hasChanges);
+    return hasChanges;
   };
 
-  const handleAddRule = (values, setFieldValue) => {
-    if (newRuleInput.trim() === "") return;
+  const submitHandler = async (values, { setSubmitting }) => {
+    try {
+      setSubmitting(true);
+      const hasChanges = checkForChanges(values);
+      if (slug && hasChanges) {
+        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 newRule = {
-      id: `temp_${Date.now()}`,
-      name: newRuleInput,
-    };
+        const payload = {
+          id: slug,
+          property_size: values.property_size,
+          total_rooms: values.total_rooms,
+          additional_rules_attributes,
+        };
+        const response = await dispatch(
+          updateProperties({ property: payload })
+        ).unwrap();
+        if (response?.property) {
+          successHandler("Updated successfully");
+          setDeletedRuleIds([]);
+          setInitialFormState(
+            JSON.stringify({
+              property_size: values.property_size,
+              total_rooms: values.total_rooms,
+              additionalRules: values.additionalRules,
+            })
+          );
+          navigate(`/property-4/${slug}`);
+        } else {
+          console.error("Update failed:", response);
+        }
+      } else if (slug && !hasChanges) {
+        navigate(`/property-4/${slug}`);
+      } else {
+        navigate(`/property-4/${slug}`);
+      }
+    } catch (error) {
+      console.error("Error in operation:", error);
+    } finally {
+      setSubmitting(false);
+    }
+  };
 
+  const handleAddRule = (values, setFieldValue) => {
+    if (newRuleInput.trim() === "") {
+      return;
+    }
     if (isEdit.state) {
       const updated = values.additionalRules.map((rule) =>
         rule.id === isEdit.itemId ? { ...rule, name: newRuleInput } : rule
       );
       setFieldValue("additionalRules", updated);
     } else {
+      const newRule = {
+        id: `temp_${Date.now()}`,
+        name: newRuleInput,
+      };
       setFieldValue("additionalRules", [...values.additionalRules, newRule]);
     }
 
@@ -111,21 +148,35 @@ const Details = () => {
 
   const handleDeleteRule = (id, values, setFieldValue) => {
     const filtered = values.additionalRules.filter((rule) => rule.id !== id);
-    if (filtered.length > 0) {
-      setFieldValue("additionalRules", filtered);
+    setFieldValue("additionalRules", filtered);
+    if (!String(id).startsWith("temp_")) {
+      setDeletedRuleIds((prev) => [...prev, id]);
+    }
 
-      if (!String(id).startsWith("temp_")) {
-        setDeletedRuleIds((prev) => [...prev, id]);
-      }
+    setIsEdit({ state: false, itemId: null });
+    setNewRuleInput("");
+  };
 
-      setIsEdit({ state: false, itemId: null });
-      setNewRuleInput("");
-    }
+  const handleFormSubmit = (handleSubmit, isValid, errors, values) => {
+    return (e) => {
+      e.preventDefault();
+      if (isValid) {
+        handleSubmit(e);
+      } else {
+        console.log("Form validation failed, not submitting");
+      }
+    };
   };
 
-  useEffect(() => {
-    setTimeout(() => setLoading(false), 1000);
-  }, []);
+  if (loading) {
+    return (
+      <CommonLayout currentHref="/property-2" PropertyID={routeId}>
+        <div className="description-container">
+          <div>Loading...</div>
+        </div>
+      </CommonLayout>
+    );
+  }
 
   return (
     <CommonLayout currentHref="/property-2" PropertyID={routeId}>
@@ -135,6 +186,7 @@ const Details = () => {
         <Formik
           enableReinitialize
           initialValues={initialValues}
+          validationSchema={detailsvalidationSchema}
           onSubmit={submitHandler}
         >
           {({
@@ -146,85 +198,116 @@ const Details = () => {
             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>
+            isValid,
+            setTouched,
+          }) => {
+            useEffect(() => {
+              if (initialFormState) {
+                checkForChanges(values);
+              }
+            }, [values, deletedRuleIds, initialFormState]);
+
+            return (
+              <form
+                onSubmit={handleFormSubmit(
+                  handleSubmit,
+                  isValid,
+                  errors,
+                  values
+                )}
+                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>
+                  <div className="rule-input-group">
+                    <input
+                      type="text"
+                      placeholder="No smoking, no pets..."
+                      value={newRuleInput}
+                      onChange={(e) => setNewRuleInput(e.target.value)}
+                      onKeyPress={(e) => {
+                        if (e.key === "Enter") {
+                          e.preventDefault();
+                          handleAddRule(values, setFieldValue);
+                        }
+                      }}
+                    />
+                    <ButtonPrimary
+                      type="button"
+                      onClick={() => handleAddRule(values, setFieldValue)}
+                      disabled={!newRuleInput.trim()}
+                    >
+                      {isEdit.state ? "Update Rule" : "Add Rule"}
+                    </ButtonPrimary>
+                  </div>
                 </div>
-                <div className="rule-input-group">
-                  <input
-                    type="text"
-                    placeholder="No smoking, no pets..."
-                    value={newRuleInput}
-                    onChange={(e) => setNewRuleInput(e.target.value)}
-                  />
+
+                <div className="actions">
+                  <SecondryButton href={`/property-2/${slug}`}>
+                    Go back
+                  </SecondryButton>
                   <ButtonPrimary
-                    type="button"
-                    onClick={() => handleAddRule(values, setFieldValue)}
+                    type="submit"
+                    className="submit-btn"
+                    disabled={isSubmitting}
+                    onClick={() => {
+                      setTouched({
+                        property_size: true,
+                        total_rooms: true,
+                      });
+                    }}
                   >
-                    {isEdit.state ? "Update Rule" : "Add Rule"}
+                    {isSubmitting ? "Saving..." : "Save"}
                   </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>
-          )}
+              </form>
+            );
+          }}
         </Formik>
       </div>
     </CommonLayout>