Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Denial questions #12

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Denial questions #12

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fecda42
Work on denial_questions flow - text attr in TextBlurb component, set…
jfang5792 Nov 20, 2024
aac68a6
Ran test suite, pasing now - recommitting
jfang5792 Nov 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 126 additions & 66 deletions src/pages/denial_questions/DenialQuestions.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import React, { useState } from 'react';
import { Button } from '@mantine/core';
import { CreateDenialRequestOptions, FHI_CLIENT } from '@/logic/clients/FhiClient';
import { TextBlurb } from '@/components/TextBlurb/TextBlurb';
import classes from '@/pages/styles.module.css';

interface Question {
id?: string;
text: string;
type: 'text' | 'textarea' | 'checkbox' | 'none';
name: string;
options?: { label: string; value: string }[];
additional?: string;
}

// Array of arrays, where each inner array contains questions to be displayed together
Expand All @@ -15,34 +19,34 @@ const questions: Question[][] = [
{
id: 'greeting',
name: 'greeting',
text: 'Thanks for choosing to use Fight Health Insurance! We do some things we think is cool-ish to try and improve your data privacy, you ay wish to read the privacy techniques and our privacy policy. You can also just jump right in and press next to get started',
text: 'Thanks for choosing to use Fight Health Insurance! We do some things we think is cool-ish to try and improve your data privacy (read the privacy techniques and our privacy policy here). You can also just jump right in and get started!',
type: 'none',
},
],
[
{
id: '1',
text: 'First Name:',
text: 'First Name',
type: 'text',
name: 'firstName',
},
{
id: '2',
text: 'Last Name:',
text: 'Last Name',
type: 'text',
name: 'lastName',
},
],
[
{
id: '3',
text: 'Your Street Address (e.g., 283 24th St):',
text: 'Your Street Address (e.g. 283 24th St)',
type: 'text',
name: 'streetAddress',
},
{
id: '4',
text: 'Your Zip Code:',
text: 'Your Zip Code (e.g. 94103)',
type: 'text',
name: 'zip',
},
Expand All @@ -51,17 +55,19 @@ const questions: Question[][] = [
[
{
id: 'denialText',
text: 'Your Insurance Denial:',
text: 'Your Insurance Denial (Remove personally identifiable information (PII) as we store for machine learning and may review)',
type: 'textarea',
name: 'denialText',
},
],
[
{
id: 'healthHistory',
text: 'Your Relevant Health History (optional, remove PII first):',
text: 'Your Relevant Health History (e.g. transgender, type 2 diabetes, fibromyalgia, celiac, etc.)',
type: 'textarea',
name: 'healthHistory',
additional:
'Do not include any personally identifiable information (like your name, address, etc.) If you do not know (or do not want to answer) you can skip this question.',
},
],
[
Expand Down Expand Up @@ -103,6 +109,7 @@ export function DenialQuestions() {
const [procedure, setProcedure] = useState('');
const [diagnosis, setDiagnosis] = useState('');
const [error, setError] = useState(null);
const [skipHealthHistory, setSkipHealthHistory] = useState(false);

const currentQuestionSet = questions[currentQuestionSetIndex];

Expand All @@ -126,6 +133,11 @@ export function DenialQuestions() {
}
};

const handleSkipHealthHistory = () => {
setSkipHealthHistory(true);
setCurrentQuestionSetIndex(currentQuestionSetIndex + 1);
};

const handleSubmitForm = async () => {
setIsLoading(true);
try {
Expand Down Expand Up @@ -161,76 +173,124 @@ export function DenialQuestions() {

return (
<div>
<h1>Upload Your Health Insurance Denial</h1>
{currentQuestionSetIndex === 0 ? (
<TextBlurb title="Upload your Denial" text={questions[0][0].text} />
) : (
<TextBlurb title="Upload your Denial" text="" />
)}
<section className="scan-section mt-2">
<div className="container">
{error && <p style={{ color: 'red' }}>{error}</p>}
{currentQuestionSet.map((question) => (
<div key={question.id} className="form-group">
<label>{question.text}</label>
<br />
{question.name && (
<>
{question.type === 'textarea' ? (
<textarea
name={question.name}
id={question.name}
value={String(
question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: ''
)}
onChange={handleAnswerChange}
style={{ width: '100%' }}
rows={20}
className="form-control"
/>
) : question.type === 'checkbox' ? (
question.options?.map((option) => (
<div key={option.value}>
{currentQuestionSet.map(
(question) =>
question.id !== 'greeting' && (
<div key={question.id} className="form-group">
<label>{question.text}</label>
<br />
{question.name && (
<>
{question.id === 'healthHistory' && !skipHealthHistory ? (
<>
<textarea
name={question.name}
id={question.name}
value={String(
question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: ''
)}
onChange={handleAnswerChange}
style={{ width: '100%' }}
rows={20}
className="form-control"
/>
{question.additional && (
<p className="mt-2 text-sm text-gray-600">{question.additional}</p>
)}
<div className="mt-2 d-flex justify-content-between">
<Button
radius="md"
size="lg"
className={classes.secondaryColor}
onClick={handleSkipHealthHistory}
style={{ textTransform: 'uppercase' }}
>
Skip
</Button>
</div>
</>
) : question.type === 'text' ? (
<>
<input
type="text"
name={question.name}
id={question.name}
value={String(
question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: ''
)}
onChange={handleAnswerChange}
className="form-control"
/>
</>
) : question.type === 'checkbox' ? (
question.options?.map((option) => (
<div key={option.value}>
<input
type="checkbox"
id={question.name}
name={question.name}
value={option.value}
checked={
(question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: '') === option.value
}
onChange={handleAnswerChange}
className="form-check-input"
/>
<label htmlFor={question.name} className="form-check-label">
{option.label}
</label>
</div>
))
) : (
<input
type="checkbox"
type="text"
id={question.name}
name={question.name}
value={option.value}
checked={
(question.name in answers
value={String(
question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: '') === option.value
}
: ''
)}
onChange={handleAnswerChange}
className="form-check-input"
className="form-control"
/>
<label htmlFor={question.name} className="form-check-label">
{option.label}
</label>
</div>
))
) : (
<input
type="text"
id={question.name}
name={question.name}
value={String(
question.name in answers
? answers[question.name as keyof CreateDenialRequestOptions]
: ''
)}
onChange={handleAnswerChange}
className="form-control"
/>
</>
)}
{!question.name && (
// Optional: Render something for non-interactive questions
<div></div>
)}
</>
)}
{!question.name && (
// Optional: Render something for non-interactive questions
<div></div>
)}
</div>
))}
<button type="button" className="btn btn-green" onClick={handleNextQuestionSet}>
{currentQuestionSetIndex < questions.length - 1 ? 'Next' : 'Submit'}
</button>
</div>
)
)}
<Button
radius="md"
size="lg"
className={classes.primaryColor}
onClick={handleNextQuestionSet}
style={{ textTransform: 'uppercase' }}
>
{currentQuestionSetIndex === 0
? 'Start'
: currentQuestionSetIndex < questions.length - 1
? 'Next'
: 'Submit'}
</Button>
</div>
Comment on lines +288 to 294
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gotcha so the plan here is to ask the initial set of questions then trigger a submit and fetch another set of questions? (Just asking since I don't see anything for the getting additional questions).

</section>
</div>
Expand Down
Loading