@applicaster/zapp-react-native-ui-components 14.0.0-rc.91 → 15.0.0-alpha.1017526116

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,17 +6,20 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { PresentationType } from "../ScreenResolver";
 
 type Props = {
   focused?: boolean;
   parentFocus?: ParentFocus;
   screenData: HookPluginProps;
+  callback: hookCallback;
 };
 
 export const HookRenderer = (props: Props) => {
   const {
     focused,
-    screenData: { callback, payload, hookPlugin },
+    screenData: { payload, hookPlugin },
+    callback,
   } = props;
 
   const { setVisible: showNavBar } = useSetNavbarState();
@@ -60,6 +63,7 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
+        presentationType: PresentationType.Hook,
       }}
     />
   );

package/Components/River/RiverItem.tsx

@@ -13,6 +13,7 @@ import { riverLogger } from "./logger";
 import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
+import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -85,6 +86,7 @@ function RiverItemComponent(props: RiverItemType) {
     loadingState,
   } = props;
 
+  const callbackAction = useCallbackActions(item);
   const readyToBeDisplayed = useLoadingState(index, loadingState);
 
   const feedUrl = getFeedUrl(feed, index);
@@ -155,6 +157,7 @@ function RiverItemComponent(props: RiverItemType) {
       groupId={groupId}
       feedUrl={feedUrl}
       isLast={isLast}
+      callback={callbackAction}
     />
   );
 }

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

@@ -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/ZappFrameworkComponents/BarView/BarView.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { StyleSheet, View } from "react-native";
 
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import CloseButton from "./Buttons/CloseButton";
@@ -45,15 +44,14 @@ const BarView = ({ screenStyles, barState = defaultState }: Props) => {
   );
 
   return (
-    <SafeAreaView
-      edges={["top", "left", "right"]}
+    <View
       style={[style.view, isRTL ? style.rtlStyle : {}]}
-      testID="BarView-safeAreaView"
+      testID="BarView-Container"
     >
       {backButton}
       <BarTitle title={barState.title} screenStyles={screenStyles} />
       {closeButton}
-    </SafeAreaView>
+    </View>
   );
 };
 

package/Components/ZappFrameworkComponents/BarView/__tests__/BarView.test.tsx

@@ -46,7 +46,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });
@@ -58,7 +58,7 @@ describe("BarView", () => {
       <BarView screenStyles={screenStyles} barState={barState} />
     );
 
-    expect(getByTestId("BarView-safeAreaView").props.style).not.toContainEqual({
+    expect(getByTestId("BarView-Container").props.style).not.toContainEqual({
       transform: [{ scaleX: -1 }],
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "14.0.0-rc.91",
+  "version": "15.0.0-alpha.1017526116",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "14.0.0-rc.91",
-    "@applicaster/zapp-react-native-bridge": "14.0.0-rc.91",
-    "@applicaster/zapp-react-native-redux": "14.0.0-rc.91",
-    "@applicaster/zapp-react-native-utils": "14.0.0-rc.91",
+    "@applicaster/applicaster-types": "15.0.0-alpha.1017526116",
+    "@applicaster/zapp-react-native-bridge": "15.0.0-alpha.1017526116",
+    "@applicaster/zapp-react-native-redux": "15.0.0-alpha.1017526116",
+    "@applicaster/zapp-react-native-utils": "15.0.0-alpha.1017526116",
     "promise": "^8.3.0",
     "url": "^0.11.0",
     "uuid": "^3.3.2"