Add IQ form selector and forms

client/src/components/IQContactForm/IQContactForm.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import * as CONTACT_COPY from '../../data/copy/contact';
+
+interface IIQContactForm {
+    messageType: string
+  }
+
+const IQContactForm = ({messageType}:IIQContactForm) => {
+  if (messageType === '') return null;
+  if (messageType === CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT.defaultMessage) {
+    return <iframe frameBorder="0" src="https://iqconnect.iqfed.com/iqextranet/EForm.aspx?__cid=46PREPROD1&__fid=100035&iframe=Y" width="100%" height="891"></iframe>;
+  } else {
+    return <iframe frameBorder="0" src="https://iqconnect.iqfed.com/iqextranet/EForm.aspx?__cid=46PREPROD1&__fid=100039&iframe=Y" width="100%" height="579"></iframe>;
+  }
+};
+
+export default IQContactForm;

client/src/components/IQContactForm/index.tsx

@@ -0,0 +1,3 @@
+import IQContactForm from './IQContactForm';
+
+export default IQContactForm;

client/src/data/copy/contact.tsx

@@ -29,4 +29,27 @@ export const CONTACT_VIA_EMAIL = {
   DEFAULT_MESSAGE: `For general feedback, email {general_email_address}`,
 };
 
+export const MESSAGE_TYPES = defineMessages({
+  FORM_SELECTION_PROMPT: {
+    id: 'contact.page.message.type.prompt',
+    defaultMessage: 'What would you like to inform us about?',
+    description: 'prompt to select the message type',
+  },
+  BUG_REPORT: {
+    id: 'contact.page.message.type.bug',
+    defaultMessage: 'Report a bug',
+    description: 'selecting a type of message, a bug',
+  },
+  COMMUNITY_FEEDBACK: {
+    id: 'contact.page.message.type.community.feedback',
+    defaultMessage: 'Community feedback',
+    description: 'selecting a type of message, community feedback',
+  },
+  DATASET_FEEDBACK: {
+    id: 'contact.page.message.type.dataset.feedback',
+    defaultMessage: 'Dataset feedback',
+    description: 'selecting a type of message, dataset feedback',
+  },
+});
+
 export const FEEDBACK_EMAIL = 'screeningtool.feedback@usds.gov';

client/src/pages/contact.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import {Grid} from '@trussworks/react-uswds';
+import React, {useState} from 'react';
+import {Grid, ComboBox, Label} from '@trussworks/react-uswds';
 import {useIntl, FormattedMessage} from 'gatsby-plugin-intl';
 
+import IQContactForm from '../components/IQContactForm';
 import J40MainGridContainer from '../components/J40MainGridContainer';
 import Layout from '../components/layout';
 
@@ -13,6 +14,28 @@ interface IContactPageProps {
 
 const ContactPage = ({location}: IContactPageProps) => {
   const intl = useIntl();
+  const [messageType, setMessageType] = useState('');
+
+
+  const messageTypes = [
+    {
+      value: CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT.defaultMessage,
+      label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.BUG_REPORT),
+    },
+    {
+      value: CONTACT_COPY.MESSAGE_TYPES.COMMUNITY_FEEDBACK.defaultMessage,
+      label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.COMMUNITY_FEEDBACK),
+    },
+    {
+      value: CONTACT_COPY.MESSAGE_TYPES.DATASET_FEEDBACK.defaultMessage,
+      label: intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.DATASET_FEEDBACK),
+    },
+  ];
+
+  const onMessageTypeChange = (messageType:string | undefined) => {
+    console.log('messageType', messageType);
+    if (messageType) setMessageType(messageType);
+  };
 
   return (
     <Layout location={location} title={intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_TILE)}>
@@ -26,6 +49,20 @@ const ContactPage = ({location}: IContactPageProps) => {
             <h2>
               {intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}
             </h2>
+
+            <Label htmlFor="messageType">
+              {intl.formatMessage(CONTACT_COPY.MESSAGE_TYPES.FORM_SELECTION_PROMPT)}
+            </Label>
+            <ComboBox
+              id="messageType"
+              name="messageType"
+              options={messageTypes}
+              onChange={(messageType) => onMessageTypeChange(messageType)}
+              ulProps={{'aria-labelledby': 'message-type-label'}}
+            />
+
+            <IQContactForm messageType={messageType} />
+
             <p>
               <FormattedMessage
                 id={CONTACT_COPY.CONTACT_VIA_EMAIL.ID}
@@ -41,6 +78,7 @@ const ContactPage = ({location}: IContactPageProps) => {
                     </a>,
                 }}/>
             </p>
+            <br />
           </Grid>
         </Grid>
       </J40MainGridContainer>