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

✨ new prices subscriptions

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-15 15:35:10 +02:00
parent 5dc7149bf5
commit cefb5e1c8e
4 changed files with 51 additions and 32 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",
"sass": "^1.59.2",
"sharp": "^0.32.1",
"ts-pattern": "^5.1.1",
"typescript": "4.9.5",
"uuidv4": "^6.2.13"
}
@ -4910,6 +4911,11 @@
"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": {
"version": "3.15.0",
"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",
"sass": "^1.59.2",
"sharp": "^0.32.1",
"ts-pattern": "^5.1.1",
"typescript": "4.9.5",
"uuidv4": "^6.2.13"
}

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

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

72
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 Stripe from "@Front/Api/LeCoffreApi/Admin/Stripe/Stripe";
import { useRouter } from "next/router";
import * as P from "ts-pattern";
type IProps = {
forfeitType: EForfeitType;
@ -27,11 +28,26 @@ export default function SubscribeCheckoutTicket(props: IProps) {
const { forfeitType, numberOfCollaborators, hasNavTab = true } = props;
const [paymentFrequency, setPaymentFrequency] = useState<EPaymentFrequency>(props.defaultFrequency ?? EPaymentFrequency.monthly);
const [multiplier, setMultiplier] = useState<number>(1);
const [totalPlan, setTotalPlan] = useState<number>(0);
const [totalCollaborator, setTotalCollaborator] = useState<number>(0);
useEffect(() => {
setMultiplier(paymentFrequency === EPaymentFrequency.monthly ? 1 : 12);
}, [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>) => {
setPaymentFrequency(parseInt(e.target.value) as EPaymentFrequency);
};
@ -91,17 +107,24 @@ export default function SubscribeCheckoutTicket(props: IProps) {
{forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard]
: forfeitsPrices[EForfeitType.unlimited]}
&nbsp;€ x 12
&nbsp;€ x 11
</Typography>
)}
</div>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard] * multiplier
: forfeitsPrices[EForfeitType.unlimited] * multiplier}
€
</Typography>
<div className={classes["line-sub-container"]}>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{totalPlan}&nbsp;€
</Typography>
{paymentFrequency === EPaymentFrequency.yearly && (
<Typography typo={ITypo.P_16} color={ITypoColor.BLACK} className={classes["stroked-price"]}>
{forfeitType === EForfeitType.standard
? forfeitsPrices[EForfeitType.standard] * multiplier
: forfeitsPrices[EForfeitType.unlimited] * multiplier}
&nbsp;€
</Typography>
)}
</div>
</div>
{forfeitType === EForfeitType.standard && (
<div className={classes["line"]}>
@ -110,11 +133,12 @@ export default function SubscribeCheckoutTicket(props: IProps) {
{numberOfCollaborators} collaborateurs
</Typography>
<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>
</div>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(collaboratorPrice * numberOfCollaborators * multiplier)}&nbsp;€
{formatFloat(totalCollaborator)}&nbsp;€
</Typography>
</div>
)}
@ -128,9 +152,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
Total HT
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * multiplier,
)}
{formatFloat(totalCollaborator + totalPlan)}
&nbsp;€
</Typography>
</div>
@ -139,11 +161,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
TVA 20%
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) *
0.2 *
multiplier,
)}
{formatFloat((totalCollaborator + totalPlan) * 0.2)}
&nbsp;€
</Typography>
</div>
@ -158,7 +176,7 @@ export default function SubscribeCheckoutTicket(props: IProps) {
TVA 20%
</Typography>
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 0.2 * multiplier)}&nbsp;€
{formatFloat((totalCollaborator + totalPlan) * 0.2)}&nbsp;€
</Typography>
</div>
)}
@ -166,20 +184,10 @@ export default function SubscribeCheckoutTicket(props: IProps) {
<Typography typo={ITypo.P_18} color={ITypoColor.BLACK}>
Total TTC
</Typography>
{forfeitType === EForfeitType.standard && (
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(
(forfeitsPrices[EForfeitType.standard] + collaboratorPrice * numberOfCollaborators) * 1.2 * multiplier,
)}
&nbsp;€
</Typography>
)}
{forfeitType === EForfeitType.unlimited && (
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat(forfeitsPrices[EForfeitType.unlimited] * 1.2 * multiplier)}
&nbsp;€
</Typography>
)}
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
{formatFloat((totalCollaborator + totalPlan) * 1.2)}
&nbsp;€
</Typography>
</div>
</div>
{!props.disableInputs && (