From 43cd8c5f8971f489adbad2676b34ddaf2dfe2449 Mon Sep 17 00:00:00 2001
From: Jan Timpe <jtimpe@goraft.tech>
Date: Mon, 20 May 2024 09:20:07 -0400
Subject: [PATCH 1/5] add radio button for jurisdiction type

---
 .../src/components/ComboBox/ComboBox.jsx      |  4 ++
 tdrs-frontend/src/components/Home/Home.jsx    | 56 ++++++++++++++++++-
 .../components/STTComboBox/STTComboBox.jsx    | 23 +++++---
 tdrs-frontend/src/utils/stringUtils.js        |  6 ++
 tdrs-frontend/src/utils/stringUtils.test.js   | 14 +++++
 5 files changed, 94 insertions(+), 9 deletions(-)
 create mode 100644 tdrs-frontend/src/utils/stringUtils.js
 create mode 100644 tdrs-frontend/src/utils/stringUtils.test.js

diff --git a/tdrs-frontend/src/components/ComboBox/ComboBox.jsx b/tdrs-frontend/src/components/ComboBox/ComboBox.jsx
index 661e2f1dc..a9240d25f 100644
--- a/tdrs-frontend/src/components/ComboBox/ComboBox.jsx
+++ b/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,6 +96,7 @@ ComboBox.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string,
   label: PropTypes.string.isRequired,
+  autoComplete: PropTypes.bool,
 }
 
 ComboBox.defaultProps = {
@@ -101,6 +104,7 @@ ComboBox.defaultProps = {
   error: '',
   placeholder: '',
   handleBlur: null,
+  autoComplete: true,
 }
 
 export default ComboBox
diff --git a/tdrs-frontend/src/components/Home/Home.jsx b/tdrs-frontend/src/components/Home/Home.jsx
index 8d6b57e36..294786739 100644
--- a/tdrs-frontend/src/components/Home/Home.jsx
+++ b/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
@@ -171,7 +177,52 @@ function Home() {
             handleChange={handleChange}
             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 +233,7 @@ function Home() {
                 error={Boolean(errors.stt)}
                 selectedStt={profileInfo?.stt}
                 handleBlur={handleBlur}
+                sttType={jurisdictionType}
               />
             </div>
           )}
diff --git a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
index 21da77488..6c7b39314 100644
--- a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
+++ b/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,30 @@ function STTComboBox({ selectStt, selectedStt, handleBlur, error }) {
     <>
       <ComboBox
         name="stt"
-        label="Associated State, Tribe, or Territory*"
+        label={
+          sttType
+            ? toTitleCase(sttType)
+            : 'Associated State, Tribe, or Territory*'
+        }
         error={error ? 'A 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."
diff --git a/tdrs-frontend/src/utils/stringUtils.js b/tdrs-frontend/src/utils/stringUtils.js
new file mode 100644
index 000000000..e7c2947ce
--- /dev/null
+++ b/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()
+  )
diff --git a/tdrs-frontend/src/utils/stringUtils.test.js b/tdrs-frontend/src/utils/stringUtils.test.js
new file mode 100644
index 000000000..307167ce8
--- /dev/null
+++ b/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)
+  })
+})

From 117c60fd2ff8c898e9ef25258584c493e99dae21 Mon Sep 17 00:00:00 2001
From: Jan Timpe <jtimpe@goraft.tech>
Date: Mon, 20 May 2024 09:49:41 -0400
Subject: [PATCH 2/5] add tests

---
 .../src/components/Home/Home.test.jsx         | 104 +++++++++++++++++-
 .../components/STTComboBox/STTComboBox.jsx    |   2 +-
 2 files changed, 103 insertions(+), 3 deletions(-)

diff --git a/tdrs-frontend/src/components/Home/Home.test.jsx b/tdrs-frontend/src/components/Home/Home.test.jsx
index 0d85cd65a..353430317 100644
--- a/tdrs-frontend/src/components/Home/Home.test.jsx
+++ b/tdrs-frontend/src/components/Home/Home.test.jsx
@@ -256,6 +256,55 @@ describe('Pre-approval Home page', () => {
             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 options = wrapper.find('option')
+
+    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',
+          },
         ],
       },
     })
