@adobe/react-native-aepmessaging 7.2.1 → 7.4.0

package/src/ui/components/UnreadIcon/UnreadIcon.tsx

@@ -0,0 +1,234 @@
+/*
+    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 { useEffect, useMemo, useState } from 'react';
+import {
+  Image,
+  ImageProps,
+  ImageStyle,
+  StyleSheet,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import useInboxSettings from '../../hooks/useInboxSettings';
+import { SettingsPlacement } from '../../providers/InboxProvider';
+import { useTheme } from '../../theme';
+
+export interface UnreadIconProps extends ViewProps {
+  imageStyle?: ImageStyle;
+  containerStyle?: ViewStyle;
+  source?: ImageProps['source'];
+  darkSource?: ImageProps['source'];
+  size?: number;
+  position?: SettingsPlacement;
+  type?: 'dot' | 'image';
+}
+
+interface DotProps {
+  size: number;
+  backgroundColor?: string;
+}
+
+const Dot = ({ size, backgroundColor }: DotProps) => (
+  <View
+    style={[
+      styles.dot,
+      {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor
+      }
+    ]}
+  />
+);
+
+const UnreadIcon = ({
+  imageStyle,
+  containerStyle,
+  source,
+  darkSource,
+  size = 20,
+  position = 'topright',
+  type = 'dot',
+  style,
+  ...props
+}: UnreadIconProps) => {
+  const { colors, isDark } = useTheme();
+  const settings = useInboxSettings();
+  const [imageLoadError, setImageLoadError] = useState(false);
+  
+  // Get unread indicator settings from context
+  const unreadSettings = settings?.content.unread_indicator;
+  
+  // Use settings from context with fallbacks to props
+  const displayPosition = unreadSettings?.unread_icon?.placement ?? position;
+  
+  const imageSource = unreadSettings?.unread_icon?.image?.url ? 
+    { uri: unreadSettings.unread_icon.image.url } : source;
+  const darkImageSource = unreadSettings?.unread_icon?.image?.darkUrl ? 
+    { uri: unreadSettings.unread_icon.image.darkUrl } : darkSource;
+  
+  // Determine if we should render as image type (only if we have valid URLs)
+  const hasImageUrl = Boolean(
+    unreadSettings?.unread_icon?.image?.url || 
+    unreadSettings?.unread_icon?.image?.darkUrl ||
+    imageSource ||
+    darkImageSource
+  );
+  const renderType = hasImageUrl ? 'image' : type;
+
+  // Reset error state when image source changes
+  useEffect(() => {
+    setImageLoadError(false);
+  }, [imageSource, darkImageSource]);
+  
+  const positionStyle = useMemo(() => {
+    switch (displayPosition) {
+      case 'topleft':
+        return styles.positionTopLeft;
+      case 'topright':
+        return styles.positionTopRight;
+      case 'bottomleft':
+        return styles.positionBottomLeft;
+      case 'bottomright':
+        return styles.positionBottomRight;
+      default:
+        return styles.positionTopRight;
+    }
+  }, [displayPosition]);
+
+  const finalImageSource = useMemo(() => 
+    isDark && darkImageSource ? darkImageSource : imageSource,
+    [isDark, darkImageSource, imageSource]
+  );
+
+  const content = useMemo(() => {
+    // Check if we should show dot instead of image based on URL availability
+    const isEmptyUrlForCurrentMode = () => {
+      const imageSettings = unreadSettings?.unread_icon?.image;
+      if (!imageSettings) return false;
+      
+      if (isDark) {
+        // In dark mode, show dot if darkUrl is empty string or if both darkUrl doesn't exist and url is empty
+        return imageSettings.darkUrl === '' || 
+               (!imageSettings.darkUrl && imageSettings.url === '');
+      }
+      
+      // In light mode, show dot if url is empty string
+      return imageSettings.url === '';
+    };
+
+    // If URL is explicitly empty string for current mode, show dot
+    if (isEmptyUrlForCurrentMode()) {
+      return <Dot size={size} backgroundColor={colors.dotColor} />;
+    }
+
+    // If image failed to load, fallback to dot
+    if (renderType === 'image' && imageLoadError) {
+      return <Dot size={size} backgroundColor={colors.dotColor} />;
+    }
+
+    if (renderType === 'image' && (imageSource || darkImageSource)) {
+      return (
+        <Image
+          source={finalImageSource}
+          style={[
+            styles.image,
+            { width: size, height: size },
+            imageStyle
+          ]}
+          resizeMode="contain"
+          onError={(error) => {
+            console.warn('Failed to load unread icon image:', error.nativeEvent.error);
+            setImageLoadError(true);
+          }}
+        />
+      );
+    }
+
+    // Default dot type
+    return <Dot size={size} backgroundColor={colors.dotColor} />;
+  }, [
+    isDark,
+    unreadSettings?.unread_icon?.image,
+    size,
+    colors.dotColor,
+    renderType,
+    imageLoadError,
+    imageSource,
+    darkImageSource,
+    finalImageSource,
+    imageStyle
+  ]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        positionStyle,
+        { minWidth: size, minHeight: size },
+        containerStyle,
+        style
+      ]}
+      {...props}
+    >
+      {content}
+    </View>
+  );
+};
+
+export default UnreadIcon;
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  positionTopLeft: {
+    top: 6,
+    left: 6,
+  },
+  positionTopRight: {
+    top: 6,
+    right: 6,
+  },
+  positionBottomLeft: {
+    bottom: 6,
+    left: 6,
+  },
+  positionBottomRight: {
+    bottom: 6,
+    right: 6,
+  },
+  dot: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+  },
+  image: {
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.22,
+    shadowRadius: 2.22,
+    elevation: 3,
+  }
+});

package/src/ui/components/index.ts

@@ -0,0 +1,22 @@
+/*
+    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.
+*/
+
+export * from "./Button/Button";
+export * from "./Inbox/Inbox";
+export * from "./ContentCardView/ContentCardView";
+export * from "../types/ContentViewEvent";
+export * from "./Pagination/Pagination";
+export * from "./UnreadIcon/UnreadIcon";
+export { default as EmptyState } from "./Inbox/EmptyState";
+
+export { ThemeProvider } from "../theme/ThemeProvider";
+export type { Themes } from "../theme/Theme";

