update profile added #35
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,204 @@
|
||||
|
||||
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) => {
|
||||
// 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>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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'],
|
||||
|
||||
@@ -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('/office/update-profile', postData, false)
|
||||
}
|
||||
|
||||
// FUNCTION TO GET PRODUCTS TEMPLATE DATA
|
||||
export const getProductsTemplate = (reqData) => {
|
||||
const postData = { ...reqData }
|
||||
|
||||
Reference in New Issue
Block a user