@applicaster/zapp-react-native-utils 12.0.0-alpha.3977160850 → 12.0.0-alpha.4023252383

package/cellUtils/index.ts

@@ -31,13 +31,12 @@ export const getKeyForLabel = (dataKey, customKey) => {
  * 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
  * i.e. - NaN, null, {}, "", [], should all return true
- * @param {*} argument - argument passed to it could be any type
  * @returns {Boolean} returns true if empty or nil
+ * @param value
  */
-export const isEmptyOrNil = R.either(
-  R.equals(NaN),
-  R.either(R.isEmpty, R.isNil)
-);
+
+export const isEmptyOrNil = (value: any): boolean =>
+  Number.isNaN(value) || value == null || R.isEmpty(value);
 
 /**
  * This method is used to find the appropriate label for any given text field.
@@ -182,8 +181,8 @@ export const getHeight = (width, aspectRatio) => {
  * @returns {string} duration
  */
 
-export const getDurationInMinutes = (seconds: number): string => {
-  if (seconds === (null || undefined)) return "00:00";
+export const getDurationInMinutes = (seconds?: number): string => {
+  if (!seconds) return "00:00";
   const minutes = Math.floor(Number(seconds) / 60);
   const secondsReminder = Math.floor(Number(seconds)) % 60;
   const pad = (num: number): string => `${num < 10 ? "0" : ""}${num}`;
@@ -320,6 +319,7 @@ export const ifElseFocusedSelected = (
  * @param {Object} stylesObj styles object with keys from zapp { button_icon_width: "10" }
  * @returns {*} value, returns any type that can be used as styles
  */
+
 export const getValue = (stylesObj) => (key) => {
   return R.propOr(null, key, stylesObj);
 };
@@ -447,28 +447,57 @@ 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);
-
-  if (validateColor(value)) {
-    return value;
+  // Temporary hack to fix color validation when alpha is floating point number
+  // https://github.com/dreamyguy/validate-color/issues/44
+  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;
+};
+
+export const getImageStyles = ({
+  image,
+  value,
+}: {
+  image: any;
+  value: any;
+}) => {
+  return {
+    width: image.imageContentWidth,
+    height: image.imageContentHeight,
+    aspectRatio: image.aspectRatio,
+    borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+  };
+};
+
+export const getImageContainerPaddingStyles = ({ value }: { value: any }) => {
+  return {
+    paddingTop: value("image_padding_top"),
+    paddingBottom: value("image_padding_bottom"),
+    paddingLeft: value("image_padding_left"),
+    paddingRight: value("image_padding_right"),
+  };
+};
+
+export const getImageContainerMarginStyles = ({ value }: { value: any }) => {
+  return {
+    marginTop: value("image_margin_top"),
+    marginBottom: value("image_margin_bottom"),
+    marginLeft: value("image_margin_left"),
+    marginRight: value("image_margin_right"),
+  };
 };

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/functionUtils/index.ts

@@ -1,4 +1,42 @@
 import * as R from "ramda";
+import { useRef } from "react";
+
+/**
+ *
+ * @param callback - The function to throttle.
+ * @param delay - The delay in milliseconds.
+ * @returns A throttled version of the callback.
+ */
+export const useThrottle = (callback: () => void, delay: number) => {
+  const lastCallRef = useRef<number>(0);
+  const timeoutRef = useRef<any | null>(null);
+
+  const throttledFunction = () => {
+    const now = Date.now();
+
+    if (now - lastCallRef.current >= delay) {
+      callback();
+      lastCallRef.current = now;
+    } else if (!timeoutRef.current) {
+      const remainingTime = delay - (now - lastCallRef.current);
+
+      timeoutRef.current = setTimeout(() => {
+        callback();
+        lastCallRef.current = Date.now();
+        timeoutRef.current = null;
+      }, remainingTime);
+    }
+  };
+
+  const cancel = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  };
+
+  return { throttledFunction, cancel };
+};
 
 /**
  * standard debounce function.

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/index.d.ts

@@ -143,3 +143,18 @@ declare type BuilderData = {
   river?: ZappRiver;
   method?: string;
 };
+
+declare type AccessibilityState = {
+  screenReaderEnabled: boolean;
+  reduceMotionEnabled: boolean;
+  boldTextEnabled: boolean;
+};
+
+declare type AccessibilityProps = {
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  "aria-label"?: string;
+  "aria-description"?: string;
+  accessibilityRole?: string;
+  "aria-role"?: string;
+};

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

@@ -1663,7 +1663,8 @@ function getPlayerConfiguration({ platform }) {
     platform.includes("lg") ||
     platform.includes("samsung") ||
     platform.includes("android_tv") ||
-    platform.includes("amazon")
+    platform.includes("amazon") ||
+    platform.includes("vizio")
   ) {
     styles.fields.push(
       // Captions Menu

package/manifestUtils/index.js

@@ -22,7 +22,11 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { secondaryImage, getUpdatedSecondaryImageKeys } = require("./secondaryImage");
+
+const {
+  secondaryImage,
+  getUpdatedSecondaryImageKeys,
+} = require("./secondaryImage");
 
 module.exports = {
   fontKey,

package/manifestUtils/secondaryImage/index.js

@@ -132,29 +132,32 @@ function secondaryImage({
 
 const POSITION_OVER_IMAGE = toSnakeCase(position_over_image);
 
-const getUpdatedSecondaryImageKeys = (secondaryImageManifest) => secondaryImageManifest.fields.reduce((acc, item) => {
-  const key = item.key;
+const getUpdatedSecondaryImageKeys = (secondaryImageManifest) =>
+  secondaryImageManifest.fields.reduce((acc, item) => {
+    const key = item.key;
 
-  const conditionalFields = (item.conditional_fields || []).map((field) => field.key);
+    const conditionalFields = (item.conditional_fields || []).map(
+      (field) => field.key
+    );
 
-  const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
-    const updatedKey = field.replace("secondary_image_", "nested_image_");
+    const updatedConditionalFields = conditionalFields.reduce((acc, field) => {
+      const updatedKey = field.replace("secondary_image_", "nested_image_");
+
+      return {
+        ...acc,
+        [updatedKey]: field,
+      };
+    }, {});
+
+    const updatedKey = key.replace("secondary_image_", "nested_image_");
 
     return {
       ...acc,
-      [updatedKey]: field,
+      ...updatedConditionalFields,
+      [updatedKey]: key,
     };
   }, {});
 
-  const updatedKey = key.replace("secondary_image_", "nested_image_");
-
-  return {
-    ...acc,
-    ...updatedConditionalFields,
-    [updatedKey]: key,
-  };
-}, {});
-
 module.exports = {
   secondaryImage,
   getUpdatedSecondaryImageKeys,

package/navigationUtils/index.ts

@@ -114,7 +114,11 @@ export function getNavigationProps({
 } | null {
   const { activeRiver } = navigator;
   const { navigations, id: selected, home } = activeRiver; // use useRiver hook instead
-  const navigation = R.find(R.propEq("category", category), navigations);
+
+  const navigation: ZappNavigation = R.find(
+    R.propEq("category", category),
+    navigations
+  );
 
   if (!navigation) {
     return null;
@@ -127,9 +131,9 @@ export function getNavigationProps({
     title,
     home,
     styles,
-    assets,
-    nav_items,
-    rules,
+    assets: assets as ZappNavBarAssets,
+    nav_items: nav_items as any as NavBarItem[],
+    rules: rules as any as ZappNavBarRules,
   };
 }
 
@@ -588,3 +592,51 @@ export function isMenuDisabled(
 export function routeIsPlayerScreen(currentRoute) {
   return currentRoute?.includes("/playable");
 }
+
+export const getNavBarProps =
+  (currentRiver: ZappRiver, pathname: string, title: string) => () => {
+    const props = getNavigationPropsV2({
+      currentRiver,
+      title,
+      category: "nav_bar",
+    });
+
+    if (props) {
+      return {
+        ...props,
+        id: pathname,
+        pathname: pathname,
+      };
+    }
+
+    return null;
+  };
+
+export const findMenuPlugin = (
+  navigations: ZappNavigation[],
+  plugins
+): QuickBrickPlugin => {
+  return resolveNavigationPlugin({
+    category: "menu",
+    navigations,
+    plugins,
+  }) as QuickBrickPlugin;
+};
+
+export const shouldNavBarDisplayMenu = (currentRiver: ZappRiver, plugins) =>
+  findMenuPlugin(currentRiver.navigations, plugins)?.identifier ===
+    "quick_brick_side_menu" ||
+  currentRiver?.navigations.findIndex(
+    (nav) => nav.category === "nav_bar" && nav.general?.override_menu_target
+  ) > -1;
+
+export const getScreenId = (
+  screenData: LegacyNavigationScreenData,
+  fallbackRiver: ZappRiver
+) => {
+  return screenData?.targetScreen
+    ? screenData?.targetScreen?.id ?? fallbackRiver.id
+    : "screen_id" in screenData
+    ? screenData.screen_id
+    : fallbackRiver.id;
+};

package/numberUtils/__tests__/isLikeNumber.test.ts

@@ -7,12 +7,24 @@ describe("isLikeNumber", () => {
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a number", () => {
+    const value = 123.45;
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is a string as number", () => {
     const value = "123";
 
     expect(isLikeNumber(value)).toBe(true);
   });
 
+  it("value is a string as number", () => {
+    const value = "123.45";
+
+    expect(isLikeNumber(value)).toBe(true);
+  });
+
   it("value is empty string", () => {
     const value = "";
 
@@ -54,4 +66,10 @@ describe("isLikeNumber", () => {
 
     expect(isLikeNumber(value)).toBe(false);
   });
+
+  it("NaN is not a number", () => {
+    const value = NaN;
+
+    expect(isLikeNumber(value)).toBe(false);
+  });
 });