4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Facturation page working

Browse Source
This commit is contained in:
Maxime Lalo 2024-03-29 11:05:53 +01:00
parent 39d7ec6421
commit 6ca191199a
3 changed files with 217 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss Normal file
View File

@ -0,0 +1,83 @@
@import "@Themes/constants.scss";
.root {
display: flex;
justify-content: baseline;
align-items: center;
flex-direction: column;
gap: 64px;
max-width: 1000px;
margin: auto;
.top-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.forfeits-container {
display: flex;
gap: 32px;
width: 100%;
@media (max-width: $screen-s) {
flex-direction: column;
}
.forfeit-block {
flex: 1;
padding: 32px;
border: 1px solid black;
display: flex;
flex-direction: column;
gap: 32px;
&[data-inactive="true"] {
border: 1px solid #e7e7e7;
}
.forfeit-header {
display: flex;
justify-content: space-between;
.left {
display: flex;
flex-direction: column;
}
.active-plan {
@media (max-width: $screen-s) {
display: none;
}
}
}
.separator {
border-bottom: 1px solid black;
}
.price-container {
display: flex;
flex-direction: column;
gap: 8px;
}
}
}
.actions-container {
display: flex;
align-items: center;
gap: 48px;
justify-content: flex-end;
justify-self: flex-end;
align-self: flex-end;
margin-bottom: 64px;
@media (max-width: $screen-s) {
flex-direction: column-reverse;
align-self: center;
justify-self: center;
}
}
}

129
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx Normal file
View File

@ -0,0 +1,129 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useState } from "react";
enum EForfeitType {
"standard",
"unlimited",
}
export default function SubscriptionFacturation() {
const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
return (
<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
<div className={classes["root"]}>
<div className={classes["top-container"]}>
<div className={classes["top-container-title"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
Facturation
</Typography>
</div>
<div className={classes["sub-title"]}>
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK}>
Nos forfaits sont adaptés à la taille de votre office
</Typography>
</div>
</div>
<div className={classes["forfeits-container"]}>
<div className={classes["forfeit-block"]} data-inactive={forfeitType !== EForfeitType.standard}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
Forfait standard
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par utilisateur
</Typography>
</div>
{forfeitType === EForfeitType.standard && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
Plan actif
</Typography>
</div>
)}
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
99€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
+ 6,99€ / collaborateur / mois
</Typography>
</div>
<div className={classes["button-container"]}>
{forfeitType !== EForfeitType.standard && (
<Button fullwidth variant={EButtonVariant.GHOST}>
Rétrograder mon abonnement
</Button>
)}
{forfeitType === EForfeitType.standard && (
<Button fullwidth variant={EButtonVariant.PRIMARY}>
Gérer mes collaborateurs
</Button>
)}
</div>
</div>
<div className={classes["forfeit-block"]} data-inactive={forfeitType === EForfeitType.standard}>
<div className={classes["forfeit-header"]}>
<div className={classes["left"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
Forfait illimité
</Typography>
<Typography typo={ITypo.P_16} color={ITypoColor.PINK_FLASH}>
Plan par office
</Typography>
</div>
{forfeitType !== EForfeitType.standard && (
<div className={classes["active-plan"]}>
<Typography typo={ITypo.P_18} color={ITypoColor.GREEN_FLASH}>
Plan actif
</Typography>
</div>
)}
</div>
<div className={classes["separator"]} />
<div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
249€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp;
</Typography>
/ mois
</Typography>
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
Sans limite de collaborateurs
</Typography>
</div>
<div className={classes["button-container"]}>
{forfeitType !== EForfeitType.standard && (
<Button fullwidth variant={EButtonVariant.PRIMARY} disabled>
Abonnement Max Activé
</Button>
)}
{forfeitType === EForfeitType.standard && (
<Button fullwidth variant={EButtonVariant.GHOST}>
Améliorer mon abonnement
</Button>
)}
</div>
</div>
</div>
<div className={classes["actions-container"]}>
<Button variant={EButtonVariant.LINE}>
<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
Arrêter l'abonnement
</Typography>
</Button>
<Button>Gérer la facturation</Button>
</div>
</div>
</DefaultTemplate>
);
}

5
src/pages/subscription/facturation/index.tsx Normal file
View File

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