Fix bug on hearing details page where email error messages weren't being displayed

app/models/hearings/forms/base_hearing_update_form.rb

@@ -29,7 +29,8 @@ def update
       hearing.reload
 
       start_async_job
-      add_virtual_hearing_alert
+
+      add_virtual_hearing_alert if show_virtual_hearing_progress_alerts?
     end
   end
 
@@ -73,7 +74,11 @@ def show_update_alert?
     return false if hearing.virtual? && (hearing_updates.dig(:scheduled_time).present? ||
                     hearing_updates.dig(:scheduled_for).present?)
 
-    hearing_updated?
+    hearing_updated? || (virtual_hearing_updates.present? && !show_virtual_hearing_progress_alerts?)
+  end
+
+  def show_virtual_hearing_progress_alerts?
+    [appellant_email_sent_flag, representative_email_sent_flag, judge_email_sent_flag].any?(false)
   end
 
   def should_create_or_update_virtual_hearing?
@@ -155,16 +160,18 @@ def updates_requiring_email?
 
   # Send appellant email if cancelling, updating time or updating either appellant email or appellant timezone
   def appellant_email_sent_flag
-    !(updates_requiring_email? ||
-      virtual_hearing_attributes&.key?(:appellant_email) ||
-      virtual_hearing_attributes&.key?(:appellant_tz))
+    should_send_email = updates_requiring_email? ||
+                        virtual_hearing_attributes&.key?(:appellant_email) ||
+                        virtual_hearing_attributes&.key?(:appellant_tz)
+    !should_send_email
   end
 
   # Send rep email if cancelling, updating time or updating either rep email or rep timezone
   def representative_email_sent_flag
-    !(updates_requiring_email? ||
-      virtual_hearing_attributes&.key?(:representative_email) ||
-      virtual_hearing_attributes&.key?(:representative_tz))
+    should_send_email = updates_requiring_email? ||
+                        virtual_hearing_attributes&.fetch(:representative_email, nil).present? ||
+                        virtual_hearing_attributes&.key?(:representative_tz)
+    !should_send_email
   end
 
   # also returns false if the judge id is present or true if the virtual hearing is being cancelled
@@ -199,7 +206,7 @@ def virtual_hearing_updates
 
     sanitize_updated_emails if virtual_hearing_attributes.present?
 
-    updates = (virtual_hearing_attributes || {}).compact.merge(emails_sent_updates)
+    updates = (virtual_hearing_attributes || {}).merge(emails_sent_updates)
 
     if judge_id.present?
       updates[:judge_email] = hearing.judge&.email
@@ -230,11 +237,11 @@ def create_or_update_virtual_hearing
     # Handle the status toggle of the virtual hearing
     if virtual_hearing_cancelled?
       # Update the virtual hearings
-      virtual_hearing.update(virtual_hearing_updates)
+      virtual_hearing.update!(virtual_hearing_updates)
 
       DataDogService.increment_counter(metric_name: "cancelled_virtual_hearing.successful", **updated_metric_info)
     elsif !virtual_hearing_created?
-      virtual_hearing.update(virtual_hearing_updates)
+      virtual_hearing.update!(virtual_hearing_updates)
       virtual_hearing.establishment.restart!
       DataDogService.increment_counter(metric_name: "updated_virtual_hearing.successful", **updated_metric_info)
     else

app/models/hearings/forms/hearing_update_form.rb

@@ -15,7 +15,7 @@ def update_hearing
   end
 
   def hearing_updated?
-    super || advance_on_docket_motion_attributes&.present?
+    super || advance_on_docket_motion_attributes.present?
   end
 
   private

client/app/hearings/components/Details.jsx

