@applicaster/zapp-react-native-utils 12.0.0-rc.7 → 12.0.0-rc.70

package/actionsExecutor/ActionExecutorContext.tsx

@@ -11,11 +11,9 @@ import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickB
 import { showConfirmationDialog } from "../alertUtils";
 import { createCloudEvent, sendCloudEvent } from "../cloudEventsUtils";
 import { createLogger } from "../logger";
-import {
-  StorageMultiSelectProvider
-} from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 
-const { log_error, log_debug, log_info } = createLogger({
+const { log_error, log_info } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -110,11 +108,17 @@ const prepareDefaultActions = (actionExecutor) => {
       const tag = entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
-        const multiSelectProvider = StorageMultiSelectProvider.getProvider(keyNamespace);
+        const multiSelectProvider =
+          StorageMultiSelectProvider.getProvider(keyNamespace);
 
         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}`);
+
+        log_info(
+          `handleAction: localStorageToggleFlag event will ${
+            isTagInSelectedItems ? "remove" : "add"
+          } tag: ${tag} for keyNamespace: ${keyNamespace}, current selectedItems: ${selectedItems}`
+        );
 
         if (selectedItems.includes(tag)) {
           await multiSelectProvider.removeItem(tag);
@@ -122,13 +126,17 @@ const prepareDefaultActions = (actionExecutor) => {
           await multiSelectProvider.addItem(tag);
         }
       } else {
-        log_error("handleAction: localStorageToggleFlag event missing keyNamespace or tag", { keyNamespace, tag });
+        log_error(
+          "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
+          { keyNamespace, tag }
+        );
 
         return ActionResult.Error;
       }
 
       return ActionResult.Success;
-    });
+    }
+  );
 };
 
 export const ActionExecutorContext =

package/analyticsUtils/AnalyticsEvents/index.ts

@@ -7,6 +7,10 @@ import { sendHeaderClickEvent } from "./sendHeaderClickEvent";
 import { sendHardwareBackButtonClickEvent } from "./sendHardwareBackButtonClickEvent";
 import { sendDownloadsEvent } from "./sendDownloadsEvent";
 import { sendScreenEvent } from "./sendScreenEvent";
+import {
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
+} from "./searchEvents";
 
 export {
   sendScreenEvent,
@@ -18,4 +22,6 @@ export {
   sendHeaderClickEvent,
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 };

package/analyticsUtils/AnalyticsEvents/searchEvents.ts

@@ -0,0 +1,21 @@
+import { log_debug } from "../logger";
+import { postAnalyticEvent } from "../manager";
+import { ANALYTICS_CORE_EVENTS } from "../events";
+
+export const sendSearchCanceledEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_CANCELED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchCanceledEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};
+
+export const sendSearchExecutedEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_EXECUTED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchExecutedEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};

package/analyticsUtils/__tests__/analyticsManager.test.js

@@ -1,18 +1,18 @@
+import * as ReactNative from "react-native";
+
 const mock_postEvent = jest.fn();
 const mock_setPlugins = jest.fn();
 const mock_postTimedEvent = jest.fn();
 const mock_endTimedEvent = jest.fn();
 
-jest.mock("react-native", () => ({
-  NativeModules: {
-    AnalyticsBridge: {
-      postEvent: mock_postEvent,
-      setPlugins: mock_setPlugins,
-      postTimedEvent: mock_postTimedEvent,
-      endTimedEvent: mock_endTimedEvent,
-    },
-  },
-}));
+const AnalyticsBridge = {
+  postEvent: mock_postEvent,
+  setPlugins: mock_setPlugins,
+  postTimedEvent: mock_postTimedEvent,
+  endTimedEvent: mock_endTimedEvent,
+};
+
+ReactNative.NativeModules.AnalyticsBridge = AnalyticsBridge;
 
 const eventName = "event";
 const payload = {};
@@ -26,90 +26,92 @@ function clearAllMocks() {
   mock_endTimedEvent.mockClear();
 }
 
-describe("isValidAnalyticsData", () => {
-  beforeEach(clearAllMocks);
+describe("AnalyticsManager", () => {
+  describe("isValidAnalyticsData", () => {
+    beforeEach(clearAllMocks);
 
-  it("returns false if eventName is not a string", () => {
-    expect(analyticsManager.isValidAnalyticsData(42)).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData({})).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData([])).toBe(false);
-    expect(analyticsManager.isValidAnalyticsData(() => ({}))).toBe(false);
-  });
+    it("returns false if eventName is not a string", () => {
+      expect(analyticsManager.isValidAnalyticsData(42)).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData({})).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData([])).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData(() => ({}))).toBe(false);
+    });
 
-  it("returns false if payload is not an object", () => {
-    expect(analyticsManager.isValidAnalyticsData(eventName, "string")).toBe(
-      false
-    );
+    it("returns false if payload is not an object", () => {
+      expect(analyticsManager.isValidAnalyticsData(eventName, "string")).toBe(
+        false
+      );
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, 42)).toBe(false);
+      expect(analyticsManager.isValidAnalyticsData(eventName, 42)).toBe(false);
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, () => ({}))).toBe(
-      false
-    );
-  });
+      expect(analyticsManager.isValidAnalyticsData(eventName, () => ({}))).toBe(
+        false
+      );
+    });
 
-  it("returns true if eventName is a string and payload is null or an object", () => {
-    expect(analyticsManager.isValidAnalyticsData(eventName)).toBe(true);
+    it("returns true if eventName is a string and payload is null or an object", () => {
+      expect(analyticsManager.isValidAnalyticsData(eventName)).toBe(true);
 
-    expect(analyticsManager.isValidAnalyticsData(eventName, payload)).toBe(
-      true
-    );
+      expect(analyticsManager.isValidAnalyticsData(eventName, payload)).toBe(
+        true
+      );
+    });
   });
-});
 
-describe("postAnalyticEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("postAnalyticEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("calls the postEvent method of the analytic bridge", () => {
-    analyticsManager.postAnalyticEvent(eventName, payload);
-    expect(mock_postEvent).toHaveBeenCalledWith(eventName, payload);
-  });
+    it("calls the postEvent method of the analytic bridge", () => {
+      analyticsManager.postAnalyticEvent(eventName, payload);
+      expect(mock_postEvent).toHaveBeenCalledWith(eventName, payload);
+    });
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.postAnalyticEvent(42);
-    expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.postAnalyticEvent(42);
+      expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    });
   });
-});
 
-describe("providePlugins", () => {
-  beforeEach(clearAllMocks);
+  describe("providePlugins", () => {
+    beforeEach(clearAllMocks);
 
-  it("calls the setPlugins method of the analytic bridge", () => {
-    const plugins = [];
-    const plugin_configurations = {};
-    const callback = jest.fn();
+    it("calls the setPlugins method of the analytic bridge", () => {
+      const plugins = [];
+      const plugin_configurations = {};
+      const callback = jest.fn();
 
-    analyticsManager.providePlugins(plugins, plugin_configurations, callback);
+      analyticsManager.providePlugins(plugins, plugin_configurations, callback);
 
-    expect(mock_setPlugins).toHaveBeenCalledWith(
-      plugins,
-      plugin_configurations,
-      callback
-    );
+      expect(mock_setPlugins).toHaveBeenCalledWith(
+        plugins,
+        plugin_configurations,
+        callback
+      );
+    });
   });
-});
 
-describe("startAnalyticsTimedEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("startAnalyticsTimedEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.startAnalyticsTimedEvent(42);
-    expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.startAnalyticsTimedEvent(42);
+      expect(mock_postTimedEvent).not.toHaveBeenCalled();
+    });
   });
-});
 
-describe("endAnalyticsTimedEvent", () => {
-  beforeEach(clearAllMocks);
+  describe("endAnalyticsTimedEvent", () => {
+    beforeEach(clearAllMocks);
 
-  it("emits a time_on_screen event and adds duration to payload", () => {
-    analyticsManager.endAnalyticsTimedEvent(eventName, payload);
-    const newEventName = "time_on_screen";
-    payload.duration = "N/A";
-    expect(mock_postEvent).toHaveBeenCalledWith(newEventName, payload);
-  });
+    it("emits a time_on_screen event and adds duration to payload", () => {
+      analyticsManager.endAnalyticsTimedEvent(eventName, payload);
+      const newEventName = "time_on_screen";
+      payload.duration = "N/A";
+      expect(mock_postEvent).toHaveBeenCalledWith(newEventName, payload);
+    });
 
-  it("skips the event if it is not valid", () => {
-    analyticsManager.endAnalyticsTimedEvent(42);
-    expect(mock_postEvent).not.toHaveBeenCalled();
+    it("skips the event if it is not valid", () => {
+      analyticsManager.endAnalyticsTimedEvent(42);
+      expect(mock_postEvent).not.toHaveBeenCalled();
+    });
   });
 });

package/analyticsUtils/analyticsPlugins.ts

@@ -0,0 +1,25 @@
+import * as R from "ramda";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+
+export const getVideojsAnalyticPluginsConfig = async (entry: ZappEntry) => {
+  let videojsConfiguration = {};
+
+  const plugins = appStore.get("plugins");
+  const analyticPlugins = R.filter(R.propEq("type", "analytics"), plugins);
+
+  const configurations = await Promise.all(
+    analyticPlugins.map(async (plugin) => {
+      const { configuration, module } = plugin;
+
+      return module?.getPlayerConfiguration?.(configuration, entry);
+    })
+  );
+
+  configurations.forEach((analyticConfig) => {
+    if (typeof analyticConfig === "object" && analyticConfig !== null) {
+      videojsConfiguration = { ...videojsConfiguration, ...analyticConfig };
+    }
+  });
+
+  return videojsConfiguration;
+};

package/analyticsUtils/events.ts

@@ -23,10 +23,16 @@ export const TAPPING_EVENTS = {
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
 
+export const SEARCH_EVENTS = {
+  SEARCH_EXECUTED: "search_executed",
+  SEARCH_CANCELED: "search_canceled",
+};
+
 export const ANALYTICS_CORE_EVENTS = {
   ...LEGACY_EVENTS,
   ...SCREEN_VIEW_EVENTS,
   ...TAPPING_EVENTS,
+  ...SEARCH_EVENTS,
 };
 
 export const WEBVIEW_EVENTS = {

package/analyticsUtils/helpers/hooks.ts

@@ -26,7 +26,7 @@ export const useHookAnalytics = (props): void => {
     if (screenData?.hookPlugin?.module?.runInBackground) {
       sendScreenEvent({ analyticsScreenData });
     }
-  }, [hookPlugin.screen_id]);
+  }, [sendScreenEvent, screenData, hookPlugin.screen_id]);
 };
 
 export const useScreenAnalytics = (props) => {

package/analyticsUtils/index.tsx

@@ -18,6 +18,8 @@ import {
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
   sendScreenEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 } from "./AnalyticsEvents";
 
 import { postAnalyticEvent } from "./manager";
@@ -66,6 +68,8 @@ type AnalyticsFunctions = {
     item: ZappEntry;
     state: OfflineItemState;
   }) => void;
+  sendSearchCanceledEvent: (props: AnalyticsDefaultProperties) => void;
+  sendSearchExecutedEvent: (props: AnalyticsDefaultProperties) => void;
 };
 
 type GetAnalyticsFunctions = (
@@ -102,6 +106,8 @@ export function getAnalyticsFunctions({
     sendHardwareBackButtonClickEvent,
     sendScreenEvent,
     sendDownloadsEvent,
+    sendSearchCanceledEvent,
+    sendSearchExecutedEvent,
   };
 }
 

package/appUtils/HooksManager/index.js

@@ -270,7 +270,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

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -3,9 +3,7 @@
 exports[`focusManager should be defined 1`] = `
 Object {
   "blur": [Function],
-  "disableAutomaticFocus": [Function],
   "disableFocus": [Function],
-  "enableAutomaticFocus": [Function],
   "enableFocus": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
@@ -23,6 +21,7 @@ Object {
   "getGroupById": [Function],
   "getGroupRootById": [Function],
   "invokeHandler": [Function],
+  "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
@@ -30,11 +29,11 @@ Object {
   "on": [Function],
   "press": [Function],
   "pressOut": [Function],
+  "recoverFocus": [Function],
   "register": [Function],
   "removeHandler": [Function],
   "setFocus": [Function],
   "setInitialFocus": [Function],
-  "setupInitialFocus": [Function],
   "unregister": [Function],
 }
 `;

package/appUtils/focusManager/__tests__/focusManager.test.js

@@ -14,10 +14,8 @@ describe("focusManager", () => {
     expect(focusManager).toMatchSnapshot();
   });
 
-  it("enableAutomaticFocus should not block setting focus", () => {
+  it("manages to land initial focus", () => {
     const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.enableAutomaticFocus();
 
     focusManager.register({
       id: "1",
@@ -31,31 +29,13 @@ describe("focusManager", () => {
       },
     });
 
+    const { success } = focusManager.setInitialFocus();
+
+    expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
     expect(mockSetFocus).toBeCalledWith(null);
   });
 
-  it("enableAutomaticFocus should block setting focus", () => {
-    const mockSetFocus = jest.fn();
-    focusManager.setupInitialFocus("1", true);
-    focusManager.disableAutomaticFocus();
-
-    focusManager.register({
-      id: "1",
-      component: {
-        setFocus: mockSetFocus,
-        willReceiveFocus: function () {},
-        isMounted: function () {
-          return true;
-        },
-        props: { groupId: "121" },
-      },
-    });
-
-    expect(mockSetFocus).toBeCalledTimes(0);
-    expect(mockSetFocus).not.toBeCalledWith(null);
-  });
-
   describe("register", () => {});
   describe("unregister", () => {});
   describe("find", () => {});

package/appUtils/focusManager/__tests__/index.test.ts

@@ -18,7 +18,6 @@ describe("focusManager", () => {
       "on",
       "invokeHandler",
       "removeHandler",
-      "setupInitialFocus",
       "longPress",
       "pressOut",
       "enableFocus",
@@ -27,10 +26,10 @@ describe("focusManager", () => {
       "isFocusDisabled",
       "getCurrentFocusNode",
       "focusableTree",
-      "disableAutomaticFocus",
-      "enableAutomaticFocus",
       "getGroupRootById",
       "isGroupItemFocused",
+      "recoverFocus",
+      "isCurrentFocusOnTheTopScreen",
     ];
 
     expectedMethods.forEach((method) => {

package/appUtils/focusManager/index.ts

@@ -1,6 +1,15 @@
 import * as R from "ramda";
+import {
+  isNilOrEmpty,
+  isNotNil,
+} from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+
 import { Tree } from "./treeDataStructure/Tree";
-import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
+import {
+  findFocusableNode,
+  findPriorityItem,
+  haveSameParentBeforeRoot,
+} from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import * as FOCUS_EVENTS from "./events";
 import { coreLogger } from "../../logger";
@@ -44,21 +53,9 @@ export const focusManager = (function () {
   // focusable node which currently holds the focus
   let currentFocusNode = null;
   let lastFocusedId = null;
-  let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
-  function disableAutomaticFocus() {
-    logger.log({ message: "disableAutomaticFocus" });
-    focusAutoEnabled = false;
-  }
-
-  function enableAutomaticFocus() {
-    logger.log({ message: "focusManager: enableAutomaticFocus" });
-    focusAutoEnabled = true;
-  }
-
   function enableFocus() {
     focusDisabled = false;
   }
@@ -93,7 +90,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(currentFocusable, direction);
+      currentFocusable.blur(direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -226,32 +223,52 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (preferredFocus && preferredFocus.length > 0) {
-      const focusCandidate = preferredFocus[0];
-      const focusableItem = focusCandidate.component;
-
-      if (
-        focusableItem &&
-        !focusableItem.isGroup &&
-        isFocusEnabled(focusableItem)
-      ) {
-        if (initialFocusOnContent) {
-          blur();
-          initialFocusOnContent = false;
-        }
+    if (isNilOrEmpty(preferredFocus)) {
+      return { success: false };
+    }
 
-        logger.log({
-          message: "setInitialFocus – currentFocusNode",
-          data: {
-            focusableItem,
-          },
-        });
+    const focusCandidate = preferredFocus[0];
+    const focusableItem = focusCandidate.component;
 
-        currentFocusNode = focusCandidate;
-        focusableItem.willReceiveFocus(focusableItem, null);
-        focusableItem && setFocus(focusCandidate.id, null);
-      }
+    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
+    const nextFocusedId = R.path(["props", "id"], focusableItem);
+
+    if (
+      isNotNil(currentFocusedId) &&
+      isNotNil(nextFocusedId) &&
+      currentFocusedId === nextFocusedId
+    ) {
+      // we are going to move focus to the same node(already focused) -> nothing to do
+      return { success: true };
+    }
+
+    if (focusableItem?.isGroup) {
+      // focusCandidate is a FocusableGroup, we are not able to land focus on group(only on Focusable)
+      return { success: false };
     }
+
+    if (
+      focusableItem &&
+      !focusableItem.isGroup &&
+      isFocusEnabled(focusableItem)
+    ) {
+      blur();
+
+      logger.log({
+        message: "setInitialFocus – currentFocusNode",
+        data: {
+          focusableItem,
+        },
+      });
+
+      currentFocusNode = focusCandidate;
+      focusableItem.willReceiveFocus(focusableItem, null);
+      focusableItem && setFocus(focusCandidate.id, null);
+
+      return { success: true };
+    }
+
+    return { success: false };
   }
 
   function treeLoaded(val, node) {
@@ -261,17 +278,8 @@ export const focusManager = (function () {
         val,
         node,
         currentFocusNode,
-        initialFocusOnContent,
       },
     });
-
-    if ((val && !currentFocusNode) || initialFocusOnContent) {
-      logger.log({ message: `focusAutoEnabled ${focusAutoEnabled}` });
-
-      if (focusAutoEnabled) {
-        setInitialFocus(initialFocusOnContent ? node : undefined);
-      }
-    }
   }
 
   /**
@@ -402,11 +410,21 @@ export const focusManager = (function () {
     group ? unregisterGroup(id) : unregisterItem(id);
   }
 
-  function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    if (focusOnContent) {
-      initialFocusOnContent = focusOnContent;
-    } else {
-      setFocus(id);
+  function isCurrentFocusOnTheTopScreen() {
+    const routes = R.pathOr([], ["root", "children"], focusableTree);
+
+    if (routes.length <= 1) {
+      // there is only one or zero routes
+      return true;
+    }
+
+    return haveSameParentBeforeRoot(currentFocusNode, R.last(routes));
+  }
+
+  function recoverFocus() {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We've failed to set focused node on the new screen => run focus recovery
+      setInitialFocus();
     }
   }
 
@@ -416,6 +434,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the scroll
    */
   function moveFocus(direction) {
+    if (!isCurrentFocusOnTheTopScreen()) {
+      // We are opening new screen. We need to ignore movement of focus.
+      return false;
+    }
+
     if (focusDisabled) return false;
 
     if (currentFocusNode) {
@@ -444,8 +467,6 @@ export const focusManager = (function () {
       } else {
         currentFocusNode.component.failedLostFocus(currentFocusNode, direction);
       }
-    } else {
-      setInitialFocus();
     }
   }
 
@@ -505,7 +526,6 @@ export const focusManager = (function () {
     on,
     invokeHandler,
     removeHandler,
-    setupInitialFocus,
     longPress,
     pressOut,
     enableFocus,
@@ -514,9 +534,9 @@ export const focusManager = (function () {
     isFocusDisabled,
     getCurrentFocusNode,
     focusableTree,
-    disableAutomaticFocus,
-    enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
+    recoverFocus,
+    isCurrentFocusOnTheTopScreen,
   };
 })();