✨ Whole page working

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

@@ -6,8 +6,8 @@ import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
 
 type IProps = {
+	name?: string;
 	option: IOption;
-	name: string;
 	toolTip?: string;
 };
 
@@ -20,7 +20,11 @@ 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} value={this.props.option.value as string} />
+					<input
+						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>

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

@@ -7,9 +7,6 @@
 
 	.form-container {
 		margin-top: 16px;
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
 
 		.checkbox-container {
 			margin-top: 32px;
@@ -17,6 +14,16 @@
 			grid-template-columns: repeat(2, 1fr);
 			gap: 24px;
 		}
+
+		.buttons-container {
+			display: flex;
+			gap: 32px;
+			margin-top: 32px;
+		}
+	}
+
+	.add-document-container {
+		margin-top: 32px;
 	}
 
 	.buttons-container {

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

@@ -1,4 +1,5 @@
-import Button from "@Front/Components/DesignSystem/Button";
+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 Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
@@ -42,17 +43,15 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		super(props);
 
 		this.state = {
-			actType: {
-				label: "Divorce",
-				value: "divorce",
-			},
-			isCreateDocumentModalVisible: true,
+			actType: null,
+			isCreateDocumentModalVisible: false,
 		};
 
 		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);
 	}
 
 	public override render(): JSX.Element {
@@ -69,22 +68,36 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 								<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
 							)}
 							{this.state.actType && (
+								<>
 									<div className={classes["checkbox-container"]}>
 										{this.documentsType.map((documentType) => (
 											<CheckBox
-											name="document_type"
 												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>
-					<Button type="submit" onClick={this.openModal}>
-						Open modal
-					</Button>
 					<Confirm
 						isOpen={this.state.isCreateDocumentModalVisible}
 						onClose={this.closeModal}
@@ -100,11 +113,12 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 		);
 	}
 
-	override componentDidMount(): void {
-		setTimeout(() => {
-			debugger;
-		}, 3000);
+	private cancel() {
+		this.setState({
+			actType: null,
+		});
 	}
+
 	private openModal() {
 		this.setState({
 			isCreateDocumentModalVisible: true,
@@ -129,5 +143,7 @@ export default class AskDocuments extends BasePage<IProps, IState> {
 			[key: string]: string;
 		},
 		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
-	) {}
+	) {
+		console.log(values);
+	}
 }