✨ Pages success and error done

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@emotion/react": "^11.10.6",
 				"@emotion/styled": "^11.10.6",
+				"@heroicons/react": "^2.1.3",
 				"@mui/material": "^5.11.13",
 				"@types/node": "18.15.1",
 				"@types/react": "18.0.28",
@@ -466,6 +467,14 @@
 			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
 			"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
 		},
+		"node_modules/@heroicons/react": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.1.3.tgz",
+			"integrity": "sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==",
+			"peerDependencies": {
+				"react": ">= 16"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.14",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",

package.json

@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev",
+		"dev": "next dev -p 5005",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",
@@ -12,6 +12,7 @@
 	"dependencies": {
 		"@emotion/react": "^11.10.6",
 		"@emotion/styled": "^11.10.6",
+		"@heroicons/react": "^2.1.3",
 		"@mui/material": "^5.11.13",
 		"@types/node": "18.15.1",
 		"@types/react": "18.0.28",

src/front/Components/DesignSystem/Button/classes.module.scss

@@ -96,6 +96,10 @@
 		flex: 1;
 	}
 
+	&[fullwidthattr="false"] {
+		width: fit-content;
+	}
+
 	&[touppercase="false"] {
 		text-transform: inherit;
 	}
@@ -110,4 +114,4 @@
 		line-height: 22px;
 		text-decoration-line: underline;
 	}
-}
+}

src/front/Components/DesignSystem/Typography/classes.module.scss

@@ -115,6 +115,14 @@
 		letter-spacing: 0.5px;
 	}
 
+	&.Caption_14-semibold {
+		font-style: normal;
+		font-weight: 600;
+		font-size: 14px;
+		line-height: 22px;
+		letter-spacing: 0.5px;
+	}
+
 	&.re-hover {
 		color: $re-hover;
 	}

src/front/Components/DesignSystem/Typography/index.tsx

@@ -29,6 +29,7 @@ export enum ITypo {
 	P_ERR_16 = "Paragraphe-16-error",
 
 	CAPTION_14 = "Caption_14",
+	CAPTION_14_SB = "Caption_14-semibold",
 }
 
 export enum ITypoColor {

src/front/Components/Elements/MessageBox/classes.module.scss

@@ -0,0 +1,30 @@
+.root {
+	display: flex;
+	gap: 24px;
+	padding: 16px;
+
+	svg {
+		width: 20px;
+		height: 20px;
+		min-width: 20px;
+		min-height: 20px;
+	}
+
+	&.info {
+		background-color: var(--Opium-200);
+	}
+
+	&.warning {
+		background-color: var(--Warning-100);
+	}
+
+	&.success {
+		border: 1px solid var(--green-flash);
+		background: #12bf4d0d;
+	}
+
+	&.error {
+		border: 1px solid var(--red-soft);
+		background: #f087711a;
+	}
+}

src/front/Components/Elements/MessageBox/index.tsx

@@ -0,0 +1,39 @@
+import classes from "./classes.module.scss";
+import classNames from "classnames";
+import { InformationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+
+export type IProps = {
+	type: "info" | "warning" | "success" | "error";
+	children?: React.ReactNode;
+	className?: string;
+};
+
+export default function MessageBox(props: IProps) {
+	const { className, type, children } = props;
+	return (
+		<div className={classNames(className, classes["root"], classes[type])}>
+			{getIcon(type)}
+			<div className={classes["content"]}>
+				<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
+					{children}
+				</Typography>
+
+				{children}
+			</div>
+		</div>
+	);
+
+	function getIcon(type: IProps["type"]) {
+		switch (type) {
+			case "info":
+				return <InformationCircleIcon />;
+			case "warning":
+				return <ExclamationTriangleIcon />;
+			case "success":
+				return <InformationCircleIcon />;
+			case "error":
+				return <InformationCircleIcon />;
+		}
+	}
+}

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

@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: 32px;
+}

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

@@ -0,0 +1,26 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+
+export default function SubscriptionClientInfos() {
+	return (
+		<div className={classes["root"]}>
+			<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+				Informations client
+			</Typography>
+			<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+				john.doe@contact.fr
+			</Typography>
+			<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+				Adresse de facturation
+			</Typography>
+			<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+				John Doe <br />
+				23 rue taitbout,
+				<br />
+				75009 Paris
+				<br />
+				France
+			</Typography>
+		</div>
+	);
+}

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

@@ -0,0 +1,17 @@
+.root {
+	display: flex;
+	gap: 104px;
+	justify-content: center;
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+		width: 548px;
+	}
+	.separator {
+		width: 100%;
+		height: 2px;
+		background: var(--grey-medium);
+	}
+}

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

