Add address to search placeholder and add "at or above" to category copy for low income (#1665)

* Add address to search placeholder text

* Adds "at or above" to category copy

* Updates map search placeholder text

- Update es and en.json files
- adds mobile search placeholder text
- udpates desktop search placeholder text

* Update logic to determine mobile for search text

* Update search error message

- update to Spanish text as well

* Adjust spacing between search and territory btns

* Modify mobile detection logic

- remove cypress tests for faster deploys

* Add placeholder text to state variable

- wrap state variable in useEffect()

client/src/components/MapSearch/MapSearch.tsx

@@ -1,7 +1,9 @@
-import React, {useState} from 'react';
+/* eslint-disable max-len */
+import React, {useEffect, useState} from 'react';
 import {LngLatBoundsLike} from 'maplibre-gl';
 import {useIntl} from 'gatsby-plugin-intl';
 import {Search} from '@trussworks/react-uswds';
+import {useWindowSize} from 'react-use';
 
 import MapSearchMessage from '../MapSearchMessage';
 
@@ -17,6 +19,22 @@ const MapSearch = ({goToPlace}:IMapSearch) => {
   const [isSearchResultsNull, setIsSearchResultsNull] = useState(false);
   const intl = useIntl();
 
+  /**
+   * At compile-time, the width/height returned by useWindowSize will be X. When the client requests the
+   * app on run-time from CDN, and the app hydrates, reconcilation no longer occurs and the client is forced
+   * to use X.
+   *
+   * To avoid this, we set the placeholder text as a state variable. We also create a useEffect that updates
+   * that state whenenver the width changes.
+   *
+   */
+  const {width, height} = useWindowSize();
+  const [placeholderText, setPlaceholderText]= useState(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER);
+
+  useEffect( () => {
+   width > height ? setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER): setPlaceholderText(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER_MOBILE);
+  }, [width]);
+
   /*
     onSearchHandler will
      1. extract the search term from the input field
@@ -61,7 +79,7 @@ const MapSearch = ({goToPlace}:IMapSearch) => {
     <div className={styles.mapSearchContainer}>
       <MapSearchMessage isSearchResultsNull={isSearchResultsNull} />
       <Search
-        placeholder={intl.formatMessage(EXPLORE_COPY.MAP.SEARCH_PLACEHOLDER)}
+        placeholder={intl.formatMessage(placeholderText)}
         size="small"
         onSubmit={(e) => onSearchHandler(e)}
       />

client/src/components/MapSearch/__snapshots__/MapSearch.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
 <DocumentFragment>
   <div>
     <div>
-      No location found. Please try again.
+      Location not found or unknown. Please try a different search.
     </div>
     <form
       class="usa-search usa-search--small"
@@ -23,7 +23,7 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
         data-testid="textInput"
         id="search-field"
         name="search"
-        placeholder="Enter a city, state or ZIP"
+        placeholder="Search for an address, city, state or ZIP"
         type="search"
       />
       <button