[MOB-12273] add IterableEmbeddedCard

example/src/components/Embedded/Embedded.tsx

@@ -16,7 +16,7 @@ export const Embedded = () => {
     IterableEmbeddedMessage[]
   >([]);
   const [selectedViewType, setSelectedViewType] =
-    useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Banner);
+    useState<IterableEmbeddedViewType>(IterableEmbeddedViewType.Card);
 
   const syncEmbeddedMessages = useCallback(() => {
     Iterable.embeddedManager.syncMessages();

src/core/classes/IterableApi.ts

@@ -540,7 +540,10 @@ export class IterableApi {
    */
   static startEmbeddedImpression(messageId: string, placementId: number) {
     IterableLogger.log('startEmbeddedImpression: ', messageId, placementId);
-    return RNIterableAPI.startEmbeddedImpression(messageId, placementId);
+    return RNIterableAPI.startEmbeddedImpression(
+      messageId,
+      Number(placementId)
+    );
   }
 
   /**

src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.styles.ts

@@ -0,0 +1,88 @@
+import { StyleSheet } from 'react-native';
+import { embeddedMediaImageBackgroundColors } from '../../constants/embeddedViewDefaults';
+
+export const IMAGE_HEIGHT = 230;
+export const PLACEHOLDER_IMAGE_HEIGHT = 56;
+export const PLACEHOLDER_IMAGE_WIDTH = 56;
+
+export const styles = StyleSheet.create({
+  body: {
+    alignSelf: 'stretch',
+    fontSize: 14,
+    fontWeight: '400',
+    lineHeight: 20,
+  },
+  bodyContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 24,
+    paddingBottom: 16,
+    paddingHorizontal: 16,
+    paddingTop: 12,
+  },
+  button: {
+    borderRadius: 32,
+    gap: 8,
+  },
+  buttonContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+    width: '100%',
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 20,
+  },
+  container: {
+    alignItems: 'center',
+    borderStyle: 'solid',
+    boxShadow:
+      '0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.08)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: '100%',
+  },
+  mediaContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    backgroundColor: embeddedMediaImageBackgroundColors.card,
+    display: 'flex',
+    flexDirection: 'row',
+    height: IMAGE_HEIGHT,
+  },
+  mediaContainerNoImage: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mediaImage: {
+    height: IMAGE_HEIGHT,
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    width: '100%',
+  },
+  mediaImagePlaceholder: {
+    height: PLACEHOLDER_IMAGE_HEIGHT,
+    opacity: 0.25,
+    width: PLACEHOLDER_IMAGE_WIDTH,
+  },
+  textContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+});

src/embedded/components/IterableEmbeddedCard/IterableEmbeddedCard.tsx

@@ -0,0 +1,136 @@
+import {
+  Image,
+  PixelRatio,
+  Text,
+  TouchableOpacity,
+  View,
+  type TextStyle,
+  type ViewStyle,
+  Pressable,
+} from 'react-native';
+
+import { IterableEmbeddedViewType } from '../../enums';
+import { useEmbeddedView } from '../../hooks/useEmbeddedView';
+import type { IterableEmbeddedComponentProps } from '../../types/IterableEmbeddedComponentProps';
+import { IMAGE_HEIGHT, styles } from './IterableEmbeddedCard.styles';
+
+/**
+ * TODO: Add default action click handler.  See IterableEmbeddedView for functionality.
+ */
+
+export const IterableEmbeddedCard = ({
+  config,
+  message,
+  onButtonClick = () => {},
+  onMessageClick = () => {},
+}: IterableEmbeddedComponentProps) => {
+  const {
+    componentRef,
+    handleButtonClick,
+    handleLayout,
+    handleMessageClick,
+    media,
+    parsedStyles,
+  } = useEmbeddedView(IterableEmbeddedViewType.Card, {
+    message,
+    config,
+    onButtonClick,
+    onMessageClick,
+  });
+  const buttons = message?.elements?.buttons ?? [];
+
+  return (
+    <Pressable onPress={() => handleMessageClick()}>
+      <View
+        ref={componentRef}
+        focusable={true}
+        removeClippedSubviews={true}
+        onLayout={handleLayout}
+        style={[
+          styles.container,
+          {
+            backgroundColor: parsedStyles.backgroundColor,
+            borderColor: parsedStyles.borderColor,
+            borderRadius: parsedStyles.borderCornerRadius,
+            borderWidth: parsedStyles.borderWidth,
+          } as ViewStyle,
+        ]}
+      >
+        <View
+          style={[
+            styles.mediaContainer,
+            media.shouldShow ? {} : styles.mediaContainerNoImage,
+          ]}
+        >
+          <Image
+            source={
+              media.shouldShow
+                ? {
+                    uri: media.url as string,
+                    height: PixelRatio.getPixelSizeForLayoutSize(IMAGE_HEIGHT),
+                  }
+                : // eslint-disable-next-line @typescript-eslint/no-require-imports
+                  require('../../../core/images/logo-grey.png')
+            }
+            style={
+              media.shouldShow
+                ? styles.mediaImage
+                : styles.mediaImagePlaceholder
+            }
+            alt={media.caption as string}
+          />
+        </View>
+        <View style={styles.bodyContainer}>
+          <View style={styles.textContainer}>
+            <Text
+              style={[
+                styles.title,
+                { color: parsedStyles.titleTextColor } as TextStyle,
+              ]}
+            >
+              {message.elements?.title}
+            </Text>
+            <Text
+              style={[
+                styles.body,
+                { color: parsedStyles.bodyTextColor } as TextStyle,
+              ]}
+            >
+              {message.elements?.body}
+            </Text>
+          </View>
+          {buttons.length > 0 && (
+            <View style={styles.buttonContainer}>
+              {buttons.map((button, index) => {
+                const backgroundColor =
+                  index === 0
+                    ? parsedStyles.primaryBtnBackgroundColor
+                    : parsedStyles.secondaryBtnBackgroundColor;
+                const textColor =
+                  index === 0
+                    ? parsedStyles.primaryBtnTextColor
+                    : parsedStyles.secondaryBtnTextColor;
+                return (
+                  <TouchableOpacity
+                    style={[styles.button, { backgroundColor } as ViewStyle]}
+                    onPress={() => handleButtonClick(button)}
+                    key={button.id}
+                  >
+                    <Text
+                      style={[
+                        styles.buttonText,
+                        { color: textColor } as TextStyle,
+                      ]}
+                    >
+                      {button.title}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </View>
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+};

src/embedded/components/IterableEmbeddedCard/index.ts

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

src/embedded/components/index.ts

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