@applicaster/zapp-react-native-utils 16.0.0-rc.32 → 16.0.0-rc.34

package/actionsExecutor/actions/navigateToScreen.ts

@@ -0,0 +1,123 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info, log_error } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the navigateToScreen action.
+ */
+export interface NavigateToScreenOptions {
+  /** The screen type to navigate to (from content types mapping) */
+  typeMapping: string;
+
+  /** Navigation action: push adds to history, replace replaces current screen */
+  navigationAction?: "push" | "replace";
+
+  /**
+   * Entry to navigate with. Can be:
+   * - "@{entry/}" to use the context entry
+   * - A ZappEntry object
+   * - undefined to navigate to screen without entry
+   */
+  entry?: "@{entry/}" | ZappEntry;
+}
+
+/**
+ * Creates a navigation action handler with the provided dependencies.
+ * This factory pattern allows the action to access navigation state at runtime.
+ *
+ * @param navigator - The app navigator for push/replace operations
+ * @param rivers - Map of screen IDs to river definitions
+ * @param contentTypes - Map of content type names to screen configurations
+ * @returns An action handler that performs screen navigation
+ */
+export function createNavigateToScreenAction(
+  navigator: QuickBrickAppNavigator,
+  rivers: Record<string, ZappRiver>,
+  contentTypes: ZappContentTypes
+): ActionHandler<NavigateToScreenOptions> {
+  return async function navigateToScreenAction(
+    action,
+    context?: ActionExecutionContext
+  ): Promise<ActionResult> {
+    const screenType = action.options?.typeMapping;
+
+    if (!screenType) {
+      log_error("navigateToScreen: typeMapping option is missing");
+
+      return ActionResult.Error;
+    }
+
+    const navigationAction = action.options?.navigationAction;
+    const entrySource = action.options?.entry;
+
+    const entry = entrySource
+      ? entrySource === "@{entry/}"
+        ? context?.entry
+        : entrySource
+      : null;
+
+    if (entry) {
+      if (typeof entry !== "object") {
+        log_error(
+          `navigateToScreen: entry option is not an object, entry: ${entry}`
+        );
+
+        return ActionResult.Error;
+      }
+
+      log_info(
+        `navigateToScreen: navigating to screen type: ${screenType} with entry id: ${entry.id}`
+      );
+
+      const overriddenEntry: ZappEntry = {
+        ...entry,
+        type: {
+          value: screenType,
+        },
+      };
+
+      if (navigationAction === "push") {
+        navigator.push(overriddenEntry);
+      } else {
+        // Use replaceTop for entries since replace() only accepts ZappRiver
+        navigator.replaceTop(overriddenEntry);
+      }
+
+      return ActionResult.Success;
+    }
+
+    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 });
+
+    if (navigationAction === "push") {
+      navigator.push(river);
+    } else {
+      navigator.replace(river);
+    }
+
+    return ActionResult.Success;
+  };
+}

package/actionsExecutor/actions/refreshComponent.ts

@@ -0,0 +1,94 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { loadPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "../../reactHooks/feed/useInflatedUrl";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Helper function to find the parent component in a component tree.
+ */
+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;
+}
+
+/**
+ * Refreshes a component's data by reloading its data source.
+ * Supports URL inflation with context variables.
+ */
+export const refreshComponentAction: ActionHandler = async (
+  _action,
+  context?: ActionExecutionContext
+): Promise<ActionResult> => {
+  const dispatch = appStore.getDispatch();
+
+  const parentComponent = findParentComponent(
+    context?.component?.id,
+    context?.screenData
+  );
+
+  const componentSource = context?.component?.data?.source;
+
+  const componentData = componentSource
+    ? context.component.data
+    : parentComponent?.data;
+
+  const source = componentData?.source;
+  const mapping = componentData?.mapping;
+
+  let dataSource = source;
+
+  if (source && mapping) {
+    dataSource =
+      getInflatedDataSourceUrl({
+        source,
+        contexts: {
+          entry: context?.screenEntry,
+          screen: context?.screenData,
+          search: getSearchContext(null, mapping),
+        },
+        mapping,
+      }) || source;
+  }
+
+  log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
+    source,
+    inflatedUrl: dataSource,
+    mapping,
+    entryContextId: context?.entryContext?.id,
+    entryId: context?.entry?.id,
+  });
+
+  // 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,
+      riverId: context?.screenData?.id,
+    })
+  );
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/screenSetVariable.ts

