From 131c31e991bc09fba39fdb4f2712d925af4af49d Mon Sep 17 00:00:00 2001
From: Fadi George <fadii925@gmail.com>
Date: Fri, 30 Oct 2026 11:21:23 -0700
Subject: [PATCH] chore: [SDK-5636] add extra IAM type buttons to demo app

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 examples/demo/src/components/ActionButton.tsx | 17 +++++++-
 .../components/sections/SendIamSection.tsx    | 42 +++++++++++++------
 examples/demo/src/models/InAppMessageType.ts  | 16 +++++--
 3 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/examples/demo/src/components/ActionButton.tsx b/examples/demo/src/components/ActionButton.tsx
index c6d6a9cf..2011d3ea 100644
--- a/examples/demo/src/components/ActionButton.tsx
+++ b/examples/demo/src/components/ActionButton.tsx
@@ -13,6 +13,7 @@ interface Props {
   icon?: React.ReactNode;
   iconPosition?: 'left' | 'right';
   leftAligned?: boolean;
+  compact?: boolean;
 }
 
 export default function ActionButton({
@@ -25,6 +26,7 @@ export default function ActionButton({
   icon,
   iconPosition = 'left',
   leftAligned,
+  compact,
 }: Props) {
   const bgColor = variant === 'primary' ? AppColors.osPrimary : 'transparent';
 
@@ -42,6 +44,7 @@ export default function ActionButton({
         styles.button,
         { backgroundColor: bgColor },
         borderStyle,
+        compact && styles.compact,
         (disabled || loading) && styles.disabled,
       ]}
       activeOpacity={0.8}
@@ -51,7 +54,13 @@ export default function ActionButton({
       ) : (
         <View style={[styles.inner, leftAligned && styles.leftAligned]}>
           {icon && iconPosition === 'left' && <View style={styles.iconLeft}>{icon}</View>}
-          <Text style={[styles.text, { color: textColor }]}>{label}</Text>
+          <Text
+            style={[styles.text, { color: textColor }, compact && styles.compactText]}
+            numberOfLines={compact ? 1 : undefined}
+            adjustsFontSizeToFit={compact}
+          >
+            {label}
+          </Text>
           {icon && iconPosition === 'right' && <View style={styles.iconRight}>{icon}</View>}
         </View>
       )}
@@ -80,6 +89,12 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '600',
   },
+  compact: {
+    paddingHorizontal: 8,
+  },
+  compactText: {
+    flexShrink: 1,
+  },
   iconLeft: {
     marginRight: 8,
   },
diff --git a/examples/demo/src/components/sections/SendIamSection.tsx b/examples/demo/src/components/sections/SendIamSection.tsx
index 02f0d7d7..b049b7bb 100644
--- a/examples/demo/src/components/sections/SendIamSection.tsx
+++ b/examples/demo/src/components/sections/SendIamSection.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import { InAppMessageType, iamTypeLabel } from '../../models/InAppMessageType';
+import { AppSpacing } from '../../theme';
 import ActionButton from '../ActionButton';
 import SectionCard from '../SectionCard';
 
@@ -9,24 +11,40 @@ interface Props {
   onInfoTap?: () => void;
 }
 
-const IAM_TYPES: InAppMessageType[] = [
-  InAppMessageType.TopBanner,
-  InAppMessageType.BottomBanner,
-  InAppMessageType.CenterModal,
-  InAppMessageType.FullScreen,
+const IAM_TYPE_ROWS: InAppMessageType[][] = [
+  [InAppMessageType.TopBanner, InAppMessageType.BottomBanner],
+  [InAppMessageType.CenterModal, InAppMessageType.Html],
+  [InAppMessageType.FullScreen, InAppMessageType.FullBleed],
+  [InAppMessageType.Carousel, InAppMessageType.CarouselBleed],
 ];
 
 export default function SendIamSection({ onSendIam, onInfoTap }: Props) {
   return (
     <SectionCard title="Send In-App Message" onInfoTap={onInfoTap} sectionKey="send_iam">
-      {IAM_TYPES.map((type) => (
-        <ActionButton
-          key={type}
-          label={iamTypeLabel[type]}
-          onPress={() => onSendIam(type)}
-          testID={`send_iam_${type}_button`}
-        />
+      {IAM_TYPE_ROWS.map((row) => (
+        <View key={row.join('-')} style={styles.row}>
+          {row.map((type) => (
+            <View key={type} style={styles.cell}>
+              <ActionButton
+                label={iamTypeLabel[type]}
+                onPress={() => onSendIam(type)}
+                testID={`send_iam_${type}_button`}
+                compact
+              />
+            </View>
+          ))}
+        </View>
       ))}
     </SectionCard>
   );
 }
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    columnGap: AppSpacing.gap,
+  },
+  cell: {
+    flex: 1,
+  },
+});
diff --git a/examples/demo/src/models/InAppMessageType.ts b/examples/demo/src/models/InAppMessageType.ts
index 146e8e55..cb248ff3 100644
--- a/examples/demo/src/models/InAppMessageType.ts
+++ b/examples/demo/src/models/InAppMessageType.ts
@@ -2,12 +2,20 @@ export enum InAppMessageType {
   TopBanner = 'top_banner',
   BottomBanner = 'bottom_banner',
   CenterModal = 'center_modal',
+  Html = 'html',
   FullScreen = 'full_screen',
+  FullBleed = 'full_bleed',
+  Carousel = 'carousel',
+  CarouselBleed = 'carousel_bleed',
 }
 
 export const iamTypeLabel: Record<InAppMessageType, string> = {
-  [InAppMessageType.TopBanner]: 'TOP BANNER',
-  [InAppMessageType.BottomBanner]: 'BOTTOM BANNER',
-  [InAppMessageType.CenterModal]: 'CENTER MODAL',
-  [InAppMessageType.FullScreen]: 'FULL SCREEN',
+  [InAppMessageType.TopBanner]: 'TOP',
+  [InAppMessageType.BottomBanner]: 'BOTTOM',
+  [InAppMessageType.CenterModal]: 'CENTER',
+  [InAppMessageType.Html]: 'HTML',
+  [InAppMessageType.FullScreen]: 'FULL',
+  [InAppMessageType.FullBleed]: 'FULL BLEED',
+  [InAppMessageType.Carousel]: 'CAROUSEL',
+  [InAppMessageType.CarouselBleed]: 'CAROUSEL BLEED',
 };