@applicaster/quick-brick-core 15.0.0-rc.98 → 15.1.0-rc.1

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/usePresentSchemeHandler.ts

@@ -101,26 +101,28 @@ export function usePresentSchemeHandler({
 
         // @ts-ignore - to be fixed on iOS side
         // key accountsAccountID should be accountsAccountId
-        const accountId = getKeyFromStorage<string>(accountKey, sessionData);
+        const accountId = getKeyFromStorage(accountKey, sessionData);
 
-        const appBundleIdentifier = getKeyFromStorage<string>(
+        const appBundleIdentifier = getKeyFromStorage(
           "bundleIdentifier",
           sessionData
         );
 
-        const versionName = getKeyFromStorage<string>(
-          "version_name",
-          sessionData
-        );
+        const versionName = getKeyFromStorage("version_name", sessionData);
 
-        const familyId = getKeyFromStorage<string>(
-          "app_family_id",
-          sessionData
-        );
+        const familyId = getKeyFromStorage("app_family_id", sessionData);
+
+        const storeKey = getKeyFromStorage("store", sessionData);
+
+        const WEB_STORE_PLATFORM: Record<string, string> = {
+          samsung: "samsung_app_store",
+          lg: "lg_content_store",
+          vizio: "vizio_app_store",
+        };
 
-        const storeKey = getKeyFromStorage<string>("store", sessionData);
+        const cdnStoreKey = WEB_STORE_PLATFORM[storeKey] ?? storeKey;
 
-        const riversUrl = `https://assets-secure.applicaster.com/zapp/accounts/${accountId}/apps/${appBundleIdentifier}/${storeKey}/${versionName}/layouts/${rivers_configuration_id}.json`;
+        const riversUrl = `https://assets-secure.applicaster.com/zapp/accounts/${accountId}/apps/${appBundleIdentifier}/${cdnStoreKey}/${versionName}/layouts/${rivers_configuration_id}.json`;
 
         const cellStylesUrl = `https://assets-secure.applicaster.com/zapp/accounts/${accountId}/app_families/${familyId}/layouts/${rivers_configuration_id}/cell_styles.json`;
 

package/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler.ts

@@ -1,59 +1,55 @@
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
-import {
-  selectUrlSchemePlugins,
-  useAppSelector,
-} from "@applicaster/zapp-react-native-redux";
+import * as R from "ramda";
 
 import { schemeHandlerHooks } from ".";
 import { parseUrl } from "../../helpers";
+
 import { log_warning } from "../../logger";
-import { getPluginModuleUrlScheme } from "@applicaster/zapp-react-native-utils/pluginUtils";
 
 type useUrlSchemeHandlerArgs = {
   url: string;
   onFinish: (callback: (done: () => void) => void) => void;
 };
 
-function resolveSchemeHandler(
-  host: string,
-  eligiblePlugins: QuickBrickPlugin[]
-) {
-  // First check built-in scheme handlers
+function resolveSchemeHandler(host, plugins) {
   if (schemeHandlerHooks?.[host]) return schemeHandlerHooks?.[host];
 
-  if (eligiblePlugins?.length > 0) {
-    // Find the first plugin with matching host
-    const matchingPlugin = eligiblePlugins.find(
-      (plugin) => getPluginModuleUrlScheme(plugin)?.host === host
-    );
+  const elligiblePlugins = R.filter(
+    R.hasPath(["module", "urlScheme"]),
+    plugins
+  );
 
-    return getPluginModuleUrlScheme(matchingPlugin)?.handler || null;
-  }
+  if (elligiblePlugins?.length > 0) {
+    const match = R.compose(
+      R.prop("handler"),
+      R.head,
+      R.filter(R.propEq("host", host)),
+      R.map(R.path(["module", "urlScheme"]))
+    )(elligiblePlugins);
 
-  return null;
+    return match;
+  }
 }
 
+const skipSchemeHandle = ({ url }) => {
+  throw new Error(
+    `Non of the installed plugins knows how to handle this urlScheme ${url}`
+  );
+};
+
 export function useUrlSchemeHandler({
   url,
   onFinish,
 }: useUrlSchemeHandlerArgs) {
   const { host, query } = parseUrl(url);
-  const pluginsWithUrlScheme = useAppSelector(selectUrlSchemePlugins) || [];
+  const { plugins } = usePickFromState(["plugins"]);
 
-  const schemeHandler = resolveSchemeHandler(host, pluginsWithUrlScheme);
+  const useSchemeHandler =
+    resolveSchemeHandler(host, plugins) || skipSchemeHandle;
 
   try {
-    if (schemeHandler) {
-      schemeHandler({ query, url, onFinish });
-    } else {
-      onFinish((done) => {
-        log_warning(
-          `unable to resolve ${url}: No handler found for scheme ${host}`
-        );
-
-        done?.();
-      });
-    }
+    useSchemeHandler({ query, url, onFinish });
   } catch (e) {
     onFinish((done) => {
       log_warning(`unable to resolve ${url}: ${e.message}`);
@@ -62,19 +58,11 @@ export function useUrlSchemeHandler({
   }
 }
 
-export function handleActionSchemeUrl({
-  url,
-  availablePlugins = appStore.get("plugins"),
-}) {
+export function handleActionSchemeUrl({ url }) {
   const { host, query } = parseUrl(url);
+  const plugins = appStore.get("plugins");
 
-  const actionScheme = resolveSchemeHandler(host, availablePlugins);
-
-  if (!actionScheme) {
-    throw new Error(
-      `Non of the installed plugins knows how to handle this urlScheme ${url}`
-    );
-  }
+  const actionScheme = resolveSchemeHandler(host, plugins) || skipSchemeHandle;
 
   actionScheme({ query, url });
 }

package/App/DeepLinking/URLSchemeHandler/URLSchemeHandler.tsx

@@ -30,10 +30,7 @@ export function URLSchemeHandler({ url, onFinish }: Props) {
   useUrlSchemeHandler({ url, onFinish });
 
   return (
-    <View
-      testID="URLSchemeHandler"
-      style={[viewStyles.container, { width, height, backgroundColor }]}
-    >
+    <View style={[viewStyles.container, { width, height, backgroundColor }]}>
       <Spinner size="large" />
     </View>
   );

package/App/DeepLinking/URLSchemeHandler/__tests__/URLSchemeHandler.test.tsx

@@ -1,7 +1,5 @@
 import React from "react";
-import { StyleSheet } from "react-native";
-import { cleanup } from "@testing-library/react-native";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { cleanup, render, waitFor } from "@testing-library/react-native";
 
 const theme = {
   screen_margin_top: 0,
@@ -12,6 +10,14 @@ jest.mock(
   "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
 );
 
+jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
+  useTheme: jest.fn(() => theme),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => ({
+  usePickFromState: jest.fn(() => ({})),
+}));
+
 const { URLSchemeHandler } = require("../URLSchemeHandler");
 const schemeHooks = require("../SchemeHandlerHooks/useUrlSchemeHandler");
 
@@ -30,25 +36,12 @@ describe("URLSchemeHandler", () => {
 
   afterEach(cleanup);
 
-  it("renders correctly and invokes the hook", () => {
-    const wrapper = renderWithProviders(
-      <URLSchemeHandler url={url} onFinish={onFinish} />,
-      {},
-      theme
+  it("renders correctly and invokes the hook", async () => {
+    const wrapper = await waitFor(() =>
+      render(<URLSchemeHandler url={url} onFinish={onFinish} />)
     );
 
-    expect(wrapper.getByTestId("URLSchemeHandler")).toBeTruthy();
-
-    expect(
-      StyleSheet.flatten(wrapper.getByTestId("URLSchemeHandler").props.style)
-    ).toMatchObject({
-      alignItems: "center",
-      backgroundColor: "white",
-      flex: 1,
-      height: 1334,
-      justifyContent: "center",
-      width: 750,
-    });
+    expect(wrapper.toJSON()).toMatchSnapshot();
 
     expect(hookSpy).toHaveBeenCalledWith(
       expect.objectContaining({ url, onFinish })

package/App/DeepLinking/URLSchemeHandler/__tests__/__snapshots__/URLSchemeHandler.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`URLSchemeHandler renders correctly and invokes the hook 1`] = `
+<View
+  style={
+    [
+      {
+        "alignItems": "center",
+        "flex": 1,
+        "justifyContent": "center",
+      },
+      {
+        "backgroundColor": "white",
+        "height": 1334,
+        "width": 750,
+      },
+    ]
+  }
+>
+  <ActivityIndicator
+    size="large"
+  />
+</View>
+`;

package/App/DeepLinking/URLSchemeListener/URLSchemeContextProvider.tsx

@@ -10,6 +10,7 @@ import * as ReactNative from "react-native";
 
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { log_debug, log_error, log_info } from "../logger";
+import { parseUrl } from "../helpers";
 import { getAppUrlScheme } from "@applicaster/zapp-react-native-utils/appDataUtils";
 import {
   getZappPlatform,
@@ -47,6 +48,24 @@ const getWebDeepLink = (initialURL: string) => {
   return getAppUrlScheme() + "://open" + initialURL.slice(index);
 };
 
+const getPresentDeepLink = (
+  initialURL: string | null | undefined
+): string | null => {
+  if (!initialURL) return null;
+
+  const index = initialURL.indexOf("?");
+  if (index === -1) return null;
+
+  const { query } = parseUrl(initialURL);
+  if (!query?.rivers_configuration_id) return null;
+
+  return getAppUrlScheme() + "://present" + initialURL.slice(index);
+};
+
+export const triggerUrlScheme = (url: string): void => {
+  DeviceEventEmitter.emit("handleOpenUrl", { url });
+};
+
 function URLSchemeContextProvider(props: Props) {
   const [state, setState] = useState<string | null>(initialState.url);
 
@@ -67,6 +86,16 @@ function URLSchemeContextProvider(props: Props) {
       const url = await Linking.getInitialURL();
 
       if (isWeb()) {
+        const presentDeepLink = getPresentDeepLink(url);
+
+        if (presentDeepLink) {
+          log_info(
+            `URLSchemeContextProvider: Retrieved initial deep link: ${presentDeepLink}`
+          );
+
+          return setState(presentDeepLink);
+        }
+
         if (getZappPlatform() === ZappPlatform.Vizio) {
           const deepLink = getWebDeepLink(url);
 
@@ -127,6 +156,36 @@ function URLSchemeContextProvider(props: Props) {
       };
     }
 
+    if (isWeb()) {
+      log_debug(
+        `URLSchemeContextProvider: Register DeviceEventEmitter "handleOpenUrl" listener — Platform.OS=${Platform.OS}`
+      );
+
+      const listener = DeviceEventEmitter.addListener(
+        "handleOpenUrl",
+        ({ url: eventUrl }) => {
+          if (eventUrl) {
+            log_info(
+              `URLSchemeContextProvider: DeviceEventEmitter "handleOpenUrl" received — url=${eventUrl}`
+            );
+
+            setState(eventUrl);
+          }
+        }
+      );
+
+      const linkingListener = Linking.addEventListener(
+        URL_EVENT_TYPE,
+        handleOpenURL
+      );
+
+      return () => {
+        log_debug("URLSchemeContextProvider: Remove URL event listeners");
+        listener.remove();
+        linkingListener.remove();
+      };
+    }
+
     log_debug("URLSchemeContextProvider: Register URL event listener");
 
     const listener = Linking.addEventListener(URL_EVENT_TYPE, handleOpenURL);

package/App/DeepLinking/URLSchemeListener/index.tsx

@@ -3,15 +3,16 @@ import React, { useCallback, useContext } from "react";
 import { URLSchemeHandler } from "../URLSchemeHandler";
 import { URLSchemeContext } from "./URLSchemeContextProvider";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 export function URLSchemeListener({ children }: { children: React.ReactNode }) {
   const { url, done } = useContext(URLSchemeContext);
 
   const navigator = useNavigation();
 
-  const appReady = useAppSelector(selectAppReady);
+  const { appState } = usePickFromState(["appState"]);
+
+  const appReady = appState?.appReady;
 
   const onFinish = useCallback(
     (callback) => {

package/App/DeepLinking/helpers/index.ts

@@ -120,13 +120,13 @@ export function isInternalUrl(url = "") {
   return query?.isInternalLink;
 }
 
-export function getKeyFromStorage<T extends unknown>(
+export function getKeyFromStorage(
   key: keyof SessionStorageKeys,
   sessionData: Partial<SessionStorageKeys>
-): T {
+): string {
   if (!sessionData[key]) {
     throw new Error(`${key} is not available in session storage data`);
   }
 
-  return R.compose(R.replace(/"/g, ""), R.prop(key))(sessionData);
+  return String(sessionData[key]).replace(/"/g, "");
 }

package/App/ErrorBoundary/__tests__/store.test.js

@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-native";
+import { act, renderHook } from "@testing-library/react-hooks";
 import { useErrorStore } from "../store";
 
 describe("Error Store", () => {

package/App/NavigationProvider/Loader.tsx

@@ -2,9 +2,8 @@ import React from "react";
 import { View, StyleSheet } from "react-native";
 
 import { Spinner } from "@applicaster/zapp-react-native-ui-components/Components/Spinner";
-import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { selectAppLaunched } from "@applicaster/zapp-react-native-redux";
 
 type Props = {
   children: React.ReactChild;
@@ -22,7 +21,9 @@ const styles = StyleSheet.create({
 });
 
 export function Loader({ children }: Props) {
-  const appLaunched = useAppSelector(selectAppLaunched);
+  const {
+    appState: { appLaunched },
+  } = usePickFromState(["appState"]);
 
   const { currentRoute } = useNavigation();
 

package/App/NavigationProvider/NavigationProvider.tsx

@@ -7,12 +7,16 @@ import {
   getTargetRoute,
   usesVideoModal,
 } from "@applicaster/zapp-react-native-utils/navigationUtils";
-import { last } from "@applicaster/zapp-react-native-utils/utils";
+import { clone, last } from "@applicaster/zapp-react-native-utils/utils";
 import {
   allowedOrientationsForScreen,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { focusManager } from "@applicaster/zapp-react-native-utils/focusManager/FocusManager";
+import {
+  useContentTypes,
+  usePickFromState,
+} from "@applicaster/zapp-react-native-redux/hooks";
 
 import reducer, {
   ACTIONS,
@@ -40,7 +44,6 @@ import {
   activeRiverSelector,
   homeRiverSelector,
   lastEntrySelector,
-  startUpHookPluginIdentifiersSelector,
 } from "./navigator/selectors";
 
 import { coreAppLogger } from "../logger";
@@ -76,16 +79,6 @@ import { Hook } from "@applicaster/zapp-react-native-utils/appUtils/HooksManager
 import { URLSchemeContext } from "../DeepLinking/URLSchemeListener/URLSchemeContextProvider";
 
 import { loadingOverlayManager } from "../LoadingOverlay";
-import {
-  selectAppLaunched,
-  useAppSelector,
-  useContentTypes,
-  usePlugins,
-} from "@applicaster/zapp-react-native-redux";
-import {
-  useLayoutVersion,
-  useRivers,
-} from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const logger = coreAppLogger.addSubsystem("Navigator");
 
@@ -107,11 +100,22 @@ const platform = getPlatform();
 export function NavigationProvider({ children }: Props) {
   const { url: deepLinkURL } = React.useContext(URLSchemeContext);
 
-  const appLaunched = useAppSelector(selectAppLaunched);
-  const layoutVersion = useLayoutVersion();
-  const rivers = useRivers();
+  const {
+    appData: { layoutVersion },
+    rivers,
+    plugins,
+    pluginConfigurations,
+    appState: { appLaunched },
+  } = usePickFromState([
+    "appData",
+    "rivers",
+    "plugins",
+    "pluginConfigurations",
+    "appState",
+    "contentTypes",
+  ]);
+
   const contentTypes = useContentTypes();
-  const plugins = usePlugins();
 
   const [state, dispatch] = React.useReducer<
     NavigationReducer,
@@ -223,7 +227,6 @@ export function NavigationProvider({ children }: Props) {
   };
 
   const isVideoModalDocked = () =>
-    state?.options.videoModal.visible &&
     state?.options.videoModal.mode === "MINIMIZED";
 
   // TODO: Remove as it's using a concept of "current" route.
@@ -246,22 +249,24 @@ export function NavigationProvider({ children }: Props) {
     const screen = rivers[screenId];
     const parent = findParent(context, navigator.currentRoute);
 
+    const entryClone = clone(entry);
+
     if (!screen) {
       logger.warn({
         message: `Cannot resolve type mapping for ${screenId} id`,
-        data: { entry, screenId },
+        data: { entry: entryClone, screenId },
       });
 
       return;
     }
 
     if (parent) {
-      entry.parent = parent?.data;
+      entryClone.parent = parent?.data;
 
-      entry.parentId = parent?.id;
+      entryClone.parentId = parent?.id;
     }
 
-    dispatch(setNestedContent(pathname, entry, screen));
+    dispatch(setNestedContent(pathname, entryClone, screen));
   };
 
   const pushItem = (item, options = {}) => {
@@ -474,11 +479,21 @@ export function NavigationProvider({ children }: Props) {
     openLoadingOverlay();
   };
 
-  const startUpHooksIdentifiers = useAppSelector(
-    startUpHookPluginIdentifiersSelector
-  );
-
   const checkStartUpHooks = React.useMemo(() => {
+    if (!pluginConfigurations) return false;
+
+    const startUpHooksIdentifiers = R.compose(
+      R.map((item) => item.plugin.identifier),
+      R.filter(
+        R.allPass([
+          R.pathEq(["plugin", "api", "require_startup_execution"], true),
+          R.pathEq(["plugin", "react_native"], true),
+          R.pathEq(["plugin", "preload"], true),
+        ])
+      ),
+      R.values
+    )(pluginConfigurations);
+
     if (startUpHooksIdentifiers?.length) {
       const startUpHooks = R.filter(
         (plugin) => R.includes(plugin.identifier, startUpHooksIdentifiers),
@@ -510,7 +525,7 @@ export function NavigationProvider({ children }: Props) {
     }
 
     return false;
-  }, [startUpHooksIdentifiers, plugins, rivers]);
+  }, [pluginConfigurations, plugins, rivers]);
 
   const [startUpHooks, _setStartUpHooks] = React.useState(checkStartUpHooks);
   const currentStartUpHooks = React.useRef(checkStartUpHooks);
@@ -713,7 +728,7 @@ export function NavigationProvider({ children }: Props) {
       activeRiver,
       getPathname: () => pathnameRef.current, // hack use to fix issue causing broken navigation as currentRoute is unreliable
       currentRoute: pathname, // TODO: remove. Current route shouldn't be needed
-      previousAction: (lastEntrySelector(state) as any)
+      previousAction: lastEntrySelector(state)
         ?.action as QuickBrickNavigationActionType,
       push: pushItem,
       replace: replaceItem,

package/App/NavigationProvider/ScreenHooks/usePluginScreenHooks.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { usePlugins } from "@applicaster/zapp-react-native-redux";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 
 enum ReactHooks {
   useEffect = "useEffect",
@@ -39,7 +39,7 @@ function invokeScreenHook(hooksWrappers) {
 }
 
 export function usePluginScreenHooks(pathname: string) {
-  const plugins = usePlugins();
+  const { plugins } = usePickFromState(["plugins"]);
 
   const hooks = React.useMemo(
     () => R.filter(hasScreenHook, plugins) || [],