hotfix/AW-494

messages/en.json

@@ -37,6 +37,7 @@
   },
   "Subscriptions": {
     "title": "Manage my subscriptions",
+    "success_cancel_message": "Your subscription has been cancelled successfully",
     "modal": {
       "title": "Are you sure you want to cancel your subscription?",
       "description": "Are you sure you want to cancel your subscription?",

src/components/domains/profile/subscriptions/CancelSubscriptionModalProvider/CancelSubscriptionModalProvider.tsx

@@ -12,8 +12,10 @@ import { useTranslations } from "next-intl";
 
 import { Button, Typography } from "@/components/ui";
 import Modal from "@/components/ui/Modal/Modal";
+import { performUserSubscriptionAction } from "@/entities/subscriptions/actions";
 import { UserSubscription } from "@/entities/subscriptions/types";
 import { useRetainingStore } from "@/providers/retaining-store-provider";
+import { useToast } from "@/providers/toast-provider";
 import { ROUTES } from "@/shared/constants/client-routes";
 
 import styles from "./CancelSubscriptionModalProvider.module.scss";
@@ -36,9 +38,14 @@ export default function CancelSubscriptionModalProvider({
 }) {
   const router = useRouter();
   const t = useTranslations("Subscriptions");
-  const [isOpen, setIsOpen] = useState(false);
+  const { addToast } = useToast();
 
-  const { setCancellingSubscription } = useRetainingStore(state => state);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoadingCancelButton, setIsLoadingCancelButton] =
+    useState<boolean>(false);
+
+  const { setCancellingSubscription, cancellingSubscription } =
+    useRetainingStore(state => state);
 
   const close = useCallback(() => setIsOpen(false), []);
   const open = useCallback(
@@ -49,10 +56,40 @@ export default function CancelSubscriptionModalProvider({
     [setCancellingSubscription]
   );
 
-  const handleCancel = useCallback(() => {
+  const handleCancel = useCallback(async () => {
-    router.push(ROUTES.retainingFunnelCancelSubscription());
+    // router.push(ROUTES.retainingFunnelCancelSubscription());
+
+    if (isLoadingCancelButton) return;
+    setIsLoadingCancelButton(true);
+
+    const response = await performUserSubscriptionAction({
+      subscriptionId: cancellingSubscription?.id || "",
+      action: "cancel",
+    });
+
+    if (response?.data?.status === "success") {
+      close();
+      addToast({
+        variant: "success",
+        message: t("success_cancel_message"),
+        duration: 3000,
+      });
+      const timer = setTimeout(() => {
+        router.push(ROUTES.profile());
+      }, 3000);
+      return () => clearTimeout(timer);
+    }
+    setIsLoadingCancelButton(false);
+
     close();
-  }, [router, close]);
+  }, [
+    isLoadingCancelButton,
+    cancellingSubscription?.id,
+    close,
+    addToast,
+    t,
+    router,
+  ]);
 
   const handleStay = useCallback(() => {
     close();
@@ -77,10 +114,18 @@ export default function CancelSubscriptionModalProvider({
         </Typography>
 
         <div className={styles.actions}>
-          <Button className={styles.action} onClick={handleCancel}>
+          <Button
+            className={styles.action}
+            onClick={handleCancel}
+            disabled={isLoadingCancelButton}
+          >
             {t("modal.cancel_button")}
           </Button>
-          <Button onClick={handleStay} className={styles.action}>
+          <Button
+            onClick={handleStay}
+            className={styles.action}
+            disabled={isLoadingCancelButton}
+          >
             {t("modal.stay_button")}
           </Button>
         </div>