Skip to content

Commit

Permalink
WP-763: [APCD] Use field wrapper for registration, exception and exte…
Browse files Browse the repository at this point in the history 
…nsion forms. (#360)

* core-wrapper and usage of field-wrapper

* ExceptionForm fieldwrapper

* Registration Changes
  • Loading branch information
@chandra-tacc
chandra-tacc authored Nov 14, 2024
1 parent 7811253 commit 264b4da
Show file tree
Hide file tree
Showing 22 changed files with 448 additions and 533 deletions.
4 changes: 0 additions & 4 deletions apcd-cms/src/client/src/components/Components/FormLabel/FormLabel.module.css
View file

This file was deleted.

29 changes: 0 additions & 29 deletions apcd-cms/src/client/src/components/Components/FormLabel/FormLabel.tsx
View file

This file was deleted.

1 change: 1 addition & 0 deletions apcd-cms/src/client/src/components/Forms/Registrations/FormContact.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Field, ErrorMessage } from 'formik';
import { FormGroup, Label, FormFeedback } from 'reactstrap';
import { TextFormField } from './TextFormField';
import styles from './RegistrationForm.module.css';
import FieldWrapper from 'core-wrappers/FieldWrapperFormik/FieldWrapperFormik';

export const RegistrationContact: React.FC<{ index: number }> = ({ index }) => {
return (
Expand Down
204 changes: 89 additions & 115 deletions apcd-cms/src/client/src/components/Forms/Registrations/FormEntity.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Field, ErrorMessage } from 'formik';
import { FormGroup, Label, FormFeedback } from 'reactstrap';
import { TextFormField } from './TextFormField';
import styles from './RegistrationForm.module.css';
import FieldWrapper from 'core-wrappers/FieldWrapperFormik';

export const RegistrationEntity: React.FC<{ index: number }> = ({ index }) => {
return (
Expand All @@ -14,15 +15,13 @@ export const RegistrationEntity: React.FC<{ index: number }> = ({ index }) => {
required={true}
/>

<FormGroup className="field-wrapper required">
<Label>
Number/Code
<span className={styles.isRequired}> (required)</span>
</Label>
<div className="help-text">
Provide all available identifiers. At least one of the following is
required.
</div>
<FieldWrapper
name={`entities.${index}.number_code`}
label="Number/Code"
required={true}
description="Provide all available identifiers. At least one of the following is required."
>
<div id={`entities-${index}.number_code`} style={{ display: 'none' }} />
<FormGroup className="o-grid o-grid--col-auto-count" noMargin={true}>
<TextFormField
name={`entities.${index}.fein`}
Expand All @@ -42,125 +41,100 @@ export const RegistrationEntity: React.FC<{ index: number }> = ({ index }) => {
helpText="Enter digits only."
/>
</FormGroup>
</FormGroup>
</FieldWrapper>

<h6>Type of Plan</h6>
<div className="field-wrapper required">
<Label>
Plan Types
<span className={styles.isRequired}> (required)</span>
</Label>
</div>
<FormGroup
className="checkboxselectmultiple"
id={`entities.${index}.types_of_plans`}
<FieldWrapper
name={`entities.${index}.types_of_plans_hidden`}
label="Plan Types"
required={true}
>
{['Commercial', 'Medicare', 'Medicaid'].map((planType) => (
<FormGroup
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}.wrapper`}
noMargin={true}
>
<Label
htmlFor={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}.label`}
>
<Field
type="checkbox"
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
name={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
id={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
></Field>
{planType}
{planType == 'Medicaid' ? (
<small>(for state use only)</small>
) : (
<></>
)}
</Label>
<ErrorMessage
name={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
component="div"
className={styles.isInvalid}
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}.error`}
/>
</FormGroup>
))}
<ErrorMessage
name={`entities.${index}.types_of_plans_hidden`}
component="div"
className={styles.isInvalid}
<div
id={`entities.${index}.types_of_plans_hidden`}
style={{ display: 'none' }}
/>
</FormGroup>
<FormGroup
className="checkboxselectmultiple"
id={`entities.${index}.types_of_plans`}
>
{['Commercial', 'Medicare', 'Medicaid'].map((planType) => (
<FormGroup
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}.wrapper`}
noMargin={true}
>
<Label
htmlFor={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}.label`}
>
<Field
type="checkbox"
key={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
name={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
id={`entities.${index}.types_of_plans_${planType.toLowerCase()}`}
></Field>
{planType}
{planType == 'Medicaid' ? (
<small>(for state use only)</small>
) : (
<></>
)}
</Label>
</FormGroup>
))}
</FormGroup>
</FieldWrapper>

<h6>File Submission</h6>
<div className="field-wrapper required">
<Label>
Types of Files
<span className={styles.isRequired}> (required)</span>
</Label>
<div className="help-text">
Eligibility/Enrollment files are mandatory. At least one claims file
type (Medical, Pharmacy, and Dental) must be selected.
</div>
</div>
<FormGroup
className="checkboxselectmultiple"
id={`entities.${index}.types_of_files`}
<FieldWrapper
name={`entities.${index}.types_of_files_hidden`}
label="Types of Files"
required={true}
description="Eligibility/Enrollment files are mandatory. At least one claims file type (Medical, Pharmacy, and Dental) must be selected."
>
{[
'Eligibility/Enrollment',
'Provider',
'Medical',
'Pharmacy',
'Dental',
].map((fileType) => (
<FormGroup
key={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}.wrapper`}
noMargin={true}
>
<Label
htmlFor={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
<FormGroup
className="checkboxselectmultiple"
id={`entities.${index}.types_of_files`}
>
{[
'Eligibility/Enrollment',
'Provider',
'Medical',
'Pharmacy',
'Dental',
].map((fileType) => (
<FormGroup
key={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}.label`}
.replace('/', '_')}.wrapper`}
noMargin={true}
>
<Field
type="checkbox"
key={`entities.${index}.types_of_files_${fileType
<Label
htmlFor={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
name={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
id={`entities.${index}.types_of_files_${fileType
key={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
disabled={fileType == 'Eligibility/Enrollment' ? true : false}
></Field>
{fileType}
</Label>
<ErrorMessage
name={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
component="div"
className={styles.isInvalid}
key={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}.error`}
/>
</FormGroup>
))}
<ErrorMessage
name={`entities.${index}.types_of_files_hidden`}
component="div"
className={styles.isInvalid}
/>
</FormGroup>
.replace('/', '_')}.label`}
>
<Field
type="checkbox"
key={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
name={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
id={`entities.${index}.types_of_files_${fileType
.toLowerCase()
.replace('/', '_')}`}
disabled={fileType == 'Eligibility/Enrollment' ? true : false}
></Field>
{fileType}
</Label>
</FormGroup>
))}
</FormGroup>
</FieldWrapper>

<h6>
Coverage Estimates
Expand Down
Loading

0 comments on commit 264b4da

Please sign in to comment.