Merge branch 'dev' into staging

package-lock.json

@@ -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",

package.json

@@ -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"
 	}

src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/classes.module.scss

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

src/front/Components/Layouts/Subscription/Components/SubscribeCheckoutTicket/index.tsx

@@ -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);
 	};
@@ -88,20 +104,31 @@ export default function SubscribeCheckoutTicket(props: IProps) {
 							</Typography>
 							{paymentFrequency === EPaymentFrequency.yearly && (
 								<Typography typo={ITypo.CAPTION_14_SB} color={ITypoColor.BLACK}>
-									{forfeitType === EForfeitType.standard
-										? forfeitsPrices[EForfeitType.standard]
-										: forfeitsPrices[EForfeitType.unlimited]}
-									&nbsp;€ x 12
+									{formatFloat(
+										forfeitType === EForfeitType.standard
+											? forfeitsPrices[EForfeitType.standard]
+											: forfeitsPrices[EForfeitType.unlimited],
+									)}
+									&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"]}>
+									{formatFloat(
+										forfeitType === EForfeitType.standard
+											? forfeitsPrices[EForfeitType.standard] * multiplier
+											: forfeitsPrices[EForfeitType.unlimited] * multiplier,
+									)}
+									&nbsp;€
+								</Typography>
+							)}
+						</div>
 					</div>
 					{forfeitType === EForfeitType.standard && (
 						<div className={classes["line"]}>
@@ -110,11 +137,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 +156,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 +165,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 +180,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 +188,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 && (

src/front/Components/Layouts/Subscription/SubscriptionFacturation/classes.module.scss

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

src/front/Components/Layouts/Subscription/SubscriptionFacturation/index.tsx

@@ -121,7 +121,7 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<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]}€
 									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
 										&nbsp;HT&nbsp;
@@ -185,7 +185,7 @@ export default function SubscriptionFacturation() {
 							</div>
 							<div className={classes["separator"]} />
 							<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]}€
 									<Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
 										&nbsp;HT&nbsp;

src/front/Components/Layouts/Subscription/SubscriptionNew/classes.module.scss

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

src/front/Components/Layouts/Subscription/SubscriptionNew/index.tsx

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