Non-modal form for converting travel board request type to virtual

app/models/concerns/appeal_concern.rb

@@ -21,6 +21,14 @@ def regional_office_name
     "#{regional_office.city}, #{regional_office.state}"
   end
 
+  def closest_regional_office_label
+    return if closest_regional_office.nil?
+
+    return "Central Office" if closest_regional_office == "C"
+
+    RegionalOffice::CITIES[closest_regional_office][:label]
+  end
+
   def veteran_name
     veteran_name_object.formatted(:form)
   end

app/models/serializers/work_queue/appeal_serializer.rb

@@ -77,6 +77,8 @@ class WorkQueue::AppealSerializer
 
   attribute :closest_regional_office
 
+  attribute :closest_regional_office_label
+
   attribute(:available_hearing_locations) { |object| available_hearing_locations(object) }
 
   attribute :external_id, &:uuid

app/models/serializers/work_queue/legacy_appeal_serializer.rb

@@ -50,6 +50,8 @@ class WorkQueue::LegacyAppealSerializer
 
   attribute :closest_regional_office
 
+  attribute :closest_regional_office_label
+
   attribute(:available_hearing_locations) { |object| available_hearing_locations(object) }
 
   attribute :docket_name do

client/COPY.json

@@ -755,7 +755,11 @@
   "EMAIL_NOTIFICATION_HISTORY_TITLE": "Email Notification History",
   "EMAIL_NOTIFICATION_HISTORY_INTRO": "Caseflow attempted to send the following email notifications, but this does not guarantee the recipients were able to receive them",
   "VIRTUAL_HEARING_TIMEZONE_REQUIRED": "Timezone is required to send email notifications.",
-
+
+  "CONVERT_HEARING_TYPE_TITLE": "Convert Hearing To %s",
+  "CONVERT_HEARING_TYPE_SUBTITLE": "The hearing request will appear in the scheduling queue for <strong>%s</strong>.",
+  "CONVERT_HEARING_TYPE_SUBTITLE_2": "Review and update the following information in VBMS if needed. Caseflow won't send email notifications until you schedule the hearing.",
+
   "JUDGE_TEAM_REMOVE_JUDGE_ERROR": "Cannot remove a judge from their judge team.",
   "JUDGE_TEAM_ATTORNEY_RIGHTS_ERROR": "Cannot edit attorney rights on non-attorneys",
 

client/app/hearings/components/Details.jsx

@@ -15,7 +15,7 @@ import {
   RESET_VIRTUAL_HEARING
 } from '../contexts/HearingsFormContext';
 import { HearingsUserContext } from '../contexts/HearingsUserContext';
