fix(entitlement): improve entitlement mechanism

src/hooks/useEntitlement.ts

@@ -38,25 +38,30 @@ const useEntitlement: UseEntitlement = (playlistItem) => {
     }),
     shallow,
   );
-  const { user, subscription, transactions, auth } = useAccountStore(
-    ({ user, subscription, transactions, auth }) => ({ user, subscription, transactions, auth }),
+  const { user, subscription, auth } = useAccountStore(
+    ({ user, subscription, auth }) => ({
+      user,
+      subscription,
+      auth,
+    }),
     shallow,
   );
 
   const isPreEntitled = playlistItem && !isLocked(accessModel, !!user, !!subscription, playlistItem);
   const mediaOffers = playlistItem?.mediaOffers || [];
 
-  // This entitlement query is invalidated by adding all transaction IDs to the queryKey. Perhaps a more optimal way is
-  // to invalidate the query cache after the payment.
+  // this query is invalidated when the subscription gets reloaded
   const mediaEntitlementQueries = useQueries(
     mediaOffers.map(({ offerId }) => ({
-      queryKey: ['mediaOffer', offerId, transactions?.map((t) => t.transactionId).join(',')],
+      queryKey: ['entitlements', offerId],
       queryFn: () => getEntitlements({ offerId }, sandbox, auth?.jwt || ''),
       enabled: !!playlistItem && !!auth?.jwt && !!offerId && !isPreEntitled,
+      refetchOnMount: 'always' as const,
     })),
   );
 
-  const isMediaEntitled = mediaEntitlementQueries.some((item) => item.isSuccess && (item.data as QueryResult)?.responseData?.accessGranted);
+  // when the user is logged out the useQueries will be disabled but could potentially return its cached data
+  const isMediaEntitled = !!auth?.jwt && mediaEntitlementQueries.some((item) => item.isSuccess && (item.data as QueryResult)?.responseData?.accessGranted);
   const isMediaEntitlementLoading = !isMediaEntitled && mediaEntitlementQueries.some((item) => item.isLoading);
 
   const isEntitled = !!playlistItem && (isPreEntitled || isMediaEntitled);

src/stores/AccountController.ts

@@ -14,6 +14,7 @@ import { restoreWatchHistory, serializeWatchHistory } from '#src/stores/WatchHis
 import { restoreFavorites, serializeFavorites } from '#src/stores/FavoritesController';
 import { getPublicMediaTokens } from '#src/services/entitlement.service';
 import { getMediaByIds } from '#src/services/api.service';
+import { queryClient } from '#src/providers/QueryProvider';
 
 const PERSIST_KEY_ACCOUNT = 'auth';
 
@@ -181,6 +182,9 @@ export const login = async (email: string, password: string) => {
 export const logout = async () => {
   persist.removeItem(PERSIST_KEY_ACCOUNT);
 
+  // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
+  await queryClient.invalidateQueries('entitlements');
+
   useAccountStore.setState({
     auth: null,
     user: null,
@@ -379,15 +383,22 @@ export async function reloadActiveSubscription({ delay }: { delay: number } = {
     // The subscription data takes a few seconds to load after it's purchased,
     // so here's a delay mechanism to give it time to process
     if (delay > 0) {
-      window.setTimeout(() => reloadActiveSubscription(), delay);
-    } else {
-      useAccountStore.setState({
-        subscription: activeSubscription,
-        loading: false,
-        transactions,
-        activePayment,
+      return new Promise((resolve: (value?: unknown) => void) => {
+        window.setTimeout(() => {
+          reloadActiveSubscription().finally(resolve);
+        }, delay);
       });
     }
+
+    // this invalidates all entitlements caches which makes the useEntitlement hook to verify the entitlements.
+    await queryClient.invalidateQueries('entitlements');
+
+    useAccountStore.setState({
+      subscription: activeSubscription,
+      loading: false,
+      transactions,
+      activePayment,
+    });
   });
 }