Invite collaborators almost working

This commit is contained in:
Maxime Lalo 2024-04-04 11:55:51 +02:00
parent ba451cbfa9
commit 62997b8f4d
4 changed files with 104 additions and 21 deletions

41
package-lock.json generated
View File

@ -162,9 +162,9 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.24.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.1.tgz",
"integrity": "sha512-+BIznRzyqBf+2wCTxcKE3wDjfGeCoVE61KSHGpkzqrLi8qxqFwBeUFyId2cxkTmm55fzDGnm0+yCxaxygrLUnQ==",
"version": "7.24.4",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
"integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
"dependencies": {
"regenerator-runtime": "^0.14.0"
},
@ -474,23 +474,23 @@
}
},
"node_modules/@mui/core-downloads-tracker": {
"version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz",
"integrity": "sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==",
"version": "5.15.15",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
"integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
}
},
"node_modules/@mui/material": {
"version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.14.tgz",
"integrity": "sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==",
"version": "5.15.15",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
"integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/base": "5.0.0-beta.40",
"@mui/core-downloads-tracker": "^5.15.14",
"@mui/system": "^5.15.14",
"@mui/core-downloads-tracker": "^5.15.15",
"@mui/system": "^5.15.15",
"@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14",
"@types/react-transition-group": "^4.4.10",
@ -584,9 +584,9 @@
}
},
"node_modules/@mui/system": {
"version": "5.15.14",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.14.tgz",
"integrity": "sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==",
"version": "5.15.15",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
"integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
"dependencies": {
"@babel/runtime": "^7.23.9",
"@mui/private-theming": "^5.15.14",
@ -1391,13 +1391,12 @@
"optional": true
},
"node_modules/bare-fs": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.2.tgz",
"integrity": "sha512-X9IqgvyB0/VA5OZJyb5ZstoN62AzD7YxVGog13kkfYWYqJYcK0kcqLZ6TrmH5qr4/8//ejVcX4x/a0UvaogXmA==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-2.2.3.tgz",
"integrity": "sha512-amG72llr9pstfXOBOHve1WjiuKKAMnebcmMbPWDZ7BCevAoJLpugjuAPRsDINEyjT0a6tbaVx3DctkXIRbLuJw==",
"optional": true,
"dependencies": {
"bare-events": "^2.0.0",
"bare-os": "^2.0.0",
"bare-path": "^2.0.0",
"streamx": "^2.13.0"
}
@ -4481,9 +4480,9 @@
}
},
"node_modules/sass": {
"version": "1.72.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.72.0.tgz",
"integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
"version": "1.74.1",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz",
"integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==",
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",

View File

@ -0,0 +1,23 @@
.root {
max-width: 1400px;
margin: auto;
.container {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
gap: 32px;
.emails-form {
display: flex;
flex-direction: column;
gap: 32px;
.button-container {
display: flex;
justify-content: center;
}
}
}
}

View File

@ -0,0 +1,56 @@
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";
export enum EForfeitType {
"standard",
"unlimited",
}
export default function SubscriptionInvite() {
const router = useRouter();
const nbOfCollaborators = parseInt(router.query["nbOfCollaborators"] as string);
const sendInvitations = (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);
}
});
console.log(emails);
};
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>
);
}

View File

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