rn-erxes-sdk 0.1.3 → 0.1.5

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

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

package/lib/typescript/Social.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Social.d.ts","sourceRoot":"","sources":["../../src/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/Support.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Support.d.ts","sourceRoot":"","sources":["../../src/Support.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,QAAA,MAAM,OAAO,UAAW,GAAG,6BAiD1B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/typescript/Supporters.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Supporters.d.ts","sourceRoot":"","sources":["../../src/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/Widget.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../src/Widget.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,QAAA,MAAM,MAAM,UAAW,GAAG,sBAiDzB,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/apolloClient.d.ts

@@ -0,0 +1,6 @@
+import { ApolloClient } from '@apollo/client/core';
+export declare const apiUrl: string;
+export declare const wsLink: any;
+declare const ClientProvider: () => ApolloClient<import("@apollo/client/core").NormalizedCacheObject>;
+export default ClientProvider;
+//# sourceMappingURL=apolloClient.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"apolloClient.d.ts","sourceRoot":"","sources":["../../src/apolloClient.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAKb,MAAM,qBAAqB,CAAC;AAQ7B,eAAO,MAAM,MAAM,QAAuB,CAAC;AAG3C,eAAO,MAAM,MAAM,EAAE,GAQpB,CAAC;AAwBF,QAAA,MAAM,cAAc,yEAKhB,CAAC;AAEL,eAAe,cAAc,CAAC"}

package/lib/typescript/assets/images/index.d.ts

@@ -0,0 +1,8 @@
+declare const images: {
+    facebook: any;
+    youtube: any;
+    twitter: any;
+    avatar: any;
+};
+export default images;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/assets/images/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/assets/images/index.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,MAAM;;;;;CAKX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/typescript/graphql/graphql.d.ts

@@ -0,0 +1,6 @@
+declare const widgetsMessengerSupporters: DocumentNode;
+declare const widgetsConversations: DocumentNode;
+declare const knowledgeBaseTopicDetail: DocumentNode;
+declare const knowledgeBaseCategoryDetail: DocumentNode;
+export { widgetsMessengerSupporters, widgetsConversations, knowledgeBaseTopicDetail, knowledgeBaseCategoryDetail, };
+//# sourceMappingURL=graphql.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graphql.d.ts","sourceRoot":"","sources":["../../../src/graphql/graphql.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,0BAA0B,cAoB/B,CAAC;AAEF,QAAA,MAAM,oBAAoB,cAyBzB,CAAC;AAEF,QAAA,MAAM,wBAAwB,cA0B7B,CAAC;AAEF,QAAA,MAAM,2BAA2B,cAqBhC,CAAC;AAEF,OAAO,EACL,0BAA0B,EAC1B,oBAAoB,EACpB,wBAAwB,EACxB,2BAA2B,GAC5B,CAAC"}

package/lib/typescript/graphql/mutation.d.ts

@@ -0,0 +1,3 @@
+declare const connect: DocumentNode;
+export { connect };
+//# sourceMappingURL=mutation.d.ts.map

package/lib/typescript/graphql/mutation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mutation.d.ts","sourceRoot":"","sources":["../../../src/graphql/mutation.ts"],"names":[],"mappings":"AAEA,QAAA,MAAM,OAAO,cAqCZ,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-erxes-sdk",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "react-native erxes sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -40,13 +40,13 @@
     "ios",
     "android"
   ],
-  "repository": "https://github.com/Munkhorgilb/rn-erxes-sdk",
+  "repository": "https://github.com/erxes/rn-erxes-sdk",
   "author": "Munkh-orgil <monkhorgilbayarbaatar@gmail.com> (https://github.com/Munkhorgilb)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Munkhorgilb/rn-erxes-sdk/issues"
+    "url": "https://github.com/erxes/rn-erxes-sdk/issues"
   },
