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

package/src/components/in_app.tsx

@@ -1,192 +0,0 @@
-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 Carousel from 'react-native-snap-carousel';
-
-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
-}
-
-interface InAppRichContent {
-    carousel: boolean
-    img1: string
-    img2: string
-    img3: string
-    img4: string
-    img5: string
-}
-
-interface InAppProps {
-    onDismiss: () => void;
-}
-
-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)
-            );
-        }
-    };
-
-    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 (
-        <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>
-    )
-}

package/src/components/modal.tsx

@@ -1,221 +0,0 @@
-import * as React from "react";
-import {
-    Animated, Easing,
-    Modal as ReactNativeModal,
-    ModalProps as ReactNativeModalProps,
-    Platform,
-    StyleProp,
-    StyleSheet,
-    TouchableWithoutFeedback,
-    ViewStyle
-} 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 interface ModalProps extends ReactNativeModalProps {
-    onBackdropPress?: () => void;
-    onHide?: () => void;
-    visible?: boolean;
-    contentStyle?: StyleProp<ViewStyle>;
-    useNativeDriver?: boolean;
-}
-
-interface ModalState {
-    visible: boolean;
-    currentAnimation: "none" | "in" | "out";
-}
-
-export class Modal extends Component<ModalProps, ModalState> {
-    static defaultProps: Partial<ModalProps> = {
-        onBackdropPress: () => null,
-        onHide: () => null,
-        visible: false,
-        useNativeDriver: false,
-    };
-
-    state: ModalState = {
-        visible: Boolean(this.props.visible),
-        currentAnimation: "none",
-    };
-
-    animVal = new Animated.Value(0);
-    _isMounted = false;
-
-    componentDidMount() {
-        this._isMounted = true;
-        if (this.state.visible) {
-            this.show();
-        }
-    }
-
-    componentWillUnmount() {
-        this._isMounted = false;
-    }
-
-    componentDidUpdate(prevProps: ModalProps) {
-        if (this.props.visible && !prevProps.visible) {
-            this.show();
-        } else if (!this.props.visible && prevProps.visible) {
-            this.hide();
-        }
-    }
-
-    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" });
-            });
-        });
-    };
-
-    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);
-                }
-            });
-        });
-    };
-
-    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 (
-            <ReactNativeModal
-                transparent
-                animationType="none"
-                {...otherProps}
-                visible={visible}
-            >
-                <TouchableWithoutFeedback onPress={onBackdropPress}>
-                    <Animated.View style={[styles.backdrop, backdropAnimatedStyle]} />
-                </TouchableWithoutFeedback>
-                {visible && (
-                    <Animated.View
-                        style={[styles.content, contentAnimatedStyle, contentStyle]}
-                        pointerEvents="box-none"
-                        needsOffscreenAlphaCompositing={["in", "out"].includes(
-                            currentAnimation
-                        )}
-                    >
-                        {children}
-                    </Animated.View>
-                )}
-            </ReactNativeModal>
-        );
-    }
-}
-
-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/src/components/styles.ts

@@ -1,88 +0,0 @@
-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: 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/src/firebase/notifications_listener.ts

@@ -1,182 +0,0 @@
-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, 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 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) {
-          if (notificationMessage) {
-            handleNotification(notificationMessage)
-          }
-        }
-        data.finish(PushNotificationIOS.FetchResult.NoData);
-      },
-      popInitialNotification: true,
-      requestPermissions: true
-    })
-    PushNotification.createChannel({
-      channelId: 'channel_id',
-      channelName: 'default',
-      importance: Importance.HIGH,
-      playSound: true,
-      soundName: 'default',
-      vibrate: true
-    }, (created: any) => {
-      if (created) {
-        console.log('Channel created');
-      }
-    });
-  })
-  useEffect(() => {
-    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,
-        largeIconUrl: remoteMessage.notification?.android?.imageUrl,
-        title: notificationData?.title,
-        message: notificationData?.body,
-        vibration: 300,
-        channelId: "channel_id",
-      });
-    };
-
-    return messaging().onMessage(handleMessage);
-  }, []);
-
-  useEffect(() => {
-    messaging().onNotificationOpenedApp(remoteMessage => {
-      if (remoteMessage != null)
-        firebaseListenCallback(remoteMessage.data)
-
-      handleNotification(remoteMessage)
-    })
-  }, []);
-
-  useEffect(() => {
-    messaging().getInitialNotification().then(async (value) => {
-      if (value !== null)
-        handleUniqueRemoteMessage(value);
-    });
-  }, [])
-
-  const handleUniqueRemoteMessage = async (
-    remoteMessage: { messageId?: string }) => {
-    try {
-      console.log('oi')
-      const lastRemoteMessageId = await AsyncStorage.getItem('LAST_REMOTE_MESSAGE_ID');
-      const newRemoteMessageId = remoteMessage?.messageId;
-
-      if (newRemoteMessageId && lastRemoteMessageId !== newRemoteMessageId) {
-        await AsyncStorage.setItem('LAST_REMOTE_MESSAGE_ID', newRemoteMessageId);
-        handleNotification(remoteMessage)
-      }
-    } catch (e) {
-      console.error(e);
-    }
-  };
-
-  async function handleNotification(remoteMessage) {
-    const notId = remoteMessage.data?.notId;
-    const request = {
-      notificationRequest: {
-        id: notId,
-        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/models/inngage_properties.ts

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