From 03aef80f82df5367101e42e74dcbfcd279bb7335 Mon Sep 17 00:00:00 2001
From: AykutSarac <aykutsarac0@gmail.com>
Date: Tue, 18 Jul 2023 12:19:43 +0300
Subject: [PATCH] fix: display if subscription cancelled

---
 src/containers/Modals/AccountModal/index.tsx      |  9 ++++++---
 .../Modals/CancelPremiumModal/index.tsx           |  1 +
 src/store/useUser.ts                              | 15 +++++++++++----
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/containers/Modals/AccountModal/index.tsx b/src/containers/Modals/AccountModal/index.tsx
index c50531eb414..f718ccfae6b 100644
--- a/src/containers/Modals/AccountModal/index.tsx
+++ b/src/containers/Modals/AccountModal/index.tsx
@@ -43,9 +43,10 @@ const StyledContainer = styled.div`
 `;
 
 export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const setVisible = useModal(state => state.setVisible);
   const user = useUser(state => state.user);
   const isPremium = useUser(state => state.premium);
+  const premiumCancelled = useUser(state => state.premiumCancelled);
+  const setVisible = useModal(state => state.setVisible);
   const logout = useUser(state => state.logout);
 
   return (
@@ -67,7 +68,9 @@ export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
               ACCOUNT STATUS
               <div>
                 {isPremium ? (
-                  <Badge color="orange">Premium</Badge>
+                  <Badge color={premiumCancelled ? "teal" : "indigo"}>
+                    Premium {premiumCancelled && "(Cancelled)"}
+                  </Badge>
                 ) : (
                   <Badge variant="outline" color="gray">
                     Free
@@ -92,7 +95,7 @@ export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
       </Group>
       <Divider py="xs" />
       <Group position="right">
-        {isPremium ? (
+        {isPremium && !premiumCancelled ? (
           <Button
             variant="light"
             color="red"
diff --git a/src/containers/Modals/CancelPremiumModal/index.tsx b/src/containers/Modals/CancelPremiumModal/index.tsx
index de58cc05195..e7677756a5a 100644
--- a/src/containers/Modals/CancelPremiumModal/index.tsx
+++ b/src/containers/Modals/CancelPremiumModal/index.tsx
@@ -18,6 +18,7 @@ export const CancelPremiumModal: React.FC<ModalProps> = ({ opened, onClose }) =>
       }
 
       toast.success("Cancelled premium plan!");
+      setTimeout(() => window.location.reload(), 2500);
     } catch (err) {
       console.error(err);
     } finally {
diff --git a/src/store/useUser.ts b/src/store/useUser.ts
index ed79bdc2f67..aba5fd3a380 100644
--- a/src/store/useUser.ts
+++ b/src/store/useUser.ts
@@ -30,12 +30,14 @@ interface UserStates {
   user: User | null;
   isAuthenticated: boolean;
   premium: boolean;
+  premiumCancelled: boolean;
 }
 
 const initialStates: UserStates = {
   user: null,
   isAuthenticated: false,
   premium: false,
+  premiumCancelled: false,
 };
 
 const useUser = create<UserStates & UserActions>()(set => ({
@@ -57,9 +59,9 @@ const useUser = create<UserStates & UserActions>()(set => ({
   },
   login: user => set({ user: user as unknown as User, isAuthenticated: true }),
   checkSession: async () => {
-    if (isDevelopment) {
-      return set({ user: devUser as User, isAuthenticated: true, premium: true });
-    }
+    // if (isDevelopment) {
+    //   return set({ user: devUser as User, isAuthenticated: true, premium: true });
+    // }
 
     const currentSession = altogic.auth.getSession();
 
@@ -76,7 +78,12 @@ const useUser = create<UserStates & UserActions>()(set => ({
       const { data: premiumData } = await altogic.endpoint.get("/isPremium");
 
       setUser({ id: user._id, email: user.email, username: user.name });
-      set({ user: user as User, isAuthenticated: true, premium: premiumData.premium });
+      set({
+        user: user as User,
+        isAuthenticated: true,
+        premium: premiumData.premium,
+        premiumCancelled: premiumData?.status === "cancelled" || false,
+      });
     } else if (new URLSearchParams(window.location.search).get("access_token")) {
       const { errors, user } = await altogic.auth.getAuthGrant();