From a25e4664c6ebaba5e6e23c93791a695dbc455f75 Mon Sep 17 00:00:00 2001
From: Lea Renaux <lea.renaux@insee.fr>
Date: Fri, 3 May 2024 15:25:08 +0200
Subject: [PATCH] add SU address data in createContact dialog

---
 src/pages/CreateContactPage.tsx               |  63 ++---
 src/pages/Search/SearchContacts.tsx           |  22 +-
 src/ui/Contact/ContactFormDialog.tsx          | 176 ++++--------
 src/ui/Contact/ContactRightsDialogs.tsx       |   7 +-
 .../CreateContact/CreateContactDialog.tsx     | 261 ++++++++++++++++++
 .../CreateContact/InformationsForm.tsx        |  59 +++-
 .../CreateContact/RightsManagementForm.tsx    |  20 +-
 src/ui/Form/AddressFormFields.tsx             |   2 +-
 src/ui/Form/Field.tsx                         |  44 ++-
 src/ui/SurveyUnit/SurveyUnitContacts.tsx      |   8 +-
 src/ui/SurveyUnit/SurveyUnitFormDialog.tsx    |   2 +-
 11 files changed, 488 insertions(+), 176 deletions(-)
 create mode 100644 src/ui/Contact/CreateContact/CreateContactDialog.tsx

diff --git a/src/pages/CreateContactPage.tsx b/src/pages/CreateContactPage.tsx
index 980d647..8ea5f20 100644
--- a/src/pages/CreateContactPage.tsx
+++ b/src/pages/CreateContactPage.tsx
@@ -1,9 +1,6 @@
 import Stack from "@mui/material/Stack";
-import { useForm } from "../hooks/useForm";
-import { schema } from "../ui/Contact/ContactFormDialog";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { Row } from "../ui/Row";
-import Button from "@mui/material/Button";
 import PersonAddAltOutlinedIcon from "@mui/icons-material/PersonAddAltOutlined";
 import Typography from "@mui/material/Typography";
 import { Step, StepLabel, Stepper, Divider, Card } from "@mui/material";
@@ -11,24 +8,13 @@ import { InformationsForm } from "../ui/Contact/CreateContact/InformationsForm";
 import { RightsManagementForm } from "../ui/Contact/CreateContact/RightsManagementForm";
 import { Breadcrumbs } from "../ui/Breadcrumbs";
 