@@ -102,7 +102,10 @@ const HearingDetails = (props) => {
       const virtual = hearing.isVirtual || hearing.wasVirtual || converting;
       const noEmail = !hearing.virtualHearing?.appellantEmail;
       const noRepTimezone = !hearing.virtualHearing?.representativeTz && hearing.virtualHearing?.representativeEmail;
-      const emailUpdated = editedEmails?.appellantEmailEdited || editedEmails?.representativeEmailEdited;
+      const emailUpdated = (
+        editedEmails?.appellantEmailEdited ||
+        (editedEmails?.representativeEmailEdited && hearing.virtualHearing?.representativeEmail)
+      );
       const timezoneUpdated = editedEmails?.representativeTzEdited || editedEmails?.appellantTzEdited;
       const errors = noEmail || (noRepTimezone && hearing.readableRequestType !== 'Video');
 
@@ -171,7 +174,15 @@ const HearingDetails = (props) => {
 
       // email validations should be thrown inline
       if (code === 1002) {
-        if (hearing?.readableRequestType === 'Video' && !userUseFullPageVideoToVirtual) {
+        // API errors from the server need to be bubbled up to the VirtualHearingModal so it can
+        // update the email components with the validation error messages.
+        const changingFromVideoToVirtualWithModalFlow = (
+          hearing?.readableRequestType === 'Video' &&
+          !hearing.isVirtual &&
+          !userUseFullPageVideoToVirtual
+        );
+
+        if (changingFromVideoToVirtualWithModalFlow) {
           // 1002 is returned with an invalid email. rethrow respError, then re-catch it in VirtualHearingModal
           throw respError;
         } else {
@@ -259,6 +270,7 @@ const HearingDetails = (props) => {
             />
             <DetailsForm
               hearing={hearing}
+              initialHearing={initialHearing}
               update={updateHearing}
               convertHearing={convertHearing}
               errors={virtualHearingErrors}

client/app/hearings/components/HearingConversion.jsx

@@ -148,7 +148,7 @@ export const HearingConversion = ({
             <div className={classNames('usa-width-one-half', { [noMaxWidth]: true })} >
               <Timezone
                 errorMessage={errors?.representativeTz}
-                required={virtualHearing?.representativeEmail}
+                required={Boolean(virtualHearing?.representativeEmail)}
                 value={virtualHearing?.representativeTz}
                 onChange={(representativeTz) => update('virtualHearing', { representativeTz })}
                 time={hearing.scheduledTimeString}

client/app/hearings/components/VirtualHearingModal.jsx

@@ -95,9 +95,10 @@ export const ReadOnlyEmails = ({
           {virtualHearing.appellantEmail}
         </p>
       )}
-      {(representativeEmailEdited || showAllEmails) && (
+      {(virtualHearing.representativeEmail &&
+       (representativeEmailEdited || showAllEmails)) && (
         <p>
-          <strong>Representative Email</strong>
+          <strong>POA/Representative Email</strong>
           <br />
           {virtualHearing.representativeEmail}
         </p>

client/app/hearings/components/VirtualHearings/Fields.jsx

@@ -14,6 +14,7 @@ export const VirtualHearingFields = ({
   requestType,
   defaultAppellantTz,
   defaultRepresentativeTz,
+  initialRepresentativeTz,
   virtualHearing,
   readOnly,
   update,
@@ -55,7 +56,7 @@ export const VirtualHearingFields = ({
         <div className="usa-width-one-third">
           <Timezone
             errorMessage={errors?.representativeTz}
-            required={virtualHearing?.representativeEmail}
+            required={Boolean(virtualHearing?.representativeEmail)}
             value={virtualHearing?.representativeTz || defaultRepresentativeTz}
             onChange={(representativeTz) => update('virtualHearing', { representativeTz })}
             readOnly={readOnly || !virtualHearing?.representativeEmail}
@@ -72,7 +73,17 @@ export const VirtualHearingFields = ({
             emailType="representativeEmail"
             email={virtualHearing?.representativeEmail}
             error={errors?.representativeEmail}
-            update={update}
+            update={(key, value) => {
+              // Switch the representative timezone back to the initial value if the
+              // representative email is changed to null. This should prevent `deepDiff``
+              // from trying to send any changes to the representative timezone if the
+              // representative email is being removed.
+              if (!value.representativeEmail) {
+                value.representativeTz = initialRepresentativeTz;
+              }
+
+              update(key, value);
+            }}
           />
         </div>
       </div>
@@ -114,4 +125,5 @@ VirtualHearingFields.propTypes = {
   errors: PropTypes.object,
   defaultAppellantTz: PropTypes.string,
   defaultRepresentativeTz: PropTypes.string,
+  initialRepresentativeTz: PropTypes.string,
 };

client/app/hearings/components/details/DetailsForm.jsx

@@ -19,6 +19,7 @@ import TextareaField from '../../../components/TextareaField';
 const DetailsForm = (props) => {
   const {
     hearing,
+    initialHearing,
     update,
     isLegacy,
     openVirtualHearingModal,
@@ -115,6 +116,7 @@ const DetailsForm = (props) => {
       <VirtualHearingForm
         errors={errors}
         hearing={hearing}
+        initialHearing={initialHearing}
         readOnly={readOnly}
         virtualHearing={hearing?.virtualHearing}
         update={update}
@@ -147,6 +149,9 @@ DetailsForm.propTypes = {
     wasVirtual: PropTypes.bool,
     isVirtual: PropTypes.bool,
   }),
+  initialHearing: PropTypes.shape({
+    virtualHearing: PropTypes.object
+  }),
   isLegacy: PropTypes.bool,
   openVirtualHearingModal: PropTypes.func,
   readOnly: PropTypes.bool,

client/app/hearings/components/details/VirtualHearingForm.jsx

@@ -8,7 +8,7 @@ import { getAppellantTitleForHearing } from '../../utils';
 import { VirtualHearingFields } from '../VirtualHearings/Fields';
 
 export const VirtualHearingForm = (
-  { hearing, virtualHearing, readOnly, update, errors }
+  { hearing, initialHearing, virtualHearing, readOnly, update, errors }
 ) => {
   if (!hearing?.isVirtual && !hearing?.wasVirtual) {
     return null;
@@ -53,6 +53,7 @@ export const VirtualHearingForm = (
           time={hearing.scheduledTimeString}
           requestType={hearing.readableRequestType}
           defaultAppellantTz={hearing?.appellantTz}
+          initialRepresentativeTz={initialHearing?.virtualHearing?.representativeTz}
           defaultRepresentativeTz={hearing?.representativeTz}
         />
       )}
@@ -70,6 +71,9 @@ VirtualHearingForm.propTypes = {
     wasVirtual: PropTypes.bool,
     isVirtual: PropTypes.bool
   }),
+  initialHearing: PropTypes.shape({
+    virtualHearing: PropTypes.object
+  }),
   readOnly: PropTypes.bool,
   virtualHearing: PropTypes.shape({
     appellantEmail: PropTypes.string,

client/app/hearings/contexts/HearingsFormContext.jsx

@@ -44,11 +44,16 @@ const formatHearing = (hearing) => ({
 });
 
 export const SET_UPDATED = 'setUpdated';
-const setUpdated = (state, value) => ({
-  ...state,
-  hearing: { ...state.hearing, ...value },
-  formsUpdated: !isEmpty(deepDiff(state.initialHearing, { ...state.hearing, ...value }))
-});
+const setUpdated = (state, value) => {
+  const newState = {
+    ...state,
+    hearing: { ...state.hearing, ...value },
+  };
+
+  newState.formsUpdated = !isEmpty(deepDiff(newState.initialHearing, newState.hearing));
+
+  return newState;
+};
 
 // Full reset of everything.
 export const RESET_HEARING = 'reset';
@@ -62,7 +67,7 @@ const reset = (state, hearing) => ({
 // Resets only the `virtualHearing` field, and should preserve all other fields.
 export const RESET_VIRTUAL_HEARING = 'resetVirtualHearing';
 const resetVirtualHearing = (state, virtualHearing) => {
-  return {
+  const newState = {
     ...state,
     initialHearing: {
       ...state.initialHearing,
@@ -79,6 +84,10 @@ const resetVirtualHearing = (state, virtualHearing) => {
       }
     }
   };
+
+  newState.formsUpdated = !isEmpty(deepDiff(newState.initialHearing, newState.hearing));
+
+  return newState;
 };
 
 const reducer = (state, action) => {

client/app/hearings/utils.js

@@ -62,11 +62,13 @@ export const deepDiff = (firstObj, secondObj) => {
     (result, firstVal, key) => {
       const secondVal = secondObj[key];
 
-      if (_.isEqual(firstVal, secondVal)) {
-        result[key] = null;
-      } else if (_.isObject(firstVal) && _.isObject(secondVal)) {
-        result[key] = deepDiff(firstVal, secondVal);
-      } else {
+      if (_.isObject(firstVal) && _.isObject(secondVal)) {
+        const nestedDiff = deepDiff(firstVal, secondVal);
+
+        if (nestedDiff && !_.isEmpty(nestedDiff)) {
+          result[key] = nestedDiff;
+        }
+      } else if (!_.isEqual(firstVal, secondVal)) {
         result[key] = secondVal;
       }
 
@@ -75,7 +77,7 @@ export const deepDiff = (firstObj, secondObj) => {
     {}
   );
 
-  return _.pickBy(changedObject, (val) => val !== null);
+  return changedObject;
 };
 
 export const filterCurrentIssues = (issues) =>

client/test/app/hearings/components/VirtualHearings/__snapshots__/Fields.test.js.snap

@@ -15323,7 +15323,7 @@ exports[`Fields Matches snapshot with default props 1`] = `
         name="representativeTz"
         onChange={[Function]}
         readOnly={false}
-        required="[email protected]"
+        required={true}
         time="08:15"
         value={null}
       >
@@ -16100,7 +16100,7 @@ exports[`Fields Matches snapshot with default props 1`] = `
           }
           placeholder="Select a timezone"
           readOnly={false}
-          required="[email protected]"
+          required={true}
           strongLabel={true}
           styling={
             Object {
@@ -30336,6 +30336,7 @@ exports[`Fields Matches snapshot with default props 1`] = `
         email="[email protected]"
         emailType="representativeEmail"
         label="POA/Representative Email"
+        update={[Function]}
       >
         <TextField
           className={