react-native-mobile-chat 0.1.0

package/src/presentation/component/AppChatComponent.tsx

@@ -0,0 +1,154 @@
+import React, { PureComponent, ReactNode, Fragment } from 'react';
+import { ActivityIndicator, StatusBar, View, Dimensions, Text, TouchableOpacity, Image, PermissionsAndroid, Platform } from 'react-native';
+import { AppChatStatic } from '../../data/static';
+import { initAppChat } from '../../presentation/initialization';
+import WebView, { WebViewMessageEvent } from 'react-native-webview';
+import Constant from '../../common/constants';
+import { putString } from '../../data/local';
+import { SafeAreaView } from 'react-native';
+
+type AppChatComponentProps = {
+  onBackButtonTapped: () => void
+}
+
+export default class AppChatComponent extends PureComponent<AppChatComponentProps> {
+
+  _isMounted = false
+
+  state = {
+    isOverlaid: false,
+    toggleRefresh: false
+  }
+
+  constructor(props: AppChatComponentProps) {
+    super(props)
+    this.state = {
+      isOverlaid: false,
+      toggleRefresh: false
+    }
+  }
+
+  _setState = (state: any) => {
+    if (this._isMounted) {
+      this.setState(state)
+    }
+  }
+
+  _requestPermission = async (permission: any) => {
+    if (Platform.OS == 'android') {
+      const granted = await PermissionsAndroid.check(permission)
+      if (!granted) {
+        PermissionsAndroid.request(permission)
+      }
+    }
+  }
+
+  _onAccessTokenExpired = async () => {
+    AppChatStatic.initAppChatResult = ''
+    AppChatStatic.accessToken = ''
+    AppChatStatic.encryptedUrlParams = ''
+    await putString('accessToken', 'default_value')
+    this._setState({ toggleRefresh: !this.state.toggleRefresh })
+    this.componentDidMount()
+  }
+
+  _onMessage = (event: WebViewMessageEvent) => {
+    const data = JSON.parse(event.nativeEvent.data)
+    switch (data.key) {
+      case 'TOKEN_EXPIRED':
+        this._onAccessTokenExpired()
+        break;
+      case 'OVERLAY':
+        this._setState({ isOverlaid: true })
+        this._requestPermission('android.permission.CAMERA')
+        break;
+      case 'REMOVE_OVERLAY':
+        this._setState({ isOverlaid: false })
+        break;
+      case 'CAMERA':
+        //this._requestPermission('android.permission.RECORD_AUDIO')
+        break;
+      case 'GALLERY':
+        //this._requestPermission('android.permission.READ_MEDIA_IMAGES')
+        //this._requestPermission('android.permission.READ_MEDIA_VIDEO')
+        break;
+      case 'DOCUMENT':
+        //this._requestPermission('android.permission.READ_EXTERNAL_STORAGE')
+        break;
+      case 'AUDIO':
+        //this._requestPermission('android.permission.READ_MEDIA_AUDIO')
+        break;
+      default:
+        break;
+    }
+    console.log('onMessage', event.nativeEvent.data);
+  }
+
+  componentDidMount(): void {
+    this._isMounted = true
+    AppChatStatic.appChatOpened = true
+    if (AppChatStatic.initAppChatResult === '') {
+      setTimeout(() => {
+        const { appId, clientId, clientSecret, externalId, fullName } = AppChatStatic
+        initAppChat(appId, clientId, clientSecret, externalId, fullName).then((result) => {
+          if (result === 'SUCCESS') this._setState({ toggleRefresh: !this.state.toggleRefresh })
+        })
+      }, 10000);
+    }
+  }
+
+  componentWillUnmount(): void {
+    this._isMounted = false
+    AppChatStatic.appChatOpened = false
+  }
+
+  render(): ReactNode {
+    const { onBackButtonTapped } = this.props
+    const { initAppChatResult, bundleIdValidation } = AppChatStatic
+    const { bgColorTheme, textHeader, textDescription, fontColor } = AppChatStatic.appChatTheme
+    const postMessageListener = `window.addEventListener('message',(event) => window.ReactNativeWebView.postMessage(event.data));let meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'); document.getElementsByTagName('head')[0].appendChild(meta);`;
+    if (initAppChatResult === 'SUCCESS' && bundleIdValidation !== 'success') {
+      return (
+        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+          <Text style={{ textAlign: 'center', padding: 16 }}>{Constant.BUNDLE_ID_INVALID} </Text>
+        </View>
+      )
+    }
+    return (
+      <Fragment>
+        <SafeAreaView style={{ flex: 0, backgroundColor: this.state.isOverlaid ? AppChatStatic.appChatTheme.bgColorThemeOverlaid : bgColorTheme }} />
+        <SafeAreaView style={{ flex: 1, backgroundColor: this.state.isOverlaid ? Constant.WEBVIEW_BACKGROUND_COLOR_OVERLAID : Constant.WEBVIEW_BACKGROUND_COLOR }}>
+          <StatusBar
+            barStyle={fontColor === 'black' || this.state.isOverlaid ? 'dark-content' : 'light-content'}
+            backgroundColor={this.state.isOverlaid ? AppChatStatic.appChatTheme.bgColorThemeOverlaid : bgColorTheme}
+          />
+          <View style={{ height: 52, backgroundColor: bgColorTheme }}>
+            <View style={{ position: 'absolute' }}>
+              <View style={{ position: 'absolute', top: 0, flexDirection: 'row', height: 52, width: Dimensions.get('screen').width, backgroundColor: bgColorTheme }}>
+                <TouchableOpacity style={{ width: 52, height: 52, justifyContent: 'center', alignItems: 'center' }} onPress={() => onBackButtonTapped()} >
+                  <Image style={{ height: 16 }} source={fontColor === 'black' ? require('../../assets/images/arrow_left_black.png') : require('../../assets/images/arrow_left.png')} />
+                </TouchableOpacity>
+                <View style={{ height: 52, justifyContent: 'center', alignItems: 'flex-start' }}>
+                  <Text style={{ fontSize: 16, color: fontColor, fontWeight: '600' }}>{textHeader}</Text>
+                  <Text style={{ fontSize: 12, color: fontColor, fontWeight: '400' }}>{textDescription}</Text>
+                </View>
+              </View>
+              {this.state.isOverlaid && <View style={{ position: 'absolute', top: 0, height: 52, width: Dimensions.get('screen').width, backgroundColor: 'rgba(35, 41, 51, 0.8)' }} />}
+            </View>
+          </View>
+          {AppChatStatic.initAppChatResult !== 'SUCCESS' && <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <ActivityIndicator size="large" />
+          </View>}
+          {AppChatStatic.initAppChatResult === 'SUCCESS' && <WebView
+            bounces={false}
+            overScrollMode='never'
+            setBuiltInZoomControls={false}
+            injectedJavaScriptBeforeContentLoaded={postMessageListener}
+            source={{ uri: `${Constant.BASE_URL_WEBVIEW}${Constant.ENCRYPTED_PARAMS_KEY}${AppChatStatic.encryptedUrlParams}` }}
+            onMessage={this._onMessage}
+            style={{ flex: 1, backgroundColor: this.state.isOverlaid ? Constant.WEBVIEW_BACKGROUND_COLOR_OVERLAID : Constant.WEBVIEW_BACKGROUND_COLOR }} />}
+        </SafeAreaView>
+      </Fragment>
+    )
+  }
+}

