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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.3",
+  "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,12 +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 ApiService from './services/api_services';
 
 const API_LEVEL_33 = 33;
 
@@ -57,7 +57,6 @@ const getFirebaseToken = async () => {
 
 interface SubscriptionProps {
   appToken: string,
-  enableAlert: boolean,
   dev?: boolean,
   friendlyIdentifier?: string,
   customFields?: any,
@@ -90,7 +89,7 @@ class Inngage {
     return Inngage.instance;
   }
 
-  static async notificationListener(firebaseListenCallback?: any) {
+  static notificationListener(firebaseListenCallback?: any) {
     try {
       InngageNotificationMessage(firebaseListenCallback)
     } catch (e) {

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,12 +1,12 @@
 import * as React from "react";
 import {
-  StyleSheet,
-  Image,
-  View,
-  Text,
-  TouchableOpacity,
-  ImageBackground,
-  Dimensions,
+    StyleSheet,
+    Image,
+    View,
+    Text,
+    TouchableOpacity,
+    ImageBackground,
+    Dimensions,
 } from "react-native";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -17,142 +17,143 @@ 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_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
+    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
 }
 
 interface InAppRichContent {
-  carousel: boolean
-  img1: string
-  img2: string
-  img3: string
-  img4: string
-  img5: string
+    carousel: boolean
+    img1: string
+    img2: string
+    img3: string
+    img4: string
+    img5: string
 }
 
 interface InAppProps {
-
+    onDismiss: () => void;
 }
 
-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);
-      }
-    };
-
-    fetchAdditionalData();
-  }, []);
-
-  const styles = buildStyles(data, screenWidth * 0.9);
-
-  const handleDismissInApp = async () => {
-    await AsyncStorage.removeItem('inapp');
-    setVisible(false);
-  }
-
-  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 }) => {
+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 (
-      <View style={stylesCarousel.itemContainer}>
-        <Image style={[props, stylesCarousel.itemImg]} source={{ uri: item }} />
-      </View>
+        <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>
     )
-  }
-
-  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/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,17 +6,49 @@ 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 - Data in background and closed app: ', remoteMessage)
-    if (remoteMessage?.data?.additional_data != null)
+      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(() => {
     PushNotification.configure({
@@ -80,7 +112,6 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
 
   useEffect(() => {
     messaging().getInitialNotification().then(async (value) => {
-
       if (value !== null)
         handleUniqueRemoteMessage(value);
     });
@@ -89,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;
 

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)
+}