@@ -0,0 +1,35 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { screenSetVariable } from "../ScreenActions";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+
+/**
+ * Options for screenSetVariable action.
+ */
+export interface ScreenSetVariableOptions {
+  /** The key/namespace for storing the variable */
+  key: string;
+
+  /** Path to extract the value from entry */
+  selector?: string;
+}
+
+/**
+ * Sets a variable in screen state storage.
+ * The value is extracted from the entry using the selector option.
+ */
+export const screenSetVariableAction: ActionHandler<
+  ScreenSetVariableOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  const route = context?.screenRoute;
+  const screenStateStore = context?.screenStateStore;
+
+  await screenSetVariable(
+    route,
+    screenStateStore,
+    { entry: context?.entry, options: action.options },
+    action
+  );
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/screenToggleFlag.ts

@@ -0,0 +1,38 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { screenToggleFlag } from "../ScreenActions";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+
+/**
+ * Options for screenToggleFlag action.
+ */
+export interface ScreenToggleFlagOptions {
+  /** The key/namespace for storing the flag */
+  key: string;
+
+  /** Path to extract the tag from entry (e.g., "extensions.tag") */
+  selector?: string;
+
+  /** Maximum number of items that can be selected */
+  max_items?: number;
+}
+
+/**
+ * Toggles a flag in screen state storage (adds or removes an item from a collection).
+ * Useful for screen-level multi-select functionality.
+ */
+export const screenToggleFlagAction: ActionHandler<
+  ScreenToggleFlagOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  const screenRoute = context?.screenRoute;
+  const screenStateStore = context?.screenStateStore;
+
+  await screenToggleFlag(
+    screenRoute,
+    screenStateStore,
+    { entry: context?.entry, options: action.options },
+    action
+  );
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/sendCloudEvent.ts

@@ -0,0 +1,88 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { createCloudEvent, sendCloudEvent } from "../../cloudEventsUtils";
+import {
+  EntryResolver,
+  resolveObjectValues,
+} from "../../appUtils/contextKeysManager/contextResolver";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info, log_error } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the sendCloudEvent action.
+ */
+export interface SendCloudEventOptions {
+  /** The cloud event type (defaults to "com.applicaster.selector.action.v1") */
+  type?: string;
+
+  /** The event data payload */
+  data?: Record<string, any>;
+
+  /** The event subject (defaults to entry.id) */
+  subject?: string;
+
+  /** The URL endpoint to send the event to */
+  url: string;
+
+  /** Whether to inflate data with context variables */
+  inflateData?: boolean;
+}
+
+/**
+ * Sends a cloud event to a remote endpoint.
+ * Supports data inflation using context variables from entry and screen.
+ */
+export const sendCloudEventAction: ActionHandler<
+  SendCloudEventOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  try {
+    const options = action.options as SendCloudEventOptions;
+
+    const entry = context?.entry || {};
+    const entryResolver = new EntryResolver(entry as ZappEntry);
+    const screenData = context?.screenStateStore?.getState?.()?.data || {};
+    const screenResolver = new EntryResolver(screenData as ZappEntry);
+
+    const data =
+      options?.data && options.inflateData
+        ? await resolveObjectValues(options.data, {
+            entry: entryResolver,
+            screen: screenResolver,
+          })
+        : options?.data || entry;
+
+    const cloudEvent = await createCloudEvent({
+      type: options.type || "com.applicaster.selector.action.v1",
+      data,
+      subject: options.subject || String((entry as ZappEntry)?.id || ""),
+    });
+
+    log_info("handleAction: sendCloudEvent event", { cloudEvent });
+
+    const { error, code } = await sendCloudEvent(cloudEvent, options.url);
+
+    if (error) {
+      log_error("sendCloudEvent: error sending cloud event", { error });
+
+      return ActionResult.Error;
+    }
+
+    if (code && code >= 200 && code < 300 && !error) {
+      log_info("sendCloudEvent: cloud event sent successfully");
+
+      return ActionResult.Success;
+    }
+  } catch (error) {
+    log_error("sendCloudEvent: error sending cloud event", {
+      action,
+      error,
+    });
+  }
+
+  return ActionResult.Error;
+};

package/actionsExecutor/actions/sessionStorageRemove.ts

