react-native-srschat 0.1.15 → 0.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -14
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -9,12 +9,13 @@ Installing the package:
|
|
|
9
9
|
### Example Implementation
|
|
10
10
|
|
|
11
11
|
```
|
|
12
|
-
import React from 'react';
|
|
13
|
-
import { View, StyleSheet } from 'react-native';
|
|
14
|
-
import { StatusBar } from 'expo-status-bar';
|
|
12
|
+
import React, { useState } from 'react';
|
|
13
|
+
import { View, StyleSheet, Button } from 'react-native';
|
|
15
14
|
import { Chat } from 'react-native-srschat';
|
|
16
15
|
|
|
17
16
|
export default function App() {
|
|
17
|
+
const [showIcon, setShowIcon] = useState(true);
|
|
18
|
+
const [toggleChat, setToggleChat] = useState(false);
|
|
18
19
|
|
|
19
20
|
const onProductCardClick = (productData) => {
|
|
20
21
|
console.log('Product Card Clicked:', productData);
|
|
@@ -29,18 +30,35 @@ export default function App() {
|
|
|
29
30
|
"branch_code": "BELHARR",
|
|
30
31
|
"active_ship_to": 1,
|
|
31
32
|
"branch_full_name": "BEL-AQUA HARRISBURG",
|
|
32
|
-
"customer_token": "eyJraWQiOiIxIiwiYWxnIjoiSFMyNTYifQ.
|
|
33
|
+
"customer_token": "eyJraWQiOiIxIiwiYWxnIjoiSFMyNTYifQ.eyJ1aWQiOjExMTM4MCwidXR5cGlkIjozLCJpYXQiOjE3MzkyNzg3MTcsImV4cCI6MTczOTMwNzUxN30.xCFMhmvz-Cdw-fp8O5a6ZS3zWUjueTPUXTUPFsOCDFs"
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
const uiConfig = {
|
|
37
|
+
testButtons: false, // show the test buttons for onProductCardClick and onAddToCartClick – defaults to false
|
|
38
|
+
iconType: "button", // "button" or "tab" – defaults to button
|
|
39
|
+
iconPosition: { // ex. button { bottom: 80, right: 20 } tab { bottom: 600, right: 0 } – defaults to { bottom: 80, right: 20 }
|
|
40
|
+
bottom: 80,
|
|
41
|
+
right: 20,
|
|
42
|
+
},
|
|
43
|
+
showIcon: showIcon, // true or false, show the chat icon – no prop defaults to true
|
|
44
|
+
toggleChat: toggleChat // toggle the chat window
|
|
33
45
|
}
|
|
34
46
|
|
|
35
47
|
return (
|
|
48
|
+
<>
|
|
36
49
|
<View style={styles.container}>
|
|
37
|
-
<
|
|
38
|
-
|
|
50
|
+
<View style={styles.container}>
|
|
51
|
+
<Button title="Toggle Chat" onPress={() => setToggleChat(prev => !prev)}/>
|
|
52
|
+
<Button title="Show Icon" onPress={() => setShowIcon(prev => !prev)} />
|
|
53
|
+
</View>
|
|
54
|
+
</View>
|
|
55
|
+
<Chat
|
|
39
56
|
data={data}
|
|
40
57
|
onProductCardClick={onProductCardClick}
|
|
41
58
|
onAddToCartClick={onAddToCartClick}
|
|
59
|
+
uiConfig={uiConfig}
|
|
42
60
|
/>
|
|
43
|
-
|
|
61
|
+
</>
|
|
44
62
|
);
|
|
45
63
|
}
|
|
46
64
|
|
|
@@ -48,6 +66,7 @@ const styles = StyleSheet.create({
|
|
|
48
66
|
container: {
|
|
49
67
|
flex: 1,
|
|
50
68
|
backgroundColor: '#fff',
|
|
69
|
+
marginTop: 200
|
|
51
70
|
},
|
|
52
71
|
});
|
|
53
72
|
```
|
|
@@ -56,15 +75,36 @@ const styles = StyleSheet.create({
|
|
|
56
75
|
|
|
57
76
|
With successful integration, you should see the bubble pop up in the bottom right corner of the screen.
|
|
58
77
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
Clicking on the bubble will pull up the chat interface. The chat is **still in development**, it will be adjusted to create a more seamless UI/UX. There are currently two placeholder buttons that execute the funtions *onProductCardClick* and *onAddToCartClick*. These functions will send a product payload.
|
|
63
|
-
|
|
64
|
-
|
|
78
|
+
Clicking on the bubble will pull up the chat interface. The chat is **still in development**. There are currently two placeholder buttons that execute the funtions *onProductCardClick* and *onAddToCartClick*. These functions will send a product payload.
|
|
65
79
|
|
|
66
|
-
### To
|
|
80
|
+
### To Do (HERITAGE)
|
|
67
81
|
|
|
68
82
|
* Create a function for onProductCardClick to navigate to the product page when clicked.
|
|
69
83
|
* Create a function for onAddToCartClick to add the associated quantity and item to cart.
|
|
70
84
|
* Pass through the data needed for the chat (listed in the example implementation).
|
|
85
|
+
|
|
86
|
+
### To Do (INSTALILY)
|
|
87
|
+
* Set up voice functionality
|
|
88
|
+
|
|
89
|
+
### Dev Instructions (INSTALILY)
|
|
90
|
+
|
|
91
|
+
Installing packages for srschat
|
|
92
|
+
`npm install`
|
|
93
|
+
|
|
94
|
+
Install example
|
|
95
|
+
`cd example`
|
|
96
|
+
`npm install`
|
|
97
|
+
|
|
98
|
+
Install pods (in example still)
|
|
99
|
+
`npx pod-install`
|
|
100
|
+
or
|
|
101
|
+
`cd ios`
|
|
102
|
+
`pod install --repo-update`
|
|
103
|
+
|
|
104
|
+
Run example
|
|
105
|
+
`npm start`
|
|
106
|
+
|
|
107
|
+
Publishing
|
|
108
|
+
`yarn build`
|
|
109
|
+
`npm login`
|
|
110
|
+
`yarn publish`
|