@applicaster/zapp-react-native-ui-components 16.0.0-rc.2 → 16.0.0-rc.20

package/Components/BackgroundImage/BackgroundImage.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { View, ViewStyle } from "react-native";
+
+import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
+import {
+  selectRemoteConfigurations,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+
+import { getBackgroundImageUrl } from "../Layout/utils";
+
+const baseBackgroundStyles = (imageUrl, backgroundColor) =>
+  ({
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    backgroundSize: "cover",
+    background: imageUrl
+      ? `url(${imageUrl}) no-repeat top center ${backgroundColor}`
+      : backgroundColor,
+  }) as ViewStyle;
+
+export const BackgroundImage = ({ children }: React.PropsWithChildren) => {
+  const theme = useTheme();
+
+  const remoteConfigurations = useAppSelector(selectRemoteConfigurations);
+
+  const backgroundColor = theme.app_background_color;
+  const backgroundImageUrl = getBackgroundImageUrl(remoteConfigurations);
+
+  return (
+    <View
+      id="background"
+      style={baseBackgroundStyles(backgroundImageUrl, backgroundColor)}
+    >
+      {children}
+    </View>
+  );
+};

package/Components/BackgroundImage/BackgroundImage.tv.android.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import {
+  View,
+  StyleSheet,
+  ImageURISource,
+  ImageBackground,
+} from "react-native";
+
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <ImageBackground style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </ImageBackground>
+    </View>
+  );
+}

package/Components/BackgroundImage/BackgroundImage.tv.ios.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { View, StyleSheet, ImageURISource } from "react-native";
+
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
+import { ASSETS } from "@applicaster/zapp-react-native-ui-components/Helpers";
+
+const imageSource: ImageURISource = {
+  uri: ASSETS.APP_BACKGROUND_IMAGE,
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  backgroundImage: { width: "100%", height: "100%" },
+});
+
+export function BackgroundImage({ children }: React.PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <Image style={styles.backgroundImage} source={imageSource}>
+        {children}
+      </Image>
+    </View>
+  );
+}

package/Components/BackgroundImage/index.ts

@@ -0,0 +1 @@
+export { BackgroundImage } from "./BackgroundImage";

package/Components/CellRendererResolver/index.ts

