Fix: refresh entitlements on tvod purchase

packages/common/package.json

@@ -19,7 +19,6 @@
     "jwt-decode": "^3.1.2",
     "lodash.merge": "^4.6.2",
     "react-i18next": "^12.3.1",
-    "@tanstack/query-core": "^4.36.1",
     "reflect-metadata": "^0.1.13",
     "yup": "^0.32.9",
     "zustand": "^3.6.9"

packages/common/src/stores/AccountController.ts

@@ -1,7 +1,6 @@
 import i18next from 'i18next';
 import { inject, injectable } from 'inversify';
 
-import { queryClient } from '../queryClient';
 import { ACCESS_MODEL, DEFAULT_FEATURES } from '../constants';
 import { logDev } from '../utils/common';
 import type { IntegrationType } from '../../types/config';
@@ -42,6 +41,9 @@ export default class AccountController {
   private readonly profileController?: ProfileController;
   private readonly features: AccountServiceFeatures;
 
+  // temporary callback for refreshing the query cache until we've updated to react-query v4 or v5
+  private refreshEntitlements: (() => Promise<void>) | undefined;
+
   constructor(
     @inject(INTEGRATION_TYPE) integrationType: IntegrationType,
     favoritesController: FavoritesController,
@@ -80,10 +82,10 @@ export default class AccountController {
     }
   };
 
-  initialize = async (url: string) => {
-    useAccountStore.setState({
-      loading: true,
-    });
+  initialize = async (url: string, refreshEntitlements?: () => Promise<void>) => {
+    this.refreshEntitlements = refreshEntitlements;
+
+    useAccountStore.setState({ loading: true });
     const config = useConfigStore.getState().config;
 
     await this.profileController?.loadPersistedProfile();
@@ -202,32 +204,12 @@ export default class AccountController {
     useAccountStore.setState({ loading: false });
   };
 
-  logout = async (logoutOptions: { includeNetworkRequest: boolean } = { includeNetworkRequest: true }) => {
-    // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
-    await queryClient.invalidateQueries({ queryKey: ['entitlements'] });
-
-    useAccountStore.setState({
-      user: null,
-      subscription: null,
-      transactions: null,
-      activePayment: null,
-      customerConsents: null,
-      publisherConsents: null,
-      loading: false,
-    });
-
-    await this.favoritesController?.restoreFavorites();
-    await this.watchHistoryController?.restoreWatchHistory();
+  logout = async () => {
     await this.accountService?.logout();
-    await this.profileController?.unpersistProfile();
-
-    // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
-    await queryClient.invalidateQueries({ queryKey: ['entitlements'] });
-
     await this.clearLoginState();
-    if (logoutOptions.includeNetworkRequest) {
-      await this.accountService?.logout();
-    }
+
+    // let the application know to refresh all entitlements
+    await this.refreshEntitlements?.();
   };
 
   register = async (email: string, password: string, referrer: string, consents: CustomerConsent[]) => {
@@ -466,8 +448,8 @@ export default class AccountController {
       logDev('Failed to fetch the pending offer', error);
     }
 
-    // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
-    await queryClient.invalidateQueries({ queryKey: ['entitlements'] });
+    // let the app know to refresh the entitlements
+    await this.refreshEntitlements?.();
 
     useAccountStore.setState({
       subscription: activeSubscription,

packages/common/src/stores/AppController.ts

@@ -62,7 +62,7 @@ export default class AppController {
     return config;
   };
 
-  initializeApp = async (url: string) => {
+  initializeApp = async (url: string, refreshEntitlements?: () => Promise<void>) => {
     const settings = await this.settingsService.initialize();
     const configSource = await this.settingsService.getConfigSource(settings, url);
     const config = await this.loadAndValidateConfig(configSource);
@@ -88,7 +88,7 @@ export default class AppController {
 
     // when an integration is set, we initialize the AccountController
     if (integrationType) {
-      await getModule(AccountController).initialize(url);
+      await getModule(AccountController).initialize(url, refreshEntitlements);
     }
 
     return { config, settings, configSource };

packages/hooks-react/src/useBootstrapApp.ts

@@ -1,4 +1,4 @@
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import type { Config } from '@jwp/ott-common/types/config';
 import type { Settings } from '@jwp/ott-common/types/settings';
 import { getModule } from '@jwp/ott-common/src/modules/container';
@@ -17,13 +17,20 @@ type Resources = {
 export type OnReadyCallback = (config: Config | undefined) => void;
 
 export const useBootstrapApp = (url: string, onReady: OnReadyCallback) => {
-  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, AppError>('config-init', () => applicationController.initializeApp(url), {
-    refetchInterval: false,
-    retry: 1,
-    onSettled: (query) => onReady(query?.config),
-    cacheTime: CACHE_TIME,
-    staleTime: STALE_TIME,
-  });
+  const queryClient = useQueryClient();
+  const refreshEntitlements = () => queryClient.invalidateQueries({ queryKey: ['entitlements'] });
+
+  const { data, isLoading, error, isSuccess, refetch } = useQuery<Resources, AppError>(
+    'config-init',
+    () => applicationController.initializeApp(url, refreshEntitlements),
+    {
+      refetchInterval: false,
+      retry: 1,
+      onSettled: (query) => onReady(query?.config),
+      cacheTime: CACHE_TIME,
+      staleTime: STALE_TIME,
+    },
+  );
 
   return {
     data,

packages/hooks-react/src/usePlaylist.ts

@@ -1,17 +1,17 @@
-import { useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import type { GetPlaylistParams, Playlist } from '@jwp/ott-common/types/playlist';
 import ApiService from '@jwp/ott-common/src/services/ApiService';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import { generatePlaylistPlaceholder } from '@jwp/ott-common/src/utils/collection';
 import { isScheduledOrLiveMedia } from '@jwp/ott-common/src/utils/liveEvent';
 import { isTruthyCustomParamValue } from '@jwp/ott-common/src/utils/common';
 import type { ApiError } from '@jwp/ott-common/src/utils/api';
-import { queryClient } from '@jwp/ott-common/src/queryClient';
 
 const placeholderData = generatePlaylistPlaceholder(30);
 
 export default function usePlaylist(playlistId?: string, params: GetPlaylistParams = {}, enabled: boolean = true, usePlaceholderData: boolean = true) {
   const apiService = getModule(ApiService);
+  const queryClient = useQueryClient();
 
   const callback = async (playlistId?: string, params?: GetPlaylistParams) => {
     const playlist = await apiService.getPlaylistById(playlistId, { ...params });

packages/ui-react/src/containers/AccountModal/forms/EditPassword.tsx

@@ -45,7 +45,7 @@ const ResetPassword = ({ type }: { type?: 'add' }) => {
         }
         await accountController.changePasswordWithToken(emailParam || '', password, resetToken, passwordConfirmation);
       }
-      await accountController.logout({ includeNetworkRequest: false });
+      await accountController.logout();
       navigate(modalURLFromLocation(location, 'login'));
     } catch (error: unknown) {
       if (error instanceof Error) {

platforms/web/src/hooks/useNotifications.ts

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { getModule } from '@jwp/ott-common/src/modules/container';
 import AccountController from '@jwp/ott-common/src/stores/AccountController';
-import { queryClient } from '@jwp/ott-common/src/queryClient';
+import { queryClient } from '@jwp/ott-ui-react/src/containers/QueryProvider/QueryProvider';
 import { simultaneousLoginWarningKey } from '@jwp/ott-common/src/constants';
 import { modalURLFromLocation } from '@jwp/ott-ui-react/src/utils/location';
 

yarn.lock

@@ -2108,11 +2108,6 @@
     "@svgr/hast-util-to-babel-ast" "8.0.0"
     svg-parser "^2.0.4"
 
-"@tanstack/query-core@^4.36.1":
-  version "4.36.1"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524"
-  integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==
-
 "@testing-library/dom@^9.0.0":
   version "9.3.3"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"