react-native-queue-it
React Native Module for integrating Queue-it's virtual waiting room into React Native apps.
Sample app
A sample app project to try out functionality in the library can be found in the example directory.
Installation
Before starting please download the whitepaper Mobile App Integration from the Go Queue-it Platform. This whitepaper contains the needed information to perform a successful integration.
Using npm you can install the module:
npm install --save react-native-queue-it
cd ios && pod install
When Android is used, the following activity also needs to be included in the application's manifest file.
<activity android:name="com.queue_it.androidsdk.QueueActivity"/>
Usage
To protect parts of your application you'll need to make a QueueIt.run
call and await it's result.
Once the async call completes, the user has gone through the queue and you get a QueueITToken for this session.
import {
QueueIt,
EnqueueResultState,
EnqueueResult,
} from 'react-native-queue-it';
enqueue = async () => {
try {
console.log('going to queue-it');
QueueIt.once('openingQueueView', () => {
console.log('opening queue page..');
});
QueueIt.once('webViewClosed', () => {
console.log('The queue page is closed by the user.');
});
const layoutName = null;
const language = null;
let enqueueResult: EnqueueResult;
if (this.state.enqueueKey) {
enqueueResult = await QueueIt.runWithEnqueueKey(
this.state.clientId,
this.state.eventOrAlias,
this.getEnqueueKey(),
'mobile'
);
} else if (this.state.enqueueToken) {
enqueueResult = await QueueIt.runWithEnqueueToken(
this.state.clientId,
this.state.eventOrAlias,
this.getEnqueueToken(),
'mobile'
);
} else {
enqueueResult = await QueueIt.run(
this.state.clientId,
this.state.eventOrAlias,
'mobile'
);
}
switch (enqueueResult.State) {
case EnqueueResultState.Disabled:
console.log(`queue is disabled and QueueITToken is: ${enqueueResult.QueueITToken}`);
break;
case EnqueueResultState.Passed:
console.log(
`user got his turn, with QueueITToken: ${enqueueResult.QueueITToken}`
);
break;
case EnqueueResultState.Unavailable:
console.log('queue is unavailable');
break;
case EnqueueResultState.RestartedSession:
console.log('user decided to restart the session');
await this.enqueue();
}
return enqueueResult.QueueITToken;
} catch (e) {
console.log(`error: ${e}`);
}
};
getEnqueueToken = () => 'myToken';
getEnqueueKey = () => 'myKey';
As the App developer you must manage the state (whether user was previously queued up or not) inside your app's storage. After you have awaited the run
call, the app must remember this, possibly with a date/time expiration. When the user goes to another page/screen - you check his state, and only call run
in the case where the user was not previously queued up. When the user clicks back, the same check needs to be done.
Events
You can receive events from this library by subscribing to it:
QueueIt.once('openingQueueView', () => console.log('opening queue page..'));
const listener = QueueIt.on('openingQueueView', () =>
console.log('opening queue page..')
);
listener.remove();
Right now these are the events that are emitted:
openingQueueView
- Happens whenever the queue screen is going to be shown.
License
MIT