@plusscommunities/pluss-maintenance-app 6.0.17 → 6.0.19

package/src/screens/RequestDetail.js

@@ -38,6 +38,8 @@ class RequestDetail extends Component {
       showMessages: false,
       assignees: [],
       selectedPDF: null,
+      externalSync: null,
+      loadingExternalSync: false,
     };
 
     this.scrollView = React.createRef();
@@ -51,6 +53,7 @@ class RequestDetail extends Component {
     this.getJob();
     this.updateJobState(this.props.job);
     this.getAssignees();
+    this.getExternalSync();
   }
 
   getJob = async () => {
@@ -60,6 +63,8 @@ class RequestDetail extends Component {
         // console.log('getJob', JSON.stringify(res.data, null, 2));
         this.props.jobAdded(res.data);
         this.updateJobState(res.data);
+        // Refresh external sync data when job is refreshed
+        this.getExternalSync();
       } catch (error) {
         console.log('getJob error', error.toString());
         // check for 403 or 404 error
@@ -85,6 +90,24 @@ class RequestDetail extends Component {
     }
   };
 
+  getExternalSync = async () => {
+    // Only fetch if user has maintenance tracking permission
+    if (!this.hasPermission()) return;
+    if (!this.props.job?.id) return;
+
+    try {
+      this.setState({ loadingExternalSync: true });
+      const res = await maintenanceActions.getExternalSync(this.props.job.id);
+      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.log('getExternalSync error', error);
+      }
+      this.setState({ loadingExternalSync: false });
+    }
+  };
+
   updateJobState(defaultJob) {
     const job = _.find(this.props.jobs, j => j.id === this.props.job.id) || defaultJob;
     if (!job) {
@@ -542,6 +565,43 @@ class RequestDetail extends Component {
     return content;
   }
 
+  renderExternalSync() {
+    const { externalSync, loadingExternalSync } = this.state;
+
+    // Only show if user has permission and external sync data exists
+    if (!this.hasPermission()) return null;
+    if (!externalSync || loadingExternalSync) return null;
+
+    return (
+      <View style={[styles.externalSyncContainer, Helper.getShadowStyle()]}>
+        <View style={styles.externalSyncHeader}>
+          <Text style={styles.externalSyncTitle}>External Sync</Text>
+          <Icon name="sync" type="material" iconStyle={[styles.externalSyncIcon, { color: this.props.colourBrandingMain }]} />
+        </View>
+        <View style={styles.externalSyncContent}>
+          {externalSync.systemType && (
+            <View style={styles.externalSyncRow}>
+              <Text style={styles.externalSyncLabel}>System:</Text>
+              <Text style={styles.externalSyncValue}>{externalSync.systemType}</Text>
+            </View>
+          )}
+          {externalSync.externalId && (
+            <View style={styles.externalSyncRow}>
+              <Text style={styles.externalSyncLabel}>External ID:</Text>
+              <Text style={styles.externalSyncValue}>{externalSync.externalId}</Text>
+            </View>
+          )}
+          {externalSync.syncedAt && (
+            <View style={styles.externalSyncRow}>
+              <Text style={styles.externalSyncLabel}>Synced:</Text>
+              <Text style={styles.externalSyncValue}>{moment(externalSync.syncedAt).format('D MMM YYYY h:mma')}</Text>
+            </View>
+          )}
+        </View>
+      </View>
+    );
+  }
+
   renderCustomFields() {
     const { job } = this.state;
     const { customFields } = job;
@@ -620,6 +680,7 @@ class RequestDetail extends Component {
                 {!_.isEmpty(job.phone) && <Text style={styles.phoneText}>{job.phone}</Text>}
               </View>
             </View>
+            {this.renderExternalSync()}
           </View>
         )}
       </View>
@@ -1028,6 +1089,48 @@ const styles = StyleSheet.create({
     fontSize: 16,
     color: '#65686D',
   },
+  externalSyncContainer: {
+    backgroundColor: '#fff',
+    marginBottom: 16,
+    borderRadius: 8,
+    padding: 16,
+  },
+  externalSyncHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+    paddingBottom: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: Colours.LINEGREY,
+  },
+  externalSyncTitle: {
+    fontFamily: 'sf-semibold',
+    fontSize: 16,
+    color: Colours.TEXT_DARKEST,
+  },
+  externalSyncIcon: {
+    fontSize: 20,
+  },
+  externalSyncContent: {
+    paddingTop: 4,
+  },
+  externalSyncRow: {
+    flexDirection: 'row',
+    marginBottom: 10,
+  },
+  externalSyncLabel: {
+    fontFamily: 'sf-semibold',
+    fontSize: 14,
+    color: Colours.TEXT_DARK,
+    width: 100,
+  },
+  externalSyncValue: {
+    fontFamily: 'sf-regular',
+    fontSize: 14,
+    color: Colours.TEXT_DARKEST,
+    flex: 1,
+  },
 });
 
 const mapStateToProps = state => {

package/src/screens/ServiceRequest.js

@@ -173,16 +173,25 @@ class MaintenanceRequest extends Component {
         if (userDetails.unit) {
           update.roomNumber = userDetails.unit;
         }
+	if (!this.state.customFields || !_.some(this.state.customFields, 'isTitle')) {
+	    update.title = userDetails.displayName || null;
+	}
       }
     } catch (error) {
       // Permission denied (403) or other error - continue without auto-population
       // User can still manually enter contact details
       console.log('Could not fetch user details for auto-population:', error);
-    }
+    } finally {
+	// In any case, we still need a title. Inform the user to set one form field as a title.
+	if (!state.title && !update.title) {
+	    update.title = "[Missing title - Set one of the form field as title in the community manager]"
+	}
 
+    }
     this.setState(update);
   };
 
+
   onChangeAnswer = (fieldId, answer) => {
     const update = { customFields: _.cloneDeep(this.state.customFields) };
     const field = update.customFields[fieldId];