✨ Cancel subscription working

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

@@ -2,7 +2,9 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
 import classes from "./classes.module.scss";
 import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import { useState } from "react";
+import { useCallback, useState } from "react";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import useOpenable from "@Front/Hooks/useOpenable";
 
 enum EForfeitType {
 	"standard",
@@ -10,6 +12,12 @@ enum EForfeitType {
 }
 export default function SubscriptionFacturation() {
 	const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
+	const { close, isOpen, open } = useOpenable();
+
+	const cancelSubscription = useCallback(() => {
+		return;
+	}, []);
+
 	return (
 		<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
 			<div className={classes["root"]}>
@@ -116,7 +124,7 @@ export default function SubscriptionFacturation() {
 					</div>
 				</div>
 				<div className={classes["actions-container"]}>
-					<Button variant={EButtonVariant.LINE}>
+					<Button variant={EButtonVariant.LINE} onClick={open}>
 						<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
 							Arrêter l'abonnement
 						</Typography>
@@ -124,6 +132,34 @@ export default function SubscriptionFacturation() {
 					<Button>Gérer la facturation</Button>
 				</div>
 			</div>
+			<Confirm
+				isOpen={isOpen}
+				onClose={close}
+				onAccept={cancelSubscription}
+				closeBtn
+				header={"Êtes-vous sûr de vouloir arrêter votre abonnement ?"}
+				confirmText={"Confirmer"}
+				cancelText={"Annuler"}>
+				<div className={classes["modal-content"]}>
+					<Typography typo={ITypo.P_16} className={classes["text"]}>
+						Avant de confirmer, veuillez prendre note des conséquences <br />
+						suivantes :
+						<br />
+						<ul>
+							<li>
+								Arrêt des fonctionnalités : Vous n'aurez plus accès aux outils de traitement et de mise à jour en temps
+								réel.
+							</li>
+							<li>
+								Accès limité : Vous pourrez uniquement télécharger vos documents existants, sans possibilité de les éditer
+								ou de créer de nouveaux fichiers.
+							</li>
+						</ul>
+						Votre abonnement se terminera le XX/XX/XXXX. Assurez-vous de sauvegarder tout ce dont vous avez besoin avant cette
+						date.
+					</Typography>
+				</div>
+			</Confirm>
 		</DefaultTemplate>
 	);
 }

src/front/Hooks/useOpenable.ts

@@ -0,0 +1,26 @@
+import { useCallback, useState } from "react";
+
+function useOpenable() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const toggle = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+  };
+}
+
+export default useOpenable;