freemium-survey-components 0.1.0

package/src/mock.ts

@@ -0,0 +1,363 @@
+export default {
+  name: 'new survey',
+  desc: 'description here',
+  type: 'NPS',
+  header_message:
+    "Thank you for your time. This shouldn't take more than 2 mins for you to complete the survey!",
+  gratitude_message: 'Thank you for the feedback',
+  ui_branding: {
+    logo_url:
+      'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Slack_Technologies_Logo.svg/1280px-Slack_Technologies_Logo.svg.png',
+    footer_html: 'We look forward to acting on your feedback!',
+  },
+  meta: {
+    blocks: [
+      {
+        name: 'NPS',
+        title: 'NPS',
+        order: 1,
+        question_names: ['Q_1'],
+        type: 'RANGE',
+        required: true,
+        is_based_on_score: false,
+        is_same_for_all: true,
+        jump_logic: null,
+      },
+      {
+        name: 'B_1',
+        order: 2,
+        type: 'CHECKBOX',
+        title: 'Follow up 1',
+        question_names: ['Q_2', 'Q_21', 'Q_22'],
+        required: false,
+        is_based_on_score: true,
+        is_same_for_all: false,
+        jump_logic: null,
+        branchOption: 'specific',
+        nextBlock: 'B_3',
+      },
+      {
+        name: 'B_2',
+        order: 3,
+        type: 'CHECKBOX',
+        title: 'Follow up 2',
+        question_names: ['Q_5', 'Q_51', 'Q_52'],
+        position: 5,
+        required: true,
+        is_based_on_score: true,
+        is_same_for_all: false,
+        jump_logic: null,
+      },
+      {
+        name: 'B_3',
+        order: 4,
+        type: 'input',
+        title: 'Follow up 3',
+        question_names: ['Q_8'],
+        position: 9,
+        required: true,
+        is_based_on_score: false,
+        is_same_for_all: true,
+        jump_logic: null,
+      },
+    ],
+  },
+  question_details: {
+    questions: [
+      {
+        text: 'How likely are you to recommend bookmyshow to your friend or colleague?',
+        name: 'Q_1',
+        position: 0,
+        type_info: {
+          question_type: 'RANGE',
+          validation: {
+            min: 1,
+            max: 10,
+          },
+          choices: [
+            {
+              value: 0,
+              position: 0,
+              dependent_question_names: ['Q_2', 'Q_52'],
+            },
+            {
+              value: 1,
+              position: 1,
+              dependent_question_names: ['Q_2', 'Q_52'],
+            },
+            {
+              value: 2,
+              position: 2,
+              dependent_question_names: ['Q_2', 'Q_52'],
+            },
+            {
+              value: 3,
+              position: 3,
+              dependent_question_names: ['Q_21', 'Q_52'],
+            },
+            {
+              value: 4,
+              position: 4,
+              dependent_question_names: ['Q_21', 'Q_52'],
+            },
+            {
+              value: 5,
+              position: 5,
+              dependent_question_names: ['Q_21', 'Q_52'],
+            },
+            {
+              value: 6,
+              position: 6,
+              dependent_question_names: ['Q_21', 'Q_52'],
+            },
+            {
+              value: 7,
+              position: 7,
+              dependent_question_names: ['Q_22', 'Q_52'],
+            },
+            {
+              value: 8,
+              position: 8,
+              dependent_question_names: ['Q_22', 'Q_52'],
+            },
+            {
+              value: 9,
+              position: 9,
+              dependent_question_names: ['Q_22', 'Q_52'],
+            },
+          ],
+          linear_scale: {
+            button_style: 'standard',
+            button_shape: 'curved',
+          },
+          score_presets: {
+            start: 'Not Likely',
+            end: 'Very Likely',
+          },
+          footer_text: 'We look forward to acting on your feedback!',
+        },
+      },
+      {
+        text: 'How well do you recomment our product to others ONE',
+        name: 'Q_2',
+        position: 1,
+        type_info: {
+          question_type: 'MESSAGE',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {
+            value: 'Thank you for the feedback',
+          },
+        },
+        question_type: 'CHECKBOX',
+      },
+      {
+        text: 'How well do you recomment our product to others TWO',
+        name: 'Q_21',
+        position: 3,
+        type_info: {
+          question_type: 'PARAGRAPH',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {
+            value: 'Thank you for the feedback',
+          },
+        },
+        question_type: 'CHECKBOX',
+      },
+      {
+        text: 'How well do you recomment our product to others THREE',
+        name: 'Q_22',
+        position: 4,
+        type_info: {
+          question_type: 'CHECKBOX',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {
+            value: 'Thank you for the feedback',
+          },
+        },
+        question_type: 'CHECKBOX',
+        choices: [
+          {
+            id: 'opt-1',
+            label: 'Option 1',
+          },
+          {
+            id: 'opt-2',
+            label: 'Option 2',
+          },
+          {
+            id: 'opt-3',
+            label: 'Option 3',
+          },
+        ],
+      },
+      {
+        name: 'Q_5',
+        position: 5,
+        text: 'Which feature you like the most?',
+        type_info: {
+          question_type: 'CHECKBOX',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {},
+        },
+        question_type: 'CHECKBOX',
+      },
+      {
+        name: 'Q_51',
+        position: 7,
+        text: 'Which feature you like the most Q_51?',
+        type_info: {
+          question_type: 'CHECKBOX',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {},
+        },
+        question_type: 'CHECKBOX',
+        choices: [
+          {
+            id: 'opt-1',
+            label: 'Option 1',
+          },
+          {
+            id: 'opt-2',
+            label: 'Option 2',
+          },
+        ],
+      },
+      {
+        name: 'Q_52',
+        position: 8,
+        text: 'Which feature you like the most?',
+        type_info: {
+          question_type: 'CHECKBOX',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {},
+        },
+        question_type: 'CHECKBOX',
+      },
+      {
+        name: 'Q_8',
+        position: 8,
+        text: 'Which feature you like the most? Q_8 last block',
+        type_info: {
+          question_type: 'CHECKBOX',
+          choices: [
+            {
+              id: 'opt-1',
+              label: 'Option 1',
+            },
+            {
+              id: 'opt-2',
+              label: 'Option 2',
+            },
+            {
+              id: 'opt-3',
+              label: 'Option 3',
+            },
+          ],
+          meta: {},
+        },
+      },
+    ],
+  },
+  state: 'DRAFT',
+  created_on: '2021-11-01T13:27:11.600Z',
+  updated_on: '2021-11-01T13:27:11.600Z',
+  schedule_info: {
+    start_date: '2021-11-31',
+    end_date: '2021-12-05',
+    preferred_time: {
+      hour: 15,
+      minute: 15,
+    },
+    remind_in: [30],
+    next_survey_when_responded: 30,
+    next_survey_when_not_responded: 30,
+  },
+  throttle_info: {
+    limit_per_day: 100,
+  },
+  ui_theme: {
+    body_background_color: '#000',
+    primary_font: '#FFF',
+    secondary_font: '#423233',
+    primary_button_color: '#123249',
+    secondary_button_color: '#981237',
+  },
+}

