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

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/appUtils/focusManager/index.ios.ts

@@ -188,9 +188,15 @@ export const focusManager = (function () {
   function register({ id, component }) {
     const { isGroup = false } = component;
 
-    emitRegistered(id);
+    if (isGroup) {
+      registerGroup(id, component);
+    } else {
+      registerItem(id, component);
+    }
+
+    const parentId = component?.props?.groupId;
 
-    return isGroup ? registerGroup(id, component) : registerItem(id, component);
+    emitRegistered({ id, parentId, isGroup });
   }
 
   function unregister(id, { group = false } = {}) {

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -1,5 +1,5 @@
-import { ReplaySubject } from "rxjs";
-import { filter } from "rxjs/operators";
+import { ReplaySubject, Subject } from "rxjs";
+import { filter, first, switchMap } from "rxjs/operators";
 import { BUTTON_PREFIX } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/DefaultComponents/tv/TvActionButtons/const";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 
@@ -22,10 +22,54 @@ export const focusableButtonsRegistration$ = (focusableGroupId: string) =>
     )
   );
 
-export const emitRegistered = (id: Option<FocusableID>): void => {
+const focusableViewRegistrationSubject$ = new Subject<{
+  id: FocusableID;
+  parentId: FocusableID;
+}>();
+
+let focusableGroupRegistrationSubject$ = new ReplaySubject<{
+  id: FocusableID;
+}>();
+
+export const resetFocusableGroupRegistration = () => {
+  // complete the old subject so subscribers are notified and resources are freed
+  focusableGroupRegistrationSubject$.complete();
+
+  focusableGroupRegistrationSubject$ = new ReplaySubject<{
+    id: FocusableID;
+  }>();
+};
+
+export const firstFocusableViewRegistration$ =
+  focusableViewRegistrationSubject$.pipe(
+    first(), // we care about only first FocusableView registration
+    switchMap(({ parentId }) =>
+      // start waiting registration of its parent
+      focusableGroupRegistrationSubject$.pipe(
+        filter(({ id }) => id === parentId)
+      )
+    ),
+    first()
+  );
+
+export const emitRegistered = ({
+  id,
+  parentId,
+  isGroup,
+}: {
+  id: Option<FocusableID>;
+  parentId: Option<FocusableID>;
+  isGroup: boolean;
+}): void => {
   if (isFocusableButton(id)) {
     registeredSubject$.next({ id, registered: true });
   }
+
+  if (!isGroup) {
+    focusableViewRegistrationSubject$.next({ id, parentId });
+  } else {
+    focusableGroupRegistrationSubject$.next({ id });
+  }
 };
 
 export const emitUnregistered = (id: Option<FocusableID>): void => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "13.0.21-rc.0",
+  "version": "13.0.21",
   "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.21-rc.0",
+    "@applicaster/applicaster-types": "13.0.21",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

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]
+  );
+};