[MOB-7052] Embedded messaging feature

example/src/components/App/App.tsx

@@ -1,16 +1,59 @@
+/* eslint-disable react-native/split-platform-components */
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { useEffect } from 'react';
+import { PermissionsAndroid, Platform } from 'react-native';
 
 import { Route } from '../../constants/routes';
 import { useIterableApp } from '../../hooks/useIterableApp';
+import type { RootStackParamList } from '../../types';
 import { Login } from '../Login';
 import { Main } from './Main';
-import type { RootStackParamList } from '../../types';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
+const requestNotificationPermission = async () => {
+  if (Platform.OS === 'android') {
+    const apiLevel = Platform.Version; // Get the Android API level
+
+    if (apiLevel >= 33) {
+      // Check if Android 13 or higher
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS,
+          {
+            title: 'Notification Permission',
+            message:
+              'This app needs access to your notifications for push, in-app messages, embedded messages and more.',
+            buttonNeutral: 'Ask Me Later',
+            buttonNegative: 'Cancel',
+            buttonPositive: 'OK',
+          }
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          console.log('Notification permission granted');
+        } else {
+          console.log('Notification permission denied');
+        }
+      } catch (err) {
+        console.warn(err);
+      }
+    } else {
+      // For Android versions below 13, notification permission is generally not required
+      // or is automatically granted upon app installation.
+      console.log(
+        'Notification permission not required for this Android version.'
+      );
+    }
+  }
+};
+
 export const App = () => {
   const { isLoggedIn } = useIterableApp();
 
+  useEffect(() => {
+    requestNotificationPermission();
+  }, []);
+
   return (
     <Stack.Navigator>
       {isLoggedIn ? (

example/src/components/App/Main.tsx

@@ -8,6 +8,7 @@ import { User } from '../User';
 import { Inbox } from '../Inbox';
 import { useIterableApp } from '../../hooks';
 import { Commerce } from '../Commerce';
+import { Embedded } from '../Embedded';
 
 const Tab = createBottomTabNavigator<MainScreenParamList>();
 
@@ -44,6 +45,13 @@ export const Main = () => {
             },
           })}
         />
+        <Tab.Screen
+          name={Route.Embedded}
+          component={Embedded}
+          listeners={() => ({
+            tabPress: () => setIsInboxTab(false),
+          })}
+        />
         <Tab.Screen
           name={Route.Commerce}
           component={Commerce}

example/src/components/Commerce/Commerce.tsx

@@ -1,4 +1,5 @@
 import { Alert, Image, Pressable, ScrollView, Text, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { Iterable, IterableCommerceItem } from '@iterable/react-native-sdk';
 
@@ -32,35 +33,37 @@ export const Commerce = () => {
   };
 
   return (
-    <ScrollView>
-      <View style={styles.container}>
-        <Text style={styles.title}>Commerce</Text>
-        <Text style={styles.subtitle}>
-          Purchase will be tracked when &quot;Buy&quot; is clicked. See logs for
-          output.
-        </Text>
-        {items.map((item) => (
-          <View key={item.id} style={styles.cardContainer}>
-            <View style={styles.infoContainer}>
-              <View style={styles.imageContainer}>
-                <Image source={item.icon} style={styles.cardImage} />
-              </View>
-              <View style={styles.textContainer}>
-                <Text style={styles.cardTitle}>{item.name}</Text>
-                <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
-                <Text style={styles.price}>${item.price}</Text>
-                <Pressable
-                  style={styles.button}
-                  onPress={() => handleClick(item)}
-                >
-                  <Text style={styles.buttonText}>Buy</Text>
-                </Pressable>
+    <SafeAreaView>
+      <ScrollView>
+        <View style={styles.container}>
+          <Text style={styles.title}>Commerce</Text>
+          <Text style={styles.subtitle}>
+            Purchase will be tracked when &quot;Buy&quot; is clicked. See logs for
+            output.
+          </Text>
+          {items.map((item) => (
+            <View key={item.id} style={styles.cardContainer}>
+              <View style={styles.infoContainer}>
+                <View style={styles.imageContainer}>
+                  <Image source={item.icon} style={styles.cardImage} />
+                </View>
+                <View style={styles.textContainer}>
+                  <Text style={styles.cardTitle}>{item.name}</Text>
+                  <Text style={styles.cardSubtitle}>{item.subtitle}</Text>
+                  <Text style={styles.price}>${item.price}</Text>
+                  <Pressable
+                    style={styles.button}
+                    onPress={() => handleClick(item)}
+                  >
+                    <Text style={styles.buttonText}>Buy</Text>
+                  </Pressable>
+                </View>
               </View>
             </View>
-          </View>
-        ))}
-      </View>
-    </ScrollView>
+          ))}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 };
 

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { button, buttonText, container, hr } from '../../constants';
+
+const styles = StyleSheet.create({
+  button,
+  buttonText,
+  container: { ...container, paddingHorizontal: 0 },
+  embeddedSection: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 16,
+    paddingHorizontal: 16,
+  },
+  hr,
+  text: { textAlign: 'center' },
+  utilitySection: {
+    paddingHorizontal: 16,
+  },
+});
+
+export default styles;

example/src/components/Embedded/Embedded.tsx

@@ -0,0 +1,22 @@
+import { Iterable } from '@iterable/react-native-sdk';
+import { Text } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import styles from './Embedded.styles';
+
+export const Embedded = () => {
+  return (
+    <SafeAreaView style={styles.container}>
+      <Text style={styles.text}>EMBEDDED</Text>
+      <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>
+    </SafeAreaView>
+  );
+};
+
+export default Embedded;

example/src/components/Embedded/index.ts

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

example/src/components/Login/Login.tsx

@@ -1,11 +1,12 @@
+import { useMemo } from 'react';
 import {
   ActivityIndicator,
   Pressable,
   Text,
   TextInput,
   View,
 } from 'react-native';
-import { useMemo } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { colors, type Route } from '../../constants';
 import { useIterableApp } from '../../hooks';
@@ -18,7 +19,7 @@ export const Login = ({ navigation }: RootStackScreenProps<Route.Login>) => {
   const loginIsEnabled = useMemo(() => apiKey && userId, [apiKey, userId]);
 
   return (
-    <View style={styles.loginScreenContainer}>
+    <SafeAreaView style={styles.loginScreenContainer}>
       {loginInProgress ? (
         <View style={styles.loadingContainer}>
           <ActivityIndicator size="large" color={colors.brandPurple} />
@@ -66,7 +67,7 @@ export const Login = ({ navigation }: RootStackScreenProps<Route.Login>) => {
           </View>
         </>
       )}
-    </View>
+    </SafeAreaView>
   );
 };
 

example/src/components/User/User.tsx

@@ -1,6 +1,7 @@
 import { Iterable } from '@iterable/react-native-sdk';
 import { useEffect, useState } from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { useIterableApp } from '../../hooks';
 import styles from './User.styles';
@@ -18,13 +19,13 @@ export const User = () => {
   }, [isLoggedIn]);
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container}>
       <Text style={styles.appName}>Welcome Iterator</Text>
       <Text style={styles.text}>Logged in as {loggedInAs}</Text>
       <TouchableOpacity style={styles.button} onPress={logout}>
         <Text style={styles.buttonText}>Logout</Text>
       </TouchableOpacity>
-    </View>
+    </SafeAreaView>
   );
 };
 

example/src/constants/routes.ts

@@ -1,5 +1,6 @@
 export enum Route {
   Commerce = 'Commerce',
+  Embedded = 'Embedded',
   Inbox = 'Inbox',
   Login = 'Login',
   Main = 'Main',

example/src/constants/styles/index.ts

@@ -1,5 +1,6 @@
 export * from './colors';
 export * from './containers';
 export * from './formElements';
+export * from './miscElements';
 export * from './shadows';
 export * from './typography';

example/src/constants/styles/miscElements.ts

@@ -0,0 +1,9 @@
+import { type ViewStyle } from 'react-native';
+import { colors } from './colors';
+
+export const hr: ViewStyle = {
+  backgroundColor: colors.borderPrimary,
+  height: 1,
+  marginVertical: 20,
+  marginHorizontal: 0,
+};

example/src/constants/styles/typography.ts

@@ -6,7 +6,6 @@ export const appName: TextStyle = {
   fontWeight: 'bold',
   fontSize: 14,
   width: '100%',
-  marginTop: 41,
   marginBottom: 64,
   textTransform: 'uppercase',
   letterSpacing: 2,

example/src/hooks/useIterableApp.tsx

@@ -192,6 +192,8 @@ export const IterableAppProvider: FunctionComponent<
 
       config.logLevel = IterableLogLevel.debug;
 
+      config.embeddedMessagingEnabled = true;
+
       config.inAppHandler = () => IterableInAppShowResponse.show;
 
       if (

example/src/types/navigation.ts

@@ -10,6 +10,7 @@ import { Route } from '../constants/routes';
 export type MainScreenParamList = {
   [Route.Commerce]: undefined;
   [Route.Inbox]: undefined;
+  [Route.Embedded]: undefined;
   [Route.User]: undefined;
 };
 

src/core/classes/Iterable.test.ts

@@ -300,37 +300,39 @@ describe('Iterable', () => {
       // WHEN config is initialized
       const config = new IterableConfig();
       // THEN config has default values
-      expect(config.pushIntegrationName).toBe(undefined);
+      expect(config.allowedProtocols).toEqual([]);
+      expect(config.androidSdkUseInMemoryStorageForInApps).toBe(false);
+      expect(config.authHandler).toBe(undefined);
       expect(config.autoPushRegistration).toBe(true);
       expect(config.checkForDeferredDeeplink).toBe(false);
-      expect(config.inAppDisplayInterval).toBe(30.0);
-      expect(config.urlHandler).toBe(undefined);
       expect(config.customActionHandler).toBe(undefined);
+      expect(config.dataRegion).toBe(IterableDataRegion.US);
+      expect(config.embeddedMessagingEnabled).toBe(false);
+      expect(config.encryptionEnforced).toBe(false);
+      expect(config.expiringAuthTokenRefreshPeriod).toBe(60.0);
+      expect(config.inAppDisplayInterval).toBe(30.0);
       expect(config.inAppHandler).toBe(undefined);
-      expect(config.authHandler).toBe(undefined);
       expect(config.logLevel).toBe(IterableLogLevel.debug);
       expect(config.logReactNativeSdkCalls).toBe(true);
-      expect(config.expiringAuthTokenRefreshPeriod).toBe(60.0);
-      expect(config.allowedProtocols).toEqual([]);
-      expect(config.androidSdkUseInMemoryStorageForInApps).toBe(false);
+      expect(config.pushIntegrationName).toBe(undefined);
+      expect(config.urlHandler).toBe(undefined);
       expect(config.useInMemoryStorageForInApps).toBe(false);
-      expect(config.dataRegion).toBe(IterableDataRegion.US);
-      expect(config.encryptionEnforced).toBe(false);
       const configDict = config.toDict();
-      expect(configDict.pushIntegrationName).toBe(undefined);
+      expect(configDict.allowedProtocols).toEqual([]);
+      expect(configDict.androidSdkUseInMemoryStorageForInApps).toBe(false);
+      expect(configDict.authHandlerPresent).toBe(false);
       expect(configDict.autoPushRegistration).toBe(true);
-      expect(configDict.inAppDisplayInterval).toBe(30.0);
-      expect(configDict.urlHandlerPresent).toBe(false);
       expect(configDict.customActionHandlerPresent).toBe(false);
+      expect(configDict.dataRegion).toBe(IterableDataRegion.US);
+      expect(configDict.embeddedMessagingEnabled).toBe(false);
+      expect(configDict.encryptionEnforced).toBe(false);
+      expect(configDict.expiringAuthTokenRefreshPeriod).toBe(60.0);
+      expect(configDict.inAppDisplayInterval).toBe(30.0);
       expect(configDict.inAppHandlerPresent).toBe(false);
-      expect(configDict.authHandlerPresent).toBe(false);
       expect(configDict.logLevel).toBe(IterableLogLevel.debug);
-      expect(configDict.expiringAuthTokenRefreshPeriod).toBe(60.0);
-      expect(configDict.allowedProtocols).toEqual([]);
-      expect(configDict.androidSdkUseInMemoryStorageForInApps).toBe(false);
+      expect(configDict.pushIntegrationName).toBe(undefined);
+      expect(configDict.urlHandlerPresent).toBe(false);
       expect(configDict.useInMemoryStorageForInApps).toBe(false);
-      expect(configDict.dataRegion).toBe(IterableDataRegion.US);
-      expect(configDict.encryptionEnforced).toBe(false);
     });
   });
 
@@ -1212,4 +1214,19 @@ describe('Iterable', () => {
       });
     });
   });
+
+  describe('embeddedManager', () => {
+    it('should be disabled by default', () => {
+      const config = new IterableConfig();
+      expect(config.embeddedMessagingEnabled).toBe(false);
+      expect(Iterable.embeddedManager.isEnabled).toBe(false);
+    });
+
+    it('should enable embeddedManager when config is set', async () => {
+      const config = new IterableConfig();
+      config.embeddedMessagingEnabled = true;
+      await Iterable.initialize('test-key', config);
+      expect(Iterable.embeddedManager.isEnabled).toBe(true);
+    });
+  });
 });