🐛 Fixing design system

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,9 +1,12 @@
 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 = {
+	option: IOption;
 	name: string;
 	toolTip?: string;
 };
@@ -17,8 +20,8 @@ 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 type="checkbox" name={this.props.name} value={this.props.option.value as string} />
-					{this.props.name}
+					{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,8 +1,9 @@
-import Button, { EButtonVariant } from "../../Button";
-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;

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

@@ -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}
@@ -52,7 +53,7 @@ export default class Modal extends React.Component<IProps, IState> {
 				<div className={classes["background"]} onClick={this.close} />
 				<div
 					className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
-					onClick={onClick}>
+					onClick={this.close}>
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@@ -71,18 +72,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.animationDelay);
 	}
 }

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

@@ -1,48 +1,24 @@
 @import "@Themes/constants.scss";
 
 .root {
-	margin: 64px;
-	width: 530px;
-
-	@media (max-width: $screen-l) {
-		width: 100%;
-		margin: 64px 0;
-		padding: 0 64px;
-	}
-
-	@media (max-width: $screen-m) {
-		padding: 0 16px 0 16px;
-	}
-
 	.title {
 		margin-top: 24px;
 	}
 
-	.subtitle {
-		margin-top: 32px;
-	}
-
 	.form-container {
 		margin-top: 16px;
 		display: flex;
 		flex-direction: column;
 		gap: 24px;
-	}
 
-	.access-container {
+		.checkbox-container {
-		margin-top: 16px;
+			margin-top: 32px;
-
+			display: grid;
-		.radio-container {
+			grid-template-columns: repeat(2, 1fr);
-			margin-top: 16px;
+			gap: 24px;
-			display: flex;
-			flex-direction: column;
-			gap: 16px;
 		}
 	}
 
-	.collaborators-container {
-		margin-top: 32px;
-	}
 	.buttons-container {
 		margin-top: 32px;
 	}

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

@@ -1,71 +1,58 @@
 import Button 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 MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
-import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 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 { ActionMeta, MultiValue } from "react-select";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 
-type IFormValues = {
-	folder_number: number;
-	entitled: string;
-	act_type: IOption | null;
-	personal_note: string;
-	collaborators: MultiValue<IOption>;
-};
-
 type IProps = {};
 type IState = {
-	folder_access: string;
+	actType: IOption | null;
-	formValues: IFormValues;
 	isCreateDocumentModalVisible: boolean;
 };
-export default class AskDocuments extends BasePage<IProps, IState> {
-	private collaboratorsOptions: IOption[] = [
-		{ label: "John Doe", value: "john_doe" },
-		{ label: "Éric Dupont", value: "eric_dupont" },
-		{ label: "Julien Doe", value: "julien_doe" },
-		{ label: "Nathalie Costa", value: "nathalie_costa" },
-		{ label: "Max Durant", value: "max_durant" },
-		{ label: "Jane Doe", value: "jane_doe" },
-	];
 
+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 = {
-			folder_access: "",
+			actType: {
-			formValues: {
+				label: "Divorce",
-				folder_number: NaN,
+				value: "divorce",
-				entitled: "",
-				act_type: null,
-				personal_note: "",
-				collaborators: [],
 			},
-			isCreateDocumentModalVisible: false,
+			isCreateDocumentModalVisible: true,
 		};
 
-		this.radioOnChange = this.radioOnChange.bind(this);
-		this.onFolderNumberChange = this.onFolderNumberChange.bind(this);
-		this.onEntitleChange = this.onEntitleChange.bind(this);
 		this.onActTypeChange = this.onActTypeChange.bind(this);
-		this.onPersonalNoteChange = this.onPersonalNoteChange.bind(this);
+		this.onFormSubmit = this.onFormSubmit.bind(this);
-		this.onCollaboratorsChange = this.onCollaboratorsChange.bind(this);
+		this.closeModal = this.closeModal.bind(this);
-		this.isFormSubmittable = this.isFormSubmittable.bind(this);
+		this.openModal = this.openModal.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -78,53 +65,29 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 					</Typography>
 					<Form onSubmit={this.onFormSubmit}>
 						<div className={classes["form-container"]}>
-							<InputField
+							{!this.state.actType && (
-								name="folder_number"
+								<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
-								fakeplaceholder="Numéro de dossier"
+							)}
-								type="number"
+							{this.state.actType && (
-								onChange={this.onFolderNumberChange}
+								<div className={classes["checkbox-container"]}>
-							/>
+									{this.documentsType.map((documentType) => (
-							<InputField name="entitled" fakeplaceholder="Intitulé" onChange={this.onEntitleChange} />
+										<CheckBox
-							<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
+											name="document_type"
-							<InputField
+											toolTip="Checkbox with tooltip"
-								name="personal_note"
+											option={documentType}
-								fakeplaceholder="Note personnelle"
+											key={documentType.value as string}
-								textarea
+										/>
-								onChange={this.onPersonalNoteChange}
+									))}
-							/>
-						</div>
-						<div className={classes["access-container"]}>
-							<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
-								Accès au dossier
-							</Typography>
-							<div className={classes["radio-container"]}>
-								<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="whole_office">
-									Sélectionner tout l'office
-								</RadioBox>
-								<RadioBox name="file_access" onChange={this.radioOnChange} value="select_collaborators">
-									Sélectionner certains collaborateurs
-								</RadioBox>
-							</div>
-							{this.state.folder_access === "select_collaborators" && (
-								<div className={classes["collaborators-container"]}>
-									<MultiSelect
-										options={this.collaboratorsOptions}
-										placeholder="Sélectionner les collaborateurs"
-										onChange={this.onCollaboratorsChange}
-										defaultValue={this.state.formValues.collaborators ?? []}
-									/>
 								</div>
 							)}
-							<div className={classes["buttons-container"]}>
-								<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
-									Créer un dossier
-								</Button>
-							</div>
 						</div>
 					</Form>
+					<Button type="submit" onClick={this.openModal}>
+						Open modal
+					</Button>
 					<Confirm
 						isOpen={this.state.isCreateDocumentModalVisible}
-						onClose={() => {}}
+						onClose={this.closeModal}
 						onAccept={() => {}}
 						closeBtn
 						header={"Créer un type de document"}
@@ -137,48 +100,21 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		);
 	}
 
-	private onFolderNumberChange(e: React.ChangeEvent<HTMLInputElement>) {
+	private openModal() {
 		this.setState({
-			formValues: {
+			isCreateDocumentModalVisible: true,
-				...this.state.formValues,
-				folder_number: parseInt(e.target.value),
-			},
 		});
 	}
 
-	private onEntitleChange(e: React.ChangeEvent<HTMLInputElement>) {
+	private closeModal() {
 		this.setState({
-			formValues: {
+			isCreateDocumentModalVisible: false,
-				...this.state.formValues,
-				entitled: e.target.value,
-			},
 		});
 	}
 
 	private onActTypeChange(selectedOption: IOption) {
 		this.setState({
-			formValues: {
+			actType: selectedOption,
-				...this.state.formValues,
-				act_type: selectedOption,
-			},
-		});
-	}
-
-	private onPersonalNoteChange(e: React.ChangeEvent<HTMLInputElement>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				personal_note: e.target.value,
-			},
-		});
-	}
-
-	private onCollaboratorsChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
-		this.setState({
-			formValues: {
-				...this.state.formValues,
-				collaborators: newValue,
-			},
 		});
 	}
 
@@ -189,27 +125,4 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		},
 		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
 	) {}
-
-	private isFormSubmittable(): boolean {
-		if (
-			this.state.formValues.entitled === "" ||
-			this.state.formValues.personal_note === "" ||
-			Number.isNaN(this.state.formValues.folder_number) ||
-			this.state.formValues.act_type === null
-		) {
-			return false;
-		}
-
-		if (this.state.folder_access === "select_collaborators" && this.state.formValues.collaborators.length === 0) {
-			return false;
-		}
-
-		return true;
-	}
-
-	private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
-		this.setState({
-			folder_access: e.target.value,
-		});
-	}
 }