@@ -0,0 +1,19 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { batchRemoveFromStorage } from "../../zappFrameworkUtils/localStorageHelper";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { StorageRemoveOptions } from "./localStorageRemove";
+
+/**
+ * Removes values from session storage organized by namespaces.
+ */
+export const sessionStorageRemoveAction: ActionHandler<
+  StorageRemoveOptions
+> = async (action): Promise<ActionResult> => {
+  const namespaces = action.options.content;
+  await batchRemoveFromStorage(namespaces, sessionStorage);
+  // TODO: Add support for ownershipKey and ownershipNamespace
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/sessionStorageSet.ts

@@ -0,0 +1,20 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { batchSave } from "../../zappFrameworkUtils/localStorageHelper";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { StorageSetOptions } from "./localStorageSet";
+
+/**
+ * Saves values to session storage organized by namespaces.
+ * The values persist only for the current app session.
+ */
+export const sessionStorageSetAction: ActionHandler<StorageSetOptions> = async (
+  action
+): Promise<ActionResult> => {
+  const namespaces = (action.options as StorageSetOptions).content;
+  await batchSave(namespaces, sessionStorage);
+  // TODO: Add support for ownershipKey and ownershipNamespace
+
+  return ActionResult.Success;
+};

package/actionsExecutor/actions/sessionStorageToggleFlag.ts

@@ -0,0 +1,15 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { sessionStorageToggleFlag } from "../StorageActions";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler, ActionExecutionContext } from "../types";
+import { StorageToggleFlagOptions } from "./localStorageToggleFlag";
+
+/**
+ * Toggles a flag in session storage (adds or removes an item from a collection).
+ * Values persist only for the current app session.
+ */
+export const sessionStorageToggleFlagAction: ActionHandler<
+  StorageToggleFlagOptions
+> = async (action, context?: ActionExecutionContext): Promise<ActionResult> => {
+  return await sessionStorageToggleFlag(context, action);
+};

package/actionsExecutor/actions/switchLayout.ts

@@ -0,0 +1,40 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import * as QuickBrickManager from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { QUICK_BRICK_EVENTS } from "@applicaster/zapp-react-native-bridge/QuickBrick";
+import { ACTIVE_LAYOUT_ID_STORAGE_KEY } from "@applicaster/quick-brick-core/App/remoteContextReloader/consts";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the switchLayout action.
+ */
+export interface SwitchLayoutOptions {
+  /** The ID of the layout to switch to */
+  layoutId: string;
+}
+
+/**
+ * Switches the active layout and triggers an app reload.
+ * Saves the new layout ID to local storage before reloading.
+ */
+export const switchLayoutAction: ActionHandler<SwitchLayoutOptions> = async (
+  action
+): Promise<ActionResult> => {
+  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;
+};

package/actionsExecutor/types.ts

@@ -0,0 +1,57 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { ActionResult } from "./ActionExecutor";
+import { useScreenStateStore } from "../reactHooks/navigation/useScreenStateStore";
+
+/**
+ * Base context object passed to action handlers during execution.
+ * Contains references to the current entry, screen, and other execution state.
+ */
+export interface ActionExecutionContext {
+  /** The entry associated with this action (e.g., the item that was tapped) */
+  entry?: ZappEntry;
+
+  /** The current screen/river data */
+  screenData?: ZappRiver;
+
+  /** The entry that defines the screen (if screen was opened from an entry) */
+  screenEntry?: ZappEntry;
+
+  /** The UI component that triggered the action */
+  component?: ZappUIComponent;
+
+  /** The route identifier for the current screen */
+  screenRoute?: string;
+
+  /** The screen state store for managing screen-level state (Zustand store) */
+  screenStateStore?: ReturnType<typeof useScreenStateStore>;
+
+  /** Context entry for additional data */
+  entryContext?: ZappEntry;
+
+  /** Callback function for action completion */
+  callback?: (result: { success: boolean; error: any; abort: boolean }) => void;
+
+  screenState: Record<any, any>;
+}
+
+/**
+ * Type for action handler functions.
+ * Handlers receive the action (which may have typed options) and execution context.
+ *
+ * @template _TOptions - Optional type hint for the action's options object (for documentation/intellisense)
+ * @param action - The action to execute
+ * @param context - The execution context
+ * @returns A promise that resolves to the action result
+ */
+export type ActionHandler<_TOptions = any> = (
+  action: ActionType,
+  context?: ActionExecutionContext
+) => Promise<ActionResult>;
+
+/**
+ * Factory function that creates an action handler.
+ * Used for actions that need to capture dependencies at registration time.
+ */
+export type ActionHandlerFactory<_TOptions = any> = (
+  ...dependencies: any[]
+) => ActionHandler<_TOptions>;

