@applicaster/zapp-react-native-utils 12.0.0-alpha.8242130253 → 12.0.0-alpha.8254217837

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/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -245,6 +245,12 @@ const generalContent = () => ({
         ],
         initial_value: "reloading...",
       },
+      {
+        type: "text_input",
+        label: "Navigation Bar Screen Title",
+        key: "screen_title",
+        initial_value: null,
+      },
     ],
   },
   advertising: {

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.8242130253",
+  "version": "12.0.0-alpha.8254217837",
   "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.8242130253",
+    "@applicaster/applicaster-types": "12.0.0-alpha.8254217837",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "create-react-context": "^0.2.3",

package/reactHooks/autoscrolling/__tests__/{useTrackedView.test.ts → useTrackedView.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { act, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 const mockUpdateComponentsPositions = jest.fn();
 
@@ -19,11 +23,22 @@ jest.useFakeTimers();
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation");
 
+const mockStore = configureStore();
+
+const store = mockStore({ appData: {} });
+
+const Wrapper = ({ children }: { children: React.ReactChild }) => (
+  /* @ts-ignore */
+  <Provider store={store}>{children}</Provider>
+);
+
 const { useTrackedView } = require("../useTrackedView");
 
 describe("useTrackCurrentAutoScrollingElement", () => {
   it("should update position for selected component", async () => {
-    const { result } = renderHook(() => useTrackedView("123"));
+    const { result } = renderHook(() => useTrackedView("123"), {
+      wrapper: Wrapper,
+    });
 
     // Fast-forward until all timers have been executed
     jest.advanceTimersByTime(3000);

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/layout/__tests__/{index.test.js → index.test.tsx}

@@ -1,4 +1,8 @@
+import React from "react";
+
 import { cleanup, renderHook } from "@testing-library/react-hooks";
+import { Provider } from "react-redux";
+import configureStore from "redux-mock-store";
 
 import * as ReactNative from "react-native";
 
@@ -48,19 +52,43 @@ jest.mock("../../navigation", () => ({
 }));
 
 const { Dimensions } = require("react-native");
-const { useDimensions } = require("../");
+const { useDimensions } = require("..");
+
+const mockStore = configureStore();
+
+const getWrapper = () => {
+  const store = mockStore({ appData: {} });
+
+  const Wrapper = ({ children }: { children: React.ReactChild }) => (
+    /* @ts-ignore */
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return Wrapper;
+};
+
+const testHook = (context, params?) => {
+  const wrapper = getWrapper();
+
+  const {
+    result,
+    result: { current: dimensions },
+  } = renderHook(() => useDimensions(context, params), {
+    wrapper,
+  });
+
+  return { result, dimensions };
+};
 
 describe("useDimensions", () => {
   it("renders", () => {
-    const { result } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true })
-    );
+    const { result } = testHook("window", { fullDimensions: true });
 
     expect(result).toBeDefined();
   });
 
   it("sets event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
 
     expect(Dimensions.addEventListener).toBeCalledWith(
       "change",
@@ -69,16 +97,14 @@ describe("useDimensions", () => {
   });
 
   it("removes event listener", () => {
-    renderHook(() => useDimensions("window", { fullDimensions: true }));
+    testHook("window", { fullDimensions: true });
     cleanup();
 
     expect(mockRemoveFn).toBeCalled();
   });
 
   it("Returns full dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window", { fullDimensions: true }));
+    const { dimensions } = testHook("window", { fullDimensions: true });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -87,20 +113,17 @@ describe("useDimensions", () => {
   });
 
   it("Returns shorthand dimensions object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() => useDimensions("window"));
+    const { dimensions } = testHook("window");
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
   });
 
   it("Returns the device info object", () => {
-    const {
-      result: { current: dimensions },
-    } = renderHook(() =>
-      useDimensions("window", { fullDimensions: true, deviceInfo: true })
-    );
+    const { dimensions } = testHook("window", {
+      fullDimensions: true,
+      deviceInfo: true,
+    });
 
     expect(dimensions).toHaveProperty("height");
     expect(dimensions).toHaveProperty("width");
@@ -113,10 +136,7 @@ describe("useDimensions", () => {
     it("applies the scale on TV, and screen context", () => {
       tv_flag = true;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height * screen.scale);
       expect(dimensions).toHaveProperty("width", screen.width * screen.scale);
@@ -128,10 +148,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on mobile with screen context", () => {
       tv_flag = false;
       const { screen } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("screen"));
+      const { dimensions } = testHook("screen");
 
       expect(dimensions).toHaveProperty("height", screen.height);
       expect(dimensions).toHaveProperty("width", screen.width);
@@ -141,10 +158,7 @@ describe("useDimensions", () => {
     it("doesn't apply the scale on TV with window context", () => {
       tv_flag = true;
       const { window } = mocked_return_value(tv_flag);
-
-      const {
-        result: { current: dimensions },
-      } = renderHook(() => useDimensions("window"));
+      const { dimensions } = testHook("window");
 
       expect(dimensions).toHaveProperty("height", window.height);
       expect(dimensions).toHaveProperty("width", window.width);

package/reactHooks/layout/getDeviceInfo/index.ts

@@ -3,13 +3,15 @@ import { isTablet } from "../isTablet";
 /**
  * Returns an object with additional device info that can be used to determine if tablet
  * @param {Number} dimensions - Dimensions object passed to the function
+ * @param {Object} appData - application data object passed to the function
  * @returns {DeviceInfo} deviceInfo - returns an object with scale, isTablet, and orientation
  */
-export const getDeviceInfo = (dimensions) => {
+export const getDeviceInfo = (dimensions, appData) => {
   const scale = dimensions?.scale;
   const isLandscape = dimensions?.width > dimensions?.height;
   const orientation = isLandscape ? "landscape" : "portrait";
   const tablet = isTablet(dimensions, orientation) || false;
+  const isTabletLandscape = tablet && !appData?.isTabletPortrait;
 
-  return { scale, isTablet: tablet, orientation };
+  return { scale, isTablet: tablet, orientation, isTabletLandscape };
 };

package/reactHooks/layout/types/index.ts

@@ -2,6 +2,7 @@ type DeviceInfo = {
   isTablet: boolean;
   scale: number;
   orientation: string;
+  isTabletLandscape: boolean;
 };
 
 type RNDimensions = {

package/reactHooks/layout/useDimensions/useDimensions.ts

@@ -3,6 +3,8 @@ import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import * as R from "ramda";
 
 import { Dimensions, Platform, StatusBar } from "react-native";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
 import { isTV } from "../../../reactUtils";
 
 import { Options, UseDimensions } from "../types";
@@ -36,6 +38,7 @@ export const useDimensions: UseDimensions = (
   fullDimensions = { fullDimensions: false, updateForInactiveScreens: true }
 ) => {
   const isActive = useIsScreenActive();
+  const { appData } = usePickFromState(["appData"]);
 
   if (typeof fullDimensions === "boolean") {
     // eslint-disable-next-line no-console
@@ -50,7 +53,7 @@ export const useDimensions: UseDimensions = (
       : { ...fullDimensions };
 
   const [dimensions, setDimensions] = useState(getInitialDimensions(context));
-  const deviceInfo = useRef(getDeviceInfo(dimensions));
+  const deviceInfo = useRef(getDeviceInfo(dimensions, appData));
 
   const applyOptions = R.compose(
     R.when(() => options.deviceInfo, R.assoc("deviceInfo", deviceInfo.current)),
@@ -85,7 +88,7 @@ export const useDimensions: UseDimensions = (
         // eslint-disable-next-line no-console
         console.log("change: wrong values - width equal to height, ignoring");
       } else if (isActive || options.updateForInactiveScreens) {
-        deviceInfo.current = getDeviceInfo(newDimensions);
+        deviceInfo.current = getDeviceInfo(newDimensions, appData);
         setDimensions(newDimensions);
       }
     };