Merge branch 'dev' into preprod

.vscode/custom.code-snippets

@@ -0,0 +1,9 @@
+{
+    "Media queries": {
+        "prefix": "media",
+        "body": [
+            "@media(max-width: \\$screen-$1){$2}"
+        ],
+        "description": "media queries"
+    },
+}

devops/Chart.yaml

@@ -21,4 +21,4 @@ version: 0.0.1
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.
 # It is recommended to use it with quotes.
-appVersion: 0.4.10
+appVersion: 0.4.14

src/front/Assets/Icons/check.svg

@@ -1,3 +1,3 @@
-<svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.81353 0.144344C10.0429 0.354011 10.0635 0.715195 9.85967 0.95107L3.93375 7.80821C3.82832 7.9302 3.67721 8 3.51852 8C3.35983 8 3.20872 7.9302 3.10329 7.80821L0.140334 4.37964C-0.0635092 4.14376 -0.0428533 3.78258 0.18647 3.57291C0.415794 3.36324 0.766945 3.38449 0.970788 3.62037L3.51852 6.56846L9.02921 0.191798C9.23306 -0.0440776 9.58421 -0.0653237 9.81353 0.144344Z" fill="white"/>
+<path d="M13.2251 3.36088C13.4893 3.59571 13.5131 4.00024 13.2783 4.26442L6.4516 11.9444C6.33015 12.0811 6.15607 12.1592 5.97326 12.1592C5.79045 12.1592 5.61637 12.0811 5.49492 11.9444L2.08159 8.10442C1.84676 7.84024 1.87055 7.43571 2.13474 7.20088C2.39892 6.96606 2.80344 6.98985 3.03827 7.25403L5.97326 10.5559L12.3216 3.41403C12.5564 3.14985 12.9609 3.12606 13.2251 3.36088Z" fill="white"/>
 </svg>

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

@@ -2,6 +2,7 @@ import Image from "next/image";
 import React, { CSSProperties } from "react";
 
 import classes from "./classes.module.scss";
+import classNames from "classnames";
 
 export enum EButtonVariant {
 	PRIMARY = "primary",
@@ -21,6 +22,7 @@ type IProps = {
 	type?: "button" | "submit";
 	isloading?: string;
 	iconposition?: "left" | "right";
+	className?: string;
 };
 
 export default function Button(props: IProps) {
@@ -35,6 +37,7 @@ export default function Button(props: IProps) {
 		children,
 		icon,
 		iconstyle,
+		className = "",
 	} = props;
 
 	const fullwidthattr = fullwidth.toString();
@@ -46,7 +49,7 @@ export default function Button(props: IProps) {
 	delete attributes.iconstyle;
 	delete attributes.iconposition;
 	return (
-		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
+		<button {...attributes} onClick={onClick} className={classNames(classes["root"], className)} type={type}>
 			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
 			{children}
 			{icon && iconposition === "right" && <Image src={icon} style={iconstyle} alt={"button icon"} />}

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

@@ -10,7 +10,7 @@
 		background-color: transparent;
 		width: 16px;
 		height: 16px;
-		border: 1px solid $green-flash;
+		border: 1px solid $turquoise-flash;
 		border-radius: 2px;
 		margin-right: 16px;
 		display: grid;
@@ -19,11 +19,11 @@
 
 	input[type="checkbox"]::before {
 		content: url("../../../Assets/Icons/check.svg");
-		place-content: center;
+		place-content: flex-start;
 		display: grid;
 		width: 16px;
 		height: 16px;
-		background-color: $green-flash;
+		background-color: $turquoise-flash;
 		border-radius: 2px;
 		transform: scale(0);
 	}

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

@@ -1,10 +1,13 @@
 import React from "react";
+
+import { IOption } from "../Select";
 import Tooltip from "../ToolTip";
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 
 type IProps = {
-	name: string;
+	name?: string;
+	option: IOption;
 	toolTip?: string;
 };
 
@@ -17,8 +20,12 @@ export default class CheckBox extends React.Component<IProps> {
 		return (
 			<Typography typo={ITypo.P_ERR_16} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
-					<input type="checkbox" name={this.props.name} />
+					<input
-					{this.props.name}
+						type="checkbox"
+						name={this.props.name ?? (this.props.option.value as string)}
+						value={this.props.option.value as string}
+					/>
+					{this.props.option.label}
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>
 			</Typography>

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

@@ -1,4 +1,7 @@
 @import "@Themes/constants.scss";
 
 .root {
+	.active {
+		background-color: var(--grey-medium);
+	}
 }

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

@@ -1,8 +1,10 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import FolderContainer from "../FolderContainer";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import React from "react";
+
+import FolderContainer from "../FolderContainer";
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folders: IDashBoardFolder[];
@@ -10,15 +12,22 @@ type IProps = {
 	onCloseLeftSide?: () => void;
 };
 
+type IPropsClass = IProps & {
+	selectedFolder: string;
+};
+
 type IState = {};
 
-export default class FolderList extends React.Component<IProps, IState> {
+class FolderListClass extends React.Component<IPropsClass, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
 				{this.props.folders.map((folder) => {
 					return (
-						<div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+						<div
+							onClick={this.props.onCloseLeftSide}
+							key={folder.uid}
+							className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
 							<Link href={"/folder/".concat(folder.uid)}>
 								<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
 							</Link>
@@ -30,3 +39,10 @@ export default class FolderList extends React.Component<IProps, IState> {
 		);
 	}
 }
+
+export default function FolderList(props: IProps) {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	folderUid = folderUid as string;
+	return <FolderListClass {...props} selectedFolder={folderUid} />;
+}

src/front/Components/DesignSystem/Header/BurgerMenu/BurgerModal/index.tsx

@@ -1,5 +1,6 @@
 import LogOutButton from "@Front/Components/DesignSystem/LogOutButton";
 import React from "react";
+
 import NavigationLink from "../../NavigationLink";
 import classes from "./classes.module.scss";
 
@@ -17,18 +18,8 @@ export default class BurgerModal extends React.Component<IProps, IState> {
 			<>
 				<div className={classes["background"]} onClick={this.props.closeModal} />
 				<div className={classes["root"]}>
-					<NavigationLink text="Dossiers en cours" />
+					<NavigationLink path={"/folder"} text="Dossiers en cours" />
 					<NavigationLink text="Dossiers archivés" />
-					<NavigationLink text="Ancrage" />
-					<NavigationLink text="Collaborateurs" />
-					<NavigationLink text="Paramétrage des listes de pièces" />
-					<NavigationLink text="Gestion des utilisateurs" />
-					<NavigationLink text="Gestion des offices" />
-					<NavigationLink text="Gestion des noms de domaine" />
-					<NavigationLink text="Mon compte" />
-					<NavigationLink text="CGU" />
-					<NavigationLink path={"/design-system"} text="Design System" />
-					<NavigationLink path={"/"} text="Home" />
 					<div className={classes["separator"]} />
 					<LogOutButton />
 				</div>

src/front/Components/DesignSystem/Header/HeaderLink/classes.module.scss

@@ -19,4 +19,8 @@
 		bottom: 0;
 		left: 0;
 	}
+
+	&.desactivated{
+		cursor: not-allowed;
+	}
 }

src/front/Components/DesignSystem/Header/HeaderLink/index.tsx

@@ -1,11 +1,12 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import Link from "next/link";
-import Typography, { ITypo } from "../../Typography";
 import classNames from "classnames";
+import Link from "next/link";
 import router from "next/router";
+import React from "react";
 import { useEffect, useState } from "react";
 
+import Typography, { ITypo } from "../../Typography";
+import classes from "./classes.module.scss";
+
 type IPropsClass = {
 	text: string | JSX.Element;
 	path?: string;
@@ -16,20 +17,30 @@ type IStateClass = {};
 
 class HeaderLinkClass extends React.Component<IPropsClass, IStateClass> {
 	public override render(): JSX.Element {
+		if (this.props.path !== "" && this.props.path !== undefined) {
 			return (
-			<Link href={this.props.path ?? ""} className={classNames(classes["root"], this.props.isActive && [classes["active"]])}>
+				<Link href={this.props.path} className={classNames(classes["root"], this.props.isActive && classes["active"])}>
 					<div className={classes["content"]}>
 						<Typography typo={this.props.isActive ? ITypo.P_SB_18 : ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
 					</div>
 					{this.props.isActive && <div className={classes["underline"]} />}
 				</Link>
 			);
+		} else {
+			return (
+				<div className={classNames(classes["root"], classes["desactivated"])}>
+					<div className={classes["content"]}>
+						<Typography typo={ITypo.NAV_HEADER_18}>{this.props.text}</Typography>
+					</div>
+				</div>
+			);
+		}
 	}
 }
 
 export default function HeaderLink(props: IPropsClass) {
 	const [url, setUrl] = useState("");
 	useEffect(() => setUrl(router?.asPath), []);
-	const isActive = url === props.path;
+	const isActive = url.includes(props.path!);
 	return <HeaderLinkClass {...props} isActive={isActive} />;
 }

src/front/Components/DesignSystem/Header/Navigation/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import classes from "./classes.module.scss";
+
 import HeaderLink from "../HeaderLink";
+import classes from "./classes.module.scss";
 
 type IProps = {};
 type IState = {};
@@ -9,11 +10,8 @@ export default class Navigation extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<HeaderLink text={"Home"} path={"/"} />
+				<HeaderLink text={"Dossiers en cours"} path={"/folder"} />
-				<HeaderLink text={"Design system"} path={"/design-system"} />
+				<HeaderLink text={"Dossiers archivés"} path={""} isActive={false} />
-				<HeaderLink text={"Ancrage"} path={""} />
-				<HeaderLink text={"Collaborateurs"} path={""} />
-				<HeaderLink text={"Paramétrage des listes de pièces"} path={""} />
 			</div>
 		);
 	}

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

@@ -10,6 +10,11 @@
 		flex: 1;
 	}
 
+	.sub-container {
+		flex: 1;
+		display: flex;
+	}
+
 	@media (max-width: $screen-s) {
 		flex-direction: column-reverse;
 		gap: 8px;

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

@@ -1,14 +1,17 @@
-import Button, { EButtonVariant } from "../../Button";
+import Link from "next/link";
-import Modal, { IProps as IPropsModal } from "..";
-import classes from "./classes.module.scss";
 import React from "react";
 
+import Modal, { IProps as IPropsModal } from "..";
+import Button, { EButtonVariant } from "../../Button";
+import classes from "./classes.module.scss";
+
 type IProps = IPropsModal & {
 	onAccept?: () => void;
 	cancelText: string | JSX.Element;
+	cancelPath?: string;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
-	isConfirmButtonDisabled: boolean;
+	canConfirm: boolean;
 };
 
 type IState = {};
@@ -18,7 +21,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		showCancelButton: true,
 		cancelText: "Cancel",
 		confirmText: "Confirm",
-		isConfirmButtonDisabled: false,
+		canConfirm: false,
 		...Modal.defaultProps,
 	};
 
@@ -39,16 +42,26 @@ export default class Confirm extends React.Component<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["buttons-container"]}>
-				{this.props.showCancelButton && (
+				{this.props.showCancelButton &&
+					(this.props.cancelPath ? (
+						<Link href={this.props.cancelPath} className={classes["sub-container"]}>
 							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
 								{this.props.cancelText}
 							</Button>
-				)}
+						</Link>
-
+					) : (
-				<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={this.props.isConfirmButtonDisabled}>
+						<div className={classes["sub-container"]}>
+							<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose} className={classes["sub-container"]}>
+								{this.props.cancelText}
+							</Button>
+						</div>
+					))}
+				<div className={classes["sub-container"]}>
+					<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm} fullwidth>
 						{this.props.confirmText}
 					</Button>
 				</div>
+			</div>
 		);
 	}
 }

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

@@ -35,6 +35,7 @@
 
 	&[data-will-close="true"] {
 		animation: smooth-disappear var(--animation-delay) $custom-easing;
+		opacity: 0;
 	}
 
 	.background {

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

@@ -1,12 +1,12 @@
+import CrossIcon from "@Assets/Icons/cross.svg";
+import Image from "next/image";
 import React from "react";
+
+import Typography, { ITypo } from "../Typography";
 import classes from "./classes.module.scss";
 import Footer from "./Elements/Footer";
 import Header from "./Elements/Header";
-
 import Loader from "./Elements/Loader";
-import Typography, { ITypo } from "../Typography";
-import CrossIcon from "@Assets/Icons/cross.svg";
-import Image from "next/image";
 
 export type IProps = {
 	closeBtn?: boolean;
@@ -24,6 +24,7 @@ export type IProps = {
 
 type IState = {
 	willClose: boolean;
+	isOpen: boolean;
 };
 
 export default class Modal extends React.Component<IProps, IState> {
@@ -37,12 +38,12 @@ export default class Modal extends React.Component<IProps, IState> {
 
 		this.state = {
 			willClose: false,
+			isOpen: this.props.isOpen,
 		};
 	}
 
 	public override render(): JSX.Element | null {
-		if (!this.props.isOpen) return null;
+		if (!this.state.isOpen) return null;
-		const onClick = (this.props.hasContainerClosable && this.close) || (() => {});
 		return (
 			<div
 				ref={this.rootRefElement}
@@ -50,9 +51,7 @@ export default class Modal extends React.Component<IProps, IState> {
 				data-side-background={this.props.withSideBackground}
 				data-will-close={this.state.willClose.toString()}>
 				<div className={classes["background"]} onClick={this.close} />
-				<div
+				<div className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}>
-					className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
-					onClick={onClick}>
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@@ -71,18 +70,24 @@ export default class Modal extends React.Component<IProps, IState> {
 		);
 	}
 
-	public override componentDidUpdate(): void {
+	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);
+		}
+		if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) {
+			this.setState({ isOpen: true });
+		}
 		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
 	}
 
 	protected close() {
 		if (this.state.willClose) return;
-		this.setState({ willClose: true });
-		window.setTimeout(() => {
-			this.setState({
-				willClose: false,
-			});
 		this.props.onClose();
-		}, this.props.animationDelay);
 	}
 }

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

@@ -1,8 +1,8 @@
-import React from "react";
-import Image from "next/image";
 import ToolTipIcon from "@Assets/Icons/tool-tip.svg";
-import TooltipMUI, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip";
 import styled from "@emotion/styled";
+import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip";
+import Image from "next/image";
+import React from "react";
 
 type IProps = {
 	title?: string | JSX.Element;
@@ -19,13 +19,13 @@ type IState = {
 const LightTooltip = styled(({ className, ...props }: TooltipProps) => <TooltipMUI {...props} classes={{ popper: className }} />)(
 	({ theme }) => ({
 		[`& .${tooltipClasses.tooltip}`]: {
-			backgroundColor: "var(--colormerdum)",
+			backgroundColor: "var(--turquoise-flash)",
-			color: "var(--colormerdum)",
+			color: "white",
 			//boxShadow: theme.shadows[1],
 			fontSize: 11,
 		},
 		[`& .${tooltipClasses.arrow}`]: {
-			// color: theme.palette.common.black,
+			color: "var(--turquoise-flash)",
 		},
 	}),
 );

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

@@ -5,20 +5,24 @@ import Typography, { ITypo } from "../../Typography";
 import Image from "next/image";
 import PenIcon from "@Assets/Icons/pen.svg";
 import WarningBadge from "../../WarningBadge";
+import Link from "next/link";
 
 type IProps = {
 	contact: {
+		uid: Contact["uid"];
 		first_name: Contact["first_name"];
 		last_name: Contact["last_name"];
 		phone_number: Contact["phone_number"];
 		cell_phone_number: Contact["cell_phone_number"];
 		email: Contact["email"];
 	};
+	selectedFolderUid: string;
 };
 type IState = {};
 
-export default class UserFolderHeader extends React.Component<IProps, IState> {
+export default class UserFolderHeaderClass extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
+		const redirectPath = "/folder/".concat(this.props.selectedFolderUid, "/update/client/", this.props.contact.uid);
 		return (
 			<div className={classes["root"]}>
 				<div className={classes["content"]}>
@@ -47,7 +51,9 @@ export default class UserFolderHeader extends React.Component<IProps, IState> {
 				</div>
 				<div className={classes["icons"]}>
 					<WarningBadge />
+					<Link href={redirectPath}>
 						<Image src={PenIcon} alt="edit" className={classes["edit-icon"]} onClick={this.onEditClick} />
+					</Link>
 				</div>
 			</div>
 		);

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

@@ -4,6 +4,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
 import classNames from "classnames";
 import Customer, { Document } from "le-coffre-resources/dist/Customer";
 import Image from "next/image";
+import Link from "next/link";
 import React from "react";
 
 import Button, { EButtonVariant } from "../Button";
@@ -60,7 +61,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.toggleOpen}>
-					<UserFolderHeader contact={this.props.customer.contact} />
+					<UserFolderHeader contact={this.props.customer.contact} selectedFolderUid={this.props.folder.uid} />
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
@@ -94,9 +95,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							/>
 						</div>
 						<div className={classes["button-container"]}>
+							<Link href={`/folder/${this.props.folder.uid}/ask-documents`}>
 								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
 									Demander un autre document{" "}
 								</Button>
+							</Link>
 							{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
 						</div>
 					</div>

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

@@ -15,6 +15,7 @@ type IProps = {
 	scrollTop: number | null;
 	image: StaticImageData;
 	type: "background" | "image";
+	showHeader: boolean;
 };
 
 type IState = {};
@@ -23,12 +24,13 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 	public static defaultProps = {
 		scrollTop: 0,
 		type: "background",
+		showHeader: false,
 	};
 
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Header isUserConnected={false} />
+				<Header isUserConnected={this.props.showHeader} />
 				<div className={classes["content"]}>
 					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
 					{this.props.type === "image" && (

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

@@ -1,25 +1,27 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
+import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
+import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import SearchBar from "@Front/Components/DesignSystem/SearchBar";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import ToolTip from "@Front/Components/DesignSystem/ToolTip";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import UserFolder from "@Front/Components/DesignSystem/UserFolder";
 import BasePage from "@Front/Components/Layouts/Base";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
-import classes from "./classes.module.scss";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Toasts, { IToast } from "@Front/Stores/Toasts";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+
-import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
+import classes from "./classes.module.scss";
-import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData";
-import ToolTip from "@Front/Components/DesignSystem/ToolTip";
+
-import RadioBox from "@Front/Components/DesignSystem/RadioBox";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
-import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import "reflect-metadata";
-import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
-import { customer2, document, documentDeposited, documentPending, folder, folderWithPendingDocument, folders } from "./dummyData";
-import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
-import Select, { IOption } from "@Front/Components/DesignSystem/Select";
-import UserFolder from "@Front/Components/DesignSystem/UserFolder";
-import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
-import SearchBar from "@Front/Components/DesignSystem/SearchBar";
-import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
 
 type IState = {
 	isModalDisplayed: boolean;
@@ -111,8 +113,19 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>CheckBox component</Typography>
 						</div>
-						<CheckBox name="Check Box 1" toolTip="Checkbox with tooltip" />
+						<CheckBox
-						<CheckBox name="Check Box 2" />
+							toolTip="Mon super tooltip"
+							option={{
+								label: "Check Box 1",
+								value: "box_1",
+							}}
+						/>
+						<CheckBox
+							option={{
+								label: "Check Box 2",
+								value: "box_2",
+							}}
+						/>
 					</div>
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>

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

@@ -126,7 +126,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 
 export default function AddClientToFolder() {
 	const router = useRouter();
-	let { uid } = router.query;
+	let { folderUid } = router.query;
-	uid = uid as string;
+	folderUid = folderUid as string;
-	return <AddClientToFolderClass selectedFolderUid={uid} />;
+	return <AddClientToFolderClass selectedFolderUid={folderUid} />;
 }

src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss

@@ -0,0 +1,46 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.title {
+		margin-top: 24px;
+	}
+
+	.form-container {
+		margin-top: 16px;
+
+		.checkbox-container {
+			margin-top: 32px;
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: 24px;
+
+			@media (max-width: $screen-m) {
+				grid-template-columns: 1fr;
+			}
+		}
+
+		.buttons-container {
+			display: flex;
+			gap: 32px;
+			margin-top: 32px;
+
+			@media (max-width: $screen-s) {
+				flex-direction: column;
+			}
+		}
+	}
+
+	.add-document-container {
+		margin-top: 32px;
+	}
+
+	.buttons-container {
+		margin-top: 32px;
+	}
+
+	.add-document-form-container {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+}

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

@@ -0,0 +1,208 @@
+import PlusIcon from "@Assets/Icons/plus.svg";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import CheckBox from "@Front/Components/DesignSystem/CheckBox";
+import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import React from "react";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+
+type IProps = {};
+type IState = {
+	actType: IOption | null;
+	isCreateDocumentModalVisible: boolean;
+	documentName: string;
+	visibleDescription: string;
+};
+
+export default class AskDocuments extends BasePage<IProps, IState> {
+	private actsOptions: IOption[] = [
+		{ label: "Divorce", value: "divorce" },
+		{ label: "Succession", value: "succession" },
+		{ label: "Vente immobilière", value: "vente_immobiliere" },
+	];
+
+	private documentsType: IOption[] = [
+		{ label: "Carte d'identité", value: "carte_identite" },
+		{ label: "Diagnostic État Risques et Pollution", value: "diagnostic_erep" },
+		{ label: "Justificatif de domicile", value: "justificatif_domicile" },
+		{ label: "Diagnostic gaz", value: "diagnostic_gaz" },
+		{ label: "Compromis de vente", value: "compromis_de_vente" },
+		{ label: "Diagnostic DPE", value: "diagnostic_dpe" },
+		{ label: "Diagnostic électrique", value: "diagnostic_electrique" },
+		{ label: "Diagnostic plombs", value: "diagnostic_plombs" },
+		{ label: "Diagnostic amiante", value: "diagnostic_amiante" },
+		{ label: "Diagnostic termites", value: "diagnostic_termites" },
+		{ label: "Diagnostic État des nuisances sonores aériennes", value: "diagnostic_ednsa" },
+	];
+
+	public constructor(props: IProps) {
+		super(props);
+
+		this.state = {
+			actType: null,
+			isCreateDocumentModalVisible: false,
+			documentName: "",
+			visibleDescription: "",
+		};
+
+		this.onActTypeChange = this.onActTypeChange.bind(this);
+		this.onFormSubmit = this.onFormSubmit.bind(this);
+		this.closeModal = this.closeModal.bind(this);
+		this.openModal = this.openModal.bind(this);
+		this.cancel = this.cancel.bind(this);
+		this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this);
+		this.onDocumentNameChange = this.onDocumentNameChange.bind(this);
+		this.addDocument = this.addDocument.bind(this);
+		this.canAddDocument = this.canAddDocument.bind(this);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
+				<div className={classes["root"]}>
+					<BackArrow />
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Demander des documents
+					</Typography>
+					<Form onSubmit={this.onFormSubmit}>
+						<div className={classes["form-container"]}>
+							{!this.state.actType && (
+								<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
+							)}
+							{this.state.actType && (
+								<>
+									<div className={classes["checkbox-container"]}>
+										{this.documentsType.map((documentType) => (
+											<CheckBox
+												toolTip="Checkbox with tooltip"
+												option={documentType}
+												key={documentType.value as string}
+											/>
+										))}
+									</div>
+									<div className={classes["add-document-container"]}>
+										<Button
+											icon={PlusIcon}
+											iconposition={"right"}
+											iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
+											variant={EButtonVariant.LINE}
+											onClick={this.openModal}>
+											Ajouter un document
+										</Button>
+									</div>
+									<div className={classes["buttons-container"]}>
+										<Button variant={EButtonVariant.GHOST} onClick={this.cancel}>
+											Annuler
+										</Button>
+										<Button type="submit">Valider</Button>
+									</div>
+								</>
+							)}
+						</div>
+					</Form>
+					<Confirm
+						isOpen={this.state.isCreateDocumentModalVisible}
+						onClose={this.closeModal}
+						onAccept={this.addDocument}
+						canConfirm={this.canAddDocument()}
+						closeBtn
+						header={"Créer un type de document"}
+						cancelText={"Annuler"}
+						confirmText={"Ajouter"}>
+						<div className={classes["add-document-form-container"]}>
+							<InputField
+								name="document_name"
+								fakeplaceholder="Nom du document à ajouter"
+								type="text"
+								onChange={this.onDocumentNameChange}
+							/>
+							<InputField
+								name="description"
+								fakeplaceholder="Description visible par le client"
+								type="text"
+								textarea
+								onChange={this.onVisibleDescriptionChange}
+							/>
+						</div>
+					</Confirm>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private canAddDocument() {
+		if (this.state.documentName === "" || this.state.visibleDescription === "") {
+			return false;
+		}
+		return true;
+	}
+
+	private addDocument() {
+		console.log(this.state.documentName);
+		console.log(this.state.visibleDescription);
+		this.setState({
+			isCreateDocumentModalVisible: false,
+			documentName: "",
+			visibleDescription: "",
+		});
+	}
+
+	private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			visibleDescription: e.target.value,
+		});
+	}
+
+	private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			documentName: e.target.value,
+		});
+	}
+
+	private cancel() {
+		this.setState({
+			actType: null,
+			visibleDescription: "",
+			documentName: "",
+		});
+	}
+
+	private openModal() {
+		this.setState({
+			isCreateDocumentModalVisible: true,
+			visibleDescription: "",
+			documentName: "",
+		});
+	}
+
+	private closeModal() {
+		this.setState({
+			isCreateDocumentModalVisible: false,
+			visibleDescription: "",
+			documentName: "",
+		});
+	}
+
+	private onActTypeChange(selectedOption: IOption) {
+		this.setState({
+			actType: selectedOption,
+		});
+	}
+
+	private onFormSubmit(
+		e: React.FormEvent<HTMLFormElement> | null,
+		values: {
+			[key: string]: string;
+		},
+		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
+	) {
+		console.log(values);
+	}
+}

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

@@ -68,7 +68,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
+			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>

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

@@ -45,13 +45,13 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	}
 
 	private renderCustomerFolders() {
-		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer) => {
+		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
 			return (
-				<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
+				// <div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
-					<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
+				<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />
-				</div>
+				// </div>
 			);
 		});
 		return output ?? null;

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

@@ -1,16 +1,20 @@
-import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import "reflect-metadata";
-import BasePage from "../../Base";
+
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import ChevronIcon from "@Assets/Icons/chevron.svg";
-import classes from "./classes.module.scss";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation from "@Front/Components/DesignSystem/FolderBoxInformation";
-import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
-import ClientSection from "./ClientSection";
-import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import { useRouter } from "next/router";
 
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import ClientSection from "./ClientSection";
+
 type IPropsClass = {
 	selectedFolderUid: string;
 };
@@ -100,6 +104,13 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 		// if()
 		// const selectedFolder = await Fodler.getInstance().getByUid(this.props.selectedFolderUid);
 		// this.setState({ selectedFolder });
+		// console.log(folders);
+		for (const folder of folders) {
+			if (folder.uid === this.props.selectedFolderUid) {
+				this.setState({ selectedFolder: folder });
+				break;
+			}
+		}
 	}
 
 	private doesFolderHaveCustomer(): boolean {
@@ -121,7 +132,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 
 export default function FolderInformation() {
 	const router = useRouter();
-	let { uid } = router.query;
+	let { folderUid } = router.query;
-	uid = uid as string;
+	folderUid = folderUid as string;
-	return <FolderInformationClass selectedFolderUid={uid} />;
+	return <FolderInformationClass selectedFolderUid={folderUid} />;
 }

src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss

@@ -17,6 +17,7 @@
 		.content {
 			margin-top: 32px;
 
+
 			>:not(:last-child) {
 				margin-bottom: 24px;
 			}

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

@@ -9,20 +9,40 @@ import { useRouter } from "next/router";
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
+import { ChangeEvent } from "react";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 
 type IProps = {
 	selectedFolderUid: string;
 };
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
+	inputNameValue: string;
+	inputFirstNameValue: string;
+	inputEmailValue: string;
+	inputPhoneNumberValue: string;
+	isOpenLeavingModal: boolean;
+	doesInputHaveValues: boolean;
 };
 class UpdateClientClass extends BasePage<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
 			selectedFolder: null,
+			inputNameValue: "",
+			inputFirstNameValue: "",
+			inputEmailValue: "",
+			inputPhoneNumberValue: "",
+			isOpenLeavingModal: false,
+			doesInputHaveValues: false,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+		this.onChangeNameInput = this.onChangeNameInput.bind(this);
+		this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
+		this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
+		this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
+		this.openLeavingModal = this.openLeavingModal.bind(this);
+		this.closeLeavingModal = this.closeLeavingModal.bind(this);
 	}
 	public override render(): JSX.Element {
 		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
@@ -33,35 +53,85 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 						<BackArrow url={backwardPath} />
 					</div>
 					<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
-
 					<Form className={classes["form"]}>
 						<div className={classes["content"]}>
-							<InputField name="input field" fakeplaceholder="Nom" />
+							<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} />
-							<InputField name="input field" fakeplaceholder="Prénom" />
+							<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput} />
-							<InputField name="input field" fakeplaceholder="E-mail" isEmail />
+							<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput} />
-							<InputField name="input field" fakeplaceholder="Numéro de téléphone" isPositiveNumber />
+							<InputField
+								name="input field"
+								fakeplaceholder="Numéro de téléphone"
+								isPositiveNumber
+								onChange={this.onChangePhoneNumberInput}
+							/>
 						</div>
 
 						<div className={classes["button-container"]}>
