Merge branch 'wallet-styles' of WrenchBoard/Users-Wrench into master

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { useSelector } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import usersService from "../../../services/UsersService";
 import Icons from "../../Helpers/Icons";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-import { toast } from "react-toastify";
-
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 
@@ -60,8 +58,6 @@ export default function PersonalInfoTab({
 
   let navigate = useNavigate();
 
-  let [togglePromotion, setTogglePromotion] = useState(false);
-
   const initialValues = {
     firstname: userDetails?.firstname,
     lastname: userDetails?.lastname,
@@ -69,6 +65,10 @@ export default function PersonalInfoTab({
     city: userDetails?.city,
     email: userDetails?.email,
     profile: userDetails?.profile_pic,
+    pref_email: 0,
+    pref_phone: 0,
+    accept_promo: false,
+    online_name: userDetails?.username
   };
 
   let [profile, setProfile] = useState({
@@ -90,8 +90,14 @@ export default function PersonalInfoTab({
     // there is no profile accommodation on the payload
     delete values?.profile;
 
+    const reqData = {
+      ...values,
+      pref_email: Number(values.pref_email?.toString()),
+      pref_phone: Number(values.pref_phone?.toString()),
+    };
+
     apiCall
-      .updateProfile(values)
+      .updateProfile(reqData)
       .then((res) => {
         // API CALL TO UPDATE USER DETAILS
         if (res.data.internal_return < 0) {
@@ -102,10 +108,14 @@ export default function PersonalInfoTab({
           });
           return;
         }
-        // setRequestState({message: 'Profile update successfully', loading: false, status: true})
+        setRequestState({
-        toast.success("Update Successful");
+          message: "Profile update successfully",
+          loading: false,
+          status: true,
+        });
+        // toast.success("Update Successful");
         setTimeout(() => {
-          // navigate("/", { replace: true });
+          navigate("/", { replace: true });
           window.location.reload(true);
         }, 1000);
       })
@@ -146,12 +156,12 @@ export default function PersonalInfoTab({
                     <div className="field w-full mb-6">
                       <InputCom
                         fieldClass="px-6"
-                        label="User Name"
+                        label="User Name (change if it's an email)"
                         type="text"
-                        name="username"
+                        name="online_name"
-                        placeholder=""
+                        placeholder="Username"
-                        value={userDetails.username}
+                        value={props.values.online_name}
-                        disable={true}
+                        inputHandler={props.handleChange}
                       />
                     </div>
 
@@ -267,13 +277,17 @@ export default function PersonalInfoTab({
                         Pref. Communication
                       </label>
                       <div className="check-box">
-                        <div className="flex items-center justify-start">
+                        <div
+                          role="group"
+                          className="flex items-center justify-start"
+                        >
                           <div className="check-input flex items-center mr-1">
                             <input
                               className="w-4 h-4 cursor-pointer"
                               type="checkbox"
-                              name="prefcomm1"
+                              name="pref_email"
-                              id=""
+                              value={1}
+                              onChange={props.handleChange}
                             />
                             <span className="mx-2 text-base text-dark-gray dark:text-white">
                               Email
@@ -283,8 +297,9 @@ export default function PersonalInfoTab({
                             <input
                               className="w-4 h-4 cursor-pointer"
                               type="checkbox"
-                              name="prefcomm2"
+                              name="pref_phone"
-                              id=""
+                              value={1}
+                              onChange={props.handleChange}
                             />
                             <span className="mx-2 text-base text-dark-gray dark:text-white">
                               Phone
@@ -296,22 +311,32 @@ export default function PersonalInfoTab({
 
                     {/* Allow Promotions */}
                     <div className="field w-full mb-6 flex items-center space-x-4">
-                      <label className="input-label text-[#181c32] dark:text-white text-base font-semibold">
+                      <label
+                        htmlFor="accept_promo"
+                        className="input-label text-[#181c32] dark:text-white text-base font-semibold"
+                      >
                         Allow Promotions
                       </label>
-                      <div
+                      <div>
-                        className="cursor-pointer flex items-center"
+                        <input
-                        onClick={() => setTogglePromotion((prev) => !prev)}
+                          type="checkbox"
-                      >
+                          id="accept_promo"
-                        <div
+                          name="accept_promo"
-                          className={`h-6 w-8 mr-1 p-1 ${
+                          value={props.values.accept_promo}
-                            togglePromotion
+                          checked={props.values.accept_promo}
+                          onChange={props.handleChange}
+                          className="hidden"
+                        />
+                        <label
+                          htmlFor="accept_promo"
+                          className={`cursor-pointer flex items-center h-6 w-8 mr-1 p-1 ${
+                            props.values.accept_promo
                               ? "bg-sky-blue flex justify-end items-center"
                               : "bg-slate-200"
-                          } rounded-full transition`}
+                          } rounded-full transition duration-200`}
                         >
                           <div className="w-4 h-full bg-white rounded-full"></div>
-                        </div>
+                        </label>
                       </div>
                     </div>
                     {/* inputs ends here */}
@@ -388,7 +413,6 @@ export default function PersonalInfoTab({
                 )}
                 <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    
                     {/* <Link
                       to="/"
                       className="text-18 text-light-red tracking-wide "