freemium-survey-components 0.16.4 → 0.16.6

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 (5) hide show
  1. package/README.md +131 -74
  2. package/lib/index.cjs.js +1 -1
  3. package/lib/index.esm.js +1 -1
  4. package/lib/types/types.d.ts +2 -2
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -19,130 +19,187 @@ Make sure you have the below installed in your app.
19
19
 
20
20
  - Survey : SurveyProps
21
21
  - WebInAppSurvey : WebInAppSurveyProps
22
- - NPS : NPSProps
22
+ - Range : RangeProps
23
23
 
24
24
  ### Types
25
25
  ```
26
26
  type SurveyProps {
27
27
  survey: SurveyType
28
+ answers: SurveyResponseType | null
28
29
  surveyStyle?: 'standard' | 'card'
29
30
  placeholders?: {
30
31
  [key: string]: string
31
32
  }
32
- npsValue?: number
33
+ initialPivotAnswer?: number
33
34
  onSubmit: (
34
- data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
35
- callback: Function
35
+ data: {
36
+ [key: string]:
37
+ | string
38
+ | number
39
+ | Array<string | number>
40
+ | { [key: string]: string }
41
+ | null
42
+ },
43
+ callback: Function,
44
+ status: AnswerStatus,
36
45
  ) => void
37
46
  preview?: boolean
38
47
  mobilePreview?: boolean
48
+ closePreview?: () => void
49
+ onAnsweringPrompt: (id: number) => void
39
50
  }
40
51
  ```
41
52
  ```
42
53
  type WidgetProps = {
43
54
  survey: SurveyType
44
- surveyType: 'default' | 'compact' | 'cozy'
55
+ answers: SurveyResponseType | null
56
+ preview?: boolean
45
57
  placeholders: {
46
58
  [key: string]: string
47
59
  }
48
60
  onSubmit: (
49
- data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
61
+ data: { [key: string]: string | number | Array<string | number> | null },
50
62
  callback: Function,
63
+ status: AnswerStatus,
51
64
  ) => void
52
- preview?: boolean
53
65
  onDismiss: () => void
54
66
  onClose?: () => void
67
+ surveyType: 'default' | 'compact' | 'cozy'
55
68
  unsubscribeUrl?: string
56
69
  isSurveyCompleted: boolean
57
- children: React.ReactNode | null
70
+ children: React.ReactNode
71
+ onAnsweringPrompt: (id: number) => void
58
72
  }
59
73
  ```
60
74
  ```
61
- type NPSProps = {
75
+ type RangeProps = {
62
76
  type_info: {
63
- linear_scale: {
64
- button_shape: 'rounded' | 'square' | 'curved'
65
- button_style: 'standard' | 'highlighted'
66
- }
67
- validation: {
68
- min: number
77
+ type_variant: 'NUMBER' | 'TEXT' | 'EMOJI' | 'STAR'
78
+ scale_properties?: {
79
+ order: 'ascending' | 'descending'
80
+ button_style: {
81
+ shape: ButtonShapeType
82
+ type: 'standard' | 'highlighted'
83
+ }
84
+ range: ScalePropertiesRangeType[]
85
+ labels: {
86
+ values: string[]
87
+ preference: 'edges' | 'all' | null
88
+ }
69
89
  }
70
- rating_presets: { start?: string; end?: string }
71
90
  footer_text: string
72
91
  }
73
92
  onChangeHandler: (value: number) => void
74
- npsValue?: number
93
+ value?: number
75
94
  }
76
95
  ```
77
96
 
78
97
  ### Usage
79
98
 
80
99
 
81
- ```
100
+ ```js
82
101
  import {Survey} from 'freemium-survey-components'
83
- const WebSurveyPreview = () => {
84
- return <Survey
85
- survey={surveyObjectFromSurveyServ}
86
- surveyStyle="card"
87
- onSubmit = {async (data : surveyFormData,callback) => {
88
- await saveToDb(surveyFormData)
89
- callback?.() // callback should be executed in the caller once the save is done.
90
- }}
91
- placeholders = {{
92
- '{{account.company_name}}': 'Freshworks',
93
- '{{account.account_name}}': 'Freshworks Account',
94
- }} // placeholders to resolve against any such placeholder in surveyObj
95
- preview = {true} // preview true will not save the response
96
- npsvalue={null} // pass a number if nps qn needed to be prefilled by default
97
- />
98
- }
99
- ```
102
+ <Survey
103
+ survey={surveyObjectFromSurveyServ}
104
+ surveyStyle="card"
105
+ onSubmit = {async function(data : {[key : string] : string | number | boolean | null | string[]},callback,status : 'PARTIAL' | 'COMPLETE') {
106
+ await saveToDb(surveyFormData)
107
+ if(status === 'COMPETE')
108
+ // callback should be executed in the caller once the save is done.
109
+ callback?.()
110
+ }}
111
+ // this will get called for every answer selection with status = 'PARTIAL'
112
+ placeholders = {{
113
+ '{{account.company_name}}': 'Freshworks',
114
+ '{{account.account_name}}': 'Freshworks Account',
115
+ }}
116
+ // placeholders to resolve against any such placeholder in question's text
117
+ preview = {true}
118
+ // preview true will not save the response
119
+ initialPivotAnswer={null}
120
+ // pass a number if pivot qn needed to be prefilled by default
121
+ onAnsweringPrompt={function(id){ console.log(`Prompt ${id ? 'accepted' : 'rejected'}}`)}}
122
+ />
100
123
  ```
