rn-erxes-sdk 0.1.18 → 0.1.20

package/src/Widget.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react-native/no-inline-styles */
 import { View, StyleSheet } from 'react-native';
 import React, { useEffect } from 'react';
-import { useMutation } from '@apollo/client';
-import { connect } from './graphql/mutation';
+import { useMutation, useQuery } from '@apollo/client';
+import { connect, widgetsSaveBrowserInfo } from './graphql/mutation';
 import Greetings from './screen/greetings/Greetings';
 import Conversations from './screen/conversation/Conversations';
 import AppContext from './context/Context';
@@ -10,6 +11,9 @@ import ConversationDetail from './screen/conversation/ConversationDetail';
 import { TouchableOpacity } from 'react-native';
 import { Image } from 'react-native';
 import images from './assets/images';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { widgetsTotalUnreadCount } from './graphql/query';
+import { Text } from 'react-native';
 
 const Widget = (props: any) => {
   const {
@@ -24,8 +28,9 @@ const Widget = (props: any) => {
     newChatIcon,
     sendIcon,
     // tracking
-    // phone,
-    // data,
+    phone,
+    data,
+    properties,
     //launcherOption
     show,
     setShow,
@@ -39,10 +44,20 @@ const Widget = (props: any) => {
     null
   );
 
+  const { data: dataUnreadCount } = useQuery(widgetsTotalUnreadCount, {
+    variables: {
+      integrationId: response?.data?.widgetsMessengerConnect?.integrationId,
+      customerId: connection?.cachedCustomerId || null,
+      visitorId: connection?.cachedCustomerId ? null : connection?.visitorId,
+    },
+    skip: !response,
+    fetchPolicy: 'network-only',
+  });
+
   const [connectMutation] = useMutation(connect);
+  const [saveBrowserInfo] = useMutation(widgetsSaveBrowserInfo);
 
   useEffect(() => {
-    console.log(connection);
     connectMutation({
       variables: {
         brandCode,
@@ -51,6 +66,8 @@ const Widget = (props: any) => {
         visitorId: connection?.visitorId,
         // if client passed email automatically then consider this as user
         isUser: Boolean(email),
+        phone: phone ? phone : null,
+        data: data ? data : null,
       },
     })
       .then((res: any) => {
@@ -58,13 +75,40 @@ const Widget = (props: any) => {
         const showLauncher =
           res?.data?.widgetsMessengerConnect?.messengerData?.showLauncher;
         setVisibleLauncher(showLauncher);
+
+        const customerId = res?.data?.widgetsMessengerConnect?.customerId;
+
+        if (connection?.customerId !== customerId) {
+          const jsonValue = JSON.stringify(customerId);
+          AsyncStorage.setItem('cachedCustomerId', jsonValue);
+          setConnection({
+            visitorId: connection?.visitorId,
+            cachedCustomerId: customerId,
+          });
+        }
       })
       .catch((err) => {
         console.log(err);
       });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (connection?.cachedCustomerId) {
+      saveBrowserInfo({
+        variables: {
+          customerId: connection?.cachedCustomerId,
+          browserInfo: properties,
+        },
+      })
+        .then(() => {
+          console.log('browser info saved');
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+  }, [connection]);
+
   const integrationId = response?.data?.widgetsMessengerConnect?.integrationId;
 
   if (!visibleLauncher || !integrationId) {
@@ -81,13 +125,21 @@ const Widget = (props: any) => {
               display: visibleLauncher ? 'flex' : 'none',
             },
           ]}
-          onPress={() => setShow(false)}
+          onPress={() => {
+            AsyncStorage.removeItem('cachedCustomerId');
+            // setShow(false);
+          }}
         >
           <Image
             source={images.logo}
             style={styles.image}
             resizeMode="contain"
           />
+          <View style={styles.unreadCountContainer}>
+            <Text style={{ color: '#fff' }}>
+              {dataUnreadCount?.widgetsTotalUnreadCount || 0}
+            </Text>
+          </View>
         </TouchableOpacity>
       </View>
     );
@@ -172,4 +224,15 @@ const styles = StyleSheet.create({
     backgroundColor: '#2F1F69',
   },
   image: { width: 50, height: 50, borderRadius: 90 },
+  unreadCountContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    backgroundColor: 'red',
+    width: 20,
+    height: 20,
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
 });

package/src/graphql/mutation.ts

@@ -1,46 +1,5 @@
 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!
@@ -161,112 +120,20 @@ const widgetsSaveCustomerGetNotified = gql`
   }
 `;
 
-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
+const widgetsSaveBrowserInfo = gql`
+  mutation widgetsSaveBrowserInfo(
+    $customerId: String
+    $visitorId: String
+    $browserInfo: JSON!
   ) {
-    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
+    widgetsSaveBrowserInfo(
+      customerId: $customerId
+      visitorId: $visitorId
+      browserInfo: $browserInfo
     ) {
       _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
-      }
+      conversationId
+      customerId
     }
   }
 `;
@@ -275,6 +142,5 @@ export {
   connect,
   widgetsInsertMessage,
   widgetsSaveCustomerGetNotified,
-  saveBrowserInfo,
-  customersAdd,
+  widgetsSaveBrowserInfo,
 };

package/src/graphql/query.ts

@@ -158,10 +158,25 @@ const widgetsConversationDetail = gql`
   }
 `;
 
+const widgetsTotalUnreadCount = gql`
+  query widgetsTotalUnreadCount(
+    $integrationId: String!
+    $customerId: String
+    $visitorId: String
+  ) {
+    widgetsTotalUnreadCount(
+      integrationId: $integrationId
+      customerId: $customerId
+      visitorId: $visitorId
+    )
+  }
+`;
+
 export {
   widgetsMessengerSupporters,
   widgetsConversations,
   widgetsConversationDetail,
   knowledgeBaseTopicDetail,
   knowledgeBaseCategoryDetail,
+  widgetsTotalUnreadCount,
 };

package/src/screen/conversation/ConversationDetail.tsx

@@ -22,7 +22,6 @@ import { widgetsInsertMessage } from '../../graphql/mutation';
 import { conversationMessageInserted } from '../../graphql/subscription';
 import { getAttachmentUrl } from '../../utils/utils';
 import AppContext from '../../context/Context';
-import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const ConversationDetail = () => {
   const value = useContext(AppContext);
@@ -34,7 +33,6 @@ const ConversationDetail = () => {
     integrationId,
     customerId,
     visitorId,
-    setConnection,
     //
     backIcon,
     sendIcon,
@@ -123,15 +121,6 @@ const ConversationDetail = () => {
           return console.log(res.errors);
         }
         if (res.data.widgetsInsertMessage) {
-          if (!customerId) {
-            const tempCustomerId = res.data.widgetsInsertMessage.customerId;
-            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 !== messages[0]._id;