Merge branch 'feature/ora-lecoffr-278-page-ask-documents' into dev

.vscode/custom.code-snippets

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

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/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/Modal/Confirm/index.tsx

@@ -1,5 +1,7 @@
-import Button, { EButtonVariant } from "../../Button";
+import React from "react";
+
 import Modal, { IProps as IPropsModal } from "..";
+import Button, { EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 import React from "react";
 import Link from "next/link";
@@ -10,7 +12,7 @@ type IProps = IPropsModal & {
 	cancelPath?: string;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
-	isConfirmButtonDisabled: boolean;
+	canConfirm: boolean;
 };
 
 type IState = {};
@@ -20,7 +22,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		showCancelButton: true,
 		cancelText: "Cancel",
 		confirmText: "Confirm",
-		isConfirmButtonDisabled: false,
+		canConfirm: false,
 		...Modal.defaultProps,
 	};
 

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 });
+		this.props.onClose();
-		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/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";
@@ -94,9 +95,11 @@ export default class UserFolder extends React.Component<IProps, IState> {
 							/>
 						</div>
 						<div className={classes["button-container"]}>
-							<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
+							<Link href={`/folder/${this.props.folder.uid}/ask-documents`}>
-								Demander un autre document{" "}
+								<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
-							</Button>
+									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/AskDocuments/classes.module.scss

@@ -0,0 +1,42 @@
+@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;
+		}
+	}
+
+	.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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+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 (
+			<DefaultTemplate title={"Demander des documents"}>
+				<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>
+			</DefaultTemplate>
+		);
+	}
+
+	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/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/pages/folder/[uid]/ask-documents/index.tsx

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