✨ Intégration Send Documents pages + add send documents button

src/front/Components/Layouts/Folder/FolderInformation/InformationSection/index.tsx

@@ -1,16 +1,17 @@
 import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
 import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
+import Menu from "@Front/Components/DesignSystem/Menu";
+import { IItem } from "@Front/Components/DesignSystem/Menu/MenuItem";
 import Tag, { ETagColor } from "@Front/Components/DesignSystem/Tag";
 import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
 import Module from "@Front/Config/Module";
-import { ArchiveBoxIcon, EllipsisHorizontalIcon, PencilSquareIcon, UsersIcon } from "@heroicons/react/24/outline";
+import { ArchiveBoxIcon, EllipsisHorizontalIcon, PaperAirplaneIcon, PencilSquareIcon, UsersIcon } from "@heroicons/react/24/outline";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-import { useCallback } from "react";
+import { useMemo } from "react";
 
 import { AnchorStatus } from "..";
 import classes from "./classes.module.scss";
-import { IItem } from "@Front/Components/DesignSystem/Menu/MenuItem";
+import Link from "next/link";
-import Menu from "@Front/Components/DesignSystem/Menu";
 
 type IProps = {
 	folder: OfficeFolder | null;
@@ -23,7 +24,7 @@ type IProps = {
 export default function InformationSection(props: IProps) {
 	const { folder, progress, onArchive, anchorStatus, isArchived } = props;
 
-	const getSubMenuElement = useCallback(() => {
+	const menuItems = useMemo(() => {
 		let elements: IItem[] = [];
 
 		// Creating the three elements and adding them conditionnally
@@ -41,31 +42,18 @@ export default function InformationSection(props: IProps) {
 			link: Module.getInstance()
 				.get()
 				.modules.pages.Folder.pages.EditInformations.props.path.replace("[folderUid]", folder?.uid ?? ""),
-			hasSeparator: true,
+			hasSeparator: false,
-		};
-
-		const archiveElement = {
-			icon: <ArchiveBoxIcon />,
-			text: "Archiver le dossier",
-			onClick: onArchive,
-			color: ETypoColor.ERROR_WEAK_CONTRAST,
 		};
 
 		// If the folder is not anchored, we can modify the collaborators and the informations
 		if (anchorStatus === AnchorStatus.NOT_ANCHORED) {
 			elements.push(modifyCollaboratorsElement);
-			// Remove the separator if it's the last item (if the folder is not archived)
-			if (isArchived) modifyInformationsElement.hasSeparator = false;
 
 			elements.push(modifyInformationsElement);
 		}
 
-		// If the folder is not archived, we can archive it
-		if (!isArchived) {
-			elements.push(archiveElement);
-		}
 		return elements;
-	}, [anchorStatus, folder?.uid, isArchived, onArchive]);
+	}, [anchorStatus, folder?.uid]);
 	return (
 		<section className={classes["root"]}>
 			<div className={classes["info-box1"]}>
@@ -88,9 +76,17 @@ export default function InformationSection(props: IProps) {
 				<div className={classes["progress-container"]}>
 					<CircleProgress percentage={progress} />
 					<div className={classes["icon-container"]}>
-						<Menu items={getSubMenuElement()}>
+						<Link
+							href={Module.getInstance()
+								.get()
+								.modules.pages.Folder.pages.SendDocuments.props.path.replace("[folderUid]", folder?.uid ?? "")}
+							title="Envoyer des documents">
+							<IconButton icon={<PaperAirplaneIcon />} variant={EIconButtonVariant.NEUTRAL} />
+						</Link>
+						<Menu items={menuItems}>
 							<IconButton icon={<EllipsisHorizontalIcon />} variant={EIconButtonVariant.NEUTRAL} />
 						</Menu>
+						{!isArchived && <IconButton onClick={onArchive} icon={<ArchiveBoxIcon />} variant={EIconButtonVariant.ERROR} />}
 					</div>
 				</div>
 				<div className={classes["description-container"]}>

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

@@ -0,0 +1,36 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-xl, 32px);
+
+	margin: 24px auto;
+	width: 566px;
+
+	@media (max-width: $screen-m) {
+		width: 474px;
+	}
+
+	@media (max-width: $screen-s) {
+		width: 100%;
+		padding: var(--spacing-md, 16px);
+	}
+
+	.radioboxes {
+		display: flex;
+		flex-direction: column;
+		gap: var(--Radius-lg, 16px);
+	}
+
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xl, 32px);
+
+		.buttons-container {
+			display: flex;
+			gap: var(--spacing-md, 16px);
+		}
+	}
+}

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

@@ -0,0 +1,123 @@
+import backgroundImage from "@Assets/images/background_refonte.svg";
+import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
+import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
+import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
+import Form from "@Front/Components/DesignSystem/Form";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import Module from "@Front/Config/Module";
+import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
+import { OfficeFolder } from "le-coffre-resources/dist/Notary";
+import { useRouter } from "next/router";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import classes from "./classes.module.scss";
+
+enum EClientSelection {
+	ALL_CLIENTS = "all_clients",
+	SELECTED_CLIENTS = "selected_clients",
+}
+
+export default function SendDocuments() {
+	const router = useRouter();
+	let { folderUid } = router.query;
+	const [folder, setFolder] = useState<OfficeFolder | null>(null);
+	const [clientSelection, setClientSelection] = useState<EClientSelection | null>(null);
+
+	const onFormSubmit = useCallback(
+		async (
+			_e: React.FormEvent<HTMLFormElement> | null,
+			_values: {
+				[key: string]: any;
+			},
+			//TODO: when back is done
+		) => {},
+		[],
+	);
+
+	const fetchFolder = useCallback(async () => {
+		Folders.getInstance()
+			.getByUid(folderUid as string, {
+				q: {
+					customers: {
+						include: {
+							contact: true,
+						},
+					},
+				},
+			})
+			.then((folder) => setFolder(folder))
+			.catch((e) => console.warn(e));
+	}, [folderUid]);
+
+	const onClientSelectionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+		setClientSelection(e.target.value as EClientSelection);
+		console.log(e.target.value);
+	}, []);
+
+	useEffect(() => {
+		fetchFolder();
+	}, [fetchFolder]);
+
+	const backUrl = useMemo(
+		() =>
+			Module.getInstance()
+				.get()
+				.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
+		[folderUid],
+	);
+
+	const clientsOptions = useMemo(() => {
+		if (!folder?.customers) return [];
+		return folder.customers.map((customer) => ({
+			id: customer.uid ?? "",
+			label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
+		}));
+	}, [folder]);
+
+	return (
+		<DefaultDoubleSidePage title={"Demander des documents"} image={backgroundImage} showHeader>
+			<div className={classes["root"]}>
+				<BackArrow url={backUrl} />
+				<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
+					Envoyer des documents, sélectionnez les destinataires :
+				</Typography>
+				<div className={classes["radioboxes"]}>
+					<RadioBox
+						name="clients"
+						value={EClientSelection.ALL_CLIENTS}
+						label="Sélectionner tous les clients du dossier"
+						onChange={onClientSelectionChange}
+					/>
+					<RadioBox
+						name="clients"
+						value={EClientSelection.SELECTED_CLIENTS}
+						label="Sélectionner certains clients"
+						onChange={onClientSelectionChange}
+					/>
+				</div>
+
+				<Form onSubmit={onFormSubmit} className={classes["form"]}>
+					{clientSelection === EClientSelection.SELECTED_CLIENTS && (
+						<AutocompleteMultiSelect label="Choisir le ou les clients: " options={clientsOptions} />
+					)}
+					<DragAndDrop title="Glisser ou déposer ou" description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo" />
+
+					<div className={classes["buttons-container"]}>
+						<a href={backUrl}>
+							<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
+								Annuler
+							</Button>
+						</a>
+						<Button type="submit" rightIcon={<PaperAirplaneIcon />}>
+							Envoyer
+						</Button>
+					</div>
+				</Form>
+			</div>
+		</DefaultDoubleSidePage>
+	);
+}