package/appUtils/contextKeysManager/__tests__/getKey/failure.test.ts

@@ -46,7 +46,7 @@ describe("Context Keys Manager - getKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key: invalidKey },
     });
 

package/appUtils/contextKeysManager/__tests__/removeKey/failure.test.ts

@@ -47,7 +47,7 @@ describe("Context Keys Manager - removeKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key },
     });
 

package/appUtils/contextKeysManager/__tests__/setKey/failure/invalidKey.test.ts

@@ -48,7 +48,7 @@ describe("Context Keys Manager - setKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key },
     });
 
@@ -105,7 +105,7 @@ describe("Context Keys Manager - setKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key },
     });
 
@@ -162,7 +162,7 @@ describe("Context Keys Manager - setKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key },
     });
 
@@ -217,7 +217,7 @@ describe("Context Keys Manager - setKey", () => {
 
     expect(mockedLogger.warn).toHaveBeenCalledWith({
       message:
-        "Provided key is not valid - expecing an object with namespace and key properties",
+        "Provided key is not valid - expecting an object with namespace and key properties",
       data: { key },
     });
 

package/appUtils/contextKeysManager/index.ts

@@ -109,7 +109,7 @@ export class ContextKeysManager {
     if (!keyIsValid(parsedKey)) {
       this._logger.warn({
         message:
-          "Provided key is not valid - expecing an object with namespace and key properties",
+          "Provided key is not valid - expecting an object with namespace and key properties",
         data: { key },
       });
 

package/manifestUtils/keys.js

@@ -631,6 +631,14 @@ const MOBILE_ACTION_BUTTON_FIELDS = [
     type: ZAPPIFEST_FIELDS.number_input,
     suffix: "margin left",
   },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
 ];
 
 const TV_MENU_LABEL_FIELDS = [

package/manifestUtils/mobileAction/button/index.js

@@ -129,6 +129,22 @@ function mobileActionButton({ label, description, defaults, isFirstButton }) {
       conditions.push(createConditionalField(labelEnabledKey, true));
     }
 
+    const assetAlignmentKey = keyPrefixGenerator("asset_alignment");
+
+    // horizontal_gutter fields depends on [asset_alignment: left or asset_alignment: right]
+    if (isKeyHasSuffix("horizontal_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["left", "right"])
+      );
+    }
+
+    // vertical_gutter fields depends on [asset_alignment: above or asset_alignment: below]
+    if (isKeyHasSuffix("vertical_gutter", key)) {
+      conditions.push(
+        createConditionalField(assetAlignmentKey, ["above", "below"])
+      );
+    }
+
     return withConditional(conditions)(field);
   });
 

package/manifestUtils/mobileAction/container/index.js

@@ -49,7 +49,9 @@ function mobileActionButtonsContainer({ label, description, defaults }) {
 
     // over_image_position depends on [positionKey: over_image]
     if (isKeyHasSuffix("over_image_position", key)) {
-      conditions.push(createConditionalField(positionKey, "over_image"));
+      conditions.push(
+        createConditionalField(positionKey, defaults.position[0])
+      );
     }
 
     // horizontal_gutter depends on [stackingKey: horizontal]

package/manifestUtils/mobileAction/groups/defaults.js

@@ -33,7 +33,7 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   assetHeight: 24,
   assetWidth: 24,
   assetMarginTop: 0,
-  assetMarginRight: 6,
+  assetMarginRight: 0,
   assetMarginBottom: 0,
   assetMarginLeft: 0,
   labelEnabled: true,
@@ -50,6 +50,8 @@ const DEFAULT_MOBILE_ACTION_BUTTON_SHARED_DEFAULTS = {
   marginRight: 0,
   marginBottom: 0,
   marginLeft: 0,
+  horizontalGutter: 8,
+  verticalGutter: 8,
 };
 
 const DEFAULT_MOBILE_ACTION_BUTTON_PRESETS = {