@applicaster/zapp-react-native-utils 13.0.20 → 13.0.21-rc.1

package/appUtils/accessibilityManager/utils.ts

@@ -12,8 +12,14 @@ export function calculateReadingTime(
   minimumPause: number = 500,
   announcementDelay: number = 700
 ): number {
-  const words = text
-    .trim()
+  if (!text) {
+    return 0;
+  }
+
+  const trimmed = text.trim();
+
+  // Count words (split on whitespace and punctuation, keep alnum boundaries)
+  const words = trimmed
     .split(/(?<=\d)(?=[a-zA-Z])|(?<=[a-zA-Z])(?=\d)|[^\w\s]+|\s+/)
     .filter(Boolean).length;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.20",
+  "version": "13.0.21-rc.1",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "13.0.20",
+    "@applicaster/applicaster-types": "13.0.21-rc.1",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/reactHooks/feed/__tests__/{useInflatedUrl.test.ts → useInflatedUrl.test.tsx}

@@ -1,3 +1,34 @@
+import React from "react";
+
+import { WrappedWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+  useGetUrlInflater,
+} from "../useInflatedUrl";
+
+import { reactHooksLogger } from "../../logger";
+
+jest.mock("../../navigation", () => ({
+  useRoute: () => ({ pathname: "/mock/path" }),
+}));
+
+// mock contexts hooks
+jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
+  ZappPipesEntryContext: {
+    useZappPipesContext: () => [
+      { id: "entry-1", extensions: { showId: "A123" } },
+    ],
+  },
+  ZappPipesSearchContext: {
+    useZappPipesContext: () => ["user%20query"],
+  },
+  ZappPipesScreenContext: {
+    useZappPipesContext: () => [{ id: "screen-1" }],
+  },
+}));
+
 jest.mock("../../logger", () => ({
   reactHooksLogger: {
     warning: jest.fn(),
@@ -5,13 +36,6 @@ jest.mock("../../logger", () => ({
   },
 }));
 
-const {
-  getInflatedDataSourceUrl,
-  getSearchContext,
-} = require("../useInflatedUrl");
-
-const { reactHooksLogger } = require("../../logger");
-
 let mockStore;
 
 describe("getInflatedDataSourceUrl", () => {
@@ -188,3 +212,34 @@ describe("getSearchContext", () => {
     expect(result).toHaveProperty(mapping.queryParam.property, searchContext);
   });
 });
+
+describe("useGetUrlInflater", () => {
+  const { renderHook } = require("@testing-library/react-hooks");
+
+  it("returns original url when mapping is not provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: WrappedWithProviders,
+    });
+
+    const src = "https://foo.com/feed";
+    expect(result.current(src)).toBe(src);
+  });
+
+  it("inflates url using entry/search/screen contexts when mapping provided", () => {
+    const { result } = renderHook(() => useGetUrlInflater(), {
+      wrapper: ({ children }) => (
+        <WrappedWithProviders>{children}</WrappedWithProviders>
+      ),
+    });
+
+    const source = "https://foo.com/shows/{{showId}}?q={{q}}";
+
+    const mapping = {
+      showId: { source: "entry", property: "extensions.showId" },
+      q: { source: "search", property: "q" },
+    };
+
+    const url = result.current(source, mapping);
+    expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
+  });
+});

