✨ Popup done

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

@@ -9,7 +9,7 @@ type IProps = IPropsModal & {
 	cancelText: string | JSX.Element;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
-	isConfirmButtonDisabled: boolean;
+	canConfirm: boolean;
 };
 
 type IState = {};
@@ -19,7 +19,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 		showCancelButton: true,
 		cancelText: "Cancel",
 		confirmText: "Confirm",
-		isConfirmButtonDisabled: false,
+		canConfirm: false,
 		...Modal.defaultProps,
 	};
 
@@ -46,7 +46,7 @@ export default class Confirm extends React.Component<IProps, IState> {
 					</Button>
 				)}
 
-				<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={this.props.isConfirmButtonDisabled}>
+				<Button variant={EButtonVariant.PRIMARY} onClick={this.props.onAccept} disabled={!this.props.canConfirm}>
 					{this.props.confirmText}
 				</Button>
 			</div>

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

@@ -51,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={this.close}>
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />

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

@@ -29,4 +29,10 @@
 	.buttons-container {
 		margin-top: 32px;
 	}
+
+	.add-document-form-container {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
 }

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

@@ -2,6 +2,7 @@ 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";
@@ -16,6 +17,8 @@ type IProps = {};
 type IState = {
 	actType: IOption | null;
 	isCreateDocumentModalVisible: boolean;
+	documentName: string;
+	visibleDescription: string;
 };
 
 export default class AskDocuments extends BasePage<IProps, IState> {
@@ -45,6 +48,8 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		this.state = {
 			actType: null,
 			isCreateDocumentModalVisible: false,
+			documentName: "",
+			visibleDescription: "",
 		};
 
 		this.onActTypeChange = this.onActTypeChange.bind(this);
@@ -52,11 +57,15 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		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={"Dossier"}>
+			<DefaultTemplate title={"Demander des documents"}>
 				<div className={classes["root"]}>
 					<BackArrow />
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
@@ -101,33 +110,83 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 					<Confirm
 						isOpen={this.state.isCreateDocumentModalVisible}
 						onClose={this.closeModal}
-						onAccept={() => {}}
+						onAccept={this.addDocument}
+						canConfirm={this.canAddDocument()}
 						closeBtn
 						header={"Créer un type de document"}
 						cancelText={"Annuler"}
 						confirmText={"Ajouter"}>
-						Blabla
+						<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: "",
 		});
 	}