import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import SubscriptionTicket from "../Components/SubscriptionTicket";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import MessageBox from "@Front/Components/Elements/MessageBox";
import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
import Button from "@Front/Components/DesignSystem/Button";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { EForfeitType } from "../SubscriptionFacturation";

export default function SubscriptionSuccess() {
	return (
		<DefaultTemplate title="Abonnement réussi">
			<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"]} />
					<Link href={Module.getInstance().get().modules.pages.Subscription.pages.Invite.props.path}>
						<Button>Inviter vos collaborateurs</Button>
					</Link>
				</div>
				<div className={classes["right"]}>
					<SubscriptionTicket forfeitType={EForfeitType.standard} />
				</div>
			</div>
		</DefaultTemplate>
	);
}