✨ beginning create folder

src/front/Components/DesignSystem/Button/classes.module.scss

@@ -53,7 +53,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			border-color: var(--button-outlined-primary-default-border);
 
 			svg {
@@ -81,7 +81,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-primary-default-contrast);
 			}
@@ -136,7 +136,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-secondary-default-contrast);
 			}
@@ -161,7 +161,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-secondary-default-contrast);
 			}
@@ -215,7 +215,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-neutral-default-contrast);
 			}
@@ -240,7 +240,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-neutral-default-contrast);
 			}
@@ -294,7 +294,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-error-default-contrast);
 			}
@@ -320,7 +320,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-error-default-contrast);
 			}
@@ -376,7 +376,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-warning-default-contrast);
 			}
@@ -403,7 +403,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-warning-default-contrast);
 			}
@@ -459,7 +459,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-success-default-contrast);
 			}
@@ -486,7 +486,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-success-default-contrast);
 			}
@@ -542,7 +542,7 @@
 			}
 		}
 
-		&[styleType="outlined"] {
+		&[styletype="outlined"] {
 			svg {
 				stroke: var(--button-outlined-info-default-contrast);
 			}
@@ -568,7 +568,7 @@
 			}
 		}
 
-		&[styleType="text"] {
+		&[styletype="text"] {
 			svg {
 				stroke: var(--button-text-info-default-contrast);
 			}
@@ -621,15 +621,15 @@
 	/**
 	 * Every possible style types
 	*/
-	&[styleType="contained"] {
+	&[styletype="contained"] {
 		color: var(--color-generic-white);
 	}
 
-	&[styleType="outlined"] {
+	&[styletype="outlined"] {
 		background: transparent;
 	}
 
-	&[styleType="text"] {
+	&[styletype="text"] {
 		background: transparent;
 		border: none;
 		border-bottom: 1px solid;

src/front/Components/DesignSystem/Button/index.tsx

@@ -19,7 +19,7 @@ export enum EButtonSize {
 	SM = "sm",
 }
 
-export enum EButtonStyleType {
+export enum EButtonstyletype {
 	CONTAINED = "contained",
 	OUTLINED = "outlined",
 	TEXT = "text",
@@ -30,7 +30,7 @@ type IProps = {
 	children?: React.ReactNode;
 	variant?: EButtonVariant;
 	size?: EButtonSize;
-	styleType?: EButtonStyleType;
+	styletype?: EButtonstyletype;
 	fullwidth?: boolean;
 	leftIcon?: React.ReactNode;
 	rightIcon?: React.ReactNode;
@@ -44,7 +44,7 @@ export default function Button(props: IProps) {
 	let {
 		variant = EButtonVariant.PRIMARY,
 		size = EButtonSize.LG,
-		styleType = EButtonStyleType.CONTAINED,
+		styletype = EButtonstyletype.CONTAINED,
 		disabled = false,
 		type = "button",
 		isLoading = false,
@@ -59,7 +59,7 @@ export default function Button(props: IProps) {
 	const fullwidthattr = fullwidth.toString();
 	const isloadingattr = isLoading.toString();
 
-	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styleType };
+	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr, sizing: size, styletype };
 	delete attributes.fullwidth;
 	delete attributes.leftIcon;
 	delete attributes.rightIcon;

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -5,7 +5,7 @@ import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 import React from "react";
 
-import Button, { EButtonStyleType, EButtonVariant } from "../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../Button";
 import Tooltip from "../ToolTip";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 import classes from "./classes.module.scss";
@@ -192,7 +192,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						<div className={classes["bottom-container"]}>
 							<Button
 								variant={EButtonVariant.PRIMARY}
-								styleType={EButtonStyleType.TEXT}
+								styletype={EButtonstyletype.TEXT}
 								className={classes["add-button"]}
 								onClick={this.addDocument}>
 								<Typography
@@ -296,7 +296,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
 								variant={EButtonVariant.PRIMARY}
-								styleType={EButtonStyleType.TEXT}
+								styletype={EButtonstyletype.TEXT}
 								className={classes["refused-button"]}
 								onClick={() => this.showRefusedReason(history.refused_reason ?? "")}>
 								Voir le motif de refus

src/front/Components/DesignSystem/DepositOtherDocument/index.tsx

@@ -12,7 +12,7 @@ import { Document } from "le-coffre-resources/dist/Customer";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 
-import Button, { EButtonStyleType, EButtonVariant } from "../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../Button";
 import Confirm from "../OldModal/Confirm";
 import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
@@ -156,7 +156,7 @@ export default class DepositOtherDocument extends React.Component<IProps, IState
 								<div className={classes["bottom-container"]}>
 									<Button
 										variant={EButtonVariant.PRIMARY}
-										styleType={EButtonStyleType.TEXT}
+										styletype={EButtonstyletype.TEXT}
 										className={classes["add-button"]}
 										onClick={this.addDocument}>
 										<Typography

src/front/Components/DesignSystem/DepositRib/index.tsx

@@ -6,7 +6,7 @@ import CrossIcon from "@Assets/Icons/cross.svg";
 import DocumentCheckIcon from "@Assets/Icons/document-check.svg";
 import Image from "next/image";
 
-import Button, { EButtonStyleType, EButtonVariant } from "../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../Button";
 import Typography, { ETypo, ETypoColor } from "../Typography";
 
 type IProps = {
@@ -162,7 +162,7 @@ export default class DepositRib extends React.Component<IProps, IState> {
 					<div className={classes["bottom-container"]}>
 						<Button
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.TEXT}
+							styletype={EButtonstyletype.TEXT}
 							className={classes["add-button"]}
 							onClick={() => this.fileInput!.click()}>
 							<Typography

src/front/Components/DesignSystem/Modal/index.tsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import classes from "./classes.module.scss";
-import Button, { EButtonStyleType, EButtonVariant } from "../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../Button";
 import React from "react";
 import Typography, { ETypo } from "../Typography";
 
@@ -46,7 +46,7 @@ export default function Modal(props: IProps) {
 				)}>
 				<div className={classes["header"]}>
 					{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
-					<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon/>}/>
+					<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon />} />
 				</div>
 
 				<div className={classNames(classes["children"], className)}>{children}</div>
@@ -55,7 +55,7 @@ export default function Modal(props: IProps) {
 					{firstButton && (
 						<Button
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.OUTLINED}
+							styletype={EButtonstyletype.OUTLINED}
 							leftIcon={firstButton.leftIcon}
 							rightIcon={firstButton.rightIcon}
 							onClick={firstButton.onClick}>
@@ -65,7 +65,7 @@ export default function Modal(props: IProps) {
 					{secondButton && (
 						<Button
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.CONTAINED}
+							styletype={EButtonstyletype.CONTAINED}
 							leftIcon={secondButton.leftIcon}
 							rightIcon={secondButton.rightIcon}
 							onClick={secondButton.onClick}>

src/front/Components/DesignSystem/OldModal/Confirm/index.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import React from "react";
 
 import OldModal, { IProps as IPropsModal } from "..";
-import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
 type IProps = IPropsModal & {
@@ -47,7 +47,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 				{this.props.showCancelButton &&
 					(this.props.cancelPath ? (
 						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
-							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.props.onClose}>
+							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={this.props.onClose}>
 								{this.props.cancelText}
 							</Button>
 						</Link>
@@ -55,7 +55,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 						<div className={classes["sub-container"]}>
 							<Button
 								variant={EButtonVariant.PRIMARY}
-								styleType={EButtonStyleType.OUTLINED}
+								styletype={EButtonstyletype.OUTLINED}
 								onClick={this.props.onClose}
 								className={classes["sub-container"]}>
 								{this.props.cancelText}

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -10,7 +10,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-import Button, { EButtonStyleType, EButtonVariant } from "../Button";
+import Button, { EButtonstyletype, EButtonVariant } from "../Button";
 import Confirm from "../OldModal/Confirm";
 import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
@@ -138,7 +138,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							{!this.props.isArchived && this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 								<div className={classes["button-container"]}>
 									<Link href={redirectPath}>
-										<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
+										<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
 											Demander des documents
 										</Button>
 									</Link>

src/front/Components/Elements/BackArrow/index.tsx

@@ -1,5 +1,5 @@
 import { ChevronLeftIcon } from "@heroicons/react/24/solid";
-import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
 
@@ -23,7 +23,7 @@ class BackArrowClass extends React.Component<IPropsClass, IState> {
 			<Button
 				leftIcon={<ChevronLeftIcon />}
 				variant={EButtonVariant.PRIMARY}
-				styleType={EButtonStyleType.TEXT}
+				styletype={EButtonstyletype.TEXT}
 				size={EButtonSize.SM}
 				onClick={this.handleClick}>
 				Retour

src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,7 @@ export default class DefaultCollaboratorDashboard extends React.Component<IProps
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultDeedTypeDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DeedTypes, { IGetDeedTypesParams } from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -71,7 +71,7 @@ export default class DefaultDeedTypesDashboard extends React.Component<IProps, I
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -72,7 +72,7 @@ export default class DefaultDocumentTypesDashboard extends React.Component<IProp
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders, { IGetFoldersParams } from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
 import FolderArchivedListContainer from "@Front/Components/DesignSystem/FolderArchivedListContainer";
 import Header from "@Front/Components/DesignSystem/Header";
@@ -88,7 +88,7 @@ export default class DefaultNotaryDashboard extends React.Component<IProps, ISta
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -12,7 +12,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import OfficeListContainer from "./OfficeListContainer";
-import {  ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ChevronLeftIcon } from "@heroicons/react/24/outline";
 
 type IProps = {
 	title: string;
@@ -69,7 +69,7 @@ export default class DefaultOfficeDashboard extends React.Component<IProps, ISta
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultRoleDashboard/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,7 @@ export default class DefaultRoleDashboard extends React.Component<IProps, IState
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx

@@ -1,7 +1,7 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import { ChevronLeftIcon } from "@heroicons/react/20/solid";
 import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import BackArrow from "@Front/Components/Elements/BackArrow";
@@ -69,7 +69,7 @@ export default class DefaultUserDashboard extends React.Component<IProps, IState
 								<Button
 									leftIcon={<ChevronLeftIcon />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.onOpenLeftSide}>
 									{this.props.mobileBackText ?? "Retour"}
 								</Button>

src/front/Components/Layouts/ClientDashboard/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Documents, { IGetDocumentsparams } from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
@@ -225,7 +225,7 @@ export default function ClientDashboard(props: IProps) {
 					</Typography>
 					<Button
 						variant={EButtonVariant.PRIMARY}
-						styleType={EButtonStyleType.OUTLINED}
+						styletype={EButtonstyletype.OUTLINED}
 						className={classes["button"]}
 						onClick={onOpenModalAddDocument}>
 						Ajouter d'autres documents

src/front/Components/Layouts/ClientDashboard/index2.tsx

@@ -1,5 +1,5 @@
 //import Customers from "@Front/Api/LeCoffreApi/Customer/Customers/Customers";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import DepositDocument from "@Front/Components/DesignSystem/DepositDocument";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
@@ -47,7 +47,7 @@ export default class ClientDashboard extends Base<IProps, IState> {
 						</Typography>
 						<Button
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.OUTLINED}
+							styletype={EButtonstyletype.OUTLINED}
 							className={classes["button"]}
 							onClick={this.onOpenModalAddDocument}>
 							Ajouter d'autres documents

src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx

@@ -2,7 +2,7 @@ import { ChevronLeftIcon } from "@heroicons/react/24/solid";
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import Users from "@Front/Api/LeCoffreApi/Admin/Users/Users";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
@@ -193,7 +193,7 @@ export default function CollaboratorInformations(props: IProps) {
 						<Typography typo={ETypo.TEXT_LG_SEMIBOLD}>Modifier le rôle</Typography>
 						<div className={classes["gestion-role"]}>
 							<Link href={Module.getInstance().get().modules.pages.Roles.props.path}>
-								<Button leftIcon={<ChevronLeftIcon />} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+								<Button leftIcon={<ChevronLeftIcon />} variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 									Gestion des rôles
 								</Button>
 							</Link>

src/front/Components/Layouts/DeedTypes/DeedTypesCreate/index.tsx

@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -101,7 +101,7 @@ export default function DeedTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Créer le type d'acte</Button>

src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx

@@ -1,5 +1,5 @@
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -119,7 +119,7 @@ export default function DeedTypesEdit() {
 						validationError={validationError.find((error) => error.property === "description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={onCancel}>
 							Annuler
 						</Button>
 						<Button type="submit">Enregistrer</Button>

src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx

@@ -2,7 +2,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PenICon from "@Assets/Icons/pen.svg";
 import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
@@ -123,7 +123,7 @@ export default function DeedTypesInformations(props: IProps) {
 				<div className={classes["header"]}>
 					<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DocumentTypes.props.path}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 							Modifier la liste des documents
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>
@@ -174,7 +174,7 @@ export default function DeedTypesInformations(props: IProps) {
 					</Form>
 				</div>
 				<div className={classes["delete-container"]}>
-					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={openDeleteModal}>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={openDeleteModal}>
 						Supprimer
 					</Button>
 				</div>

src/front/Components/Layouts/DesignSystem/index.tsx

@@ -1,4 +1,4 @@
-import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
 import Newsletter from "@Front/Components/DesignSystem/Newsletter";
 import Table from "@Front/Components/DesignSystem/Table";
@@ -156,14 +156,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Primary
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.PRIMARY}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Primary
 						</Button>
 					</div>
@@ -175,14 +175,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Secondary
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SECONDARY}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Secondary
 						</Button>
 					</div>
@@ -194,14 +194,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Neutral
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.NEUTRAL}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Neutral
 						</Button>
 					</div>
@@ -213,14 +213,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Error
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.ERROR}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Error
 						</Button>
 					</div>
@@ -232,14 +232,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Warning
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.WARNING}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Warning
 						</Button>
 					</div>
@@ -251,14 +251,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Success
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.SUCCESS}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Success
 						</Button>
 					</div>
@@ -270,14 +270,14 @@ export default function DesignSystem() {
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styleType={EButtonStyleType.OUTLINED}>
+							styletype={EButtonstyletype.OUTLINED}>
 							Info
 						</Button>
 						<Button
 							leftIcon={<ArrowLongLeftIcon />}
 							rightIcon={<ArrowLongRightIcon />}
 							variant={EButtonVariant.INFO}
-							styleType={EButtonStyleType.TEXT}>
+							styletype={EButtonstyletype.TEXT}>
 							Info
 						</Button>
 					</div>

src/front/Components/Layouts/DocumentTypes/DocumentTypesCreate/index.tsx

@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -71,7 +71,7 @@ export default function DocumentTypesCreate(props: IProps) {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 							Annuler
 						</Button>
 						<Button type="submit">Créer le document</Button>

src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx

@@ -1,5 +1,5 @@
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -91,7 +91,7 @@ export default function DocumentTypesEdit() {
 						validationError={validationError.find((error) => error.property === "public_description")}
 					/>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 							Annuler
 						</Button>
 						<Button type="submit">Enregistrer</Button>

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx

@@ -11,7 +11,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 
 export default function DocumentTypesInformations() {
 	const router = useRouter();
@@ -38,7 +38,7 @@ export default function DocumentTypesInformations() {
 				<div className={classes["header"]}>
 					<Typography typo={ETypo.TITLE_H1}>Paramétrage des listes de pièces</Typography>
 					<Link href={Module.getInstance().get().modules.pages.DeedTypes.props.path}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 							Retour au paramétrage des types d'actes
 							<Image src={ChevronIcon} alt="Chevron" />
 						</Button>

src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx

@@ -1,6 +1,6 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -99,7 +99,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+												<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 													Annuler
 												</Button>
 											</Link>
@@ -134,7 +134,7 @@ class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
 										/>
 										<div className={classes["button-container"]}>
 											<Link href={backwardPath} className={classes["cancel-button"]}>
-												<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+												<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 													Annuler
 												</Button>
 											</Link>

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "@heroicons/react/24/outline";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
@@ -77,14 +77,14 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 								<Button
 									rightIcon={<PlusIcon style={{ transform: "rotate(180deg)", width: "22px", height: "22px" }} />}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									onClick={this.openModal}>
 									Ajouter un document
 								</Button>
 							</div>
 							<div className={classes["buttons-container"]}>
 								<a href={backUrl}>
-									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={this.cancel}>
+									<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={this.cancel}>
 										Annuler
 									</Button>
 								</a>

src/front/Components/Layouts/Folder/CreateCustomerNote/index.tsx

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
@@ -63,7 +63,7 @@ class CreateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -13,320 +13,172 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import { ValidationError } from "class-validator/types/validation/ValidationError";
-import { Deed, DeedType, Office, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { Deed, Office, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import User from "le-coffre-resources/dist/Notary";
-import { NextRouter, useRouter } from "next/router";
+import { useRouter } from "next/router";
-import React from "react";
+import React, { useEffect, useState } from "react";
-import { ActionMeta, MultiValue } from "react-select";
 
-import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import JwtService from "@Front/Services/JwtService/JwtService";
+import { DeedType } from "le-coffre-resources/dist/Notary";
 
-type IFormValues = {
+export default function CreateFolder(): JSX.Element {
-	folder_number: string;
+	/**
-	entitled: string;
+	 * State
-	act_typ: IOption | null;
+	 */
-	personal_note: string;
+	const [folderAccess, setFolderAccess] = useState<"whole_office" | "select_collaborators">("whole_office");
-	collaborators: MultiValue<IOption>;
+	const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]);
-};
+	const [collaborators, setCollaborators] = useState<User[]>([]);
+	const [validationError, setValidationError] = useState<ValidationError[]>([]);
 
-type IProps = {};
+	/**
+	 * Hooks call
+	 */
+	const router = useRouter();
 
-type IPropsClass = IProps & {
+	/**
-	router: NextRouter;
+	 * Callbacks
-};
+	 */
 
-type IState = {
+	const onFormSubmit = async (
-	folder_access: string;
-	formValues: IFormValues;
-	deedTypes: DeedType[];
-	deedTypesOptions: IOption[];
-	collaborators: User[];
-	collaboratorsOptions: IOption[];
-	validationError: ValidationError[];
-};
-class CreateFolderClass extends BasePage<IPropsClass, IState> {
-	public constructor(props: IPropsClass) {
-		super(props);
-
-		this.state = {
-			folder_access: "select_collaborators",
-			formValues: {
-				folder_number: "",
-				entitled: "",
-				act_typ: null,
-				personal_note: "",
-				collaborators: [],
-			},
-			deedTypes: [],
-			deedTypesOptions: [],
-			collaborators: [],
-			collaboratorsOptions: [],
-			validationError: [],
-		};
-
-		this.radioOnChange = this.radioOnChange.bind(this);
-		this.onFolderNumberChange = this.onFolderNumberChange.bind(this);
-		this.onEntitleChange = this.onEntitleChange.bind(this);
-		this.onActTypeChange = this.onActTypeChange.bind(this);
-		this.onPersonalNoteChange = this.onPersonalNoteChange.bind(this);
-		this.onCollaboratorsChange = this.onCollaboratorsChange.bind(this);
-		this.isFormSubmittable = this.isFormSubmittable.bind(this);
-		this.onFormSubmit = this.onFormSubmit.bind(this);
-		this.renderSelectCollaborators = this.renderSelectCollaborators.bind(this);
-	}
-
-	public override render(): JSX.Element {
-		return (
-			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
-				<div className={classes["root"]}>
-					<BackArrow />
-					<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
-						Créer un dossier
-					</Typography>
-					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
-						Informations dossier
-					</Typography>
-					<Form onSubmit={this.onFormSubmit}>
-						<div className={classes["form-container"]}>
-							<TextField
-								name="folder_number"
-								placeholder="Numéro de dossier"
-								onChange={this.onFolderNumberChange}
-								validationError={this.state.validationError.find((error) => error.property === "folder_number")}
-							/>
-							<TextField
-								name="name"
-								placeholder="Intitulé"
-								onChange={this.onEntitleChange}
-								validationError={this.state.validationError.find((error) => error.property === "name")}
-							/>
-							<SelectField
-								options={this.state.deedTypesOptions}
-								name="deed"
-								placeholder={"Type d'acte"}
-								onChange={this.onActTypeChange}
-								errors={this.state.validationError.find((error) => error.property === "deed")}
-							/>
-							<TextAreaField
-								name="description"
-								placeholder="Note du dossier"
-								onChange={this.onPersonalNoteChange}
-								validationError={this.state.validationError.find((error) => error.property === "description")}
-								required={false}
-							/>
-
-							<div className={classes["access-container"]}>
-								<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
-									Accès au dossier
-								</Typography>
-								<div className={classes["radio-container"]}>
-									<RadioBox name="file_access" onChange={this.radioOnChange} value="whole_office">
-										Sélectionner tout l'office
-									</RadioBox>
-									<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="select_collaborators">
-										Sélectionner certains collaborateurs
-									</RadioBox>
-								</div>
-								{this.renderSelectCollaborators()}
-								<div className={classes["buttons-container"]}>
-									<Button fullwidth type="submit">
-										Créer un dossier
-									</Button>
-								</div>
-							</div>
-						</div>
-					</Form>
-				</div>
-			</DefaultDoubleSidePage>
-		);
-	}
-
-	public override async componentDidMount() {
-		const deedTypes = await DeedTypes.getInstance().get();
-		// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
-		const collaborators = await Users.getInstance().get({
-			include: { contact: true },
-		});
-
-		const collaboratorsOptions = this.mapUsersOptions(collaborators);
-
-		this.setState({
-			deedTypes,
-			deedTypesOptions: this.mapDeedOptions(deedTypes),
-			collaborators,
-			collaboratorsOptions: collaboratorsOptions,
-		});
-
-		const userId = JwtService.getInstance().decodeJwt()?.userId;
-
-		const currentCollaborator = collaboratorsOptions.find(({ value }) => value === userId);
-		if (!currentCollaborator) return;
-
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				collaborators: [{ label: currentCollaborator.label, value: currentCollaborator.value }],
-			},
-		});
-	}
-
-	private mapDeedOptions(deedTypes: DeedType[]) {
-		return deedTypes.map((deedType) => ({
-			label: deedType.name,
-			value: deedType.uid,
-		})) as IOption[];
-	}
-
-	private mapUsersOptions(collaborators: User[]) {
-		return collaborators.map((collaborator) => ({
-			label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name),
-			value: collaborator.uid,
-		})) as IOption[];
-	}
-
-	private onFolderNumberChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				folder_number: e.target.value,
-			},
-		});
-	}
-
-	private onEntitleChange(e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				entitled: e.target.value,
-			},
-		});
-	}
-
-	private onActTypeChange(selectedOption: IOption) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				act_typ: selectedOption,
-			},
-		});
-	}
-
-	private onPersonalNoteChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				personal_note: e.target.value,
-			},
-		});
-	}
-
-	private onCollaboratorsChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				collaborators: newValue,
-			},
-		});
-	}
-
-	private async onFormSubmit(
 		e: React.FormEvent<HTMLFormElement> | null,
 		values: {
 			[key: string]: any;
 		},
-	) {
+	) => {
+		console.log(values);
 		const officeId = JwtService.getInstance().decodeJwt()?.office_Id;
-		const selectedDeedTypeUid: DeedType | undefined = this.state.deedTypes.find(
-			(deedType) => deedType.uid === this.state.formValues.act_typ?.value,
-		);
 
-		let stakeholders = this.state.collaborators;
-		if (this.state.folder_access === "select_collaborators") {
-			stakeholders = this.state.collaborators.filter((collaborator) => {
-				return this.state.formValues.collaborators?.some((selectedCollaborator) => {
-					return selectedCollaborator.value === collaborator.uid;
-				});
-			});
-		}
 		const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({
 			folder_number: values["folder_number"],
 			name: values["name"],
 			description: values["description"],
 			deed: Deed.hydrate<Deed>({
 				deed_type: DeedType.hydrate<DeedType>({
-					uid: selectedDeedTypeUid?.uid,
+					uid: values["deed"],
 				}),
 			}),
 			office: Office.hydrate<Office>({
 				uid: officeId,
 			}),
 			customers: [],
-			stakeholders,
+			stakeholders: collaborators,
 		});
 
 		try {
 			await officeFolderForm.validateOrReject?.({ groups: ["createFolder"], forbidUnknownValues: true });
 		} catch (validationErrors) {
-			this.setState({
+			setValidationError(validationErrors as ValidationError[]);
-				validationError: validationErrors as ValidationError[],
-			});
 			return;
 		}
 
 		try {
 			const newOfficeFolder = await Folders.getInstance().post(officeFolderForm);
 			if (!newOfficeFolder) return;
-			this.props.router.push(`/folders/${newOfficeFolder.uid}`);
+			router.push(`/folders/${newOfficeFolder.uid}`);
 		} catch (backError) {
 			if (!Array.isArray(backError)) return;
-			this.setState({
+			setValidationError(backError as ValidationError[]);
-				validationError: backError as ValidationError[],
-			});
 			return;
 		}
-	}
+	};
 
-	private renderSelectCollaborators() {
+	const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) =>
-		if (this.state.folder_access !== "select_collaborators") return null;
+		setFolderAccess(e.target.value as "whole_office" | "select_collaborators");
-		return (
+
-			<div className={classes["collaborators-container"]}>
+	/**
-				<MultiSelect
+	 * UseEffect
-					options={this.state.collaboratorsOptions}
+	 */
-					placeholder="Sélectionner les collaborateurs"
+	useEffect(() => {
-					onChange={this.onCollaboratorsChange}
+		DeedTypes.getInstance()
-					defaultValue={this.state.formValues.collaborators ?? []}
+			.get()
-					validationError={this.state.validationError.find((error) => error.property === "stakeholders")}
+			.then((deedTypes) => setAvailableDeedTypes(deedTypes));
-				/>
+		// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
+		Users.getInstance()
+			.get({
+				include: { contact: true },
+			})
+			.then((users) => setCollaborators(users));
+	}, []);
+
+	/**
+	 * Renderer
+	 */
+	return (
+		<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
+			<div className={classes["root"]}>
+				<BackArrow />
+				<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
+					Créer un dossier
+				</Typography>
+				<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
+					Informations dossier
+				</Typography>
+				<Form onSubmit={onFormSubmit}>
+					<div className={classes["form-container"]}>
+						<TextField
+							name="folder_number"
+							placeholder="Numéro de dossier"
+							validationError={validationError.find((error) => error.property === "folder_number")}
+						/>
+						<TextField
+							name="name"
+							placeholder="Intitulé"
+							validationError={validationError.find((error) => error.property === "name")}
+						/>
+						<SelectField
+							options={
+								availableDeedTypes.map((deedType) => ({
+									label: deedType.name,
+									value: deedType.uid,
+								})) as IOption[]
+							}
+							name="deed"
+							placeholder={"Type d'acte"}
+							errors={validationError.find((error) => error.property === "deed")}
+						/>
+						<TextAreaField
+							name="description"
+							placeholder="Note du dossier"
+							validationError={validationError.find((error) => error.property === "description")}
+							required={false}
+						/>
+
+						<div className={classes["access-container"]}>
+							<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
+								Accès au dossier
+							</Typography>
+							<div className={classes["radio-container"]}>
+								<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
+									Sélectionner tout l'office
+								</RadioBox>
+								<RadioBox name="file_access" onChange={radioOnChange} value="select_collaborators">
+									Sélectionner certains collaborateurs
+								</RadioBox>
+							</div>
+							{folderAccess === "select_collaborators" && (
+								<div className={classes["collaborators-container"]}>
+									<MultiSelect
+										options={
+											collaborators.map((collaborator) => ({
+												label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name),
+												value: collaborator.uid,
+											})) as IOption[]
+										}
+										placeholder="Sélectionner les collaborateurs"
+										validationError={validationError.find((error) => error.property === "stakeholders")}
+									/>
+								</div>
+							)}
+							<div className={classes["buttons-container"]}>
+								<Button fullwidth type="submit">
+									Créer un dossier
+								</Button>
+							</div>
+						</div>
+					</div>
+				</Form>
 			</div>
-		);
+		</DefaultDoubleSidePage>
-	}
+	);
-	private isFormSubmittable(): boolean {
-		if (
-			this.state.formValues.entitled === "" ||
-			this.state.formValues.personal_note === "" ||
-			this.state.formValues.folder_number === "" ||
-			this.state.formValues.act_typ === null
-		) {
-			return false;
-		}
-
-		if (this.state.folder_access === "select_collaborators" && this.state.formValues.collaborators.length === 0) {
-			return false;
-		}
-
-		return true;
-	}
-
-	private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
-		this.setState({
-			folder_access: e.target.value,
-		});
-	}
-}
-
-export default function CreateFolder(props: IProps): JSX.Element {
-	const router = useRouter();
-	return <CreateFolderClass {...props} router={router} />;
 }

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -1,5 +1,5 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
@@ -41,7 +41,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
 									Ajouter un client
 								</Button>
 							</Link>
