@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1453660071 → 16.0.0-alpha.1454930193

package/Components/GeneralContentScreen/hookAdapter/skipExpression.ts

@@ -0,0 +1,252 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { log_error, log_info } from "./logger";
+
+/**
+ * Boolean expressions over storage keys, used by the General Content Screen
+ * hook adapter to decide whether a hook should be skipped.
+ *
+ * The `skip_hook_storage_key` rule normally holds a comma-separated list of
+ * keys, meaning "skip when any of these exists". That covers presence only, so
+ * a condition such as "the user is logged in but has not picked a profile yet"
+ * cannot be expressed. To keep the manifest field untouched, an expression may
+ * be packed into the very same string as JSON: anything starting with `{` is
+ * parsed as an expression, anything else keeps the legacy behaviour.
+ *
+ * The expression evaluates to the SKIP condition — true means "do not present
+ * the hook" — matching the name of the rule it is configured in.
+ *
+ * Keys are written as `namespace.key` and resolved exactly like the legacy
+ * format: everything before the LAST dot is the namespace, so
+ * `com.applicaster.feature.someKey` reads `someKey` from `com.applicaster.feature`.
+ * A key with no dot falls back to the default namespace.
+ *
+ * Operators:
+ *
+ *   "ns.key"                              shorthand for { "exists": "ns.key" }
+ *   { "exists":  "ns.key" }               the key holds a truthy value
+ *   { "missing": "ns.key" }               the key holds no value
+ *   { "equals": { "key": "ns.key", "value": "kids" } }
+ *   { "all": [ …operands ] }              AND, short-circuits on the first false
+ *   { "any": [ …operands ] }              OR, short-circuits on the first true
+ *   { "not": operand }                    negation
+ *
+ * @example Show the profile selector to a logged-in user who has no profile yet
+ * ```json
+ * {
+ *   "any": [
+ *     { "missing": "quick-brick-login-flow.access_token" },
+ *     { "exists": "user_account.profile" }
+ *   ]
+ * }
+ * ```
+ * As it is stored in the `skip_hook_storage_key` string field:
+ * ```json
+ * "skip_hook_storage_key": "{\"any\":[{\"missing\":\"quick-brick-login-flow.access_token\"},{\"exists\":\"user_account.profile\"}]}"
+ * ```
+ *
+ * @example Skip an onboarding hook once it has been seen on a subscribed device
+ * ```json
+ * {
+ *   "all": [
+ *     "onboarding.completed",
+ *     { "equals": { "key": "user_account.plan", "value": "premium" } }
+ *   ]
+ * }
+ * ```
+ *
+ * Every failure mode — malformed JSON, an unknown operator, an operand of the
+ * wrong type, a storage read that throws — evaluates to false, so a broken
+ * configuration presents the hook rather than silently hiding a screen.
+ */
+export type SkipExpression =
+  | string
+  | { exists: string }
+  | { missing: string }
+  | { equals: { key: string; value: string } }
+  | { all: SkipExpression[] }
+  | { any: SkipExpression[] }
+  | { not: SkipExpression };
+
+/** Reads a single storage key. Injected so evaluation stays storage-agnostic. */
+export type ReadKey = (key: string, namespace?: string) => Promise<unknown>;
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const hasOperator = (node: Record<string, unknown>, operator: string) =>
+  Object.prototype.hasOwnProperty.call(node, operator);
+
+/**
+ * Whether a `skip_hook_storage_key` value is meant as an expression at all.
+ *
+ * Deliberately a shape check rather than a successful parse: a value that opens
+ * with `{` was written as an expression even when its JSON is broken, and must
+ * never fall back to being read as a list of storage keys.
+ */
+export const looksLikeSkipExpression = (input: unknown): boolean =>
+  isPlainObject(input) ||
+  (typeof input === "string" && input.trim().startsWith("{"));
+
+/**
+ * Reads a `skip_hook_storage_key` value as an expression, or returns null when
+ * it is not one — an empty value, a legacy comma-separated key list, or an
+ * expression whose JSON is malformed.
+ */
+export const parseSkipExpression = (input: unknown): SkipExpression | null => {
+  if (isPlainObject(input)) {
+    return input as SkipExpression;
+  }
+
+  if (!looksLikeSkipExpression(input)) {
+    return null;
+  }
+
+  const trimmed = (input as string).trim();
+
+  try {
+    const parsed = JSON.parse(trimmed);
+
+    if (!isPlainObject(parsed)) {
+      log_error(
+        `parseSkipExpression: Expression must be an object, got: ${trimmed}`
+      );
+
+      return null;
+    }
+
+    return parsed as SkipExpression;
+  } catch (error) {
+    log_error(
+      `parseSkipExpression: Malformed expression: ${trimmed}. Error: ${error.message}`,
+      { error }
+    );
+
+    return null;
+  }
+};
+
+const keyIsTruthy = async (key: string, readKey: ReadKey): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(key);
+
+  return Boolean(await readKey(name, namespace));
+};
+
+const evaluateEquals = async (
+  operand: { key: string; value: string },
+  readKey: ReadKey
+): Promise<boolean> => {
+  const { namespace, key: name } = getNamespaceAndKey(operand.key);
+  const value = await readKey(name, namespace);
+
+  return value == null ? false : String(value) === String(operand.value);
+};
+
+const evaluateNode = async (
+  node: SkipExpression,
+  readKey: ReadKey
+): Promise<boolean> => {
+  try {
+    if (typeof node === "string") {
+      return await keyIsTruthy(node, readKey);
+    }
+
+    if (!isPlainObject(node)) {
+      log_error(
+        `evaluateSkipExpression: Not an operator: ${JSON.stringify(node)}`
+      );
+
+      return false;
+    }
+
+    // The node came from configuration JSON, so every operand is read back as
+    // unknown and type-checked here rather than trusted from the union.
+    const operator = node as Record<string, unknown>;
+
+    if (
+      hasOperator(operator, "exists") &&
+      typeof operator.exists === "string"
+    ) {
+      return await keyIsTruthy(operator.exists, readKey);
+    }
+
+    if (
+      hasOperator(operator, "missing") &&
+      typeof operator.missing === "string"
+    ) {
+      return !(await keyIsTruthy(operator.missing, readKey));
+    }
+
+    if (hasOperator(operator, "equals") && isPlainObject(operator.equals)) {
+      return await evaluateEquals(
+        operator.equals as { key: string; value: string },
+        readKey
+      );
+    }
+
+    if (hasOperator(operator, "all") && Array.isArray(operator.all)) {
+      for (const operand of operator.all) {
+        if (!(await evaluateNode(operand, readKey))) {
+          return false;
+        }
+      }
+
+      // An empty operand list carries no condition, so it stays false rather
+      // than skipping the hook on the vacuous truth of an empty AND.
+      return operator.all.length > 0;
+    }
+
+    if (hasOperator(operator, "any") && Array.isArray(operator.any)) {
+      for (const operand of operator.any) {
+        if (await evaluateNode(operand, readKey)) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+
+    if (hasOperator(operator, "not")) {
+      return !(await evaluateNode(operator.not as SkipExpression, readKey));
+    }
+
+    log_error(
+      `evaluateSkipExpression: Unknown or malformed operator: ${JSON.stringify(
+        node
+      )}`
+    );
+
+    return false;
+  } catch (error) {
+    log_error(
+      `evaluateSkipExpression: Error: ${error.message} evaluating: ${JSON.stringify(
+        node
+      )}`,
+      { error }
+    );
+
+    return false;
+  }
+};
+
+/**
+ * Evaluates a parsed expression to the skip decision. A null expression — the
+ * field held no expression — is not a condition, so nothing is skipped.
+ */
+export const evaluateSkipExpression = async (
+  expression: SkipExpression | null,
+  readKey: ReadKey
+): Promise<boolean> => {
+  if (!expression) {
+    return false;
+  }
+
+  const shouldSkip = await evaluateNode(expression, readKey);
+
+  log_info(
+    `evaluateSkipExpression: Expression evaluated to ${shouldSkip}, ${
+      shouldSkip ? "skipping hook" : "proceeding with hook"
+    }`
+  );
+
+  return shouldSkip;
+};

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -1,6 +1,11 @@
 import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import {
+  looksLikeSkipExpression,
+  parseSkipExpression,
+  evaluateSkipExpression,
+} from "./skipExpression";
 import { log_error, log_info } from "./logger";
 
 type ParseKey = { key: string; namespace?: string };
@@ -23,6 +28,12 @@ export const getKeyToSkipHook = async (key: string, namespace?: string) => {
   return await localStorage.getItem(key, namespace);
 };
 
+/**
+ * Decides whether the hook should be skipped, from the `skip_hook_storage_key`
+ * rule. The value is either a comma-separated key list — skip when ANY of them
+ * exists — or, packed into the same string, a JSON boolean expression over
+ * storage keys. See `skipExpression.ts` for the expression format.
+ */
 export const shouldSkipHook = async (
   skipHookIfKeysExist?: string
 ): Promise<boolean> => {
@@ -32,6 +43,13 @@ export const shouldSkipHook = async (
     return false;
   }
 
+  if (looksLikeSkipExpression(skipHookIfKeysExist)) {
+    return await evaluateSkipExpression(
+      parseSkipExpression(skipHookIfKeysExist),
+      getKeyToSkipHook
+    );
+  }
+
   const keyEntries = parseKeyEntries(skipHookIfKeysExist);
 
   if (keyEntries.length === 0) {

package/Components/LinkHandler/LinkHandler.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   inflateString,
   objectToReadableString,
@@ -40,12 +39,8 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
 
-  const ScreenPlugin = findPluginByIdentifier(
-    WEBVIEW_SCREEN_IDENTIFIER,
-    plugins
-  );
+  const ScreenPlugin = getPluginByIdentifier(WEBVIEW_SCREEN_IDENTIFIER);
 
   const Component =
     R.path(["module", "Component"], ScreenPlugin) ||

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -57,6 +58,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -81,8 +83,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
@@ -105,6 +108,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/__tests__/placement.test.ts

@@ -6,28 +6,54 @@ import {
 describe("ActionButtonsCore placement", () => {
   const buttons = { type: "View", name: "buttons" };
 
-  const above_labels = [
-    { name: "above_label_1" },
-    { name: "above_label_2" },
-    { name: "above_label_3" },
+  const slots = [
+    { name: "text_label_1", element: { type: "View", id: "label_1" } },
+    { name: "text_label_2", element: { type: "View", id: "label_2" } },
+    { name: "text_label_3", element: { type: "View", id: "label_3" } },
   ];
 
-  const below_labels = [
-    { name: "below_label_1" },
-    { name: "below_label_2" },
-    { name: "below_label_3" },
-  ];
+  const labels = slots.map((slot) => slot.element);
 
   it("inserts buttons after the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "below_label_2" }, buttons, below_labels)
-    ).toEqual([below_labels[0], below_labels[1], buttons, below_labels[2]]);
+      insertBetweenLabels({ position: "below_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
   });
 
   it("inserts buttons before the matching label", () => {
     expect(
-      insertBetweenLabels({ position: "above_label_2" }, buttons, above_labels)
-    ).toEqual([above_labels[0], buttons, above_labels[1], above_labels[2]]);
+      insertBetweenLabels({ position: "above_text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], buttons, labels[1], labels[2]]);
+  });
+
+  it("inserts buttons after the matching label on a plain name match", () => {
+    expect(
+      insertBetweenLabels({ position: "text_label_2" }, buttons, slots)
+    ).toEqual([labels[0], labels[1], buttons, labels[2]]);
+  });
+
+  it("keeps the slot when its label is empty (null element)", () => {
+    const slotsWithEmpty = [
+      { name: "text_label_1", element: { id: "label_1" } },
+      { name: "text_label_2", element: null },
+      { name: "text_label_3", element: { id: "label_3" } },
+    ];
+
+    expect(
+      insertBetweenLabels(
+        { position: "above_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
+
+    expect(
+      insertBetweenLabels(
+        { position: "below_text_label_2" },
+        buttons,
+        slotsWithEmpty
+      )
+    ).toEqual([{ id: "label_1" }, buttons, { id: "label_3" }]);
   });
 
   it("prepends buttons only when on_top is allowed", () => {
@@ -35,17 +61,17 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "on_top", allowOnTop: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([buttons, ...below_labels]);
+    ).toEqual([buttons, ...labels]);
 
     expect(
       insertBetweenLabels(
         { position: "on_top", allowOnTop: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   it("appends buttons when appendWhenMissing is enabled", () => {
@@ -53,9 +79,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: true },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual([...below_labels, buttons]);
+    ).toEqual([...labels, buttons]);
   });
 
   it("returns labels unchanged when appendWhenMissing is disabled", () => {
@@ -63,9 +89,9 @@ describe("ActionButtonsCore placement", () => {
       insertBetweenLabels(
         { position: "unknown", appendWhenMissing: false },
         buttons,
-        below_labels
+        slots
       )
-    ).toEqual(below_labels);
+    ).toEqual(labels);
   });
 
   const labelContainers = [

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/ActionButtonController.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 type ActionDefinition = {
   identifier?: string;
@@ -61,6 +62,7 @@ export function ActionButtonController({
   const resolvedEntry = entry;
   const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
   const actionContext = useActions(resolvedIdentifier);
+  const component = useUIComponentContext();
 
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
@@ -128,20 +130,33 @@ export function ActionButtonController({
       return;
     }
 
+    const invokeOptions: InvokeArgsOptions = {
+      ...(component ? { component } : {}),
+    };
+
     if (supportsEntryState) {
       return actionContext.invokeAction?.(resolvedEntry, {
+        ...invokeOptions,
         updateState: setActionState,
       });
     }
 
+    if (typeof actionContext.invokeAction === "function") {
+      return actionContext.invokeAction(resolvedEntry, invokeOptions);
+    }
+
     const favouritesAction = legacySelected
       ? actionContext.removeFavourite
       : actionContext.addFavourite;
 
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(resolvedEntry);
-  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+    return favouritesAction?.(resolvedEntry);
+  }, [
+    actionContext,
+    supportsEntryState,
+    resolvedEntry,
+    legacySelected,
+    component,
+  ]);
 
   if (!actionContext || actionDisabled) {
     if (!actionContext) {

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/__tests__/ActionButtonController.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { UIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import { ActionButtonController } from "../ActionButtonController";
 
@@ -89,6 +90,47 @@ describe("ActionButtonController", () => {
     );
   });
 
+  it("passes the List UIComponentContext into invokeAction so the sheet can refresh it", () => {
+    const listComponent = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <UIComponentContext.Provider value={listComponent}>
+        <ActionButtonController
+          action={{ identifier: "open-modal-bottom-sheet-cell-action" }}
+          entry={entry}
+        >
+          {({ onPress }) => (
+            <Text testID="content" onPress={onPress}>
+              press
+            </Text>
+          )}
+        </ActionButtonController>
+      </UIComponentContext.Provider>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+        component: listComponent,
+      })
+    );
+  });
+
   it("updates state from addListener", () => {
     let listener;
 
@@ -328,7 +370,7 @@ describe("ActionButtonController", () => {
 
     fireEvent.press(getByTestId("content"));
 
-    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(invokeAction).toHaveBeenCalledWith(entry, {});
     expect(addFavourite).not.toHaveBeenCalled();
     expect(removeFavourite).not.toHaveBeenCalled();
   });

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/placement.ts

@@ -17,6 +17,11 @@ type InsertOptions = {
   appendWhenMissing?: boolean;
 };
 
+type Slot = {
+  name: string;
+  element?: unknown;
+};
+
 const hasLabelName = (value: unknown): value is Label =>
   !!value &&
   typeof value === "object" &&
@@ -100,8 +105,14 @@ const containsNestedLabel = (
 export const insertBetweenLabels = (
   { position, allowOnTop = false, appendWhenMissing = false }: InsertOptions,
   buttons: unknown,
-  labels: Label[] = []
+  slots: Slot[] = []
 ) => {
+  // Slots are defined by the canonical label list, so an empty (null) label
+  // still keeps its position — buttons placed above/below it survive.
+  const labels = slots
+    .map((slot) => slot.element)
+    .filter((element) => element != null);
+
   if (buttons == null) {
     return labels;
   }
@@ -110,14 +121,31 @@ export const insertBetweenLabels = (
     return [buttons, ...labels];
   }
 
-  const labelsWithButtons = withButtons(position, buttons, labels);
-  const inserted = labelsWithButtons.length !== labels.length;
+  let inserted = false;
+  const result: unknown[] = [];
+
+  for (const { name, element } of slots) {
+    if (position === `above_${name}`) {
+      result.push(buttons);
+      inserted = true;
+    }
+
+    if (element != null) {
+      result.push(element);
+    }
+
+    // Insert after on `below_*` or a plain label-name match.
+    if (position === `below_${name}` || position === name) {
+      result.push(buttons);
+      inserted = true;
+    }
+  }
 
-  if (!inserted && appendWhenMissing) {
-    return [...labels, buttons];
+  if (!inserted) {
+    return appendWhenMissing ? [...labels, buttons] : labels;
   }
 
-  return inserted ? labelsWithButtons : [...labels];
+  return result;
 };
 
 export const insertBetweenLabelContainers = (

package/Components/MasterCell/DefaultComponents/Button.tsx

@@ -91,6 +91,7 @@ function ButtonComponent(props: Props) {
       onPress={onPress}
       testID={props?.testID || `${item?.id}`}
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
+      accessibilityRole="button"
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >