@applicaster/zapp-react-native-utils 12.0.0-alpha.4837064762 → 12.0.0-alpha.4840257570

package/analyticsUtils/AnalyticsEvents/index.ts

@@ -7,6 +7,10 @@ import { sendHeaderClickEvent } from "./sendHeaderClickEvent";
 import { sendHardwareBackButtonClickEvent } from "./sendHardwareBackButtonClickEvent";
 import { sendDownloadsEvent } from "./sendDownloadsEvent";
 import { sendScreenEvent } from "./sendScreenEvent";
+import {
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
+} from "./searchEvents";
 
 export {
   sendScreenEvent,
@@ -18,4 +22,6 @@ export {
   sendHeaderClickEvent,
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 };

package/analyticsUtils/AnalyticsEvents/searchEvents.ts

@@ -0,0 +1,21 @@
+import { log_debug } from "../logger";
+import { postAnalyticEvent } from "../manager";
+import { ANALYTICS_CORE_EVENTS } from "../events";
+
+export const sendSearchCanceledEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_CANCELED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchCanceledEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};
+
+export const sendSearchExecutedEvent = (analyticsProps) => {
+  const eventName = ANALYTICS_CORE_EVENTS.SEARCH_EXECUTED;
+  postAnalyticEvent(eventName, analyticsProps);
+
+  log_debug(`sendSearchExecutedEvent: send event: ${eventName}`, {
+    analyticsProps,
+  });
+};

package/analyticsUtils/events.ts

@@ -23,10 +23,16 @@ export const TAPPING_EVENTS = {
   TAP_NAVBAR_BACK_BUTTON: "tap_navbar_back_button",
 };
 
+export const SEARCH_EVENTS = {
+  SEARCH_EXECUTED: "search_executed",
+  SEARCH_CANCELED: "search_canceled",
+};
+
 export const ANALYTICS_CORE_EVENTS = {
   ...LEGACY_EVENTS,
   ...SCREEN_VIEW_EVENTS,
   ...TAPPING_EVENTS,
+  ...SEARCH_EVENTS,
 };
 
 export const WEBVIEW_EVENTS = {

package/analyticsUtils/index.tsx

@@ -18,6 +18,8 @@ import {
   sendHardwareBackButtonClickEvent,
   sendDownloadsEvent,
   sendScreenEvent,
+  sendSearchCanceledEvent,
+  sendSearchExecutedEvent,
 } from "./AnalyticsEvents";
 
 import { postAnalyticEvent } from "./manager";
@@ -66,6 +68,8 @@ type AnalyticsFunctions = {
     item: ZappEntry;
     state: OfflineItemState;
   }) => void;
