@applicaster/zapp-react-native-utils 11.0.0-rc.99 → 12.0.0-rc.1

package/actionsExecutor/ActionExecutor.ts

@@ -0,0 +1,117 @@
+import { createLogger } from "../logger";
+
+export enum ActionResult {
+  Success = "success",
+  Error = "error",
+  Cancel = "cancel",
+}
+
+const { log_error, log_debug, log_info } = createLogger({
+  subsystem: "ActionExecutor",
+  category: "General",
+});
+
+class ActionExecutor {
+  private registeredActions: Record<string, any> = {};
+  // TODO: Remove context
+
+  handleAction = async (
+    action: ActionType,
+    entry: ZappEntry = null
+  ): Promise<ActionResult> => {
+    const handler = this.registeredActions[action.type];
+
+    if (!handler) {
+      log_error(
+        `handleAction: no handler found for action type: ${action.type}`,
+        { action, entry }
+      );
+
+      return;
+    }
+
+    log_debug(
+      `handleAction: ${action.type}${
+        entry ? `, entry id ${entry.id}, title: ${entry.title}` : ""
+      }`,
+      { action, entry }
+    );
+
+    try {
+      return handler(action, entry);
+    } catch (error) {
+      log_error(
+        `handleAction: error handling action type: ${action.type}, message: ${error.message}`,
+        { action, entry, error }
+      );
+
+      throw error;
+    }
+  };
+
+  handleActions = async (
+    actionTypes: ActionType[],
+    entry: ZappEntry = null
+  ): Promise<ActionResult> => {
+    for (const action of actionTypes) {
+      // TODO: Handle action result error
+      const result = await this.handleAction(action, entry);
+
+      if (result === ActionResult.Cancel) {
+        log_info(`handleActions: action: ${action.type} canceled`);
+
+        return result;
+      }
+    }
+
+    return ActionResult.Success;
+  };
+
+  handleEntryActions = async (entry: ZappEntry): Promise<ActionResult> => {
+    const tapActions = entry.extensions?.tap_actions?.actions;
+
+    if (!tapActions) {
+      return;
+    }
+
+    if (!Array.isArray(tapActions)) {
+      log_error(
+        `handleEntryActions: tapActions is not an array for id: ${entry.id} title: ${entry.title}`,
+        { entry }
+      );
+
+      return;
+    }
+
+    if (tapActions.length === 0) {
+      return;
+    }
+
+    await this.handleActions(tapActions, entry);
+  };
+
+  unregisterAction = (actionType: string) => {
+    delete this.registeredActions[actionType];
+  };
+
+  registerAction = (
+    type: string,
+    handler: (action: ActionType, entry?: ZappEntry) => Promise<ActionResult>
+  ) => {
+    if (this.registeredActions[type]) {
+      log_error(`registerAction: action type: ${type} already registered`);
+
+      return () => {};
+    }
+
+    this.registeredActions[type] = handler;
+    log_debug(`registerAction: action type: ${type} registered`);
+
+    return () => {
+      this.unregisterAction(type);
+      log_debug(`registerAction: action type: ${type} un-registered`);
+    };
+  };
+}
+
+export const actionExecutor = new ActionExecutor();

package/actionsExecutor/ActionExecutorContext.tsx

@@ -1,23 +1,25 @@
 /// <reference types="@applicaster/applicaster-types" />
 
 import React, { createContext, useMemo } from "react";
-import { createLogger } from "../logger";
+import {
+  actionExecutor as _actionExecutor,
+  ActionResult,
+} from "./ActionExecutor";
 import { batchSaveToLocalStorage } from "../zappFrameworkUtils/localStorageHelper";
-import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
 import { showConfirmationDialog } from "../alertUtils";
+import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
+import { createLogger } from "../logger";
+import {
+  StorageMultiSelectProvider
+} from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 
 const { log_error, log_debug, log_info } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
 
