✨ multiple email lines working

src/front/Components/Layouts/Subscription/SubscriptionInvite/classes.module.scss

@@ -14,6 +14,21 @@
 			flex-direction: column;
 			gap: 32px;
 
+			.input-container {
+				display: flex;
+				gap: 16px;
+				justify-content: flex-start;
+				align-items: center;
+				> span {
+					width: 100%;
+					flex: 1;
+				}
+			}
+			.add-line-container {
+				display: flex;
+				justify-content: flex-start;
+			}
+
 			.button-container {
 				display: flex;
 				justify-content: center;

src/front/Components/Layouts/Subscription/SubscriptionInvite/index.tsx

@@ -3,17 +3,40 @@ import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import { useRouter } from "next/router";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Button from "@Front/Components/DesignSystem/Button";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
+import { useCallback, useState } from "react";
+import { TrashIcon } from "@heroicons/react/24/outline";
+import PlusIcon from "@Assets/Icons/plus.svg";
 
 export enum EForfeitType {
 	"standard",
 	"unlimited",
 }
+type EmailLine = {
+	element: JSX.Element;
+	id: number;
+};
+
 export default function SubscriptionInvite() {
 	const router = useRouter();
 	const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);
+	const [incrementalId, setIncrementalId] = useState(isNaN(nbOfCollaborators) ? 0 : nbOfCollaborators);
+
+	const getInitialLines = () => {
+		const linesToGet = isNaN(nbOfCollaborators) ? 1 : nbOfCollaborators;
+		const lines: EmailLine[] = [];
+		for (let i = 0; i < linesToGet; i++) {
+			lines.push({
+				element: <TextField key={i} name={`email_${i}`} placeholder="Email" className={classes["input"]} required />,
+				id: i,
+			});
+		}
+		return lines;
+	};
+
+	const [lines, setLines] = useState<EmailLine[]>(getInitialLines());
 
 	const sendInvitations = async (e: React.FormEvent<HTMLFormElement> | null) => {
 		if (!e) return;
@@ -27,15 +50,32 @@ export default function SubscriptionInvite() {
 				emails.push(element.value);
 			}
 		});
-		const body = {
-			emails,
-		};
+
 		try {
-			await Subscriptions.getInstance().post(body);
+			await Subscriptions.getInstance().post({
+				emails,
+			});
 		} catch (e) {
 			console.error(e);
 		}
 	};
+
+	const addLine = useCallback(() => {
+		const newLine: EmailLine = {
+			element: (
+				<TextField key={lines.length} name={`email_${lines.length}`} placeholder="Email" className={classes["input"]} required />
+			),
+			id: incrementalId + 1,
+		};
+		setIncrementalId(incrementalId + 1);
+		setLines((prev) => [...prev, newLine]);
+	}, [incrementalId, lines]);
+
+	const deleteLine = (e: React.MouseEvent<SVGSVGElement>) => {
+		const lineId = parseInt(e.currentTarget.getAttribute("data-line") as string);
+		setLines((prev) => prev.filter((line) => line.id !== lineId));
+	};
+
 	return (
 		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
 			<div className={classes["root"]}>
@@ -49,9 +89,27 @@ export default function SubscriptionInvite() {
 						</Typography>
 					)}
 					<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
-						{Array.from({ length: nbOfCollaborators }).map((_, index) => {
-							return <TextField key={index} placeholder="Email" name={"email_" + index} />;
-						})}
+						{lines.map((line, index) => (
+							<div key={line.id} className={classes["input-container"]}>
+								{line.element}
+								{!nbOfCollaborators && (
+									<TrashIcon
+										width="20"
+										height="20"
+										data-line={line.id}
+										onClick={deleteLine}
+										visibility={index === 0 ? "hidden" : "visible"}
+									/>
+								)}
+							</div>
+						))}
+						{isNaN(nbOfCollaborators) && (
+							<div className={classes["add-line-container"]}>
+								<Button onClick={addLine} variant={EButtonVariant.LINE} icon={PlusIcon}>
+									Ajouter une adresse email
+								</Button>
+							</div>
+						)}
 						<div className={classes["button-container"]}>
 							<Button type="submit">Envoyer l'invitation</Button>
 						</div>