@originallyus/feedback-rn-sdk 4.0.0-beta.11 → 4.0.0-beta.12

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.
Files changed (2) hide show
  1. package/README.md +151 -61
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
- # @originallyus/feedback-rn-sdk
1
+ ## React Native FeedbackSDK
2
2
 
3
- Cross-platform Feedback UI components for React Native.
3
+ A cross-platform Feedback component for React Native.
4
4
 
5
- ## 🚀 Demo
5
+ ## 🚀 Live Demo
6
6
 
7
7
  Scan the QR code below with **Expo Go** (Android) or the **Camera app** (iOS) to try the latest SDK features:
8
8
 
@@ -10,101 +10,191 @@ Scan the QR code below with **Expo Go** (Android) or the **Camera app** (iOS) to
10
10
 
11
11
  [👉 Try on Expo Dev](https://expo.dev/preview/update?message=Test+version+1.5&updateRuntimeVersion=1.0.0&slug=exp&projectId=64be1f70-2b29-479e-8c0a-ee495f737d06&group=1517deec-e50f-4995-8065-e24a71cf11cb)
12
12
 
13
- ## Installation
13
+ ---
14
+
15
+ ## 📦 Installation
14
16
 
15
17
  ```sh
16
18
  npm install @originallyus/feedback-rn-sdk
17
- # or
19
+ ```
20
+
21
+ or yarn
22
+
23
+ ```sh
18
24
  yarn add @originallyus/feedback-rn-sdk
19
25
  ```
20
26
 
21
- ## Peer dependencies
27
+ ### Peer Dependencies
28
+
29
+ This SDK requires several peer dependencies to function correctly. Make sure to install them in your project:
30
+
31
+ **Required:**
32
+
33
+ - `react-native-reanimated`
34
+ - `react-native-keyboard-controller`
35
+ - `react-native-svg`
36
+ - `react-native-worklets`
37
+ - `axios`
38
+ - `crypto-js`
39
+
40
+ **Haptics & Device Info (Optional but Recommended):**
22
41
 
23
- ### Required
42
+ - **Expo Projects:** `npx expo install expo-haptics expo-device expo-application`
43
+ - **Bare RN Projects:** `npm install react-native-haptic-feedback react-native-device-info`
24
44
 
25
- - `react-native-reanimated` (>= 3.0.0)
26
- - `react-native-keyboard-controller` – for Input/Textarea to work correctly with keyboard
27
- - `react-native-svg` (>= 15.0.0)
28
- - `react-native-worklets` (>= 0.20.0)
29
- - `react-native-haptic-feedback` (>= 2.0.0)
30
- - `react-native-device-info` (>= 15.0.1)
45
+ ---
31
46
 
32
- ### Device info (choose one)
47
+ ## 🔡 Custom Fonts
33
48
 
34
- **Expo**:
49
+ The SDK works best with **Spoqa Han Sans Neo** or **OpenSans**. Please ensure you have these fonts installed in your React Native project.
35
50
 
36
- ### Required
51
+ > [!IMPORTANT]
52
+ > Do not change font filenames on Android as the system uses exact filenames to identify them.
37
53
 
38
- - `expo-device` (>= 8.0.10)
39
- - `expo-application` (>= 7.0.8)
40
- - `expo-haptics` (>= 15.0.0)
54
+ ---
41
55
 
42
- ### Keyboard setup (for Input/Textarea)
56
+ ## 🚀 Quick Start
43
57
 
44
- Wrap your app with `KeyboardProvider` and use `KeyboardAwareScrollView` for forms with Input/Textarea:
58
+ ### 1. Root Mounting (`AIAFeedback`)
59
+
60
+ Mount the `AIAFeedback` component at the root of your application (typically in `App.tsx`). It should be at the bottom of your root view tree to stay on top of other views.
45
61
 
46
62
  ```tsx
47
- import {KeyboardProvider, KeyboardAwareScrollView} from 'react-native-keyboard-controller'
63
+ import {AIAFeedback, type AIAFeedbackRef} from '@originallyus/feedback-rn-sdk'
48
64
 
49
65
  export default function App() {
66
+ const feedbackRef = useRef<AIAFeedbackRef>(null)
67
+
68
+ const config = {
69
+ appSec: 'YOUR_APP_SEC',
70
+ packageId: 'YOUR_PACKAGE_ID',
71
+ debug: true,
72
+ language: 'en',
73
+ userId: 'USER_123',
74
+ metadata: {policy: '987654321'},
75
+ }
76
+
50
77
  return (
51
- <KeyboardProvider>
52
- <KeyboardAwareScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{padding: 16}}>
53
- <Input appWidth={width} value={val} onChangeText={setVal} />
54
- <Textarea appWidth={width} value={val} onChangeText={setVal} />
55
- </KeyboardAwareScrollView>
56
- </KeyboardProvider>
78
+ <SafeAreaProvider>
79
+ <View style={{flex: 1}}>
80
+ <MainApp />
81
+
82
+ {/* Global Feedback Modal */}
83
+ <AIAFeedback
84
+ ref={feedbackRef}
85
+ {...config}
86
+ onClose={() => console.log('Closed')}
87
+ onSubmit={res => console.log('Submitted', res)}
88
+ />
89
+ </View>
90
+ </SafeAreaProvider>
57
91
  )
58
92
  }
59
93
  ```
60
94
 
61
- ## Usage
95
+ ### 2. Triggering Feedback
96
+
97
+ You can trigger a feedback form from anywhere in your app using the `ref`.
62
98
 
63
99
  ```tsx
64
- import {AIAContentUsefulness, AIAFeedback, type AIAFeedbackRef} from '@originallyus/feedback-rn-sdk'
65
- import {useRef, useState} from 'react'
66
-
67
- const appSec = 'XXXXX'
68
- const packageId = 'XXXXX'
69
- const debugMode = true
70
- const language = 'en'
71
- const userId = 'V12345678'
72
- const eventTag = 'redeem_event'
73
- const metadata = 'policy_987654321'
74
-
75
- <AIAFeedback
76
- ref={feedbackRef}
77
- appSec={appSec}
78
- packageId={packageId}
79
- debug={debugMode}
80
- language={language}
81
- userId="V12345678"
82
- eventTag="redeem_event"
83
- metadata="policy_987654321"
84
- />
100
+ // Show a specific form by slug
101
+ feedbackRef.current?.show('native_rating_form')
85
102
 
103
+ // Hide the form
104
+ feedbackRef.current?.hide()
105
+ ```
86
106
 
107
+ ---
87
108
 
88
- ```
109
+ ## 🧩 Components
110
+
111
+ ### `AIAFeedback` (Modal)
112
+
113
+ The primary component for showing high-intrusive or triggered surveys.
89
114
 
90
- ## AIAContentUsefulness with type content_usefulness (inline)
115
+ | Prop | Type | Description |
116
+ | :---------- | :--------- | :----------------------------------------------- |
117
+ | `appSec` | `string` | **Required.** Your application secret. |
118
+ | `packageId` | `string` | **Required.** Your package/bundle ID. |
119
+ | `debug` | `boolean` | Enable debug logs. |
120
+ | `language` | `string` | Language code (e.g., "en", "vi", "th"). |
121
+ | `userId` | `string` | Optional external user ID. |
122
+ | `metadata` | `object` | Optional key-value pairs for additional context. |
123
+ | `onClose` | `function` | Callback when modal is dismissed. |
124
+ | `onSubmit` | `function` | Callback when form is successfully submitted. |
125
+
126
+ ### `AIAContentUsefulness` (Inline)
127
+
128
+ Use this for inline feedback (e.g., "Was this helpful?") inside your content screens.
91
129
 
92
130
  ```tsx
93
131
  <AIAContentUsefulness
94
132
  slug="content_usefulness-1"
95
133
  options={{
96
- appSec,
97
- packageId,
98
- debug: debugMode,
134
+ appSec: '...',
135
+ packageId: '...',
136
+ debug: true,
99
137
  }}
100
- style={styles.inlineComponent}
101
- onSuccess={res => console.log('In-line Success:', res)}
102
- onError={err => console.error('In-line Error:', err)}
138
+ onSuccess={res => console.log('Useful!', res)}
139
+ onError={err => console.error(err)}
103
140
  />
104
141
  ```
105
142
 
106
- For full props documentation, see [src/component/README.md](src/component/README.md)
143
+ | Prop | Type | Description |
144
+ | :--------------- | :------------ | :---------------------------------------------- |
145
+ | `slug` | `string` | **Required.** The form slug from the CMS. |
146
+ | `options` | `InitOptions` | Configuration (same as `AIAFeedback` props). |
147
+ | `style` | `ViewStyle` | Container style override. |
148
+ | `initialVisible` | `boolean` | Whether to show immediately (default: `false`). |
149
+ | `onSuccess` | `function` | Callback on success. |
150
+ | `onError` | `function` | Callback on error. |
151
+
152
+ ---
153
+
154
+ ## 📊 Supported Survey Types & Slugs
155
+
156
+ The SDK dynamically renders UI based on the configuration of the form slug in the backend. Use the following slugs for testing or integration:
157
+
158
+ | Form Type | Typical Slug | Icon | Description |
159
+ | :--------------- | :--------------------- | :--: | :------------------------------------------------- |
160
+ | **Satisfaction** | `native_rating_form` | ⭐ | Star rating (1-5) with optional detailed feedback. |
161
+ | **NPS** | `nps-1` | 📊 | Net Promoter Score scale (0-10). |
162
+ | **CES / Effort** | `effort-1` | ⚡ | Customer Effort Score numeric scale (1-7). |
163
+ | **Poll** | `poll-1` | 📝 | Multi-select tag-style buttons for quick surveys. |
164
+ | **Usefulness** | `content_usefulness-1` | 💡 | Inline "Yes/No" prompt for help articles. |
165
+ | **Comment** | `comment-1` | 🗨️ | Simple open-ended text feedback. |
166
+ | **External** | `external-1` | 🔗 | Triggers an external URL (App Store, Web). |
167
+
168
+ ### Example: Triggering a specific form
169
+
170
+ ```tsx
171
+ // Trigger NPS survey
172
+ feedbackRef.current?.show('nps-1')
173
+
174
+ // Trigger Satisfaction survey
175
+ feedbackRef.current?.show('native_rating_form')
176
+ ```
177
+
178
+ ---
179
+
180
+ ## 🛠️ Extra Configuration
181
+
182
+ ### Android (External Links)
183
+
184
+ If your forms use external URLs, ensure your `AndroidManifest.xml` includes queries:
185
+
186
+ ```xml
187
+ <queries>
188
+ <intent>
189
+ <action android:name="android.intent.action.VIEW" />
190
+ <data android:scheme="http" />
191
+ <data android:scheme="https" />
192
+ </intent>
193
+ </queries>
194
+ ```
195
+
196
+ ---
107
197
 
108
- ## License
198
+ ## 📄 License
109
199
 
110
- MIT
200
+ Built with ❤️ by **Originally US**. Released under the MIT License.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@originallyus/feedback-rn-sdk",
3
- "version": "4.0.0-beta.11",
3
+ "version": "4.0.0-beta.12",
4
4
  "description": "A cross-platform Feedback component for React Native.",
5
5
  "main": "./lib/module/index.js",
6
6
  "types": "./lib/typescript/index.d.ts",