✨ subscription resiliation working

src/front/Components/Elements/MessageBox/classes.module.scss

@@ -11,7 +11,8 @@
 	}
 
 	&.info {
-		background-color: var(--Opium-200);
+		border: 1px solid #005176;
+		background: #c3eae64d;
 	}
 
 	&.warning {

src/front/Components/Elements/MessageBox/index.tsx

@@ -18,8 +18,6 @@ export default function MessageBox(props: IProps) {
 				<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
 					{children}
 				</Typography>
-
-				{children}
 			</div>
 		</div>
 	);

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

@@ -5,6 +5,7 @@ import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useState } from "react";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import useOpenable from "@Front/Hooks/useOpenable";
+import MessageBox from "@Front/Components/Elements/MessageBox";
 
 enum EForfeitType {
 	"standard",
@@ -12,11 +13,14 @@ enum EForfeitType {
 }
 export default function SubscriptionFacturation() {
 	const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
-	const { close, isOpen, open } = useOpenable();
+	const { close: closeCancelSubscription, isOpen: isCancelSubscriptionOpen, open: openCancelSubscription } = useOpenable();
+	const { close: closeConfirmation, isOpen: isConfirmationOpen, open: openConfirmation } = useOpenable();
 
 	const cancelSubscription = useCallback(() => {
+		closeCancelSubscription();
+		openConfirmation();
 		return;
-	}, []);
+	}, [closeCancelSubscription, openConfirmation]);
 
 	return (
 		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
@@ -124,7 +128,7 @@ export default function SubscriptionFacturation() {
 					</div>
 				</div>
 				<div className={classes["actions-container"]}>
-					<Button variant={EButtonVariant.LINE} onClick={open}>
+					<Button variant={EButtonVariant.LINE} onClick={openCancelSubscription}>
 						<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
 							Arrêter l'abonnement
 						</Typography>
@@ -133,8 +137,8 @@ export default function SubscriptionFacturation() {
 				</div>
 			</div>
 			<Confirm
-				isOpen={isOpen}
+				isOpen={isCancelSubscriptionOpen}
-				onClose={close}
+				onClose={closeCancelSubscription}
 				onAccept={cancelSubscription}
 				closeBtn
 				header={"Êtes-vous sûr de vouloir arrêter votre abonnement ?"}
@@ -160,6 +164,22 @@ export default function SubscriptionFacturation() {
 					</Typography>
 				</div>
 			</Confirm>
+
+			<Confirm
+				isOpen={isConfirmationOpen}
+				onClose={closeConfirmation}
+				onAccept={closeConfirmation}
+				closeBtn
+				header={"Abonnement résilié avec succès"}
+				confirmText={"Retour à la plateforme"}
+				showCancelButton={false}>
+				<div className={classes["modal-content"]}>
+					<MessageBox type="info">
+						Votre abonnement se terminera le XX/XX/XXXX. Assurez-vous de sauvegarder tout ce dont vous avez besoin avant cette
+						date.
+					</MessageBox>
+				</div>
+			</Confirm>
 		</DefaultTemplate>
 	);
 }