From 2db3ae7431eae54c4513967dd39c56295228b8a9 Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Mon, 6 Apr 2026 14:42:49 -0700 Subject: [PATCH 1/7] refactor: remove TODO comments --- .../IterableEmbeddedBanner.tsx | 4 --- .../IterableEmbeddedCard.tsx | 25 ++++++------------- 2 files changed, 8 insertions(+), 21 deletions(-) diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx index 92d568e30..e02b01f55 100644 --- a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx +++ b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx @@ -18,10 +18,6 @@ import { IMAGE_WIDTH, } from './IterableEmbeddedBanner.styles'; -/** - * TODO: figure out how default action works. - */ - export const IterableEmbeddedBanner = ({ config, message, diff --git a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx index 4c9148c2f..236d90f7d 100644 --- a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx +++ b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx @@ -15,27 +15,19 @@ import { useEmbeddedView } from '../../hooks/useEmbeddedView'; import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps'; import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles'; -/** - * TODO: Add default action click handler. See IterableEmbeddedView for functionality. - */ - export const IterableEmbeddedCard = ({ config, message, onButtonClick = () => {}, onMessageClick = () => {}, }: IterableEmbeddedComponentProps) => { - const { - handleButtonClick, - handleMessageClick, - media, - parsedStyles, - } = useEmbeddedView(IterableEmbeddedViewType.Card, { - message, - config, - onButtonClick, - onMessageClick, - }); + const { handleButtonClick, handleMessageClick, media, parsedStyles } = + useEmbeddedView(IterableEmbeddedViewType.Card, { + message, + config, + onButtonClick, + onMessageClick, + }); const buttons = message?.elements?.buttons ?? []; return ( @@ -64,8 +56,7 @@ export const IterableEmbeddedCard = ({ uri: media.url as string, height: PixelRatio.getPixelSizeForLayoutSize(IMAGE_HEIGHT), } - : - IterableLogoGrey + : IterableLogoGrey } style={ media.shouldShow From 83f65b4d18ea06fed5145e4847a4147dcd19c15c Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Mon, 6 Apr 2026 15:04:49 -0700 Subject: [PATCH 2/7] docs: enhance IterableEmbedded components with documentation --- .../IterableEmbeddedBanner.tsx | 20 +++++++ .../IterableEmbeddedCard.tsx | 20 +++++++ .../IterableEmbeddedNotification.tsx | 20 +++++++ .../components/IterableEmbeddedView.tsx | 54 ++++++++++++++++++- .../hooks/useEmbeddedView/getMedia.ts | 2 + .../hooks/useEmbeddedView/getStyles.ts | 2 + .../hooks/useEmbeddedView/useEmbeddedView.ts | 2 + src/index.tsx | 1 + 8 files changed, 120 insertions(+), 1 deletion(-) diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx index e02b01f55..1fbb8dfee 100644 --- a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx +++ b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx @@ -18,6 +18,26 @@ import { IMAGE_WIDTH, } from './IterableEmbeddedBanner.styles'; +/** + * + * @param config - The config for the IterableEmbeddedBanner component. + * @param message - The message to render. + * @param onButtonClick - The function to call when a button is clicked. + * @param onMessageClick - The function to call when the message is clicked. + * @returns The IterableEmbeddedBanner component. + * + * @example + * ```tsx + * return ( + * + * ); + * ``` + */ export const IterableEmbeddedBanner = ({ config, message, diff --git a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx index 236d90f7d..da901d642 100644 --- a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx +++ b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx @@ -15,6 +15,26 @@ import { useEmbeddedView } from '../../hooks/useEmbeddedView'; import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps'; import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles'; +/** + * + * @param config - The config for the IterableEmbeddedCard component. + * @param message - The message to render. + * @param onButtonClick - The function to call when a button is clicked. + * @param onMessageClick - The function to call when the message is clicked. + * @returns The IterableEmbeddedCard component. + * + * @example + * ```tsx + * return ( + * + * ); + * ``` + */ export const IterableEmbeddedCard = ({ config, message, diff --git a/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx b/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx index 856ef4da9..1e75c9a75 100644 --- a/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx +++ b/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx @@ -12,6 +12,26 @@ import { useEmbeddedView } from '../../hooks/useEmbeddedView'; import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps'; import { styles } from './IterableEmbeddedNotification.styles'; +/** + * + * @param config - The config for the IterableEmbeddedNotification component. + * @param message - The message to render. + * @param onButtonClick - The function to call when a button is clicked. + * @param onMessageClick - The function to call when the message is clicked. + * @returns The IterableEmbeddedNotification component. + * + * @example + * ```tsx + * return ( + * + * ); + * ``` + */ export const IterableEmbeddedNotification = ({ config, message, diff --git a/src/embedded/components/IterableEmbeddedView.tsx b/src/embedded/components/IterableEmbeddedView.tsx index 86844f15f..de380516b 100644 --- a/src/embedded/components/IterableEmbeddedView.tsx +++ b/src/embedded/components/IterableEmbeddedView.tsx @@ -9,7 +9,7 @@ import { IterableEmbeddedNotification } from './IterableEmbeddedNotification'; /** * The props for the IterableEmbeddedView component. */ -interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps { +export interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps { /** The type of view to render. */ viewType: IterableEmbeddedViewType; } @@ -20,10 +20,62 @@ interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps { * @param message - The message to render. * @param config - The config for the IterableEmbeddedView component, most likely used to style the view. * @param onButtonClick - The function to call when a button is clicked. + * @param onMessageClick - The function to call when the message is clicked. * @returns The IterableEmbeddedView component. * * This component is used to render pre-created, customizable message displays * included with Iterables RN SDK: cards, banners, and notifications. + * + * @example + * ```tsx + * // See `IterableEmbeddedViewType`` for available view types. + * const viewType = IterableEmbeddedViewType.Card; + * + * // The message object that will be rendered. + * // You can retrieve messages by calling `Iterable.embeddedManager.getMessages(IDS)` + * const message = { + * metadata: { + * messageId: 'test-message-123', + * campaignId: 123456, + * placementId: 'test-placement', + * }, + * elements: { + * title: 'Test Title', + * body: 'Test Body', + * buttons: [ + * { id: 'button-1', label: 'Button 1', action: 'button-1-action' }, + * { id: 'button-2', label: 'Button 2', action: 'button-2-action' }, + * ], + * }, + * }; + * + * // The config for the IterableEmbeddedView component, most likely used to style the view. + * // See `IterableEmbeddedViewConfig` for available config options. + * const config = { backgroundColor: '#FFFFFF', borderRadius: 8 }; + * + * // A callback that will be called when a button is clicked. + * // General click handling is handled by the SDK; This is only for custom logic. + * const onButtonClick = () => { + * console.log('Button clicked'); + * }; + * + * // A callback that will be called when the message is clicked. + * // This is not called when a button is clicked. + * // If a default action is set, this is what will be called. + * const onMessageClick = () => { + * console.log('Message clicked'); + * }; + * + * return ( + * + * ); + * ``` */ export const IterableEmbeddedView = ({ viewType, diff --git a/src/embedded/hooks/useEmbeddedView/getMedia.ts b/src/embedded/hooks/useEmbeddedView/getMedia.ts index ecc63ea3b..1e138d52d 100644 --- a/src/embedded/hooks/useEmbeddedView/getMedia.ts +++ b/src/embedded/hooks/useEmbeddedView/getMedia.ts @@ -10,10 +10,12 @@ import { IterableEmbeddedViewType } from '../../enums'; * @returns The media to render. * * @example + * ```ts * const media = getMedia(IterableEmbeddedViewType.Notification, message); * console.log(media.url); * console.log(media.caption); * console.log(media.shouldShow ? 'true' : 'false'); + * ``` */ export const getMedia = ( /** The type of view to render. */ diff --git a/src/embedded/hooks/useEmbeddedView/getStyles.ts b/src/embedded/hooks/useEmbeddedView/getStyles.ts index de2c69206..5781c1a84 100644 --- a/src/embedded/hooks/useEmbeddedView/getStyles.ts +++ b/src/embedded/hooks/useEmbeddedView/getStyles.ts @@ -37,6 +37,7 @@ const getDefaultStyle = ( * @returns The styles. * * @example + * ```ts * const styles = getStyles(IterableEmbeddedViewType.Notification, { * backgroundColor: '#000000', * borderColor: '#000000', @@ -45,6 +46,7 @@ const getDefaultStyle = ( * primaryBtnBackgroundColor: '#000000', * primaryBtnTextColor: '#000000', * }); + * ``` */ export const getStyles = ( viewType: IterableEmbeddedViewType, diff --git a/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts b/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts index 7dcd663da..22b9be9f5 100644 --- a/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts +++ b/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts @@ -16,6 +16,7 @@ const noop = () => {}; * @returns The embedded view. * * @example + * ```tsx * const { handleButtonClick, handleMessageClick, media, parsedStyles } = useEmbeddedView(IterableEmbeddedViewType.Notification, { * message, * config, @@ -30,6 +31,7 @@ const noop = () => {}; * {parsedStyles.backgroundColor} * * ); + * ``` */ export const useEmbeddedView = ( /** The type of view to render. */ diff --git a/src/index.tsx b/src/index.tsx index b4ba8f5cf..13cb6915d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -42,6 +42,7 @@ export { type IterableEmbeddedMessageElementsButton, type IterableEmbeddedMessageElementsText, type IterableEmbeddedViewConfig, + type IterableEmbeddedViewProps, } from './embedded'; export { IterableHtmlInAppContent, From 186e9d94940bc7ddaadeb8ea4023e1b59c99a0e2 Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Mon, 6 Apr 2026 15:20:05 -0700 Subject: [PATCH 3/7] docs: update IterableEmbeddedViewType enum with detailed descriptions and links to OOTB views --- src/embedded/enums/IterableEmbeddedViewType.ts | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/embedded/enums/IterableEmbeddedViewType.ts b/src/embedded/enums/IterableEmbeddedViewType.ts index 90a0b5d7e..89873120c 100644 --- a/src/embedded/enums/IterableEmbeddedViewType.ts +++ b/src/embedded/enums/IterableEmbeddedViewType.ts @@ -2,10 +2,16 @@ * The view type for an embedded message. */ export enum IterableEmbeddedViewType { - /** The embedded view is a banner */ + /** + * [Banner](https://support.iterable.com/hc/en-us/articles/23230946708244-Out-of-the-Box-Views-for-Embedded-Messages#banners) Out of the Box (OOTB) view. + */ Banner = 0, - /** The embedded view is a card */ + /** + * [Card](https://support.iterable.com/hc/en-us/articles/23230946708244-Out-of-the-Box-Views-for-Embedded-Messages#cards) Out of the Box (OOTB) view. + */ Card = 1, - /** The embedded view is a notification */ + /** + * [Notification](https://support.iterable.com/hc/en-us/articles/23230946708244-Out-of-the-Box-Views-for-Embedded-Messages#notifications) Out of the Box (OOTB) view. + */ Notification = 2, } From c758bcbf7ebd763d63cd886ef91ac69dd900cceb Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Mon, 6 Apr 2026 15:31:47 -0700 Subject: [PATCH 4/7] docs: improve IterableEmbeddedView documentation and update prop interface for clarity --- .../components/IterableEmbeddedView.tsx | 54 ++++++++++++------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/src/embedded/components/IterableEmbeddedView.tsx b/src/embedded/components/IterableEmbeddedView.tsx index de380516b..036f767a2 100644 --- a/src/embedded/components/IterableEmbeddedView.tsx +++ b/src/embedded/components/IterableEmbeddedView.tsx @@ -9,7 +9,8 @@ import { IterableEmbeddedNotification } from './IterableEmbeddedNotification'; /** * The props for the IterableEmbeddedView component. */ -export interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps { +export interface IterableEmbeddedViewProps + extends IterableEmbeddedComponentProps { /** The type of view to render. */ viewType: IterableEmbeddedViewType; } @@ -23,45 +24,62 @@ export interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProp * @param onMessageClick - The function to call when the message is clicked. * @returns The IterableEmbeddedView component. * - * This component is used to render pre-created, customizable message displays - * included with Iterables RN SDK: cards, banners, and notifications. + * This component is used to render the following pre-created, customizable + * message displays included with Iterables RN SDK: cards, banners, and + * notifications. * * @example * ```tsx - * // See `IterableEmbeddedViewType`` for available view types. + * import { + * IterableAction, + * IterableEmbeddedView, + * IterableEmbeddedViewType, + * type IterableEmbeddedMessage, + * type IterableEmbeddedMessageElementsButton, + * } from '@iterable/react-native-sdk'; + * + * // See `IterableEmbeddedViewType` for available view types. * const viewType = IterableEmbeddedViewType.Card; * - * // The message object that will be rendered. - * // You can retrieve messages by calling `Iterable.embeddedManager.getMessages(IDS)` - * const message = { + * // Messages usually come from the embedded manager. `placementIds` is `number[] | null` + * // (use `null` to load messages for all placements), for example: + * // Iterable.embeddedManager.getMessages([101, 102]).then((messages) => { ... }); + * const message: IterableEmbeddedMessage = { * metadata: { * messageId: 'test-message-123', + * placementId: 101, * campaignId: 123456, - * placementId: 'test-placement', * }, * elements: { * title: 'Test Title', * body: 'Test Body', * buttons: [ - * { id: 'button-1', label: 'Button 1', action: 'button-1-action' }, - * { id: 'button-2', label: 'Button 2', action: 'button-2-action' }, + * { + * id: 'button-1', + * title: 'Button 1', + * action: new IterableAction('openUrl', 'https://example.com/one'), + * }, + * { + * id: 'button-2', + * title: 'Button 2', + * action: new IterableAction('openUrl', 'https://example.com/two'), + * }, * ], * }, * }; * - * // The config for the IterableEmbeddedView component, most likely used to style the view. + * // The config is used to style the component. * // See `IterableEmbeddedViewConfig` for available config options. * const config = { backgroundColor: '#FFFFFF', borderRadius: 8 }; * - * // A callback that will be called when a button is clicked. - * // General click handling is handled by the SDK; This is only for custom logic. - * const onButtonClick = () => { - * console.log('Button clicked'); + * // `onButtonClick` will be called when a button is clicked. + * // This callback allows you to add custom logic in addition to the SDK's default handling. + * const onButtonClick = (button: IterableEmbeddedMessageElementsButton) => { + * console.log('Button clicked', button.id, button.title, button.action); * }; * - * // A callback that will be called when the message is clicked. - * // This is not called when a button is clicked. - * // If a default action is set, this is what will be called. + * // `onMessageClick` will be called when the message is clicked anywhere outside of a button. + * // If a default action is set, it will be handled prior to this callback. * const onMessageClick = () => { * console.log('Message clicked'); * }; From d94b4d3831b759a98de826a5f66a997a914c4494 Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Wed, 8 Apr 2026 13:23:35 -0700 Subject: [PATCH 5/7] docs: remove campaignId from IterableEmbeddedViewProps documentation for accuracy --- src/embedded/components/IterableEmbeddedView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/embedded/components/IterableEmbeddedView.tsx b/src/embedded/components/IterableEmbeddedView.tsx index 036f767a2..f334bc647 100644 --- a/src/embedded/components/IterableEmbeddedView.tsx +++ b/src/embedded/components/IterableEmbeddedView.tsx @@ -48,7 +48,6 @@ export interface IterableEmbeddedViewProps * metadata: { * messageId: 'test-message-123', * placementId: 101, - * campaignId: 123456, * }, * elements: { * title: 'Test Title', From edcd445274519f2bf87d75fd2bba00586e5c2168 Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Wed, 8 Apr 2026 13:31:41 -0700 Subject: [PATCH 6/7] refactor: update onButtonClick prop to include message parameter --- src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts | 2 +- src/embedded/types/IterableEmbeddedComponentProps.ts | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts b/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts index 22b9be9f5..1e7785335 100644 --- a/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts +++ b/src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts @@ -53,7 +53,7 @@ export const useEmbeddedView = ( const handleButtonClick = useCallback( (button: IterableEmbeddedMessageElementsButton) => { - onButtonClick(button); + onButtonClick(button, message); Iterable.embeddedManager.handleClick(message, button.id, button.action); }, [onButtonClick, message] diff --git a/src/embedded/types/IterableEmbeddedComponentProps.ts b/src/embedded/types/IterableEmbeddedComponentProps.ts index f59e2772e..400dc1ccd 100644 --- a/src/embedded/types/IterableEmbeddedComponentProps.ts +++ b/src/embedded/types/IterableEmbeddedComponentProps.ts @@ -8,7 +8,10 @@ export interface IterableEmbeddedComponentProps { /** The config for the embedded view. */ config?: IterableEmbeddedViewConfig | null; /** The function to call when a button is clicked. */ - onButtonClick?: (button: IterableEmbeddedMessageElementsButton) => void; + onButtonClick?: ( + button: IterableEmbeddedMessageElementsButton, + message: IterableEmbeddedMessage + ) => void; /** The function to call when the message is clicked. */ onMessageClick?: () => void; } From e0c9d7ff1fdd613537d1cb85287eb8a6154c6bf3 Mon Sep 17 00:00:00 2001 From: Loren Posen Date: Wed, 8 Apr 2026 13:34:16 -0700 Subject: [PATCH 7/7] docs: add component descriptions for IterableEmbeddedBanner, Card, and Notification --- .../components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx | 1 + .../components/IterableEmbeddedCard/IterableEmbeddedCard.tsx | 1 + .../IterableEmbeddedNotification.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx index 1fbb8dfee..8035b4b82 100644 --- a/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx +++ b/src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx @@ -19,6 +19,7 @@ import { } from './IterableEmbeddedBanner.styles'; /** + * The IterableEmbeddedBanner component is used to render a banner message. * * @param config - The config for the IterableEmbeddedBanner component. * @param message - The message to render. diff --git a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx index da901d642..1f450be7d 100644 --- a/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx +++ b/src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx @@ -16,6 +16,7 @@ import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbedde import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles'; /** + * The IterableEmbeddedCard component is used to render a card message. * * @param config - The config for the IterableEmbeddedCard component. * @param message - The message to render. diff --git a/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx b/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx index 1e75c9a75..6d86aecbc 100644 --- a/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx +++ b/src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx @@ -13,6 +13,7 @@ import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbedde import { styles } from './IterableEmbeddedNotification.styles'; /** + * The IterableEmbeddedNotification component is used to render a notification message. * * @param config - The config for the IterableEmbeddedNotification component. * @param message - The message to render.