@inngageregistry/inngage-react 4.0.0-alpha.1 → 4.0.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.01",
+  "version": "4.0.0-alpha.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

@@ -3,7 +3,7 @@ import DeviceInfo from "react-native-device-info";
 import * as RNLocalize from "react-native-localize";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import { addUserDataRequest, eventRequest, formatDate } from "./utils";
+import { formatDate } from "./utils";
 import { InngageNotificationMessage } from "./firebase/notifications_listener";
 import { InngageProperties } from './models/inngage_properties';
 
@@ -130,7 +130,6 @@ class Inngage {
     const appUpdatedIn = formatDate(lastUpdateTime);
 
     const subscription = {
-      ...SUBSCRIBE_REQUEST,
       registerSubscriberRequest: {
         app_token: appToken,
         identifier: friendlyIdentifier,
@@ -166,8 +165,7 @@ class Inngage {
 
     const registration = await getFirebaseAccess();
 
-    const request = eventRequest({
-      ...EVENT_REQUEST,
+    const request = {
       newEventRequest: {
         appToken: InngageProperties.appToken,
         identifier: InngageProperties.identifier,
@@ -178,7 +176,7 @@ class Inngage {
         conversionNotId,
         eventValues,
       },
-    });
+    };
 
     return inngage.apiService.sendEvent(request);
   }
@@ -186,14 +184,13 @@ class Inngage {
   static async addUserData(customFields: any): Promise<any> {
     const inngage = Inngage.getInstance();
 
-    const request = addUserDataRequest({
-      ...USER_DATA_REQUEST,
+    const request = {
       fieldsRequest: {
         appToken: InngageProperties.appToken,
         identifier: InngageProperties.identifier,
         customField: customFields,
       },
-    });
+    };
 
     return inngage.apiService.addUserData(request);
   }

package/src/components/in_app.tsx

@@ -1,35 +1,94 @@
-import React from 'react';
+import * as React from "react";
 import {
-  Modal,
   View,
-  StyleSheet,
   Text,
   TouchableOpacity,
   ImageBackground,
-  Platform,
-  PlatformColor,
 } from "react-native";
 
-export function InAppContainer(data: any): JSX.Element {
-  const styles = buildStyles(data)
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { buildStyles } from "./styles";
+import { Modal } from "../components/modal";
+
+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_text: string
+  btn_left_action_type: string
+  btn_left_action_link: string
+  btn_right_text: string
+  btn_right_action_type: string
+  btn_right_action_link: string
+  rick_content: string
+  inpression: string
+  bg_img_action_type: string
+  bg_img_action_link: string
+  dot_color: string
+}
+
+export function InAppContainer(): JSX.Element {
+  const [data, setData] = React.useState<InAppData>();
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    const fetchAdditionalData = async () => {
+      try {
+        const data = await AsyncStorage.getItem('inapp');
+        if (data) {
+          const parsedData = JSON.parse(data);
+
+          setVisible(true);
+          setData(parsedData);
+        }
+      } catch (error) {
+        console.error('Error retrieving additionalData from AsyncStorage:', error);
+      }
+    };
+
+    fetchAdditionalData();
+  }, []);
+
+  const styles = buildStyles(data);
+
+  const handleDismissInApp = async () => {
+    await AsyncStorage.removeItem('inapp');
+    setVisible(false);
+  }
+
+  if (data != null)
+    console.log('data in app', data)
+
   return (
     <Modal
       renderToHardwareTextureAndroid={true}
       transparent={true}
-      visible={true}>
-      <ImageBackground style={styles.content} source={{ uri: "" }}>
+      visible={visible}>
+      <ImageBackground style={styles.content} source={{ uri: data?.background_image }}>
+        <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}>Corpo</Text>
+          <Text style={styles.title}>{data?.title}</Text>
+          <Text style={styles.body}>{data?.body}</Text>
         </View>
         <View style={styles.footer}>
           <TouchableOpacity
-            style={styles.button}>
-            <Text style={styles.textButton}>Teste</Text>
+            style={styles.buttonLeft}>
+            <Text style={styles.textButton}>{data?.btn_left_text}</Text>
           </TouchableOpacity>
           <TouchableOpacity
-            style={styles.button}>
-            <Text style={styles.textButton}>Teste</Text>
+            style={styles.buttonRight}>
+            <Text style={styles.textButton}>{data?.btn_right_text}</Text>
           </TouchableOpacity>
         </View>
       </ImageBackground>
@@ -37,81 +96,7 @@ export function InAppContainer(data: any): JSX.Element {
   )
 }
 
-const buildStyles = ({ data }) => StyleSheet.create({
-  content: Platform.select({
-    android: {
-      backgroundColor: PlatformColor("?attr/colorBackgroundFloating"),
-      flexDirection: "column",
-      borderRadius: 3,
-      padding: 16,
-      margin: 16,
-      overflow: "hidden",
-      elevation: 10,
-      minWidth: 300,
-      alignItems: "center"
-    },
-    default: {}
-  }),
-  messageData: Platform.select({
-    android: {
-      marginTop: 12
-    },
-    default: {}
-  }),
-  footer: {
-    flexDirection: "row",
-    ...Platform.select({
-      android: {
-        alignItems: "center",
-        justifyContent: "flex-end",
-        marginTop: 4,
-      },
-      default: {},
-    }),
-  },
-  title: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"primary_text_light"}`
-      ),
-      fontWeight: "500",
-      fontSize: 18,
-    },
-
-    default: {},
-  }),
-  body: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"secondary_text_light"}`
-      ),
-      fontSize: 16,
-      marginTop: 10,
-      marginBottom: 10,
-    },
-    default: {},
-  }),
-  button: Platform.select({
-    android: {
-      margin: 2,
-      flex: 1,
-      backgroundColor: "red",
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    default: {},
-  }),
-  textButton: Platform.select({
-    android: {
-      color: PlatformColor(
-        `@android:color/${"secondary_text_light"}`
-      ),
-      textAlign: "center",
-      backgroundColor: "transparent",
-      padding: 8,
-      fontSize: 14,
-      textTransform: "uppercase",
-    },
-    default: {},
-  }),
-})
+
+
+
+

