rn-erxes-sdk 0.1.4 → 0.1.6

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

package/src/Widget.tsx

@@ -0,0 +1,138 @@
+/* eslint-disable react-native/no-inline-styles */
+import { View, StyleSheet, TouchableOpacity, Text } 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';
+
+const Widget = (props: any) => {
+  const { brandCode } = 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,
+      },
+    })
+      .then((res: any) => {
+        setResponse(res);
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const bgColor = response?.data?.widgetsMessengerConnect?.uiOptions?.color;
+  const integrationId = response?.data?.widgetsMessengerConnect?.integrationId;
+  const knowledgeBaseTopicId =
+    response?.data?.widgetsMessengerConnect?.messengerData
+      ?.knowledgeBaseTopicId;
+
+  return (
+    <View style={styles.container}>
+      <Greetings
+        greetings={response?.data?.widgetsMessengerConnect?.messengerData}
+        bgColor={bgColor}
+        integrationId={integrationId}
+      />
+      <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 styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/apolloClient.ts

@@ -0,0 +1,57 @@
+import {
+  ApolloClient,
+  InMemoryCache,
+  split,
+  from,
+  createHttpLink,
+} from '@apollo/client/core';
+import { onError } from '@apollo/client/link/error';
+import { getMainDefinition } from '@apollo/client/utilities';
+import { createClient } from 'graphql-ws';
+import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
+
+const baseUrl = 'office.erxes.io/gateway';
+
+export const apiUrl = `https://${baseUrl}`;
+
+// Subscription config
+export const wsLink: any = new GraphQLWsLink(
+  createClient({
+    url: `wss://${baseUrl}/graphql` || 'ws://localhost:4000/graphql',
+    retryAttempts: 1000,
+    retryWait: async () => {
+      await new Promise((resolve) => setTimeout(resolve, 5000));
+    },
+  })
+);
+
+const logoutLink = onError(({ networkError, graphQLErrors }) => {
+  console.log('--netError', networkError);
+  console.log('--gqlError', graphQLErrors);
+});
+
+const httpLink = createHttpLink({
+  uri: `${apiUrl}/graphql`,
+  credentials: 'include',
+});
+
+const splitLink = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query);
+    return (
+      definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+    );
+  },
+  wsLink,
+  from([logoutLink, httpLink])
+);
+
+const ClientProvider = () =>
+  new ApolloClient({
+    link: splitLink,
+    cache: new InMemoryCache(),
+    defaultOptions: { watchQuery: { fetchPolicy: 'network-only' } },
+  });
+
+export default ClientProvider;

package/src/assets/images/index.ts

@@ -0,0 +1,8 @@
+const images = {
+  facebook: require('./Facebook.png'),
+  youtube: require('./Youtube.png'),
+  twitter: require('./Twitter.png'),
+  avatar: require('./avatar.png'),
+};
+
+export default images;

package/src/graphql/graphql.ts

