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

package/README.md

@@ -18,23 +18,44 @@
 </div>
 
 ## Instalação
-### Instalando as dependências
+### Ambiente de desenvolvimento 
+Antes de começar a utilizar nossa SDK, instale as dependências externas utilizadas:
 ```bash
 "dependencies": {
   "@react-native-async-storage/async-storage": "^1.18.1",
+  "@react-native-community/push-notification-ios": "^1.11.0",
   "@react-native-firebase/app": "^17.4.2",
   "@react-native-firebase/messaging": "^17.4.2",
   "react-native-device-info": "^10.6.0",
-  "react-native-inappbrowser-reborn": "^3.7.0",
   "react-native-localize": "^2.2.6",
-  "react-native-snap-carousel": "^3.9.1"
+  "react-native-permissions": "^3.8.0",
+  "react-native-push-notification": "^8.1.1",
+  "react-native-inappbrowser-reborn": "^3.7.0",
 }
 ```
-Ao adicioná-las no seu ```package.json```, utilize o comando ```npm install```.
-### Importar FCM Token (API Key)
-Para aproveitar nossos SDKs, será necessário importar o FCM Token (API Key) do seu projeto Firebase em nossa plataforma.
-### Instalando a SDK
-Utilize o NPM:
-```bash
-$ npm i @inngageregistry/inngage-react
-```
+> 📘 *Recomendação*: Certifique-se de instalar as versões conforme especificado nesta documentação. Para a dependência react-native-inappbrowser-reborn, siga as instruções da seção "Getting Started" na documentação oficial para garantir o funcionamento adequado na abertura de URLs do tipo Weblink. Consulte o link a seguir para mais detalhes:
+> 
+> <https://www.npmjs.com/package/react-native-inappbrowser-reborn>
+
+### Importando o FCM Token (API Key)
+Para aproveitar nossa SDK, será necessário importar o FCM Token (API Key) do seu projeto Firebase em nossa plataforma. Siga o passo a passo neste [link]("https://inngage.readme.io/docs/firebase-console#configura%C3%A7%C3%B5es-do-projeto-firebase") para executar essa ação.
+
+### Instalando o package utilizando o NPM ou YARN
+
+Para adicionar a SDK da Inngage ao seu projeto, execute o seguinte comando utilizando o NPM:
+```
+npm i @inngageregistry/inngage-react
+```
+Este comando adiciona a seguinte linha no arquivo _package.json_ de seu pacote:
+``` 
+"dependencies": {
+	"@inngageregistry/inngage-react": "^4.0.0-beta.2",
+}
+```
+> 📘 Se a instalação via `npm` não funcionar corretamente, você pode instalar a dependência utilizando o `yarn`. 
+> 📘 
+
+Para instalar a SDK com o yarn, siga os passos abaixo:
+
+1. No arquivo `package.json`, adicione a seguinte dependência em `dependencies`: **"@inngageregistry/inngage-react": "^4.0.0-beta.2"**.
+2. No terminal, dentro da pasta do seu projeto, execute o comando: **yarn install**. Isso irá instalar a SDK corretamente.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-beta.2",
   "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,13 @@
 import * as React from "react";
 import {
-  StyleSheet,
-  Image,
-  View,
-  Text,
-  TouchableOpacity,
-  ImageBackground,
-  Dimensions,
+    StyleSheet,
+    Image,
+    View,
+    Text,
+    TouchableOpacity,
+    ImageBackground,
+    Dimensions,
+    Linking,
 } from "react-native";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -16,143 +17,176 @@ import { buildStyles } from "./styles";
 import { Modal } from "../components/modal";
 import { InngageProperties } from "../models/inngage_properties";
 
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+
 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);
