@inngageregistry/inngage-react 4.0.0-alpha.2 → 4.0.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.3",
   "description": "Inngage Plugin for React Native applications for marketing campaign optimization using Push Notification.",
   "main": "src/index.ts",
   "types": "src/index.d.ts",

package/src/Inngage.ts

@@ -11,12 +11,6 @@ import RNPermissions, { NotificationOption, RESULTS } from 'react-native-permiss
 
 import ApiService from './services/api_service';
 
-import {
-  SUBSCRIBE_REQUEST,
-  EVENT_REQUEST,
-  USER_DATA_REQUEST,
-} from './models/requests';
-
 const API_LEVEL_33 = 33;
 
 // --- Get Firebase Access ------/
@@ -73,10 +67,7 @@ interface SubscriptionProps {
 }
 
 interface SendEventProps {
-  appToken: string,
   eventName: string,
-  identifier?: string,
-  registration?: string,
   conversionEvent?: boolean,
   conversionValue?: number,
   conversionNotId?: string,
@@ -156,9 +147,9 @@ class Inngage {
 
   static async sendEvent({
     eventName,
-    conversionEvent,
-    conversionValue,
-    conversionNotId,
+    conversionEvent = false,
+    conversionValue = 0,
+    conversionNotId = "",
     eventValues,
   }: SendEventProps) {
     const inngage = Inngage.getInstance();
@@ -171,7 +162,7 @@ class Inngage {
         identifier: InngageProperties.identifier,
         registration,
         eventName,
-        conversionEvent: !!conversionEvent,
+        conversionEvent,
         conversionValue,
         conversionNotId,
         eventValues,

package/src/components/in_app.tsx

@@ -1,15 +1,20 @@
 import * as React from "react";
 import {
+  StyleSheet,
+  Image,
   View,
   Text,
   TouchableOpacity,
   ImageBackground,
+  Dimensions,
 } from "react-native";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import Carousel from 'react-native-snap-carousel';
 
 import { buildStyles } from "./styles";
 import { Modal } from "../components/modal";
+import { InngageProperties } from "../models/inngage_properties";
 
 interface InAppData {
   inapp_message: boolean
@@ -23,32 +28,54 @@ interface InAppData {
   btn_right_txt_color: string
   btn_right_bg_color: string
   background_image: string
-  btn_left_text: string
+  btn_left_txt: string
   btn_left_action_type: string
   btn_left_action_link: string
-  btn_right_text: string
+  btn_right_txt: string
   btn_right_action_type: string
   btn_right_action_link: string
-  rick_content: string
+  rich_content: string
   inpression: string
   bg_img_action_type: string
   bg_img_action_link: string
   dot_color: string
 }
 
-export function InAppContainer(): JSX.Element {
+interface InAppRichContent {
+  carousel: boolean
+  img1: string
+  img2: string
+  img3: string
+  img4: string
+  img5: string
+}
+
+interface InAppProps {
+
+}
+
+export function InApp(props: InAppProps): JSX.Element {
+  const { width: screenWidth } = Dimensions.get('window');
+
+  const sliderWidth = screenWidth;
+  const itemWidth = screenWidth * 0.9;
+
   const [data, setData] = React.useState<InAppData>();
+  const [richContent, setRichContent] = React.useState<InAppRichContent>();
   const [visible, setVisible] = React.useState(false);
 
   React.useEffect(() => {
     const fetchAdditionalData = async () => {
       try {
+        console.log('in app message')
         const data = await AsyncStorage.getItem('inapp');
         if (data) {
           const parsedData = JSON.parse(data);
+          const richContentData = parsedData.rich_content;
 
           setVisible(true);
           setData(parsedData);
+          setRichContent(richContentData);
         }
       } catch (error) {
         console.error('Error retrieving additionalData from AsyncStorage:', error);
@@ -58,15 +85,43 @@ export function InAppContainer(): JSX.Element {
     fetchAdditionalData();
   }, []);
 
-  const styles = buildStyles(data);
+  const styles = buildStyles(data, screenWidth * 0.9);
 
   const handleDismissInApp = async () => {
     await AsyncStorage.removeItem('inapp');
     setVisible(false);
   }
 
-  if (data != null)
-    console.log('data in app', data)
+  const imageUrls: string[] = [
+    richContent?.img1 ?? '',
+    richContent?.img2 ?? '',
+    richContent?.img3 ?? '',
+    richContent?.img4 ?? '',
+    richContent?.img5 ?? ''
+  ];
+
+  const stylesCarousel = StyleSheet.create({
+    itemContainer: {
+      justifyContent: 'center',
+      height: 250
+    },
+    itemImg: {
+      height: 250,
+    },
+  });
+
+  const _renderItem = ({ item, index }) => {
+    return (
+      <View style={stylesCarousel.itemContainer}>
+        <Image style={[props, stylesCarousel.itemImg]} source={{ uri: item }} />
+      </View>
+    )
+  }
+
+  if (InngageProperties.getDebugMode() && data != null) {
+    console.log('INNGAGE - Data In App:', data)
+    console.log('INNGAGE - Data Rich Content:', richContent)
+  }
 
   return (
     <Modal
@@ -74,6 +129,12 @@ export function InAppContainer(): JSX.Element {
       transparent={true}
       visible={visible}>
       <ImageBackground style={styles.content} source={{ uri: data?.background_image }}>
+        {richContent?.carousel ? <Carousel
+          layout={"default"}
+          data={imageUrls}
+          sliderWidth={sliderWidth}
+          itemWidth={itemWidth}
+          renderItem={_renderItem} /> : null}
         <TouchableOpacity style={styles.closeButton} onPress={handleDismissInApp}>
           <Text>X</Text>
         </TouchableOpacity>
@@ -82,21 +143,16 @@ export function InAppContainer(): JSX.Element {
           <Text style={styles.body}>{data?.body}</Text>
         </View>
         <View style={styles.footer}>
-          <TouchableOpacity
+          {data?.btn_left_txt != null ? <TouchableOpacity
             style={styles.buttonLeft}>
-            <Text style={styles.textButton}>{data?.btn_left_text}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
+            <Text style={styles.textButton}>{data?.btn_left_txt}</Text>
+          </TouchableOpacity> : null}
+          {data?.btn_right_txt != null ? <TouchableOpacity
             style={styles.buttonRight}>
-            <Text style={styles.textButton}>{data?.btn_right_text}</Text>
-          </TouchableOpacity>
+            <Text style={styles.textButton}>{data?.btn_right_txt}</Text>
+          </TouchableOpacity> : null}
         </View>
       </ImageBackground>
     </Modal>
   )
-}
-
-
-
-
-
+}

package/src/components/styles.ts

@@ -1,97 +1,70 @@
-import { Platform, PlatformColor, StyleSheet } from "react-native";
+import { PlatformColor, StyleSheet } from "react-native";
 
 
-export const buildStyles = (data: any) => StyleSheet.create({
+export const buildStyles = (data: any, screen: any) => StyleSheet.create({
   closeButton: {
     position: 'absolute',
     top: 10,
     right: 10,
     zIndex: 10,
   },
-  content: Platform.select({
-    android: {
-      backgroundColor: data?.background_color,
-      flexDirection: "column",
-      borderRadius: 3,
-      padding: 16,
-      margin: 16,
-      overflow: "hidden",
-      elevation: 10,
-      minWidth: 300,
-      alignItems: "center"
-    },
-    default: {}
-  }),
-  messageData: Platform.select({
-    android: {
-      marginTop: 12
-    },
-    default: {}
-  }),
+  content: {
+    backgroundColor: data?.background_color,
+    flexDirection: "column",
+    borderRadius: 3,
+    paddingBottom: 16,
+    paddingRight: 16,
+    paddingLeft: 16,
+    margin: 16,
+    overflow: "hidden",
+    elevation: 10,
+    width: screen,
+    alignItems: "center"
+  },
+  messageData: { marginTop: 12 },
   footer: {
     flexDirection: "row",
-    ...Platform.select({
-      android: {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        marginTop: 4,
-      },
-      default: {},
-    }),
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginTop: 4,
+  },
+  title: {
+    color: PlatformColor(
+      `@android:color/${"primary_text_light"}`
+    ),
+    fontWeight: "500",
+    fontSize: 18,
+  },
+  body: {
+    color: PlatformColor(
+      `@android:color/${"secondary_text_light"}`
+    ),
+    fontSize: 16,
+    marginTop: 10,
+    marginBottom: 10,
+  },
+  buttonLeft: {
+    margin: 2,
+    flex: 1,
+    backgroundColor: data?.btn_left_bg_color,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  buttonRight: {
+    margin: 2,
+    flex: 1,
+    backgroundColor: data?.btn_right_bg_color,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  textButton: {
+    color: PlatformColor(
+      `@android:color/${"secondary_text_light"}`
+    ),
+    textAlign: "center",
+    backgroundColor: "transparent",
+    padding: 8,
+    fontSize: 14,
+    textTransform: "uppercase",
   },
-  title: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"primary_text_light"}`
-      ),
-      fontWeight: "500",
-      fontSize: 18,
-    },
-
-    default: {},
-  }),
-  body: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"secondary_text_light"}`
-      ),
-      fontSize: 16,
-      marginTop: 10,
-      marginBottom: 10,
-    },
-    default: {},
-  }),
-  buttonLeft: Platform.select({
-    android: {
-      margin: 2,
-      flex: 1,
-      backgroundColor: data?.btn_left_bg_color,
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    default: {},
-  }),
-  buttonRight: Platform.select({
-    android: {
-      margin: 2,
-      flex: 1,
-      backgroundColor: data?.btn_right_bg_color,
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    default: {},
-  }),
-  textButton: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"secondary_text_light"}`
-      ),
-      textAlign: "center",
-      backgroundColor: "transparent",
-      padding: 8,
-      fontSize: 14,
-      textTransform: "uppercase",
-    },
-    default: {},
-  }),
 })

package/src/firebase/notifications_listener.ts

@@ -8,6 +8,15 @@ import PushNotification, { Importance } from 'react-native-push-notification'
 import { InngageProperties } from '../models/inngage_properties';
 import * as ApiService from '../services/api_service'
 
+export const messagingHeadlessTask = () => {
+  return messaging().setBackgroundMessageHandler(async remoteMessage => {
+    if (InngageProperties.getDebugMode())
+      console.log('INNGAGE - Data in background and closed app: ', remoteMessage)
+    if (remoteMessage?.data?.additional_data != null)
+      await AsyncStorage.setItem('inapp', remoteMessage?.data?.additional_data);
+  });
+}
+
 export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   useEffect(() => {
     PushNotification.configure({
@@ -61,24 +70,12 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   }, []);
 
   useEffect(() => {
-    const backgroundHandler = async (remoteMessage: any) => {
-      const notificationData = remoteMessage.data;
-
-      if (InngageProperties.getDebugMode())
-        console.log('Remote message received in background: ', remoteMessage);
-
+    messaging().onNotificationOpenedApp(remoteMessage => {
       if (remoteMessage != null)
         firebaseListenCallback(remoteMessage.data)
 
-      if (notificationData.additional_data != null)
-        await AsyncStorage.setItem('inapp', notificationData.additional_data);
-
-      messaging().onNotificationOpenedApp(remoteMessage => {
-        handleNotification(remoteMessage)
-      })
-    };
-
-    return messaging().setBackgroundMessageHandler(backgroundHandler);
+      handleNotification(remoteMessage)
+    })
   }, []);
 
   useEffect(() => {
@@ -100,7 +97,7 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
         handleNotification(remoteMessage)
       }
     } catch (e) {
-      console.log(e);
+      console.error(e);
     }
   };
 

package/src/index.ts

@@ -1,8 +1,8 @@
-import { InAppContainer } from './components/in_app';
+import { InApp } from './components/in_app';
 import Inngage from './Inngage';
 
 //-------------- In-APP Component -------------//
-export { InAppContainer };
+export { InApp };
 
 //-------------- Inngage Wrapper --------------//
 export default Inngage;