@applicaster/zapp-react-native-utils 16.0.0-alpha.1263110541 → 16.0.0-alpha.1334507601

package/actionsExecutor/actions/showAlert.ts

@@ -0,0 +1,51 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { showAlertDialog } from "../../alertUtils";
+import { ActionResult } from "../ActionExecutor";
+import { ActionHandler } from "../types";
+import { createLogger } from "../../logger";
+
+const { log_info } = createLogger({
+  subsystem: "ActionExecutorContext",
+  category: "General",
+});
+
+/**
+ * Options for the showAlert action.
+ */
+export interface ShowAlertOptions {
+  /** Dialog title (required) */
+  title: string;
+
+  /** Dialog message */
+  message?: string;
+
+  /** Dismiss button text. Defaults to "OK" */
+  okButtonText?: string;
+}
+
+/**
+ * Tells the user something and waits for them to acknowledge it.
+ *
+ * One button, because there is nothing to decide. Use `confirmDialog` when the
+ * user is choosing between going on and backing out; a `confirmDialog` without
+ * a cancel label still renders two buttons, the second one blank.
+ *
+ * Always resolves to Success: dismissing a notice is not a cancellation, so the
+ * rest of the chain runs.
+ */
+export const showAlertAction: ActionHandler<ShowAlertOptions> = async (
+  action
+): Promise<ActionResult> => {
+  log_info("handleAction: showAlert event");
+
+  const options = action.options as ShowAlertOptions;
+
+  return new Promise<ActionResult>((resolve) => {
+    showAlertDialog({
+      title: options?.title,
+      message: options?.message,
+      okButtonText: options?.okButtonText || "OK",
+      completion: () => resolve(ActionResult.Success),
+    });
+  });
+};

package/actionsExecutor/actions/showToast.ts

@@ -5,7 +5,7 @@ import { postEvent } from "../../reactHooks/useSubscriberFor";
 
 export const CONFIRMATION_TOAST_SOURCE = "confirmation";
 
