update subscription CANCELLED status

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

@@ -7,7 +7,6 @@ import {
   useContext,
   useState,
 } from "react";
-import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 
 import { Button, Typography } from "@/components/ui";
@@ -16,7 +15,6 @@ 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,7 +34,6 @@ export default function CancelSubscriptionModalProvider({
 }: {
   children: ReactNode;
 }) {
-  const router = useRouter();
   const t = useTranslations("Subscriptions");
   const { addToast } = useToast();
 
@@ -74,10 +71,8 @@ export default function CancelSubscriptionModalProvider({
         message: t("success_cancel_message"),
         duration: 3000,
       });
-      const timer = setTimeout(() => {
-        router.push(ROUTES.profile());
-      }, 3000);
-      return () => clearTimeout(timer);
+      // Data will be automatically refreshed due to cache invalidation in the action
+      // No need to redirect, let the user see the updated subscription status
     }
     setIsLoadingCancelButton(false);
 
@@ -88,7 +83,6 @@ export default function CancelSubscriptionModalProvider({
     close,
     addToast,
     t,
-    router,
   ]);
 
   const handleStay = useCallback(() => {

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

@@ -30,12 +30,16 @@ export default function SubscriptionTable({ subscription }: ITableProps) {
       ],
       [
         t("table.subscription_status"),
-        t(
-          `table.subscription_status_value.${subscription.subscriptionStatus}`,
-          {
-            date: formatDate(subscription.cancellationDate) || "",
-          }
-        ),
+        subscription.subscriptionStatus === "CANCELLED" && subscription.cancellationDate
+          ? t(
+              `table.subscription_status_value.${subscription.subscriptionStatus}`,
+              {
+                date: formatDate(subscription.cancellationDate) as string,
+              }
+            )
+          : subscription.subscriptionStatus === "CANCELLED"
+          ? "Cancelled"
+          : t(`table.subscription_status_value.${subscription.subscriptionStatus}`),
       ],
       [
         t("table.billing_period"),

src/entities/subscriptions/actions.ts

@@ -1,5 +1,7 @@
 "use server";
 
+import { revalidateTag } from "next/cache";
+
 import { http } from "@/shared/api/httpClient";
 import { API_ROUTES } from "@/shared/constants/api-routes";
 import { ActionResponse } from "@/types";
@@ -23,6 +25,9 @@ export async function performUserSubscriptionAction(
       }
     );
 
+    // Invalidate subscriptions cache to refresh the data
+    revalidateTag("subscriptions");
+
     return { data: response, error: null };
   } catch (error) {
     // eslint-disable-next-line no-console