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

package/dist/components/modal.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Animated, Easing, Modal as ReactNativeModal, Platform, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { Component } from "react";
+const MODAL_ANIM_DURATION = 300;
+const MODAL_BACKDROP_OPACITY = 0.3;
+const CONTENT_ANIMATION_IN = Platform.select({
+    ios: {
+        opacity: {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+        },
+        scale: {
+            inputRange: [0, 0.5, 1],
+            outputRange: [1.2, 1.1, 1],
+        },
+    },
+    android: {
+        opacity: {
+            inputRange: [0, 0.5, 1],
+            outputRange: [0, 1, 1],
+        },
+        scale: {
+            inputRange: [0, 1],
+            outputRange: [0.3, 1],
+        },
+    },
+    default: {
+        opacity: {
+            inputRange: [0, 0.5, 1],
+            outputRange: [0, 1, 1],
+        },
+        scale: {
+            inputRange: [0, 1],
+            outputRange: [0.3, 1],
+        },
+    },
+});
+const CONTENT_ANIMATION_OUT = Platform.select({
+    default: {
+        opacity: {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+        },
+    },
+});
+export class Modal extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            visible: Boolean(this.props.visible),
+            currentAnimation: "none",
+        };
+        this.animVal = new Animated.Value(0);
+        this._isMounted = false;
+        this.show = () => {
+            this.setState({ visible: true, currentAnimation: "in" }, () => {
+                Animated.timing(this.animVal, {
+                    easing: Easing.inOut(Easing.quad),
+                    useNativeDriver: Boolean(this.props.useNativeDriver),
+                    duration: MODAL_ANIM_DURATION,
+                    toValue: 1,
+                }).start(() => {
+                    this.setState({ currentAnimation: "none" });
+                });
+            });
+        };
+        this.hide = () => {
+            this.setState({ currentAnimation: "out" }, () => {
+                Animated.timing(this.animVal, {
+                    easing: Easing.inOut(Easing.quad),
+                    useNativeDriver: Boolean(this.props.useNativeDriver),
+                    duration: MODAL_ANIM_DURATION,
+                    toValue: 0,
+                }).start(() => {
+                    if (this._isMounted) {
+                        this.setState({ currentAnimation: "none" });
+                        this.setState({ visible: false }, this.props.onHide);
+                    }
+                });
+            });
+        };
+    }
+    componentDidMount() {
+        this._isMounted = true;
+        if (this.state.visible) {
+            this.show();
+        }
+    }
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.visible && !prevProps.visible) {
+            this.show();
+        }
+        else if (!this.props.visible && prevProps.visible) {
+            this.hide();
+        }
+    }
+    render() {
+        const { children, onBackdropPress, contentStyle, ...otherProps } = this.props;
+        const { currentAnimation, visible } = this.state;
+        const backdropAnimatedStyle = {
+            opacity: this.animVal.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, MODAL_BACKDROP_OPACITY],
+            }),
+        };
+        const contentAnimatedStyle = currentAnimation === "in"
+            ? {
+                opacity: this.animVal.interpolate({
+                    inputRange: CONTENT_ANIMATION_IN.opacity.inputRange,
+                    outputRange: CONTENT_ANIMATION_IN.opacity.outputRange,
+                    extrapolate: "clamp",
+                }),
+                transform: [
+                    {
+                        scale: this.animVal.interpolate({
+                            inputRange: CONTENT_ANIMATION_IN.scale.inputRange,
+                            outputRange: CONTENT_ANIMATION_IN.scale.outputRange,
+                            extrapolate: "clamp",
+                        }),
+                    },
+                ],
+            }
+            : {
+                opacity: this.animVal.interpolate({
+                    inputRange: CONTENT_ANIMATION_OUT.opacity.inputRange,
+                    outputRange: CONTENT_ANIMATION_OUT.opacity.outputRange,
+                    extrapolate: "clamp",
+                }),
+            };
+        return (_jsxs(ReactNativeModal, { transparent: true, animationType: "none", ...otherProps, visible: visible, children: [_jsx(TouchableWithoutFeedback, { onPress: onBackdropPress, children: _jsx(Animated.View, { style: [styles.backdrop, backdropAnimatedStyle] }) }), visible && (_jsx(Animated.View, { style: [styles.content, contentAnimatedStyle, contentStyle], pointerEvents: "box-none", needsOffscreenAlphaCompositing: ["in", "out"].includes(currentAnimation), children: children }))] }));
+    }
+}
+Modal.defaultProps = {
+    onBackdropPress: () => null,
+    onHide: () => null,
+    visible: false,
+    useNativeDriver: false,
+};
+const styles = StyleSheet.create({
+    backdrop: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: "black",
+        opacity: 0,
+    },
+    content: {
+        flex: 1,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+export default Modal;

package/dist/components/styles.d.ts

@@ -0,0 +1,88 @@
+export declare const buildStyles: (data: any, screen: any) => {
+    closeButton: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+        borderRadius: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        position: "absolute";
+        top: number;
+        right: number;
+        zIndex: number;
+    };
+    textButton: {
+        color: string;
+        fontSize: number;
+        fontWeight: "bold";
+    };
+    content: {
+        backgroundColor: any;
+        flexDirection: "column";
+        borderRadius: number;
+        paddingBottom: number;
+        paddingRight: number;
+        paddingLeft: number;
+        margin: number;
+        overflow: "hidden";
+        elevation: number;
+        width: any;
+        alignItems: "center";
+    };
+    messageData: {
+        marginTop: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    footer: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "flex-end";
+        marginTop: number;
+    };
+    title: {
+        color: any;
+        fontWeight: "500";
+        fontSize: number;
+    };
+    body: {
+        color: any;
+        fontSize: number;
+        marginTop: number;
+        marginBottom: number;
+    };
+    buttonLeft: {
+        margin: number;
+        flex: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    buttonRight: {
+        margin: number;
+        flex: number;
+        backgroundColor: any;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    textButtonLeft: {
+        color: any;
+        textAlign: "center";
+        backgroundColor: string;
+        padding: number;
+        fontSize: number;
+    };
+    textButtonRight: {
+        color: any;
+        textAlign: "center";
+        backgroundColor: string;
+        padding: number;
+        fontSize: number;
+    };
+};

package/dist/components/styles.js

@@ -0,0 +1,86 @@
+import { StyleSheet } from "react-native";
+export const buildStyles = (data, screen) => StyleSheet.create({
+    closeButton: {
+        width: 30,
+        height: 30,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'transparent',
+        borderRadius: 25,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.2,
+        shadowRadius: 4,
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        zIndex: 10,
+    },
+    textButton: {
+        color: '#000',
+        fontSize: 16,
+        fontWeight: 'bold',
+    },
+    content: {
+        backgroundColor: data?.background_color,
+        flexDirection: "column",
+        borderRadius: 20,
+        paddingBottom: 16,
+        paddingRight: 16,
+        paddingLeft: 16,
+        margin: 16,
+        overflow: "hidden",
+        elevation: 10,
+        width: screen,
+        alignItems: "center"
+    },
+    messageData: {
+        marginTop: 12,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    footer: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        marginTop: 4,
+    },
+    title: {
+        color: data?.title_font_color,
+        fontWeight: "500",
+        fontSize: 18,
+    },
+    body: {
+        color: data?.body_font_color,
+        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",
+    },
+    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,
+    },
+});

package/dist/firebase/notifications_listener.d.ts

@@ -0,0 +1,6 @@
+export declare const messagingHeadlessTask: () => void;
+export declare const useInAppHandler: () => {
+    showInApp: boolean;
+    setShowInApp: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export declare const InngageNotificationMessage: (firebaseListenCallback?: (data: Record<string, string>) => void) => void;

package/dist/firebase/notifications_listener.js

@@ -0,0 +1,170 @@
+import { useEffect, useState } from 'react';
+import { AppState, Linking, Platform } from 'react-native';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { getApp } from '@react-native-firebase/app';
+import { getMessaging, setBackgroundMessageHandler, onMessage, onNotificationOpenedApp, getInitialNotification, } from '@react-native-firebase/messaging';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+import { InngageProperties } from '../models/inngage_properties';
+import * as ApiService from '../services/api_services';
+import notifee, { EventType } from '@notifee/react-native';
+const ANDROID_CHANNEL_ID = 'inngage_default';
+async function ensureAndroidChannel() {
+    if (!notifee || Platform.OS !== 'android')
+        return;
+    await notifee.createChannel({ id: ANDROID_CHANNEL_ID, name: 'Inngage' });
+}
+const toStringValue = (v) => typeof v === 'string' ? v : JSON.stringify(v ?? '');
+const app = getApp();
+const messagingInstance = getMessaging(app);
+export const messagingHeadlessTask = () => {
+    return setBackgroundMessageHandler(messagingInstance, async (remoteMessage) => {
+        if (InngageProperties.getDebugMode()) {
+            console.log('INNGAGE BACKGROUND AND CLOSED DATA: ', remoteMessage);
+        }
+        const additional = remoteMessage?.data?.additional_data;
+        if (additional != null) {
+            await AsyncStorage.setItem('inapp', toStringValue(additional));
+        }
+        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', (next) => {
+            if (next === 'active')
+                checkInAppData();
+        });
+        return () => subscription.remove();
+    }, []);
+    return { showInApp, setShowInApp };
+};
+export const InngageNotificationMessage = (firebaseListenCallback) => {
+    const [notificationMessage, setNotificationMessage] = useState(null);
+    useEffect(() => {
+        const handleMessage = async (remoteMessage) => {
+            const notificationData = remoteMessage.data ?? {};
+            if (notificationData.additional_data != null) {
+                await AsyncStorage.setItem('inapp', toStringValue(notificationData.additional_data));
+            }
+            if (notifee) {
+                const title = remoteMessage.notification?.title ?? notificationData.title ?? '';
+                const body = remoteMessage.notification?.body ?? notificationData.body ?? '';
+                await notifee.displayNotification({
+                    title,
+                    body,
+                    android: Platform.OS === 'android' ? { channelId: ANDROID_CHANNEL_ID } : undefined,
+                    ios: Platform.OS === 'ios'
+                        ? { foregroundPresentationOptions: { banner: true, list: true, sound: true } }
+                        : undefined,
+                });
+                return notifee.onForegroundEvent(({ type, detail }) => {
+                    switch (type) {
+                        case EventType.DISMISSED:
+                            if (InngageProperties.getDebugMode()) {
+                                console.log('User dismissed notification', detail.notification);
+                            }
+                            break;
+                        case EventType.PRESS:
+                            handleNotification(remoteMessage);
+                            break;
+                    }
+                });
+            }
+            else {
+                if (InngageProperties.getDebugMode()) {
+                    console.log('[SDK] Notifee não instalado; mensagem em foreground: ', remoteMessage);
+                }
+            }
+            if (InngageProperties.getDebugMode()) {
+                console.log('Remote message received in foreground: ', remoteMessage);
+            }
+            if (firebaseListenCallback && remoteMessage) {
+                firebaseListenCallback(notificationData);
+            }
+            setNotificationMessage(remoteMessage);
+        };
+        ensureAndroidChannel().catch(() => { });
+        const unsubscribe = onMessage(messagingInstance, handleMessage);
+        return unsubscribe;
+    }, [firebaseListenCallback]);
+    useEffect(() => {
+        const unsubscribe = onNotificationOpenedApp(messagingInstance, (remoteMessage) => {
+            if (!remoteMessage)
+                return;
+            firebaseListenCallback?.(remoteMessage.data ?? {});
+            handleNotification(remoteMessage);
+        });
+        return unsubscribe;
+    }, [firebaseListenCallback]);
+    useEffect(() => {
+        let mounted = true;
+        getInitialNotification(messagingInstance)
+            .then(async (value) => {
+            if (!mounted || !value)
+                return;
+            await handleUniqueRemoteMessage(value);
+        })
+            .catch((e) => console.error(e));
+        return () => {
+            mounted = false;
+        };
+    }, []);
+    const handleUniqueRemoteMessage = async (remoteMessage) => {
+        try {
+            const lastId = await AsyncStorage.getItem('LAST_REMOTE_MESSAGE_ID');
+            const newId = remoteMessage?.messageId;
+            if (newId && lastId !== newId) {
+                await AsyncStorage.setItem('LAST_REMOTE_MESSAGE_ID', newId);
+                handleNotification(remoteMessage);
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    async function handleNotification(remoteMessage) {
+        const data = remoteMessage?.data ?? {};
+        const notId = data?.notId;
+        const request = {
+            notificationRequest: {
+                app_token: InngageProperties.appToken,
+                id: notId,
+                notId: notId
+            },
+        };
+        const url = data?.url;
+        const type = data?.type;
+        if (url) {
+            if (type === 'inapp') {
+                try {
+                    if (await InAppBrowser.isAvailable()) {
+                        await InAppBrowser.open(url, {
+                            dismissButtonStyle: 'close',
+                            preferredBarTintColor: '#453AA4',
+                            preferredControlTintColor: 'white',
+                            enableDefaultShare: true,
+                            enableBarCollapsing: true,
+                        });
+                    }
+                    else {
+                        Linking.openURL(url);
+                    }
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+            else if (type === 'deep') {
+                Linking.openURL(url).catch((err) => console.error('Erro ao abrir o link:', err));
+            }
+        }
+        await ApiService.sendNotification(request);
+    }
+};

package/{src/index.ts → dist/index.d.ts}

@@ -1,11 +1,6 @@
-import { InApp } from './components/in_app';
-import { useInAppHandler, messagingHeadlessTask } from './firebase/notifications_listener'
-import Inngage from './Inngage';
-
-export { InApp };
-export { useInAppHandler, messagingHeadlessTask }
-export default Inngage;
-
-
-
-
+import { InApp } from './components/in_app';
+import { useInAppHandler, messagingHeadlessTask } from './firebase/notifications_listener';
+import Inngage from './Inngage';
+export { InApp };
+export { useInAppHandler, messagingHeadlessTask };
+export default Inngage;

package/dist/index.js

@@ -0,0 +1,6 @@
+import { InApp } from './components/in_app';
+import { useInAppHandler, messagingHeadlessTask } from './firebase/notifications_listener';
+import Inngage from './Inngage';
+export { InApp };
+export { useInAppHandler, messagingHeadlessTask };
+export default Inngage;

package/dist/models/inngage_properties.d.ts

@@ -0,0 +1,11 @@
+export declare class InngageProperties {
+    static identifier: string;
+    static appToken: string;
+    static phoneNumber: string;
+    static email: string;
+    static customFields: any;
+    static blockDeepLink: boolean;
+    static debugMode: boolean;
+    static firebaseToken: string;
+    static getDebugMode(): boolean;
+}

package/dist/models/inngage_properties.js

@@ -0,0 +1,13 @@
+export class InngageProperties {
+    static getDebugMode() {
+        return InngageProperties.debugMode;
+    }
+}
+InngageProperties.identifier = '';
+InngageProperties.appToken = '';
+InngageProperties.phoneNumber = '';
+InngageProperties.email = '';
+InngageProperties.customFields = {};
+InngageProperties.blockDeepLink = false;
+InngageProperties.debugMode = false;
+InngageProperties.firebaseToken = '';

package/dist/models/requests.d.ts

@@ -0,0 +1,40 @@
+export declare const SUBSCRIBE_REQUEST: {
+    registerSubscriberRequest: {
+        appToken: string;
+        identifier: string;
+        registration: string;
+        platform: string;
+        sdk: string;
+        deviceModel: string;
+        deviceManufacturer: string;
+        osLocale: string;
+        osLanguage: string;
+        osVersion: string;
+        appVersion: string;
+        appInstalledIn: string;
+        appUpdatedIn: string;
+        uuid: string;
+        phoneNumber: string;
+        email: string;
+        customFields: {};
+    };
+};
+export declare const EVENT_REQUEST: {
+    newEventRequest: {
+        appToken: string;
+        identifier: string;
+        registration: string;
+        eventName: string;
+        conversionEvent: boolean;
+        conversionValue: number;
+        conversionNotId: string;
+        eventValues: {};
+    };
+};
+export declare const USER_DATA_REQUEST: {
+    fieldsRequest: {
+        appToken: string;
+        identifier: string;
+        customField: {};
+    };
+};

package/{src/models/requests.ts → dist/models/requests.js}

@@ -1,42 +1,40 @@
-export const SUBSCRIBE_REQUEST = {
-    registerSubscriberRequest: {
-        appToken: '',
-        identifier: '',
-        registration: '',
-        platform: '',
-        sdk: '',
-        deviceModel: '',
-        deviceManufacturer: '',
-        osLocale: '',
-        osLanguage: '',
-        osVersion: '',
-        appVersion: '',
-        appInstalledIn: '',
-        appUpdatedIn: '',
-        uuid: '',
-        phoneNumber: '',
-        email: '',
-        customFields: {},
-    },
-};
-
-export const EVENT_REQUEST = {
-    newEventRequest: {
-        appToken: '',
-        identifier: '',
-        registration: '',
-        eventName: '',
-        conversionEvent: false,
-        conversionValue: 0,
-        conversionNotId: '',
-        eventValues: {},
-    },
-};
-
-export const USER_DATA_REQUEST = {
-    fieldsRequest: {
-        appToken: '',
-        identifier: '',
-        customField: {},
-    },
-};
+export const SUBSCRIBE_REQUEST = {
+    registerSubscriberRequest: {
+        appToken: '',
+        identifier: '',
+        registration: '',
+        platform: '',
+        sdk: '',
+        deviceModel: '',
+        deviceManufacturer: '',
+        osLocale: '',
+        osLanguage: '',
+        osVersion: '',
+        appVersion: '',
+        appInstalledIn: '',
+        appUpdatedIn: '',
+        uuid: '',
+        phoneNumber: '',
+        email: '',
+        customFields: {},
+    },
+};
+export const EVENT_REQUEST = {
+    newEventRequest: {
+        appToken: '',
+        identifier: '',
+        registration: '',
+        eventName: '',
+        conversionEvent: false,
+        conversionValue: 0,
+        conversionNotId: '',
+        eventValues: {},
+    },
+};
+export const USER_DATA_REQUEST = {
+    fieldsRequest: {
+        appToken: '',
+        identifier: '',
+        customField: {},
+    },
+};