types#Questionnaire TypeScript Examples

async function createProgramFrom(
  answers: Questionnaire,
  workspaceId: string,
) {
  const payload = {
    // TODO: description, name, abbreviation and omimId should be entered by the user
    program: {
      name: `${answers.disease} Gene Therapy`,
      description: 'Gene Therapy',
      disease: {
        name: answers.disease,
        causalGene: answers.causalGene,
        mutationImpact: mutationsTypesMap[answers.mutationType],
        proteinSize: proteinSizeTypesMap[answers.proteinSize],
        organizationsWorkingOnDisease: [answers.foundation],
      },
    },
  }
  return axios.post(`/workspaces/${workspaceId}/programs`, payload)
}

function isGeneTherapyFeasible(answers: Questionnaire): boolean {
  if (
    answers.mutationType === MutationType.NOT_SURE ||
    answers.proteinSize === ProteinSize.NOT_SURE
  )
    return true
  return (
    answers.mutationType === MutationType.LEADS_TO_LOSS &&
    answers.proteinSize === ProteinSize.LESS_THAN_1100
  )
}

export default function QuestionnaireResult({
  isFeasible,
  answers,
}: {
  isFeasible: boolean
  answers: Questionnaire
}) {
  const queryClient = useQueryClient()
  const router = useRouter()
  const { data } = queryClient.getQueryData<any>('defaultWorkspace')
  const createProgramMutation = useMutation(
    () => createProgramFrom(answers, data.workspace.workspaceId),
    {
      onSuccess: async (resp) => {
        const program = resp?.data?.program
        notification.success({
          duration: 2,
          message: 'Program created successfully',
        })
        await queryClient.invalidateQueries('defaultWorkspace')
        await router.push(
          `/programs/${program.workspaceId}/${program.programId}`,
        )
      },
      onError: (error: Error) =>
        notification.error({
          duration: 2,
          description: error.message,
          message: 'Error occur while creating the program',
        }),
    },
  )
  return (
    <Space
      direction="vertical"
      size={20}
      style={{ textAlign: 'center', paddingRight: 32 }}
    >
      <img
        width="238px"
        src={isFeasible ? '/eligibility_5.png' : '/eligibility_6.png'}
        alt={`${isFeasible ? 'Not ' : ''}Eligible illustration`}
      />
      <div>
        <Title level={3}>
          {isFeasible
            ? 'Your disease may be eligible for a AAV based Gene Therapy'
            : 'Your disease is not eligible but we can still help!'}
        </Title>
        <p>
          {isFeasible
            ? "Our team of specialists is looking over the results and will reach out to you for more info to confirm your eligibility. In the mean time, let's start a program and build a gene therapy roadmap for you."
            : "We're sorry, but your disease doesn't qualify for AAV-based gene therapy. Regardless, our team of scientists can still offer assistance and you can use OpenTreatments to make tracking your treatment program easier."}
        </p>
      </div>
      {isFeasible ? (
        <Button
          type="primary"
          icon={<PlusCircleOutlined />}
          onClick={() => createProgramMutation.mutate()}
          loading={createProgramMutation.isLoading}
        >
          Create a new program
        </Button>
      ) : (
        <Space>
          <Button type="primary">
            <a href="mailTo:[email protected]">
              Talk to our science team
            </a>
          </Button>
          <Button
            icon={<PlusCircleOutlined />}
            onClick={() => createProgramMutation.mutate()}
            loading={createProgramMutation.isLoading}
          >
            Add Program
          </Button>
        </Space>
      )}
    </Space>
  )
}

export default function questionnaire() {
  const [current, setCurrent] = React.useState(0)
  const [formValues, setFormValues] = React.useState({})
  const [feasibility, setFeasibility] = React.useState({
    isFeasible: false,
    assessmentFinished: false,
    answers: {},
  })
  const [content, setContent] = React.useState({
    imgURL: '/eligibility_2.png',
    description:
      "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
  })

  React.useEffect(() => {
    if (current === 0)
      setContent({
        imgURL: '/eligibility_2.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
    else if (current === 1)
      setContent({
        imgURL: '/eligibility_4.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
    else
      setContent({
        imgURL: '/eligibility_3.png',
        description:
          "Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De",
      })
  }, [current])

  const [form] = Form.useForm()
  useEffect(() => {
    setFormValues({ ...formValues, ...form.getFieldsValue() })
  }, [form])
  async function handleFormSubmit(values: Questionnaire) {
    const isFeasible = isGeneTherapyFeasible(values)
    setFeasibility({
      isFeasible,
      assessmentFinished: true,
      answers: values,
    })
  }

  const nextStep = () =>
    form.validateFields().then(() => setCurrent(current + 1))
  const title = 'Determine eligibility for AAV-based gene therapy'
  const subTitle =
    'Complete this short questionnaire to help our team determine your eligibility.'
  return (
    <AppLayout title="" selectedKey="programs">
      <SubHeader title={<h3>{title}</h3>} subTitle={subTitle} />
      <QuestionnaireContainer>
        <div className="questionnaire-form">
          {feasibility.assessmentFinished ? (
            <QuestionnaireResult
              isFeasible={feasibility.isFeasible}
              answers={feasibility.answers as Questionnaire}
            />
          ) : (
            <>
              <Steps current={current}>
                {steps.map((item, index) => (
                  <Step
                    className={index === 0 ? 'first-step' : ''}
                    key={item.title}
                    title={item.title}
                  />
                ))}
              </Steps>
              <OFForm
                onFinish={handleFormSubmit}
                initialValues={{
                  proteinSize: ProteinSize.LESS_THAN_1100,
                  mutationType: MutationType.LEADS_TO_LOSS,
                }}
                layout="vertical"
                form={form}
              >
                <div className="steps-content">
                  {steps.map((item, index) => (
                    <div
                      key={item.title}
                      style={{
                        display: index === current ? 'block' : 'none',
                      }}
                    >
                      {item.content}
                    </div>
                  ))}
                </div>
                <div className="steps-action">
                  {current > 0 && (
                    <Button
                      style={{ margin: '0 8px' }}
                      onClick={() => setCurrent(current - 1)}
                    >
                      Back
                    </Button>
                  )}

                  {current < steps.length - 1 && (
                    <Button type="primary" onClick={nextStep}>
                      Next
                    </Button>
                  )}
                  {current === steps.length - 1 && (
                    <Button type="primary" htmlType="submit">
                      Check Eligibility
                    </Button>
                  )}
                </div>
              </OFForm>
            </>
          )}
        </div>
        <QuestionnaireIllustration
          feasibility={feasibility}
          className="questionnaire-illustration"
          imgURL={content.imgURL}
          description={content.description}
        />
      </QuestionnaireContainer>
    </AppLayout>
  )
}