@applicaster/zapp-react-native-utils 14.0.0-alpha.3126393935 → 14.0.0-alpha.3216572828

package/actionsExecutor/ActionExecutorContext.tsx

@@ -16,6 +16,7 @@ import { QUICK_BRICK_EVENTS } 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 { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
@@ -24,19 +25,15 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation } from "../reactHooks";
+import { get } from "../utils";
 
 import {
   useContentTypes,
   usePickFromState,
 } from "@applicaster/zapp-react-native-redux/hooks";
-import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
+import { postEvent, useSubscriberFor } from "../reactHooks/useSubscriberFor";
 import { APP_EVENTS } from "../appUtils/events";
-import {
-  localStorageToggleFlag,
-  sessionStorageToggleFlag,
-} from "./StorageActions";
-
-import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -85,6 +82,19 @@ function findParentComponent(
   return null;
 }
 
+// send all data just in case (like for message string formatting)
+// Type is not exported for now
+type MaxTagsReachedEvent = {
+  selectedItems: string[];
+  maxItems: number;
+  tag: string;
+  keyNamespace: string;
+};
+
+async function onMaxTagsReached(data: MaxTagsReachedEvent) {
+  postEvent(TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT, [data]);
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -168,15 +178,10 @@ const prepareDefaultActions = (actionExecutor) => {
 
       const entry = context?.entry || {};
       const entryResolver = new EntryResolver(entry);
-      const screenData = context?.screenStateStore.getState().data || {};
-      const screenResolver = new EntryResolver(screenData || {});
 
       const data =
         options?.data && options.inflateData
-          ? await resolveObjectValues(options.data, {
-              entry: entryResolver,
-              screen: screenResolver,
-            })
+          ? await resolveObjectValues(options.data, { entry: entryResolver })
           : options?.data || entry;
 
       const cloudEvent = await createCloudEvent({
@@ -210,63 +215,81 @@ const prepareDefaultActions = (actionExecutor) => {
     return ActionResult.Error;
   });
 
-  actionExecutor.registerAction(
-    "sessionStorageToggleFlag",
-    async (
-      action: ActionType,
-      context?: Record<string, any>
-    ): Promise<ActionResult> => {
-      return await sessionStorageToggleFlag(context, action);
-    }
-  );
-
   actionExecutor.registerAction(
     "localStorageToggleFlag",
     async (
       action: ActionType,
       context?: Record<string, any>
     ): Promise<ActionResult> => {
-      return await localStorageToggleFlag(context, action);
-    }
-  );
+      if (!context) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing context"
+        );
 
-  actionExecutor.registerAction(
-    "screenSetVariable",
-    async (
-      action: ActionType,
-      context?: Record<string, any>
-    ): Promise<ActionResult> => {
-      const route = context?.screenRoute;
-      const screenStateStore = context?.screenStateStore;
-
-      await screenSetVariable(
-        route,
-        screenStateStore,
-        { entry: context?.entry, options: action.options },
-        action
-      );
+        return ActionResult.Error;
+      }
 
-      return Promise.resolve(ActionResult.Success);
-    }
-  );
+      const entry = context?.entry as ZappEntry;
 
-  actionExecutor.registerAction(
-    "screenToggleFlag",
-    async (
-      action: ActionType,
-      context?: Record<string, any>
-    ): Promise<ActionResult> => {
-      const screenRoute = context?.screenRoute;
-      const screenStateStore = context?.screenStateStore;
-
-      await screenToggleFlag(
-        screenRoute,
-        screenStateStore,
-        { entry: context?.entry, options: action.options },
-        action
-      );
+      if (!entry) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+        );
+
+        return ActionResult.Error;
+      }
+
+      const tag = action.options?.selector
+        ? get(entry, action.options.selector)
+        : (entry.extensions?.tag ?? entry.id);
+
+      const keyNamespace = action.options?.key;
+
+      if (keyNamespace && tag) {
+        const multiSelectProvider =
+          StorageMultiSelectProvider.getProvider(keyNamespace);
+
+        const selectedItems = await multiSelectProvider.getSelectedAsync();
+        const isTagInSelectedItems = selectedItems.includes(tag);
 
-      return Promise.resolve(ActionResult.Success);
+        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);
+        } else {
+          const maxItems = action.options?.max_items;
+
+          if (maxItems && selectedItems.length >= maxItems) {
+            log_info(
+              `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+            );
+
+            await onMaxTagsReached({
+              selectedItems,
+              maxItems,
+              tag,
+              keyNamespace,
+            });
+
+            return ActionResult.Cancel;
+          }
+
+          await multiSelectProvider.addItem(tag);
+        }
+      } else {
+        log_error(
+          "handleAction: localStorageToggleFlag event missing keyNamespace or tag",
+          { keyNamespace, tag }
+        );
+
+        return ActionResult.Error;
+      }
+
+      return ActionResult.Success;
     }
   );
 };

package/analyticsUtils/AnalyticsEvents/helper.ts

@@ -9,7 +9,7 @@ import {
 } from "../events";
 import { isEmptyOrNil } from "../../cellUtils";
 import { get } from "lodash";
-import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-utils/storage/StorageMultiSelectProvider";
+import { StorageMultiSelectProvider } from "@applicaster/zapp-react-native-bridge/ZappStorage/StorageMultiSelectProvider";
 
 export enum OfflineItemState {
   notExist = "NOT_EXISTS",

package/analyticsUtils/AnalyticsEvents/sendHeaderClickEvent.ts

@@ -4,7 +4,7 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type SendHeaderClickEventProps = {
-  extraProps: ExtraProps;
+  extraProps: Record<string, any>;
   component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
   item?: ZappEntry;

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -1,10 +1,11 @@
+/// <reference types="../../" />
 import { log_error, log_debug } from "../logger";
 import { replaceAnalyticsPropsNils } from "./helper";
 import { postAnalyticEvent } from "../manager";
 
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
-declare type AnalyticsDefaultHelperProperties = {
+type AnalyticsDefaultHelperProperties = {
   analyticsScreenData: AnalyticsScreenProperties;
   extraProps: any;
   props;

package/analyticsUtils/index.tsx

@@ -1,4 +1,3 @@
-/// <reference types="@applicaster/zapp-react-native-utils" />
 import * as R from "ramda";
 import * as React from "react";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
@@ -31,7 +30,7 @@ import { ANALYTICS_CORE_EVENTS } from "./events";
 import { noop } from "../functionUtils";
 
 type ComponentWithChildrenProps = {
-  children: React.ReactChildren;
+  children: React.ReactElement;
 };
 
 export function sendSelectCellEvent(item, component, headerTitle, itemIndex) {
@@ -120,11 +119,11 @@ export function getAnalyticsFunctions({
 export const AnalyticsContext =
   React.createContext<GetAnalyticsFunctions>(noop);
 
-export function AnalyticsProvider(props: ComponentWithChildrenProps) {
+export function AnalyticsProvider({ children }: ComponentWithChildrenProps) {
   return (
     // @ts-ignore - this is a valid context provider
     <AnalyticsContext.Provider value={getAnalyticsFunctions}>
-      {props?.children}
+      {children}
     </AnalyticsContext.Provider>
   );
 }

package/analyticsUtils/manager.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import * as R from "ramda";
 import { NativeModules } from "react-native";
-import { ANALYTICS_CORE_EVENTS } from "@applicaster/zapp-react-native-utils/analyticsUtils/events";
+import { ANALYTICS_CORE_EVENTS } from "./events";
 
 import { analyticsUtilsLogger } from "./logger";
 

package/appUtils/HooksManager/Hook.ts

@@ -65,10 +65,6 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
-    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
-      return;
-    }
-
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }
@@ -198,4 +194,8 @@ export class Hook implements HookInterface {
       R.eqProps("weight", nextHook, this)
     );
   }
+
+  isCancelled(): boolean {
+    return this.state === hookState(HOOKS_EVENTS.CANCEL);
+  }
 }

package/appUtils/HooksManager/index.ts

@@ -255,7 +255,7 @@ export function HooksManager({
    * @param {Array<Hook>} restOfHooks to run
    * @returns {function} callback function
    */
-  function hookCallback(hookPlugin, restOfHooks, initialPayload) {
+  function hookCallback(hookPlugin: Hook, restOfHooks: Hook[], initialPayload) {
     /**
      * callback invoked after a hook is executed
      * @param {object} options
@@ -273,6 +273,16 @@ export function HooksManager({
     }) {
       let callback = callbackArg;
 
+      if (hookPlugin.isCancelled()) {
+        logHookEvent(
+          hooksManagerLogger.info,
+          `hookCallback: hook was cancelled: ${hookPlugin["identifier"]}`,
+          {}
+        );
+
+        return;
+      }
+
       if (error) {
         logHookEvent(
           hooksManagerLogger.error,

package/appUtils/accessibilityManager/index.ts

@@ -2,8 +2,8 @@ import { BehaviorSubject } from "rxjs";
 import { accessibilityManagerLogger as logger } from "./logger";
 import { TTSManager } from "../platform";
 import { BUTTON_ACCESSIBILITY_KEYS } from "./const";
-import { AccessibilityRole } from "react-native";
 import { toString } from "../../utils";
+import { AccessibilityRole } from "react-native";
 
 export class AccessibilityManager {
   private static _instance: AccessibilityManager | null = null;
@@ -147,7 +147,7 @@ export class AccessibilityManager {
         accessibilityHint: `Press button to perform action on ${buttonName}`,
         "aria-label": buttonName,
         "aria-description": `Press button to perform action on ${buttonName}`,
-        accessibilityRole: "button" as AccessibilityRole,
+        accessibilityRole: "button",
         "aria-role": "button",
       };
     }
@@ -166,7 +166,7 @@ export class AccessibilityManager {
       accessibilityHint: hint,
       "aria-label": label,
       "aria-description": hint,
-      accessibilityRole: "button" as AccessibilityRole,
+      accessibilityRole: "button",
       "aria-role": "button",
     };
   }

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,11 +1,10 @@
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
 
-export interface IResolver {
+interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
 
-// TODO: Rename to ObjectKeyResolver or similar
 export class EntryResolver implements IResolver {
   entry: ZappEntry;
 
@@ -22,18 +21,6 @@ export class EntryResolver implements IResolver {
   }
 }
 
-// TODO: Move to proper place
-
-export class ScreenStateResolver implements IResolver {
-  constructor(private screenStateStore: ScreenStateStore) {}
-
-  async resolve(key: string) {
-    const screenState = this.screenStateStore.getState().data;
-
-    return screenState?.[key];
-  }
-}
-
 export class ContextResolver implements IResolver {
   resolve = async (compositeKey: string) =>
     ContextKeysManager.instance.getKey(compositeKey);

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

@@ -6,6 +6,7 @@ exports[`focusManager should be defined 1`] = `
   "disableFocus": [Function],
   "enableFocus": [Function],
   "findPreferredFocusChild": [Function],
+  "focusTopNavigation": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {
@@ -24,6 +25,9 @@ exports[`focusManager should be defined 1`] = `
   "invokeHandler": [Function],
   "isCurrentFocusOnTheTopScreen": [Function],
   "isFocusDisabled": [Function],
+  "isFocusOn": [Function],
+  "isFocusOnContent": [Function],
+  "isFocusOnMenu": [Function],
   "isGroupItemFocused": [Function],
   "longPress": [Function],
   "moveFocus": [Function],
@@ -63,6 +67,7 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getGroupRootById": [Function],
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
+  "isFocusOn": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

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

@@ -33,7 +33,7 @@ describe("focusManager", () => {
 
     expect(success).toBe(true);
     expect(mockSetFocus).toBeCalledTimes(1);
-    expect(mockSetFocus).toBeCalledWith(null);
+    expect(mockSetFocus).toBeCalledWith(null, undefined);
   });
 
   describe("register", () => {});

package/appUtils/focusManager/index.ios.ts

@@ -1,6 +1,7 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
+import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -391,6 +392,14 @@ export const focusManager = (function () {
     return node;
   }
 
+  function isFocusOn(id): boolean {
+    const currentFocusNode = focusableTree.findInTree(
+      getCurrentFocus()?.props?.id
+    );
+
+    return id && isCurrentFocusOn(id, currentFocusNode);
+  }
+
   return {
     on,
     invokeHandler,
@@ -412,5 +421,6 @@ export const focusManager = (function () {
     getGroupRootById,
     isGroupItemFocused,
     getPreferredFocusChild,
+    isFocusOn,
   };
 })();

package/appUtils/focusManager/index.ts

@@ -14,6 +14,15 @@ import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
 
+import {
+  findSelectedTabId,
+  findSelectedMenuId,
+  isTabsScreenContentFocused,
+  isCurrentFocusOnContent,
+  isCurrentFocusOnMenu,
+  isCurrentFocusOn,
+} from "../focusManagerAux/utils";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -100,7 +109,7 @@ export const focusManager = (function () {
    * @private
    * @param {Object} direction of the navigation which led to this action
    */
-  function focus(direction) {
+  function focus(direction, context?: FocusManager.FocusContext) {
     const currentFocusable = getCurrentFocus();
 
     if (
@@ -108,7 +117,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.setFocus(direction);
+      currentFocusable.setFocus(direction, context);
     }
   }
 
@@ -205,7 +214,7 @@ export const focusManager = (function () {
    * @param {Array<string>} ids - An array of node IDs to update.
    * @param {boolean} setFocus - A flag indicating whether to set focus (true) or blur (false) on the nodes.
    */
-  const updateNodeFocus = (ids, action) => {
+  const updateNodeFocus = (ids, action, context: FocusManager.FocusContext) => {
     if (!ids || ids.length === 0) {
       return; // Nothing to do
     }
@@ -222,11 +231,13 @@ export const focusManager = (function () {
 
     // Function to apply the action (focus or blur)
     const applyAction = (node) => {
+      const direction = undefined;
+
       if (node && node.component) {
         if (action === "focus") {
-          node.component.setFocus();
+          node.component.setFocus(direction, context);
         } else if (action === "blur") {
-          node.component.setBlur();
+          node.component.setBlur(direction, context);
         }
       }
     };
@@ -253,7 +264,11 @@ export const focusManager = (function () {
    * @param {Object} direction of the navigation, which led to this focus change
    * to another group or not. defaults to false
    */
-  function setFocus(id: string, direction?: FocusManager.Web.Direction) {
+  function setFocus(
+    id: string,
+    direction?: FocusManager.Web.Direction,
+    context?: FocusManager.FocusContext
+  ) {
     if (focusDisabled) return false;
 
     // due to optimisiation it's recommanded to set currentFocusNode before setFocus
@@ -266,21 +281,65 @@ export const focusManager = (function () {
       );
 
       // Set focus on current node parents and blur on previous node parents
-      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS);
-      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR);
+      updateNodeFocus(currentNodeParentsIDs, ACTION.FOCUS, context);
+      updateNodeFocus(previousNodeParentsIDs, ACTION.BLUR, context);
 
       currentFocusNode = focusableTree.findInTree(id);
     }
 
     setLastFocusOnParentNode(currentFocusNode);
 
-    focus(direction);
+    focus(direction, context);
+  }
+
+  function isFocusOnContent() {
+    return isCurrentFocusOnContent(currentFocusNode);
+  }
+
+  function isFocusOnMenu() {
+    return isCurrentFocusOnMenu(currentFocusNode);
+  }
+
+  // Move focus to appropriate top navigation tab with context
+  function focusTopNavigation(isTabsScreen: boolean, item: ZappEntry) {
+    const landFocusTo = (id) => {
+      if (id) {
+        // set focus on selected menu item
+        const direction = undefined;
+
+        const context: FocusManager.FocusContext = {
+          source: "back",
+          preserveScroll: true,
+        };
+
+        logger.log({ message: "landFocusTo", data: { id } });
+
+        blur(direction);
+        setFocus(id, direction, context);
+      }
+    };
+
+    if (isTabsScreen && isTabsScreenContentFocused(currentFocusNode)) {
+      const selectedTabId = findSelectedTabId(item);
+
+      // Set focus with back button context to tabs-menu
+      landFocusTo(selectedTabId);
+
+      return;
+    }
+
+    const selectedMenuItemId = findSelectedMenuId(focusableTree);
+    // Set focus with back button context to top-menu
+    landFocusTo(selectedMenuItemId);
   }
 
   /**
    * sets the initial focus when the screen loads, or when focus is lost
    */
-  function setInitialFocus(lastAddedParentNode?: any) {
+  function setInitialFocus(
+    lastAddedParentNode?: any,
+    context?: FocusManager.FocusContext
+  ) {
     const preferredFocus = findPriorityItem(
       lastAddedParentNode?.children || focusableTree.root.children
     );
@@ -326,7 +385,7 @@ export const focusManager = (function () {
         },
       });
 
-      focusableItem && setFocus(focusCandidate.id, null);
+      focusableItem && setFocus(focusCandidate.id, null, context);
 
       return { success: true };
     }
@@ -546,6 +605,14 @@ export const focusManager = (function () {
     return preferredFocus[0];
   }
 
+  function isFocusOn(id): boolean {
+    return (
+      id &&
+      isCurrentFocusOnTheTopScreen() &&
+      isCurrentFocusOn(id, currentFocusNode)
+    );
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -576,5 +643,9 @@ export const focusManager = (function () {
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
     findPreferredFocusChild,
+    focusTopNavigation,
+    isFocusOnContent,
+    isFocusOnMenu,
+    isFocusOn,
   };
 })();

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -142,7 +142,7 @@ export class Tree {
           this.hasGroupID(node)
             ? "Make sure that there are no id duplicates inside the " +
               existingNode.parent.id +
-              " group."
+              " group. This can as well happen when the component is re-mounted"
             : ""
         }`,
       });