diff --git a/client/src/components/IQContactForm/IQContactForm.tsx b/client/src/components/IQContactForm/IQContactForm.tsx
new file mode 100644
index 00000000..2bf4e41f
--- /dev/null
+++ b/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 ;
+ } else {
+ return ;
+ }
+};
+
+export default IQContactForm;
diff --git a/client/src/components/IQContactForm/index.tsx b/client/src/components/IQContactForm/index.tsx
new file mode 100644
index 00000000..f837b998
--- /dev/null
+++ b/client/src/components/IQContactForm/index.tsx
@@ -0,0 +1,3 @@
+import IQContactForm from './IQContactForm';
+
+export default IQContactForm;
diff --git a/client/src/data/copy/contact.tsx b/client/src/data/copy/contact.tsx
index ab79ee58..ebf5f4f2 100644
--- a/client/src/data/copy/contact.tsx
+++ b/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';
diff --git a/client/src/pages/contact.tsx b/client/src/pages/contact.tsx
index 1ddefaff..9879e97e 100644
--- a/client/src/pages/contact.tsx
+++ b/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 (
@@ -26,6 +49,20 @@ const ContactPage = ({location}: IContactPageProps) => {
{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.PAGE_SUB_HEADING)}
+
+
+ onMessageTypeChange(messageType)}
+ ulProps={{'aria-labelledby': 'message-type-label'}}
+ />
+
+
+
{
,
}}/>
+