124
+ ```js
101
125
  import {WebInAppSurvey} from 'freemium-survey-components'
102
- const Widget = () => {
103
126
  const [isSurveyCompleted,setIsSurveyCompleted] = useState(false)
104
- return <WebInAppSurvey
105
- survey={surveyObjectFromSurveyServ}
106
- surveyType="compact"
107
- placeholders={null}
108
- onSubmit={(data, callback) => {
109
- console.log(data, callback?.())
110
- setIsSurveyCompleted(true)
111
- }}
112
- onDismiss={() => {
113
- // when the widget is dismissed, this gets executed.
114
- ....
115
- }}
116
- unsubscribeUrl={'#'}
117
- isSurveyCompleted={isSurveyCompleted}
118
- children={null} // if we want render with respect to the widget's fixed position
127
+ <WebInAppSurvey
128
+ survey={surveyObjectFromSurveyServ}
129
+ surveyType="compact"
130
+ placeholders={null}
131
+ onSubmit={function (data, callback,status){
132
+ if(status === 'COMPLETE')
133
+ callback?.()
134
+ setIsSurveyCompleted(true)
135
+ }}
136
+ onDismiss={function() {
137
+ // when the widget is dismissed, this gets executed.
138
+ }}
139
+ unsubscribeUrl={'#'}
140
+ isSurveyCompleted={isSurveyCompleted}
141
+ children={null}
142
+ // if we want render with respect to the widget's fixed
143
+ onAnsweringPrompt={function (id){ console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)}}
119
144
  />
120
- }
121
145
  ```
122
- ```
123
- import {NPS} from 'freemium-survey-components'
124
- const NPSPreview = () => {
125
- return <NPS
126
- type_info={{
127
- linear_scale : {
128
- button_shape : 'rounded',
129
- button_style : 'highlighted'
130
- },
131
- validation : {
132
- min : 0
133
- },
134
- rating_presets : {
135
- start : 'Very unlikely',
136
- end : 'Very likely'
137
- },
138
- footer_text : 'We look forward to act on your feedback',
139
- onChangeHandler : (value) => console.log(value)
140
- }}
141
- />
142
- }
146
+ ```js
147
+ import {Range} from 'freemium-survey-components'
148
+ <Range
149
+ type_info={{
150
+ type_variant: 'TEXT',
151
+ scale_properties: {
152
+ order: 'ascending',
153
+ range: [
154
+ {
155
+ id: '1',
156
+ label: 'detractor',
157
+ min: 1,
158
+ max: 2,
159
+ },
160
+ {
161
+ id: '2',
162
+ label: 'passive',
163
+ min: 3,
164
+ max: 4,
165
+ },
166
+ {
167
+ id: '3',
168
+ label: 'promoter',
169
+ min: 5,
170
+ max: 10,
171
+ },
172
+ ],
173
+ button_style: {
174
+ shape: 'rounded',
175
+ type: 'highlighted',
176
+ },
177
+ labels: {
178
+ preference: 'edges',
179
+ values: [
180
+ 'Very dissatisfied',
181
+ 'Very dissatisfied',
182
+ 'Dissatisfied',
183
+ 'Neutral',
184
+ 'Satisfied',
185
+ 'Dissatisfied',
186
+ 'Neutral',
187
+ 'Satisfied',
188
+ 'Dissatisfied',
189
+ 'Satisfied',
190
+ ],
191
+ },
192
+ },
193
+ footer_text: 'We look forward to your feedback.',
194
+ }}
195
+ value={value}
196
+ onChangeHandler={function(value: any) {
197
+ setValue(value)
198
+ }}
199
+ />
143
200
  ```
144
201
 
145
202
 
146
203
  ### Rules
147
204
 
148
- - survey object passed to Survey and WebInAppSurvey is cached on mount. In order to pass new survey object, it needs to be remounted with the new survey object.
205
+ - survey object passed to Survey and WebInAppSurvey is cached on mount. In order to pass new survey object, it needs to be remounted with the new survey object.