2133 tribe discoverability

tdrs-frontend/src/components/ComboBox/ComboBox.jsx

@@ -27,6 +27,7 @@ const ComboBox = ({
   name,
   placeholder,
   label,
+  autoComplete,
 }) => {
   useEffect(() => {
     // The combo box was not rendering as a combo box without this line
@@ -64,6 +65,7 @@ const ComboBox = ({
       <div className="usa-combo-box" data-placeholder={placeholder}>
         {/* eslint-disable-next-line jsx-a11y/no-onchange */}
         <select
+          autoComplete={autoComplete ? 'on' : 'off'}
           className="usa-select"
           data-testid={`${name}-combobox`}
           aria-describedby={`${name}-error-alert`}
@@ -94,13 +96,15 @@ ComboBox.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   label: PropTypes.string.isRequired,
+  autoComplete: PropTypes.bool,
 }
 
 ComboBox.defaultProps = {
   selected: '',
   error: '',
   placeholder: '',
   handleBlur: null,
+  autoComplete: true,
 }
 
 export default ComboBox

tdrs-frontend/src/components/Home/Home.jsx

@@ -38,6 +38,7 @@ function Home() {
   const userAccessInReview = useSelector(accountIsInReview)
   const userAccessRequestApproved = useSelector(accountStatusIsApproved)
 
+  const [jurisdictionType, setJurisdictionTypeInputValue] = useState('state')
   const shouldShowSttComboBox = !user?.email?.includes('@acf.hhs.gov')
 
   const validation = (fieldName, fieldValue) => {
@@ -57,6 +58,11 @@ function Home() {
     return null
   }
 
+  const setJurisdictionType = (val) => {
+    setStt('')
+    setJurisdictionTypeInputValue(val)
+  }
+
   const setStt = (sttName) => {
     setProfileInfo((currentState) => ({
       ...currentState,
@@ -136,7 +142,7 @@ function Home() {
     )
   } else if (!userAccessRequestApproved) {
     return (
-      <div className="margin-top-5">
+      <div className="margin-top-5 margin-bottom-5">
         <p className="margin-top-1 margin-bottom-4">
           Please enter your information to request access from an OFA
           administrator
@@ -172,6 +178,55 @@ function Home() {
             handleBlur={handleBlur}
           />
           {shouldShowSttComboBox && (
+            <div className="usa-form-group">
+              <fieldset className="usa-fieldset">
+                <legend className="usa-label text-bold">
+                  Jurisdiction Type
+                </legend>
+                <div className="usa-radio">
+                  <input
+                    className="usa-radio__input"
+                    id="state"
+                    type="radio"
+                    name="jurisdictionType"
+                    value="state"
+                    defaultChecked
+                    onChange={() => setJurisdictionType('state')}
+                  />
+                  <label className="usa-radio__label" htmlFor="state">
+                    State
+                  </label>
+                </div>
+                <div className="usa-radio">
+                  <input
+                    className="usa-radio__input"
+                    id="tribe"
+                    type="radio"
+                    name="jurisdictionType"
+                    value="tribe"
+                    onChange={() => setJurisdictionType('tribe')}
+                  />
+                  <label className="usa-radio__label" htmlFor="tribe">
+                    Tribe
+                  </label>
+                </div>
+                <div className="usa-radio">
+                  <input
+                    className="usa-radio__input"
+                    id="territory"
+                    type="radio"
+                    name="jurisdictionType"
+                    value="territory"
+                    onChange={() => setJurisdictionType('territory')}
+                  />
+                  <label className="usa-radio__label" htmlFor="territory">
+                    Territory
+                  </label>
+                </div>
+              </fieldset>
+            </div>
+          )}
+          {jurisdictionType && shouldShowSttComboBox && (
             <div
               className={`usa-form-group ${
                 errors.stt ? 'usa-form-group--error' : ''
@@ -182,6 +237,7 @@ function Home() {
                 error={Boolean(errors.stt)}
                 selectedStt={profileInfo?.stt}
                 handleBlur={handleBlur}
+                sttType={jurisdictionType}
               />
             </div>
           )}

tdrs-frontend/src/components/Home/Home.test.jsx

@@ -256,6 +256,12 @@ describe('Pre-approval Home page', () => {
             code: 'AK',
             name: 'Aleutian/Pribilof Islands Association, Inc.',
           },
+          {
+            id: 1111,
+            type: 'territory',
+            code: 'G',
+            name: 'Guam',
+          },
         ],
       },
     })
@@ -267,7 +273,101 @@ describe('Pre-approval Home page', () => {
 
     const options = wrapper.find('option')
 
-    expect(options.length).toEqual(4)
+    expect(options.length).toEqual(3)
+  })
+
+  it('should mount a list of tribe options based on stts from the store', () => {
+    const store = mockStore({
+      ...initialState,
+      stts: {
+        sttList: [
+          {
+            id: 1,
+            type: 'state',
+            code: 'AL',
+            name: 'Alabama',
+          },
+          {
+            id: 2,
+            type: 'state',
+            code: 'AK',
+            name: 'Alaska',
+          },
+          {
+            id: 140,
+            type: 'tribe',
+            code: 'AK',
+            name: 'Aleutian/Pribilof Islands Association, Inc.',
+          },
+          {
+            id: 1111,
+            type: 'territory',
+            code: 'G',
+            name: 'Guam',
+          },
+        ],
+      },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    )
+
+    const radio = wrapper.find('#tribe')
+    radio.simulate('change', {
+      target: { name: 'jurisdictionType', value: 'tribe' },
+    })
+
+    const options = wrapper.find('option')
+    expect(options.length).toEqual(2)
+  })
+
+  it('should mount a list of territory options based on stts from the store', () => {
+    const store = mockStore({
+      ...initialState,
+      stts: {
+        sttList: [
+          {
+            id: 1,
+            type: 'state',
+            code: 'AL',
+            name: 'Alabama',
+          },
+          {
+            id: 2,
+            type: 'state',
+            code: 'AK',
+            name: 'Alaska',
+          },
+          {
+            id: 140,
+            type: 'tribe',
+            code: 'AK',
+            name: 'Aleutian/Pribilof Islands Association, Inc.',
+          },
+          {
+            id: 1111,
+            type: 'territory',
+            code: 'G',
+            name: 'Guam',
+          },
+        ],
+      },
+    })
+    const wrapper = mount(
+      <Provider store={store}>
+        <Home />
+      </Provider>
+    )
+
+    const radio = wrapper.find('#territory')
+    radio.simulate('change', {
+      target: { name: 'jurisdictionType', value: 'territory' },
+    })
+
+    const options = wrapper.find('option')
+    expect(options.length).toEqual(2)
   })
 
   it('should not show the stt combno box for non-STT users', () => {
@@ -330,9 +430,7 @@ describe('Pre-approval Home page', () => {
 
     expect(getByText('First Name is required')).toBeInTheDocument()
     expect(getByText('Last Name is required')).toBeInTheDocument()
-    expect(
-      getByText('A state, tribe, or territory is required')
-    ).toBeInTheDocument()
+    expect(getByText('A state is required')).toBeInTheDocument()
   })
 
   it('should not require an stt for ofa users', () => {
@@ -379,9 +477,7 @@ describe('Pre-approval Home page', () => {
 
     expect(getByText('First Name is required')).toBeInTheDocument()
     expect(getByText('Last Name is required')).toBeInTheDocument()
-    expect(
-      queryByText('A state, tribe, or territory is required')
-    ).not.toBeInTheDocument()
+    expect(queryByText('A state is required')).not.toBeInTheDocument()
   })
 
   it('should remove error message when you add a character and blur out of input', () => {
@@ -575,7 +671,7 @@ describe('Pre-approval Home page', () => {
       </Provider>
     )
 
-    const select = getByLabelText('Associated State, Tribe, or Territory*', {
+    const select = getByLabelText('State*', {
       selector: 'input',
     })
 

tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import { fetchSttList } from '../../actions/sttList'
 import ComboBox from '../ComboBox'
 import Modal from '../Modal'
+import { toTitleCase } from '../../utils/stringUtils'
 
 /**
  * @param {function} selectStt - Function to reference and change the
@@ -14,7 +15,7 @@ import Modal from '../Modal'
  * @param {function} error - Reference to stt errors object.
  */
 
-function STTComboBox({ selectStt, selectedStt, handleBlur, error }) {
+function STTComboBox({ selectStt, selectedStt, handleBlur, error, sttType }) {
   const sttListRequest = useSelector((state) => state?.stts)
   const dispatch = useDispatch()
   const [numTries, setNumTries] = useState(0)
@@ -45,22 +46,34 @@ function STTComboBox({ selectStt, selectedStt, handleBlur, error }) {
     <>
       <ComboBox
         name="stt"
-        label="Associated State, Tribe, or Territory*"
-        error={error ? 'A state, tribe, or territory is required' : undefined}
+        label={
+          sttType
+            ? `${toTitleCase(sttType)}*`
+            : 'Associated State, Tribe, or Territory*'
+        }
+        error={
+          error
+            ? `A ${sttType || 'state, tribe, or territory'} is required`
+            : undefined
+        }
         handleSelect={selectStt}
         selected={selectedStt}
         handleBlur={handleBlur}
         placeholder="- Select or Search -"
         aria-required="true"
+        autoComplete={false}
       >
         <option value="" disabled hidden>
           - Select or Search -
         </option>
-        {sttListRequest.sttList.map((stt) => (
-          <option className="sttOption" key={stt.id} value={stt.name}>
-            {stt.name}
-          </option>
-        ))}
+        {sttListRequest.sttList.map(
+          (stt) =>
+            (sttType == null || stt.type === sttType) && (
+              <option className="sttOption" key={stt.id} value={stt.name}>
+                {stt.name}
+              </option>
+            )
+        )}
       </ComboBox>
       <Modal
         title="TDP systems are currently experiencing technical difficulties."

tdrs-frontend/src/utils/stringUtils.js

@@ -0,0 +1,6 @@
+export const toTitleCase = (str) =>
+  str &&
+  str.replace(
+    /\w\S*/g,
+    (txt) => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()
+  )

tdrs-frontend/src/utils/stringUtils.test.js

@@ -0,0 +1,14 @@
+import { toTitleCase } from './stringUtils'
+
+describe('toTitleCase', () => {
+  it.each([
+    ['test me', 'Test Me'],
+    ['tribe', 'Tribe'],
+    [' i like peanuts ', ' I Like Peanuts '],
+    ['jeffrey wuz 123here', 'Jeffrey Wuz 123here'],
+    ['', ''],
+    [null, null],
+  ])('Capitalizes first char of each word', (original, expected) => {
+    expect(toTitleCase(original)).toEqual(expected)
+  })
+})