feat: add input field for placement IDs in Embedded component and update message retrieval logic

Author: lposen

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

@@ -1,10 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { button, buttonText, container, hr, link } from '../../constants';
+import { button, buttonText, container, hr, link, input, title, subtitle } from '../../constants';
+import { neutrals, utilityColors, backgroundColors } from '../../constants/styles/colors';
 
 const styles = StyleSheet.create({
   button,
+  buttonDisabled: {
+    backgroundColor: neutrals.grey25,
+    opacity: 0.6,
+  },
   buttonText,
-  container: { ...container, paddingHorizontal: 0 },
+  buttonTextDisabled: {
+    color: neutrals.grey50,
+  },
+  container,
   embeddedSection: {
     display: 'flex',
     flexDirection: 'column',
@@ -21,11 +29,33 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   hr,
+  inputContainer: {
+    marginVertical: 10,
+  },
   link,
+  subtitle: { ...subtitle, textAlign: 'center' },
   text: { textAlign: 'center' },
+  textInput: input,
+  title: { ...title, textAlign: 'center' },
   utilitySection: {
     paddingHorizontal: 16,
   },
+  warningContainer: {
+    backgroundColor: backgroundColors.backgroundWarningSubtle,
+    borderLeftColor: utilityColors.warning100,
+    borderLeftWidth: 4,
+    borderRadius: 5,
+    marginBottom: 12,
+    marginHorizontal: 16,
+    marginTop: 0,
+    padding: 12,
+  },
+  warningText: {
+    color: utilityColors.warning100,
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
 });
 
 export default styles;

example/src/components/Embedded/Embedded.tsx

@@ -1,4 +1,4 @@
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import { useCallback, useState } from 'react';
 import {
   Iterable,
@@ -10,10 +10,21 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import styles from './Embedded.styles';
 
 export const Embedded = () => {
+  const [placementIdsInput, setPlacementIdsInput] = useState<string>('');
   const [embeddedMessages, setEmbeddedMessages] = useState<
     IterableEmbeddedMessage[]
   >([]);
 
+  // Parse placement IDs from input
+  const parsedPlacementIds = placementIdsInput
+    .split(',')
+    .map((id) => id.trim())
+    .filter((id) => id !== '')
+    .map((id) => parseInt(id, 10))
+    .filter((id) => !isNaN(id));
+
+  const idsToFetch = parsedPlacementIds.length > 0 ? parsedPlacementIds : null;
+
   const syncEmbeddedMessages = useCallback(() => {
     Iterable.embeddedManager.syncMessages();
   }, []);
@@ -32,12 +43,20 @@ export const Embedded = () => {
     Iterable.embeddedManager.endSession();
   }, []);
 
-  const getEmbeddedMessages = useCallback((ids: number[] | null = null) => {
-    Iterable.embeddedManager.getMessages(ids).then((messages: IterableEmbeddedMessage[]) => {
+  const getEmbeddedMessages = useCallback(() => {
+    // Don't fetch if no IDs
+    if (parsedPlacementIds.length === 0) {
+      console.log('No placement IDs entered, button should be disabled');
+      return;
+    }
+
+    console.log('Fetching messages for placement IDs:', idsToFetch);
+
+    Iterable.embeddedManager.getMessages(idsToFetch).then((messages: IterableEmbeddedMessage[]) => {
         setEmbeddedMessages(messages);
         console.log(messages);
       });
-  }, []);
+  }, [idsToFetch, parsedPlacementIds.length]);
 
   const startEmbeddedImpression = useCallback(
     (message: IterableEmbeddedMessage) => {
@@ -73,15 +92,18 @@ export const Embedded = () => {
 
   return (
     <SafeAreaView style={styles.container}>
-      <Text style={styles.text}>EMBEDDED</Text>
+      <Text style={styles.title}>Embedded</Text>
+      {!Iterable.embeddedManager.isEnabled && (
+        <View style={styles.warningContainer}>
+          <Text style={styles.warningText}>
+            ⚠️ Embedded messaging is disabled. Please enable it in your Iterable config.
+          </Text>
+        </View>
+      )}
+      <Text style={styles.subtitle}>
+        Enter placement IDs to fetch embedded messages
+      </Text>
       <View style={styles.utilitySection}>
-        <Text style={styles.text}>
-          Does embedded class exist? {Iterable.embeddedManager ? 'Yes' : 'No'}
-        </Text>
-        <Text style={styles.text}>
-          Is embedded manager enabled?{' '}
-          {Iterable.embeddedManager.isEnabled ? 'Yes' : 'No'}
-        </Text>
         <TouchableOpacity style={styles.button} onPress={syncEmbeddedMessages}>
           <Text style={styles.buttonText}>Sync messages</Text>
         </TouchableOpacity>
@@ -91,9 +113,34 @@ export const Embedded = () => {
         <TouchableOpacity style={styles.button} onPress={endEmbeddedSession}>
           <Text style={styles.buttonText}>End session</Text>
         </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={() => getEmbeddedMessages()}>
-          <Text style={styles.buttonText}>Get messages</Text>
-        </TouchableOpacity>
+        <View style={styles.inputContainer}>
+          <Text style={styles.text}>
+            Placement IDs (comma-separated):
+          </Text>
+          <TextInput
+            style={styles.textInput}
+            placeholder="e.g., 1, 2, 3"
+            placeholderTextColor="#999"
+            value={placementIdsInput}
+            onChangeText={setPlacementIdsInput}
+            keyboardType="numbers-and-punctuation"
+          />
+          <TouchableOpacity
+            style={[
+              styles.button,
+              parsedPlacementIds.length === 0 && styles.buttonDisabled
+            ]}
+            onPress={getEmbeddedMessages}
+            disabled={parsedPlacementIds.length === 0}
+          >
+            <Text style={[
+              styles.buttonText,
+              parsedPlacementIds.length === 0 && styles.buttonTextDisabled
+            ]}>
+              Get messages for placement ids
+            </Text>
+          </TouchableOpacity>
+        </View>
       </View>
       <View style={styles.hr} />
       <ScrollView>

example/src/hooks/useIterableApp.tsx

@@ -161,8 +161,6 @@ export const IterableAppProvider: FunctionComponent<
         retryBackoff: IterableRetryBackoff.linear,
       };
 
-      config.enableEmbeddedMessaging = true;
-
       config.onJwtError = (authFailure) => {
         console.log('onJwtError', authFailure);