Merge pull request #1068 from flexion/310-modal-caption

310: modal caption update

web-client/e2e/journey/petitionsClerkUpdatesCaseCaption.js

@@ -12,7 +12,7 @@ export default test => {
 
     await test.runSequence('openCaseCaptionModalSequence');
 
-    expect(test.getState('showModal')).toEqual('CaseCaptionModal');
+    expect(test.getState('showModal')).toEqual('UpdateCaseCaptionModalDialog');
     expect(test.getState('caseCaption')).toEqual(
       'Test Person, Deceased, Test Person, Surviving Spouse, Petitioner',
     );
@@ -29,7 +29,7 @@ export default test => {
 
     await test.runSequence('openCaseCaptionModalSequence');
 
-    expect(test.getState('showModal')).toEqual('CaseCaptionModal');
+    expect(test.getState('showModal')).toEqual('UpdateCaseCaptionModalDialog');
     expect(test.getState('caseCaption')).toEqual(
       'Test Person, Deceased, Test Person, Surviving Spouse, Petitioner',
     );

web-client/src/app.jsx

@@ -1,10 +1,20 @@
+import {
+  faArrowAltCircleLeft,
+  faCheckCircle as faCheckCircleRegular,
+  faClock,
+  faCopy,
+  faEdit,
+  faEyeSlash,
+  faFilePdf as faFilePdfRegular,
+} from '@fortawesome/free-regular-svg-icons';
 import {
   faCaretDown,
   faCaretLeft,
   faCaretUp,
   faCheckCircle,
   faCloudUploadAlt,
   faDollarSign,
+  faEdit as faEditSolid,
   faExclamationTriangle,
   faFilePdf,
   faFlag,
@@ -18,23 +28,14 @@ import {
   faSlash,
   faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-  faArrowAltCircleLeft,
-  faCheckCircle as faCheckCircleRegular,
-  faClock,
-  faCopy,
-  faEdit,
-  faEyeSlash,
-  faFilePdf as faFilePdfRegular,
-} from '@fortawesome/free-regular-svg-icons';
-import { Container } from '@cerebral/react';
-import { library } from '@fortawesome/fontawesome-svg-core';
+import { route, router } from './router';
+
 import App from 'cerebral';
+import { AppComponent } from './views/AppComponent';
+import { Container } from '@cerebral/react';
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import { route, router } from './router';
-import { AppComponent } from './views/AppComponent';
+import { library } from '@fortawesome/fontawesome-svg-core';
 import presenter from './presenter';
 
 /**
@@ -70,6 +71,7 @@ const app = {
       faCopy,
       faDollarSign,
       faEdit,
+      faEditSolid,
       faExclamationTriangle,
       faEyeSlash,
       faFilePdf,

web-client/src/presenter/computeds/documentDetailHelper.js

@@ -1,6 +1,6 @@
-import { state } from 'cerebral';
 import { formatDocument } from './formattedCaseDetail';
 import { formatWorkItem } from './formattedWorkQueue';
+import { state } from 'cerebral';
 
 export default get => {
   const caseDetail = get(state.caseDetail);
@@ -27,6 +27,7 @@ export default get => {
       const actions = get(state.workItemActions);
       return actions[workItemId] === action;
     },
+    showCaptionEditButton: caseDetail.status !== 'Batched for IRS',
     showCaseDetailsEdit: ['New', 'Recalled'].includes(caseDetail.status),
     showCaseDetailsView: ['Batched for IRS'].includes(caseDetail.status),
     showDocumentInfo: get(state.currentTab) === 'Document Info',

web-client/src/presenter/index.js

@@ -1,9 +1,16 @@
+import { ActionError } from './errors/ActionError';
+import { InvalidRequestError } from './errors/InvalidRequestError';
+import { NotFoundError } from './errors/NotFoundError';
+import { ServerInvalidResponseError } from './errors/ServerInvalidResponseError';
+import { UnauthorizedRequestError } from './errors/UnauthorizedRequestError';
+import { UnidentifiedUserError } from './errors/UnidentifiedUserError';
 import { appendNewYearAmountSequence } from './sequences/appendNewYearAmountSequence';
 import { assignSelectedWorkItemsSequence } from './sequences/assignSelectedWorkItemsSequence';
 import { autoSaveCaseSequence } from './sequences/autoSaveCaseSequence';
 import { cerebralBindSimpleSetStateSequence } from './sequences/cerebralBindSimpleSetStateSequence';
 import { chooseWorkQueueSequence } from './sequences/chooseWorkQueueSequence';
 import { clearDocumentSequence } from './sequences/clearDocumentSequence';
+import { clearPreferredTrialCitySequence } from './sequences/clearPreferredTrialCitySequence';
 import { clickServeToIrsSequence } from './sequences/clickServeToIrsSequence';
 import { dismissAlertSequence } from './sequences/dismissAlertSequence';
 import { dismissCaseCaptionModalSequence } from './sequences/dismissCaseCaptionModalSequence';
@@ -16,12 +23,12 @@ import { gotoLoginSequence } from './sequences/gotoLoginSequence';
 import { gotoStartCaseSequence } from './sequences/gotoStartCaseSequence';
 import { gotoStyleGuideSequence } from './sequences/gotoStyleGuideSequence';
 import { loginWithTokenSequence } from './sequences/loginWithTokenSequence';
-import { openCaseCaptionModalSequence } from './sequences/openCaseCaptionModalSequence';
 import { notFoundErrorSequence } from './sequences/notFoundErrorSequence';
+import { openCaseCaptionModalSequence } from './sequences/openCaseCaptionModalSequence';
 import { removeYearAmountSequence } from './sequences/removeYearAmountSequence';
 import { selectAssigneeSequence } from './sequences/selectAssigneeSequence';
 import { selectWorkItemSequence } from './sequences/selectWorkItemSequence';
-import { clearPreferredTrialCitySequence } from './sequences/clearPreferredTrialCitySequence';
+import { setCaseCaptionSequence } from './sequences/setCaseCaptionSequence';
 import { setCurrentPageErrorSequence } from './sequences/setCurrentPageErrorSequence';
 import { setFocusedWorkItemSequence } from './sequences/setFocusedWorkItemSequence';
 import { setIrsNoticeFalseSequence } from './sequences/setIrsNoticeFalseSequence';
@@ -30,6 +37,7 @@ import { setWorkItemActionSequence } from './sequences/setWorkItemActionSequence
 import { signOutSequence } from './sequences/signOutSequence';
 import { startACaseConfirmCancelSequence } from './sequences/startACaseConfirmCancelSequence';
 import { startACaseToggleCancelSequence } from './sequences/startACaseToggleCancelSequence';
+import state from './state';
 import { submitCaseDetailEditSaveSequence } from './sequences/submitCaseDetailEditSaveSequence';
 import { submitCompleteSequence } from './sequences/submitCompleteSequence';
 import { submitDocumentSequence } from './sequences/submitDocumentSequence';
@@ -64,15 +72,6 @@ import { validateCaseDetailSequence } from './sequences/validateCaseDetailSequen
 import { validateStartCaseSequence } from './sequences/validateStartCaseSequence';
 import { viewDocumentSequence } from './sequences/viewDocumentSequence';
 
-import { ActionError } from './errors/ActionError';
-import { InvalidRequestError } from './errors/InvalidRequestError';
-import { ServerInvalidResponseError } from './errors/ServerInvalidResponseError';
-import { UnauthorizedRequestError } from './errors/UnauthorizedRequestError';
-import { UnidentifiedUserError } from './errors/UnidentifiedUserError';
-import { NotFoundError } from './errors/NotFoundError';
-
-import state from './state';
-
 /**
  * Main Cerebral module
  */
@@ -111,6 +110,7 @@ export default {
     removeYearAmountSequence,
     selectAssigneeSequence,
     selectWorkItemSequence,
+    setCaseCaptionSequence,
     setFocusedWorkItemSequence,
     setIrsNoticeFalseSequence,
     setModalDialogNameSequence,

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

@@ -1,22 +1,21 @@
-import { state } from 'cerebral';
-import { set } from 'cerebral/factories';
-
 import { clearAlertsAction } from '../actions/clearAlertsAction';
 import { clearFormsAction } from '../actions/clearFormsAction';
 import { clearWorkItemActionMapAction } from '../actions/clearWorkItemActionMapAction';
 import { getCaseAction } from '../actions/getCaseAction';
+import { getCaseTypesAction } from '../actions/getCaseTypesAction';
 import { getInternalUsersAction } from '../actions/getInternalUsersAction';
 import { getProcedureTypesAction } from '../actions/getProcedureTypesAction';
+import { set } from 'cerebral/factories';
 import { setBaseUrlAction } from '../actions/setBaseUrlAction';
 import { setCaseAction } from '../actions/setCaseAction';
+import { setCaseTypesAction } from '../actions/setCaseTypesAction';
 import { setCurrentPageAction } from '../actions/setCurrentPageAction';
 import { setDefaultDocumentDetailTabAction } from '../actions/setDefaultDocumentDetailTabAction';
 import { setDocumentIdAction } from '../actions/setDocumentIdAction';
 import { setFormForCaseAction } from '../actions/setFormForCaseAction';
 import { setInternalUsersAction } from '../actions/setInternalUsersAction';
 import { setProcedureTypesAction } from '../actions/setProcedureTypesAction';
-import { getCaseTypesAction } from '../actions/getCaseTypesAction';
-import { setCaseTypesAction } from '../actions/setCaseTypesAction';
+import { state } from 'cerebral';
 
 export const gotoDocumentDetailSequence = [
   setCurrentPageAction('Loading'),

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

@@ -1,8 +1,8 @@
+import { defaultCaseCaptionAction } from '../actions/defaultCaseCaptionAction';
 import { set } from 'cerebral/factories';
 import { state } from 'cerebral';
-import { defaultCaseCaptionAction } from '../actions/defaultCaseCaptionAction';
 
 export const openCaseCaptionModalSequence = [
   defaultCaseCaptionAction,
-  set(state.showModal, 'CaseCaptionModal'),
+  set(state.showModal, 'UpdateCaseCaptionModalDialog'),
 ];

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

@@ -0,0 +1,7 @@
+import { props, state } from 'cerebral';
+
+import { set } from 'cerebral/factories';
+
+export const setCaseCaptionSequence = [
+  set(state.caseCaption, props.caseCaption),
+];

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

@@ -1,6 +1,7 @@
-import { set } from 'cerebral/factories';
 import { props, state } from 'cerebral';
 
+import { set } from 'cerebral/factories';
+
 export const setModalDialogNameSequence = [
   set(state.showModal, props.showModal),
 ];

web-client/src/presenter/state.js

@@ -12,14 +12,14 @@ import { contactsHelper } from './computeds/contactsHelper';
 import { dashboardPetitionerHelper } from './computeds/dashboardPetitionerHelper';
 import { dashboardRespondentHelper } from './computeds/dashboardRespondentHelper';
 import documentDetailHelper from './computeds/documentDetailHelper';
+import { documentHelper } from './computeds/documentHelper';
 import { extractedDocument } from './computeds/extractDocument';
 import { extractedPendingMessagesFromCaseDetail } from './computeds/extractPendingMessagesFromCaseDetail';
 import { formattedSectionWorkQueue } from './computeds/formattedSectionWorkQueue';
 import { formattedWorkQueue } from './computeds/formattedWorkQueue';
 import { getTrialCityName } from './computeds/formattedTrialCity';
 import startCaseHelper from './computeds/startCaseHelper';
 import { trialCitiesHelper } from './computeds/trialCitiesHelper';
-import { documentHelper } from './computeds/documentHelper';
 import workQueueHelper from './computeds/workQueueHelper';
 
 export default {

web-client/src/styles/buttons.scss

@@ -18,6 +18,9 @@ button.link {
   font-weight: normal;
   text-align: left;
   text-decoration: underline;
+  svg {
+    margin-right: 0;
+  }
 }
 
 button.pdf-link:hover,

web-client/src/styles/custom.scss

@@ -16,6 +16,14 @@ hr {
   margin-bottom: 3rem;
 }
 
+.float-left {
+  margin-right: 20px;
+  float: left;
+}
+.clear-both {
+  clear: both;
+}
+
 .label {
   display: block;
   margin-bottom: 5px;

web-client/src/styles/forms.scss

@@ -35,6 +35,11 @@ select {
   margin: 0 0 2rem;
 }
 
+textarea.caption {
+  width: 379px;
+  height: 107px;
+}
+
 input[type='email']:hover,
 input[type='email']:focus,
 input[type='number']:hover,

web-client/src/styles/typography.scss

@@ -107,3 +107,9 @@ p.lead {
   font-weight: $font-regular;
   line-height: 1.7em;
 }
+
+p.semi-bold {
+  font-family: $font-regular;
+  font-size: 17px;
+  font-weight: $font-semibold;
+}

web-client/src/views/CaseDetailEdit/CaseDetailEdit.jsx

@@ -1,13 +1,13 @@
-import { connect } from '@cerebral/react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { state, sequences } from 'cerebral';
-import React from 'react';
+import { Tab, Tabs } from '../../ustc-ui/Tabs/Tabs';
+import { sequences, state } from 'cerebral';
 
-import { Tabs, Tab } from '../../ustc-ui/Tabs/Tabs';
-import { PartyInformation } from './PartyInformation';
 import { CaseInfo } from './CaseInfo';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IRSNotice } from './IRSNotice';
+import { PartyInformation } from './PartyInformation';
+import React from 'react';
 import { UpdateCaseCancelModalDialog } from './UpdateCaseCancelModalDialog';
+import { connect } from '@cerebral/react';
 
 export const CaseDetailEdit = connect(
   {

web-client/src/views/CaseDetailEdit/UpdateCaseCaptionModalDialog.jsx

@@ -0,0 +1,41 @@
+import { sequences, state } from 'cerebral';
+
+import { ModalDialog } from '../ModalDialog';
+import React from 'react';
+import { connect } from '@cerebral/react';
+
+class UpdateCaseCaptionModalDialogComponent extends ModalDialog {
+  constructor(props) {
+    super(props);
+    this.modal = {
+      cancelLabel: 'Cancel',
+      classNames: '',
+      confirmLabel: 'Save',
+      title: 'Edit Case Caption',
+    };
+  }
+  renderBody() {
+    return (
+      <div>
+        <p className="semi-bold">Case Caption</p>
+        <textarea
+          className="caption"
+          defaultValue={this.props.caseCaption}
+          onChange={e =>
+            this.props.setCaseCaptionSequence({ caseCaption: e.target.value })
+          }
+        />
+      </div>
+    );
+  }
+}
+
+export const UpdateCaseCaptionModalDialog = connect(
+  {
+    cancelSequence: sequences.dismissCaseCaptionModalSequence,
+    caseCaption: state.caseCaption,
+    confirmSequence: sequences.updateCaseDetailSequence,
+    setCaseCaptionSequence: sequences.setCaseCaptionSequence,
+  },
+  UpdateCaseCaptionModalDialogComponent,
+);