@@ -83,7 +83,7 @@ export function CellRendererResolver({
 
   if (!cellRendererPlugin && !isGroup(component)) {
     logger.warning({
-      message: "Could not resolve cell builder plugin",
+      message: `Could not resolve cell builder plugin: ${component?.component_type}`,
       data: { component },
     });
   }

package/Components/ComponentResolver/__tests__/componentResolver.test.js

@@ -107,7 +107,7 @@ describe("ComponentResolverComponent", () => {
     expect(mockLogger.warning).toHaveBeenNthCalledWith(
       1,
       expect.objectContaining({
-        message: "Could not resolve cell builder plugin",
+        message: "Could not resolve cell builder plugin: foo",
       })
     );
 

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -1,16 +1,18 @@
 import * as React from "react";
 import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-components/Components/NativeFocusables";
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
-import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+// TODO: Enable when will be feature flags
+// import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
 import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
 import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
-const { log_verbose } = createLogger({
-  subsystem: "General",
-  category: "FocusableGroup",
-});
+// TODO: Enable when will be feature flags
+// const { log_verbose } = createLogger({
+//   subsystem: "General",
+//   category: "FocusableGroup",
+// });
 
 type FocusableGroupNativeEvent = {
   nativeEvent: {
@@ -59,12 +61,14 @@ class FocusableGroupComponent extends BaseFocusable<Props> {
     } = this.props;
 
     const onGroupFocus = ({ nativeEvent }: FocusableGroupNativeEvent) => {
-      log_verbose("FOCUSABLE_GROUP: onGroupFocus", { nativeEvent });
+      // TODO: Enable when will be feature flags
+      // log_verbose("FOCUSABLE_GROUP: onGroupFocus", { nativeEvent });
       this.onFocus(this.ref, nativeEvent.focusHeading);
     };
 
     const onGroupBlur = ({ nativeEvent }: FocusableGroupNativeEvent) => {
-      log_verbose("FOCUSABLE_GROUP: onGroupBlur", { nativeEvent });
+      // TODO: Enable when will be feature flags
+      // log_verbose("FOCUSABLE_GROUP: onGroupBlur", { nativeEvent });
       this.onBlur(this.ref, nativeEvent.focusHeading);
     };
 

package/Components/GeneralContentScreen/GeneralContentScreenHookAdapter.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { GeneralContentScreen } from "./GeneralContentScreen";
+import { HookContentFocusGroup } from "./hookFocus";
+import { runInBackground } from "./hookAdapter/runInBackground";
+import { log_error } from "./hookAdapter/logger";
+
+type HookComponentProps = HookPluginProps & {
+  configuration?: unknown;
+};
+
+function GeneralContentScreenHookComponent(props: HookComponentProps) {
+  const { hookPlugin, focused, parentFocus } = props;
+
+  if (!hookPlugin?.screen_id) {
+    log_error(
+      "GeneralContentScreenHookAdapter: This component should only be used as a hook, but no hookPlugin was provided."
+    );
+
+    return null;
+  }
+
+  return (
+    <HookContentFocusGroup>
+      <GeneralContentScreen
+        screenId={hookPlugin.screen_id}
+        isScreenWrappedInContainer={false}
+        focused={focused}
+        parentFocus={parentFocus}
+      />
+    </HookContentFocusGroup>
+  );
+}
+
+export const GeneralContentScreenHookAdapter = {
+  isFlowBlocker: () => true,
+  presentFullScreen: true,
+  Component: GeneralContentScreenHookComponent,
+  runInBackground,
+};

package/Components/GeneralContentScreen/__tests__/GeneralContentScreenHookAdapter.test.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreenHookAdapter } from "../GeneralContentScreenHookAdapter";
+import { log_error } from "../hookAdapter/logger";
+
+const mockScreenSpy = jest.fn();
+
+jest.mock("../GeneralContentScreen", () => ({
+  GeneralContentScreen: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockScreenSpy(props);
+
+    return <View testID="general-content-screen" />;
+  },
+}));
+
+jest.mock("../hookAdapter/runInBackground", () => ({
+  runInBackground: jest.fn(),
+}));
+
+jest.mock("../hookAdapter/logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const { Component } = GeneralContentScreenHookAdapter;
+
+describe("GeneralContentScreenHookAdapter", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders GeneralContentScreen with the hook plugin screen id", () => {
+    const { getByTestId } = render(
+      <Component hookPlugin={{ screen_id: "screen-1" }} focused />
+    );
+
+    expect(getByTestId("general-content-screen")).toBeDefined();
+
+    expect(mockScreenSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        screenId: "screen-1",
+        isScreenWrappedInContainer: false,
+      })
+    );
+  });
+
+  it("renders nothing and logs an error when hookPlugin is missing", () => {
+    const { toJSON } = render(<Component />);
+
+    expect(toJSON()).toBeNull();
+    expect(mockScreenSpy).not.toHaveBeenCalled();
+    expect(log_error).toHaveBeenCalled();
+  });
+
+  it("renders nothing when hookPlugin has no screen_id", () => {
+    const { toJSON } = render(<Component hookPlugin={{}} />);
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/Components/GeneralContentScreen/__tests__/HookContentFocusGroup.web.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+
+import { HookContentFocusGroup } from "../hookFocus/index.web";
+
+const mockFocusableGroupSpy = jest.fn();
+const mockUseInitialFocusSpy = jest.fn();
+
+const mockModalState = { isRunningInBackground: false };
+
+jest.mock("../../FocusableGroup", () => ({
+  FocusableGroup: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockFocusableGroupSpy(props);
+
+    return <View testID="focusable-group">{props.children}</View>;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useContentId: () => "quick-brick-content___route",
+  useNavbarId: () => "quick-brick-navbar___route",
+  usePathname: () => "hooks-modal/profile-select",
+}));
+
+jest.mock("../../Screen/TV/hooks", () => ({
+  useInitialFocus: () => mockUseInitialFocusSpy(),
+}));
+
+jest.mock("../../../Contexts/ZappHookModalContext", () => ({
+  useZappHookModalStore: (selector) => selector(mockModalState),
+}));
+
+describe("HookContentFocusGroup (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockModalState.isRunningInBackground = false;
+  });
+
+  it("wraps content in a preferred-focus content group and triggers initial focus when presented full screen", () => {
+    const { getByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("focusable-group")).toBeDefined();
+    expect(getByTestId("child")).toBeDefined();
+    expect(mockUseInitialFocusSpy).toHaveBeenCalledTimes(1);
+
+    expect(mockFocusableGroupSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "quick-brick-content___route",
+        groupId: "hooks-modal/profile-select",
+        nextFocusUp: "quick-brick-navbar___route",
+        preferredFocus: true,
+        shouldUsePreferredFocus: true,
+      })
+    );
+  });
+
+  it("injects the content group id into the wrapped child so its cells register under it", () => {
+    render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    const child = mockFocusableGroupSpy.mock.calls[0][0].children;
+
+    expect(child.props.groupId).toBe("quick-brick-content___route");
+  });
+
+  it("renders the child without focus handling when running in background (not full screen)", () => {
+    mockModalState.isRunningInBackground = true;
+
+    const { getByTestId, queryByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("child")).toBeDefined();
+    expect(queryByTestId("focusable-group")).toBeNull();
+    expect(mockUseInitialFocusSpy).not.toHaveBeenCalled();
+    expect(mockFocusableGroupSpy).not.toHaveBeenCalled();
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/networkService.test.ts

@@ -0,0 +1,74 @@
+import { requestToSkipHook } from "../networkService";
+
+const mockCall = jest.fn();
+const mockBuildAxiosRequest = jest.fn();
+let mockHelper: Record<string, any>;
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  RequestBuilder: jest.fn().mockImplementation(() => ({
+    setEntryContext: jest.fn().mockReturnThis(),
+    setScreenContext: jest.fn().mockReturnThis(),
+    setUrl: jest.fn().mockReturnThis(),
+    buildAxiosRequest: (...args) => mockBuildAxiosRequest(...args),
+    call: (...args) => mockCall(...args),
+  })),
+  PipesClientResponseHelper: jest.fn().mockImplementation(() => mockHelper),
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const dataSource = { source: "https://skip-endpoint", mapping: {} };
+const payload = { id: "entry-1" };
+
+describe("requestToSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBuildAxiosRequest.mockResolvedValue({ url: "https://skip-endpoint" });
+    mockCall.mockResolvedValue({});
+
+    mockHelper = {
+      error: null,
+      statusCode: 200,
+      responseData: null,
+      getLogsData: jest.fn(() => ({})),
+    };
+  });
+
+  it("returns true when the endpoint returns a non-empty body", async () => {
+    mockHelper.responseData = true;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("treats any truthy payload as skip (hook-screen-wrapper contract)", async () => {
+    mockHelper.responseData = { entry: [] };
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("returns false when the endpoint returns an empty body", async () => {
+    mockHelper.responseData = null;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(false);
+  });
+
+  it("throws when the response contains an error", async () => {
+    mockHelper.error = new Error("server error");
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "server error"
+    );
+  });
+
+  it("throws when the request itself fails", async () => {
+    mockCall.mockRejectedValue(new Error("network down"));
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "network down"
+    );
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/runInBackground.test.ts

@@ -0,0 +1,139 @@
+import { runInBackground } from "../runInBackground";
+import { shouldSkipHook } from "../validationHelper";
+import { requestToSkipHook } from "../networkService";
+
+jest.mock("../validationHelper", () => ({
+  shouldSkipHook: jest.fn(),
+}));
+
+jest.mock("../networkService", () => ({
+  requestToSkipHook: jest.fn(),
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const mockShouldSkipHook = shouldSkipHook as jest.Mock;
+const mockRequestToSkipHook = requestToSkipHook as jest.Mock;
+
+const item = { id: "entry-1" };
+const endpoint = { source: "https://skip-endpoint", mapping: {} };
+
+describe("runInBackground", () => {
+  let callback: jest.Mock;
+  let presentUI: jest.Mock;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    callback = jest.fn();
+    presentUI = jest.fn();
+    mockShouldSkipHook.mockResolvedValue(false);
+    mockRequestToSkipHook.mockResolvedValue(false);
+  });
+
+  it("presents the UI when no skip rules are configured", async () => {
+    await runInBackground(item, callback, {}, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+    expect(mockShouldSkipHook).not.toHaveBeenCalled();
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+  });
+
+  it("finishes the hook when a storage key is found, without calling the endpoint", async () => {
+    mockShouldSkipHook.mockResolvedValue(true);
+
+    const configuration = {
+      rules: {
+        skip_hook_storage_key: "ns.key",
+        skip_hook_endpoint: endpoint,
+      },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockShouldSkipHook).toHaveBeenCalledWith("ns.key");
+
+    expect(callback).toHaveBeenCalledWith({
+      success: true,
+      error: null,
+      payload: item,
+    });
+
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+    expect(presentUI).not.toHaveBeenCalled();
+  });
+
+  it("falls through to the endpoint check when storage keys are not found", async () => {
+    const configuration = {
+      rules: {
+        skip_hook_storage_key: "ns.key",
+        skip_hook_endpoint: endpoint,
+      },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockRequestToSkipHook).toHaveBeenCalledWith(endpoint, item);
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("finishes the hook when the endpoint allows skipping", async () => {
+    mockRequestToSkipHook.mockResolvedValue(true);
+
+    const configuration = {
+      rules: { skip_hook_endpoint: endpoint },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(callback).toHaveBeenCalledWith({
+      success: true,
+      error: null,
+      payload: item,
+    });
+
+    expect(presentUI).not.toHaveBeenCalled();
+  });
+
+  it("ignores an endpoint configuration without a source", async () => {
+    const configuration = {
+      rules: { skip_hook_endpoint: { mapping: {} } },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(mockRequestToSkipHook).not.toHaveBeenCalled();
+    expect(presentUI).toHaveBeenCalled();
+  });
+
+  it("presents the UI when the endpoint check throws", async () => {
+    mockRequestToSkipHook.mockRejectedValue(new Error("network down"));
+
+    const configuration = {
+      rules: { skip_hook_endpoint: endpoint },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+
+  it("presents the UI when the storage check throws", async () => {
+    mockShouldSkipHook.mockRejectedValue(new Error("storage error"));
+
+    const configuration = {
+      rules: { skip_hook_storage_key: "ns.key" },
+    };
+
+    await runInBackground(item, callback, configuration, presentUI);
+
+    expect(presentUI).toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+});