@@ -265,9 +314,60 @@ describe('Pre-approval Home page', () => {
       </Provider>
     )
 
+    const radio = wrapper.find('#tribe')
+    radio.simulate('change', {
+      target: { name: 'jurisdictionType', value: 'tribe' },
+    })
+
     const options = wrapper.find('option')
+    expect(options.length).toEqual(2)
+  })
 
-    expect(options.length).toEqual(4)
+  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', () => {
@@ -575,7 +675,7 @@ describe('Pre-approval Home page', () => {
       </Provider>
     )
 
-    const select = getByLabelText('Associated State, Tribe, or Territory*', {
+    const select = getByLabelText('State*', {
       selector: 'input',
     })
 
diff --git a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
index 6c7b39314..6b753cafc 100644
--- a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
+++ b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
@@ -48,7 +48,7 @@ function STTComboBox({ selectStt, selectedStt, handleBlur, error, sttType }) {
         name="stt"
         label={
           sttType
-            ? toTitleCase(sttType)
+            ? `${toTitleCase(sttType)}*`
             : 'Associated State, Tribe, or Territory*'
         }
         error={error ? 'A state, tribe, or territory is required' : undefined}

From c1e2b7080be7bba8e910e310bff5aceeb6d230ce Mon Sep 17 00:00:00 2001
From: Jan Timpe <jtimpe@goraft.tech>
Date: Wed, 12 Jun 2024 10:11:06 -0400
Subject: [PATCH 3/5] update error string

---
 tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
index 6b753cafc..22b8b3a80 100644
--- a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
+++ b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
@@ -51,7 +51,7 @@ function STTComboBox({ selectStt, selectedStt, handleBlur, error, sttType }) {
             ? `${toTitleCase(sttType)}*`
             : 'Associated State, Tribe, or Territory*'
         }
-        error={error ? 'A state, tribe, or territory is required' : undefined}
+        error={error ? `A ${sttType} is required` : undefined}
         handleSelect={selectStt}
         selected={selectedStt}
         handleBlur={handleBlur}

From eb752bd50ebefb0cc6919e39036fc0f45289088a Mon Sep 17 00:00:00 2001
From: Jan Timpe <jtimpe@goraft.tech>
Date: Wed, 12 Jun 2024 10:28:20 -0400
Subject: [PATCH 4/5] fix tests

---
 tdrs-frontend/src/components/Home/Home.test.jsx          | 8 ++------
 tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx | 6 +++++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/tdrs-frontend/src/components/Home/Home.test.jsx b/tdrs-frontend/src/components/Home/Home.test.jsx
index 353430317..a58904d50 100644
--- a/tdrs-frontend/src/components/Home/Home.test.jsx
+++ b/tdrs-frontend/src/components/Home/Home.test.jsx
@@ -430,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', () => {
@@ -479,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', () => {
diff --git a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
index 22b8b3a80..d2ed13b80 100644
--- a/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
+++ b/tdrs-frontend/src/components/STTComboBox/STTComboBox.jsx
@@ -51,7 +51,11 @@ function STTComboBox({ selectStt, selectedStt, handleBlur, error, sttType }) {
             ? `${toTitleCase(sttType)}*`
             : 'Associated State, Tribe, or Territory*'
         }
-        error={error ? `A ${sttType} is required` : undefined}
+        error={
+          error
+            ? `A ${sttType || 'state, tribe, or territory'} is required`
+            : undefined
+        }
         handleSelect={selectStt}
         selected={selectedStt}
         handleBlur={handleBlur}

From 14ca954cbd24a77da30036f47d9384d5f6884be6 Mon Sep 17 00:00:00 2001
From: Jan Timpe <jtimpe@goraft.tech>
Date: Wed, 26 Jun 2024 13:56:17 -0400
Subject: [PATCH 5/5] don't show jurisdiction type for acf users

---
 tdrs-frontend/src/components/Home/Home.jsx | 94 +++++++++++-----------
 1 file changed, 49 insertions(+), 45 deletions(-)

diff --git a/tdrs-frontend/src/components/Home/Home.jsx b/tdrs-frontend/src/components/Home/Home.jsx
index 294786739..47a10f4af 100644
--- a/tdrs-frontend/src/components/Home/Home.jsx
+++ b/tdrs-frontend/src/components/Home/Home.jsx
@@ -177,51 +177,55 @@ function Home() {
             handleChange={handleChange}
             handleBlur={handleBlur}
           />
-          <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>
+          {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 ${