2024-04-04 13:35:25 +02:00

64 lines
2.1 KiB
TypeScript

import Typography, { ITypo, ITypoColor } 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 from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
export enum EForfeitType {
"standard",
"unlimited",
}
export default function SubscriptionInvite() {
const router = useRouter();
const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);
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);
}
});
const body = {
emails,
};
try {
await Subscriptions.getInstance().post(body);
} catch (e) {
console.error(e);
}
};
return (
<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
<div className={classes["root"]}>
<div className={classes["container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
Inviter vos collaborateurs
</Typography>
{nbOfCollaborators && (
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{nbOfCollaborators} collaborateurs à inviter
</Typography>
)}
<Form className={classes["emails-form"]} onSubmit={sendInvitations}>
{Array.from({ length: nbOfCollaborators }).map((_, index) => {
return <TextField key={index} placeholder="Email" name={"email_" + index} />;
})}
<div className={classes["button-container"]}>
<Button type="submit">Envoyer l'invitation</Button>
</div>
</Form>
</div>
</div>
</DefaultTemplate>
);
}