@applicaster/zapp-react-native-utils 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

package/README.md

@@ -376,16 +376,6 @@ useEffect(() => {
 }, []);
 ```
 
-### testUtils
-
-`@applicaster/zapp-react-native-utils/testUtils`
-
-- `testIDEquals: (testId: any) => boolean | { width: number, height: number }` - Function to be used in tandem with enzyme findWhere
-
-```javascript
-wrapper.findWhere(testIDEquals("text"));
-```
-
 ### appUtils - contextKeysManager
 
 `@applicaster/zapp-react-native-utils/appUtils/contextKeyManager`

package/actionsExecutor/ActionExecutorContext.tsx

@@ -1,6 +1,6 @@
 /// <reference types="@applicaster/applicaster-types" />
 import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
-import React, { createContext, useMemo } from "react";
+import React, { createContext, useEffect, useMemo } from "react";
 import {
   actionExecutor as _actionExecutor,
   ActionResult,
@@ -19,8 +19,15 @@ import {
   EntryResolver,
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
+import { useNavigation } from "../reactHooks";
+import { get } from "lodash";
 
-const { log_error, log_info } = createLogger({
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
+
+export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
   category: "General",
 });
@@ -51,6 +58,22 @@ type Props = {
   children: React.ReactNode;
 };
 
+function findParentComponent(
+  childId: string,
+  parent: ZappRiver | ZappUIComponent
+): ZappRiver | ZappUIComponent | null {
+  for (const child of parent.ui_components) {
+    if (child.id === childId) return parent;
+
+    if (child.ui_components) {
+      const found = findParentComponent(childId, child);
+      if (found) return found;
+    }
+  }
+
+  return null;
+}
+
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
     const namespaces = action.options.content;
@@ -65,11 +88,13 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      log_info("handleAction: refreshComponent event");
+      const dataSource =
+        context?.component?.data?.source ||
+        findParentComponent(context?.component.id, context?.screenData)?.data
+          ?.source;
 
-      const dataSource = context?.component?.data?.source;
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
 
-      // TODO: Later we can pass component ids to do refresh instead of current one
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal
       dispatch(
@@ -169,8 +194,29 @@ const prepareDefaultActions = (actionExecutor) => {
       action: ActionType,
       context?: Record<string, any>
     ): Promise<ActionResult> => {
+      if (!context) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing context"
+        );
+
+        return ActionResult.Error;
+      }
+
+      const entry = context?.entry as ZappEntry;
+
+      if (!entry) {
+        log_error(
+          "handleAction: localStorageToggleFlag action missing entry. Entry is required to get the tag."
+        );
+
+        return ActionResult.Error;
+      }
+
+      const tag = action.options?.selector
+        ? get(entry, action.options.selector)
+        : (entry.extensions?.tag ?? entry.id);
+
       const keyNamespace = action.options?.key;
-      const tag = context?.entry?.extensions?.tag;
 
       if (keyNamespace && tag) {
         const multiSelectProvider =
@@ -188,6 +234,16 @@ const prepareDefaultActions = (actionExecutor) => {
         if (selectedItems.includes(tag)) {
           await multiSelectProvider.removeItem(tag);
         } else {
+          const maxItems = action.options?.max_items;
+
+          if (maxItems && selectedItems.length >= maxItems) {
+            log_info(
+              `handleAction: localStorageToggleFlag event reached max items limit: ${maxItems}, cannot add tag: ${tag}`
+            );
+
+            return ActionResult.Cancel;
+          }
+
           await multiSelectProvider.addItem(tag);
         }
       } else {
@@ -211,6 +267,10 @@ export function withActionExecutor(Component) {
   prepareDefaultActions(_actionExecutor);
 
   return function ActionExecutorComponent(props: Props) {
+    const navigator = useNavigation();
+    const { rivers } = usePickFromState(["rivers"]);
+    const contentTypes = useContentTypes();
+
     const handlers = useMemo(() => {
       return {
         unregisterAction: _actionExecutor.unregisterAction,
@@ -221,6 +281,44 @@ export function withActionExecutor(Component) {
       };
     }, []);
 
+    useEffect(() => {
+      return _actionExecutor.registerAction(
+        "navigateToScreen",
+        async (action: ActionType, context?: Record<string, any>) => {
+          const screenType = action.options?.typeMapping;
+
+          if (!screenType) {
+            log_error("navigateToScreen: typeMapping option is missing");
+
+            return ActionResult.Error;
+          }
+
+          const screenId = contentTypes?.[screenType]?.screen_id || null;
+
+          if (!screenId) {
+            log_error(
+              `navigateToScreen: can not resolve screen type mapping: ${screenType}`
+            );
+
+            return ActionResult.Error;
+          }
+
+          const river = rivers[screenId];
+
+          if (!river) {
+            log_error("navigateToScreen: can not resolve river");
+
+            return ActionResult.Error;
+          }
+
+          context?.callback?.({ success: false, error: null, abort: true });
+          navigator.replace(river);
+
+          return ActionResult.Success;
+        }
+      );
+    }, [navigator, rivers, contentTypes]);
+
     return (
       <ActionExecutorContext.Provider value={handlers}>
         <Component {...props} />

package/analyticsUtils/currentScreenProperities.ts

@@ -72,12 +72,14 @@ const mappedScreenPropertiesScreen = (
   screenData
 ): AnalyticsScreenProperties => {
   return {
-    screen_name: screenData?.targetScreen?.name,
+    screen_name: screenData?.targetScreen?.name || screenData?.name,
     screen_entry_title: screenData?.title,
     screen_entry_id: R.isNil(screenData?.type) ? null : screenData?.id,
-    screen_layout_id: screenData?.targetScreen?.id,
-    screen_type: screenData?.targetScreen?.type,
-    home_screen: screenData?.targetScreen?.home,
+    screen_layout_id: screenData?.targetScreen?.id || screenData?.id,
+    screen_type: screenData?.targetScreen?.type || screenData?.type,
+    home_screen: !R.isNil(screenData?.targetScreen?.home)
+      ? screenData?.targetScreen?.home
+      : screenData?.home,
   };
 };
 

package/appUtils/HooksManager/Hook.ts

@@ -65,6 +65,10 @@ export class Hook implements HookInterface {
     event: (typeof HOOKS_EVENTS)[keyof typeof HOOKS_EVENTS],
     ...args
   ) {
+    if (this.state === hookState(HOOKS_EVENTS.CANCEL)) {
+      return;
+    }
+
     this.state = hookState(event);
     this.manager.subscriber.invokeHandler(event, ...args);
   }

package/appUtils/HooksManager/index.ts

@@ -84,7 +84,7 @@ export function HooksManager({
   plugins,
   startUpHooksData = {},
 }: HookManagerArgs): HookManager {
-  hooksManagerLogger.addContext({ targetScreen });
+  hooksManagerLogger.addContext({ targetScreenId: targetScreen.id });
 
   function logHookEvent(func, message, data) {
     func({
@@ -269,6 +269,7 @@ export function HooksManager({
       payload = initialPayload,
       callback: callbackArg,
       cancelled,
+      abort,
     }) {
       let callback = callbackArg;
 
@@ -308,6 +309,7 @@ export function HooksManager({
         hookPlugin.setStateAndNotify(HOOKS_EVENTS.CANCEL, {
           hookPlugin,
           payload,
+          abort,
         });
 
         const isHookInHomescreen = payload?.home;

package/appUtils/__tests__/__snapshots__/localizationsHelper.test.ts.snap

@@ -0,0 +1,151 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`toDayJSLocaleMap [af] returns a valid dayjs locale 1`] = `"af"`;
+
+exports[`toDayJSLocaleMap [ar] returns a valid dayjs locale 1`] = `"ar"`;
+
+exports[`toDayJSLocaleMap [bg] returns a valid dayjs locale 1`] = `"bg"`;
+
+exports[`toDayJSLocaleMap [bn] returns a valid dayjs locale 1`] = `"bn"`;
+
+exports[`toDayJSLocaleMap [bo] returns a valid dayjs locale 1`] = `"bo"`;
+
+exports[`toDayJSLocaleMap [ca] returns a valid dayjs locale 1`] = `"ca"`;
+
+exports[`toDayJSLocaleMap [cs] returns a valid dayjs locale 1`] = `"cs"`;
+
+exports[`toDayJSLocaleMap [da] returns a valid dayjs locale 1`] = `"da"`;
+
+exports[`toDayJSLocaleMap [de] returns a valid dayjs locale 1`] = `"de"`;
+
+exports[`toDayJSLocaleMap [el] returns a valid dayjs locale 1`] = `"el"`;
+
+exports[`toDayJSLocaleMap [en] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [en-GB] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [en-UK] returns a valid dayjs locale 1`] = `"en-gb"`;
+
+exports[`toDayJSLocaleMap [es] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-LA] returns a valid dayjs locale 1`] = `"es"`;
+
+exports[`toDayJSLocaleMap [es-MX] returns a valid dayjs locale 1`] = `"es-mx"`;
+
+exports[`toDayJSLocaleMap [es-US] returns a valid dayjs locale 1`] = `"es-us"`;
+
+exports[`toDayJSLocaleMap [et] returns a valid dayjs locale 1`] = `"et"`;
+
+exports[`toDayJSLocaleMap [eu] returns a valid dayjs locale 1`] = `"eu"`;
+
+exports[`toDayJSLocaleMap [fa] returns a valid dayjs locale 1`] = `"fa"`;
+
+exports[`toDayJSLocaleMap [fi] returns a valid dayjs locale 1`] = `"fi"`;
+
+exports[`toDayJSLocaleMap [fj] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [fr] returns a valid dayjs locale 1`] = `"fr"`;
+
+exports[`toDayJSLocaleMap [ga] returns a valid dayjs locale 1`] = `"ga"`;
+
+exports[`toDayJSLocaleMap [gu] returns a valid dayjs locale 1`] = `"gu"`;
+
+exports[`toDayJSLocaleMap [he] returns a valid dayjs locale 1`] = `"he"`;
+
+exports[`toDayJSLocaleMap [hi] returns a valid dayjs locale 1`] = `"hi"`;
+
+exports[`toDayJSLocaleMap [hr] returns a valid dayjs locale 1`] = `"hr"`;
+
+exports[`toDayJSLocaleMap [hu] returns a valid dayjs locale 1`] = `"hu"`;
+
+exports[`toDayJSLocaleMap [hy] returns a valid dayjs locale 1`] = `"hy-am"`;
+
+exports[`toDayJSLocaleMap [id] returns a valid dayjs locale 1`] = `"id"`;
+
+exports[`toDayJSLocaleMap [is] returns a valid dayjs locale 1`] = `"is"`;
+
+exports[`toDayJSLocaleMap [it] returns a valid dayjs locale 1`] = `"it"`;
+
+exports[`toDayJSLocaleMap [ja] returns a valid dayjs locale 1`] = `"ja"`;
+
+exports[`toDayJSLocaleMap [ka] returns a valid dayjs locale 1`] = `"ka"`;
+
+exports[`toDayJSLocaleMap [km] returns a valid dayjs locale 1`] = `"km"`;
+
+exports[`toDayJSLocaleMap [ko] returns a valid dayjs locale 1`] = `"ko"`;
+
+exports[`toDayJSLocaleMap [la] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [lt] returns a valid dayjs locale 1`] = `"lt"`;
+
+exports[`toDayJSLocaleMap [lv] returns a valid dayjs locale 1`] = `"lv"`;
+
+exports[`toDayJSLocaleMap [mi] returns a valid dayjs locale 1`] = `"mi"`;
+
+exports[`toDayJSLocaleMap [mk] returns a valid dayjs locale 1`] = `"mk"`;
+
+exports[`toDayJSLocaleMap [ml] returns a valid dayjs locale 1`] = `"ml"`;
+
+exports[`toDayJSLocaleMap [mn] returns a valid dayjs locale 1`] = `"mn"`;
+
+exports[`toDayJSLocaleMap [mr] returns a valid dayjs locale 1`] = `"mr"`;
+
+exports[`toDayJSLocaleMap [ms] returns a valid dayjs locale 1`] = `"ms"`;
+
+exports[`toDayJSLocaleMap [mt] returns a valid dayjs locale 1`] = `"mt"`;
+
+exports[`toDayJSLocaleMap [ne] returns a valid dayjs locale 1`] = `"ne"`;
+
+exports[`toDayJSLocaleMap [nl] returns a valid dayjs locale 1`] = `"nl"`;
+
+exports[`toDayJSLocaleMap [no] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [pa] returns a valid dayjs locale 1`] = `"pa-in"`;
+
+exports[`toDayJSLocaleMap [pl] returns a valid dayjs locale 1`] = `"pl"`;
+
+exports[`toDayJSLocaleMap [pt] returns a valid dayjs locale 1`] = `"pt"`;
+
+exports[`toDayJSLocaleMap [pt-BR] returns a valid dayjs locale 1`] = `"pt-br"`;
+
+exports[`toDayJSLocaleMap [qu] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [ro] returns a valid dayjs locale 1`] = `"ro"`;
+
+exports[`toDayJSLocaleMap [ru] returns a valid dayjs locale 1`] = `"ru"`;
+
+exports[`toDayJSLocaleMap [sk] returns a valid dayjs locale 1`] = `"sk"`;
+
+exports[`toDayJSLocaleMap [sl] returns a valid dayjs locale 1`] = `"sl"`;
+
+exports[`toDayJSLocaleMap [sm] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [sq] returns a valid dayjs locale 1`] = `"sq"`;
+
+exports[`toDayJSLocaleMap [sr] returns a valid dayjs locale 1`] = `"sr"`;
+
+exports[`toDayJSLocaleMap [sv] returns a valid dayjs locale 1`] = `"sv"`;
+
+exports[`toDayJSLocaleMap [sw] returns a valid dayjs locale 1`] = `"sw"`;
+
+exports[`toDayJSLocaleMap [ta] returns a valid dayjs locale 1`] = `"ta"`;
+
+exports[`toDayJSLocaleMap [te] returns a valid dayjs locale 1`] = `"te"`;
+
+exports[`toDayJSLocaleMap [th] returns a valid dayjs locale 1`] = `"th"`;
+
+exports[`toDayJSLocaleMap [to] returns a valid dayjs locale 1`] = `"en"`;
+
+exports[`toDayJSLocaleMap [tr] returns a valid dayjs locale 1`] = `"tr"`;
+
+exports[`toDayJSLocaleMap [tt] returns a valid dayjs locale 1`] = `"tt"`;
+
+exports[`toDayJSLocaleMap [uk] returns a valid dayjs locale 1`] = `"uk"`;
+
+exports[`toDayJSLocaleMap [ur] returns a valid dayjs locale 1`] = `"ur"`;
+
+exports[`toDayJSLocaleMap [uz] returns a valid dayjs locale 1`] = `"uz"`;
+
+exports[`toDayJSLocaleMap [vi] returns a valid dayjs locale 1`] = `"vi"`;
+
+exports[`toDayJSLocaleMap [zh] returns a valid dayjs locale 1`] = `"zh"`;

package/appUtils/__tests__/allZappLocales.ts

@@ -0,0 +1,79 @@
+export default [
+  // common locales from https://rubygems.org/gems/language_list
+  "en",
+  "fr",
+  "de",
+  "nl",
+  "ru",
+  "es",
+  "he",
+  "hy",
+  "sq",
+  "af",
+  "ar",
+  "eu",
+  "bn",
+  "bg",
+  "zh",
+  "cs",
+  "km",
+  "ca",
+  "hr",
+  "da",
+  "et",
+  "fj",
+  "fi",
+  "gu",
+  "ka",
+  "hu",
+  "hi",
+  "it",
+  "is",
+  "id",
+  "ga",
+  "ja",
+  "ko",
+  "la",
+  "lv",
+  "lt",
+  "ms",
+  "mi",
+  "mn",
+  "mt",
+  "mk",
+  "el",
+  "mr",
+  "ml",
+  "ne",
+  "no",
+  "pa",
+  "pl",
+  "pt",
+  "fa",
+  "qu",
+  "ro",
+  "sk",
+  "sm",
+  "sr",
+  "sw",
+  "sv",
+  "sl",
+  "to",
+  "tr",
+  "th",
+  "te",
+  "bo",
+  "tt",
+  "ta",
+  "uk",
+  "ur",
+  "uz",
+  "vi",
+  // Extra locales https://github.com/applicaster/zapp/blob/5604794f15cfd270ae494b0db85e542de4cebfaa/config/additional_languages.yml
+  "en-UK",
+  "en-GB",
+  "es-LA",
+  "pt-BR",
+  "es-MX",
+  "es-US",
+];

package/appUtils/__tests__/{localizationsHelper.test.js → localizationsHelper.test.ts}

@@ -8,6 +8,7 @@ const {
   getLocale,
   getLanguageCode,
   getCountryCode,
+  toDayJSLocaleMap,
 } = require("../localizationsHelper");
 
 describe("getLocale", () => {
@@ -69,3 +70,13 @@ describe("getCountryCode", () => {
     expect(currentValue).toEqual(expectedValue);
   });
 });
+
+describe("toDayJSLocaleMap", () => {
+  const allZappLocales: string[] = require("./allZappLocales").default;
+
+  it.each(allZappLocales)("[%s] returns a valid dayjs locale", (locale) => {
+    const dayJSLocale = toDayJSLocaleMap(locale);
+    expect(dayJSLocale).toBeDefined();
+    expect(dayJSLocale).toMatchSnapshot();
+  });
+});

package/appUtils/contextKeysManager/contextResolver.ts

@@ -1,12 +1,6 @@
-import { createLogger } from "../../logger";
 import { ContextKeysManager } from "./index";
 import * as R from "ramda";
 
-const { log_error } = createLogger({
-  subsystem: "contextResolver",
-  category: "General",
-});
-
 interface IResolver {
   resolve: (string) => Promise<string | number | object>;
 }
@@ -64,12 +58,7 @@ export const resolveObjectValues = async (
         return [key, resolvedValue];
       }
 
-      log_error("resolveObjectValues: invalid context string", {
-        key,
-        value,
-      });
-
-      return [key, null];
+      return [key, value];
     })
   );
 

package/appUtils/contextKeysManager/index.ts

@@ -16,12 +16,12 @@ import {
 
 export { StorageLevel };
 
-type KeyNameObj = {
+export type KeyNameObj = {
   namespace: string;
   key: string;
 };
 
-type KeyName = string | KeyNameObj;
+export type KeyName = string | KeyNameObj;
 
 type ParsedKeyAndNamespace = {
   namespace?: string;

package/appUtils/contextKeysManager/utils/index.ts

@@ -1,10 +1,11 @@
 import * as R from "ramda";
 import { DEFAULT_NAMESPACE } from "../consts";
+import { KeyName, KeyNameObj } from "../index";
 
 const lastDotRegex = /\.([^.]+)$/;
 const splitByLastDot = R.compose(R.init, R.split(lastDotRegex));
 
-export function getNamespaceAndKey(namespacedKey) {
+export function getNamespaceAndKey(namespacedKey: KeyName): KeyNameObj {
   if (typeof namespacedKey !== "string") return namespacedKey;
 
   const namespacedKeyProps = namespacedKey.includes(".")

package/appUtils/focusManager/__tests__/__snapshots__/focusManager.test.js.snap

@@ -5,6 +5,7 @@ exports[`focusManager should be defined 1`] = `
   "blur": [Function],
   "disableFocus": [Function],
   "enableFocus": [Function],
