✨ [New] Modal

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

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { CSSProperties } from "react";
+import React from "react";
 
 import classes from "./classes.module.scss";
 
@@ -34,7 +34,6 @@ type IProps = {
 	fullwidth?: boolean;
 	leftIcon?: React.ReactNode;
 	rightIcon?: React.ReactNode;
-	iconstyle?: CSSProperties;
 	disabled?: boolean;
 	isLoading?: boolean;
 	type?: "button" | "submit";
@@ -64,7 +63,6 @@ export default function Button(props: IProps) {
 	delete attributes.fullwidth;
 	delete attributes.leftIcon;
 	delete attributes.rightIcon;
-	delete attributes.iconstyle;
 
 	return (
 		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>

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

@@ -13,8 +13,8 @@ import { Document, DocumentHistory, File as FileCustomer } from "le-coffre-resou
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
 import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
-import Alert from "../Modal/Alert";
+import Alert from "../OldModal/Alert";
 import GreenCheckIcon from "@Assets/Icons/green-check.svg";
 import Loader from "../Loader";
 import TextAreaField from "../Form/TextareaField";

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

@@ -13,10 +13,10 @@ import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import classNames from "classnames";
 
 import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
 import Documents from "@Front/Api/LeCoffreApi/Customer/Documents/Documents";
 import Files from "@Front/Api/LeCoffreApi/Customer/Files/Files";
-import Alert from "../Modal/Alert";
+import Alert from "../OldModal/Alert";
 
 type IProps = {
 	onChange?: (files: File[]) => void;

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

@@ -1,125 +1,60 @@
-@import "@Themes/constants.scss";
-
-@keyframes smooth-appear {
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-}
-
-@keyframes smooth-disappear {
-	from {
-		opacity: 1;
-	}
-
-	to {
-		opacity: 0;
-	}
-}
-
 .root {
 	position: fixed;
-	z-index: 6;
+	display: flex;
+	justify-content: center;
+	align-items: center;
 	top: 0;
 	left: 0;
-	width: 100vw;
+	width: 100%;
-	height: 100vh;
+	height: 100%;
-	display: flex;
+	z-index: 3;
-	align-items: center;
-	justify-content: center;
-	--animation-delay: 1ms;
-	animation: smooth-appear var(--animation-delay) $custom-easing;
 
-	&[data-will-close="true"] {
+	.content {
-		animation: smooth-disappear var(--animation-delay) $custom-easing;
+		position: fixed;
-		opacity: 0;
+		max-width: 600px;
+		max-height: 85vh;
+		border-radius: var(--modal-radius, 0px);
+		background: var(--modal-background, #fff);
+		box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
+
+		overflow-y: auto;
+
+		.header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+			gap: var(--spacing-md, 16px);
+		}
+
+		.children {
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+		}
+
+		.footer {
+			display: flex;
+			padding: var(--spacing-md, 16px) var(--modal-spacing, 16px);
+			justify-content: center;
+			gap: var(--spacing-md, 16px);
+		}
+
+		&.fullwidth {
+			min-width: 85vw;
+		}
+
+		&.fullscreen {
+			min-width: 85vw;
+			padding: 0;
+		}
 	}
 
-	.background {
+	.backdrop {
 		position: fixed;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background-color: $modal-background;
+		background-color: rgba(0, 0, 0, 0.5);
-	}
+		overflow: hidden;
-
-	.container {
-		position: relative;
-		width: 610px;
-		max-height: 90%;
-		background: var(--color-generic-white);
-		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
-		overflow: auto;
-		padding: 32px;
-
-		@media (max-width: $screen-s) {
-			width: 90%;
-			max-width: 493px;
-		}
-
-		.cross {
-			display: flex;
-			flex-direction: row-reverse;
-
-			.close-icon {
-				height: 24px;
-				width: 24px;
-				cursor: pointer;
-			}
-		}
-	}
-
-	.transparant-background {
-		background-color: transparent;
-		box-shadow: none;
-	}
-
-	&[data-side-background="true"] {
-		.container {
-			max-width: 711px;
-
-			.sub-container {
-				padding: 0;
-				display: flex;
-
-				p {
-					max-width: 711px;
-				}
-
-				@media (max-width: $screen-s) {
-					display: block;
-				}
-
-				.banner {
-					@media (max-width: $screen-s) {
-						overflow: hidden;
-					}
-				}
-			}
-		}
-
-		.side-image {
-			height: 100%;
-
-			@media (max-width: $screen-s) {
-				display: none;
-			}
-		}
-
-		.top-image {
-			@media (min-width: $screen-s) {
-				display: none;
-			}
-
-			@media (max-width: $screen-s) {
-				width: 100%;
-				max-height: 82px;
-				min-height: 82px;
-			}
-		}
 	}
 }

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

@@ -1,111 +1,78 @@
-import CrossIcon from "@Assets/Icons/cross.svg";
+import classNames from "classnames";
-import Image from "next/image";
-import React from "react";
-
-import Typography, { ETypo } from "../Typography";
 import classes from "./classes.module.scss";
-import Footer from "./Elements/Footer";
+import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Header from "./Elements/Header";
+import React from "react";
-import Loader from "./Elements/Loader";
+import Typography, { ETypo } from "../Typography";
 
-export type IProps = {
+import { XMarkIcon } from "@heroicons/react/24/outline";
-	closeBtn?: boolean;
+
-	header?: string | JSX.Element;
+type IProps = {
-	footer?: JSX.Element | null;
+	className?: string;
-	textLoader?: string | JSX.Element;
 	isOpen: boolean;
-	onClose: () => void;
+	onClose?: () => void;
-	hasTransparentBackground?: boolean;
-	hasContainerClosable?: boolean;
-	withSideBackground?: boolean;
 	children?: React.ReactNode;
-	animationDelay?: number;
+	title?: string;
-};
+	firstButton?: {
-
+		text: string;
-type IState = {
+		onClick?: () => void;
-	willClose: boolean;
+		rightIcon?: React.ReactNode;
-	isOpen: boolean;
+		leftIcon?: React.ReactNode;
-};
-
-export default class Modal extends React.Component<IProps, IState> {
-	static defaultProps = {
-		animationDelay: 250,
 	};
-	public rootRefElement = React.createRef<HTMLDivElement>();
+	secondButton?: {
-	constructor(props: IProps) {
+		text: string;
-		super(props);
+		onClick?: () => void;
-		this.close = this.close.bind(this);
+		rightIcon?: React.ReactNode;
+		leftIcon?: React.ReactNode;
+	};
+	fullwidth?: boolean;
+	fullscreen?: boolean;
+};
 
-		this.state = {
+export default function Modal(props: IProps) {
-			willClose: false,
+	const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = props;
-			isOpen: this.props.isOpen,
+
-		};
+	if (!isOpen) return null;
-	}
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["backdrop"]} onClick={onClose} />
 
-	public override render(): JSX.Element | null {
-		if (!this.state.isOpen) return null;
-		return (
 			<div
-				ref={this.rootRefElement}
+				className={classNames(
-				className={classes["root"]}
+					classes["content"],
-				data-side-background={this.props.withSideBackground}
+					className,
-				data-will-close={this.state.willClose.toString()}>
+					fullwidth && classes["fullwidth"],
-				<div className={classes["background"]} onClick={this.close} />
+					fullscreen && classes["fullscreen"],
-				<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
+				)}>
-					{this.props.closeBtn && (
+				<div className={classes["header"]}>
-						<div className={classes["cross"]}>
+					{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
-							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
+					<XMarkIcon width={24} onClick={onClose} />
-						</div>
+				</div>
-					)}
-					<div className={classes["sub-container"]}>
-						{this.props.header && <Header content={this.props.header} />}
 
-						<Typography typo={ETypo.TEXT_MD_REGULAR}>
+				<div className={classNames(classes["children"], className)}>{children}</div>
-							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
+
-						</Typography>
+				<div className={classes["footer"]}>
-						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
+					{firstButton && (
-					</div>
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.OUTLINED}
+							leftIcon={firstButton.leftIcon}
+							rightIcon={firstButton.rightIcon}
+							onClick={firstButton.onClick}>
+							{firstButton.text}
+						</Button>
+					)}
+					{secondButton && (
+						<Button
+							variant={EButtonVariant.PRIMARY}
+							styleType={EButtonStyleType.CONTAINED}
+							leftIcon={secondButton.leftIcon}
+							rightIcon={secondButton.rightIcon}
+							onClick={secondButton.onClick}>
+							{secondButton.text}
+						</Button>
+					)}
 				</div>
 			</div>
-		);
+		</div>
-	}
+	);
-
-	public override componentDidUpdate(prevProps: IProps): void {
-		if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
-			this.setState({ willClose: true });
-			window.setTimeout(() => {
-				this.setState({
-					isOpen: false,
-					willClose: false,
-				});
-			}, this.props.animationDelay);
-			document.body.style.overflow = "auto";
-		}
-		if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
-			this.setState({ isOpen: true });
-			document.body.style.overflow = "hidden";
-		}
-		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
-	}
-
-	public override componentDidMount(): void {
-		document.addEventListener("keydown", this.handleKeyDown);
-	}
-
-	public override componentWillUnmount(): void {
-		document.body.style.overflow = "auto";
-		document.removeEventListener("keydown", this.handleKeyDown);
-	}
-
-	protected close() {
-		if (this.props.hasContainerClosable === false) return;
-		if (this.state.willClose) return;
-		this.props.onClose();
-	}
-
-	private handleKeyDown = (e: KeyboardEvent): void => {
-		if (e.key === "Escape" || e.key === "Esc") {
-			this.props.onClose();
-		}
-	};
 }

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

@@ -1,5 +1,5 @@
 import React from "react";
-import Modal, { IProps as IPropsModal } from "..";
+import OldModal, { IProps as IPropsModal } from "..";
 import Button, { EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
@@ -13,7 +13,7 @@ type IState = {
 export default class Alert extends React.Component<IProps, IState> {
 	static defaultProps = {
 		closeText: "Ok",
-		...Modal.defaultProps,
+		...OldModal.defaultProps,
 	};
 
 	constructor(props: IProps) {
@@ -26,14 +26,14 @@ export default class Alert extends React.Component<IProps, IState> {
 
 	public override render(): JSX.Element | null {
 		return (
-			<Modal
+			<OldModal
 				closeBtn={this.props.closeBtn}
 				isOpen={this.state.isOpen}
 				onClose={this.onClose}
 				header={this.props.header}
 				footer={this.footer()}>
 				{this.props.children}
-			</Modal>
+			</OldModal>
 		);
 	}
 

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

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import React from "react";
 
-import Modal, { IProps as IPropsModal } from "..";
+import OldModal, { IProps as IPropsModal } from "..";
 import Button, { EButtonStyleType, EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
@@ -24,19 +24,19 @@ export default class Confirm extends React.Component<IProps, IState> {
 		confirmText: "Confirm",
 		canConfirm: true,
 		showButtons: true,
-		...Modal.defaultProps,
+		...OldModal.defaultProps,
 	};
 
 	public override render(): JSX.Element | null {
 		return (
-			<Modal
+			<OldModal
 				closeBtn={this.props.closeBtn}
 				header={this.props.header}
 				footer={this.footer()}
 				animationDelay={this.props.animationDelay}
 				{...this.props}>
 				{this.props.children}
-			</Modal>
+			</OldModal>
 		);
 	}
 

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

@@ -0,0 +1,125 @@
+@import "@Themes/constants.scss";
+
+@keyframes smooth-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes smooth-disappear {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
+.root {
+	position: fixed;
+	z-index: 6;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	--animation-delay: 1ms;
+	animation: smooth-appear var(--animation-delay) $custom-easing;
+
+	&[data-will-close="true"] {
+		animation: smooth-disappear var(--animation-delay) $custom-easing;
+		opacity: 0;
+	}
+
+	.background {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: $modal-background;
+	}
+
+	.container {
+		position: relative;
+		width: 610px;
+		max-height: 90%;
+		background: var(--color-generic-white);
+		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
+		overflow: auto;
+		padding: 32px;
+
+		@media (max-width: $screen-s) {
+			width: 90%;
+			max-width: 493px;
+		}
+
+		.cross {
+			display: flex;
+			flex-direction: row-reverse;
+
+			.close-icon {
+				height: 24px;
+				width: 24px;
+				cursor: pointer;
+			}
+		}
+	}
+
+	.transparant-background {
+		background-color: transparent;
+		box-shadow: none;
+	}
+
+	&[data-side-background="true"] {
+		.container {
+			max-width: 711px;
+
+			.sub-container {
+				padding: 0;
+				display: flex;
+
+				p {
+					max-width: 711px;
+				}
+
+				@media (max-width: $screen-s) {
+					display: block;
+				}
+
+				.banner {
+					@media (max-width: $screen-s) {
+						overflow: hidden;
+					}
+				}
+			}
+		}
+
+		.side-image {
+			height: 100%;
+
+			@media (max-width: $screen-s) {
+				display: none;
+			}
+		}
+
+		.top-image {
+			@media (min-width: $screen-s) {
+				display: none;
+			}
+
+			@media (max-width: $screen-s) {
+				width: 100%;
+				max-height: 82px;
+				min-height: 82px;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,111 @@
+import CrossIcon from "@Assets/Icons/cross.svg";
+import Image from "next/image";
+import React from "react";
+
+import Typography, { ETypo } from "../Typography";
+import classes from "./classes.module.scss";
+import Footer from "./Elements/Footer";
+import Header from "./Elements/Header";
+import Loader from "./Elements/Loader";
+
+export type IProps = {
+	closeBtn?: boolean;
+	header?: string | JSX.Element;
+	footer?: JSX.Element | null;
+	textLoader?: string | JSX.Element;
+	isOpen: boolean;
+	onClose: () => void;
+	hasTransparentBackground?: boolean;
+	hasContainerClosable?: boolean;
+	withSideBackground?: boolean;
+	children?: React.ReactNode;
+	animationDelay?: number;
+};
+
+type IState = {
+	willClose: boolean;
+	isOpen: boolean;
+};
+
+export default class OldModal extends React.Component<IProps, IState> {
+	static defaultProps = {
+		animationDelay: 250,
+	};
+	public rootRefElement = React.createRef<HTMLDivElement>();
+	constructor(props: IProps) {
+		super(props);
+		this.close = this.close.bind(this);
+
+		this.state = {
+			willClose: false,
+			isOpen: this.props.isOpen,
+		};
+	}
+
+	public override render(): JSX.Element | null {
+		if (!this.state.isOpen) return null;
+		return (
+			<div
+				ref={this.rootRefElement}
+				className={classes["root"]}
+				data-side-background={this.props.withSideBackground}
+				data-will-close={this.state.willClose.toString()}>
+				<div className={classes["background"]} onClick={this.close} />
+				<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
+					{this.props.closeBtn && (
+						<div className={classes["cross"]}>
+							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
+						</div>
+					)}
+					<div className={classes["sub-container"]}>
+						{this.props.header && <Header content={this.props.header} />}
+
+						<Typography typo={ETypo.TEXT_MD_REGULAR}>
+							<>{this.props.children ? this.props.children : <Loader text={this.props.textLoader} />}</>
+						</Typography>
+						{this.props.children && this.props.footer && <Footer content={this.props.footer} />}
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	public override componentDidUpdate(prevProps: IProps): void {
+		if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) {
+			this.setState({ willClose: true });
+			window.setTimeout(() => {
+				this.setState({
+					isOpen: false,
+					willClose: false,
+				});
+			}, this.props.animationDelay);
+			document.body.style.overflow = "auto";
+		}
+		if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
+			this.setState({ isOpen: true });
+			document.body.style.overflow = "hidden";
+		}
+		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
+	}
+
+	public override componentDidMount(): void {
+		document.addEventListener("keydown", this.handleKeyDown);
+	}
+
+	public override componentWillUnmount(): void {
+		document.body.style.overflow = "auto";
+		document.removeEventListener("keydown", this.handleKeyDown);
+	}
+
+	protected close() {
+		if (this.props.hasContainerClosable === false) return;
+		if (this.state.willClose) return;
+		this.props.onClose();
+	}
+
+	private handleKeyDown = (e: KeyboardEvent): void => {
+		if (e.key === "Escape" || e.key === "Esc") {
+			this.props.onClose();
+		}
+	};
+}

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

@@ -11,7 +11,7 @@ import Link from "next/link";
 import React from "react";
 
 import Button, { EButtonStyleType, EButtonVariant } from "../Button";
-import Confirm from "../Modal/Confirm";
+import Confirm from "../OldModal/Confirm";
 import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";

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

@@ -2,7 +2,7 @@
 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/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import Base from "@Front/Components/Layouts/Base";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";

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

@@ -4,7 +4,7 @@ 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 SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";

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

@@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";

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

@@ -3,7 +3,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import Form from "@Front/Components/DesignSystem/Form";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
 import Module from "@Front/Config/Module";

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

@@ -5,7 +5,7 @@ import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTy
 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/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";

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

@@ -10,8 +10,12 @@ import { ArrowLongLeftIcon, ArrowLongRightIcon } from "@heroicons/react/24/outli
 import { useCallback, useMemo, useState } from "react";
 
 import classes from "./classes.module.scss";
+import useOpenable from "@Front/Hooks/useOpenable";
+import Modal from "@Front/Components/DesignSystem/Modal";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 
 export default function DesignSystem() {
+	const { isOpen, open, close } = useOpenable();
 	const userDb = useMemo(
 		() => [
 			{
@@ -58,15 +62,25 @@ export default function DesignSystem() {
 		<DefaultTemplate title={"DesignSystem"}>
 			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
 			<Newsletter isOpen />
-			<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
-			<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
-			<div className={classes["tab-content"]}>
-				<Typography typo={ETypo.TEXT_MD_REGULAR}>
-					{selectedTab.id} - {selectedTab.username}
-				</Typography>
-			</div>
 			<div className={classes["root"]}>
 				<div className={classes["components"]}>
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
+					<Button onClick={open}>Open Modal</Button>
+					<Modal
+						isOpen={isOpen}
+						onClose={close}
+						title={"Modal"}
+						firstButton={{ text: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
+						secondButton={{ text: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
+						<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
+					</Modal>
+
+					<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
+					<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
+					<Typography typo={ETypo.TEXT_MD_REGULAR}>
+						{selectedTab.id} - {selectedTab.username}
+					</Typography>
+
 					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
 					<div className={classes["rows"]}>
 						<CircleProgress percentage={0} />

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

@@ -1,4 +1,4 @@
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import classes from "./classes.module.scss";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";

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

@@ -4,7 +4,7 @@ import OfficeFolderAnchors from "@Front/Api/LeCoffreApi/Notary/OfficeFolderAncho
 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/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

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

@@ -2,7 +2,7 @@ import Customers from "@Front/Api/LeCoffreApi/Notary/Customers/Customers";
 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/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

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

@@ -3,7 +3,7 @@ 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 FilePreview from "@Front/Components/DesignSystem/FilePreview";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";

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

@@ -11,7 +11,7 @@ import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
 import { FrontendVariables } from "@Front/Config/VariablesFront";
 import Link from "next/link";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 
 export default function Login() {
 	const router = useRouter();

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

@@ -5,7 +5,7 @@ import Form from "@Front/Components/DesignSystem/Form";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { ValidationError } from "class-validator";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 type IProps = {
 	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
 	validationErrors: ValidationError[];

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

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 import LandingImage from "./landing-connect.jpeg";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import StepEmail from "./StepEmail";
 import StepTotp from "./StepTotp";
 import Auth from "@Front/Api/Auth/Customer/Auth";

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

@@ -7,7 +7,7 @@ import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/Desi
 import { useRouter } from "next/router";
 import OfficeRib from "@Front/Api/LeCoffreApi/Notary/OfficeRib/OfficeRib";
 import DepositRib from "@Front/Components/DesignSystem/DepositRib";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Loader from "@Front/Components/DesignSystem/Loader";
 
 export default function Rib() {

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

@@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 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/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultRolesDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
 import Module from "@Front/Config/Module";

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

@@ -2,7 +2,7 @@ import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
 import Button from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultRoleDashboard from "@Front/Components/LayoutTemplates/DefaultRoleDashboard";
 import { OfficeRole, Rule, RulesGroup } from "le-coffre-resources/dist/Admin";

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

@@ -8,7 +8,7 @@ import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 import { EType } from "le-coffre-resources/dist/Admin/Subscription";
 import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";

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

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 import Check from "@Front/Components/Elements/Icons/Check";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 // import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
 // import { EType } from "le-coffre-resources/dist/Admin/Subscription";

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

@@ -3,7 +3,7 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
 import MessageBox from "@Front/Components/Elements/MessageBox";
 import Link from "next/link";

src/front/Components/Layouts/Users/UserInformations/index.tsx

@@ -4,7 +4,7 @@ import Roles from "@Front/Api/LeCoffreApi/Admin/Roles/Roles";
 import LiveVotes from "@Front/Api/LeCoffreApi/SuperAdmin/LiveVotes/LiveVotes";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";
 import Switch from "@Front/Components/DesignSystem/Switch";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultUserDashboard from "@Front/Components/LayoutTemplates/DefaultUserDashboard";