@applicaster/zapp-react-native-utils 12.0.0-alpha.5035843303 → 12.0.0-alpha.5050333009

package/appUtils/HooksManager/{index.js → index.ts}

@@ -10,14 +10,72 @@ import { Hook } from "./Hook";
 import { HOOKS_EVENTS, HOOKS_TYPE } from "./constants";
 
 import { hooksManagerLogger } from "./logger";
+import { HookManager, HookManagerArgs } from "./types";
+
+/**
+ * orders the hooks according to their weight
+ * @param {Array<object>} hooks to sort out
+ * @returns {Array<object>} sorted hooks
+ */
+function orderHooksByWeight(hooks: Hook[]) {
+  return R.sortBy(R.compose(Number, R.prop("weight")), hooks);
+}
+
+function executeOnNextHook(
+  hooks: Hook[],
+  payload: object,
+  callback: (hookPlugin: Hook, restOfHooks: Hook[], payload: object) => void
+) {
+  const [nextHook, ...restOfHooks] = orderHooksByWeight(hooks);
+
+  if (nextHook) {
+    nextHook.execute(payload, callback(nextHook, restOfHooks, payload));
+  }
+}
+
+/**
+ * tells wether the current river is related to a player plugin, or the default player
+ * @param {Object} river
+ * @returns {boolean}
+ */
+function riverIsPlayer(river, plugins) {
+  const { screenType, plugin_type } = river;
+
+  if (screenType || plugin_type) {
+    return screenType === "playable" || plugin_type === "player";
+  }
+
+  const { type } = river;
+
+  return R.compose(
+    R.propEq("type", "player"),
+    R.defaultTo({}),
+    R.find(R.propEq("identifier", type))
+  )(plugins);
+}
+
+/**
+ * Injects the hooks for the player
+ * @param _hookType type of hook
+ * @param plugins plugins
+ * @returns {Array<Object>}
+ */
+function injectPlayerHooks(_hookType: string, plugins): Hook[] {
+  const playerhooks: Hook[] = R.compose(
+    R.sortBy(R.prop("weight")),
+    R.map((plugin) => ({
+      identifier: plugin.identifier,
+      weight: R.path(["module", "weight"], plugin) || 1,
+    })),
+    R.filter(R.pathEq(["module", "hasPlayerHook"], true))
+  )(plugins);
+
+  return playerhooks;
+}
 
 /**
  * creates a hooksManager object to handle the hooks process.
  * it is based on the `subscriber` object
- * @param {object} options
- * @param {object} rivers map of rivers in the app
- * @param {object} targetScreen rivers which we are navigating to
- * @param {Array<object>} plugins array of plugins in the app
  * @returns {object} hooksManager object - see Navigator for usage
  */
 export function HooksManager({
@@ -25,7 +83,7 @@ export function HooksManager({
   targetScreen,
   plugins,
   startUpHooksData = {},
-}) {
+}: HookManagerArgs): HookManager {
   hooksManagerLogger.addContext({ targetScreen });
 
   function logHookEvent(func, message, data) {
@@ -35,7 +93,8 @@ export function HooksManager({
     });
   }
 
-  const hooksManager = subscriber();
+  const hooksManager: Partial<HookManager> = {};
+  hooksManager.subscriber = subscriber();
 
   /**
    * attaches the screen data to the hook object if the hook
@@ -100,15 +159,6 @@ export function HooksManager({
     };
   }
 
-  /**
-   * orders the hooks according to their weight
-   * @param {Array<object>} hooks to sort out
-   * @returns {Array<object>} sorted hooks
-   */
-  function orderHooksByWeight(hooks) {
-    return R.sortBy(R.compose(Number, R.prop("weight")), hooks);
-  }
-
   /**
    * extracts the hooks form the target river. returns null if there are none
    * if there are hooks, gathers all required data and constructs a Hook object
@@ -117,10 +167,10 @@ export function HooksManager({
    * @returns {Array<Hooks>} list of hooks to go through
    */
   function getHooks(hookType, river) {
-    const playerhooks = [];
+    const playerhooks: Hook[] = [];
 
-    if (riverIsPlayer(river)) {
-      playerhooks.push(...injectPlayerHooks(hookType));
+    if (riverIsPlayer(river, plugins)) {
+      playerhooks.push(...injectPlayerHooks(hookType, plugins));
     }
 
     let hooks = R.concat(playerhooks, R.pathOr([], ["hooks", hookType], river));
@@ -130,8 +180,10 @@ export function HooksManager({
     const { startUpHooks, setStartUpHooks } = startUpHooksData;
 
     if (startUpHooks && startUpHooks !== "in_process") {
-      hooks.unshift(...startUpHooks);
-      setStartUpHooks("in_process");
+      if (Array.isArray(startUpHooks)) {
+        hooks.unshift(...startUpHooks);
+        setStartUpHooks("in_process");
+      }
     }
 
     if (!R.length(hooks)) {
@@ -158,45 +210,6 @@ export function HooksManager({
     )(hooks);
   }
 
-  /**
-   * tells wether the current river is related to a player plugin, or the default player
-   * @param {Object} river
-   * @returns {boolean}
-   */
-  function riverIsPlayer(river) {
-    const { screenType, plugin_type } = river;
-
-    if (screenType || plugin_type) {
-      return screenType === "playable" || plugin_type === "player";
-    }
-
-    const { type } = river;
-
-    return R.compose(
-      R.propEq("type", "player"),
-      R.defaultTo({}),
-      R.find(R.propEq("identifier", type))
-    )(plugins);
-  }
-
-  /**
-   * Injects the hooks for the player
-   * @param {String} hookType type of hook
-   * @returns {Array<Object>}
-   */
-  function injectPlayerHooks(_hookType) {
-    const playerhooks = R.compose(
-      R.sortBy(R.prop("weight")),
-      R.map((plugin) => ({
-        identifier: plugin.identifier,
-        weight: R.path(["module", "weight"], plugin) || 1,
-      })),
-      R.filter(R.pathEq(["module", "hasPlayerHook"], true))
-    )(plugins);
-
-    return playerhooks;
-  }
-
   /**
    * tells wether the given hook is the last one or not
    * @param {Hook} hookPlugin
@@ -209,6 +222,32 @@ export function HooksManager({
     return hookPlugin.lastHook;
   }
 
+  /**
+   * flags a hook as succeeded, and pass hook data along
+   * @param {Hook} hookPlugin
+   * @param {object} payload returned by the hook plugin
+   */
+  function completeHook(hookPlugin, payload, callback) {
+    logHookEvent(
+      hooksManagerLogger.info,
+      `completeHook: hook sequence completed successfully: ${hookPlugin["identifier"]}`,
+      {
+        payload,
+        hook: hookPlugin,
+      }
+    );
+
+    // eslint-disable-next-line
+    // TODO: Temporary hack to pass getLoginProtocol to other plugins to refresh in case token expired, need be deleted later
+    delete payload.getLoginProtocol;
+
+    hookPlugin.setStateAndNotify(HOOKS_EVENTS.COMPLETE, {
+      hookPlugin,
+      payload,
+      callback,
+    });
+  }
+
   /**
    * creates the callback to invoke in order to proceed to the next hook
    * covers the scenarios of failure & flow blocking
@@ -228,9 +267,11 @@ export function HooksManager({
       success,
       error,
       payload = initialPayload,
-      callback,
+      callback: callbackArg,
       cancelled,
     }) {
+      let callback = callbackArg;
+
       if (error) {
         logHookEvent(
           hooksManagerLogger.error,
@@ -270,7 +311,9 @@ export function HooksManager({
         });
 
         const isHookInHomescreen = payload?.home;
-        const isHookFlowBlocker = hookPlugin?.module?.isFlowBlocker();
+
+        const isHookFlowBlocker =
+          hookPlugin?.module?.isFlowBlocker?.() ?? false;
 
         // TODO: We technically need to also support the case where there is more than one hook in the stack,
         // if needed we could add differentiation explicit user cancellation (when we should go to background) and other types of cancellation
@@ -299,6 +342,18 @@ export function HooksManager({
           }
         );
 
+        if (!callback) {
+          logHookEvent(
+            hooksManagerLogger.warn,
+            `hookCallback: ${hookPlugin["identifier"]} is missing \`callback\`, using hookCallback(default one)`,
+            {
+              hookPlugin,
+            }
+          );
+
+          callback = hookCallback;
+        }
+
         hookPlugin.setStateAndNotify(HOOKS_EVENTS.SUCCESS, {
           hookPlugin,
           payload,
@@ -307,37 +362,11 @@ export function HooksManager({
 
         isLastHook(hookPlugin, restOfHooks)
           ? completeHook(hookPlugin, payload, callback)
-          : handleNextHook(restOfHooks, payload);
+          : executeOnNextHook(restOfHooks, payload, callback);
       }
     };
   }
 
-  /**
-   * flags a hook as succeeded, and pass hook data along
-   * @param {Hook} hookPlugin
-   * @param {object} payload returned by the hook plugin
-   */
-  function completeHook(hookPlugin, payload, callback) {
-    logHookEvent(
-      hooksManagerLogger.info,
-      `completeHook: hook sequence completed successfully: ${hookPlugin["identifier"]}`,
-      {
-        payload,
-        hook: hookPlugin,
-      }
-    );
-
-    // eslint-disable-next-line
-    // TODO: Temporary hack to pass getLoginProtocol to other plugins to refresh in case token expired, need be deleted later
-    delete payload.getLoginProtocol;
-
-    hookPlugin.setStateAndNotify(HOOKS_EVENTS.COMPLETE, {
-      hookPlugin,
-      payload,
-      callback,
-    });
-  }
-
   /**
    * presents a screen hook by triggering an event invoking the handler with
    * the appropriate route & payload
@@ -374,9 +403,6 @@ export function HooksManager({
 
   /**
    * executes a headless hook
-   * @param {Hook} hookPlugin to present
-   * @param {object} payload to pass to the hook module
-   * @param {function} callback to invoke when the hook is successful
    */
   hooksManager.executeHook = function (hookPlugin, payload, callback) {
     logHookEvent(
@@ -442,30 +468,13 @@ export function HooksManager({
     }
   };
 
-  /**
-   * handles the next hook in the list of provided hooks, passing the payload along
-   * @param {Array<Hook>} hooks to process
-   * @param {object} payload to pass to the hook
-   */
-  function handleNextHook(hooks, payload) {
-    const [hookPlugin, ...restOfHooks] = orderHooksByWeight(hooks);
-
-    /**
-     * Commenting out part of the code which is trying to run the next hook
-     * in parallel - it's not in use, and it's creating unexpected side
-     * effects
-     * */
-
-    hookPlugin.execute(payload, hookCallback(hookPlugin, restOfHooks, payload));
-  }
-
   /**
    * function exposes on the hooks manager to trigger the handling of the hooks for
    * the given targetScreen
    * @param {object} payload to send to the hooks
    * @returns {object} returns the hooks manager so methods can be chained
    */
-  hooksManager.handleHooks = function (payload) {
+  hooksManager.handleHooks = function (payload: object) {
     const preloadHooks = getHooks(HOOKS_TYPE.PRELOAD, targetScreen);
 
     if (preloadHooks?.length) {
@@ -480,9 +489,9 @@ export function HooksManager({
         }
       );
 
-      handleNextHook(preloadHooks, payload);
+      executeOnNextHook(preloadHooks, payload, hookCallback);
     } else {
-      hooksManager.invokeHandler(HOOKS_EVENTS.COMPLETE, {
+      hooksManager.subscriber.invokeHandler(HOOKS_EVENTS.COMPLETE, {
         hookPlugin: { lastHook: true },
         payload,
       });
@@ -491,5 +500,5 @@ export function HooksManager({
     return hooksManager;
   };
 
-  return hooksManager;
+  return hooksManager as HookManager;
 }

package/appUtils/HooksManager/types.ts

@@ -0,0 +1,116 @@
+import { SubscriberObj } from "../../functionUtils";
+import { HOOKS_EVENTS } from "./constants";
+
+export interface HookConfiguration {}
+
+/* existing Hook Plugn props: sample */
+interface _HookModulePlugin {
+  Component:
+    | React.FC<HookPluginProps>
+    | React.Component<HookPluginProps, any>
+    | React.ReactNode;
+  ModalContainer?: React.FC<ModalProps> | React.Component<ModalProps, any>;
+  skipHook?: (payload: ZappRiver | ZappEntry) => boolean;
+  presentFullScreen: boolean;
+  showNavBar?: boolean;
+  isFlowBlocker: (() => boolean) | boolean; // narrow this
+  hasPlayerHook?: boolean;
+  name: string;
+  runInBackground?: (
+    item: HookPluginProps["payload"],
+    callback: hookCallback,
+    hookPlugin: HookScreenData,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => any;
+}
+
+//* Derived from usage */
+export interface HookModule {
+  ModalContainer?: React.ComponentType<any>;
+  Component: React.ComponentType<any>;
+  presentFullScreen: boolean;
+  run?: (
+    arg0: unknown,
+    callback: () => void,
+    configuration: HookConfiguration
+  ) => void; // not sure about optional parameter
+  hasPlayerHook?: boolean;
+  configuration?: HookConfiguration;
+  isFlowBlocker: () => boolean;
+  skipHook?: (payload?: ZappRiver | ZappEntry) => boolean;
+  runInBackground?: (
+    arg0: unknown,
+    callback: () => void,
+    hookPlugin: Hook,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+  name: string;
+  showNavBar?: boolean; // unsure
+}
+
+export type HookManagerArgs = {
+  rivers: Record<string, ZappRiver>;
+  plugins: ZappPlugin[];
+  targetScreen: ZappRiver;
+  startUpHooksData?: {
+    startUpHooks?: unknown[] | "in_process";
+    setStartUpHooks?: (arg0: string) => void;
+  };
+};
+
+export interface HookManager {
+  subscriber: SubscriberObj;
+  presentScreenHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  executeHook: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void
+  ) => void;
+  handleHooks: (payload: unknown) => void;
+  runInBackground: (
+    hook: Hook,
+    payload: unknown,
+    callback: (...any) => void,
+    presentUI: (payload?: HookPluginProps["payload"]) => void
+  ) => void;
+}
+
+export type HookIniObj = {
+  hook: HookModule & {
+    module: HookModule;
+    general: unknown;
+    screen_id?: string;
+    identifier?: string;
+    weight?: number | string;
+  };
+  hooks: Hook<any>[];
+  manager: HookManager;
+};
+
+export interface Hook<T extends HookModule = HookModule> {
+  manager: HookManager;
+  lastHook: boolean;
+  state: number;
+  module: T;
+  screen_id: string;
+  identifier: string;
+  configuration: T["configuration"];
+  setStateAndNotify(
+    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    opts: {
+      error?: typeof Error;
+      route?: string;
+      hookPlugin: Hook<T>;
+      payload: unknown;
+    }
+  );
+  general?: {
+    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    allow_screen_plugin_presentation: boolean;
+    is_flow_blocker: boolean;
+  };
+}

package/appUtils/RiverFocusManager/index.js

@@ -26,7 +26,7 @@ export const riverFocusManager = (function () {
   /**
    * Retrieve screen focus data by id
    *
-   * @param {String}  screenFocusableGroupId Id that was used to save screen data.
+   * @param {{screenFocusableGroupId: string}} screenFocusableGroupId Unique Id of the screen from layout.json
    *
    */
   function screenFocusableData({ screenFocusableGroupId }) {
@@ -36,8 +36,9 @@ export const riverFocusManager = (function () {
   /**
    * Clear screen data for specific screen
    *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function clearScreenData({ screenId, isInsideContainer }) {
@@ -60,9 +61,13 @@ export const riverFocusManager = (function () {
   /**
    * Focus on selected items
    *
-   * @param {String}  screenFocusableGroupId Top group id that was saved as screenn
-   * @param {String} screenFocusedOnItem focusable item to focus
-   * @param {object} history navigator history object
+   * @param {{
+   * screenFocusableGroupId: string,
+   * screenFocusedOnItem: () => void,
+   * previousAction: QuickBrickNavigationActionType,
+   * isDeepLink: boolean }} object contains data for focus
+   * - `screenFocusedOnItem` focusable item to focus
+   * - `previousActionhistory` navigator history object
    *
    */
   function focusOnSelectedItem({
@@ -115,15 +120,15 @@ export const riverFocusManager = (function () {
 
   /**
    * Create unique key that will be used for save focused group data inside specific screen
-   *
-   * @param {String}  screenId Unique Id of the screen from layout.json
-   * @param {boolean} isInsideContainer If this screen a screen picker child
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
    *
    */
   function screenFocusableGroupId({ screenId, isInsideContainer }) {
-    return R.isNil(isInsideContainer)
-      ? `RiverFocusableGroup-${screenId}`
-      : `RiverFocusableGroup-${screenId}-isInsideContainer`;
+    return `RiverFocusableGroup-${screenId}${
+      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
+    }`;
   }
 
   return {

package/appUtils/accessibilityManager/const.ts

@@ -0,0 +1,50 @@
+export const BUTTON_ACCESSIBILITY_KEYS = {
+  play: {
+    label: "accessibility_play_label",
+    hint: "accessibility_play_hint",
+    mini: {
+      label: "accessibility_play_mini_label",
+      hint: "accessibility_play_mini_hint",
+    },
+  },
+  pause: {
+    label: "accessibility_pause_label",
+    hint: "accessibility_pause_hint",
+    mini: {
+      label: "accessibility_pause_mini_label",
+      hint: "accessibility_pause_mini_hint",
+    },
+  },
+  rewind: {
+    label: "accessibility_rewind_label",
+    hint: "accessibility_rewind_hint",
+  },
+  forward: {
+    label: "accessibility_forward_label",
+    hint: "accessibility_forward_hint",
+  },
+  close: {
+    label: "accessibility_close_label",
+    hint: "accessibility_close_hint",
+    mini: {
+      label: "accessibility_close_mini_label",
+      hint: "accessibility_close_mini_hint",
+    },
+  },
+  maximize: {
+    label: "accessibility_maximize_label",
+    hint: "accessibility_maximize_hint",
+  },
+  subtitles: {
+    label: "accessibility_subtitle_label",
+    hint: "accessibility_subtitle_hint",
+  },
+  back: {
+    label: "accessibility_back_label",
+    hint: "accessibility_back_hint",
+  },
+  fullscreen: {
+    label: "accessibility_fullscreen_label",
+    hint: "accessibility_fullscreen_hint",
+  },
+} as const;

package/appUtils/accessibilityManager/hooks.ts

@@ -0,0 +1,31 @@
+import { useEffect, useMemo } from "react";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+import { AccessibilityManager } from "./index";
+
+export const useAccessibilityManager = () => {
+  const { remoteConfigurations } = usePickFromState(["remoteConfigurations"]);
+  const { localizations } = remoteConfigurations;
+
+  const accessibilityManager = useMemo(() => {
+    return AccessibilityManager.getInstance();
+  }, []);
+
+  useEffect(() => {
+    accessibilityManager.updateLocalizations(localizations);
+  }, [localizations]);
+
+  useEffect(() => {
+    const subscription = accessibilityManager.getStateAsObservable().subscribe({
+      next: () => {
+        // TODO: handle accessibility states
+        // screenReaderEnabled: false
+        // reduceMotionEnabled: false
+        // boldTextEnabled: false
+      },
+    });
+
+    return () => subscription.unsubscribe();
+  }, [accessibilityManager]);
+
+  return accessibilityManager;
+};