@inngageregistry/inngage-react 2.3.3 → 3.0.2

package/.editorconfig

@@ -1,6 +1,6 @@
-[*]
-end_of_line = lf
-insert_final_newline = true
-charset = utf-8
-indent_style = space
-indent_size = 2
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "@inngageregistry/inngage-react",
-  "version": "2.3.3",
+  "version": "3.0.2",
   "description": "Inngage react integration",
-  "main": "index.js",
+  "main": "src/index.ts",
+  "types": "src/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx tsc"
   },
-  "author": "LAP - BrunoBNascimento",
+  "author": "Inngage Developer",
   "license": "ISC",
   "repository": {
     "type": "git",
@@ -16,5 +18,25 @@
     "url": "https://github.com/inngage/inngage-react/issues"
   },
   "homepage": "https://github.com/inngage/inngage-react#readme",
-  "dependencies": {}
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.16.1",
+    "@react-native-community/push-notification-ios": "^1.10.1",
+    "@react-native-firebase/app": "^14.11.0",
+    "@react-native-firebase/messaging": "^14.11.0",
+    "react-native-advertising-id": "^1.0.11",
+    "react-native-device-info": "^8.4.9",
+    "react-native-inappbrowser-reborn": "^3.6.3",
+    "react-native-localize": "^2.2.2",
+    "react-native-push-notification": "^8.1.1",
+    "react-native-snap-carousel": "^3.9.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^27.4.0",
+    "@types/react": "^17.0.38",
+    "@types/react-native": "^0.66.15",
+    "@types/react-native-push-notification": "^8.1.0",
+    "@types/react-native-snap-carousel": "^3.8.5",
+    "@types/react-test-renderer": "^17.0.1",
+    "typescript": "^4.5.5"
+  }
 }

package/src/Inngage.ts

@@ -0,0 +1,193 @@
+import {
+  Platform,
+  LogBox,
+  AppRegistry,
+} from "react-native";
+
+import { firebase } from '@react-native-firebase/messaging';
+import DeviceInfo from "react-native-device-info";
+import * as RNLocalize from "react-native-localize";
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import { formatDate, subscriptionRequestAdapter } from "./utils";
+import notificationsListener, { notificationsListenerProps } from "./notificationsListener";
+import { subscriptionApi, eventsApi } from "./services/inngage";
+import RNAdvertisingId from 'react-native-advertising-id';
+
+// --- handle background message ------/
+const backgroundNotificationHandler = async remoteMessage => {
+  var messageArray: any = [];
+  console.log("Remote message:", JSON.stringify(remoteMessage));
+
+  console.log('Called backgroundNotificationHandler');
+
+  const currentMessages = await AsyncStorage.getItem('messages');
+  if (currentMessages !== null) {
+    messageArray = JSON.parse(currentMessages);
+  }
+  messageArray.push(remoteMessage);
+
+  await AsyncStorage.setItem('messages', JSON.stringify(messageArray));
+};
+
+// --- Get Firebase Access ------/
+const getFirebaseAccess = () => {
+  let firebaseToken = 'W7SAl94Jk6l3w95W9wCgmv3zZ99V5FReNUytdgJUFUvpvZoqXf72'
+  return new Promise(async (resolve) => {
+    DeviceInfo.isEmulator().then(isEmulator => {
+      if (isEmulator && Platform.OS === "ios") {
+        return resolve(firebaseToken)
+      }
+    })
+    try {
+      if (!firebase.messaging().isDeviceRegisteredForRemoteMessages)
+        await firebase.messaging().registerDeviceForRemoteMessages();
+
+      const permission = await firebase.messaging().hasPermission();
+      if (permission === firebase.messaging.AuthorizationStatus.NOT_DETERMINED) {
+        try {
+          await firebase.messaging().requestPermission();
+        } catch (e) {
+          console.error(e)
+          return resolve(firebaseToken);
+        }
+      }
+      try {
+        firebaseToken = await firebase.messaging().getToken();
+      } catch (error) {
+        console.error(error)
+        return resolve(firebaseToken)
+      }
+      return resolve(firebaseToken)
+    } catch (err) {
+      console.error(err)
+      return resolve(firebaseToken)
+    }
+  });
+};
+
+interface SubscriptionProps {
+  appToken: string,
+  enableAlert: boolean,
+  authKey: string,
+  dev?: boolean,
+  friendlyIdentifier?: string,
+  customFields?: any,
+  customData?: any,
+  phoneNumber?: 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
+    }
+  },
+  authKey: string
+}
+const Inngage = {
+  // ------------  Register Notification Listener ------------//
+  RegisterNotificationListener: async (props: notificationsListenerProps) => {
+
+    try {
+      LogBox.ignoreLogs(['registerHeadlessTask'])
+    } catch (e) { }
+    try {
+      console.ignoredYellowBox = ['registerHeadlessTask'];
+    } catch (e) { }
+    try {
+      AppRegistry.registerHeadlessTask('ReactNativeFirebaseMessagingHeadlessTask', () => backgroundNotificationHandler)
+      notificationsListener({ ...props });
+    } catch (e) {
+      console.error(e);
+      return { subscribed: false };
+    }
+  },
+  Subscribe: async ({
+    appToken,
+    dev,
+    friendlyIdentifier,
+    customFields,
+    customData,
+    phoneNumber,
+    authKey
+  }: SubscriptionProps) => {
+    try {
+      const respToken = await getFirebaseAccess()
+
+      const locales = RNLocalize.getLocales();
+
+      const os_language = locales && locales.length ? locales[0].languageCode : ''
+      const device_manufacturer = await DeviceInfo.getManufacturer();
+      const installTime = await DeviceInfo.getFirstInstallTime();
+      const lastUpdateTime = await DeviceInfo.getLastUpdateTime();
+      const app_installed_in = formatDate(installTime);
+      const app_updated_in = formatDate(lastUpdateTime);
+      const androidId = DeviceInfo.getAndroidId();
+      var advertiserId = "Unknown"
+      var idFa = "Unknown"
+      try{
+        const rnAdvertisingId  = await RNAdvertisingId.getAdvertisingId();
+         advertiserId = rnAdvertisingId.advertisingId;
+         idFa = rnAdvertisingId.advertisingId;
+      }catch(e){
+
+      }
+
+
+      const rawRequest = {
+        registerSubscriberRequest: {
+          app_token: appToken,
+          identifier: friendlyIdentifier,
+          registration: respToken,
+          phone_Number: phoneNumber,
+          platform: DeviceInfo.getSystemName(),
+          sdk: DeviceInfo.getBuildNumber(),
+          device_model: DeviceInfo.getModel(),
+          device_manufacturer,
+          os_locale: RNLocalize.getCountry(),
+          os_language,
+          os_version: DeviceInfo.getReadableVersion(),
+          app_version: DeviceInfo.getBuildNumber(),
+          app_installed_in,
+          app_updated_in,
+          uuid: DeviceInfo.getUniqueId(),
+          advertiser_id:advertiserId,
+          android_id:androidId,
+          idfa:idFa,
+          authKey,
+        }
+      };
+
+      const request = subscriptionRequestAdapter(rawRequest, customData, customFields)
+      const subscribe = await subscriptionApi(request, dev);
+      console.log(await subscribe.json())
+      return subscribe;
+    } catch (e) {
+      console.error(e);
+      return { subscribed: false };
+    }
+  },
+  SendEvent: async (props: SendEventProps) => {
+    const { authKey, newEventRequest } = props
+    const rawRequest = {
+      registerSubscriberRequest: {
+        authKey
+      },
+      newEventRequest
+    }
+    const subscribe = await eventsApi(rawRequest);
+    return subscribe
+  }
+}
+
+export default Inngage;

