@applicaster/zapp-react-native-utils 15.0.0-alpha.2239032089 → 15.0.0-alpha.3339012525

package/appUtils/RiverFocusManager/{index.ts → index.js}

@@ -1,31 +1,11 @@
-import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
-import { QUICK_BRICK_CONTENT } from "@applicaster/quick-brick-core/const";
-import { isNil, isEmpty } from "@applicaster/zapp-react-native-utils/utils";
-import { isNotNil } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
+import * as R from "ramda";
+
+import { focusManager } from "../focusManager";
 
 let riverFocusData = {};
 let initialyPresentedScreenFocused = false;
 
 export const riverFocusManager = (function () {
-  /**
-   * Create unique key that will be used for save focused group data inside specific screen
-   * @param {{ screenId: string, isInsideContainer: boolean }}
-   * screenId Unique Id of the screen from layout.json
-   * isInsideContainer If this screen a screen picker child
-   *
-   */
-  function screenFocusableGroupId({
-    screenId,
-    isInsideContainer,
-  }: {
-    screenId: string;
-    isInsideContainer: Option<boolean>;
-  }) {
-    return `${QUICK_BRICK_CONTENT}-${screenId}${
-      isNil(isInsideContainer) ? "" : "-isInsideContainer"
-    }`;
-  }
-
   function setScreenFocusableData({
     screenFocusableGroupId,
     groupId,
@@ -98,8 +78,8 @@ export const riverFocusManager = (function () {
   }) {
     // Check if screen should be focused
     const shouldFocus =
-      (initialyPresentedScreenFocused === false && isEmpty(riverFocusData)) ||
-      isNotNil(riverFocusData[screenFocusableGroupId]) ||
+      (initialyPresentedScreenFocused === false && R.isEmpty(riverFocusData)) ||
+      R.compose(R.not, R.isNil)(riverFocusData[screenFocusableGroupId]) ||
       isDeepLink;
 
     // TODO: Uncommit it to start fixing bug where selection wrong item
@@ -138,6 +118,19 @@ export const riverFocusManager = (function () {
     }
   }
 
+  /**
+   * Create unique key that will be used for save focused group data inside specific screen
+   * @param {{ screenId: string, isInsideContainer: boolean }}
+   * screenId Unique Id of the screen from layout.json
+   * isInsideContainer If this screen a screen picker child
+   *
+   */
+  function screenFocusableGroupId({ screenId, isInsideContainer }) {
+    return `RiverFocusableGroup-${screenId}${
+      R.isNil(isInsideContainer) ? "" : "-isInsideContainer"
+    }`;
+  }
+
   return {
     setScreenFocusableData,
     clearAllScreensData,

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -70,9 +70,6 @@ exports[`focusManagerIOS should be defined 1`] = `
   "getPreferredFocusChild": [Function],
   "invokeHandler": [Function],
   "isFocusOn": [Function],
-  "isFocusOnContent": [Function],
-  "isFocusOnMenu": [Function],
-  "isFocusOnTabsScreenContent": [Function],
   "isGroupItemFocused": [Function],
   "moveFocus": [Function],
   "on": [Function],

package/appUtils/focusManager/index.ios.ts

@@ -1,18 +1,12 @@
 import { NativeModules } from "react-native";
 import * as R from "ramda";
 
+import { isCurrentFocusOn } from "../focusManagerAux/utils";
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
 import { findChild } from "./utils";
 
-import {
-  isCurrentFocusOn,
-  isPartOfMenu,
-  isPartOfContent,
-  isPartOfTabsScreenContent,
-} from "../focusManagerAux/utils/index.ios";
-
 const { FocusableManagerModule } = NativeModules;
 
 /**
@@ -267,9 +261,7 @@ export const focusManager = (function () {
   function setFocus(
     id: string,
     direction?: FocusManager.IOS.Direction,
-    options?: Partial<{
-      groupFocusedChanged: boolean;
-    }>,
+    options?: Partial<{ groupFocusedChanged: boolean }>,
     callback?: any
   ) {
     blur(direction);
@@ -408,30 +400,6 @@ export const focusManager = (function () {
     return id && isCurrentFocusOn(id, currentFocusNode);
   }
 
-  function isFocusOnMenu(): boolean {
-    const currentFocusable = getCurrentFocus();
-
-    return isPartOfMenu(focusableTree, currentFocusable?.props?.id);
-  }
-
-  function isFocusOnContent(): boolean {
-    const currentFocusable = getCurrentFocus();
-
-    return isPartOfContent(focusableTree, currentFocusable?.props?.id);
-  }
-
-  function isFocusOnTabsScreenContent(
-    screenPickerContentContainerId: string
-  ): boolean {
-    const currentFocusable = getCurrentFocus();
-
-    return isPartOfTabsScreenContent(
-      focusableTree,
-      screenPickerContentContainerId,
-      currentFocusable?.props?.id
-    );
-  }
-
   return {
     on,
     invokeHandler,
@@ -454,8 +422,5 @@ export const focusManager = (function () {
     isGroupItemFocused,
     getPreferredFocusChild,
     isFocusOn,
-    isFocusOnMenu,
-    isFocusOnContent,
-    isFocusOnTabsScreenContent,
   };
 })();

package/package.json

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

package/reactHooks/feed/useFeedLoader.tsx

@@ -37,15 +37,6 @@ export const useFeedLoader = ({
   mapping,
   pipesOptions = {},
 }: Props): FeedLoaderResponse => {
-  useEffect(() => {
-    if (!feedUrl) {
-      logger.warning({
-        message: "Required parameter feedUrl is missing",
-        data: { feedUrl },
-      });
-    }
-  }, []);
-
   const isInitialRender = useIsInitialRender();
 
   const callableFeedUrl = useInflatedUrl({ feedUrl, mapping });

package/reactHooks/feed/useInflatedUrl.ts

@@ -18,6 +18,7 @@ import {
 } from "@applicaster/zapp-pipes-v2-client";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
 import { ENDPOINT_TAGS } from "../../types";
+import { isNilOrEmpty } from "../../reactUtils/helpers";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -75,15 +76,19 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
    * https://foo.com/shows/A1234
    */
 
-  if (!source) {
-    // eslint-disable-next-line no-console
-    console.error("source is empty", {
-      source,
-      contexts,
-      mapping,
-    });
+  if (!isNilOrEmpty(mapping)) {
+    if (!source) {
+      if (__DEV__) {
+        // eslint-disable-next-line no-console
+        throw new Error(
+          "getInflatedDataSourceUrl: source is empty while mapping is provided"
+        );
+      }
 
-    return null;
+      return null;
+    }
+  } else {
+    return source || null;
   }
 
   // Hack because in tv we expect to get key names instead of values from the fake entry
@@ -193,28 +198,17 @@ export function useInflatedUrl({
 
   const url = useMemo(
     () =>
-      mapping
-        ? getInflatedDataSourceUrl({
-            source: feedUrl,
-            contexts: {
-              entry: entryContext,
-              screen: screenContext,
-              search: getSearchContext(searchContext, mapping),
-            },
-            mapping,
-          })
-        : feedUrl,
-    [feedUrl, mapping]
+      getInflatedDataSourceUrl({
+        source: feedUrl,
+        contexts: {
+          entry: entryContext,
+          screen: screenContext,
+          search: getSearchContext(searchContext, mapping),
+        },
+        mapping,
+      }),
+    [entryContext, feedUrl, mapping, screenContext, searchContext]
   );
 
-  if (!feedUrl) {
-    logger.warning({
-      message: "Required parameter feedUrl is missing",
-      data: { feedUrl },
-    });
-
-    return null;
-  }
-
   return url;
 }

package/utils/index.ts

@@ -34,5 +34,4 @@ export {
   last,
   toLower,
   isEqual as equals,
-  flowRight as compose,
 } from "lodash";

package/zappFrameworkUtils/HookCallback/callbackNavigationAction.ts

@@ -9,10 +9,23 @@ export enum NavigationCallbackOptions {
   GO_TO_SCREEN = "go_to_screen",
 }
 
-export const CALLBACK_NAVIGATION_KEY = "hook_callback_navigation";
+export enum ResultType {
+  login = "login",
+  logout = "logout",
+}
+
+export type CallbackResult = hookCallbackArgs & {
+  options?: {
+    resultType?: ResultType;
+  };
+};
+
+export type ScreenResultCallback = (args: CallbackResult) => void | undefined;
+
+export const CALLBACK_NAVIGATION_KEY = "completion_action";
 
 export const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
-  "hook_callback_navigation_go_to_screen";
+  "completion_action_navigation_go_to_screen";
 
 type NavKeys = {
   action: NavigationCallbackOptions;
@@ -23,7 +36,7 @@ type General = Record<string, unknown>;
 
 const LogPrefix = "useCallbackNavigationAction:";
 
-const { log_info, log_verbose } = createLogger({
+const { log_info, log_verbose, log_debug } = createLogger({
   subsystem: "hook-navigation-callback",
 });
 
@@ -35,50 +48,63 @@ const legacyMappingKeys = {
   "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",
+  },
 };
 
-const isNonEmptyString = (v: unknown): v is string =>
-  typeof v === "string" && v.trim().length > 0;
-
 const NAV_ACTIONS = Object.values(NavigationCallbackOptions) as string[];
 
 const isNavAction = (v: unknown): v is NavigationCallbackOptions =>
-  typeof v === "string" && NAV_ACTIONS.includes(v.trim());
+  typeof v === "string" && NAV_ACTIONS.includes(v);
 
 export const getNavigationKeys = (
-  item?: ZappUIComponent | ZappRiver
+  item?: ZappUIComponent | ZappRiver,
+  resultType: ResultType | null = null
 ): NavKeys => {
   const general = (item?.general ?? {}) as General;
-  const pluginIdentifier = item?.type ?? "";
-  const legacy = legacyMappingKeys[pluginIdentifier] ?? {};
+
+  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).hook_callback_navigation ??
+    (general as General)[actionKey] ??
     (legacy.actionType ? (general as General)[legacy.actionType] : undefined);
 
-  let action: NavigationCallbackOptions | null = null;
-
-  if (isNonEmptyString(rawAction)) {
-    const trimmed = rawAction.trim();
-    action = isNavAction(trimmed) ? trimmed : null;
-  }
+  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)[CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY] as string) ??
+      ((general as General)[screenKey] as string) ??
       (legacy.targetScreen
         ? ((general as General)[legacy.targetScreen] as string)
         : undefined);
 
     if (screenId) {
-      const trimmedTargetScreenId = screenId.trim();
-
-      targetScreenId =
-        trimmedTargetScreenId.length > 0 ? trimmedTargetScreenId : null;
+      targetScreenId = screenId.length > 0 ? screenId : null;
     }
   }
 
@@ -87,10 +113,12 @@ export const getNavigationKeys = (
 
 export const useCallbackNavigationAction = (
   item?: ZappUIComponent | ZappRiver
-): hookCallback | undefined => {
+): ((
+  args: CallbackResult,
+  hookCallback?: hookCallback
+) => void | undefined) => {
   const navigation = useNavigation();
   const rivers = useRivers();
-  const enabled = Boolean(item?.general?.[CALLBACK_NAVIGATION_KEY]);
   const screenContext = useScreenContext();
 
   const overrideCallbackFromComponent = useMemo(() => {
@@ -105,11 +133,36 @@ export const useCallbackNavigationAction = (
   }
 
   const callbackAction = useCallback<hookCallback>(
-    (_args: hookCallbackArgs) => {
-      const data = getNavigationKeys(item) ?? {
-        action: NavigationCallbackOptions.DEFAULT,
-        targetScreenId: null,
-      };
+    (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 });
 
       switch (data.action) {
         case NavigationCallbackOptions.GO_BACK: {
@@ -160,5 +213,5 @@ export const useCallbackNavigationAction = (
     [item, navigation, rivers]
   );
 
-  return enabled ? overrideCallbackFromComponent || callbackAction : undefined;
+  return overrideCallbackFromComponent || callbackAction;
 };

package/zappFrameworkUtils/HookCallback/hookCallbackManifestExtensions.config.js

@@ -5,20 +5,32 @@ const NavigationCallbackOptions = {
   GO_TO_SCREEN: "go_to_screen",
 };
 
-const CALLBACK_NAVIGATION_KEY = "hook_callback_navigation";
+const ResultType = {
+  login: "login",
+  logout: "logout",
+};
+
+const CALLBACK_NAVIGATION_KEY = "completion_action";
 
 const CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY =
-  "hook_callback_navigation_go_to_screen";
+  "completion_action_navigation_go_to_screen";
+
+const callbackKeyPrefix = (key, prefix, keySeparator = "_") =>
+  prefix ? `${prefix}${keySeparator}${key}` : key;
 
-const extendManifestWithHookCallback = () => ({
+const extendManifestWithHookCallback = (prefix = null) => ({
   group: true,
   label: "CallBack Navigation",
   folded: true,
   fields: [
     {
       type: "select",
-      key: CALLBACK_NAVIGATION_KEY,
-      label: "Callback Navigation",
+      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: [
@@ -43,13 +55,17 @@ const extendManifestWithHookCallback = () => ({
     },
     {
       type: "screen_selector",
-      key: CALLBACK_NAVIGATION_GO_TO_SCREEN_KEY,
-      label: "Navigate to screen",
+      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/${CALLBACK_NAVIGATION_KEY}`,
+          key: `general/${callbackKeyPrefix(CALLBACK_NAVIGATION_KEY, prefix)}`,
           condition_value: NavigationCallbackOptions.GO_TO_SCREEN,
         },
       ],
@@ -57,4 +73,4 @@ const extendManifestWithHookCallback = () => ({
   ],
 });
 
-module.exports = { extendManifestWithHookCallback };
+module.exports = { extendManifestWithHookCallback, ResultType };

package/zappFrameworkUtils/HookCallback/useCallbackActions.ts

@@ -1,5 +1,8 @@
 import { useCallback } from "react";
-import { useCallbackNavigationAction } from "./callbackNavigationAction";
+import {
+  CallbackResult,
+  useCallbackNavigationAction,
+} from "./callbackNavigationAction";
 
 export const useCallbackActions = (
   item?: ZappUIComponent | ZappRiver,
@@ -8,14 +11,8 @@ export const useCallbackActions = (
   const navigationAction = useCallbackNavigationAction(item);
 
   return useCallback(
-    async (data: hookCallbackArgs) => {
-      if (navigationAction && data.success) {
-        hookCallback?.({ ...data, success: false, cancelled: true });
-
-        navigationAction(data);
-      } else {
-        hookCallback?.(data);
-      }
+    async (data: CallbackResult) => {
+      navigationAction(data, hookCallback);
     },
     [navigationAction, hookCallback]
   );

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

@@ -1,104 +0,0 @@
-import { isNil, startsWith } from "@applicaster/zapp-react-native-utils/utils";
-
-import {
-  QUICK_BRICK_CONTENT,
-  QUICK_BRICK_NAVBAR,
-} from "@applicaster/quick-brick-core/const";
-
-const isNavBar = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
-const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
-const isRoot = (node) => node?.id === "root";
-
-export const isPartOfTabsScreenContent = (
-  focusableTree,
-  screenPickerContentContainerId,
-  id
-) => {
-  const node = focusableTree.findInTree(id);
-
-  if (isNil(node)) {
-    return false;
-  }
-
-  if (isRoot(node)) {
-    return false;
-  }
-
-  if (isNavBar(node)) {
-    return false;
-  }
-
-  if (isContent(node)) {
-    return false;
-  }
-
-  if (node?.id === screenPickerContentContainerId) {
-    return true;
-  }
-
-  return isPartOfTabsScreenContent(
-    focusableTree,
-    screenPickerContentContainerId,
-    node.parent?.id
-  );
-};
-
-export const isPartOfMenu = (focusableTree, id): boolean => {
-  const node = focusableTree.findInTree(id);
-
-  if (isNil(node)) {
-    return false;
-  }
-
-  if (isRoot(node)) {
-    return false;
-  }
-
-  if (isNavBar(node)) {
-    return true;
-  }
-
-  if (isContent(node)) {
-    return false;
-  }
-
-  return isPartOfMenu(focusableTree, node.parent.id);
-};
-
-export const isPartOfContent = (focusableTree, id) => {
-  const node = focusableTree.findInTree(id);
-
-  if (isNil(node)) {
-    return false;
-  }
-
-  if (isRoot(node)) {
-    return false;
-  }
-
-  if (isNavBar(node)) {
-    return false;
-  }
-
-  if (isContent(node)) {
-    return true;
-  }
-
-  return isPartOfContent(focusableTree, node.parent?.id);
-};
-
-export const isCurrentFocusOn = (id, node) => {
-  if (!node) {
-    return false;
-  }
-
-  if (isRoot(node)) {
-    return false;
-  }
-
-  if (node?.id === id) {
-    return true;
-  }
-
-  return isCurrentFocusOn(id, node.parent);
-};

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

@@ -1,63 +0,0 @@
-import { Subject, ReplaySubject, withLatestFrom } from "rxjs";
-import { filter } from "rxjs/operators";
-
-import { isPartOfMenu, isPartOfContent } from "./index.ios";
-
-import { focusManager } from "../../focusManager/index.ios";
-
-type FocusableID = string;
-const focusedSubject$ = new Subject<FocusableID>();
-
-const focused$ = focusedSubject$.asObservable();
-
-export const emitFocused = (id: FocusableID): void => {
-  focusedSubject$.next(id);
-};
-
-export const topMenuItemFocused$ = focused$.pipe(
-  filter((id) => id && isPartOfMenu(focusManager.focusableTree, id))
-);
-
-export const contentFocused$ = focused$.pipe(
-  filter((id) => {
-    const isContent = isPartOfContent(focusManager.focusableTree, id);
-
-    return id && isContent;
-  })
-);
-
-const registeredHomeTopMenuItemSubject$ = new ReplaySubject<FocusableID>(1);
-
-export const registeredHomeTopMenuItem$ =
-  registeredHomeTopMenuItemSubject$.asObservable();
-
-export const homeTopMenuItemFocused$ = topMenuItemFocused$.pipe(
-  withLatestFrom(registeredHomeTopMenuItem$),
-  filter(([id, homeId]) => id === homeId)
-);
-
-export const emitHomeTopMenuItemRegistered = (id) => {
-  // save homeId on registration
-  registeredHomeTopMenuItemSubject$.next(id);
-};
-
-export const emitHomeTopMenuItemUnregistered = () => {
-  // reset homeId on unregistration
-  registeredHomeTopMenuItemSubject$.next(undefined);
-};
-
-const registeredScreenPickerContentContainerSubject$ =
-  new ReplaySubject<FocusableID>(1);
-
-export const registeredScreenPickerContentContainer$ =
-  registeredScreenPickerContentContainerSubject$.asObservable();
-
-export const emitScreenPickerContentContainerRegistered = (id) => {
-  // save screenPickerContentContainerId on registration
-  registeredScreenPickerContentContainerSubject$.next(id);
-};
-
-export const emitScreenPickerContentContainerUnregistered = () => {
-  // reset screenPickerContentContainerId on unregistration
-  registeredScreenPickerContentContainerSubject$.next(undefined);
-};