From eefd0aced667ef607559b019cf75c337b376b828 Mon Sep 17 00:00:00 2001
From: Rachael Parris <43251054+rachaelparris@users.noreply.github.com>
Date: Tue, 16 Jun 2020 15:10:17 -0700
Subject: [PATCH 1/3] 4609: add message action buttons to message detail

---
 web-client/src/app.jsx                        |  5 +++--
 web-client/src/styles/buttons.scss            |  9 ++++++++
 .../src/views/Messages/MessageDetail.jsx      | 21 ++++++++++++++++++-
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/web-client/src/app.jsx b/web-client/src/app.jsx
index 7971f9a9ea3..62244c70d16 100644
--- a/web-client/src/app.jsx
+++ b/web-client/src/app.jsx
@@ -69,6 +69,7 @@ import { faPlusCircle } from '@fortawesome/free-solid-svg-icons/faPlusCircle';
 import { faPrint } from '@fortawesome/free-solid-svg-icons/faPrint';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons/faQuestionCircle';
 import { faRedoAlt } from '@fortawesome/free-solid-svg-icons/faRedoAlt';
+import { faReply } from '@fortawesome/free-solid-svg-icons/faReply';
 import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
 import { faShareSquare } from '@fortawesome/free-solid-svg-icons/faShareSquare';
 import { faShieldAlt } from '@fortawesome/free-solid-svg-icons/faShieldAlt';
