@applicaster/zapp-react-native-ui-components 16.0.0-alpha.7845362739 → 16.0.0-alpha.8101951023

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/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/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}
     >

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -249,9 +249,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
 
   const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { Switch } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useCellClick } from "@applicaster/zapp-react-native-utils/reactHooks/cell-click";
 
 type Props = {
   item: ZappEntry | ZappFeed;
@@ -15,36 +16,57 @@ type Props = {
 export const Toggle = (props: Props) => {
   const { style, item, action, cellState } = props;
 
-  const {
-    trackColor,
-    trackColorActive,
-    thumbColor,
-    thumbColorActive,
-    iosBackgroundColor,
-  } = style;
+  const { trackColor, trackColorActive, thumbColor, thumbColorActive } = style;
 
+  // `focused_selected` is the selected state with a finger on the row, so the
+  // switch has to read as on for both. Leaving it out reads a pressed selected
+  // row as off, which flips the thumb for the duration of the press.
   const isSelected = React.useMemo(
-    () => cellState === "selected",
+    () => cellState === "selected" || cellState === "focused_selected",
     [item?.id, cellState]
   );
 
   const actionContext = useActions(action?.identifier);
+  const onCellClick = useCellClick({ item: item as ZappEntry });
 
-  const [actionState, setActionState] = useState(
-    actionContext.initialEntryState(item)
+  // A form toggle has no action plugin behind the switch: it reflects the cell
+  // selection state and writes through the entry's tap actions, the same path a
+  // tap on the row takes.
+  //
+  // An empty identifier is the way to ask for that, which is why the cell
+  // manifest declares no initial_value for `toggle_action_identifier`:
+  // `castOrDefault` substitutes the default whenever the configured value is
+  // empty - and an empty string counts as empty - so any default there would be
+  // uncleanable and would force every toggle onto that plugin.
+  //
+  // The route is still decided on whether the identifier resolves to an
+  // installed action plugin rather than on the string being non-empty. App
+  // configurations saved while the old default was in the manifest still carry
+  // it, and a mistyped plugin id has to fall back the same way.
+  const hasActionPlugin = Boolean(
+    action?.identifier && actionContext?.invokeAction
+  );
+
+  const [actionState, setActionState] = useState(() =>
+    hasActionPlugin ? actionContext?.initialEntryState?.(item) : undefined
   );
 
   const onPress = useCallback(() => {
-    actionContext.invokeAction(item, {
+    if (!hasActionPlugin) {
+      onCellClick();
+
+      return;
+    }
+
+    actionContext?.invokeAction?.(item, {
       updateState: setActionState,
     });
-  }, [actionState, actionContext?.state]);
+  }, [hasActionPlugin, onCellClick, actionState, actionContext?.state]);
 
   return (
     <Switch
       trackColor={{ false: trackColor, true: trackColorActive }}
       thumbColor={isSelected ? thumbColorActive : thumbColor}
-      ios_backgroundColor={iosBackgroundColor}
       onValueChange={onPress}
       value={isSelected}
     />