freemium-survey-components 0.16.4 → 0.16.5

package/README.md

@@ -19,59 +19,78 @@ Make sure you have the below installed in your app.
 
 - Survey : SurveyProps
 - WebInAppSurvey : WebInAppSurveyProps
-- NPS : NPSProps
+- Range : RangeProps
 
 ### Types
 ```
 type SurveyProps {
   survey: SurveyType
+  answers: SurveyResponseType | null
   surveyStyle?: 'standard' | 'card'
   placeholders?: {
     [key: string]: string
   }
-  npsValue?: number
+  initialPivotAnswer?: number
   onSubmit: (
-    data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
-    callback: Function
+    data: {
+      [key: string]:
+        | string
+        | number
+        | Array<string | number>
+        | { [key: string]: string }
+        | null
+    },
+    callback: Function,
+    status: AnswerStatus,
   ) => void
   preview?: boolean
   mobilePreview?: boolean
+  closePreview?: () => void
+  onAnsweringPrompt: (id: number) => void
 }
 ```
 ```
 type WidgetProps = {
   survey: SurveyType
-  surveyType: 'default' | 'compact' | 'cozy'
+  answers: SurveyResponseType | null
+  preview?: boolean
   placeholders: {
     [key: string]: string
   }
   onSubmit: (
-    data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
+    data: { [key: string]: string | number | Array<string | number> | null },
     callback: Function,
+    status: AnswerStatus,
   ) => void
-  preview?: boolean
   onDismiss: () => void
   onClose?: () => void
+  surveyType: 'default' | 'compact' | 'cozy'
   unsubscribeUrl?: string
   isSurveyCompleted: boolean
-  children: React.ReactNode | null
+  children: React.ReactNode
+  onAnsweringPrompt: (id: number) => void
 }
 ```
 ```
-type NPSProps = {
+type RangeProps = {
   type_info: {
-    linear_scale: {
-      button_shape: 'rounded' | 'square' | 'curved'
-      button_style: 'standard' | 'highlighted'
-    }
-    validation: {
-      min: number
+    type_variant: 'NUMBER' | 'TEXT' | 'EMOJI' | 'STAR'
+    scale_properties?: {
+      order: 'ascending' | 'descending'
+      button_style: {
+        shape: ButtonShapeType
+        type: 'standard' | 'highlighted'
+      }
+      range: ScalePropertiesRangeType[]
+      labels: {
+        values: string[]
+        preference: 'edges' | 'all' | null
+      }
     }
-    rating_presets: { start?: string; end?: string }
     footer_text: string
   }
   onChangeHandler: (value: number) => void
-  npsValue?: number
+  value?: number
 }
 ```
 
@@ -84,16 +103,20 @@ const WebSurveyPreview = () => {
   return <Survey
           survey={surveyObjectFromSurveyServ}
           surveyStyle="card"
-          onSubmit = {async (data : surveyFormData,callback) => {
+          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 surveyObj
+          }} // placeholders to resolve against any such placeholder in question's text
           preview = {true} // preview true will not save the response
-          npsvalue={null} // pass a number if nps qn needed to be prefilled by default
+          initialPivotAnswer={null} // pass a number if pivot qn needed to be prefilled by default
+          onAnsweringPrompt={(id) =>
+          console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)}
         />
 }
 ```
@@ -105,8 +128,9 @@ const Widget = () => {
           survey={surveyObjectFromSurveyServ}
           surveyType="compact"
           placeholders={null}
-          onSubmit={(data, callback) => {
-            console.log(data, callback?.())
+          onSubmit={(data, callback,status) => {
+            if(status === 'COMPLETE')
+            callback?.()
             setIsSurveyCompleted(true)
           }}
           onDismiss={() => {
@@ -115,29 +139,66 @@ const Widget = () => {
           }}
           unsubscribeUrl={'#'}
           isSurveyCompleted={isSurveyCompleted}
-          children={null} // if we want render with respect to the widget's fixed position
+          children={null} // if we want render with respect to the widget's fixed onAnsweringPrompt={(id) =>
+          console.log(`Prompt ${id ? 'accepted' : 'rejected'}`)
+        }
         />
 }
 ```
 ```
-import {NPS} from 'freemium-survey-components'
-const NPSPreview = () => {
-  return <NPS
+import {Range} from 'freemium-survey-components'
+const RangePreview = () => {
+  return <Range
           type_info={{
-            linear_scale : {
-              button_shape : 'rounded',
-              button_style : 'highlighted'
+        type_variant: 'TEXT',
+        scale_properties: {
+          order: 'ascending',
+          range: [
+            {
+              id: '1',
+              label: 'detractor',
+              min: 1,
+              max: 2,
             },
-            validation : {
-              min : 0
+            {
+              id: '2',
+              label: 'passive',
+              min: 3,
+              max: 4,
             },
-            rating_presets : {
-              start : 'Very unlikely', 
-              end : 'Very likely'
+            {
+              id: '3',
+              label: 'promoter',
+              min: 5,
+              max: 10,
             },
-            footer_text : 'We look forward to act on your feedback',
-            onChangeHandler : (value) => console.log(value)
-          }}
+          ],
+          button_style: {
+            shape: 'rounded',
+            type: 'highlighted',
+          },
+          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={(value: any) => {
+        setValue(value)
+      }}
         />
 }
 ```