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

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

@@ -0,0 +1,117 @@
+import { useEffect } from 'react';
+
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import messaging from '@react-native-firebase/messaging';
+import PushNotification, { Importance } from 'react-native-push-notification'
+
+import { InngageProperties } from '../models/inngage_properties';
+import * as ApiService from '../services/api_service'
+
+export const InngageNotificationMessage = (firebaseListenCallback?: any) => {
+  useEffect(() => {
+    PushNotification.configure({
+      onNotification: function (data: any) {
+        if (data.foreground) {
+          handleNotification(data)
+        }
+      },
+      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 (InngageProperties.getDebugMode())
+        console.log('Remote message received in foreground: ', remoteMessage);
+
+      if (firebaseListenCallback != null && remoteMessage != null)
+        firebaseListenCallback(notificationData)
+
+      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",
+      });
+
+      if (notificationData.additional_data != null)
+        await AsyncStorage.setItem('inapp', notificationData.additional_data);
+
+    };
+
+    return messaging().onMessage(handleMessage);
+  }, []);
+
+  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)
+      })
+    };
+
+    return messaging().setBackgroundMessageHandler(backgroundHandler);
+  }, []);
+
+  useEffect(() => {
+    messaging().getInitialNotification().then(async (value) => {
+
+      if (value !== null)
+        handleUniqueRemoteMessage(value);
+    });
+  }, [])
+
+  const handleUniqueRemoteMessage = async (
+    remoteMessage: { messageId?: string }) => {
+    try {
+      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.log(e);
+    }
+  };
+
+  async function handleNotification(remoteMessage) {
+    const notId = remoteMessage.data?.notId;
+    const request = {
+      notificationRequest: {
+        id: notId,
+        app_token: InngageProperties.appToken,
+      }
+    };
+    await ApiService.sendNotification(request);
+  }
+}

package/src/index.ts

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

package/src/models/requests.ts

@@ -0,0 +1,42 @@
+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: {},
+    },
+};

package/src/services/api_service.ts

@@ -0,0 +1,30 @@
+import { InngageProperties } from '../models/inngage_properties';
+import { subscriptionApi, notificationApi, eventsApi, addUserDataApi } from '../api/api';
+
+class ApiService {
+    async subscribe(request: any) {
+        if (InngageProperties.getDebugMode())
+            console.log('INNGAGE PAYLOAD SUBSCRIPTION: ', request)
+        return subscriptionApi(request);
+    }
+
+    async sendEvent(request: any, dev = false) {
+        if (InngageProperties.getDebugMode())
+            console.log('INNGAGE PAYLOAD EVENT: ', request)
+        return eventsApi(request);
+    }
+
+    async addUserData(request: any, dev = false) {
+        if (InngageProperties.getDebugMode())
+            console.log('INNGAGE PAYLOAD ADDUSERDATA: ', request)
+        return addUserDataApi(request);
+    }
+}
+
+export async function sendNotification(request: any, dev = false) {
+    if (InngageProperties.getDebugMode())
+        console.log('INNGAGE PAYLOAD NOTIFICATION: ', request)
+    return notificationApi(request);
+}
+
+export default ApiService;

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