@applicaster/zapp-react-native-utils 15.0.0-rc.99 → 16.0.0-rc.1

package/README.md

@@ -245,12 +245,6 @@ const connectionType = useConnectionInfo(true);
 
 `@applicaster/zapp-react-native/reactHooks`
 
-- `useFeedRefresh: ({ reloadData: function, component: { id: boolean | string, rules: {enable_data_refreshing: boolean, refreshing_interval: number} } }) => void` - Hook will call `reloadData` function, in the specified intervals if `enable_data_refreshing` is set to true;
-
-```javascript
-useFeedRefresh({ reloadData, component });
-```
-
 - `useFeedLoader: ({ feedUrl: string, pipesOptions?: { clearCache?: boolean, loadLocalFavourites?: boolean, silentRefresh?: boolean} }) => ({data: ?ApplicasterFeed, loading: boolean, url: string, error: Error,reloadData: (silentRefresh?: boolean) => void, loadNext: () => void})` - Hook will load data to the redux store and return a feed for the provided DSP URL. If the data for the provided url was already loaded, it will return that value
 
 ```javascript

package/actionUtils/index.ts

@@ -0,0 +1,7 @@
+import { Image } from "react-native";
+import { isTV } from "../reactUtils";
+
+export const resolveDefaultAssetUri = (source: string | number): string =>
+  isTV()
+    ? (source as string)
+    : Image.resolveAssetSource(source as number)?.uri || "";

package/actionsExecutor/ActionExecutorContext.tsx

@@ -24,6 +24,10 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation, useRivers } from "../reactHooks";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "../reactHooks/feed/useInflatedUrl";
 
 import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
@@ -104,12 +108,42 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      const dataSource =
-        context?.component?.data?.source ||
-        findParentComponent(context?.component.id, context?.screenData)?.data
-          ?.source;
+      const parentComponent = findParentComponent(
+        context?.component?.id,
+        context?.screenData
+      );
+
+      const componentSource = context?.component?.data?.source;
 
-      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
+      const componentData = componentSource
+        ? context.component.data
+        : parentComponent?.data;
+
+      const source = componentData?.source;
+      const mapping = componentData?.mapping;
+
+      let dataSource = source;
+
+      if (source && mapping) {
+        dataSource =
+          getInflatedDataSourceUrl({
+            source,
+            contexts: {
+              entry: context?.entryContext,
+              screen: context?.screenData,
+              search: getSearchContext(null, mapping),
+            },
+            mapping,
+          }) || source;
+      }
+
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
+        source,
+        inflatedUrl: dataSource,
+        mapping,
+        entryContextId: context?.entryContext?.id,
+        entryId: context?.entry?.id,
+      });
 
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal
@@ -315,6 +349,44 @@ export function withActionExecutor(Component) {
             return ActionResult.Error;
           }
 
+          const navigationAction = action.options?.navigationAction;
+          const entrySource = action.options?.entry;
+
+          const entry = entrySource
+            ? entrySource === "@{entry/}"
+              ? context?.entry
+              : entrySource
+            : null;
+
+          if (entry) {
+            if (typeof entry !== "object") {
+              log_error(
+                `navigateToScreen: entry option is not an object, entry: ${entry}`
+              );
+
+              return ActionResult.Error;
+            }
+
+            log_info(
+              `navigateToScreen: navigating to screen type: ${screenType} with entry id: ${entry.id}`
+            );
+
+            const overriddenEntry = {
+              ...entry,
+              type: {
+                value: screenType,
+              },
+            };
+
+            if (navigationAction === "push") {
+              navigator.push(overriddenEntry);
+            } else {
+              navigator.replace(overriddenEntry);
+            }
+
+            return ActionResult.Success;
+          }
+
           const screenId = contentTypes?.[screenType]?.screen_id || null;
 
           if (!screenId) {
@@ -334,7 +406,12 @@ export function withActionExecutor(Component) {
           }
 
           context?.callback?.({ success: false, error: null, abort: true });
-          navigator.replace(river);
+
+          if (navigationAction === "push") {
+            navigator.push(river);
+          } else {
+            navigator.replace(river);
+          }
 
           return ActionResult.Success;
         }

package/appUtils/HooksManager/index.ts

@@ -11,6 +11,10 @@ import { HOOKS_EVENTS, HOOKS_TYPE } from "./constants";
 
 import { hooksManagerLogger } from "./logger";
 import { HookManager, HookManagerArgs } from "./types";
+import {
+  actionExecutor,
+  ActionResult,
+} from "../../actionsExecutor/ActionExecutor";
 
 /**
  * orders the hooks according to their weight
@@ -280,6 +284,8 @@ export function HooksManager({
           {}
         );
 
+        actionExecutor.unregisterAction("finishHook");
+
         return;
       }
 
@@ -294,6 +300,8 @@ export function HooksManager({
           }
         );
 
+        actionExecutor.unregisterAction("finishHook");
+
         return hookPlugin.setStateAndNotify(HOOKS_EVENTS.ERROR, {
           error,
           hookPlugin,
@@ -316,6 +324,8 @@ export function HooksManager({
         // TODO: Temporary hack to pass getLoginProtocol to other plugins to refresh in case token expired, need be deleted later
         delete payload.getLoginProtocol;
 
+        actionExecutor.unregisterAction("finishHook");
+
         hookPlugin.setStateAndNotify(HOOKS_EVENTS.CANCEL, {
           hookPlugin,
           payload,
@@ -381,6 +391,27 @@ export function HooksManager({
     };
   }
 
+  function registerFinishHookAction(payload, callback) {
+    // Ensure no stale finishHook remains (e.g. presentUI re-entry from runInBackground)
+    actionExecutor.unregisterAction("finishHook");
+
+    actionExecutor.registerAction("finishHook", async (action: ActionType) => {
+      const { success, errorMessage, abort } = action.options;
+
+      actionExecutor.unregisterAction("finishHook");
+
+      if (errorMessage) {
+        callback({ success, error: new Error(errorMessage), payload, abort });
+      } else {
+        callback({ success, error: null, payload, abort });
+      }
+
+      hooksManagerLogger.info("finishHook action executed, finishing flow");
+
+      return ActionResult.Success;
+    });
+  }
+
   /**
    * presents a screen hook by triggering an event invoking the handler with
    * the appropriate route & payload
@@ -408,6 +439,8 @@ export function HooksManager({
       }
     );
 
+    registerFinishHookAction(payload, callback);
+
     hookPlugin.setStateAndNotify(HOOKS_EVENTS.PRESENT_SCREEN_HOOK, {
       hookPlugin,
       route: targetScreenRoute,
@@ -467,6 +500,8 @@ export function HooksManager({
         }
       );
 
+      registerFinishHookAction(payload, callback);
+
       hookPlugin.module.runInBackground(
         payload,
         callback,

package/appUtils/focusManager/treeDataStructure/Tree/__tests__/Tree.test.js

@@ -373,3 +373,49 @@ describe("addNode", () => {
     checkParents(tree.root);
   });
 });
+
+describe("findInTree", () => {
+  function createNode(id, children) {
+    return {
+      id,
+      children,
+    };
+  }
+
+  it("returns a direct child match from root children", () => {
+    const tree = new Tree(treeLoaded);
+    const direct = createNode("direct-node");
+
+    tree.root.children = [direct];
+
+    expect(tree.findInTree("direct-node")).toEqual(direct);
+  });
+
+  it("returns a nested descendant match", () => {
+    const tree = new Tree(treeLoaded);
+    const nested = createNode("nested-node");
+    const intermediate = createNode("intermediate-node", [nested]);
+    const rootNode = createNode("root-node", [intermediate]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("nested-node")).toEqual(nested);
+  });
+
+  it("returns null when node id does not exist", () => {
+    const tree = new Tree(treeLoaded);
+    const leaf = createNode("leaf-node");
+    const rootNode = createNode("root-node", [leaf]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("missing-node")).toEqual(null);
+  });
+
+  it("returns null when tree has no children", () => {
+    const tree = new Tree(treeLoaded);
+    tree.root.children = null;
+
+    expect(tree.findInTree("any-node")).toEqual(null);
+  });
+});

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -205,31 +205,31 @@ export class Tree {
    * @returns founded node or null
    */
   findInTree(id) {
-    const retVal = null;
-
-    return this.findInArray(id, this.root.children, retVal);
+    return this.findInArray(id, this.root.children);
   }
 
-  findInArray(id, children, retVal) {
-    if (!retVal && children) {
-      retVal = children.find((obj) => obj.id === id);
+  findInArray(id, children) {
+    if (!children) {
+      return null;
+    }
 
-      if (!retVal) {
-        children.forEach((child) => {
-          if (child.children) {
-            retVal = this.findInArray(id, child.children, retVal);
+    const directMatch = children.find((obj) => obj.id === id);
 
-            if (retVal) {
-              return retVal;
-            }
-          }
-        });
-      } else {
-        return retVal;
+    if (directMatch) {
+      return directMatch;
+    }
+
+    for (const child of children) {
+      if (child.children) {
+        const nestedMatch = this.findInArray(id, child.children);
+
+        if (nestedMatch) {
+          return nestedMatch;
+        }
       }
     }
 
-    return retVal;
+    return null;
   }
 
   /**

package/appUtils/focusManagerAux/utils/index.ts

@@ -13,7 +13,7 @@ import {
 
 import {
   getFocusableId,
-  SCREEN_PICKER_CONTAINER,
+  isTabsScreenContentContainerId,
 } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 // run check each 300 ms
@@ -24,8 +24,6 @@ const isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
 const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
 const isRoot = (node) => node?.id === "root";
 
-const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
-
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -136,7 +134,7 @@ export const isTabsScreenOnContentFocused = (node) => {
     return false;
   }
 
-  if (isScrenPicker(node)) {
+  if (isTabsScreenContentContainerId(node?.id)) {
     return true;
   }
 
@@ -144,6 +142,10 @@ export const isTabsScreenOnContentFocused = (node) => {
 };
 
 export const isCurrentFocusOnMenu = (node) => {
+  if (isNil(node)) {
+    return false;
+  }
+
   if (isRoot(node)) {
     return false;
   }
@@ -156,10 +158,14 @@ export const isCurrentFocusOnMenu = (node) => {
     return false;
   }
 
-  return isCurrentFocusOnMenu(node.parent);
+  return isCurrentFocusOnMenu(node?.parent);
 };
 
 export const isCurrentFocusOnContent = (node) => {
+  if (isNil(node)) {
+    return false;
+  }
+
   if (isRoot(node)) {
     return false;
   }
@@ -172,7 +178,7 @@ export const isCurrentFocusOnContent = (node) => {
     return true;
   }
 
-  return isCurrentFocusOnContent(node.parent);
+  return isCurrentFocusOnContent(node?.parent);
 };
 
 export const isCurrentFocusOn = (id, node) => {

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

@@ -106,9 +106,8 @@ const focusableNativeViewRegistration = ({ focusableView, focusableGroup }) => {
   );
 };
 
-export const firstFocusableViewRegistrationFactory = () =>
+export const firstFocusableViewInContentRegistrationFactory = () =>
   focusableViewRegistrationSubject$.pipe(
-    take(1), // we care about only first FocusableView registration
     switchMap((focusableView) =>
       // start waiting registration of its parent FocusableGroup
       focusableGroupRegistrationSubject$.pipe(
@@ -126,7 +125,11 @@ export const firstFocusableViewRegistrationFactory = () =>
         focusableView,
         focusableGroup,
       })
-    )
+    ),
+    filter(({ focusableView }) =>
+      isPartOfContent(focusManager.focusableTree, focusableView.id)
+    ),
+    take(1) // we care about only first FocusableView registration
   );
 
 // registration on RN level(into RN focusManager)

package/appUtils/localizationsHelper.ts

@@ -85,6 +85,10 @@ export const toDayJSLocaleMap = (code) => {
     tt: null,
     "es-LA": "es",
     "en-UK": "en-gb",
+    "en-ZA": null,
+    "en-NG": null,
+    "en-ZW": null,
+    "en-ZM": null,
   };
 
   if (map[code] === null) {

package/appUtils/playerManager/index.ts

@@ -33,6 +33,7 @@ function deprecationWarning(method) {
 export interface PlayerLifecycleListener {
   onRegistered?: (player: Player) => void;
   onUnRegistered?: (player: Player) => void;
+  onCastingChanged?: (isCasting: boolean) => void;
 }
 
 type PlayersMap = {
@@ -253,10 +254,18 @@ export class PlayerManager {
 
   public registerCastingReceiver(receiver: Player) {
     this.castingReceiver = receiver;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(true);
+    });
   }
 
   public unregisterCastingReceiver() {
     this.castingReceiver = null;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(false);
+    });
   }
 
   /**

package/appUtils/playerManager/player.ts

@@ -258,7 +258,7 @@ export class Player {
   };
 
   isAd = () => {
-    return !!this.playerState.adState || this.playerState.isInAdBreak;
+    return !!this.playerState.adState || !!this.playerState.isInAdBreak;
   };
 
   isSeeking = () => {

package/appUtils/playerManager/playerNative.ts

@@ -229,8 +229,9 @@ export class PlayerNative extends Player {
   };
 
   closeNativePlayer = () => {
-    // TODO: Delete does not work
+    // TODO: Delete, does not work (component is null)
     this.currentPlayerComponent()?.closeNativePlayer?.();
+    this.getPlayerModule()?.stopBackgroundPlayback?.();
   };
 
   togglePlayPause = () => {

package/appUtils/playerManager/usePlayer.tsx

@@ -22,7 +22,6 @@ export const usePlayer = (playerId?: string): Player => {
 
   const isCasting = playerManager.isCasting();
 
-  // TODO: We need to prerender when we start/stop casting, fix this
   const getPlayer = (playerId, isCasting) =>
     getControlledPlayer(playerId, isCasting);
 
@@ -46,7 +45,7 @@ export const usePlayer = (playerId?: string): Player => {
     return playerManager.addLifecycleListener({
       onRegistered: (player) => {
         if (playerIdToUse === player.playerId) {
-          setPlayer(getPlayer(playerIdToUse, isCasting));
+          setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
         }
       },
       onUnRegistered: (player) => {
@@ -54,8 +53,11 @@ export const usePlayer = (playerId?: string): Player => {
           setPlayer(null);
         }
       },
+      onCastingChanged: () => {
+        setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
+      },
     } as PlayerLifecycleListener);
-  }, [playerIdToUse, isCasting]);
+  }, [playerIdToUse]);
 
   return player;
 };

package/cellUtils/__tests__/cellUtils.test.ts

@@ -3,6 +3,7 @@ import {
   ifEmptyUseFallback,
   textTransform,
   getKeyForLabel,
+  getDataTransformForLabel,
   getLabel,
   getAspectRatio,
   getCellWidth,
@@ -56,6 +57,44 @@ describe("getKeyForLabel", () => {
   });
 });
 
+describe("getDataTransformForLabel", () => {
+  it("returns dataKey when dataKey is not other", () => {
+    expect(getDataTransformForLabel(VAL.dataKey, VAL.customKey)).toEqual(
+      VAL.dataKey
+    );
+  });
+
+  it("returns customKey when dataKey is other", () => {
+    expect(getDataTransformForLabel(VAL.other, VAL.customKey)).toEqual(
+      VAL.customKey
+    );
+  });
+
+  it("preserves full date formats containing dots", () => {
+    expect(getDataTransformForLabel(VAL.other, "DD.MM.YYYY")).toEqual(
+      "DD.MM.YYYY"
+    );
+  });
+
+  it("returns default date format when selected key is null or undefined", () => {
+    expect(getDataTransformForLabel(EMPTY.nulls, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(EMPTY.undef, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.nulls)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.undef)).toEqual(
+      "DD/MM/YYYY"
+    );
+  });
+});
+
 describe("getLabel", () => {
   it("returns a string from dataKey's path", () => {
     expect(getLabel(VAL.dataKey, VAL.customKey)(entry)).toEqual(entry.id);

package/cellUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import dayjs from "dayjs";
+import { dayjs } from "../dateUtils";
 import validateColor from "validate-color";
 
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
@@ -31,6 +31,16 @@ export const getKeyForLabel = (dataKey, customKey) => {
   return keyToUse.split(".");
 };
 
+/**
+ * Provides `format` for date formatting. Returns customKey if dataKey is "other", otherwise it returns dataKey.
+ * Should consist of valid dayjs tokens - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+ */
+export const getDataTransformForLabel = (dataKey, customKey) => {
+  const keyToUse = dataKey === CUSTOM_KEY ? customKey : dataKey;
+
+  return keyToUse ?? "DD/MM/YYYY";
+};
+
 /**
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition

package/componentsUtils/index.ts

@@ -1,3 +1,5 @@
+import { last } from "@applicaster/zapp-react-native-utils/utils";
+
 const GROUP = "group-qb";
 const GROUP_INFO = "group-info-qb";
 const GROUP_INFO_OLD = "group-info";
@@ -29,6 +31,12 @@ export const isFirstComponentGallery = (
   return isGallery(components?.[0]);
 };
 
+export const isLastComponentGallery = (
+  components: ZappUIComponent[]
+): boolean => {
+  return isGallery(last(components));
+};
+
 export const isGroup = (item): boolean => item?.component_type === GROUP;
 
 export const isEmptyGroup = (item): boolean =>

package/dateUtils/__tests__/dayjs.test.ts

@@ -1,7 +1,4 @@
 import { dayjs } from "../index";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-
-dayjs.extend(customParseFormat);
 
 describe("dayjs", () => {
   describe("basic functionality", () => {

package/dateUtils/index.ts

@@ -4,12 +4,14 @@ import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
 import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
+import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
 dayjs.extend(duration);
+dayjs.extend(customParseFormat);
 
 dayjs.extend(relativeTime, {
   thresholds: [

package/manifestUtils/_internals/__tests__/index.test.js

@@ -0,0 +1,41 @@
+const {
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
+} = require("..");
+
+describe("manifestUtils/_internals helpers", () => {
+  it("checks a key suffix", () => {
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_button_enabled")
+    ).toBe(true);
+
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_assign_action")
+    ).toBe(false);
+  });
+
+  it("checks key against multiple suffixes", () => {
+    const suffixes = ["font_color", "focused_font_color", "text_transform"];
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_text_transform")
+    ).toBe(true);
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_asset_alignment")
+    ).toBe(false);
+  });
+
+  it("generates stable key names using a prefix", () => {
+    const withMobileButtonPrefix = getKeyWithPrefixGenerator("mobile_button_2");
+
+    expect(withMobileButtonPrefix("display_mode")).toBe(
+      "mobile_button_2_display_mode"
+    );
+
+    expect(withMobileButtonPrefix("asset_enabled")).toBe(
+      "mobile_button_2_asset_enabled"
+    );
+  });
+});