@inngageregistry/inngage-react 3.3.0-alpha.1 → 3.3.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "3.3.0-alpha.1",
+  "version": "3.3.0-alpha.10",
   "description": "Inngage Plugin for React Native applications for marketing campaign optimization using Push Notification.",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
@@ -28,7 +28,7 @@
     "react-native-localize": "^2.2.6",
     "react-native-permissions": "^3.8.0",
     "react-native-push-notification": "^8.1.1",
-    "react-native-reanimated-carousel": "^3.5.1"
+    "react-native-snap-carousel": "^3.9.1"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",

package/src/Inngage.ts

@@ -3,9 +3,10 @@ import DeviceInfo from "react-native-device-info";
 import * as RNLocalize from "react-native-localize";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
-import { eventRequest, formatDate, subscriptionRequestAdapter } from "./utils";
+import { addUserDataRequest, eventRequest, formatDate, subscriptionRequestAdapter } from "./utils";
 import notificationsListener, { notificationsListenerProps } from "./notificationsListener";
-import { subscriptionApi, eventsApi } from "./services/inngage";
+import { subscriptionApi, eventsApi, addUserDataApi } from "./services/inngage";
+import { InngageProperties } from './models/inngage_properties';
 
 import RNPermissions, { NotificationOption, RESULTS } from 'react-native-permissions';
 
@@ -92,6 +93,7 @@ const Inngage = {
       return { subscribed: false };
     }
   },
