freemium-survey-components 0.16.5 → 1.0.0

package/README.md

@@ -97,113 +97,109 @@ type RangeProps = {
 ### Usage
 
 
-```
+```js
 import {Survey} from 'freemium-survey-components'
-const WebSurveyPreview = () => {
-  return <Survey
-          survey={surveyObjectFromSurveyServ}
-          surveyStyle="card"
-          onSubmit = {async (data : surveyFormData,callback,status : 'PARTIAL' | 'COMPLETE') => {
-            // this will get called for every answer selection with status = 'PARTIAL'
-                      await saveToDb(surveyFormData)
-                      if(status === 'COMPETE')
-                      callback?.() // callback should be executed in the caller once the save is done.
-                    }}
-          placeholders = {{
-            '{{account.company_name}}': 'Freshworks',
-            '{{account.account_name}}': 'Freshworks Account',
-          }} // placeholders to resolve against any such placeholder in question's text
-          preview = {true} // preview true will not save the response
-          initialPivotAnswer={null} // pass a number if pivot qn needed to be prefilled by default
-          onAnsweringPrompt={(id) =>
-          console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)}
-        />
-}
-```
+  <Survey
+    survey={surveyObjectFromSurveyServ}
+    surveyStyle="card"
+    onSubmit = {async function(data : {[key : string] : string | number | boolean | null | string[]},callback,status : 'PARTIAL' | 'COMPLETE') {
+      await saveToDb(surveyFormData)
+      if(status === 'COMPETE')
+      // callback should be executed in the caller once the save is done.
+      callback?.() 
+    }} 
+    // this will get called for every answer selection with status = 'PARTIAL'
+    placeholders = {{
+      '{{account.company_name}}': 'Freshworks',
+      '{{account.account_name}}': 'Freshworks Account',
+    }} 
+    // placeholders to resolve against any such placeholder in question's text
+    preview = {true} 
+    // preview true will not save the response
+    initialPivotAnswer={null} 
+    // pass a number if pivot qn needed to be prefilled  by default
+    onAnsweringPrompt={function(id){ console.log(`Prompt ${id ? 'accepted' : 'rejected'}}`)}}
+  />
 ```
+```js
 import {WebInAppSurvey} from 'freemium-survey-components'
-const Widget = () => {
   const [isSurveyCompleted,setIsSurveyCompleted] = useState(false)
-  return <WebInAppSurvey
-          survey={surveyObjectFromSurveyServ}
-          surveyType="compact"
-          placeholders={null}
-          onSubmit={(data, callback,status) => {
-            if(status === 'COMPLETE')
-            callback?.()
-            setIsSurveyCompleted(true)
-          }}
-          onDismiss={() => {
-            // when the widget is dismissed, this gets executed.
-            ....
-          }}
-          unsubscribeUrl={'#'}
-          isSurveyCompleted={isSurveyCompleted}
-          children={null} // if we want render with respect to the widget's fixed onAnsweringPrompt={(id) =>
-          console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)
-        }
+  <WebInAppSurvey
+    survey={surveyObjectFromSurveyServ}
+    surveyType="compact"
+    placeholders={null}
+    onSubmit={function (data, callback,status){
+      if(status === 'COMPLETE')
+      callback?.()
+      setIsSurveyCompleted(true)
+    }}
+    onDismiss={function() {
+      // when the widget is dismissed, this gets executed.
+    }}
+    unsubscribeUrl={'#'}
+    isSurveyCompleted={isSurveyCompleted}
+    children={null} 
+    // if we want render with respect to the widget's fixed 
+    onAnsweringPrompt={function (id){ console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)}}
         />
-}
-```
 ```
+```js
 import {Range} from 'freemium-survey-components'
-const RangePreview = () => {
-  return <Range
-          type_info={{
-        type_variant: 'TEXT',
-        scale_properties: {
-          order: 'ascending',
-          range: [
-            {
-              id: '1',
-              label: 'detractor',
-              min: 1,
-              max: 2,
-            },
-            {
-              id: '2',
-              label: 'passive',
-              min: 3,
-              max: 4,
-            },
-            {
-              id: '3',
-              label: 'promoter',
-              min: 5,
-              max: 10,
-            },
-          ],
-          button_style: {
-            shape: 'rounded',
-            type: 'highlighted',
+  <Range
+    type_info={{
+      type_variant: 'TEXT',
+      scale_properties: {
+        order: 'ascending',
+        range: [
+          {
+            id: '1',
+            label: 'detractor',
+            min: 1,
+            max: 2,
+          },
+          {
+            id: '2',
+            label: 'passive',
+            min: 3,
+            max: 4,
           },
-          labels: {
-            preference: 'edges',
-            values: [
-              'Very dissatisfied',
-              'Very dissatisfied',
-              'Dissatisfied',
-              'Neutral',
-              'Satisfied',
-              'Dissatisfied',
-              'Neutral',
-              'Satisfied',
-              'Dissatisfied',
-              'Satisfied',
-            ],
+          {
+            id: '3',
+            label: 'promoter',
+            min: 5,
+            max: 10,
           },
+        ],
+        button_style: {
+          shape: 'rounded',
+          type: 'highlighted',
         },
-        footer_text: 'We look forward to your feedback.',
-      }}
-      value={value}
-      onChangeHandler={(value: any) => {
-        setValue(value)
-      }}
-        />
-}
+        labels: {
+          preference: 'edges',
+          values: [
+            'Very dissatisfied',
+            'Very dissatisfied',
+            'Dissatisfied',
+            'Neutral',
+            'Satisfied',
+            'Dissatisfied',
+            'Neutral',
+            'Satisfied',
+            'Dissatisfied',
+            'Satisfied',
+          ],
+        },
+      },
+    footer_text: 'We look forward to your feedback.',
+    }}
+    value={value}
+    onChangeHandler={function(value: any) {
+      setValue(value)
+    }}
+  />
 ```
 
 
 ### Rules
 
- - 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.
+ - Props (survey,answers) passed to Survey component and WebInAppSurvey component are cached on mount. In order to pass new value, component needs to be remounted.