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

package/README.md

@@ -1,61 +1,61 @@
-<h1 align="center">
-   <b>
-        <a href="https://inngage.com.br/"><img src="https://inngage.com.br/wp-content/uploads/2022/03/inngage-small.png" /></a><br>
-    </b>
-</h1>
-
-<p align="center">Pacote Inngage para aplicativos React Native para otimização de campanhas de marketing usando notificações push.</p>
-
-<p align="center">
-    <a href="https://inngage.com.br/"><b>Website</b></a> •
-    <a href="https://inngage.readme.io/docs/react-native-sdk-20"><b>Documentation</b></a>
-</p>
-
-<div align="center">
-
-[![npm version](https://img.shields.io/npm/v/@inngageregistry/inngage-react.svg?style=flat-square)](https://www.npmjs.org/package/@inngageregistry/inngage-react)
-
-</div>
-
-## Instalação
-### 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-localize": "^2.2.6",
-  "react-native-permissions": "^3.8.0",
-  "react-native-push-notification": "^8.1.1",
-  "react-native-inappbrowser-reborn": "^3.7.0",
-}
-```
-> 📘 *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"**.
+<h1 align="center">
+   <b>
+        <a href="https://inngage.com.br/"><img src="https://inngage.com.br/wp-content/uploads/2022/03/inngage-small.png" /></a><br>
+    </b>
+</h1>
+
+<p align="center">Pacote Inngage para aplicativos React Native para otimização de campanhas de marketing usando notificações push.</p>
+
+<p align="center">
+    <a href="https://inngage.com.br/"><b>Website</b></a> •
+    <a href="https://inngage.readme.io/docs/react-native-sdk-20"><b>Documentation</b></a>
+</p>
+
+<div align="center">
+
+[![npm version](https://img.shields.io/npm/v/@inngageregistry/inngage-react.svg?style=flat-square)](https://www.npmjs.org/package/@inngageregistry/inngage-react)
+
+</div>
+
+## Instalação
+### 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-localize": "^2.2.6",
+  "react-native-permissions": "^3.8.0",
+  "react-native-push-notification": "^8.1.1",
+  "react-native-inappbrowser-reborn": "^3.7.0",
+}
+```
+> 📘 *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/dist/Inngage.d.ts

@@ -0,0 +1,28 @@
+interface SubscriptionProps {
+    appToken: string;
+    dev?: boolean;
+    friendlyIdentifier?: string;
+    customFields?: any;
+    customData?: any;
+    phoneNumber?: string;
+    email?: string;
+}
+interface SendEventProps {
+    eventName: string;
+    conversionEvent?: boolean;
+    conversionValue?: number;
+    conversionNotId?: string;
+    eventValues?: any;
+}
+declare class Inngage {
+    private static instance;
+    private apiService;
+    constructor();
+    static getInstance(): Inngage;
+    static notificationListener(firebaseListenCallback?: any): void;
+    static subscribe({ appToken, friendlyIdentifier, customFields, phoneNumber, email, }: SubscriptionProps): Promise<Response>;
+    static sendEvent({ eventName, conversionEvent, conversionValue, conversionNotId, eventValues, }: SendEventProps): Promise<Response>;
+    static addUserData(customFields: any): Promise<any>;
+    static setDebugMode(value: boolean): void;
+}
+export default Inngage;

package/dist/Inngage.js

@@ -0,0 +1,149 @@
+import { Platform } from 'react-native';
+import { getApp } from '@react-native-firebase/app';
+import { AuthorizationStatus, getMessaging, getToken as getFcmTokenFromMessaging, isDeviceRegisteredForRemoteMessages, registerDeviceForRemoteMessages, requestPermission, } from '@react-native-firebase/messaging';
+import DeviceInfo from 'react-native-device-info';
+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 { InngageProperties } from './models/inngage_properties';
+import RNPermissions, { RESULTS } from 'react-native-permissions';
+import ApiService from './services/api_services';
+import notifee from '@notifee/react-native';
+const API_LEVEL_33 = 33;
+const app = getApp();
+const messagingInstance = getMessaging(app);
+const getFirebaseAccess = async () => {
+    return handleNotificationsPermission();
+};
+const handleNotificationsPermission = async () => {
+    const options = ['alert', 'badge', 'sound'];
+    const apiLevel = Platform.OS === 'android' ? await DeviceInfo.getApiLevel() : 0;
+    let permissionGranted = false;
+    if (Platform.OS === 'android') {
+        if (apiLevel >= API_LEVEL_33) {
+            const result = await RNPermissions.requestNotifications(options);
+            permissionGranted = result.status === RESULTS.GRANTED;
+        }
+        else {
+            permissionGranted = true;
+        }
+    }
+    else {
+        const status = await requestPermission(messagingInstance);
+        permissionGranted =
+            status === AuthorizationStatus.AUTHORIZED ||
+                status === AuthorizationStatus.PROVISIONAL;
+        if (notifee) {
+            try {
+                await notifee.requestPermission();
+            }
+            catch { }
+        }
+    }
+    if (permissionGranted) {
+        return getFirebaseToken();
+    }
+    throw new Error('Notification permission not granted');
+};
+const getFirebaseToken = async () => {
+    let fcmToken = await AsyncStorage.getItem('fcmToken');
+    if (!fcmToken) {
+        const isRegistered = (isDeviceRegisteredForRemoteMessages(messagingInstance) ?? false);
+        if (!isRegistered && typeof registerDeviceForRemoteMessages === 'function') {
+            await registerDeviceForRemoteMessages(messagingInstance);
+        }
+        const newFcmToken = typeof getFcmTokenFromMessaging(messagingInstance) === 'function' ? await getFcmTokenFromMessaging(messagingInstance) : null;
+        if (newFcmToken) {
+            await AsyncStorage.setItem('fcmToken', newFcmToken);
+            return newFcmToken;
+        }
+    }
+    return fcmToken || null;
+};
+class Inngage {
+    constructor() {
+        this.apiService = new ApiService();
+    }
+    static getInstance() {
+        if (!Inngage.instance) {
+            Inngage.instance = new Inngage();
+        }
+        return Inngage.instance;
+    }
+    static notificationListener(firebaseListenCallback) {
+        try {
+            InngageNotificationMessage(firebaseListenCallback);
+        }
+        catch (e) {
+            console.log(e);
+        }
+    }
+    static async subscribe({ appToken, friendlyIdentifier, customFields, phoneNumber, email, }) {
+        const inngage = Inngage.getInstance();
+        InngageProperties.appToken = appToken;
+        InngageProperties.identifier = friendlyIdentifier;
+        const respToken = await getFirebaseAccess();
+        const { countryCode: osLocale, languageCode: osLanguage } = RNLocalize.getLocales()[0] || {};
+        const deviceManufacturer = await DeviceInfo.getManufacturer();
+        const installTime = await DeviceInfo.getFirstInstallTime();
+        const lastUpdateTime = await DeviceInfo.getLastUpdateTime();
+        const uuid = await DeviceInfo.getUniqueId();
+        const appInstalledIn = formatDate(installTime);
+        const appUpdatedIn = formatDate(lastUpdateTime);
+        const subscription = {
+            registerSubscriberRequest: {
+                app_token: appToken,
+                identifier: friendlyIdentifier,
+                registration: respToken,
+                platform: DeviceInfo.getSystemName(),
+                sdk: DeviceInfo.getBuildNumber(),
+                deviceModel: DeviceInfo.getModel(),
+                deviceManufacturer,
+                osLocale,
+                osLanguage,
+                os_version: DeviceInfo.getReadableVersion(),
+                app_version: DeviceInfo.getBuildNumber(),
+                appInstalledIn,
+                appUpdatedIn,
+                uuid,
+                phone_Number: phoneNumber,
+                email: email,
+                customFields: customFields,
+            },
+        };
+        return inngage.apiService.subscribe(subscription);
+    }
+    static async sendEvent({ eventName, conversionEvent = false, conversionValue = 0, conversionNotId = '', eventValues, }) {
+        const inngage = Inngage.getInstance();
+        const registration = await getFirebaseAccess();
+        const request = {
+            newEventRequest: {
+                app_token: InngageProperties.appToken,
+                identifier: InngageProperties.identifier,
+                registration,
+                event_name: eventName,
+                conversion_event: conversionEvent,
+                conversion_value: conversionValue,
+                conversion_notid: conversionNotId,
+                event_values: eventValues,
+            },
+        };
+        return inngage.apiService.sendEvent(request);
+    }
+    static async addUserData(customFields) {
+        const inngage = Inngage.getInstance();
+        const request = {
+            fieldsRequest: {
+                appToken: InngageProperties.appToken,
+                identifier: InngageProperties.identifier,
+                customField: customFields,
+            },
+        };
+        return inngage.apiService.addUserData(request);
+    }
+    static setDebugMode(value) {
+        InngageProperties.debugMode = value;
+    }
+}
+export default Inngage;

package/dist/api/api.d.ts

@@ -0,0 +1,4 @@
+export declare const subscriptionApi: (request: any) => Promise<Response>;
+export declare const notificationApi: (request: any) => Promise<Response>;
+export declare const eventsApi: (request: any) => Promise<Response>;
+export declare const addUserDataApi: (request: any) => Promise<Response>;

package/{src/api/api.ts → dist/api/api.js}

@@ -1,28 +1,22 @@
-import { fetchClient } from './handler'
-
-const apiEndpoints = {
-    subscription: '/subscription/',
-    notification: '/notification/',
-    events: '/events/newEvent/',
-    addUserData: '/subscription/addCustomField',
-};
-
-const makeApiCall = (method: string, request: any, endpoint: string) => {
-    return fetchClient(method, request, endpoint);
-};
-
-export const subscriptionApi = (request: any) => {
-    return makeApiCall('POST', request, apiEndpoints.subscription);
-};
-
-export const notificationApi = (request: any) => {
-    return makeApiCall('POST', request, apiEndpoints.notification);
-};
-
-export const eventsApi = (request: any) => {
-    return makeApiCall('POST', request, apiEndpoints.events);
-};
-
-export const addUserDataApi = (request: any) => {
-    return makeApiCall('POST', request, apiEndpoints.addUserData);
-};
+import { fetchClient } from './handler';
+const apiEndpoints = {
+    subscription: '/subscription/',
+    notification: '/notification/',
+    events: '/events/newEvent/',
+    addUserData: '/subscription/addCustomField',
+};
+const makeApiCall = (method, request, endpoint) => {
+    return fetchClient(method, request, endpoint);
+};
+export const subscriptionApi = (request) => {
+    return makeApiCall('POST', request, apiEndpoints.subscription);
+};
+export const notificationApi = (request) => {
+    return makeApiCall('POST', request, apiEndpoints.notification);
+};
+export const eventsApi = (request) => {
+    return makeApiCall('POST', request, apiEndpoints.events);
+};
+export const addUserDataApi = (request) => {
+    return makeApiCall('POST', request, apiEndpoints.addUserData);
+};

package/dist/api/handler.d.ts

@@ -0,0 +1 @@
+export declare const fetchClient: (method: string, requestBody: any, path: string, isDev?: boolean) => Promise<Response>;

package/dist/api/handler.js

@@ -0,0 +1,44 @@
+const baseUrlHook = {
+    [false]: 'https://api.inngage.com.br/v1',
+    [undefined]: 'https://api.inngage.com.br/v1',
+    [null]: 'https://api.inngage.com.br/v1',
+    [true]: 'https://apid.inngage.com.br/v1',
+};
+const requestConfigFactory = (method, request) => {
+    let header = {
+        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 = async (method, requestBody, path, isDev = false) => {
+    try {
+        const url = `${baseUrlHook[isDev]}${path}`;
+        const request = requestConfigFactory(method, requestBody);
+        const response = await fetch(url, request);
+        if (!response.ok) {
+            throw new Error(`Network response was not ok (${response.status})`);
+        }
+        return response;
+    }
+    catch (error) {
+        console.error('Fetch Error:', error.message);
+        throw error;
+    }
+};

package/dist/components/in_app.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+interface InAppProps {
+    onDismiss: () => void;
+}
+export declare function InApp({ onDismiss }: InAppProps): React.JSX.Element;
+export {};

package/dist/components/in_app.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { StyleSheet, Image, View, Text, TouchableOpacity, ImageBackground, Dimensions, Linking, } from "react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { buildStyles } from "./styles";
+import { Modal } from "./modal";
+import { InngageProperties } from "../models/inngage_properties";
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+export function InApp({ onDismiss }) {
+    const { width: screenWidth } = Dimensions.get('window');
+    const sliderWidth = screenWidth;
+    const itemWidth = screenWidth * 0.9;
+    const [data, setData] = React.useState();
+    const [richContent, setRichContent] = React.useState();
+    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));
+        }
+    };
+    const imageUrls = [
+        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 (_jsx(View, { style: stylesCarousel.itemContainer, children: _jsx(Image, { style: [stylesCarousel.itemImg], source: { uri: item } }) }));
+    };
+    if (InngageProperties.getDebugMode() && data != null) {
+        console.log('INNGAGE - Data In App:', data);
+        console.log('INNGAGE - Data Rich Content:', richContent);
+    }
+    return (_jsx(Modal, { onBackdropPress: handleDismissInApp, renderToHardwareTextureAndroid: true, transparent: true, visible: visible, children: _jsxs(ImageBackground, { style: styles.content, source: { uri: data?.background_image }, children: [_jsx(TouchableOpacity, { style: styles.closeButton, onPress: handleDismissInApp, children: _jsx(Text, { style: styles.textButton, children: "X" }) }), _jsxs(View, { style: styles.messageData, children: [_jsx(Text, { style: styles.title, children: data?.title }), _jsx(Text, { style: styles.body, children: data?.body })] }), _jsxs(View, { style: styles.footer, children: [data?.btn_left_txt != null ?
+                            _jsx(TouchableOpacity, { style: styles.buttonLeft, onPress: () => handleClick(data?.btn_left_action_link, data?.btn_left_action_type), children: _jsx(Text, { style: styles.textButtonLeft, children: data?.btn_left_txt }) }) : null, data?.btn_right_txt != null ?
+                            _jsx(TouchableOpacity, { style: styles.buttonRight, onPress: () => handleClick(data?.btn_right_action_link, data?.btn_right_action_type), children: _jsx(Text, { style: styles.textButtonRight, children: data?.btn_right_txt }) }) : null] })] }) }));
+}

package/dist/components/modal.d.ts

@@ -0,0 +1,26 @@
+import { Animated, ModalProps as ReactNativeModalProps, StyleProp, ViewStyle } from "react-native";
+import { Component } from "react";
+export interface ModalProps extends ReactNativeModalProps {
+    onBackdropPress?: () => void;
+    onHide?: () => void;
+    visible?: boolean;
+    contentStyle?: StyleProp<ViewStyle>;
+    useNativeDriver?: boolean;
+}
+interface ModalState {
+    visible: boolean;
+    currentAnimation: "none" | "in" | "out";
+}
+export declare class Modal extends Component<ModalProps, ModalState> {
+    static defaultProps: Partial<ModalProps>;
+    state: ModalState;
+    animVal: Animated.Value;
+    _isMounted: boolean;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: ModalProps): void;
+    show: () => void;
+    hide: () => void;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default Modal;