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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "4.0.0-alpha.01",
+  "version": "4.0.0-alpha.3",
   "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';
 
@@ -11,12 +11,6 @@ import RNPermissions, { NotificationOption, RESULTS } from 'react-native-permiss
 
 import ApiService from './services/api_service';
 
-import {
-  SUBSCRIBE_REQUEST,
-  EVENT_REQUEST,
-  USER_DATA_REQUEST,
-} from './models/requests';
-
 const API_LEVEL_33 = 33;
 
 // --- Get Firebase Access ------/
@@ -73,10 +67,7 @@ interface SubscriptionProps {
 }
 
 interface SendEventProps {
-  appToken: string,
   eventName: string,
-  identifier?: string,
-  registration?: string,
   conversionEvent?: boolean,
   conversionValue?: number,
   conversionNotId?: string,
@@ -130,7 +121,6 @@ class Inngage {
     const appUpdatedIn = formatDate(lastUpdateTime);
 
     const subscription = {
-      ...SUBSCRIBE_REQUEST,
       registerSubscriberRequest: {
         app_token: appToken,
         identifier: friendlyIdentifier,
@@ -157,28 +147,27 @@ class Inngage {
 
   static async sendEvent({
     eventName,
-    conversionEvent,
-    conversionValue,
-    conversionNotId,
+    conversionEvent = false,
+    conversionValue = 0,
+    conversionNotId = "",
     eventValues,
   }: SendEventProps) {
     const inngage = Inngage.getInstance();
 
     const registration = await getFirebaseAccess();
 
-    const request = eventRequest({
-      ...EVENT_REQUEST,
+    const request = {
       newEventRequest: {
         appToken: InngageProperties.appToken,
         identifier: InngageProperties.identifier,
         registration,
         eventName,
-        conversionEvent: !!conversionEvent,
+        conversionEvent,
         conversionValue,
         conversionNotId,
         eventValues,
       },
-    });
+    };
 
     return inngage.apiService.sendEvent(request);
   }
@@ -186,14 +175,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,117 +1,158 @@
-import React from 'react';
+import * as React from "react";
 import {
-  Modal,
-  View,
   StyleSheet,
+  Image,
+  View,
   Text,
   TouchableOpacity,
   ImageBackground,
-  Platform,
-  PlatformColor,
+  Dimensions,
 } from "react-native";
 
-export function InAppContainer(data: any): JSX.Element {
-  const styles = buildStyles(data)
+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";
+
+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 {
+
+}
+
+export function InApp(props: 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');
+        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);
+  }
+
+  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={[props, 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
       renderToHardwareTextureAndroid={true}
       transparent={true}
-      visible={true}>
-      <ImageBackground style={styles.content} source={{ uri: "" }}>
+      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>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>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.button}>
-            <Text style={styles.textButton}>Teste</Text>
-          </TouchableOpacity>
+          {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}
         </View>
       </ImageBackground>
     </Modal>
   )
-}
-
-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,70 @@
-import { StyleSheet } from "react-native";
+import { 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, screen: 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
+    top: 10,
+    right: 10,
+    zIndex: 10,
   },
-  btn_right: {
-    backgroundColor: msg.btn_right_bg_color || "#FFFFFF",
-    height: 40,
-    width: 100,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 10,
-    flex: 1
+  content: {
+    backgroundColor: data?.background_color,
+    flexDirection: "column",
+    borderRadius: 3,
+    paddingBottom: 16,
+    paddingRight: 16,
+    paddingLeft: 16,
+    margin: 16,
+    overflow: "hidden",
+    elevation: 10,
+    width: screen,
+    alignItems: "center"
   },
-  btn_left_title: {
-    color: msg.btn_left_txt_color || "#000000"
+  messageData: { marginTop: 12 },
+  footer: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    marginTop: 4,
   },
-  btn_right_title: {
-    color: msg.btn_right_txt_color || "#000000"
+  title: {
+    color: PlatformColor(
+      `@android:color/${"primary_text_light"}`
+    ),
+    fontWeight: "500",
+    fontSize: 18,
   },
   body: {
-    backgroundColor: checkBG(),
-    width: '100%',
-    height: 450,
-    alignSelf: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  bodyText: {
-    color: msg.body_font_color || "#000000",
-    textAlign: 'justify',
+    color: PlatformColor(
+      `@android:color/${"secondary_text_light"}`
+    ),
+    fontSize: 16,
+    marginTop: 10,
     marginBottom: 10,
-    fontSize: 15,
-    marginHorizontal: 10
   },
-  title: {
-    color: msg.title_font_color || "#000000",
-    fontWeight: "bold",
-    fontSize: 18,
-    marginTop: 40
+  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",
+  },
+  textButton: {
+    color: PlatformColor(
+      `@android:color/${"secondary_text_light"}`
+    ),
+    textAlign: "center",
+    backgroundColor: "transparent",
+    padding: 8,
+    fontSize: 14,
+    textTransform: "uppercase",
   },
-  dot: {
-    backgroundColor: msg.dot_color || "#FFFFFF",
-    borderRadius: 100,
-    width: 8,
-    height: 8,
-    marginLeft: 5,
-    elevation: 5,
-  }
-});
+})

package/src/firebase/notifications_listener.ts

@@ -8,6 +8,15 @@ import PushNotification, { Importance } from 'react-native-push-notification'
 import { InngageProperties } from '../models/inngage_properties';
 import * as ApiService from '../services/api_service'
 
+export const messagingHeadlessTask = () => {
+  return messaging().setBackgroundMessageHandler(async remoteMessage => {
+    if (InngageProperties.getDebugMode())
+      console.log('INNGAGE - Data in background and closed app: ', remoteMessage)
+    if (remoteMessage?.data?.additional_data != null)
+      await AsyncStorage.setItem('inapp', remoteMessage?.data?.additional_data);
+  });
+}
+
 export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
   useEffect(() => {
     PushNotification.configure({
@@ -34,44 +43,44 @@ 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);
   }, []);
 
   useEffect(() => {
-    const backgroundHandler = async (remoteMessage: any) => {
-      if (InngageProperties.getDebugMode())
-        console.log('Remote message received in background: ', remoteMessage);
-
+    messaging().onNotificationOpenedApp(remoteMessage => {
       if (remoteMessage != null)
         firebaseListenCallback(remoteMessage.data)
 
-      messaging().onNotificationOpenedApp(remoteMessage => {
-        handleNotification(remoteMessage)
-      })
-    };
-
-    return messaging().setBackgroundMessageHandler(backgroundHandler);
+      handleNotification(remoteMessage)
+    })
   }, []);
 
   useEffect(() => {
     messaging().getInitialNotification().then(async (value) => {
+
       if (value !== null)
         handleUniqueRemoteMessage(value);
     });
@@ -88,7 +97,7 @@ export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
         handleNotification(remoteMessage)
       }
     } catch (e) {
-      console.log(e);
+      console.error(e);
     }
   };
 

package/src/index.ts

@@ -1,8 +1,8 @@
-import { InAppContainer } from './components/in_app';
+import { InApp } from './components/in_app';
 import Inngage from './Inngage';
 
 //-------------- In-APP Component -------------//
-export { InAppContainer };
+export { InApp };
 
 //-------------- Inngage Wrapper --------------//
 export default Inngage;

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)) {