rn-erxes-sdk 0.1.9 → 0.1.11

package/src/graphql/query.ts

@@ -100,9 +100,77 @@ const knowledgeBaseCategoryDetail = gql`
   }
 `;
 
+const widgetsConversationDetail = gql`
+  query widgetsConversationDetail($_id: String, $integrationId: String!) {
+    widgetsConversationDetail(_id: $_id, integrationId: $integrationId) {
+      _id
+      messages {
+        _id
+        conversationId
+        customerId
+        user {
+          _id
+          details {
+            avatar
+            fullName
+            __typename
+          }
+          __typename
+        }
+        content
+        createdAt
+        internal
+        fromBot
+        contentType
+        videoCallData {
+          url
+          status
+          __typename
+        }
+        engageData {
+          content
+          kind
+          sentAs
+          messageId
+          brandId
+          __typename
+        }
+        botData
+        messengerAppData
+        attachments {
+          url
+          name
+          size
+          type
+          __typename
+        }
+        __typename
+      }
+      operatorStatus
+      isOnline
+      participatedUsers {
+        _id
+        details {
+          avatar
+          fullName
+          shortName
+          description
+          position
+          location
+          __typename
+        }
+        links
+        __typename
+      }
+      __typename
+    }
+  }
+`;
+
 export {
   widgetsMessengerSupporters,
   widgetsConversations,
+  widgetsConversationDetail,
   knowledgeBaseTopicDetail,
   knowledgeBaseCategoryDetail,
 };

package/src/graphql/subscription.ts

@@ -0,0 +1,91 @@
+import { gql } from '@apollo/client';
+
+const conversationMessageInserted = gql`
+  subscription conversationMessageInserted($_id: String!) {
+    conversationMessageInserted(_id: $_id) {
+      _id
+      attachments {
+        url
+        name
+        type
+        size
+      }
+      botData
+      content
+      contentType
+      conversationId
+      createdAt
+      customer {
+        avatar
+        firstName
+        lastName
+        primaryEmail
+        primaryPhone
+        _id
+        state
+      }
+      customerId
+      internal
+      fromBot
+      user {
+        _id
+        username
+        details {
+          avatar
+          fullName
+          position
+        }
+      }
+      userId
+      videoCallData {
+        url
+        name
+        status
+        recordingLinks
+      }
+      mentionedUserIds
+    }
+  }
+`;
+
+const conversationClientMessageInserted = gql`
+  subscription conversationClientMessageInserted(
+    $subdomain: String!
+    $userId: String!
+  ) {
+    conversationClientMessageInserted(subdomain: $subdomain, userId: $userId) {
+      _id
+      content
+    }
+  }
+`;
+
+const conversationChanged = gql`
+  subscription conversationChanged($_id: String!) {
+    conversationChanged(_id: $_id) {
+      conversationId
+      type
+    }
+  }
+`;
+const conversationExternalIntegrationMessageInserted = gql`
+  subscription conversationExternalIntegrationMessageInserted {
+    conversationExternalIntegrationMessageInserted
+  }
+`;
+
+const adminMessageInserted = gql`
+  subscription conversationAdminMessageInserted($customerId: String) {
+    conversationAdminMessageInserted(customerId: $customerId) {
+      unreadCount
+    }
+  }
+`;
+
+export {
+  conversationMessageInserted,
+  conversationClientMessageInserted,
+  conversationChanged,
+  conversationExternalIntegrationMessageInserted,
+  adminMessageInserted,
+};

package/src/icons/MaterialCommunityIcons.tsx

