Merge pull request #61 from taskrabbit/release/0.4.0

[Release] v0.4.0 - Upgrade to ZendeskChat V2

.npmignore

@@ -0,0 +1,4 @@
+.vscode/*
+.gitignore
+*.log
+.prettierrc.json

.vscode/settings.json

@@ -1,13 +1,23 @@
 {
 	"cSpell.words": [
+		"autodetect",
 		"barthelemy",
+		"bot",
+		"bot's",
 		"chua",
 		"cocoapod",
 		"cocoapods",
 		"jrichardlai",
 		"kachanovskyi",
 		"zanechua",
 		"zendesk",
+		"zendesk's",
 		"zopim"
-	]
+	],
+	"files.exclude": {
+		"**/.classpath": true,
+		"**/.project": true,
+		"**/.settings": true,
+		"**/.factorypath": true
+	}
 }

README.md

@@ -1,18 +1,19 @@
 # react-native-zendesk-chat
 
-Simple module that allows displaying Zopim Chat from Zendesk for React Native.
+Simple module that supports displaying Zendesk Chat within a React Native Application.
+
+This library assumes you're familiar with Zendesk's Official Documentation: [iOS](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-ios/introduction) and [Android](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-android/introductionn).
 
 ## VERSIONS
 
-- For RN version higher than 0.59 use version >= 0.3.0 (Zendesk Chat v1)
-- For RN version lower than 0.59 use version <= 0.2.2 (Zendesk Chat v1)
+- For **Zendesk Chat v2** use version >= 0.4.0 (this requires RN 0.59 or later!)
+- For RN version >= 0.59 use version >= 0.3.0 (Zendesk Chat v1)
+- For RN version < 0.59 use version <= 0.2.2 (Zendesk Chat v1)
 
 ## Known Issues
 
 ## Getting Started
 
