rn-erxes-sdk 0.1.13 → 0.1.15

package/src/graphql/mutation.ts

@@ -1,5 +1,46 @@
 import { gql } from '@apollo/client';
 
+const userDetailFields = `
+  avatar
+  fullName
+`;
+
+const messageFields = `
+  _id
+  conversationId
+  customerId
+  user {
+    _id
+    details {
+      ${userDetailFields}
+    }
+  }
+  content
+  createdAt
+  internal
+  fromBot
+  contentType
+  videoCallData {
+    url
+    status
+  }
+  engageData {
+    content
+    kind
+    sentAs
+    messageId
+    brandId
+  }
+  botData
+  messengerAppData
+  attachments {
+    url
+    name
+    size
+    type
+  }
+`;
+
 const connect = gql`
   mutation connect(
     $brandCode: String!
@@ -120,4 +161,120 @@ const widgetsSaveCustomerGetNotified = gql`
   }
 `;
 
-export { connect, widgetsInsertMessage, widgetsSaveCustomerGetNotified };
+const saveBrowserInfo = `
+  mutation widgetsSaveBrowserInfo($customerId: String $visitorId: String $browserInfo: JSON!) {
+    widgetsSaveBrowserInfo(customerId: $customerId visitorId: $visitorId browserInfo: $browserInfo) {
+      ${messageFields}
+    }
+  }
+`;
+
+const customersAdd = gql`
+  mutation customersAdd(
+    $state: String
+    $avatar: String
+    $firstName: String
+    $lastName: String
+    $middleName: String
+    $sex: Int
+    $birthDate: Date
+    $primaryEmail: String
+    $primaryPhone: String
+    $phones: [String]
+    $emails: [String]
+    $ownerId: String
+    $position: String
+    $department: String
+    $leadStatus: String
+    $hasAuthority: String
+    $description: String
+    $isSubscribed: String
+    $links: JSON
+    $customFieldsData: JSON
+    $code: String
+    $emailValidationStatus: String
+    $phoneValidationStatus: String
+  ) {
+    customersAdd(
+      state: $state
+      avatar: $avatar
+      firstName: $firstName
+      lastName: $lastName
+      middleName: $middleName
+      sex: $sex
+      birthDate: $birthDate
+      primaryEmail: $primaryEmail
+      primaryPhone: $primaryPhone
+      phones: $phones
+      emails: $emails
+      ownerId: $ownerId
+      position: $position
+      department: $department
+      leadStatus: $leadStatus
+      hasAuthority: $hasAuthority
+      description: $description
+      isSubscribed: $isSubscribed
+      links: $links
+      customFieldsData: $customFieldsData
+      code: $code
+      emailValidationStatus: $emailValidationStatus
+      phoneValidationStatus: $phoneValidationStatus
+    ) {
+      _id
+      firstName
+      middleName
+      lastName
+      avatar
+      sex
+      birthDate
+      primaryEmail
+      emails
+      primaryPhone
+      phones
+      state
+      visitorContactInfo
+      modifiedAt
+      position
+      department
+      leadStatus
+      hasAuthority
+      description
+      isSubscribed
+      code
+      emailValidationStatus
+      phoneValidationStatus
+      score
+      isOnline
+      lastSeenAt
+      sessionCount
+      links
+      ownerId
+      owner {
+        _id
+        details {
+          fullName
+        }
+      }
+      integrationId
+      createdAt
+      remoteAddress
+      location
+      customFieldsData
+      trackedData
+      tagIds
+      getTags {
+        _id
+        name
+        colorCode
+      }
+    }
+  }
+`;
+
+export {
+  connect,
+  widgetsInsertMessage,
+  widgetsSaveCustomerGetNotified,
+  saveBrowserInfo,
+  customersAdd,
+};

package/src/graphql/query.ts

@@ -127,16 +127,7 @@ const widgetsConversationDetail = gql`
           status
           __typename
         }
-        engageData {
-          content
-          kind
-          sentAs
-          messageId
-          brandId
-          __typename
-        }
         botData