-// const steps = ["Informations du contact", "Adresse du contact", "Gestion des droits"];
-
 const steps = ["Informations du contact", "Gestion des droits"];
 
 export const CreateContactPage = () => {
-  const { register, control, errors } = useForm(schema);
   const [activeStep, setActiveStep] = useState(0);
+  const [contactData, setContactData] = useState();
 
-  const data = useRef(new FormData());
-
-  const onSubmitStep = async (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    const newData = new FormData(event.currentTarget);
-    console.log("new data", { newData });
-    for (let [name, value] of newData) {
-      data.current.append(name, value);
-    }
-  };
+  const [rights, setRights] = useState();
 
   const handleNext = () => {
     setActiveStep(prevActiveStep => prevActiveStep + 1);
@@ -38,8 +24,15 @@ export const CreateContactPage = () => {
     setActiveStep(prevActiveStep => prevActiveStep - 1);
   };
 
-  const handleSubmitStep = async (event: React.FormEvent<HTMLFormElement>) => {
-    onSubmitStep(event);
+  const handleSubmitStep = async (data: any) => {
+    if (activeStep === 0) {
+      setContactData(data);
+    }
+
+    if (activeStep === 1) {
+      setRights(data);
+    }
+
     handleNext();
   };
 
@@ -50,7 +43,7 @@ export const CreateContactPage = () => {
   ];
 
   return (
-    <Stack>
+    <Stack pb={5}>
       <Divider variant="fullWidth" />
       <Stack>
         <Row spacing={1} px={6} py={4} bgcolor={"white"} justifyContent={"space-between"}>
@@ -72,27 +65,17 @@ export const CreateContactPage = () => {
         </Row>
         <Breadcrumbs items={breadcrumbs} />
         <Card sx={{ mt: 5, px: 6, py: 3, maxWidth: "1160px", alignSelf: "center" }} elevation={2}>
-          <form action="#" onSubmit={handleSubmitStep}>
-            {activeStep === 0 && (
-              <InformationsForm errors={errors} register={register} control={control} />
-            )}
-            {/* {activeStep === 1 && <AddressForm errors={errors} register={register} />} */}
-            {activeStep === 1 && <RightsManagementForm />}
-            <Row p={4} justifyContent={"flex-end"}>
-              <Button
-                disabled={activeStep === 0}
-                variant={"outlined"}
-                onClick={handleBack}
-                sx={{ mr: 1 }}
-              >
-                Annuler
-              </Button>
+          {activeStep === 0 && (
+            <InformationsForm
+              handleSubmitStep={handleSubmitStep}
+              handleBack={handleBack}
+              contact={contactData}
+            />
+          )}
 
-              <Button type="submit" variant="contained">
-                Suivant
-              </Button>
-            </Row>
-          </form>
+          {activeStep === 1 && (
+            <RightsManagementForm handleSubmitStep={handleSubmitStep} handleBack={handleBack} />
+          )}
         </Card>
       </Stack>
     </Stack>
diff --git a/src/pages/Search/SearchContacts.tsx b/src/pages/Search/SearchContacts.tsx
index e7d92ba..0d6a541 100644
--- a/src/pages/Search/SearchContacts.tsx
+++ b/src/pages/Search/SearchContacts.tsx
@@ -1,4 +1,4 @@
-import { CardActionArea, CircularProgress, Stack } from "@mui/material";
+import { Button, CardActionArea, CircularProgress, Stack } from "@mui/material";
 import { Row } from "../../ui/Row";
 import { useInfiniteFetchQuery } from "../../hooks/useFetchQuery.ts";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
@@ -10,6 +10,7 @@ import { type APIResponse } from "../../types/api.ts";
 import { type ItemOf } from "../../types/utils.ts";
 import Card from "@mui/material/Card";
 import { Link } from "react-router-dom";
+import { Link as CustomLink } from "../../ui/Link";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { TextWithLeftIcon } from "../../ui/TextWithLeftIcon.tsx";
@@ -19,6 +20,7 @@ import EmailIcon from "@mui/icons-material/Email";
 import DesktopWindowsOutlinedIcon from "@mui/icons-material/DesktopWindowsOutlined";
 import { useSearchFilterParams } from "../../hooks/useSearchFilter.ts";
 import { ContactCardTitle } from "../../ui/SurveyUnit/SurveyUnitContacts.tsx";
+import EditIcon from "@mui/icons-material/Edit";
 
 const endpoint = "/api/contacts/search" as const;
 type Item = ItemOf<Required<APIResponse<typeof endpoint, "get">>["content"]>;
@@ -67,6 +69,24 @@ export const SearchContacts = () => {
         ))}
         {hasNextPage && <VisibilitySpy onVisible={fetchNextPage} />}
       </CardGrid>
+      <Button
+        sx={{
+          position: "fixed",
+          bottom: "48px",
+          right: "32px",
+          borderRadius: 24,
+          typography: "titleSmall",
+          fontWeight: "500",
+        }}
+        size="large"
+        fullWidth={false}
+        variant="contained"
+        endIcon={<EditIcon />}
+      >
+        <CustomLink to={"/contacts/createContact"} color="inherit" underline="none">
+          Créer un nouveau contact
+        </CustomLink>
+      </Button>
     </Stack>
   );
 };
diff --git a/src/ui/Contact/ContactFormDialog.tsx b/src/ui/Contact/ContactFormDialog.tsx
index 0c0412e..772f720 100644
--- a/src/ui/Contact/ContactFormDialog.tsx
+++ b/src/ui/Contact/ContactFormDialog.tsx
@@ -1,14 +1,4 @@
-import {
-  Box,
-  Button,
-  Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  FormControlLabel,
-} from "@mui/material";
+import { Box, Button, Dialog, DialogActions, DialogContent, DialogTitle, Divider } from "@mui/material";
 import { Schema, z } from "zod";
 import { useForm } from "../../hooks/useForm.ts";
 import { APISchemas } from "../../types/api.ts";
@@ -33,40 +23,45 @@ export const addressSchema = z
     repetitionIndex: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val))
+      .transform(val => val ?? "")
       .optional(),
     streetType: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val))
+      .transform(val => val ?? "")
       .optional(),
-    streetName: z.string().optional(),
+    streetName: z
+      .string()
+      .optional()
+      .transform(val => val ?? ""),
     addressSupplement: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val))
+      .transform(val => val ?? "")
       .optional(),
     specialDistribution: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val))
