✨ subscription resiliation working
This commit is contained in:
parent
57b227fee9
commit
dae9d10c9a
@ -11,7 +11,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.info {
|
&.info {
|
||||||
background-color: var(--Opium-200);
|
border: 1px solid #005176;
|
||||||
|
background: #c3eae64d;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.warning {
|
&.warning {
|
||||||
|
@ -18,8 +18,6 @@ export default function MessageBox(props: IProps) {
|
|||||||
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
|
<Typography className={classes["text"]} typo={ITypo.CAPTION_14}>
|
||||||
{children}
|
{children}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
{children}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -5,6 +5,7 @@ import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||||||
import useOpenable from "@Front/Hooks/useOpenable";
|
import useOpenable from "@Front/Hooks/useOpenable";
|
||||||
|
import MessageBox from "@Front/Components/Elements/MessageBox";
|
||||||
|
|
||||||
enum EForfeitType {
|
enum EForfeitType {
|
||||||
"standard",
|
"standard",
|
||||||
@ -12,11 +13,14 @@ enum EForfeitType {
|
|||||||
}
|
}
|
||||||
export default function SubscriptionFacturation() {
|
export default function SubscriptionFacturation() {
|
||||||
const [forfeitType, _setForfeitType] = useState(EForfeitType.standard);
|
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(() => {
|
const cancelSubscription = useCallback(() => {
|
||||||
|
closeCancelSubscription();
|
||||||
|
openConfirmation();
|
||||||
return;
|
return;
|
||||||
}, []);
|
}, [closeCancelSubscription, openConfirmation]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
|
<DefaultTemplate title="Nouvelle souscription" hasHeaderLinks={false}>
|
||||||
@ -124,7 +128,7 @@ export default function SubscriptionFacturation() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes["actions-container"]}>
|
<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}>
|
<Typography typo={ITypo.P_18} color={ITypoColor.RED_FLASH}>
|
||||||
Arrêter l'abonnement
|
Arrêter l'abonnement
|
||||||
</Typography>
|
</Typography>
|
||||||
@ -133,8 +137,8 @@ export default function SubscriptionFacturation() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Confirm
|
<Confirm
|
||||||
isOpen={isOpen}
|
isOpen={isCancelSubscriptionOpen}
|
||||||
onClose={close}
|
onClose={closeCancelSubscription}
|
||||||
onAccept={cancelSubscription}
|
onAccept={cancelSubscription}
|
||||||
closeBtn
|
closeBtn
|
||||||
header={"Êtes-vous sûr de vouloir arrêter votre abonnement ?"}
|
header={"Êtes-vous sûr de vouloir arrêter votre abonnement ?"}
|
||||||
@ -160,6 +164,22 @@ export default function SubscriptionFacturation() {
|
|||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
</Confirm>
|
</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>
|
</DefaultTemplate>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user