-  "homepage": "https://github.com/Munkhorgilb/rn-erxes-sdk#readme",
+  "homepage": "https://github.com/erxes/rn-erxes-sdk#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -157,6 +157,10 @@
     ]
   },
   "dependencies": {
-    "react-native-webview": "^12.2.0"
+    "@apollo/client": "^3.7.15",
+    "dayjs": "^1.11.8",
+    "react-native-webview": "11.26.0",
+    "graphql-ws": "^5.13.1",
+    "react-apollo": "^3.1.5"
   }
 }

package/src/App.tsx

@@ -1,51 +1,17 @@
 import React from 'react';
-import { WebView } from 'react-native-webview';
-import { Platform } from 'react-native';
+import { ApolloProvider } from '@apollo/client';
+import ClientProvider from './apolloClient';
+import Widget from './Widget';
 
 export type PropTypes = {
-  script: string;
+  brandCode: string;
 };
 
-const ErxesSDK: React.FC<PropTypes> = ({ script }) => {
-  const onMessage = (data: any) => {
-    const { notificationCount } = JSON.parse(data.nativeEvent.data);
-
-    console.log('****************** ', notificationCount);
-  };
-
+const ErxesSDK: React.FC<PropTypes> = ({ brandCode }) => {
   return (
-    <WebView
-      ref={() => {}}
-      source={
-        Platform.OS === 'ios'
-          ? require('./index.html')
-          : { uri: 'file:///android_asset/index.html' }
-      }
-      originWhitelist={['*']}
-      sharedCookiesEnabled={true}
-      cacheEnabled={true}
-      allowFileAccess={true}
-      domStorageEnabled={true}
-      thirdPartyCookiesEnabled={true}
-      // allowingReadAccessToURL
-      // style={{ width: 200 }}
-      onLoadEnd={(syntheticEvent) => {
-        // update component to be aware of loading status
-        const { nativeEvent } = syntheticEvent;
-        console.log(nativeEvent.loading);
-      }}
-      javaScriptEnabled={true}
-      onError={(er) => {
-        console.log(er);
-      }}
-      startInLoadingState={true}
-      // renderLoading={() => <Loader />}
-      injectedJavaScript={script}
-      // injectedJavaScriptBeforeContentLoaded={runFirst}
-
-      // onNavigationStateChange={this.handleWebViewNavigationStateChange}
-      onMessage={onMessage}
-    />
+    <ApolloProvider client={ClientProvider()}>
+      <Widget brandCode={brandCode} />
+    </ApolloProvider>
   );
 };
 

package/src/FAQ.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable react-native/no-inline-styles */
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  ActivityIndicator,
+} from 'react-native';
+import React, { useState } from 'react';
+import { useQuery } from '@apollo/client';
+import {
+  knowledgeBaseCategoryDetail,
+  knowledgeBaseTopicDetail,
+} from './graphql/graphql';
+
+const FAQ = (props: any) => {
+  const { knowledgeBaseTopicId } = props;
+
+  const [selectedParent, setSelectedParent] = useState<any>('');
+  const [selectedCategory, setSelectedCategory] = useState<any>('');
+
+  const { data, loading } = useQuery(knowledgeBaseTopicDetail, {
+    variables: {
+      _id: knowledgeBaseTopicId,
+    },
+  });
+
+  const { data: dataCategory, loading: loadingCategory } = useQuery(
+    knowledgeBaseCategoryDetail,
+    {
+      variables: {
+        _id: selectedCategory?._id,
+      },
+      skip: !selectedCategory,
+    }
+  );
+
+  if (loading) {
+    return null;
+  }
+
+  const renderItem = ({ item, index }: any) => {
+    const isParent = item?.parentCategoryId === null;
+    const childrenCount = isParent
+      ? data?.knowledgeBaseTopicDetail?.categories?.filter(
+          (e: any) => e?.parentCategoryId === item?._id
+        )?.length
+      : item?.numOfArticles;
+    return (
+      <TouchableOpacity
+        key={index}
+        onPress={() => {
+          if (item?.parentCategoryId === null) {
+            return setSelectedParent(item);
+          }
+          return setSelectedCategory(item);
+        }}
+        style={styles.container}
+      >
+        <Text>
+          {item?.title} ({childrenCount})
+        </Text>
+        <Text style={{ color: '#393C40', marginTop: 5 }}>
+          {item?.description}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderArticles = ({ item, index }: any) => {
+    return (
+      <TouchableOpacity key={index} style={styles.container}>
+        <Text>{item?.title}</Text>
+        <Text style={{ marginTop: 5, color: '#393C40' }}>{item?.summary}</Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderCategoryDetail = () => {
+    if (loadingCategory) {
+      return (
+        <View style={{ marginTop: 20, alignItems: 'center' }}>
+          <ActivityIndicator />
+        </View>
+      );
+    }
+    return (
+      <FlatList
+        data={dataCategory?.knowledgeBaseCategoryDetail?.articles}
+        renderItem={renderArticles}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ gap: 10, paddingBottom: 60 }}
+        ItemSeparatorComponent={seperator}
+        // eslint-disable-next-line react/no-unstable-nested-components
+        ListHeaderComponent={() => {
+          return (
+            <TouchableOpacity
+              style={{ backgroundColor: '#f7f6f9', padding: 5 }}
+              onPress={() => {
+                setSelectedCategory('');
+              }}
+            >
+              <Text style={{ marginLeft: 5 }}>Back to Categories</Text>
+            </TouchableOpacity>
+          );
+        }}
+      />
+    );
+  };
+
+  const header = () => {
+    return (
+      <TouchableOpacity
+        style={{ backgroundColor: '#f7f6f9', padding: 5 }}
+        onPress={() => {
+          setSelectedParent('');
+        }}
+      >
+        <Text style={{ marginLeft: 5 }}>Back to FAQ</Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const seperator = () => {
+    return (
+      <View style={{ height: 1, backgroundColor: '#000', marginTop: 10 }} />
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      {selectedCategory ? (
+        renderCategoryDetail()
+      ) : selectedParent ? (
+        <FlatList
+          data={data?.knowledgeBaseTopicDetail?.categories?.filter(
+            (e: any) => e?.parentCategoryId === selectedParent?._id
+          )}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={{ gap: 10, paddingBottom: 60 }}
+          ItemSeparatorComponent={seperator}
+          ListHeaderComponent={header}
+        />
+      ) : (
+        <FlatList
+          data={data?.knowledgeBaseTopicDetail?.parentCategories}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={{ gap: 10 }}
+          ItemSeparatorComponent={seperator}
+        />
+      )}
+    </View>
+  );
+};
+
+export default FAQ;
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 10,
+    marginHorizontal: 10,
+  },
+});

package/src/Greetings.tsx

@@ -0,0 +1,37 @@
+/* eslint-disable react-native/no-inline-styles */
+import { View, Text, StyleSheet, SafeAreaView } from 'react-native';
+import React from 'react';
+import Social from './Social';
+import Supporters from './Supporters';
+
+const Greetings = (props: any) => {
+  const { greetings, bgColor, integrationId } = props;
+
+  return (
+    <SafeAreaView style={{ backgroundColor: bgColor || 'green' }}>
+      <View style={[styles.title]}>
+        <Social links={greetings?.links} />
+        <View style={{ marginTop: 20 }}>
+          <Text style={{ fontWeight: '600', fontSize: 18 }}>
+            {greetings?.messages?.greetings?.title}
+          </Text>
+          <Text style={{ marginTop: 20, color: '#393C40' }}>
+            {greetings?.messages?.greetings?.message}
+          </Text>
+        </View>
+        <Supporters integrationId={integrationId} />
+      </View>
+    </SafeAreaView>
+  );
+};
+
+export default Greetings;
+
+const styles = StyleSheet.create({
+  title: {
+    paddingVertical: 10,
+    paddingHorizontal: 10,
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+});

package/src/Social.tsx

@@ -0,0 +1,46 @@
+/* eslint-disable react-native/no-inline-styles */
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  Image,
+  Linking,
+} from 'react-native';
+import React from 'react';
+import images from './assets/images';
+
+const Social = (props: any) => {
+  const { links } = props;
+
+  const renderSocial = (link: any, imageUrl: any, index: number) => {
+    return (
+      <TouchableOpacity
+        style={{ marginLeft: index !== 0 ? 10 : 0 }}
+        onPress={() => {
+          Linking.openURL(link);
+        }}
+      >
+        <Image source={imageUrl} style={styles.image} />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {links?.facebook
+        ? renderSocial(links.facebook, images.facebook, 0)
+        : null}
+      {links?.twitter ? renderSocial(links.twitter, images.twitter, 1) : null}
+      {links?.youtube ? renderSocial(links.youtube, images.youtube, 2) : null}
+    </View>
+  );
+};
+
+export default Social;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  image: { width: 30, height: 30, borderRadius: 90 },
+});

package/src/Support.tsx

@@ -0,0 +1,74 @@
+/* eslint-disable react/no-unstable-nested-components */
+/* eslint-disable react-native/no-inline-styles */
+import { View, Text, StyleSheet, FlatList, Image } from 'react-native';
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { widgetsConversations } from './graphql/graphql';
+import dayjs from 'dayjs';
+import images from './assets/images';
+
+const Support = (props: any) => {
+  const { integrationId, customerId } = props;
+
+  const { data, loading } = useQuery(widgetsConversations, {
+    variables: {
+      integrationId,
+      customerId,
+    },
+  });
+
+  if (loading) {
+    return null;
+  }
+
+  const renderItem = ({ item, index }: any) => {
+    return (
+      <View style={{ flexDirection: 'row', alignItems: 'center' }} key={index}>
+        <Image source={images.avatar} style={styles.image} />
+        <View style={{ marginLeft: 10, flex: 1 }}>
+          <Text>Support Staff</Text>
+          <Text>{item?.content}</Text>
+        </View>
+        <Text>{dayjs(item?.createdAt).format('h:mm A')}</Text>
+      </View>
+    );
+  };
+
+  const renderHeader = () => {
+    return <Text>Recent Conversations</Text>;
+  };
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={data?.widgetsConversations}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id}
+        contentContainerStyle={{ gap: 10 }}
+        ItemSeparatorComponent={() => {
+          return (
+            <View
+              style={{ height: 1, backgroundColor: '#000', marginTop: 10 }}
+            />
+          );
+        }}
+        ListHeaderComponent={renderHeader()}
+      />
+    </View>
+  );
+};
+
+export default Support;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+    borderRadius: 6,
+    flex: 1,
+  },
+  image: {
+    width: 40,
+    height: 40,
+    borderRadius: 90,
+  },
+});