+      .transform(val => val ?? "")
       .optional(),
     cedexName: z
       .string()
+      .optional()
       .nullable()
-      .transform(val => (val === null ? "" : val)),
+      .transform(val => val ?? ""),
     cedexCode: z
       .string()
+      .optional()
       .nullable()
-      .transform(val => (val === null ? "" : val)),
+      .transform(val => val ?? ""),
     cityName: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val)),
+      .transform(val => val ?? ""),
     zipCode: z
       .string()
       .nullable()
-      .transform(val => (val === null ? "" : val)),
+      .transform(val => val ?? ""),
     countryName: z.string().optional().or(z.literal("")),
   })
   .superRefine(({ cedexCode, zipCode, cityName, cedexName }, refinementContext) => {
@@ -135,7 +130,7 @@ export const schema = z.object({
   phone: z
     .string()
     .nullable()
-    .transform(val => (val === null ? "" : val))
+    .transform(val => val ?? "")
     .optional(),
   secondPhone: z.string().optional().or(z.literal("")),
   identificationName: z.string().optional(),
@@ -143,7 +138,7 @@ export const schema = z.object({
   address: addressSchema,
 });
 
-const civilities = [
+export const civilities = [
   { label: "Madame", value: "Female" },
   { label: "Monsieur", value: "Male" },
 ];
@@ -163,7 +158,7 @@ export const styles = {
 export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) => {
   const defaultValues = contact.address?.countryName
     ? contact
-    : { ...contact, address: { ...contact.address, countryName: "France" } };
+    : { ...contact, address: { ...contact.address, countryName: "FRANCE" } };
   const { register, control, errors, handleSubmit, reset } = useForm(schema, {
     defaultValues: defaultValues,
   });
@@ -190,47 +185,18 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
         <DialogTitle>Modification des coordonnées</DialogTitle>
         <DialogContent>
           <Box sx={styles.Grid}>
-            <Stack gap={3} pt={2.5}>
-              <Field
-                control={control}
-                label="Civilité"
-                name="civility"
-                type="radios"
-                error={errors?.civility?.message}
-                options={civilities}
-              />
-              <Field label="Nom" error={errors.lastName?.message} {...register("lastName")} />
-              <Field label="Prénom" error={errors.firstName?.message} {...register("firstName")} />
-              <Field label="Fonction" error={errors.function?.message} {...register("function")} />
-              <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
-              <Row gap={3}>
-                <Field
-                  sx={{ width: "180px" }}
-                  label="Téléphone 1"
-                  error={errors.phone?.message}
-                  {...register("phone")}
-                />
-                <StarIcon fontSize="small" color="yellow" />
-              </Row>
-              <Row gap={3}>
-                <Field
-                  sx={{ width: "180px" }}
-                  label="Téléphone 2"
-                  error={errors.secondPhone?.message}
-                  {...register("secondPhone")}
-                />
-                <StarIcon fontSize="small" color="text.hint" />
-              </Row>
-            </Stack>
+            <ContactInformationForm errors={errors} register={register} control={control} />
             <Divider orientation="vertical" variant="middle" />
-            <AddressFormFields
-              errors={errors}
-              register={register}
-              repetitionIndexValue={contact.address?.repetitionIndex}
-              streetTypeValue={contact.address?.streetType}
-              countryValue={contact.address?.countryName?.toLocaleUpperCase() ?? "FRANCE"}
-              type="contact"
-            />
+            <Box component={"div"} pt={0}>
+              <AddressFormFields
+                type={"contact"}
+                errors={errors}
+                register={register}
+                repetitionIndexValue={contact?.address?.repetitionIndex ?? ""}
+                streetTypeValue={contact?.address?.streetType ?? ""}
+                countryValue={contact?.address?.countryName ?? "FRANCE"}
+              />
+            </Box>
           </Box>
         </DialogContent>
         <DialogActions>
@@ -246,65 +212,45 @@ export const ContactFormDialog = ({ open, onClose, contact, onSave }: Props) =>
   );
 };
 
-type FormContentProps = {
+type ContactInformationFormProps = {
   errors: any;
   register: UseFormRegister<z.TypeOf<Schema>>;
-  control?: UseFormReturn<any, any, any>["control"];
-  contact?: APISchemas["ContactFirstLoginDto"];
+  control: UseFormReturn<any, any, any>["control"];
 };
 
-export const FormContent = ({ errors, register, control, contact }: FormContentProps) => {
+export const ContactInformationForm = ({ errors, register, control }: ContactInformationFormProps) => {
   return (
-    <Box sx={styles.Grid}>
-      <Stack gap={4} pt={1}>
+    <Stack gap={3} pt={2.5}>
+      <Field
+        control={control}
+        label="Civilité"
+        name="civility"
+        type="radios"
+        error={errors?.civility?.message}
+        options={civilities}
+      />
+      <Field label="Nom" error={errors.lastName?.message} {...register("lastName")} />
+      <Field label="Prénom" error={errors.firstName?.message} {...register("firstName")} />
+      <Field label="Fonction" error={errors.function?.message} {...register("function")} />
+      <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
+      <Row gap={3}>
         <Field
-          control={control}
-          label="Civilité"
-          name="civility"
-          type="radios"
-          error={errors?.civility?.message}
-          options={civilities}
+          sx={{ width: "180px" }}
+          label="Téléphone 1"
+          error={errors.phone?.message}
+          {...register("phone")}
         />
-        <Field label="Nom" error={errors.lastName?.message} {...register("lastName")} />
-        <Field label="Prénom" error={errors.firstName?.message} {...register("firstName")} />
-        <Field label="Fonction" error={errors.function?.message} {...register("function")} />
-        <Field label="Adresse courriel" error={errors.email?.message} {...register("email")} />
-        <Row gap={3}>
-          <Field
-            sx={{ width: "150px" }}
-            label="Téléphone 1"
-            error={errors.phone?.message}
-            {...register("phone")}
-          />
-          <StarIcon fontSize="small" color="yellow" />
-        </Row>
-        <Row gap={3}>
-          <Field
-            sx={{ width: "150px" }}
-            label="Téléphone 2"
-            error={errors.secondPhone?.message}
-            {...register("secondPhone")}
-          />
-          <StarIcon fontSize="small" color="text.hint" />
-        </Row>
-      </Stack>
-      <Divider orientation="vertical" variant="middle" />
-      <Box component={"div"} pt={contact === undefined ? 0 : 6}>
-        {contact === undefined && (
-          <FormControlLabel
-            sx={{ pb: 2, ".MuiFormControlLabel-label": { typography: "titleSmall" } }}
-            control={<Checkbox size="small" />}
-            label="L’adresse du contact est identique à l’adresse de l’unité enquêtée"
-          />
-        )}
-        <AddressFormFields
-          errors={errors}
-          register={register}
-          repetitionIndexValue={contact?.address?.repetitionIndex ?? ""}
-          streetTypeValue={contact?.address?.streetType ?? ""}
-          countryValue={contact?.address?.countryName ?? ""}
+        <StarIcon fontSize="small" color="yellow" />
+      </Row>
+      <Row gap={3}>
+        <Field
+          sx={{ width: "180px" }}
+          label="Téléphone 2"
+          error={errors.secondPhone?.message}
+          {...register("secondPhone")}
         />
-      </Box>
-    </Box>
+        <StarIcon fontSize="small" color="text.hint" />
+      </Row>
+    </Stack>
   );
 };
diff --git a/src/ui/Contact/ContactRightsDialogs.tsx b/src/ui/Contact/ContactRightsDialogs.tsx
index 3476510..4935097 100644
--- a/src/ui/Contact/ContactRightsDialogs.tsx
+++ b/src/ui/Contact/ContactRightsDialogs.tsx
@@ -8,6 +8,8 @@ import RadioGroup from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Radio from "@mui/material/Radio";
 import { APISchemas } from "../../types/api";
+import { useToggle } from "react-use";
+import { CreateContactDialog } from "./CreateContact/CreateContactDialog";
 
 export type CommonContactRightsProps = {
   open: boolean;
@@ -218,11 +220,11 @@ export const EditSecondaryToPrimaryDialog = ({
 
 export const EditPrimaryWithoutSecondaryDialog = ({ open, onClose }: CommonContactRightsProps) => {
   const navigate = useNavigate();
+  const [hasDialog, toggleDialog] = useToggle(false);
 
   const goToCreateContactForm: FormEventHandler = e => {
     e.preventDefault();
-    onClose();
-    navigate("/contacts/createContact");
+    toggleDialog();
   };
 
   return (
@@ -237,6 +239,7 @@ export const EditPrimaryWithoutSecondaryDialog = ({ open, onClose }: CommonConta
         <Typography variant="bodyMedium">Une enquête doit avoir un contact principal.</Typography>
         <Typography variant="bodyMedium">Voulez vous créer un nouveau contact principal ?</Typography>
       </Stack>
+      <CreateContactDialog open={hasDialog} onClose={toggleDialog} />
     </FormDialog>
   );
 };
diff --git a/src/ui/Contact/CreateContact/CreateContactDialog.tsx b/src/ui/Contact/CreateContact/CreateContactDialog.tsx
new file mode 100644
index 0000000..fc91f70
--- /dev/null
+++ b/src/ui/Contact/CreateContact/CreateContactDialog.tsx
@@ -0,0 +1,261 @@
+import Dialog from "@mui/material/Dialog";
+import { useForm } from "../../../hooks/useForm";
+import { APISchemas } from "../../../types/api";
+import {
+  ContactInformationForm,
+  repetitionIndexEnum,
+  schema,
+  streetTypeEnum,
+  styles,
+} from "../ContactFormDialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import { UseFormRegister, UseFormReturn } from "react-hook-form";
+import { Schema, z } from "zod";
+import { useState } from "react";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import { Field } from "../../Form/Field";
+import { countries } from "../../../constants/countries";
+import Stack from "@mui/material/Stack";
+import { Row } from "../../Row";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  surveyUnit?: APISchemas["SurveyUnitDto"];
+};
+
+export const CreateContactDialog = ({ open, onClose, surveyUnit }: Props) => {
+  const defaultValues = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    function: "",
+    phone: "",
+    address: { countryName: "FRANCE" },
+  };
+
+  const { register, control, errors, reset, handleSubmit, setValue } = useForm(schema, {
+    defaultValues: defaultValues,
+  });
+
+  const onAddressChecked = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue("usualCompanyName", surveyUnit?.identificationName);
+    setValue("address", {
+      cedexCode: "",
+      cedexName: "",
+      cityName: "",
+      zipCode: "",
+      streetName: "",
+      ...surveyUnit?.address,
+    });
+  };
+
+  const handleClose = () => {
+    reset(defaultValues);
+    onClose();
+  };
+
+  const onSubmit = handleSubmit(data => {
+    console.log(data);
+    handleClose();
+  });
+
+  return (
+    <Dialog open={open} onClose={handleClose} sx={{ ".MuiPaper-root": { maxWidth: "1160px", px: 3 } }}>
+      <form action="#" onSubmit={onSubmit}>
+        <DialogTitle>Informations du contact</DialogTitle>
+        <DialogContent>
+          <FormContent
+            errors={errors}
+            register={register}
+            control={control}
+            contact={defaultValues}
+            surveyUnitId={surveyUnit?.idSu}
+            onAddressChecked={onAddressChecked}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button type="reset" onClick={handleClose}>
+            Annuler
+          </Button>
+          <Button type="submit" variant="contained">
+            Enregistrer
+          </Button>
+        </DialogActions>
+      </form>
+    </Dialog>
+  );
+};
+
+type FormContentProps = {
+  errors: any;
+  register: UseFormRegister<z.TypeOf<Schema>>;
+  control: UseFormReturn<any, any, any>["control"];
+  contact?: Omit<APISchemas["ContactFirstLoginDto"], "identifier">;
+  surveyUnitId?: string;
+  onAddressChecked?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+export const FormContent = ({
+  errors,
+  register,
+  control,
+  contact,
+  surveyUnitId,
+  onAddressChecked,
+}: FormContentProps) => {
+  const [country, setCountry] = useState(contact?.address?.countryName ?? "FRANCE");
+  return (
+    <Box sx={styles.Grid}>
+      <ContactInformationForm errors={errors} register={register} control={control} />
+      <Divider orientation="vertical" variant="middle" />
+      <Box component={"div"} pt={surveyUnitId === undefined ? 0 : 1.5}>
+        {surveyUnitId !== undefined && (
+          <FormControlLabel
+            sx={{ pb: 2, ".MuiFormControlLabel-label": { typography: "titleSmall" } }}
+            control={<Checkbox size="small" onChange={onAddressChecked} />}
+            label="L’adresse du contact est identique à l’adresse de l’unité enquêtée"
+          />
+        )}
+        <Box sx={styles.Grid}>
+          <Stack gap={3} pt={1}>
+            <Box sx={{ width: "610px" }}>
+              <Field
+                defaultValue={country}
+                type="select"
+                label="Sélectionnez un pays"
+                selectoptions={countries}
+                error={errors.address?.countryName?.message}
+                control={control}
+                name={"address.countryName"}
+                onChange={e => {
+                  setCountry(e.target.value as string);
+                }}
+              />
+            </Box>
+
+            <Field
+              sx={{ width: "650px" }}
+              label="Raison sociale"
+              error={errors.usualCompanyName?.message}
+              control={control}
+              name="usualCompanyName"
+            />
+
+            <Field
+              sx={{ width: "650px" }}
+              label="Complément (ZI, Bat, Res ...)"
+              error={errors.address?.addressSupplement?.message}
+              control={control}
+              name={"address.addressSupplement"}
+            />
+            <Row gap={2}>
+              <Field
+                sx={{ width: "100px" }}
+                label="N° de voie"
+                error={errors.address?.streetNumber?.message}
+                control={control}
+                name={"address.streetNumber"}
+              />
+              <Box sx={{ width: "250px" }}>
+                {country === "FRANCE" ? (
+                  <Field
+                    type="select"
+                    selectoptions={repetitionIndexEnum}
+                    defaultValue={contact?.address?.repetitionIndex ?? ""}
+                    label="Indice de répétition"
+                    error={errors.address?.repetitionIndex?.message}
+                    control={control}
+                    name={"address.repetitionIndex"}
+                  />
+                ) : (
+                  <Field
+                    label="Indice de répétition"
+                    defaultValue={contact?.address?.repetitionIndex ?? ""}
+                    error={errors.address?.repetitionIndex?.message}
+                    control={control}
+                    name={"address.repetitionIndex"}
+                  />
+                )}
+              </Box>
+              <Box sx={{ width: "270px" }}>
+                {country === "FRANCE" ? (
+                  <Field
+                    sx={{ width: "270px" }}
+                    type="select"
+                    label="Type de voie"
+                    selectoptions={streetTypeEnum}
+                    defaultValue={contact?.address?.streetType ?? ""}
+                    error={errors.address?.streetType?.message}
+                    control={control}
+                    name={"address.streetType"}
+                  />
+                ) : (
+                  <Field
+                    sx={{ width: "270px" }}
+                    label="Type de voie"
+                    defaultValue={contact?.address?.streetType ?? ""}
+                    error={errors.address?.streetType?.message}
+                    control={control}
+                    name={"address.streetType"}
+                  />
+                )}
+              </Box>
+            </Row>
+            <Field
+              sx={{ width: "650px" }}
+              label="Libellé de voie"
+              error={errors.address?.streetName?.message}
+              control={control}
+              name={"address.streetName"}
+            />
+            <Field
+              sx={{ width: "650px" }}
+              label="Mention spéciale (BP, TSA ...)"
+              error={errors.address?.specialDistribution?.message}
+              control={control}
+              name={"address.specialDistribution"}
+            />
+            <Row gap={2} alignItems={"flex-start"}>
+              <Field
+                sx={{ width: "180px" }}
+                label="Commune"
+                error={errors.address?.cityName?.message}
+                control={control}
+                name={"address.cityName"}
+              />
+              <Field
+                sx={{ width: "120px" }}
+                label="Code postal"
+                error={errors.address?.zipCode?.message}
+                control={control}
+                name={"address.zipCode"}
+              />
+
+              <Field
+                sx={{ width: "180px" }}
+                label="Bureau distributeur"
+                error={errors.address?.cedexName?.message}
+                control={control}
+                name={"address.cedexName"}
+              />
+              <Field
+                sx={{ width: "120px" }}
+                label="Code cedex"
+                error={errors.address?.cedexCode?.message}
+                control={control}
+                name={"address.cedexCode"}
+              />
+            </Row>
+          </Stack>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/ui/Contact/CreateContact/InformationsForm.tsx b/src/ui/Contact/CreateContact/InformationsForm.tsx
index 77e5c14..b0109ca 100644
--- a/src/ui/Contact/CreateContact/InformationsForm.tsx
+++ b/src/ui/Contact/CreateContact/InformationsForm.tsx
@@ -1,22 +1,63 @@
-import { Stack } from "@mui/material";
+import { Box, Button, Divider, Stack } from "@mui/material";
 import Typography from "@mui/material/Typography";
-import { UseFormRegister, UseFormReturn } from "react-hook-form";
-import { Schema, z } from "zod";
-import { FormContent } from "../ContactFormDialog";
+import { ContactInformationForm, schema, styles } from "../ContactFormDialog";
+import { useForm } from "../../../hooks/useForm";
+import { Row } from "../../Row";
+
+import { APISchemas } from "../../../types/api";
+import { AddressFormFields } from "../../Form/AddressFormFields";
 
 type Props = {
-  errors: any;
-  register: UseFormRegister<z.TypeOf<Schema>>;
-  control?: UseFormReturn<any, any, any>["control"];
+  handleSubmitStep: (data: any) => void;
+  handleBack: () => void;
+  contact?: Omit<APISchemas["ContactFirstLoginDto"], "identifier">;
 };
 
-export const InformationsForm = ({ errors, register, control }: Props) => {
+export const InformationsForm = ({ handleSubmitStep, handleBack, contact }: Props) => {
+  const defaultValues =
+    contact?.address?.countryName && contact.address.countryName !== ""
+      ? contact
+      : { ...contact, address: { ...contact?.address, countryName: "FRANCE" } };
+
+  const { register, control, errors, handleSubmit } = useForm(schema, {
+    defaultValues: defaultValues,
+  });
+
+  const onSubmit = handleSubmit(data => {
+    handleSubmitStep(data);
+  });
+
   return (
     <Stack>
       <Typography sx={{ pb: 3 }} variant="titleMedium" fontSize={18}>
         Informations du contact
       </Typography>
-      <FormContent errors={errors} register={register} control={control} />
+      <form action="#" onSubmit={onSubmit}>
+        <Box sx={styles.Grid}>
+          <ContactInformationForm errors={errors} register={register} control={control} />
+          <Divider orientation="vertical" variant="middle" />
+          <Box component={"div"} pt={0}>
+            <AddressFormFields
+              type={"contact"}
+              errors={errors}
+              register={register}
+              repetitionIndexValue={contact?.address?.repetitionIndex ?? ""}
+              streetTypeValue={contact?.address?.streetType ?? ""}
+              countryValue={contact?.address?.countryName ?? "FRANCE"}
+            />
+          </Box>
+        </Box>
+
+        <Row p={4} justifyContent={"flex-end"}>
+          <Button disabled={true} variant={"outlined"} onClick={handleBack} sx={{ mr: 1 }}>
+            Annuler
+          </Button>
+
+          <Button variant="contained" type="submit">
+            Suivant
+          </Button>
+        </Row>
+      </form>
     </Stack>
   );
 };
diff --git a/src/ui/Contact/CreateContact/RightsManagementForm.tsx b/src/ui/Contact/CreateContact/RightsManagementForm.tsx
index 610548b..56b5008 100644
--- a/src/ui/Contact/CreateContact/RightsManagementForm.tsx
+++ b/src/ui/Contact/CreateContact/RightsManagementForm.tsx
@@ -2,9 +2,14 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { Row } from "../../Row";
-import { InputLabel, TextField } from "@mui/material";
+import { Button, InputLabel, TextField } from "@mui/material";
 
-export const RightsManagementForm = () => {
+type Props = {
+  handleSubmitStep: (event: React.FormEvent<HTMLFormElement>) => void;
+  handleBack: () => void;
+};
+
+export const RightsManagementForm = ({ handleSubmitStep, handleBack }: Props) => {
   return (
     <Stack>
       <Typography sx={{ pb: 3 }} variant="titleMedium" fontSize={18}>
@@ -17,7 +22,7 @@ export const RightsManagementForm = () => {
           période est nécessaire pour l’ajout de droits
         </Typography>
       </Row>
-      <form action="#">
+      <form action="#" onSubmit={handleSubmitStep}>
         <Stack gap={2} pt={5}>
           <Row gap={3}>
             <InputLabel
@@ -65,6 +70,15 @@ export const RightsManagementForm = () => {
             <TextField sx={{ width: "300px" }} id="period" variant="outlined" size="small" />
           </Row>
         </Stack>
+        <Row pt={4} justifyContent={"flex-end"}>
+          <Button variant={"outlined"} onClick={handleBack} sx={{ mr: 1 }}>
+            Annuler
+          </Button>
+
+          <Button variant="contained" type="submit">
+            Suivant
+          </Button>
+        </Row>
       </form>
     </Stack>
   );
diff --git a/src/ui/Form/AddressFormFields.tsx b/src/ui/Form/AddressFormFields.tsx
index 6607055..1b6e687 100644
--- a/src/ui/Form/AddressFormFields.tsx
+++ b/src/ui/Form/AddressFormFields.tsx
@@ -33,7 +33,7 @@ export const AddressFormFields = ({
   countryValue,
   type = "surveyUnit",
 }: Props) => {
-  const [country, setCountry] = useState(countryValue);
+  const [country, setCountry] = useState(countryValue ?? "FRANCE");
 
   return (
     <Box sx={styles.Grid}>
diff --git a/src/ui/Form/Field.tsx b/src/ui/Form/Field.tsx
index 03ad722..a980472 100644
--- a/src/ui/Form/Field.tsx
+++ b/src/ui/Form/Field.tsx
@@ -122,7 +122,49 @@ export function uncontrolledField(props: Props, ref: any) {
   );
 }
 
-export function controlledField({ type, name, options, error }: Props, field: any) {
+export function controlledField(
+  { type, name, options, error, label, selectoptions }: Props,
+  field: any,
+) {
+  if (!type || type === "text") {
+    return (
+      <TextField
+        fullWidth
+        {...field}
+        InputLabelProps={{ shrink: !!field.value }}
+        label={label}
+        error={!!error}
+        helperText={error}
+        size="small"
+      />
+    );
+  }
+  if (type === "select" && selectoptions) {
+    const labelId = `label-${name}`;
+
+    return (
+      <FormControl fullWidth>
+        <InputLabel size="small" id={labelId}>
+          {label}
+        </InputLabel>
+        <Select
+          fullWidth
+          {...field}
+          labelId={labelId}
+          id={`select-${name}`}
+          error={!!error}
+          size="small"
+          displayEmpty
+        >
+          {(selectoptions ?? []).map(option => (
+            <MenuItem key={option} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  }
   if (type === "switch") {
     return <Switch checked={field.value} color="green" {...field} />;
   }
diff --git a/src/ui/SurveyUnit/SurveyUnitContacts.tsx b/src/ui/SurveyUnit/SurveyUnitContacts.tsx
index cd35a4a..56dc9f2 100644
--- a/src/ui/SurveyUnit/SurveyUnitContacts.tsx
+++ b/src/ui/SurveyUnit/SurveyUnitContacts.tsx
@@ -25,6 +25,7 @@ import SearchIcon from "@mui/icons-material/Search";
 import useToggle from "react-use/lib/useToggle";
 import { useDebouncedState } from "../../hooks/useDebouncedState";
 import { Link } from "../Link";
+import { CreateContactDialog } from "../Contact/CreateContact/CreateContactDialog";
 
 type Props = {
   surveyUnit: APISchemas["SurveyUnitDto"];
@@ -33,6 +34,7 @@ type Props = {
 export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
   const [search, setSearch] = useDebouncedState("", 500);
   const [isFilteredOpened, toggle] = useToggle(false);
+  const [hasDialog, toggleDialog] = useToggle(false);
 
   const { data: contacts, isLoading } = useFetchQuery("/api/survey-units/{id}/contacts", {
     urlParams: {
@@ -114,15 +116,15 @@ export const SurveyUnitContacts = ({ surveyUnit }: Props) => {
           typography: "titleSmall",
           fontWeight: "500",
         }}
+        onClick={toggleDialog}
         size="large"
         fullWidth={false}
         variant="contained"
         endIcon={<EditIcon />}
       >
-        <Link to={"/contacts/createContact"} color="inherit" underline="none">
-          Créer un nouveau contact
-        </Link>
+        Créer un nouveau contact
       </Button>
+      <CreateContactDialog open={hasDialog} onClose={toggleDialog} surveyUnit={surveyUnit} />
     </Box>
   );
 };
diff --git a/src/ui/SurveyUnit/SurveyUnitFormDialog.tsx b/src/ui/SurveyUnit/SurveyUnitFormDialog.tsx
index b8245bb..0bc89bf 100644
--- a/src/ui/SurveyUnit/SurveyUnitFormDialog.tsx
+++ b/src/ui/SurveyUnit/SurveyUnitFormDialog.tsx
@@ -23,7 +23,7 @@ const schema = z.object({
 export const SurveyUnitFormDialog = ({ open, onClose, surveyUnit, onSave }: Props) => {
   const defaultValues = surveyUnit.address?.countryName
     ? surveyUnit
-    : { ...surveyUnit, address: { ...surveyUnit.address, countryName: "France" } };
+    : { ...surveyUnit, address: { ...surveyUnit.address, countryName: "FRANCE" } };
   const { register, errors, handleSubmit } = useForm(schema, {
     defaultValues: defaultValues,
   });