+  sendSearchCanceledEvent: (props: AnalyticsDefaultProperties) => void;
+  sendSearchExecutedEvent: (props: AnalyticsDefaultProperties) => void;
 };
 
 type GetAnalyticsFunctions = (
@@ -102,6 +106,8 @@ export function getAnalyticsFunctions({
     sendHardwareBackButtonClickEvent,
     sendScreenEvent,
     sendDownloadsEvent,
+    sendSearchCanceledEvent,
+    sendSearchExecutedEvent,
   };
 }
 

package/appUtils/focusManager/index.ts

@@ -1,6 +1,4 @@
 import * as R from "ramda";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
-
 import { Tree } from "./treeDataStructure/Tree";
 import { findFocusableNode, findPriorityItem } from "./treeDataStructure/Utils";
 import { subscriber } from "../../functionUtils";
@@ -19,22 +17,6 @@ const isFocusEnabled = (focusableItem): boolean => {
   return true;
 };
 
-const waitUntil = (conditionFn) => {
-  let interval;
-  return new Promise((resolve, reject) => {
-    interval = setInterval(() => {
-      if (conditionFn()) {
-        clearInterval(interval);
-        resolve(undefined);
-      }
-    }, 1000);
-
-    setTimeout(() => {
-      reject();
-    }, 2500);
-  });
-};
-
 /**
  * The focusManager is meant to keep references of focusables elements in the UI, and provide
  * ways to assign the focus to one of the focusables.
@@ -64,7 +46,7 @@ export const focusManager = (function () {
   let lastFocusedId = null;
   let initialFocusOnContent = null;
   let focusDisabled = false;
-  let focusAutoEnabled = false;
+  let focusAutoEnabled = true;
   const eventHandler = subscriber();
 
   function disableAutomaticFocus() {
@@ -111,7 +93,7 @@ export const focusManager = (function () {
       !currentFocusable.isGroup &&
       currentFocusable.isMounted()
     ) {
-      currentFocusable.blur(direction);
+      currentFocusable.blur(currentFocusable, direction);
       currentFocusable.hasLostFocus(getCurrentFocus(), direction);
     }
   }
@@ -244,41 +226,31 @@ export const focusManager = (function () {
 
     logger.log({ message: "setInitialFocus", data: { preferredFocus } });
 
-    if (isNilOrEmpty(preferredFocus)) {
-      return;
-    }
-
-    const focusCandidate = preferredFocus[0];
-    const focusableItem = focusCandidate.component;
-
-    const currentFocusedId = R.path(["props", "id"], getCurrentFocus());
-    const nextFocusedId = R.path(["props", "id"], focusableItem);
+    if (preferredFocus && preferredFocus.length > 0) {
+      const focusCandidate = preferredFocus[0];
+      const focusableItem = focusCandidate.component;
+
+      if (
+        focusableItem &&
+        !focusableItem.isGroup &&
+        isFocusEnabled(focusableItem)
+      ) {
+        if (initialFocusOnContent) {
+          blur();
+          initialFocusOnContent = false;
+        }
 
-    if (currentFocusedId === nextFocusedId) {
-      // we are going to move focus to the same node(already focused) -> nothing to do
-      return;
-    }
+        logger.log({
+          message: "setInitialFocus – currentFocusNode",
+          data: {
+            focusableItem,
+          },
+        });
 
-    if (
-      focusableItem &&
-      !focusableItem.isGroup &&
-      isFocusEnabled(focusableItem)
-    ) {
-      if (initialFocusOnContent) {
-        blur();
-        initialFocusOnContent = false;
+        currentFocusNode = focusCandidate;
+        focusableItem.willReceiveFocus(focusableItem, null);
+        focusableItem && setFocus(focusCandidate.id, null);
       }
-
-      logger.log({
-        message: "setInitialFocus – currentFocusNode",
-        data: {
-          focusableItem,
-        },
-      });
-
-      currentFocusNode = focusCandidate;
-      focusableItem.willReceiveFocus(focusableItem, null);
-      focusableItem && setFocus(focusCandidate.id, null);
     }
   }
 
@@ -351,8 +323,6 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerGroup(id, component) {
-    // console.log("debug_2", "FM registerGroup", { id, component });
-
     focusableTree.addNode({ id, component });
 
     return component;
@@ -368,8 +338,6 @@ export const focusManager = (function () {
    * @returns {React.Component} the registered component
    */
   function registerItem(id, component) {
-    // console.log("debug_2", "FM registerItem", { id, component });
-
     focusableTree.addNode({ id, component });
 
     if (!currentFocusNode && id === lastFocusedId && !id.includes("menu")) {
@@ -386,8 +354,6 @@ export const focusManager = (function () {
    * @param {String} id of the group to unregister
    */
   function unregisterGroup(id) {
-    // console.log("debug_2", "FM unregisterGroup", { id });
-
     focusableTree.findAndRemoveNode(id);
   }
 
@@ -399,8 +365,6 @@ export const focusManager = (function () {
    * @param {String} id of the Focusable to unregister
    */
   function unregisterItem(id) {
-    // console.log("debug_2", "FM unregisterItem", { id });
-
     focusableTree.findAndRemoveNode(id);
 
     if (currentFocusNode && currentFocusNode.id === id) {
@@ -439,8 +403,6 @@ export const focusManager = (function () {
   }
 
   function setupInitialFocus(id: string, focusOnContent?: boolean) {
-    console.log("debug_2", "FM - setupInitialFocus", { id, focusOnContent });
-
     if (focusOnContent) {
       initialFocusOnContent = focusOnContent;
     } else {
@@ -448,62 +410,6 @@ export const focusManager = (function () {
     }
   }
 
-  function setFocusOnMenu() {
-    const activeScreen = R.last(focusableTree.root.children);
-    const navbar = R.find(
-      (child) => R.startsWith("navbar", child.id),
-      activeScreen.children
-    );
-
-    const selectedMenuItemId = R.find(
-      (child) => child.component.props.selected,
-      navbar?.children || []
-    )?.id;
-
-    if (selectedMenuItemId) {
-      // set focus on selected menu item
-      setFocus(selectedMenuItemId);
-      return;
-    }
-
-    const firstMenuItemId = R.path(["children", 0, "id"], navbar);
-
-    if (firstMenuItemId) {
-      // set focus on first menu item
-      setFocus(firstMenuItemId);
-    }
-  }
-
-  function setFocusOnContent() {
-    // we need to put focus on content here
-    // For doing it we have to wait registration of first focusable node into focusableTree
-    // this is the temporary hack with waiting until content node starts having children
-    const getContentNode = () => {
-      const activeScreen = R.last(focusableTree.root.children);
-      const content = R.find(
-        (child) => R.startsWith("content", child.id),
-        activeScreen.children
-      );
-
-      return content;
-    };
-
-    const contentHasAnyChildren = () => {
-      return getContentNode()?.children.length > 0;
-    };
-
-    waitUntil(contentHasAnyChildren)
-      .then(() => {
-        const content = getContentNode();
-
-        setInitialFocus(content);
-      })
-      .catch(() => {
-        // we failed to wait any content, put focus on menu as a last chance
-        setFocusOnMenu();
-      });
-  }
-
   /**
    * moves the focus in a provided direction
    * @public
@@ -516,13 +422,6 @@ export const focusManager = (function () {
       currentFocusNode.component.willLoseFocus(currentFocusNode, direction);
       const nextFocusable = findFocusableNode(direction, currentFocusNode);
 
-      console.log("debug_2", "FM moveFocus", {
-        direction: direction?.value,
-        currentFocusNode,
-        focusableTree,
-        nextFocusable,
-      });
-
       if (nextFocusable?.component?.isMounted?.()) {
         const nextRect = nextFocusable.component.getRect();
 
@@ -619,7 +518,5 @@ export const focusManager = (function () {
     enableAutomaticFocus,
     getGroupRootById,
     isGroupItemFocused,
-    setFocusOnMenu,
-    setFocusOnContent,
   };
 })();

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

@@ -1,4 +1,4 @@
-import { allPass, pathOr, startsWith, isNil } from "ramda";
+import * as R from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 import { rejectItemByPath } from "../../../../objectUtils";
@@ -143,49 +143,7 @@ const hasChildren = (target) =>
 
 const hasComponent = (target) => !!target?.component;
 
-const hasComponentAndChildren = allPass([hasComponent, hasChildren]);
-
-const positiveOrZero = (value) => value >= 0;
-
-const excludeFromFocusSearching = pathOr(false, [
-  "component",
-  "props",
-  "excludeFromFocusSearching",
-]);
-
-// const isAllScreens = all(excludeFromFocusSearching);
-
-const isNavBar = (target) => startsWith("navbar", target?.id);
-
-const ignoreMenuIfMultipleTargets = (nodes) => {
-  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
-    return nodes.filter((n) => !isNavBar(n?.target));
-  }
-
-  return nodes;
-};
-
-const toDistance = ({ target, direction, comparisonRect }) => {
-  const componentRect = target.component?.getRect();
-
-  const orientationDistance = measureDistance(
-    direction,
-    comparisonRect,
-    componentRect
-  );
-
-  if (orientationDistance === -1) {
-    // ignores offscreen targets when moving up/down
-    return null;
-  }
-
-  const euclidDistance = measureEuclidianDistanceToCenter(
-    comparisonRect,
-    componentRect
-  );
-
-  return orientationDistance > 0 ? euclidDistance : orientationDistance;
-};
+const hasComponentAndChildren = R.allPass([hasComponent, hasChildren]);
 
 /**
  * Get target in shortest distance in specified direction
@@ -215,32 +173,52 @@ export function getTargetInDirection(
 
   const distances = targets
     .filter(hasComponentAndChildren)
-    .filter((target) => !excludeFromFocusSearching(target))
-    .map((target) => ({
-      distance: toDistance({ target, direction, comparisonRect }),
-      target,
-    }))
-    .filter(({ distance }) => positiveOrZero(distance));
+    .map((target) => {
+      const componentRect = target.component?.getRect();
+
+      const distance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      if (distance === -1) {
+        // ignores offscreen targets when moving up/down
+        return null;
+      }
 
-  // if (isAllScreens(targets)) {
-  //   return last(targets);
-  // }
+      const orientationDistance = measureDistance(
+        direction,
+        comparisonRect,
+        componentRect
+      );
+
+      const euclidDistance = measureEuclidianDistanceToCenter(
+        comparisonRect,
+        componentRect
+      );
+
+      return {
+        distance:
+          orientationDistance > 0 ? euclidDistance : orientationDistance,
+        target,
+      };
+    })
+    .filter((obj) => obj && obj.distance >= 0);
 
   const match = distances
     .sort((a, b) => a.distance - b.distance) // sorts the distances
     .filter(ignoreMenuIfMultipleTargets)[0]; // filters out multiple targets if necessary // gets the first element
 
-  // console.log("debug_2", "FM getTargetInDirection", {
-  //   direction: direction?.value,
-  //   currentNode,
-  //   targetNodes,
-  //   targets,
-  //   comparisonRect,
-  //   distances,
-  //   match,
-  // });
-
-  return match?.target;
+  return distances && distances.length > 0 ? match.target : null;
+}
+
+function ignoreMenuIfMultipleTargets(nodes) {
+  if (nodes.length > 1 && nodes.map((n) => n?.target?.id).includes("navbar")) {
+    return nodes.filter((n) => n?.target?.id !== "navbar");
+  }
+
+  return nodes;
 }
 
 /**
@@ -331,36 +309,3 @@ export function hasPriorityInDirection(direction, component) {
 
   return (prioritiseFocusOn & mappedDirection) > 0;
 }
-
-export const getNodeBeforeRoot = (node) => {
-  if (isNil(node)) {
-    return undefined;
-  }
-
-  if (node.parent.id === "root") {
-    return node;
-  }
-
-  return getNodeBeforeRoot(node.parent);
-};
-
-export const isAllowedToMoveTo = (currentNode, nextNode) => {
-  const screenForCurrentNode = getNodeBeforeRoot(currentNode);
-  const screenForNextNode = getNodeBeforeRoot(nextNode);
-
-  return screenForCurrentNode.id === screenForNextNode.id;
-
-  // console.log("debug_2", "isAllowedToMoveTo", {
-  //   nodeBeforeRoot,
-  // });
-
-  // if (nodeBeforeRoot?.id === "navbar") {
-  //   return true;
-  // }
-
-  // if (nodeBeforeRoot?.component?.props?.isActive) {
-  //   return true;
-  // }
-
-  // return false;
-};

package/appUtils/keyCodes/keys.web.js

@@ -1,6 +1,7 @@
 /* global tizen */
 const isTizen = typeof tizen !== "undefined";
 
+import { isVizioPlatform } from "@applicaster/zapp-react-dom-app/App/Loader/utils/platform";
 import * as platformKeys from "./keysByPlatform";
 import { Platform } from "react-native";
 
@@ -21,6 +22,13 @@ export const ARROW_KEYS = [
   KEYS.ArrowRight,
 ];
 
+/**
+ * Platform.OS currently identifies Vizio as LG_TV, therefore we are using isVizioPlatform to identify platform and add keys.
+ */
+if (isVizioPlatform()) {
+  Object.assign(KEYS, platformKeys.vizio);
+}
+
 /**
  * In TizenOS we need to register all of the keys that we are going to use.
  * You need to register using the name Tizen has for the key.

package/appUtils/keyCodes/keysByPlatform.js

@@ -102,4 +102,14 @@ const tvos = {
   Menu: { code: "Menu", eventType: "menu" },
 };
 
-export { lg_tv, samsung_tv, web, tvos, android_tv };
+const vizio = {
+  ...samsung_tv,
+  Exit: { code: "Exit", keyCode: 27 },
+  PageUp: { code: "PageUp", keyCode: 33 },
+  PageDown: { code: "PageDown", keyCode: 34 },
+  MediaTrackNext: { code: "MediaTrackNext", keyCode: 418 },
+  MediaTrackPrevious: { code: "MediaTrackPrevious", keyCode: 419 },
+  PrevCh: { code: "PrevCh", keyCode: 500 },
+};
+
+export { lg_tv, samsung_tv, web, tvos, android_tv, vizio };

package/cellUtils/__tests__/cellUtils.test.ts

@@ -24,7 +24,6 @@ import {
   EMPTY,
   FALLBACK,
   TRANSFORM,
-  defaultColor,
 } from "./fixtures";
 
 describe("getKeyForLabel", () => {
@@ -395,9 +394,7 @@ describe("getColorFromData", () => {
   it("should return value directly if valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: "background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "#123456",
     });
 
     expect(result).toBe("#123456");
@@ -406,9 +403,7 @@ describe("getColorFromData", () => {
   it("should return valid rgba color name", () => {
     const result = getColorFromData({
       data: entry,
-      key: "component_background_color",
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "rgba(255, 255, 255, 0)",
     });
 
     expect(result).toBe("rgba(255, 255, 255, 0)");
@@ -417,33 +412,27 @@ describe("getColorFromData", () => {
   it("should return path value if path value is set and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.colorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "background_color",
     });
 
     expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if key value and path value are invalid", () => {
+  it("should return path value if path value is set, nested and is valid color", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKey,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "extensions.background_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("#123456");
   });
 
-  it("should return defaultColor if path does not exist", () => {
+  it("should return valueFromLayout if path does not exist", () => {
     const result = getColorFromData({
       data: entry,
-      key: VAL.invalidColorKeyPath,
-      getValue: getValue(componentStyle),
-      defaultColor,
+      valueFromLayout: "invalid_color",
     });
 
-    expect(result).toBe(defaultColor);
+    expect(result).toBe("invalid_color");
   });
 });

package/cellUtils/index.ts

@@ -447,30 +447,24 @@ export const toResizeMode = (
 
 type GetColorFromData = {
   data: Record<string, any>;
-  key: string;
-  getValue: Function;
-  defaultColor: string;
+  valueFromLayout: string;
 };
 
 export const getColorFromData = ({
   data,
-  key,
-  getValue,
-  defaultColor,
+  valueFromLayout,
 }: GetColorFromData): string => {
-  const value = getValue(key);
-
   // Temporary hack to fix color validation when alpha is floating point number
   // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(value.replace(".00", ""))) {
-    return value;
+  if (validateColor(valueFromLayout.replace(".00", ""))) {
+    return valueFromLayout;
   }
 
-  const pathValue = R.path(value.split("."), data);
+  const pathValue = R.path(valueFromLayout.split("."), data);
 
   if (pathValue && validateColor(pathValue)) {
     return pathValue;
   }
 
-  return defaultColor;
+  return valueFromLayout;
 };

package/dateUtils/index.ts

@@ -0,0 +1,11 @@
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import isoWeek from "dayjs/plugin/isoWeek";
+
+// Extend dayjs with plugins
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(isoWeek);
+
+export { dayjs };

package/headersUtils/index.ts

@@ -28,5 +28,6 @@ export const getAppDataHeaders = (screenId: string) => {
     "x-applicaster-signed-device-info-token": appData.signedDeviceInfoToken,
     "x-applicaster-device-make": appData.deviceMake,
     "x-applicaster-device-model": appData.deviceModel,
+    "x-applicaster-uuid": appData?.uuid,
   };
 };

package/inflatedUrlUtils/index.ts

@@ -1,4 +1,4 @@
-import { last, head, isNil, includes, all, pathOr } from "ramda";
+import { last, head, isNil, includes, pathOr } from "ramda";
 
 const stripBrackets = (path) => {
   const withoutPrepened = last(path.split("{{"));
@@ -13,15 +13,15 @@ const hasValue = (context) => (path) => {
   return !isNil(value);
 };
 
-export const isEnoughDataToInflateString = (context, string): boolean => {
+export const getMissingValues = (context, string): string[] => {
   if (!includes("{{", string)) {
-    return true;
+    return [];
   }
 
   const SEARCH_REGEX = new RegExp(/{{.*?}}/g);
   const paths = string.toString().match(SEARCH_REGEX);
 
-  return all(hasValue(context), paths);
+  return paths.filter((path) => !hasValue(context)(path));
 };
 
 export const isNonInflatedUrl = (url: string): boolean =>

package/localizationUtils/__tests__/localizationUtils.test.ts

@@ -1,59 +1,59 @@
-import * as ReactNative from "react-native";
-
-const mocked_state = {
-  remoteConfigurations: { localizations: {} },
-  appData: {
-    languageCode: "en",
-    countryCode: "US",
-  },
-};
-
-let mocked_locale = ["en-US"];
-
-jest.doMock("react-redux", () => ({
-  useSelector: jest.fn((fn) => fn(mocked_state)),
-}));
+import { NativeModules } from "react-native";
 
-const SettingsManager = {
+const settingsManagerMock = {
   getConstants: jest.fn(() => ({
-    settings: { AppleLanguages: mocked_locale },
+    settings: { AppleLanguages: ["en-US"] },
   })),
 };
 
-const QuickBrickCommunicationModule = {
+const qbCommunicationModuleMock = {
   languageLocale: "en",
   countryLocale: "US",
+  uiLanguage: "en-US",
 };
 
-ReactNative.NativeModules.SettingsManager = SettingsManager;
-
-ReactNative.NativeModules.QuickBrickCommunicationModule =
-  QuickBrickCommunicationModule;
-
-const { useIsRTL } = require("../index");
+NativeModules.SettingsManager = settingsManagerMock;
+NativeModules.QuickBrickCommunicationModule = qbCommunicationModuleMock;
 
 describe("localizationUtils", () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+
   describe("when the app has a single locale", () => {
     describe("when the app has only a RTL language as locale", () => {
       beforeEach(() => {
-        mocked_state.remoteConfigurations.localizations = {
-          he: "http://url.com",
+        jest.resetModules();
+        const RN = require("react-native");
+
+        RN.NativeModules.QuickBrickCommunicationModule = {
+          languageLocale: "he",
+          countryLocale: "IL",
+          uiLanguage: "he-HE",
         };
       });
 
       it("useIsRTL returns true", () => {
+        const { useIsRTL } = require("../index");
         expect(useIsRTL()).toBe(true);
       });
     });
 
     describe("when the app has only a LTR language as locale", () => {
       beforeEach(() => {
-        mocked_state.remoteConfigurations.localizations = {
-          en: "http://url.com",
+        jest.resetModules();
+
+        const RN = require("react-native");
+
+        RN.NativeModules.QuickBrickCommunicationModule = {
+          languageLocale: "en",
+          countryLocale: "US",
+          uiLanguage: "en",
         };
       });
 
       it("useIsRTL returns false", () => {
+        const { useIsRTL } = require("../index");
         expect(useIsRTL()).toBe(false);
       });
     });
@@ -63,45 +63,56 @@ describe("localizationUtils", () => {
     describe("when device locale is in the app's locales", () => {
       describe("when device locale is LTR", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["en-US"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "en",
+            countryLocale: "US",
+            uiLanguage: "en-US",
+          };
         });
 
         it("useIsRTL returns false", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(false);
         });
       });
 
       describe("when device locale is RTL", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+          const RN = require("react-native");
 
-          mocked_locale = ["he-HE"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "IL",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });
 
       describe("when a device has a secondary language in a supported language", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            en: "http://url.com",
-            he: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["es-SP", "he-HE"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "IL",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });
@@ -110,30 +121,38 @@ describe("localizationUtils", () => {
     describe("when device locale is not in the app's locales", () => {
       describe("when first app locale is LTR", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            en: "http://url.com",
-            he: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["fr-FR"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "fr",
+            countryLocale: "FR",
+            uiLanguage: "fr-FR",
+          };
         });
 
         it("useIsRTL returns false", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(false);
         });
       });
 
       describe("when first app locale is RTL", () => {
         beforeEach(() => {
-          mocked_state.remoteConfigurations.localizations = {
-            he: "http://url.com",
-            en: "http://url.com",
-          };
+          jest.resetModules();
+
+          const RN = require("react-native");
 
-          mocked_locale = ["fr-FR"];
+          RN.NativeModules.QuickBrickCommunicationModule = {
+            languageLocale: "he",
+            countryLocale: "HE",
+            uiLanguage: "he",
+          };
         });
 
         it("useIsRTL returns true", () => {
+          const { useIsRTL } = require("../index");
           expect(useIsRTL()).toBe(true);
         });
       });

package/localizationUtils/index.ts

@@ -1,10 +1,9 @@
 import * as R from "ramda";
 import { ViewStyle } from "react-native";
-import { useSelector } from "react-redux";
 
-import { getDeviceLocales } from "./deviceLocales";
 import { useMemo } from "react";
 import { getUILanguage } from "../appUtils/localizationsHelper";
+import { utilsLogger } from "../logger";
 
 export {
   getLocale,
@@ -45,34 +44,26 @@ export function useLocalizedStrings({ localizations }) {
   return result;
 }
 
-function getLocaleToUse(languageCodes, localizations) {
-  const matchingLanguages = languageCodes.filter(
-    R.contains(R.__, localizations)
-  );
+export function getIsRTL(): boolean {
+  const uiLanguage = getUILanguage();
+
+  if (!uiLanguage) {
+    utilsLogger.error({ message: "getUILanguage returned null or undefined" });
 
-  if (matchingLanguages?.length) {
-    return R.head(matchingLanguages);
+    return false;
   }
 
-  return R.head(localizations);
-}
+  const [languageCode] = uiLanguage.split("-");
 
-export function getIsRTLFromLocalizations(localizations): boolean {
-  const deviceLocales = getDeviceLocales() || [];
-  const localeToUse = getLocaleToUse(deviceLocales, R.keys(localizations));
+  const lowerCaseLanguageCode = languageCode.toLocaleLowerCase();
 
-  return R.contains(localeToUse, RTL_LOCALES);
-}
+  const isRTL = R.contains(lowerCaseLanguageCode, RTL_LOCALES);
 
-const remoteConfigLocalizationSelector = R.path([
-  "remoteConfigurations",
-  "localizations",
-]);
+  return isRTL;
+}
 
 export function useIsRTL(): boolean {
-  const localizations = useSelector(remoteConfigLocalizationSelector);
-
-  return getIsRTLFromLocalizations(localizations);
+  return getIsRTL();
 }
 
 export const applyRTLStylesIfNeeded = (

package/numberUtils/index.ts

@@ -75,3 +75,7 @@ export const isLikeNumber = (value: any): boolean => {
 
 export const isZero = (value: unknown): boolean =>
   Object.is(value, -0) || Object.is(value, 0);
+
+export const isMinusZero = (value: number) => {
+  return 1 / value === -Infinity;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "12.0.0-alpha.4837064762",
+  "version": "12.0.0-alpha.4840257570",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.4837064762",
+    "@applicaster/applicaster-types": "12.0.0-alpha.4840257570",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/feed/__tests__/useInflatedUrl.test.ts

@@ -12,9 +12,21 @@ const {
 
 const { reactHooksLogger } = require("../../logger");
 
+let mockStore;
+
 describe("getInflatedDataSourceUrl", () => {
   beforeEach(() => {
     reactHooksLogger.warning.mockClear();
+
+    const {
+      appStore,
+    } = require("@applicaster/zapp-react-native-redux/AppStore");
+
+    mockStore = {
+      getState: jest.fn().mockReturnValue({ pipesEndpoints: {} }),
+    };
+
+    appStore.set(mockStore);
   });
 
   it("returns the url inflated with the right params", () => {
@@ -72,7 +84,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.id}} source: http://foo.com/show/seriesId={{seriesId}}",
       data: { source, contexts, mapping },
     });
   });
@@ -107,7 +120,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName}}",
       data: { source, contexts, mapping },
     });
   });
@@ -148,7 +162,8 @@ describe("getInflatedDataSourceUrl", () => {
     expect(reactHooksLogger.warning).toHaveBeenCalledTimes(1);
 
     expect(reactHooksLogger.warning).toHaveBeenCalledWith({
-      message: "Not enough data to fully inflate url",
+      message:
+        "Not enough data to fully inflate url: {{entry.extensions.groupName2}} source: https://zapp-1689-emmys.web.app/emmys/group-categories/{{groupName1}}?test={{groupName2}}",
       data: { source, contexts, mapping },
     });
   });

package/reactHooks/feed/useInflatedUrl.ts

@@ -9,9 +9,15 @@ import {
 
 import { inflateString } from "../../stringUtils";
 import { useRoute } from "../navigation";
-import { isEnoughDataToInflateString } from "../../inflatedUrlUtils";
+import { getMissingValues } from "../../inflatedUrlUtils";
 import { reactHooksLogger as logger } from "../logger";
 import { isTV } from "../../reactUtils";
+import {
+  findEndpointForURL,
+  HTTP_METHODS,
+} from "@applicaster/zapp-pipes-v2-client";
+import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { ENDPOINT_TAGS } from "../../types";
 
 /**
  * will match any occurrence in a string of one or more word characters
@@ -105,24 +111,47 @@ export const getInflatedDataSourceUrl: GetInflatedDataSourceUrl = ({
     R.keys(mapping)
   );
 
-  if (!isEnoughDataToInflateString(contexts, string)) {
-    const message = "Not enough data to fully inflate url";
+  const missingValues = getMissingValues(contexts, string);
 
-    // todo: add js only payload instead
-    if (__DEV__) {
-      logger.warning({
-        message,
-        data: { source, contexts, mapping },
-      });
+  if (missingValues && missingValues.length > 0) {
+    const pipesEndpoints = appStore.get("pipesEndpoints");
+
+    const endpointURL = findEndpointForURL(
+      source,
+      pipesEndpoints,
+      HTTP_METHODS.GET
+    );
+
+    const tags = pipesEndpoints?.[endpointURL]?.tags;
+    const allowMissingKeys = tags?.includes(ENDPOINT_TAGS.allow_missing_keys);
+
+    if (!allowMissingKeys) {
+      const message = `Not enough data to fully inflate url: ${missingValues.join(
+        ","
+      )} source: ${source}`;
+
+      // todo: add js only payload instead
+      if (__DEV__) {
+        logger.warning({
+          message,
+          data: { source, contexts, mapping },
+        });
+      } else {
+        // todo: log values we've failed to resolve
+        logger.warning({
+          message,
+        });
+      }
+
+      // return null in order to prevent start fetching data with invalid url
+      return null;
     } else {
-      // todo: log values we've failed to resolve
-      logger.warning({
-        message,
+      logger.debug({
+        message: `Ignoring missing values in url because ${
+          ENDPOINT_TAGS.allow_missing_keys
+        } endpoint tag, keys: ${missingValues.join(",")}`,
       });
     }
-
-    // return null in order to prevent start fetching data with invalid url
-    return null;
   }
 
   return inflateString({ string, data: contexts });

package/reactHooks/navigation/index.ts

@@ -496,18 +496,3 @@ export const useIsScreenActive = () => {
 
   return pathname === currentRoute;
 };
-
-type Return = (prefix: string) => string;
-
-export const useUniqueRouteSuffix = (): Return => {
-  const pathname = usePathname();
-  const { currentRoute } = useNavigation();
-
-  const suffix = `currentRoute:${currentRoute}_pathname:${pathname}`;
-
-  const withUniqueRouteSuffix = React.useCallback((prefix: string) => {
-    return `${prefix}___${suffix}`;
-  }, []);
-
-  return withUniqueRouteSuffix;
-};

package/reactHooks/screen/useScreenContext.ts

@@ -5,7 +5,6 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { useNavigation } from "../navigation/useNavigation";
 
 import { ScreenContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenContext";
-import { ScreenDataContext } from "@applicaster/zapp-react-native-ui-components/Components/Layout/TV";
 
 export function useScreenContextV2() {
   return useContext(ScreenContext);
@@ -46,8 +45,8 @@ export function useSetNavbarState() {
 export function useScreenContext(): NavigationScreenData {
   const navigator = useNavigation();
 
-  const screenData = useContext(ScreenDataContext);
-
+  const screenKey = useMemo(() => navigator?.key, [navigator]);
+  const screenData = useMemo(() => navigator?.data, [screenKey]);
   const modalScreenData = navigator?.modalData;
 
   const isModal = useModalNavigationContext();

package/reactUtils/helpers.tsx

@@ -7,7 +7,7 @@ export const isAnyNil = R.any(R.isNil);
 
 export const isNilOrEmpty = R.either(R.isNil, R.isEmpty);
 
-export const isNotEmpty = R.both(isNotNil, R.complement(R.isEmpty));
+export const isNotEmpty = R.complement(R.isEmpty);
 
 export const withoutNil = R.reject(R.isNil);
 

package/stringUtils/index.ts

@@ -152,3 +152,8 @@ export function objectToCamelCase(obj) {
 export function isString(value: unknown): value is string {
   return typeof value === "string" || value instanceof String;
 }
+
+/** Checks if a value is a non-empty string */
+export function isNotEmptyString(value: unknown): value is string {
+  return isString(value) && value.length > 0;
+}

package/types.ts

@@ -5,3 +5,7 @@ export type ManifestField<T> = {
   group?: boolean;
   fields?: ManifestField<any>[];
 };
+
+export enum ENDPOINT_TAGS {
+  allow_missing_keys = "allow_missing_keys",
+}