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"