+							{!this.doesInputsHaveValues() ? (
 								<Link href={backwardPath} className={classes["cancel-button"]}>
 									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
 								</Link>
+							) : (
+								<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}>
+									Annuler
+								</Button>
+							)}
 							<Button type="submit">Enregistrer</Button>
 						</div>
 					</Form>
+					<Confirm
+						isOpen={this.state.isOpenLeavingModal}
+						onClose={this.closeLeavingModal}
+						closeBtn
+						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
+						cancelText={"Annuler"}
+						confirmText={"Quitter"}
+						cancelPath={backwardPath}>
+						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
+					</Confirm>
 				</div>
 			</DefaultNotaryDashboard>
 		);
 	}
+	private openLeavingModal(): void {
+		this.setState({ isOpenLeavingModal: true });
+	}
+
+	private closeLeavingModal(): void {
+		this.setState({ isOpenLeavingModal: false });
+	}
+
+	private onChangeNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputNameValue: event.target.value });
+	}
+
+	private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputFirstNameValue: event.target.value });
+	}
+	private onChangeEmailInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputEmailValue: event.target.value });
+	}
+	private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputPhoneNumberValue: event.target.value });
+	}
 
 	private onSelectedFolder(folder: IDashBoardFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
+
+	private doesInputsHaveValues(): boolean {
+		const doesInputsHaveValues: boolean =
+			this.state.inputNameValue !== "" ||
+			this.state.inputFirstNameValue !== "" ||
+			this.state.inputEmailValue !== "" ||
+			this.state.inputPhoneNumberValue !== "";
+		return doesInputsHaveValues;
+	}
 }
 
 export default function UpdateClient() {
 	const router = useRouter();
-	let { uid } = router.query;
+	let { folderUid } = router.query;
-	uid = uid as string;
+	folderUid = folderUid as string;
-	return <UpdateClientClass selectedFolderUid={uid} />;
+	return <UpdateClientClass selectedFolderUid={folderUid} />;
 }

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