package/src/presentation/initialization/index.tsx

@@ -0,0 +1,149 @@
+import { getBundleIdOrPackageName, getString, putString } from "../../data/local"
+import { authenticate, createContact, getWidgetSetting, registerFcmToken, validateBundleId } from "../../data/remote"
+import { AppChatStatic } from "../../data/static"
+import { calculateTextColorOutput, getEncryptedUrlParams, getOverlaidColor } from '../../common/utils';
+import Constant from "../../common/constants";
+
+export async function initAppChat(appId: string, clientId: string, clientSecret: string, externalId: string, fullName: string) {
+  AppChatStatic.appId = appId
+  AppChatStatic.clientId = clientId
+  AppChatStatic.clientSecret = clientSecret
+  AppChatStatic.externalId = externalId
+  AppChatStatic.fullName = fullName
+
+  //is client app re-login?
+  const currentExternalId = await getString('externalId')
+  if (currentExternalId !== externalId) {
+    AppChatStatic.accessToken = ''
+    AppChatStatic.contactId = ''
+    AppChatStatic.bundleIdValidation = ''
+    AppChatStatic.encryptedUrlParams = ''
+    AppChatStatic.initAppChatResult = ''
+
+    AppChatStatic.appChatTheme.bgColorTheme = 'grey'
+    AppChatStatic.appChatTheme.fontColor = 'white'
+    AppChatStatic.appChatTheme.textHeader = ''
+    AppChatStatic.appChatTheme.textDescription = ''
+
+    AppChatStatic.fcmToken = ''
+
+    await putString('accessToken', 'default_value')
+    await putString('fcmToken', 'default_value')
+    await putString('contactId', 'default_value')
+  }
+
+  try {
+    //Authentication - accessToken
+    const accessToken = AppChatStatic.accessToken == '' ? await updateAccessToken(clientId, clientSecret) : AppChatStatic.accessToken
+
+    //Create Contact - contactId
+    const contactId = AppChatStatic.contactId == '' ? await updateContactId(externalId, fullName) : AppChatStatic.contactId
+
+    //Validate Bundle ID or Package Name - bundleIdValidation
+    const bundleIdValidation = AppChatStatic.bundleIdValidation !== 'success' ? await validateBundleIdOrPackageName() : AppChatStatic.bundleIdValidation
+
+    //Encrypt URL Params - encryptedUrlParams
+    const encryptedUrlParams = AppChatStatic.encryptedUrlParams == '' ? updateEncryptedUrlParams() : AppChatStatic.encryptedUrlParams
+
+    //Get theme - appChatTheme
+    AppChatStatic.appChatTheme.isAnyEmpty() ? await updateAppChatTheme() : AppChatStatic.appChatTheme
+
+    //Register notif
+    if (AppChatStatic.fcmToken != '') {
+      const response = await registerFcmToken(AppChatStatic.fcmToken)
+      if (response.ok) {
+        await putString('fcmToken', AppChatStatic.fcmToken)
+        console.log("FCM token registration success, user can receive notification");
+      } else {
+        console.log("FCM token registration failed, user can't receive notification");
+      }
+    }
+
+
+    //Save result- initAppChatResult
+    if (accessToken != '' && contactId != '' && bundleIdValidation != '' && encryptedUrlParams != '' && !AppChatStatic.appChatTheme.isAnyEmpty()) AppChatStatic.initAppChatResult = 'SUCCESS'
+    else AppChatStatic.initAppChatResult = 'FAILED'
+    if (AppChatStatic.initAppChatResult === 'SUCCESS') await putString('externalId', externalId)
+    return AppChatStatic.initAppChatResult
+  } catch (error) {
+    return JSON.stringify(error)
+  }
+}
+
+async function updateAccessToken(clientId: string, clientSecret: string) {
+  const accessToken = await getString('accessToken')
+  if (accessToken) {
+    AppChatStatic.accessToken = accessToken
+  } else {
+    const authResponse = await authenticate(clientId, clientSecret)
+    const authData = await authResponse.json()
+    if (!authResponse.ok) return authResponse.status
+    AppChatStatic.accessToken = authData['access_token']
+    await putString('accessToken', AppChatStatic.accessToken)
+  }
+  return AppChatStatic.accessToken
+}
+
+async function updateContactId(externalId: string, fullName: string) {
+  const contactId = await getString('contactId')
+  if (contactId) {
+    AppChatStatic.contactId = contactId
+  } else {
+    const createContactResponse = await createContact(externalId, fullName)
+    if (!createContactResponse.ok) return createContactResponse.status
+    const createContactData = await createContactResponse.json()
+    AppChatStatic.contactId = createContactData.data['id']
+    await putString('contactId', AppChatStatic.contactId)
+  }
+  return AppChatStatic.contactId
+}
+
+async function validateBundleIdOrPackageName() {
+  const bundleIdValidation = await getString('bundleIdValidation')
+  let errorCode = undefined
+  let errorMessage = undefined
+  if (bundleIdValidation != 'success') {
+    const bundleId = await getBundleIdOrPackageName()
+    if (bundleId) {
+      const validateBundleIdResponse = await validateBundleId(bundleId)
+      const validateBundleIdData = await validateBundleIdResponse.json()
+      if (validateBundleIdResponse.ok) {
+        AppChatStatic.bundleIdValidation = validateBundleIdData?.data?.status === 'success' ? 'success' : 'failed'
+        if (AppChatStatic.bundleIdValidation == 'success') await putString('bundleIdValidation', 'success')
+      } else {
+        errorCode = validateBundleIdResponse.status
+        errorMessage = validateBundleIdData?.error?.messages[0]
+        AppChatStatic.bundleIdValidation = 'failed'
+      }
+    } else {
+      AppChatStatic.bundleIdValidation = 'not available'
+    }
+  } else {
+    AppChatStatic.bundleIdValidation = bundleIdValidation
+  }
+  if (AppChatStatic.bundleIdValidation != 'success' && AppChatStatic.bundleIdValidation != '') {
+    console.log(`${Constant.BUNDLE_ID_INVALID}\n${errorCode ?? ''} ${errorMessage ?? ''}`)
+  }
+  return AppChatStatic.bundleIdValidation
+}
+
+function updateEncryptedUrlParams() {
+  AppChatStatic.encryptedUrlParams = getEncryptedUrlParams({
+    access_token: AppChatStatic.accessToken,
+    app_id: AppChatStatic.appId,
+    contact_id: AppChatStatic.contactId
+  })
+  return AppChatStatic.encryptedUrlParams
+}
+
+async function updateAppChatTheme() {
+  const response = await getWidgetSetting()
+  const data = (await response.json())?.data
+  if (!response.ok) return response.status
+  AppChatStatic.appChatTheme.bgColorTheme = data.style?.theme?.bg_color
+  AppChatStatic.appChatTheme.bgColorThemeOverlaid = getOverlaidColor(AppChatStatic.appChatTheme.bgColorTheme, Constant.OVERLAY_COLOR, Constant.OVERLAY_OPACITY)
+  AppChatStatic.appChatTheme.fontColor = calculateTextColorOutput(AppChatStatic.appChatTheme.bgColorTheme)
+  AppChatStatic.appChatTheme.textHeader = data.header?.text
+  AppChatStatic.appChatTheme.textDescription = data.description?.text
+  return AppChatStatic.appChatTheme
+}

