@inngageregistry/inngage-react 4.0.0-alpha.2 → 4.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-beta.1",
   "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

@@ -4,18 +4,12 @@ import * as RNLocalize from "react-native-localize";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import { formatDate } from "./utils";
-import { InngageNotificationMessage } from "./firebase/notifications_listener";
+import { InngageNotificationMessage, messagingHeadlessTask } from "./firebase/notifications_listener";
 import { InngageProperties } from './models/inngage_properties';
 
 import RNPermissions, { NotificationOption, RESULTS } from 'react-native-permissions';
 
-import ApiService from './services/api_service';
-
-import {
-  SUBSCRIBE_REQUEST,
-  EVENT_REQUEST,
-  USER_DATA_REQUEST,
-} from './models/requests';
+import ApiService from './services/api_services';
 
 const API_LEVEL_33 = 33;
 
@@ -63,7 +57,6 @@ const getFirebaseToken = async () => {
 
 interface SubscriptionProps {
   appToken: string,
-  enableAlert: boolean,
   dev?: boolean,
   friendlyIdentifier?: string,
   customFields?: any,
@@ -73,10 +66,7 @@ interface SubscriptionProps {
 }
 
 interface SendEventProps {
-  appToken: string,
   eventName: string,
-  identifier?: string,
-  registration?: string,
   conversionEvent?: boolean,
   conversionValue?: number,
   conversionNotId?: string,
@@ -99,7 +89,7 @@ class Inngage {
     return Inngage.instance;
   }
 
-  static async notificationListener(firebaseListenCallback?: any) {
+  static notificationListener(firebaseListenCallback?: any) {
     try {
       InngageNotificationMessage(firebaseListenCallback)
     } catch (e) {
@@ -156,9 +146,9 @@ class Inngage {
 
   static async sendEvent({
     eventName,
-    conversionEvent,
-    conversionValue,
-    conversionNotId,
+    conversionEvent = false,
+    conversionValue = 0,
+    conversionNotId = "",
     eventValues,
   }: SendEventProps) {
     const inngage = Inngage.getInstance();
@@ -171,7 +161,7 @@ class Inngage {
         identifier: InngageProperties.identifier,
         registration,
         eventName,
-        conversionEvent: !!conversionEvent,
+        conversionEvent,
         conversionValue,
         conversionNotId,
         eventValues,

package/src/api/handler.ts

@@ -1,53 +1,53 @@
 const baseUrlHook = {
-  [false as any]: 'https://api.inngage.com.br/v1',
-  [undefined as any]: 'https://api.inngage.com.br/v1',
-  [null as any]: 'https://api.inngage.com.br/v1',
-  [true as any]: 'https://apid.inngage.com.br/v1',
+    [false as any]: 'https://api.inngage.com.br/v1',
+    [undefined as any]: 'https://api.inngage.com.br/v1',
+    [null as any]: 'https://api.inngage.com.br/v1',
+    [true as any]: 'https://apid.inngage.com.br/v1',
 }
 
 const requestConfigFactory = (method, request) => {
 
-  let header: any = {
-    Accept: 'application/json',
-    'Content-Type': 'application/json',
-  }
-  try {
-    if (request?.registerSubscriberRequest?.authKey) {
-      header = {
-        ...header,
-        Authorization: request.registerSubscriberRequest.authKey
-      }
+    let header: any = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+    }
+    try {
+        if (request?.registerSubscriberRequest?.authKey) {
+            header = {
+                ...header,
+                Authorization: request.registerSubscriberRequest.authKey
+            }
+        }
+    } catch (e) {
+        console.error(e)
+    }
+    let objToSend = {
+        method,
+        body: JSON.stringify(request),
+        headers: header
     }
-  } catch (e) {
-    console.error(e)
-  }
-  let objToSend = {
-    method,
-    body: JSON.stringify(request),
-    headers: header
-  }
 
-  return objToSend
+    return objToSend
 }
 
 export const fetchClient = async (
-  method: string,
-  requestBody: any,
-  path: string,
-  isDev = false
+    method: string,
+    requestBody: any,
+    path: string,
+    isDev = false
 ): Promise<Response> => {
-  try {
-    const url: URL = new URL(`${baseUrlHook[isDev as any]}${path}`);
-    const request: RequestInit = requestConfigFactory(method, requestBody);
-    const response: Response = await fetch(url, request);
+    try {
+        const url: URL = new URL(`${baseUrlHook[isDev as any]}${path}`);
+        const request: RequestInit = requestConfigFactory(method, requestBody);
+        const response: Response = await fetch(url, request);
 
-    if (!response.ok) {
-      throw new Error(`Network response was not ok (${response.status})`);
-    }
+        if (!response.ok) {
+            throw new Error(`Network response was not ok (${response.status})`);
+        }
 
-    return response;
-  } catch (error: any) {
-    console.error('Fetch Error:', error.message);
-    throw error;
-  }
+        return response;
+    } catch (error: any) {
+        console.error('Fetch Error:', error.message);
+        throw error;
+    }
 };

package/src/components/in_app.tsx

@@ -1,102 +1,159 @@
 import * as React from "react";
 import {
-  View,
-  Text,
-  TouchableOpacity,
-  ImageBackground,
+    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
-  title: string
-  body: string
-  title_font_color: string
-  body_font_color: string
-  background_color: string
-  btn_left_txt_color: string
-  btn_left_bg_color: string
-  btn_right_txt_color: string
-  btn_right_bg_color: string
-  background_image: string
-  btn_left_text: string
-  btn_left_action_type: string
-  btn_left_action_link: string
-  btn_right_text: string
-  btn_right_action_type: string
-  btn_right_action_link: string
-  rick_content: string
-  inpression: string
-  bg_img_action_type: string
-  bg_img_action_link: string
-  dot_color: string
+    inapp_message: boolean
+    title: string
+    body: string
+    title_font_color: string
+    body_font_color: string
+    background_color: string
+    btn_left_txt_color: string
+    btn_left_bg_color: string
+    btn_right_txt_color: string
+    btn_right_bg_color: string
+    background_image: string
+    btn_left_txt: string
+    btn_left_action_type: string
+    btn_left_action_link: string
+    btn_right_txt: string
+    btn_right_action_type: string
+    btn_right_action_link: string
+    rich_content: string
+    inpression: string
+    bg_img_action_type: string
+    bg_img_action_link: string
+    dot_color: string
 }
 
-export function InAppContainer(): JSX.Element {
-  const [data, setData] = React.useState<InAppData>();
-  const [visible, setVisible] = React.useState(false);
-
-  React.useEffect(() => {
-    const fetchAdditionalData = async () => {
-      try {
-        const data = await AsyncStorage.getItem('inapp');
-        if (data) {
-          const parsedData = JSON.parse(data);
-
-          setVisible(true);
-          setData(parsedData);
-        }
-      } catch (error) {
-        console.error('Error retrieving additionalData from AsyncStorage:', error);
-      }
-    };
-
-    fetchAdditionalData();
-  }, []);
-
-  const styles = buildStyles(data);
-
-  const handleDismissInApp = async () => {
-    await AsyncStorage.removeItem('inapp');
-    setVisible(false);
-  }
-
-  if (data != null)
-    console.log('data in app', data)
-
-  return (
-    <Modal
-      renderToHardwareTextureAndroid={true}
-      transparent={true}
-      visible={visible}>
-      <ImageBackground style={styles.content} source={{ uri: data?.background_image }}>
-        <TouchableOpacity style={styles.closeButton} onPress={handleDismissInApp}>
-          <Text>X</Text>
-        </TouchableOpacity>
-        <View style={styles.messageData}>
-          <Text style={styles.title}>{data?.title}</Text>
-          <Text style={styles.body}>{data?.body}</Text>
-        </View>
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={styles.buttonLeft}>
-            <Text style={styles.textButton}>{data?.btn_left_text}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.buttonRight}>
-            <Text style={styles.textButton}>{data?.btn_right_text}</Text>
-          </TouchableOpacity>
-        </View>
-      </ImageBackground>
-    </Modal>
-  )
+interface InAppRichContent {
+    carousel: boolean
+    img1: string
+    img2: string
+    img3: string
+    img4: string
+    img5: string
 }
 
+interface InAppProps {
+    onDismiss: () => void;
+}
 
-
-
-
+export function InApp({ onDismiss }: 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);
+            }
+        };
+
+        fetchAdditionalData();
+    }, []);
+
+    const styles = buildStyles(data, screenWidth * 0.9);
+
+    const handleDismissInApp = async () => {
+        await AsyncStorage.removeItem('inapp');
+        setVisible(false);
+        onDismiss();
+    }
+
+    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={[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
+            renderToHardwareTextureAndroid={true}
+            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>
+                <View style={styles.messageData}>
+                    <Text style={styles.title}>{data?.title}</Text>
+                    <Text style={styles.body}>{data?.body}</Text>
+                </View>
+                <View style={styles.footer}>
+                    {data?.btn_left_txt != null ? <TouchableOpacity
+                        style={styles.buttonLeft}>
+                        <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_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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
@@ -6,7 +6,48 @@ import messaging from '@react-native-firebase/messaging';
 import PushNotification, { Importance } from 'react-native-push-notification'
 
 import { InngageProperties } from '../models/inngage_properties';
-import * as ApiService from '../services/api_service'
+import * as ApiService from '../services/api_services'
+import { AppState } from 'react-native';
+
+export const messagingHeadlessTask = () => {
+  return messaging().setBackgroundMessageHandler(async remoteMessage => {
+    if (InngageProperties.getDebugMode())
+      console.log('INNGAGE BACKGROUND AND CLOSED DATA: ', remoteMessage)
+
+    if (remoteMessage?.data?.additional_data != null) {
+      await AsyncStorage.setItem('inapp', remoteMessage?.data?.additional_data);
+    }
+
+    return Promise.resolve();
+  });
+}
+
+export const useInAppHandler = () => {
+  const [showInApp, setShowInApp] = useState(false);
+
+  useEffect(() => {
+    const checkInAppData = async () => {
+      const inAppData = await AsyncStorage.getItem('inapp');
+      if (inAppData) {
+        setShowInApp(true);
+      }
+    };
+
+    checkInAppData();
+
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (nextAppState === 'active') {
+        checkInAppData();
+      }
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return { showInApp, setShowInApp };
+}
 
 export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   useEffect(() => {
@@ -61,29 +102,16 @@ 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(() => {
     messaging().getInitialNotification().then(async (value) => {
-
       if (value !== null)
         handleUniqueRemoteMessage(value);
     });
@@ -92,6 +120,7 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   const handleUniqueRemoteMessage = async (
     remoteMessage: { messageId?: string }) => {
     try {
+      console.log('oi')
       const lastRemoteMessageId = await AsyncStorage.getItem('LAST_REMOTE_MESSAGE_ID');
       const newRemoteMessageId = remoteMessage?.messageId;
 
@@ -100,7 +129,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;

package/src/services/handler.ts

@@ -0,0 +1,41 @@
+const baseUrlHook = {
+  [false as any]: 'https://api.inngage.com.br/v1',
+  [undefined as any]: 'https://api.inngage.com.br/v1',
+  [null as any]: 'https://api.inngage.com.br/v1',
+  [true as any]: 'https://apid.inngage.com.br/v1',
+}
+
+const requestConfigFactory = (method, request) => {
+
+  let header: any = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  }
+  try {
+    if (request?.registerSubscriberRequest?.authKey) {
+      header = {
+        ...header,
+        Authorization: request.registerSubscriberRequest.authKey
+      }
+    }
+  } catch (e) {
+    console.error(e)
+  }
+  let objToSend = {
+    method,
+    body: JSON.stringify(request),
+    headers: header
+  }
+
+  return objToSend
+}
+
+export const fetchClient = (method, requestBody, path, isDev = false): Promise<Response> => {
+  return new Promise((resolve) => {
+    const url = String(baseUrlHook[isDev as any]).concat(path)
+    const request = requestConfigFactory(method, requestBody)
+    fetch(url, request)
+      .then(resolve)
+      .catch(err => console.error('Fetch Error', err))
+  })
+}

package/src/services/inngage.ts

@@ -0,0 +1,23 @@
+import { InngageProperties } from '../models/inngage_properties'
+import { fetchClient } from './handler'
+
+export const subscriptionApi = (request, dev = false) => {
+  if (InngageProperties.getDebugMode())
+    console.log('subscriptionApi', request)
+  return fetchClient('POST', request, '/subscription/', !!dev)
+}
+export const notificationApi = (request, dev = false) => {
+  if (InngageProperties.getDebugMode())
+    console.log('notificationApi', request)
+  return fetchClient('POST', request, '/notification/', !!dev)
+}
+export const eventsApi = (request, dev = false) => {
+  if (InngageProperties.getDebugMode())
+    console.log('eventsApi', request)
+  return fetchClient('POST', request, '/events/newEvent/', !!dev)
+}
+export const addUserDataApi = (request, dev = false) => {
+  if (InngageProperties.getDebugMode())
+    console.log('addUserData', request)
+  return fetchClient('POST', request, '/subscription/addCustomField', !!dev)
+}