package/src/components/Inapp.tsx

@@ -0,0 +1,318 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  Modal,
+  View,
+  Text,
+  TouchableHighlight,
+  TouchableOpacity,
+  Image,
+  ScrollView,
+  ImageBackground,
+  Linking,
+  Dimensions,
+} 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 { showAlertLink, isEmpty } from "../utils";
+import { linkInApp } from "../notificationsListener";
+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);
+
+export interface InappProps {
+  mediaStyle?: any;
+  titleStyle?: any;
+  bodyStyle?: any;
+  buttonLeftStyle?: any;
+  buttonRightStyle?: any;
+  buttonTitleLeftStyle?: any;
+  buttonTitleRightStyle?: any;
+  styleContainer?: any;
+  onClose?: 'clear';
+}
+export const Inapp = (props: InappProps) => {
+  const [data, setData] = useState<any>([])
+  const [indIm, setIndImg] = useState(0)
+  const [visible, setVisible] = useState(true)
+  const [bgImage, setbgImage] = useState<any>(undefined) // TODO, need a placeholder
+
+  const CarouselRef = useRef<Carousel<any>>(null);
+  const ScrollRef1 = useRef<ScrollView>(null);
+  const ScrollRef2 = useRef<ScrollView>(null);
+  const ScrollRef3 = useRef<ScrollView>(null);
+
+
+  interface _renderItemProps {
+    item: any;
+    index: number;
+  }
+  const _renderItem = ({ item, index }: _renderItemProps) => {
+    let msg = JSON.parse(item.data.additional_data)
+    let arrayImgs: any = []
+    let indImg = 0
+
+    const checkBG = () => {
+      if (msg.background_img != '') {
+        return null
+      } else {
+        return msg.background_color
+      }
+    }
+
+    const itemStyles = styleItem({msg, checkBG})
+
+    const chooseRef = () => {
+      if (index == 0) {
+        return ScrollRef1
+      }
+      if (index == 1) {
+        return ScrollRef2
+      }
+      if (index == 2) {
+        return ScrollRef3
+      }
+    }
+
+
+    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 === '') {
+        return
+      }
+      console.log(title, body, url, type)
+      const openLinkByType = (type, url) => (type === 'deep' ? Linking.openURL(url) : linkInApp(url))
+
+      return Linking.canOpenURL(url).then((supported) => {
+        if (supported) {
+          showAlertLink(
+            title,
+            body,
+            `${DeviceInfo.getApplicationName()}`,
+            `Acessar ${url} ?`,
+          ).then(() => { supported && openLinkByType(type, url) })
+        }
+      }).catch(console.error)
+    }
+
+    const imgCarosel = () => {
+      if (msg.rich_content.carousel == true) {
+        if (msg.rich_content.img1 != '') {
+          arrayImgs.push({ url: msg.rich_content.img1 })
+        }
+        if (msg.rich_content.img2 != '') {
+          arrayImgs.push({ url: msg.rich_content.img2 })
+        }
+        if (msg.rich_content.img3 != '') {
+          arrayImgs.push({ url: msg.rich_content.img3 })
+        }
+        let arrayElements = arrayImgs.map((item, index) => (
+          <Image key={index.toString()} style={[props.mediaStyle, { width: 200, height: 200, marginRight: 10 }]} source={{ uri: item.url }} />
+        ));
+        return arrayElements
+      } else if (arrayImgs.length <= 0) {
+        return (
+          <Image style={[props.mediaStyle, { width: 200, height: 200 }]} source={{ uri: item.data.picture }} />
+        )
+      }
+      else {
+        return (
+          <Image style={[props.mediaStyle, { width: 200, height: 200 }]} source={{ uri: item.data.picture }} />
+        )
+      }
+    }
+    return (
+      <View style={[itemStyles.body]}>
+        <Text style={[itemStyles.title, props.titleStyle]}>{msg.title}</Text>
+        <ScrollView
+          ref={chooseRef()}
+          horizontal
+          snapToInterval={220}
+          decelerationRate="fast"
+          showsHorizontalScrollIndicator={false}
+          style={{ width: 200, height: 240 }}
+          contentContainerStyle={{ alignItems: 'center', justifyContent: 'center' }}
+          onMomentumScrollEnd={(e) => {
+            if (Math.round(e.nativeEvent.contentOffset.x) === 0
+            ) {
+              indImg = 0
+              setIndImg(indImg)
+            }
+            if (Math.round(e.nativeEvent.contentOffset.x) === 220
+            ) {
+              indImg = 1
+              setIndImg(indImg)
+            }
+            if (Math.round(e.nativeEvent.contentOffset.x) === 430
+            ) {
+              indImg = 2
+              setIndImg(indImg)
+            }
+          }}
+        >
+          {imgCarosel()}
+        </ScrollView>
+        {
+          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>
+    );
+  }
+
+  useEffect(() => {
+    onLoad();
+  }, [])
+
+  const onLoad = async () => {
+    let temp: any = []
+    const messages = JSON.parse(await AsyncStorage.getItem('inngage') ?? '[]')
+    
+    console.log("Messages saved on AsyncStorage: ", JSON.stringify(messages))
+    
+    if (messages !== null) {
+      messages.forEach((el) => {
+        if (!isEmpty(el)) {
+          temp.push(el)
+        }
+      })
+
+      let msg: any = {}
+      if (temp.length > 0 && temp[0]?.data?.additional_data) {
+        msg = JSON.parse(temp[0].data.additional_data)
+      }
+
+      if (msg.background_img != '') {
+        setbgImage({ uri: msg.background_img })
+      } else {
+        setbgImage(undefined)
+      }
+      setData(temp)
+    }
+  }
+
+  const handleClose = async () => {
+    if (props.onClose) {
+      if (props.onClose.toLowerCase() === 'clear') {
+        await AsyncStorage.removeItem('inngage');
+      }
+    }
+    setVisible(false)
+  }
+
+  const handleBg = index => {
+    let msg = JSON.parse(data[index].data.additional_data)
+    if (msg.background_img != '') {
+      setbgImage({ uri: msg.background_img })
+    } else {
+      setbgImage(undefined)
+    }
+  }
+
+  if (data.length > 0) {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <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
+                  vertical
+                  ref={CarouselRef}
+                  layout={'default'}
+                  layoutCardOffset={10}
+                  data={data}
+                  inactiveSlideOpacity={0}
+                  containerCustomStyle={styles.carouselContainer}
+                  contentContainerCustomStyle={{ justifyContent: 'center' }}
+                  inactiveSlideShift={0}
+                  onSnapToItem={(index) => {
+                    handleBg(index)
+                  }}
+                  renderItem={({ item, index }) => _renderItem({ item, index })}
+                  sliderHeight={500}
+                  itemHeight={500}
+                />
+              </ImageBackground>
+            </View>
+          </View>
+        </Modal>
+      </View>
+    );
+  } else {
+    return null
+  }
+};
+
+const styles = styleInapp({SLIDER_WIDTH})

package/src/components/styles.ts

@@ -0,0 +1,97 @@
+import { 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
+  },
+  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
+  },
+  btn_left_title: {
+    color: msg.btn_left_txt_color || "#000000"
+  },
+  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,
+  }
+});

package/src/index.d.ts

@@ -0,0 +1 @@
+// not implemented

package/src/index.ts

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