@plusscommunities/pluss-maintenance-web-a 1.1.27 → 1.1.28

package/src/screens/Job.js

@@ -33,6 +33,8 @@ class Job extends Component {
       noteInput: '',
       noteImages: [],
       assignees: [],
+      externalSync: null,
+      loadingExternalSync: false,
     };
   }
 
@@ -46,6 +48,7 @@ class Job extends Component {
       this.getJob();
       this.getComments();
       this.getAssignees();
+      this.getExternalSync();
     }
   }
 
@@ -69,6 +72,20 @@ class Job extends Component {
     }
   };
 
+  getExternalSync = async () => {
+    try {
+      this.setState({ loadingExternalSync: true });
+      const res = await maintenanceActions.getExternalSync(this.state.jobId);
+      this.setState({ externalSync: res.data, loadingExternalSync: false });
+    } catch (error) {
+      // 404 is expected if no sync - don't show error
+      if (error.response?.status !== 404) {
+        console.error('getExternalSync', error);
+      }
+      this.setState({ loadingExternalSync: false });
+    }
+  };
+
   getStatusType = (status) => {
     const { statusTypes } = this.props;
     let statusType = statusTypes.find((s) => s.text === status);
@@ -801,6 +818,24 @@ class Job extends Component {
     );
   }
 
+  renderExternalSyncEntry(e, i) {
+    const isSuccess = e.EntryType === 'ExternalIDSet';
+    const backgroundColor = isSuccess ? Colours.COLOUR_GREEN : Colours.COLOUR_RED; // Green for success, red for failure
+
+    return (
+      <div className="ticketHistoryEntry" key={i}>
+        <p className="ticketHistoryEntry_timestamp">{moment.utc(e.timestamp).local().format('D MMM YYYY h:mma')}</p>
+        <div className="statusLabel statusLabel-large statusLabel-full" style={{ backgroundColor }}>
+          <span className="statusLabel_text">
+            {isSuccess
+              ? `Synced to ${e.externalSystem || 'external system'}${e.externalId ? ` (ID: ${e.externalId})` : ''}`
+              : `Failed to sync to external system${e.error ? `: ${e.error}` : ''}`}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
   renderPriority() {
     const { auth } = this.props;
     if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
@@ -817,6 +852,40 @@ class Job extends Component {
     );
   }
 
+  renderExternalSync() {
+    const { externalSync, loadingExternalSync } = this.state;
+
+    // Only show if external sync data exists
+    if (!externalSync || loadingExternalSync) return null;
+
+    return (
+      <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
+        <div className="newTopBar clearfix flex flex-reverse">
+          <Components.Text type="formTitleSmall" className="flex-1">
+            External Sync
+          </Components.Text>
+        </div>
+        <div className="marginTop-16">
+          {externalSync.externalSystem && (
+            <Components.Text type="body" className="marginBottom-8">
+              <strong>System:</strong> {externalSync.externalSystem}
+            </Components.Text>
+          )}
+          {externalSync.externalId && (
+            <Components.Text type="body" className="marginBottom-8">
+              <strong>External ID:</strong> {externalSync.externalId}
+            </Components.Text>
+          )}
+          {externalSync.syncedAt && (
+            <Components.Text type="body" className="marginBottom-8">
+              <strong>Synced:</strong> {moment.utc(externalSync.syncedAt).local().format('D MMM YYYY h:mma')}
+            </Components.Text>
+          )}
+        </div>
+      </div>
+    );
+  }
+
   renderOverview() {
     const { job } = this.state;
     if (!job || !job.history) return null;
@@ -851,6 +920,9 @@ class Job extends Component {
               return this.renderNote(e, i);
             case 'assignment':
               return this.renderAssignmentEntry(e, i);
+            case 'ExternalIDSet':
+            case 'ExternalIDSetFailed':
+              return this.renderExternalSyncEntry(e, i);
             default:
               break;
           }
@@ -1080,6 +1152,7 @@ class Job extends Component {
           <Components.OverlayPageSection className="pageSectionWrapper--newPopupSide pageSectionWrapper--newPopupSide-fixedWidth">
             {this.renderAssignment()}
             {this.renderPriority()}
+            {this.renderExternalSync()}
             {this.renderOverview()}
           </Components.OverlayPageSection>
         </Components.OverlayPageContents>