src/front/Config/Module/development.json

@@ -59,6 +59,13 @@
 							"labelKey": "add_client_to_folder"
 						}
 					},
+					"SendDocuments": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/send-documents",
+							"labelKey": "send_documents"
+						}
+					},
 					"AskDocument": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/preprod.json

@@ -59,6 +59,13 @@
 							"labelKey": "add_client_to_folder"
 						}
 					},
+					"SendDocuments": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/send-documents",
+							"labelKey": "send_documents"
+						}
+					},
 					"AskDocument": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/production.json

@@ -59,6 +59,13 @@
 							"labelKey": "add_client_to_folder"
 						}
 					},
+					"SendDocuments": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/send-documents",
+							"labelKey": "send_documents"
+						}
+					},
 					"AskDocument": {
 						"enabled": true,
 						"props": {

src/front/Config/Module/staging.json

@@ -59,6 +59,13 @@
 							"labelKey": "add_client_to_folder"
 						}
 					},
+					"SendDocuments": {
+						"enabled": true,
+						"props": {
+							"path": "/folders/[folderUid]/send-documents",
+							"labelKey": "send_documents"
+						}
+					},
 					"AskDocument": {
 						"enabled": true,
 						"props": {

src/pages/folders/[folderUid]/send-documents/index.tsx

@@ -0,0 +1,5 @@
+import SendDocuments from "@Front/Components/Layouts/Folder/SendDocuments";
+
+export default function Route() {
+	return <SendDocuments />;
+}