-        messengerAppData
         attachments {
           url
           name

package/src/icons/icons.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+
+export function ArrowLeft({
+  size,
+}: {
+  style?: StyleProp<ViewStyle>;
+  size?: string | number;
+  strokeWidth?: number;
+}) {
+  return (
+    <Svg width={size || 32} height={size || 32} fill="none">
+      <Path
+        stroke="#fff"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M20 12H4m0 0 6-6m-6 6 6 6"
+      />
+    </Svg>
+  );
+}
+
+export function CheckIcon({
+  size,
+}: {
+  style?: StyleProp<ViewStyle>;
+  size?: string | number;
+  strokeWidth?: number;
+}) {
+  return (
+    <Svg width={size || 32} height={size || 32} fill="none">
+      <Path
+        stroke="#1C274C"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="m7 12.9 3.143 3.6L18 7.5"
+      />
+    </Svg>
+  );
+}
+
+export function PlusIcon({
+  size,
+}: {
+  style?: StyleProp<ViewStyle>;
+  size?: string | number;
+  strokeWidth?: number;
+}) {
+  return (
+    <Svg width={size || 32} height={size || 32} fill="none">
+      <Path
+        fill="#212121"
+        fillRule="evenodd"
+        d="M11 11V3h2v8h8v2h-8v8h-2v-8H3v-2h8Z"
+        clipRule="evenodd"
+      />
+    </Svg>
+  );
+}
+
+export function SendIcon({
+  size,
+}: {
+  style?: StyleProp<ViewStyle>;
+  size?: string | number;
+  strokeWidth?: number;
+}) {
+  return (
+    <Svg width={size || 32} height={size || 32} fill="none">
+      <Path
+        stroke="#1C274C"
+        strokeWidth={1.5}
+        d="m18.636 15.67 1.716-5.15c1.5-4.498 2.25-6.747 1.062-7.934-1.187-1.187-3.436-.438-7.935 1.062L8.33 5.364C4.7 6.574 2.885 7.18 2.37 8.067a2.717 2.717 0 0 0 0 2.73c.515.888 2.33 1.493 5.96 2.704.584.194.875.291 1.119.454.236.158.439.361.597.597.163.244.26.535.454 1.118 1.21 3.63 1.816 5.446 2.703 5.962.844.49 1.887.49 2.731 0 .887-.516 1.492-2.331 2.703-5.962Z"
+      />
+      <Path
+        stroke="#1C274C"
+        strokeLinecap="round"
+        strokeWidth={1.5}
+        d="m17.789 6.21-4.21 4.165"
+      />
+    </Svg>
+  );
+}
+
+export function CloseIcon({
+  size,
+}: {
+  style?: StyleProp<ViewStyle>;
+  size?: string | number;
+  strokeWidth?: number;
+}) {
+  return (
+    <Svg width={size || 32} height={size || 32} fill="none">
+      <Path
+        stroke="#fff"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+        d="M5.001 5 19 19M5 19 18.999 5"
+      />
+    </Svg>
+  );
+}

package/src/screen/conversation/ConversationDetail.tsx

@@ -11,57 +11,88 @@ import {
   TouchableWithoutFeedback,
   Keyboard,
   Image,
+  SafeAreaView,
 } from 'react-native';
-import React, { useEffect } from 'react';
-import { useMutation, useQuery, useSubscription } from '@apollo/client';
+import React, { useContext, useEffect } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import { widgetsConversationDetail } from '../../graphql/query';
-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';
+import AppContext from '../../context/Context';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { ArrowLeft } from '../../icons/icons';
 
-const ConversationDetail = (props: any) => {
-  const { route, navigation } = props;
-  const { _id, integrationId, bgColor, brand, customerId, visitorId } =
-    route.params;
+const ConversationDetail = () => {
+  const value = useContext(AppContext);
+
+  const {
+    brand,
+    conversationId,
+    bgColor,
+    integrationId,
+    customerId,
+    visitorId,
+    setConnection,
+  } = value;
 
   const [messages, setMessages] = React.useState<any>([]);
 
-  const { data, loading } = useQuery(widgetsConversationDetail, {
-    variables: {
-      _id,
-      integrationId,
-    },
-    fetchPolicy: 'network-only',
-    skip: !_id,
-  });
+  // console.log(messages);
 
-  const { data: subscriptionData } = useSubscription(
-    conversationMessageInserted,
+  const { data, loading, subscribeToMore } = useQuery(
+    widgetsConversationDetail,
     {
-      variables: { _id },
+      variables: {
+        _id: conversationId,
+        integrationId,
+      },
       fetchPolicy: 'network-only',
-      skip: !_id,
+      skip: !conversationId,
     }
   );
 
   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]);
+    const unSubsToMore = subscribeToMore({
+      document: conversationMessageInserted,
+      variables: { _id: conversationId },
+      updateQuery: (prev, { subscriptionData }) => {
+        const message = subscriptionData.data.conversationMessageInserted;
+        const tempWidgetsConversationDetail =
+          prev.widgetsConversationDetail || {};
+        const tempMessages = tempWidgetsConversationDetail?.messages || [];
+
+        // check whether or not already inserted
+        const prevEntry = tempMessages.find((m: any) => m._id === message?._id);
+
+        if (prevEntry) {
+          return prev;
+        }
+
+        // do not show internal or bot messages
+        if (message.internal || message.fromBot) {
+          return prev;
+        }
+
+        // add new message to messages list
+        const next = {
+          ...prev,
+          widgetsConversationDetail: {
+            ...tempWidgetsConversationDetail,
+            messages: [...tempMessages, message],
+          },
+        };
+
+        return next;
+      },
+    });
+
+    return () => {
+      unSubsToMore;
+    };
+  }, [conversationId, subscribeToMore]);
 
   useEffect(() => {
     if (data?.widgetsConversationDetail?.messages) {
@@ -80,7 +111,7 @@ const ConversationDetail = (props: any) => {
         integrationId,
         customerId,
         visitorId,
-        conversationId: _id,
+        conversationId,
         contentType: 'text',
         message: text,
       },
@@ -90,17 +121,21 @@ const ConversationDetail = (props: any) => {
           return console.log(res.errors);
         }
         if (res.data.widgetsInsertMessage) {
-          const cachedCustomerId = getLocalStorageItem('customerId');
-          if (!cachedCustomerId) {
+          if (!customerId) {
             const tempCustomerId = res.data.widgetsInsertMessage.customerId;
-            setLocalStorageItem('customerId', tempCustomerId);
+            const jsonValue = JSON.stringify(tempCustomerId);
+            AsyncStorage.setItem('cachedCustomerId', jsonValue);
+            setConnection({
+              visitorId,
+              cachedCustomerId: tempCustomerId,
+            });
           }
           let shouldAdd = messages?.length === 0;
           if (!shouldAdd) {
-            shouldAdd = res.data.widgetsInsertMessage._id !== data[0]._id;
+            shouldAdd = res.data.widgetsInsertMessage._id !== messages[0]._id;
           }
           if (shouldAdd) {
-            const newArray = [res.data.widgetsInsertMessage, ...data];
+            const newArray = [res.data.widgetsInsertMessage, ...messages];
             setMessages(newArray);
           }
         }
@@ -142,7 +177,6 @@ const ConversationDetail = (props: any) => {
   return (
     <View style={{ flex: 1 }}>
       <Header
-        navigation={navigation}
         brand={brand}
         bgColor={bgColor}
         users={data?.widgetsConversationDetail?.participatedUsers}
@@ -165,25 +199,83 @@ const ConversationDetail = (props: any) => {
 export default ConversationDetail;
 
 const Header = (props: any) => {
-  const { navigation, brand, bgColor, users } = props;
+  const { brand, bgColor, users } = props;
+
+  const value = useContext(AppContext);
 
-  const insets = useSafeAreaInsets();
+  const { setConversationId } = value;
 
   if (users?.length > 0) {
-    const url = getAttachmentUrl(users[0]?.details?.avatar);
+    let source;
+    if (users[0]?.details?.avatar) {
+      source = { uri: getAttachmentUrl(users[0]?.details?.avatar) };
+    } else {
+      source = require('../../assets/images/avatar.png');
+    }
     return (
+      <SafeAreaView
+        style={{
+          backgroundColor: bgColor,
+        }}
+      >
+        <View
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingBottom: 20,
+          }}
+        >
+          <TouchableOpacity
+            onPress={() => {
+              setConversationId(null);
+            }}
+            style={[
+              styles.backStyle,
+              {
+                backgroundColor: '#2F1F69',
+              },
+            ]}
+          >
+            <ArrowLeft size={24} />
+          </TouchableOpacity>
+          <View
+            style={[
+              styles.title,
+              {
+                marginLeft: 10,
+                alignItems: 'center',
+                flex: 1,
+              },
+            ]}
+          >
+            <Image source={source} style={styles.avatar} resizeMode="stretch" />
+            <View style={{ marginLeft: 10 }}>
+              <Text style={{ fontWeight: '600' }}>
+                {users[0]?.details?.fullName}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  return (
+    <SafeAreaView
+      style={{
+        backgroundColor: bgColor,
+      }}
+    >
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
           paddingBottom: 20,
-          backgroundColor: bgColor || 'green',
-          paddingTop: insets.top,
         }}
       >
         <TouchableOpacity
           onPress={() => {
-            navigation.goBack();
+            setConversationId(null);
           }}
           style={[
             styles.backStyle,
@@ -192,63 +284,13 @@ const Header = (props: any) => {
             },
           ]}
         >
-          <Text>A</Text>
+          <ArrowLeft size={24} />
         </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 style={[styles.title]}>
+          <Text style={{ fontWeight: '600', fontSize: 16 }}>{brand?.name}</Text>
         </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',
-          },
-        ]}
-      >
-        <Text>A</Text>
-      </TouchableOpacity>
-      <View style={[styles.title]}>
-        <Text style={{ fontWeight: '600', fontSize: 16 }}>{brand?.name}</Text>
-      </View>
-    </View>
+    </SafeAreaView>
   );
 };
 

package/src/screen/conversation/Conversations.tsx

@@ -4,23 +4,23 @@ import {
   Text,
   FlatList,
   StyleSheet,
-  Image,
   TouchableOpacity,
   RefreshControl,
 } from 'react-native';
-import React from 'react';
+import React, { useContext } from 'react';
 import { widgetsConversations } from '../../graphql/query';
 import { useQuery } from '@apollo/client';
 import dayjs from 'dayjs';
-import images from '../../assets/images';
 import FAB from '../../components/FAB';
-import { getAttachmentUrl } from '../../utils/utils';
+import AppContext from '../../context/Context';
+import Avatar from '../../components/Avatar';
+import { PlusIcon } from '../../icons/icons';
 
-const Conversations = (props: any) => {
-  const { customerId, visitorId, integrationId, bgColor, brand, newChatIcon } =
-    props;
+const Conversations = () => {
+  const value = useContext(AppContext);
 
-  console.log(brand);
+  const { customerId, visitorId, bgColor, integrationId, setConversationId } =
+    value;
 
   const { data, loading, refetch } = useQuery(widgetsConversations, {
     variables: {
@@ -45,31 +45,18 @@ const Conversations = (props: any) => {
   }
 
   const renderItem = ({ item }: any) => {
-    let source = images.avatar;
     let name = 'Support Staff';
     if (item?.participatedUsers?.length > 0) {
-      source = {
-        uri: getAttachmentUrl(item?.participatedUsers[0]?.details?.avatar),
-        cache: 'only-if-cached',
-      };
       name = item?.participatedUsers[0]?.details?.fullName;
     }
     return (
       <TouchableOpacity
         style={styles.itemContainer}
         onPress={() => {
-          console.log('+');
-          // navigation.navigate('ConversationDetail', {
-          //   _id: item._id,
-          //   integrationId,
-          //   customerId,
-          //   visitorId,
-          //   bgColor,
-          //   brand,
-          // });
+          setConversationId(item._id);
         }}
       >
-        <Image source={source} style={styles.image} resizeMode="stretch" />
+        <Avatar user={item?.participatedUsers[0]} bgColor={bgColor} />
         <View style={{ flex: 1, marginLeft: 10 }}>
           <Text style={{ fontWeight: '500' }}>{name}</Text>
           <Text style={{ color: '#686868' }}>{item?.content}</Text>
@@ -125,20 +112,11 @@ const Conversations = (props: any) => {
         ItemSeparatorComponent={seperator}
       />
       <FAB
-        onPress={
-          () => {
-            console.log('+++++');
-          }
-          // navigation.navigate('ConversationDetail', {
-          //   _id: '',
-          //   integrationId,
-          //   customerId,
-          //   bgColor,
-          //   brand,
-          // })
-        }
+        onPress={() => {
+          setConversationId('');
+        }}
         backgroundColor={bgColor}
-        icon={newChatIcon}
+        icon={<PlusIcon size={24} />}
       />
     </View>
   );