@@ -0,0 +1,41 @@
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import classes from "./classes.module.scss";
+import SubscriptionTicket from "../SubscriptionTicket";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import MessageBox from "@Front/Components/Elements/MessageBox";
+import SubscriptionClientInfos from "../SubscriptionClientInfos";
+import Button from "@Front/Components/DesignSystem/Button";
+
+export default function SubscriptionError() {
+	return (
+		<DefaultTemplate title="Title" hasHeaderLinks={false}>
+			<div className={classes["root"]}>
+				<div className={classes["left"]}>
+					<div className={classes["title"]}>
+						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							Paiement échoué
+						</Typography>
+					</div>
+					<div className={classes["alert"]}>
+						<MessageBox type={"error"}>
+							Votre transaction n'a pas pu être complétée.
+							<br />
+							<br />
+							Malheureusement, nous n'avons pas pu traiter votre paiement et votre abonnement n'a pas été activé. Veuillez
+							vérifier vos informations de paiement et essayer à nouveau.
+						</MessageBox>
+					</div>
+					<div className={classes["separator"]} />
+					<div className={classes["client-infos"]}>
+						<SubscriptionClientInfos />
+					</div>
+					<div className={classes["separator"]} />
+					<Button>Réessayer le paiement</Button>
+				</div>
+				<div className={classes["right"]}>
+					<SubscriptionTicket />
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}

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

@@ -0,0 +1,17 @@
+.root {
+	display: flex;
+	gap: 104px;
+	justify-content: center;
+
+	.left {
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+		width: 548px;
+	}
+	.separator {
+		width: 100%;
+		height: 2px;
+		background: var(--grey-medium);
+	}
+}

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

@@ -0,0 +1,40 @@
+import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+import classes from "./classes.module.scss";
+import SubscriptionTicket from "../SubscriptionTicket";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import MessageBox from "@Front/Components/Elements/MessageBox";
+import SubscriptionClientInfos from "../SubscriptionClientInfos";
+import Button from "@Front/Components/DesignSystem/Button";
+
+export default function SubscriptionSuccess() {
+	return (
+		<DefaultTemplate title="Title" hasHeaderLinks={false}>
+			<div className={classes["root"]}>
+				<div className={classes["left"]}>
+					<div className={classes["title"]}>
+						<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
+							Abonnement réussi !
+						</Typography>
+					</div>
+					<div className={classes["alert"]}>
+						<MessageBox type={"success"}>
+							Votre transaction a été effectuée avec succès !
+							<br />
+							<br />
+							Votre abonnement a été pris en compte et est désormais actif.
+						</MessageBox>
+					</div>
+					<div className={classes["separator"]} />
+					<div className={classes["client-infos"]}>
+						<SubscriptionClientInfos />
+					</div>
+					<div className={classes["separator"]} />
+					<Button>Inviter vos collaborateurs</Button>
+				</div>
+				<div className={classes["right"]}>
+					<SubscriptionTicket />
+				</div>
+			</div>
+		</DefaultTemplate>
+	);
+}

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

@@ -0,0 +1,31 @@
+.root {
+	width: 372px;
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+
+	box-shadow: 0px 8px 10px 0px #00000012;
+	padding: 24px;
+	border-radius: 16px;
+	.top-category {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.category {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+		.line {
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+
+	.separator {
+		width: 100%;
+		height: 2px;
+		background: var(--grey-medium);
+	}
+}

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

@@ -0,0 +1,84 @@
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import classes from "./classes.module.scss";
+
+type IProps = {};
+export default function SubscriptionTicket(props: IProps) {
+	return (
+		<div className={classes["root"]}>
+			<div className={classes["top-category"]}>
+				<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+					Récapitulatif
+				</Typography>
+			</div>
+			<div className={classes["separator"]} />
+
+			<div className={classes["top-category"]}>
+				<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+					Forfait standard
+				</Typography>
+			</div>
+			<div className={classes["separator"]} />
+			<div className={classes["category"]}>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Plan individuel
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						99&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						2 collaborateurs
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						13,98&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["sub-line"]}>
+					<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
+						6,99&nbsp;€ x 2
+					</Typography>
+				</div>
+			</div>
+			<div className={classes["separator"]} />
+			<div className={classes["category"]}>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Sous-total
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						112,98&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						FR TVA
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						14&nbsp;€
+					</Typography>
+				</div>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Taxes
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						14&nbsp;€
+					</Typography>
+				</div>
+			</div>
+			<div className={classes["separator"]} />
+			<div className={classes["category"]}>
+				<div className={classes["line"]}>
+					<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+						Total
+					</Typography>
+					<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
+						112,98&nbsp;€
+					</Typography>
+				</div>
+			</div>
+		</div>
+	);
+}

src/pages/subscription/error/index.tsx

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

src/pages/subscription/success/index.tsx

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