@applicaster/zapp-react-native-utils 13.0.0-rc.12 → 13.0.0-rc.121

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

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

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
-
-import React, { createContext, useMemo } from "react";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import React, { createContext, useEffect, useMemo } from "react";
 import {
   actionExecutor as _actionExecutor,
   ActionResult,
@@ -12,8 +12,24 @@ 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";
+import {
+  EntryResolver,
+  resolveObjectValues,
+} from "../appUtils/contextKeysManager/contextResolver";
+import { useNavigation } from "../reactHooks";
+import { get } from "lodash";
+
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
+import { TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT } from "./consts";
+import { postEvent } from "../reactHooks/useSubscriberFor";
 
-const { log_error, log_info } = createLogger({
+export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -21,20 +37,58 @@ 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;
 };
 
+function findParentComponent(
+  childId: string,
+  parent: ZappRiver | ZappUIComponent
+): ZappRiver | ZappUIComponent | null {
+  for (const child of parent.ui_components) {
+    if (child.id === childId) return parent;
+
+    if (child.ui_components) {
+      const found = findParentComponent(childId, child);
+      if (found) return found;
+    }
+  }
+
+  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;
@@ -44,6 +98,46 @@ const prepareDefaultActions = (actionExecutor) => {
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction(
+    "refreshComponent",
+    async (_action, context) => {
+      const dispatch = appStore.getDispatch();
+
+      const dataSource =
+        context?.component?.data?.source ||
+        findParentComponent(context?.component.id, context?.screenData)?.data
+          ?.source;
+
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
+
+      // 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");
+
+    await localStorage.setItem(
+      ACTIVE_LAYOUT_ID_STORAGE_KEY,
+      action.options.layoutId
+    );
+
+    QuickBrickManager.sendQuickBrickEvent(QUICK_BRICK_EVENTS.FORCE_APP_RELOAD);
+
+    return ActionResult.Success;
+  });
+
   actionExecutor.registerAction("appRestart", async () => {
     log_info(`handleAction: ${QUICK_BRICK_EVENTS.FORCE_APP_RELOAD} event`);
 
@@ -66,13 +160,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,
       });
 
@@ -103,9 +205,33 @@ const prepareDefaultActions = (actionExecutor) => {
 
   actionExecutor.registerAction(
     "localStorageToggleFlag",
-    async (action: ActionType, entry?: ZappEntry): Promise<ActionResult> => {
+    async (
+      action: ActionType,
+      context?: Record<string, any>
+    ): Promise<ActionResult> => {
+      if (!context) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing context"
+        );
+
+        return ActionResult.Error;
+      }
+
+      const entry = context?.entry as ZappEntry;
+
+      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;
-      const tag = entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =
@@ -123,6 +249,23 @@ const prepareDefaultActions = (actionExecutor) => {
         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 {
@@ -146,6 +289,10 @@ export function withActionExecutor(Component) {
   prepareDefaultActions(_actionExecutor);
 
   return function ActionExecutorComponent(props: Props) {
+    const navigator = useNavigation();
+    const { rivers } = usePickFromState(["rivers"]);
+    const contentTypes = useContentTypes();
+
     const handlers = useMemo(() => {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
@@ -156,6 +303,44 @@ export function withActionExecutor(Component) {
       };
     }, []);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        "navigateToScreen",
+        async (action: ActionType, context?: Record<string, any>) => {
+          const screenType = action.options?.typeMapping;
+
+          if (!screenType) {
+            log_error("navigateToScreen: typeMapping option is missing");
+
+            return ActionResult.Error;
+          }
+
+          const screenId = contentTypes?.[screenType]?.screen_id || null;
+
+          if (!screenId) {
+            log_error(
+              `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+            );
+
+            return ActionResult.Error;
+          }
+
+          const river = rivers[screenId];
+
+          if (!river) {
+            log_error("navigateToScreen: can not resolve river");
+
+            return ActionResult.Error;
+          }
+
+          context?.callback?.({ success: false, error: null, abort: true });
+          navigator.replace(river);
+
+          return ActionResult.Success;
+        }
+      );
+    }, [navigator, rivers, contentTypes]);
+
     return (
       <ActionExecutorContext.Provider value={handlers}>
         <Component {...props} />

package/actionsExecutor/consts.ts

@@ -0,0 +1,4 @@
+export const TOGGLE_FLAG_MAX_ITEMS_REACHED_EVENT =
+  "action.localStorageToggleFlag.maxItemsReached";
+
+export const ACTION_EXECUTOR_EVENT_SOURCE = "ActionExecutor";

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";