feat(subscription): invalidate subscription cache

packages/server/src/loaders/eventEmitter.ts

@@ -117,6 +117,7 @@ import { DisconnectPlaidItemOnAccountDeleted } from '@/services/Banking/BankAcco
 import { LoopsEventsSubscriber } from '@/services/Loops/LoopsEventsSubscriber';
 import { DeleteUncategorizedTransactionsOnAccountDeleting } from '@/services/Banking/BankAccounts/events/DeleteUncategorizedTransactionsOnAccountDeleting';
 import { SeedInitialDemoAccountDataOnOrgBuild } from '@/services/OneClickDemo/events/SeedInitialDemoAccountData';
+import { TriggerInvalidateCacheOnSubscriptionChange } from '@/services/Subscription/events/TriggerInvalidateCacheOnSubscriptionChange';
 
 export default () => {
   return new EventPublisher();
@@ -247,8 +248,10 @@ export const susbcribers = () => {
     DeleteCashflowTransactionOnUncategorize,
     PreventDeleteTransactionOnDelete,
 
+    // Subscription
     SubscribeFreeOnSignupCommunity,
     SendVerfiyMailOnSignUp,
+    TriggerInvalidateCacheOnSubscriptionChange,
 
     // Attachments
     AttachmentsOnSaleInvoiceCreated,

packages/server/src/services/Subscription/events/TriggerInvalidateCacheOnSubscriptionChange.tsx

@@ -0,0 +1,29 @@
+import events from '@/subscribers/events';
+import Container from 'typedi';
+
+export class TriggerInvalidateCacheOnSubscriptionChange {
+  /**
+   * Attaches events with handlers.
+   */
+  public attach = (bus) => {
+    bus.subscribe(
+      events.subscription.onSubscriptionCancelled,
+      this.triggerInvalidateCache.bind(this)
+    );
+    bus.subscribe(
+      events.subscription.onSubscriptionResumed,
+      this.triggerInvalidateCache.bind(this)
+    );
+    bus.subscribe(
+      events.subscription.onSubscriptionPlanChanged,
+      this.triggerInvalidateCache.bind(this)
+    );
+  };
+
+  private triggerInvalidateCache() {
+    const io = Container.get('socket');
+
+    // Notify the frontend to reflect the new transactions changes.
+    io.emit('SUBSCRIPTION_CHANGED', { subscriptionSlug: 'main' });
+  }
+}

packages/webapp/src/components/Dashboard/DashboardSockets.tsx

@@ -23,6 +23,9 @@ export function DashboardSockets() {
         intent: Intent.SUCCESS,
       });
     });
+    socket.current.on('SUBSCRIPTION_CHANGED', () => {
+      client.invalidateQueries('GetSubscriptions');
+    });
     return () => {
       socket.current.removeAllListeners();
       socket.current.close();

packages/webapp/src/hooks/query/subscription.tsx

@@ -12,7 +12,7 @@ import useApiRequest from '../useRequest';
 import { transformToCamelCase } from '@/utils';
 
 const QueryKeys = {
-  Subscriptions: 'Subscriptions',
+  Subscriptions: 'GetSubscriptions',
 };
 
 interface CancelMainSubscriptionValues {}