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 & PreviewChannelType

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.