diff --git a/src/applications/user-testing/new-conditions/app-entry.jsx b/src/applications/user-testing/new-conditions/app-entry.jsx
new file mode 100644
index 000000000000..245e2a7d7155
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/app-entry.jsx
@@ -0,0 +1,15 @@
+import '@department-of-veterans-affairs/platform-polyfills';
+import './sass/new-conditions.scss';
+
+import { startAppFromIndex } from '@department-of-veterans-affairs/platform-startup/exports';
+
+import routes from './routes';
+import reducer from './reducers';
+import manifest from './manifest.json';
+
+startAppFromIndex({
+ entryName: manifest.entryName,
+ url: manifest.rootUrl,
+ reducer,
+ routes,
+});
diff --git a/src/applications/user-testing/new-conditions/components/Autocomplete.jsx b/src/applications/user-testing/new-conditions/components/Autocomplete.jsx
new file mode 100644
index 000000000000..9f085ab5ad18
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/components/Autocomplete.jsx
@@ -0,0 +1,221 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { VaTextInput } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import debounce from 'lodash/debounce';
+import { fullStringSimilaritySearch } from 'platform/forms-system/src/js/utilities/addDisabilitiesStringSearch';
+
+const INSTRUCTIONS =
+ 'When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures.';
+
+const createFreeTextItem = val => `Enter your condition as "${val}"`;
+
+const Autocomplete = ({
+ availableResults,
+ debounceDelay,
+ formData,
+ id,
+ label,
+ onChange,
+}) => {
+ const [value, setValue] = useState(formData);
+ const [results, setResults] = useState([]);
+ const [activeIndex, setActiveIndex] = useState(null);
+ const [ariaLiveText, setAriaLiveText] = useState('');
+
+ const containerRef = useRef(null);
+ const inputRef = useRef(null);
+ const resultsRef = useRef([]);
+
+ // Delays screen reader result count reading to avoid interruption by input content reading
+ const debouncedSetAriaLiveText = useRef(
+ debounce((resultCount, freeTextResult) => {
+ const makePlural = resultCount > 1 ? 's' : '';
+
+ setAriaLiveText(
+ `${resultCount} result${makePlural}. ${freeTextResult}, (1 of ${resultCount})`,
+ );
+ }, 700),
+ ).current;
+
+ const debouncedSearch = useRef(
+ debounce(async inputValue => {
+ const freeTextResult = createFreeTextItem(inputValue);
+ const searchResults = fullStringSimilaritySearch(
+ inputValue,
+ availableResults,
+ );
+ const updatedResults = [freeTextResult, ...searchResults];
+ setResults(updatedResults);
+ setActiveIndex(0);
+
+ debouncedSetAriaLiveText(updatedResults.length, freeTextResult);
+ }, debounceDelay),
+ ).current;
+
+ const closeList = useCallback(
+ () => {
+ debouncedSearch.cancel();
+ debouncedSetAriaLiveText.cancel();
+ setResults([]);
+ setActiveIndex(null);
+ },
+ [debouncedSearch, debouncedSetAriaLiveText],
+ );
+
+ const handleInputChange = inputValue => {
+ setValue(inputValue);
+ onChange(inputValue);
+
+ if (!inputValue) {
+ closeList();
+ setAriaLiveText('Input is empty. Please enter a condition.');
+ return;
+ }
+
+ debouncedSearch(inputValue);
+ };
+
+ const activateScrollToAndFocus = index => {
+ setActiveIndex(index);
+
+ const activeResult = resultsRef.current[index];
+ activeResult?.scrollIntoView({
+ block: 'nearest',
+ });
+ activeResult?.focus();
+ };
+
+ const focusOnInput = () =>
+ inputRef.current.shadowRoot.querySelector('input').focus();
+
+ const navigateList = (e, adjustment) => {
+ e.preventDefault();
+ const newIndex = activeIndex + adjustment;
+ if (newIndex > results.length - 1) {
+ return;
+ }
+
+ if (newIndex < 1) {
+ activateScrollToAndFocus(0);
+
+ focusOnInput();
+ } else {
+ activateScrollToAndFocus(newIndex);
+ }
+ };
+
+ const selectResult = result => {
+ const newValue = result === createFreeTextItem(value) ? value : result;
+ setValue(newValue);
+ onChange(newValue);
+ setAriaLiveText(`${newValue} is selected`);
+ closeList();
+
+ focusOnInput();
+ };
+
+ const handleKeyDown = e => {
+ if (results.length > 0) {
+ if (e.key === 'ArrowDown') {
+ navigateList(e, 1);
+ } else if (e.key === 'ArrowUp') {
+ navigateList(e, -1);
+ } else if (e.key === 'Enter') {
+ selectResult(results[activeIndex]);
+ } else if (e.key === 'Escape') {
+ closeList();
+ focusOnInput();
+ } else if (e.key === 'Tab') {
+ closeList();
+ } else {
+ focusOnInput();
+ }
+ }
+ };
+
+ useEffect(
+ () => {
+ const handleClickOutside = event => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target)
+ ) {
+ closeList();
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ },
+ [closeList],
+ );
+
+ const handleFocus = () => {
+ if (value && results.length === 0) {
+ debouncedSearch(value);
+ }
+ };
+
+ return (
+
+
handleInputChange(e.target.value)}
+ onKeyDown={handleKeyDown}
+ />
+ {results.length > 0 && (
+
+ {results.map((result, index) => (
+ - {
+ resultsRef.current[index] = el;
+ }}
+ role="option"
+ tabIndex={-1}
+ onClick={() => selectResult(result)}
+ onKeyDown={handleKeyDown} // Keydown is handled on the input; this is never fired and prevents eslint error
+ onMouseEnter={() => activateScrollToAndFocus(index)}
+ >
+ {result}
+
+ ))}
+
+ )}
+
+ {ariaLiveText}
+
+
+
+
+
+
+
+ For help filling out this form, or if the form isn’t working
+ right, please
+
+
+
+
+
+
+
+
+
+
+ Your application has been submitted
+
+
+
We may contact you for more information or documents.
+
Please print this page for your records.
+
+
+ File for disability compensation Claim{' '}
+ (Form {formId})
+
+ {fullName ? (
+
+ for {fullName.first} {fullName.middle} {fullName.last}
+ {fullName.suffix ? `, ${fullName.suffix}` : null}
+
+ ) : null}
+
+ {confirmationNumber ? (
+ <>
+
Confirmation number
+
{confirmationNumber}
+
+ ) : null}
+
+ {isValid(submitDate) ? (
+
+ Date submitted
+
+ {format(submitDate, 'MMMM d, yyyy')}
+
+ ) : null}
+
+
+
+
+ Go back to VA.gov
+
+
+ {/*
+
Need help?
+
+ */}
+
Add a condition below. You can add more conditions later.
+ If your condition isn’t listed
+
+ You can claim a condition that isn’t listed. Enter your condition,
+ diagnosis or short description of your symptoms.
+
+ Examples of conditions
+
+ - Tinnitus (ringing or hissing in ears)
+ - PTSD (post-traumatic stress disorder)
+ - Hearing loss
+ - Neck strain (cervical strain)
+ - Ankylosis in knee, right
+ - Hypertension (high blood pressure)
+ - Migraines (headaches)
+
+ Add a new condition
+
+);
+
+export const ServiceConnectedDisabilityDescription = () => (
+
+
+ To be eligible for service-connected disability benefits, you’ll need to
+ show that your disability was caused by an event, injury, or disease
+ during your military service. You’ll need to show your condition is linked
+ to your service by submitting evidence, such as medical reports or lay
+ statements, with your claim. We may ask you to have a claim exam if you
+ don’t submit evidence or if we need more information to decide your claim.
+
+
+);
diff --git a/src/applications/user-testing/new-conditions/manifest.json b/src/applications/user-testing/new-conditions/manifest.json
new file mode 100644
index 000000000000..9f3d67d20d82
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/manifest.json
@@ -0,0 +1,7 @@
+{
+ "appName": "Demo: File for disability compensation - New conditions",
+ "entryFile": "./app-entry.jsx",
+ "entryName": "new-conditions",
+ "rootUrl": "/user-testing/new-conditions",
+ "productId": "0db1a222-9d73-4c26-9966-75283e6510a1"
+}
diff --git a/src/applications/user-testing/new-conditions/pages/chooseDemo.js b/src/applications/user-testing/new-conditions/pages/chooseDemo.js
new file mode 100644
index 000000000000..cdba25c4e1cd
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/chooseDemo.js
@@ -0,0 +1,31 @@
+import {
+ radioSchema,
+ radioUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+import capitalize from 'lodash/capitalize';
+
+import { CONDITION_BY_CONDITION, CONDITIONS_FIRST } from '../constants';
+
+const demoOptions = {
+ CONDITION_BY_CONDITION: capitalize(CONDITION_BY_CONDITION),
+ CONDITIONS_FIRST: capitalize(CONDITIONS_FIRST),
+};
+
+/** @type {PageSchema} */
+export default {
+ title: 'Choose a demo',
+ path: 'choose-demo',
+ uiSchema: {
+ demo: radioUI({
+ title: 'Choose a demo',
+ labels: demoOptions,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ demo: radioSchema(Object.keys(demoOptions)),
+ },
+ required: ['demo'],
+ },
+};
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/cause.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/cause.js
new file mode 100644
index 000000000000..b66491d50dc8
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/cause.js
@@ -0,0 +1,48 @@
+import {
+ arrayBuilderItemSubsequentPageTitleUI,
+ radioSchema,
+ radioUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { ServiceConnectedDisabilityDescription } from '../../content/newConditions';
+import { createItemName } from './utils';
+
+const causeOptions = {
+ NEW:
+ 'My condition was caused by an injury or exposure during my military service.',
+ SECONDARY:
+ 'My condition was caused by another service-connected disability I already have. (For example, I have a limp that caused lower-back problems.)',
+ WORSENED:
+ 'My condition existed before I served in the military, but it got worse because of my military service.',
+ VA:
+ 'My condition was caused by an injury or event that happened when I was receiving VA care.',
+};
+
+/** @returns {PageSchema} */
+const causePage = {
+ uiSchema: {
+ ...arrayBuilderItemSubsequentPageTitleUI(
+ ({ formData }) => `Cause of ${createItemName(formData)}`,
+ ),
+ cause: radioUI({
+ title: 'What caused your condition?',
+ labels: causeOptions,
+ }),
+ 'view:serviceConnectedDisabilityDescription': {
+ 'ui:description': ServiceConnectedDisabilityDescription,
+ },
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ cause: radioSchema(Object.keys(causeOptions)),
+ 'view:serviceConnectedDisabilityDescription': {
+ type: 'object',
+ properties: {},
+ },
+ },
+ required: ['cause'],
+ },
+};
+
+export default causePage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/causeFollowUp.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/causeFollowUp.js
new file mode 100644
index 000000000000..767654927f4a
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/causeFollowUp.js
@@ -0,0 +1,158 @@
+import {
+ arrayBuilderItemSubsequentPageTitleUI,
+ selectSchema,
+ selectUI,
+ textareaUI,
+ textUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { conditionOptions } from '../../content/conditionOptions';
+import { createItemName } from './utils';
+
+const createCauseFollowUpTitles = formData => {
+ const causeTitle = {
+ NEW: `Details of injury or exposure that caused ${createItemName(
+ formData,
+ )}`,
+ SECONDARY: `Details of the service-connected disability that caused ${createItemName(
+ formData,
+ )}`,
+ WORSENED: `Details of the injury or exposure that worsened ${createItemName(
+ formData,
+ )}`,
+ VA: `Details of the injury or event in VA care for ${createItemName(
+ formData,
+ )}`,
+ };
+
+ return causeTitle[formData.cause];
+};
+
+// TODO: Fix formData so that shape is consistent
+// formData changes shape between add and edit which results in the need for the conditional below
+const createCauseFollowUpConditional = (formData, index, causeType) => {
+ const cause = formData?.conditionByCondition
+ ? formData.conditionByCondition[index]?.cause
+ : formData.cause;
+ return cause !== causeType;
+};
+
+// TODO: Fix causedByCondition functionality on edit
+// formData on add { "conditionByCondition": [{ "condition": "migraines (headaches)"... }] }
+// formData on edit { "condition": "migraines (headaches)"... } - does not include ratedDisabilities or other new conditions
+// TODO: If causedByCondition is 'asthma' asthma is updated to 'emphysema' ensure 'asthma' is cleared as potential cause
+const getOtherConditions = (formData, currentIndex) => {
+ const ratedDisabilities =
+ formData?.ratedDisabilities?.map(disability => disability.name) || [];
+
+ const otherNewConditions =
+ formData?.conditionByCondition
+ ?.filter((_, index) => index !== currentIndex)
+ ?.map(condition => createItemName(condition)) || [];
+
+ return [...ratedDisabilities, ...otherNewConditions];
+};
+
+/** @returns {PageSchema} */
+const causeFollowUpPage = {
+ uiSchema: {
+ ...arrayBuilderItemSubsequentPageTitleUI(({ formData }) =>
+ createCauseFollowUpTitles(formData),
+ ),
+ primaryDescription: textareaUI({
+ title:
+ 'Briefly describe the injury or exposure that caused your condition. For example, I operated loud machinery while in the service, and this caused me to lose my hearing.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'NEW'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'NEW'),
+ charcount: true,
+ }),
+ causedByCondition: selectUI({
+ title:
+ 'Choose the service-connected disability that caused the new condition that you’re claiming here.',
+ updateSchema: (formData, _schema, _uiSchema, index) => {
+ return selectSchema(getOtherConditions(formData, index));
+ },
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'SECONDARY'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'SECONDARY'),
+ }),
+ causedByConditionDescription: textareaUI({
+ title: 'Briefly describe how this disability caused your new condition.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'SECONDARY'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'SECONDARY'),
+ charcount: true,
+ }),
+ worsenedDescription: textUI({
+ title:
+ 'Briefly describe the injury or exposure during your military service that caused your existing disability to get worse.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'WORSENED'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'WORSENED'),
+ charcount: true,
+ }),
+ worsenedEffects: textareaUI({
+ title:
+ 'Tell us how the disability affected you before your service, and how it affects you now after your service.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'WORSENED'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'WORSENED'),
+ charcount: true,
+ }),
+ vaMistreatmentDescription: textareaUI({
+ title:
+ 'Briefly describe the injury or event while you were under VA care that caused your disability.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'VA'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'VA'),
+ charcount: true,
+ }),
+ vaMistreatmentLocation: textUI({
+ title: 'Tell us where this happened.',
+ hideIf: (formData, index) =>
+ createCauseFollowUpConditional(formData, index, 'VA'),
+ required: (formData, index) =>
+ !createCauseFollowUpConditional(formData, index, 'VA'),
+ charcount: true,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ primaryDescription: {
+ type: 'string',
+ maxLength: 400,
+ },
+ causedByCondition: selectSchema(conditionOptions),
+ causedByConditionDescription: {
+ type: 'string',
+ maxLength: 400,
+ },
+ worsenedDescription: {
+ type: 'string',
+ maxLength: 50,
+ },
+ worsenedEffects: {
+ type: 'string',
+ maxLength: 350,
+ },
+ vaMistreatmentDescription: {
+ type: 'string',
+ maxLength: 350,
+ },
+ vaMistreatmentLocation: {
+ type: 'string',
+ maxLength: 25,
+ },
+ },
+ },
+};
+
+export default causeFollowUpPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/condition.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/condition.js
new file mode 100644
index 000000000000..c8c9623a1603
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/condition.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+ titleUI,
+ withAlertOrDescription,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import Autocomplete from '../../components/Autocomplete';
+import { conditionOptions } from '../../content/conditionOptions';
+import { conditionInstructions } from '../../content/newConditions';
+import { arrayBuilderOptions, createTitle } from './utils';
+
+const missingConditionMessage =
+ 'Enter a condition, diagnosis, or short description of your symptoms';
+
+const NULL_CONDITION_STRING = 'Unknown Condition';
+
+const regexNonWord = /[^\w]/g;
+const sippableId = str =>
+ (str || 'blank').replace(regexNonWord, '').toLowerCase();
+
+const validateLength = (err, fieldData) => {
+ if (fieldData.length > 255) {
+ err.addError('This needs to be less than 256 characters');
+ }
+};
+
+const validateNotMissing = (err, fieldData) => {
+ const isMissingCondition =
+ !fieldData?.trim() ||
+ fieldData.toLowerCase() === NULL_CONDITION_STRING.toLowerCase();
+
+ if (isMissingCondition) {
+ err.addError(missingConditionMessage);
+ }
+};
+
+const validateNotDuplicate = (err, fieldData, formData) => {
+ const currentList =
+ formData?.conditionByCondition?.map(condition =>
+ condition.condition?.toLowerCase(),
+ ) || [];
+ const itemLowerCased = fieldData?.toLowerCase() || '';
+ const itemSippableId = sippableId(fieldData || '');
+ const itemCount = currentList.filter(
+ item => item === itemLowerCased || sippableId(item) === itemSippableId,
+ );
+
+ if (itemCount.length > 1) {
+ err.addError('You’ve already added this condition to your claim');
+ }
+};
+
+export const validateCondition = (err, fieldData = '', formData = {}) => {
+ validateLength(err, fieldData);
+ validateNotMissing(err, fieldData);
+ validateNotDuplicate(err, fieldData, formData);
+};
+
+/** @returns {PageSchema} */
+const conditionPage = {
+ uiSchema: {
+ ...titleUI(
+ () =>
+ createTitle(
+ 'Tell us the new condition you want to claim',
+ `Edit condition`,
+ ),
+ withAlertOrDescription({
+ nounSingular: arrayBuilderOptions.nounSingular,
+ description: conditionInstructions,
+ hasMultipleItemPages: true,
+ }),
+ ),
+ condition: {
+ 'ui:title': 'Enter your condition',
+ 'ui:field': data => (
+
+ ),
+ 'ui:errorMessages': {
+ required: missingConditionMessage,
+ },
+ 'ui:validations': [validateCondition],
+ 'ui:options': {
+ useAllFormData: true,
+ },
+ },
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ condition: {
+ type: 'string',
+ },
+ },
+ required: ['condition'],
+ },
+};
+
+export default conditionPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/date.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/date.js
new file mode 100644
index 000000000000..5dfbca22c7c3
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/date.js
@@ -0,0 +1,33 @@
+import {
+ arrayBuilderItemSubsequentPageTitleUI,
+ textUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { createItemName } from './utils';
+
+/** @returns {PageSchema} */
+const datePage = {
+ uiSchema: {
+ ...arrayBuilderItemSubsequentPageTitleUI(
+ ({ formData }) => `Date of ${createItemName(formData)}`,
+ ),
+ date: textUI({
+ title:
+ 'What is the approximate date this condition began? If you’re having trouble remembering the exact date you can provide a year.',
+ hint: 'For example: January 2004 or 2004',
+ charcount: true,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ date: {
+ type: 'string',
+ maxLength: 25,
+ },
+ },
+ required: ['date'],
+ },
+};
+
+export default datePage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/index.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/index.js
new file mode 100644
index 000000000000..2e23a9f7c37d
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/index.js
@@ -0,0 +1,94 @@
+import { stringifyUrlParams } from '@department-of-veterans-affairs/platform-forms-system/helpers';
+import { arrayBuilderPages } from 'platform/forms-system/src/js/patterns/array-builder';
+import { getArrayIndexFromPathName } from 'platform/forms-system/src/js/patterns/array-builder/helpers';
+
+import causePage from './cause';
+import causeFollowUpPage from './causeFollowUp';
+import conditionPage from './condition';
+import datePage from './date';
+import introPage from './intro';
+import sideOfBodyPage from './sideOfBody';
+import summaryPage from './summary';
+import { arrayBuilderOptions, hasSideOfBody } from './utils';
+import { CONDITION_BY_CONDITION } from '../../constants';
+
+const conditionByConditionPages = arrayBuilderPages(
+ arrayBuilderOptions,
+ (pageBuilder, helpers) => ({
+ conditionByConditionIntro: pageBuilder.introPage({
+ title: 'New conditions intro',
+ path: `new-conditions-${CONDITION_BY_CONDITION}-intro`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: introPage.uiSchema,
+ schema: introPage.schema,
+ }),
+ conditionByConditionSummary: pageBuilder.summaryPage({
+ title: 'Review your new conditions',
+ path: `new-conditions-${CONDITION_BY_CONDITION}-summary`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: summaryPage.uiSchema,
+ schema: summaryPage.schema,
+ }),
+ conditionByConditionCondition: pageBuilder.itemPage({
+ title: 'Claim a new condition',
+ path: `new-conditions-${CONDITION_BY_CONDITION}/:index/condition`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: conditionPage.uiSchema,
+ schema: conditionPage.schema,
+ onNavForward: props => {
+ const { formData, pathname, urlParams, goPath } = props;
+ const index = getArrayIndexFromPathName(pathname);
+ const urlParamsString = stringifyUrlParams(urlParams) || '';
+
+ // TODO: This fixed bug where side of body was not being cleared when condition was edited which could result in 'Asthma, right'
+ // However, with this fix, when user doesn't change condition, side of body is cleared which could confuse users
+ formData.sideOfBody = undefined;
+
+ return hasSideOfBody(formData, index)
+ ? helpers.navForwardKeepUrlParams(props)
+ : goPath(
+ `new-conditions-${CONDITION_BY_CONDITION}/${index}/date${urlParamsString}`,
+ );
+ },
+ }),
+ conditionByConditionSideOfBody: pageBuilder.itemPage({
+ title: 'Side of body of new condition',
+ path: `new-conditions-${CONDITION_BY_CONDITION}/:index/side-of-body`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: sideOfBodyPage.uiSchema,
+ schema: sideOfBodyPage.schema,
+ }),
+ conditionByConditionDate: pageBuilder.itemPage({
+ title: 'Date of new condition',
+ path: `new-conditions-${CONDITION_BY_CONDITION}/:index/date`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: datePage.uiSchema,
+ schema: datePage.schema,
+ onNavBack: props => {
+ const { formData, pathname, urlParams, goPath } = props;
+ const index = getArrayIndexFromPathName(pathname);
+ const urlParamsString = stringifyUrlParams(urlParams) || '';
+
+ return hasSideOfBody(formData, index)
+ ? helpers.navBackKeepUrlParams(props)
+ : goPath(`new-conditions/${index}/condition${urlParamsString}`);
+ },
+ }),
+ conditionByConditionCause: pageBuilder.itemPage({
+ title: 'Cause of new condition',
+ path: `new-conditions-${CONDITION_BY_CONDITION}/:index/cause`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: causePage.uiSchema,
+ schema: causePage.schema,
+ }),
+ conditionByConditionCauseFollowUp: pageBuilder.itemPage({
+ title: 'Cause follow up for new condition',
+ path: `new-conditions-${CONDITION_BY_CONDITION}/:index/cause-follow-up`,
+ depends: formData => formData.demo === 'CONDITION_BY_CONDITION',
+ uiSchema: causeFollowUpPage.uiSchema,
+ schema: causeFollowUpPage.schema,
+ }),
+ }),
+);
+
+export default conditionByConditionPages;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/intro.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/intro.js
new file mode 100644
index 000000000000..035320fd81b0
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/intro.js
@@ -0,0 +1,17 @@
+import { titleUI } from 'platform/forms-system/src/js/web-component-patterns';
+
+/** @returns {PageSchema} */
+const introPage = {
+ uiSchema: {
+ ...titleUI(
+ 'New conditions',
+ 'In the next few screens, we’ll ask you about the new condition or conditions you’re filing for compensation.',
+ ),
+ },
+ schema: {
+ type: 'object',
+ properties: {},
+ },
+};
+
+export default introPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/sideOfBody.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/sideOfBody.js
new file mode 100644
index 000000000000..1bb251fde7fb
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/sideOfBody.js
@@ -0,0 +1,39 @@
+import {
+ radioSchema,
+ radioUI,
+ titleUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { createTitle } from './utils';
+
+const sideOfBodyOptions = {
+ RIGHT: 'Right',
+ LEFT: 'Left',
+ BILATERAL: 'Bilateral (both sides)',
+};
+
+/** @returns {PageSchema} */
+const sideOfBodyPage = {
+ uiSchema: {
+ ...titleUI(({ formData }) => {
+ const condition = formData.condition || 'condition';
+
+ return createTitle(
+ `Where is your ${condition}?`,
+ `Edit side of body for ${condition}`,
+ );
+ }),
+ sideOfBody: radioUI({
+ title: 'Side of body',
+ labels: sideOfBodyOptions,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ sideOfBody: radioSchema(Object.keys(sideOfBodyOptions)),
+ },
+ },
+};
+
+export default sideOfBodyPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/summary.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/summary.js
new file mode 100644
index 000000000000..ef8bf9a1b7ea
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/summary.js
@@ -0,0 +1,33 @@
+import {
+ arrayBuilderYesNoSchema,
+ arrayBuilderYesNoUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { arrayBuilderOptions } from './utils';
+
+/**
+ * This page is skipped on the first loop for required flow
+ * Cards are populated on this page above the uiSchema if items are present
+ *
+ * @returns {PageSchema}
+ */
+const summaryPage = {
+ uiSchema: {
+ 'view:hasConditions': arrayBuilderYesNoUI(
+ arrayBuilderOptions,
+ {},
+ {
+ hint: ' ', // Because there is maxItems: 100 if this empty string is not present the hint will count down from 100 which is a confusing user experience
+ },
+ ),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ 'view:hasConditions': arrayBuilderYesNoSchema,
+ },
+ required: ['view:hasConditions'],
+ },
+};
+
+export default summaryPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/utils.js b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/utils.js
new file mode 100644
index 000000000000..ed838dba8f4d
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionByConditionPages/utils.js
@@ -0,0 +1,79 @@
+import { getArrayUrlSearchParams } from 'platform/forms-system/src/js/patterns/array-builder/helpers';
+
+import { conditionObjects } from '../../content/conditionOptions';
+
+export const createTitle = (defaultTitle, editTitle) => {
+ const search = getArrayUrlSearchParams();
+ const isEdit = search.get('edit');
+
+ if (isEdit) {
+ return editTitle;
+ }
+ return defaultTitle;
+};
+
+export const hasSideOfBody = (formData, index) => {
+ const condition = formData?.conditionByCondition
+ ? formData.conditionByCondition[index]?.condition
+ : formData.condition;
+
+ const conditionObject = conditionObjects.find(
+ conditionObj => conditionObj.option === condition,
+ );
+
+ return conditionObject ? conditionObject.sideOfBody : false;
+};
+
+const createCauseDescriptions = item => {
+ return {
+ NEW: 'Caused by an injury or exposure during my service.',
+ SECONDARY: `Caused by ${item?.causedByCondition}.`,
+ WORSENED:
+ 'Existed before I served in the military, but got worse because of my military service.',
+ VA:
+ 'Caused by an injury or event that happened when I was receiving VA care.',
+ };
+};
+
+const causeFollowUpChecks = {
+ NEW: item => !item?.primaryDescription,
+ SECONDARY: item =>
+ !item?.causedByCondition || !item?.causedByConditionDescription,
+ WORSENED: item => !item?.worsenedDescription || !item?.worsenedEffects,
+ VA: item => !item?.vaMistreatmentDescription || !item?.vaMistreatmentLocation,
+};
+
+// Different than lodash _capitalize because does not make rest of string lowercase which would break acronyms
+const capitalizeFirstLetter = string => {
+ return string?.charAt(0).toUpperCase() + string?.slice(1);
+};
+
+export const createItemName = (item, capFirstLetter = false) => {
+ const condition = capFirstLetter
+ ? capitalizeFirstLetter(item?.condition)
+ : item?.condition || 'condition';
+
+ if (item?.sideOfBody) {
+ return `${condition}, ${item?.sideOfBody.toLowerCase()}`;
+ }
+
+ return condition;
+};
+
+/** @type {ArrayBuilderOptions} */
+export const arrayBuilderOptions = {
+ arrayPath: 'conditionByCondition',
+ nounSingular: 'condition',
+ nounPlural: 'conditions',
+ required: true,
+ isItemIncomplete: item =>
+ !item?.condition ||
+ !item?.date ||
+ !item?.cause ||
+ (causeFollowUpChecks[item.cause] && causeFollowUpChecks[item.cause](item)),
+ maxItems: 100,
+ text: {
+ getItemName: item => createItemName(item, true),
+ cardDescription: item => createCauseDescriptions(item)[(item?.cause)],
+ },
+};
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/condition.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/condition.js
new file mode 100644
index 000000000000..c2d030f067f3
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/condition.js
@@ -0,0 +1,105 @@
+import React from 'react';
+import {
+ titleUI,
+ withAlertOrDescription,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import Autocomplete from '../../components/Autocomplete';
+import { conditionOptions } from '../../content/conditionOptions';
+import { conditionInstructions } from '../../content/newConditions';
+import { arrayBuilderOptions, createTitle } from './utils';
+
+const missingConditionMessage =
+ 'Enter a condition, diagnosis, or short description of your symptoms';
+
+const NULL_CONDITION_STRING = 'Unknown Condition';
+
+const regexNonWord = /[^\w]/g;
+const sippableId = str =>
+ (str || 'blank').replace(regexNonWord, '').toLowerCase();
+
+const validateLength = (err, fieldData) => {
+ if (fieldData.length > 255) {
+ err.addError('This needs to be less than 256 characters');
+ }
+};
+
+const validateNotMissing = (err, fieldData) => {
+ const isMissingCondition =
+ !fieldData?.trim() ||
+ fieldData.toLowerCase() === NULL_CONDITION_STRING.toLowerCase();
+
+ if (isMissingCondition) {
+ err.addError(missingConditionMessage);
+ }
+};
+
+const validateNotDuplicate = (err, fieldData, formData) => {
+ const currentList =
+ formData?.conditionsFirst?.map(condition =>
+ condition.condition?.toLowerCase(),
+ ) || [];
+ const itemLowerCased = fieldData?.toLowerCase() || '';
+ const itemSippableId = sippableId(fieldData || '');
+ const itemCount = currentList.filter(
+ item => item === itemLowerCased || sippableId(item) === itemSippableId,
+ );
+
+ if (itemCount.length > 1) {
+ err.addError('You’ve already added this condition to your claim');
+ }
+};
+
+export const validateCondition = (err, fieldData = '', formData = {}) => {
+ validateLength(err, fieldData);
+ validateNotMissing(err, fieldData);
+ validateNotDuplicate(err, fieldData, formData);
+};
+
+/** @returns {PageSchema} */
+const conditionPage = {
+ uiSchema: {
+ ...titleUI(
+ () =>
+ createTitle(
+ 'Tell us the new condition you want to claim',
+ `Edit condition`,
+ ),
+ withAlertOrDescription({
+ nounSingular: arrayBuilderOptions.nounSingular,
+ description: conditionInstructions,
+ hasMultipleItemPages: true,
+ }),
+ ),
+ condition: {
+ 'ui:title': 'Enter your condition',
+ 'ui:field': data => (
+
+ ),
+ 'ui:errorMessages': {
+ required: missingConditionMessage,
+ },
+ 'ui:validations': [validateCondition],
+ 'ui:options': {
+ useAllFormData: true,
+ },
+ },
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ condition: {
+ type: 'string',
+ },
+ },
+ required: ['condition'],
+ },
+};
+
+export default conditionPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/date.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/date.js
new file mode 100644
index 000000000000..5dfbca22c7c3
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/date.js
@@ -0,0 +1,33 @@
+import {
+ arrayBuilderItemSubsequentPageTitleUI,
+ textUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { createItemName } from './utils';
+
+/** @returns {PageSchema} */
+const datePage = {
+ uiSchema: {
+ ...arrayBuilderItemSubsequentPageTitleUI(
+ ({ formData }) => `Date of ${createItemName(formData)}`,
+ ),
+ date: textUI({
+ title:
+ 'What is the approximate date this condition began? If you’re having trouble remembering the exact date you can provide a year.',
+ hint: 'For example: January 2004 or 2004',
+ charcount: true,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ date: {
+ type: 'string',
+ maxLength: 25,
+ },
+ },
+ required: ['date'],
+ },
+};
+
+export default datePage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/index.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/index.js
new file mode 100644
index 000000000000..636238c669ed
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/index.js
@@ -0,0 +1,80 @@
+import { stringifyUrlParams } from '@department-of-veterans-affairs/platform-forms-system/helpers';
+import { arrayBuilderPages } from 'platform/forms-system/src/js/patterns/array-builder';
+import { getArrayIndexFromPathName } from 'platform/forms-system/src/js/patterns/array-builder/helpers';
+
+import conditionPage from './condition';
+import datePage from './date';
+import introPage from './intro';
+import sideOfBodyPage from './sideOfBody';
+import summaryPage from './summary';
+import { arrayBuilderOptions, hasSideOfBody } from './utils';
+import { CONDITIONS_FIRST } from '../../constants';
+
+const conditionsFirstPages = arrayBuilderPages(
+ arrayBuilderOptions,
+ (pageBuilder, helpers) => ({
+ conditionsFirstIntro: pageBuilder.introPage({
+ title: 'New conditions intro',
+ path: `new-conditions-${CONDITIONS_FIRST}-intro`,
+ depends: formData => formData.demo === 'CONDITIONS_FIRST',
+ uiSchema: introPage.uiSchema,
+ schema: introPage.schema,
+ }),
+ conditionsFirstSummary: pageBuilder.summaryPage({
+ title: 'Review your new conditions',
+ path: `new-conditions-${CONDITIONS_FIRST}-summary`,
+ depends: formData => formData.demo === 'CONDITIONS_FIRST',
+ uiSchema: summaryPage.uiSchema,
+ schema: summaryPage.schema,
+ }),
+ conditionsFirstCondition: pageBuilder.itemPage({
+ title: 'Claim a new condition',
+ path: `new-conditions-${CONDITIONS_FIRST}/:index/condition`,
+ depends: formData => formData.demo === 'CONDITIONS_FIRST',
+ uiSchema: conditionPage.uiSchema,
+ schema: conditionPage.schema,
+ onNavForward: props => {
+ const { formData, pathname, urlParams, goPath } = props;
+ const index = getArrayIndexFromPathName(pathname);
+ const urlParamsString = stringifyUrlParams(urlParams) || '';
+
+ // TODO: This fixed bug where side of body was not being cleared when condition was edited which could result in 'Asthma, right'
+ // However, with this fix, when user doesn't change condition, side of body is cleared which could confuse users
+ formData.sideOfBody = undefined;
+
+ return hasSideOfBody(formData, index)
+ ? helpers.navForwardKeepUrlParams(props)
+ : goPath(
+ `new-conditions-${CONDITIONS_FIRST}/${index}/date${urlParamsString}`,
+ );
+ },
+ }),
+ conditionsFirstSideOfBody: pageBuilder.itemPage({
+ title: 'Side of body of new condition',
+ path: `new-conditions-${CONDITIONS_FIRST}/:index/side-of-body`,
+ depends: formData => formData.demo === 'CONDITIONS_FIRST',
+ uiSchema: sideOfBodyPage.uiSchema,
+ schema: sideOfBodyPage.schema,
+ }),
+ newConditionsJustConditionsDate: pageBuilder.itemPage({
+ title: 'Date of new condition',
+ path: `new-conditions-${CONDITIONS_FIRST}/:index/date`,
+ depends: formData => formData.demo === 'CONDITIONS_FIRST',
+ uiSchema: datePage.uiSchema,
+ schema: datePage.schema,
+ onNavBack: props => {
+ const { formData, pathname, urlParams, goPath } = props;
+ const index = getArrayIndexFromPathName(pathname);
+ const urlParamsString = stringifyUrlParams(urlParams) || '';
+
+ return hasSideOfBody(formData, index)
+ ? helpers.navBackKeepUrlParams(props)
+ : goPath(
+ `new-conditions-${CONDITIONS_FIRST}/${index}/condition${urlParamsString}`,
+ );
+ },
+ }),
+ }),
+);
+
+export default conditionsFirstPages;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/intro.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/intro.js
new file mode 100644
index 000000000000..035320fd81b0
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/intro.js
@@ -0,0 +1,17 @@
+import { titleUI } from 'platform/forms-system/src/js/web-component-patterns';
+
+/** @returns {PageSchema} */
+const introPage = {
+ uiSchema: {
+ ...titleUI(
+ 'New conditions',
+ 'In the next few screens, we’ll ask you about the new condition or conditions you’re filing for compensation.',
+ ),
+ },
+ schema: {
+ type: 'object',
+ properties: {},
+ },
+};
+
+export default introPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/sideOfBody.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/sideOfBody.js
new file mode 100644
index 000000000000..1bb251fde7fb
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/sideOfBody.js
@@ -0,0 +1,39 @@
+import {
+ radioSchema,
+ radioUI,
+ titleUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { createTitle } from './utils';
+
+const sideOfBodyOptions = {
+ RIGHT: 'Right',
+ LEFT: 'Left',
+ BILATERAL: 'Bilateral (both sides)',
+};
+
+/** @returns {PageSchema} */
+const sideOfBodyPage = {
+ uiSchema: {
+ ...titleUI(({ formData }) => {
+ const condition = formData.condition || 'condition';
+
+ return createTitle(
+ `Where is your ${condition}?`,
+ `Edit side of body for ${condition}`,
+ );
+ }),
+ sideOfBody: radioUI({
+ title: 'Side of body',
+ labels: sideOfBodyOptions,
+ }),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ sideOfBody: radioSchema(Object.keys(sideOfBodyOptions)),
+ },
+ },
+};
+
+export default sideOfBodyPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/summary.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/summary.js
new file mode 100644
index 000000000000..ef8bf9a1b7ea
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/summary.js
@@ -0,0 +1,33 @@
+import {
+ arrayBuilderYesNoSchema,
+ arrayBuilderYesNoUI,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+import { arrayBuilderOptions } from './utils';
+
+/**
+ * This page is skipped on the first loop for required flow
+ * Cards are populated on this page above the uiSchema if items are present
+ *
+ * @returns {PageSchema}
+ */
+const summaryPage = {
+ uiSchema: {
+ 'view:hasConditions': arrayBuilderYesNoUI(
+ arrayBuilderOptions,
+ {},
+ {
+ hint: ' ', // Because there is maxItems: 100 if this empty string is not present the hint will count down from 100 which is a confusing user experience
+ },
+ ),
+ },
+ schema: {
+ type: 'object',
+ properties: {
+ 'view:hasConditions': arrayBuilderYesNoSchema,
+ },
+ required: ['view:hasConditions'],
+ },
+};
+
+export default summaryPage;
diff --git a/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/utils.js b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/utils.js
new file mode 100644
index 000000000000..2edfa89e3872
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/pages/conditionsFirstPages/utils.js
@@ -0,0 +1,56 @@
+import { getArrayUrlSearchParams } from 'platform/forms-system/src/js/patterns/array-builder/helpers';
+
+import { conditionObjects } from '../../content/conditionOptions';
+
+export const createTitle = (defaultTitle, editTitle) => {
+ const search = getArrayUrlSearchParams();
+ const isEdit = search.get('edit');
+
+ if (isEdit) {
+ return editTitle;
+ }
+ return defaultTitle;
+};
+
+export const hasSideOfBody = (formData, index) => {
+ const condition = formData?.conditionsFirst
+ ? formData.conditionsFirst[index]?.condition
+ : formData.condition;
+
+ const conditionObject = conditionObjects.find(
+ conditionObj => conditionObj.option === condition,
+ );
+
+ return conditionObject ? conditionObject.sideOfBody : false;
+};
+
+// Different than lodash _capitalize because does not make rest of string lowercase which would break acronyms
+const capitalizeFirstLetter = string => {
+ return string?.charAt(0).toUpperCase() + string?.slice(1);
+};
+
+export const createItemName = (item, capFirstLetter = false) => {
+ const condition = capFirstLetter
+ ? capitalizeFirstLetter(item?.condition)
+ : item?.condition || 'condition';
+
+ if (item?.sideOfBody) {
+ return `${condition}, ${item?.sideOfBody.toLowerCase()}`;
+ }
+
+ return condition;
+};
+
+/** @type {ArrayBuilderOptions} */
+export const arrayBuilderOptions = {
+ arrayPath: 'conditionsFirst',
+ nounSingular: 'condition',
+ nounPlural: 'conditions',
+ required: true,
+ isItemIncomplete: item => !item?.condition || !item?.date,
+ maxItems: 100,
+ text: {
+ getItemName: item => createItemName(item, true),
+ cardDescription: item => `Date began: ${item?.date}`,
+ },
+};
diff --git a/src/applications/user-testing/new-conditions/reducers/index.js b/src/applications/user-testing/new-conditions/reducers/index.js
new file mode 100644
index 000000000000..fa616ca0da4b
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/reducers/index.js
@@ -0,0 +1,6 @@
+import { createSaveInProgressFormReducer } from 'platform/forms/save-in-progress/reducers';
+import formConfig from '../config/form';
+
+export default {
+ form: createSaveInProgressFormReducer(formConfig),
+};
diff --git a/src/applications/user-testing/new-conditions/routes.jsx b/src/applications/user-testing/new-conditions/routes.jsx
new file mode 100644
index 000000000000..8b56e82cbf9a
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/routes.jsx
@@ -0,0 +1,12 @@
+import { createRoutesWithSaveInProgress } from 'platform/forms/save-in-progress/helpers';
+import formConfig from './config/form';
+import App from './containers/App';
+
+const route = {
+ path: '/',
+ component: App,
+ indexRoute: { onEnter: (nextState, replace) => replace('/introduction') },
+ childRoutes: createRoutesWithSaveInProgress(formConfig),
+};
+
+export default route;
diff --git a/src/applications/user-testing/new-conditions/sass/new-conditions.scss b/src/applications/user-testing/new-conditions/sass/new-conditions.scss
new file mode 100644
index 000000000000..1d4590179b05
--- /dev/null
+++ b/src/applications/user-testing/new-conditions/sass/new-conditions.scss
@@ -0,0 +1,52 @@
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-form-process";
+@import "../../../../platform/forms/sass/m-schemaform";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-modal";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-omb-info";
+@import "../../../../platform/forms/sass/m-form-confirmation";
+
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/functions";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-process-list";
+@import "~@department-of-veterans-affairs/css-library/dist/stylesheets/modules/m-form-process";
+@import "../../../../platform/forms/sass/m-schemaform";
+@import "../../../../platform/forms/sass/m-form-confirmation";
+
+/* addDisabilities autocomplete styles */
+.cc-autocomplete {
+ position: relative;
+
+ &__list {
+ position: absolute;
+ width: 100%;
+ max-width: 30rem;
+ background-color: var(--vads-color-white);
+ padding: 0;
+ margin: 0;
+ overflow-y: auto;
+ z-index: 100;
+ max-height: 20rem;
+ border: 1px solid var(--vads-color-black);
+ }
+
+ &__option {
+ display: block;
+ padding: units(1);
+ margin: 0;
+ cursor: pointer;
+
+ &--active {
+ background-color: var(--vads-color-primary);
+ border-color: var(--vads-color-primary);
+ color: var(--vads-color-white);
+ }
+
+ &:first-child {
+ border-bottom: 1px solid var(--vads-color-gray-warm-light);
+ }
+ }
+
+ // Adjusts spacing on label inside web component text input.
+ va-text-input::part(label) {
+ margin-top: 0;
+ }
+}
diff --git a/src/platform/forms/constants.js b/src/platform/forms/constants.js
index 797e104f6513..1c0daaae1ccf 100644
--- a/src/platform/forms/constants.js
+++ b/src/platform/forms/constants.js
@@ -155,6 +155,7 @@ export const getAllFormLinks = getAppUrlImpl => {
[VA_FORM_IDS.FORM_WELCOME_VA_SETUP_REVIEW_INFORMATION]: `${tryGetAppUrl(
'welcome-va-setup-review-information',
)}/`,
+ [VA_FORM_IDS.FORM_21_526EZ]: `${tryGetAppUrl('21-526EZ')}/`,
};
};
@@ -465,6 +466,13 @@ export const MY_VA_SIP_FORMS = [
description: 'welcome va setup review information form',
trackingPrefix: 'welcome-va-setup-review-information-',
},
+ {
+ id: VA_FORM_IDS.FORM_21_526EZ,
+ benefit: 'disability compensation',
+ title: 'File for disability compensation',
+ description: 'disability compensation',
+ trackingPrefix: 'new-conditions',
+ },
];
export const FORM_BENEFITS = MY_VA_SIP_FORMS.reduce((acc, form) => {