feat: add IterableEmbedded components and view type enumeration for embedded messaging

Author: lposen

src/embedded/components/IterableEmbeddedBanner.tsx

@@ -0,0 +1,19 @@
+import { View, Text } from 'react-native';
+
+import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
+
+export const IterableEmbeddedBanner = ({
+  config,
+  message,
+  onButtonClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  console.log(`🚀 > IterableEmbeddedBanner > config:`, config);
+  console.log(`🚀 > IterableEmbeddedBanner > message:`, message);
+  console.log(`🚀 > IterableEmbeddedBanner > onButtonClick:`, onButtonClick);
+
+  return (
+    <View>
+      <Text>IterableEmbeddedBanner</Text>
+    </View>
+  );
+};

src/embedded/components/IterableEmbeddedCard.tsx

@@ -0,0 +1,18 @@
+import { View, Text } from 'react-native';
+import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
+
+export const IterableEmbeddedCard = ({
+  config,
+  message,
+  onButtonClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  console.log(`🚀 > IterableEmbeddedCard > config:`, config);
+  console.log(`🚀 > IterableEmbeddedCard > message:`, message);
+  console.log(`🚀 > IterableEmbeddedCard > onButtonClick:`, onButtonClick);
+
+  return (
+    <View>
+      <Text>IterableEmbeddedCard</Text>
+    </View>
+  );
+};

src/embedded/components/IterableEmbeddedNotification.tsx

@@ -0,0 +1,22 @@
+import { View, Text } from 'react-native';
+
+import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
+
+export const IterableEmbeddedNotification = ({
+  config,
+  message,
+  onButtonClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  console.log(`🚀 > IterableEmbeddedNotification > config:`, config);
+  console.log(`🚀 > IterableEmbeddedNotification > message:`, message);
+  console.log(
+    `🚀 > IterableEmbeddedNotification > onButtonClick:`,
+    onButtonClick
+  );
+
+  return (
+    <View>
+      <Text>IterableEmbeddedNotification</Text>
+    </View>
+  );
+};

src/embedded/components/IterableEmbeddedView.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+import { IterableEmbeddedViewType } from '../enums/IterableEmbeddedViewType';
+
+import { IterableEmbeddedBanner } from './IterableEmbeddedBanner';
+import { IterableEmbeddedCard } from './IterableEmbeddedCard';
+import { IterableEmbeddedNotification } from './IterableEmbeddedNotification';
+import type { IterableEmbeddedComponentProps } from '../types/IterableEmbeddedComponentProps';
+
+/**
+ * The props for the IterableEmbeddedView component.
+ */
+interface IterableEmbeddedViewProps extends IterableEmbeddedComponentProps {
+  /** The type of view to render. */
+  viewType: IterableEmbeddedViewType;
+}
+
+export const IterableEmbeddedView = ({
+  viewType,
+  ...props
+}: IterableEmbeddedViewProps) => {
+  const Cmp = useMemo(() => {
+    switch (viewType) {
+      case IterableEmbeddedViewType.Card:
+        return IterableEmbeddedCard;
+      case IterableEmbeddedViewType.Notification:
+        return IterableEmbeddedNotification;
+      case IterableEmbeddedViewType.Banner:
+        return IterableEmbeddedBanner;
+      default:
+        return null;
+    }
+  }, [viewType]);
+
+  return Cmp ? <Cmp {...props} /> : null;
+};

src/embedded/components/index.ts

@@ -0,0 +1,4 @@
+export * from './IterableEmbeddedBanner';
+export * from './IterableEmbeddedCard';
+export * from './IterableEmbeddedNotification';
+export * from './IterableEmbeddedView';

src/embedded/enums/IterableEmbeddedViewType.ts

@@ -0,0 +1,11 @@
+/**
+ * The view type for an embedded message.
+ */
+export enum IterableEmbeddedViewType {
+  /** The embedded view is a banner */
+  Banner = 0,
+  /** The embedded view is a card */
+  Card = 1,
+  /** The embedded view is a notification */
+  Notification = 2,
+}

src/embedded/enums/index.ts

@@ -0,0 +1 @@
+export * from './IterableEmbeddedViewType';

src/embedded/types/IterableEmbeddedComponentProps.ts

@@ -0,0 +1,9 @@
+import type { IterableEmbeddedMessage } from './IterableEmbeddedMessage';
+import type { IterableEmbeddedMessageElementsButton } from './IterableEmbeddedMessageElementsButton';
+import type { IterableEmbeddedViewConfig } from './IterableEmbeddedViewConfig';
+
+export interface IterableEmbeddedComponentProps {
+  message: IterableEmbeddedMessage;
+  config?: IterableEmbeddedViewConfig | null;
+  onButtonClick?: (button: IterableEmbeddedMessageElementsButton) => void;
+}

src/embedded/types/IterableEmbeddedViewConfig.ts

@@ -0,0 +1,27 @@
+import type { ColorValue } from 'react-native';
+
+/**
+ * Represents view-level styling configuration for an embedded view.
+ */
+export interface IterableEmbeddedViewConfig {
+  /** Background color hex (e.g., 0xFF0000) */
+  backgroundColor?: ColorValue;
+  /** Border color hex */
+  borderColor?: ColorValue;
+  /** Border width in pixels */
+  borderWidth?: number;
+  /** Corner radius in points */
+  borderCornerRadius?: number;
+  /** Primary button background color hex */
+  primaryBtnBackgroundColor?: ColorValue;
+  /** Primary button text color hex */
+  primaryBtnTextColor?: ColorValue;
+  /** Secondary button background color hex */
+  secondaryBtnBackgroundColor?: ColorValue;
+  /** Secondary button text color hex */
+  secondaryBtnTextColor?: ColorValue;
+  /** Title text color hex */
+  titleTextColor?: ColorValue;
+  /** Body text color hex */
+  bodyTextColor?: ColorValue;
+}

src/embedded/types/index.ts

@@ -1,5 +1,7 @@
+export * from './IterableEmbeddedComponentProps';
 export * from './IterableEmbeddedMessage';
 export * from './IterableEmbeddedMessageElements';
 export * from './IterableEmbeddedMessageElementsButton';
 export * from './IterableEmbeddedMessageElementsText';
 export * from './IterableEmbeddedMessageMetadata';
+export * from './IterableEmbeddedViewConfig';