diff --git a/app/javascript/packages/address-search/README.md b/app/javascript/packages/address-search/README.md index 5ee0d4c89a1..ec196524b62 100644 --- a/app/javascript/packages/address-search/README.md +++ b/app/javascript/packages/address-search/README.md @@ -21,7 +21,7 @@ Requires @18f/identity-i18n. To use this component, provide callbacks to it for desired behaviors. ```typescript jsx -import AddressSearch from '@18f/identity-address-search'; +import FullAddressSearch from '@18f/identity-address-search'; // Render UI component @@ -40,6 +40,29 @@ return( ); ``` +By adding the usesErrorComponent prop to the FullAddressSearch component you can opt in to showing a specialized error message for skipping location selection when a locations endpoint error happens instead of the alert. + +```typescript jsx +import FullAddressSearch from '@18f/identity-address-search'; + +// Render UI component + +return( + <> + + +); +``` + ## License This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). diff --git a/app/javascript/packages/address-search/components/full-address-search-input.tsx b/app/javascript/packages/address-search/components/full-address-search-input.tsx index 31610e5493d..e564ac89c2f 100644 --- a/app/javascript/packages/address-search/components/full-address-search-input.tsx +++ b/app/javascript/packages/address-search/components/full-address-search-input.tsx @@ -17,6 +17,7 @@ export default function FullAddressSearchInput({ registerField = () => undefined, usStatesTerritories, uspsApiError, + usesErrorComponent, }: FullAddressSearchInputProps) { const { t } = useI18n(); const spinnerButtonRef = useRef(null); @@ -175,12 +176,12 @@ export default function FullAddressSearchInput({ isBig ref={spinnerButtonRef} type="submit" - onClick={uspsApiError ? handleContinue : handleSearch} + onClick={usesErrorComponent && uspsApiError ? handleContinue : handleSearch} spinOnClick={false} actionMessage={t('in_person_proofing.body.location.po_search.is_searching_message')} longWaitDurationMs={1} > - {uspsApiError + {usesErrorComponent && uspsApiError ? t('in_person_proofing.body.location.po_search.continue_button') : t('in_person_proofing.body.location.po_search.search_button')} diff --git a/app/javascript/packages/address-search/components/full-address-search.tsx b/app/javascript/packages/address-search/components/full-address-search.tsx index 1a5526901c1..e2a09e0a5de 100644 --- a/app/javascript/packages/address-search/components/full-address-search.tsx +++ b/app/javascript/packages/address-search/components/full-address-search.tsx @@ -59,6 +59,7 @@ function FullAddressSearch({ disabled={disabled} locationsURL={locationsURL} uspsApiError={apiError} + usesErrorComponent={usesErrorComponent} /> {usesErrorComponent && apiError && } {locationResults && foundAddress && !isLoadingLocations && ( diff --git a/app/javascript/packages/address-search/package.json b/app/javascript/packages/address-search/package.json index 1812b0240a0..a3f7b95c503 100644 --- a/app/javascript/packages/address-search/package.json +++ b/app/javascript/packages/address-search/package.json @@ -1,6 +1,6 @@ { "name": "@18f/identity-address-search", - "version": "3.4.0", + "version": "4.0.1", "type": "module", "private": false, "files": [ @@ -34,4 +34,4 @@ "directory": "app/javascript/packages/address-search" }, "sideEffects": false -} \ No newline at end of file +} diff --git a/app/javascript/packages/address-search/types.d.ts b/app/javascript/packages/address-search/types.d.ts index 75c7f0ae726..f029037f699 100644 --- a/app/javascript/packages/address-search/types.d.ts +++ b/app/javascript/packages/address-search/types.d.ts @@ -94,4 +94,5 @@ interface FullAddressSearchInputProps { registerField?: RegisterFieldCallback; usStatesTerritories: string[][]; uspsApiError: Error | null; + usesErrorComponent?: boolean; }