-export enum ActionResult {
-  Success = "success",
-  Error = "error",
-  Cancel = "cancel",
-}
-
 type ActionExecutorContextType = {
   registerAction: (
     type: string,
@@ -35,161 +37,114 @@ type Props = {
   children: React.ReactNode;
 };
 
-export const ActionExecutorContext =
-  createContext<ActionExecutorContextType>(null);
-
-class ActionExecutor {
-  private registeredActions: Record<string, any> = {};
-  // TODO: Remove context
-
-  constructor() {
-    this.prepareDefaultActions();
-  }
-
-  prepareDefaultActions = () => {
-    this.registerAction("localStorageSet", async (action) => {
-      const namespaces = action.options.content;
-      await batchSaveToLocalStorage(namespaces);
-      // TODO: Add support for ownershipKey and ownershipNamespace
+const prepareDefaultActions = (actionExecutor) => {
+  actionExecutor.registerAction("localStorageSet", async (action) => {
+    const namespaces = action.options.content;
+    await batchSaveToLocalStorage(namespaces);
+    // TODO: Add support for ownershipKey and ownershipNamespace
 
-      return ActionResult.Success;
-    });
+    return ActionResult.Success;
+  });
 
-    this.registeredActions["appRestart"] = async () => {
-      log_info(`handleAction: ${QUICK_BRICK_EVENTS.FORCE_APP_RELOAD} event`);
+  actionExecutor.registerAction("appRestart", async () => {
+    log_info(`handleAction: ${QUICK_BRICK_EVENTS.FORCE_APP_RELOAD} event`);
 
-      QuickBrickManager.sendQuickBrickEvent(
-        QUICK_BRICK_EVENTS.FORCE_APP_RELOAD
-      );
+    QuickBrickManager.sendQuickBrickEvent(QUICK_BRICK_EVENTS.FORCE_APP_RELOAD);
 
-      return ActionResult.Success;
-    };
+    return ActionResult.Success;
+  });
 
-    this.registeredActions["confirmDialog"] = async (action) => {
-      log_info("handleAction: confirmDialog event");
+  actionExecutor.registerAction("confirmDialog", async (action) => {
+    log_info("handleAction: confirmDialog event");
 
-      const confirmationPromise = new Promise<ActionResult>((resolve) => {
-        showConfirmationDialog({
-          ...action.options,
-          confirmCompletion: () => resolve(ActionResult.Success),
-          cancelCompletion: () => resolve(ActionResult.Cancel),
-        });
+    const confirmationPromise = new Promise<ActionResult>((resolve) => {
+      showConfirmationDialog({
+        ...action.options,
+        confirmCompletion: () => resolve(ActionResult.Success),
+        cancelCompletion: () => resolve(ActionResult.Cancel),
       });
+    });
 
-      return confirmationPromise;
-    };
-  };
-
-  handleAction = async (
-    action: ActionType,
-    entry: ZappEntry = null
-  ): Promise<ActionResult> => {
-    const handler = this.registeredActions[action.type];
-
-    if (!handler) {
-      log_error(
-        `handleAction: no handler found for action type: ${action.type}`,
-        { action, entry }
-      );
-
-      return;
-    }
-
-    log_debug(
-      `handleAction: ${action.type}${
-        entry ? `, entry id ${entry.id}, title: ${entry.title}` : ""
-      }`,
-      { action, entry }
-    );
+    return confirmationPromise;
+  });
 
+  actionExecutor.registerAction("sendCloudEvent", async (action, entry) => {
     try {
-      return handler(action, entry);
-    } catch (error) {
-      log_error(
-        `handleAction: error handling action type: ${action.type}, message: ${error.message}`,
-        { action, entry, error }
-      );
-
-      throw error;
-    }
-  };
+      const options = action.options;
 
-  handleActions = async (
-    actionTypes: ActionType[],
-    entry: ZappEntry = null
-  ): Promise<ActionResult> => {
-    for (const action of actionTypes) {
-      // TODO: Handle action result error
-      const result = await this.handleAction(action, entry);
+      const cloudEvent = await createCloudEvent({
+        type: options.type || "com.applicaster.selector.action.v1",
+        data: options.data || entry,
+        subject: options.subject || entry?.id,
+      });
 
-      if (result === ActionResult.Cancel) {
-        log_info(`handleActions: action: ${action.type} canceled`);
+      log_info("handleAction: sendCloudEvent event", { cloudEvent });
 
-        return result;
-      }
-    }
-
-    return ActionResult.Success;
-  };
+      const { error, code } = await sendCloudEvent(cloudEvent, options.url);
 
-  handleEntryActions = async (entry: ZappEntry): Promise<ActionResult> => {
-    const tapActions = entry.extensions?.tap_actions?.actions;
+      if (error) {
+        log_error("sendCloudEvent: error sending cloud event", { error });
 
-    if (!tapActions) {
-      return;
-    }
+        return ActionResult.Error;
+      }
 
-    if (!Array.isArray(tapActions)) {
-      log_error(
-        `handleEntryActions: tapActions is not an array for id: ${entry.id} title: ${entry.title}`,
-        { entry }
-      );
+      if (code && code >= 200 && code < 300 && !error) {
+        log_info("sendCloudEvent: cloud event sent successfully");
 
-      return;
+        return ActionResult.Success;
+      }
+    } catch (error) {
+      log_error("sendCloudEvent: error sending cloud event", {
+        action,
+        error,
+      });
     }
 
-    if (tapActions.length === 0) {
-      return;
-    }
+    return ActionResult.Error;
+  });
 
-    await this.handleActions(tapActions, entry);
-  };
+  actionExecutor.registerAction(
+    "localStorageToggleFlag",
+    async (action: ActionType, entry?: ZappEntry): Promise<ActionResult> => {
+      const keyNamespace = action.options?.key;
+      const tag = entry?.extensions?.tag;
 
-  unregisterAction = (actionType: string) => {
-    delete this.registeredActions[actionType];
-  };
+      if (keyNamespace && tag) {
+        const multiSelectProvider = StorageMultiSelectProvider.getProvider(keyNamespace);
 
-  registerAction = (
-    type: string,
-    handler: (action: ActionType, entry?: ZappEntry) => Promise<ActionResult>
-  ) => {
-    if (this.registeredActions[type]) {
-      log_error(`registerAction: action type: ${type} already registered`);
+        const selectedItems = await multiSelectProvider.getSelectedAsync();
+        const isTagInSelectedItems = selectedItems.includes(tag);
+        log_info(`handleAction: localStorageToggleFlag event will ${isTagInSelectedItems ? "remove" : "add"} tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`);
 
-      return () => {};
-    }
+        if (selectedItems.includes(tag)) {
+          await multiSelectProvider.removeItem(tag);
+        } else {
+          await multiSelectProvider.addItem(tag);
+        }
+      } else {
+        log_error("handleAction: localStorageToggleFlag event missing keyNamespace or tag", { keyNamespace, tag });
 
-    this.registeredActions[type] = handler;
-    log_debug(`registerAction: action type: ${type} registered`);
+        return ActionResult.Error;
+      }
 
-    return () => {
-      this.unregisterAction(type);
-      log_debug(`registerAction: action type: ${type} un-registered`);
-    };
-  };
-}
+      return ActionResult.Success;
+    });
+};
 
-export const actionExecutor = new ActionExecutor();
+export const ActionExecutorContext =
+  createContext<ActionExecutorContextType>(null);
 
 export function withActionExecutor(Component) {
+  prepareDefaultActions(_actionExecutor);
+
   return function ActionExecutorComponent(props: Props) {
     const handlers = useMemo(() => {
       return {
-        unregisterAction: actionExecutor.unregisterAction,
-        registerAction: actionExecutor.registerAction,
-        handleAction: actionExecutor.handleAction,
-        handleActions: actionExecutor.handleActions,
-        handleEntryActions: actionExecutor.handleEntryActions,
+        unregisterAction: _actionExecutor.unregisterAction,
+        registerAction: _actionExecutor.registerAction,
+        handleAction: _actionExecutor.handleAction,
+        handleActions: _actionExecutor.handleActions,
+        handleEntryActions: _actionExecutor.handleEntryActions,
       };
     }, []);
 
@@ -200,3 +155,6 @@ export function withActionExecutor(Component) {
     );
   };
 }
+
+// TODO: Please use direct import from the ActionExecutor.ts
+export const actionExecutor = _actionExecutor;

package/appUtils/HooksManager/index.js

@@ -1,7 +1,10 @@
 import * as R from "ramda";
 
 import { subscriber } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { QUICK_BRICK_EVENTS, sendQuickBrickEvent } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import {
+  QUICK_BRICK_EVENTS,
+  sendQuickBrickEvent,
+} from "@applicaster/zapp-react-native-bridge/QuickBrick";
 
 import { Hook } from "./Hook";
 import { HOOKS_EVENTS, HOOKS_TYPE } from "./constants";

package/appUtils/focusManager/index.ts

@@ -269,8 +269,6 @@ export const focusManager = (function () {
       logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
 
       if (focusAutoEnabled) {
-        logger.log({ message: `setInitialFocus ${setInitialFocus}` });
-
         setInitialFocus(initialFocusOnContent ? node : undefined);
       }
     }

package/appUtils/playerManager/OverlayObserver/utils.ts

@@ -4,27 +4,40 @@ import {
   RequestBuilder,
 } from "@applicaster/zapp-pipes-v2-client";
 import { log_error, log_info } from "./OverlaysObserver";
-import * as R from "ramda/es";
+import * as R from "ramda";
 import { toNumber, toNumberWithDefault } from "../../../numberUtils";
 
-export const parseTimeToSeconds = (timeStr) => {
+export const parseTimeToSeconds = (timeStr: string): number => {
+  const validationError = new Error("Invalid time format");
+
+  if (!timeStr) {
+    throw validationError;
+  }
+
+  const toTime = (value: number, max: number = 59): number => {
+    // Validate the time value
+    if (Number.isNaN(value) || value < 0 || value > max) {
+      throw validationError;
+    }
+
+    return value;
+  };
+
   // Split the time string by colon
   const parts = timeStr.split(":").map((part) => parseInt(part, 10));
 
-  let seconds = 0;
-
   // Calculate the seconds based on the number of parts
   if (parts.length === 2) {
     // Format is MM:SS
-    seconds = parts[0] * 60 + parts[1];
+    return toTime(parts[0]) * 60 + toTime(parts[1]);
   } else if (parts.length === 3) {
     // Format is HH:MM:SS
-    seconds = parts[0] * 3600 + parts[1] * 60 + parts[2];
+    return (
+      toTime(parts[0], 23) * 3600 + toTime(parts[1]) * 60 + toTime(parts[2])
+    );
   } else {
-    throw new Error("Invalid time format");
+    throw validationError;
   }
-
-  return seconds;
 };
 
 export const retrieveFeedUrl = (entry: ZappEntry) =>

package/appUtils/playerManager/player.ts

@@ -1,4 +1,5 @@
 import * as R from "ramda";
+import { BehaviorSubject } from "rxjs";
 import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 import { createLogger, utilsLogger } from "../../logger";
 import { getBoolFromConfigValue } from "../../configurationUtils";
@@ -35,18 +36,28 @@ export class Player {
   readonly playerState: QuickBrickPlayer.PlayerState;
 
   public playerPluginId: string;
-  public entry: ZappEntry | null;
+  protected _entry: ZappEntry | null;
 
   protected config?: Record<string, any>;
 
   protected startPosition?: number | null;
   readonly playerRole: PlayerRole = PlayerRole.Unspecified;
   private chaptersObserver?: OverlaysObserver | null;
+  private entryObservable?: BehaviorSubject<ZappEntry> | null;
 
   protected listeners: {
     [key: string]: QuickBrickPlayer.SharedPlayerCallBacks;
   } = {};
 
+  get entry(): ZappEntry | null {
+    return this._entry;
+  }
+
+  set entry(newEntry: ZappEntry | null) {
+    this._entry = newEntry;
+    this.entryObservable?.next(newEntry);
+  }
+
   constructor(props) {
     this.playerState = {
       // We want isLive null by default to be able not to show controls if we do not know type
@@ -80,6 +91,7 @@ export class Player {
     this.onVideoProgress = this.onVideoProgress.bind(this);
     this.onVideoLoad = this.onVideoLoad.bind(this);
     this.isFullScreenSupported = this.isFullScreenSupported.bind(this);
+    this.entryObservable = null;
   }
 
   getOverlayObservable = () => {
@@ -90,6 +102,14 @@ export class Player {
     return this.chaptersObserver;
   };
 
+  getEntryObservable = (): BehaviorSubject<ZappEntry | null> => {
+    if (!this.entryObservable) {
+      this.entryObservable = new BehaviorSubject(this.entry);
+    }
+
+    return this.entryObservable;
+  };
+
   /**
    * ---------------------------------------- PLAYER SETTERS GETTERS ----------------------------------------
    * These methods let you get information about the content / ad playing
@@ -469,6 +489,8 @@ export class Player {
     this.invokeListenersUpdate({
       callbackName: SharedPlayerCallBacksKeys.OnPlayerClose,
     });
+
+    this.entryObservable?.complete();
   };
 
   onAdBegin = (event) => {

package/cloudEventsUtils/index.ts

@@ -0,0 +1,56 @@
+import { v4 as uuid } from "uuid";
+import { RequestBuilder } from "@applicaster/zapp-pipes-v2-client";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { getAppUrlScheme } from "@applicaster/zapp-react-native-utils/appDataUtils";
+
+let source: string | null = null;
+
+const addSource = async () => {
+  if (source) {
+    return source;
+  }
+
+  const appUrlScheme = getAppUrlScheme();
+  const bundleId = await sessionStorage.getItem("bundleIdentifier");
+  const appVersion = await sessionStorage.getItem("version_name");
+
+  if (!appUrlScheme || !bundleId || !appVersion) {
+    throw Error(
+      `Error: Can not create client data addSource: Check appUrlScheme, bundleId, appversion. Item(s) not exist.
+      {appUrlScheme: ${appUrlScheme}, bundleId: ${bundleId}, appVersion: ${appVersion}}`
+    );
+  }
+
+  source = `${appUrlScheme}://${bundleId}/versions/${appVersion}`;
+
+  return source;
+};
+
+export const createCloudEvent = async ({ type, subject, data }) => {
+  return {
+    specversion: "1.0",
+    type,
+    datacontenttype: "application/json",
+    subject,
+    source: await addSource(),
+    time: new Date().toISOString(),
+    data,
+    id: uuid(),
+  };
+};
+
+export const sendCloudEvent = async (cloudEvent: any, url: string) => {
+  if (!url) {
+    throw new Error("Feed locator is missing");
+  }
+
+  const requestBuilder = new RequestBuilder();
+
+  const response = await requestBuilder
+    .setUrl(url)
+    .setMethod("POST")
+    .addBodyParams(cloudEvent)
+    .call<ZappFeed>();
+
+  return response;
+};

package/navigationUtils/__tests__/__snapshots__/navigationUtils.test.js.snap

@@ -16,6 +16,6 @@ Object {
   "styles": Object {
     "style": "foo",
   },
-  "title": "base screen",
+  "title": "testTitle",
 }
 `;

package/navigationUtils/__tests__/navigationUtils.test.js

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import * as navigationUtils from "../index";
+import * as navigationUtils from "..";
 import {
   river,
   riverPlugin,
@@ -148,7 +148,9 @@ describe("getNavigationProps", () => {
       activeRiver: R.merge(baseScreen, { navigations }),
     };
 
-    expect(getNavigationProps({ navigator, category })).toMatchSnapshot();
+    expect(
+      getNavigationProps({ navigator, title: "testTitle", category })
+    ).toMatchSnapshot();
   });
 });
 

package/navigationUtils/index.ts

@@ -95,10 +95,12 @@ export function resolveNavigationPlugin({
  * @returns {Object} props
  */
 export function getNavigationProps({
-  navigator: { activeRiver, screenTitle: title },
+  navigator: { activeRiver },
+  title = "",
   category,
 }: {
   navigator: QuickBrickAppNavigator;
+  title: string;
   category: string;
 }): Nullable<
   Partial<ZappNavigation> & { selected: string; title: string; home: boolean }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "11.0.0-rc.99",
+  "version": "12.0.0-rc.1",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "11.0.0-rc.99",
+    "@applicaster/applicaster-types": "12.0.0-rc.1",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/feed/__tests__/useFeedLoader.test.tsx

@@ -7,6 +7,7 @@ import * as React from "react";
 import configureStore from "redux-mock-store";
 import thunk from "redux-thunk";
 import * as navigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import * as useNavigationHooks from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation";
 
 const mockStore = configureStore([thunk]);
 
@@ -35,7 +36,7 @@ jest.mock("../../logger", () => ({
 }));
 
 jest
-  .spyOn(navigationHooks, "useNavigation")
+  .spyOn(useNavigationHooks, "useNavigation")
   .mockImplementation(() => navigator);
 
 jest.spyOn(navigationHooks, "useRoute").mockImplementation(() => routeData);

package/reactHooks/feed/useBatchLoading.ts

@@ -9,7 +9,7 @@ import {
   getInflatedDataSourceUrl,
   getSearchContext,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
+import { useScreenContext } from "../screen/useScreenContext";
 
 type Options = {
   initialBatchSize?: number;

package/reactHooks/layout/index.ts

@@ -2,7 +2,7 @@ import * as R from "ramda";
 import { StatusBar, Platform } from "react-native";
 
 import { platformSelect, isTV } from "../../reactUtils";
-import { useNavigation } from "../navigation";
+import { useIsNavBarVisible } from "../navigation";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { isTablet } from "./isTablet";
 
@@ -48,9 +48,13 @@ export function useStatusBarHeight() {
   });
 }
 
+const getNavbarHeight = () => {
+  return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
+};
+
 export function useCurrentNavbarHeight() {
-  const { isNavBarVisible } = useNavigation();
-  const navbarHeight = isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
+  const isNavBarVisible = useIsNavBarVisible();
+  const navbarHeight = getNavbarHeight();
 
   return isNavBarVisible ? navbarHeight : 0;
 }

package/reactHooks/navigation/__mocks__/index.ts

@@ -16,6 +16,7 @@ export const mockMenu: ZappNavigation = {
 };
 
 export const useNavigation = jest.fn(() => ({
+  data: {},
   currentRoute: "someRoute",
 }));
 

package/reactHooks/navigation/index.ts

@@ -9,46 +9,30 @@ import {
   useContentTypes,
   usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
-import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
 import { HooksManager } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager";
 
 import { legacyScreenData } from "@applicaster/quick-brick-core/App/NavigationProvider/utils";
 import { LONG_KEY_PRESS_TIMEOUT } from "@applicaster/quick-brick-core/const";
 import { useZappHooksModalState } from "@applicaster/zapp-react-dom-ui-components/Components/ZappHooksModal/ZappHooksModal";
-import { isNavBarVisible as shouldShowNavBar } from "@applicaster/zapp-react-native-ui-components/Components/Screen/navigationHandler";
 import { ZappHookModalContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { PathnameContext } from "@applicaster/zapp-react-native-ui-components/Contexts/PathnameContext";
 import { HookModalContextT } from "@applicaster/zapp-react-native-ui-components/Contexts/ZappHookModalContext";
-import { routeIsPlayerScreen } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+import { getNavigationProps } from "@applicaster/zapp-react-native-utils/navigationUtils";
 import { HOOKS_EVENTS } from "../../appUtils/HooksManager/constants";
 import { getRiverFromRoute, getTargetRoute } from "../../navigationUtils";
 import { platformSelect } from "../../reactUtils";
 import { useConnectionInfo } from "../connection";
 import { getTargetScreenData } from "../screen/useTargetScreenData";
+import { useNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 
-const { useContext } = React;
+import { useNavigation } from "./useNavigation";
+
+export { useNavigation } from "./useNavigation";
 
 const { ProfilerBridge } = NativeModules;
 
 export const usePathname = () => React.useContext(PathnameContext);
 
-/**
- * Return NavigationContext
- */
-export const useNavigation = (
-  memoized: boolean = false
-): QuickBrickAppNavigator => {
-  const navigator = useContext(NavigationContext);
-  const memoizedNavigator = useMemo(() => navigator, []);
-
-  if (memoized) {
-    return memoizedNavigator;
-  }
-
-  return navigator;
-};
-
 export const useBackHandler = (cb: () => boolean) => {
   React.useEffect(() => {
     BackHandler.addEventListener("hardwareBackPress", cb);
@@ -59,25 +43,6 @@ export const useBackHandler = (cb: () => boolean) => {
   }, [cb]);
 };
 
-export const useNavBarStateForScreen = (pathname: string) => {
-  const navigator = useNavigation();
-
-  const [isNavBarVisible, setIsNavBarVisible] = React.useState(
-    navigator.isNavBarVisible
-  );
-
-  React.useEffect(() => {
-    if (
-      navigator.currentRoute === pathname &&
-      isNavBarVisible !== navigator.isNavBarVisible
-    ) {
-      setIsNavBarVisible(navigator.isNavBarVisible);
-    }
-  }, [pathname, navigator.isNavBarVisible]);
-
-  return { isNavBarVisible, canGoBack: navigator.canGoBack };
-};
-
 type Callbacks = Partial<{
   handleHookPresent: ({
     route,
@@ -204,12 +169,13 @@ export enum MenuTypes {
 }
 
 export const useNavigationPluginData = (): ZappNavigation | undefined => {
-  const { screenData } = useRoute(); // was replaced legacyScreenData with useRoute screenData
+  const {
+    screenData: useRouteScreenData,
+  }: { screenData: QuickBrickNavigationData | null } = useRoute();
 
-  const navigations =
-    screenData && "screen" in screenData
-      ? (screenData.screen as ZappRiver).navigations
-      : (screenData as ZappRiver)?.navigations ?? [];
+  const navigations = useRouteScreenData?.targetScreen
+    ? (useRouteScreenData.targetScreen as ZappRiver).navigations
+    : (useRouteScreenData as ZappRiver).navigations;
 
   const navigationMenu = navigations?.find((nav) => nav.category === "menu");
 
@@ -261,23 +227,15 @@ export const useRunIfLongPress = (
   return { onPress, onPressOut };
 };
 
+/**
+ * @returns boolean - navbar visiblity status
+ */
 export const useIsNavBarVisible = (): boolean => {
-  const { isNavBarVisible, currentRoute, canGoBack } = useNavigation();
-  const screenData = useCurrentScreenData();
-
-  const navBarVisible = React.useMemo(() => {
-    return shouldShowNavBar(
-      currentRoute,
-      screenData,
-      isNavBarVisible && !routeIsPlayerScreen(currentRoute),
-      canGoBack()
-    );
-  }, [isNavBarVisible, currentRoute, screenData?.id]);
+  const visible = useNavbarState().visible;
 
-  return navBarVisible;
+  return useMemo(() => visible, [visible]);
 };
 
-// starts with modal/
 const isModalPathname = (pathname: string) => /^modal\//.test(pathname);
 
 const isVideoModalPathname = (pathname: string) =>
@@ -320,8 +278,11 @@ export const useRoute = () => {
 
   const currentRouteScreenData = legacyScreenData(
     {
-      screen: currentStack?.state?.screen ?? navigator.data?.screen ?? {},
-      entry: currentStack?.state?.entry ?? {},
+      screen:
+        currentStack?.state?.screen ??
+        navigator.data?.screen ??
+        ({} as ZappRiver),
+      entry: currentStack?.state?.entry ?? ({} as ZappEntry),
     },
 
     plugins
@@ -346,6 +307,14 @@ export const useRoute = () => {
 
 export const useGetBottomTabBarHeight = (): number => {
   const insets = useSafeAreaInsets();
+  const navigator = useNavigation();
+
+  const navProps = getNavigationProps({
+    navigator,
+    title: "",
+    category: "menu",
+  });
+
   const navType = useNavigationType();
   const isBottomBarNavigation = navType === MenuTypes.bottomTabBar;
 
@@ -354,8 +323,10 @@ export const useGetBottomTabBarHeight = (): number => {
 
   if (!isBottomBarNavigation) return 0;
 
-  return platformSelect({
+  const tabBarHeight = platformSelect({
     ios: TAB_BAR_HEIGHT_IOS + insets.bottom,
     android: TAB_BAR_HEIGHT_ANDROID,
-  });
+  }) as number;
+
+  return tabBarHeight + Number(navProps?.styles?.top_border_width ?? 0);
 };

package/reactHooks/navigation/useNavigation.ts

@@ -0,0 +1,21 @@
+/* eslint max-len: off */
+
+import { useMemo, useContext } from "react";
+
+import { NavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NavigationContext";
+
+/**
+ * Return NavigationContext
+ */
+export const useNavigation = (
+  memoized: boolean = false
+): QuickBrickAppNavigator => {
+  const navigator = useContext(NavigationContext);
+  const memoizedNavigator = useMemo(() => navigator, []);
+
+  if (memoized) {
+    return memoizedNavigator;
+  }
+
+  return navigator;
+};

package/reactHooks/screen/index.ts

@@ -2,4 +2,9 @@ export { useCurrentScreenData } from "./useCurrentScreenData";
 
 export { useTargetScreenData } from "./useTargetScreenData";
 
-export { useScreenContext } from "./useScreenContext";
+export {
+  useScreenContext,
+  useLegacyScreenData,
+  useNavbarState,
+  useSetNavbarState,
+} from "./useScreenContext";

package/reactHooks/screen/useCurrentScreenData.ts

@@ -1,10 +1,16 @@
-import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { useRivers } from "../state";
 import { useScreenContext } from "./useScreenContext";
 
+/**
+ * used to get the  screen configuration from the layout.json
+ * when screenIdOverride passed. It will return the screen configuration from the useScreenContext() by default
+ * @param screenIdOverride - screen id to get the screen configuration
+ * @returns ZappRiver - screen configuration
+ *  */
 export const useCurrentScreenData = (
   screenIdOverride: string | null = null
 ): ZappRiver => {
-  const { rivers } = usePickFromState(["rivers"]);
+  const rivers = useRivers();
   const screenData = useScreenContext();
 
   if (screenIdOverride) {

package/reactHooks/screen/useScreenContext.ts

@@ -1,8 +1,46 @@
-import { useMemo } from "react";
+import { useContext, useMemo } from "react";
 
 import { useModalNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ModalNavigationContext";
 import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useNavigation } from "../navigation";
+
+import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
+
+function useScreenContextV2() {
+  return useContext(ScreenContext);
+}
+
+/**
+ * Equivalent to existing useNavigation().screenData
+ * @returns legacyFormatScreenData - screen configuration
+ */
+export function useLegacyScreenData() {
+  const { legacyFormatScreenData } = useScreenContextV2();
+
+  return useMemo(() => legacyFormatScreenData, [legacyFormatScreenData]);
+}
+
+export function useNavbarState() {
+  const {
+    navBar: { title, summary, visible },
+  } = useScreenContextV2();
+
+  return useMemo(
+    () => ({ title, summary, visible }),
+    [title, summary, visible]
+  );
+}
+
+export function useSetNavbarState() {
+  const {
+    navBar: { setSummary, setTitle, setVisible },
+  } = useScreenContextV2();
+
+  return useMemo(
+    () => ({ setSummary, setTitle, setVisible }),
+    [setSummary, setTitle, setVisible]
+  );
+}
 
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();

package/reactUtils/helpers.tsx

@@ -9,6 +9,8 @@ export const isNilOrEmpty = R.either(R.isNil, R.isEmpty);
 
 export const isNotEmpty = R.complement(R.isEmpty);
 
+export const withoutNil = R.reject(R.isNil);
+
 /**
  * tells wether a React Component is a class component or not
  * @param {ReactComponent} Component to test

package/testUtils/index.tsx

@@ -0,0 +1,87 @@
+import * as R from "ramda";
+
+import React from "react";
+import { View } from "react-native";
+
+import { Provider } from "react-redux";
+import thunk from "redux-thunk";
+import configureStore from "redux-mock-store";
+
+import { render } from "@testing-library/react-native";
+
+/**
+ * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
+ * Example:
+ * wrapper.findWhere(testIDEquals('yourID'))
+ * @param {*} testId
+ * @return boolean
+ */
+export const testIDEquals = (testId: any): boolean =>
+  R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
+
+export const getByTestId = (wrapper, testId) => {
+  try {
+    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.log("getByTestId E:", e);
+
+    return undefined;
+  }
+};
+
+/** Helper function for react-test-renderer, accepts type and renderer
+ * * @param {*} type React Component type instance  or name of component
+ * * @param {*} renderer renderer instance
+ */
+export const findByType = (type, renderer) => {
+  try {
+    renderer.root ? renderer.root.findByType(type) : renderer.findByType(type);
+  } catch {
+    return undefined;
+  }
+};
+
+export function createComponentMock(mockName, hasChildren = false) {
+  return hasChildren
+    ? jest.fn(({ children }) => (
+        <View comp={mockName} testID={mockName}>
+          {typeof children === "function" ? children() : children}
+        </View>
+      ))
+    : jest.fn(() => <View comp={mockName} testID={mockName} />);
+}
+
+const initialState = {
+  styles: {},
+  remoteConfigurations: {
+    styles: {},
+  },
+  components: {
+    River: createComponentMock("river"),
+    AppContainer: createComponentMock("appContainer", true),
+    DisplayError: createComponentMock("displayError"),
+  },
+  rivers: [{ id: "A1234", home: true }],
+  appSettings: {},
+  plugins: [],
+  appState: { appReady: true },
+};
+
+export const WrappedWithProviders = ({ children, store = {} }: any) => {
+  const _store = configureStore([thunk])({ ...initialState, store });
+
+  return <Provider store={_store}>{children}</Provider>;
+};
+
+/**
+ * Helper test function - replacement of render() - with providers
+ * @param component component to render in test
+ * @param store optional store to pass to the provider
+ * @returns
+ */
+export const renderWithProviders = (component, store?: unknown) => {
+  return render(
+    <WrappedWithProviders store={store}>{component}</WrappedWithProviders>
+  );
+};

package/theme/index.ts

@@ -48,11 +48,12 @@ export function useThemeSelector(): [string, (string) => void] {
  * @return {Theme}
  */
 export function createTheme(options) {
-  const { id, props } = options;
+  const { id, props, decorateFeed } = options;
 
   return {
     isTheme: true,
     id,
     getProps: populateConfigurationValues(props),
+    decorateFeed,
   };
 }

package/testUtils/index.ts

@@ -1,34 +0,0 @@
-import * as R from "ramda";
-
-/**
- * Function to be used in tandem with enzyme findWhere(node => node.prop('testID') === 'yourID')
- * Example:
- * wrapper.findWhere(testIDEquals('yourID'))
- * @param {*} testId
- * @return boolean
- */
-export const testIDEquals = (testId: any): boolean =>
-  R.compose(R.equals(testId), R.invoker(1, "prop")("testID"));
-
-export const getByTestId = (wrapper, testId) => {
-  try {
-    return wrapper?.queryAllByTestId(testId)?.[0] ?? undefined;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.log("getByTestId E:", e);
-
-    return undefined;
-  }
-};
-
-/** Helper function for react-test-renderer, accepts type and renderer
- * * @param {*} type React Component type instance  or name of component
- * * @param {*} renderer renderer instance
- */
-export const findByType = (type, renderer) => {
-  try {
-    renderer.root ? renderer.root.findByType(type) : renderer.findByType(type);
-  } catch {
-    return undefined;
-  }
-};