package/src/survey/index.tsx

@@ -0,0 +1,269 @@
+import React, {useState, useRef, useEffect, useMemo} from 'react'
+import {ProgressBar, Button} from '../components'
+import Question from './question'
+import './style.css'
+
+// these fields do not need next button to proceed
+const AUTO_COMMIT_FIELD_TYPES = ['RANGE', 'NPS', 'RADIO']
+const SurveyEndCard = () => {
+  return (
+    <div className="question-container" style={{gap: '16px'}}>
+      <h4>Thank you for taking our survey!.</h4>
+      <p> Your response is very important to us.</p>
+    </div>
+  )
+}
+const Survey = ({survey, onSubmit}: any) => {
+  const {
+    meta: {blocks},
+    question_details: {questions},
+  } = survey
+  const [formValues, setFormValues] = useState<any>({})
+  const [isSurveyCompleted, setIsSurveyCompleted] = useState<boolean>(false)
+  const [blocksWithQns, setBlocksWithQns] = useState([] as any)
+  const currentBlock = useRef<any>(null)
+  const currentQuestion = useRef<any>(null)
+  const blockElementRef = useRef<HTMLDivElement | null>(null) // to focus on the newly added block
+  const currentBlockIndex = useRef(0) // to keep track of the index of the dirty block
+  const isValuesCommitted = useRef(false) // in case of non-auto commit fields, to check if the user commits the values or just modifying it
+  const tempBlocksWithQns = useRef([] as any)
+
+  useEffect(() => {
+    if (!blocks) {
+      return
+    }
+    if (!currentBlock.current && blocks.length > 0) {
+      handleBlockProgression(blocks[0])
+      return
+    }
+  }, [blocks])
+
+  useEffect(() => {
+    blockElementRef.current?.scrollIntoView({
+      block: 'center',
+      behavior: 'smooth',
+    })
+    tempBlocksWithQns.current = blocksWithQns
+  }, [blocksWithQns])
+
+  useEffect(() => {
+    //if not the initial render
+    if (Object.keys(formValues).length > 0) {
+      // move to next block if current qn is a auto commit qn
+      // if current qn is committed
+      // and if the qn is not the final qn since for the final qn, submit should end the survey
+      if (
+        currentQuestion.current &&
+        (AUTO_COMMIT_FIELD_TYPES.includes(
+          currentQuestion.current.type_info.question_type,
+        ) ||
+          isValuesCommitted.current) &&
+        !isCurrentBlockFinal()
+      ) {
+        moveToNextBlock()
+      }
+    }
+  }, [formValues])
+
+  const isCurrentBlockFinal = () => {
+    return (
+      currentBlockIndex.current === blocks.length - 1 ||
+      currentBlock.current.branchOption === 'end'
+    )
+  }
+  //if the already filled block is modified flash the state associated with all the blocks below the block being edited
+  const resetFormBelowBlock = (block: any) => {
+    const blockIndex = blocksWithQns.findIndex(
+      (eachBlock) => eachBlock.name === block.name,
+    )
+    const modifiedBlocksWithQns = blocksWithQns.slice(0, blockIndex + 1)
+    const modifiedFormValues = modifiedBlocksWithQns.reduce(
+      (result, current) => {
+        result[current.question.name] = formValues[current.question.name]
+        return result
+      },
+      {},
+    )
+    currentBlockIndex.current = blocks.findIndex(
+      (eachBlock) => eachBlock.name === block.name,
+    )
+    return [modifiedBlocksWithQns, modifiedFormValues]
+  }
+
+  const handleBlockProgression = (block) => {
+    let question: any = {}
+    if (block.is_based_on_score) {
+      const possibleNextQuestions =
+        questions[0].type_info.choices[formValues?.[questions[0].name]]
+          ?.dependent_question_names
+      const nextQuestionName = block.question_names.find((eachQuestion: any) =>
+        possibleNextQuestions?.includes(eachQuestion),
+      )
+      question = questions.find(
+        (eachQuestion: any) => eachQuestion.name === nextQuestionName,
+      )
+    } else {
+      question = questions.find(
+        (eachQuestion: any) => eachQuestion.name === block.question_names[0],
+      )
+    }
+    currentBlock.current = block
+    currentQuestion.current = question
+    const isPresent = tempBlocksWithQns.current.find(
+      (eachBlock) => eachBlock.question.name === question.name,
+    )
+    if (!isPresent)
+      setBlocksWithQns([
+        ...tempBlocksWithQns.current,
+        {...block, question: question},
+      ])
+  }
+
+  const handleFormValues = (block, value, isCommitting) => {
+    if (isCommitting) {
+      if (
+        formValues[block.question.name] != null &&
+        block.name !== blocksWithQns[blocksWithQns.length - 1].name
+      ) {
+        const [modifiedBlocksWithQns, modifiedFormValues]: any =
+          resetFormBelowBlock(block)
+        setFormValues({
+          ...modifiedFormValues,
+          ...(value != null && {[block.question.name]: value}),
+        })
+        //setting the state of the blocksWithQns will trigger the useEffect unnecessarily which will scroll the view based on the temp block state
+        tempBlocksWithQns.current = modifiedBlocksWithQns
+      } else {
+        setFormValues({
+          ...formValues,
+          ...(value != null && {[block.question.name]: value}),
+        })
+      }
+    } else {
+      setFormValues({
+        ...formValues,
+        ...(value != null && {[block.question.name]: value}),
+      })
+    }
+  }
+
+  const moveToNextBlock = () => {
+    if (isCurrentBlockFinal()) {
+      setIsSurveyCompleted(true)
+    } else {
+      if (currentBlock.current.nextBlock) {
+        currentBlockIndex.current = blocks.findIndex(
+          (block) => block.name === currentBlock.current.nextBlock,
+        )
+      } else {
+        currentBlockIndex.current += 1
+      }
+      handleBlockProgression(blocks[currentBlockIndex.current])
+    }
+  }
+  const skipBlock = (block) => {
+    const blockIndex = blocksWithQns.findIndex(
+      (eachBlock) => eachBlock.name === block.name,
+    )
+    const modifiedBlocksWithQns = [...blocksWithQns]
+    modifiedBlocksWithQns.splice(blockIndex, 1)
+    //setting the state of the blocksWithQns will trigger the useEffect unnecessarily which will scroll the view based on the temporary block state
+    tempBlocksWithQns.current = modifiedBlocksWithQns
+    moveToNextBlock()
+  }
+  // do display next button, if the question is the current question being edited
+  // if the question is of type range, nps or radio
+  // if the block is not the final block by index and by End survey logic
+  const doDisplayNextButton = (block, question) => {
+    if (
+      question.name === currentQuestion.current.name &&
+      !AUTO_COMMIT_FIELD_TYPES.includes(question.type_info.question_type) &&
+      !isCurrentBlockFinal()
+    ) {
+      return true
+    }
+    return false
+  }
+  const doDisplaySkipButton = (block, question) => {
+    if (!block.required && question.name === currentQuestion.current.name) {
+      return true
+    }
+    return false
+  }
+
+  if (!currentBlock.current || !currentQuestion.current) {
+    return null
+  }
+  if (isSurveyCompleted) {
+    return <SurveyEndCard />
+  }
+  return (
+    <>
+      <ProgressBar
+        totalSteps={blocks.length}
+        completedSteps={currentBlockIndex.current}
+      />
+      {blocksWithQns.map((block: any, index: number) => (
+        <div
+          className="question-container"
+          ref={blockElementRef}
+          id={block.title}
+          key={block.title}
+        >
+          <div className="question-text">{block.question.text}</div>
+          <Question
+            question={block.question}
+            formValues={formValues}
+            onChangeHandler={(value: any) => {
+              isValuesCommitted.current = false
+              currentBlockIndex.current = blocks.findIndex(
+                (eachBlock) => eachBlock.name === block.name,
+              )
+              currentBlock.current = block
+              currentQuestion.current = block.question
+              handleFormValues(
+                block,
+                value,
+                AUTO_COMMIT_FIELD_TYPES.includes(
+                  block.question.type_info.question_type,
+                ) && !isCurrentBlockFinal(),
+              )
+            }}
+          />
+          <div className="action-buttons">
+            {doDisplayNextButton(block, block.question) && (
+              <Button
+                onClick={() => {
+                  isValuesCommitted.current = true
+                  handleFormValues(block, null, true)
+                }}
+                className="next-button"
+              >
+                Next
+              </Button>
+            )}
+            {doDisplaySkipButton(block, block.question) && (
+              <button className="skip-button" onClick={skipBlock}>
+                Skip
+              </button>
+            )}
+          </div>
+        </div>
+      ))}
+      {isCurrentBlockFinal() && (
+        <div className="submit">
+          <Button
+            onClick={() => {
+              setIsSurveyCompleted(true)
+              onSubmit(formValues)
+            }}
+          >
+            Submit Survey
+          </Button>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default Survey

package/src/survey/question.tsx

@@ -0,0 +1,79 @@
+import React, {useEffect} from 'react'
+import {
+  NPS,
+  CheckboxGroup,
+  Radio,
+  RadioGroup,
+  Input,
+  TextArea,
+} from '../components'
+
+const Question = ({question, formValues, onChangeHandler}: any) => {
+  switch (question.type_info.question_type) {
+    case 'RANGE':
+      return (
+        <NPS
+          type_info={question.type_info}
+          onChangeHandler={onChangeHandler}
+          npsValue={formValues[question.name]}
+        />
+      )
+    case 'CHECKBOX':
+      return (
+        <CheckboxGroup
+          values={formValues[question.name]}
+          options={question.type_info.choices}
+          onChangeHandler={onChangeHandler}
+        />
+      )
+    case 'CHECKBOX':
+      return (
+        <RadioGroup
+          name={question.name}
+          onChangeHandler={onChangeHandler}
+          options={question.type_info.choices}
+          value={formValues[question.name]}
+        />
+      )
+    case 'MESSAGE':
+      return (
+        //in case of mobile device, we would render the textarea instead of input since we cannot line wrap the input field.
+        <div className="responsive-text-field">
+          <Input
+            autoFocus={true}
+            label=""
+            maxLength={300}
+            showCount={true}
+            isRequired={question.is_required}
+            value={formValues[question.name] || ''}
+            onChange={(e: any) => onChangeHandler(e.target.value)}
+          />
+          <TextArea
+            autoFocus={true}
+            label=""
+            maxLength={300}
+            showCount={true}
+            isRequired={question.is_required}
+            value={formValues[question.name] || ''}
+            onChange={(e: any) => onChangeHandler(e.target.value)}
+          />
+        </div>
+      )
+    case 'PARAGRAPH':
+      return (
+        <TextArea
+          autoFocus={true}
+          label=""
+          isRequired={question.is_required}
+          value={formValues[question.name] || ''}
+          onChange={(e: any) => onChangeHandler(e.target.value)}
+        />
+      )
+    default:
+      console.error(
+        `Question type ${question.type_info.question_type} not found`,
+      )
+      return null
+  }
+}
+export default Question