@@ -56,7 +56,7 @@ export default class ClientSection extends React.Component<IProps, IState> {
 						</div>
 						{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
 							<Link href={navigatePath}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<PlusIcon />}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} rightIcon={<PlusIcon />}>
 									Ajouter un client
 								</Button>
 							</Link>

src/front/Components/Layouts/Folder/FolderInformation/index.tsx

@@ -1,7 +1,7 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAnchors/OfficeFolderAnchors";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
@@ -96,7 +96,10 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 											<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>
 										</div>
 										<Link href={redirectPathEditCollaborators}>
-											<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} rightIcon={<ChevronIcon/>}>
+											<Button
+												variant={EButtonVariant.PRIMARY}
+												styletype={EButtonstyletype.TEXT}
+												rightIcon={<ChevronIcon />}>
 												Modifier les collaborateurs
 											</Button>
 										</Link>
@@ -142,7 +145,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["button-container"]}>
 									<Button
 										variant={EButtonVariant.PRIMARY}
-										styleType={EButtonStyleType.OUTLINED}
+										styletype={EButtonstyletype.OUTLINED}
 										onClick={this.openArchivedModal}>
 										Archiver le dossier
 									</Button>

src/front/Components/Layouts/Folder/UpdateClient/index.tsx

@@ -1,5 +1,5 @@
 import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
