From 5763f380e2aaf05ba1fcddf76b4d2b0d0f407150 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 20 Apr 2023 16:34:47 +0200
Subject: [PATCH] :sparkles: Refuse popup working

---
 .../DesignSystem/Modal/Confirm/index.tsx      |  2 +-
 .../Folder/ViewDocuments/classes.module.scss  |  6 +++
 .../Layouts/Folder/ViewDocuments/index.tsx    | 40 +++++++++++++++++--
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
index a873b69e..4d36d317 100644
--- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
@@ -21,7 +21,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		showCancelButton: true,
 		cancelText: "Cancel",
 		confirmText: "Confirm",
-		canConfirm: false,
+		canConfirm: true,
 		...Modal.defaultProps,
 	};
 
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
index 2e179117..22d490df 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss
@@ -25,4 +25,10 @@
 			flex-direction: column-reverse;
 		}
 	}
+
+	.refuse-document-container {
+		.refuse-text {
+			margin-bottom: 24px;
+		}
+	}
 }
diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
index 798a7f72..55bbbb26 100644
--- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
+++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx
@@ -1,5 +1,6 @@
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FilePreview from "@Front/Components/DesignSystem/FilePreview";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
@@ -12,6 +13,7 @@ type IProps = {};
 type IState = {
 	isRefuseModalVisible: boolean;
 	isValidateModalVisible: boolean;
+	refuseText: string;
 };
 
 export default class ViewDocuments extends BasePage<IProps, IState> {
@@ -21,16 +23,22 @@ export default class ViewDocuments extends BasePage<IProps, IState> {
 		this.state = {
 			isValidateModalVisible: false,
 			isRefuseModalVisible: false,
+			refuseText: "",
 		};
 
 		this.closeModals = this.closeModals.bind(this);
 		this.openValidateModal = this.openValidateModal.bind(this);
 		this.openRefuseModal = this.openRefuseModal.bind(this);
+		this.onRefuseTextChange = this.onRefuseTextChange.bind(this);
 	}
 
 	public override render(): JSX.Element {
 		return (
-			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}} hasBackArrow mobileBackText="Retour aux documents">
+			<DefaultNotaryDashboard
+				title={"Demander des documents"}
+				onSelectedFolder={() => {}}
+				hasBackArrow
+				mobileBackText="Retour aux documents">
 				<div className={classes["root"]}>
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
 						App 23 rue Torus Toulon
@@ -42,24 +50,50 @@ export default class ViewDocuments extends BasePage<IProps, IState> {
 						<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
 					</div>
 					<div className={classes["buttons-container"]}>
-						<Button variant={EButtonVariant.GHOST}>Refuser</Button>
-						<Button>Valider et ancrer</Button>
+						<Button variant={EButtonVariant.GHOST} onClick={this.openRefuseModal}>
+							Refuser
+						</Button>
+						<Button onClick={this.openValidateModal}>Valider et ancrer</Button>
 						<Button disabled>Télécharger</Button>
 					</div>
 					<Confirm
 						isOpen={this.state.isValidateModalVisible}
 						onClose={this.closeModals}
+						onAccept={this.closeModals}
 						closeBtn
 						header={"Créer un type de document"}
 						cancelText={"Annuler"}
 						confirmText={"Ajouter"}>
 						<div className={classes["add-document-form-container"]}></div>
 					</Confirm>
+					<Confirm
+						isOpen={this.state.isRefuseModalVisible}
+						onClose={this.closeModals}
+						onAccept={this.closeModals}
+						closeBtn
+						header={"Refuser le document ?"}
+						cancelText={"Annuler"}
+						confirmText={"Refuser"}
+						canConfirm={this.state.refuseText !== ""}>
+						<div className={classes["refuse-document-container"]}>
+							<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["refuse-text"]}>
+								Veuillez indiquer au client le motif du refus de son document afin qu'il puisse vous renvoyer une bonne
+								version.
+							</Typography>
+							<InputField fakeplaceholder="Motif du refus" textarea onChange={this.onRefuseTextChange} />
+						</div>
+					</Confirm>
 				</div>
 			</DefaultNotaryDashboard>
 		);
 	}
 
+	private onRefuseTextChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			refuseText: e.target.value,
+		});
+	}
+
 	private openValidateModal() {
 		this.setState({
 			isValidateModalVisible: true,