@applicaster/zapp-react-native-ui-components 15.0.0-alpha.5859164390 → 15.0.0-alpha.5904402522

package/Components/GeneralContentScreen/GeneralContentScreen.tsx

@@ -12,12 +12,26 @@ import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { ScreenTrackedViewPositionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ScreenTrackedViewPositionsContext";
 import { useEventAlerts } from "./utils/useEventAlerts";
-
-const { log_info } = createLogger({
+import {
+  selectRiverById,
+  useAppSelector,
+} from "@applicaster/zapp-react-native-redux";
+import { getScreenDataSource } from "./utils/getScreenDataSource";
+import { ScreenResolverFeedProvider } from "../ScreenResolverFeedProvider/ScreenResolverFeedProvider";
+
+const { log_debug } = createLogger({
   category: "ScreenContainer",
   subsystem: "General",
 });
 
+/** Provides screen-feed from general-screen configuration (if defined) */
+const useFeedData = (id) => {
+  const river = useAppSelector((state) => selectRiverById(state, id));
+  const feedData = getScreenDataSource(river);
+
+  return feedData;
+};
+
 export const GeneralContentScreen = ({
   feed,
   screenId,
@@ -54,20 +68,15 @@ export const GeneralContentScreen = ({
     useEffect(() => {
       if (!riverActionProvidersReady) {
         if (actionsInitialStateSetters.length > 0) {
-          log_info(
-            "ScreenContainer: starting to check river action providers to initialize",
-            { actionsInitialStateSetters }
-          );
-
           allSettled(actionsInitialStateSetters).finally(() => {
-            log_info(
+            log_debug(
               "ScreenContainer: action provider ready, completed. Starting to present screen"
             );
 
             setRiverActionProvidersReady(true);
           });
         } else {
-          log_info(
+          log_debug(
             "ScreenContainer: no action provider to check, completed. Starting to present screen"
           );
 
@@ -108,24 +117,26 @@ export const GeneralContentScreen = ({
   if (!isReady || isNilOrEmpty(components || uiComponents)) return null;
 
   return (
-    <ScreenTrackedViewPositionsContext.Provider>
-      <CellTapContext.Provider value={contextValue}>
-        <ComponentsMap
-          feed={feed}
-          riverId={screenId}
-          groupId={groupId || `general-content-screen-${screenId}`}
-          riverComponents={components || uiComponents}
-          scrollViewExtraProps={scrollViewExtraProps}
-          getStaticComponentFeed={getStaticComponentFeed}
-          extraAnchorPointYOffset={extraAnchorPointYOffset}
-          isScreenWrappedInContainer={isScreenWrappedInContainer}
-          parentFocus={parentFocus}
-          focused={focused}
-          containerHeight={containerHeight}
-          preferredFocus={preferredFocus}
-          {...componentsMapExtraProps}
-        />
-      </CellTapContext.Provider>
-    </ScreenTrackedViewPositionsContext.Provider>
+    <ScreenResolverFeedProvider id={screenId} useFeedData={useFeedData}>
+      <ScreenTrackedViewPositionsContext.Provider>
+        <CellTapContext.Provider value={contextValue}>
+          <ComponentsMap
+            feed={feed}
+            riverId={screenId}
+            groupId={groupId || `general-content-screen-${screenId}`}
+            riverComponents={components || uiComponents}
+            scrollViewExtraProps={scrollViewExtraProps}
+            getStaticComponentFeed={getStaticComponentFeed}
+            extraAnchorPointYOffset={extraAnchorPointYOffset}
+            isScreenWrappedInContainer={isScreenWrappedInContainer}
+            parentFocus={parentFocus}
+            focused={focused}
+            containerHeight={containerHeight}
+            preferredFocus={preferredFocus}
+            {...componentsMapExtraProps}
+          />
+        </CellTapContext.Provider>
+      </ScreenTrackedViewPositionsContext.Provider>
+    </ScreenResolverFeedProvider>
   );
 };

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

@@ -0,0 +1,104 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreen } from "../GeneralContentScreen";
+
+const mockUseAppSelector = jest.fn();
+const mockSelectRiverById = jest.fn();
+const mockProviderSpy = jest.fn();
+
+jest.mock("../../River/ComponentsMap", () => ({
+  ComponentsMap: () => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    return <View testID="components-map" />;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => jest.fn()),
+}));
+
+jest.mock("../utils", () => ({
+  logger: { warn: jest.fn() },
+  whenMatchingType: jest.fn((_type, value) => value),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/layout", () => ({
+  useLayoutVersion: jest.fn(() => false),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenData",
+  () => ({
+    useScreenData: jest.fn(() => ({
+      ui_components: [{ id: "ui-component" }],
+      general: {},
+    })),
+  })
+);
+
+jest.mock("../utils/useCurationAPI", () => ({
+  useCurationAPI: jest.fn(() => [{ id: "curation-component" }]),
+}));
+
+jest.mock("@applicaster/quick-brick-core/App/ActionSetters", () => ({
+  useRiverInitialState: jest.fn(() => []),
+}));
+
+jest.mock("../utils/useEventAlerts", () => ({
+  useEventAlerts: jest.fn(),
+}));
+
+jest.mock("@applicaster/zapp-react-native-redux", () => ({
+  useAppSelector: (...args) => mockUseAppSelector(...args),
+  selectRiverById: (...args) => mockSelectRiverById(...args),
+}));
+
+jest.mock("../utils/getScreenDataSource", () => ({
+  getScreenDataSource: jest.fn(() => ({
+    source: "https://feed",
+    mapping: {},
+  })),
+}));
+
+jest.mock(
+  "../../ScreenResolverFeedProvider/ScreenResolverFeedProvider",
+  () => ({
+    ScreenResolverFeedProvider: ({ id, useFeedData, children }) => {
+      const React = require("react");
+      const { View } = require("react-native");
+
+      mockProviderSpy(id, useFeedData);
+      useFeedData(id);
+
+      return <View testID="screen-resolver-feed-provider">{children}</View>;
+    },
+  })
+);
+
+describe("GeneralContentScreen", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseAppSelector.mockImplementation((selector) => selector({}));
+    mockSelectRiverById.mockReturnValue({ id: "screen-1" });
+  });
+
+  it("wraps content with ScreenResolverFeedProvider and renders ComponentsMap", () => {
+    const { getByTestId } = render(
+      <GeneralContentScreen
+        screenId="screen-1"
+        feed={null}
+        components={[{ id: "component-1" }]}
+      />
+    );
+
+    expect(getByTestId("screen-resolver-feed-provider")).toBeDefined();
+    expect(getByTestId("components-map")).toBeDefined();
+
+    expect(mockProviderSpy).toHaveBeenCalledWith(
+      "screen-1",
+      expect.any(Function)
+    );
+  });
+});

package/Components/GeneralContentScreen/utils/__tests__/getScreenDataSource.test.ts

@@ -0,0 +1,19 @@
+import { getScreenDataSource } from "../getScreenDataSource";
+
+describe("getScreenDataSource", () => {
+  it("returns screen_feed data when present", () => {
+    const result = getScreenDataSource({
+      data: {
+        screen_feed: {
+          source: "https://feed",
+        },
+      },
+    });
+
+    expect(result).toEqual({ source: "https://feed" });
+  });
+
+  it("returns undefined when screen_feed is missing", () => {
+    expect(getScreenDataSource({ data: {} })).toBeUndefined();
+  });
+});

package/Components/GeneralContentScreen/utils/getScreenDataSource.ts

@@ -0,0 +1,9 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+const lookupPath = ["data", "screen_feed"];
+
+export const getScreenDataSource = (
+  screenData: any
+): Option<ZappDataSource> => {
+  return get(screenData, lookupPath) as ZappDataSource | undefined;
+};

package/Components/HookRenderer/HookRenderer.tsx

@@ -6,7 +6,12 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useHookAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks";
 import { useSetNavbarState } from "@applicaster/zapp-react-native-utils/reactHooks";
-import { PresentationType } from "../ScreenResolver";
+
+import { componentsLogger } from "../../Helpers/logger";
+
+const logger = componentsLogger.addSubsystem("HookRenderer");
+
+const HOOK_PRESENTATION_TYPE = "Hook";
 
 type Props = {
   focused?: boolean;
@@ -15,20 +20,17 @@ type Props = {
   callback: hookCallback;
 };
 
-export const HookRenderer = (props: Props) => {
-  const {
-    focused,
-    screenData: { payload, hookPlugin },
-    callback,
-  } = props;
-
-  const { setVisible: showNavBar } = useSetNavbarState();
+const HookRenderer = (props: Props) => {
+  const { focused, screenData, callback } = props;
+  const { payload, hookPlugin } = screenData;
 
   const {
     module: { Component: HookComponent, presentFullScreen },
     configuration,
   } = hookPlugin;
 
+  const { setVisible: showNavBar } = useSetNavbarState();
+
   useHookAnalytics(props);
 
   const isNavBarVisible = useIsNavBarVisible();
@@ -63,8 +65,36 @@ export const HookRenderer = (props: Props) => {
         hookPlugin,
         focused,
         parentFocus,
-        presentationType: PresentationType.Hook,
+        presentationType: HOOK_PRESENTATION_TYPE,
       }}
     />
   );
 };
+
+/**
+ * Guard component to prevent rendering HookRenderer when screenData or hookPlugin is missing. This is to avoid potential crashes due to missing data.
+ */
+const HookRendererGuard = (props: Props) => {
+  React.useEffect(() => {
+    if (!props.screenData) {
+      logger.error(
+        "HookRenderer received no screenData, screen cannot be rendered"
+      );
+    } else if (!props.screenData.hookPlugin) {
+      logger.error(
+        "HookRenderer received screenData with no hookPlugin, screen cannot be rendered",
+        {
+          screenData: props.screenData,
+        }
+      );
+    }
+  }, [props.screenData]);
+
+  if (!props.screenData || !props.screenData.hookPlugin) {
+    return null;
+  }
+
+  return <HookRenderer {...props} />;
+};
+
+export { HookRendererGuard as HookRenderer };

package/Components/HookRenderer/__tests__/HookRenderer.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { View } from "react-native";
+import { render } from "@testing-library/react-native";
+import { HookRenderer } from "..";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  isTV: jest.fn(() => false),
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useBackHandler: jest.fn(),
+  useIsNavBarVisible: jest.fn(() => true),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-utils/analyticsUtils/helpers/hooks",
+  () => ({
+    useHookAnalytics: jest.fn(),
+  })
+);
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  useSetNavbarState: jest.fn(() => ({
+    setVisible: jest.fn(),
+  })),
+}));
+
+describe("HookRenderer", () => {
+  it("returns null when hookPlugin is missing", () => {
+    const { toJSON } = render(
+      <HookRenderer callback={jest.fn()} screenData={{ payload: {} } as any} />
+    );
+
+    expect(toJSON()).toBeNull();
+  });
+
+  it("passes Hook presentationType to rendered hook component", () => {
+    const HookComponent = (props) => (
+      <View testID="hook-component" {...props} />
+    );
+
+    const { getByTestId } = render(
+      <HookRenderer
+        callback={jest.fn()}
+        screenData={{
+          payload: { foo: "bar" },
+          hookPlugin: {
+            module: {
+              Component: HookComponent,
+              presentFullScreen: false,
+            },
+            configuration: {},
+          },
+        }}
+      />
+    );
+
+    expect(getByTestId("hook-component").props.presentationType).toBe("Hook");
+  });
+});

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { TouchableOpacity } from "react-native";
+
+import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+
+import { masterCellLogger } from "../logger";
+import {
+  buildLegacySelection,
+  resolveIsActive,
+  resolveLabelText,
+} from "./mobile/MobileActionButtons/helpers";
+
+type ChildElementProps = {
+  children?: React.ReactNode;
+  mobileActionRole?: string;
+  state?: string;
+  [key: string]: unknown;
+};
+
+type Props = {
+  children?: React.ReactNode;
+  item: ZappEntry | ZappFeed;
+  action?: {
+    identifier?: string;
+  };
+  style?: Record<string, unknown>;
+  focusedStyles?: Record<string, unknown>;
+  testID?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+};
+
+const isValidElement = (
+  child: React.ReactNode
+): child is React.ReactElement<ChildElementProps> =>
+  React.isValidElement(child);
+
+export function PressableView({
+  children,
+  item,
+  action,
+  style = {},
+  focusedStyles = {},
+  testID,
+  accessibilityLabel,
+  accessibilityHint,
+}: Props) {
+  const actionContext = useActions(action?.identifier);
+
+  const actionDisabled =
+    typeof actionContext?.isActionAvailable === "function" &&
+    !actionContext.isActionAvailable(item);
+
+  const supportsEntryState =
+    typeof actionContext?.initialEntryState === "function" && !actionDisabled;
+
+  const [actionState, setActionState] = useState(() =>
+    supportsEntryState ? actionContext.initialEntryState(item) : null
+  );
+
+  useEffect(() => {
+    if (supportsEntryState) {
+      setActionState(actionContext.initialEntryState(item));
+    }
+  }, [supportsEntryState, item, actionContext]);
+
+  useEffect(() => {
+    if (typeof actionContext?.addListener === "function") {
+      return actionContext.addListener(String(item?.id), (nextState) => {
+        setActionState(nextState);
+      });
+    }
+
+    if (typeof actionContext?.addListeners === "function") {
+      return actionContext.addListeners(({ entryState, entry }) => {
+        if (entry?.id === item?.id) {
+          setActionState(entryState);
+        }
+      });
+    }
+
+    return undefined;
+  }, [actionContext, item?.id]);
+
+  const legacySelected = useMemo(() => {
+    if (!actionContext || supportsEntryState) {
+      return false;
+    }
+
+    return buildLegacySelection(item, actionContext);
+  }, [actionContext, supportsEntryState, item]);
+
+  const isActive = resolveIsActive(actionState, legacySelected);
+
+  const labelText = supportsEntryState
+    ? resolveLabelText(actionState?.label)
+    : "";
+
+  const shouldRenderAsset = Boolean(
+    supportsEntryState ? actionState?.asset : false
+  );
+
+  const shouldRenderLabel = Boolean(labelText);
+
+  const cloneChildrenWithState = (nodes?: React.ReactNode): React.ReactNode => {
+    return React.Children.map(nodes, (child) => {
+      if (!isValidElement(child)) {
+        return child;
+      }
+
+      const role = child.props.mobileActionRole;
+      const nextChildren = cloneChildrenWithState(child.props.children);
+
+      if (role === "asset" && !shouldRenderAsset) {
+        return null;
+      }
+
+      if (role === "label" && !shouldRenderLabel) {
+        return null;
+      }
+
+      if (
+        role === "label_container" &&
+        React.Children.count(nextChildren) === 0
+      ) {
+        return null;
+      }
+
+      const nextProps: Partial<ChildElementProps> = {};
+
+      if (role === "asset") {
+        nextProps.state = isActive ? "active" : "inactive";
+      }
+
+      if (role === "label") {
+        nextProps.state = isActive ? "focused" : "default";
+      }
+
+      if (nextChildren !== child.props.children) {
+        nextProps.children = nextChildren;
+      }
+
+      return React.cloneElement(child, nextProps);
+    });
+  };
+
+  const onPress = useCallback(async () => {
+    if (!actionContext) {
+      return;
+    }
+
+    if (supportsEntryState) {
+      return actionContext.invokeAction(item, {
+        updateState: setActionState,
+      });
+    }
+
+    const favouritesAction = legacySelected
+      ? actionContext.removeFavourite
+      : actionContext.addFavourite;
+
+    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
+
+    return toggleAction?.(item);
+  }, [actionContext, supportsEntryState, item, legacySelected]);
+
+  if (!actionContext) {
+    masterCellLogger.warning(
+      `You're missing an action plugin(${action?.identifier}) required by your mobile action button.`
+    );
+
+    return null;
+  }
+
+  if (actionDisabled) {
+    return null;
+  }
+
+  if (!shouldRenderAsset && !shouldRenderLabel) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={onPress}
+      testID={testID || `${item?.id}`}
+      accessibilityLabel={accessibilityLabel || `${item?.id}`}
+      accessibilityHint={accessibilityHint}
+      accessible={!!(testID || accessibilityLabel)}
+      style={isActive ? { ...style, ...focusedStyles } : style}
+    >
+      {cloneChildrenWithState(children)}
+    </TouchableOpacity>
+  );
+}

package/Components/MasterCell/DefaultComponents/index.ts

@@ -16,12 +16,14 @@ import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
 import { ImageBorderContainer } from "./ImageBorderContainer";
+import { PressableView } from "./PressableView";
 
 export const defaultComponents = {
   View,
   CollapsibleTextContainer,
   Text,
   Button,
+  PressableView,
   Image,
   PureImage,
   ButtonContainerView,

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/Asset.ts

@@ -0,0 +1,46 @@
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Props = {
+  prefix: string;
+  value: Function;
+  actionIdentifier: string;
+  testID?: string;
+};
+
+export const Asset = ({ prefix, value, actionIdentifier, testID }: Props) => {
+  if (!value(`${prefix}_asset_enabled`)) {
+    return null;
+  }
+
+  return {
+    type: "Image",
+    style: {
+      width: toNumberWithDefaultZero(value(`${prefix}_asset_width`)),
+      height: toNumberWithDefaultZero(value(`${prefix}_asset_height`)),
+      marginTop: toNumberWithDefaultZero(value(`${prefix}_asset_margin_top`)),
+      marginRight: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_right`)
+      ),
+      marginBottom: toNumberWithDefaultZero(
+        value(`${prefix}_asset_margin_bottom`)
+      ),
+      marginLeft: toNumberWithDefaultZero(value(`${prefix}_asset_margin_left`)),
+      backgroundColor: "transparent",
+    },
+    data: [
+      {
+        func: (entry) => entry,
+        args: [],
+        propName: "entry",
+      },
+    ],
+    additionalProps: {
+      source: {
+        context: actionIdentifier,
+      },
+      state: "inactive",
+      mobileActionRole: "asset",
+      testID: testID ? `${testID}-asset` : undefined,
+    },
+  };
+};