rn-erxes-sdk 0.1.4 → 0.1.5

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/lib/commonjs/index.html

@@ -1,114 +0,0 @@
-<html>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta charset="utf-8" />
-
-  <body id="mbody" onload="openMessenger()"></body>
-  <script>
-    function openMessenger() {
-      setTimeout(function () {
-        window.Erxes.showMessenger();
-      }, 3000);
-    }
-
-    window.addEventListener('message', (e) => {
-      const { data } = e;
-      const { notificationCount } = data;
-
-      if (notificationCount !== undefined) {
-        window.ReactNativeWebView.postMessage(JSON.stringify(data));
-      }
-    });
-  </script>
-
-  <style>
-    #mbody {
-      align-items: center;
-      justify-content: center;
-      background-color: rgb(189, 189, 188);
-      display: flex;
-      /* flex-direction: column; */
-    }
-
-    .topbar-button {
-      visibility: hidden;
-    }
-
-    .loader {
-      border: 5px solid #f3f3f3;
-      /* Light grey */
-      border-top: 5px solid #3498db;
-      /* Blue */
-      border-radius: 50%;
-      width: 50px;
-      height: 50px;
-      animation: spin 5s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* CSS */
-    .button-75 {
-      align-items: center;
-      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
-      border: 0;
-      border-radius: 10px;
-      box-sizing: border-box;
-      color: #fff;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      /* font-family: "Codec cold", sans-serif; */
-      font-size: 16px;
-      font-weight: 700;
-      height: 54px;
-      justify-content: center;
-      letter-spacing: 0.4px;
-      line-height: 1;
-      max-width: 100%;
-      padding-left: 20px;
-      padding-right: 20px;
-      padding-top: 3px;
-      text-decoration: none;
-      text-transform: uppercase;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-    }
-
-    .button-75:active {
-      outline: 0;
-    }
-
-    .button-75:hover {
-      outline: 0;
-    }
-
-    .button-75 span {
-      transition: all 200ms;
-    }
-
-    .button-75:hover span {
-      transform: scale(0.9);
-      opacity: 0.75;
-    }
-
-    @media screen and (max-width: 991px) {
-      .button-75 {
-        font-size: 15px;
-        height: 50px;
-      }
-
-      .button-75 span {
-        line-height: 50px;
-      }
-    }
-  </style>
-</html>

package/lib/module/index.html

@@ -1,114 +0,0 @@
-<html>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta charset="utf-8" />
-
-  <body id="mbody" onload="openMessenger()"></body>
-  <script>
-    function openMessenger() {
-      setTimeout(function () {
-        window.Erxes.showMessenger();
-      }, 3000);
-    }
-
-    window.addEventListener('message', (e) => {
-      const { data } = e;
-      const { notificationCount } = data;
-
-      if (notificationCount !== undefined) {
-        window.ReactNativeWebView.postMessage(JSON.stringify(data));
-      }
-    });
-  </script>
-
-  <style>
-    #mbody {
-      align-items: center;
-      justify-content: center;
-      background-color: rgb(189, 189, 188);
-      display: flex;
-      /* flex-direction: column; */
-    }
-
-    .topbar-button {
-      visibility: hidden;
-    }
-
-    .loader {
-      border: 5px solid #f3f3f3;
-      /* Light grey */
-      border-top: 5px solid #3498db;
-      /* Blue */
-      border-radius: 50%;
-      width: 50px;
-      height: 50px;
-      animation: spin 5s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* CSS */
-    .button-75 {
-      align-items: center;
-      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
-      border: 0;
-      border-radius: 10px;
-      box-sizing: border-box;
-      color: #fff;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      /* font-family: "Codec cold", sans-serif; */
-      font-size: 16px;
-      font-weight: 700;
-      height: 54px;
-      justify-content: center;
-      letter-spacing: 0.4px;
-      line-height: 1;
-      max-width: 100%;
-      padding-left: 20px;
-      padding-right: 20px;
-      padding-top: 3px;
-      text-decoration: none;
-      text-transform: uppercase;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-    }
-
-    .button-75:active {
-      outline: 0;
-    }
-
-    .button-75:hover {
-      outline: 0;
-    }
-
-    .button-75 span {
-      transition: all 200ms;
-    }
-
-    .button-75:hover span {
-      transform: scale(0.9);
-      opacity: 0.75;
-    }
-
-    @media screen and (max-width: 991px) {
-      .button-75 {
-        font-size: 15px;
-        height: 50px;
-      }
-
-      .button-75 span {
-        line-height: 50px;
-      }
-    }
-  </style>
-</html>

package/src/index.html

@@ -1,114 +0,0 @@
-<html>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta charset="utf-8" />
-
-  <body id="mbody" onload="openMessenger()"></body>
-  <script>
-    function openMessenger() {
-      setTimeout(function () {
-        window.Erxes.showMessenger();
-      }, 3000);
-    }
-
-    window.addEventListener('message', (e) => {
-      const { data } = e;
-      const { notificationCount } = data;
-
-      if (notificationCount !== undefined) {
-        window.ReactNativeWebView.postMessage(JSON.stringify(data));
-      }
-    });
-  </script>
-
-  <style>
-    #mbody {
-      align-items: center;
-      justify-content: center;
-      background-color: rgb(189, 189, 188);
-      display: flex;
-      /* flex-direction: column; */
-    }
-
-    .topbar-button {
-      visibility: hidden;
-    }
-
-    .loader {
-      border: 5px solid #f3f3f3;
-      /* Light grey */
-      border-top: 5px solid #3498db;
-      /* Blue */
-      border-radius: 50%;
-      width: 50px;
-      height: 50px;
-      animation: spin 5s linear infinite;
-    }
-
-    @keyframes spin {
-      0% {
-        transform: rotate(0deg);
-      }
-
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
-    /* CSS */
-    .button-75 {
-      align-items: center;
-      background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
-      border: 0;
-      border-radius: 10px;
-      box-sizing: border-box;
-      color: #fff;
-      cursor: pointer;
-      display: flex;
-      flex-direction: column;
-      /* font-family: "Codec cold", sans-serif; */
-      font-size: 16px;
-      font-weight: 700;
-      height: 54px;
-      justify-content: center;
-      letter-spacing: 0.4px;
-      line-height: 1;
-      max-width: 100%;
-      padding-left: 20px;
-      padding-right: 20px;
-      padding-top: 3px;
-      text-decoration: none;
-      text-transform: uppercase;
-      user-select: none;
-      -webkit-user-select: none;
-      touch-action: manipulation;
-    }
-
-    .button-75:active {
-      outline: 0;
-    }
-
-    .button-75:hover {
-      outline: 0;
-    }
-
-    .button-75 span {
-      transition: all 200ms;
-    }
-
-    .button-75:hover span {
-      transform: scale(0.9);
-      opacity: 0.75;
-    }
-
-    @media screen and (max-width: 991px) {
-      .button-75 {
-        font-size: 15px;
-        height: 50px;
-      }
-
-      .button-75 span {
-        line-height: 50px;
-      }
-    }
-  </style>
-</html>