diff --git a/src/components/InputText.jsx b/src/components/InputText.jsx index 66c3914..84f1b57 100644 --- a/src/components/InputText.jsx +++ b/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 (
- +
) } diff --git a/src/components/account_edit/AccountEditCom.jsx b/src/components/account_edit/AccountEditCom.jsx index 8188534..15b4f55 100644 --- a/src/components/account_edit/AccountEditCom.jsx +++ b/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"]} /> - -
+ {isFetching ? ( <> +

Loading...

+
) : isError ? ( -

{error.message}

+
+

{error.message}

+
) : ( <> +
+
+ +
+
+
+ +
+
+ +
+
+
)} -
+ ); } diff --git a/src/components/account_edit/UpdatePassword.jsx b/src/components/account_edit/UpdatePassword.jsx new file mode 100644 index 0000000..864d492 --- /dev/null +++ b/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 <> +
+
+

Change Password

+
+
+ + {(props) => ( +
+
+
+
+

+ + {(props.errors.newPassword && props.touched.newPassword) ? props.errors.newPassword : ''} +

+ +
+
+

+ + {(props.errors.confirmPassword && props.touched.confirmPassword) ? props.errors.confirmPassword : ''} +

+ +
+
+ +
+ + {updatePassword.error && + <> +
+

{updatePassword.error.message}

+
+ + } + {updatePassword.success && + <> +
+

{'Password Updated Successfully'}

+
+ + } +
+
+
+ )} + +
+
+ +} + + + diff --git a/src/components/account_edit/UpdateProfile.jsx b/src/components/account_edit/UpdateProfile.jsx new file mode 100644 index 0000000..1dbce7a --- /dev/null +++ b/src/components/account_edit/UpdateProfile.jsx @@ -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 <> +
+
+

Edit Your Personal Settings

+
+
+ + {(props) => ( +
+
+
+
+

+ + {(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''} +

+ +
+
+

+ + {(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''} +

+ +
+
+

+ + {(props.errors.account_name && props.touched.account_name) ? props.errors.account_name : ''} +

+ +
+
+

+ + {(props.errors.phone_number && props.touched.phone_number) ? props.errors.phone_number : ''} +

+ +
+
+

+ + {(props.errors.email && props.touched.email) ? props.errors.email : ''} +

+ +
+
+

+ + {(props.errors.address && props.touched.address) ? props.errors.address : ''} +

+ +
+ +
+ +
+ + {updateProfile.error && + <> +
+

{updateProfile.error.message}

+
+ + } + {updateProfile.error && + <> +
+

{'Profile Updated Successfully'}

+
+ + } +
+
+
+ )} + +
+
+ +} + + + diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 6e5bbc4..7b1d524 100644 --- a/src/services/queryKeys.js +++ b/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'], diff --git a/src/services/siteServices.js b/src/services/siteServices.js index 785a7d1..19ee5ea 100644 --- a/src/services/siteServices.js +++ b/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('/office/update-profile', postData, false) +} + // FUNCTION TO GET PRODUCTS TEMPLATE DATA export const getProductsTemplate = (reqData) => { const postData = { ...reqData }