@adobe/react-native-aepmessaging 7.3.0 → 7.4.0

package/src/ui/hooks/useInboxSettings.ts

@@ -0,0 +1,24 @@
+/*
+    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 { useContext } from "react";
+import { InboxContext, InboxSettings } from "../providers/InboxProvider";
+
+/**
+ * @experimental First React Native inbox UI — subject to change while we expand testing.
+ */
+function useInboxSettings(): InboxSettings | null {
+  const settings = useContext(InboxContext);
+  return settings;
+}
+
+export default useInboxSettings;

package/src/ui/index.ts

@@ -0,0 +1,7 @@
+export * from './components';
+export * from './hooks';
+export * from './theme';
+export * from './types';
+export * from './utils';
+export * from './providers/InboxProvider';
+export { default as InboxProvider } from './providers/InboxProvider';

package/src/ui/providers/InboxProvider.tsx

@@ -0,0 +1,79 @@
+/*
+    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, { createContext } from "react";
+
+export type SettingsPlacement = 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
+
+export interface InboxSettings {
+  activityId?: string;
+  content: {
+    heading: {
+      content: string;
+    };
+    layout: {
+      orientation: 'horizontal' | 'vertical';
+    };
+    capacity: number;
+    emptyStateSettings?: {
+      message: {
+        content: string;
+      };
+      image?: {
+        url?: string;        // flat (light)
+        darkUrl?: string;    // flat (dark)
+        light?: { url?: string }; // nested (light)
+        dark?:  { url?: string }; // nested (dark)
+      };
+    };
+    unread_indicator?: {
+      unread_bg: {
+        clr: {
+          light: string;
+          dark: string;
+        };
+      };
+      unread_icon: {
+        placement: SettingsPlacement;
+        image: {
+          url: string;
+          darkUrl?: string;
+        };
+      };
+    };
+    /** Whether the unread feature is enabled. Defaults to true. */
+    isUnreadEnabled?: boolean;
+  };
+  showPagination?: boolean;
+}
+
+export const InboxContext =
+  createContext<InboxSettings | null>(null);
+
+export interface InboxProviderProps {
+  children: React.ReactNode;
+  settings: InboxSettings;
+}
+
+/** @experimental */
+function InboxProvider({
+  children,
+  settings,
+}: InboxProviderProps) {
+  return (
+    <InboxContext.Provider value={settings}>
+      {children}
+    </InboxContext.Provider>
+  );
+}
+
+export default InboxProvider;

package/src/ui/theme/Theme.ts

@@ -0,0 +1,57 @@
+/*
+    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.
+*/
+
+/**
+ * Represents the themes for the messaging UI.
+ * @interface Themes
+ * @property {Theme} light - The light theme.
+ * @property {Theme} dark - The dark theme.
+ */
+export interface Themes {
+  light: Theme;
+  dark: Theme;
+}
+
+/**
+ * Represents the theme for the messaging UI.
+ * @interface Theme
+ * @property {Colors} colors - The colors for the theme.
+ */
+export interface Theme {
+  colors: Colors;
+  isDark: boolean;
+}
+
+/**
+ * Represents the colors for the theme.
+ * @interface Colors
+ * @property {string} primary - The primary color.
+ * @property {string} secondary - The secondary color.
+ * @property {string} background - The background color.
+ * @property {string} textPrimary - The primary text color.
+ * @property {string} textSecondary - The secondary text color.
+ * @property {string} imagePlaceholder - The image placeholder color.
+ * @property {string} buttonTextColor - The button text color.
+ */
+export interface Colors {
+  primary?: string;
+  secondary?: string;
+  background?: string;
+  textPrimary?: string;
+  textSecondary?: string;
+  imagePlaceholder?: string;
+  buttonTextColor?: string;
+  activeColor?: string;
+  inactiveColor?: string;
+  dotColor?: string;
+  imageContainerColor?: string;
+}

package/src/ui/theme/ThemeProvider.tsx

