|
5 | 5 | React Native Module for integrating Queue-it's virtual waiting room into React Native apps. |
6 | 6 |
|
7 | 7 | ## Sample app |
| 8 | + |
8 | 9 | A sample app project to try out functionality in the library can be found in the [example](https://github.com/queueit/react-native-queue-it/tree/master/example) directory. |
9 | 10 |
|
10 | 11 | ## Installation |
| 12 | + |
11 | 13 | 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. |
12 | 14 |
|
13 | 15 | Using npm you can install the module: |
14 | | -``` sh |
| 16 | + |
| 17 | +```sh |
15 | 18 | npm install --save react-native-queue-it |
16 | 19 | #On iOS |
17 | 20 | cd ios && pod install |
18 | 21 | ``` |
19 | 22 |
|
20 | 23 | When Android is used, the following activity also needs to be included in the application's manifest file. |
21 | 24 |
|
22 | | -``` xml |
| 25 | +```xml |
23 | 26 | <activity android:name="com.queue_it.androidsdk.QueueActivity"/> |
24 | 27 | ``` |
25 | 28 |
|
26 | 29 | ## Usage |
| 30 | + |
27 | 31 | To protect parts of your application you'll need to make a `QueueIt.run` call and await it's result. |
28 | 32 | Once the async call completes, the user has gone through the queue and you get a **QueueITToken** for this session. |
29 | 33 |
|
30 | | -``` js |
31 | | -import { QueueIt, EnqueueResultState } from 'react-native-queue-it'; |
| 34 | +```tsx |
| 35 | +import { |
| 36 | + QueueIt, |
| 37 | + EnqueueResultState, |
| 38 | + EnqueueResult, |
| 39 | +} from 'react-native-queue-it'; |
32 | 40 |
|
33 | 41 | // ... |
34 | 42 |
|
35 | 43 | //This function would make the user enter a queue and it would await for his turn to come. |
36 | 44 | //It returns a QueueITToken that signifies the user's session. |
| 45 | +//If you have an enqueue key or token you need to use the matching method call. |
37 | 46 | //An exception would be thrown if: |
38 | 47 | // 1) Queue-it's servers can't be reached (connectivity issue). |
39 | 48 | // 2) SSL connection error if custom queue domain is used having an invalid certificate. |
40 | 49 | // 3) Client receives HTTP 4xx response. |
41 | 50 | // In all these cases is most likely a misconfiguration of the queue settings: |
42 | 51 | // Invalid customer ID, event alias ID or cname setting on queue (GO Queue-it portal -> event settings). |
43 | 52 | enqueue = async () => { |
44 | | - try { |
45 | | - console.log('going to queue-it'); |
46 | | - //We wait for the `openingQueueView` event to be emitted once. |
47 | | - QueueIt.once('openingQueueView', () => { |
48 | | - console.log('opening queue page..'); |
49 | | - }); |
50 | | - QueueIt.once('userExited', () => { |
51 | | - console.log('user exited the line'); |
52 | | - }); |
53 | | - //Optional layout name that should be used for the waiting room page |
54 | | - const layoutName = null; |
55 | | - //Optional language for the waiting room page |
56 | | - const language = null; |
57 | | - const enqueueResult = await QueueIt.run( |
58 | | - this.state.customerId, |
59 | | - this.state.waitingRoomIdOrAlias, |
60 | | - layoutName, |
61 | | - language |
| 53 | + try { |
| 54 | + console.log('going to queue-it'); |
| 55 | + //We wait for the `openingQueueView` event to be emitted once. |
| 56 | + QueueIt.once('openingQueueView', () => { |
| 57 | + console.log('opening queue page..'); |
| 58 | + }); |
| 59 | + //Optional layout name that should be used for the waiting room page |
| 60 | + const layoutName = null; |
| 61 | + //Optional language for the waiting room page |
| 62 | + const language = null; |
| 63 | + let enqueueResult: EnqueueResult; |
| 64 | + |
| 65 | + if (this.state.enqueueKey) { |
| 66 | + enqueueResult = await QueueIt.runWithEnqueueKey( |
| 67 | + this.state.clientId, |
| 68 | + this.state.eventOrAlias, |
| 69 | + this.getEnqueueKey(), |
| 70 | + 'mobile' |
| 71 | + ); |
| 72 | + } else if (this.state.enqueueToken) { |
| 73 | + enqueueResult = await QueueIt.runWithEnqueueToken( |
| 74 | + this.state.clientId, |
| 75 | + this.state.eventOrAlias, |
| 76 | + this.getEnqueueToken(), |
| 77 | + 'mobile' |
| 78 | + ); |
| 79 | + } else { |
| 80 | + enqueueResult = await QueueIt.run( |
| 81 | + this.state.clientId, |
| 82 | + this.state.eventOrAlias, |
| 83 | + 'mobile' |
62 | 84 | ); |
63 | | - switch (enqueueResult.State) { |
64 | | - case EnqueueResultState.Disabled: |
65 | | - console.log('queue is disabled'); |
66 | | - break; |
67 | | - case EnqueueResultState.Passed: |
68 | | - console.log(`user got his turn, with QueueITToken: ${enqueueResult.QueueITToken}`); |
69 | | - break; |
70 | | - case EnqueueResultState.Unavailable: |
71 | | - console.log('queue is unavailable'); |
72 | | - break; |
73 | | - } |
74 | | - return enqueueResult.QueueITToken; |
75 | | - } catch (e) { |
76 | | - console.log(`error: ${e}`); |
77 | 85 | } |
| 86 | + switch (enqueueResult.State) { |
| 87 | + case EnqueueResultState.Disabled: |
| 88 | + console.log('queue is disabled'); |
| 89 | + break; |
| 90 | + case EnqueueResultState.Passed: |
| 91 | + console.log( |
| 92 | + `user got his turn, with QueueITToken: ${enqueueResult.QueueITToken}` |
| 93 | + ); |
| 94 | + break; |
| 95 | + case EnqueueResultState.Unavailable: |
| 96 | + console.log('queue is unavailable'); |
| 97 | + break; |
| 98 | + case EnqueueResultState.RestartedSession: |
| 99 | + console.log('user decided to restart the session'); |
| 100 | + await this.enqueue(); |
| 101 | + } |
| 102 | + return enqueueResult.QueueITToken; |
| 103 | + } catch (e) { |
| 104 | + console.log(`error: ${e}`); |
| 105 | + } |
78 | 106 | }; |
| 107 | + |
| 108 | +getEnqueueToken = () => 'myToken'; |
| 109 | + |
| 110 | +getEnqueueKey = () => 'myKey'; |
79 | 111 | ``` |
80 | | -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. |
81 | 112 |
|
82 | | - |
| 113 | +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. |
83 | 114 |
|
| 115 | + |
84 | 116 |
|
85 | 117 | ### Events |
86 | 118 |
|
87 | 119 | You can receive events from this library by subscribing to it: |
| 120 | + |
88 | 121 | ```js |
89 | | -QueueIt.once('openingQueueView', ()=> console.log('opening queue page..')); |
| 122 | +QueueIt.once('openingQueueView', () => console.log('opening queue page..')); |
90 | 123 | //Or |
91 | | -const listener = QueueIt.on('openingQueueView', ()=> console.log('opening queue page..')); |
| 124 | +const listener = QueueIt.on('openingQueueView', () => |
| 125 | + console.log('opening queue page..') |
| 126 | +); |
92 | 127 | // ... |
93 | 128 | listener.remove(); |
94 | 129 | ``` |
95 | 130 |
|
96 | 131 | Right now these are the events that are emitted: |
97 | 132 |
|
98 | | -* `openingQueueView` - Happens whenever the queue screen is going to be shown. |
99 | | -* `userExited` - Happens whenever the user exists the line. Note that he may return back to it if he desires. |
| 133 | +- `openingQueueView` - Happens whenever the queue screen is going to be shown. |
100 | 134 |
|
101 | 135 | ## License |
102 | 136 |
|
|
0 commit comments