feat: enhance Embedded component with new styles and message handling

Author: lposen

example/src/components/Embedded/Embedded.styles.ts

@@ -1,17 +1,12 @@
-import { StyleSheet, type TextStyle } from 'react-native';
-import { appNameSmall, button, buttonText, container } from '../../constants';
-
-const text: TextStyle = {
-  textAlign: 'center',
-  marginBottom: 20,
-};
+import { StyleSheet } from 'react-native';
+import { button, buttonText, container, hr } from '../../constants';
 
 const styles = StyleSheet.create({
-  appName: appNameSmall,
   button,
   buttonText,
   container,
-  text,
+  hr,
+  text: { textAlign: 'center' },
 });
 
 export default styles;

example/src/components/Embedded/Embedded.tsx

@@ -1,4 +1,9 @@
-import { Iterable } from '@iterable/react-native-sdk';
+import {
+  Iterable,
+  IterableEmbeddedView,
+  IterableEmbeddedViewType,
+  IterableEmbeddedMessage,
+} from '@iterable/react-native-sdk';
 import { useIsFocused } from '@react-navigation/native';
 import { useCallback, useEffect, useState } from 'react';
 import { Text, TouchableOpacity, View } from 'react-native';
@@ -9,9 +14,9 @@ import styles from './Embedded.styles';
 export const Embedded = () => {
   const { isLoggedIn } = useIterableApp();
   const isFocused = useIsFocused();
-  const [loggedInAs, setLoggedInAs] = useState<string>('');
   const [hasSession, setHasSession] = useState<boolean>(false);
   const [placementIds, setPlacementIds] = useState<number[]>([]);
+  const [messages, setMessages] = useState<IterableEmbeddedMessage[]>([]);
 
   useEffect(() => {
     if (isFocused) {
@@ -28,22 +33,18 @@ export const Embedded = () => {
 
   useEffect(() => {
     if (isLoggedIn) {
-      Iterable.getEmail().then((email) => setLoggedInAs(email || ''));
       Iterable.embeddedManager.getPlacementIds().then((ids: unknown) => {
         console.log(`🚀 > User > ids:`, ids);
         setPlacementIds(ids as number[]);
       });
-    } else {
-      setLoggedInAs('');
     }
   }, [isLoggedIn]);
 
   const getEmbeddedMessages = useCallback(() => {
-    Iterable.embeddedManager
-      .getMessages(placementIds)
-      .then((messages: unknown) => {
-        console.log(messages);
-      });
+    Iterable.embeddedManager.getMessages(placementIds).then((messageList) => {
+      console.log(messageList);
+      setMessages(messageList as IterableEmbeddedMessage[]);
+    });
   }, [placementIds]);
 
   const getPlacementIds = useCallback(() => {
@@ -58,8 +59,6 @@ export const Embedded = () => {
 
   return (
     <View style={styles.container}>
-      <Text style={styles.appName}>Welcome Iterator</Text>
-      <Text style={styles.text}>Logged in as {loggedInAs}</Text>
       <Text style={styles.text}>Has session: {hasSession.toString()}</Text>
       <Text style={styles.text}>
         Placement ids: [{placementIds.join(', ')}]
@@ -73,6 +72,16 @@ export const Embedded = () => {
       <TouchableOpacity style={styles.button} onPress={sync}>
         <Text style={styles.buttonText}>Sync</Text>
       </TouchableOpacity>
+      <View style={styles.hr} />
+      {messages.map((message) => {
+        return (
+          <IterableEmbeddedView
+            key={message.metadata.messageId}
+            viewType={IterableEmbeddedViewType.Card}
+            message={message}
+          />
+        );
+      })}
     </View>
   );
 };

example/src/constants/styles/index.ts

@@ -1,5 +1,6 @@
 export * from './colors';
 export * from './containers';
 export * from './formElements';
+export * from './miscElements';
 export * from './shadows';
 export * from './typography';

example/src/constants/styles/miscElements.ts

@@ -0,0 +1,9 @@
+import { type ViewStyle } from 'react-native';
+import { colors } from './colors';
+
+export const hr: ViewStyle = {
+  backgroundColor: colors.borderPrimary,
+  height: 1,
+  marginVertical: 20,
+  marginHorizontal: 0,
+};

src/core/classes/IterableApi.ts

@@ -539,7 +539,9 @@ export class IterableApi {
    *
    * @returns A Promise that resolves to an array of embedded messages.
    */
-  static getEmbeddedMessages(placementIds: number[] | null) {
+  static getEmbeddedMessages(
+    placementIds: number[] | null
+  ): Promise<IterableEmbeddedMessage[]> {
     IterableApi.logger.log('getEmbeddedMessages: ', placementIds);
     return RNIterableAPI.getEmbeddedMessages(placementIds);
   }

src/embedded/classes/IterableEmbeddedView.ts

@@ -13,7 +13,7 @@ import {
   embeddedSecondaryBtnBackgroundColors,
   embeddedSecondaryBtnTextColors,
   embeddedTitleTextColors,
-} from '../constants/embeddedColors';
+} from '../constants/embeddedViewDefaults';
 
 export class IterableEmbeddedView {
   private viewType: IterableEmbeddedViewType;

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx

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

src/embedded/components/IterableEmbeddedBanner/index.ts

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

src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx

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

src/embedded/components/IterableEmbeddedCard/index.ts

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