rn-erxes-sdk 0.1.8 → 0.1.10

package/src/Widget.tsx

@@ -1,30 +1,29 @@
-/* eslint-disable react-native/no-inline-styles */
-import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import React from 'react';
 import { useMutation } from '@apollo/client';
 import { connect } from './graphql/mutation';
-import Greetings from './Greetings';
-import Support from './Support';
-import FAQ from './FAQ';
+import Greetings from './screen/greetings/Greetings';
+import Conversations from './screen/conversation/Conversations';
 
 const Widget = (props: any) => {
-  const { brandCode } = props;
+  const { brandCode, email, hasBack, onBack, connection } = props;
   const [response, setResponse] = React.useState<any>(null);
-  const [index, setIndex] = React.useState<number>(0);
+
   const [connectMutation] = useMutation(connect);
 
   React.useEffect(() => {
     connectMutation({
       variables: {
         brandCode,
-        cachedCustomerId: null,
-        visitorId: '20675ab50c23e7c8c615a8f4ab9107e2',
-        isUser: false,
+        email,
+        cachedCustomerId: connection?.cachedCustomerId,
+        visitorId: connection?.visitorId,
+        // if client passed email automatically then consider this as user
+        isUser: Boolean(email),
       },
     })
       .then((res: any) => {
         setResponse(res);
-        console.log(res);
       })
       .catch((err) => {
         console.log(err);
@@ -34,9 +33,11 @@ const Widget = (props: any) => {
 
   const bgColor = response?.data?.widgetsMessengerConnect?.uiOptions?.color;
   const integrationId = response?.data?.widgetsMessengerConnect?.integrationId;
-  const knowledgeBaseTopicId =
-    response?.data?.widgetsMessengerConnect?.messengerData
-      ?.knowledgeBaseTopicId;
+  const brand = response?.data?.widgetsMessengerConnect?.brand;
+
+  if (!integrationId) {
+    return null;
+  }
 
   return (
     <View style={styles.container}>
@@ -44,92 +45,97 @@ const Widget = (props: any) => {
         greetings={response?.data?.widgetsMessengerConnect?.messengerData}
         bgColor={bgColor}
         integrationId={integrationId}
+        hasBack={hasBack}
+        onBack={onBack}
+      />
+      {/* <TabBar index={index} setIndex={setIndex} bgColor={bgColor} /> */}
+      {/* {index === 0 ? ( */}
+      <Conversations
+        customerId={connection?.cachedCustomerId}
+        visitorId={connection?.visitorId}
+        integrationId={integrationId}
+        bgColor={bgColor}
+        brand={brand}
       />
-      <TabBar index={index} setIndex={setIndex} bgColor={bgColor} />
-      {index === 0 ? (
-        <Support
-          customerId={'7o6DA3tFhM5EXRWZX'}
-          integrationId={integrationId}
-        />
-      ) : (
+      {/* ) : (
         <FAQ knowledgeBaseTopicId={knowledgeBaseTopicId} />
-      )}
+      )} */}
     </View>
   );
 };
 
 export default Widget;
 
-const TabBar = (props: any) => {
-  const { index, setIndex, bgColor } = props;
-  return (
-    <View
-      style={{
-        backgroundColor: '#fff',
-        flexDirection: 'row',
-        padding: 3,
-        marginBottom: 3,
-        borderColor: '#E5E5E5',
-        borderWidth: 0.3,
-      }}
-    >
-      <TouchableOpacity onPress={() => setIndex(0)} style={{ flex: 1 }}>
-        <View
-          style={{
-            backgroundColor: index === 0 ? bgColor : 'transparent',
-            borderRadius: 5,
-            shadowColor: bgColor,
-            shadowOffset: {
-              width: 0,
-              height: index === 0 ? 2 : 0,
-            },
-            shadowOpacity: 0.5,
-            shadowRadius: index === 0 ? 3.84 : 0,
-            elevation: index === 0 ? 5 : 0,
-          }}
-        >
-          <Text
-            style={{
-              textAlign: 'center',
-              color: index === 0 ? 'white' : 'black',
-              paddingVertical: 10,
-              fontWeight: '600',
-            }}
-          >
-            Support
-          </Text>
-        </View>
-      </TouchableOpacity>
-      <TouchableOpacity
-        onPress={() => setIndex(1)}
-        style={{
-          flex: 1,
-          backgroundColor: index === 1 ? bgColor : 'transparent',
-          borderRadius: 5,
-          shadowColor: bgColor,
-          shadowOffset: {
-            width: 0,
-            height: index === 1 ? 2 : 0,
-          },
-          shadowOpacity: 0.5,
-          shadowRadius: index === 1 ? 3.84 : 0,
-          elevation: index === 1 ? 5 : 0,
-        }}
-      >
-        <Text
-          style={{
-            paddingVertical: 10,
-            color: index === 1 ? 'white' : 'black',
-            textAlign: 'center',
-            fontWeight: '600',
-          }}
-        >
-          FAQ
-        </Text>
-      </TouchableOpacity>
-    </View>
-  );
-};
+// const TabBar = (props: any) => {
+//   const { index, setIndex, bgColor } = props;
+//   return (
+//     <View
+//       style={{
+//         backgroundColor: '#fff',
+//         flexDirection: 'row',
+//         padding: 3,
+//         marginBottom: 3,
+//         borderColor: '#E5E5E5',
+//         borderWidth: 0.3,
+//       }}
+//     >
+//       <TouchableOpacity onPress={() => setIndex(0)} style={{ flex: 1 }}>
+//         <View
+//           style={{
+//             backgroundColor: index === 0 ? bgColor : 'transparent',
+//             borderRadius: 5,
+//             shadowColor: bgColor,
+//             shadowOffset: {
+//               width: 0,
+//               height: index === 0 ? 2 : 0,
+//             },
+//             shadowOpacity: 0.5,
+//             shadowRadius: index === 0 ? 3.84 : 0,
+//             elevation: index === 0 ? 5 : 0,
+//           }}
+//         >
+//           <Text
+//             style={{
+//               textAlign: 'center',
+//               color: index === 0 ? 'white' : 'black',
+//               paddingVertical: 10,
+//               fontWeight: '600',
+//             }}
+//           >
+//             Support
+//           </Text>
+//         </View>
+//       </TouchableOpacity>
+//       <TouchableOpacity
+//         onPress={() => setIndex(1)}
+//         style={{
+//           flex: 1,
+//           backgroundColor: index === 1 ? bgColor : 'transparent',
+//           borderRadius: 5,
+//           shadowColor: bgColor,
+//           shadowOffset: {
+//             width: 0,
+//             height: index === 1 ? 2 : 0,
+//           },
+//           shadowOpacity: 0.5,
+//           shadowRadius: index === 1 ? 3.84 : 0,
+//           elevation: index === 1 ? 5 : 0,
+//         }}
+//       >
+//         <Text
+//           style={{
+//             paddingVertical: 10,
+//             color: index === 1 ? 'white' : 'black',
+//             textAlign: 'center',
+//             fontWeight: '600',
+//           }}
+//         >
+//           FAQ
+//         </Text>
+//       </TouchableOpacity>
+//     </View>
+//   );
+// };
 
 const styles = StyleSheet.create({
   container: {

package/src/components/FAB.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-native/no-inline-styles */
+import React from 'react';
+import {
+  StyleProp,
+  StyleSheet,
+  TouchableOpacity,
+  ViewStyle,
+} from 'react-native';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
+
+type Props = {
+  icon?: string;
+  onPress: () => void;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+  backgroundColor?: string;
+  iconColor?: string;
+  iconSize?: number;
+  style?: StyleProp<ViewStyle>;
+  iconSource?: string;
+};
+
+const FAB = (props: Props) => {
+  const {
+    icon = 'plus',
+    onPress,
+    backgroundColor = '#2F1F69',
+    iconColor = '#fff',
+    iconSize = 20,
+    style,
+    bottom = 20,
+  } = props;
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={[
+        styles.default,
+        {
+          backgroundColor: backgroundColor ? backgroundColor : '#2F1F69',
+          bottom: bottom,
+        },
+        style,
+      ]}
+    >
+      <MaterialCommunityIcons
+        allowFontScaling={false}
+        name={icon}
+        size={iconSize}
+        color={iconColor}
+        direction="ltr"
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  default: {
+    position: 'absolute',
+    right: 20,
+    bottom: 20,
+    height: 60,
+    width: 60,
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 3,
+    zIndex: 3,
+    shadowColor: '#2F1F69',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowOpacity: 0.5,
+    shadowRadius: 3,
+  },
+});
+
+export default FAB;

package/src/components/InputTools.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useState } from 'react';
+import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native';
+import MaterialCommunityIcons from '../icons/MaterialCommunityIcons';
+
+const InputTools: React.FC<any> = (props: any) => {
+  const { onSend, bgColor } = props;
+
+  const [input, onInput] = useState<string>('');
+
+  return (
+    <View
+      style={{
+        paddingVertical: 5,
+        alignItems: 'flex-end',
+        flexDirection: 'row',
+        marginBottom: 20,
+        marginHorizontal: 20,
+      }}
+    >
+      <TextInput
+        placeholder={'Write a reply'}
+        selectionColor={'#686868'}
+        underlineColorAndroid={'transparent'}
+        style={[styles.textInputStyle]}
+        placeholderTextColor={'#686868'}
+        value={input}
+        onChangeText={(text) => {
+          onInput(text);
+        }}
+        multiline={true}
+        numberOfLines={5}
+        // returnKeyType="send"
+      />
+      <TouchableOpacity
+        style={[styles.sendStyle, { backgroundColor: bgColor }]}
+        onPress={() => {
+          onSend && onSend(input);
+          onInput('');
+        }}
+      >
+        <MaterialCommunityIcons
+          allowFontScaling={false}
+          name={'send'}
+          size={20}
+          color={'white'}
+          direction="ltr"
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  sendStyle: {
+    width: 40,
+    height: 40,
+    marginLeft: 10,
+    borderRadius: 90,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textInputStyle: {
+    flex: 1,
+    paddingHorizontal: 15,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    maxHeight: 100,
+    minHeight: 40,
+    paddingTop: 12,
+  },
+});
+
+export default InputTools;

package/src/{apolloClient.ts → graphql/apolloClient.ts}

@@ -50,7 +50,14 @@ const splitLink = split(
 const ClientProvider = () =>
   new ApolloClient({
     link: splitLink,
-    cache: new InMemoryCache(),
+    cache: new InMemoryCache({
+      typePolicies: {
+        UserDetailsType: {
+          merge: true,
+        },
+      },
+      addTypename: true,
+    }),
     defaultOptions: { watchQuery: { fetchPolicy: 'network-only' } },
   });
 

package/src/graphql/mutation.ts

@@ -39,4 +39,85 @@ const connect = gql`
   }
 `;
 
-export { connect };
+const widgetsInsertMessage = gql`
+  mutation widgetsInsertMessage(
+    $integrationId: String!
+    $customerId: String
+    $visitorId: String
+    $message: String
+    $contentType: String
+    $conversationId: String
+    $attachments: [AttachmentInput]
+    $skillId: String
+  ) {
+    widgetsInsertMessage(
+      integrationId: $integrationId
+      customerId: $customerId
+      visitorId: $visitorId
+      contentType: $contentType
+      message: $message
+      conversationId: $conversationId
+      attachments: $attachments
+      skillId: $skillId
+    ) {
+      _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
+    }
+  }
+`;
+
+const widgetsSaveCustomerGetNotified = gql`
+  mutation widgetsSaveCustomerGetNotified(
+    $customerId: String
+    $visitorId: String
+    $type: String!
+    $value: String!
+  ) {
+    widgetsSaveCustomerGetNotified(
+      customerId: $customerId
+      visitorId: $visitorId
+      type: $type
+      value: $value
+    )
+  }
+`;
+
+export { connect, widgetsInsertMessage, widgetsSaveCustomerGetNotified };

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(