package/src/components/modal.tsx

@@ -0,0 +1,221 @@
+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,97 +1,97 @@
-import { StyleSheet } from "react-native";
+import { Platform, PlatformColor, StyleSheet } from "react-native";
 
 
-interface styleInappProps {
-  SLIDER_WIDTH: number;
-}
-export const styleInapp = ({ SLIDER_WIDTH }: styleInappProps) => StyleSheet.create({
-  carouselContainer: {
-    width: "100%",
-    marginTop: 10,
-  },
-  styleContainer: {
-    backgroundColor: 'white',
-    elevation: 10,
-    borderRadius: 10,
-    width: SLIDER_WIDTH * 0.8,
-    height: 480,
-  },
-  counter: {
-    alignSelf: 'center',
-    marginVertical: 10
-  },
+export const buildStyles = (data: any) => StyleSheet.create({
   closeButton: {
     position: 'absolute',
-    alignSelf: 'flex-end',
-    right: 20,
-    top: 20,
-    width: 30,
-    height: 30,
-    borderRadius: 20,
-    backgroundColor: '#00000020',
-    justifyContent: 'center',
-    alignItems: 'center',
-    zIndex: 90,
-  },
-});
-
-interface styleItemProps {
-  msg: any,
-  checkBG: Function,
-}
-export const styleItem = ({ msg, checkBG }: styleItemProps) => StyleSheet.create({
-  btn_left: {
-    backgroundColor: msg.btn_left_bg_color || "#FFFFFF",
-    height: 40,
-    width: 100,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 20,
-    marginLeft: 10,
-    flex: 1
-  },
-  btn_right: {
-    backgroundColor: msg.btn_right_bg_color || "#FFFFFF",
-    height: 40,
-    width: 100,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 10,
-    flex: 1
+    top: 10,
+    right: 10,
+    zIndex: 10,
   },
-  btn_left_title: {
-    color: msg.btn_left_txt_color || "#000000"
+  content: Platform.select({
+    android: {
+      backgroundColor: data?.background_color,
+      flexDirection: "column",
+      borderRadius: 3,
+      padding: 16,
+      margin: 16,
+      overflow: "hidden",
+      elevation: 10,
+      minWidth: 300,
+      alignItems: "center"
+    },
+    default: {}
+  }),
+  messageData: Platform.select({
+    android: {
+      marginTop: 12
+    },
+    default: {}
+  }),
+  footer: {
+    flexDirection: "row",
+    ...Platform.select({
+      android: {
+        alignItems: "center",
+        justifyContent: "flex-end",
+        marginTop: 4,
+      },
+      default: {},
+    }),
   },
-  btn_right_title: {
-    color: msg.btn_right_txt_color || "#000000"
-  },
-  body: {
-    backgroundColor: checkBG(),
-    width: '100%',
-    height: 450,
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  bodyText: {
-    color: msg.body_font_color || "#000000",
-    textAlign: 'justify',
-    marginBottom: 10,
-    fontSize: 15,
-    marginHorizontal: 10
-  },
-  title: {
-    color: msg.title_font_color || "#000000",
-    fontWeight: "bold",
-    fontSize: 18,
-    marginTop: 40
-  },
-  dot: {
-    backgroundColor: msg.dot_color || "#FFFFFF",
-    borderRadius: 100,
-    width: 8,
-    height: 8,
-    marginLeft: 5,
-    elevation: 5,
-  }
-});
+  title: Platform.select({
+    android: {
+      color: PlatformColor(
+        `@android:color/${"primary_text_light"}`
+      ),
+      fontWeight: "500",
+      fontSize: 18,
+    },
+
+    default: {},
+  }),
+  body: Platform.select({
+    android: {
+      color: PlatformColor(
+        `@android:color/${"secondary_text_light"}`
+      ),
+      fontSize: 16,
+      marginTop: 10,
+      marginBottom: 10,
+    },
+    default: {},
+  }),
+  buttonLeft: Platform.select({
+    android: {
+      margin: 2,
+      flex: 1,
+      backgroundColor: data?.btn_left_bg_color,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    default: {},
+  }),
+  buttonRight: Platform.select({
+    android: {
+      margin: 2,
+      flex: 1,
+      backgroundColor: data?.btn_right_bg_color,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    default: {},
+  }),
+  textButton: Platform.select({
+    android: {
+      color: PlatformColor(
+        `@android:color/${"secondary_text_light"}`
+      ),
+      textAlign: "center",
+      backgroundColor: "transparent",
+      padding: 8,
+      fontSize: 14,
+      textTransform: "uppercase",
+    },
+    default: {},
+  }),
+})

package/src/firebase/notifications_listener.ts

@@ -34,21 +34,27 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   })
   useEffect(() => {
     const handleMessage = async (remoteMessage: any) => {
+      const notificationData = remoteMessage.data;
+
       if (InngageProperties.getDebugMode())
         console.log('Remote message received in foreground: ', remoteMessage);
 
       if (firebaseListenCallback != null && remoteMessage != null)
-        firebaseListenCallback(remoteMessage.data)
+        firebaseListenCallback(notificationData)
 
       PushNotification.localNotification({
         autoCancel: true,
         bigPictureUrl: remoteMessage.notification?.android?.imageUrl,
         largeIconUrl: remoteMessage.notification?.android?.imageUrl,
-        title: remoteMessage.data?.title,
-        message: remoteMessage.data?.body,
+        title: notificationData?.title,
+        message: notificationData?.body,
         vibration: 300,
         channelId: "channel_id",
       });
+
+      if (notificationData.additional_data != null)
+        await AsyncStorage.setItem('inapp', notificationData.additional_data);
+
     };
 
     return messaging().onMessage(handleMessage);
@@ -56,12 +62,17 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
 
   useEffect(() => {
     const backgroundHandler = async (remoteMessage: any) => {
+      const notificationData = remoteMessage.data;
+
       if (InngageProperties.getDebugMode())
         console.log('Remote message received in background: ', remoteMessage);
 
       if (remoteMessage != null)
         firebaseListenCallback(remoteMessage.data)
 
+      if (notificationData.additional_data != null)
+        await AsyncStorage.setItem('inapp', notificationData.additional_data);
+
       messaging().onNotificationOpenedApp(remoteMessage => {
         handleNotification(remoteMessage)
       })
@@ -72,6 +83,7 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
 
   useEffect(() => {
     messaging().getInitialNotification().then(async (value) => {
+
       if (value !== null)
         handleUniqueRemoteMessage(value);
     });

package/src/utils.ts

@@ -24,30 +24,6 @@ export const showAlertLink = (title: string, body: string, appName: string, link
   })
 }
 
-export const subscriptionRequestAdapter = (sdkRequest, useCustomData, customData) => {
-  if (useCustomData) {
-    return {
-      registerSubscriberRequest: {
-        ...sdkRequest.registerSubscriberRequest,
-        custom_field: customData
-      }
-    }
-  }
-  return {
-    registerSubscriberRequest: {
-      ...sdkRequest.registerSubscriberRequest
-    }
-  };
-}
-
-export const eventRequest = (request) => {
-  return { ...request }
-}
-
-export const addUserDataRequest = (request) => {
-  return { ...request }
-}
-
 export const isEmpty = (obj: any) => {
   for (var prop in obj) {
     if (obj.hasOwnProperty(prop)) {