src/driven/utils/constants/staticMessages.ts

@@ -20,6 +20,9 @@ export const staticMessages = {
     enterPanel: 'Enter to Panel',
     enterPhoneNumber: 'Enter your phone number',
     enterOtpCode: 'Enter your Otp Code',
+    success: {
+      createUser: 'user created successfully',
+    },
   },
   service: {
     errors: {

src/driving/application/core/create-user/infra/CreateUser.tsx

@@ -29,7 +29,15 @@ export default function CreateUser() {
   // pass the usecase to the model
   const { handleSubmitForm } = createUserModel({ createUserLogic });
   // pass the method to the viewmodel to call on submit
-  const { stateHandler, onSubmit, inputNames } = useCreateUserVM({ handleSubmitForm });
+  const { stateHandler, onSubmit, inputNames, error, setError } = useCreateUserVM({ handleSubmitForm });
   // get all of the needed information to the user to show
-  return <CreateUserView stateHandler={stateHandler} inputNames={inputNames} onSubmit={onSubmit} />;
+  return (
+    <CreateUserView
+      error={error}
+      setError={setError}
+      stateHandler={stateHandler}
+      inputNames={inputNames}
+      onSubmit={onSubmit}
+    />
+  );
 }

src/driving/application/core/create-user/view/CreateUserView.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton';
 import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput';
 import { staticMessages } from '~/driven/utils/constants/staticMessages';
+import Notification from '~/driven/utils/components/Notification/Notification';
 import ICreateUserViewProps from './protocols';
 
 export default function CreateUserView(props: ICreateUserViewProps) {
-  const { onSubmit, inputNames, stateHandler } = props;
+  const { onSubmit, inputNames, stateHandler, error, setError } = props;
   const { inputStates, inputsSetStates } = stateHandler;
 
   const inputs = inputNames.map((inputName) => {
@@ -27,6 +28,13 @@ export default function CreateUserView(props: ICreateUserViewProps) {
   });
   return (
     <form onSubmit={onSubmit} className='px-4 my-8'>
+      {Boolean(error.message) && (
+        <Notification
+          message={error.message}
+          type={error.type}
+          onCloseCallback={() => setError({ message: '', type: 'error' })}
+        />
+      )}
       <div className='flex flex-wrap w-full gap-4'>{inputs}</div>
       <div className='flex'>
         <PrimaryButton onClick={() => null} title={staticMessages.global.submit} />

src/driving/application/core/create-user/view/protocols.ts

@@ -8,4 +8,6 @@ export default interface ICreateUserViewProps {
     inputsSetStates: SetStateInputMethod<keyof INewUserData>;
   };
   inputNames: (keyof INewUserData)[];
+  error: { message: string; type: 'error' | 'success' };
+  setError: React.Dispatch<React.SetStateAction<{ message: string; type: 'error' | 'success' }>>;
 }

src/driving/application/core/create-user/viewmodel/CreateUserVM.ts

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { checkPhoneNumberInput } from '~/driven/utils/helpers/globalHelpers';
 import { INewUserData } from '~/business-logic/core/users/create-user/create-account/data/dto/protocols';
+import { AxiosError } from 'axios';
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
 import ICreateUserViewProps from '../view/protocols';
 import IUseCreateUserVm from './protocols';
 
@@ -13,6 +15,8 @@ const inputStateInitialValue: INewUserData = {
 const inputNames: (keyof INewUserData)[] = ['firstname', 'lastname', 'phonenumber'];
 
 const useCreateUserVM = (dependencies: IUseCreateUserVm): ICreateUserViewProps => {
+  const [error, setError] = useState<{ message: string; type: 'error' | 'success' }>({ message: '', type: 'error' });
+
   const { handleSubmitForm } = dependencies;
   const [inputsValue, setInputValues] = useState<INewUserData>(inputStateInitialValue);
 
@@ -24,10 +28,20 @@ const useCreateUserVM = (dependencies: IUseCreateUserVm): ICreateUserViewProps =
     }));
   };
 
-  const onSubmitCreateUserForm = (e: React.FormEvent) => {
+  const onSubmitCreateUserForm = async (e: React.FormEvent) => {
     e.preventDefault();
-    console.log('submit user', inputsValue);
-    handleSubmitForm(inputsValue);
+    try {
+      await handleSubmitForm(inputsValue);
+      setError({ message: staticMessages.global.success.createUser, type: 'success' });
+    } catch (errorExc) {
+      console.log('herere', errorExc);
+      if (errorExc instanceof AxiosError) {
+        console.log('herere', errorExc);
+        setError({ message: errorExc.response?.data?.description, type: 'error' });
+      } else if (errorExc instanceof Error) {
+        setError({ message: errorExc.message, type: 'error' });
+      }
+    }
   };
 
   const inputStates: INewUserData = { ...inputsValue };
@@ -39,6 +53,8 @@ const useCreateUserVM = (dependencies: IUseCreateUserVm): ICreateUserViewProps =
     },
     onSubmit: onSubmitCreateUserForm,
     inputNames,
+    error,
+    setError,
   };
 };