rn-erxes-sdk 0.1.24 → 0.1.26

package/lib/module/utils/objectId.js

@@ -0,0 +1,53 @@
+/* eslint-disable no-bitwise */
+// Lightweight, React Native-compatible replacement for `bson`'s `ObjectId`.
+//
+// The SDK only ever used `new ObjectId().toString()` to mint a `visitorId`,
+// which the erxes backend accepts as a plain `String`. Importing the whole
+// `bson` package for this pulls in `bson/lib/bson.mjs`, whose top-level
+// `await` crashes Metro/Hermes ("await is not defined") once Expo resolves
+// packages through the ESM `exports` map.
+//
+// This helper returns the exact same shape an ObjectId stringifies to:
+// 24 lowercase hexadecimal characters (a 12-byte value made of a 4-byte
+// big-endian timestamp followed by 8 random bytes).
+
+const toHex = bytes => {
+  let out = '';
+  for (let i = 0; i < bytes.length; i++) {
+    const byte = bytes[i];
+    out += byte.toString(16).padStart(2, '0');
+  }
+  return out;
+};
+const getRandomBytes = length => {
+  const bytes = new Uint8Array(length);
+
+  // `react-native-get-random-values` (imported by the SDK entry point)
+  // polyfills `crypto.getRandomValues` on device. Fall back to `Math.random`
+  // so the helper still works in environments without the polyfill (e.g. Jest).
+  const cryptoObj = typeof globalThis !== 'undefined' ? globalThis.crypto : undefined;
+  if (cryptoObj && typeof cryptoObj.getRandomValues === 'function') {
+    cryptoObj.getRandomValues(bytes);
+    return bytes;
+  }
+  for (let i = 0; i < length; i++) {
+    bytes[i] = Math.floor(Math.random() * 256);
+  }
+  return bytes;
+};
+export const createObjectIdLikeString = () => {
+  const bytes = new Uint8Array(12);
+
+  // 4-byte big-endian timestamp (seconds since epoch), like a real ObjectId.
+  const timestamp = Math.floor(Date.now() / 1000);
+  bytes[0] = timestamp >> 24 & 0xff;
+  bytes[1] = timestamp >> 16 & 0xff;
+  bytes[2] = timestamp >> 8 & 0xff;
+  bytes[3] = timestamp & 0xff;
+
+  // Remaining 8 bytes from a CSPRNG when available.
+  bytes.set(getRandomBytes(8), 4);
+  return toHex(bytes);
+};
+export default createObjectIdLikeString;
+//# sourceMappingURL=objectId.js.map

package/lib/module/utils/objectId.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toHex","bytes","out","i","length","byte","toString","padStart","getRandomBytes","Uint8Array","cryptoObj","globalThis","crypto","undefined","getRandomValues","Math","floor","random","createObjectIdLikeString","timestamp","Date","now","set"],"sourceRoot":"../../../src","sources":["utils/objectId.ts"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMA,KAAK,GAAIC,KAAiB,IAAa;EAC3C,IAAIC,GAAG,GAAG,EAAE;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,KAAK,CAACG,MAAM,EAAED,CAAC,EAAE,EAAE;IACrC,MAAME,IAAI,GAAGJ,KAAK,CAACE,CAAC,CAAW;IAC/BD,GAAG,IAAIG,IAAI,CAACC,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAC3C;EACA,OAAOL,GAAG;AACZ,CAAC;AAED,MAAMM,cAAc,GAAIJ,MAAc,IAAiB;EACrD,MAAMH,KAAK,GAAG,IAAIQ,UAAU,CAACL,MAAM,CAAC;;EAEpC;EACA;EACA;EACA,MAAMM,SAAS,GACb,OAAOC,UAAU,KAAK,WAAW,GAAIA,UAAU,CAASC,MAAM,GAAGC,SAAS;EAE5E,IAAIH,SAAS,IAAI,OAAOA,SAAS,CAACI,eAAe,KAAK,UAAU,EAAE;IAChEJ,SAAS,CAACI,eAAe,CAACb,KAAK,CAAC;IAChC,OAAOA,KAAK;EACd;EAEA,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGC,MAAM,EAAED,CAAC,EAAE,EAAE;IAC/BF,KAAK,CAACE,CAAC,CAAC,GAAGY,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;EAC5C;EACA,OAAOhB,KAAK;AACd,CAAC;AAED,OAAO,MAAMiB,wBAAwB,GAAGA,CAAA,KAAc;EACpD,MAAMjB,KAAK,GAAG,IAAIQ,UAAU,CAAC,EAAE,CAAC;;EAEhC;EACA,MAAMU,SAAS,GAAGJ,IAAI,CAACC,KAAK,CAACI,IAAI,CAACC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC;EAC/CpB,KAAK,CAAC,CAAC,CAAC,GAAIkB,SAAS,IAAI,EAAE,GAAI,IAAI;EACnClB,KAAK,CAAC,CAAC,CAAC,GAAIkB,SAAS,IAAI,EAAE,GAAI,IAAI;EACnClB,KAAK,CAAC,CAAC,CAAC,GAAIkB,SAAS,IAAI,CAAC,GAAI,IAAI;EAClClB,KAAK,CAAC,CAAC,CAAC,GAAGkB,SAAS,GAAG,IAAI;;EAE3B;EACAlB,KAAK,CAACqB,GAAG,CAACd,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;EAE/B,OAAOR,KAAK,CAACC,KAAK,CAAC;AACrB,CAAC;AAED,eAAeiB,wBAAwB"}