package/{dist/models/MessagingPropositionItem.js → src/ui/hooks/index.ts}

@@ -1,6 +1,5 @@
-"use strict";
 /*
-    Copyright 2023 Adobe. All rights reserved.
+    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
@@ -10,5 +9,7 @@
     ANY KIND, either express or implied. See the License for the specific
     language governing permissions and limitations under the License.
 */
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=MessagingPropositionItem.js.map
+
+export * from './useContentCardUI';
+export * from './useInbox';
+export * from './useInboxSettings';

package/src/ui/hooks/useAspectRatio.spec.tsx

@@ -0,0 +1,66 @@
+/*
+    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 { renderHook, waitFor } from '@testing-library/react-native';
+import { Image } from 'react-native';
+import useAspectRatio from './useAspectRatio';
+
+describe('useAspectRatio', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('returns 1 when uri is undefined', () => {
+    const { result } = renderHook(() => useAspectRatio());
+    expect(result.current).toBe(1);
+  });
+
+  it('returns width/height when Image.getSize succeeds', async () => {
+    jest.spyOn(Image, 'getSize').mockImplementation((_uri, success) => {
+      success(400, 100);
+    });
+
+    const { result } = renderHook(() => useAspectRatio('https://example.com/a.png'));
+
+    await waitFor(() => {
+      expect(result.current).toBe(4);
+    });
+  });
+
+  it('returns 1 when Image.getSize reports height 0', async () => {
+    jest.spyOn(Image, 'getSize').mockImplementation((_uri, success) => {
+      success(400, 0);
+    });
+
+    const { result } = renderHook(() => useAspectRatio('https://example.com/zero.png'));
+
+    await waitFor(() => {
+      expect(result.current).toBe(1);
+    });
+  });
+
+  it('returns 1 when Image.getSize fails', async () => {
+    const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+    jest.spyOn(Image, 'getSize').mockImplementation((_uri, _s, failure) => {
+      failure?.(new Error('bad'));
+    });
+
+    const { result } = renderHook(() => useAspectRatio('https://example.com/b.png'));
+
+    await waitFor(() => {
+      expect(result.current).toBe(1);
+    });
+
+    expect(logSpy).toHaveBeenCalled();
+    logSpy.mockRestore();
+  });
+});

package/src/ui/hooks/useAspectRatio.tsx

@@ -0,0 +1,39 @@
+/*
+    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 { useEffect, useState } from 'react';
+import { Image } from 'react-native';
+
+function useAspectRatio(uri?: string) {
+  const [imageAspectRatio, setImageAspectRatio] = useState<number>(1);
+
+  useEffect(() => {
+    if (!uri) {
+      return;
+    }
+
+    Image.getSize(
+      uri,
+      (width, height) => {
+        setImageAspectRatio(height > 0 ? width / height : 1);
+      },
+      (error) => {
+        console.log('Error getting image size:', error);
+        setImageAspectRatio(1);
+      }
+    );
+  }, [uri]);
+
+  return imageAspectRatio;
+}
+
+export default useAspectRatio;

package/src/ui/hooks/useContentCardUI.spec.tsx

@@ -0,0 +1,82 @@
+/*
+    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 { act, renderHook, waitFor } from '@testing-library/react-native';
+import Messaging from '../../Messaging';
+import { useContentCardUI } from './useContentCardUI';
+
+jest.mock('../../Messaging', () => ({
+  __esModule: true,
+  default: {
+    updatePropositionsForSurfaces: jest.fn().mockResolvedValue(undefined),
+    getContentCardUI: jest.fn(),
+  },
+}));
+
+describe('useContentCardUI', () => {
+  const template = { id: 'c1', type: 'SmallImage', data: {} };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(Messaging.updatePropositionsForSurfaces).mockResolvedValue(undefined);
+    jest.mocked(Messaging.getContentCardUI).mockResolvedValue([template] as any);
+  });
+
+  it('fetches content cards on mount and exposes refetch', async () => {
+    const { result } = renderHook(() => useContentCardUI('card-surface'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(Messaging.updatePropositionsForSurfaces).toHaveBeenCalledWith(['card-surface']);
+    expect(Messaging.getContentCardUI).toHaveBeenCalledWith('card-surface');
+    expect(result.current.content).toEqual([template]);
+    expect(result.current.error).toBeNull();
+
+    jest.mocked(Messaging.getContentCardUI).mockResolvedValue([] as any);
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(Messaging.getContentCardUI).toHaveBeenCalledTimes(2);
+    expect(result.current.content).toEqual([]);
+  });
+
+  it('clears content and sets error when getContentCardUI throws', async () => {
+    const err = new Error('fetch failed');
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.mocked(Messaging.getContentCardUI).mockRejectedValueOnce(err);
+
+    const { result } = renderHook(() => useContentCardUI('x'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.content).toEqual([]);
+    expect(result.current.error).toBe(err);
+    errorSpy.mockRestore();
+  });
+
+  it('refetches when surface changes', async () => {
+    const { rerender } = renderHook(({ surface }: { surface: string }) => useContentCardUI(surface), {
+      initialProps: { surface: 's1' },
+    });
+
+    await waitFor(() => expect(Messaging.getContentCardUI).toHaveBeenCalledWith('s1'));
+
+    rerender({ surface: 's2' });
+
+    await waitFor(() => expect(Messaging.getContentCardUI).toHaveBeenCalledWith('s2'));
+  });
+});

package/src/ui/hooks/useContentCardUI.ts

@@ -0,0 +1,48 @@
+/*
+    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 { useCallback, useEffect, useState } from 'react';
+import Messaging from '../../Messaging';
+import { ContentTemplate } from '../types/Templates';
+
+/**
+ * @experimental
+ * Hook to fetch content card UI for a given surface via `Messaging.getContentCardUI`.
+ * @param surface - The surface to fetch the content card UI for.
+ * @returns An object containing the content card UI, error, loading state, and a refetch function.
+ */
+export const useContentCardUI = (surface: string) => {
+  const [content, setContent] = useState<ContentTemplate[]>([]);
+  const [error, setError] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchContent = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      await Messaging.updatePropositionsForSurfaces([surface]);
+      const content = await Messaging.getContentCardUI(surface);
+      setContent(content);
+    } catch (error) {
+      console.error(error);
+      setContent([]);
+      setError(error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [surface]);
+
+  useEffect(() => {
+    fetchContent();
+  }, [surface, fetchContent]);
+
+  return { content, error, isLoading, refetch: fetchContent };
+};

