feat(favorites): add custom onMaxFavoritesReached handler

packages/favorites/src/context/FavoritesProvider.tsx

@@ -20,25 +20,29 @@ const FavoritesContext = createContext<FavoritesContextType | null>(null);
 export const FavoritesProvider = ({
   children,
   onFavoritesChange,
+  onMaxFavoritesReached,
   applicationId = NAV_APP_ID,
   maxFavorites = MAX_FAVORITES,
 }: {
   children: ReactNode;
   onFavoritesChange?: (favorites: Favorite[]) => void;
+  onMaxFavoritesReached?: (favorites: Favorite[]) => void;
   applicationId?: string;
   maxFavorites?: number;
-
 }): JSX.Element => {
   const [lastClickedFavoriteId, setLastClickedFavoriteId] = useState<string>('');
 
   const queryClient = useQueryClient();
   const { data: favorites, status: queryStatus } = useFavoritesQuery(applicationId);
 
-  const { submitFavorites, status: mutationStatus } = useSubmitFavorites({
-    onMutationStart(targetFavoriteId) {
-      setLastClickedFavoriteId(targetFavoriteId);
+  const { submitFavorites, status: mutationStatus } = useSubmitFavorites(
+    {
+      onMutationStart(targetFavoriteId) {
+        setLastClickedFavoriteId(targetFavoriteId);
+      },
     },
-  }, applicationId);
+    applicationId
+  );
 
   useEffect(() => {
     if (applicationId === NAV_APP_ID) {
@@ -87,6 +91,9 @@ export const FavoritesProvider = ({
 
     if (favorites.length >= maxFavorites) {
       openMaxModal(applicationId);
+      if (onMaxFavoritesReached && typeof onMaxFavoritesReached === 'function') {
+        await onMaxFavoritesReached(favorites);
+      }
       return false;
     }
 
@@ -129,7 +136,7 @@ export const FavoritesProvider = ({
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-const noOp = () => { };
+const noOp = () => {};
 
 type MergedStatusUnion = 'initLoading' | 'reloading' | 'error' | 'success';
 export const useFavorites = (

packages/favorites/src/tests/FavoriteHeart.test.js

@@ -120,9 +120,9 @@ const setApplicationMock = jest.fn().mockResolvedValue({
   },
 });
 
-const Providers = ({ children }) => (
+const Providers = ({ children, ...rest }) => (
   <QueryClientProvider client={queryClient}>
-    <Favorites>{children}</Favorites>
+    <Favorites {...rest}>{children}</Favorites>
   </QueryClientProvider>
 );
 
@@ -639,4 +639,42 @@ describe('FavoriteHeart', () => {
 
     expect(heart).toBeDisabled();
   });
+
+  test('should call custom onMaxFavoritesReachedHandler', async () => {
+    avSettingsApi.getApplication = jest.fn(() =>
+      Promise.resolve({
+        data: {
+          settings: [
+            {
+              favorites: maxFavorites,
+            },
+          ],
+        },
+      })
+    );
+
+    const user = userEvent.setup();
+
+    const onMaxFavoritesReached = jest.fn();
+
+    const { container } = render(
+      <Providers onMaxFavoritesReached={onMaxFavoritesReached}>
+        <FavoriteHeart id="123" />
+      </Providers>
+    );
+
+    const heart = container.querySelector('#av-favorite-heart-123');
+
+    await waitFor(() => expect(heart).not.toBeChecked());
+
+    user.click(heart);
+
+    await waitFor(() => {
+      expect(avMessages.send).toHaveBeenCalledTimes(1);
+      expect(avMessages.send.mock.calls[0][0]).toBe('av:favorites:maxed');
+      expect(onMaxFavoritesReached).toHaveBeenCalledTimes(1);
+    });
+
+    await waitForPostMessageToSettle();
+  });
 });