Initial Commit

Author: jrichardlai

.gitignore

@@ -0,0 +1,35 @@
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+ios/RNZendeskChat/RNZendeskChat.xcodeproj/xcuserdata
+ios/RNZendeskChat/RNZendeskChat.xcodeproj/project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+**/*.iml
+local.properties
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+*.xcworkspace
+!Scripts/xctool/xctool.xcworkspace
+!default.xcworkspace
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace

README.md

@@ -0,0 +1,65 @@
+# react-native-zendesk-chat
+
+Simple module that allows displaying Zopim Chat from Zendesk for React Native.
+
+## Known issues
+
+I could not find how to make the import for iOS work properly since I'm using Cocoapods for Zendesk, if you have a suggestion that would be great.
+
+## Getting started
+
+Follow the instructions to install the SDK for [iOS](https://developer.zendesk.com/embeddables/docs/ios-chat-sdk/gettingstarted) and [Android](https://developer.zendesk.com/embeddables/docs/android/gettingstarted).
+
+### Manual install
+#### iOS
+1. `npm install react-native-zendesk-chat --save`
+2. In Xcode, drag and drop `node_modules/react-native-zendesk-chat/RNZendeskChat.m` and `node_modules/react-native-zendesk-chat/RNZendeskChat.h` into your project.
+3. Configure `ZDCChat` in `AppDelegate.m`:
+
+```
+[ZDCChat configure:^(ZDCConfig *defaults) {
+  defaults.accountKey = "YOUR_ZENDESK_ACCOUNT_KEY";
+}];
+```
+
+#### Android
+1. `npm install react-native-zendesk-chat --save`
+2. Open up `android/app/main/java/[...]/MainActivity.java`
+  - Add `import com.taskrabbit.zendesk.*;` to the imports at the top of the file
+  - Add `new RNZendeskChatPackage(this)` to the list returned by the `getPackages()` method
+
+3. Append the following lines to `android/settings.gradle`:
+
+```
+include ':react-native-zendesk-chat'
+project(':react-native-zendesk-chat').projectDir = new File(rootProject.projectDir,	'../node_modules/react-native-zendesk-chat/android')
+```
+
+4. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
+
+```
+compile project(':react-native-zendesk-chat')
+```
+
+5. Configure `ZopimChat` in `android/app/main/java/[...]/MainActivity.java`
+
+```
+ZopimChat.init("YOUR_ZENDESK_ACCOUNT_KEY").build();
+```
+
+## Usage
+
+In your code add `import ZendeskChat from 'react-native-zendesk-chat';`.
+
+```
+ZendeskChat.startChat({
+  name: user.full_name,
+  email: user.email,
+  phone: user.mobile_phone,
+});
+```
+
+## TODO
+
+* Allow setting form configuration from JS
+* Add examples

android/build.gradle

@@ -0,0 +1,33 @@
+buildscript {
+  repositories {
+    jcenter()
+  }
+
+  dependencies {
+    classpath 'com.android.tools.build:gradle:1.2.3'
+  }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+    }
+}
+
+repositories {
+  mavenCentral()
+  maven { url 'https://zendesk.artifactoryonline.com/zendesk/repo' }
+}
+
+dependencies {
+    compile 'com.facebook.react:react-native:0.17.+'
+    compile group: 'com.zopim.android', name: 'sdk', version: '1.1.1'
+}

android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.taskrabbit.zendesk.RNZendeskChat" >
+</manifest>

android/src/main/java/com/taskrabbit/zendesk/RNZendeskChatModule.java

@@ -0,0 +1,50 @@
+package com.taskrabbit.zendesk;
+
+import android.app.Activity;
+import android.content.Intent;
+import com.facebook.react.bridge.*;
+import com.zopim.android.sdk.api.ZopimChat;
+import com.zopim.android.sdk.model.VisitorInfo;
+import com.zopim.android.sdk.prechat.ZopimChatActivity;
+
+public class RNZendeskChatModule extends ReactContextBaseJavaModule {
+    private ReactContext mReactContext;
+    private Activity mActivity;
+
+    public RNZendeskChatModule(ReactApplicationContext reactContext, Activity activity) {
+        super(reactContext);
+
+        mActivity = activity;
+        mReactContext = reactContext;
+    }
+
+    @Override
+    public String getName() {
+        return "RNZendeskChatModule";
+    }
+
+    @ReactMethod
+    public void setVisitorInfo(ReadableMap options) {
+        VisitorInfo.Builder builder = new VisitorInfo.Builder();
+
+        if (options.hasKey("name")) {
+            builder.name(options.getString("name"));
+        }
+        if (options.hasKey("email")) {
+            builder.email(options.getString("email"));
+        }
+        if (options.hasKey("phone")) {
+            builder.phoneNumber(options.getString("phone"));
+        }
+
+        VisitorInfo visitorData = builder.build();
+
+        ZopimChat.setVisitorInfo(visitorData);
+    }
+
+    @ReactMethod
+    public void startChat(ReadableMap options) {
+        setVisitorInfo(options);
+        mActivity.startActivity(new Intent(mReactContext, ZopimChatActivity.class));
+    }
+}

android/src/main/java/com/taskrabbit/zendesk/RNZendeskChatPackage.java

@@ -0,0 +1,41 @@
+package com.taskrabbit.zendesk;
+
+import android.app.Activity;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+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 RNZendeskChatPackage implements ReactPackage {
+    Activity mActivity;
+
+    public RNZendeskChatPackage(Activity activity) {
+        mActivity = activity;
+    }
+
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new RNZendeskChatModule(reactContext, mActivity));
+        return modules;
+    }
+
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactApplicationContext) {
+        return Collections.emptyList();
+    }
+
+}

index.js

@@ -0,0 +1,5 @@
+import { NativeModules } from 'react-native';
+
+const RNZendeskChatModule = NativeModules.RNZendeskChatModule;
+
+export default RNZendeskChatModule;