From 9b4d45a96c4c230079f1dce086bf43c60f442af0 Mon Sep 17 00:00:00 2001
From: Vim <86254807+vim-usds@users.noreply.github.com>
Date: Thu, 3 Feb 2022 12:39:49 -0500
Subject: [PATCH] Add Send feedback button census track feedback (#1232)

* Add send feedback btn to side panel

* Update contact page copy

* remove redundant constant
---
 .../AreaDetail/areaDetail.module.scss         |  5 +-
 .../AreaDetail/areaDetail.module.scss.d.ts    |  1 +
 client/src/components/AreaDetail/index.tsx    | 37 +++++++++++++--
 .../__snapshots__/areaDetail.test.tsx.snap    | 16 +++++++
 client/src/data/copy/contact.tsx              | 46 +++++++++++++++++++
 client/src/data/copy/explore.tsx              | 22 +++++++--
 .../pages/__snapshots__/contact.test.tsx.snap | 37 +++++++++++++++
 client/src/pages/contact.tsx                  |  4 ++
 8 files changed, 156 insertions(+), 12 deletions(-)

diff --git a/client/src/components/AreaDetail/areaDetail.module.scss b/client/src/components/AreaDetail/areaDetail.module.scss
index 03f644da..d2769082 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss
+++ b/client/src/components/AreaDetail/areaDetail.module.scss
@@ -59,9 +59,8 @@ $sidePanelLabelFontColor: #171716;
     visibility: hidden;
   }
 
-  .feedbackLink {
-    font-size: small;
-    @include u-margin-top(1);
+  .sendFeedbackBtn {
+    @include u-margin-top(2);
   }
 
 }
diff --git a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
index 03e161a5..67efca70 100644
--- a/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
+++ b/client/src/components/AreaDetail/areaDetail.module.scss.d.ts
@@ -12,6 +12,7 @@ declare namespace MapModuleScssNamespace {
     showThresholdExceed:string;
     hideThresholdExceed:string;
     categoryHeader:string;
+    sendFeedbackBtn: string;
   }
 }
 
diff --git a/client/src/components/AreaDetail/index.tsx b/client/src/components/AreaDetail/index.tsx
index 8eec89ed..480af0be 100644
--- a/client/src/components/AreaDetail/index.tsx
+++ b/client/src/components/AreaDetail/index.tsx
@@ -2,7 +2,7 @@
 // External Libs:
 import React from 'react';
 import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
-import {Accordion} from '@trussworks/react-uswds';
+import {Accordion, Button} from '@trussworks/react-uswds';
 
 // Components:
 import Category from '../Category';
@@ -13,6 +13,9 @@ import Indicator from '../Indicator';
 import * as styles from './areaDetail.module.scss';
 import * as constants from '../../data/constants';
 import * as EXPLORE_COPY from '../../data/copy/explore';
