@applicaster/zapp-react-native-utils 13.0.0-alpha.3755455151 → 13.0.0-alpha.4004617449

package/actionsExecutor/ActionExecutor.ts

@@ -17,9 +17,10 @@ class ActionExecutor {
 
   handleAction = async (
     action: ActionType,
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     const handler = this.registeredActions[action.type];
+    const entry = context?.entry as ZappEntry;
 
     if (!handler) {
       log_error(
@@ -38,11 +39,11 @@ class ActionExecutor {
     );
 
     try {
-      return handler(action, entry);
+      return handler(action, context);
     } catch (error) {
       log_error(
         `handleAction: error handling action type: ${action.type}, message: ${error.message}`,
-        { action, entry, error }
+        { action, context, error }
       );
 
       throw error;
@@ -51,11 +52,11 @@ class ActionExecutor {
 
   handleActions = async (
     actionTypes: ActionType[],
-    entry: ZappEntry = null
+    context?: Record<string, any>
   ): Promise<ActionResult> => {
     for (const action of actionTypes) {
       // TODO: Handle action result error
-      const result = await this.handleAction(action, entry);
+      const result = await this.handleAction(action, context);
 
       if (result === ActionResult.Cancel) {
         log_info(`handleActions: action: ${action.type} canceled`);
@@ -67,7 +68,10 @@ class ActionExecutor {
     return ActionResult.Success;
   };
 
-  handleEntryActions = async (entry: ZappEntry): Promise<ActionResult> => {
+  handleEntryActions = async (
+    entry: ZappEntry,
+    context?: Record<string, any>
+  ): Promise<ActionResult> => {
     const tapActions = entry.extensions?.tap_actions?.actions;
 
     if (!tapActions) {
@@ -77,7 +81,7 @@ class ActionExecutor {
     if (!Array.isArray(tapActions)) {
       log_error(
         `handleEntryActions: tapActions is not an array for id: ${entry.id} title: ${entry.title}`,
-        { entry }
+        { context, entry }
       );
 
       return;
@@ -87,7 +91,7 @@ class ActionExecutor {
       return;
     }
 
-    await this.handleActions(tapActions, entry);
+    await this.handleActions(tapActions, { ...context, entry });
   };
 
   unregisterAction = (actionType: string) => {
@@ -96,7 +100,10 @@ class ActionExecutor {
 
   registerAction = (
     type: string,
-    handler: (action: ActionType, entry?: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => {
     if (this.registeredActions[type]) {
       log_error(`registerAction: action type: ${type} already registered`);

package/actionsExecutor/ActionExecutorContext.tsx

@@ -13,6 +13,12 @@ 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";
+import {
+  EntryResolver,
+  resolveObjectValues,
+} from "../appUtils/contextKeysManager/contextResolver";
 
 const { log_error, log_info } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -22,15 +28,24 @@ const { log_error, log_info } = createLogger({
 type ActionExecutorContextType = {
   registerAction: (
     type: string,
-    handler: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>
+    handler: (
+      action: ActionType,
+      context?: Record<string, any>
+    ) => Promise<ActionResult>
   ) => void;
   unregisterAction: (type: string) => void;
-  handleAction: (action: ActionType, entry: ZappEntry) => Promise<ActionResult>;
+  handleAction: (
+    action: ActionType,
+    context?: Record<string, any>
+  ) => Promise<ActionResult>;
   handleActions: (
     actions: ActionType[],
-    entry: ZappEntry
+    context: Record<string, any>
+  ) => Promise<ActionResult>;
+  handleEntryActions: (
+    entry: ZappEntry,
+    context?: Record<string, any>
   ) => Promise<ActionResult>;
-  handleEntryActions: (entry: ZappEntry) => Promise<ActionResult>;
 };
 type Props = {
   children: React.ReactNode;
@@ -45,6 +60,31 @@ const prepareDefaultActions = (actionExecutor) => {
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction(
+    "refreshComponent",
+    async (_action, context) => {
+      const dispatch = appStore.getDispatch();
+
+      log_info("handleAction: refreshComponent event");
+
+      const dataSource = context?.component?.data?.source;
+
+      // TODO: Later we can pass component ids to do refresh instead of current one
+      // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
+      // TODO: handle focused item removal
+      dispatch(
+        loadPipesData(dataSource, {
+          silentRefresh: false,
+          clearCache: true,
+          callback: (_data) => {},
+          riverId: context?.screenData?.id,
+        })
+      );
+
+      return ActionResult.Success;
+    }
+  );
+
   actionExecutor.registerAction("switchLayout", async (action) => {
     log_info("handleAction: switchLayout event");
 
@@ -80,13 +120,21 @@ const prepareDefaultActions = (actionExecutor) => {
     return confirmationPromise;
   });
 
-  actionExecutor.registerAction("sendCloudEvent", async (action, entry) => {
+  actionExecutor.registerAction("sendCloudEvent", async (action, context) => {
     try {
       const options = action.options;
 
+      const entry = context?.entry || {};
+      const entryResolver = new EntryResolver(entry);
+
+      const data =
+        options?.data && options.inflateData
+          ? await resolveObjectValues(options.data, { entry: entryResolver })
+          : options?.data || entry;
+
       const cloudEvent = await createCloudEvent({
         type: options.type || "com.applicaster.selector.action.v1",
-        data: options.data || entry,
+        data,
         subject: options.subject || entry?.id,
       });
 
@@ -117,9 +165,12 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction(
     "localStorageToggleFlag",
-    async (action: ActionType, entry?: ZappEntry): Promise<ActionResult> => {
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
       const keyNamespace = action.options?.key;
-      const tag = entry?.extensions?.tag;
+      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =

package/alertUtils/alert.ts

@@ -0,0 +1,148 @@
+import { Alert } from "react-native";
+import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
+
+// #region "Alert Dialog"
+
+const globalAny: any = global;
+
+const showWebAlertDialog = ({ message, completion }: AlertWebDialog) => {
+  globalAny?.alert?.(message);
+  completion?.();
+};
+
+const showNativeAlertDialog = ({
+  title,
+  message,
+  okButtonText,
+  completion,
+}: AlertDialogType) => {
+  Alert.alert(title, message, [
+    {
+      text: okButtonText,
+      onPress: completion,
+    },
+  ]);
+};
+
+export const showAlertDialog = ({
+  title,
+  message,
+  okButtonText,
+  completion,
+}: AlertDialogType) => {
+  if (isWeb()) {
+    showWebAlertDialog({ message, completion });
+  } else {
+    showNativeAlertDialog({
+      title,
+      message,
+      okButtonText,
+      completion,
+    });
+  }
+};
+
+// #endregion "Alert Dialog"
+
+// #region "Confirmation Dialog"
+
+const showWebDialog = ({
+  message,
+  confirmCompletion,
+  cancelCompletion,
+}: WebConfirmationDialog) => {
+  const isConfirmed = globalAny?.confirm?.(message);
+
+  if (isConfirmed) {
+    confirmCompletion?.();
+  } else {
+    cancelCompletion?.();
+  }
+};
+
+const showNativeDialog = ({
+  title,
+  message,
+  okButtonText,
+  cancelButtonText,
+  confirmCompletion,
+  cancelCompletion,
+}: ConfirmationDialog) => {
+  Alert.alert(title, message, [
+    {
+      text: cancelButtonText,
+      onPress: cancelCompletion,
+    },
+    {
+      text: okButtonText,
+      style: "destructive",
+      onPress: confirmCompletion,
+    },
+  ]);
+};
+
+const handleCustomDialog = (data) => {
+  const {
+    showDialog,
+    hideDialog,
+    setConfirmAction,
+    setCancelAction,
+    setMessages,
+  } = confirmationDialogStore.getState();
+
+  setMessages(data.messages);
+
+  if (data?.cancelCompletion) {
+    setCancelAction(() => {
+      data.cancelCompletion();
+      hideDialog();
+    });
+  }
+
+  if (data?.confirmCompletion) {
+    setConfirmAction(() => {
+      data.confirmCompletion();
+      hideDialog();
+    });
+  }
+
+  showDialog();
+};
+
+export const showConfirmationDialog = ({
+  title,
+  message,
+  okButtonText,
+  cancelButtonText,
+  confirmCompletion,
+  cancelCompletion,
+}: CustomConfirmationDialog): void => {
+  if (isWeb()) {
+    if (cancelCompletion) {
+      handleCustomDialog({
+        messages: {
+          title,
+          message,
+          okButtonText,
+          cancelButtonText,
+        },
+        confirmCompletion,
+        cancelCompletion,
+      });
+    } else {
+      showWebDialog({ message, confirmCompletion, cancelCompletion });
+    }
+  } else {
+    showNativeDialog({
+      title,
+      message,
+      okButtonText,
+      cancelButtonText,
+      confirmCompletion,
+      cancelCompletion,
+    });
+  }
+};
+
+// #endregion "Confirmation Dialog"

package/alertUtils/index.ts

@@ -1,148 +1 @@
-import { Alert } from "react-native";
-import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { confirmationDialogStore } from "@applicaster/zapp-react-native-ui-components/Contexts/ConfirmDialogState";
-
-// #region "Alert Dialog"
-
-const globalAny: any = global;
-
-const showWebAlertDialog = ({ message, completion }: AlertWebDialog) => {
-  globalAny?.alert?.(message);
-  completion?.();
-};
-
-const showNativeAlertDialog = ({
-  title,
-  message,
-  okButtonText,
-  completion,
-}: AlertDialogType) => {
-  Alert.alert(title, message, [
-    {
-      text: okButtonText,
-      onPress: completion,
-    },
-  ]);
-};
-
-export const showAlertDialog = ({
-  title,
-  message,
-  okButtonText,
-  completion,
-}: AlertDialogType) => {
-  if (isWeb()) {
-    showWebAlertDialog({ message, completion });
-  } else {
-    showNativeAlertDialog({
-      title,
-      message,
-      okButtonText,
-      completion,
-    });
-  }
-};
-
-// #endregion "Alert Dialog"
-
-// #region "Confirmation Dialog"
-
-const showWebDialog = ({
-  message,
-  confirmCompletion,
-  cancelCompletion,
-}: WebConfirmationDialog) => {
-  const isConfirmed = globalAny?.confirm?.(message);
-
-  if (isConfirmed) {
-    confirmCompletion?.();
-  } else {
-    cancelCompletion?.();
-  }
-};
-
-const showNativeDialog = ({
-  title,
-  message,
-  okButtonText,
-  cancelButtonText,
-  confirmCompletion,
-  cancelCompletion,
-}: ConfirmationDialog) => {
-  Alert.alert(title, message, [
-    {
-      text: cancelButtonText,
-      onPress: cancelCompletion,
-    },
-    {
-      text: okButtonText,
-      style: "destructive",
-      onPress: confirmCompletion,
-    },
-  ]);
-};
-
-const handleCustomDialog = (data) => {
-  const {
-    showDialog,
-    hideDialog,
-    setConfirmAction,
-    setCancelAction,
-    setMessages,
-  } = confirmationDialogStore.getState();
-
-  setMessages(data.messages);
-
-  if (data?.cancelCompletion) {
-    setCancelAction(() => {
-      data.cancelCompletion();
-      hideDialog();
-    });
-  }
-
-  if (data?.confirmCompletion) {
-    setConfirmAction(() => {
-      data.confirmCompletion();
-      hideDialog();
-    });
-  }
-
-  showDialog();
-};
-
-export const showConfirmationDialog = ({
-  title,
-  message,
-  okButtonText,
-  cancelButtonText,
-  confirmCompletion,
-  cancelCompletion,
-}: CustomConfirmationDialog): void => {
-  if (isWeb()) {
-    if (cancelCompletion) {
-      handleCustomDialog({
-        messages: {
-          title,
-          message,
-          okButtonText,
-          cancelButtonText,
-        },
-        confirmCompletion,
-        cancelCompletion,
-      });
-    } else {
-      showWebDialog({ message, confirmCompletion, cancelCompletion });
-    }
-  } else {
-    showNativeDialog({
-      title,
-      message,
-      okButtonText,
-      cancelButtonText,
-      confirmCompletion,
-      cancelCompletion,
-    });
-  }
-};
-
-// #endregion "Confirmation Dialog"
+export { showAlertDialog, showConfirmationDialog } from "./alert";

package/appUtils/HooksManager/Hook.ts

@@ -16,7 +16,7 @@ const BASE_HOOK_PROPERTIES = ["screen_id", "identifier", "weight"];
  * @returns {number} index
  */
 const hookState: (
-  arg0: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS]
+  arg0: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS]
 ) => number = R.indexOf(R.__, R.values(HOOKS_EVENTS));
 
 /**
@@ -62,7 +62,7 @@ export class Hook implements HookInterface {
    * @param {Array<Any>} args variadic arguments to invoke the handler with
    */
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
     this.state = hookState(event);

package/appUtils/HooksManager/types.ts

@@ -4,6 +4,8 @@ import { HOOKS_EVENTS } from "./constants";
 export interface HookConfiguration {}
 
 /* existing Hook Plugn props: sample */
+
+/*
 interface _HookModulePlugin {
   Component:
     | React.FC<HookPluginProps>
@@ -23,6 +25,7 @@ interface _HookModulePlugin {
     presentUI: (payload?: HookPluginProps["payload"]) => void
   ) => any;
 }
+*/
 
 //* Derived from usage */
 export interface HookModule {
@@ -100,7 +103,7 @@ export interface Hook<T extends HookModule = HookModule> {
   identifier: string;
   configuration: T["configuration"];
   setStateAndNotify(
-    event: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS],
+    event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     opts: {
       error?: typeof Error;
       route?: string;
@@ -109,7 +112,7 @@ export interface Hook<T extends HookModule = HookModule> {
     }
   );
   general?: {
-    transition_type: typeof HOOKS_EVENTS[keyof typeof HOOKS_EVENTS];
+    transition_type: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS];
     allow_screen_plugin_presentation: boolean;
     is_flow_blocker: boolean;
   };

package/appUtils/contextKeysManager/contextResolver.ts

@@ -0,0 +1,77 @@
+import { createLogger } from "../../logger";
+import { ContextKeysManager } from "./index";
+import * as R from "ramda";
+
+const { log_error } = createLogger({
+  subsystem: "contextResolver",
+  category: "General",
+});
+
+interface IResolver {
+  resolve: (string) => Promise<string | number | object>;
+}
+
+export class EntryResolver implements IResolver {
+  entry: ZappEntry;
+
+  constructor(entry: ZappEntry) {
+    this.entry = entry;
+  }
+
+  async resolve(key: string) {
+    if (!key || key.length === 0) {
+      return this.entry;
+    }
+
+    return R.view(R.lensPath(key.split(".")), this.entry);
+  }
+}
+
+export class ContextResolver implements IResolver {
+  resolve = async (compositeKey: string) =>
+    ContextKeysManager.instance.getKey(compositeKey);
+}
+
+export const resolveObjectValues = async (
+  data: Record<string, any>,
+  resolvers: Record<string, IResolver> = null
+) => {
+  const entries = Object.entries(data);
+
+  const exResolvers = { ctx: new ContextResolver(), ...resolvers };
+
+  const resolvedEntries = await Promise.all(
+    entries.map(async ([key, value]) => {
+      if (typeof value !== "string") {
+        return [key, value];
+      }
+
+      if (!value.startsWith("@")) {
+        return [key, value];
+      }
+
+      const regex = /@{([^/]+)\/([^}]*)}/;
+
+      const match = (value as string).match(regex);
+
+      if (match) {
+        const contextResolverName = match[1];
+        const compositeKey = match[2];
+
+        const resolver = exResolvers[contextResolverName] || exResolvers.ctx;
+        const resolvedValue = await resolver.resolve(compositeKey);
+
+        return [key, resolvedValue];
+      }
+
+      log_error("resolveObjectValues: invalid context string", {
+        key,
+        value,
+      });
+
+      return [key, null];
+    })
+  );
+
+  return Object.fromEntries(resolvedEntries);
+};

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

@@ -28,6 +28,7 @@ exports[`focusManager should be defined 1`] = `
   "moveFocus": [Function],
   "on": [Function],
   "press": [Function],
+  "pressIn": [Function],
   "pressOut": [Function],
   "recoverFocus": [Function],
   "register": [Function],

package/appUtils/focusManager/index.ts

@@ -13,6 +13,7 @@ import {
 import { subscriber } from "../../functionUtils";
 import { coreLogger } from "../../logger";
 import { ACTION } from "./utils/enums";
+
 const logger = coreLogger.addSubsystem("focusManager");
 
 const isFocusEnabled = (focusableItem): boolean => {
@@ -325,8 +326,6 @@ export const focusManager = (function () {
         },
       });
 
-      currentFocusNode = focusCandidate;
-
       focusableItem && setFocus(focusCandidate.id, null);
 
       return { success: true };
@@ -346,6 +345,14 @@ export const focusManager = (function () {
     });
   }
 
+  function pressIn() {
+    const currentFocusable = getCurrentFocus();
+
+    if (currentFocusable) {
+      currentFocusable.pressIn(null);
+    }
+  }
+
   /**
    * calls the `press` method on the current focus component
    * @public
@@ -477,7 +484,7 @@ export const focusManager = (function () {
   function isCurrentFocusOnTheTopScreen() {
     const routes = R.pathOr([], ["root", "children"], focusableTree);
 
-    if (routes.length <= 1) {
+    if (currentFocusNode && routes.length <= 1) {
       // there is only one or zero routes
       return true;
     }
@@ -553,6 +560,7 @@ export const focusManager = (function () {
     invokeHandler,
     removeHandler,
     longPress,
+    pressIn,
     pressOut,
     enableFocus,
     setInitialFocus,

package/appUtils/focusManagerAux/utils/index.ts

@@ -1,8 +1,8 @@
 import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-import { find, last, startsWith, pathOr } from "ramda";
+import { find, last, pathOr, startsWith } from "ramda";
 import {
-  QUICK_BRICK_NAVBAR,
   QUICK_BRICK_CONTENT,
+  QUICK_BRICK_NAVBAR,
 } from "@applicaster/quick-brick-core/const";
 
 // run check each 300 ms
@@ -66,7 +66,8 @@ export const getContentNode = (focusableTree) => {
   const content = find(
     (child) =>
       startsWith(QUICK_BRICK_CONTENT, child.id) ||
-      startsWith("player", child.id),
+      startsWith("player", child.id) ||
+      startsWith("/hooks", child?.parent?.id), // For startup hooks case
     getActiveScreenChildren(focusableTree)
   );