@plusscommunities/pluss-maintenance-web-a 1.1.30 → 1.1.31

package/src/screens/Job.js

@@ -35,6 +35,9 @@ class Job extends Component {
       assignees: [],
       externalSync: null,
       loadingExternalSync: false,
+      retryingSync: false,
+      retrySyncError: null,
+      retrySyncInitiated: false,
     };
   }
 
@@ -86,6 +89,25 @@ class Job extends Component {
     }
   };
 
+  onRetrySync = async () => {
+    const { job } = this.state;
+    if (!job || this.state.retryingSync) return;
+
+    this.setState({ retryingSync: true, retrySyncError: null });
+
+    try {
+      await maintenanceActions.retrySync(job.id);
+      // Refresh job data to get updated history
+      await this.getJob();
+      this.setState({ retryingSync: false, retrySyncInitiated: true });
+    } catch (error) {
+      console.error('onRetrySync', error);
+      const errorMessage =
+        (error && error.response && error.response.data && error.response.data.error) || 'Failed to retry sync. Please try again.';
+      this.setState({ retryingSync: false, retrySyncError: errorMessage });
+    }
+  };
+
   getStatusType = (status) => {
     const { statusTypes } = this.props;
     let statusType = statusTypes.find((s) => s.text === status);
@@ -852,34 +874,113 @@ class Job extends Component {
     );
   }
 
+  hasSyncFailureWithoutSuccess() {
+    const { job } = this.state;
+    if (!job || !job.history) return false;
+
+    const history = job.history || [];
+    const hasSuccess = history.some((entry) => entry.EntryType === 'ExternalIDSet');
+    const hasFailure = history.some((entry) => entry.EntryType === 'ExternalIDSetFailed');
+
+    return hasFailure && !hasSuccess;
+  }
+
+  renderRetrySyncButton() {
+    const { auth } = this.props;
+    const { retryingSync, retrySyncInitiated } = this.state;
+
+    // Only show for users with maintenance tracking permission
+    if (!Session.validateAccess(auth.site, values.permissionMaintenanceTracking, auth)) return null;
+
+    // Only show if there's a failure without success and retry hasn't been initiated
+    if (!this.hasSyncFailureWithoutSuccess() || retrySyncInitiated) return null;
+
+    // Show spinner while retrying
+    if (retryingSync) {
+      return <FontAwesome style={{ fontSize: 20, color: Colours.COLOUR_DUSK_LIGHT, marginLeft: 8 }} name="spinner fa-pulse fa-fw" />;
+    }
+
+    return (
+      <div className="statusLabel pointer" onClick={this.onRetrySync} style={{ backgroundColor: Colours.COLOUR_RED, marginLeft: 8 }}>
+        <span className="statusLabel_text">Retry Sync</span>
+      </div>
+    );
+  }
+
+  renderExternalSyncStatus() {
+    const { retrySyncError, retrySyncInitiated } = this.state;
+
+    // Show error message if retry failed
+    if (retrySyncError) {
+      return (
+        <Components.Text type="body">
+          <FontAwesome className="userStatusIcon" name="times-circle" style={{ color: Colours.COLOUR_RED }} /> {retrySyncError}
+        </Components.Text>
+      );
+    }
+
+    // Show success message if retry was initiated
+    if (retrySyncInitiated) {
+      return (
+        <Components.Text type="body">
+          <FontAwesome className="userStatusIcon" name="check-circle" style={{ color: Colours.COLOUR_GREEN }} /> Sync retry initiated. Check
+          back shortly for results.
+        </Components.Text>
+      );
+    }
+
+    // Show failure message with instruction
+    if (this.hasSyncFailureWithoutSuccess()) {
+      return (
+        <Components.Text type="body">
+          <FontAwesome className="userStatusIcon" name="times-circle" style={{ color: Colours.COLOUR_RED }} /> External sync failed. Use the
+          retry button to attempt again.
+        </Components.Text>
+      );
+    }
+
+    return null;
+  }
+
   renderExternalSync() {
     const { externalSync, loadingExternalSync } = this.state;
 
-    // Only show if external sync data exists
-    if (!externalSync || loadingExternalSync) return null;
+    // Check if we should show this section at all
+    const hasExternalSyncData = externalSync && !loadingExternalSync;
+    const hasSyncFailure = this.hasSyncFailureWithoutSuccess();
+
+    // Show section if we have sync data OR if there's a failure that can be retried
+    if (!hasExternalSyncData && !hasSyncFailure) return null;
 
     return (
       <div className="padding-32 paddingVertical-40 bottomDivideBorder relative">
         <div className="newTopBar clearfix flex flex-reverse">
+          {this.renderRetrySyncButton()}
           <Components.Text type="formTitleSmall" className="flex-1">
             External Sync
           </Components.Text>
         </div>
         <div className="marginTop-16">
-          {externalSync.systemType && (
-            <Components.Text type="body" className="marginBottom-8">
-              <strong>System:</strong> {externalSync.systemType}
-            </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>
+          {hasExternalSyncData ? (
+            <>
+              {externalSync.systemType && (
+                <Components.Text type="body" className="marginBottom-8">
+                  <strong>System:</strong> {externalSync.systemType}
+                </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>
+              )}
+            </>
+          ) : (
+            this.renderExternalSyncStatus()
           )}
         </div>
       </div>