merge branch 'develop'

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/components/base/RadioGroup/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import Radio from '@/components/base/Radio/Radio'
 import Text from '@/components/base/Text'
 import { styled } from '@tamagui/core'
-import { ThemeableStack, XStack } from 'tamagui'
+import { Separator, ThemeableStack, XStack, YStack } from 'tamagui'
 
 type RadioGroupProps = {
   options: {
@@ -22,11 +22,14 @@ export default function RadioGroup({ options, value, onChange }: RadioGroupProps
   }
   return (
     <RadioGroupFrame>
-      {options.map((option) => (
-        <XStack key={option.value} gap="$2" group onPress={handlePress(option.value)} alignItems="center" cursor="pointer">
-          <Radio checked={value === option.value} />
-          <Text.MD multiline>{option.label}</Text.MD>
-        </XStack>
+      {options.map((option, i) => (
+        <YStack gap={16}>
+          <XStack key={option.value} gap="$2" group onPress={handlePress(option.value)} alignItems="center" cursor="pointer">
+            <Radio checked={value === option.value} />
+            <Text.MD multiline>{option.label}</Text.MD>
+          </XStack>
+          {i < options.length - 1 && <Separator bg="$textOutline" />}
+        </YStack>
       ))}
     </RadioGroupFrame>
   )

src/screens/actions/form/ActionForm.tsx

@@ -77,7 +77,7 @@ export default function ActionForm({ onCancel, onClose, uuid, scope }: Props) {
     if (formState.errors.post_address) {
       setManualAddress(true)
     }
-  }, [formState.errors.post_address])
+  }, [formState])
 
   if ((!data || !isFullAction(data)) && uuid) return null
 

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

@@ -0,0 +1,72 @@
+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: TF): path is Path<TF> => {
+  return has(obj, path)
+}
+
+const AbstractForm = <T extends z.Schema<any, any>, TF extends FieldValues>(
+  props: {
+    defaultValues: TF
+    uuid: string
+    validatorSchema: T
+    onErrors?: (errors: FormState<TF>['errors']) => void
+    children: (props: { control: Control<TF>; formState: FormState<TF> }) => React.ReactNode
+  } & { cardProps?: React.ComponentProps<typeof VoxCard> },
+) => {
+  const { control, handleSubmit, formState, reset, setError } = useForm({
+    resolver: zodResolver(props.validatorSchema),
+    values: props.defaultValues,
+    mode: 'all',
+  })
+  const { isDirty, isValid } = formState
+
+  React.useEffect(() => {
+    if (props.onErrors) {
+      props.onErrors(formState.errors)
+    }
+  }, [formState])
+
+  const { mutateAsync, isPending } = useMutationUpdateProfil({ userUuid: props.uuid })
+
+  const onSubmit = handleSubmit((data) => {
+    mutateAsync(data).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 {...props.cardProps}>
+      <VoxCard.Content>
+        {props.children({ control, formState })}
+        <XStack justifyContent="flex-end" gap="$2">
+          <VoxButton variant="outlined" display={isDirty ? 'flex' : 'none'} onPress={() => reset()}>
+            Annuler
+          </VoxButton>
+          <VoxButton variant="outlined" theme="blue" onPress={onSubmit} loading={isPending} disabled={!isDirty || !isValid}>
+            Enregister
+          </VoxButton>
+        </XStack>
+      </VoxCard.Content>
+    </VoxCard>
+  )
+}
+
+export default AbstractForm