-import { deepDiff, pollVirtualHearingData, getChanges, getAppellantTitleForHearing } from '../utils';
+import { deepDiff, pollVirtualHearingData, getChanges, getAppellantTitle } from '../utils';
 import { inputFix } from './details/style';
 import {
   onReceiveAlerts,
@@ -62,6 +62,8 @@ const HearingDetails = (props) => {
   const [virtualHearingModalType, setVirtualHearingModalType] = useState(null);
   const [shouldStartPolling, setShouldStartPolling] = useState(null);
 
+  const appellantTitle = getAppellantTitle(hearing?.appellantIsNotVeteran);
+
   // Method to reset the state
   const reset = () => {
     // Reset the state
@@ -127,7 +129,7 @@ const HearingDetails = (props) => {
       if (virtual && errors) {
         // Set the Virtual Hearing errors
         setVirtualHearingErrors({
-          [noAppellantEmail && 'appellantEmail']: `${getAppellantTitleForHearing(hearing)} email is required`,
+          [noAppellantEmail && 'appellantEmail']: `${appellantTitle} email is required`,
           [noRepTimezone && 'representativeTz']: COPY.VIRTUAL_HEARING_TIMEZONE_REQUIRED,
           [noAppellantTimezone && 'appellantTz']: COPY.VIRTUAL_HEARING_TIMEZONE_REQUIRED
         });
@@ -201,7 +203,7 @@ const HearingDetails = (props) => {
           const errors = messages.split(',').reduce((list, message) => ({
             ...list,
             [(/Representative/).test(message) ? 'representativeEmail' : 'appellantEmail']:
-              message.replace('Appellant', getAppellantTitleForHearing(hearing))
+              message.replace('Appellant', appellantTitle)
           }), {});
 
           document.getElementById('email-section').scrollIntoView();

client/app/hearings/components/HearingConversion.jsx

@@ -12,7 +12,7 @@ import { VirtualHearingSection } from './VirtualHearings/Section';
 import { ReadOnly } from './details/ReadOnly';
 import { HelperText } from './VirtualHearings/HelperText';
 import { HearingTime } from './modalForms/HearingTime';
-import { getAppellantTitleForHearing } from '../utils';
+import { getAppellantTitle } from '../utils';
 import { HEARING_CONVERSION_TYPES } from '../constants';
 import { RepresentativeSection } from './VirtualHearings/RepresentativeSection';
 import { AppellantSection } from './VirtualHearings/AppellantSection';
@@ -25,7 +25,7 @@ export const HearingConversion = ({
   errors,
   update,
 }) => {
-  const appellantTitle = getAppellantTitleForHearing(hearing);
+  const appellantTitle = getAppellantTitle(hearing?.appellantIsNotVeteran);
   const virtual = type === 'change_to_virtual';
   const video = hearing.readableRequestType === 'Video';
   const convertLabel = video ? COPY.VIDEO_CHANGE_FROM_VIRTUAL : COPY.CENTRAL_OFFICE_CHANGE_FROM_VIRTUAL;
@@ -74,7 +74,7 @@ export const HearingConversion = ({
   return (
     <AppSegment filledBackground>
       <h1 className="cf-margin-bottom-0">{title}</h1>
-      <span>{sprintf(helperLabel, getAppellantTitleForHearing(hearing))}</span>
+      <span>{sprintf(helperLabel, getAppellantTitle(hearing?.appellantIsNotVeteran))}</span>
       <ReadOnly label="Hearing Date" text={DateUtil.formatDateStr(scheduledFor)} />
       <div className={classNames('usa-grid', { [marginTop(30)]: true })}>
         <div className="usa-width-one-half">

client/app/hearings/components/HearingTypeConversionForm.jsx

@@ -0,0 +1,100 @@
+import React, { useState } from 'react';
+import AppSegment from '@department-of-veterans-affairs/caseflow-frontend-toolkit/components/AppSegment';
+import PropTypes from 'prop-types';
+import { sprintf } from 'sprintf-js';
+
+import { marginTop, saveButton, cancelButton } from './details/style';
+import { HelperText } from './VirtualHearings/HelperText';
+import COPY from '../../../COPY';
+import { getAppellantTitle } from '../utils';
+import { RepresentativeSection } from './VirtualHearings/RepresentativeSection';
+import { AppellantSection } from './VirtualHearings/AppellantSection';
+import Button from '../../components/Button';
+
+export const HearingTypeConversionForm = ({
+  type,
+  appeal
+}) => {
+  // Create and manage the loading state
+  const [loading, setLoading] = useState(false);
+
+  // reset any states
+  const reset = () => setLoading(false);
+
+  // 'Appellant' or 'Veteran'
+  const appellantTitle = getAppellantTitle(appeal?.appellantIsNotVeteran);
+
+  /* eslint-disable camelcase */
+  // powerOfAttorney gets loaded into redux store when case details page loads
+  const hearing = {
+    representative: appeal?.powerOfAttorney?.representative_name,
+    representativeType: appeal?.powerOfAttorney?.representative_type,
+    appellantFullName: appeal?.appellantFullName
+  };
+
+  // veteranInfo gets loaded into redux store when case details page loads
+  const virtualHearing = {
+    appellantEmail: appeal?.veteranInfo?.veteran?.email_address,
+    representativeEmail: appeal?.powerOfAttorney?.representative_email_address,
+  };
+  /* eslint-enable camelcase */
+
+  // Set the section props
+  const sectionProps = {
+    appellantTitle,
+    hearing,
+    readOnly: true,
+    showDivider: false,
+    showOnlyAppellantName: true,
+    type,
+    virtualHearing,
+  };
+
+  const convertTitle = sprintf(COPY.CONVERT_HEARING_TYPE_TITLE, type);
+
+  return (
+    <React.Fragment>
+      <AppSegment filledBackground>
+        <h1 className="cf-margin-bottom-0">{convertTitle}</h1>
+        <p dangerouslySetInnerHTML={
+          { __html: sprintf(COPY.CONVERT_HEARING_TYPE_SUBTITLE, appeal?.closestRegionalOfficeLabel) }
+        }
+        />
+        <HelperText label={COPY.CONVERT_HEARING_TYPE_SUBTITLE_2} />
+        <AppellantSection {...sectionProps} />
+        <RepresentativeSection {...sectionProps} />
+      </AppSegment>
+      <div {...marginTop(30)}>
+        <Button
+          name="Cancel"
+          linkStyling
+          onClick={
+            () => {
+              reset();
+              history.goBack();
+            }
+          }
+          styling={cancelButton}
+        >
+          Cancel
+        </Button>
+        <span {...saveButton}>
+          <Button
+            name={convertTitle}
+            loading={loading}
+            className="usa-button"
+          >
+            {convertTitle}
+          </Button>
+        </span>
+      </div>
+    </React.Fragment>
+  );
+};
+
+HearingTypeConversionForm.propTypes = {
+  appeal: PropTypes.object,
+  // Router inherited props
+  history: PropTypes.object,
+  type: PropTypes.string
+};

client/app/hearings/components/HearingTypeConversionForm.stories.js

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { HearingTypeConversionForm } from './HearingTypeConversionForm';
+
+import { amaAppealForTravelBoard } from '../../../test/data/appeals';
+
+export default {
+  title: 'Hearings/Components/HearingTypeConversionForm',
+  component: HearingTypeConversionForm,
+  parameters: {
+    docs: {
+      inlineStories: false,
+      iframeHeight: 760,
+    },
+  }
+};
+
+const Template = (args) => (
+  <HearingTypeConversionForm {...args} />
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  appeal: {
+    ...amaAppealForTravelBoard
+  },
+  type: "Virtual"
+}
+
+export const Appellant = Template.bind({});
+Appellant.args = {
+  ...Basic.args,
+  appeal: {
+    ...Basic.args.appeal,
+    appellantIsNotVeteran: true
+  }
+}
+
+export const CentralOffice = Template.bind({});
+CentralOffice.args = {
+  ...Basic.args,
+  appeal: {
+    ...Basic.args.appeal,
+    closestRegionalOfficeLabel: "Central Office"
+  }
+}

client/app/hearings/components/HearingTypeConversionForm.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import { HearingTypeConversionForm } from 'app/hearings/components/HearingTypeConversionForm';
+
+import { mount } from 'enzyme';
+import { amaAppealForTravelBoard } from 'test/data';
+import { VirtualHearingSection } from 'app/hearings/components/VirtualHearings/Section';
+import { AddressLine } from 'app/hearings/components/details/Address';
+import { VirtualHearingEmail } from 'app/hearings/components/VirtualHearings/Emails';
+import { getAppellantTitle } from 'app/hearings/utils';
+
+describe('HearingTypeConversionForm', () => {
+  test('Matches snapshot with default props', () => {
+    const hearingTypeConversionForm = mount(
+      <HearingTypeConversionForm
+        appeal={amaAppealForTravelBoard}
+        type={'Virtual'}
+      />
+    );
+
+    // Assertions
+    expect(hearingTypeConversionForm.find(VirtualHearingSection)).toHaveLength(2);
+    expect(hearingTypeConversionForm.find(AddressLine)).toHaveLength(1);
+    expect(hearingTypeConversionForm.find(VirtualHearingEmail)).toHaveLength(2);
+    expect(hearingTypeConversionForm).toMatchSnapshot();
+  });
+
+  test('Does not show a divider on top of Appellant Section', () => {
+    const hearingTypeConversionForm = mount(
+      <HearingTypeConversionForm
+        appeal={amaAppealForTravelBoard}
+        type={'Virtual'}
+      />
+    )
+
+    expect(
+      hearingTypeConversionForm.
+        findWhere(
+          (node) => node.prop('label') === `${getAppellantTitle(amaAppealForTravelBoard.appellantIsNotVeteran)}`
+        ).
+        prop('showDivider')
+    ).toEqual(false);
+    expect(hearingTypeConversionForm.find('.cf-help-divider')).toHaveLength(1);
+    expect(hearingTypeConversionForm).toMatchSnapshot();
+  });
+});
+

client/app/hearings/components/ScheduleVeteran.jsx

@@ -15,7 +15,7 @@ import { formatDateStr } from '../../util/DateUtil';
 import Alert from '../../components/Alert';
 import { marginTop, regionalOfficeSection, saveButton, cancelButton } from './details/style';
 import { find } from 'lodash';
-import { getAppellantTitleForHearing } from '../utils';
+import { getAppellantTitle } from '../utils';
 import { onChangeFormData } from '../../components/common/actions';
 import { ScheduleVeteranForm } from './ScheduleVeteranForm';
 import { HEARING_REQUEST_TYPES } from '../constants';
@@ -37,7 +37,7 @@ export const ScheduleVeteran = ({
   const [errors, setErrors] = useState({});
 
   // Get the appellant title ('Veteran' or 'Appellant')
-  const appellantTitle = getAppellantTitleForHearing(appeal);
+  const appellantTitle = getAppellantTitle(appeal?.apppellantIsNotVeteran);
 
   // Get the selected hearing day
   const selectedHearingDay = assignHearingForm?.hearingDay || hearingDay;

client/app/hearings/components/VirtualHearingModal.jsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
 import moment from 'moment-timezone';
 
-import { getAppellantTitleForHearing, zoneName } from '../utils';
+import { getAppellantTitle, zoneName } from '../utils';
 import Button from '../../components/Button';
 import COPY from '../../../COPY';
 import Modal from '../../components/Modal';
@@ -71,7 +71,7 @@ export const ReadOnlyEmails = ({
   appellantTzEdited,
   showAllEmails = false,
 }) => {
-  const appellantTitle = getAppellantTitleForHearing(hearing);
+  const appellantTitle = getAppellantTitle(hearing?.appellantIsNotVeteran);
 
   // Check for appellant edits
   const appellantEdited = appellantTzEdited || appellantEmailEdited ?
@@ -201,7 +201,7 @@ export const ChangeToVirtual = (props) => {
   const {
     hearing, readOnly, representativeEmailError, update, appellantEmailError, virtualHearing
   } = props;
-  const appellantTitle = getAppellantTitleForHearing(hearing);
+  const appellantTitle = getAppellantTitle(hearing?.appellantIsNotVeteran);
 
   // Prefill appellant/veteran email address and representative email on mount.
   useEffect(() => {
@@ -327,7 +327,7 @@ const VirtualHearingModal = (props) => {
   const [loading, setLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   const typeSettings = TYPES[type];
-  const appellantTitle = getAppellantTitleForHearing(hearing);
+  const appellantTitle = getAppellantTitle(hearing?.appellantIsNotVeteran);
   const modalTitle = sprintf(
     typeSettings.title({
       representativeEmailEdited,