feat: enhance IterableEmbeddedView to display media content and add getMedia utility function

Author: lposen

src/embedded/components/IterableEmbeddedView.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, Image } from 'react-native';
 
 import { IterableEmbeddedViewType } from '../enums/IterableEmbeddedViewType';
 
@@ -45,40 +45,14 @@ export const IterableEmbeddedView = ({
     }
   }, [viewType]);
 
-  const { parsedStyles } = useEmbeddedView(viewType, props);
+  const { media } = useEmbeddedView(viewType, props);
 
   return Cmp ? (
     <View>
-      <Text>
-        parsedStyles.backgroundColor: {String(parsedStyles.backgroundColor)}
-      </Text>
-      <Text>parsedStyles.borderColor: {String(parsedStyles.borderColor)}</Text>
-      <Text>parsedStyles.borderWidth: {parsedStyles.borderWidth}</Text>
-      <Text>
-        parsedStyles.borderCornerRadius: {parsedStyles.borderCornerRadius}
-      </Text>
-      <Text>
-        parsedStyles.primaryBtnBackgroundColor:{' '}
-        {String(parsedStyles.primaryBtnBackgroundColor)}
-      </Text>
-      <Text>
-        parsedStyles.primaryBtnTextColor:{' '}
-        {String(parsedStyles.primaryBtnTextColor)}
-      </Text>
-      <Text>
-        parsedStyles.secondaryBtnBackgroundColor:{' '}
-        {String(parsedStyles.secondaryBtnBackgroundColor)}
-      </Text>
-      <Text>
-        parsedStyles.secondaryBtnTextColor:{' '}
-        {String(parsedStyles.secondaryBtnTextColor)}
-      </Text>
-      <Text>
-        parsedStyles.titleTextColor: {String(parsedStyles.titleTextColor)}
-      </Text>
-      <Text>
-        parsedStyles.bodyTextColor: {String(parsedStyles.bodyTextColor)}
-      </Text>
+      <Text>media.url: {media.url}</Text>
+      <Text>media.caption: {media.caption}</Text>
+      <Text>media.shouldShow: {media.shouldShow ? 'true' : 'false'}</Text>
+      {media.url ? <Image source={{ uri: media.url }} width={100} height={100} /> : null}
       <Cmp {...props} />
     </View>
   ) : null;

src/embedded/hooks/useEmbeddedView/getMedia.ts

@@ -0,0 +1,31 @@
+import type { IterableEmbeddedMessage } from '../../types/IterableEmbeddedMessage';
+import { IterableEmbeddedViewType } from '../../enums';
+
+/**
+ * This function is used to get the media to render for a given embedded view
+ * type and message.
+ *
+ * @param viewType - The type of view to render.
+ * @param message - The message to render.
+ * @returns The media to render.
+ *
+ * @example
+ * 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. */
+  viewType: IterableEmbeddedViewType,
+  /** The message to render. */
+  message: IterableEmbeddedMessage
+) => {
+  if (viewType === IterableEmbeddedViewType.Notification) {
+    return { url: null, caption: null, shouldShow: false };
+  }
+  const url = message.elements?.mediaUrl ?? null;
+  const caption = message.elements?.mediaUrlCaption ?? null;
+  const shouldShow = !!url && url.length > 0;
+  return { url, caption, shouldShow };
+};

src/embedded/hooks/useEmbeddedView/useEmbeddedView.ts

@@ -1,6 +1,8 @@
 import { useMemo } from 'react';
+
 import { IterableEmbeddedViewType } from '../../enums';
 import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
+import { getMedia } from './getMedia';
 import { getStyles } from './getStyles';
 
 /**
@@ -11,7 +13,7 @@ import { getStyles } from './getStyles';
  * @returns The embedded view.
  *
  * @example
- * const \{ parsedStyles \} = useEmbeddedView(IterableEmbeddedViewType.Notification, \{
+ * const \{ media, parsedStyles \} = useEmbeddedView(IterableEmbeddedViewType.Notification, \{
  *   message,
  *   config,
  *   onButtonClick,
@@ -20,6 +22,8 @@ import { getStyles } from './getStyles';
  *
  * return (
  *   <View>
+ *     <Text>\{media.url\}</Text>
+ *     <Text>\{media.caption\}</Text>
  *     <Text>\{parsedStyles.backgroundColor\}</Text>
  *   </View>
  * );
@@ -30,13 +34,18 @@ export const useEmbeddedView = (
   /** The props for the embedded view. */
   {
     config,
+    message,
   }: IterableEmbeddedComponentProps
 ) => {
   const parsedStyles = useMemo(() => {
     return getStyles(viewType, config);
   }, [viewType, config]);
+  const media = useMemo(() => {
+    return getMedia(viewType, message);
+  }, [viewType, message]);
 
   return {
     parsedStyles,
+    media,
   };
 };