Freemium-survey-components NPM

freemium-survey-components

Freemium-survey-components renders the survey collection form given the survey object from the survey-serv platform service.

Peer Dependencies

Make sure you have the below installed in your app.

react >= 17.0.2
react-dom >= 17.0.2

Usage

  npm i freemium-survey-components

Exports (Named)

Survey : SurveyProps
WebInAppSurvey : WebInAppSurveyProps
Range : RangeProps
ChannelPreview : ChannelPreviewProps

Types

type SurveyProps = {
  survey: SurveyType
  answers: SurveyResponseType | null
  surveyStyle?: 'standard' | 'card'
  placeholders?: {
    [key: string]: string
  }
  initialPivotAnswer?: number
  onSubmit: (
    data: {
      [key: string]:
        | string
        | number
        | Array<string | number>
        | { [key: string]: string }
        | null
    },
    callback: Function,
    status: AnswerStatus,
  ) => void
  preview?: boolean
  isMobile?: boolean
  closePreview?: () => void
  onAnsweringPrompt: (id: number) => void
}

type ChannelPreviewProps = SurveyProps & { channel: 'whatsapp' | 'instagram' }

type WidgetProps = {
  survey: SurveyType
  answers: SurveyResponseType | null
  preview?: boolean
  placeholders: {
    [key: string]: string
  }
  onSubmit: (
    data: { [key: string]: string | number | Array<string | number> | null },
    callback: Function,
    status: AnswerStatus,
  ) => void
  onDismiss: () => void
  onClose?: () => void
  surveyType: 'default' | 'compact' | 'cozy'
  unsubscribeUrl?: string
  isSurveyCompleted: boolean
  children: React.ReactNode
  onAnsweringPrompt: (id: number) => void
}

type RangeProps = {
  type_info: {
    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
      }
    }
    footer_text: string
  }
  onChangeHandler: (value: number) => void
  value?: number
}

Usage

import { Survey } from 'freemium-survey-components';

<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'}}`);
  }}
/>;

import {WebInAppSurvey} from 'freemium-survey-components'
  const [isSurveyCompleted,setIsSurveyCompleted] = useState(false)
  <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'}`)}}
        />

import { Range } from 'freemium-survey-components';

<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',
      },
      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

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.

Surveyserv Freshsurvey Freemium

@everything-registry/sub-chunk-1702 @infinitebrahmanuniverse/nolb-free

3 days ago

3 days ago

5 days ago

5 days ago

6 days ago

6 days ago

7 days ago

7 days ago

7 days ago

7 days ago

7 days ago

7 days ago

7 days ago

10 days ago

10 days ago

10 days ago

12 days ago

13 days ago

13 days ago

13 days ago

13 days ago

12 days ago

12 days ago

12 days ago

12 days ago

13 days ago

14 days ago

15 days ago

17 days ago

17 days ago

20 days ago

23 days ago

23 days ago

24 days ago

24 days ago

28 days ago

29 days ago

29 days ago

29 days ago

29 days ago

1 month ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

6 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

11 months ago

12 months ago

12 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago