Skip to content

Commit 394e8fa

Browse files
fbarthofbartho
authored
Merge pull request #61 from taskrabbit/release/0.4.0
[Release] v0.4.0 - Upgrade to ZendeskChat V2
2 parents beb7b9e + 5c3cbc2 commit 394e8fa

File tree

10 files changed

+545
-81
lines changed

10 files changed

+545
-81
lines changed

‎.npmignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.vscode/*
2+
.gitignore
3+
*.log
4+
.prettierrc.json

‎.vscode/settings.json‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,23 @@
11
{
22
"cSpell.words": [
3+
"autodetect",
34
"barthelemy",
5+
"bot",
6+
"bot's",
47
"chua",
58
"cocoapod",
69
"cocoapods",
710
"jrichardlai",
811
"kachanovskyi",
912
"zanechua",
1013
"zendesk",
14+
"zendesk's",
1115
"zopim"
12-
]
16+
],
17+
"files.exclude": {
18+
"**/.classpath": true,
19+
"**/.project": true,
20+
"**/.settings": true,
21+
"**/.factorypath": true
22+
}
1323
}

‎README.md‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
# react-native-zendesk-chat
22

3-
Simple module that allows displaying Zopim Chat from Zendesk for React Native.
3+
Simple module that supports displaying Zendesk Chat within a React Native Application.
4+
5+
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).
46

57
## VERSIONS
68

7-
- For RN version higher than 0.59 use version >= 0.3.0 (Zendesk Chat v1)
8-
- For RN version lower than 0.59 use version <= 0.2.2 (Zendesk Chat v1)
9+
- For **Zendesk Chat v2** use version >= 0.4.0 (this requires RN 0.59 or later!)
10+
- For RN version >= 0.59 use version >= 0.3.0 (Zendesk Chat v1)
11+
- For RN version < 0.59 use version <= 0.2.2 (Zendesk Chat v1)
912

1013
## Known Issues
1114

1215
## Getting Started
1316

14-
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).
15-
1617
With npm:
1718

1819
`npm install react-native-zendesk-chat --save`
@@ -33,7 +34,7 @@ $ (cd ios; pod install) # and see if there are any errors
3334

3435
If you're on older react-native versions, please see the [Advanced Setup](#advanced-setup) section below
3536

36-
**Android** If you're on react-native >= 0.60, Android should autodetect this dependency. You may need to call `react-native link`
37+
**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`
3738

3839
2. Call the JS Initializer:
3940

@@ -54,9 +55,40 @@ ZendeskChat.startChat({
5455
phone: user.mobile_phone,
5556
tags: ["tag1", "tag2"],
5657
department: "Your department",
58+
// The behaviorFlags are optional, and each default to 'true' if omitted
59+
behaviorFlags: {
60+
showAgentAvailability: true,
61+
showChatTranscriptPrompt: true,
62+
showPreChatForm: true,
63+
showOfflineForm: true,
64+
},
65+
// The preChatFormOptions are optional & each defaults to "optional" if omitted
66+
preChatFormOptions: {
67+
name: !user.full_name ? "required" : "optional",
68+
email: "optional",
69+
phone: "optional",
70+
department: "required",
71+
},
72+
localizedDismissButtonTitle: "Dismiss",
5773
});
5874
```
5975

76+
### Styling
77+
78+
Changing the UI Styling is mostly achieved through native techniques.
79+
80+
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)
81+
82+
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)
83+
84+
### Migrating
85+
86+
_From react-native-zendesk-chat <= 0.3.0_
87+
88+
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).
89+
90+
The JS API calls are very similar, with mostly additive changes.
91+
6092
### Advanced Setup
6193

6294
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
110142

111143
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
112144

145+
For RN >= 0.60:
146+
147+
```gradle
148+
dependencies {
149+
//
150+
api group: 'com.zendesk', name: 'chat', version: '2.2.0'
151+
api group: 'com.zendesk', name: 'messaging', version: '4.3.1'
152+
```
153+
154+
For RN < 0.60:
155+
113156
```gradle
114157
compile project(':react-native-zendesk-chat')
115158
```
116159

117-
4. Configure `ZopimChat` in `android/app/main/java/[...]/MainActivity.java`
160+
4. Configure `Chat` in `android/app/main/java/[...]/MainActivity.java`
118161

119162
```java
120-
// Note: there is a JS method to do this!
163+
// Note: there is a JS method to do this -- prefer doing that! -- This is for advanced users only.
164+
121165
// Call this once in your Activity's bootup lifecycle
122-
ZopimChat.init("YOUR_ZENDESK_ACCOUNT_KEY").build();
166+
Chat.INSTANCE.init(mReactContext, key);
123167
```
124168

125169
## TODO

‎RNZendeskChat.d.ts‎

