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

Merge branch 'dev' into staging

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-15 16:42:23 +02:00
commit e9ef22bb55
8 changed files with 72 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -32,6 +32,7 @@
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"sass": "^1.59.2", "sass": "^1.59.2",
"sharp": "^0.32.1", "sharp": "^0.32.1",
"ts-pattern": "^5.1.1",
"typescript": "4.9.5", "typescript": "4.9.5",
"uuidv4": "^6.2.13" "uuidv4": "^6.2.13"
} }
@ -4910,6 +4911,11 @@
"node": ">=8.0" "node": ">=8.0"
} }
}, },
"node_modules/ts-pattern": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.1.1.tgz",
"integrity": "sha512-i+owkHr5RYdQxj8olUgRrqpiWH9x27PuWVfXwDmJ/n/CoF/SAa7WW1i2oUpPDMQpJ4U+bGRUcZkVq7i1m3zFCg=="
},
"node_modules/tsconfig-paths": { "node_modules/tsconfig-paths": {
"version": "3.15.0", "version": "3.15.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",

1
package.json
View File

@ -34,6 +34,7 @@
"react-toastify": "^9.1.3", "react-toastify": "^9.1.3",
"sass": "^1.59.2", "sass": "^1.59.2",
"sharp": "^0.32.1", "sharp": "^0.32.1",
"ts-pattern": "^5.1.1",
"typescript": "4.9.5", "typescript": "4.9.5",
"uuidv4": "^6.2.13" "uuidv4": "^6.2.13"
} }

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

@ -46,6 +46,10 @@
.line-sub-container { .line-sub-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.stroked-price {
text-decoration: line-through;
}
} }
} }
} }

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

