bug fixes and addition of help center and global color for iOS

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Version 0.1.8
+- Fixed some issues in help center
+
+# Version 0.1.7
+- Fixed some issues
+- Added support for global method to change primary color in iOS
+- Added feature to disable ticket creation in help center.

README.md

@@ -15,11 +15,11 @@ It's an alpha version release as of now and only tested on RN >=0.61.0. Bugs and
 
 1. With npm:
 
-   `npm install react-native-zendesk --save`
+   `npm install react-native-zendesk-v2`
 
    or with yarn:
 
-   `yarn add react-native-zendesk`
+   `yarn add react-native-zendesk-v2`
 
 #### iOS
 
@@ -77,7 +77,9 @@ Step 2. Set user identifier
     })
 ```
 
-Step 3. When you want to show up the chat dialog use the following code :
+Step 3. Show the UI based on what SDK you want to use
+### Chat SDK
+** To use chat sdk without answer bot, please add `chatOnly: true` in this method
 ```
     ZendeskChat.startChat({
       name: user.full_name,
@@ -98,8 +100,21 @@ Step 3. When you want to show up the chat dialog use the following code :
 | botName | The botname you want to show on your chat |
 | color | Primary color (hex code) for chat bubbles only on iOS |
 
-### Styling
-For styling in android create a theme with name `ZendeskTheme` in your AndroidManifest.xml file with the following properties
+### Help Center (with and Without Chat SDK)
+To initiate and display help center use the following method:
+```
+RNZendesk.showHelpCenter({
+      withChat: true // add this if you want to use chat instead of ticket creation
+			disableTicketCreation: true // add this if you want to just show help center and not add ticket creation
+})
+```
+You can use either of these options `withChat` or `disableTicketCreation`, both can't be used together. 
+
+*NOTE: Zendesk support with chat enabled is currently buggy, I am trying to resolve that issue. At present you can show help center with normal ticket creation.*
+Working on currently adding more config options here and add customising properties.
+
+### Customising Looks
+For styling in android create a theme in your android folder with the following properties
 ```
 <style  name="ZendeskTheme"  parent="Theme.MaterialComponents.Light">
 
@@ -111,12 +126,41 @@ For styling in android create a theme with name `ZendeskTheme` in your AndroidMa
 
 </style>
 ```
-For iOS only passing color in startChat function is supported at the moment working on adding more configuration in that.
+And then add following to your project's AndroidManifest.xml file (use only the SDKs you use)
+```
+      <activity android:name="zendesk.support.guide.HelpCenterActivity"
+            android:theme="@style/ZendeskTheme" />
+
+        <activity android:name="zendesk.support.guide.ViewArticleActivity"
+            android:theme="@style/ZendeskTheme" />
+
+        <activity android:name="zendesk.support.request.RequestActivity"
+            android:theme="@style/ZendeskTheme" />
+
+        <activity android:name="zendesk.support.requestlist.RequestListActivity"
+            android:theme="@style/ZendeskTheme" />
+        <activity android:name="zendesk.messaging.MessagingActivity"
+            android:theme="@style/ZendeskTheme" />
+```
+
+For iOS only added a new function which can be used as below. This would set the primary color for the chat and other sdks
+```
+	RNZendesk.setPrimaryColor(<hex color string>)
+
+```
+
 ## TODO
 
+- ~~Add Help center~~
 - Allow setting form configuration from JS
 - Add examples
 - Allowing more native methods for updating visitorInfo
+- Adding customisation of SDK support
+- Exposing individual methods to support all SDKs and different combinations
+- Add more support of dynamic properties
+- More config for looks on iOS
+
+Contributions and PRs are always welcome.
 
 ## License
 

RNZendeskChat.podspec

@@ -19,6 +19,6 @@ Pod::Spec.new do |s|
 
   s.dependency 'React'
   s.dependency 'ZendeskAnswerBotSDK'
-  s.dependency 'ZendeskSupportSDK'
+  s.dependency 'ZendeskSupportSDK', '~> 5.0.5'
   s.dependency 'ZendeskChatSDK'
 end

android/build.gradle

@@ -32,8 +32,10 @@ repositories {
 }
 
 dependencies {
-    compile 'com.facebook.react:react-native:+'
-    implementation group: 'com.zendesk', name: 'chat', version: '2.2.0'
-    implementation group: 'com.zendesk', name: 'messaging', version: '4.3.1'
+    implementation 'com.facebook.react:react-native:+'
+    api group: 'com.zendesk', name: 'chat', version: '2.0.0'
+    api group: 'com.zendesk', name: 'answerbot', version: '2.0.0'
+    api group: 'com.zendesk', name: 'messaging', version: '4.2.1'
+    api group: 'com.zendesk', name: 'support', version: '4.0.0'
 }
 

android/src/main/AndroidManifest.xml

@@ -1,9 +1,5 @@
 
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
           package="com.saranshmalik.rnzendeskchat">
-  <application>
-    <activity android:name="zendesk.messaging.MessagingActivity"
-              android:theme="@style/ZendeskTheme" />
-  </application>
 </manifest>
 

android/src/main/java/com/saranshmalik/rnzendeskchat/RNZendeskChat.java

@@ -34,48 +34,50 @@
 import zendesk.chat.ProfileProvider;
 import zendesk.chat.Providers;
 import zendesk.chat.VisitorInfo;
+import zendesk.core.JwtIdentity;
 import zendesk.core.AnonymousIdentity;
 import zendesk.core.Identity;
 import zendesk.messaging.MessagingActivity;
 import zendesk.core.Zendesk;
 import zendesk.support.Support;
 import zendesk.support.guide.HelpCenterActivity;
+import zendesk.support.guide.ViewArticleActivity;
 import zendesk.support.requestlist.RequestListActivity;
 import zendesk.answerbot.AnswerBot;
 import zendesk.answerbot.AnswerBotEngine;
 import zendesk.support.SupportEngine;
 
 public class RNZendeskChat extends ReactContextBaseJavaModule {
 
-  private ReactContext mReactContext;
+  private ReactContext appContext;
+  private static final String TAG = "ZendeskChat";
 
   public RNZendeskChat(ReactApplicationContext reactContext) {
         super(reactContext);
-        mReactContext = reactContext;
+        appContext = reactContext;
   }
 
   @Override
   public String getName() {
     return "RNZendeskChat";
   }
-  private final String LOG_TAP = "Zendesk";
 
   @ReactMethod
     public void setVisitorInfo(ReadableMap options) {
 
         Providers providers = Chat.INSTANCE.providers();
         if (providers == null) {
-            Log.d(LOG_TAP, "Can't set visitor info, provider is null");
+            Log.d(TAG, "Can't set visitor info, provider is null");
             return;
         }
         ProfileProvider profileProvider = providers.profileProvider();
         if (profileProvider == null) {
-            Log.d(LOG_TAP, "Profile provider is null");
+            Log.d(TAG, "Profile provider is null");
             return;
         }
         ChatProvider chatProvider = providers.chatProvider();
         if (chatProvider == null) {
-            Log.d(LOG_TAP, "Chat provider is null");
+            Log.d(TAG, "Chat provider is null");
             return;
         }
         VisitorInfo.Builder builder = VisitorInfo.builder();
@@ -101,52 +103,75 @@ public void init(ReadableMap options) {
         String clientId = options.getString("clientId");
         String url = options.getString("url");
         String key = options.getString("key");
-        Context context = mReactContext;
+        Context context = appContext;
         Zendesk.INSTANCE.init(context, url, appId, clientId);
         Support.INSTANCE.init(Zendesk.INSTANCE);
+        AnswerBot.INSTANCE.init(Zendesk.INSTANCE, Support.INSTANCE);
         Chat.INSTANCE.init(context, key);
     }
 
     @ReactMethod
     public void initChat(String key) {
-        Context context = mReactContext;
+        Context context = appContext;
         Chat.INSTANCE.init(context, key);
     }
 
     @ReactMethod
     public void setUserIdentity(ReadableMap options) {
-        if (options.hasKey('token')) {
+        if (options.hasKey("token")) {
           Identity identity = new JwtIdentity(options.getString("token"));
+          Zendesk.INSTANCE.setIdentity(identity);
         } else {
           String name = options.getString("name");
           String email = options.getString("email");
           Identity identity = new AnonymousIdentity.Builder()
                   .withNameIdentifier(name).withEmailIdentifier(email).build();
+          Zendesk.INSTANCE.setIdentity(identity);
+        }   
+    }
+
+    @ReactMethod
+    public void showHelpCenter(ReadableMap options) {
+        String botName = options.hasKey("botName") ? options.getString("botName") : "Chat Bot";
+        Activity activity = getCurrentActivity();
+        if (options.hasKey("withChat")) {
+            HelpCenterActivity.builder()
+             .withEngines(ChatEngine.engine())
+             .show(activity);
+        } else if (options.hasKey("disableTicketCreation")) {
+            HelpCenterActivity.builder()
+              .withContactUsButtonVisible(false)
+              .withShowConversationsMenuButton(false)
+              .show(activity, ViewArticleActivity.builder()
+                                                 .withContactUsButtonVisible(false)
+                                                 .config());
+        } else {
+            HelpCenterActivity.builder()
+             .show(activity);
         }
-        Zendesk.INSTANCE.setIdentity(identity);
     }
 
     @ReactMethod
     public void startChat(ReadableMap options) {
         Providers providers = Chat.INSTANCE.providers();
         setUserIdentity(options);
         setVisitorInfo(options);
-        String botName = options.getString('botName')
+        String botName = options.getString("botName");
         ChatConfiguration chatConfiguration = ChatConfiguration.builder()
                 .withAgentAvailabilityEnabled(true)
                 .withOfflineFormEnabled(true)
                 .build();
 
         Activity activity = getCurrentActivity();
-        if (options.hasKey('chatOnly')) {
+        if (options.hasKey("chatOnly")) {
            MessagingActivity.builder()
                     .withBotLabelString(botName)
-                    .withEngines(ChatEngine.engine())
+                    .withEngines(ChatEngine.engine(), SupportEngine.engine())
                     .show(activity, chatConfiguration);
         } else {
             MessagingActivity.builder()
                     .withBotLabelString(botName)
-                    .withEngines(AnswerBotEngine.engine(), SupportEngine.engine(), ChatEngine.engine())
+                    .withEngines(AnswerBotEngine.engine(), ChatEngine.engine(), SupportEngine.engine())
                     .show(activity, chatConfiguration);
         }