✨ Cancel subscription working
This commit is contained in:
parent
6ca191199a
commit
57b227fee9
@ -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>
|
||||
);
|
||||
}
|
||||
|
26
src/front/Hooks/useOpenable.ts
Normal file
26
src/front/Hooks/useOpenable.ts
Normal file
@ -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;
|
Loading…
x
Reference in New Issue
Block a user