Merge pull request #5521 from flexion/4609-message-action-buttons

4609: add message action buttons, empty modals

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,16 +164,15 @@ const app = {
       faClock,
       faClockSolid,
       faClone,
-      faEnvelopeOpen,
       faCloudDownloadAlt,
       faCloudUploadAlt,
       faCopy,
       faCopySolid,
       faDollarSign,
       faEdit,
       faEditSolid,
-      faEnvelopeSolid,
       faEnvelopeOpen,
+      faEnvelopeSolid,
       faExclamation,
       faExclamationCircle,
       faExclamationTriangle,
@@ -202,6 +202,7 @@ const app = {
       faPrint,
       faQuestionCircle,
       faRedoAlt,
+      faReply,
       faSearch,
       faShareSquare,
       faShieldAlt,

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,

web-client/src/presenter/sequences/openCompleteMessageModalSequence.js

@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openCompleteMessageModalSequence = [
+  setShowModalFactoryAction('CompleteMessageModal'),
+];

web-client/src/presenter/sequences/openForwardMessageModalSequence.js

@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openForwardMessageModalSequence = [
+  setShowModalFactoryAction('ForwardMessageModal'),
+];

web-client/src/presenter/sequences/openReplyToMessageModalSequence.js

@@ -0,0 +1,5 @@
+import { setShowModalFactoryAction } from '../actions/setShowModalFactoryAction';
+
+export const openReplyToMessageModalSequence = [
+  setShowModalFactoryAction('ReplyToMessageModal'),
+];

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

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

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,

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="Send"
+        preventCancelOnBlur={true}
+        title="Forward Message"
+        onCancelSequence="clearModalFormSequence"
+        onConfirmSequence={() => {}}
+      ></ConfirmModal>
+    );
+  },
+);

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,22 +14,65 @@ 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 (
       <>
         <CaseDetailHeader />
         <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"
+                onClick={() => openCompleteMessageModalSequence()}
+              >
+                Complete
+              </Button>
+            </div>
+            <div className="grid-col-1">
+              <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"
+                onClick={() => openReplyToMessageModalSequence()}
+              >
+                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">
@@ -103,6 +149,15 @@ export const MessageDetail = connect(
             </div>
           </div>
         </section>
+        {showModal === 'CompleteMessageModal' && (
+          <CompleteCaseMessageModalDialog />
+        )}
+        {showModal === 'ForwardMessageModal' && (
+          <ForwardCaseMessageModalDialog />
+        )}
+        {showModal === 'ReplyToMessageModal' && (
+          <ReplyToCaseMessageModalDialog />
+        )}
       </>
     );
   },

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="Send"
+        preventCancelOnBlur={true}
+        title="Reply to Message"
+        onCancelSequence="clearModalFormSequence"
+        onConfirmSequence={() => {}}
+      ></ConfirmModal>
+    );
+  },
+);