@applicaster/zapp-react-native-ui-components 14.0.0-rc.9 → 15.0.0-alpha.1351496011

package/Components/River/__tests__/river.test.js

@@ -1,20 +1,10 @@
 import React from "react";
-import { render, screen } from "@testing-library/react-native";
-import configureStore from "redux-mock-store";
+import { screen } from "@testing-library/react-native";
 import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
-import { Provider } from "react-redux";
 
-import { River } from "../";
 import { ScreenResolver } from "../../ScreenResolver";
 import { RiverComponent } from "../River";
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    useIsScreenActive: jest.fn(() => true),
-  })
-);
-
 jest.mock(
   "@applicaster/zapp-react-native-ui-components/Components/GeneralContentScreen",
   () => {
@@ -46,6 +36,13 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
+  () => ({
+    useIsScreenActive: jest.fn(() => true),
+  })
+);
+
 const river = {
   home: true,
   id: "A1234",
@@ -89,28 +86,17 @@ const riverProps = {
 
 const appData = { layoutVersion: "v1" };
 
-const store = configureStore()({ rivers, appData });
+const store = { rivers, appData };
 
 describe("When River has a general_content type", () => {
   it("renders GeneralContentScreen correctly", () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <RiverComponent {...riverProps} />
-      </Provider>
+    const { getByTestId } = renderWithProviders(
+      <RiverComponent {...riverProps} />,
+      store
     );
 
     expect(getByTestId("general-content-screen")).toBeTruthy();
   });
-
-  it("renders River component correctly", () => {
-    const wrapper = render(
-      <Provider store={store}>
-        <River screenId="A1234" />
-      </Provider>
-    );
-
-    expect(wrapper.toJSON()).toMatchSnapshot();
-  });
 });
 
 describe("When River has any other type other than general_content", () => {

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/TV/hooks/useInitialFocus.ts

@@ -10,6 +10,8 @@ import {
   setFocusOnMenu,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux";
 
+import { waitUntilScreenRevealManagerIsReady } from "@applicaster/zapp-react-native-ui-components/Components/ScreenRevealManager/utils";
+
 type Return =
   | {
       onContent: true;
@@ -57,14 +59,24 @@ export const useInitialFocus = (): void => {
   React.useEffect(() => {
     const initialFocus = getInitialFocus(focusOnContent, isNavBarVisible);
 
-    if (initialFocus.onContent) {
-      setFocusOnContent(currentRoute);
+    console.log("debug_2", "useInitialFocus - effect", { initialFocus });
+
+    if (initialFocus.onMenu) {
+      setFocusOnMenu(currentRoute);
 
       return;
     }
 
-    if (initialFocus.onMenu) {
-      setFocusOnMenu(currentRoute);
+    if (initialFocus.onContent) {
+      const subscription = waitUntilScreenRevealManagerIsReady().subscribe(
+        () => {
+          setFocusOnContent(currentRoute);
+        }
+      );
+
+      return () => {
+        subscription.unsubscribe();
+      };
     }
   }, []);
 };

package/Components/Screen/__tests__/Screen.test.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { act, create } from "react-test-renderer";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {
@@ -141,8 +152,6 @@ const screenProps = {
 const { Screen } = require("..");
 
 describe("<Screen Component />", () => {
-  let wrapper;
-
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
     getOrientation.mockClear();
@@ -150,26 +159,16 @@ describe("<Screen Component />", () => {
   });
 
   describe("when the navbar should show", () => {
-    act(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
-    beforeEach(() => {
-      wrapper = create(<Screen {...screenProps} />);
-    });
-
     it("renders correctly", () => {
-      act(() => {
-        wrapper = create(<Screen {...screenProps} />);
-      });
-
-      expect(wrapper.toJSON()).toMatchSnapshot();
+      const { toJSON } = render(<Screen {...screenProps} />);
+      expect(toJSON()).toMatchSnapshot();
     });
   });
 });

package/Components/Screen/__tests__/__snapshots__/Screen.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<Screen Component /> when the navbar should be hidden renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",
@@ -34,6 +35,7 @@ exports[`<Screen Component /> when the navbar should be hidden renders correctly
 
 exports[`<Screen Component /> when the navbar should show renders correctly 1`] = `
 <View
+  importantForAccessibility="yes"
   style={
     {
       "backgroundColor": "blue",

package/Components/Screen/__tests__/navigationHandler.test.ts

@@ -3,61 +3,172 @@ import { isMenuVisible } from "../navigationHandler";
 describe("NavigationHandler", () => {
   describe("isMenuVisible", () => {
     it("returns false when the route is a player route", () => {
-      const menuVisible = isMenuVisible("/playable/some_vod_item", {});
+      const menuVisible = isMenuVisible("/playable/some_vod_item", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
       expect(menuVisible).toBe(false);
     });
 
     describe("when screen is a hook", () => {
       it("returns true if the `showNavBar` flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              showNavBar: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                showNavBar: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns true if presentFullScreen flag is set to false", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: false,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: false,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(true);
       });
 
       it("returns false if presentFullScreen flag is set to true", () => {
-        const menuVisible = isMenuVisible("", {
-          hookPlugin: {
-            module: {
-              presentFullScreen: true,
+        const menuVisible = isMenuVisible(
+          "",
+          {
+            hookPlugin: {
+              module: {
+                presentFullScreen: true,
+              },
             },
+            navigations: [
+              {
+                navigation_type: "quick-brick-bottom-tabs",
+                identifier: "quick-brick-bottom-tabs",
+                category: "menu",
+                name: "Bottom Tabs",
+              },
+            ],
           },
-        });
+          [
+            {
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ]
+        );
 
         expect(menuVisible).toBe(false);
       });
     });
 
     it("returns false if the screen's general settings allow screen presentation", () => {
-      const menuVisible = isMenuVisible("", {
-        general: {
-          allow_screen_plugin_presentation: true,
+      const menuVisible = isMenuVisible(
+        "",
+        {
+          general: {
+            allow_screen_plugin_presentation: true,
+          },
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
         },
-      });
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
 
       expect(menuVisible).toBe(false);
     });
 
-    it("returns true otherwise", () => {
-      const menuVisible = isMenuVisible("", {});
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible(
+        "any",
+        {
+          navigations: [
+            {
+              navigation_type: "quick-brick-bottom-tabs",
+              identifier: "quick-brick-bottom-tabs",
+              category: "menu",
+              name: "Bottom Tabs",
+            },
+          ],
+        },
+        [
+          {
+            identifier: "quick-brick-bottom-tabs",
+            category: "menu",
+            name: "Bottom Tabs",
+          },
+        ]
+      );
+
       expect(menuVisible).toBe(true);
     });
+
+    it("returns false otherwise", () => {
+      const menuVisible = isMenuVisible("", {}, [
+        {
+          identifier: "quick-brick-bottom-tabs",
+          category: "menu",
+          name: "Bottom Tabs",
+        },
+      ]);
+
+      expect(menuVisible).toBe(false);
+    });
   });
 });

package/Components/Screen/index.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
-import { View } from "react-native";
+import { AccessibilityInfo, findNodeHandle, View } from "react-native";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
@@ -12,6 +12,7 @@ import {
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import {
   useCurrentScreenData,
+  useIsScreenActive,
   useNavbarState,
   useNavigation,
   useRoute,
@@ -57,8 +58,8 @@ export function Screen(_props: Props) {
   const hasMenu = shouldNavBarDisplayMenu(currentRiver, plugins);
 
   const navBarProps = React.useMemo<MobileNavBarPluginProps | null>(
-    getNavBarProps(currentRiver, pathname, title),
-    [currentRiver, pathname]
+    () => getNavBarProps(currentRiver, pathname, title),
+    [currentRiver, pathname, title]
   );
 
   const NavBar = React.useMemo(
@@ -89,13 +90,29 @@ export function Screen(_props: Props) {
     [theme.app_background_color, backgroundColor]
   );
 
-  // Set ready state when screen is rotated to desired orientation
+  const isActive = useIsScreenActive();
+
+  const ref = React.useRef(null);
   const isReady = useWaitForValidOrientation();
 
+  React.useEffect(() => {
+    if (ref.current && isActive && isReady) {
+      const nodeHandle = findNodeHandle(ref.current);
+
+      if (nodeHandle != null) {
+        AccessibilityInfo.setAccessibilityFocus(nodeHandle);
+      }
+    }
+  }, [isActive, isReady]);
+
   // We prevent rendering of the screen until UI is actually rotated to screen desired orientation.
   // This saves unnecessary re-renders and user will not see distorted aspect screen.
   return (
-    <View style={style}>
+    <View
+      ref={ref}
+      style={style}
+      importantForAccessibility={!isActive ? "no-hide-descendants" : "yes"}
+    >
       {isReady ? (
         <>
           {navBarProps ? <NavBar {...navBarProps} hasMenu={hasMenu} /> : null}

package/Components/Screen/navigationHandler.ts

@@ -1,3 +1,5 @@
+import { resolveNavigationPlugin } from "@applicaster/zapp-react-native-utils/navigationUtils";
+
 /**
  * This function helps to decide wether the menu should be presented on the screen
  * based on route and / or screen Data
@@ -14,12 +16,28 @@
  * @param {Object} screenData payload associated with the currently presented screen
  * @returns {Boolean}
  */
-export function isMenuVisible(route, screenData) {
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = resolveNavigationPlugin({
+    category: "menu",
+    navigations:
+      screenData?.navigations || screenData?.targetScreen?.navigations,
+    plugins,
+  });
+
+  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
   if (route.includes("playable")) {
     return false;
   }
 
-  if (screenData.type === "qb_search_screen") {
+  if (
+    screenData.type === "qb_search_screen" ||
+    screenData?.targetScreen?.type === "qb_search_screen"
+  ) {
     return false;
   }
 

package/Components/ScreenResolver/index.tsx

@@ -15,6 +15,9 @@ import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useScreenAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { ScreenResultCallback } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/callbackNavigationAction";
+
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
 type Props = {
@@ -24,6 +27,7 @@ type Props = {
   feedId?: string;
   feedTitle?: string;
   focused?: boolean;
+  resultCallback?: ScreenResultCallback;
   parentFocus?: {
     nextFocusDown?: React.Ref<any>;
     nextFocusRight?: React.Ref<any>;
@@ -33,6 +37,11 @@ type Props = {
   groupId?: string;
 };
 
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
+
 export function ScreenResolverComponent(props: Props) {
   useScreenAnalytics(props);
 
@@ -54,7 +63,16 @@ export function ScreenResolverComponent(props: Props) {
 
   React.useEffect(() => {
     setScreenContext(rivers[screenId]);
-  }, [screenId]);
+  }, [rivers, screenId, setScreenContext]);
+
+  const parentCallback = props.resultCallback;
+
+  const screenAction = useCallbackActions(
+    hookPlugin || screenData,
+    screenData.callback
+  );
+
+  const callbackAction = parentCallback || screenAction;
 
   const ScreenPlugin =
     findPluginByType(screenType, plugins, { skipWarning: true }) ||
@@ -86,6 +104,7 @@ export function ScreenResolverComponent(props: Props) {
     return (
       screenData && (
         <HookRenderer
+          callback={callbackAction}
           screenData={screenData}
           focused={props.focused}
           parentFocus={props.parentFocus as ParentFocus}
@@ -108,9 +127,11 @@ export function ScreenResolverComponent(props: Props) {
     return (
       <ScreenComponent
         {...props}
+        callback={callbackAction}
         screenId={screenId}
         screenData={screenData}
         configuration={configuration}
+        presentationType={PresentationType.Standalone}
       />
     );
   }

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -0,0 +1,76 @@
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { once } from "ramda";
+
+const INITIAL_NUMBER_TO_LOAD = 3;
+
+// Infer the values of COMPONENT_LOADING_STATE as a type
+type ComponentLoadingState =
+  (typeof COMPONENT_LOADING_STATE)[keyof typeof COMPONENT_LOADING_STATE];
+
+export const COMPONENT_LOADING_STATE = {
+  UNKNOWN: "UNKNOWN",
+  LOADED_WITH_SUCCESS: "LOADED_WITH_SUCCESS",
+  LOADED_WITH_FAILURE: "LOADED_WITH_FAILURE",
+} as const;
+
+// Function to get the number of loaded components
+const getNumberOfLoaded = (states: ComponentLoadingState[]): number => {
+  return states.filter((value) => value !== COMPONENT_LOADING_STATE.UNKNOWN)
+    .length;
+};
+
+const getNumberOfComponentsWaitToLoadBeforePresent = (
+  componentsToRender: ZappUIComponent[]
+): number => {
+  // when Gallery is the first component, no need to wait the others
+  if (isFirstComponentGallery(componentsToRender)) {
+    return 1;
+  }
+
+  return Math.min(INITIAL_NUMBER_TO_LOAD, componentsToRender.length);
+};
+
+export class ScreenRevealManager {
+  public numberOfComponentsWaitToLoadBeforePresent: number;
+  private renderingState: Array<ComponentLoadingState>;
+  private callback: Callback;
+
+  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+    this.numberOfComponentsWaitToLoadBeforePresent =
+      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+
+    this.renderingState = makeListOf<ComponentLoadingState>(
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      this.numberOfComponentsWaitToLoadBeforePresent
+    );
+
+    this.callback = once(callback);
+  }
+
+  onLoadFinished = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  onLoadFailed = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  setIsReadyToShow = (): void => {
+    this.callback();
+  };
+}