Merge branch 'dev' of https://github.com/smart-chain-fr/leCoffre-front into dev

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

@@ -83,3 +83,9 @@
 		margin-bottom: 12px;
 	}
 }
+
+.modal-content{
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+}

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

@@ -65,6 +65,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	public override render(): JSX.Element {
+		console.log("Reason in state : ", this.state.refusedReason);
 		return (
 			<div
 				className={classNames(
@@ -138,12 +139,12 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 					onAccept={this.onCloseModalShowRefusedReason}
 					closeBtn
 					header={"Motif du refus"}
-					confirmText={"J’ai compris"}>
+					confirmText={"J'ai compris"}>
 					<div className={classes["modal-content"]}>
 						<Typography typo={ITypo.P_16} className={classes["text"]}>
 							Votre document a été refusé pour la raison suivante :
 						</Typography>
-						<InputField textarea fakeplaceholder={"Description"} value={"this.state.refusedReason"} />
+						<InputField textarea fakeplaceholder={"Description"} defaultValue={this.state.refusedReason} readOnly />
 					</div>
 				</Confirm>
 				;
@@ -200,7 +201,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 				return (
 					<Typography typo={ITypo.CAPTION_14} color={ITypoColor.RE_HOVER}>
 						Document non conforme
-						{history.refused_reason !== "" && (
+						{history.refused_reason && history.refused_reason.length > 0 && (
 							<Button
 								variant={EButtonVariant.LINE}
 								className={classes["refused-button"]}

src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss

@@ -12,6 +12,10 @@
 		font-weight: 400;
 		font-size: 18px;
 		line-height: 22px;
+
+		&:read-only{
+			cursor: not-allowed;
+		}
 	}
 
 	.input {
@@ -74,7 +78,6 @@
 			&::-webkit-outer-spin-button {
 				-webkit-appearance: none;
 				margin: 0;
-				-moz-appearance: textfield;
 			}
 
 			/* For IE 10+ */

src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx

@@ -51,7 +51,8 @@ export default class InputField extends BaseField<IProps> {
 							className={
 								this.props.className ? [classes["textarea"], classes[this.props.className]].join(" ") : classes["textarea"]
 							}
-							value={value}>
+							value={value}
+							readOnly={this.props.readOnly}>
 							{value.toString()}
 						</textarea>
 						<div className={classes["fake-placeholder"]}>

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

@@ -79,16 +79,35 @@ export default class Modal extends React.Component<IProps, IState> {
 					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" || e.key === "Backspace") {
+			this.props.onClose();
+		}
+	}
 }

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

@@ -138,7 +138,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
 
 	private calculateDocumentsPercentageProgress(): number {
 		if (!this.props.customer.documents) return 0;
-		const totalDocuments: number = this.props.customer.documents.length;
+		const documents = this.props.customer.documents.filter((document) => document.folder?.uid === this.props.folder.uid);
+		const totalDocuments: number = documents.length;
 		const numberDocumentsRefused: number = this.getDocumentsByStatus(EDocumentStatus.REFUSED)?.length || 0;
 		const numberDocumentsAsked: number = this.getDocumentsByStatus(EDocumentStatus.ASKED)?.length || 0;
 		const depositedDocuments: number = totalDocuments - numberDocumentsAsked - numberDocumentsRefused;