@@ -163,7 +164,6 @@ const app = {
       faClock,
       faClockSolid,
       faClone,
-      faEnvelopeOpen,
       faCloudDownloadAlt,
       faCloudUploadAlt,
       faCopy,
@@ -171,8 +171,8 @@ const app = {
       faDollarSign,
       faEdit,
       faEditSolid,
-      faEnvelopeSolid,
       faEnvelopeOpen,
+      faEnvelopeSolid,
       faExclamation,
       faExclamationCircle,
       faExclamationTriangle,
@@ -202,6 +202,7 @@ const app = {
       faPrint,
       faQuestionCircle,
       faRedoAlt,
+      faReply,
       faSearch,
       faShareSquare,
       faShieldAlt,
diff --git a/web-client/src/styles/buttons.scss b/web-client/src/styles/buttons.scss
index b31309e5315..aacf0dfef95 100644
--- a/web-client/src/styles/buttons.scss
+++ b/web-client/src/styles/buttons.scss
@@ -166,3 +166,12 @@
     text-decoration: none;
   }
 }
+
+.action-button {
+  font-weight: $font-semibold;
+  text-decoration: none;
+
+  svg {
+    margin-right: 3px;
+  }
+}
diff --git a/web-client/src/views/Messages/MessageDetail.jsx b/web-client/src/views/Messages/MessageDetail.jsx
index 0925e1d4d91..b74c26b024a 100644
--- a/web-client/src/views/Messages/MessageDetail.jsx
+++ b/web-client/src/views/Messages/MessageDetail.jsx
@@ -26,7 +26,26 @@ export const MessageDetail = connect(
         <section className="usa-section grid-container">
           <SuccessNotification />
           <ErrorNotification />
-          <h1>Message</h1>
+          <div className="grid-row grid-gap">
+            <div className="grid-col-8">
+              <h1>Message</h1>
+            </div>
+            <div className="grid-col-1">
+              <Button link className="action-button" icon="check-circle">
+                Complete
+              </Button>
+            </div>
+            <div className="grid-col-1">
+              <Button link className="action-button" icon="share-square">
+                Forward
+              </Button>
+            </div>
+            <div className="grid-col-1">
+              <Button link className="action-button" icon="reply">
+                Reply
+              </Button>
+            </div>
+          </div>
 
           <div className="bg-base-lightest padding-top-2 padding-bottom-2 padding-left-3 padding-right-3">
             <div className="grid-row">

From 8cf0df787a3c707c318555f92901142d6fa876f2 Mon Sep 17 00:00:00 2001
From: Rachael Parris <43251054+rachaelparris@users.noreply.github.com>
Date: Tue, 16 Jun 2020 15:22:17 -0700
Subject: [PATCH 2/3] 4609: add empty modals and sequences to open for message
 actions

---
 web-client/src/presenter/presenter.js         |  6 +++
 .../openCompleteMessageModalSequence.js       |  5 +++
 .../openForwardMessageModalSequence.js        |  5 +++
 .../openReplyToMessageModalSequence.js        |  5 +++
 .../CompleteCaseMessageModalDialog.jsx        | 19 +++++++++
 .../Messages/CreateCaseMessageModalDialog.jsx |  2 +-
 .../ForwardCaseMessageModalDialog.jsx         | 19 +++++++++
 .../src/views/Messages/MessageDetail.jsx      | 42 +++++++++++++++++--
 .../ReplyToCaseMessageModalDialog.jsx         | 19 +++++++++
 9 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 web-client/src/presenter/sequences/openCompleteMessageModalSequence.js
 create mode 100644 web-client/src/presenter/sequences/openForwardMessageModalSequence.js
 create mode 100644 web-client/src/presenter/sequences/openReplyToMessageModalSequence.js
 create mode 100644 web-client/src/views/Messages/CompleteCaseMessageModalDialog.jsx
 create mode 100644 web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
 create mode 100644 web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx

diff --git a/web-client/src/presenter/presenter.js b/web-client/src/presenter/presenter.js
index eca59027679..3b212facd39 100644
--- a/web-client/src/presenter/presenter.js
+++ b/web-client/src/presenter/presenter.js
@@ -174,6 +174,7 @@ import { openCaseDocumentDownloadUrlSequence } from './sequences/openCaseDocumen
 import { openCaseInventoryReportModalSequence } from './sequences/openCaseInventoryReportModalSequence';
 import { openChangeScannerSourceModalSequence } from './sequences/openChangeScannerSourceModalSequence';
 import { openCleanModalSequence } from './sequences/openCleanModalSequence';
+import { openCompleteMessageModalSequence } from './sequences/openCompleteMessageModalSequence';
 import { openCompleteSelectDocumentTypeModalSequence } from './sequences/openCompleteSelectDocumentTypeModalSequence';
 import { openConfirmDeleteBatchModalSequence } from './sequences/openConfirmDeleteBatchModalSequence';
 import { openConfirmDeleteCorrespondenceModalSequence } from './sequences/openConfirmDeleteCorrespondenceModalSequence';
@@ -199,9 +200,11 @@ import { openEditCaseDeadlineModalSequence } from './sequences/openEditCaseDeadl
 import { openEditIrsPractitionersModalSequence } from './sequences/openEditIrsPractitionersModalSequence';
 import { openEditOrderTitleModalSequence } from './sequences/openEditOrderTitleModalSequence';
 import { openEditPrivatePractitionersModalSequence } from './sequences/openEditPrivatePractitionersModalSequence';
+import { openForwardMessageModalSequence } from './sequences/openForwardMessageModalSequence';
 import { openPdfPreviewModalSequence } from './sequences/openPdfPreviewModalSequence';
 import { openPrioritizeCaseModalSequence } from './sequences/openPrioritizeCaseModalSequence';
 import { openRemoveFromTrialSessionModalSequence } from './sequences/openRemoveFromTrialSessionModalSequence';
+import { openReplyToMessageModalSequence } from './sequences/openReplyToMessageModalSequence';
 import { openSelectDocumentWizardOverlaySequence } from './sequences/openSelectDocumentWizardOverlaySequence';
 import { openSetCalendarModalSequence } from './sequences/openSetCalendarModalSequence';
 import { openTrialSessionPlanningModalSequence } from './sequences/openTrialSessionPlanningModalSequence';
@@ -591,6 +594,7 @@ export const presenter = {
     openCaseInventoryReportModalSequence,
     openChangeScannerSourceModalSequence,
     openCleanModalSequence,
+    openCompleteMessageModalSequence,
     openCompleteSelectDocumentTypeModalSequence,
     openConfirmDeleteBatchModalSequence,
     openConfirmDeleteCorrespondenceModalSequence,
@@ -616,9 +620,11 @@ export const presenter = {
     openEditIrsPractitionersModalSequence,
     openEditOrderTitleModalSequence,
     openEditPrivatePractitionersModalSequence,
+    openForwardMessageModalSequence,
     openPdfPreviewModalSequence,
     openPrioritizeCaseModalSequence,
     openRemoveFromTrialSessionModalSequence,
+    openReplyToMessageModalSequence,
     openSelectDocumentWizardOverlaySequence,
     openSetCalendarModalSequence,
     openTrialSessionPlanningModalSequence,
diff --git a/web-client/src/presenter/sequences/openCompleteMessageModalSequence.js b/web-client/src/presenter/sequences/openCompleteMessageModalSequence.js
new file mode 100644
index 00000000000..121fa4c2cd9
--- /dev/null
+++ b/web-client/src/presenter/sequences/openCompleteMessageModalSequence.js
@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openCompleteMessageModalSequence = [
+  setShowModalFactoryAction('CompleteMessageModal'),
+];
diff --git a/web-client/src/presenter/sequences/openForwardMessageModalSequence.js b/web-client/src/presenter/sequences/openForwardMessageModalSequence.js
new file mode 100644
index 00000000000..7fc66575c1c
--- /dev/null
+++ b/web-client/src/presenter/sequences/openForwardMessageModalSequence.js
@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openForwardMessageModalSequence = [
+  setShowModalFactoryAction('ForwardMessageModal'),
+];
diff --git a/web-client/src/presenter/sequences/openReplyToMessageModalSequence.js b/web-client/src/presenter/sequences/openReplyToMessageModalSequence.js
new file mode 100644
index 00000000000..ce356062b38
--- /dev/null
+++ b/web-client/src/presenter/sequences/openReplyToMessageModalSequence.js
@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openReplyToMessageModalSequence = [
+  setShowModalFactoryAction('ReplyToMessageModal'),
+];
diff --git a/web-client/src/views/Messages/CompleteCaseMessageModalDialog.jsx b/web-client/src/views/Messages/CompleteCaseMessageModalDialog.jsx
new file mode 100644
index 00000000000..30a4672c6c5
--- /dev/null
+++ b/web-client/src/views/Messages/CompleteCaseMessageModalDialog.jsx
@@ -0,0 +1,19 @@
+import { ConfirmModal } from '../../ustc-ui/Modal/ConfirmModal';
+import { connect } from '@cerebral/react';
+import React from 'react';
+
+export const CompleteCaseMessageModalDialog = connect(
+  {},
+  function CompleteCaseMessageModalDialog() {
+    return (
+      <ConfirmModal
+        cancelLabel="Cancel"
+        confirmLabel="Complete"
+        preventCancelOnBlur={true}
+        title="Complete Message"
+        onCancelSequence="clearModalFormSequence"
+        onConfirmSequence={() => {}}
+      ></ConfirmModal>
+    );
+  },
+);
diff --git a/web-client/src/views/Messages/CreateCaseMessageModalDialog.jsx b/web-client/src/views/Messages/CreateCaseMessageModalDialog.jsx
index e5608534c0f..cb7e6793d63 100644
--- a/web-client/src/views/Messages/CreateCaseMessageModalDialog.jsx
+++ b/web-client/src/views/Messages/CreateCaseMessageModalDialog.jsx
@@ -32,7 +32,7 @@ export const CreateCaseMessageModalDialog = connect(
     validationErrors: state.validationErrors,
     workQueueSectionHelper: state.workQueueSectionHelper,
   },
-  function CreateMessageModalDialog({
+  function CreateCaseMessageModalDialog({
     constants,
     createCaseMessageModalHelper,
     form,
diff --git a/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx b/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
new file mode 100644
index 00000000000..cf5e0ccd76c
--- /dev/null
+++ b/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
@@ -0,0 +1,19 @@
+import { ConfirmModal } from '../../ustc-ui/Modal/ConfirmModal';
+import { connect } from '@cerebral/react';
+import React from 'react';
+
+export const ForwardCaseMessageModalDialog = connect(
+  {},
+  function ForwardCaseMessageModalDialog() {
+    return (
+      <ConfirmModal
+        cancelLabel="Cancel"
+        confirmLabel="Complete"
+        preventCancelOnBlur={true}
+        title="Forward Message"
+        onCancelSequence="clearModalFormSequence"
+        onConfirmSequence={() => {}}
+      ></ConfirmModal>
+    );
+  },
+);
diff --git a/web-client/src/views/Messages/MessageDetail.jsx b/web-client/src/views/Messages/MessageDetail.jsx
index b74c26b024a..7957dd262a8 100644
--- a/web-client/src/views/Messages/MessageDetail.jsx
+++ b/web-client/src/views/Messages/MessageDetail.jsx
@@ -1,6 +1,9 @@
 import { Button } from '../../ustc-ui/Button/Button';
 import { CaseDetailHeader } from '../CaseDetail/CaseDetailHeader';
+import { CompleteCaseMessageModalDialog } from './CompleteCaseMessageModalDialog';
 import { ErrorNotification } from '../ErrorNotification';
+import { ForwardCaseMessageModalDialog } from './ForwardCaseMessageModalDialog';
+import { ReplyToCaseMessageModalDialog } from './ReplyToCaseMessageModalDialog';
 import { SuccessNotification } from '../SuccessNotification';
 import { connect } from '@cerebral/react';
 import { sequences, state } from 'cerebral';
@@ -11,14 +14,23 @@ export const MessageDetail = connect(
     attachmentDocumentToDisplay: state.attachmentDocumentToDisplay,
     formattedMessageDetail: state.formattedMessageDetail,
     iframeSrc: state.iframeSrc,
+    openCompleteMessageModalSequence:
+      sequences.openCompleteMessageModalSequence,
+    openForwardMessageModalSequence: sequences.openForwardMessageModalSequence,
+    openReplyToMessageModalSequence: sequences.openReplyToMessageModalSequence,
     setAttachmentDocumentToDisplaySequence:
       sequences.setAttachmentDocumentToDisplaySequence,
+    showModal: state.modal.showModal,
   },
   function MessageDetail({
     attachmentDocumentToDisplay,
     formattedMessageDetail,
     iframeSrc,
+    openCompleteMessageModalSequence,
+    openForwardMessageModalSequence,
+    openReplyToMessageModalSequence,
     setAttachmentDocumentToDisplaySequence,
+    showModal,
   }) {
     return (
       <>
@@ -31,17 +43,32 @@ export const MessageDetail = connect(
               <h1>Message</h1>
             </div>
             <div className="grid-col-1">
-              <Button link className="action-button" icon="check-circle">
+              <Button
+                link
+                className="action-button"
+                icon="check-circle"
+                onClick={() => openCompleteMessageModalSequence()}
+              >
                 Complete
               </Button>
             </div>
             <div className="grid-col-1">
-              <Button link className="action-button" icon="share-square">
+              <Button
+                link
+                className="action-button"
+                icon="share-square"
+                onClick={() => openForwardMessageModalSequence()}
+              >
                 Forward
               </Button>
             </div>
             <div className="grid-col-1">
-              <Button link className="action-button" icon="reply">
+              <Button
+                link
+                className="action-button"
+                icon="reply"
+                onClick={() => openReplyToMessageModalSequence()}
+              >
                 Reply
               </Button>
             </div>
@@ -122,6 +149,15 @@ export const MessageDetail = connect(
             </div>
           </div>
         </section>
+        {showModal === 'CompleteMessageModal' && (
+          <CompleteCaseMessageModalDialog />
+        )}
+        {showModal === 'ForwardMessageModal' && (
+          <ForwardCaseMessageModalDialog />
+        )}
+        {showModal === 'ReplyToMessageModal' && (
+          <ReplyToCaseMessageModalDialog />
+        )}
       </>
     );
   },
diff --git a/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx b/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx
new file mode 100644
index 00000000000..d69c36e17a1
--- /dev/null
+++ b/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx
@@ -0,0 +1,19 @@
+import { ConfirmModal } from '../../ustc-ui/Modal/ConfirmModal';
+import { connect } from '@cerebral/react';
+import React from 'react';
+
+export const ReplyToCaseMessageModalDialog = connect(
+  {},
+  function ReplyToCaseMessageModalDialog() {
+    return (
+      <ConfirmModal
+        cancelLabel="Cancel"
+        confirmLabel="Complete"
+        preventCancelOnBlur={true}
+        title="Reply to Message"
+        onCancelSequence="clearModalFormSequence"
+        onConfirmSequence={() => {}}
+      ></ConfirmModal>
+    );
+  },
+);

From c39380c03414a2f995d55035edd60adca6493bfe Mon Sep 17 00:00:00 2001
From: Rachael Parris <43251054+rachaelparris@users.noreply.github.com>
Date: Tue, 16 Jun 2020 15:24:41 -0700
Subject: [PATCH 3/3] update button text

---
 web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx | 2 +-
 web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx b/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
index cf5e0ccd76c..1850dad546d 100644
--- a/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
+++ b/web-client/src/views/Messages/ForwardCaseMessageModalDialog.jsx
@@ -8,7 +8,7 @@ export const ForwardCaseMessageModalDialog = connect(
     return (
       <ConfirmModal
         cancelLabel="Cancel"
-        confirmLabel="Complete"
+        confirmLabel="Send"
         preventCancelOnBlur={true}
         title="Forward Message"
         onCancelSequence="clearModalFormSequence"
diff --git a/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx b/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx
index d69c36e17a1..463e18e173d 100644
--- a/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx
+++ b/web-client/src/views/Messages/ReplyToCaseMessageModalDialog.jsx
@@ -8,7 +8,7 @@ export const ReplyToCaseMessageModalDialog = connect(
     return (
       <ConfirmModal
         cancelLabel="Cancel"
-        confirmLabel="Complete"
+        confirmLabel="Send"
         preventCancelOnBlur={true}
         title="Reply to Message"
         onCancelSequence="clearModalFormSequence"