add stepper

src/pages/CreateContactPage.tsx

@@ -1,3 +1,85 @@
+import Stack from "@mui/material/Stack";
+import { useForm } from "../hooks/useForm";
+import { schema } from "../ui/Contact/ContactFormDialog";
+import { useRef, 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 } from "@mui/material";
+import { InformationsForm } from "../ui/Contact/CreateContact/InformationsForm";
+import { AddressForm } from "../ui/Contact/CreateContact/AddressForm";
+import { RightsManagementForm } from "../ui/Contact/CreateContact/RightsManagementForm";
+
+const steps = ["Informations du contact", "Adresse du contact", "Gestion des droits"];
+
 export const CreateContactPage = () => {
-  return <>Page create contact</>;
+  const { register, control, errors } = useForm(schema);
+  const [activeStep, setActiveStep] = useState(0);
+
+  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 handleNext = () => {
+    setActiveStep(prevActiveStep => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep(prevActiveStep => prevActiveStep - 1);
+  };
+
+  const handleSubmitStep = async (event: React.FormEvent<HTMLFormElement>) => {
+    onSubmitStep(event);
+    handleNext();
+  };
+
+  return (
+    <Stack>
+      <Divider variant="fullWidth" />
+      <Stack>
+        <Row spacing={1} px={6} py={4} bgcolor={"white"}>
+          <Row spacing={2} color={"black.main"}>
+            <PersonAddAltOutlinedIcon fontSize="headerNewContact" />
+            <Typography typography={"titleLarge"} fontWeight={700}>
+              Nouveau contact
+            </Typography>
+          </Row>
+          <Stepper activeStep={activeStep}>
+            {steps.map(label => {
+              return (
+                <Step key={label}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              );
+            })}
+          </Stepper>
+        </Row>
+
+        <Stack>
+          <form action="#" onSubmit={handleSubmitStep}>
+            {activeStep === 0 && (
+              <InformationsForm errors={errors} register={register} control={control} />
+            )}
+            {activeStep === 1 && <AddressForm errors={errors} register={register} />}
+            {activeStep === 2 && <RightsManagementForm />}
+            <Row>
+              <Button color="inherit" disabled={activeStep === 0} onClick={handleBack} sx={{ mr: 1 }}>
+                Annuler
+              </Button>
+
+              <Button type="submit">Suivant</Button>
+            </Row>
+          </form>
+        </Stack>
+      </Stack>
+    </Stack>
+  );
 };

src/theme.tsx

@@ -100,6 +100,7 @@ declare module "@mui/material/InputBase" {
 declare module "@mui/material/SvgIcon" {
   interface SvgIconPropsSizeOverrides {
     cardMedia: true;
+    headerNewContact: true;
     tabTitle: true;
     headerSinglePage: true;
     cardTitle: true;
@@ -280,6 +281,12 @@ export const theme = createTheme({
             fontSize: 60,
           },
         },
+        {
+          props: { fontSize: "headerNewContact" },
+          style: {
+            fontSize: 40,
+          },
+        },
         {
           props: { fontSize: "tabTitle" },
           style: {

src/ui/Contact/ContactFormDialog.tsx

@@ -52,7 +52,7 @@ export const addressSchema = z
   })
   .optional();
 
-const schema = z.object({
+export const schema = z.object({
   civility: z.enum(["Female", "Male", "Undefined"]),
   lastName: z.string().min(3),
   firstName: z.string().min(3),

src/ui/Contact/CreateContact/AddressForm.tsx

@@ -0,0 +1,115 @@
+import { Box, Checkbox, FormControlLabel } from "@mui/material";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { UseFormRegister } from "react-hook-form";
+import { Schema, z } from "zod";
+import { Field } from "../../Form/Field";
+import { repetitionIndexEnum, streetTypeEnum, styles } from "../ContactFormDialog";
+import { countries } from "../../../constants/countries";
+import { Row } from "../../Row";
+
+type Props = {
+  errors: any;
+  register: UseFormRegister<z.TypeOf<Schema>>;
+};
+
+export const AddressForm = ({ errors, register }: Props) => {
+  const onCheck = () => {};
+  return (
+    <Stack>
+      <Typography sx={{ mt: 2, mb: 1 }}>Adresse du contact</Typography>
+
+      <FormControlLabel
+        control={<Checkbox defaultChecked={false} />}
+        onChange={onCheck}
+        label="L’adresse du contact est identique à l’adresse de l’unité enquêtée"
+      />
+      <Box sx={styles.Grid}>
+        <Stack gap={4} pt={1}>
+          <Field
+            label="Raison sociale"
+            error={errors.identificationName?.message}
+            {...register("identificationName")}
+          />
+          <Row gap={2}>
+            <Field
+              sx={{ width: "100px" }}
+              label="N° de voie"
+              error={errors.address?.streetNumber?.message}
+              {...register("address.streetNumber")}
+            />
+            <Box sx={{ width: "200px" }}>
+              <Field
+                type="select"
+                selectoptions={repetitionIndexEnum}
+                defaultValue={""}
+                label="Indice de répétition"
+                error={errors.address?.repetitionIndex?.message}
+                {...register("address.repetitionIndex")}
+              />
+            </Box>
+          </Row>
+          <Field
+            type="select"
+            label="Type de voie"
+            selectoptions={streetTypeEnum}
+            defaultValue={""}
+            error={errors.address?.streetType?.message}
+            {...register("address.streetType")}
+          />
+          <Field
+            label="Libellé de voie"
+            error={errors.address?.streetName?.message}
+            {...register("address.streetName")}
+          />
+          <Field
+            label="Complément (ZI, Bat, Res ...)"
+            error={errors.address?.addressSupplement?.message}
+            {...register("address.addressSupplement")}
+          />
+          <Field
+            label="Mention spéciale (BP, TSA ...)"
+            error={errors.address?.specialDistribution?.message}
+            {...register("address.specialDistribution")}
+          />
+        </Stack>
+        <Stack gap={4} pt={1}>
+          <Field
+            sx={{ width: "210px" }}
+            label="Commune"
+            error={errors.address?.cityName?.message}
+            {...register("address.cityName")}
+          />
+          <Field
+            sx={{ width: "120px" }}
+            label="Code postal"
+            error={errors.address?.zipCode?.message}
+            {...register("address.zipCode")}
+          />
+          <Field
+            sx={{ width: "210px" }}
+            label="Bureau distributeur"
+            error={errors.address?.deliveryOffice?.message}
+            {...register("address.deliveryOffice")}
+          />
+          <Field
+            sx={{ width: "210px" }}
+            label="Code cedex"
+            error={errors.address?.cedexCode?.message}
+            {...register("address.cedexCode")}
+          />
+          <Box sx={{ width: "300px" }}>
+            <Field
+              defaultValue={"FRANCE"}
+              type="select"
+              label="Sélectionnez un pays"
+              selectoptions={countries}
+              error={errors.address?.countryName?.message}
+              {...register("address.countryName")}
+            />
+          </Box>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+};

src/ui/Contact/CreateContact/InformationsForm.tsx

@@ -0,0 +1,44 @@
+import { FormGroup, Stack } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import { Field } from "../../Form/Field";
+import { UseFormRegister, UseFormReturn } from "react-hook-form";
+import { Schema, z } from "zod";
+
+type Props = {
+  errors: any;
+  register: UseFormRegister<z.TypeOf<Schema>>;
+  control?: UseFormReturn<any, any, any>["control"];
+};
+
+const civilities = [
+  { label: "Madame", value: "Female" },
+  { label: "Monsieur", value: "Male" },
+];
+
+export const InformationsForm = ({ errors, register, control }: Props) => {
+  return (
+    <Stack>
+      <Typography sx={{ mt: 2, mb: 1 }}>Informations du contact</Typography>
+      <FormGroup>
+        <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")} />
+        <Field
+          sx={{ width: "150px" }}
+          label="Téléphone 1"
+          error={errors.phone?.message}
+          {...register("phone")}
+        />
+      </FormGroup>
+    </Stack>
+  );
+};

src/ui/Contact/CreateContact/RightsManagementForm.tsx

@@ -0,0 +1,5 @@
+import Typography from "@mui/material/Typography";
+
+export const RightsManagementForm = () => {
+  return <Typography sx={{ mt: 2, mb: 1 }}>Ajouter des droits</Typography>;
+};

src/ui/Form/AddressFormFields.tsx

@@ -49,7 +49,7 @@ export const AddressFormFields = ({
             <Field
               type="select"
               selectoptions={repetitionIndexEnum}
-              defaultValue={repetitionIndexValue}
+              defaultValue={repetitionIndexValue ?? ""}
               label="Indice de répétition"
               error={errors.address?.repetitionIndex?.message}
               {...register("address.repetitionIndex")}
@@ -60,7 +60,7 @@ export const AddressFormFields = ({
           type="select"
           label="Type de voie"
           selectoptions={streetTypeEnum}
-          defaultValue={streetTypeValue}
+          defaultValue={streetTypeValue ?? ""}
           error={errors.address?.streetType?.message}
           {...register("address.streetType")}
         />