freemium-survey-components 0.12.11 → 0.13.2

package/Contributing.md

@@ -0,0 +1,2 @@
+### Limitations
+ - Do not use ```JSON.stringify``` method since its causing issue with Freshservice when using ```freemium-survey-components``` since they use their polyfilled method for ```JSON.stringify``` instead of actual window object definition.

package/README.md

@@ -1,39 +1,151 @@
-# [Freemium-survey-components](https://www.npmjs.com/package/freemium-survey-components)
+## [freemium-survey-components](https://www.npmjs.com/package/freemium-survey-components)
 
 ⚠️: **Not ready for public usage yet!**
 
-Freemium-survey-components is a react package that renders the survey collection form given the survey object from the survey-serv platform service.
+Freemium-survey-components renders the survey collection form given the survey object from the survey-serv platform service.
 
-## Peer Dependencies
+### Peer Dependencies
 
-Make sure you installed the above libraries in the parent application.
+Make sure you have the below installed in your app.
 
 - react >= 17.0.2
 - react-dom >= 17.0.2
 
-## Usage
+### Usage
 
-- install the peer dependencies (mentioned above )
-- yarn add freemium-survey-components
-- include reset css and css variables in index css file
+```sh
+  npm i freemium-survey-components
+```
+
+### Exports (Named)
 
-## Exports (Named)
+- Survey : SurveyProps
+- WebInAppSurvey : WebInAppSurveyProps
+- NPS : NPSProps
 
-Of the below components the parent app would only need to interact with the Survey component to render the survey.
+### Types
+```
+type SurveyProps {
+  survey: SurveyType
+  surveyStyle?: 'standard' | 'card'
+  placeholders?: {
+    [key: string]: string
+  }
+  npsValue?: number
+  onSubmit: (
+    data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
+    callback: Function
+  ) => void
+  preview?: boolean
+  mobilePreview?: boolean
+}
+```
+```
+type WidgetProps = {
+  survey: SurveyType
+  surveyType: 'default' | 'compact' | 'cozy'
+  placeholders: {
+    [key: string]: string
+  }
+  onSubmit: (
+    data: { [key: string]: string | number | Array<string | number> | null | {[key : string] : string } },
+    callback: Function,
+  ) => void
+  preview?: boolean
+  onDismiss: () => void
+  remindLater: () => void
+  onClose?: () => void
+  unsubscribeUrl?: string
+  isSurveyCompleted: boolean
+  children: React.ReactNode | null
+}
+```
+```
+type NPSProps = {
+  type_info: {
+    linear_scale: {
+      button_shape: 'rounded' | 'square' | 'curved'
+      button_style: 'standard' | 'highlighted'
+    }
+    validation: {
+      min: number
+    }
+    rating_presets: { start?: string; end?: string }
+    footer_text: string
+  }
+  onChangeHandler: (value: number) => void
+  npsValue?: number
+}
+```
 
-- Survey
-- NPS
-- CheckboxGroup
-- RadioGroup
-- Input
-- Textarea
-- Button
-- Progressbar
+### Usage
 
-## Using SURVEY
 
 ```sh
 import {Survey} from 'freemium-survey-components'
-...
-<Survey survey={surveyObjectFromDb} onSubmit ={(data : surveyFormData) => {....}/>
+const WebSurveyPreview = () => {
+  return <Survey
+          survey={surveyObjectFromSurveyServ}
+          surveyStyle="card"
+          onSubmit = {async (data : surveyFormData,callback) => {
+                      await saveToDb(surveyFormData)
+                      callback?.() // callback should be executed in the caller once the save is done.
+                    }}
+          placeholders = {{
+            '{{account.company_name}}': 'Freshworks',
+            '{{account.account_name}}': 'Freshworks Account',
+            '{{contact.plan}}': 'blossom',
+            '{{contact.first_name}}': 'Alice',
+          }} // placeholders to resolve against any such placeholder in surveyObj
+          preview = {true} // preview true will not save the response
+          npsvalue={null} // pass a number if nps qn needed to be prefilled by default
+        />
+}
+```
+```
+import {WebInAppSurvey} from 'freemium-survey-components'
+const Widget = () => {
+  const [isSurveyCompleted,setIsSurveyCompleted] = useState(false)
+  return <WebInAppSurvey
+          survey={surveyObjectFromSurveyServ}
+          surveyType="compact"
+          placeholders={null}
+          onSubmit={(data, callback) => {
+            console.log(data, callback?.())
+            setIsSurveyCompleted(true)
+          }}
+          onDismiss={() => {
+            // when the widget is dismissed, this gets executed.
+            ....
+          }}
+          remindLater={() => {
+            // when the remind later is selected on the widget, this gets executed.
+            ....
+          }}
+          unsubscribeUrl={'#'}
+          isSurveyCompleted={isSurveyCompleted}
+          children={null} // if we want render with respect to the widget's fixed position
+        />
+}
+```
 ```
+import {NPS} from 'freemium-survey-components'
+const NPSPreview = () => {
+  return <NPS
+          type_info={{
+            linear_scale : {
+              button_shape : 'rounded',
+              button_style : 'highlighted'
+            },
+            validation : {
+              min : 0
+            },
+            rating_presets : {
+              start : 'Very unlikely', 
+              end : 'Very likely'
+            },
+            footer_text : 'We look forward to act on your feedback',
+            onChangeHandler : (value) => console.log(value)
+          }}
+        />
+}