Spanish survey support (#1589)

* Spanish site improvements

* surveybutton localization

* Basic ES support. Localization done, too.

* Update test snapshots.

Co-authored-by: Jorge Escobar <jorge.e.escobar@omb.eop.gov>

client/compiled-lang/en.json

@@ -479,6 +479,12 @@
       "value": "Census tract feedback"
     }
   ],
+  "contact.page.fab.survey.link": [
+    {
+      "type": 0,
+      "value": "https://www.surveymonkey.com/r/cejst-survey"
+    }
+  ],
   "contact.page.fab.survey.text": [
     {
       "type": 0,
@@ -514,7 +520,7 @@
   "contact.page.request.for.info.box.title": [
     {
       "type": 0,
-      "value": "Request for Infomation"
+      "value": "Request for Information"
     }
   ],
   "contact.page.sub.header.text": [

client/src/components/J40Footer/__snapshots__/J40Footer.spec.tsx.snap

@@ -220,17 +220,21 @@ exports[`J40Footer renders correctly 1`] = `
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/components/Language/Language.tsx

@@ -21,7 +21,6 @@ interface ILanguageProps {
  * @return {JSX.Element | null}
  */
 const Language = ({isDesktop}:ILanguageProps) => {
-
   return (
     <div className={isDesktop ? styles.languageContainer : styles.languageContainerMobile}>
       <img className={styles.languageIcon} src={languageIcon} alt={'language icon for selecting language'}/>
@@ -40,7 +39,7 @@ const Language = ({isDesktop}:ILanguageProps) => {
         }
       </IntlContextConsumer>
     </div>
-  )
+  );
 };
 
 export default Language;

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

@@ -12,7 +12,7 @@ exports[`rendering of the RequestForInfo checks if component renders 1`] = `
       <h3
         class="usa-summary-box__heading"
       >
-        Request for Infomation
+        Request for Information
       </h3>
       <div
         class="usa-summary-box__text"

client/src/components/SurveyButton/SurveyButton.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {render} from '@testing-library/react';
 import {LocalizedComponent} from '../../test/testHelpers';
 import SurveyButton from './SurveyButton';
-import {onClickHandler} from './SurveyButton';
+
 describe('rendering of the SurveyButton', () => {
   const {asFragment} = render(
       <LocalizedComponent>
@@ -14,8 +14,3 @@ describe('rendering of the SurveyButton', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
-describe('test clickHandler', () => {
-  it('clickHandler should fire successfully', () => {
-    onClickHandler();
-  });
-});

client/src/components/SurveyButton/SurveyButton.tsx

@@ -9,26 +9,24 @@ import J40MainGridContainer from '../J40MainGridContainer';
 // @ts-ignore
 import launchIcon from '/node_modules/uswds/dist/img/usa-icons/launch.svg';
 
-export const onClickHandler = () => {
-  Object.assign(document.createElement('a'), {target: '_blank', href: 'https://www.surveymonkey.com/r/cejst-survey'}).click();
-};
-
 const SurveyButton = () => {
   const intl = useIntl();
+  const href = intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_URL);
 
   return (
     <J40MainGridContainer className={styles.surveyButtonContainer}>
-      <Button
+      <a href={href}>
-        type='button'
+        <Button
-        className={styles.surveyButton}
+          type="button"
-        onClick={() => onClickHandler()}>
+          className={styles.surveyButton}>
-        {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
+          {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
-        <img
+          <img
-          className={styles.launchIcon}
+            className={styles.launchIcon}
-          src={launchIcon}
+            src={launchIcon}
-          alt={'launch icon'}
+            alt={'launch icon'}
-        />
+          />
-      </Button>
+        </Button>
+      </a>
     </J40MainGridContainer>
   );
 };

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

@@ -6,17 +6,21 @@ exports[`rendering of the SurveyButton checks if component renders 1`] = `
     class="grid-container-desktop-lg"
     data-testid="gridContainer"
   >
-    <button
+    <a
-      class="usa-button"
+      href="https://www.surveymonkey.com/r/cejst-survey"
-      data-testid="button"
-      type="button"
     >
-      Help improve the site & data
+      <button
-      <img
+        class="usa-button"
-        alt="launch icon"
+        data-testid="button"
-        src="test-file-stub"
+        type="button"
-      />
+      >
-    </button>
+        Help improve the site & data
+        <img
+          alt="launch icon"
+          src="test-file-stub"
+        />
+      </button>
+    </a>
   </div>
 </DocumentFragment>
 `;

client/src/data/copy/contact.tsx

@@ -6,7 +6,6 @@ import * as COMMON_COPY from './common';
 import {PAGES_ENDPOINTS} from '../constants';
 import {FOOTER} from './common';
 
-
 export const PAGE_INTRO = defineMessages({
   PAGE_TILE: {
     id: 'contact.page.title.text',
@@ -33,12 +32,17 @@ export const PAGE_INTRO = defineMessages({
     defaultMessage: `Help improve the site & data`,
     description: 'Navigate to the contact page, this is the text for floating action button',
   },
+  SURVEY_URL: {
+    id: 'contact.page.fab.survey.link',
+    defaultMessage: 'https://www.surveymonkey.com/r/cejst-survey',
+    description: 'Localized link to the survey. Spanish link is https://www.surveymonkey.com/r/cejst-survey-es',
+  },
 });
 
 export const RFI_BOX = defineMessages({
   TITLE: {
     id: 'contact.page.request.for.info.box.title',
-    defaultMessage: 'Request for Infomation',
+    defaultMessage: 'Request for Information',
     description: 'Navigate to the contact page, this is the title of the request for information box',
   },
 });
@@ -82,9 +86,10 @@ export const CENSUS_TRACT_FEEDBACK = {
     defaultMessage={`
       In addition, you can provide feedback on the tool via this <link1>survey</link1>.
     `}
-    description={'Navigate to the contact page, this is the census tract feedback section'}
+    description={'Navigate to the survey. Spanish should substitute <link2> to get Spanish link! Already coded to support'}
     values={{
       link1: COMMON_COPY.linkFn('https://www.surveymonkey.com/r/cejst-survey', false, true),
+      link2: COMMON_COPY.linkFn('https://www.surveymonkey.com/r/cejst-survey-es', false, true),
     }}
   />,
 };

client/src/intl/en.json

@@ -233,12 +233,16 @@
   },
   "contact.page.census.tract.feedback.para3": {
     "defaultMessage": "In addition, you can provide feedback on the tool via this <link1>survey</link1>.",
-    "description": "Navigate to the contact page, this is the census tract feedback section"
+    "description": "Navigate to the survey. Spanish should substitute <link2> to get Spanish link! Already coded to support"
   },
   "contact.page.census.tract.feedback.title": {
     "defaultMessage": "Census tract feedback",
     "description": "Navigate to the contact page, this is the census tract feedback section"
   },
+  "contact.page.fab.survey.link": {
+    "defaultMessage": "https://www.surveymonkey.com/r/cejst-survey",
+    "description": "Localized link to the survey. Spanish link is https://www.surveymonkey.com/r/cejst-survey-es"
+  },
   "contact.page.fab.survey.text": {
     "defaultMessage": "Help improve the site & data",
     "description": "Navigate to the contact page, this is the text for floating action button"
@@ -252,7 +256,7 @@
     "description": "Navigate to the contact page, this is the body of the request for information box"
   },
   "contact.page.request.for.info.box.title": {
-    "defaultMessage": "Request for Infomation",
+    "defaultMessage": "Request for Information",
     "description": "Navigate to the contact page, this is the title of the request for information box"
   },
   "contact.page.sub.header.text": {

client/src/intl/es.json

@@ -56,9 +56,10 @@
 	"common.pages.header.tsd": "Documento de apoyo técnico",
 	"contact.page.census.tract.feedback.para1": "Para proporcionar comentarios sobre un grupo de bloques del censo específico, seleccione el botón de enviar comentarios después de escoger un bloque del censo en la página <link1>Explore la herramienta</link1> o utilice la dirección de correo electrónico que se proporciona arriba. Incluya la identificación de un grupo de bloques del censo, el condado y la información del estado o el territorio, junto con sus comentarios.",
 	"contact.page.census.tract.feedback.para2": "Si existen indicadores de datos específicos que podrían mejorarse o cambiarse, incluya esa información en el cuerpo del correo electrónico.",
-	"contact.page.census.tract.feedback.para3": "Además, puede proporcionar comentarios en la herramienta mediante este <link1>enlace</link1>.",
+	"contact.page.census.tract.feedback.para3": "Además, puede proporcionar comentarios en la herramienta mediante este <link2>enlace</link2>.",
 	"contact.page.census.tract.feedback.title": "Comentarios sobre los grupos de bloques del censo",
 	"contact.page.fab.survey.text": "Ayude a mejorar el sitio web y los datos",
+	"contact.page.fab.survey.link": "https://www.surveymonkey.com/r/cejst-survey-es",
 	"contact.page.header.text": "Contacto",
 	"contact.page.request.for.info.box.body": "Durante el periodo beta, se pueden enviar comentarios sobre la Herramienta para la evaluación de la justicia climática y económica mediante la Solicitud de información del CEQ que se encuentra disponible en <link1>federalregister.gov</link1>.",
 	"contact.page.request.for.info.box.title": "Solicitud de información",

client/src/pages/tests/__snapshots__/about.test.tsx.snap

@@ -1040,17 +1040,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/contact.test.tsx.snap

@@ -454,7 +454,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
               <h3
                 class="usa-summary-box__heading"
               >
-                Request for Infomation
+                Request for Information
               </h3>
               <div
                 class="usa-summary-box__text"
@@ -710,17 +710,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/downloads.test.tsx.snap

@@ -610,17 +610,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/freqAskedQuestions.test.tsx.snap

@@ -572,17 +572,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/methodology.test.tsx.snap

@@ -2647,17 +2647,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap

@@ -1040,17 +1040,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>

client/src/pages/tests/__snapshots__/techSupportDoc.test.tsx.snap

@@ -572,17 +572,21 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
       class="grid-container-desktop-lg"
       data-testid="gridContainer"
     >
-      <button
+      <a
-        class="usa-button"
+        href="https://www.surveymonkey.com/r/cejst-survey"
-        data-testid="button"
-        type="button"
       >
-        Help improve the site & data
+        <button
-        <img
+          class="usa-button"
-          alt="launch icon"
+          data-testid="button"
-          src="test-file-stub"
+          type="button"
-        />
+        >
-      </button>
+          Help improve the site & data
+          <img
+            alt="launch icon"
+            src="test-file-stub"
+          />
+        </button>
+      </a>
     </div>
   </footer>
 </DocumentFragment>