fix: display if subscription cancelled

AykutSarac · Jul 18, 2023 · 03aef80 · 03aef80
1 parent 7e8fdca
commit 03aef80
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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();