refactor(profile): information personnel (#864)

src/components/Cards/AlertCard/AlertCard.tsx

@@ -20,7 +20,7 @@ const AlertCard = ({ payload, ...props }: AlertVoxCardProps) => {
     <VoxCard {...props}>
       <VoxCard.Content>
         <XStack justifyContent="space-between">
-          <VoxCard.Chip news>{payload.label}</VoxCard.Chip>
+          <VoxCard.Chip>{payload.label}</VoxCard.Chip>
         </XStack>
         <VoxCard.Title>{payload.title}</VoxCard.Title>
         <VoxCard.Description markdown>{payload.description}</VoxCard.Description>

src/components/Chip/Chip.tsx

@@ -15,7 +15,7 @@ export type ChipProps = {
 
 const Chip = ({ children, ...props }: ChipProps) => {
   return (
-    <ChipFrame {...props}>
+    <ChipFrame {...props} theme={props.theme ?? 'gray'}>
       <Text fontWeight="$6" fontSize="$1" color="$color4">
         {children}
       </Text>

src/screens/profil/account/form/AbstractProfilForm.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { VoxButton } from '@/components/Button'
+import VoxCard from '@/components/VoxCard/VoxCard'
+import { ProfileFormError } from '@/services/profile/error'
+import { useMutationUpdateProfil } from '@/services/profile/hook'
+import { ErrorMonitor } from '@/utils/ErrorMonitor'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { has } from 'lodash'
+import { Control, DefaultValues, FieldValues, FormState, Path, useForm } from 'react-hook-form'
+import { XStack } from 'tamagui'
+import * as z from 'zod'
+
+const isPathExist = <TF extends FieldValues, S extends string>(path: S, obj: DefaultValues<TF>): path is Path<TF> => {
+  return has(obj, path)
+}
+
+const AbstractForm = <T extends z.Schema<any, any>, TF extends FieldValues>(props: {
+  defaultValues: DefaultValues<TF>
+  uuid: string
+  validatorSchema: T
+  onErrors?: (errors: FormState<TF>['errors']) => void
+  children: (props: { control: Control<TF>; formState: FormState<TF> }) => React.ReactNode
+}) => {
+  const { control, handleSubmit, formState, reset, setError } = useForm({
+    resolver: zodResolver(props.validatorSchema),
+    defaultValues: props.defaultValues,
+    mode: 'all',
+  })
+
+  React.useEffect(() => {
+    if (props.onErrors) {
+      props.onErrors(formState.errors)
+    }
+  }, [formState.errors])
+
+  const { mutateAsync, isPending } = useMutationUpdateProfil({ userUuid: props.uuid })
+
+  const onSubmit = handleSubmit((data) => {
+    mutateAsync(data)
+      .then(() => {
+        reset()
+      })
+      .catch((e) => {
+        if (e instanceof ProfileFormError) {
+          e.violations.forEach((violation) => {
+            if (isPathExist(violation.propertyPath, props.defaultValues)) {
+              setError(violation.propertyPath, { message: violation.message })
+            } else {
+              ErrorMonitor.log('Unknown property path / profil form', violation)
+            }
+          })
+        }
+      })
+  })
+
+  return (
+    <VoxCard>
+      <VoxCard.Content>
+        {props.children({ control, formState })}
+        <XStack justifyContent="flex-end" gap="$2">
+          <VoxButton variant="outlined" display={formState.isDirty ? 'flex' : 'none'} onPress={() => reset()}>
+            Annuler
+          </VoxButton>
+          <VoxButton variant="outlined" theme="blue" onPress={onSubmit} loading={isPending} disabled={!formState.isDirty || !formState.isValid}>
+            Enregister
+          </VoxButton>
+        </XStack>
+      </VoxCard.Content>
+    </VoxCard>
+  )
+}
+
+export default AbstractForm