@ -8,6 +8,7 @@ import classnames from "classnames";
import { EType } from "le-coffre-resources/dist/Admin/Subscription"; import { EType } from "le-coffre-resources/dist/Admin/Subscription";
import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe"; import Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import * as P from "ts-pattern";
type IProps = { type IProps = {
forfeitType: EForfeitType; forfeitType: EForfeitType;
@ -27,11 +28,26 @@ export default function SubscribeCheckoutTicket(props: IProps) {
const { forfeitType, numberOfCollaborators, hasNavTab = true } = props; const { forfeitType, numberOfCollaborators, hasNavTab = true } = props;
const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(props.defaultFrequency ?? EPaymentFrequency.monthly); const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(props.defaultFrequency ?? EPaymentFrequency.monthly);
const [multiplier, setMultiplier] = useState<number>(1); const [multiplier, setMultiplier] = useState<number>(1);
const [totalPlan, setTotalPlan] = useState<number>(0);
const [totalCollaborator, setTotalCollaborator] = useState<number>(0);
useEffect(() => { useEffect(() => {
setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12); setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
}, [paymentFrequency]); }, [paymentFrequency]);
useEffect(() => {
let multiplierToUse = paymentFrequency === EPaymentFrequency.yearly ? multiplier - 1 : multiplier;
P.match(forfeitType)
.with(EForfeitType.standard, () => {
setTotalPlan(forfeitsPrices[EForfeitType.standard] * multiplierToUse);
setTotalCollaborator(collaboratorPrice * numberOfCollaborators * multiplier);
})
.with(EForfeitType.unlimited, () => {
setTotalPlan(forfeitsPrices[EForfeitType.unlimited] * multiplierToUse);
setTotalCollaborator(0);
});
}, [multiplier, forfeitType, numberOfCollaborators, paymentFrequency]);
const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFrequencyChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency); setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
}; };
@ -88,20 +104,31 @@ export default function SubscribeCheckoutTicket(props: IProps) {
</Typography> </Typography>
{paymentFrequency === EPaymentFrequency.yearly && ( {paymentFrequency === EPaymentFrequency.yearly && (
<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}> <Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
{forfeitType === EForfeitType.standard {formatFloat(
? forfeitsPrices[EForfeitType.standard] forfeitType === EForfeitType.standard
: forfeitsPrices[EForfeitType.unlimited]} ? forfeitsPrices[EForfeitType.standard]
&nbsp;€ x 12 : forfeitsPrices[EForfeitType.unlimited],
)}
&nbsp;€ x 11
</Typography> </Typography>
)} )}
</div> </div>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <div className={classes["line-sub-container"]}>
{forfeitType === EForfeitType.standard <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
? forfeitsPrices[EForfeitType.standard] * multiplier {totalPlan}&nbsp;€
: forfeitsPrices[EForfeitType.unlimited] * multiplier} </Typography>
€ {paymentFrequency === EPaymentFrequency.yearly && (
</Typography> <Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["stroked-price"]}>
{formatFloat(
forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard] * multiplier
: forfeitsPrices[EForfeitType.unlimited] * multiplier,
)}
&nbsp;€
</Typography>
)}
</div>
</div> </div>
{forfeitType === EForfeitType.standard && ( {forfeitType === EForfeitType.standard && (
<div className={classes["line"]}> <div className={classes["line"]}>
@ -110,11 +137,12 @@ export default function SubscribeCheckoutTicket(props: IProps) {
{numberOfCollaborators} collaborateurs {numberOfCollaborators} collaborateurs
</Typography> </Typography>
<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}> <Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
{formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators} {formatFloat(collaboratorPrice)}&nbsp;€ x {numberOfCollaborators}{" "}
{paymentFrequency === EPaymentFrequency.yearly && "x 12"}
</Typography> </Typography>
</div> </div>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(collaboratorPrice * numberOfCollaborators * multiplier)}&nbsp;€ {formatFloat(totalCollaborator)}&nbsp;€
</Typography> </Typography>
</div> </div>
)} )}
@ -128,9 +156,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
Total HT Total HT
</Typography> </Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat( {formatFloat(totalCollaborator + totalPlan)}
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * multiplier,
)}
&nbsp;€ &nbsp;€
</Typography> </Typography>
</div> </div>
@ -139,11 +165,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
TVA 20% TVA 20%
</Typography> </Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat( {formatFloat((totalCollaborator + totalPlan) * 0.2)}
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) *
0.2 *
multiplier,
)}
&nbsp;€ &nbsp;€
</Typography> </Typography>
</div> </div>
@ -158,7 +180,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
TVA 20% TVA 20%
</Typography> </Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 0.2 * multiplier)}&nbsp;€ {formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
</Typography> </Typography>
</div> </div>
)} )}
@ -166,20 +188,10 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}> <Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
Total TTC Total TTC
</Typography> </Typography>
{forfeitType === EForfeitType.standard && ( <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}> {formatFloat((totalCollaborator + totalPlan) * 1.2)}
{formatFloat( &nbsp;€
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * 1.2 * multiplier, </Typography>
)}
&nbsp;€
</Typography>
)}
{forfeitType === EForfeitType.unlimited && (
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplier)}
&nbsp;€
</Typography>
)}
</div> </div>
</div> </div>
{!props.disableInputs && ( {!props.disableInputs && (

5
src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss
View File

@ -66,6 +66,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
.price {
display: flex;
align-items: flex-end;
}
} }
.button-container { .button-container {

4
src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx
View File

@ -121,7 +121,7 @@ export default function SubscriptionFacturation() {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["price-container"]}> <div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
{forfeitsPrices[EForfeitType.standard]}€ {forfeitsPrices[EForfeitType.standard]}€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> <Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp; &nbsp;HT&nbsp;
@ -185,7 +185,7 @@ export default function SubscriptionFacturation() {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["price-container"]}> <div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
{forfeitsPrices[EForfeitType.unlimited]}€ {forfeitsPrices[EForfeitType.unlimited]}€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> <Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp; &nbsp;HT&nbsp;

5
src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss
View File

@ -52,6 +52,11 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
.price {
display: flex;
align-items: flex-end;
}
} }
} }
} }

4
src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx
View File

@ -35,7 +35,7 @@ export default function SubscriptionNew() {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["price-container"]}> <div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
99€ 99€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> <Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp; &nbsp;HT&nbsp;
@ -63,7 +63,7 @@ export default function SubscriptionNew() {
</div> </div>
<div className={classes["separator"]} /> <div className={classes["separator"]} />
<div className={classes["price-container"]}> <div className={classes["price-container"]}>
<Typography typo={ITypo.H1} color={ITypoColor.BLACK}> <Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["price"]}>
{forfeitsPrices[EForfeitType.unlimited]}€ {forfeitsPrices[EForfeitType.unlimited]}€
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> <Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
&nbsp;HT&nbsp; &nbsp;HT&nbsp;