-export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
+export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 5000;
 
 /**
  * Shows a mobile confirmation toast with Theme defaults from
@@ -13,7 +13,7 @@ export const CONFIRMATION_TOAST_DEFAULT_TIMEOUT = 1000;
  *
  * This action is confirmation-only by design: it always stamps
  * `source: "confirmation"` (so Theme confirmation styles apply) and defaults
- * `timeout` to 1000 ms. Non-confirmation toasts (e.g. Offline Experience)
+ * `timeout` to 5000 ms. Non-confirmation toasts (e.g. Offline Experience)
  * must post on the shared `"showToast"` event bus directly and omit `source`.
  * Callers may override individual style fields; Theme supplies the rest.
  *

package/actionsExecutor/consts.ts

@@ -9,6 +9,7 @@ export const ACTION_TYPES = {
   PRESENT_SUB_MENU: "presentSubMenu",
   SEND_CLOUD_EVENT: "sendCloudEvent",
   NAVIGATE_TO_SCREEN: "navigateToScreen",
+  PRESENT_SCREEN: "presentScreen",
   GO_BACK: "goBack",
   GO_HOME: "goHome",
   SHOW_TOAST: "showToast",
@@ -22,6 +23,7 @@ export const ACTION_TYPES = {
   SWITCH_LAYOUT: "switchLayout",
   APP_RESTART: "appRestart",
   CONFIRM_DIALOG: "confirmDialog",
+  SHOW_ALERT: "showAlert",
   SCREEN_SET_VARIABLE: "screenSetVariable",
   SCREEN_TOGGLE_FLAG: "screenToggleFlag",
 } as const;

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -176,6 +176,27 @@ describe("getAllSpecificStyles", () => {
       });
     });
 
+    it("should normalize Studio focus alias onto focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focus_background_color: "#FF3B30",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles.focused).toEqual({
+        backgroundColor: "#FF3B30",
+      });
+
+      expect(outStyles.focus).toBeUndefined();
+    });
+
     it("should handle selected state", () => {
       const outStyles = {};
 

package/configurationUtils/__tests__/modalBlocksParser.test.ts

@@ -1,4 +1,7 @@
-import { parseModalBlocksConfiguration } from "../modalBlocksParser";
+import {
+  getEmptyModalBlocksStructure,
+  parseModalBlocksConfiguration,
+} from "../modalBlocksParser";
 
 // Mock the platform selection logic so it's consistent
 jest.mock("../../reactUtils", () => ({
@@ -104,4 +107,102 @@ describe("parseModalBlocksConfiguration", () => {
     expect(result.button.title).toEqual({ default: {} });
     expect(result.action.leadingIcon).toEqual({ default: {} });
   });
+
+  it("should map Studio item.background.focus.* onto focused state", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.background.default.background_color": "transparent",
+        "item.background.focus.background_color": "#FF3B30",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.background.default).toEqual(
+      expect.objectContaining({
+        backgroundColor: "transparent",
+      })
+    );
+
+    expect(result.item.background.focused).toEqual(
+      expect.objectContaining({
+        backgroundColor: "#FF3B30",
+      })
+    );
+  });
+
+  it("should accept Studio text_label1 keys without underscore before digit", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "item.text_label1.font_color": "#00FF00",
+        "item.text_label1.font_size": 28,
+        "item.text_label2.font_color": "#00FFFF",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.item.textLabel1.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FF00",
+        fontSize: 28,
+      })
+    );
+
+    expect(result.item.textLabel2.default).toEqual(
+      expect.objectContaining({
+        fontColor: "#00FFFF",
+      })
+    );
+  });
+
+  it("should ignore keys that do not map to a known block sub-component", () => {
+    const result = parseModalBlocksConfiguration(
+      {
+        "button.create_new_playlist_asset":
+          "https://placehold.co/24x24/FF00FF/FFFFFF/png?text=CN",
+        "item.checkbox_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=CB",
+        "reorder_playlist_item.reorder_handle_asset":
+          "https://placehold.co/24x24/FF3B30/FFFFFF/png?text=RH",
+      },
+      "playlist-experience"
+    );
+
+    expect(result.button.leadingIcon.default?.asset).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+});
+
+describe("getEmptyModalBlocksStructure", () => {
+  it("should return every block with empty containers and no state entries", () => {
+    const result = getEmptyModalBlocksStructure();
+
+    expect(result.header.container).toEqual({});
+    expect(result.item.background).toEqual({});
+    expect(result.button.background).toEqual({});
+    expect(result.action.background).toEqual({});
+
+    expect(result.button.leadingIcon.default).toBeUndefined();
+    expect(result.item.checkbox.default).toBeUndefined();
+    expect(result.item.actionButtons.default).toBeUndefined();
+  });
+
+  it("should return a fresh object on every call", () => {
+    const first = getEmptyModalBlocksStructure();
+    const second = getEmptyModalBlocksStructure();
+
+    expect(first).not.toBe(second);
+    expect(first.header).not.toBe(second.header);
+    expect(first).toEqual(second);
+  });
+
+  it("should be what the parser returns when config or componentName is missing", () => {
+    expect(
+      parseModalBlocksConfiguration(undefined as any, "queue_action")
+    ).toEqual(getEmptyModalBlocksStructure());
+
+    expect(parseModalBlocksConfiguration({ foo: "bar" }, "")).toEqual(
+      getEmptyModalBlocksStructure()
+    );
+  });
 });

package/configurationUtils/manifestKeyParser.ts

@@ -11,11 +11,17 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order, focused_selected should be first
+// Do not change the order: focused_selected must be first, and "focus" must
+// come *after* "focused". Matching uses startsWith(state + "_"), so putting
+// "focus" first would steal focused_* / focused_selected_* keys. Adding
+// "focus" here affects every getAllSpecificStyles consumer (not only modals);
+// property names that themselves start with focus_ (e.g. focus_font_color as
+// a non-state style) would also be classified as the focus state.
 const states = [
   "focused_selected",
   "pressed",
   "focused",
+  "focus",
   "selected",
   "default",
 ];
@@ -112,6 +118,11 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
+    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
+    if (state === "focus") {
+      state = "focused";
+    }
+
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);

package/configurationUtils/modalBlocksParser.ts

@@ -25,6 +25,10 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    /** Studio item.checkbox_asset / item.checked_checkbox_asset */
+    checkbox?: Record<string, any>;
+    /** Studio reorder/remove icons for Edit Order rows */
+    actionButtons?: Record<string, any>;
   };
   nowPlayingItem?: {
     background: Record<string, any>;
@@ -37,6 +41,8 @@ export type ModalBlocksConfig = {
     buttonsContainer: Record<string, any>;
     button1: Record<string, any>;
     button2: Record<string, any>;
+    checkbox?: Record<string, any>;
+    actionButtons?: Record<string, any>;
   };
   button: {
     background: Record<string, any>;
@@ -46,10 +52,7 @@ export type ModalBlocksConfig = {
   };
 };
 
-export const parseModalBlocksConfiguration = (
-  configuration: Record<string, any>,
-  componentName: string
-): ModalBlocksConfig => {
+export const getEmptyModalBlocksStructure = (): ModalBlocksConfig => {
   const result: ModalBlocksConfig = {
     header: {
       container: {},
@@ -75,6 +78,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     nowPlayingItem: {
       background: {},
@@ -87,6 +92,8 @@ export const parseModalBlocksConfiguration = (
       buttonsContainer: {},
       button1: {},
       button2: {},
+      checkbox: {},
+      actionButtons: {},
     },
     button: {
       background: {},
@@ -96,6 +103,15 @@ export const parseModalBlocksConfiguration = (
     },
   };
 
+  return result;
+};
+
+export const parseModalBlocksConfiguration = (
+  configuration: Record<string, any>,
+  componentName: string
+): ModalBlocksConfig => {
+  const result = getEmptyModalBlocksStructure();
+
   if (!configuration || !componentName) {
     return result;
   }
@@ -152,8 +168,12 @@ export const parseModalBlocksConfiguration = (
     "now_playing_container",
     "now_playing_asset",
     "now_playing_label",
+    // Underscored form (QB convention) and Studio/manifest-generator form
+    // without the underscore before the digit (text_label1).
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",
@@ -167,6 +187,8 @@ export const parseModalBlocksConfiguration = (
     "now_playing_label",
     "text_label_1",
     "text_label_2",
+    "text_label1",
+    "text_label2",
     "buttons_container",
     "button_1",
     "button_2",

package/entryActions/__tests__/buildEntryActions.test.ts

@@ -60,7 +60,7 @@ describe("buildEntryActions - alias & label resolution", () => {
     expect(state.label).toBe("Label Property Action");
   });
 
-  it("resolves entry action with known backend button alias (e.g. add_all_to_queue)", () => {
+  it("humanizes an un-overridden alias and falls back to the placeholder asset", () => {
     const entry = {
       id: "entry-3",
       extensions: {
@@ -71,11 +71,7 @@ describe("buildEntryActions - alias & label resolution", () => {
             dismiss_on_action: true,
           },
           {
-            button: { alias: "add_to_playlist" },
-            actions: [{ type: "test" }],
-          },
-          {
-            button: { alias: "delete_collection" },
+            button: { alias: "custom_unknown_action" },
             actions: [{ type: "test" }],
           },
         ],
@@ -84,42 +80,86 @@ describe("buildEntryActions - alias & label resolution", () => {
 
     const actions = resolveEntryActions(entry as any);
 
-    expect(actions).toHaveLength(3);
+    expect(actions).toHaveLength(2);
 
+    // No built-in alias vocabulary any more: underscores become spaces and
+    // only the first letter is capitalized, so "queue" stays lowercase.
     expect(actions[0].action.initialEntryState(entry as any)).toMatchObject({
       state: 0,
-      label: "Add all to Queue",
+      label: "Add all to queue",
     });
 
     expect(actions[1].action.initialEntryState(entry as any)).toMatchObject({
       state: 0,
-      label: "Add to Playlist",
+      label: "Custom unknown action",
     });
 
-    expect(actions[2].action.initialEntryState(entry as any)).toMatchObject({
-      state: 0,
-      label: "Delete collection",
-    });
+    // The asset has no such fallback: without an override it is the red-box
+    // placeholder, so a missing Studio icon is visible rather than absent.
+    for (const action of actions) {
+      expect(action.action.initialEntryState(entry as any)).toMatchObject({
+        asset: expect.stringMatching(/^data:image\/png;base64,/),
+      });
+    }
   });
 
-  it("formats unknown alias nicely as fallback", () => {
+  it("prefers aliasPresentation overrides over the humanized fallbacks", () => {
+    const deps = {
+      actionExecutor: { handleActions: jest.fn() } as any,
+      actionContext: {},
+      aliasPresentation: {
+        labels: { add_all_to_queue: "Add all to Queue" },
+        assets: { add_all_to_queue: "http://example.com/queue.png" },
+      },
+    };
+
     const entry = {
       id: "entry-4",
       extensions: {
         entry_action: [
           {
-            button: { alias: "custom_unknown_action" },
+            button: { alias: "add_all_to_queue" },
+            actions: [{ type: "test" }],
+          },
+          {
+            button: { alias: "not_overridden" },
             actions: [{ type: "test" }],
           },
         ],
       },
     };
 
-    const actions = resolveEntryActions(entry as any);
+    const actions = buildEntryActions(entry as any, deps);
 
-    expect(actions).toHaveLength(1);
+    expect(actions[0].action.initialEntryState(entry as any)).toMatchObject({
+      label: "Add all to Queue",
+      asset: "http://example.com/queue.png",
+    });
+
+    // Overrides are per-alias, so an alias absent from the map still humanizes.
+    expect(actions[1].action.initialEntryState(entry as any)).toMatchObject({
+      label: "Not overridden",
+    });
+  });
+
+  it("returns no asset when the button has neither iconURL nor alias", () => {
+    const entry = {
+      id: "entry-5",
+      extensions: {
+        entry_action: [
+          {
+            button: { label: "Plain Label" },
+            actions: [{ type: "test" }],
+          },
+        ],
+      },
+    };
+
+    const actions = resolveEntryActions(entry as any);
     const state = actions[0].action.initialEntryState(entry as any);
-    expect(state.label).toBe("Custom unknown action");
+
+    expect(state.label).toBe("Plain Label");
+    expect(state.asset).toBeUndefined();
   });
 
   it("uses actionExecutor.getActionState for plugin-provided label and asset", () => {
@@ -154,3 +194,42 @@ describe("buildEntryActions - alias & label resolution", () => {
     });
   });
 });
+
+describe("buildEntryActions - invokeAction execution context", () => {
+  it("forwards the List component from invoke options into handleActions", async () => {
+    const handleActions = jest.fn();
+
+    const component = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const deps = {
+      actionExecutor: { handleActions } as any,
+      actionContext: { screenData: { id: "playlist-screen" } },
+    };
+
+    const entry = {
+      id: "entry-1",
+      extensions: {
+        entry_action: [
+          {
+            button: { title: "Edit Name" },
+            actions: [{ type: "refreshComponent" }],
+          },
+        ],
+      },
+    };
+
+    const [action] = buildEntryActions(entry as any, deps);
+
+    await action.action.invokeAction(entry as any, { component });
+
+    expect(handleActions).toHaveBeenCalledWith([{ type: "refreshComponent" }], {
+      entry,
+      entryContext: entry,
+      screenData: { id: "playlist-screen" },
+      component,
+    });
+  });
+});

package/entryActions/aliasPresentation.ts

@@ -1,52 +1,29 @@
 /**
- * Presentation defaults for backend action aliases.
+ * Presentation fallbacks for backend action aliases.
  *
  * Entries may declare an action by `alias` alone, without a label or an icon.
- * These maps are the last-resort labels/icons for the aliases we know about; an
- * unknown alias falls back to a humanized version of the alias itself.
+ * There is no built-in alias vocabulary: a label falls back to a humanized
+ * version of the alias itself, and an icon falls back to an inline placeholder
+ * that is deliberately conspicuous, so a missing asset reads as unconfigured
+ * rather than as a deliberate blank.
  *
- * They are defaults, not a framework guarantee: an app that speaks a different
- * alias vocabulary, needs other languages, or does not want to depend on these
- * icon hosts passes its own through `EntryActionDeps.aliasPresentation`.
+ * Both are last resorts, not a framework guarantee: an app that speaks its own
+ * alias vocabulary or needs other languages passes labels and assets through
+ * `EntryActionDeps.aliasPresentation`, which is consulted per alias.
  */
 
 import { EntryAction } from "./types";
 
-const ADD_TO_PLAYLIST_ICON =
-  "https://assets-secure.applicaster.com/zapp/assets/app_family/1710/906728572617/playlist_add_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.png";
-
-const REMOVE_ICON =
-  "https://assets-secure.applicaster.com/zapp/assets/app_family/1710/372097240191/remove_24dp_EA3323_FILL0_wght400_GRAD0_opsz24.png";
-
-const EDIT_ICON =
-  "https://upload.wikimedia.org/wikipedia/commons/b/b6/Edit-icon.png";
-
-/** Known backend action alias labels. */
-export const ALIAS_LABELS: Record<string, string> = {
-  add_to_playlist: "Add to Playlist",
-  add_to_queue: "Add to Queue",
-  add_all_to_queue: "Add all to Queue",
-  play_all: "Play All",
-  remove_item: "Remove item",
-  delete_collection: "Delete collection",
-  create_collection: "Create collection",
-  edit: "Edit",
-  edit_name: "Edit Name & Details",
-};
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-/** Known backend action alias image assets. */
-export const ALIAS_ASSETS: Record<string, string> = {
-  add_to_playlist: ADD_TO_PLAYLIST_ICON,
-  add_to_queue: ADD_TO_PLAYLIST_ICON,
-  add_all_to_queue: ADD_TO_PLAYLIST_ICON,
-  play_all: ADD_TO_PLAYLIST_ICON,
-  remove_item: REMOVE_ICON,
-  delete_collection: REMOVE_ICON,
-  edit: EDIT_ICON,
-  edit_name: EDIT_ICON,
-};
+const logger = createLogger({
+  category: "zapp-react-native-utils:aliasPresentation",
+});
+
+const PLACEHOLDER_RED_BOX =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAJ0lEQVR4nO3NMQEAAAjDsIF/z2ACvlRAU5NMHuvPOQAAAAAAAMBdC/07Ai5sNw+CAAAAAElFTkSuQmCC";
 
-/** Per-app overrides for the maps above. */
+/** Per-app labels and icons, keyed by alias, that outrank the fallbacks. */
 export type AliasPresentation = {
   labels?: Record<string, string>;
   assets?: Record<string, string>;
@@ -56,7 +33,7 @@ function formatAliasLabel(
   alias: string,
   overrides?: AliasPresentation
 ): string {
-  const label = overrides?.labels?.[alias] ?? ALIAS_LABELS[alias];
+  const label = overrides?.labels?.[alias];
 
   if (label) {
     return label;
@@ -107,7 +84,7 @@ export function resolveButtonLabel(
   return "";
 }
 
-/** Icon to show for an entry action: explicit iconURL, else the alias default. */
+/** Icon to show for an entry action: explicit iconURL, matching alias asset or fallback to red box. */
 export function resolveButtonAsset(
   button: EntryAction["button"],
   overrides?: AliasPresentation
@@ -120,5 +97,12 @@ export function resolveButtonAsset(
     return undefined;
   }
 
-  return overrides?.assets?.[button.alias] ?? ALIAS_ASSETS[button.alias];
+  if (!overrides?.assets?.[button.alias]) {
+    logger.log_warning(
+      `Entry action alias '${button.alias}' was not resolved by any plugin feedDecorator or app override. Falling back to placeholder red box.`,
+      { data: { button } }
+    );
+  }
+
+  return overrides?.assets?.[button.alias] ?? PLACEHOLDER_RED_BOX;
 }

package/entryActions/buildEntryActions.ts

@@ -105,6 +105,7 @@ function createEntryAction(
             entry: invokedEntry,
             entryContext: invokedEntry,
             ...deps.actionContext,
+            ...(options.component ? { component: options.component } : {}),
           } as ActionExecutionContext);
         } catch (error) {
           log_error(

package/entryActions/index.ts

@@ -1,8 +1,6 @@
 export { buildEntryActions, isEntryAction } from "./buildEntryActions";
 
 export {
-  ALIAS_ASSETS,
-  ALIAS_LABELS,
   resolveButtonAsset,
   resolveButtonLabel,
   resolveExplicitLabel,

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -12,6 +12,12 @@ const generalContent = () => ({
         label: "Navigation Bar",
         placeholder: "Choose Nav Bar",
       },
+      {
+        key: "hide_menu",
+        type: "switch",
+        label: "Hide Menu",
+        initial_value: false,
+      },
     ],
   },
   styles: {