{institution.name}
- - -{institution.phone}
- -
- {institution.physicalStreet}
-
- {institution.physicalCity}, {` `}
- {institution.physicalState} {` `}
- {institution.physicalZip}
-
- {institution.physicalCountry}
-
- - Print and fill out form Request for Reimbursement of Licensing or - Certification Test Fees - -
- - Link to VA Form 22-0803 - -
diff --git a/src/applications/gi/components/LicenseCertificationSearchForm.jsx b/src/applications/gi/components/LicenseCertificationSearchForm.jsx
index 32b9b465968e..46c5a16318d0 100644
--- a/src/applications/gi/components/LicenseCertificationSearchForm.jsx
+++ b/src/applications/gi/components/LicenseCertificationSearchForm.jsx
@@ -2,13 +2,17 @@ import React, { useEffect, useState } from 'react';
import ADDRESS_DATA from 'platform/forms/address/data';
import PropTypes from 'prop-types';
import Dropdown from './Dropdown';
-import { updateLcFilterDropdowns } from '../utils/helpers';
+import { handleUpdateLcFilterDropdowns } from '../utils/helpers';
import LcKeywordSearch from './LcKeywordSearch';
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
+const mappedStates = Object.entries(ADDRESS_DATA.states).map(state => {
+ return { optionValue: state[0], optionLabel: state[1] };
+});
+
export const dropdownSchema = [
{
label: 'category',
@@ -29,29 +33,40 @@ export const dropdownSchema = [
},
{
label: 'state',
- options: [
- { optionValue: 'all', optionLabel: 'All' },
- ...Object.entries(ADDRESS_DATA.states).map(state => {
- return { optionValue: state[0], optionLabel: state[1] };
- }),
- ],
+ options: [{ optionValue: 'all', optionLabel: 'All' }, ...mappedStates],
alt: 'state',
current: { optionValue: 'all', optionLabel: 'All' },
},
];
-const filterSuggestions = (suggestions, value) => {
- // add filter options as arg
+const filterSuggestions = (suggestions, value, filters) => {
+ const { type } = filters; // destructure state once it's added to the response
+
if (!value) {
return [];
}
return suggestions.filter(suggestion => {
- // TODO add logic to account for filterOptions
+ if (type !== suggestion.type && type !== 'all') return false;
+ // TODO add logic to account for state
+
return suggestion.name.toLowerCase().includes(value.toLowerCase());
});
};
+const resetStateDropdown = dropdowns => {
+ return dropdowns.map(dropdown => {
+ return dropdown.label === 'state'
+ ? {
+ ...dropdown,
+ current: dropdown.options.find(
+ option => option.optionValue === 'all',
+ ),
+ }
+ : dropdown;
+ });
+};
+
export default function LicenseCertificationSearchForm({
suggestions,
handleSearch,
@@ -59,22 +74,25 @@ export default function LicenseCertificationSearchForm({
const [dropdowns, setDropdowns] = useState(dropdownSchema);
const [name, setName] = useState('');
const [filteredSuggestions, setFilteredSuggestions] = useState(suggestions);
+ const [showStateAlert, setShowStateAlert] = useState(false);
useEffect(
() => {
- const newSuggestions = filterSuggestions(suggestions, name);
+ const newSuggestions = filterSuggestions(suggestions, name, {
+ type: dropdowns[0].current.optionValue,
+ });
if (name.trim() !== '') {
newSuggestions.unshift({
name,
- link: 'lce/', // verify link
- type: 'all', // verify type
+ link: 'lce/',
+ type: 'all',
});
}
setFilteredSuggestions(newSuggestions);
},
- [name],
+ [name, suggestions, dropdowns],
);
const handleReset = () => {
@@ -83,12 +101,53 @@ export default function LicenseCertificationSearchForm({
};
const handleChange = e => {
- const newDropdowns = updateLcFilterDropdowns(dropdowns, e.target);
- setDropdowns(newDropdowns);
+ const newDropdowns = handleUpdateLcFilterDropdowns(dropdowns, e.target);
+
+ if (newDropdowns[0].current.optionValue === 'certification') {
+ setDropdowns(resetStateDropdown);
+ }
+
+ setDropdowns(current => {
+ // update url params
+ return handleUpdateLcFilterDropdowns(current, e.target);
+ });
};
const onUpdateAutocompleteSearchTerm = value => {
- setName(value);
+ setName(value); // update url params
+ };
+
+ const onSelection = selection => {
+ const { type, state } = selection; // TODO ensure state is added to response object coming from BE
+
+ const updateDropdowns = dropdowns.map(dropdown => {
+ if (dropdown.label === 'state') {
+ return {
+ ...dropdown,
+ current: dropdown.options.find(option => {
+ return option.optionValue === state;
+ }),
+ };
+ }
+
+ return {
+ ...dropdown,
+ current: dropdown.options.find(option => {
+ return option.optionValue === type;
+ }),
+ };
+ });
+
+ if (type === 'license' && dropdowns[1].current.optionValue !== state) {
+ setShowStateAlert(true);
+ }
+
+ setDropdowns(updateDropdowns);
+ };
+
+ const handleClearInput = () => {
+ onUpdateAutocompleteSearchTerm('');
+ setShowStateAlert(false);
};
return (
@@ -105,28 +164,50 @@ export default function LicenseCertificationSearchForm({
selectClassName="lc-dropdown-filter"
required={dropdowns[0].label === 'category'}
/>
+
+