@@ -0,0 +1,120 @@
+/*
+    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 { createContext, useContext, ReactNode, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { Theme, Themes } from './Theme';
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  customThemes: Themes;
+}
+
+const defaultTheme: Themes = {
+  light: {
+    isDark: false,
+    colors: {
+      primary: '#007AFF',
+      secondary: '#5856D6',
+      background: '#FFFFFF',
+      textPrimary: '#000000',
+      textSecondary: '#8E8E93',
+      imagePlaceholder: '#C7C7CC',
+      buttonTextColor: 'dodgerblue',
+      activeColor: '#0a7ea4',
+      inactiveColor: '#687076',
+      dotColor: '#FF4444',
+      imageContainerColor: '#f0f0f0'
+    }
+  },
+  dark: {
+    isDark: true,
+    colors: {
+      primary: '#0A84FF',
+      secondary: '#5E5CE6',
+      background: '#262626',
+      textPrimary: '#FFFFFF',
+      textSecondary: '#8E8E93',
+      imagePlaceholder: '#48484A',
+      buttonTextColor: 'dodgerblue',
+      activeColor: '#fff',
+      inactiveColor: '#9BA1A6',
+      dotColor: '#FF6B6B',
+      imageContainerColor: '#f0f0f0'
+    }
+  }
+};
+
+const ThemeContext = createContext<Theme | undefined>(undefined);
+
+/**
+ * ThemeProvider component that provides the theme to the children components.
+ *
+ * @param children - The children components.
+ * @param customThemes - The custom themes to override the default themes.
+ * @returns The ThemeProvider component.
+ */
+export const ThemeProvider = ({
+  children,
+  customThemes
+}: ThemeProviderProps) => {
+  const systemColorScheme = useColorScheme();
+
+  // Memoize the merged themes to avoid recreation on every render
+  const mergedThemes: Themes = useMemo(() => {
+    return {
+      light: {
+        ...defaultTheme.light,
+        colors: {
+          ...defaultTheme.light.colors,
+          ...(customThemes?.light?.colors || {})
+        }
+      },
+      dark: {
+        ...defaultTheme.dark,
+        colors: {
+          ...defaultTheme.dark.colors,
+          ...(customThemes?.dark?.colors || {})
+        }
+      }
+    };
+  }, [customThemes]);
+
+  // Memoize the active theme
+  const activeTheme = useMemo(() => {
+    const scheme = systemColorScheme ?? 'light';
+    return mergedThemes[scheme];
+  }, [mergedThemes, systemColorScheme]);
+
+  // Memoize the context value to prevent unnecessary re-renders
+  const contextValue: Theme = useMemo(() => activeTheme, [activeTheme]);
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+/**
+ * useTheme hook that returns the theme context.
+ * @returns The theme context.
+ */
+export const useTheme = (): Theme => {
+  const context = useContext(ThemeContext);
+  const systemColorScheme = useColorScheme();
+  if (context === undefined) {
+    return defaultTheme[systemColorScheme ?? 'light'];
+  }
+  return context;
+};

package/src/ui/theme/index.ts

@@ -0,0 +1,14 @@
+/*
+    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 './Theme';
+export * from './ThemeProvider';

package/src/ui/types/ContentViewEvent.ts

@@ -0,0 +1,20 @@
+/*
+    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.
+*/
+
+/**
+ * The event types for the ContentView component.
+ *
+ * @property {string} onDismiss - The event type for the onDismiss event when the dismiss button is pressed.
+ * @property {string} onDisplay - The event type for the onDisplay event when the content card is displayed.
+ * @property {string} onInteract - The event type for the interact event when the content is pressed.
+ */
+export type ContentViewEvent = 'onDismiss' | 'onDisplay' | 'onInteract';

package/src/ui/types/Templates.ts

@@ -0,0 +1,77 @@
+/*
+    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 {
+  ButtonProps,
+  ImageProps,
+  ImageStyle,
+  PressableProps,
+  TextProps,
+  TextStyle,
+  ViewStyle
+} from 'react-native';
+import { ViewProps } from 'react-native';
+import {
+  ContentCard,
+  ContentCardData,
+  ContentCardTemplate
+} from '../../models/ContentCard';
+import { DismissButtonProps } from '../components/DismissButton/DismissButton';
+
+export class ContentTemplate extends ContentCard {
+  readonly type: ContentCardTemplate;
+
+  constructor(data: ContentCardData, type: ContentCardTemplate, isRead: boolean = false) {
+    super(data, isRead);
+    this.type = type;
+  }
+}
+
+/** Overrides for the structural pieces of the content card */
+export interface ComponentOverrideProps {
+  BodyProps?: Partial<TextProps>;
+  ButtonContainerProps?: Partial<ViewProps>;
+  ButtonProps?: Partial<Omit<ButtonProps, 'onPress'>>;
+  ContainerProps?: Partial<ViewProps>;
+  ContentContainerProps?: Partial<ViewProps>;
+  DismissButtonProps?: DismissButtonProps;
+  ImageContainerProps?: Partial<ViewProps>;
+  ImageProps?: Partial<ImageProps>;
+  TextProps?: Partial<TextProps>;
+  TitleProps?: Partial<TextProps>;
+}
+
+/** The base style overrides available for content cards */
+export interface ContentCardStyles {
+  /** Applies to the root of the content card */
+  card?: ViewStyle;
+  /** Applies to the container inside the content card, applied inside the card Pressable */
+  container?: ViewStyle;
+  imageContainer?: ViewStyle;
+  image?: ImageStyle;
+  contentContainer?: ViewStyle;
+  /** Applies to title and body properties, will be overridden by title and body styles */
+  text?: TextStyle;
+  title?: TextStyle;
+  body?: TextStyle;
+  buttonContainer?: ViewStyle;
+  button?: PressableProps['style'];
+  buttonText?: TextStyle;
+  dismissButton?: PressableProps['style'];
+}
+
+export type SmallImageContentStyle = ContentCardStyles;
+export type LargeImageContentStyle = ContentCardStyles;
+export type ImageOnlyContentStyle = Pick<
+  ContentCardStyles,
+  'card' | 'imageContainer' | 'image' | 'dismissButton'
+>;

package/src/ui/types/index.ts

@@ -0,0 +1,14 @@
+/*
+    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 './ContentViewEvent';
+export * from './Templates';

package/src/ui/utils/generateCardHash.spec.tsx

@@ -0,0 +1,86 @@
+/*
+    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 { generateCardHash } from './generateCardHash';
+
+describe('generateCardHash', () => {
+  it('returns content: hash from title, body, image, actionUrl, and type', () => {
+    const card = {
+      id: 'ignored-when-content',
+      type: 'LargeImage',
+      data: {
+        content: {
+          actionUrl: 'https://go',
+          title: { content: 'T' },
+          body: { content: 'B' },
+          image: { url: 'https://img' },
+        },
+      },
+    };
+    expect(generateCardHash(card as any)).toBe(
+      'content:https://go|T|B|https://img|LargeImage'
+    );
+  });
+
+  it('uses meta.adobe.template when type is missing', () => {
+    const card = {
+      data: {
+        meta: { adobe: { template: 'SmallImage' } },
+        content: {
+          title: { content: 'X' },
+        },
+      },
+    };
+    expect(generateCardHash(card as any)).toContain('|SmallImage');
+  });
+
+  it('uses darkUrl when url is missing', () => {
+    const card = {
+      type: 'SmallImage',
+      data: {
+        content: {
+          title: { content: 'T' },
+          image: { darkUrl: 'https://dark.png' },
+        },
+      },
+    };
+    expect(generateCardHash(card as any)).toContain('https://dark.png');
+  });
+
+  it('uses uuid when content is present but all parts are empty', () => {
+    const card = {
+      uuid: 'u-1',
+      data: {
+        content: {
+          title: { content: '' },
+          body: { content: '' },
+        },
+      },
+    };
+    expect(generateCardHash(card as any)).toBe('uuid:u-1');
+  });
+
+  it('uses id when no usable content hash and no uuid', () => {
+    const card = {
+      id: 'card-99',
+      data: {},
+    };
+    expect(generateCardHash(card as any)).toBe('id:card-99');
+  });
+
+  it('uses fallback with Math.random when no content, uuid, or id', () => {
+    jest.spyOn(Math, 'random').mockReturnValue(0.25);
+    const card = { data: {} };
+    expect(generateCardHash(card as any)).toBe('fallback:0.25');
+    jest.restoreAllMocks();
+  });
+});

package/src/ui/utils/generateCardHash.ts

@@ -0,0 +1,59 @@
+/*
+    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 { ContentTemplate } from '../types/Templates';
+
+/**
+ * @experimental First React Native inbox / content-card UI
+ * Generate a stable identifier (hash) for a card based on its content
+ * This ensures the same card is identified even if the ID changes between refetches
+ * 
+ * Priority: content hash (most stable) > uuid > id
+ * 
+ * @param card - The content card template
+ * @returns A stable identifier string with a prefix indicating the source (content:, uuid:, or id:)
+ * 
+ * @example
+ * ```typescript
+ * const cardHash = generateCardHash(card);
+ * // Returns: "content:https://example.com|Title|Body|image.jpg|SmallImage"
+ * // or: "uuid:123e4567-e89b-12d3-a456-426614174000"
+ * // or: "id:card-123"
+ * ```
+ */
+export const generateCardHash = (card: ContentTemplate | any): string => {
+  const content = card.data?.content;
+  if (content) {
+    const parts = [
+      content.actionUrl || '',
+      content.title?.content || '',
+      content.body?.content || '',
+      content.image?.url || content.image?.darkUrl || '',
+      card.type || card.data?.meta?.adobe?.template || '',
+    ];
+    const contentHash = parts.join('|');
+    if (parts.some(p => p.trim().length > 0)) {
+      return `content:${contentHash}`;
+    }
+  }
+  
+  if (card.uuid) {
+    return `uuid:${card.uuid}`;
+  }
+  
+  if (card.id) {
+    return `id:${card.id}`;
+  }
+  
+  return `fallback:${String(Math.random())}`;
+};
+