125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
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, { EButtonstyletype, 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";
|
|
import Module from "@Front/Config/Module";
|
|
|
|
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;
|
|
e.preventDefault();
|
|
const form = e.target as HTMLFormElement;
|
|
const emails: string[] = [];
|
|
Object.keys(form.elements).forEach((key) => {
|
|
if (isNaN(parseInt(key))) return;
|
|
const element = form.elements[key as any] as HTMLInputElement;
|
|
if (element.name.includes("email_")) {
|
|
emails.push(element.value);
|
|
}
|
|
});
|
|
|
|
try {
|
|
await Subscriptions.getInstance().post({
|
|
emails,
|
|
});
|
|
router.push(Module.getInstance().get().modules.pages.Subscription.pages.Manage.props.path);
|
|
} 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" hasBackArrow>
|
|
<div className={classes["root"]}>
|
|
<div className={classes["container"]}>
|
|
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
Inviter vos collaborateurs
|
|
</Typography>
|
|
{!isNaN(nbOfCollaborators) && (
|
|
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
{nbOfCollaborators} collaborateurs à inviter
|
|
</Typography>
|
|
)}
|
|
{isNaN(nbOfCollaborators) && (
|
|
<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
Collaborateurs illimités
|
|
</Typography>
|
|
)}
|
|
<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
|
|
{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.PRIMARY} styletype={EButtonstyletype.TEXT}>
|
|
Ajouter une adresse email
|
|
</Button>
|
|
</div>
|
|
)}
|
|
<div className={classes["button-container"]}>
|
|
<Button type="submit">Envoyer l'invitation</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</div>
|
|
</DefaultTemplate>
|
|
);
|
|
}
|