react-native-mobile-chat 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2023 Shalahudin Ayyub
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,235 @@
+# react-native-mobile-chat
+
+React Native Mobile Chat help you to manage customer relationship with customer conversation feature inside your react native app.
+
+## Installation
+
+### 1. Pre-installation
+
+a. Your app using Firebase Cloud Messaging
+
+b. You have created mobile chat channel integration in [mobile chat integration page](https://chat.qontak.com/integrations/mobilechat) and make sure you have done on the following step
+- Add package name or bundle id of your app
+- Fill server key form from your console firebase (Project settings -> Cloud Messaging -> Cloud Messaging API (Legacy) -> Token)
+
+### 2. Install dependency
+This package have dependency with [React Native WebView](https://github.com/react-native-webview/react-native-webview), so you have to install it first by command line below, skip this step if you have already installed (listed on package.json dependenies)
+
+```sh
+npm install --save react-native-webview
+```
+
+### 3. Install React Native Mobile Chat
+```sh
+npm install --save react-native-mobile-chat
+```
+
+### 4. Add permissions
+#### Info.plist in iOS project
+Add ``NSMicrophoneUsageDescription`` and ``NSCameraUsageDescription`` to Info.plist file
+
+#### AndroidManifest.xml in Android project
+Add permission below 
+```xml
+<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
+<uses-permission android:name="android.permission.INTERNET" />
+<uses-permission android:name="android.permission.CAMERA" />
+```
+
+
+
+## Usage
+
+### Initialization
+Implement this initialization function as early as possible in your app
+```js
+initMobileChat(
+    appId: string, 
+    clientId: string, 
+    clientSecret: string, 
+    externalId: string, 
+    fullName: string
+) : string
+```
+Parameter ``appId``, ``clientId``, ``clientSecret`` can be found in integration page. Parameter``externalId`` is your customer unique identifier and ``fullName`` is your customer full name "Subagya Irianto". 
+
+Example initialization with customer unique id "MY_EXT_ID" and customer full name
+```js
+
+//...
+import { initMobileChat } from 'react-native-mobile-chat';
+import {APP_ID, CLIENT_ID, CLIENT_SECRET} from '../your-constant-directory'
+
+class RootApp extends Component {
+  componentDidMount() {
+    //...
+    
+    initMobileChat(
+      APP_ID, 
+      CLIENT_ID, 
+      CLIENT_SECRET, 
+      'MY_EXT_ID', 
+      'Subagya Irianto')
+    
+    //... 
+  }
+
+  render() {
+    //...
+  }
+}
+```
+### Conversation feature
+``MobileChatComponent`` used by your customer to make conversation with your agents. This component only have one property to implement, ``onBackButtonTapped``.
+
+```js
+<MobileChatComponent onBackButtonTapped={ //Your back button function } />
+```
+Example implementation using [React Navigation](https://reactnavigation.org/) :
+
+```js
+
+//...
+import { MobileChatComponent } from 'react-native-mobile-chat';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NavigationContainer } from '@react-navigation/native';
+
+const Stack = createNativeStackNavigator();
+
+class HomePage extends Component {
+    //..
+    render() {
+        return (
+        //..
+            <View>
+                <Button title='OPEN Mobile Chat' onPress={() => this.props.navigation.navigate('CustomerCarePage')} />
+            </View>
+        //..
+        )
+    }
+}
+
+class CustomerCarePage extends Component {
+    render() {
+        return (
+            <View style={{ flexDirection: 'column', flex: 1 }}>
+                <MobileChatComponent onBackButtonTapped={() => this.props.navigation.goBack() } />
+            </View>
+        )
+    }
+}
+
+class RootApp extends Component {
+  //...
+
+  render() {
+    return (
+      <NavigationContainer>
+        <Stack.Navigator>
+          <Stack.Group screenOptions={{ orientation: 'portrait' }}>
+            <Stack.Screen key={"HomePage"} name={"HomePage"} component={HomePage} } />
+            <Stack.Screen key={"CustomerCarePage"} name={"CustomerCarePage"} component={CustomerCarePage} } />
+            //...
+          </Stack.Group>
+        </Stack.Navigator>
+      </NavigationContainer>
+    )
+  }
+}
+```
+
+### Notification feature
+Register your customer fcm token to mobile chat server to get notification from agent
+
+```js
+registerMobileChatNotification(fcmToken: string) : string
+```
+
+To distinct mobile chat payload and your own payload, use this function
+
+```js
+isMobileChatPayload() : boolean
+```
+
+To get state of mobile chat component is opened or not
+
+```js
+isMobileChatOpened() : boolean
+```
+
+To stop getting notification, implement function below. This can be used when your customer logout from your app.
+```js
+revokeNotification() : string
+```
+
+Example implementation of notification feature using [React Native Firebase](https://rnfirebase.io/) : 
+```js
+
+//...
+import messaging from '@react-native-firebase/messaging'
+import { isMobileChatOpened, isMobileChatPayload, registerMobileChatNotification } from 'react-native-mobile-chat';
+
+class RootApp extends Component {
+
+  //Register user fcm token to get notification
+  getToken = async () => {
+    await messaging().registerDeviceForRemoteMessages();
+    const fcmToken = await messaging().getToken();
+    registerMobileChatNotification(fcmToken)    
+  }
+    
+  componentDidMount() {
+    //...
+    
+    getToken()
+
+    //Handle notification in foreground
+    //Show alert with option : Dismiss and Open Customer Care
+    messaging().onMessage(fgPayload => {
+      if (!isMobileChatPayload(payload)) {
+        if (!isMobileChatOpened()) {
+          Alert.alert('Foreground notif', 
+          `${fgPayload.notification?.title}\n${fgPayload.notification?.body}`, [
+            {
+              text: 'Dismiss',
+              onPress: () => console.log('Dismiss Pressed'),
+              style: 'cancel',
+            },
+            { text: 'Open Customer Care', onPress: () => this.props.navigation.navigate('CustomerCarePage') },
+          ]);
+        }
+      }
+    })
+    
+    //Handle notification in background tapped (app isn't killed)
+    //When notification tapped -> automatically open CustomerCarePage
+    messaging().onNotificationOpenedApp(payload => {
+      if (isMobileChatPayload(payload)) {
+        this.props.navigation.navigate('CustomerCarePage')
+      }
+    })
+    
+    //Handle notification in background tapped (app killed)
+    //When notification tapped -> automatically open CustomerCarePage
+    messaging().getInitialNotification().then(payload => {
+      if (payload == null) return
+      if (isMobileChatPayload(payload)) {
+        this.props.navigation.navigate('CustomerCarePage')
+      }
+    })
+    //... 
+  }
+
+  render() {
+    //...
+  }
+}
+```
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/android/build.gradle

@@ -0,0 +1,77 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:7.2.1"
+  }
+}
+
+def isNewArchitectureEnabled() {
+  return rootProject.hasProperty("newArchEnabled") && rootProject.getProperty("newArchEnabled") == "true"
+}
+
+apply plugin: "com.android.library"
+
+
+def appProject = rootProject.allprojects.find { it.plugins.hasPlugin('com.android.application') }
+
+if (isNewArchitectureEnabled()) {
+  apply plugin: "com.facebook.react"
+}
+
+def getExtOrDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties["AppChat_" + name]
+}
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["AppChat_" + name]).toInteger()
+}
+
+android {
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+    buildConfigField "boolean", "IS_NEW_ARCHITECTURE_ENABLED", isNewArchitectureEnabled().toString()
+  }
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+
+dependencies {
+  // For < 0.71, this will be from the local maven repo
+  // For > 0.71, this will be replaced by `com.facebook.react:react-android:$version` by react gradle plugin
+  //noinspection GradleDynamicVersion
+  implementation "com.facebook.react:react-native:+"
+}
+
+if (isNewArchitectureEnabled()) {
+  react {
+    jsRootDir = file("../src/")
+    libraryName = "AppChat"
+    codegenJavaPackageName = "com.appchat"
+  }
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+AppChat_kotlinVersion=1.7.0
+AppChat_minSdkVersion=21
+AppChat_targetSdkVersion=31
+AppChat_compileSdkVersion=31
+AppChat_ndkversion=21.4.7075529

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,4 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.appchat">
+
+</manifest>

package/android/src/main/java/com/appchat/AppChatModule.java

@@ -0,0 +1,58 @@
+package com.appchat;
+
+import android.content.Context;
+import android.content.SharedPreferences;
+import android.util.Log;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.module.annotations.ReactModule;
+
+@ReactModule(name = AppChatModule.NAME)
+public class AppChatModule extends ReactContextBaseJavaModule {
+  public static final String NAME = "AppChat";
+
+  public AppChatModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @Override
+  @NonNull
+  public String getName() {
+    return NAME;
+  }
+
+  @ReactMethod
+  public void putString(String key, String value, Promise promise) {
+    try {
+      SharedPreferences sharedPreferences = getReactApplicationContext().getSharedPreferences("qontak-app-chat", Context.MODE_PRIVATE);
+      sharedPreferences.edit().putString(key, value).apply();
+      promise.resolve("Success");
+    } catch (Exception e){
+      promise.reject("Error",e);
+    }
+  }
+
+  @ReactMethod
+  public void getString(String key, Promise promise) {
+    try {
+      SharedPreferences sharedPreferences = getReactApplicationContext().getSharedPreferences("qontak-app-chat", Context.MODE_PRIVATE);
+      promise.resolve(sharedPreferences.getString(key, "default_value"));
+    } catch (Exception e) {
+      promise.reject("Error", e);
+    }
+  }
+
+  @ReactMethod
+  public void getBundleIdOrPackageName(Promise promise) {
+    try {
+      promise.resolve(getReactApplicationContext().getPackageName());
+    } catch (Exception e) {
+      promise.reject("Error", e);
+    }
+  }
+}

package/android/src/main/java/com/appchat/AppChatPackage.java

@@ -0,0 +1,28 @@
+package com.appchat;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class AppChatPackage implements ReactPackage {
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+    List<NativeModule> modules = new ArrayList<>();
+    modules.add(new AppChatModule(reactContext));
+    return modules;
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

package/ios/AppChat.h

@@ -0,0 +1,12 @@
+
+#ifdef RCT_NEW_ARCH_ENABLED
+#import "RNAppChatSpec.h"
+
+@interface AppChat : NSObject <NativeAppChatSpec>
+#else
+#import <React/RCTBridgeModule.h>
+
+@interface AppChat : NSObject <RCTBridgeModule>
+#endif
+
+@end

package/ios/AppChat.mm

@@ -0,0 +1,67 @@
+#import "AppChat.h"
+
+@implementation AppChat
+RCT_EXPORT_MODULE()
+
+RCT_REMAP_METHOD(putString,
+                 withKey:(NSString*)key withValue:(NSString*)value
+                 withResolver:(RCTPromiseResolveBlock)resolve
+                 withRejecter:(RCTPromiseRejectBlock)reject)
+{
+    NSUserDefaults *preferences = [NSUserDefaults standardUserDefaults];
+    [preferences setObject:value forKey:key];
+
+    //  Save to disk
+    const BOOL didSave = [preferences synchronize];
+
+    if (!didSave)
+    {
+        NSError* error;
+        reject(@"Error",@"Failed to save",error);
+    }
+    resolve(@"Success");
+}
+
+RCT_REMAP_METHOD(getString,
+                 withKey:(NSString*)key
+                 withResolver:(RCTPromiseResolveBlock)resolve
+                 withRejecter:(RCTPromiseRejectBlock)reject)
+{
+    NSUserDefaults *preferences = [NSUserDefaults standardUserDefaults];
+    if ([preferences objectForKey:key] == nil)
+    {
+        NSError* error;
+        reject(@"Error",@"Failed to get item",error);
+    }
+    else
+    {
+        resolve([preferences stringForKey:key]);
+    }
+}
+
+RCT_REMAP_METHOD(getBundleIdOrPackageName,
+                 withResolver:(RCTPromiseResolveBlock)resolve
+                 withRejecter:(RCTPromiseRejectBlock)reject)
+{
+    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
+    if (bundleIdentifier == nil)
+    {
+        NSError* error;
+        reject(@"Error",@"Failed to get bundle id",error);
+    }
+    else
+    {
+        resolve(bundleIdentifier);
+    }
+}
+
+// Don't compile this code when we build for the old architecture.
+#ifdef RCT_NEW_ARCH_ENABLED
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+    return std::make_shared<facebook::react::NativeAppChatSpecJSI>(params);
+}
+#endif
+
+@end