Fix profile setting (#72)

* ft-mark-all-notification-as-read (#34) * [#187584881] ft-mark-all-notification-as-read * [#187584881] ft-mark-all-notification-as-read * Requested changes notifications * [start 187584874] seller delete item * [finished 187584874] seller delete item * [finished 187584874] seller delete item * fix profile settings --------- Co-authored-by: Saddock Kabandana <[email protected]>
atlp-rwanda · Aug 5, 2024 · 4613391 · 4613391
1 parent 8def827
commit 4613391
Show file tree

Hide file tree

Showing 13 changed files with 200 additions and 27 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -38,4 +38,9 @@
 @import "./assets/styles/tables.scss";
 @import "./assets/styles/cards.scss";
 @import "./assets/styles/trackOrder.scss";
-@import './assets/styles/trackOrder.scss';
+@import "./assets/styles/adminDashboard.scss";
+@import "./assets/styles/users.scss";
+@import "./assets/styles/liveChat.scss";
+@import "./assets//styles/UserProfile.scss";
+@import "./assets/styles/SellerSideProduct.scss";
+@import "./assets/styles/SellerDeleteItem.scss"
diff --git a/src/assets/styles/SellerDeleteItem.scss b/src/assets/styles/SellerDeleteItem.scss
@@ -0,0 +1,67 @@
+@import "./Colors";
+
+.confirm-dialog {
+    margin-left: 27rem;
+    border-radius: 2.2rem;
+    margin-top: 9rem;
+    width: 80%;
+    height: 87vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    font-size: 1.6rem;
+
+    .confirm-dialog-content {
+        background-color: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+
+        .modal-header {
+            font-size: 1.8rem;
+            font-weight: bold;
+            margin-bottom: 1.5;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .icon__delete {
+                color: $red-color;
+                font-size: 3rem;
+            }
+        }
+        p{
+            padding: 1rem 0;
+            i{
+                text-transform: uppercase;
+                font-weight: bold;
+            }
+        }
+        .modal-footer{
+            float: right;
+            button {
+            margin: 0 10px;
+            padding: .7rem 3rem; 
+            border: none;
+            border-radius: 1rem;
+            font-family: $text-family;
+        }
+        .delete-btn{
+            background: $red-middle-color;
+            color: $red-color;
+        }
+        .cancel-btn{
+            background: lighten($fifth-color, 19%);
+            color: $fifth-color;
+        }
+    }
+    }
+}
diff --git a/src/assets/styles/UserProfile.scss b/src/assets/styles/UserProfile.scss
@@ -230,7 +230,8 @@
 
         .error {
           color: red !important;
-          padding: 0 !important;
+          padding-left: 2rem !important;
+          margin-left: -2rem;
           background: none;
           font-size: 2rem;
         }

diff --git a/src/components/product/ConfirmModal.tsx b/src/components/product/ConfirmModal.tsx
@@ -0,0 +1,32 @@
+/* eslint-disable */
+import React from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+interface ConfirmModalProps {
+    isOpen: boolean;
+    title: string;
+    message: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+
+const ConfirmModal: React.FC<ConfirmModalProps> = ({ isOpen, title, message, onConfirm, onCancel }) => {
+    if (!isOpen) return null;
+
+    return (
+        <div className="confirm-dialog">
+            <div className="confirm-dialog-content">
+                <div className="modal-header">
+                <DeleteIcon className='icon__delete' /> {title}
+                </div>
+                <p dangerouslySetInnerHTML={{ __html: message }} />
+                <div className="modal-footer">
+                    <button onClick={onCancel} className='cancel-btn'>Cancel</button>
+                    <button onClick={onConfirm} className='delete-btn'>Delete</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmModal;
diff --git a/src/components/user/PasswordUpdate.tsx b/src/components/user/PasswordUpdate.tsx
@@ -8,6 +8,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { toast } from "react-toastify";
 import { TailSpin } from 'react-loader-spinner';
+import { logout } from '../../store/features/auth/authSlice';
+import { disconnect } from '../../utils/socket/socket';
+import { useNavigate } from 'react-router-dom';
 
 const passwordSchema = Yup.object({
   oldPassword: Yup.string().required('Old password is required'),
@@ -19,13 +22,13 @@ const passwordSchema = Yup.object({
     .oneOf([Yup.ref('newPassword')], 'Passwords must match'),
 });
 
-const PasswordUpdate = ({ message, isError,isSuccess }) => {
+const PasswordUpdate = ({ message, isError, isSuccess }) => {
   const dispatch = useAppDispatch();
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
   const [showConfirmNewPassword, setShowConfirmNewPassword] = useState(false)
   const [loading, setLoading] = useState(false);
-  const [success, setSuccess] = useState(null);
+  const navigate = useNavigate()
 
   const newPasswordVisibility = () => {
     setShowPassword(!showPassword);
@@ -46,13 +49,23 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
     },
     validationSchema: passwordSchema,
     onSubmit: async (values) => {
-      setLoading(true);
       try{
+        setTimeout(()=>{
+          setLoading(true)
+        },200)
         dispatch(updatePassword(values));
       }catch(err){
         console.log(err)
       }finally{
         setLoading(false)
+        toast.success("Password updated Successfully you will be logged out in few second ")
+        setTimeout(()=>{
+          dispatch(logout())
+          disconnect()
+        },4000)
+        setTimeout(()=>{
+          navigate("/login")
+        }, 5500)
       }
 
     },
@@ -75,7 +88,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
     <div className="password">
       <div className='password-layout'>
         <div className="password-inp">
-          <label htmlFor="oldPassword">old password</label>
+          <label htmlFor="oldPassword">Old Password</label>
           <div className="input-n">
             <input
               type={showPassword ? 'text' : 'password'}
@@ -103,7 +116,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
         <div >
           <div className='conf-pwd'>
             <div className="password-inp">
-              <label htmlFor="newPassword">new Password</label>
+              <label htmlFor="newPassword">New Password</label>
               <div className="input-n">
                 <input
                   type={showConfirmPassword ? 'text' : 'password'}
@@ -127,7 +140,7 @@ const PasswordUpdate = ({ message, isError,isSuccess }) => {
               {formik.errors.newPassword && <div className='error'>{formik.errors.newPassword}</div>}
             </div>
             <div className="password-inp">
-              <label htmlFor="confirmNewPassword">confirm New Password</label>
+              <label htmlFor="confirmNewPassword">Confirm New Password</label>
               <div className="input-n">
                 <input
                   type={showConfirmNewPassword ? 'text' : 'password'}

diff --git a/src/components/user/ProfileDetails.tsx b/src/components/user/ProfileDetails.tsx
@@ -2,7 +2,7 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { useAppDispatch} from '../../store/store';
+import { useAppDispatch } from '../../store/store';
 import { updateUserProfile, fetchUserProfile } from '../../store/features/user/userSlice';
 import avatar from "../../../public/assets/avatar.jpg";
 import camera from "../../../public/assets/Camera.png";
@@ -22,10 +22,11 @@ const updateProfileSchema = Yup.object().shape({
   currency: Yup.string().required('Required'),
 });
 
-const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
+const ProfileDetails = ({ user, isSuccess, isError, message }) => {
   const dispatch = useAppDispatch();
   const inputRef = useRef(null);
   const [profileImage, setProfileImage] = useState<any>(null);
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     dispatch(fetchUserProfile());
@@ -74,8 +75,14 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
       formData.append("language", values.language);
       formData.append("birthDate", values.birthDate);
 
-      const response: any = await dispatch(updateUserProfile(formData));
-      // if(response && response.payload && response.payload.status && response.paylad.message) toast.success(response.payload.message);
+      setTimeout(()=>{
+        setLoading(true)
+      },2000)
+      await dispatch(updateUserProfile(formData))
+      .finally(()=>{
+        setLoading(false)
+      });
+
     }
   });
 
@@ -113,7 +120,7 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
       <div className='title'>
         <h1>MY PROFILE DETAILS</h1>
         <button type='submit'>
-          {isLoading ? (
+          {loading ? (
             <div className="spinner-container">
               <TailSpin color="#ff6d18" width={20} />
             </div>
@@ -166,20 +173,23 @@ const ProfileDetails = ({ user,isLoading, isSuccess, isError, message }) => {
           <div className='options'>
             <label htmlFor="gender">Gender</label>
             <select value={formik.values.gender} onChange={formik.handleChange} onBlur={formik.handleBlur} name='gender' id='gender'>
+              <option value=""></option>
               <option value="male">Male</option>
               <option value="female">Female</option>
             </select>
           </div>
           <div className='options'>
             <label htmlFor="currency">Currency</label>
             <select value={formik.values.currency} onChange={formik.handleChange} onBlur={formik.handleBlur} name='currency' id='currency'>
+              <option value=""></option>
               <option value="USD">USD</option>
               <option value="RWF">RWF</option>
             </select>
           </div>
           <div className='options'>
             <label htmlFor="language">Language</label>
             <select value={formik.values.language} onChange={formik.handleChange} onBlur={formik.handleBlur} name='language' id='language'>
+              <option value=""></option>
               <option value="English">English</option>
               <option value="Kinyarwanda">Kinyarwanda</option>
               <option value="Greek">Greek</option>

diff --git a/src/components/user/ShippingAddress.tsx b/src/components/user/ShippingAddress.tsx
@@ -13,7 +13,6 @@ interface RwandaLocationSelectorProps {
     user: IProfile,
     isSuccess: boolean,
     isError: string,
-    isLoading: boolean,
     message: string
   }
 
@@ -35,14 +34,15 @@ interface RwandaLocationSelectorProps {
 
   const rwandaData: RwandaData = data;
 
-const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess, isError, isLoading,message,setLocation }) => {
+const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess, isError,message,setLocation }) => {
 
     const dispatch = useAppDispatch();
     const [country, setCountry] = useState('Rwanda');
     const [province, setProvince] = useState('');
     const [district, setDistrict] = useState('');
     const [sector, setSector] = useState('');
     const [street, setStreet] = useState("")
+    const [loading, setLoading] = useState(false)
 
     const handleProvinceChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         setProvince(e.target.value);
@@ -70,7 +70,13 @@ const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess,
             return;
           }
         try {
-            dispatch(addUserAddress({ id: user.id, data: {province, district, sector, street}}));
+          setTimeout(()=>{
+            setLoading(true)
+          },200)
+            dispatch(addUserAddress({ id: user.id, data: {province, district, sector, street}}))
+            .finally(()=>{
+              setLoading(false)
+            });
           } catch (error) {
             toast.error(isError);
           }
@@ -93,7 +99,7 @@ const ShippingAddress:React.FC<RwandaLocationSelectorProps> = ({ user,isSuccess,
           <div className='title'>
             <h1>MY SHIPPING ADDRESS</h1>
             <button type='submit'>
-          {isLoading ? (
+          {loading ? (
             <div className="spinner-container">
               <TailSpin color="#ff6d18" width={20} />
             </div>

diff --git a/src/pages/UserEditProfile.tsx b/src/pages/UserEditProfile.tsx
@@ -36,9 +36,9 @@ const UserProfile = () => {
   return (
     <>
       <section className='profile-container'>
-        <ProfileDetails user={user} isSuccess={isSuccess} isLoading={isLoading} isError={isError} message={message} />
+        <ProfileDetails user={user} isSuccess={isSuccess} isError={isError} message={message} />
         <PasswordUpdate message={message} isSuccess={isSuccess} isError={isError}/>
-        <ShippingAddress user={user} isLoading={isLoading} isSuccess={isSuccess} isError={isError} message={message} setLocation={setLocation} />
+        <ShippingAddress user={user} isSuccess={isSuccess} isError={isError} message={message} setLocation={setLocation} />
         <div className="seller__request">
           <SubmitSellerRequest
             user={requestData}