+import * as CONTACT_COPY from '../../data/copy/contact';
+// @ts-ignore
+// import mailIcon from '/node_modules/uswds/dist/img/usa-icons/mail.svg';
 
 interface IAreaDetailProps {
   properties: constants.J40Properties,
@@ -48,6 +51,10 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
 
   const isCommunityFocus = score >= constants.SCORE_BOUNDARY_THRESHOLD;
 
+  const feedbackEmailSubject = `Census tract ID ${blockGroup}, ${countyName}, ${stateName}`;
+  const feedbackEmailBody = intl.formatMessage(EXPLORE_COPY.SEND_FEEDBACK.EMAIL_BODY);
+
+
   // Define each indicator in the side panel with constants from copy file (for intl)
   // Indicators are grouped by category
   const expAgLoss:indicatorInfo = {
@@ -372,9 +379,13 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
 
       {/* Disadvantaged? */}
       <div className={styles.categorization}>
+
+        {/* Questions asking if disadvantaged? */}
         <div className={styles.isInFocus}>
           {EXPLORE_COPY.COMMUNITY.IS_FOCUS}
         </div>
+
+        {/* YES with Dot or NO with no Dot  */}
         <div className={styles.communityOfFocus}>
           {isCommunityFocus ?
             <>
@@ -384,6 +395,8 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
           <h3>{EXPLORE_COPY.COMMUNITY.NOT_OF_FOCUS}</h3>
           }
         </div>
+
+        {/* Number of thresholds exceeded */}
         <div className={
             properties[constants.TOTAL_NUMBER_OF_DISADVANTAGE_INDICATORS] > 0 ?
             styles.showThresholdExceed : styles.hideThresholdExceed
@@ -397,9 +410,25 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
               totalCount: constants.TOTAL_NUMBER_OF_INDICATORS,
             }}/>
         </div>
-        {/* <a className={styles.feedbackLink} href={sidePanelFeedbackHref}>
-          {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK}
-        </a> */}
+
+        {/* Send Feedback button */}
+        <a
+          className={styles.sendFeedbackBtn}
+          // The mailto string must be on a single line otherwise the email does not display subject and body
+          href={`
+            mailto:${CONTACT_COPY.FEEDBACK_EMAIL}?subject=${feedbackEmailSubject}&body=${feedbackEmailBody}
+          `}
+        >
+          <Button
+            type="button">
+            <div>
+              {EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.TITLE}
+            </div>
+            {/* <div>
+                <img src={mailIcon} alt={'mail icon for email'}/>
+              </div> */}
+          </Button>
+        </a>
 
       </div>
 
diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
index 55b7b218..bc51b14e 100644
--- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
+++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
@@ -55,6 +55,22 @@ exports[`rendering of the AreaDetail checks if various text fields are visible 1
       <div>
          of 21 thresholds exceeded
       </div>
+      <a
+        href="
+            mailto:Screeningtool-Support@omb.eop.gov?subject=Census tract ID 98729374234, N/A, N/A&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this tract, the communities who live in this tract, and anything else relevant that we should know.
+    
+          "
+      >
+        <button
+          class="usa-button"
+          data-testid="button"
+          type="button"
+        >
+          <div>
+            Send feedback
+          </div>
+        </button>
+      </a>
     </div>
     <div
       aria-multiselectable="true"
diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx
index 47815ba7..022f4968 100644
--- a/client/src/data/copy/contact.tsx
+++ b/client/src/data/copy/contact.tsx
@@ -1,4 +1,7 @@
+import React from 'react';
 import {defineMessages} from 'react-intl';
+import {FormattedMessage, Link} from 'gatsby-plugin-intl';
+import LinkTypeWrapper from '../../components/LinkTypeWrapper';
 
 export const PAGE_INTRO = defineMessages({
   PAGE_TILE: {
@@ -28,6 +31,49 @@ export const PAGE_INTRO = defineMessages({
   },
 });
 
+export const CENSUS_TRACK_FEEDBACK = {
+  TITLE: <FormattedMessage
+    id={'contact.page.census.track.feedback.title'}
+    defaultMessage={`Census track feedback`}
+    description={'census track feedback section'}
+  />,
+  PARAGRAPH1: <FormattedMessage
+    id={'contact.page.census.track.feedback.para1'}
+    defaultMessage={`
+      To provide feedback about a specific census tract, either select the send feedback button after 
+      finding a tract on the {exploreLink} page or just use the email address provided above. Please 
+      include the census tract ID, county, state or territory information, in addition to your feedback.
+    `}
+    description={'census track feedback section'}
+    values={{
+      exploreLink: <Link to={'/cejst'}>Explore the tool</Link>,
+    }}
+  />,
+  PARAGRAPH2: <FormattedMessage
+    id={'contact.page.census.track.feedback.para2'}
+    defaultMessage={`
+      If there are specific data indicators that could be improved or changed, please include that
+      information in the body of the email.
+    `}
+    description={'census track feedback section'}
+  />,
+  PARAGRAPH3: <FormattedMessage
+    id={'contact.page.census.track.feedback.para1'}
+    defaultMessage={`
+      In addition, you can provide information about data via the {improvementSurvey}.
+    `}
+    description={'census track feedback section'}
+    values={{
+      improvementSurvey: <LinkTypeWrapper
+        linkText={'improvement survey'}
+        internal={false}
+        url={`https://www.surveymonkey.com/r/cejst-survey`}
+        openUrlNewTab={true}
+      />,
+    }}
+  />,
+};
+
 export const CONTACT_VIA_EMAIL = {
   ID: 'contact.general',
   DESCRIPTION: 'Contact page body text',
diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx
index 5bbe598c..3282e3fb 100644
--- a/client/src/data/copy/explore.tsx
+++ b/client/src/data/copy/explore.tsx
@@ -230,13 +230,25 @@ export const COMMUNITY = {
     defaultMessage={ 'Identified as disadvantaged?'}
     description={'asking IF the communities is focused on'}
   />,
-  SEND_FEEDBACK: <FormattedMessage
-    id={'areaDetail.categorization.send.feedback'}
-    defaultMessage={ 'send feedback'}
-    description={'link to send feedback'}
-  />,
+  SEND_FEEDBACK: {
+    TITLE: <FormattedMessage
+      id={'areaDetail.categorization.send.feedback.title'}
+      defaultMessage={ 'Send feedback'}
+      description={'link to send feedback'}
+    />,
+  },
 };
 
+export const SEND_FEEDBACK = defineMessages({
+  EMAIL_BODY: {
+    id: 'areaDetail.categorization.send.feedback.email.body',
+    // eslint-disable-next-line max-len
+    defaultMessage: `Please provide feedback about this census tract, including about the datasets, the data categories provided for this tract, the communities who live in this tract, and anything else relevant that we should know.
+    `,
+    description: 'link to send feedback',
+  },
+});
+
 export const SIDE_PANEL_CATEGORY = defineMessages({
   INDICATOR: {
     id: 'areaDetail.category.header.indicator',
diff --git a/client/src/pages/__snapshots__/contact.test.tsx.snap b/client/src/pages/__snapshots__/contact.test.tsx.snap
index 064bed8a..dbb0cfde 100644
--- a/client/src/pages/__snapshots__/contact.test.tsx.snap
+++ b/client/src/pages/__snapshots__/contact.test.tsx.snap
@@ -303,6 +303,43 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
             </a>
             .
           </p>
+          <h3>
+            Census track feedback
+          </h3>
+          <p>
+            
+      To provide feedback about a specific census tract, either select the send feedback button after 
+      finding a tract on the 
+            <a
+              href="/en/cejst"
+            >
+              Explore the tool
+            </a>
+             page or just use the email address provided above. Please 
+      include the census tract ID, county, state or territory information, in addition to your feedback.
+    
+          </p>
+          <p>
+            
+      If there are specific data indicators that could be improved or changed, please include that
+      information in the body of the email.
+    
+          </p>
+          <p>
+            
+      In addition, you can provide information about data via the 
+            <a
+              class="usa-link usa-link--external"
+              data-cy=""
+              href="https://www.surveymonkey.com/r/cejst-survey"
+              rel="noreferrer"
+              target="_blank"
+            >
+              improvement survey
+            </a>
+            .
+    
+          </p>
         </div>
       </div>
     </div>
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx
index a5bc6e34..304c1969 100644
--- a/client/src/pages/contact.tsx
+++ b/client/src/pages/contact.tsx
@@ -41,6 +41,10 @@ const ContactPage = ({location}: IContactPageProps) => {
                   />,
                 }}/>
             </p>
+            <h3>{CONTACT_COPY.CENSUS_TRACK_FEEDBACK.TITLE}</h3>
+            <p>{CONTACT_COPY.CENSUS_TRACK_FEEDBACK.PARAGRAPH1}</p>
+            <p>{CONTACT_COPY.CENSUS_TRACK_FEEDBACK.PARAGRAPH2}</p>
+            <p>{CONTACT_COPY.CENSUS_TRACK_FEEDBACK.PARAGRAPH3}</p>
           </Grid>
         </Grid>
       </J40MainGridContainer>