+
   Subscribe: async ({
     appToken,
     dev,
@@ -101,6 +103,9 @@ const Inngage = {
     phoneNumber,
     email,
   }: SubscriptionProps) => {
+    InngageProperties.appToken = appToken;
+    InngageProperties.identifier = friendlyIdentifier!;
+
     try {
       const respToken = await getFirebaseAccess()
 
@@ -177,6 +182,23 @@ const Inngage = {
       console.error(e)
       return { subscribed: false };
     }
+  },
+
+  async addUserData(customFields: any): Promise<any> {
+    const rawRequest = {
+      fieldsRequest: {
+        app_token: InngageProperties.appToken,
+        identifier: InngageProperties.identifier,
+        custom_field: customFields ?? {}
+      }
+    };
+
+    const request = addUserDataRequest(rawRequest);
+    try {
+      return await addUserDataApi(request);
+    } catch (e) {
+      console.error(e);
+    }
   }
 }
 

package/src/components/Inapp.tsx

@@ -10,11 +10,10 @@ import {
   ImageBackground,
   Linking,
   Dimensions,
-  Button,
 } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import AsyncStorage from '@react-native-async-storage/async-storage';
-// import Carousel, { Pagination } from 'react-native-snap-carousel';
+import Carousel, { Pagination } from 'react-native-snap-carousel';
 
 import { showAlertLink, isEmpty } from "../utils";
 import { linkInApp } from "../notificationsListener";
@@ -22,7 +21,6 @@ import { styleInapp, styleItem } from './styles';
 
 const SLIDER_WIDTH = Dimensions.get('window').width;
 const SLIDER_HEIGHT = Dimensions.get('window').height;
-
 const ITEM_WIDTH = Math.round(SLIDER_WIDTH * 0.8);
 const ITEM_HEIGHT = Math.round(SLIDER_HEIGHT * 0.8);
 
@@ -43,15 +41,11 @@ export const Inapp = (props: InappProps) => {
   const [visible, setVisible] = useState(true)
   const [bgImage, setbgImage] = useState<any>(undefined) // TODO, need a placeholder
 
-  // const CarouselRef = useRef<Carousel<any>>(null);
+  const CarouselRef = useRef<Carousel<any>>(null);
   const ScrollRef1 = useRef<ScrollView>(null);
   const ScrollRef2 = useRef<ScrollView>(null);
   const ScrollRef3 = useRef<ScrollView>(null);
 
-  // const inAppData = JSON.parse(data[0].data.additional_data)
-  // const styles = styleInapp({ inAppData, SLIDER_WIDTH })
-  // const itemStyles = styleItem({ inAppData })
-
 
   interface _renderItemProps {
     item: any;
@@ -70,7 +64,7 @@ export const Inapp = (props: InappProps) => {
       }
     }
 
-    // const itemStyles = styleItem({ msg, checkBG })
+    const itemStyles = styleItem({ msg, checkBG })
 
     const chooseRef = () => {
       if (index == 0) {
@@ -85,46 +79,46 @@ export const Inapp = (props: InappProps) => {
     }
 
 
-    // const pagination = ref => {
-    //   return (
-    //     <Pagination
-    //       dotsLength={arrayImgs.length}
-    //       activeDotIndex={indIm}
-    //       containerStyle={{ height: 2, padding: 0, margin: 0 }}
-    //       renderDots={(activeIndex, total, context) => {
-    //         let dots: any = []
-    //         var size = 0
-    //         for (let i = 0; i < total; i++) {
-    //           if (activeIndex == i) {
-    //             size = 13
-    //           } else {
-    //             size = 8
-    //           }
-    //           dots.push(
-    //             <TouchableOpacity
-    //               onPress={() => {
-    //                 ref.current.scrollTo({ x: i * 220, y: 0, animated: true })
-    //                 if (i * 220 === 0) {
-    //                   setIndImg(0)
-    //                 } else if (i * 220 === 220) {
-    //                   setIndImg(1)
-    //                 } else if (i * 220 === 440) {
-    //                   setIndImg(2)
-    //                 }
-    //               }}
-    //               key={i.toString()}
-    //             // style={[itemStyles.dot, { width: size, height: size }]}
-    //             />
-    //           )
-    //         }
-    //         return (
-    //           dots
-    //         )
-    //       }
-    //       }
-    //     />
-    //   );
-    // }
+    const pagination = ref => {
+      return (
+        <Pagination
+          dotsLength={arrayImgs.length}
+          activeDotIndex={indIm}
+          containerStyle={{ height: 2, padding: 0, margin: 0 }}
+          renderDots={(activeIndex, total, context) => {
+            let dots: any = []
+            var size = 0
+            for (let i = 0; i < total; i++) {
+              if (activeIndex == i) {
+                size = 13
+              } else {
+                size = 8
+              }
+              dots.push(
+                <TouchableOpacity
+                  onPress={() => {
+                    ref.current.scrollTo({ x: i * 220, y: 0, animated: true })
+                    if (i * 220 === 0) {
+                      setIndImg(0)
+                    } else if (i * 220 === 220) {
+                      setIndImg(1)
+                    } else if (i * 220 === 440) {
+                      setIndImg(2)
+                    }
+                  }}
+                  key={i.toString()}
+                  style={[itemStyles.dot, { width: size, height: size }]}
+                />
+              )
+            }
+            return (
+              dots
+            )
+          }
+          }
+        />
+      );
+    }
 
     const handleButton = (title: string, body: string, url: string, type: string) => {
       if (type === '' || url === '') {
@@ -171,11 +165,10 @@ export const Inapp = (props: InappProps) => {
         )
       }
     }
-
-    // return (
-    // <View style={[itemStyles.body]}>
-    //   <Text style={[itemStyles.title, props.titleStyle]}>{msg.title}</Text>
-    {/* <ScrollView
+    return (
+      <View style={[itemStyles.body]}>
+        <Text style={[itemStyles.title, props.titleStyle]}>{msg.title}</Text>
+        <ScrollView
           ref={chooseRef()}
           horizontal
           snapToInterval={220}
@@ -207,26 +200,22 @@ export const Inapp = (props: InappProps) => {
           msg.rich_content.carousel == true ?
             pagination(chooseRef()) : null
 
-        } */}
-    /* <Text style={[itemStyles.bodyText, props.bodyStyle]}>{msg.body}</Text>
-    <View style={{ flexDirection: "row", marginBottom: 0, justifyContent: 'center' }}>
-      {msg.btn_left_txt != null
-        ? <TouchableOpacity onPress={() => handleButton(msg.title, msg.body, msg.btn_left_action_link, msg.btn_left_action_type)} style={[itemStyles.btn_left, props.buttonLeftStyle]}>
-          <View>
-            <Text style={[itemStyles.btn_left_title, props.buttonTitleLeftStyle]}>{msg.btn_left_txt}</Text>
-          </View>
-        </TouchableOpacity>
-        : null}
-      {msg.btn_left_txt != null
-        ? <TouchableOpacity onPress={() => handleButton(msg.title, msg.body, msg.btn_right_action_link, msg.btn_right_action_type)} style={[itemStyles.btn_right, props.buttonRightStyle]}>
-          <View>
-            <Text style={[itemStyles.btn_right_title, props.buttonTitleRightStyle]}>{msg.btn_right_txt}</Text>
-          </View>
-        </TouchableOpacity>
-        : null}
-    </View> */
-    // </View>
-    // );
+        }
+        <Text style={[itemStyles.bodyText, props.bodyStyle]}>{msg.body}</Text>
+        <View style={{ flexDirection: "row", marginBottom: 0, justifyContent: 'center' }}>
+          <TouchableOpacity onPress={() => handleButton(msg.title, msg.body, msg.btn_left_action_link, msg.btn_left_action_type)} style={[itemStyles.btn_left, props.buttonLeftStyle]}>
+            <View>
+              <Text style={[itemStyles.btn_left_title, props.buttonTitleLeftStyle]}>{msg.btn_left_txt}</Text>
+            </View>
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handleButton(msg.title, msg.body, msg.btn_right_action_link, msg.btn_right_action_type)} style={[itemStyles.btn_right, props.buttonRightStyle]}>
+            <View>
+              <Text style={[itemStyles.btn_right_title, props.buttonTitleRightStyle]}>{msg.btn_right_txt}</Text>
+            </View>
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
   }
 
   useEffect(() => {
@@ -279,65 +268,26 @@ export const Inapp = (props: InappProps) => {
   }
 
   if (data.length > 0) {
-    const inAppData = JSON.parse(data[0].data.additional_data)
-    const styles = styleInapp({ inAppData, SLIDER_WIDTH })
-    const itemStyles = styleItem({ inAppData })
-
-    const { width: screenWidth } = Dimensions.get('window')
-
-    const sliderWidth = screenWidth;
-    const itemWidth = screenWidth * 8;
-
-    const _renderItemCarrousel = ({ item }) => {
-      <Image style={itemStyles.img} source={{ uri: inAppData.rich_content[item] }}></Image>
-    }
-
-    console.log(inAppData.rich_content)
     return (
-      <View style={styles.centeredView}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Modal
           animationType='slide'
           visible={visible}
           transparent={true}
-        >
-          <View style={styles.centeredView}>
-            <View style={styles.styleContainer}>
-              {/* <Carousel
-                layout='default'
-                data={data}
-                renderItem={_renderItemCarrousel}
-                sliderWidth={sliderWidth}
-                itemWidth={itemWidth}
-              /> */}
-              <Text style={itemStyles.title}>{inAppData.title}</Text>
-              <Text style={itemStyles.bodyText}>{inAppData.body}</Text>
-              <View style={itemStyles.containerButtons}>
-                <TouchableOpacity
-                  onPress={() => { }}
-                  style={[itemStyles.btn_left, props.buttonLeftStyle]}>
-                  <View>
-                    <Text style={[itemStyles.btn_left_title, props.buttonTitleLeftStyle]}>{inAppData.btn_left_txt}</Text>
-                  </View>
-                </TouchableOpacity>
-                <TouchableOpacity onPress={() => { }} style={[itemStyles.btn_right, props.buttonRightStyle]}>
-                  <View>
-                    <Text style={[itemStyles.btn_right_title, props.buttonTitleRightStyle]}>{inAppData.btn_right_txt}</Text>
-                  </View>
-                </TouchableOpacity>
-              </View>
-
-              {/* <ImageBackground style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }} resizeMode='cover' imageStyle={{ borderRadius: 10, alignSelf: 'stretch', height: 480 }} source={bgImage}> */}
-              <TouchableHighlight
-                onPress={() => handleClose()}
-                underlayColor='#cccccc'
-                style={styles.closeButton}
-              >
-                <Text style={{ fontWeight: 'bold', color: '#ffffff' }}>
-                  X
-                </Text>
-              </TouchableHighlight>
-
-              {/* <Carousel
+          style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue' }}
+        ><View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+            <View style={[styles.styleContainer, props.styleContainer]}>
+              <ImageBackground style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }} resizeMode='cover' imageStyle={{ borderRadius: 10, alignSelf: 'stretch', height: 480 }} source={bgImage}>
+                <TouchableHighlight
+                  onPress={() => handleClose()}
+                  underlayColor='#cccccc'
+                  style={styles.closeButton}
+                >
+                  <Text style={{ fontWeight: 'bold', color: '#ffffff' }}>
+                    X
+                  </Text>
+                </TouchableHighlight>
+                <Carousel
                   vertical
                   ref={CarouselRef}
                   layout={'default'}
@@ -359,16 +309,16 @@ export const Inapp = (props: InappProps) => {
                   renderItem={({ item, index }) => _renderItem({ item, index })}
                   sliderHeight={500}
                   itemHeight={500}
-                /> */}
-              {/* </ImageBackground> */}
+                />
+              </ImageBackground>
             </View>
           </View>
         </Modal>
-      </View >
+      </View>
     );
   } else {
     return null
   }
 };
 
-
+const styles = styleInapp({ SLIDER_WIDTH })

package/src/components/styles.ts

@@ -2,30 +2,24 @@ import { StyleSheet } from "react-native";
 
 
 interface styleInappProps {
-  inAppData: any;
   SLIDER_WIDTH: number;
 }
-export const styleInapp = ({ inAppData, SLIDER_WIDTH }: styleInappProps) => StyleSheet.create({
-  centeredView: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
+export const styleInapp = ({ SLIDER_WIDTH }: styleInappProps) => StyleSheet.create({
   carouselContainer: {
     width: "100%",
     marginTop: 10,
   },
   styleContainer: {
-    alignItems: 'center',
-    backgroundColor: inAppData.background_color || 'white',
+    backgroundColor: 'white',
     elevation: 10,
     borderRadius: 10,
     width: SLIDER_WIDTH * 0.8,
+    height: 480,
+  },
+  counter: {
+    alignSelf: 'center',
+    marginVertical: 10
   },
-  // counter: {
-  //   alignSelf: 'center',
-  //   marginVertical: 10
-  // },
   closeButton: {
     position: 'absolute',
     alignSelf: 'flex-end',
@@ -42,66 +36,62 @@ export const styleInapp = ({ inAppData, SLIDER_WIDTH }: styleInappProps) => Styl
 });
 
 interface styleItemProps {
-  inAppData: any,
+  msg: any,
+  checkBG: Function,
 }
-export const styleItem = ({ inAppData }: styleItemProps) => StyleSheet.create({
+export const styleItem = ({ msg, checkBG }: styleItemProps) => StyleSheet.create({
   btn_left: {
-    width: inAppData.btn_right != '' ? '50%' : '100%',
+    backgroundColor: msg.btn_left_bg_color || "#FFFFFF",
+    height: 40,
+    width: 100,
     alignItems: 'center',
-    backgroundColor: inAppData.btn_left_bg_color || '#DDDDDD',
-    padding: 10,
-    elevation: 10,
-    borderRadius: 5,
+    justifyContent: 'center',
+    marginRight: 20,
+    marginLeft: 10,
+    flex: 1
   },
   btn_right: {
-    width: inAppData.btn_left != '' ? '50%' : '100%',
+    backgroundColor: msg.btn_right_bg_color || "#FFFFFF",
+    height: 40,
+    width: 100,
     alignItems: 'center',
-    backgroundColor: inAppData.btn_right_bg_color || '#DDDDDD',
-    padding: 10,
-    elevation: 10,
-    borderRadius: 5,
+    justifyContent: 'center',
+    marginRight: 10,
+    flex: 1
   },
   btn_left_title: {
-    color: inAppData.btn_left_txt_color || "#000000"
+    color: msg.btn_left_txt_color || "#000000"
   },
   btn_right_title: {
-    color: inAppData.btn_right_txt_color || "#000000"
+    color: msg.btn_right_txt_color || "#000000"
   },
   body: {
-    backgroundColor: inAppData.background_color,
+    backgroundColor: checkBG(),
     width: '100%',
+    height: 450,
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
   bodyText: {
-    color: inAppData.body_font_color || "#000000",
+    color: msg.body_font_color || "#000000",
     textAlign: 'justify',
     marginBottom: 10,
     fontSize: 15,
     marginHorizontal: 10
   },
   title: {
-    color: inAppData.title_font_color || "#000000",
+    color: msg.title_font_color || "#000000",
     fontWeight: "bold",
     fontSize: 18,
-    marginTop: 10
+    marginTop: 40
   },
   dot: {
-    backgroundColor: inAppData.dot_color || "#FFFFFF",
+    backgroundColor: msg.dot_color || "#FFFFFF",
     borderRadius: 100,
     width: 8,
     height: 8,
     marginLeft: 5,
     elevation: 5,
-  },
-  containerButtons: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    margin: 10
-  },
-  img: {
-    width: '100%',
-    height: 150
   }
-});
+});

package/src/models/inngage_properties.ts

@@ -0,0 +1,8 @@
+export class InngageProperties {
+    static identifier: string = '';
+    static appToken: string = '';
+    static phoneNumber: string = '';
+    static email: string = '';
+    static customFields: any = {};
+    static blockDeepLink: boolean = false;
+}

package/src/notificationsListener.ts

@@ -30,7 +30,7 @@ export const linkInApp = (link: string) => {
 const openLinkByType = (type: string, url: string) => {
   const linkTypeHandlers: Record<string, () => void> = {
     deep: () => Linking.openURL(url),
-    inapp: () => linkInApp(url),
+    // inapp: () => linkInApp(url),
   };
 
   const handler = linkTypeHandlers[type];

package/src/services/inngage.ts

@@ -15,3 +15,8 @@ export const eventsApi = (request, dev = false) => {
     console.log('eventsApi', request)
   return fetchClient('POST', request, '/events/newEvent/', !!dev)
 }
+export const addUserDataApi = (request, dev = false) => {
+  if (dev)
+    console.log('addUserData', request)
+  return fetchClient('POST', request, '/subscription/addCustomField', !!dev)
+}

package/src/utils.ts

@@ -44,6 +44,10 @@ 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)) {

package/tsconfig.json

@@ -11,7 +11,10 @@
     "skipLibCheck": true,
     "moduleResolution": "node",
     "noImplicitAny": false,
-    "lib": [ "es2015" ]
+    "lib": [
+      "dom",
+      "es2015"
+    ]
   },
   "include": [
     "**/*"
@@ -21,4 +24,4 @@
     "**/__tests__/*",
     "build"
   ]
-}
+}

package/src/index.d.ts

@@ -1,53 +0,0 @@
-import React from 'react';
-import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
-
-interface notificationsListenerProps {
-    appToken: string;
-    dev?: boolean;
-    enableAlert: boolean;
-    onNotificationOpenedApp?: any;
-}
-
-interface SubscriptionProps {
-    appToken: string;
-    enableAlert: boolean;
-    dev?: boolean;
-    friendlyIdentifier?: string;
-    customFields?: any;
-    customData?: any;
-    phoneNumber?: string;
-    email?: string;
-}
-
-interface SendEventProps {
-    appToken: string;
-    eventName: string;
-    identifier?: string;
-    registration?: string;
-    conversionEvent?: boolean;
-    conversionValue?: number;
-    conversionNotId?: string;
-    eventValues?: any;
-}
-
-declare const Inngage: {
-    RegisterNotificationListener: (props: notificationsListenerProps) => Promise<any>;
-    Subscribe: (props: SubscriptionProps) => Promise<any>;
-    SendEvent: (props: SendEventProps) => Promise<any>;
-};
-
-interface InappProps {
-    mediaStyle?: StyleProp<ImageStyle>;
-    titleStyle?: StyleProp<TextStyle>;
-    bodyStyle?: StyleProp<TextStyle>;
-    buttonLeftStyle?: StyleProp<ViewStyle>;
-    buttonRightStyle?: StyleProp<ViewStyle>;
-    buttonTitleLeftStyle?: StyleProp<TextStyle>;
-    buttonTitleRightStyle?: StyleProp<TextStyle>;
-    styleContainer?: StyleProp<ViewStyle>;
-    onClose?: 'clear';
-}
-
-export const Inapp: React.FC<InappProps>;
-
-export default Inngage;