feat: improve Embedded component with enhanced message fetching and styling updates

Author: lposen

example/src/components/Embedded/Embedded.tsx

@@ -18,15 +18,45 @@ export const Embedded = () => {
   const [placementIds, setPlacementIds] = useState<number[]>([]);
   const [messages, setMessages] = useState<IterableEmbeddedMessage[]>([]);
 
+  const getPlacementIds = useCallback(() => {
+    Iterable.embeddedManager.getPlacementIds().then((ids: unknown) => {
+      console.log(ids);
+      setPlacementIds(ids as number[]);
+    });
+  }, []);
+
+  const getEmbeddedMessages = useCallback(() => {
+    Iterable.embeddedManager.getMessages(placementIds).then((messageList) => {
+      console.log(messageList);
+      setMessages(messageList as IterableEmbeddedMessage[]);
+    });
+  }, [placementIds]);
+
+  const sync = useCallback(() => {
+    Iterable.embeddedManager.syncMessages();
+  }, []);
+
+  useEffect(() => {
+    if (isLoggedIn) {
+      getPlacementIds();
+    }
+  }, [isLoggedIn, getPlacementIds]);
+
   useEffect(() => {
     if (isFocused) {
       Iterable.embeddedManager.startSession();
       Iterable.embeddedManager.syncMessages();
-      Iterable.embeddedManager.getMessages(placementIds).then((messageList) => {
-        console.log(messageList);
-        setMessages(messageList as IterableEmbeddedMessage[]);
+      Iterable.embeddedManager.getPlacementIds().then((ids: unknown) => {
+        console.log(ids);
+        setPlacementIds(ids as number[]);
+        Iterable.embeddedManager
+          .getMessages(placementIds)
+          .then((messageList) => {
+            console.log(messageList);
+            setMessages(messageList as IterableEmbeddedMessage[]);
+            setHasSession(true);
+          });
       });
-      setHasSession(true);
     } else {
       if (hasSession) {
         Iterable.embeddedManager.endSession();
@@ -36,32 +66,6 @@ export const Embedded = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFocused]);
 
-  useEffect(() => {
-    if (isLoggedIn) {
-      Iterable.embeddedManager.getPlacementIds().then((ids: unknown) => {
-        console.log(`🚀 > User > ids:`, ids);
-        setPlacementIds(ids as number[]);
-      });
-    }
-  }, [isLoggedIn]);
-
-  const getEmbeddedMessages = useCallback(() => {
-    Iterable.embeddedManager.getMessages(placementIds).then((messageList) => {
-      console.log(messageList);
-      setMessages(messageList as IterableEmbeddedMessage[]);
-    });
-  }, [placementIds]);
-
-  const getPlacementIds = useCallback(() => {
-    Iterable.embeddedManager.getPlacementIds().then((ids: unknown) => {
-      console.log(ids);
-    });
-  }, []);
-
-  const sync = useCallback(() => {
-    Iterable.embeddedManager.syncMessages();
-  }, []);
-
   return (
     <View style={styles.container}>
       <Text style={styles.text}>Has session: {hasSession.toString()}</Text>

src/api/NativeRNIterableAPI.ts

@@ -17,7 +17,7 @@ interface EmbeddedMessage {
         }[]
       | null;
     body?: string | null;
-    mediaURL?: string | null;
+    mediaUrl?: string | null;
     mediaUrlCaption?: string | null;
     defaultAction?: { type: string; data?: string } | null;
     text?: { id: string; text?: string | null; label?: string | null }[] | null;

src/embedded/classes/IterableEmbeddedMessageElements.ts

@@ -5,7 +5,7 @@ import type { IterableEmbeddedMessageElementsText } from './IterableEmbeddedMess
 export interface IterableEmbeddedMessageElementsDict {
   title?: string | null;
   body?: string | null;
-  mediaURL?: string | null;
+  mediaUrl?: string | null;
   mediaUrlCaption?: string | null;
   defaultAction?: IterableEmbeddedMessageElementsDefaultAction | null;
   buttons?: IterableEmbeddedMessageElementsButton[] | null;
@@ -15,7 +15,7 @@ export interface IterableEmbeddedMessageElementsDict {
 export interface IterableEmbeddedMessageElements {
   title?: string | null;
   body?: string | null;
-  mediaURL?: string | null;
+  mediaUrl?: string | null;
   mediaUrlCaption?: string | null;
   defaultAction?: IterableEmbeddedMessageElementsDefaultAction | null;
   buttons?: IterableEmbeddedMessageElementsButton[] | null;

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.styles.tsx

@@ -1,4 +1,8 @@
 import { StyleSheet } from 'react-native';
+import {
+  embeddedMediaImageBorderColors,
+  embeddedMediaImageBackgroundColors,
+} from '../../constants/embeddedViewDefaults';
 
 export const styles = StyleSheet.create({
   body: {
@@ -10,22 +14,17 @@ export const styles = StyleSheet.create({
   bodyContainer: {
     alignItems: 'center',
     alignSelf: 'stretch',
-    // backgroundColor: 'green',
     display: 'flex',
     flexDirection: 'row',
-    // gap: 16,
+    paddingTop: 4,
   },
   button: {
-    // backgroundColor: 'blue',
     borderRadius: 12,
     gap: 8,
-    // height: 32,
-    // display: 'flex',
   },
   buttonContainer: {
     alignItems: 'flex-start',
     alignSelf: 'stretch',
-    // backgroundColor: 'red',
     display: 'flex',
     flexDirection: 'row',
     gap: 12,
@@ -51,14 +50,24 @@ export const styles = StyleSheet.create({
     width: '100%',
   },
   mediaContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
     display: 'flex',
-    flexDirection: 'column',
-    gap: 16,
+    flexDirection: 'row',
+  },
+  mediaImage: {
+    backgroundColor: embeddedMediaImageBackgroundColors.banner,
+    borderColor: embeddedMediaImageBorderColors.banner,
+    borderRadius: 6,
+    borderStyle: 'solid',
+    borderWidth: 1,
+    height: 70,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    width: 70,
   },
   textContainer: {
     alignSelf: 'center',
-    // alignItems: 'flex-start',
-    // backgroundColor: 'red',
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
@@ -69,6 +78,7 @@ export const styles = StyleSheet.create({
   title: {
     fontSize: 16,
     fontWeight: '700',
-    lineHeight: 24,
+    lineHeight: 16,
+    paddingBottom: 4,
   },
 });

src/embedded/components/IterableEmbeddedBanner/IterableEmbeddedBanner.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import {
+  Image,
   Text,
   TouchableOpacity,
   View,
@@ -15,6 +16,10 @@ import { getStyles } from '../utils/getStyles';
 import { styles } from './IterableEmbeddedBanner.styles';
 import { runButtonClick } from '../utils/runButtonClick';
 
+/**
+ * TODO: figure out how default action works.
+ */
+
 export const IterableEmbeddedBanner = ({
   config,
   message,
@@ -26,17 +31,10 @@ export const IterableEmbeddedBanner = ({
   const media = useMemo(() => {
     return getMedia(IterableEmbeddedViewType.Banner, message);
   }, [message]);
-  console.log(`🚀 > IterableEmbeddedView > media:`, media);
   const handleButtonClick = useCallback(
     (button: IterableEmbeddedMessageElementsButton) => {
-      console.group('handleButtonClick');
-      console.log('message', message);
-      console.log('button', button);
-      console.log('button.action', button.action);
-
       onButtonClick(button);
       runButtonClick(button, message);
-      console.groupEnd();
     },
     [onButtonClick, message]
   );
@@ -55,7 +53,8 @@ export const IterableEmbeddedBanner = ({
         } as ViewStyle,
       ]}
     >
-      <View style={styles.bodyContainer}>
+      {/* eslint-disable-next-line react-native/no-inline-styles */}
+      <View style={[styles.bodyContainer, { gap: media.shouldShow ? 16 : 0 }]}>
         <View style={styles.textContainer}>
           <Text
             style={[
@@ -74,9 +73,15 @@ export const IterableEmbeddedBanner = ({
             {message.elements?.body}
           </Text>
         </View>
-        <View style={styles.mediaContainer}>
-          {/* <Image source={{ uri: media.url }} style={styles.mediaImage} /> */}
-        </View>
+        {media.shouldShow && (
+          <View style={styles.mediaContainer}>
+            <Image
+              source={{ uri: media.url as string }}
+              style={styles.mediaImage}
+              alt={media.caption as string}
+            />
+          </View>
+        )}
       </View>
       {buttons.length > 0 && (
         <View style={styles.buttonContainer}>

src/embedded/components/utils/getMedia.ts

@@ -1,8 +1,11 @@
-import type { IterableEmbeddedMessage } from "../../classes/IterableEmbeddedMessage";
-import { IterableEmbeddedViewType } from "../../enums/IterableEmbeddedViewType";
+import type { IterableEmbeddedMessage } from '../../classes/IterableEmbeddedMessage';
+import { IterableEmbeddedViewType } from '../../enums/IterableEmbeddedViewType';
 
-export const getMedia = (viewType: IterableEmbeddedViewType, message: IterableEmbeddedMessage) => {
-  const url = message.elements?.mediaURL ?? null;
+export const getMedia = (
+  viewType: IterableEmbeddedViewType,
+  message: IterableEmbeddedMessage
+) => {
+  const url = message.elements?.mediaUrl ?? null;
   const caption = message.elements?.mediaUrlCaption ?? null;
   const shouldShow =
     !!url &&

src/embedded/constants/embeddedViewDefaults.ts

@@ -49,6 +49,18 @@ export const embeddedBodyTextColors = {
 export const defaultBorderWidth = 1;
 export const defaultBorderCornerRadius = 8.0;
 
+export const embeddedMediaImageBorderColors = {
+  notification: '#E0DEDF',
+  card: '#E0DEDF',
+  banner: '#E0DEDF',
+};
+
+export const embeddedMediaImageBackgroundColors = {
+  notification: '#F5F4F4',
+  card: '#F5F4F4',
+  banner: '#F5F4F4',
+};
+
 export const embeddedColors = {
   background: embeddedBackgroundColors,
   border: embeddedBorderColors,
@@ -58,4 +70,5 @@ export const embeddedColors = {
   secondaryBtnText: embeddedSecondaryBtnTextColors,
   titleText: embeddedTitleTextColors,
   bodyText: embeddedBodyTextColors,
+  mediaImageBorder: embeddedMediaImageBorderColors,
 };