Lines changed: 66 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,83 @@ declare module "react-native-zendesk-chat" {
33
name?: string;
44
email?: string;
55
phone?: string;
6+
}
67

7-
/** only implemented on iOS */
8-
shouldPersist?: boolean;
8+
interface MessagingOptionsCommon {
9+
/** Set this to set the bot's displayName */
10+
botName?: string;
11+
}
12+
interface MessagingOptions_iOS extends MessagingOptionsCommon {
13+
/** Will be loaded using [UIImage imageWithName:…] ) */
14+
botAvatarName?: string;
15+
/** Will be loaded using [UIImage imageWithData:[NSData dataWithContentsOfUrl:…]] */
16+
botAvatarUrl?: string;
17+
}
18+
interface MessagingOptions_Android extends MessagingOptionsCommon {
19+
/** Will be loaded from your native asset resources */
20+
botAvatarDrawableId?: number;
921
}
10-
interface StartChatOptions_iOS extends VisitorInfoOptions {
22+
23+
/** Current default is "optional" */
24+
type PreChatFormFieldOptionVisibility = "hidden" | "optional" | "required";
25+
26+
interface StartChatOptions extends VisitorInfoOptions {
1127
department?: string;
1228
tags?: string[];
1329

14-
// Flags to disable some fields collected by default.
15-
emailNotRequired?: boolean;
16-
phoneNotRequired?: boolean;
17-
departmentNotRequired?: boolean;
18-
messageNotRequired?: boolean;
30+
behaviorFlags?: {
31+
/** if omitted, the form is enabled */
32+
showPreChatForm?: boolean;
33+
/** if omitted, the prompt is enabled */
34+
showChatTranscriptPrompt?: boolean;
35+
/** if omitted, the form is enabled */
36+
showOfflineForm?: boolean;
37+
/** if omitted, the agent availability message is enabled */
38+
showAgentAvailability?: boolean;
39+
};
40+
41+
/** If omitted, the preChatForm will be left as default in Zendesk */
42+
preChatFormOptions?: {
43+
/** Should we ask the user for a contact email? */
44+
email?: PreChatFormFieldOptionVisibility;
45+
/** Should we ask the user their name? */
46+
name?: PreChatFormFieldOptionVisibility;
47+
/** Should we ask the user for their phone number? */
48+
phone?: PreChatFormFieldOptionVisibility;
49+
/** Should we ask the user which department? */
50+
department?: PreChatFormFieldOptionVisibility;
51+
};
52+
53+
/**
54+
* Configure the Chat-Bot (if any)
55+
*/
56+
messagingOptions?: MessagingOptions_iOS & MessagingOptions_Android;
57+
58+
/**
59+
* If not provided, this will be "Close" -- not localized!
60+
*
61+
* -- iOS Only (Android: shows just a Back Button)
62+
*/
63+
localizedDismissButtonTitle?: string;
1964
}
20-
type StartChatOptions_Android = VisitorInfoOptions;
21-
type StartChatOptions = StartChatOptions_iOS & StartChatOptions_Android;
2265

2366
class RNZendeskChatModuleImpl {
67+
/**
68+
* Must be called before calling startChat/setVisitorInfo
69+
* - (Advanced users may configure this natively instead of calling this from JS)
70+
*/
2471
init: (zendeskAccountKey: string) => void;
2572

26-
setVisitorInfo: (options: VisitorInfoOptions) => void;
27-
73+
/**
74+
* Presents the Zendesk Chat User Interface
75+
*/
2876
startChat: (options: StartChatOptions) => void;
77+
/**
78+
* Backwards Compatibility!
79+
* - You can pass all these parameters to RNZendeskChatModule.startChat
80+
* - So you should probably prefer that method
81+
*/
82+
setVisitorInfo: (options: VisitorInfoOptions) => void;
2983
}
3084

3185
const RNZendeskChatModule: RNZendeskChatModuleImpl;

‎RNZendeskChat.podspec‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,5 @@ Pod::Spec.new do |s|
1818
s.framework = 'UIKit'
1919

2020
s.dependency 'React'
21-
s.dependency 'ZDCChat'
21+
s.dependency 'ZendeskChatSDK'
2222
end

‎android/build.gradle‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,5 +36,7 @@ repositories {
3636

3737
dependencies {
3838
implementation "com.facebook.react:react-native:+"
39-
implementation group: 'com.zopim.android', name: 'sdk', version: '1.4.8'
39+
40+
api group: 'com.zendesk', name: 'chat', version: safeExtGet('zendeskChatVersion', '2.2.0')
41+
api group: 'com.zendesk', name: 'messaging', version: safeExtGet('zendeskMessagingVersion', '4.3.1')
4042
}

0 commit comments

Comments
 (0)