rn-erxes-sdk 0.1.9 → 0.1.10

package/lib/typescript/screen/conversation/ConversationDetail.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const ConversationDetail: (props: any) => React.JSX.Element;
+export default ConversationDetail;
+//# sourceMappingURL=ConversationDetail.d.ts.map

package/lib/typescript/screen/conversation/ConversationDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationDetail.d.ts","sourceRoot":"","sources":["../../../../src/screen/conversation/ConversationDetail.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAYzC,QAAA,MAAM,kBAAkB,UAAW,GAAG,sBAyIrC,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/lib/typescript/screen/conversation/Conversations.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const Conversations: (props: any) => React.JSX.Element | null;
+export default Conversations;
+//# sourceMappingURL=Conversations.d.ts.map

package/lib/typescript/screen/conversation/Conversations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversations.d.ts","sourceRoot":"","sources":["../../../../src/screen/conversation/Conversations.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,QAAA,MAAM,aAAa,UAAW,GAAG,6BA2GhC,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/screen/conversation/Message.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const Message: (props: any) => React.JSX.Element;
+export default Message;
+//# sourceMappingURL=Message.d.ts.map

package/lib/typescript/screen/conversation/Message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../../../src/screen/conversation/Message.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,QAAA,MAAM,OAAO,UAAW,GAAG,sBA6D1B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/screen/greetings/Greetings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Greetings.d.ts","sourceRoot":"","sources":["../../../../src/screen/greetings/Greetings.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,QAAA,MAAM,SAAS,UAAW,GAAG,sBA0C5B,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/typescript/screen/greetings/Social.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Social.d.ts","sourceRoot":"","sources":["../../../../src/screen/greetings/Social.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,QAAA,MAAM,MAAM,UAAW,GAAG,sBAyBzB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/screen/greetings/Supporters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Supporters.d.ts","sourceRoot":"","sources":["../../../../src/screen/greetings/Supporters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,QAAA,MAAM,UAAU,UAAW,GAAG,6BAsC7B,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/typescript/utils/common.d.ts

@@ -0,0 +1,4 @@
+export declare const initStorage: (storageObject: string) => void;
+export declare const getLocalStorageItem: (key: string) => any;
+export declare const setLocalStorageItem: (key: string, value: string) => void;
+//# sourceMappingURL=common.d.ts.map

package/lib/typescript/utils/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/utils/common.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,kBAAmB,MAAM,SAEhD,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAS,MAAM,KAAG,GAEjD,CAAC;AAGF,eAAO,MAAM,mBAAmB,QAAS,MAAM,SAAS,MAAM,SAE7D,CAAC"}

package/lib/typescript/utils/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getAttachmentUrl(value: string): string;
+export declare const strip_html: (string: any, withoutCut?: boolean) => any;
+export declare const getVisitorId: () => Promise<string>;
+//# sourceMappingURL=utils.d.ts.map

package/lib/typescript/utils/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils/utils.tsx"],"names":[],"mappings":"AAIA,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,MAAM,UAK7C;AAED,eAAO,MAAM,UAAU,WAAY,GAAG,eAAe,OAAO,QAa3D,CAAC;AAEF,eAAO,MAAM,YAAY,uBAQxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-erxes-sdk",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "react-native erxes sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -158,10 +158,19 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.15",
+    "@fingerprintjs/fingerprintjs": "^3.4.1",
+    "@react-native-async-storage/async-storage": "^1.18.2",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/stack": "^6.3.16",
     "dayjs": "^1.11.8",
     "graphql": "^16.6.0",
     "graphql-ws": "^5.13.1",
     "react-apollo": "^3.1.5",
+    "react-native-gesture-handler": "^2.12.0",
+    "react-native-render-html": "^6.3.4",
+    "react-native-safe-area-context": "^4.5.3",
+    "react-native-screens": "^3.21.1",
+    "react-native-uuid": "^2.0.1",
     "react-native-vector-icons": "^9.1.0"
   }
 }

package/src/App.tsx

@@ -1,16 +1,91 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ApolloProvider } from '@apollo/client';
-import ClientProvider from './apolloClient';
+import ClientProvider from './graphql/apolloClient';
 import Widget from './Widget';
+import { createStackNavigator } from '@react-navigation/stack';
+import { NavigationContainer } from '@react-navigation/native';
+import ConversationDetail from './screen/conversation/ConversationDetail';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { getVisitorId } from './utils/utils';
 
 export type PropTypes = {
   brandCode: string;
+  email?: string;
+  hasBack?: boolean;
+  onBack?: () => void;
 };
 
-const ErxesSDK: React.FC<PropTypes> = ({ brandCode }) => {
+const ErxesSDK: React.FC<PropTypes> = ({
+  brandCode,
+  email,
+  hasBack = false,
+  onBack = () => {},
+}) => {
+  const RootStack = createStackNavigator();
+
+  const [connection, setConnection] = React.useState<any>({
+    cachedCustomerId: null,
+    visitorId: null,
+  });
+
+  const props = { brandCode, email, hasBack, onBack, connection };
+
+  useEffect(() => {
+    let visitorId;
+    let tempCustomerId = '';
+    AsyncStorage.getItem('clockId')
+      .then((value) => {
+        if (value !== null) {
+          tempCustomerId = value;
+        }
+      })
+      .catch((e) => {
+        console.log('checkIntro', e.message);
+      });
+    if (!tempCustomerId) {
+      // declare the data fetching function
+      const fetchData = async () => {
+        visitorId = await getVisitorId();
+      };
+
+      // call the function
+      fetchData()
+        // make sure to catch any error
+        .catch(console.error);
+    }
+    setConnection({
+      cachedCustomerId: tempCustomerId,
+      visitorId,
+    });
+  }, []);
+
   return (
     <ApolloProvider client={ClientProvider()}>
-      <Widget brandCode={brandCode} />
+      <NavigationContainer>
+        <RootStack.Navigator>
+          <RootStack.Screen
+            name="Widget"
+            options={{
+              headerShown: false,
+              gestureEnabled: false,
+            }}
+          >
+            {(rest: any) => <Widget {...rest} {...props} />}
+          </RootStack.Screen>
+          <RootStack.Screen
+            name="ConversationDetail"
+            component={ConversationDetail}
+            options={{
+              headerShown: false,
+              cardStyleInterpolator: ({ current }) => ({
+                cardStyle: {
+                  opacity: current.progress,
+                },
+              }),
+            }}
+          />
+        </RootStack.Navigator>
+      </NavigationContainer>
     </ApolloProvider>
   );
 };

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' } },
   });