@@ -58,7 +58,7 @@ class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
 
 export default function UpdateFolderDescription() {
 	const router = useRouter();
-	let { uid } = router.query;
+	let { folderUid } = router.query;
-	uid = uid as string;
+	folderUid = folderUid as string;
-	return <UpdateFolderDescriptionClass selectedFolderUid={uid} />;
+	return <UpdateFolderDescriptionClass selectedFolderUid={folderUid} />;
 }

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

@@ -80,7 +80,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
 
 export default function UpdateFolderMetadata() {
 	const router = useRouter();
-	let { uid } = router.query;
+	let { folderUid } = router.query;
-	uid = uid as string;
+	folderUid = folderUid as string;
-	return <UpdateFolderMetadataClass selectedFolderUid={uid} />;
+	return <UpdateFolderMetadataClass selectedFolderUid={folderUid} />;
 }

src/front/Themes/variables.scss

@@ -7,8 +7,6 @@
 
 	--font-primary: "Inter", sans-serif;
 
-	--colormerdum: blue;
-
 	--green-flash: #{$green-flash};
 	--blue-flash: #{$blue-flash};
 	--turquoise-flash: #{$turquoise-flash};

src/front/version.json

@@ -1,3 +1,3 @@
 {
-	"version": "v0.4.10"
+	"version": "v0.4.14"
 }

src/pages/folder/[folderUid]/ask-documents/index.tsx

@@ -0,0 +1,5 @@
+import AskDocuments from "@Front/Components/Layouts/Folder/AskDocuments";
+
+export default function Route() {
+	return <AskDocuments />;
+}