+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');
+                console.log(data)
+                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 handleClick = async (link, type) => {
+        if (type === 'inapp') {
+            try {
+                if (await InAppBrowser.isAvailable()) {
+                    await InAppBrowser.open(link, {
+                        dismissButtonStyle: 'close',
+                        preferredBarTintColor: '#453AA4',
+                        preferredControlTintColor: 'white',
+                        enableDefaultShare: true,
+                        enableBarCollapsing: true,
+                    });
+                } else {
+                    Linking.openURL(link);
+                }
+            } catch (error) {
+                console.error(error);
+            }
+        } else if (type === 'deep') {
+            Linking.openURL(link).catch((err) =>
+                console.error('Erro ao abrir o link:', err)
+            );
         }
-      } 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 }) => {
+    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
+            onBackdropPress={handleDismissInApp}
+            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 style={styles.textButton}>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}
+                            onPress={() => handleClick(data?.btn_left_action_link, data?.btn_left_action_type)}>
+                            <Text style={styles.textButtonLeft}>{data?.btn_left_txt}</Text>
+                        </TouchableOpacity> : null}
+                    {data?.btn_right_txt != null ?
+                        <TouchableOpacity
+                            style={styles.buttonRight}
+                            onPress={() => handleClick(data?.btn_right_action_link, data?.btn_right_action_type)}>
+                            <Text style={styles.textButtonRight}>{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/components/styles.ts

@@ -3,15 +3,29 @@ import { PlatformColor, StyleSheet } from "react-native";
 
 export const buildStyles = (data: any, screen: any) => StyleSheet.create({
   closeButton: {
+    width: 30,
+    height: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'transparent', // Cor do botão
+    borderRadius: 25, // Torna o botão circular
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
     position: 'absolute',
     top: 10,
     right: 10,
     zIndex: 10,
   },
+  textButton: {
+    color: '#000', // Cor do texto "X"
+    fontSize: 16, // Tamanho do "X"
+    fontWeight: 'bold', // Deixa o "X" em negrito
+  },
   content: {
     backgroundColor: data?.background_color,
     flexDirection: "column",
-    borderRadius: 3,
+    borderRadius: 20,
     paddingBottom: 16,
     paddingRight: 16,
     paddingLeft: 16,
@@ -21,7 +35,11 @@ export const buildStyles = (data: any, screen: any) => StyleSheet.create({
     width: screen,
     alignItems: "center"
   },
-  messageData: { marginTop: 12 },
+  messageData: {
+    marginTop: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
   footer: {
     flexDirection: "row",
     alignItems: "center",
@@ -29,16 +47,12 @@ export const buildStyles = (data: any, screen: any) => StyleSheet.create({
     marginTop: 4,
   },
   title: {
-    color: PlatformColor(
-      `@android:color/${"primary_text_light"}`
-    ),
+    color: data?.title_font_color,
     fontWeight: "500",
     fontSize: 18,
   },
   body: {
-    color: PlatformColor(
-      `@android:color/${"secondary_text_light"}`
-    ),
+    color: data?.body_font_color,
     fontSize: 16,
     marginTop: 10,
     marginBottom: 10,
@@ -57,14 +71,18 @@ export const buildStyles = (data: any, screen: any) => StyleSheet.create({
     justifyContent: "center",
     alignItems: "center",
   },
-  textButton: {
-    color: PlatformColor(
-      `@android:color/${"secondary_text_light"}`
-    ),
+  textButtonLeft: {
+    color: data?.btn_left_txt_color,
+    textAlign: "center",
+    backgroundColor: "transparent",
+    padding: 8,
+    fontSize: 14,
+  },
+  textButtonRight: {
+    color: data?.btn_right_txt_color,
     textAlign: "center",
     backgroundColor: "transparent",
     padding: 8,
     fontSize: 14,
-    textTransform: "uppercase",
   },
 })

package/src/firebase/notifications_listener.ts

@@ -1,29 +1,71 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import messaging from '@react-native-firebase/messaging';
+import PushNotificationIOS from "@react-native-community/push-notification-ios";
 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, Linking } from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
 
 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) => {
+  const [notificationMessage, setNotificationMessage] = useState(null);
+
   useEffect(() => {
     PushNotification.configure({
+      onAction: function (data: any) {
+        console.log(data)
+      },
       onNotification: function (data: any) {
         if (data.foreground) {
-          handleNotification(data)
+          if (notificationMessage) {
+            handleNotification(notificationMessage)
+          }
         }
+        data.finish(PushNotificationIOS.FetchResult.NoData);
       },
       popInitialNotification: true,
       requestPermissions: true
@@ -45,12 +87,17 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
     const handleMessage = async (remoteMessage: any) => {
       const notificationData = remoteMessage.data;
 
+      if (notificationData.additional_data != null)
+        await AsyncStorage.setItem('inapp', notificationData.additional_data);
+
       if (InngageProperties.getDebugMode())
         console.log('Remote message received in foreground: ', remoteMessage);
 
       if (firebaseListenCallback != null && remoteMessage != null)
         firebaseListenCallback(notificationData)
 
+      setNotificationMessage(remoteMessage);
+
       PushNotification.localNotification({
         autoCancel: true,
         bigPictureUrl: remoteMessage.notification?.android?.imageUrl,
@@ -60,10 +107,6 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
         vibration: 300,
         channelId: "channel_id",
       });
-
-      if (notificationData.additional_data != null)
-        await AsyncStorage.setItem('inapp', notificationData.additional_data);
-
     };
 
     return messaging().onMessage(handleMessage);
@@ -80,7 +123,6 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
 
   useEffect(() => {
     messaging().getInitialNotification().then(async (value) => {
-
       if (value !== null)
         handleUniqueRemoteMessage(value);
     });
@@ -89,6 +131,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;
 
@@ -109,6 +152,31 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
         app_token: InngageProperties.appToken,
       }
     };
+
+    if (remoteMessage.data?.url) {
+      if (remoteMessage.data?.type === 'inapp') {
+        try {
+          if (await InAppBrowser.isAvailable()) {
+            await InAppBrowser.open(remoteMessage.data?.url, {
+              dismissButtonStyle: 'close',
+              preferredBarTintColor: '#453AA4',
+              preferredControlTintColor: 'white',
+              enableDefaultShare: true,
+              enableBarCollapsing: true,
+            });
+          } else {
+            Linking.openURL(remoteMessage.data?.url);
+          }
+        } catch (error) {
+          console.error(error);
+        }
+      } else if (remoteMessage.data?.type === 'deep') {
+        Linking.openURL(remoteMessage.data?.url).catch((err) =>
+          console.error('Erro ao abrir o link:', err)
+        );
+      }
+    }
+
     await ApiService.sendNotification(request);
   }
 }

package/src/index.ts

@@ -1,8 +1,11 @@
 import { InApp } from './components/in_app';
+import { useInAppHandler, messagingHeadlessTask } from './firebase/notifications_listener'
 import Inngage from './Inngage';
 
-//-------------- In-APP Component -------------//
 export { InApp };
-
-//-------------- Inngage Wrapper --------------//
+export { useInAppHandler, messagingHeadlessTask }
 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)
+}