Conversation
…mbedded messaging
|
Coverage Impact ⬆️ Merging this pull request will increase total coverage on Modified Files with Diff Coverage (12) 🤖 Increase coverage with AI coding...🚦 See full report on Qlty Cloud » 🛟 Help
|
|
…and unused styles
… clarity on props and usage
…bedded-view-component [MOB-12270] new-embedded-view-component
…ed component styles
…g unused properties
…ibility in Embedded component
…etMedia utility function
… loren/embedded/SDK-248-notification-component
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
…oren/embedded/SDK-246-card-component
…omponent-stretch [SDK-245] banner-component
…ponent [SDK-246] card-component
… and links to OOTB views
…rface for clarity
[SDK-393] cleanup
…tion normalization
…e standard for fmt pod
…ility and visual consistency
…tion-buttons-overflow-with-large-text [SDK-431] notification-buttons-overflow-with-large-text
…r-crashes-with-incorrect-configs
…ser-crashes-with-incorrect-configs [SDK-433] JSON parse error when config contains unexpected type
Emb ootb/master
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| key: 'borderWidth' | 'borderCornerRadius', | ||
| value: unknown | ||
| ): number | undefined { | ||
| if (value === undefined || value === null) { |
18 new issues
|
There was a problem hiding this comment.
Pull request overview
Bumps the SDK to 2.3.0-beta.0 and introduces a new Embedded Messaging UI surface (OOTB Banner/Card/Notification views) with supporting hooks, types, defaults, assets, and example-app integration.
Changes:
- Version bump + changelog entry for
2.3.0-beta.0. - Adds embedded view components (
IterableEmbeddedView+ Banner/Card/Notification), hook (useEmbeddedView), enums/types/config normalization, and defaults with test coverage. - Updates the example app to render embedded messages via
IterableEmbeddedViewand adds a JSON config editor modal.
Reviewed changes
Copilot reviewed 44 out of 46 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| src/types/assets.d.ts | Adds TS module declaration for importing .png assets. |
| src/itblBuildInfo.ts | Updates build info version to 2.3.0-beta.0. |
| src/index.tsx | Expands embedded exports from the package entrypoint. |
| src/embedded/utils/normalizeEmbeddedViewConfig.ts | Normalizes/coerces numeric config fields from runtime payloads. |
| src/embedded/utils/normalizeEmbeddedViewConfig.test.ts | Tests config normalization behavior and warnings. |
| src/embedded/types/index.ts | Re-exports embedded types, including new component/config types. |
| src/embedded/types/IterableEmbeddedViewConfig.ts | Introduces embedded view styling config interface. |
| src/embedded/types/IterableEmbeddedComponentProps.ts | Adds shared props interface used by embedded components/hooks. |
| src/embedded/index.ts | Barrel export for embedded feature area (classes/components/enums/hooks/types). |
| src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts | Implements hook that derives styles/media and click handlers. |
| src/embedded/hooks/useEmbeddedView/useEmbeddedView.test.ts | Tests hook delegation, callbacks, and click handling. |
| src/embedded/hooks/useEmbeddedView/index.ts | Barrel export (and default export) for useEmbeddedView. |
| src/embedded/hooks/useEmbeddedView/getStyles.ts | Resolves embedded styles from defaults + optional config overrides. |
| src/embedded/hooks/useEmbeddedView/getStyles.test.ts | Tests style resolution across view types and overrides. |
| src/embedded/hooks/useEmbeddedView/getMedia.ts | Extracts media rendering data from message + view type. |
| src/embedded/hooks/useEmbeddedView/getMedia.test.ts | Tests media extraction rules and return shape. |
| src/embedded/hooks/index.ts | Barrel export for embedded hooks. |
| src/embedded/enums/index.ts | Barrel export for embedded enums. |
| src/embedded/enums/IterableEmbeddedViewType.ts | Adds enum for embedded OOTB view selection. |
| src/embedded/constants/embeddedViewDefaults.ts | Adds default colors/sizing for embedded view styling. |
| src/embedded/components/index.ts | Barrel export for embedded components. |
| src/embedded/components/IterableEmbeddedView.tsx | Adds top-level component that selects Banner/Card/Notification renderers. |
| src/embedded/components/IterableEmbeddedView.test.tsx | Tests component selection and prop passing. |
| src/embedded/components/IterableEmbeddedNotification/index.ts | Barrel export for Notification component. |
| src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.tsx | Implements Notification embedded view renderer. |
| src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.test.tsx | Tests Notification rendering, styles, buttons, click behavior. |
| src/embedded/components/IterableEmbeddedNotification/IterableEmbeddedNotification.styles.ts | Adds Notification styles. |
| src/embedded/components/IterableEmbeddedCard/index.ts | Barrel export for Card component. |
| src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx | Implements Card embedded view renderer (incl. placeholder image). |
| src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.test.tsx | Tests Card rendering, styles, media placeholder, buttons, click behavior. |
| src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.styles.ts | Adds Card styles and image sizing constants. |
| src/embedded/components/IterableEmbeddedBanner/index.ts | Barrel export for Banner component. |
| src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx | Implements Banner embedded view renderer with optional media image. |
| src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.test.tsx | Tests Banner rendering, styles, media presence, buttons, click behavior. |
| src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.ts | Adds Banner styles and platform-based image sizing. |
| src/core/assets/logo-grey.png | Adds placeholder asset used when Card media isn’t present. |
| src/core/assets/index.ts | Exposes IterableLogoGrey from core assets. |
| package.json | Bumps package version to 2.3.0-beta.0. |
| example/src/constants/styles/modal.ts | Adds modal style constants for the example config editor. |
| example/src/constants/styles/index.ts | Re-exports modal style constants. |
| example/src/components/Embedded/Embedded.tsx | Updates example embedded screen to use IterableEmbeddedView and adds JSON config modal UI. |
| example/src/components/Embedded/Embedded.styles.ts | Updates example embedded screen styling for new UI and modal. |
| example/ios/ReactNativeSdkExample.xcodeproj/xcshareddata/xcschemes/ReactNativeSdkExample.xcscheme | Updates Xcode scheme metadata for the example iOS app. |
| example/ios/ReactNativeSdkExample.xcodeproj/project.pbxproj | Updates Xcode project settings / CocoaPods integration references. |
| example/ios/Podfile | Adds a workaround targeting the fmt pod C++ standard. |
| CHANGELOG.md | Adds 2.3.0-beta.0 release notes entry. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| fontSize: 12, | ||
| lineHeight: 17, | ||
| }, | ||
| container:{ |
There was a problem hiding this comment.
Minor formatting: container:{ should be container: { to match the codebase’s formatting conventions (and what Prettier will output).
| container:{ | |
| container: { |
| ### Updates | ||
| - Added embedded messaging functionality. This includes the ability to: | ||
| - Manually sync the messages with `Iterable.embeddedManager.syncMessages()` | ||
| - Get the messages with `Iterable.embeddedManager .getMessages([PLACEMENT_IDS])` |
There was a problem hiding this comment.
In this changelog bullet, there’s an extra space between embeddedManager and .getMessages(...), which makes the example invalid when copied. Please remove the space so the example matches the actual API (Iterable.embeddedManager.getMessages(...)).
| - Get the messages with `Iterable.embeddedManager .getMessages([PLACEMENT_IDS])` | |
| - Get the messages with `Iterable.embeddedManager.getMessages([PLACEMENT_IDS])` |
| `Iterable.embeddedManager.startImpression(MESSAGE_ID, PLACEMENT_ID])` | ||
| - Pause an embedded impression with | ||
| `Iterable.embeddedManager.pauseImpression(MESSAGE_ID])` |
There was a problem hiding this comment.
These changelog examples have mismatched closing brackets (]) in the method calls (e.g. startImpression(...]), pauseImpression(...])). This makes the examples syntactically incorrect; please fix the parentheses/brackets so they can be copied as-is.
| `Iterable.embeddedManager.startImpression(MESSAGE_ID, PLACEMENT_ID])` | |
| - Pause an embedded impression with | |
| `Iterable.embeddedManager.pauseImpression(MESSAGE_ID])` | |
| `Iterable.embeddedManager.startImpression(MESSAGE_ID, PLACEMENT_ID)` | |
| - Pause an embedded impression with | |
| `Iterable.embeddedManager.pauseImpression(MESSAGE_ID)` |
| * | ||
| * // The config is used to style the component. | ||
| * // See `IterableEmbeddedViewConfig` for available config options. | ||
| * const config = { backgroundColor: '#FFFFFF', borderRadius: 8 }; |
There was a problem hiding this comment.
The example config uses borderRadius, but IterableEmbeddedViewConfig defines borderCornerRadius. Please update the example to use the correct property name so users don’t pass a no-op config key.
| * const config = { backgroundColor: '#FFFFFF', borderRadius: 8 }; | |
| * const config = { backgroundColor: '#FFFFFF', borderCornerRadius: 8 }; |
| * }; | ||
| * | ||
| * // `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. |
There was a problem hiding this comment.
The doc comment says the default action is handled prior to onMessageClick, but useEmbeddedView currently calls onMessageClick before Iterable.embeddedManager.handleClick(...). Please update the documentation (or change the call order) so the documented behavior matches the implementation.
| * // If a default action is set, it will be handled prior to this callback. | |
| * // If a default action is set, this callback will be invoked before the SDK handles that action. |
| modalOverlay, | ||
| subtitle, | ||
| title, | ||
| utilityColors |
There was a problem hiding this comment.
This import block doesn’t match the repo’s Prettier formatting (missing trailing comma and brace alignment). Please run Prettier (or adjust formatting) to keep style consistent and avoid noisy diffs later.
| utilityColors | |
| utilityColors, |
| ? styles.mediaImage | ||
| : styles.mediaImagePlaceholder | ||
| } | ||
| alt={media.caption as string} |
There was a problem hiding this comment.
media.caption is typed as string | null, but it’s being force-cast to string for the Image alt prop. This can pass null at runtime and hides type issues. Prefer passing alt={media.caption ?? undefined} (or omitting alt when caption is null).
| alt={media.caption as string} | |
| alt={media.caption ?? undefined} |
| borderColor: parsedStyles.borderColor, | ||
| }, | ||
| ]} | ||
| alt={media.caption as string} |
There was a problem hiding this comment.
media.caption is string | null, but it’s being force-cast to string for the Image alt prop. This can pass null at runtime and defeats the type-check. Prefer alt={media.caption ?? undefined} (or conditionally omit the prop).
| alt={media.caption as string} | |
| alt={media.caption ?? undefined} |
| import type { TextStyle, ViewStyle } from "react-native"; | ||
| import { colors } from "./colors"; |
There was a problem hiding this comment.
This file uses double quotes for imports, but the repo Prettier config (.prettierrc) enforces singleQuote: true. Please reformat to use single quotes so yarn lint/Prettier don’t churn this file.
| import type { TextStyle, ViewStyle } from "react-native"; | |
| import { colors } from "./colors"; | |
| import type { TextStyle, ViewStyle } from 'react-native'; | |
| import { colors } from './colors'; |
🔹 JIRA Ticket(s) if any
✏️ Description