Fix/org flow (#1275)

* fix: signup for clubs flow

* fix: profile completion modal

* fix: login UI fixes

package.json

@@ -48,6 +48,7 @@
     "dotenv": "^16.3.1",
     "framer-motion": "^11.0.3",
     "js-cookie": "^3.0.5",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",

src/components/shared/buttons/globalbutton/Button.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unknown-property */
-import React from "react";
 import { Link } from "react-router-dom";
 import { ClipLoader } from "react-spinners";
 import styles from "./Button.module.css";

src/components/shared/profileCompletion/ProfileCompletion.jsx

@@ -1,142 +1,95 @@
 /* eslint-disable no-unused-vars */
-import { useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+
+import { selectUser, updateUserData } from "@redux/slice/userSlice";
+import { UpdateUser } from "@service/MilanApi";
+import { useMutation } from "@tanstack/react-query";
+import { showErrorToast, showSuccessToast } from "@utils/Toasts";
+import _ from "lodash";
+import { Button } from "..";
 import getProfileFields from "../../../utils/getProfileFields";
-import Button from "../buttons/globalbutton/Button";
 import "./ProfileCompletion.scss";
 
-const ProfileCompletion = ({ editProfile }) => {
-  const [part, setPart] = useState(editProfile ? 2 : 1);
-  const [currentStep, setcurrentStep] = useState(2);
-  const [currentIndex, setcurrentIndex] = useState(0);
-  const [formData, setFormData] = useState({});
-  const [errors, setErrors] = useState({});
-  const user = useSelector((state) => state.user);
-
-  useEffect(() => {
-    if (editProfile) {
-      setFormData(user);
-    }
-  }, [editProfile]);
-
-  const fields = getProfileFields(user, editProfile);
-
-  const totalfields = fields.length;
-
-  const handleIncrementStep = () => {
-    if (currentStep + 2 <= totalfields) {
-      setcurrentIndex(currentIndex + 2);
-      setcurrentStep(currentStep + 2);
-    }
-  };
-
-  const handleDecrementStep = () => {
-    if (currentStep - 2 >= 2) {
-      setcurrentIndex(currentIndex - 2);
-      setcurrentStep(currentStep - 2);
-    }
-  };
+const ProfileCompletion = () => {
+  const [credentials, setCredentials] = useState({});
+  const user = useSelector(selectUser);
+  const fields = getProfileFields(user);
+  const dispatch = useDispatch();
 
   const handleChange = (e) => {
-    setFormData({ ...formData, [e.target.name]: e.target.value });
-    setErrors({ ...errors, [e.target.name]: undefined });
+    setCredentials({
+      ...credentials,
+      [e.target.name]: e.target.value,
+    });
   };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    //  formData is an object
-    // lenght of an object
-
-    // const response = await UpdateUser(formData);
-    // if (response?.status !== 200) {
-    //   showErrorToast(response?.data?.message);
-    // } else {
-    //   dispatch(updateUserData(formData));
-    //   setFormData({});
-    //   setShowProfileModal(false);
-    //   seteditProfile(false);
-    //   showSuccessToast(response?.data?.message);
-    //   mutate(clubEndpoints.details(user?.userName));
-    // }
-  };
+  const { mutate: handleUpdateDetails } = useMutation({
+    mutationFn: UpdateUser,
+    onSuccess: (data) => {
+      dispatch(updateUserData(credentials));
+      showSuccessToast(data?.message);
+    },
+    onError: (error) => {
+      showErrorToast(error?.message);
+    },
+  });
 
   return (
     <div className="profilecompletion_overlay">
       <div className="profilecompletion_modal">
         <div className="profilecompletion_header">
-          {part === 1 ? (
-            <h1> Choose Account Type </h1>
-          ) : (
-            <h1> {editProfile ? "Edit Profile" : `We're almost done`} </h1>
-          )}
+          <h1> We&apos;re almost done </h1>
 
-          {part === 1 ? (
-            <p>Your Account Type is permanent and cannot be changed later.</p>
-          ) : !editProfile ? (
-            <p>
-              Please complete your profile to enjoy the full benefits of the
-              platform.
-            </p>
-          ) : null}
+          <p>
+            To make your Organization visible to others, please complete your
+            profile.
+          </p>
         </div>
 
-        {/* <form>
-          {fields.slice(currentIndex, currentIndex + 2).map((elId) => {
-            const formElement = ProfileElements.find(
-              (element) => element.id === elId,
-            );
-
-            return (
-              <div className="profilecompletion_element" key={formElement.id}>
-                <label>{formElement?.label}</label>
-                {formElement?.id === "description" ? (
-                  <textarea
-                    type={formElement?.type}
-                    name={formElement?.id}
-                    value={formData[formElement?.id] || ""}
-                    onChange={handleChange}
-                    className="auth_input"
-                    placeholder={formElement?.placeholder}
-                  />
-                ) : (
-                  <input
-                    type={formElement?.type}
-                    name={formElement?.id}
-                    value={formData[formElement?.id] || ""}
-                    onChange={handleChange}
-                    className="auth_input"
-                    placeholder={formElement?.placeholder}
-                  />
-                )}
-              </div>
-            );
-          })}
-        </form> */}
-
-        <div className="profilecompletion_btndiv">
-          <Button
-            variant="solid"
-            disabled={currentStep === 2}
-            onClickfunction={handleDecrementStep}
-          >
-            Previous
-          </Button>
-          {currentStep == totalfields ? (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            handleUpdateDetails({ credentials: credentials });
+          }}
+        >
+          {fields.map((field) => (
+            <div className="profilecompletion_element" key={field}>
+              <label>{_.startCase(field)}</label>
+              {field === "description" ? (
+                <textarea
+                  name={field}
+                  value={credentials[field] || ""}
+                  onChange={handleChange}
+                  className="auth_input"
+                  placeholder={`Enter your ${field}`}
+                />
+              ) : (
+                <input
+                  type="text"
+                  name={field}
+                  value={credentials[field] || ""}
+                  onChange={handleChange}
+                  className="auth_input"
+                  placeholder={`Enter your ${field}`}
+                />
+              )}
+            </div>
+          ))}
+
+          <div className="profilecompletion_btndiv">
             <Button
-              variant="solid"
-              onClickfunction={handleSubmit}
-              disabled={Object.keys(formData).length === 0}
+              type="submit"
+              disabled={
+                Object.keys(credentials)?.length < 2 ||
+                credentials?.description === "" ||
+                credentials?.tagLine === ""
+              }
             >
-              Finish
-            </Button>
-          ) : (
-            <Button variant="solid" onClickfunction={handleIncrementStep}>
-              Next
+              Submit
             </Button>
-          )}
-        </div>
+          </div>
+        </form>
       </div>
     </div>
   );

src/components/shared/profileCompletion/ProfileCompletion.scss

@@ -37,14 +37,15 @@
         font-weight: 700;
         color: var(--secondary);
         font-family: var(--outfit);
+        margin-bottom: 0;
 
         @media screen and (max-width: 500px) {
           font-size: 1.5rem;
         }
       }
 
       p {
-        font-size: 1.1rem;
+        font-size: 15px;
         font-weight: 400;
         color: black;
         font-family: var(--outfit);
@@ -63,9 +64,9 @@
         flex-direction: column;
         position: relative;
         width: 100%;
+        font-family: var(--outfit);
 
         label {
-          font-family: var(--outfit);
           font-size: 17px;
           font-weight: 400;
           margin-bottom: 3px;
@@ -85,7 +86,6 @@
           font-size: 16px;
           color: red;
           margin-top: 5px;
-          font-family: var(--outfit);
         }
 
         input,
@@ -136,7 +136,6 @@
         padding: 0.5rem 1rem;
         font-size: 1rem;
         font-weight: 500;
-
         border-radius: 5px;
 
         transition: all 0.3s ease;
@@ -145,16 +144,3 @@
     }
   }
 }
