@applicaster/zapp-react-native-ui-components 15.1.0-rc.3 → 16.0.0-alpha.7128076344

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -1,6 +1,11 @@
 import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
 import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
-import { once } from "ramda";
+import { race, Subject, Subscription } from "rxjs";
+import { first } from "rxjs/operators";
+
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
+
+const MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD = 2000; // 2 seconds
 
 const INITIAL_NUMBER_TO_LOAD = 3;
 
@@ -34,7 +39,8 @@ const getNumberOfComponentsWaitToLoadBeforePresent = (
 export class ScreenRevealManager {
   public numberOfComponentsWaitToLoadBeforePresent: number;
   private renderingState: Array<ComponentLoadingState>;
-  private callback: Callback;
+  private subject$ = new Subject<void>();
+  private subscription: Subscription;
 
   constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
     this.numberOfComponentsWaitToLoadBeforePresent =
@@ -45,32 +51,58 @@ export class ScreenRevealManager {
       this.numberOfComponentsWaitToLoadBeforePresent
     );
 
-    this.callback = once(callback);
+    this.subscription = race(
+      withTimeout$(MAX_TIMEOUT_TO_WAIT_COMPONENTS_TO_LOAD),
+      this.subject$
+    )
+      .pipe(first())
+      .subscribe(callback);
   }
 
   onLoadFinished = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
   onLoadFailed = (index: number): void => {
+    const currentState = this.renderingState[index];
+
+    if (
+      COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS === currentState ||
+      COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE === currentState
+    ) {
+      return;
+    }
+
     this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
 
     if (
       getNumberOfLoaded(this.renderingState) >=
       this.numberOfComponentsWaitToLoadBeforePresent
     ) {
-      this.setIsReadyToShow();
+      this.subject$.next();
+      this.subject$.complete();
     }
   };
 
-  setIsReadyToShow = (): void => {
-    this.callback();
-  };
+  dispose(): void {
+    this.subscription?.unsubscribe();
+    this.subject$.complete();
+  }
 }

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -2,106 +2,123 @@ import {
   ScreenRevealManager,
   COMPONENT_LOADING_STATE,
 } from "../ScreenRevealManager";
+import { Subject } from "rxjs";
+
+jest.mock("@applicaster/zapp-react-native-utils/arrayUtils", () => ({
+  makeListOf: jest.fn((value: any, length: number) =>
+    Array(length).fill(value)
+  ),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentGallery: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/idleUtils", () => ({
+  withTimeout$: jest.fn(),
+}));
+
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { withTimeout$ } from "@applicaster/zapp-react-native-utils/idleUtils";
 
 describe("ScreenRevealManager", () => {
-  const mockCallback = jest.fn();
+  let mockCallback: jest.Mock;
+  let timeout$: Subject<void>;
 
   beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should initialize with the correct number of components to wait for", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+    jest.useFakeTimers();
+    mockCallback = jest.fn();
+    timeout$ = new Subject();
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    (withTimeout$ as jest.Mock).mockReturnValue(timeout$);
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(false);
 
-    expect(manager.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    (makeListOf as jest.Mock).mockImplementation((value, length) =>
+      Array(length).fill(value)
+    );
+  });
 
-    expect(manager.renderingState).toEqual([
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-      COMPONENT_LOADING_STATE.UNKNOWN,
-    ]);
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+    jest.resetAllMocks();
   });
 
-  it("should call the callback when the required number of components are loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should initialize with correct number of components and UNKNOWN state", () => {
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(3);
+    expect(makeListOf).toHaveBeenCalledWith(COMPONENT_LOADING_STATE.UNKNOWN, 3);
+  });
 
