@moxtradeveloper/react-native-moxo-module

[ Introduce • Preparation • Installation • Initialization • Sample Code • API Doc]

Introduce

react-native-moxo-module is a moxo sdk react-native wrapper. Provide Moxo OneStop capabilities to your mobile app built on React Native

Supported Platforms

• iOS 13.0+
• Android 4.4+

Preparation

Below sdk or tools are required before start to use react-native-moxo-module.

• Node.js v14+
• Watchman

Android

• Android Studio
• Android SDK v19+

iOS

• Xcode v14.3+
• Cocoapod v1.11.0+

For more react-native set up details, please ref to react native official site

Installation

npm install @moxtradeveloper/react-native-moxo-module

iOS Specific Steps

• Add moxo cocoapod repo as source into Podfile under your iOS project.
• Change pod deployment platform to iOS 13

Sample:

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
#Add moxo source here
source 'https://maven.moxtra.com/repo/moxtra-specs.git'

#Change platform version if is not iOS 13
platform :ios, '13.0'
install! 'cocoapods', :deterministic_uuids => false

# Rest of the file.....

Initialization

Login

Before login, we need to get access token, by Moxo RestAPI:

// Get access token
const response = await fetch('https://myenv.moxo.com/v1/core/oauth/token', {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        client_id: 'my_clientid',
        org_id: 'my_orgid',
        unique_id: 'my_uniqueid',
        client_secret: 'my_clientsecret'
    })
})
const json = await response.json();
token = json.access_token

Import plugin before use, then initialize moxo sdk and login with access token:

import * as moxo from 'react-native-moxo-module';
// Setup domain
moxo.setup('myenv.moxo.com')
//Login and show moxo engagement platform window
moxo.link(token).then((result)=>{
if (result)
    console.log(`Link success`)
}).catch((err=>{
    console.log(`Link failed!:${err}`);
}))

Show MEP window

After login successful, we can show MEP window directly.

moxo.showMEPWindow();

Sample Code

Open existing chat

If user is logged in, call open chat API to open existing chat. If not logged in or chat does not exists, API will return error with error code and error message.

moxo.openChat('CBSmiUUjyIJP7gR8YIpiagvH', '')

Notification

To enable notification feature, you'll need to integrate a notification module first, here we take react-native-notifications for example, which can help to get device token and notification payload.

Register notification

Through react-native-notifications registerRemoteNotifications(), post user agreement, notification will be enabled for your app. Call registerRemoteNotificationsRegistered() to get a device token. Then pass token to moxo function registerNotification() will register notification to Moxo server.

    Notifications.registerRemoteNotifications();
    Notifications.events().registerRemoteNotificationsRegistered((event: Registered) => {
      console.log("Device Token Received", event.deviceToken);
      moxo.registerNotification(event.deviceToken).catch((err=>{
        alertErr("Register notification failed", err);
      }));
    });
    Notifications.events().registerRemoteNotificationsRegistrationFailed((event: RegistrationError) => {
        console.error(event);
    });

Handle notification

For example, once notification received, and user tapped notification, react-native-notifications function registerNotificationOpened will be triggered with notification payload data. Then pass payload to moxo function parseNotification() like below:

    Notifications.events().registerNotificationOpened((notification: Notification, completion: () => void, action?: NotificationActionResponse) => {
      console.log("Notification opened by device user", notification.payload);
      if (action != undefined) {
        console.log(`Notification opened with an action identifier: ${action.identifier} and response text: ${action.text}`);
      }
      moxo.parseNotification(notification.payload).then((result=>{
        console.log(`Moxo notificaiton parse success: ${result}`);
        completion();
      })).catch(err => {
        alertErr('Notification parse failed',err)
      })
    });

If is a Moxo notification, then callback of the parseNotification() would be triggered with info parameter. Usually info contains 'chat_id' or 'meet_id', depends one which kind of notification you received. To do more, you can invoke function openChat(chat_id) to open target chat directly.

Sample notification payload

iOS

{
    "aps": {
        "alert": {
            "body": "cheng4: hi",
            "action_loc_key": "BCA"
        },
        "sound": "default"
    },
    "request": {
        "object": {
            "board": {
                "id": "CBPErkesrtOeFfURA6gusJAD",
                "feeds": [{
                    "sequence": 191
                }]
            }
        }
    },
    "id": "359",
    "moxtra": "",
    "category": "message",
    "board_id": "CBPErkesrtOeFfURA6gusJAD",
    "moxtra": ""
}

Android

[
  {
    "count": "7",
    "sound": "default",
    "title": "rm1 Zhang",
    "message": "rm1 Zhang: 1",
    "additionalData": {
       "feed_sequence": "3234",
       "action_loc_key": "BCA",
       "board_feed_unread_count": "3",
       "moxtra": "",
       "user_id": "CUxceIGfpXcHBna163lfFMD0",
       "arg1": "rm1 Zhang",
       "arg2": "1",
       "arg3": "",
       "loc_key": "BCM",
       "request": {
         "object": {
        "board": {
           "id": "CBPErkesrtOeFfURA6gusJAD",
           "feeds": [{
              "sequence": 3234
                    }]
                 }
               }
        },
       "board_id": "CBPErkesrtOeFfURA6gusJAD",
       "coldstart": false,
       "board_name": "rm1 Zhang",
       "foreground": true
    }
}]

API Doc

API doc