-
-.crossButton {
-  padding: 0;
-  margin: 0;
-  position: absolute;
-  right: 12px;
-  top: 7px;
-  font-size: 27px;
-  border: 0;
-  box-shadow: none;
-  color: var(--secondary);
-  cursor: pointer;
-}

src/pages/auth/SignUp.jsx

@@ -6,6 +6,7 @@ import { FaEye } from "react-icons/fa";
 import { FaEyeSlash } from "react-icons/fa6";
 import { FcGoogle } from "react-icons/fc";
 import { Link } from "react-router-dom";
+import Select from "react-select";
 import rightabstract from "../../assets/pictures/authpages/authbanner.png";
 import { Button } from "../../components/shared";
 import { useAuth } from "../../hooks/useAuth";
@@ -60,7 +61,36 @@ const SignUp = () => {
                   <div className="auth_dropdown"></div>
                 </div>
 
-                <div className="auth_element">
+                <div className="auth_element auth_element_mobileOnly">
+                  <label className="auth_label">
+                    Account Type
+                    <span>*</span>
+                  </label>
+
+                  <Select
+                    options={authTypeOptions}
+                    styles={{
+                      container: (baseStyles) => ({
+                        ...baseStyles,
+                        fontFamily: "Outfit, sans-serif",
+                        fontSize: "15px !important",
+                      }),
+                    }}
+                    onChange={(e) => {
+                      setCredentials((prev) => {
+                        return {
+                          ...prev,
+                          userType: e,
+                          email: "",
+                          password: "",
+                          name: "",
+                        };
+                      });
+                    }}
+                    defaultValue={authTypeOptions[1]}
+                  />
+                </div>
+                <div className="auth_element ">
                   <label className="auth_label">
                     {credentials.userType.value === "individual"
                       ? "Full Name"

src/pages/auth/index.scss

@@ -292,7 +292,15 @@
   display: none;
 }
 
+.auth_element_mobileOnly {
+  display: none !important;
+}
+
 @media screen and (max-width: 450px) {
+  .auth_element_mobileOnly {
+    display: flex !important;
+  }
+
   .signup_parent {
     display: flex;
     flex-direction: column;
@@ -358,3 +366,7 @@
   right: 15px;
   top: 40px;
 }
+
+.css-13cymwt-control {
+  font-family: var(--outfit) !important;
+}