package/src/presentation/notification/index.tsx

@@ -0,0 +1,45 @@
+import { getString, putString } from "../../data/local"
+import { registerFcmToken, revokeFcmToken } from "../../data/remote"
+import { AppChatStatic } from "../../data/static"
+
+export async function registerNotification(fcmToken: string) {
+  const localFcmToken = await getString('fcmToken')
+  if (fcmToken === localFcmToken) return
+  if (AppChatStatic.initAppChatResult !== 'success') {
+    AppChatStatic.fcmToken = fcmToken
+    return "FCM token registration : waiting initialization success"
+  } else {
+    const response = await registerFcmToken(fcmToken)
+    if (response.ok) {
+      await putString('fcmToken', fcmToken)
+      return "FCM token registration success, user can receive notification"
+    } else {
+      return "FCM token registration failed, user can't receive notification"
+    }
+  }
+}
+
+export async function revokeNotification() {
+  const localFcmToken = await getString('fcmToken')
+  if (localFcmToken == null) return
+  const response = await revokeFcmToken(localFcmToken)
+  if (response.ok) {
+    AppChatStatic.fcmToken = ''
+    return "Revoke FCM token success"
+  }
+  else {
+    return "Revoke FCM token failed"
+  }
+}
+
+export function isAppChatPayload(payload: any): boolean {
+  if (payload?.data == null) {
+    return false;
+  } else {
+    return payload.data['notification_source'] == 'app-chat-qontak';
+  }
+}
+
+export function isAppChatOpened(): boolean {
+  return AppChatStatic.appChatOpened;
+}