@adobe/react-native-aepmessaging 7.3.0 → 7.4.0

package/src/ui/components/ContentCardView/ContentCardView.spec.tsx

@@ -0,0 +1,278 @@
+/*
+    Copyright 2026 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { Image, Linking } from 'react-native';
+import MessagingEdgeEventType from '../../../models/MessagingEdgeEventType';
+import UnreadIcon from '../UnreadIcon/UnreadIcon';
+import { ContentCardView } from './ContentCardView';
+
+// Mock aspect ratio hook to a stable value
+jest.mock('../../hooks/useAspectRatio', () => ({ __esModule: true, default: () => 1.5 }));
+
+// Mock inbox settings (unread enabled)
+jest.mock('../../hooks/useInboxSettings', () => {
+  const fn = jest.fn(() => ({
+    content: {
+      isUnreadEnabled: true,
+      unread_indicator: { unread_bg: { clr: { light: '#EEE', dark: '#111' } } }
+    }
+  }));
+  return { __esModule: true, default: fn };
+});
+
+const makeTemplate = (overrides: Partial<any> = {}) => ({
+  id: 'card-1',
+  type: 'SmallImage',
+  isRead: false,
+  data: {
+    content: {
+      title: { content: 'Title' },
+      body: { content: 'Body' },
+      image: { url: 'https://example.com/img.png' },
+      dismissBtn: { style: 'close' },
+      actionUrl: 'https://adobe.com'
+    }
+  },
+  track: jest.fn(),
+  ...overrides,
+});
+
+describe('ContentCardView - rendering variants', () => {
+  it('renders SmallImage with title and body', () => {
+    const template = makeTemplate({ type: 'SmallImage' });
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+  it('falls back to SmallImage when variant and template.type are missing', () => {
+    const template = makeTemplate({ type: undefined as any });
+    // remove variant prop
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+  it('renders LargeImage with title, body, and buttons', () => {
+    const template = makeTemplate({
+      type: 'LargeImage',
+      data: {
+        content: {
+          title: { content: 'Title' },
+          body: { content: 'Body' },
+          image: { url: 'https://example.com/img.png' },
+          dismissBtn: { style: 'close' },
+          buttons: [
+            { id: 'btn1', text: { content: 'Go' }, actionUrl: 'https://example.com/go' },
+          ],
+        }
+      }
+    });
+
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+    // Button rendered from buttons map
+    expect(getByText('Go')).toBeTruthy();
+  });
+
+  it('renders ImageOnly without text sections but with image', () => {
+    const template = makeTemplate({ type: 'ImageOnly' });
+    const { queryByText, UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(queryByText('Title')).toBeNull();
+    expect(queryByText('Body')).toBeNull();
+    // Ensure an Image is rendered
+    const images = UNSAFE_getAllByType(Image);
+    expect(images.length).toBeGreaterThan(0);
+  });
+
+  it('uses darkUrl for images when in dark mode', () => {
+    const rn = require('react-native');
+    const colorSpy = jest.spyOn(rn, 'useColorScheme');
+    colorSpy.mockReturnValue('dark');
+
+    const template = makeTemplate({
+      data: { content: { image: { url: 'https://light.png', darkUrl: 'https://dark.png' }, title: { content: 'Title' }, body: { content: 'Body' }, dismissBtn: { style: 'close' } } }
+    });
+
+    const { UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+
+    const images = UNSAFE_getAllByType(Image);
+    expect(images[0].props.source.uri).toBe('https://dark.png');
+
+    colorSpy.mockRestore();
+  });
+
+  it('falls back gracefully for unknown variant (default case)', () => {
+    const template = makeTemplate({ type: 'UnknownVariant' as any });
+    const { getByText } = render(
+      <ContentCardView template={template as any} />
+    );
+    // Should still render content without throwing
+    expect(getByText('Title')).toBeTruthy();
+    expect(getByText('Body')).toBeTruthy();
+  });
+
+});
+
+describe('ContentCardView - interactions and tracking', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('does not crash if Linking.openURL throws (error case)', async () => {
+    jest.spyOn(Linking, 'canOpenURL').mockResolvedValueOnce(true as any);
+    const openSpy = jest
+      .spyOn(Linking, 'openURL')
+      .mockImplementationOnce(() => Promise.reject(new Error('open failed')) as any);
+
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { getByTestId } = render(
+      <ContentCardView template={template as any} listener={listener} testID="card" />
+    );
+
+    expect(() => fireEvent.press(getByTestId('card'))).not.toThrow();
+    await waitFor(() => expect(openSpy).toHaveBeenCalled());
+    expect(listener).toHaveBeenCalledWith('onInteract', template);
+  });
+
+  it('onPress with no track and no actionUrl does not throw or open URL', () => {
+    const openSpy = jest.spyOn(Linking, 'openURL').mockClear();
+    const base = makeTemplate();
+    const tpl = JSON.parse(JSON.stringify(base));
+    tpl.track = undefined;
+    delete tpl.data.content.actionUrl;
+
+    const { getByTestId } = render(
+      <ContentCardView template={tpl as any} testID="card" />
+    );
+    expect(() => fireEvent.press(getByTestId('card'))).not.toThrow();
+    expect(openSpy).not.toHaveBeenCalled();
+  });
+
+  it('calls onDisplay once and tracks DISPLAY', () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    render(<ContentCardView template={template as any} listener={listener} testID="card" />);
+    expect(listener).toHaveBeenCalledWith('onDisplay', template);
+    expect(template.track).toHaveBeenCalledWith(MessagingEdgeEventType.DISPLAY);
+  });
+
+  it('tracks INTERACT and opens URL on press', async () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    jest.spyOn(Linking, 'canOpenURL').mockResolvedValueOnce(true as any);
+    jest.spyOn(Linking, 'openURL').mockResolvedValueOnce(undefined as any);
+    const { getByTestId } = render(<ContentCardView template={template as any} listener={listener} testID="card" />);
+    fireEvent.press(getByTestId('card'));
+    expect(listener).toHaveBeenCalledWith('onInteract', template);
+    expect(template.track).toHaveBeenCalledWith('content_clicked', MessagingEdgeEventType.INTERACT, null);
+    await waitFor(() =>
+      expect(Linking.openURL).toHaveBeenCalledWith('https://adobe.com')
+    );
+  });
+
+  it('warns when card actionUrl cannot be opened (canOpenURL returns false)', async () => {
+    const warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const canOpenSpy = jest.spyOn(Linking, 'canOpenURL').mockResolvedValue(false as any);
+    jest.spyOn(Linking, 'openURL').mockResolvedValue(undefined as any);
+
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { getByTestId } = render(
+      <ContentCardView template={template as any} listener={listener} testID="card" />
+    );
+    fireEvent.press(getByTestId('card'));
+
+    await waitFor(() => {
+      expect(canOpenSpy).toHaveBeenCalledWith('https://adobe.com');
+      expect(warnSpy).toHaveBeenCalledWith('Cannot open URL: https://adobe.com');
+    });
+    warnSpy.mockRestore();
+  });
+
+  it('calls listener with onInteract, template, and buttonId when a CTA button is pressed', async () => {
+    const template = makeTemplate({
+      type: 'LargeImage',
+      data: {
+        content: {
+          title: { content: 'Title' },
+          body: { content: 'Body' },
+          image: { url: 'https://example.com/img.png' },
+          dismissBtn: { style: 'close' },
+          buttons: [
+            { id: 'btn1', text: { content: 'Go' }, actionUrl: 'https://example.com/go' },
+          ],
+        },
+      },
+    });
+    const listener = jest.fn();
+    jest.spyOn(Linking, 'canOpenURL').mockResolvedValue(true as any);
+    jest.spyOn(Linking, 'openURL').mockResolvedValue(undefined as any);
+
+    const { getByText } = render(
+      <ContentCardView template={template as any} listener={listener} />
+    );
+    fireEvent.press(getByText('Go'));
+
+    expect(listener).toHaveBeenCalledWith('onInteract', template, { buttonId: 'btn1' });
+  });
+
+  it('calls onDismiss, tracks DISMISS, and hides the card', () => {
+    const template = makeTemplate();
+    const listener = jest.fn();
+    const { queryByText, getByText } = render(
+      <ContentCardView template={template as any} listener={listener} />
+    );
+    // Dismiss button renders as 'x'
+    fireEvent.press(getByText('\u00D7'));
+    expect(listener).toHaveBeenCalledWith('onDismiss', template);
+    expect(template.track).toHaveBeenCalledWith(MessagingEdgeEventType.DISMISS);
+    // Card should no longer render title after dismiss
+    expect(queryByText('Title')).toBeNull();
+  });
+
+});
+
+describe('ContentCardView - unread indicator and styles', () => {
+  it('renders UnreadIcon by default when settings are missing', () => {
+    const useInboxSettings = require('../../hooks/useInboxSettings').default as jest.Mock;
+    useInboxSettings.mockReturnValueOnce({});
+    const template = makeTemplate({ isRead: false });
+    const { UNSAFE_getAllByType } = render(
+      <ContentCardView template={template as any} />
+    );
+    expect(UNSAFE_getAllByType(UnreadIcon).length).toBeGreaterThan(0);
+  });
+
+  it('applies dynamic Pressable style function', () => {
+    const tpl = makeTemplate();
+    const styleFn = jest.fn(() => ({}));
+    render(<ContentCardView template={tpl as any} style={styleFn as any} />);
+    expect(styleFn).toHaveBeenCalled();
+  });
+});
+
+

package/src/ui/components/ContentCardView/ContentCardView.tsx

@@ -0,0 +1,400 @@
+/*
+    Copyright 2026 Adobe. All rights reserved.
+    This file is licensed to you under the Apache License, Version 2.0 (the
+    "License"); you may not use this file except in compliance with the License.
+    You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law
+    or agreed to in writing, software distributed under the License is
+    distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS OF
+    ANY KIND, either express or implied. See the License for the specific
+    language governing permissions and limitations under the License.
+*/
+
+import React, {
+  useEffect,
+  useCallback,
+  useState,
+  useRef,
+  useMemo,
+} from "react";
+import {
+  ComponentOverrideProps,
+  ContentTemplate,
+  ImageOnlyContentStyle,
+  LargeImageContentStyle,
+  SmallImageContentStyle,
+} from "../../types/Templates";
+import { ContentViewEvent } from "../../types/ContentViewEvent";
+import {
+  Image,
+  Linking,
+  Pressable,
+  PressableProps,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+import MessagingEdgeEventType from '../../../models/MessagingEdgeEventType';
+import DismissButton from '../DismissButton/DismissButton';
+import UnreadIcon from '../UnreadIcon/UnreadIcon';
+import { useTheme } from '../../theme';
+import useAspectRatio from '../../hooks/useAspectRatio';
+import { ContentCardContent, ContentCardTemplate } from '../../../models';
+import Button from '../Button/Button';
+import useInboxSettings from '../../hooks/useInboxSettings';
+
+/**
+ * Callback function that is called when a content card event occurs.
+ */
+export type ContentCardEventListener = (
+  /** The event that occurred, one of "onDismiss", "onDisplay", "onInteract" */
+  event?: ContentViewEvent,
+  /** The full content card data associated with the event */
+  data?: ContentTemplate,
+  /** Any additional native event data that accompanies the event */
+  nativeEvent?: any
+) => void;
+
+/** Props for the ContentCardView component */
+export interface ContentViewProps
+  extends PressableProps,
+    ComponentOverrideProps {
+  /** The content card data to display */
+  template: ContentTemplate;
+  /** Style overrides per template type for the content card */
+  styleOverrides?: {
+    /** Style overrides for the small image content card */
+    smallImageStyle?: SmallImageContentStyle;
+    /** Style overrides for the large image content card */
+    largeImageStyle?: LargeImageContentStyle;
+    /** Style overrides for the image only content card */
+    imageOnlyStyle?: ImageOnlyContentStyle;
+  };
+  /** The function to call when a content card event occurs */
+  listener?: ContentCardEventListener;
+  /** The variant of the content card to display */
+  variant?: ContentCardTemplate;
+}
+
+/**
+ * @experimental
+ * Renders a content card view.
+ */
+export const ContentCardView: React.FC<ContentViewProps> = ({
+  template,
+  listener,
+  variant,
+  styleOverrides: _styleOverrides,
+  style,
+  ContainerProps,
+  ImageContainerProps,
+  ImageProps,
+  ContentContainerProps,
+  TextProps,
+  TitleProps,
+  BodyProps,
+  ButtonContainerProps,
+  ButtonProps,
+  DismissButtonProps,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const isDisplayedRef = useRef(false);
+  const { colors, isDark } = useTheme();
+  const containerSettings = useInboxSettings();
+
+  const isRead = template.isRead ?? false;
+
+  // Default to true if not specified
+  const isUnreadEnabled = containerSettings?.content?.isUnreadEnabled ?? true;
+
+  // Get unread background color based on theme
+  const unreadBackgroundColor = useMemo(() => {
+    if (!isUnreadEnabled || isRead || !containerSettings?.content?.unread_indicator?.unread_bg) {
+      return undefined;
+    }
+    
+    const unreadBg = containerSettings.content.unread_indicator.unread_bg;
+    return isDark ? unreadBg.clr.dark : unreadBg.clr.light;
+  }, [isUnreadEnabled, isRead, containerSettings, isDark]);
+
+  const cardVariant = useMemo<ContentCardTemplate>(
+    () => variant ?? template.type ?? "SmallImage",
+    [variant, template.type]
+  );
+
+  const onDismiss = useCallback(() => {
+    listener?.("onDismiss", template);
+
+    // Track dismiss event using propositionItem
+    template.track?.(MessagingEdgeEventType.DISMISS);
+
+    setIsVisible(false);
+  }, [listener, template]);
+
+  const onPress = useCallback(async () => {
+    listener?.("onInteract", template);
+
+    // Track interaction event using propositionItem
+    template.track?.("content_clicked", MessagingEdgeEventType.INTERACT, null);
+
+
+    const actionUrl = template.data.content.actionUrl;
+    if (actionUrl) {
+      try {
+        const supported = await Linking.canOpenURL(actionUrl);
+        if (supported) {
+          await Linking.openURL(actionUrl);
+        } else {
+          console.warn(`Cannot open URL: ${actionUrl}`);
+        }
+      } catch (error) {
+        console.warn(
+          `Failed to open URL: ${actionUrl}`,
+          error
+        );
+      }
+    }
+  }, [template, listener]);
+
+  const onButtonPress = useCallback((buttonId?: string) => {
+    listener?.("onInteract", template, { buttonId });
+  }, [listener, template]);
+
+  const imageUri = useMemo(() => {
+    if (isDark && template.data?.content?.image?.darkUrl) {
+      return template.data.content.image.darkUrl;
+    }
+    return template.data.content.image?.url;
+  }, [
+    isDark,
+    template.data?.content?.image?.darkUrl,
+    template.data?.content?.image?.url,
+  ]);
+
+  const imageAspectRatio = useAspectRatio(imageUri);
+
+  const styleOverrides = useMemo<
+    | (SmallImageContentStyle & LargeImageContentStyle & ImageOnlyContentStyle)
+    | null
+  >(() => {
+    switch (cardVariant) {
+      case "SmallImage":
+        return _styleOverrides?.smallImageStyle as SmallImageContentStyle;
+      case "LargeImage":
+        return _styleOverrides?.largeImageStyle as LargeImageContentStyle;
+      case "ImageOnly":
+        return _styleOverrides?.imageOnlyStyle as ImageOnlyContentStyle;
+      default:
+        return null;
+    }
+  }, [_styleOverrides, cardVariant]);
+
+  // Call listener on mount to signal view display (only once to prevent duplicates)
+  useEffect(() => {
+    if (!isDisplayedRef.current) {
+      listener?.("onDisplay", template);
+      // Track display event using propositionItem
+      template.track?.(MessagingEdgeEventType.DISPLAY);
+      isDisplayedRef.current = true;
+    }
+  }, [listener, template]);
+
+  // If not visible, return null to hide the entire view
+  if (!isVisible) {
+    return null;
+  }
+
+  if (!template.data) return null;
+
+  const content = template?.data?.content as ContentCardContent;
+
+  if (!content) return null;
+
+  return (
+    <Pressable
+      accessibilityLabel={content?.title?.content ?? 'Content Card'}
+      onPress={onPress}
+      style={(state) => [
+        styles.card,
+        styleOverrides?.card,
+        typeof style === "function" ? style(state) : style,
+      ]}
+      {...props}
+    >
+      <View
+        style={[
+          cardVariant === "SmallImage"
+            ? smallImageStyles.container
+            : styles.container,
+          styleOverrides?.container,
+          unreadBackgroundColor && { backgroundColor: unreadBackgroundColor }
+        ]}
+        {...ContainerProps}
+      >
+        {imageUri && (
+          <View
+            style={[
+              cardVariant === "SmallImage"
+                ? smallImageStyles.imageContainer
+                : [styles.imageContainer, { backgroundColor: colors.imageContainerColor }],
+              styleOverrides?.imageContainer,
+            ]}
+            {...ImageContainerProps}
+          >
+            <Image
+              source={{ uri: imageUri }}
+              style={[
+                cardVariant === "SmallImage"
+                  ? smallImageStyles.image
+                  : styles.image,
+                { aspectRatio: imageAspectRatio },
+                styleOverrides?.image,
+              ]}
+              resizeMode="contain"
+              {...ImageProps}
+            />
+          </View>
+        )}
+        {cardVariant !== "ImageOnly" && (
+          <View
+            style={[cardVariant === "SmallImage"
+              ? smallImageStyles.contentContainer
+              : styles.contentContainer, styleOverrides?.contentContainer]}
+            {...ContentContainerProps}
+          >
+            {content?.title?.content && (
+              <Text
+                style={[
+                  styles.title,
+                  { color: colors.textPrimary },
+                  styleOverrides?.text,
+                  styleOverrides?.title,
+                ]}
+                {...TextProps}
+                {...TitleProps}
+              >
+                {content.title.content}
+              </Text>
+            )}
+            {content?.body?.content && (
+              <Text
+                style={[
+                  styles.body,
+                  { color: colors.textPrimary },
+                  styleOverrides?.text,
+                  styleOverrides?.body,
+                ]}
+                {...TextProps}
+                {...BodyProps}
+              >
+                {content.body.content}
+              </Text>
+            )}
+            <View
+              style={[styles.buttonContainer, styleOverrides?.buttonContainer]}
+              {...ButtonContainerProps}
+            >
+              {(Array.isArray(content?.buttons) && content.buttons.length > 0) &&
+                content.buttons.map((button) => (
+                  <Button
+                    key={button.id}
+                    interactId={button.id}
+                    actionUrl={button.actionUrl}
+                    title={button.text.content}
+                    onPress={onButtonPress}
+                    style={styleOverrides?.button}
+                    textStyle={[
+                      styleOverrides?.text,
+                      styleOverrides?.buttonText,
+                    ]}
+                    {...ButtonProps}
+                  />
+                ))}
+            </View>
+          </View>
+        )}
+        {content?.dismissBtn && content.dismissBtn?.style !== "none" && (
+          <DismissButton
+            onPress={onDismiss}
+            type={content.dismissBtn.style}
+            {...DismissButtonProps}
+          />
+        )}
+        {isUnreadEnabled && !isRead && (
+          <UnreadIcon accessibilityLabel="Unread Icon" />
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    margin: 15,
+    flex: 1,
+  },
+  container: {
+    flexDirection: "column",
+  },
+  imageContainer: {
+    alignItems: "center",
+    borderRadius: 12,
+  },
+  image: {
+    width: "100%",
+    resizeMode: "contain",
+  },
+  contentContainer: {
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    justifyContent: "flex-start",
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 8,
+    marginRight: 16,
+  },
+  body: {
+    fontSize: 14,
+    lineHeight: 18,
+  },
+  buttonContainer: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    flexWrap: "wrap",
+    paddingTop: 8,
+    gap: 8,
+  }
+});
+
+const smallImageStyles = StyleSheet.create({
+  card: {
+    borderRadius: 12,
+    flexDirection: "row",
+    gap: 8,
+    maxWidth: "100%",
+    alignItems: "center",
+  },
+  container: {
+    flexDirection: "row",
+  },
+  contentContainer: {
+    flex: 1,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+    justifyContent: "flex-start",
+  },
+  imageContainer: {
+    borderRadius: 12,
+    maxWidth: "35%",
+    alignSelf: "center",
+  },
+  image: {
+    resizeMode: "contain",
+    width: "100%",
+    maxWidth: "100%",
+  },
+});
+