Add Send feedback button census track feedback (#1232)

* Add send feedback btn to side panel

* Update contact page copy

* remove redundant constant

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);
   }
 
 }

client/src/components/AreaDetail/areaDetail.module.scss.d.ts

@@ -12,6 +12,7 @@ declare namespace MapModuleScssNamespace {
     showThresholdExceed:string;
     hideThresholdExceed:string;
     categoryHeader:string;
+    sendFeedbackBtn: string;
   }
 }
 

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>
 

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"

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',

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',

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>

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>