[PB-5357]: fix/update usage using the socket event

src/App.tsx

@@ -22,7 +22,7 @@ import envService from 'services/env.service';
 import errorService from 'services/error.service';
 import localStorageService from 'services/local-storage.service';
 import navigationService from 'services/navigation.service';
-import RealtimeService from 'services/socket.service';
+
 import { AppViewConfig } from './app/core/types';
 import { LRUFilesCacheManager } from './app/database/services/database.service/LRUFilesCacheManager';
 import { LRUFilesPreviewCacheManager } from './app/database/services/database.service/LRUFilesPreviewCacheManager';
@@ -45,6 +45,8 @@ import useBeforeUnload from './hooks/useBeforeUnload';
 import useVpnAuth from './hooks/useVpnAuth';
 
 import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?raw';
+import { eventHandler } from 'services/sockets/event-handler.service';
+import RealtimeService from 'services/sockets/socket.service';
 const blob = new Blob([workerUrl], { type: 'application/javascript' });
 pdfjs.GlobalWorkerOptions.workerSrc = URL.createObjectURL(blob);
 
@@ -88,6 +90,17 @@ const App = (props: AppProps): JSX.Element => {
     i18next.changeLanguage();
   }, []);
 
+  useEffect(() => {
+    try {
+      const realtimeService = RealtimeService.getInstance();
+      const cleanup = realtimeService.onEvent(eventHandler.onPlanUpdated);
+
+      return cleanup;
+    } catch (err) {
+      errorService.reportError(err);
+    }
+  }, []);
+
   useEffect(() => {
     if (!isWorkspaceIdParam) {
       navigationService.resetB2BWorkspaceCredentials(dispatch);

src/app/store/slices/plan/index.ts

@@ -123,7 +123,14 @@ export const fetchBusinessLimitUsageThunk = createAsyncThunk<GetMemberUsageRespo
 export const planSlice = createSlice({
   name: 'plan',
   initialState,
-  reducers: {},
+  reducers: {
+    updatePlanLimit: (state, action) => {
+      if (action.payload) {
+        state.planLimit = action.payload;
+        state.isLoadingPlanLimit = false;
+      }
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(initializeThunk.pending, (state) => {
@@ -217,7 +224,7 @@ export const planSelectors = {
   isCurrentPlanLifetime: (state: RootState): boolean => {
     const currentPlan = currentPlanSelector(state);
 
-    return currentPlan !== null && currentPlan.isLifetime;
+    return currentPlan?.isLifetime ?? false;
   },
   planLimitToShow: (state: RootState): number => {
     const { selectedWorkspace } = state.workspaces;
@@ -255,4 +262,6 @@ export const planThunks = {
   fetchBusinessLimitUsageThunk,
 };
 
+export const planActions = planSlice.actions;
+
 export default planSlice.reducer;

src/app/store/slices/plan/plan.test.ts

@@ -1,5 +1,5 @@
-import { describe, it, expect } from 'vitest';
-import { planSelectors, PlanState } from './index';
+import { describe, it, expect, test } from 'vitest';
+import { planSelectors, PlanState, planSlice, planActions } from './index';
 import { RootState } from '../..';
 import { StoragePlan, RenewalPeriod } from '@internxt/sdk/dist/drive/payments/types/types';
 
@@ -139,3 +139,54 @@ describe('Plan Selectors', () => {
     });
   });
 });
+
+describe('Plan Reducers', () => {
+  describe('Update Limit plan', () => {
+    test('When providing a max space bytes, then should update the plan limit and stop loading the plan limit', () => {
+      const initialState: PlanState = {
+        isLoadingPlanLimit: true,
+        isLoadingPlanUsage: false,
+        isLoadingBusinessLimitAndUsage: false,
+        individualPlan: null,
+        businessPlan: null,
+        planLimit: 0,
+        planUsage: 0,
+        usageDetails: null,
+        individualSubscription: null,
+        businessSubscription: null,
+        businessPlanLimit: 0,
+        businessPlanUsage: 0,
+        businessPlanUsageDetails: null,
+      };
+
+      const newLimit = 5000000000;
+      const result = planSlice.reducer(initialState, planActions.updatePlanLimit(newLimit));
+
+      expect(result.planLimit).toStrictEqual(newLimit);
+      expect(result.isLoadingPlanLimit).toStrictEqual(false);
+    });
+
+    test('When there is no max space bytes, then should not update the user plan limit', () => {
+      const initialState: PlanState = {
+        isLoadingPlanLimit: true,
+        isLoadingPlanUsage: false,
+        isLoadingBusinessLimitAndUsage: false,
+        individualPlan: null,
+        businessPlan: null,
+        planLimit: 1000000000,
+        planUsage: 0,
+        usageDetails: null,
+        individualSubscription: null,
+        businessSubscription: null,
+        businessPlanLimit: 0,
+        businessPlanUsage: 0,
+        businessPlanUsageDetails: null,
+      };
+
+      const result = planSlice.reducer(initialState, planActions.updatePlanLimit(null));
+
+      expect(result.planLimit).toStrictEqual(initialState.planLimit);
+      expect(result.isLoadingPlanLimit).toStrictEqual(true);
+    });
+  });
+});

src/services/auth.service.test.ts

@@ -86,7 +86,7 @@ beforeAll(() => {
     workspaceThunks: vi.fn(),
   }));
 
-  vi.mock('services/socket.service', () => ({
+  vi.mock('services/sockets/socket.service', () => ({
     default: {
       getInstance: vi.fn().mockReturnValue({
         stop: vi.fn(),

src/services/auth.service.ts

@@ -15,7 +15,7 @@ import { trackLead } from 'app/analytics/meta.service';
 import { getCookie, setCookie } from 'app/analytics/utils';
 import localStorageService from 'services/local-storage.service';
 import navigationService from 'services/navigation.service';
-import RealtimeService from 'services/socket.service';
+import RealtimeService from 'services/sockets/socket.service';
 import AppError, { AppView } from 'app/core/types';
 import {
   assertPrivateKeyIsValid,

src/services/index.ts

@@ -20,8 +20,8 @@ export * from './navigation.service';
 export { default as navigationService } from './navigation.service';
 export * from './operating-system.service';
 export { default as operatingSystemService } from './operating-system.service';
-export * from './socket.service';
-export { default as RealtimeService } from './socket.service';
+export * from './sockets/socket.service';
+export { default as RealtimeService } from './sockets/socket.service';
 export * from './storage-keys';
 export * from './stream.service';
 export * from './validation.service';