package/lib/typescript/components/InputTools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputTools.d.ts","sourceRoot":"","sources":["../../../src/components/InputTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAoCpE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAuO7B,CAAC;AA0IF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"InputTools.d.ts","sourceRoot":"","sources":["../../../src/components/InputTools.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAoCpE,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAwO7B,CAAC;AA0IF,eAAe,UAAU,CAAC"}

package/lib/typescript/screen/home/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../../../src/screen/home/Home.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAe1C,QAAA,MAAM,IAAI,yBA8IT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../../../src/screen/home/Home.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAkB1C,QAAA,MAAM,IAAI,yBA8MT,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

@@ -0,0 +1,3 @@
+export declare const createObjectIdLikeString: () => string;
+export default createObjectIdLikeString;
+//# sourceMappingURL=objectId.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"objectId.d.ts","sourceRoot":"","sources":["../../../src/utils/objectId.ts"],"names":[],"mappings":"AA0CA,eAAO,MAAM,wBAAwB,QAAO,MAc3C,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-erxes-sdk",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "react-native erxes sdk",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -40,7 +40,10 @@
     "ios",
     "android"
   ],
-  "repository": "https://github.com/erxes/rn-erxes-sdk",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erxes/rn-erxes-sdk.git"
+  },
   "author": "Munkh-orgil <monkhorgilbayarbaatar@gmail.com> (https://github.com/Munkhorgilb)",
   "license": "MIT",
   "bugs": {
@@ -169,7 +172,6 @@
   },
   "dependencies": {
     "@apollo/client": "^3.14.1",
-    "bson": "^5.3.0",
     "dayjs": "^1.11.8",
     "graphql": "^16.6.0",
     "graphql-ws": "^5.13.1",

package/src/App.tsx

@@ -2,7 +2,7 @@ import 'react-native-get-random-values';
 import React, { useEffect } from 'react';
 import Widget from './Widget';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { ObjectId } from 'bson';
+import { createObjectIdLikeString } from './utils/objectId';
 import ApolloContainer from './graphql/ApolloContainer';
 
 export type PropTypes = {
@@ -44,7 +44,7 @@ const ErxesSDK: React.FC<PropTypes> = ({
   const [show, setShow] = React.useState<boolean>(showWidget);
 
   useEffect(() => {
-    let visitorId: any;
+    let visitorId: string | undefined;
     let tempCustomerId = '';
     setLoading(true);
     AsyncStorage.getItem('cachedCustomerId')
@@ -53,12 +53,12 @@ const ErxesSDK: React.FC<PropTypes> = ({
           tempCustomerId = JSON.parse(value);
         }
         if (!tempCustomerId) {
-          // declare the data fetching function
-          visitorId = new ObjectId();
+          // mint a guest visitor id (24-char hex, same shape as a Mongo ObjectId)
+          visitorId = createObjectIdLikeString();
         }
         setConnection({
           cachedCustomerId: tempCustomerId ? tempCustomerId : null,
-          visitorId: visitorId?.toString(),
+          visitorId: visitorId,
         });
         AsyncStorage.getItem('conversationId')
           .then((v) => {
@@ -75,7 +75,7 @@ const ErxesSDK: React.FC<PropTypes> = ({
       .catch((e) => {
         setConnection({
           cachedCustomerId: null,
-          visitorId: new ObjectId(),
+          visitorId: createObjectIdLikeString(),
         });
         setLoading(false);
         console.log('Failed on cachedCustomerId', e.message);

package/src/assets/images/index.ts

@@ -1,7 +1,7 @@
 const images = {
   facebook: require('./Facebook.png'),
   youtube: require('./Youtube.png'),
-  twitter: require('./Twitter.png'),
+  twitter: require('./x.png'),
   avatar: require('./avatar.png'),
   logo: require('./logo.png'),
 };

package/src/components/InputTools.tsx

@@ -42,6 +42,7 @@ const InputTools: React.FC<any> = (props: any) => {
     subDomain,
     persistentMenus,
     sending = false,
+    placeholder = 'Reply...',
   } = props;
 
   const [input, onInput] = useState<string>('');
@@ -205,7 +206,7 @@ const InputTools: React.FC<any> = (props: any) => {
         ) : null}
 
         <TextInput
-          placeholder={'Reply...'}
+          placeholder={placeholder}
           selectionColor={bgColor}
           underlineColorAndroid={'transparent'}
           style={styles.textInput}

package/src/screen/home/Home.tsx

@@ -8,9 +8,11 @@ import {
   Platform,
   StatusBar,
   ScrollView,
+  KeyboardAvoidingView,
 } from 'react-native';
 import React, { useContext } from 'react';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { useMutation } from '@apollo/client';
 import AppContext from '../../context/Context';
 import Supporters from '../greetings/Supporters';
 import Social from '../greetings/Social';
@@ -20,6 +22,8 @@ import {
   AVAILABILITY_MESSAGE,
   formatOnlineHours,
 } from '../../utils/onlineHours';
+import InputTools from '../../components/InputTools';
+import { widgetsInsertMessage } from '../../graphql/mutation';
 
 const LOGO_CHIP = 36;
 
@@ -35,12 +39,20 @@ const Home = () => {
     textColor,
     logoUrl,
     integrationId,
+    customerId,
+    visitorId,
     showWidget,
     setShow,
     setConversationId,
     backIcon,
+    sendIcon,
+    subDomain,
   } = value;
 
+  const [sendMutation] = useMutation(widgetsInsertMessage);
+  const [sending, setSending] = React.useState(false);
+  const sendingRef = React.useRef(false);
+
   const greetingMessages = greetings?.messages?.greetings;
   const title = greetingMessages?.title || 'How can we help?';
   const message =
@@ -58,6 +70,48 @@ const Home = () => {
     setConversationId('');
   };
 
+  const onSend = (text: string, attachments?: any[]) => {
+    if (sendingRef.current) {
+      return;
+    }
+
+    sendingRef.current = true;
+    setSending(true);
+
+    sendMutation({
+      variables: {
+        integrationId,
+        customerId,
+        visitorId,
+        conversationId: null,
+        contentType: 'text',
+        message: text,
+        attachments:
+          attachments && attachments.length > 0 ? attachments : undefined,
+      },
+    })
+      .then((res: any) => {
+        if (res.errors) {
+          return console.log(res.errors);
+        }
+
+        const insertedMessage = res.data.widgetsInsertMessage;
+        const nextConversationId = insertedMessage?.conversationId;
+
+        if (nextConversationId) {
+          AsyncStorage.setItem('conversationId', nextConversationId);
+          setConversationId(nextConversationId);
+        }
+      })
+      .catch((err: any) => {
+        console.log(err);
+      })
+      .finally(() => {
+        sendingRef.current = false;
+        setSending(false);
+      });
+  };
+
   const renderLogoButton = () => {
     if (!showWidget && !hasBack) {
       return <View style={{ width: LOGO_CHIP, height: LOGO_CHIP }} />;
@@ -86,10 +140,15 @@ const Home = () => {
     Platform.OS === 'android' ? StatusBar.currentHeight || 0 : 0;
 
   return (
-    <View style={styles.root}>
+    <KeyboardAvoidingView
+      style={styles.root}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
       <ScrollView
+        style={styles.scroll}
         showsVerticalScrollIndicator={false}
         contentContainerStyle={styles.scrollContent}
+        keyboardShouldPersistTaps="handled"
       >
         {/* Hero */}
         <SafeAreaView style={[styles.hero, { backgroundColor: bgColor }]}>
@@ -164,7 +223,16 @@ const Home = () => {
           </View>
         </View>
       </ScrollView>
-    </View>
+      <InputTools
+        onSend={onSend}
+        bgColor={bgColor}
+        sendIcon={sendIcon}
+        subDomain={subDomain}
+        sending={sending}
+        persistentMenus={greetings?.persistentMenus}
+        placeholder="Start a new conversation..."
+      />
+    </KeyboardAvoidingView>
   );
 };
 
@@ -175,6 +243,9 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: messengerTheme.colors.background,
   },
+  scroll: {
+    flex: 1,
+  },
   scrollContent: {
     paddingBottom: messengerTheme.spacing.xl,
   },

package/src/utils/objectId.ts

@@ -0,0 +1,59 @@
+/* eslint-disable no-bitwise */
+// Lightweight, React Native-compatible replacement for `bson`'s `ObjectId`.
+//
+// The SDK only ever used `new ObjectId().toString()` to mint a `visitorId`,
+// which the erxes backend accepts as a plain `String`. Importing the whole
+// `bson` package for this pulls in `bson/lib/bson.mjs`, whose top-level
+// `await` crashes Metro/Hermes ("await is not defined") once Expo resolves
+// packages through the ESM `exports` map.
+//
+// This helper returns the exact same shape an ObjectId stringifies to:
+// 24 lowercase hexadecimal characters (a 12-byte value made of a 4-byte
+// big-endian timestamp followed by 8 random bytes).
+
+const toHex = (bytes: Uint8Array): string => {
+  let out = '';
+  for (let i = 0; i < bytes.length; i++) {
+    const byte = bytes[i] as number;
+    out += byte.toString(16).padStart(2, '0');
+  }
+  return out;
+};
+
+const getRandomBytes = (length: number): Uint8Array => {
+  const bytes = new Uint8Array(length);
+
+  // `react-native-get-random-values` (imported by the SDK entry point)
+  // polyfills `crypto.getRandomValues` on device. Fall back to `Math.random`
+  // so the helper still works in environments without the polyfill (e.g. Jest).
+  const cryptoObj =
+    typeof globalThis !== 'undefined' ? (globalThis as any).crypto : undefined;
+
+  if (cryptoObj && typeof cryptoObj.getRandomValues === 'function') {
+    cryptoObj.getRandomValues(bytes);
+    return bytes;
+  }
+
+  for (let i = 0; i < length; i++) {
+    bytes[i] = Math.floor(Math.random() * 256);
+  }
+  return bytes;
+};
+
+export const createObjectIdLikeString = (): string => {
+  const bytes = new Uint8Array(12);
+
+  // 4-byte big-endian timestamp (seconds since epoch), like a real ObjectId.
+  const timestamp = Math.floor(Date.now() / 1000);
+  bytes[0] = (timestamp >> 24) & 0xff;
+  bytes[1] = (timestamp >> 16) & 0xff;
+  bytes[2] = (timestamp >> 8) & 0xff;
+  bytes[3] = timestamp & 0xff;
+
+  // Remaining 8 bytes from a CSPRNG when available.
+  bytes.set(getRandomBytes(8), 4);
+
+  return toHex(bytes);
+};
+
+export default createObjectIdLikeString;