-Follow the instructions to install the SDK for [iOS](https://developer.zendesk.com/embeddables/docs/ios-chat-sdk/introduction) and [Android](https://developer.zendesk.com/embeddables/docs/android-chat-sdk/introduction).
-
 With npm:
 
 `npm install react-native-zendesk-chat --save`
@@ -33,7 +34,7 @@ $ (cd ios; pod install) # and see if there are any errors
 
 If you're on older react-native versions, please see the [Advanced Setup](#advanced-setup) section below
 
-**Android** If you're on react-native >= 0.60, Android should autodetect this dependency. You may need to call `react-native link`
+**Android** If you're on react-native >= 0.60, Android should autodetect this dependency. If you're on 0.59, you may need to call `react-native link`
 
 2. Call the JS Initializer:
 
@@ -54,9 +55,40 @@ ZendeskChat.startChat({
 	phone: user.mobile_phone,
 	tags: ["tag1", "tag2"],
 	department: "Your department",
+	// The behaviorFlags are optional, and each default to 'true' if omitted
+	behaviorFlags: {
+		showAgentAvailability: true,
+		showChatTranscriptPrompt: true,
+		showPreChatForm: true,
+		showOfflineForm: true,
+	},
+	// The preChatFormOptions are optional & each defaults to "optional" if omitted
+	preChatFormOptions: {
+		name: !user.full_name ? "required" : "optional",
+		email: "optional",
+		phone: "optional",
+		department: "required",
+	},
+	localizedDismissButtonTitle: "Dismiss",
 });
 ```
 
+### Styling
+
+Changing the UI Styling is mostly achieved through native techniques.
+
+On Android, this is the [official documentation](https://developer.zendesk.com/embeddables/docs/android-unified-sdk/customize_the_look#how-theming-works) -- and an example might be adding these [3 lines to your app theme](https://github.com/zendesk/sdk_demo_app_android/blob/ae4c551f78911e983b0aac06967628f46be15e54/app/src/main/res/values/styles.xml#L5-L7)
+
+While on iOS, the options are more minimal -- check the [official doc page](https://developer.zendesk.com/embeddables/docs/chat-sdk-v-2-for-ios/customize_the_look#styling-the-chat-screen)
+
+### Migrating
+
+_From react-native-zendesk-chat <= 0.3.0_
+
+To migrate from previous versions of the library, you should probably remove all integration steps you applied, and start over from the [Quick Start](#quickstart--usage).
+
+The JS API calls are very similar, with mostly additive changes.
+
 ### Advanced Setup
 
 Advanced users, or users running on older versions of react-native may want to initialize things in native.
@@ -110,16 +142,28 @@ project(':react-native-zendesk-chat').projectDir = new File(rootProject.projectD
 
 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
 
+For RN >= 0.60:
+
+```gradle
+dependencies {
+	//
+  api group: 'com.zendesk', name: 'chat', version: '2.2.0'
+  api group: 'com.zendesk', name: 'messaging', version: '4.3.1'
+```
+
+For RN < 0.60:
+
 ```gradle
 compile project(':react-native-zendesk-chat')
 ```
 
-4. Configure `ZopimChat` in `android/app/main/java/[...]/MainActivity.java`
+4. Configure `Chat` in `android/app/main/java/[...]/MainActivity.java`
 
 ```java
-// Note: there is a JS method to do this!
+// Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.
+
 // Call this once in your Activity's bootup lifecycle
-ZopimChat.init("YOUR_ZENDESK_ACCOUNT_KEY").build();
+Chat.INSTANCE.init(mReactContext, key);
 ```
 
 ## TODO

RNZendeskChat.d.ts

@@ -3,29 +3,83 @@ declare module "react-native-zendesk-chat" {
 		name?: string;
 		email?: string;
 		phone?: string;
+	}
 
-		/** only implemented on iOS */
-		shouldPersist?: boolean;
+	interface MessagingOptionsCommon {
+		/** Set this to set the bot's displayName */
+		botName?: string;
+	}
+	interface MessagingOptions_iOS extends MessagingOptionsCommon {
+		/** Will be loaded using [UIImage imageWithName:…] ) */
+		botAvatarName?: string;
+		/** Will be loaded using [UIImage imageWithData:[NSData dataWithContentsOfUrl:…]] */
+		botAvatarUrl?: string;
+	}
+	interface MessagingOptions_Android extends MessagingOptionsCommon {
+		/** Will be loaded from your native asset resources */
+		botAvatarDrawableId?: number;
 	}
-	interface StartChatOptions_iOS extends VisitorInfoOptions {
+
+	/** Current default is "optional" */
+	type PreChatFormFieldOptionVisibility = "hidden" | "optional" | "required";
+
+	interface StartChatOptions extends VisitorInfoOptions {
 		department?: string;
 		tags?: string[];
 
-		// Flags to disable some fields collected by default.
-		emailNotRequired?: boolean;
-		phoneNotRequired?: boolean;
-		departmentNotRequired?: boolean;
-		messageNotRequired?: boolean;
+		behaviorFlags?: {
+			/** if omitted, the form is enabled */
+			showPreChatForm?: boolean;
+			/** if omitted, the prompt is enabled */
+			showChatTranscriptPrompt?: boolean;
+			/** if omitted, the form is enabled */
+			showOfflineForm?: boolean;
+			/** if omitted, the agent availability message is enabled */
+			showAgentAvailability?: boolean;
+		};
+
+		/** If omitted, the preChatForm will be left as default in Zendesk */
+		preChatFormOptions?: {
+			/** Should we ask the user for a contact email? */
+			email?: PreChatFormFieldOptionVisibility;
+			/** Should we ask the user their name? */
+			name?: PreChatFormFieldOptionVisibility;
+			/** Should we ask the user for their phone number? */
+			phone?: PreChatFormFieldOptionVisibility;
+			/** Should we ask the user which department? */
+			department?: PreChatFormFieldOptionVisibility;
+		};
+
+		/**
+		 * Configure the Chat-Bot (if any)
+		 */
+		messagingOptions?: MessagingOptions_iOS & MessagingOptions_Android;
+
+		/**
+		 * If not provided, this will be "Close" -- not localized!
+		 *
+		 * -- iOS Only (Android: shows just a Back Button)
+		 */
+		localizedDismissButtonTitle?: string;
 	}
-	type StartChatOptions_Android = VisitorInfoOptions;
-	type StartChatOptions = StartChatOptions_iOS & StartChatOptions_Android;
 
 	class RNZendeskChatModuleImpl {
+		/**
+		 * Must be called before calling startChat/setVisitorInfo
+		 * - (Advanced users may configure this natively instead of calling this from JS)
+		 */
 		init: (zendeskAccountKey: string) => void;
 
-		setVisitorInfo: (options: VisitorInfoOptions) => void;
-
+		/**
+		 * Presents the Zendesk Chat User Interface
+		 */
 		startChat: (options: StartChatOptions) => void;
+		/**
+		 * Backwards Compatibility!
+		 * - You can pass all these parameters to RNZendeskChatModule.startChat
+		 * - So you should probably prefer that method
+		 */
+		setVisitorInfo: (options: VisitorInfoOptions) => void;
 	}
 
 	const RNZendeskChatModule: RNZendeskChatModuleImpl;

RNZendeskChat.podspec

@@ -18,5 +18,5 @@ Pod::Spec.new do |s|
   s.framework    = 'UIKit'
 
   s.dependency 'React'
-  s.dependency 'ZDCChat'
+  s.dependency 'ZendeskChatSDK'
 end

android/build.gradle

@@ -36,5 +36,7 @@ repositories {
 
 dependencies {
   implementation "com.facebook.react:react-native:+"
-  implementation group: 'com.zopim.android', name: 'sdk', version: '1.4.8'
+
+  api group: 'com.zendesk', name: 'chat', version: safeExtGet('zendeskChatVersion', '2.2.0')
+  api group: 'com.zendesk', name: 'messaging', version: safeExtGet('zendeskMessagingVersion', '4.3.1')
 }