package/src/Supporters.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable react-native/no-inline-styles */
+import { View, Image, StyleSheet } from 'react-native';
+import React from 'react';
+import { useQuery } from '@apollo/client';
+import { widgetsMessengerSupporters } from './graphql/graphql';
+
+const Supporters = (props: any) => {
+  const { integrationId } = props;
+
+  const { data, loading } = useQuery(widgetsMessengerSupporters, {
+    variables: {
+      integrationId,
+    },
+  });
+
+  if (loading) {
+    return null;
+  }
+
+  const supporters = data?.widgetsMessengerSupporters?.supporters;
+
+  const renderSupporter = (supporter: any, index: number) => {
+    const color = supporter?.isOnline ? 'green' : 'white';
+    return (
+      <View key={index}>
+        <Image
+          source={{ uri: supporter?.details?.avatar }}
+          style={styles.image}
+          resizeMode="center"
+        />
+        <View style={[{ backgroundColor: color }, styles.activeStatus]} />
+      </View>
+    );
+  };
+
+  return (
+    <View style={{ marginTop: 10 }}>
+      {supporters
+        ?.filter((supporter: any) => supporter?.isActive)
+        ?.map((supporter: any, index: number) => {
+          return renderSupporter(supporter, index);
+        })}
+    </View>
+  );
+};
+
+export default Supporters;
+
+const styles = StyleSheet.create({
+  image: {
+    width: 50,
+    height: 50,
+    borderRadius: 90,
+  },
+  activeStatus: {
+    width: 15,
+    height: 15,
+    borderRadius: 90,
+    position: 'absolute',
+    bottom: 0,
+    left: 35,
+  },
+});