+  "findPreferredFocusChild": [Function],
   "focusableTree": Tree {
     "loadingCounter": 0,
     "root": {

package/appUtils/focusManager/index.ts

@@ -334,16 +334,7 @@ export const focusManager = (function () {
     return { success: false };
   }
 
-  function treeLoaded(val, node) {
-    logger.log({
-      message: "treeLoaded",
-      data: {
-        val,
-        node,
-        currentFocusNode,
-      },
-    });
-  }
+  function treeLoaded(_val, _node) {}
 
   function pressIn() {
     const currentFocusable = getCurrentFocus();
@@ -543,6 +534,18 @@ export const focusManager = (function () {
 
   const { on, invokeHandler, removeHandler } = eventHandler;
 
+  function findPreferredFocusChild(id) {
+    const node = getCurrentFocusNode(id);
+
+    const preferredFocus = findPriorityItem([node]);
+
+    if (isNilOrEmpty(preferredFocus)) {
+      return undefined;
+    }
+
+    return preferredFocus[0];
+  }
+
   /**
    * this is the list of the functions available externally
    * when importing the focus manager
@@ -572,5 +575,6 @@ export const focusManager = (function () {
     isGroupItemFocused,
     recoverFocus,
     isCurrentFocusOnTheTopScreen,
+    findPreferredFocusChild,
   };
 })();

package/appUtils/keyCodes/index.ts

@@ -1,5 +1,3 @@
-import * as R from "ramda";
-
 // more keys can be added here. Simply make sure
 // the key matches the code value
 
@@ -34,12 +32,18 @@ export function keyCode(key) {
   keyCode(keyEvent).matchesAny("Enter", "Backspace", KEYS.ArrowLeft, ...)
   */
 
-  const matches = R.compose(
-    R.either(R.eqProps("code", key), R.eqProps("keyCode", key)),
-    R.when(R.is(String), R.prop(R.__, KEYS))
-  );
+  const matches = (compareKey) => {
+    // If compareKey is a string, look it up in KEYS object
+    const keyToCompare =
+      typeof compareKey === "string" ? KEYS[compareKey] : compareKey;
+
+    // Compare either code or keyCode properties
+    return (
+      keyToCompare?.code === key.code || keyToCompare?.keyCode === key.keyCode
+    );
+  };
 
-  const matchesAny = (...args) => R.any(matches, args);
+  const matchesAny = (...args) => args.some(matches);
 
   const direction = () =>
     matchesAny(...ARROW_KEYS) ? directionHelper(key) : null;

package/appUtils/localizationsHelper.ts

@@ -65,6 +65,36 @@ export function getUILanguage() {
   return getLanguageCode();
 }
 
+/**
+ * fallback to en for missing dayjslocalization
+ * converts the locale code to a dayjs compatible locale code
+ * lowercase input code is expected, e.g. "en-GB" => "en-gb"
+ * @param {string} code - locale code, e.g. "en", "fr", "es-LA"
+ * */
+export const toDayJSLocaleMap = (code) => {
+  const map = {
+    hy: "hy-am",
+    fj: null,
+    la: null,
+    no: null,
+    pa: "pa-in",
+    qu: null,
+    sm: null,
+    to: null,
+    xh: null,
+    "es-LA": "es",
+    "en-UK": "en-gb",
+  };
+
+  if (map[code] === null) {
+    return "en";
+  } else if (map[code]) {
+    return map[code];
+  } else {
+    return code.toLowerCase();
+  }
+};
+
 /**
  * returns the localization for the app based on the locale. If the locale is null
  * or undefined, or if the given locale doesn't exist in the localizations,