@applicaster/zapp-react-native-ui-components 15.0.0-rc.13 → 15.0.0-rc.131

package/Components/Screen/hooks.ts

@@ -1,19 +1,89 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useAppData } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useGetScreenOrientation,
   isOrientationCompatible,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import {
   useCurrentScreenData,
-  useDimensions,
   useRoute,
   useIsTablet,
+  useIsScreenActive,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useMemo, useEffect, useState } from "react";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+
+type MemoizedSafeAreaFrameWithActiveStateOptions = {
+  updateForInactiveScreens?: boolean;
+  isActive: boolean;
+};
+
+/**
+ * Base hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Requires isActive to be passed explicitly - use useMemoizedSafeAreaFrame for automatic detection.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @param options.isActive - Whether the screen is currently active
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrameWithActiveState = (
+  options: MemoizedSafeAreaFrameWithActiveStateOptions
+) => {
+  const { updateForInactiveScreens = true, isActive } = options;
+  const frame = useSafeAreaFrame();
+
+  const [memoFrame, setMemoFrame] = useState(frame);
+
+  useEffect(() => {
+    const shouldUpdate = isActive || updateForInactiveScreens;
+
+    const dimensionsChanged =
+      frame.width !== memoFrame.width || frame.height !== memoFrame.height;
+
+    if (shouldUpdate && dimensionsChanged) {
+      setMemoFrame(frame);
+    }
+  }, [
+    frame.width,
+    frame.height,
+    isActive,
+    updateForInactiveScreens,
+    frame,
+    memoFrame.width,
+    memoFrame.height,
+  ]);
+
+  return memoFrame;
+};
+
+type MemoizedSafeAreaFrameOptions = {
+  updateForInactiveScreens?: boolean;
+};
+
+/**
+ * Hook that wraps useSafeAreaFrame with memoization and inactive screen filtering.
+ * Uses useIsScreenActive() internally to determine active state - use useMemoizedSafeAreaFrameWithActiveState
+ * if you need to pass isActive explicitly.
+ *
+ * @param options.updateForInactiveScreens - If false, frame won't update when screen is inactive (default: true)
+ * @returns The memoized safe area frame { x, y, width, height }
+ */
+export const useMemoizedSafeAreaFrame = (
+  options: MemoizedSafeAreaFrameOptions = {}
+) => {
+  const { updateForInactiveScreens = true } = options;
+  const isActive = useIsScreenActive();
+
+  return useMemoizedSafeAreaFrameWithActiveState({
+    updateForInactiveScreens,
+    isActive,
+  });
+};
 
 export const useWaitForValidOrientation = () => {
-  const { width: screenWidth, height } = useDimensions("screen", {
-    fullDimensions: true,
+  // Use memoized safe area frame to synchronize with Scene's dimension source
+  // This prevents race conditions where the orientation check passes before
+  // Scene's memoFrame has updated to the new dimensions
+  const { width: screenWidth, height } = useMemoizedSafeAreaFrame({
     updateForInactiveScreens: false,
   });
 
@@ -25,8 +95,7 @@ export const useWaitForValidOrientation = () => {
 
   const isTablet = useIsTablet();
 
-  const { appData } = usePickFromState(["appData"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const { isTabletPortrait } = useAppData();
 
   const layoutData = useMemo(
     () => ({ isTablet, isTabletPortrait, width: screenWidth, height }),

package/Components/Screen/index.tsx

@@ -1,8 +1,7 @@
 /// <reference types="@applicaster/applicaster-types" />
 import React from "react";
 import { AccessibilityInfo, findNodeHandle, View } from "react-native";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
-
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { getComponentModule } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
@@ -41,7 +40,7 @@ type Props = {
 export function Screen(_props: Props) {
   const theme = useTheme<BaseThemePropertiesMobile>();
   const navigation = useNavigation();
-  const { plugins } = usePickFromState(["plugins"]);
+  const plugins = usePlugins();
 
   // Gets the data for the current screen configuration
   const currentScreenData = useCurrentScreenData();
@@ -93,7 +92,13 @@ export function Screen(_props: Props) {
   const isActive = useIsScreenActive();
 
   const ref = React.useRef(null);
-  const isReady = useWaitForValidOrientation();
+  const isOrientationReady = useWaitForValidOrientation();
+
+  // Playable screens handle their own orientation via the native player plugin,
+  // so we skip the orientation wait gate to avoid a deadlock where the screen
+  // waits for landscape but blocks rendering that would trigger the rotation.
+  const isPlayableRoute = pathname?.includes("/playable");
+  const isReady = isOrientationReady || isPlayableRoute;
 
   React.useEffect(() => {
     if (ref.current && isActive && isReady) {

package/Components/Screen/navigationHandler.ts

@@ -1,35 +1,19 @@
 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
- *
- * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
- * the menu, will be hidden
- *
- * - playable screens
- * - qb_search_screen
- * - screen hooks that specify showNavBar or presentFullScreen
- * - screens or nested screens that have allow_screen_plugin_presentation set to true
- *
- * @param {String} route current route of the screen
- * @param {Object} screenData payload associated with the currently presented screen
- * @returns {Boolean}
- */
-export function isMenuVisible(route, screenData, plugins) {
-  const plugin = resolveNavigationPlugin({
+export const BOTTOM_TABS_PLUGIN_ID = "quick-brick-bottom-tabs";
+
+export const SIDE_MENU_PLUGIN_ID = "quick_brick_side_menu";
+
+export function getMenuPlugin(screenData, plugins) {
+  return resolveNavigationPlugin({
     category: "menu",
     navigations:
       screenData?.navigations || screenData?.targetScreen?.navigations,
     plugins,
   });
+}
 
-  const isBottomTabsPlugin = plugin?.identifier === "quick-brick-bottom-tabs";
-
-  if (!isBottomTabsPlugin) {
-    return false;
-  }
-
+function shouldShowNavigation(route, screenData) {
   if (route.includes("playable")) {
     return false;
   }
@@ -56,3 +40,44 @@ export function isMenuVisible(route, screenData, plugins) {
 
   return true;
 }
+
+/**
+ * This function helps to decide whether the menu should be presented on the screen
+ * based on route and / or screen Data
+ *
+ * is similar to the navbar, except that it covers scenarios where only the navbar (and not)
+ * the menu will be hidden
+ *
+ * - playable screens
+ * - qb_search_screen
+ * - screen hooks that specify showNavBar or presentFullScreen
+ * - screens or nested screens that have allow_screen_plugin_presentation set to true
+ *
+ * @param {String} route current route of the screen
+ * @param {Object} screenData payload associated with the currently presented screen
+ * @returns {Boolean}
+ */
+export function isMenuVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+  const isSideMenuPlugin = plugin?.identifier === SIDE_MENU_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin && !isSideMenuPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}
+
+export function isBottomTabVisible(route, screenData, plugins) {
+  const plugin = getMenuPlugin(screenData, plugins);
+
+  const isBottomTabsPlugin = plugin?.identifier === BOTTOM_TABS_PLUGIN_ID;
+
+  if (!isBottomTabsPlugin) {
+    return false;
+  }
+
+  return shouldShowNavigation(route, screenData);
+}

package/Components/Screen/orientationHandler.ts

@@ -1,18 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  ORIENTATIONS,
   getOrientation,
+  ORIENTATIONS,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import { ZappHookModalContext } from "../../Contexts";
-import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
+import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -65,8 +63,8 @@ export function useNewOrientationForScreenData({
 }: OrientationHookArgs) {
   const isTablet = useIsTablet();
 
-  const { appData, plugins } = usePickFromState(["appData", "plugins"]);
-  const isTabletPortrait = appData?.isTabletPortrait;
+  const plugins = usePlugins();
+  const { isTabletPortrait } = useAppData();
   const isLandscapeTablet = isTablet && !isTabletPortrait;
 
   const screenOrientation = useGetScreenOrientation(screenData);
@@ -89,10 +87,6 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
-  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
-    ZappHookModalContext.ReactContext
-  );
-
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -105,6 +99,9 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
+    // TODO: make sure it can be static getter and subscription is not needed
+    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
+
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -116,7 +113,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
+  }, [newOrientation, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/ScreenFeedLoader/ScreenFeedLoader.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import { PreloaderWrapper } from "../PreloaderWrapper";
+import { useScreenContextV2 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useFeedLoader } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("ScreenFeedLoader");
+
+/** Loads and provides `feedData` and store to  */
+export const ScreenFeedLoader: React.FC<
+  React.PropsWithChildren<{ id: string; feedData: any }>
+> = ({ id, feedData, children }) => {
+  const { source: feedUrl, mapping } = feedData;
+
+  const { data, loading, error } = useFeedLoader({
+    feedUrl,
+    mapping,
+    pipesOptions: {},
+  });
+
+  const feedStore = useScreenContextV2()._feedStore;
+
+  useEffect(() => {
+    if (data && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: null });
+
+      logger.log("screenFeed set for active screen", { data, screenId: id });
+    }
+
+    if (error && !loading) {
+      feedStore.setState({ screenFeed: data, screenFeedError: error });
+
+      logger.warning("Feed data error:", {
+        data,
+        loading,
+        error,
+        screenId: id,
+      });
+    }
+  }, [data, loading, error, feedStore, id]);
+
+  return (
+    <PreloaderWrapper showPreloader={loading}>{children}</PreloaderWrapper>
+  );
+};

package/Components/ScreenFeedLoader/__tests__/ScreenFeedLoader.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Text } from "react-native";
+import { render, waitFor } from "@testing-library/react-native";
+import { ScreenFeedLoader } from "../ScreenFeedLoader";
+
+const mockUseFeedLoader = jest.fn();
+const mockUseScreenContextV2 = jest.fn();
+const mockSetState = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useFeedLoader: (...args) => mockUseFeedLoader(...args),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContextV2: (...args) => mockUseScreenContextV2(...args),
+  })
+);
+
+describe("ScreenFeedLoader", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseScreenContextV2.mockReturnValue({
+      _feedStore: {
+        setState: mockSetState,
+      },
+    });
+  });
+
+  it("hides children while loading", () => {
+    mockUseFeedLoader.mockReturnValue({
+      data: null,
+      loading: true,
+      error: null,
+    });
+
+    const { queryByText } = render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    expect(queryByText("child")).toBeNull();
+  });
+
+  it("writes loaded feed data to _feedStore", async () => {
+    const data = { entry: { id: "1" } };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error: null,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: null,
+      });
+    });
+  });
+
+  it("writes feed error to _feedStore", async () => {
+    const error = new Error("feed failed");
+    const data = { fallback: true };
+
+    mockUseFeedLoader.mockReturnValue({
+      data,
+      loading: false,
+      error,
+    });
+
+    render(
+      <ScreenFeedLoader id="test" feedData={{ source: "url", mapping: {} }}>
+        <Text>child</Text>
+      </ScreenFeedLoader>
+    );
+
+    await waitFor(() => {
+      expect(mockSetState).toHaveBeenCalledWith({
+        screenFeed: data,
+        screenFeedError: error,
+      });
+    });
+  });
+});

package/Components/ScreenFeedLoader/index.ts

@@ -0,0 +1 @@
+export { ScreenFeedLoader } from "./ScreenFeedLoader";

package/Components/ScreenResolver/__tests__/screenResolver.test.js

@@ -53,6 +53,9 @@ const mockComponents = { ScreenType1, ScreenType2, PlayerController };
 
 const mockState = {
   components: mockComponents,
+  remoteConfigurations: {
+    assets: {},
+  },
   plugins: [
     mockScreenType3,
     mockScreenType4,
@@ -127,6 +130,21 @@ const getWrapper = (screenId, screenType, screenData) => {
   );
 };
 
+const getWrappedWrapper = (screenId, screenType, screenData) => {
+  const ScreenResolver = require("../").ScreenResolver;
+
+  return renderWithProviders(
+    <ScreenResolver
+      {...{
+        screenId,
+        screenType,
+        screenData,
+      }}
+    />,
+    mockState
+  );
+};
+
 describe("<ScreenResolver />", () => {
   it("renders correctly", () => {
     const wrapper = getWrapper("1234", "screen_type_1", {});
@@ -134,6 +152,12 @@ describe("<ScreenResolver />", () => {
     expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
   });
 
+  it("renders correctly when wrapped with default screen context", () => {
+    const wrapper = getWrappedWrapper("1234", "screen_type_1", {});
+
+    expect(wrapper.getByTestId("screen_type_1")).toBeDefined();
+  });
+
   it("picks screen from plugins if it exists", () => {
     const wrapper = getWrapper("A1234", "screen_type_3", {});
 

package/Components/ScreenResolver/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useGetComponent } from "./useGetComponent";
+
+export { useScreenComponentResolver } from "./useScreenComponentResolver";

package/Components/ScreenResolver/hooks/useGetComponent.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { toPascalCase } from "@applicaster/zapp-react-native-utils/stringUtils";
+import {
+  useAppSelector,
+  selectComponents,
+} from "@applicaster/zapp-react-native-redux";
+
+export const useGetComponent = (screenType) => {
+  const components = useAppSelector(selectComponents);
+
+  return React.useMemo(() => {
+    return components[toPascalCase(screenType)];
+  }, [components, screenType]);
+};

package/Components/ScreenResolver/hooks/useScreenComponentResolver.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { path, prop } from "ramda";
+import {
+  findPluginByType,
+  findPluginByIdentifier,
+} from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { HandlePlayable } from "../../HandlePlayable";
+import { HookRenderer } from "../../HookRenderer";
+import { LinkHandler } from "../../LinkHandler";
+import { Favorites } from "../../Favorites";
+import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { useGetComponent } from "./useGetComponent";
+import { getScreenTypeProps } from "../utils";
+
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
+
+const screenTypeComponents = {
+  favorites: Favorites,
+  link: LinkHandler,
+  playable: HandlePlayable,
+  hooks: HookRenderer,
+};
+
+export const useScreenComponentResolver = (screenType, props) => {
+  const plugins = usePlugins();
+  const { hookPlugin } = props.screenData || {};
+  const component = useGetComponent(screenType);
+
+  const screenAction = useCallbackActions(
+    hookPlugin || props.screenData,
+    props.screenData.callback
+  );
+
+  const {
+    videoModalState: { mode },
+  } = useNavigation();
+
+  const componentProps = {
+    ...props,
+    mode,
+    screenAction,
+  };
+
+  const ScreenTypeComponent = screenTypeComponents?.[screenType];
+
+  if (ScreenTypeComponent) {
+    return (
+      <ScreenTypeComponent
+        {...getScreenTypeProps(screenType, componentProps)}
+      />
+    );
+  }
+
+  const ScreenPlugin =
+    findPluginByType(screenType, plugins, { skipWarning: true }) ||
+    findPluginByIdentifier(screenType, plugins) ||
+    findPluginByIdentifier(hookPlugin && hookPlugin.identifier, plugins) ||
+    component;
+
+  const ScreenComponent =
+    path(["module", "Component"], ScreenPlugin) ||
+    prop("module", ScreenPlugin) ||
+    prop("Component", ScreenPlugin) ||
+    ScreenPlugin;
+
+  const configuration =
+    prop("configuration", ScreenPlugin) ||
+    prop("__plugin_configuration", ScreenComponent);
+
+  if (!ScreenComponent) {
+    return null;
+  }
+
+  return (
+    <ScreenComponent
+      {...props}
+      callback={props.resultCallback || screenAction}
+      screenId={props.screenId}
+      screenData={props.screenData}
+      presentationType={PresentationType.Standalone}
+      configuration={configuration}
+    />
+  );
+};