package/src/ui/hooks/useInbox.spec.tsx

@@ -0,0 +1,87 @@
+/*
+    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 { act, renderHook, waitFor } from '@testing-library/react-native';
+import Messaging from '../../Messaging';
+import { useInbox } from './useInbox';
+
+jest.mock('../../Messaging', () => ({
+  __esModule: true,
+  default: {
+    updatePropositionsForSurfaces: jest.fn().mockResolvedValue(undefined),
+    getInbox: jest.fn(),
+  },
+}));
+
+const mockSettings = {
+  content: {
+    heading: { content: 'Inbox' },
+    layout: { orientation: 'vertical' as const },
+    capacity: 10,
+  },
+};
+
+describe('useInbox', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.mocked(Messaging.updatePropositionsForSurfaces).mockResolvedValue(undefined);
+    jest.mocked(Messaging.getInbox).mockResolvedValue(mockSettings as any);
+  });
+
+  it('fetches inbox settings on mount and exposes refetch', async () => {
+    const { result } = renderHook(() => useInbox('my-surface'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(Messaging.updatePropositionsForSurfaces).toHaveBeenCalledWith(['my-surface']);
+    expect(Messaging.getInbox).toHaveBeenCalledWith('my-surface');
+    expect(result.current.settings).toEqual(mockSettings);
+    expect(result.current.error).toBeNull();
+
+    jest.mocked(Messaging.getInbox).mockResolvedValue({ ...mockSettings, activityId: 'x' } as any);
+    await act(async () => {
+      await result.current.refetch();
+    });
+
+    expect(Messaging.getInbox).toHaveBeenCalledTimes(2);
+  });
+
+  it('sets error when getInbox throws', async () => {
+    const err = new Error('no inbox');
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    jest.mocked(Messaging.getInbox).mockRejectedValueOnce(err);
+
+    const { result } = renderHook(() => useInbox('bad-surface'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error).toBe(err);
+    expect(result.current.settings).toBeNull();
+    errorSpy.mockRestore();
+  });
+
+  it('refetches when surface changes', async () => {
+    const { rerender } = renderHook(({ surface }: { surface: string }) => useInbox(surface), {
+      initialProps: { surface: 'a' },
+    });
+
+    await waitFor(() => expect(Messaging.getInbox).toHaveBeenCalledWith('a'));
+
+    rerender({ surface: 'b' });
+
+    await waitFor(() => expect(Messaging.getInbox).toHaveBeenCalledWith('b'));
+  });
+});

package/src/ui/hooks/useInbox.ts

@@ -0,0 +1,46 @@
+/*
+    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 { useCallback, useEffect, useState } from "react";
+import Messaging from "../../Messaging";
+import { InboxSettings } from "../providers/InboxProvider";
+
+/**
+ * @experimental
+ * Fetches inbox UI settings for a surface via `Messaging.getInbox`.
+ */
+export function useInbox(surface: string) {
+  const [settings, setSettings] = useState<InboxSettings | null>(null);
+  const [error, setError] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const fetchInbox = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await Messaging.updatePropositionsForSurfaces([surface]);
+      const settings = await Messaging.getInbox(surface);
+      setSettings(settings);
+    } catch (error) {
+      setError(error);
+      console.error('error', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [surface]);
+
+  useEffect(() => {
+    fetchInbox();
+  }, [surface, fetchInbox]);
+
+  return { settings, error, isLoading, refetch: fetchInbox };
+}

package/src/ui/hooks/useInboxSettings.spec.tsx

@@ -0,0 +1,41 @@
+/*
+    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 { renderHook } from '@testing-library/react-native';
+import React from 'react';
+import InboxProvider from '../providers/InboxProvider';
+import useInboxSettings from './useInboxSettings';
+
+const inboxSettings = {
+  content: {
+    heading: { content: 'Heading' },
+    layout: { orientation: 'vertical' as const },
+    capacity: 8,
+  },
+};
+
+describe('useInboxSettings', () => {
+  it('returns null when used outside InboxProvider', () => {
+    const { result } = renderHook(() => useInboxSettings());
+    expect(result.current).toBeNull();
+  });
+
+  it('returns settings from InboxProvider context', () => {
+    const { result } = renderHook(() => useInboxSettings(), {
+      wrapper: ({ children }) => (
+        <InboxProvider settings={inboxSettings as any}>{children}</InboxProvider>
+      ),
+    });
+
+    expect(result.current).toEqual(inboxSettings);
+  });
+});