@applicaster/zapp-react-native-utils 15.0.0-rc.10 → 15.0.0-rc.100

package/zappFrameworkUtils/HookCallback/callbackNavigationAction.ts

@@ -1,6 +1,6 @@
 import { useNavigation, useRivers, useScreenContext } from "../../reactHooks";
 import { createLogger } from "../../logger";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useRef, useEffect } from "react";
 
 export enum NavigationCallbackOptions {
   DEFAULT = "default",
@@ -17,6 +17,7 @@ export enum ResultType {
 export type CallbackResult = hookCallbackArgs & {
   options?: {
     resultType?: ResultType;
+    navigator?: QuickBrickAppNavigator;
   };
 };
 
@@ -45,7 +46,7 @@ const legacyMappingKeys = {
     actionType: "login_completion_action",
     targetScreen: "navigate_to_login_screen",
   },
-  "quick-brick-user-account-ui-component": {
+  "quick-brick-user-account-ui-component.login": {
     actionType: "callbackAction",
   },
   "quick-brick-login-multi-login-providers.login": {
@@ -56,9 +57,23 @@ const legacyMappingKeys = {
     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[];
+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);
@@ -69,7 +84,8 @@ export const getNavigationKeys = (
 ): NavKeys => {
   const general = (item?.general ?? {}) as General;
 
-  const pluginIdentifier = (item as any).identifier ?? item?.type ?? "";
+  const pluginIdentifier =
+    (item as any).identifier ?? item?.type ?? item?.component_type ?? "";
 
   const legacy =
     legacyMappingKeys[`${pluginIdentifier}.${resultType}`] ??
@@ -121,6 +137,12 @@ export const useCallbackNavigationAction = (
   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`);
 
@@ -154,20 +176,35 @@ export const useCallbackNavigationAction = (
         return;
       }
 
-      const data = getNavigationKeys(item, args.options?.resultType ?? null);
+      let data = getNavigationKeys(item, args.options?.resultType ?? null);
 
       if (!data) {
-        hookCallback?.(args);
+        const isScreen = !hookCallback;
 
-        return;
+        if (isScreen && args.options?.resultType === ResultType.login) {
+          log_debug(
+            `${LogPrefix} no navigation data found, applying GO BACK for login screen`
+          );
+
+          data = {
+            action: NavigationCallbackOptions.GO_BACK,
+            targetScreenId: null,
+          };
+        } else {
+          hookCallback?.(args);
+
+          return;
+        }
       }
 
       hookCallback?.({ ...args, success: false, cancelled: true });
+      const currentNavigation = navigationRef.current;
 
       switch (data.action) {
         case NavigationCallbackOptions.GO_BACK: {
-          if (navigation.canGoBack()) {
-            navigation.goBack();
+          if (currentNavigation.canGoBack()) {
+            currentNavigation.goBack();
+
             log_info(`${LogPrefix} performing 'GO BACK' action`);
           } else {
             log_info(`${LogPrefix} cannot perform 'GO BACK' action — ignoring`);
@@ -177,7 +214,7 @@ export const useCallbackNavigationAction = (
         }
 
         case NavigationCallbackOptions.GO_HOME: {
-          navigation.goHome();
+          currentNavigation.goHome();
           log_info(`${LogPrefix} performing 'GO HOME' action`);
           break;
         }
@@ -193,7 +230,7 @@ export const useCallbackNavigationAction = (
           const screen = rivers[screenId];
 
           if (screen) {
-            navigation.replace(screen);
+            currentNavigation.replace(screen);
 
             log_info(
               `${LogPrefix} performing 'GO TO SCREEN' action to screen: ${screenId}`
@@ -210,7 +247,7 @@ export const useCallbackNavigationAction = (
         }
       }
     },
-    [item, navigation, rivers]
+    [item, rivers]
   );
 
   return overrideCallbackFromComponent || callbackAction;

package/zappFrameworkUtils/HookCallback/hookCallbackManifestExtensions.config.js

@@ -20,7 +20,7 @@ const callbackKeyPrefix = (key, prefix, keySeparator = "_") =>
 
 const extendManifestWithHookCallback = (prefix = null) => ({
   group: true,
-  label: "CallBack Navigation",
+  label: `CallBack Navigation: ${prefix}`,
   folded: true,
   fields: [
     {

package/reactHooks/componentsMap/index.ts

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-const layoutReducer = (state, { payload }) => {
-  return state.map((item, index, _state) => ({
-    height: index === payload.index ? payload.height : item.height,
-    y:
-      index > 0
-        ? _state.slice(0, index).reduce((acc, value) => acc + value.height, 0)
-        : 0,
-  }));
-};
-
-export const useComponentsLayout = (count, onFinishLoadingVisible) => {
-  const [itemsLayout, dispatchItemLayout] = React.useReducer(
-    layoutReducer,
-    Array.from({ length: count }, () => ({ height: 0, y: 0 }))
-  );
-
-  const notified = React.useRef(false);
-  const [listHeight, setListHeight] = React.useState<number>(0);
-
-  const onItemLayout = React.useCallback(
-    (index) => (event) => {
-      const { height } = event.nativeEvent.layout;
-      dispatchItemLayout({ payload: { index, height } });
-    },
-    []
-  );
-
-  const onListLayout = React.useCallback((event) => {
-    const { height } = event.nativeEvent.layout;
-    setListHeight(height);
-  }, []);
-
-  React.useEffect(() => {
-    if (!notified.current) {
-      const finishLoadingVisible = !!itemsLayout.find(
-        (item) => item.y > listHeight
-      );
-
-      if (finishLoadingVisible) {
-        notified.current = true;
-        onFinishLoadingVisible?.();
-      }
-    }
-  }, [itemsLayout, listHeight]);
-
-  return React.useMemo(
-    () => ({
-      onItemLayout,
-      onListLayout,
-    }),
-    []
-  );
-};