@@ -21,12 +21,8 @@ try {
   // Fallback component for icons
   MaterialCommunityIcons = ({ color, size, ...rest }: any) => {
     if (!isErrorLogged) {
-      if (
-        !/(Cannot find module|Module not found|Cannot resolve module)/.test(
-          (e as any).message
-        )
-      ) {
-        console.error(e);
+      if (!/(Cannot find module|Module not found|Cannot resolve module)/) {
+        console.error('Error');
       }
 
       console.warn(

package/src/screen/conversation/Attachment.tsx

@@ -0,0 +1,136 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import { Dimensions, Image, Text, View } from 'react-native';
+import { getAttachmentUrl } from '../../utils/utils';
+
+const fullWidth = Dimensions.get('window');
+const width = fullWidth.width / 2;
+
+const Attachment: React.FC<any> = ({ images }) => {
+  if (!images || images.length === 0) {
+    return null;
+  }
+
+  const renderImage = (
+    mWidth: number | string | undefined,
+    uri: string,
+    index: number
+  ) => {
+    const url = getAttachmentUrl(uri);
+    return (
+      <View key={index}>
+        <Image
+          style={{
+            // flex: 1,
+            width: mWidth,
+            height: mWidth,
+            borderRadius: 6,
+            backgroundColor: 'transparent',
+            marginVertical: 8,
+          }}
+          source={{ uri: url }}
+        />
+      </View>
+    );
+  };
+
+  if (images.length === 1) {
+    return <View marginT-10>{renderImage(width, images[0].url, 0)}</View>;
+  }
+
+  if (images.length === 2) {
+    return (
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          marginTop: 10,
+        }}
+      >
+        {renderImage(width / 2 - 2, images[0].url, 0)}
+        <View paddingL-8>{renderImage(width / 2 - 2, images[1].url, 1)}</View>
+      </View>
+    );
+  }
+
+  if (images.length === 3) {
+    return (
+      <View
+        style={{
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          flexDirection: 'row',
+          marginTop: 10,
+        }}
+      >
+        {renderImage(width / 3 - 2, images[0].url, 0)}
+        <View paddingL-8>{renderImage(width / 3 - 2, images[1].url, 1)}</View>
+        <View paddingL-8>{renderImage(width / 3 - 2, images[2].url, 2)}</View>
+      </View>
+    );
+  }
+
+  if (images.length === 4) {
+    return (
+      <View>
+        <View
+          style={{
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            marginTop: 10,
+          }}
+        >
+          {renderImage(width / 3 - 2, images[0].url, 0)}
+          <View paddingL-8>{renderImage(width / 3 - 2, images[1].url, 1)}</View>
+          <View paddingL-8>{renderImage(width / 3 - 2, images[2].url, 2)}</View>
+          <View paddingL-8>{renderImage(width / 3 - 2, images[3].url, 3)}</View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View>
+      <View
+        style={{
+          alignItems: 'center',
+          flexDirection: 'row',
+          marginTop: 10,
+        }}
+      >
+        {renderImage(width / 3 - 2, images[0].url, 0)}
+        <View style={{ paddingLeft: 8 }}>
+          {renderImage(width / 3 - 2, images[1].url, 1)}
+        </View>
+        <View style={{ paddingLeft: 8 }}>
+          {renderImage(width / 3 - 2, images[2].url, 2)}
+        </View>
+        <View style={{ paddingLeft: 8 }}>
+          {renderImage(width / 3 - 2, images[3].url, 3)}
+          <View
+            style={{
+              position: 'absolute',
+              right: 0,
+              left: 0,
+              top: 0,
+              bottom: 0,
+              backgroundColor: 'rgba(255,255,255,0.5)',
+              marginLeft: 8,
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 6,
+            }}
+          >
+            <Text style={{ color: '#686868', fontSize: 16, fontWeight: '500' }}>
+              {'+ ' + `${images.length - 4}`}
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default Attachment;

package/src/screen/conversation/ConversationDetail.tsx

@@ -0,0 +1,293 @@
+/* eslint-disable react-native/no-inline-styles */
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  StyleSheet,
+  FlatList,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  Image,
+} from 'react-native';
+import React, { useEffect } from 'react';
+import { useMutation, useQuery, useSubscription } from '@apollo/client';
+import { widgetsConversationDetail } from '../../graphql/query';
+import MaterialCommunityIcons from '../../icons/MaterialCommunityIcons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Message from './Message';
+import InputTools from '../../components/InputTools';
+import { widgetsInsertMessage } from '../../graphql/mutation';
+import { conversationMessageInserted } from '../../graphql/subscription';
+import { getAttachmentUrl } from '../../utils/utils';
+import { getLocalStorageItem, setLocalStorageItem } from '../../utils/common';
+
+const ConversationDetail = (props: any) => {
+  const { route, navigation } = props;
+  const { _id, integrationId, bgColor, brand, customerId, visitorId } =
+    route.params;
+
+  const [messages, setMessages] = React.useState<any>([]);
+
+  const { data, loading } = useQuery(widgetsConversationDetail, {
+    variables: {
+      _id,
+      integrationId,
+    },
+    fetchPolicy: 'network-only',
+    skip: !_id,
+  });
+
+  const { data: subscriptionData } = useSubscription(
+    conversationMessageInserted,
+    {
+      variables: { _id },
+      fetchPolicy: 'network-only',
+      skip: !_id,
+    }
+  );
+
+  useEffect(() => {
+    let shouldAdd = subscriptionData && data;
+    if (data?.length > 0) {
+      shouldAdd =
+        subscriptionData?.conversationMessageInserted?._id !== data[0]._id;
+    }
+    if (shouldAdd) {
+      setMessages((prev: any) => [
+        subscriptionData?.conversationMessageInserted,
+        ...prev,
+      ]);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [subscriptionData]);
+
+  useEffect(() => {
+    if (data?.widgetsConversationDetail?.messages) {
+      let reversed = data?.widgetsConversationDetail?.messages
+        ?.slice()
+        ?.reverse();
+      setMessages(reversed);
+    }
+  }, [data]);
+
+  const [sendMutation] = useMutation(widgetsInsertMessage);
+
+  const onSend = (text: string) => {
+    sendMutation({
+      variables: {
+        integrationId,
+        customerId,
+        visitorId,
+        conversationId: _id,
+        contentType: 'text',
+        message: text,
+      },
+    })
+      .then((res: any) => {
+        if (res.errors) {
+          return console.log(res.errors);
+        }
+        if (res.data.widgetsInsertMessage) {
+          const cachedCustomerId = getLocalStorageItem('customerId');
+          if (!cachedCustomerId) {
+            const tempCustomerId = res.data.widgetsInsertMessage.customerId;
+            setLocalStorageItem('customerId', tempCustomerId);
+          }
+          let shouldAdd = messages?.length === 0;
+          if (!shouldAdd) {
+            shouldAdd = res.data.widgetsInsertMessage._id !== data[0]._id;
+          }
+          if (shouldAdd) {
+            const newArray = [res.data.widgetsInsertMessage, ...data];
+            setMessages(newArray);
+          }
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+      });
+  };
+
+  if (loading) {
+    return (
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <ActivityIndicator color={'#686868'} size={'large'} />
+      </View>
+    );
+  }
+
+  const renderItem = ({ item }: any) => {
+    return <Message item={item} bgColor={bgColor} />;
+  };
+
+  const renderContent = () => {
+    return (
+      <View style={{ flex: 1 }}>
+        <FlatList
+          contentContainerStyle={styles.contentStyle}
+          showsVerticalScrollIndicator={false}
+          data={messages}
+          keyExtractor={(item: any) => item._id}
+          onEndReachedThreshold={0.2}
+          renderItem={renderItem}
+          ItemSeparatorComponent={() => null}
+          inverted
+        />
+      </View>
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Header
+        navigation={navigation}
+        brand={brand}
+        bgColor={bgColor}
+        users={data?.widgetsConversationDetail?.participatedUsers}
+      />
+      <View style={{ backgroundColor: 'rgba(215,215,215,.7)', flex: 1 }}>
+        {renderContent()}
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          keyboardVerticalOffset={100}
+        >
+          <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
+            <InputTools onSend={onSend} bgColor={bgColor} />
+          </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
+      </View>
+    </View>
+  );
+};
+
+export default ConversationDetail;
+
+const Header = (props: any) => {
+  const { navigation, brand, bgColor, users } = props;
+
+  const insets = useSafeAreaInsets();
+
+  if (users?.length > 0) {
+    const url = getAttachmentUrl(users[0]?.details?.avatar);
+    return (
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingBottom: 20,
+          backgroundColor: bgColor || 'green',
+          paddingTop: insets.top,
+        }}
+      >
+        <TouchableOpacity
+          onPress={() => {
+            navigation.goBack();
+          }}
+          style={[
+            styles.backStyle,
+            {
+              backgroundColor: '#2F1F69',
+            },
+          ]}
+        >
+          <MaterialCommunityIcons
+            allowFontScaling={false}
+            name={'chevron-left'}
+            size={24}
+            color={'white'}
+            direction="ltr"
+          />
+        </TouchableOpacity>
+        <View
+          style={[
+            styles.title,
+            {
+              marginLeft: 10,
+              alignItems: 'center',
+              flex: 1,
+            },
+          ]}
+        >
+          <Image
+            source={{ uri: url, cache: 'force-cache' }}
+            style={styles.avatar}
+            resizeMode="stretch"
+          />
+          <View style={{ marginLeft: 10 }}>
+            <Text style={{ fontWeight: '600' }}>
+              {users[0]?.details?.fullName}
+            </Text>
+            <Text style={{ color: '#686868' }}>
+              {users[0]?.details?.position}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingBottom: 20,
+        backgroundColor: bgColor || 'green',
+        paddingTop: insets.top,
+      }}
+    >
+      <TouchableOpacity
+        onPress={() => {
+          navigation.goBack();
+        }}
+        style={[
+          styles.backStyle,
+          {
+            backgroundColor: '#2F1F69',
+          },
+        ]}
+      >
+        <MaterialCommunityIcons
+          allowFontScaling={false}
+          name={'chevron-left'}
+          size={24}
+          color={'white'}
+          direction="ltr"
+        />
+      </TouchableOpacity>
+      <View style={[styles.title]}>
+        <Text style={{ fontWeight: '600', fontSize: 16 }}>{brand?.name}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  backStyle: {
+    width: 40,
+    height: 40,
+    marginLeft: 15,
+    borderRadius: 90,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+    flexDirection: 'row',
+  },
+  contentStyle: {
+    flexGrow: 1,
+    padding: 20,
+  },
+  avatar: {
+    width: 40,
+    height: 40,
+    borderRadius: 90,
+  },
+});