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

package/package.json

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

package/src/Inngage.ts

@@ -71,27 +71,11 @@ interface SubscriptionProps {
   email?: string
 }
 
-interface SendEventProps {
-  newEventRequest: {
-    app_token: string,
-    identifier: string,
-    event_name: string,
-    conversion_event: boolean,
-    conversion_value: number,
-    conversion_notid: string,
-    event_values: {
-      nome_promo: string,
-      categoria: string,
-      foto_promo: string,
-      redirect_link: string
-    }
-  },
-}
-
 interface SendEventProps {
   appToken: string,
-  identifier: string,
   eventName: string,
+  identifier?: string,
+  registration?: string,
   conversionEvent?: boolean,
   conversionValue?: number,
   conversionNotId?: string,
@@ -164,8 +148,9 @@ const Inngage = {
 
   SendEvent: async ({
     appToken,
-    identifier,
     eventName,
+    identifier,
+    registration,
     conversionEvent,
     conversionValue,
     conversionNotId,
@@ -176,6 +161,7 @@ const Inngage = {
       newEventRequest: {
         app_token: appToken,
         identifier: identifier,
+        registration: registration,
         event_name: eventName,
         conversion_event: conversionEvent ?? false,
         conversion_value: conversionValue ?? 0,

package/src/components/Inapp.tsx

@@ -10,10 +10,11 @@ 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";
@@ -21,6 +22,7 @@ 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);
 
@@ -41,11 +43,15 @@ 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;
@@ -64,7 +70,7 @@ export const Inapp = (props: InappProps) => {
       }
     }
 
-    const itemStyles = styleItem({ msg, checkBG })
+    // const itemStyles = styleItem({ msg, checkBG })
 
     const chooseRef = () => {
       if (index == 0) {
@@ -79,46 +85,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 === '') {
@@ -165,10 +171,11 @@ 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}
@@ -200,22 +207,26 @@ 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' }}>
-          <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>
-    );
+        } */}
+    /* <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>
+    // );
   }
 
   useEffect(() => {
@@ -268,26 +279,65 @@ 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={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <View style={styles.centeredView}>
         <Modal
           animationType='slide'
           visible={visible}
           transparent={true}
-          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
+        >
+          <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
                   vertical
                   ref={CarouselRef}
                   layout={'default'}
@@ -309,16 +359,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,24 +2,30 @@ import { StyleSheet } from "react-native";
 
 
 interface styleInappProps {
+  inAppData: any;
   SLIDER_WIDTH: number;
 }
-export const styleInapp = ({SLIDER_WIDTH}: styleInappProps) => StyleSheet.create({
+export const styleInapp = ({ inAppData, SLIDER_WIDTH }: styleInappProps) => StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
   carouselContainer: {
     width: "100%",
     marginTop: 10,
   },
   styleContainer: {
-    backgroundColor: 'white',
+    alignItems: 'center',
+    backgroundColor: inAppData.background_color || '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',
@@ -36,62 +42,66 @@ export const styleInapp = ({SLIDER_WIDTH}: styleInappProps) => StyleSheet.create
 });
 
 interface styleItemProps {
-  msg: any,
-  checkBG: Function,
+  inAppData: any,
 }
-export const styleItem = ({msg, checkBG}: styleItemProps) => StyleSheet.create({
+export const styleItem = ({ inAppData }: styleItemProps) => StyleSheet.create({
   btn_left: {
-    backgroundColor: msg.btn_left_bg_color || "#FFFFFF",
-    height: 40,
-    width: 100,
+    width: inAppData.btn_right != '' ? '50%' : '100%',
     alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 20,
-    marginLeft: 10,
-    flex: 1
+    backgroundColor: inAppData.btn_left_bg_color || '#DDDDDD',
+    padding: 10,
+    elevation: 10,
+    borderRadius: 5,
   },
   btn_right: {
-    backgroundColor: msg.btn_right_bg_color || "#FFFFFF",
-    height: 40,
-    width: 100,
+    width: inAppData.btn_left != '' ? '50%' : '100%',
     alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 10,
-    flex: 1
+    backgroundColor: inAppData.btn_right_bg_color || '#DDDDDD',
+    padding: 10,
+    elevation: 10,
+    borderRadius: 5,
   },
   btn_left_title: {
-    color: msg.btn_left_txt_color || "#000000"
+    color: inAppData.btn_left_txt_color || "#000000"
   },
   btn_right_title: {
-    color: msg.btn_right_txt_color || "#000000"
+    color: inAppData.btn_right_txt_color || "#000000"
   },
   body: {
-    backgroundColor: checkBG(),
+    backgroundColor: inAppData.background_color,
     width: '100%',
-    height: 450,
     alignSelf: 'center',
     alignItems: 'center',
     justifyContent: 'center',
   },
   bodyText: {
-    color: msg.body_font_color || "#000000",
+    color: inAppData.body_font_color || "#000000",
     textAlign: 'justify',
     marginBottom: 10,
     fontSize: 15,
     marginHorizontal: 10
   },
   title: {
-    color: msg.title_font_color || "#000000",
+    color: inAppData.title_font_color || "#000000",
     fontWeight: "bold",
     fontSize: 18,
-    marginTop: 40
+    marginTop: 10
   },
   dot: {
-    backgroundColor: msg.dot_color || "#FFFFFF",
+    backgroundColor: inAppData.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/index.d.ts

@@ -1,8 +1,11 @@
+import React from 'react';
+import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+
 interface notificationsListenerProps {
-    appToken: string,
-    dev?: boolean,
-    enableAlert: boolean,
-    onNotificationOpenedApp?: any,
+    appToken: string;
+    dev?: boolean;
+    enableAlert: boolean;
+    onNotificationOpenedApp?: any;
 }
 
 interface SubscriptionProps {
@@ -17,13 +20,14 @@ interface SubscriptionProps {
 }
 
 interface SendEventProps {
-    appToken: string,
-    identifier: string,
-    eventName: string,
-    conversionEvent?: boolean,
-    conversionValue?: number,
-    conversionNotId?: string,
-    eventValues?: any
+    appToken: string;
+    eventName: string;
+    identifier?: string;
+    registration?: string;
+    conversionEvent?: boolean;
+    conversionValue?: number;
+    conversionNotId?: string;
+    eventValues?: any;
 }
 
 declare const Inngage: {
@@ -32,4 +36,18 @@ declare const Inngage: {
     SendEvent: (props: SendEventProps) => Promise<any>;
 };
 
-export default Inngage;
+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;