endpoint bug fixed

src/components/InputText.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function InputText({id, name, type='text', placeholder, value, handleChange}) {
+export default function InputText({id, name, type='text', placeholder, disabled, value, handleChange}) {
   return (
     <div className='w-full h-12 overflow-hidden'>
-        <input id={id} name={name} type={type} value={value} placeholder={placeholder} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
+        <input id={id} name={name} type={type} value={value} placeholder={placeholder} disabled={disabled} onChange={handleChange} className='p-2 w-full h-full text-black outline-0 ring-0 border border-slate-300 focus:border-purple-600 rounded-md' />
     </div>
   )
 }

src/components/account_edit/AccountEditCom.jsx

@@ -8,6 +8,8 @@ import RouteLinks from "../../RouteLinks";
 import { getAccountView } from "../../services/siteServices";
 import queryKeys from "../../services/queryKeys";
 import AccountBannerCom from "./AccountBannerCom";
+import UpdateProfile from "./UpdateProfile";
+import UpdatePassword from "./UpdatePassword";
 
 
 export default function AccountEditCom() {
@@ -38,7 +40,6 @@ export default function AccountEditCom() {
   const accountsViewData = data?.data; // ACCOUNT EDIT DATA
   const account_info = accountsViewData?.account;
 
-
   useEffect(() => {
     queryClient.refetchQueries({
       queryKey: [...queryKeys.account_view],
@@ -53,20 +54,36 @@ export default function AccountEditCom() {
         title={`Account Edit [${state?.memberUID}]`}
         paths={["Dashboard", "Account Edit"]}
       />
-
+      
-      <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
         {isFetching ? (
           <>
+          <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
             <p className="text-slate-800">Loading...</p>
+          </div>
           </>
         ) : isError ? (
-          <p className="text-red-500">{error.message}</p>
+          <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
+            <p className="text-red-500">{error.message}</p>
+          </div>
         ) : (
           <>
+          <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
              <AccountBannerCom accountInfo={account_info} />
+          </div>
+          
+          <div className="box bg-white dark:bg-black-box text-black-body dark:text-white-body">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-5">
+              <div className="p-4 col-span-12 lg:col-span-7 xl:col-span-8 shadow border rounded-xl">
+                <UpdateProfile accountInfo={account_info} />
+              </div>
+              <div className="p-4 max-h-96 col-span-12 lg:col-span-5 xl:col-span-4 shadow border rounded-xl">
+                <UpdatePassword />
+              </div>
+            </div>
+          </div>
           </>
         )}
-      </div>
+
     </div>
   );
 }

src/components/account_edit/UpdatePassword.jsx

@@ -0,0 +1,124 @@
+
+import {Link} from 'react-router-dom'
+import Icons from "../Icons";
+import {useMutation} from '@tanstack/react-query'
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+import InputText from '../InputText'
+
+export default function UpdatePassword() {
+
+    const initialValues = {
+    newPassword: "",
+    confirmPassword: ""
+    };
+
+    // To get the validation schema
+    const validationSchema = Yup.object().shape({
+        newPassword: Yup.string()
+            .min(6, 'must be upto 6 characters')
+            .max(25, 'must not exceed 25 characters')
+            .required("New password is required"),
+
+        confirmPassword: Yup.string()
+            .oneOf([Yup.ref("newPassword"), null], "Passwords do not match")
+            .required("Confirm password is required"),
+    });
+
+        const updatePassword = useMutation({
+        mutationFn: (fields) => {
+            if (!fields.newPassword || !fields.confirmPassword) {
+                throw new Error('Please provide all fields marked *')
+            }
+            // return loginUser(fields)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            // const {jwt_token, user} = res?.data
+            setTimeout(() => {
+                updatePassword.reset()
+            }, 3000);
+        }
+    })
+
+    //FUNCTION TO HANDLE LOGIN
+    const handleSubmit = (values, helper) => {
+        updatePassword.mutate(values)
+    };
+
+    return <>
+        <div className="flex flex-col gap-1">
+            <div className="w-full">
+                <h4 className="mb-3 font-semibold text-lg">Change Password</h4>
+            </div>
+            <div className="w-full">
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema}
+                    onSubmit={handleSubmit}
+                >
+                    {(props) => (
+                        <Form>
+                            <div className='flex flex-col gap-8 w-full'>
+                                <div className='flex flex-col gap-6'>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>New Password</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.newPassword && props.touched.newPassword) ? props.errors.newPassword : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='newPassword'
+                                            placeholder='New Password'
+                                            name='newPassword'
+                                            type='password'
+                                            value={props.values.newPassword}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Confirm Password</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.confirmPassword && props.touched.confirmPassword) ? props.errors.confirmPassword : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='confirmPassword'
+                                            placeholder='Confirm Password'
+                                            name='confirmPassword'
+                                            type='password'
+                                            value={props.values.confirmPassword}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='flex justify-end h-10 mb-10'>
+                                        <button type='submit' disabled={updatePassword.isPending} className='px-4 h-full bg-primary text-white font-bold rounded-md'>{updatePassword.isPending ? 'loading...' : 'Update Password'}</button>
+                                    </div>
+
+                                    {updatePassword.error &&
+                                        <>
+                                            <div className="w-full text-center">
+                                                <p className='text-red-500 text-sm'>{updatePassword.error.message}</p>
+                                            </div>
+                                        </>
+                                    }
+                                    {updatePassword.success &&
+                                        <>
+                                            <div className="w-full text-center">
+                                                <p className='text-emerald-500 text-sm'>{'Password Updated Successfully'}</p>
+                                            </div>
+                                        </>
+                                    }
+                                </div>
+                            </div>
+                        </Form>
+                    )}
+                </Formik>
+            </div>
+        </div>
+    </>
+}
+
+
+

src/components/account_edit/UpdateProfile.jsx

@@ -0,0 +1,205 @@
+
+import {Link} from 'react-router-dom'
+import Icons from "../Icons";
+import {useMutation} from '@tanstack/react-query'
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+
+import InputText from '../InputText'
+import { useEffect } from 'react';
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import queryKeys from '../../services/queryKeys';
+
+import {updateUserProfile} from '../../services/siteServices'
+
+
+export default function UpdateProfile({accountInfo}) {
+
+    const queryClient = useQueryClient();
+
+    const initialValues = {
+        firstname: accountInfo?.firstname || "",
+        lastname: accountInfo?.lastname || "",
+        account_name: accountInfo?.account_name || "",
+        phone_number: accountInfo?.phone_number || "",
+        email: accountInfo?.email || "",
+        address: accountInfo?.address || "",
+    };
+
+    // To get the validation schema
+    const validationSchema = Yup.object().shape({
+        firstname: Yup.string().required("First name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
+        lastname: Yup.string().required("Last name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
+        account_name: Yup.string().required("Account name is required").min(3, 'must be upto 3 characters').max(25, 'must not exceed 25 characters'),
+        phone_number: Yup.string().required("Phone number is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
+        email: Yup.string().email('Invalid email format').required("Email is required").max(50, 'must not exceed 50 characters'),
+        address: Yup.string().required("Address is required").min(10, 'must be at least 10 characters').max(255, 'must not exceed 255 characters'),
+    });
+
+    const updateProfile = useMutation({
+        mutationFn: (fields) => {
+            return updateUserProfile(fields)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+        onSuccess: (res) => {
+            console.log('res', res)
+            // if(res?.data?.resultCode != '0') {
+            //     throw new Error(res?.data?.message || res?.data?.resultDescription || 'An error occurred while updating profile')
+            // }
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.account_view],
+                // type: 'active',
+                // exact: true,
+            });
+        },
+        onSettled: () => {
+            setTimeout(() => {
+                updateProfile.reset()
+            }, 3000);
+        }
+    })
+
+    //FUNCTION TO HANDLE LOGIN
+    const handleSubmit = (values, helper) => {
+        const newValues= {
+            member_uid: accountInfo?.uid || "",
+            member_account_name: values?.account_name || "",
+            member_firstname: values?.firstname || "",
+            member_full_address: values?.address || "",
+            member_lastname: values?.lastname || "",
+            member_email: values?.email || "",
+            member_phone: values?.phone_number || ""
+        }
+
+        updateProfile.mutate(newValues)
+        console.log('values', newValues)
+    };
+
+
+    return <>
+        <div className="flex flex-col gap-1">
+            <div className="w-full">
+                <h4 className="mb-3 font-semibold text-lg">Edit Your Personal Settings</h4>
+            </div>
+            <div className="w-full">
+                <Formik
+                    initialValues={initialValues}
+                    validationSchema={validationSchema}
+                    onSubmit={handleSubmit}
+                >
+                    {(props) => (
+                        <Form>
+                            <div className='flex flex-col gap-8 w-full'>
+                                <div className='flex flex-col gap-6'>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>First Name</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='firstname'
+                                            placeholder='First Name'
+                                            name='firstname'
+                                            value={props.values.firstname}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Last Name</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='lastname'
+                                            placeholder='Last Name'
+                                            name='lastname'
+                                            value={props.values.lastname}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Account Name</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.account_name && props.touched.account_name) ? props.errors.account_name : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='account_name'
+                                            placeholder='Account Name'
+                                            name='account_name'
+                                            value={props.values.account_name}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Phone Number</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.phone_number && props.touched.phone_number) ? props.errors.phone_number : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='phone_number'
+                                            placeholder='Phone Number'
+                                            name='phone_number'
+                                            value={props.values.phone_number}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Email</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.email && props.touched.email) ? props.errors.email : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='email'
+                                            placeholder='Email'
+                                            disabled={true}
+                                            name='email'
+                                            value={props.values.email}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+                                    <div className='relative text-input flex flex-col gap-2'>
+                                        <p className='flex items-center gap-1'>
+                                            <label className='text-lg'>Address</label>
+                                            <span className='text-red-500 text-10'>{(props.errors.address && props.touched.address) ? props.errors.address : ''}</span>
+                                        </p>
+                                        <InputText
+                                            id='address'
+                                            placeholder='Address'
+                                            name='address'
+                                            value={props.values.address}
+                                            handleChange={props.handleChange}
+                                        />
+                                    </div>
+
+                                    <div className='flex justify-end h-10 mb-10'>
+                                        <button type='submit' disabled={updateProfile.isPending} className='px-4 h-full bg-primary text-white font-bold rounded-md'>{updateProfile.isPending ? 'loading...' : 'Update Profile'}</button>
+                                    </div>
+
+                                    {updateProfile.error &&
+                                        <>
+                                            <div className="w-full text-center">
+                                                <p className='text-red-500 text-sm'>{updateProfile.error.message}</p>
+                                            </div>
+                                        </>
+                                    }
+                                    {updateProfile.error &&
+                                        <>
+                                            <div className="w-full text-center">
+                                                <p className='text-emerald-500 text-sm'>{'Profile Updated Successfully'}</p>
+                                            </div>
+                                        </>
+                                    }
+                                </div>
+                            </div>
+                        </Form>
+                    )}
+                </Formik>
+            </div>
+        </div>
+    </>
+}
+
+
+

src/services/queryKeys.js

@@ -20,6 +20,7 @@ const queryKeys = {
     products_template: ['products_template'],
     custom_template: ['custom_template'],
     account_view: ['account_view'],
+    account_edit: ['account_edit'],
     subscriptions_view: ['subscriptions_view'],
     users_admin: ['users_admin'],
     country_list: ['country_list'],

src/services/siteServices.js

@@ -124,6 +124,14 @@ export const getUsers = (reqData) => {
     return getAuxEnd(`/users`, postData)
 }
 
+// FUNCTION TO UPDATE USER PROFILE
+export const updateUserProfile = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/update-profile', postData, false)
+}
+
 // FUNCTION TO GET PRODUCTS TEMPLATE DATA
 export const getProductsTemplate = (reqData) => {
     const postData = { ...reqData }