@@ -130,14 +130,14 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 						<div className={classes["button-container"]}>
 							{!this.doesInputsHaveValues() ? (
 								<Link href={this.backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 										Annuler
 									</Button>
 								</Link>
 							) : (
 								<Button
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.OUTLINED}
+									styletype={EButtonstyletype.OUTLINED}
 									onClick={this.openLeavingModal}
 									className={classes["cancel-button"]}>
 									Annuler

src/front/Components/Layouts/Folder/UpdateCustomerNote/index.tsx

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
@@ -53,7 +53,7 @@ class UpdateCustomerNoteClass extends BasePage<IPropsClass, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={this.state.backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx

@@ -1,6 +1,6 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Users, { IGetUsersParams } from "@Front/Api/LeCoffreApi/Notary/Users/Users";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
@@ -105,7 +105,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 							<div className={classes["button-container"]}>
 								<Link href={backwardPath} className={classes["cancel-button"]}>
-									<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+									<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 										Annuler
 									</Button>
 								</Link>

src/front/Components/Layouts/Folder/UpdateFolderMetadata/index.tsx

@@ -1,5 +1,5 @@
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -120,7 +120,7 @@ export default function UpdateFolderMetadata() {
 
 					<div className={classes["button-container"]}>
 						<Link href={backwardPath} className={classes["cancel-button"]}>
-							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 								Annuler
 							</Button>
 						</Link>

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -1,7 +1,7 @@
 import LeftArrowIcon from "@Assets/Icons/left-arrow.svg";
 import RightArrowIcon from "@Assets/Icons/right-arrow.svg";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -119,7 +119,7 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 									<>
 										<Button
 											variant={EButtonVariant.PRIMARY}
-											styleType={EButtonStyleType.OUTLINED}
+											styletype={EButtonstyletype.OUTLINED}
 											onClick={this.openRefuseModal}>
 											Refuser
 										</Button>

src/front/Components/Layouts/Folder/index.tsx

@@ -1,5 +1,5 @@
 import LogoIcon from "@Assets/logo_small_blue.svg";
-import Button, { EButtonVariant, EButtonStyleType } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant, EButtonstyletype } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { DocumentIcon } from "@heroicons/react/24/outline";
@@ -56,7 +56,7 @@ export default function Folder() {
 						<div className={classes["box"]}>
 							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Besoin d'aide ?</Typography>
 							<Typography typo={ETypo.TEXT_MD_REGULAR}>Consultez nos guides pour bien démarrer.</Typography>
-							<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+							<Button variant={EButtonVariant.WARNING} styletype={EButtonstyletype.TEXT}>
 								Accéder aux guides
 							</Button>
 						</div>
@@ -65,7 +65,7 @@ export default function Folder() {
 						<div className={classes["box"]}>
 							<Typography typo={ETypo.TEXT_MD_SEMIBOLD}>Vous avez des questions ?</Typography>
 							<Typography typo={ETypo.TEXT_MD_REGULAR}>Notre équipe de support est là pour vous aider.</Typography>
-							<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
+							<Button variant={EButtonVariant.WARNING} styletype={EButtonstyletype.TEXT}>
 								Contactez le support
 							</Button>
 						</div>

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -1,6 +1,6 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
@@ -68,7 +68,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 										<Link href={redirectPathEditCollaborators}>
 											<Button
 												variant={EButtonVariant.PRIMARY}
-												styleType={EButtonStyleType.TEXT}
+												styletype={EButtonstyletype.TEXT}
 												rightIcon={<ChevronIcon />}>
 												Modifier les collaborateurs
 											</Button>
@@ -120,7 +120,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 								<div className={classes["button-container"]}>
 									<Button
 										variant={EButtonVariant.PRIMARY}
-										styleType={EButtonStyleType.OUTLINED}
+										styletype={EButtonstyletype.OUTLINED}
 										onClick={this.restoreFolder}>
 										Restaurer le dossier
 									</Button>

src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx

@@ -1,4 +1,4 @@
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Select, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
@@ -62,7 +62,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 
 						<div className={classes["button-container"]}>
 							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Annuler
 								</Button>
 							</Link>

src/front/Components/Layouts/Login/index.tsx

@@ -1,6 +1,6 @@
 import CoffreIcon from "@Assets/Icons/coffre.svg";
 import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Image from "next/image";
@@ -58,14 +58,14 @@ export default function Login() {
 				<Typography typo={ETypo.DISPLAY_LARGE}>
 					<div className={classes["title"]}>Connexion espace professionnel</div>
 				</Typography>
-				<Button onClick={redirectUserOnConnection} leftIcon={<Image alt="id-not-logo" src={idNoteLogo} />} >
+				<Button onClick={redirectUserOnConnection} leftIcon={<Image alt="id-not-logo" src={idNoteLogo} />}>
 					S'identifier avec ID.not
 				</Button>
 				<Typography typo={ETypo.TEXT_LG_REGULAR}>
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCallback/index.tsx

@@ -8,7 +8,7 @@ import Module from "@Front/Config/Module";
 import Auth from "@Front/Api/Auth/IdNot";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import UserStore from "@Front/Stores/UserStore";
 import Link from "next/link";
@@ -73,7 +73,7 @@ export default function LoginCallBack() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCallbackCustomer/index.tsx

@@ -6,7 +6,7 @@ import React, { useEffect } from "react";
 import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Loader from "@Front/Components/DesignSystem/Loader";
 import Customers, { ICustomerTokens } from "@Front/Api/Auth/Id360/Customers/Customers";
 import CustomerStore from "@Front/Stores/CustomerStore";
@@ -59,7 +59,7 @@ export default function LoginCallBackCustomer() {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 						Contacter l'administrateur
 					</Button>
 				</Link>

src/front/Components/Layouts/LoginCustomer/StepEmail/index.tsx

@@ -57,7 +57,7 @@ export default function StepEmail(props: IProps) {
 					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 				</Typography>
 				<Link href="mailto:support@lecoffre.io">
-					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>Contacter l'administrateur</Button>
+					<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>Contacter l'administrateur</Button>
 				</Link> */}
 		</div>
 	);

src/front/Components/Layouts/LoginCustomer/StepTotp/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
@@ -56,7 +56,7 @@ export default function StepTotp(props: IProps) {
 				<Typography typo={ETypo.TEXT_MD_REGULAR}>Vous n'avez rien reçu ?</Typography>
 				<Button
 					variant={EButtonVariant.PRIMARY}
-					styleType={EButtonStyleType.TEXT}
+					styletype={EButtonstyletype.TEXT}
 					disabled={disableNewCodeButton}
 					data-disabled={disableNewCodeButton.toString()}
 					onClick={sendAnotherCode}

src/front/Components/Layouts/LoginHome/index.tsx

@@ -3,7 +3,7 @@ import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoub
 
 import classes from "./classes.module.scss";
 import LandingImage from "../Login/landing-connect.jpeg";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Link from "next/link";
 import Module from "@Front/Config/Module";
 
@@ -38,7 +38,7 @@ export default function LoginHome() {
 						<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
 					</Typography>
 					<Link href="mailto:support@lecoffre.io">
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT}>
 							Contacter l'administrateur
 						</Button>
 					</Link>

src/front/Components/Layouts/Rib/index.tsx

@@ -3,7 +3,7 @@ import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
@@ -133,7 +133,7 @@ export default function Rib() {
 								<Button onClick={openDeleteModal} variant={EButtonVariant.SECONDARY}>
 									Supprimer
 								</Button>
-								<Button onClick={openRibModal} variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+								<Button onClick={openRibModal} variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 									Modifier
 								</Button>
 								<Button onClick={downloadFile}>Télécharger</Button>

src/front/Components/Layouts/Roles/RolesCreate/index.tsx

@@ -1,5 +1,5 @@
 import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
@@ -100,7 +100,7 @@ export default function RolesCreate(props: IProps) {
 							validationError={validationError.find((error) => error.property === "name")}
 						/>
 						<div className={classes["buttons-container"]}>
-							<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED} onClick={onCancel}>
+							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED} onClick={onCancel}>
 								Annuler
 							</Button>
 							<Button type="submit">Créer le rôle</Button>

src/front/Components/Layouts/Subscription/Components/SubscribeIllimityComponent/index.tsx

@@ -6,7 +6,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -135,7 +135,7 @@ export default function SubscribeIllimityComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>

src/front/Components/Layouts/Subscription/Components/SubscribeStandardComponent/index.tsx

@@ -7,7 +7,7 @@ import SubscribeCheckoutTicket, { EPaymentFrequencyFront as EPaymentFrequency }
 import { EForfeitType, collaboratorPrice, forfeitsPrices } from "../../SubscriptionFacturation";
 import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -130,7 +130,7 @@ export default function SubscribeStandardComponent({ hasNavTab = true }: IProps)
 					</Typography>
 				</div>
 				<div className={classes["voir-recap"]}>
-					<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={open}>
+					<Button fullwidth variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} onClick={open}>
 						Voir le récapitulatif plus en détail
 					</Button>
 				</div>

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Form from "@Front/Components/DesignSystem/Form";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import React, { useCallback, useEffect, useState } from "react";
 import User, { Subscription } from "le-coffre-resources/dist/Admin";
 import JwtService, { IUserJwtPayload } from "@Front/Services/JwtService/JwtService";
@@ -118,7 +118,7 @@ export default function SubscriptionManageCollaborators() {
 							</Button>
 							<Button
 								variant={EButtonVariant.PRIMARY}
-								styleType={EButtonStyleType.OUTLINED}
+								styletype={EButtonstyletype.OUTLINED}
 								fullwidth
 								onClick={cancelAll}
 								type="button">

src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx

@@ -1,7 +1,7 @@
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
 import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
@@ -154,7 +154,7 @@ export default function SubscriptionFacturation() {
 										onClick={manageSubscription}
 										fullwidth
 										variant={EButtonVariant.PRIMARY}
-										styleType={EButtonStyleType.OUTLINED}>
+										styletype={EButtonstyletype.OUTLINED}>
 										Rétrograder mon abonnement
 									</Button>
 									// </Link>
@@ -173,7 +173,7 @@ export default function SubscriptionFacturation() {
 											href={
 												Module.getInstance().get().modules.pages.Subscription.pages.ManageCollaborators.props.path
 											}>
-											<Button fullwidth variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
+											<Button fullwidth variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
 												Gérer mes attributions
 											</Button>
 										</Link>
@@ -234,7 +234,7 @@ export default function SubscriptionFacturation() {
 										onClick={manageSubscription}
 										fullwidth
 										variant={EButtonVariant.PRIMARY}
-										styleType={EButtonStyleType.OUTLINED}>
+										styletype={EButtonstyletype.OUTLINED}>
 										Améliorer mon abonnement
 									</Button>
 									// </Link>
@@ -243,7 +243,7 @@ export default function SubscriptionFacturation() {
 						</div>
 					</div>
 					<div className={classes["actions-container"]}>
-						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} onClick={cancelOrReactivateSubscription}>
+						<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.TEXT} onClick={cancelOrReactivateSubscription}>
 							{!cancelAt && (
 								<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_ERROR_600}>
 									Arrêter l'abonnement

src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import { useRouter } from "next/router";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
 import { useCallback, useState } from "react";
@@ -111,7 +111,7 @@ export default function SubscriptionInvite() {
 								<Button
 									onClick={addLine}
 									variant={EButtonVariant.PRIMARY}
-									styleType={EButtonStyleType.TEXT}
+									styletype={EButtonstyletype.TEXT}
 									rightIcon={<PlusIcon />}>
 									Ajouter une adresse email
 								</Button>