@applicaster/zapp-react-native-utils 13.0.0-rc.14 → 13.0.0-rc.141

package/focusManager/FocusManager.ts

@@ -227,7 +227,9 @@ class FocusManager {
 
       const nextNextFocus = FocusManager.getNextFocusable(direction, nextFocus);
 
-      FocusManager.instance.setFocus(nextNextFocus, options);
+      if (nextNextFocus) {
+        FocusManager.instance.setFocus(nextNextFocus, options);
+      }
     } else {
       FocusManager.instance.setFocusLocal(nextFocus);
 
@@ -250,7 +252,17 @@ class FocusManager {
   }
 
   onDisableFocusChange = (id) => {
-    if (FocusManager.instance.isFocused(id)) {
+    const isFocused = FocusManager.instance.isFocused(id);
+
+    const isDescendantFocused = (() => {
+      try {
+        return FocusManager.instance.isAnyDescendantFocused(id);
+      } catch (_e) {
+        return false;
+      }
+    })();
+
+    if (isFocused || isDescendantFocused) {
       // Move focus to next one
       const nextFocus = FocusManager.instance.focused?.props
         ?.nextFocusDown as string;

package/focusManager/index.ts

@@ -91,6 +91,7 @@ type Props = {
 
 export const useIsFocusable = (props: Props): void => {
   const { component, zappPipesData } = props;
+
   const { setIsFocusable } = useFocusable();
 
   const componentCellsFocusable = toBooleanWithDefaultTrue(
@@ -101,15 +102,33 @@ export const useIsFocusable = (props: Props): void => {
     component.rules.hide_component_if_data_is_empty
   );
 
+  const isLoadingData = !!zappPipesData?.loading;
+
   const hasNoData =
     isNilOrEmpty(zappPipesData?.data) ||
     isNilOrEmpty(zappPipesData?.data?.entry);
 
+  const hasDataError = !!zappPipesData?.error;
+
+  const isHiddenDueToEmptyData = !isLoadingData && hasNoData && hideIfDataEmpty;
+
+  const defaultFocusableLogic =
+    componentCellsFocusable && (!hasNoData || !hideIfDataEmpty);
+
   React.useEffect(() => {
     if (isAndroidTVPlatform()) {
-      setIsFocusable(
-        componentCellsFocusable && (!hasNoData || !hideIfDataEmpty)
-      );
+      let isFocusableNew = false;
+
+      if (isFocusable(component)) {
+        isFocusableNew = defaultFocusableLogic;
+      }
+
+      setIsFocusable(isFocusableNew);
     }
-  }, [setIsFocusable, componentCellsFocusable, hasNoData]);
+  }, [
+    defaultFocusableLogic,
+    isHiddenDueToEmptyData,
+    setIsFocusable,
+    hasDataError,
+  ]);
 };

package/functionUtils/__tests__/__snapshots__/functionUtils.test.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`functionUtils subscriber can be invoked without args 1`] = `
-Object {
-  "handlers": Object {},
+{
+  "handlers": {},
   "invokeHandler": [Function],
   "on": [Function],
   "removeHandler": [Function],
@@ -10,9 +10,9 @@ Object {
 `;
 
 exports[`functionUtils subscriber returns the original object with additional methods 1`] = `
-Object {
+{
   "foo": "bar",
-  "handlers": Object {},
+  "handlers": {},
   "invokeHandler": [Function],
   "method": [Function],
   "on": [Function],

package/functionUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 
 /**
  *
@@ -9,31 +9,44 @@ import { useRef } from "react";
  */
 export const useThrottle = (callback: () => void, delay: number) => {
   const lastCallRef = useRef<number>(0);
-  const timeoutRef = useRef<any | null>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef<() => void>(callback);
 
-  const throttledFunction = () => {
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const throttledFunction = useCallback(() => {
     const now = Date.now();
 
     if (now - lastCallRef.current >= delay) {
-      callback();
+      callbackRef.current();
       lastCallRef.current = now;
     } else if (!timeoutRef.current) {
       const remainingTime = delay - (now - lastCallRef.current);
 
       timeoutRef.current = setTimeout(() => {
-        callback();
+        callbackRef.current();
         lastCallRef.current = Date.now();
         timeoutRef.current = null;
       }, remainingTime);
     }
-  };
+  }, [delay]);
 
-  const cancel = () => {
+  const cancel = useCallback(() => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
-  };
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
 
   return { throttledFunction, cancel };
 };
@@ -245,3 +258,28 @@ export const extractDataFromProperty = (property, data): any =>
   );
 
 export const then = (fn) => (promise) => promise.then(fn);
+
+/**
+ * Returns a replacer function for JSON.stringify that handles circular references,
+ * functions, and React context objects
+ * @returns {Function} A replacer function that detects and handles circular references,
+ * functions, and React context objects
+ */
+export const getJsonReplacer = () => {
+  return (_key, value) => {
+    if (typeof value === "function") {
+      return "[Function]";
+    }
+
+    if (
+      typeof value === "object" &&
+      value !== null &&
+      value.Provider &&
+      value.Consumer
+    ) {
+      return "[ReactContext]";
+    }
+
+    return value;
+  };
+};

package/idleUtils/__tests__/withTimeout$.test.ts

@@ -0,0 +1,37 @@
+import { TestScheduler } from "rxjs/testing";
+
+import { withTimeout$ } from "..";
+
+describe("withTimeout$", () => {
+  let testScheduler: TestScheduler;
+
+  beforeEach(() => {
+    testScheduler = new TestScheduler((actual, expected) => {
+      expect(actual).toEqual(expected);
+    });
+  });
+
+  it("should emit undefined after the specified timeout", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 1000;
+      const expectedMarble = "1s (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+
+  it("should complete after emitting undefined", () => {
+    testScheduler.run(({ expectObservable }) => {
+      const timeout = 500;
+      const expectedMarble = "500ms (a|)";
+      const expectedValues = { a: undefined };
+
+      const result$ = withTimeout$(timeout);
+
+      expectObservable(result$).toBe(expectedMarble, expectedValues);
+    });
+  });
+});

package/idleUtils/index.ts

@@ -1,4 +1,4 @@
-export { withTimeout } from "./withTimeout";
+export { withTimeout, withTimeout$ } from "./withTimeout";
 
 export { onIdle } from "./onIdle";
 

package/idleUtils/withTimeout.ts

@@ -1,7 +1,20 @@
-export const withTimeout = (timeout: number) => {
-  return new Promise((resolve) => {
+import { of, Observable } from "rxjs";
+import { delay } from "rxjs/operators";
+
+export const withTimeout = (timeout: number): Promise<void> => {
+  return new Promise<void>((resolve) => {
     setTimeout(() => {
       resolve(undefined);
     }, timeout);
   });
 };
+
+/**
+ * Creates an observable that emits a single value after a specified timeout.
+ *
+ * @param timeout - The delay duration in milliseconds before emitting the value.
+ * @returns An observable that emits `undefined` after the specified timeout.
+ */
+export const withTimeout$ = (timeout: number): Observable<void> => {
+  return of(undefined).pipe(delay(timeout));
+};

package/index.d.ts

@@ -105,18 +105,6 @@ declare type NavBarState = {
   title: string;
 };
 
-declare type StorageValuesToAdd = Record<string, NamespaceValues>;
-
-declare type StorageValuesToRemove = {
-  string?: string[];
-};
-
-declare type StorageOwnedValues = {
-  string?: string[];
-};
-
-declare type NamespaceValues = Record<string, string>;
-
 declare type RefreshProps = {
   forceRefresh?: boolean;
 };

package/localizationUtils/index.ts

@@ -1,9 +1,8 @@
-import * as R from "ramda";
 import { ViewStyle } from "react-native";
 
 import { useMemo } from "react";
-import { getUILanguage } from "../appUtils/localizationsHelper";
-import { utilsLogger } from "../logger";
+import { getUILanguage } from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
+import { utilsLogger } from "@applicaster/zapp-react-native-utils/logger";
 
 export {
   getLocale,
@@ -11,7 +10,7 @@ export {
   getCountryCode,
   getLocalizations,
   getUILanguage,
-} from "../appUtils/localizationsHelper";
+} from "@applicaster/zapp-react-native-utils/appUtils/localizationsHelper";
 
 const RTL_LOCALES = [
   "ar", // Arabic
@@ -29,14 +28,16 @@ const RTL_LOCALES = [
   "yi", // Yiddish
 ];
 
-export function useLocalizedStrings({ localizations }) {
+export function useLocalizedStrings({ localizations = {} }) {
   const languageCode = getUILanguage();
 
   // TODO: probably we can call getLocalizations here from localizationsHelper.js
   const result = useMemo(
     () =>
       localizations?.[languageCode] ||
-      R.compose(R.head, R.filter(R.is(Object)), R.values)(localizations) ||
+      Object.values(localizations).find(
+        (value) => typeof value === "object" && value !== null
+      ) ||
       {},
     [languageCode, localizations]
   );
@@ -53,13 +54,7 @@ export function getIsRTL(): boolean {
     return false;
   }
 
-  const [languageCode] = uiLanguage.split("-");
-
-  const lowerCaseLanguageCode = languageCode.toLocaleLowerCase();
-
-  const isRTL = R.contains(lowerCaseLanguageCode, RTL_LOCALES);
-
-  return isRTL;
+  return RTL_LOCALES.includes(uiLanguage.split("-")[0].toLocaleLowerCase());
 }
 
 export function useIsRTL(): boolean {

package/logger/const.ts

@@ -1,6 +1,3 @@
-/* eslint-disable unused-imports/no-unused-vars */
-import * as R from "ramda";
-
 enum XRayLogLevel {
   verbose = 0,
   debug = 1,
@@ -11,51 +8,9 @@ enum XRayLogLevel {
   off = 100,
 }
 
-enum ToastLogLevel {
-  off = "off",
-  verbose = "verbose",
-  debug = "debug",
-  info = "info",
-  warning = "warning",
-  error = "error",
-}
-
-const toastLevelToLogLevel = (toastLogLevel: ToastLogLevel): XRayLogLevel => {
-  if (R.isNil(toastLogLevel)) {
-    return XRayLogLevel.off;
-  }
-
-  switch (toastLogLevel) {
-    case ToastLogLevel.verbose:
-      return XRayLogLevel.verbose;
-    case ToastLogLevel.debug:
-      return XRayLogLevel.debug;
-    case ToastLogLevel.info:
-      return XRayLogLevel.info;
-    case ToastLogLevel.error:
-      return XRayLogLevel.error;
-    default:
-      return XRayLogLevel.off;
-  }
-};
-
-const PLUGIN_IDENTIFIER = "xray_logging_plugin";
-
-const wrapInObject = (obj, name) => {};
-
-const applyConditions = (wrappedObj) => {};
-
-const sanitizeEventPayload = () => {};
+const wrapInObject = (_ctx: unknown, _key: string) => {};
 
-const __isRunningRepoTests = () => {};
-
-const isWeb = () => {};
-
-const isDOMApp = () => {};
-
-const isBrowser = () => {};
-
-const eventAllowed = () => {};
+const applyConditions = (_fn: unknown) => {};
 
 /**
  * This is the mocked version of XRayLogger
@@ -90,34 +45,21 @@ export default class XRayLogger {
     );
   };
 
-  log = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  log = (_event) => {};
 
-  debug = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  debug = (_event) => {};
 
-  info = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  info = (_event) => {};
 
-  warning = (event: string | XRayEventData) => {
-    const logEvent = typeof event === "string" ? { message: event } : event;
-  };
+  warning = (_event) => {};
 
-  warn = (event: string | XRayEventData) => {
+  warn = (_event) => {
     this.warning(event);
   };
 
-  error = (event: Error | XRayEventData) => {
-    const logEvent: XRayEventData =
-      event instanceof Error
-        ? { exception: event as Error, message: event.message }
-        : (event as XRayEventData);
-  };
+  error = (_event) => {};
 
-  sendEvent = (event, eventData) => {};
+  sendEvent = (_event, _eventData) => {};
 
   // To be used by QuickBrick Hook events
   sendAudienceEvent = (event, eventData = null) => {

package/manifestUtils/__tests__/createConfig.test.js

@@ -1,11 +1,9 @@
-import { createConfig } from "../createConfig";
-
-const styles = {
+const mockStyles = {
   fields: [{ key: "field_1", initial_value: 1 }],
   label: "styles",
 };
 
-const stylesWithGroup = {
+const mockStylesWithGroup = {
   fields: [
     {
       group: true,
@@ -15,26 +13,28 @@ const stylesWithGroup = {
   ],
 };
 
-const generators = {
-  styles: jest.fn(() => ({ styles })),
+const mockGenerators = {
+  styles: jest.fn(() => ({ styles: mockStyles })),
   stylesGroup: jest.fn(() => ({
-    styles: stylesWithGroup,
+    styles: mockStylesWithGroup,
   })),
-  customConfiguration: jest.fn(() => ({ custom_configuration: [styles] })),
+  customConfiguration: jest.fn(() => ({ custom_configuration: [mockStyles] })),
   customConfigurationGroup: jest.fn(() => ({
-    custom_configuration: [stylesWithGroup],
+    custom_configuration: [mockStylesWithGroup],
   })),
 };
 
-jest.mock("../defaultManifestConfigurations", () => ({
+jest.doMock("../defaultManifestConfigurations", () => ({
   defaultConfigurations: {
-    styles: generators.styles,
-    stylesGroup: generators.stylesGroup,
-    customConfiguration: generators.customConfiguration,
-    customConfigurationGroup: generators.customConfigurationGroup,
+    styles: mockGenerators.styles,
+    stylesGroup: mockGenerators.stylesGroup,
+    customConfiguration: mockGenerators.customConfiguration,
+    customConfigurationGroup: mockGenerators.customConfigurationGroup,
   },
 }));
 
+const { createConfig } = require("../createConfig");
+
 describe("createConfig", () => {
   it("should return a function", () => {
     const currentResult = createConfig(jest.fn());
@@ -78,7 +78,7 @@ describe("createConfig", () => {
       extend: "styles",
     })(props);
 
-    expect(generators.styles).toBeCalledWith(props);
+    expect(mockGenerators.styles).toBeCalledWith(props);
   });
 
   it("should return base configuration if manifest is not provided", () => {
@@ -88,7 +88,7 @@ describe("createConfig", () => {
       extend: "styles",
     })({});
 
-    expect(currentResult).toEqual({ styles });
+    expect(currentResult).toEqual({ styles: mockStyles });
   });
 
   describe("Data merging", () => {

package/manifestUtils/defaultManifestConfigurations/generalContent.js

@@ -251,6 +251,19 @@ const generalContent = () => ({
         key: "screen_title",
         initial_value: null,
       },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Description",
+        key: "msg_maximum_selection_reached_message",
+        initial_value:
+          "You’ve reached the maximum number of items you can select.",
+      },
+      {
+        type: "text_input",
+        label: "Maximum Selection Reached - Alert Button",
+        key: "msg_maximum_selection_reached_message_ok_button",
+        initial_value: "Got it",
+      },
     ],
   },
   advertising: {

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -43,12 +43,12 @@ function getPlayerConfiguration({ platform }) {
           "Enable if you want to have adaptive background gradient based on audio background image.",
       },
       {
-        key: "audio_player_background_image_query",
-        label: "Audio Player Image Query",
+        key: "audio_player_background_image_default_color",
+        label: "Audio Player Background Image Default Color",
         initial_value: "",
         type: "text_input",
         label_tooltip:
-          "Set the query params which control the size of the image e.g width, height. This will help to optimize the loading time, when magic background is enabled.",
+          "Set the default color for the audio player background image if not image or set of gradient colors are not provided.",
       },
     ],
   };
@@ -2547,6 +2547,12 @@ function getPlayerConfiguration({ platform }) {
           multiple: false,
           label_tooltip: "Choose the default aspect ratio for the artwork",
         },
+        {
+          key: "audio_player_artwork_border_radius",
+          label: "Audio Player Artwork Corner Radius",
+          type: "number_input",
+          initial_value: 16,
+        },
       ]
     )
   );

package/manifestUtils/fonts/index.js

@@ -224,12 +224,11 @@ function fontKey(label, defaults, conditionalField = null) {
   return fields;
 }
 
-function tvMenuLabel(label, description, defaults) {
-  return fieldsGroup(
-    label,
-    description,
-    generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS)
-  );
+function tvMenuLabel(label, description, defaults, fields = []) {
+  return fieldsGroup(label, description, [
+    ...fields,
+    ...generateFieldsFromDefaults(label, defaults, TV_MENU_LABEL_FIELDS),
+  ]);
 }
 
 function mobileCellLabel(label, description, defaults, groupFolded) {

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
 
@@ -46,4 +47,5 @@ module.exports = {
   tvProgressBar,
   secondaryImage,
   getUpdatedSecondaryImageKeys,
+  compact,
 };

package/manifestUtils/keys.js

@@ -21,7 +21,30 @@ const ZAPPIFEST_FIELDS = {
   },
 };
 
-const TV_PLATFORMS = ["tvOS", "android", "LG", "samsung", "roku", "vizio"];
+const TV_PLATFORMS_FOR_FONTS = [
+  "tvOS",
+  "android",
+  "LG",
+  "samsung",
+  "roku",
+  "vizio",
+];
+
+const MOBILE_PLATFORMS = [
+  "ios",
+  "ios_for_quickbrick",
+  "android",
+  "android_for_quickbrick",
+];
+
+const TV_PLATFORMS = [
+  "android_tv_for_quickbrick",
+  "amazon_fire_tv_for_quickbrick",
+  "tvos_for_quickbrick",
+  "samsung_tv",
+  "lg_tv",
+  "vizio",
+];
 
 const FontPropsForTVPlatform = (platform) => ({
   [`${R.toLower(platform)}FontFamily`]: {
@@ -92,7 +115,7 @@ const TV_FONT_KEY_DATA = {
     name: "focused font color",
     type: ZAPPIFEST_FIELDS.color_picker,
   },
-  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS),
+  ...R.reduce(addTVFontsForPlatform, {}, TV_PLATFORMS_FOR_FONTS),
   textAlignment: {
     name: "text alignment",
     type: ZAPPIFEST_FIELDS.select,
@@ -2083,4 +2106,6 @@ module.exports = {
   TV_CELL_BADGE_FIELDS,
   progressBarFields,
   secondaryImageFields,
+  TV_PLATFORMS,
+  MOBILE_PLATFORMS,
 };