package/reactHooks/feed/useInflatedUrl.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import * as R from "ramda";
 
 import {
@@ -178,22 +178,19 @@ export function getSearchContext(
   return { [property]: encodeIfNeeded(searchContext) };
 }
 
-export function useInflatedUrl({
-  feedUrl,
-  mapping,
-}: {
-  feedUrl?: string;
-  mapping?: ZappTypeMapping;
-}) {
+export const useGetUrlInflater = () => {
   const { pathname } = useRoute();
 
   const [entryContext] = ZappPipesEntryContext.useZappPipesContext(pathname);
   const [searchContext] = ZappPipesSearchContext.useZappPipesContext();
   const [screenContext] = ZappPipesScreenContext.useZappPipesContext();
 
-  const url = useMemo(
-    () =>
-      mapping
+  return useCallback(
+    (
+      feedUrl: Nullable<string>,
+      mapping?: ZappTypeMapping
+    ): Nullable<string> => {
+      return mapping
         ? getInflatedDataSourceUrl({
             source: feedUrl,
             contexts: {
@@ -203,8 +200,24 @@ export function useInflatedUrl({
             },
             mapping,
           })
-        : feedUrl,
-    [feedUrl, mapping]
+        : feedUrl;
+    },
+    [entryContext, screenContext, searchContext]
+  );
+};
+
+export function useInflatedUrl({
+  feedUrl,
+  mapping,
+}: {
+  feedUrl?: string;
+  mapping?: ZappTypeMapping;
+}) {
+  const urlInflater = useGetUrlInflater();
+
+  const url = useMemo(
+    () => urlInflater(feedUrl, mapping),
+    [urlInflater, feedUrl, mapping]
   );
 
   if (!feedUrl) {

package/zappFrameworkUtils/HookCallback/callbackNavigationAction.ts

@@ -0,0 +1,240 @@
+import { useNavigation, useRivers, useScreenContext } from "../../reactHooks";
+import { createLogger } from "../../logger";
+import { useCallback, useMemo, useRef, useEffect } from "react";
+
+export enum NavigationCallbackOptions {
+  DEFAULT = "default",
+  GO_HOME = "go_home",
+  GO_BACK = "go_back",
+  GO_TO_SCREEN = "go_to_screen",
+}
+
+export enum ResultType {
+  login = "login",
+  logout = "logout",
+}
+
+export type CallbackResult = hookCallbackArgs & {
+  options?: {
+    resultType?: ResultType;
+    navigator?: QuickBrickAppNavigator;
+  };
+};
+
+export type ScreenResultCallback = (args: CallbackResult) => void | undefined;
+
+export const CALLBACK_NAVIGATION_KEY = "completion_action";
+
+export const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
+  "completion_action_navigation_go_to_screen";
+
+type NavKeys = {
+  action: NavigationCallbackOptions;
+  targetScreenId: string | null;
+} | null;
+
+type General = Record<string, unknown>;
+
+const LogPrefix = "useCallbackNavigationAction:";
+
+const { log_info, log_verbose, log_debug } = createLogger({
+  subsystem: "hook-navigation-callback",
+});
+
+const legacyMappingKeys = {
+  "quick-brick-login-flow": {
+    actionType: "login_completion_action",
+    targetScreen: "navigate_to_login_screen",
+  },
+  "quick-brick-user-account-ui-component": {
+    actionType: "callbackAction",
+  },
+  "quick-brick-login-multi-login-providers.login": {
+    actionType: "login_completion_action",
+    targetScreen: "navigate_to_login_screen",
+  },
+  "quick-brick-login-multi-login-providers.logout": {
+    actionType: "logout_completion_action",
+    targetScreen: "navigate_to_logout_screen",
+  },
+  "quick-brick-storefront": {
+    actionType: "purchase_completion_action",
+    targetScreen: "navigate_to_screen_after_purchase",
+  },
+  "zapp_login_plugin_oauth_tv_2_0.login": {
+    actionType: "login_completion_action",
+    targetScreen: "navigate_to_login_screen",
+  },
+  "zapp_login_plugin_oauth_tv_2_0.logout": {
+    actionType: "logout_completion_action",
+    targetScreen: "navigate_to_logout_screen",
+  },
+};
+
+const NAV_ACTIONS = (
+  Object.values(NavigationCallbackOptions) as string[]
+).filter((value) => value !== NavigationCallbackOptions.DEFAULT);
+
+const isNavAction = (v: unknown): v is NavigationCallbackOptions =>
+  typeof v === "string" && NAV_ACTIONS.includes(v);
+
+export const getNavigationKeys = (
+  item?: ZappUIComponent | ZappRiver,
+  resultType: ResultType | null = null
+): NavKeys => {
+  const general = (item?.general ?? {}) as General;
+
+  const pluginIdentifier = (item as any).identifier ?? item?.type ?? "";
+
+  const legacy =
+    legacyMappingKeys[`${pluginIdentifier}.${resultType}`] ??
+    legacyMappingKeys[pluginIdentifier] ??
+    {};
+
+  const actionKey = resultType
+    ? `${resultType}_${CALLBACK_NAVIGATION_KEY}`
+    : CALLBACK_NAVIGATION_KEY;
+
+  const rawAction =
+    (general as General)[actionKey] ??
+    (legacy.actionType ? (general as General)[legacy.actionType] : undefined);
+
+  const action: NavigationCallbackOptions | null = isNavAction(rawAction)
+    ? rawAction
+    : null;
+
+  if (!action) return null;
+
+  let targetScreenId: string | null = null;
+
+  if (action === NavigationCallbackOptions.GO_TO_SCREEN) {
+    const screenKey = resultType
+      ? `${resultType}_${CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY}`
+      : CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY;
+
+    const screenId: string | null =
+      ((general as General)[screenKey] as string) ??
+      (legacy.targetScreen
+        ? ((general as General)[legacy.targetScreen] as string)
+        : undefined);
+
+    if (screenId) {
+      targetScreenId = screenId.length > 0 ? screenId : null;
+    }
+  }
+
+  return { action, targetScreenId };
+};
+
+export const useCallbackNavigationAction = (
+  item?: ZappUIComponent | ZappRiver
+): ((
+  args: CallbackResult,
+  hookCallback?: hookCallback
+) => void | undefined) => {
+  const navigation = useNavigation();
+  const rivers = useRivers();
+  const screenContext = useScreenContext();
+
+  const navigationRef = useRef(navigation);
+
+  useEffect(() => {
+    navigationRef.current = navigation;
+  }, [navigation]);
+
+  const overrideCallbackFromComponent = useMemo(() => {
+    log_verbose(`${LogPrefix}: overridden callbackAction by component`);
+
+    // TODO: Check if we have better option where to store overridden callback action
+    return screenContext?.options?.callback;
+  }, [screenContext?.options?.callback]);
+
+  if (typeof __DEV__ !== "undefined" && __DEV__) {
+    log_verbose(`${LogPrefix} screenContext`, { screenContext, item });
+  }
+
+  const callbackAction = useCallback<hookCallback>(
+    (args: CallbackResult, hookCallback: hookCallback = null) => {
+      if (!args.success) {
+        log_debug(
+          `${LogPrefix} callback called with no success, use original callback`
+        );
+
+        hookCallback?.(args);
+
+        return;
+      }
+
+      if (args.cancelled) {
+        log_debug(
+          `${LogPrefix} callback called but cancelled, use original callback`
+        );
+
+        hookCallback?.(args);
+
+        return;
+      }
+
+      const data = getNavigationKeys(item, args.options?.resultType ?? null);
+
+      if (!data) {
+        hookCallback?.(args);
+
+        return;
+      }
+
+      hookCallback?.({ ...args, success: false, cancelled: true });
+      const currentNavigation = navigationRef.current;
+
+      switch (data.action) {
+        case NavigationCallbackOptions.GO_BACK: {
+          if (currentNavigation.canGoBack()) {
+            currentNavigation.goBack();
+
+            log_info(`${LogPrefix} performing 'GO BACK' action`);
+          } else {
+            log_info(`${LogPrefix} cannot perform 'GO BACK' action — ignoring`);
+          }
+
+          break;
+        }
+
+        case NavigationCallbackOptions.GO_HOME: {
+          currentNavigation.goHome();
+          log_info(`${LogPrefix} performing 'GO HOME' action`);
+          break;
+        }
+
+        case NavigationCallbackOptions.GO_TO_SCREEN: {
+          const screenId = data.targetScreenId;
+
+          if (!screenId) {
+            log_info(`${LogPrefix} no screenId provided — ignoring`);
+            break;
+          }
+
+          const screen = rivers[screenId];
+
+          if (screen) {
+            currentNavigation.replace(screen);
+
+            log_info(
+              `${LogPrefix} performing 'GO TO SCREEN' action to screen: ${screenId}`
+            );
+          } else {
+            log_info(`${LogPrefix} no screen provided — ignoring`);
+          }
+
+          break;
+        }
+
+        default: {
+          break;
+        }
+      }
+    },
+    [item, rivers]
+  );
+
+  return overrideCallbackFromComponent || callbackAction;
+};

package/zappFrameworkUtils/HookCallback/hookCallbackManifestExtensions.config.js

@@ -0,0 +1,76 @@
+const NavigationCallbackOptions = {
+  DEFAULT: "default",
+  GO_HOME: "go_home",
+  GO_BACK: "go_back",
+  GO_TO_SCREEN: "go_to_screen",
+};
+
+const ResultType = {
+  login: "login",
+  logout: "logout",
+};
+
+const CALLBACK_NAVIGATION_KEY = "completion_action";
+
+const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
+  "completion_action_navigation_go_to_screen";
+
+const callbackKeyPrefix = (key, prefix, keySeparator = "_") =>
+  prefix ? `${prefix}${keySeparator}${key}` : key;
+
+const extendManifestWithHookCallback = (prefix = null) => ({
+  group: true,
+  label: "CallBack Navigation",
+  folded: true,
+  fields: [
+    {
+      type: "select",
+      key: callbackKeyPrefix(CALLBACK_NAVIGATION_KEY, prefix),
+      label: callbackKeyPrefix(
+        "Callback Navigation",
+        prefix?.toUpperCase(),
+        " "
+      ),
+      label_tooltip:
+        "Defines what navigation action should be performed after the callback is called.",
+      options: [
+        {
+          text: "Use default flow",
+          value: NavigationCallbackOptions.DEFAULT,
+        },
+        {
+          text: "Go Back to home screen",
+          value: NavigationCallbackOptions.GO_HOME,
+        },
+        {
+          text: "Go Back to previous screen",
+          value: NavigationCallbackOptions.GO_BACK,
+        },
+        {
+          text: "Move to specific screen",
+          value: NavigationCallbackOptions.GO_TO_SCREEN,
+        },
+      ],
+      initial_value: "default",
+    },
+    {
+      type: "screen_selector",
+      key: callbackKeyPrefix(CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY, prefix),
+      label: callbackKeyPrefix(
+        "Navigate to screen",
+        prefix?.toUpperCase(),
+        " "
+      ),
+      label_tooltip: "Screen you wish to navigate to after success purchase",
+      rules: "conditional",
+      conditional_fields: [
+        {
+          key: `general/${callbackKeyPrefix(CALLBACK_NAVIGATION_KEY, prefix)}`,
+          condition_value: NavigationCallbackOptions.GO_TO_SCREEN,
+        },
+      ],
+    },
+  ],
+});
+
+module.exports = { extendManifestWithHookCallback, ResultType };

package/zappFrameworkUtils/HookCallback/useCallbackActions.ts

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import {
+  CallbackResult,
+  useCallbackNavigationAction,
+} from "./callbackNavigationAction";
+
+export const useCallbackActions = (
+  item?: ZappUIComponent | ZappRiver,
+  hookCallback?: hookCallback
+): hookCallback => {
+  const navigationAction = useCallbackNavigationAction(item);
+
+  return useCallback(
+    async (data: CallbackResult) => {
+      navigationAction(data, hookCallback);
+    },
+    [navigationAction, hookCallback]
+  );
+};