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;
hasNavTab?: boolean;
defaultFrequency?: EPaymentFrequency;
disableInputs?: boolean;
};
export enum EPaymentFrequency {
@ -72,14 +73,16 @@ export default function SubscribeCheckoutTicket(props: IProps) {
name="paymentFrequency"
value={EPaymentFrequency.yearly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}>
defaultChecked={paymentFrequency === EPaymentFrequency.yearly}
disabled={props.disableInputs}>
<Typography typo={ITypo.P_ERR_18}>Annuel</Typography>
</RadioBox>
<RadioBox
name="paymentFrequency"
value={EPaymentFrequency.monthly.toString()}
onChange={handleFrequencyChange}
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}>
defaultChecked={paymentFrequency === EPaymentFrequency.monthly}
disabled={props.disableInputs}>
<Typography typo={ITypo.P_ERR_18}>Mensuel</Typography>
</RadioBox>
</div>
@ -186,9 +189,11 @@ export default function SubscribeCheckoutTicket(props: IProps) {
)}
</div>
</div>
{!props.disableInputs && (
<Button onClick={handleSubmitPayment} fullwidth className={classes["payment-button"]}>
{hasNavTab ? "Passer au paiement" : "Mettre à jour l'abonnement"}
</Button>
)}
</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;
justify-content: center;
max-width: 1200px;
margin: auto;
.left {
flex: 1;
display: flex;
flex-direction: column;
gap: 32px;

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

@ -3,7 +3,11 @@
gap: 104px;
justify-content: center;
max-width: 1200px;
margin: auto;
.left {
flex: 1;
display: flex;
flex-direction: column;
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 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";
@ -8,6 +7,7 @@ import Button from "@Front/Components/DesignSystem/Button";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { EForfeitType } from "../SubscriptionFacturation";
import SubscribeCheckoutTicket, { EPaymentFrequency } from "../Components/SubscribeCheckoutTicket";
export default function SubscriptionSuccess() {
return (
@ -37,7 +37,12 @@ export default function SubscriptionSuccess() {
</Link>
</div>
<div className={classes["right"]}>
<SubscriptionTicket forfeitType={EForfeitType.standard} />
<SubscribeCheckoutTicket
forfeitType={EForfeitType.standard}
numberOfCollaborators={5}
disableInputs
defaultFrequency={EPaymentFrequency.yearly}
/>
</div>
</div>
</DefaultTemplate>