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

✨ Checkout ticket working

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-04 16:32:21 +02:00
parent c4ff23524d
commit 239b73381e
6 changed files with 25 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx
View File

@ -21,6 +21,7 @@ type IProps = {
numberOfCollaborators: number; numberOfCollaborators: number;
hasNavTab?: boolean; hasNavTab?: boolean;
defaultFrequency?: EPaymentFrequency; defaultFrequency?: EPaymentFrequency;
disableInputs?: boolean;
}; };
export enum EPaymentFrequency { export enum EPaymentFrequency {
@ -72,14 +73,16 @@ export default function SubscribeCheckoutTicket(props: IProps) {
name="paymentFrequency" name="paymentFrequency"
value={EPaymentFrequency.yearly.toString()} value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}> defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
disabled={props.disableInputs}>
<Typography typo={ITypo.P_ERR_18}>Annuel</Typography> <Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
</RadioBox> </RadioBox>
<RadioBox <RadioBox
name="paymentFrequency" name="paymentFrequency"
value={EPaymentFrequency.monthly.toString()} value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange} onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}> defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
disabled={props.disableInputs}>
<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography> <Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
</RadioBox> </RadioBox>
</div> </div>
@ -186,9 +189,11 @@ export default function SubscribeCheckoutTicket(props: IProps) {
)} )}
</div> </div>
</div> </div>
{!props.disableInputs && (
<Button onClick={handleSubmitPayment} fullwidth className={classes["payment-button"]}> <Button onClick={handleSubmitPayment} fullwidth className={classes["payment-button"]}>
{hasNavTab ? "Passer au paiement" : "Mettre à jour l'abonnement"} {hasNavTab ? "Passer au paiement" : "Mettre à jour l'abonnement"}
</Button> </Button>
)}
</div> </div>
</div> </div>
); );

31
src/front/Components/Layouts/Subscription/Components/SubscriptionTicket/classes.module.scss
View File

@ -1,31 +0,0 @@
.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);
}
}

87
src/front/Components/Layouts/Subscription/Components/SubscriptionTicket/index.tsx
View File

@ -1,87 +0,0 @@
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import classes from "./classes.module.scss";
import { EForfeitType } from "../../SubscriptionFacturation";
type IProps = {
forfeitType: EForfeitType;
};
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>
);
}

4
src/front/Components/Layouts/Subscription/SubscriptionError/classes.module.scss
View File

@ -3,7 +3,11 @@
gap: 104px; gap: 104px;
justify-content: center; justify-content: center;
max-width: 1200px;
margin: auto;
.left { .left {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;

4
src/front/Components/Layouts/Subscription/SubscriptionSuccess/classes.module.scss
View File

@ -3,7 +3,11 @@
gap: 104px; gap: 104px;
justify-content: center; justify-content: center;
max-width: 1200px;
margin: auto;
.left { .left {
flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;

9
src/front/Components/Layouts/Subscription/SubscriptionSuccess/index.tsx
View File

@ -1,6 +1,5 @@
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import SubscriptionTicket from "../Components/SubscriptionTicket";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import MessageBox from "@Front/Components/Elements/MessageBox"; import MessageBox from "@Front/Components/Elements/MessageBox";
import SubscriptionClientInfos from "../Components/SubscriptionClientInfos"; import SubscriptionClientInfos from "../Components/SubscriptionClientInfos";
@ -8,6 +7,7 @@ import Button from "@Front/Components/DesignSystem/Button";
import Link from "next/link"; import Link from "next/link";
import Module from "@Front/Config/Module"; import Module from "@Front/Config/Module";
import { EForfeitType } from "../SubscriptionFacturation"; import { EForfeitType } from "../SubscriptionFacturation";
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../Components/SubscribeCheckoutTicket";
export default function SubscriptionSuccess() { export default function SubscriptionSuccess() {
return ( return (
@ -37,7 +37,12 @@ export default function SubscriptionSuccess() {
</Link> </Link>
</div> </div>
<div className={classes["right"]}> <div className={classes["right"]}>
<SubscriptionTicket forfeitType={EForfeitType.standard} /> <SubscribeCheckoutTicket
forfeitType={EForfeitType.standard}
numberOfCollaborators={5}
disableInputs
defaultFrequency={EPaymentFrequency.yearly}
/>
</div> </div>
</div> </div>
</DefaultTemplate> </DefaultTemplate>