-    manager.onLoadFinished(0);
-    manager.onLoadFinished(1);
-    manager.onLoadFinished(2);
+  // ────────────────────────────────────────────────
+  it("should set numberOfComponentsWaitToLoadBeforePresent to 1 if first component is gallery", () => {
+    (isFirstComponentGallery as jest.Mock).mockReturnValue(true);
 
-    expect(mockCallback).toHaveBeenCalledTimes(1);
+    const components = new Array(5).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
+
+    expect(mgr.numberOfComponentsWaitToLoadBeforePresent).toBe(1);
   });
 
-  it("should call the callback when the required number of components fail to load", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback after all components load successfully", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+    mgr.onLoadFinished(0);
+    expect(mockCallback).not.toHaveBeenCalled();
 
-    manager.onLoadFailed(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFailed(2);
+    mgr.onLoadFinished(1);
+    expect(mockCallback).not.toHaveBeenCalled();
 
+    mgr.onLoadFinished(2);
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should trigger callback after some components fail to load but all finished", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
-    manager.onLoadFinished(2);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFailed(1);
+    mgr.onLoadFailed(2);
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should not call the callback if the required number of components are not loaded", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "component1" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
-
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+  // ────────────────────────────────────────────────
+  it("should not trigger callback twice when same component finishes twice", () => {
+    const components = new Array(3).fill({});
+    const mgr = new ScreenRevealManager(components, mockCallback);
 
-    manager.onLoadFinished(0);
-    manager.onLoadFailed(1);
+    mgr.onLoadFinished(0);
+    mgr.onLoadFinished(0); // duplicate
+    mgr.onLoadFinished(1);
+    mgr.onLoadFinished(2);
 
-    expect(mockCallback).not.toHaveBeenCalled();
+    expect(mockCallback).toHaveBeenCalledTimes(1);
   });
 
-  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
-    const componentsToRender: ZappUIComponent[] = [
-      { component_type: "gallery-qb" },
-      { component_type: "component2" },
-      { component_type: "component3" },
-    ];
+  // ────────────────────────────────────────────────
+  it("should trigger callback when timeout$ emits before all loaded", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
 
-    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
-
-    manager.onLoadFinished(0);
+    timeout$.next(); // simulate timeout event from withTimeout$
 
     expect(mockCallback).toHaveBeenCalledTimes(1);
   });
+
+  // ────────────────────────────────────────────────
+  it("should not call callback if nothing loads and no timeout emitted", () => {
+    const components = new Array(3).fill({});
+    new ScreenRevealManager(components, mockCallback);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
 });

package/Components/Tabs/TabContent.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
-  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

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

package/Components/TopCutoffOverlay/hooks/__tests__/useMarginTop.test.ts

@@ -0,0 +1,130 @@
+import { renderHook } from "@testing-library/react-native";
+import { useMarginTop } from "../useMarginTop";
+
+// Mocks
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useCurrentScreenData: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/componentsUtils", () => ({
+  isFirstComponentScreenPicker: jest.fn(),
+}));
+
+// Imports after mocks
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+
+describe("useMarginTop", () => {
+  const mockTheme = {
+    screen_margin_top: 10,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    (useTheme as jest.Mock).mockReturnValue(mockTheme);
+  });
+
+  it("returns 0 when ScreenPicker is first component", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: [],
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(true);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns 0 for player screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "player",
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns theme value when margin is empty string", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: "",
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and general content screen", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "general_content",
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns theme value when undefined and supports ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      ui_components: ["something"],
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(10);
+  });
+
+  it("returns 0 when undefined and not general content and no ui_components", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      plugin_type: "other",
+      ui_components: null,
+      styles: {
+        screen_margin_top: undefined,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(0);
+  });
+
+  it("returns value from screenData when defined", () => {
+    (useCurrentScreenData as jest.Mock).mockReturnValue({
+      styles: {
+        screen_margin_top: 25,
+      },
+    });
+
+    (isFirstComponentScreenPicker as jest.Mock).mockReturnValue(false);
+
+    const { result } = renderHook(() => useMarginTop("screen1"));
+
+    expect(result.current).toBe(25);
+  });
+});

package/Components/TopCutoffOverlay/hooks/index.ts

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