@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 16.0.0-rc.1

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}
+    />
+  );
+};

package/Components/ScreenResolver/index.tsx

@@ -1,29 +1,17 @@
 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 { toPascalCase } from "@applicaster/zapp-react-native-utils/stringUtils";
-import { HookRenderer } from "../HookRenderer";
-import { LinkHandler } from "../LinkHandler";
-import { Favorites } from "../Favorites";
-import { ZappPipesScreenContext } from "../../Contexts";
+
 import { componentsLogger } from "../../Helpers/logger";
-import {
-  useAppSelector,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux/hooks";
-import {
-  useNavigation,
-  useRivers,
-} 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";
-import { selectComponents } from "@applicaster/zapp-react-native-redux";
+import { useScreenComponentResolver } from "./hooks/useScreenComponentResolver";
+import { withDefaultScreenContext } from "./withDefaultScreenContext";
+
+export enum PresentationType {
+  Standalone = "Standalone",
+  Hook = "Hook",
+}
 
 const logger = componentsLogger.addSubsystem("ScreenResolver");
 
@@ -44,102 +32,14 @@ type Props = {
   groupId?: string;
 };
 
-export enum PresentationType {
-  Standalone = "Standalone",
-  Hook = "Hook",
-}
-
 export function ScreenResolverComponent(props: Props) {
-  useScreenAnalytics(props);
-
-  const { screenType, screenId, screenData, groupId } = props;
-
-  const { hookPlugin } = screenData || {};
-
-  const plugins = usePlugins();
-  const rivers = useRivers();
-
-  const components = useAppSelector(selectComponents);
+  const { screenType } = props;
+  const component = useScreenComponentResolver(screenType, props);
 
-  const {
-    videoModalState: { mode },
-  } = useNavigation();
-
-  const [, setScreenContext] = ZappPipesScreenContext.useZappPipesContext();
-
-  React.useEffect(() => {
-    setScreenContext(rivers[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 }) ||
-    findPluginByIdentifier(screenType, plugins) ||
-    findPluginByIdentifier(hookPlugin && hookPlugin.identifier, plugins) ||
-    components[toPascalCase(screenType)];
-
-  if (screenType === "favorites") {
-    return <Favorites screenData={screenData} />;
-  }
-
-  if (screenType === "link") {
-    return <LinkHandler screenData={screenData} />;
-  }
-
-  if (screenType === "playable") {
-    return (
-      // @ts-ignore
-      <HandlePlayable
-        item={screenData}
-        mode={mode === "PIP" ? "PIP" : "FULLSCREEN"}
-        isModal={false}
-        groupId={groupId}
-      />
-    );
-  }
-
-  if (hookPlugin || screenType === "hooks") {
-    return (
-      screenData && (
-        <HookRenderer
-          callback={callbackAction}
-          screenData={screenData}
-          focused={props.focused}
-          parentFocus={props.parentFocus as ParentFocus}
-        />
-      )
-    );
-  }
-
-  const ScreenComponent =
-    path(["module", "Component"], ScreenPlugin) ||
-    prop("module", ScreenPlugin) ||
-    prop("Component", ScreenPlugin) ||
-    ScreenPlugin;
-
-  const configuration =
-    prop("configuration", ScreenPlugin) ||
-    prop("__plugin_configuration", ScreenComponent);
+  useScreenAnalytics(props);
 
-  if (ScreenComponent) {
-    return (
-      <ScreenComponent
-        {...props}
-        callback={callbackAction}
-        screenId={screenId}
-        screenData={screenData}
-        configuration={configuration}
-        presentationType={PresentationType.Standalone}
-      />
-    );
+  if (component) {
+    return component;
   }
 
   logger.warning({
@@ -150,6 +50,4 @@ export function ScreenResolverComponent(props: Props) {
   return null;
 }
 
-export const ScreenResolver = ZappPipesScreenContext.withProvider(
-  ScreenResolverComponent
-);
+export const ScreenResolver = withDefaultScreenContext(ScreenResolverComponent);

package/Components/ScreenResolver/utils/__tests__/getScreenTypeProps.test.ts

@@ -0,0 +1,45 @@
+import { getScreenTypeProps } from "../getScreenTypeProps";
+
+const baseProps = {
+  screenData: { id: "entry-1" },
+  mode: "PIP",
+  screenId: "screen-1",
+  groupId: "group-1",
+  focused: true,
+  parentFocus: { nextFocusDown: { current: null } },
+  screenAction: jest.fn(),
+  resultCallback: null,
+};
+
+describe("getScreenTypeProps", () => {
+  it("returns props for favorites/link", () => {
+    expect(getScreenTypeProps("favorites", baseProps)).toEqual({
+      screenData: baseProps.screenData,
+    });
+
+    expect(getScreenTypeProps("link", baseProps)).toEqual({
+      screenData: baseProps.screenData,
+    });
+  });
+
+  it("returns props for playable", () => {
+    expect(getScreenTypeProps("playable", baseProps)).toEqual({
+      item: baseProps.screenData,
+      mode: "PIP",
+      isModal: false,
+      groupId: "group-1",
+    });
+  });
+
+  it("returns props for hooks", () => {
+    const result = getScreenTypeProps("hooks", baseProps);
+
+    expect(result).toMatchObject({
+      screenData: baseProps.screenData,
+      focused: true,
+      parentFocus: baseProps.parentFocus,
+    });
+
+    expect(result.callback).toBe(baseProps.screenAction);
+  });
+});

package/Components/ScreenResolver/utils/getScreenTypeProps.ts

@@ -0,0 +1,43 @@
+export const getScreenTypeProps = (
+  screenType: "favorites" | "link" | "playable" | "hooks",
+  props
+) => {
+  const {
+    screenData,
+    mode,
+    screenId,
+    groupId,
+    focused,
+    parentFocus,
+    screenAction,
+    resultCallback,
+  } = props;
+
+  switch (screenType) {
+    case "favorites":
+    case "link":
+      return {
+        screenData,
+      };
+    case "playable":
+      return {
+        item: screenData,
+        mode: mode === "PIP" ? "PIP" : "FULLSCREEN",
+        isModal: false,
+        groupId: groupId,
+      };
+    case "hooks":
+      return {
+        screenData,
+        callback: resultCallback || screenAction,
+        focused,
+        parentFocus: parentFocus as ParentFocus,
+      };
+    default:
+      return {
+        callback: resultCallback || screenAction,
+        screenId: screenId,
+        screenData,
+      };
+  }
+};

package/Components/ScreenResolver/utils/index.ts

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

package/Components/ScreenResolver/withDefaultScreenContext.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { ZappPipesScreenContext } from "../../Contexts";
+
+export function withDefaultScreenContext(Component: React.ComponentType<any>) {
+  return function WithDefaultScreenContext(props: any) {
+    const screenId = props.screenId;
+    const rivers = useRivers();
+
+    return (
+      <ZappPipesScreenContext.Provider initialContextValue={rivers[screenId]}>
+        <Component {...props} />
+      </ZappPipesScreenContext.Provider>
+    );
+  };
+}

package/Components/ScreenResolverFeedProvider/ScreenResolverFeedProvider.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { ScreenFeedLoader } from "../ScreenFeedLoader/ScreenFeedLoader";
+
+/** Resolves screen-feed for a given screen `id` by using the provided `useFeedData` hook */
+export const ScreenResolverFeedProvider = ({
+  id,
+  children,
+  useFeedData,
+}: {
+  id: string;
+  children: React.ReactNode;
+  useFeedData: (id: string) => Option<ZappDataSource>;
+}) => {
+  const feedData = useFeedData(id);
+
+  if (feedData?.source) {
+    return (
+      <ScreenFeedLoader id={id} feedData={feedData}>
+        {children}
+      </ScreenFeedLoader>
+    );
+  } else {
+    return <>{children}</>;
+  }
+};

package/Components/ScreenResolverFeedProvider/__tests__/ScreenResolverFeedProvider.test.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider";
+
+jest.mock("../../ScreenFeedLoader/ScreenFeedLoader", () => ({
+  ScreenFeedLoader: ({ children }) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="feed-loader">{children}</View>;
+  },
+}));
+
+describe("ScreenResolverFeedProvider", () => {
+  it("renders ScreenFeedLoader when screen feed source exists", () => {
+    const useFeedData = jest.fn(() => ({
+      source: "https://feed",
+      mapping: {},
+    }));
+
+    const { getByTestId, getByText } = render(
+      <ScreenResolverFeedProvider id="screen-1" useFeedData={useFeedData}>
+        <Text>content</Text>
+      </ScreenResolverFeedProvider>
+    );
+
+    expect(getByTestId("feed-loader")).toBeDefined();
+    expect(getByText("content")).toBeDefined();
+  });
+
+  it("renders children directly when screen feed source is missing", () => {
+    const useFeedData = jest.fn(() => ({}));
+
+    const { queryByTestId, getByText } = render(
+      <ScreenResolverFeedProvider id="screen-1" useFeedData={useFeedData}>
+        <Text>content</Text>
+      </ScreenResolverFeedProvider>
+    );
+
+    expect(queryByTestId("feed-loader")).toBeNull();
+    expect(getByText("content")).toBeDefined();
+  });
+});

package/Components/ScreenResolverFeedProvider/index.ts

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

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -25,6 +25,7 @@ export const SHOWN = 1; // opacity = 1
 
 type Props = {
   componentsToRender: ZappUIComponent[];
+  backgroundColor?: string;
 };
 
 export const withScreenRevealManager = (Component) => {
@@ -97,7 +98,9 @@ export const withScreenRevealManager = (Component) => {
               styles.container,
               {
                 opacity: opacityRef.current,
-                backgroundColor: theme.app_background_color,
+                // TODO: we should support background image as well, but for now we will use background color from theme
+                backgroundColor:
+                  props.backgroundColor ?? theme.app_background_color,
               },
             ]}
             testID="animated-component"

package/Components/TopCutoffOverlay/__tests__/TopCutoffOverlay.test.tsx

@@ -0,0 +1,201 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/River/useScreenConfiguration",
+  () => ({
+    useScreenConfiguration: jest.fn(),
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Components/TopCutoffOverlay/hooks",
+  () => ({
+    useMarginTop: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+import { TopCutoffOverlay } from "../index";
+import { useMarginTop } from "../hooks";
+import { useScreenConfiguration } from "../../River/useScreenConfiguration";
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+
+// Recursively find a View with position: absolute in the JSON tree
+const findOverlayStyle = (node: any): Record<string, any> | null => {
+  if (!node) return null;
+
+  // Style can be a plain object or an array of style objects
+  const styles = Array.isArray(node.props?.style)
+    ? node.props.style
+    : node.props?.style
+      ? [node.props.style]
+      : [];
+
+  const styleObj = styles.find((s: any) => s?.position === "absolute");
+  if (styleObj) return styleObj;
+
+  const children = node.children || [];
+
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  const propChildren = node.props?.children;
+
+  if (propChildren && Array.isArray(propChildren)) {
+    for (const child of propChildren) {
+      const result = findOverlayStyle(child);
+      if (result) return result;
+    }
+  }
+
+  if (
+    typeof propChildren === "object" &&
+    propChildren !== null &&
+    "type" in propChildren
+  ) {
+    return findOverlayStyle(propChildren);
+  }
+
+  return null;
+};
+
+describe("TopCutoffOverlay", () => {
+  const mockUseMarginTop = useMarginTop as jest.MockedFunction<
+    typeof useMarginTop
+  >;
+
+  const mockUseScreenConfig = useScreenConfiguration as jest.MockedFunction<
+    typeof useScreenConfiguration
+  >;
+
+  const mockUseTheme = useTheme as jest.MockedFunction<typeof useTheme>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseMarginTop.mockReturnValue(60);
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#1a1a1a" });
+    mockUseTheme.mockReturnValue({ app_background_color: "#222222" });
+  });
+
+  it("renders children when applyTopCutoff is false", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+
+  it("does not render overlay when applyTopCutoff is false", () => {
+    const tree = render(
+      <TopCutoffOverlay applyTopCutoff={false}>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).toBeNull();
+  });
+
+  it("renders overlay when applyTopCutoff is true (default)", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())).not.toBeNull();
+  });
+
+  it("renders overlay with correct height from useMarginTop", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.height).toBe(60);
+  });
+
+  it("uses screenBackgroundColor from useScreenConfiguration when available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: "#ff0000" });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#ff0000");
+  });
+
+  it("falls back to themeBackgroundColor when screenBackgroundColor is not available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe("#222222");
+  });
+
+  it("falls back to transparent when neither screenBackgroundColor nor themeBackgroundColor is available", () => {
+    mockUseScreenConfig.mockReturnValue({ backgroundColor: undefined });
+    mockUseTheme.mockReturnValue({});
+
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(findOverlayStyle(tree.toJSON())?.backgroundColor).toBe(
+      "transparent"
+    );
+  });
+
+  it("passes targetScreenId to useMarginTop and useScreenConfiguration", () => {
+    render(
+      <TopCutoffOverlay targetScreenId="custom-screen-1">
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(mockUseMarginTop).toHaveBeenCalledWith("custom-screen-1");
+    expect(mockUseScreenConfig).toHaveBeenCalledWith("custom-screen-1");
+  });
+
+  it("positions overlay at top with left/right 0", () => {
+    const tree = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    const style = findOverlayStyle(tree.toJSON());
+    expect(style?.top).toBe(0);
+    expect(style?.left).toBe(0);
+    expect(style?.right).toBe(0);
+  });
+
+  it("renders children inside the container", () => {
+    const { getByText } = render(
+      <TopCutoffOverlay>
+        <Text>Child content</Text>
+      </TopCutoffOverlay>
+    );
+
+    expect(getByText("Child content")).toBeTruthy();
+  });
+});