rn-erxes-sdk 0.1.16 → 0.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/commonjs/App.js +17 -51
- package/lib/commonjs/App.js.map +1 -1
- package/lib/commonjs/Widget.js +66 -7
- package/lib/commonjs/Widget.js.map +1 -1
- package/lib/commonjs/components/Avatar.js +9 -2
- package/lib/commonjs/components/Avatar.js.map +1 -1
- package/lib/commonjs/graphql/ApolloContainer.js +71 -0
- package/lib/commonjs/graphql/ApolloContainer.js.map +1 -0
- package/lib/commonjs/screen/conversation/Attachment.js +9 -2
- package/lib/commonjs/screen/conversation/Attachment.js.map +1 -1
- package/lib/commonjs/screen/conversation/ConversationDetail.js +11 -8
- package/lib/commonjs/screen/conversation/ConversationDetail.js.map +1 -1
- package/lib/commonjs/screen/conversation/Conversations.js +3 -3
- package/lib/commonjs/screen/conversation/Conversations.js.map +1 -1
- package/lib/commonjs/screen/conversation/Message.js +13 -1
- package/lib/commonjs/screen/conversation/Message.js.map +1 -1
- package/lib/commonjs/screen/greetings/Supporters.js +19 -4
- package/lib/commonjs/screen/greetings/Supporters.js.map +1 -1
- package/lib/commonjs/utils/utils.js +3 -3
- package/lib/commonjs/utils/utils.js.map +1 -1
- package/lib/module/App.js +17 -50
- package/lib/module/App.js.map +1 -1
- package/lib/module/Widget.js +65 -7
- package/lib/module/Widget.js.map +1 -1
- package/lib/module/components/Avatar.js +7 -2
- package/lib/module/components/Avatar.js.map +1 -1
- package/lib/module/graphql/ApolloContainer.js +63 -0
- package/lib/module/graphql/ApolloContainer.js.map +1 -0
- package/lib/module/screen/conversation/Attachment.js +7 -2
- package/lib/module/screen/conversation/Attachment.js.map +1 -1
- package/lib/module/screen/conversation/ConversationDetail.js +11 -8
- package/lib/module/screen/conversation/ConversationDetail.js.map +1 -1
- package/lib/module/screen/conversation/Conversations.js +3 -3
- package/lib/module/screen/conversation/Conversations.js.map +1 -1
- package/lib/module/screen/conversation/Message.js +13 -1
- package/lib/module/screen/conversation/Message.js.map +1 -1
- package/lib/module/screen/greetings/Supporters.js +17 -4
- package/lib/module/screen/greetings/Supporters.js.map +1 -1
- package/lib/module/utils/utils.js +3 -3
- package/lib/module/utils/utils.js.map +1 -1
- package/lib/typescript/App.d.ts +4 -1
- package/lib/typescript/App.d.ts.map +1 -1
- package/lib/typescript/Widget.d.ts.map +1 -1
- package/lib/typescript/components/Avatar.d.ts.map +1 -1
- package/lib/typescript/graphql/ApolloContainer.d.ts +4 -0
- package/lib/typescript/graphql/ApolloContainer.d.ts.map +1 -0
- package/lib/typescript/screen/conversation/Attachment.d.ts.map +1 -1
- package/lib/typescript/screen/conversation/ConversationDetail.d.ts.map +1 -1
- package/lib/typescript/screen/conversation/Message.d.ts.map +1 -1
- package/lib/typescript/screen/greetings/Supporters.d.ts.map +1 -1
- package/lib/typescript/utils/utils.d.ts +1 -1
- package/lib/typescript/utils/utils.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/App.tsx +19 -48
- package/src/Widget.tsx +65 -6
- package/src/components/Avatar.tsx +6 -2
- package/src/graphql/ApolloContainer.tsx +69 -0
- package/src/screen/conversation/Attachment.tsx +6 -2
- package/src/screen/conversation/ConversationDetail.tsx +7 -5
- package/src/screen/conversation/Conversations.tsx +2 -2
- package/src/screen/conversation/Message.tsx +19 -1
- package/src/screen/greetings/Supporters.tsx +16 -6
- package/src/utils/utils.tsx +3 -4
- package/lib/commonjs/graphql/apolloClient.js +0 -62
- package/lib/commonjs/graphql/apolloClient.js.map +0 -1
- package/lib/module/graphql/apolloClient.js +0 -53
- package/lib/module/graphql/apolloClient.js.map +0 -1
- package/lib/typescript/graphql/apolloClient.d.ts +0 -6
- package/lib/typescript/graphql/apolloClient.d.ts.map +0 -1
- package/src/graphql/apolloClient.ts +0 -64
package/src/App.tsx
CHANGED
|
@@ -1,22 +1,21 @@
|
|
|
1
|
-
/* eslint-disable react-native/no-inline-styles */
|
|
2
1
|
import 'react-native-get-random-values';
|
|
3
2
|
import React, { useEffect } from 'react';
|
|
4
|
-
import { ApolloProvider } from '@apollo/client';
|
|
5
|
-
import ClientProvider from './graphql/apolloClient';
|
|
6
3
|
import Widget from './Widget';
|
|
7
4
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
8
5
|
import { ObjectId } from 'bson';
|
|
9
|
-
import
|
|
10
|
-
import images from './assets/images';
|
|
6
|
+
import ApolloContainer from './graphql/ApolloContainer';
|
|
11
7
|
|
|
12
8
|
export type PropTypes = {
|
|
13
9
|
brandCode: string;
|
|
10
|
+
subDomain: string;
|
|
11
|
+
showWidget: boolean;
|
|
14
12
|
email?: string;
|
|
15
13
|
onBack?: () => void;
|
|
16
|
-
showWidget: boolean;
|
|
17
14
|
backIcon?: any;
|
|
18
15
|
newChatIcon?: any;
|
|
19
16
|
sendIcon?: any;
|
|
17
|
+
phone?: any;
|
|
18
|
+
data?: any;
|
|
20
19
|
};
|
|
21
20
|
|
|
22
21
|
const ErxesSDK: React.FC<PropTypes> = ({
|
|
@@ -27,6 +26,9 @@ const ErxesSDK: React.FC<PropTypes> = ({
|
|
|
27
26
|
backIcon,
|
|
28
27
|
newChatIcon,
|
|
29
28
|
sendIcon,
|
|
29
|
+
phone,
|
|
30
|
+
data,
|
|
31
|
+
subDomain,
|
|
30
32
|
}) => {
|
|
31
33
|
const [connection, setConnection] = React.useState<any>({
|
|
32
34
|
cachedCustomerId: null,
|
|
@@ -37,16 +39,22 @@ const ErxesSDK: React.FC<PropTypes> = ({
|
|
|
37
39
|
|
|
38
40
|
const props = {
|
|
39
41
|
brandCode,
|
|
42
|
+
subDomain,
|
|
40
43
|
email,
|
|
41
44
|
onBack,
|
|
42
45
|
connection,
|
|
43
46
|
setConnection,
|
|
44
47
|
showWidget,
|
|
45
|
-
setShow,
|
|
46
48
|
// icons
|
|
47
49
|
backIcon,
|
|
48
50
|
newChatIcon,
|
|
49
51
|
sendIcon,
|
|
52
|
+
// tracking
|
|
53
|
+
phone,
|
|
54
|
+
data,
|
|
55
|
+
// launcherOptions
|
|
56
|
+
show,
|
|
57
|
+
setShow,
|
|
50
58
|
};
|
|
51
59
|
|
|
52
60
|
useEffect(() => {
|
|
@@ -71,52 +79,15 @@ const ErxesSDK: React.FC<PropTypes> = ({
|
|
|
71
79
|
});
|
|
72
80
|
}, []);
|
|
73
81
|
|
|
74
|
-
if (
|
|
75
|
-
return
|
|
76
|
-
<View style={{ flex: 1 }}>
|
|
77
|
-
<TouchableOpacity
|
|
78
|
-
style={[styles.widget]}
|
|
79
|
-
onPress={() => setShow(false)}
|
|
80
|
-
>
|
|
81
|
-
<Image
|
|
82
|
-
source={images.logo}
|
|
83
|
-
style={styles.image}
|
|
84
|
-
resizeMode="contain"
|
|
85
|
-
/>
|
|
86
|
-
</TouchableOpacity>
|
|
87
|
-
</View>
|
|
88
|
-
);
|
|
82
|
+
if (!connection?.cachedCustomerId && !connection?.visitorId) {
|
|
83
|
+
return null;
|
|
89
84
|
}
|
|
90
85
|
|
|
91
86
|
return (
|
|
92
|
-
<
|
|
87
|
+
<ApolloContainer subDomain={subDomain}>
|
|
93
88
|
<Widget {...props} />
|
|
94
|
-
</
|
|
89
|
+
</ApolloContainer>
|
|
95
90
|
);
|
|
96
91
|
};
|
|
97
92
|
|
|
98
93
|
export default ErxesSDK;
|
|
99
|
-
|
|
100
|
-
const styles = StyleSheet.create({
|
|
101
|
-
widget: {
|
|
102
|
-
position: 'absolute',
|
|
103
|
-
right: 20,
|
|
104
|
-
bottom: 20,
|
|
105
|
-
height: 60,
|
|
106
|
-
width: 60,
|
|
107
|
-
borderRadius: 50,
|
|
108
|
-
justifyContent: 'center',
|
|
109
|
-
alignItems: 'center',
|
|
110
|
-
elevation: 3,
|
|
111
|
-
zIndex: 3,
|
|
112
|
-
shadowColor: '#2F1F69',
|
|
113
|
-
shadowOffset: {
|
|
114
|
-
width: 0,
|
|
115
|
-
height: 0,
|
|
116
|
-
},
|
|
117
|
-
shadowOpacity: 0.5,
|
|
118
|
-
shadowRadius: 3,
|
|
119
|
-
backgroundColor: '#2F1F69',
|
|
120
|
-
},
|
|
121
|
-
image: { width: 50, height: 50, borderRadius: 90 },
|
|
122
|
-
});
|
package/src/Widget.tsx
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
|
+
/* eslint-disable react-native/no-inline-styles */
|
|
1
2
|
import { View, StyleSheet } from 'react-native';
|
|
2
|
-
import React from 'react';
|
|
3
|
+
import React, { useEffect } from 'react';
|
|
3
4
|
import { useMutation } from '@apollo/client';
|
|
4
5
|
import { connect } from './graphql/mutation';
|
|
5
6
|
import Greetings from './screen/greetings/Greetings';
|
|
6
7
|
import Conversations from './screen/conversation/Conversations';
|
|
7
8
|
import AppContext from './context/Context';
|
|
8
9
|
import ConversationDetail from './screen/conversation/ConversationDetail';
|
|
10
|
+
import { TouchableOpacity } from 'react-native';
|
|
11
|
+
import { Image } from 'react-native';
|
|
12
|
+
import images from './assets/images';
|
|
9
13
|
|
|
10
14
|
const Widget = (props: any) => {
|
|
11
15
|
const {
|
|
@@ -15,13 +19,21 @@ const Widget = (props: any) => {
|
|
|
15
19
|
connection,
|
|
16
20
|
setConnection,
|
|
17
21
|
showWidget,
|
|
18
|
-
setShow,
|
|
19
22
|
// Icons
|
|
20
23
|
backIcon,
|
|
21
24
|
newChatIcon,
|
|
22
25
|
sendIcon,
|
|
26
|
+
// tracking
|
|
27
|
+
// phone,
|
|
28
|
+
// data,
|
|
29
|
+
//launcherOption
|
|
30
|
+
show,
|
|
31
|
+
setShow,
|
|
32
|
+
//domain
|
|
33
|
+
subDomain,
|
|
23
34
|
} = props;
|
|
24
35
|
|
|
36
|
+
const [visibleLauncher, setVisibleLauncher] = React.useState<boolean>(false);
|
|
25
37
|
const [response, setResponse] = React.useState<any>(null);
|
|
26
38
|
const [conversationId, setConversationId] = React.useState<string | null>(
|
|
27
39
|
null
|
|
@@ -29,7 +41,8 @@ const Widget = (props: any) => {
|
|
|
29
41
|
|
|
30
42
|
const [connectMutation] = useMutation(connect);
|
|
31
43
|
|
|
32
|
-
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
console.log(connection);
|
|
33
46
|
connectMutation({
|
|
34
47
|
variables: {
|
|
35
48
|
brandCode,
|
|
@@ -42,6 +55,9 @@ const Widget = (props: any) => {
|
|
|
42
55
|
})
|
|
43
56
|
.then((res: any) => {
|
|
44
57
|
setResponse(res);
|
|
58
|
+
const showLauncher =
|
|
59
|
+
res?.data?.widgetsMessengerConnect?.messengerData?.showLauncher;
|
|
60
|
+
setVisibleLauncher(showLauncher);
|
|
45
61
|
})
|
|
46
62
|
.catch((err) => {
|
|
47
63
|
console.log(err);
|
|
@@ -51,10 +67,32 @@ const Widget = (props: any) => {
|
|
|
51
67
|
|
|
52
68
|
const integrationId = response?.data?.widgetsMessengerConnect?.integrationId;
|
|
53
69
|
|
|
54
|
-
if (!integrationId) {
|
|
70
|
+
if (!visibleLauncher || !integrationId) {
|
|
55
71
|
return null;
|
|
56
72
|
}
|
|
57
73
|
|
|
74
|
+
if (show) {
|
|
75
|
+
return (
|
|
76
|
+
<View style={{ flex: 1 }}>
|
|
77
|
+
<TouchableOpacity
|
|
78
|
+
style={[
|
|
79
|
+
styles.widget,
|
|
80
|
+
{
|
|
81
|
+
display: visibleLauncher ? 'flex' : 'none',
|
|
82
|
+
},
|
|
83
|
+
]}
|
|
84
|
+
onPress={() => setShow(false)}
|
|
85
|
+
>
|
|
86
|
+
<Image
|
|
87
|
+
source={images.logo}
|
|
88
|
+
style={styles.image}
|
|
89
|
+
resizeMode="contain"
|
|
90
|
+
/>
|
|
91
|
+
</TouchableOpacity>
|
|
92
|
+
</View>
|
|
93
|
+
);
|
|
94
|
+
}
|
|
95
|
+
|
|
58
96
|
return (
|
|
59
97
|
<AppContext.Provider
|
|
60
98
|
value={{
|
|
@@ -83,14 +121,14 @@ const Widget = (props: any) => {
|
|
|
83
121
|
setConversationId,
|
|
84
122
|
// Connection
|
|
85
123
|
setConnection,
|
|
86
|
-
|
|
87
124
|
//
|
|
88
125
|
setShow,
|
|
89
126
|
// Icons
|
|
90
|
-
|
|
91
127
|
backIcon,
|
|
92
128
|
newChatIcon,
|
|
93
129
|
sendIcon,
|
|
130
|
+
//domain
|
|
131
|
+
subDomain,
|
|
94
132
|
}}
|
|
95
133
|
>
|
|
96
134
|
<View style={styles.container}>
|
|
@@ -113,4 +151,25 @@ const styles = StyleSheet.create({
|
|
|
113
151
|
container: {
|
|
114
152
|
flex: 1,
|
|
115
153
|
},
|
|
154
|
+
widget: {
|
|
155
|
+
position: 'absolute',
|
|
156
|
+
right: 20,
|
|
157
|
+
bottom: 20,
|
|
158
|
+
height: 60,
|
|
159
|
+
width: 60,
|
|
160
|
+
borderRadius: 50,
|
|
161
|
+
justifyContent: 'center',
|
|
162
|
+
alignItems: 'center',
|
|
163
|
+
elevation: 3,
|
|
164
|
+
zIndex: 3,
|
|
165
|
+
shadowColor: '#2F1F69',
|
|
166
|
+
shadowOffset: {
|
|
167
|
+
width: 0,
|
|
168
|
+
height: 0,
|
|
169
|
+
},
|
|
170
|
+
shadowOpacity: 0.5,
|
|
171
|
+
shadowRadius: 3,
|
|
172
|
+
backgroundColor: '#2F1F69',
|
|
173
|
+
},
|
|
174
|
+
image: { width: 50, height: 50, borderRadius: 90 },
|
|
116
175
|
});
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
/* eslint-disable react-native/no-inline-styles */
|
|
2
2
|
import { View, Text, StyleSheet } from 'react-native';
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
4
|
import { getAttachmentUrl } from '../utils/utils';
|
|
5
5
|
import { Image } from 'react-native';
|
|
6
|
+
import AppContext from '../context/Context';
|
|
6
7
|
|
|
7
8
|
const Avatar = (props: any) => {
|
|
8
9
|
const { user, bgColor } = props;
|
|
9
|
-
const
|
|
10
|
+
const value = useContext(AppContext);
|
|
11
|
+
|
|
12
|
+
const { subDomain } = value;
|
|
13
|
+
const url = getAttachmentUrl(user?.details?.avatar, subDomain);
|
|
10
14
|
if (!url) {
|
|
11
15
|
const firstNameLetter = user?.details?.fullName
|
|
12
16
|
?.split(' ')[0]
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
ApolloProvider,
|
|
4
|
+
ApolloClient,
|
|
5
|
+
InMemoryCache,
|
|
6
|
+
split,
|
|
7
|
+
from,
|
|
8
|
+
createHttpLink,
|
|
9
|
+
} from '@apollo/client';
|
|
10
|
+
import { getMainDefinition } from '@apollo/client/utilities';
|
|
11
|
+
import { onError } from '@apollo/client/link/error';
|
|
12
|
+
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
|
|
13
|
+
import { createClient } from 'graphql-ws';
|
|
14
|
+
|
|
15
|
+
const ApolloContainer = ({ children, subDomain }: any) => {
|
|
16
|
+
const socketUrl = `wss://${subDomain}/gateway/graphql`;
|
|
17
|
+
const apiUrl = `https://${subDomain}/gateway`;
|
|
18
|
+
|
|
19
|
+
// Subscription config
|
|
20
|
+
const wsLink: any = new GraphQLWsLink(
|
|
21
|
+
createClient({
|
|
22
|
+
url: socketUrl || 'ws://localhost:4000/graphql',
|
|
23
|
+
retryAttempts: 1000,
|
|
24
|
+
retryWait: async () => {
|
|
25
|
+
await new Promise((resolve) => setTimeout(resolve, 5000));
|
|
26
|
+
},
|
|
27
|
+
})
|
|
28
|
+
);
|
|
29
|
+
|
|
30
|
+
const logoutLink = onError(({ networkError, graphQLErrors }) => {
|
|
31
|
+
console.log('--netError', networkError);
|
|
32
|
+
console.log('--gqlError', graphQLErrors);
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
const httpLink = createHttpLink({
|
|
36
|
+
uri: `${apiUrl}/graphql`,
|
|
37
|
+
credentials: 'include',
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
const splitLink = split(
|
|
41
|
+
({ query }) => {
|
|
42
|
+
const definition = getMainDefinition(query);
|
|
43
|
+
return (
|
|
44
|
+
definition.kind === 'OperationDefinition' &&
|
|
45
|
+
definition.operation === 'subscription'
|
|
46
|
+
);
|
|
47
|
+
},
|
|
48
|
+
wsLink,
|
|
49
|
+
from([logoutLink, httpLink])
|
|
50
|
+
);
|
|
51
|
+
|
|
52
|
+
const ClientProvider = () =>
|
|
53
|
+
new ApolloClient({
|
|
54
|
+
link: splitLink,
|
|
55
|
+
cache: new InMemoryCache({
|
|
56
|
+
typePolicies: {
|
|
57
|
+
UserDetailsType: {
|
|
58
|
+
merge: true,
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
addTypename: true,
|
|
62
|
+
}),
|
|
63
|
+
defaultOptions: { watchQuery: { fetchPolicy: 'network-only' } },
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
return <ApolloProvider client={ClientProvider()}>{children}</ApolloProvider>;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
export default ApolloContainer;
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
/* eslint-disable react-native/no-inline-styles */
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { useContext } from 'react';
|
|
3
3
|
import { Dimensions, Image, Text, View } from 'react-native';
|
|
4
4
|
import { getAttachmentUrl } from '../../utils/utils';
|
|
5
|
+
import AppContext from '../../context/Context';
|
|
5
6
|
|
|
6
7
|
const fullWidth = Dimensions.get('window');
|
|
7
8
|
const width = fullWidth.width / 2;
|
|
8
9
|
|
|
9
10
|
const Attachment: React.FC<any> = ({ images }) => {
|
|
11
|
+
const value = useContext(AppContext);
|
|
12
|
+
|
|
13
|
+
const { subDomain } = value;
|
|
10
14
|
if (!images || images.length === 0) {
|
|
11
15
|
return null;
|
|
12
16
|
}
|
|
@@ -16,7 +20,7 @@ const Attachment: React.FC<any> = ({ images }) => {
|
|
|
16
20
|
uri: string,
|
|
17
21
|
index: number
|
|
18
22
|
) => {
|
|
19
|
-
const url = getAttachmentUrl(uri);
|
|
23
|
+
const url = getAttachmentUrl(uri, subDomain);
|
|
20
24
|
return (
|
|
21
25
|
<View key={index}>
|
|
22
26
|
<Image
|
|
@@ -37,12 +37,13 @@ const ConversationDetail = () => {
|
|
|
37
37
|
setConnection,
|
|
38
38
|
//
|
|
39
39
|
backIcon,
|
|
40
|
+
sendIcon,
|
|
41
|
+
//
|
|
42
|
+
subDomain,
|
|
40
43
|
} = value;
|
|
41
44
|
|
|
42
45
|
const [messages, setMessages] = React.useState<any>([]);
|
|
43
46
|
|
|
44
|
-
// console.log(messages);
|
|
45
|
-
|
|
46
47
|
const { data, loading, subscribeToMore } = useQuery(
|
|
47
48
|
widgetsConversationDetail,
|
|
48
49
|
{
|
|
@@ -182,6 +183,7 @@ const ConversationDetail = () => {
|
|
|
182
183
|
bgColor={bgColor}
|
|
183
184
|
users={data?.widgetsConversationDetail?.participatedUsers}
|
|
184
185
|
backIcon={backIcon}
|
|
186
|
+
subDomain={subDomain}
|
|
185
187
|
/>
|
|
186
188
|
<View style={{ backgroundColor: 'rgba(215,215,215,.7)', flex: 1 }}>
|
|
187
189
|
{renderContent()}
|
|
@@ -190,7 +192,7 @@ const ConversationDetail = () => {
|
|
|
190
192
|
keyboardVerticalOffset={100}
|
|
191
193
|
>
|
|
192
194
|
<TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
|
|
193
|
-
<InputTools onSend={onSend} bgColor={bgColor} />
|
|
195
|
+
<InputTools onSend={onSend} bgColor={bgColor} sendIcon={sendIcon} />
|
|
194
196
|
</TouchableWithoutFeedback>
|
|
195
197
|
</KeyboardAvoidingView>
|
|
196
198
|
</View>
|
|
@@ -201,7 +203,7 @@ const ConversationDetail = () => {
|
|
|
201
203
|
export default ConversationDetail;
|
|
202
204
|
|
|
203
205
|
const Header = (props: any) => {
|
|
204
|
-
const { brand, bgColor, users, backIcon } = props;
|
|
206
|
+
const { brand, bgColor, users, backIcon, subDomain } = props;
|
|
205
207
|
|
|
206
208
|
const value = useContext(AppContext);
|
|
207
209
|
|
|
@@ -210,7 +212,7 @@ const Header = (props: any) => {
|
|
|
210
212
|
if (users?.length > 0) {
|
|
211
213
|
let source;
|
|
212
214
|
if (users[0]?.details?.avatar) {
|
|
213
|
-
source = { uri: getAttachmentUrl(users[0]?.details?.avatar) };
|
|
215
|
+
source = { uri: getAttachmentUrl(users[0]?.details?.avatar, subDomain) };
|
|
214
216
|
} else {
|
|
215
217
|
source = require('../../assets/images/avatar.png');
|
|
216
218
|
}
|
|
@@ -30,9 +30,9 @@ const Conversations = () => {
|
|
|
30
30
|
|
|
31
31
|
const { data, loading, refetch } = useQuery(widgetsConversations, {
|
|
32
32
|
variables: {
|
|
33
|
-
customerId: customerId ? customerId : null,
|
|
34
|
-
visitorId: customerId ? null : visitorId,
|
|
35
33
|
integrationId,
|
|
34
|
+
customerId: customerId || null,
|
|
35
|
+
visitorId: customerId ? null : visitorId,
|
|
36
36
|
},
|
|
37
37
|
});
|
|
38
38
|
|
|
@@ -9,6 +9,17 @@ import Avatar from '../../components/Avatar';
|
|
|
9
9
|
|
|
10
10
|
const { width } = Dimensions.get('window');
|
|
11
11
|
|
|
12
|
+
const isDarkColor = (hex: any) => {
|
|
13
|
+
'worklet';
|
|
14
|
+
// https://stackoverflow.com/a/69353003/9999202
|
|
15
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
16
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
17
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
18
|
+
// https://stackoverflow.com/a/58270890/9999202
|
|
19
|
+
const hsp = Math.sqrt(0.299 * r ** 2 + 0.587 * g ** 2 + 0.114 * b ** 2);
|
|
20
|
+
return hsp < 170;
|
|
21
|
+
};
|
|
22
|
+
|
|
12
23
|
const Message = (props: any) => {
|
|
13
24
|
const { item, bgColor } = props;
|
|
14
25
|
|
|
@@ -41,7 +52,14 @@ const Message = (props: any) => {
|
|
|
41
52
|
{position === 'left' ? (
|
|
42
53
|
renderContent()
|
|
43
54
|
) : (
|
|
44
|
-
<Text
|
|
55
|
+
<Text
|
|
56
|
+
style={{
|
|
57
|
+
paddingVertical: 12,
|
|
58
|
+
color: isDarkColor(bgColor) ? '#fff' : '#000',
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
{item?.content}
|
|
62
|
+
</Text>
|
|
45
63
|
)}
|
|
46
64
|
{item?.attachments?.length > 0 ? (
|
|
47
65
|
<Attachment images={item?.attachments} />
|
|
@@ -1,12 +1,18 @@
|
|
|
1
1
|
/* eslint-disable react-native/no-inline-styles */
|
|
2
2
|
import { View, Image, StyleSheet } from 'react-native';
|
|
3
|
-
import React from 'react';
|
|
3
|
+
import React, { useContext } from 'react';
|
|
4
4
|
import { useQuery } from '@apollo/client';
|
|
5
5
|
import { widgetsMessengerSupporters } from '../../graphql/query';
|
|
6
|
+
import AppContext from '../../context/Context';
|
|
7
|
+
import { getAttachmentUrl } from '../../utils/utils';
|
|
6
8
|
|
|
7
9
|
const Supporters = (props: any) => {
|
|
8
10
|
const { integrationId } = props;
|
|
9
11
|
|
|
12
|
+
const value = useContext(AppContext);
|
|
13
|
+
|
|
14
|
+
const { subDomain } = value;
|
|
15
|
+
|
|
10
16
|
const { data, loading } = useQuery(widgetsMessengerSupporters, {
|
|
11
17
|
variables: {
|
|
12
18
|
integrationId,
|
|
@@ -21,6 +27,14 @@ const Supporters = (props: any) => {
|
|
|
21
27
|
|
|
22
28
|
const renderSupporter = (supporter: any, index: number) => {
|
|
23
29
|
const color = supporter?.isOnline ? '#3ccc38' : 'white';
|
|
30
|
+
let source;
|
|
31
|
+
if (supporter?.details?.avatar) {
|
|
32
|
+
source = {
|
|
33
|
+
uri: getAttachmentUrl(supporter?.details?.avatar, subDomain),
|
|
34
|
+
};
|
|
35
|
+
} else {
|
|
36
|
+
source = require('../../assets/images/avatar.png');
|
|
37
|
+
}
|
|
24
38
|
return (
|
|
25
39
|
<View
|
|
26
40
|
key={index}
|
|
@@ -28,11 +42,7 @@ const Supporters = (props: any) => {
|
|
|
28
42
|
marginLeft: index === 0 ? 0 : 10,
|
|
29
43
|
}}
|
|
30
44
|
>
|
|
31
|
-
<Image
|
|
32
|
-
source={{ uri: supporter?.details?.avatar }}
|
|
33
|
-
style={styles.image}
|
|
34
|
-
resizeMode="center"
|
|
35
|
-
/>
|
|
45
|
+
<Image source={source} style={styles.image} resizeMode="center" />
|
|
36
46
|
<View style={[{ backgroundColor: color }, styles.activeStatus]} />
|
|
37
47
|
</View>
|
|
38
48
|
);
|
package/src/utils/utils.tsx
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
export function getAttachmentUrl(value: string) {
|
|
1
|
+
export function getAttachmentUrl(value: string, subDomain: string) {
|
|
2
|
+
const baseUrl = `https://${subDomain}/gateway`;
|
|
4
3
|
if (value && !value.includes('https')) {
|
|
5
|
-
return
|
|
4
|
+
return baseUrl + '/read-file?key=' + value;
|
|
6
5
|
}
|
|
7
6
|
return value;
|
|
8
7
|
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.wsLink = exports.default = exports.apiUrl = void 0;
|
|
7
|
-
var _core = require("@apollo/client/core");
|
|
8
|
-
var _error = require("@apollo/client/link/error");
|
|
9
|
-
var _utilities = require("@apollo/client/utilities");
|
|
10
|
-
var _graphqlWs = require("graphql-ws");
|
|
11
|
-
var _subscriptions = require("@apollo/client/link/subscriptions");
|
|
12
|
-
const baseUrl = 'office.erxes.io/gateway';
|
|
13
|
-
const apiUrl = `https://${baseUrl}`;
|
|
14
|
-
|
|
15
|
-
// Subscription config
|
|
16
|
-
exports.apiUrl = apiUrl;
|
|
17
|
-
const wsLink = new _subscriptions.GraphQLWsLink((0, _graphqlWs.createClient)({
|
|
18
|
-
url: `wss://${baseUrl}/graphql` || 'ws://localhost:4000/graphql',
|
|
19
|
-
retryAttempts: 1000,
|
|
20
|
-
retryWait: async () => {
|
|
21
|
-
await new Promise(resolve => setTimeout(resolve, 5000));
|
|
22
|
-
}
|
|
23
|
-
}));
|
|
24
|
-
exports.wsLink = wsLink;
|
|
25
|
-
const logoutLink = (0, _error.onError)(_ref => {
|
|
26
|
-
let {
|
|
27
|
-
networkError,
|
|
28
|
-
graphQLErrors
|
|
29
|
-
} = _ref;
|
|
30
|
-
console.log('--netError', networkError);
|
|
31
|
-
console.log('--gqlError', graphQLErrors);
|
|
32
|
-
});
|
|
33
|
-
const httpLink = (0, _core.createHttpLink)({
|
|
34
|
-
uri: `${apiUrl}/graphql`,
|
|
35
|
-
credentials: 'include'
|
|
36
|
-
});
|
|
37
|
-
const splitLink = (0, _core.split)(_ref2 => {
|
|
38
|
-
let {
|
|
39
|
-
query
|
|
40
|
-
} = _ref2;
|
|
41
|
-
const definition = (0, _utilities.getMainDefinition)(query);
|
|
42
|
-
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
|
|
43
|
-
}, wsLink, (0, _core.from)([logoutLink, httpLink]));
|
|
44
|
-
const ClientProvider = () => new _core.ApolloClient({
|
|
45
|
-
link: splitLink,
|
|
46
|
-
cache: new _core.InMemoryCache({
|
|
47
|
-
typePolicies: {
|
|
48
|
-
UserDetailsType: {
|
|
49
|
-
merge: true
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
addTypename: true
|
|
53
|
-
}),
|
|
54
|
-
defaultOptions: {
|
|
55
|
-
watchQuery: {
|
|
56
|
-
fetchPolicy: 'network-only'
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
var _default = ClientProvider;
|
|
61
|
-
exports.default = _default;
|
|
62
|
-
//# sourceMappingURL=apolloClient.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["_core","require","_error","_utilities","_graphqlWs","_subscriptions","baseUrl","apiUrl","exports","wsLink","GraphQLWsLink","createClient","url","retryAttempts","retryWait","Promise","resolve","setTimeout","logoutLink","onError","_ref","networkError","graphQLErrors","console","log","httpLink","createHttpLink","uri","credentials","splitLink","split","_ref2","query","definition","getMainDefinition","kind","operation","from","ClientProvider","ApolloClient","link","cache","InMemoryCache","typePolicies","UserDetailsType","merge","addTypename","defaultOptions","watchQuery","fetchPolicy","_default","default"],"sourceRoot":"../../../src","sources":["graphql/apolloClient.ts"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,OAAA;AAOA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,UAAA,GAAAF,OAAA;AACA,IAAAG,UAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAEA,MAAMK,OAAO,GAAG,yBAAyB;AAElC,MAAMC,MAAM,GAAI,WAAUD,OAAQ,EAAC;;AAE1C;AAAAE,OAAA,CAAAD,MAAA,GAAAA,MAAA;AACO,MAAME,MAAW,GAAG,IAAIC,4BAAa,CAC1C,IAAAC,uBAAY,EAAC;EACXC,GAAG,EAAG,SAAQN,OAAQ,UAAS,IAAI,6BAA6B;EAChEO,aAAa,EAAE,IAAI;EACnBC,SAAS,EAAE,MAAAA,CAAA,KAAY;IACrB,MAAM,IAAIC,OAAO,CAAEC,OAAO,IAAKC,UAAU,CAACD,OAAO,EAAE,IAAI,CAAC,CAAC;EAC3D;AACF,CAAC,CACH,CAAC;AAACR,OAAA,CAAAC,MAAA,GAAAA,MAAA;AAEF,MAAMS,UAAU,GAAG,IAAAC,cAAO,EAACC,IAAA,IAAqC;EAAA,IAApC;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAAF,IAAA;EACzDG,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEH,YAAY,CAAC;EACvCE,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEF,aAAa,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAMG,QAAQ,GAAG,IAAAC,oBAAc,EAAC;EAC9BC,GAAG,EAAG,GAAEpB,MAAO,UAAS;EACxBqB,WAAW,EAAE;AACf,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAG,IAAAC,WAAK,EACrBC,KAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,KAAA;EACR,MAAME,UAAU,GAAG,IAAAC,4BAAiB,EAACF,KAAK,CAAC;EAC3C,OACEC,UAAU,CAACE,IAAI,KAAK,qBAAqB,IACzCF,UAAU,CAACG,SAAS,KAAK,cAAc;AAE3C,CAAC,EACD3B,MAAM,EACN,IAAA4B,UAAI,EAAC,CAACnB,UAAU,EAAEO,QAAQ,CAAC,CAC7B,CAAC;AAED,MAAMa,cAAc,GAAGA,CAAA,KACrB,IAAIC,kBAAY,CAAC;EACfC,IAAI,EAAEX,SAAS;EACfY,KAAK,EAAE,IAAIC,mBAAa,CAAC;IACvBC,YAAY,EAAE;MACZC,eAAe,EAAE;QACfC,KAAK,EAAE;MACT;IACF,CAAC;IACDC,WAAW,EAAE;EACf,CAAC,CAAC;EACFC,cAAc,EAAE;IAAEC,UAAU,EAAE;MAAEC,WAAW,EAAE;IAAe;EAAE;AAChE,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEUZ,cAAc;AAAA9B,OAAA,CAAA2C,OAAA,GAAAD,QAAA"}
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { ApolloClient, InMemoryCache, split, from, createHttpLink } from '@apollo/client/core';
|
|
2
|
-
import { onError } from '@apollo/client/link/error';
|
|
3
|
-
import { getMainDefinition } from '@apollo/client/utilities';
|
|
4
|
-
import { createClient } from 'graphql-ws';
|
|
5
|
-
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
|
|
6
|
-
const baseUrl = 'office.erxes.io/gateway';
|
|
7
|
-
export const apiUrl = `https://${baseUrl}`;
|
|
8
|
-
|
|
9
|
-
// Subscription config
|
|
10
|
-
export const wsLink = new GraphQLWsLink(createClient({
|
|
11
|
-
url: `wss://${baseUrl}/graphql` || 'ws://localhost:4000/graphql',
|
|
12
|
-
retryAttempts: 1000,
|
|
13
|
-
retryWait: async () => {
|
|
14
|
-
await new Promise(resolve => setTimeout(resolve, 5000));
|
|
15
|
-
}
|
|
16
|
-
}));
|
|
17
|
-
const logoutLink = onError(_ref => {
|
|
18
|
-
let {
|
|
19
|
-
networkError,
|
|
20
|
-
graphQLErrors
|
|
21
|
-
} = _ref;
|
|
22
|
-
console.log('--netError', networkError);
|
|
23
|
-
console.log('--gqlError', graphQLErrors);
|
|
24
|
-
});
|
|
25
|
-
const httpLink = createHttpLink({
|
|
26
|
-
uri: `${apiUrl}/graphql`,
|
|
27
|
-
credentials: 'include'
|
|
28
|
-
});
|
|
29
|
-
const splitLink = split(_ref2 => {
|
|
30
|
-
let {
|
|
31
|
-
query
|
|
32
|
-
} = _ref2;
|
|
33
|
-
const definition = getMainDefinition(query);
|
|
34
|
-
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
|
|
35
|
-
}, wsLink, from([logoutLink, httpLink]));
|
|
36
|
-
const ClientProvider = () => new ApolloClient({
|
|
37
|
-
link: splitLink,
|
|
38
|
-
cache: new InMemoryCache({
|
|
39
|
-
typePolicies: {
|
|
40
|
-
UserDetailsType: {
|
|
41
|
-
merge: true
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
addTypename: true
|
|
45
|
-
}),
|
|
46
|
-
defaultOptions: {
|
|
47
|
-
watchQuery: {
|
|
48
|
-
fetchPolicy: 'network-only'
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
});
|
|
52
|
-
export default ClientProvider;
|
|
53
|
-
//# sourceMappingURL=apolloClient.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["ApolloClient","InMemoryCache","split","from","createHttpLink","onError","getMainDefinition","createClient","GraphQLWsLink","baseUrl","apiUrl","wsLink","url","retryAttempts","retryWait","Promise","resolve","setTimeout","logoutLink","_ref","networkError","graphQLErrors","console","log","httpLink","uri","credentials","splitLink","_ref2","query","definition","kind","operation","ClientProvider","link","cache","typePolicies","UserDetailsType","merge","addTypename","defaultOptions","watchQuery","fetchPolicy"],"sourceRoot":"../../../src","sources":["graphql/apolloClient.ts"],"mappings":"AAAA,SACEA,YAAY,EACZC,aAAa,EACbC,KAAK,EACLC,IAAI,EACJC,cAAc,QACT,qBAAqB;AAC5B,SAASC,OAAO,QAAQ,2BAA2B;AACnD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,YAAY,QAAQ,YAAY;AACzC,SAASC,aAAa,QAAQ,mCAAmC;AAEjE,MAAMC,OAAO,GAAG,yBAAyB;AAEzC,OAAO,MAAMC,MAAM,GAAI,WAAUD,OAAQ,EAAC;;AAE1C;AACA,OAAO,MAAME,MAAW,GAAG,IAAIH,aAAa,CAC1CD,YAAY,CAAC;EACXK,GAAG,EAAG,SAAQH,OAAQ,UAAS,IAAI,6BAA6B;EAChEI,aAAa,EAAE,IAAI;EACnBC,SAAS,EAAE,MAAAA,CAAA,KAAY;IACrB,MAAM,IAAIC,OAAO,CAAEC,OAAO,IAAKC,UAAU,CAACD,OAAO,EAAE,IAAI,CAAC,CAAC;EAC3D;AACF,CAAC,CACH,CAAC;AAED,MAAME,UAAU,GAAGb,OAAO,CAACc,IAAA,IAAqC;EAAA,IAApC;IAAEC,YAAY;IAAEC;EAAc,CAAC,GAAAF,IAAA;EACzDG,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEH,YAAY,CAAC;EACvCE,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEF,aAAa,CAAC;AAC1C,CAAC,CAAC;AAEF,MAAMG,QAAQ,GAAGpB,cAAc,CAAC;EAC9BqB,GAAG,EAAG,GAAEf,MAAO,UAAS;EACxBgB,WAAW,EAAE;AACf,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGzB,KAAK,CACrB0B,KAAA,IAAe;EAAA,IAAd;IAAEC;EAAM,CAAC,GAAAD,KAAA;EACR,MAAME,UAAU,GAAGxB,iBAAiB,CAACuB,KAAK,CAAC;EAC3C,OACEC,UAAU,CAACC,IAAI,KAAK,qBAAqB,IACzCD,UAAU,CAACE,SAAS,KAAK,cAAc;AAE3C,CAAC,EACDrB,MAAM,EACNR,IAAI,CAAC,CAACe,UAAU,EAAEM,QAAQ,CAAC,CAC7B,CAAC;AAED,MAAMS,cAAc,GAAGA,CAAA,KACrB,IAAIjC,YAAY,CAAC;EACfkC,IAAI,EAAEP,SAAS;EACfQ,KAAK,EAAE,IAAIlC,aAAa,CAAC;IACvBmC,YAAY,EAAE;MACZC,eAAe,EAAE;QACfC,KAAK,EAAE;MACT;IACF,CAAC;IACDC,WAAW,EAAE;EACf,CAAC,CAAC;EACFC,cAAc,EAAE;IAAEC,UAAU,EAAE;MAAEC,WAAW,EAAE;IAAe;EAAE;AAChE,CAAC,CAAC;AAEJ,eAAeT,cAAc"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { ApolloClient } from '@apollo/client/core';
|
|
2
|
-
export declare const apiUrl: string;
|
|
3
|
-
export declare const wsLink: any;
|
|
4
|
-
declare const ClientProvider: () => ApolloClient<import("@apollo/client/core").NormalizedCacheObject>;
|
|
5
|
-
export default ClientProvider;
|
|
6
|
-
//# sourceMappingURL=apolloClient.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"apolloClient.d.ts","sourceRoot":"","sources":["../../../src/graphql/apolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKb,MAAM,qBAAqB,CAAC;AAQ7B,eAAO,MAAM,MAAM,QAAuB,CAAC;AAG3C,eAAO,MAAM,MAAM,EAAE,GAQpB,CAAC;AAwBF,QAAA,MAAM,cAAc,yEAYhB,CAAC;AAEL,eAAe,cAAc,CAAC"}
|