@inngageregistry/inngage-react 4.0.0-beta.1 → 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-beta.1",
+  "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/components/in_app.tsx

@@ -7,6 +7,7 @@ import {
     TouchableOpacity,
     ImageBackground,
     Dimensions,
+    Linking,
 } from "react-native";
 
 import AsyncStorage from "@react-native-async-storage/async-storage";
@@ -16,6 +17,8 @@ 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
@@ -69,6 +72,7 @@ export function InApp({ onDismiss }: InAppProps): JSX.Element {
             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;
@@ -93,6 +97,30 @@ export function InApp({ onDismiss }: InAppProps): JSX.Element {
         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)
+            );
+        }
+    };
+
     const imageUrls: string[] = [
         richContent?.img1 ?? '',
         richContent?.img2 ?? '',
@@ -126,6 +154,7 @@ export function InApp({ onDismiss }: InAppProps): JSX.Element {
 
     return (
         <Modal
+            onBackdropPress={handleDismissInApp}
             renderToHardwareTextureAndroid={true}
             transparent={true}
             visible={visible}>
@@ -137,21 +166,25 @@ export function InApp({ onDismiss }: InAppProps): JSX.Element {
                     itemWidth={itemWidth}
                     renderItem={_renderItem} /> : null}
                 <TouchableOpacity style={styles.closeButton} onPress={handleDismissInApp}>
-                    <Text>X</Text>
+                    <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}>
-                        <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}
+                    {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>

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

@@ -3,11 +3,13 @@ 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_services'
-import { AppState } from 'react-native';
+import { AppState, Linking } from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
 
 export const messagingHeadlessTask = () => {
   return messaging().setBackgroundMessageHandler(async remoteMessage => {
@@ -50,12 +52,20 @@ export const useInAppHandler = () => {
 }
 
 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
@@ -77,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,
@@ -92,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);
@@ -141,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;
+
+
+
+