@@ -0,0 +1,108 @@
+import { gql } from '@apollo/client';
+
+const widgetsMessengerSupporters = gql`
+  query widgetsMessengerSupporters($integrationId: String!) {
+    widgetsMessengerSupporters(integrationId: $integrationId) {
+      supporters {
+        _id
+        isActive
+        details {
+          avatar
+          fullName
+          shortName
+          location
+          __typename
+        }
+        isOnline
+        __typename
+      }
+      isOnline
+      __typename
+    }
+  }
+`;
+
+const widgetsConversations = gql`
+  query widgetsConversations(
+    $integrationId: String!
+    $customerId: String
+    $visitorId: String
+  ) {
+    widgetsConversations(
+      integrationId: $integrationId
+      customerId: $customerId
+      visitorId: $visitorId
+    ) {
+      _id
+      content
+      createdAt
+      participatedUsers {
+        details {
+          avatar
+          fullName
+          __typename
+        }
+        __typename
+      }
+      __typename
+    }
+  }
+`;
+
+const knowledgeBaseTopicDetail = gql`
+  query knowledgeBaseTopicDetail($_id: String!) {
+    knowledgeBaseTopicDetail(_id: $_id) {
+      title
+      description
+      categories {
+        _id
+        title
+        description
+        numOfArticles
+        parentCategoryId
+        icon
+        __typename
+      }
+      parentCategories {
+        _id
+        title
+        description
+        numOfArticles
+        parentCategoryId
+        icon
+        __typename
+      }
+      __typename
+    }
+  }
+`;
+
+const knowledgeBaseCategoryDetail = gql`
+  query knowledgeBaseCategoryDetail($_id: String!) {
+    knowledgeBaseCategoryDetail(_id: $_id) {
+      _id
+      title
+      description
+      numOfArticles
+      parentCategoryId
+      icon
+      parentCategoryId
+      articles {
+        _id
+        title
+        summary
+        content
+        createdDate
+        __typename
+      }
+      __typename
+    }
+  }
+`;
+
+export {
+  widgetsMessengerSupporters,
+  widgetsConversations,
+  knowledgeBaseTopicDetail,
+  knowledgeBaseCategoryDetail,
+};

package/src/graphql/mutation.ts

@@ -0,0 +1,42 @@
+import { gql } from '@apollo/client';
+
+const connect = gql`
+  mutation connect(
+    $brandCode: String!
+    $email: String
+    $phone: String
+    $code: String
+    $isUser: Boolean
+    $data: JSON
+    $companyData: JSON
+    $cachedCustomerId: String
+    $visitorId: String
+  ) {
+    widgetsMessengerConnect(
+      brandCode: $brandCode
+      email: $email
+      phone: $phone
+      code: $code
+      isUser: $isUser
+      data: $data
+      companyData: $companyData
+      cachedCustomerId: $cachedCustomerId
+      visitorId: $visitorId
+    ) {
+      integrationId
+      messengerData
+      languageCode
+      uiOptions
+      customerId
+      visitorId
+      brand {
+        name
+        description
+        __typename
+      }
+      __typename
+    }
+  }
+`;
+
+export { connect };

package/src/icons/MaterialCommunityIcons.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { StyleSheet, Text, Platform } from 'react-native';
+
+export type IconProps = {
+  name: string;
+  color: string;
+  size: number;
+  direction: 'rtl' | 'ltr';
+  allowFontScaling?: boolean;
+};
+
+let MaterialCommunityIcons: any;
+
+try {
+  // Optionally require vector-icons
+  MaterialCommunityIcons =
+    require('react-native-vector-icons/MaterialCommunityIcons').default;
+} catch (e) {
+  let isErrorLogged = false;
+
+  // 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);
+      }
+
+      console.warn(
+        `To remove this warning, try installing 'react-native-vector-icons'`
+      );
+
+      isErrorLogged = true;
+    }
+
+    return (
+      <Text
+        {...rest}
+        style={[styles.icon, { color, fontSize: size }]}
+        pointerEvents="none"
+        selectable={false}
+      >
+        □
+      </Text>
+    );
+  };
+}
+
+export const accessibilityProps =
+  Platform.OS === 'web'
+    ? {
+        role: 'img',
+        focusable: false,
+      }
+    : {
+        accessibilityElementsHidden: true,
+        importantForAccessibility:
+          'no-hide-descendants' as 'no-hide-descendants',
+      };
+
+const defaultIcon = ({
+  name,
+  color,
+  size,
+  direction,
+  allowFontScaling,
+}: IconProps) => (
+  <MaterialCommunityIcons
+    allowFontScaling={allowFontScaling}
+    name={name}
+    color={color}
+    size={size}
+    style={[
+      {
+        transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+        lineHeight: size,
+      },
+      styles.icon,
+    ]}
+    pointerEvents="none"
+    selectable={false}
+    {...accessibilityProps}
+  />
+);
+
+const styles = StyleSheet.create({
+  icon: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export default defaultIcon;