@plusscommunities/pluss-maintenance-app 6.1.1-beta.0 → 7.0.0-beta.0

package/src/apis/{generalActions.js → maintenanceActions.js}

@@ -1,10 +1,7 @@
-// import axios from 'axios';
-// import { getUrl } from './helper';
-// import { authedFunction } from '../js';
 import { Helper, Session } from '../core.config';
 import { values } from '../values.config';
 
-export const generalActions = {
+export const maintenanceActions = {
   getJob: (site, id) => {
     return Session.authedFunction({
       method: 'POST',
@@ -44,16 +41,30 @@ export const generalActions = {
   },
   getJobsRecursive: (site, status, type, lastKey, jobs = []) => {
     return new Promise(resolve => {
-      generalActions.getJobs2(site, status, type, lastKey).then(jobRes => {
+      maintenanceActions.getJobs2(site, status, type, lastKey).then(jobRes => {
         const newJobs = [...jobs, ...jobRes.data.Items];
         if (!jobRes.data.LastKey) {
           return resolve(newJobs);
         }
-        return resolve(generalActions.getJobsRecursive(site, status, type, jobRes.data.LastKey, newJobs));
+        return resolve(maintenanceActions.getJobsRecursive(site, status, type, jobRes.data.LastKey, newJobs));
       });
     });
   },
-  sendMaintenanceRequest: (userID, userName, phone, room, title, description, date, type, images, location, isHome, homeText) => {
+  sendMaintenanceRequest: (
+    userID,
+    userName,
+    phone,
+    room,
+    title,
+    description,
+    date,
+    type,
+    images,
+    location,
+    isHome,
+    homeText,
+    customFields,
+  ) => {
     const request = {
       method: 'POST',
       url: Helper.getUrl(values.serviceKey, 'sendMaintenance'),
@@ -70,6 +81,7 @@ export const generalActions = {
         location,
         isHome,
         homeText,
+        customFields,
       },
     };
     return Session.authedFunction(request);
@@ -88,6 +100,22 @@ export const generalActions = {
       data: { id, status },
     });
   },
+  assignJob: (jobId, userId) => {
+    return Session.authedFunction({
+      method: 'POST',
+      url: Helper.getUrl(values.serviceKey, 'update/assign'),
+      data: {
+        id: jobId,
+        userId,
+      },
+    });
+  },
+  getAssignees: site => {
+    return Session.authedFunction({
+      method: 'GET',
+      url: Helper.getUrl(values.serviceKey, 'get/assignees', { site }),
+    });
+  },
   addNote: (jobId, note, attachments) => {
     return Session.authedFunction({
       method: 'POST',
@@ -124,10 +152,6 @@ export const generalActions = {
       },
     });
   },
-  // getWeeklyMenu: async time => {
-  //   //deprecated
-  //   return null;
-  // },
   getJobTypes: async site => {
     const url = Helper.getUrl(values.serviceKey, 'getjobtypes');
     return Session.authedFunction({
@@ -136,32 +160,4 @@ export const generalActions = {
       data: { site },
     });
   },
-  // sendBookingRequest: async bookingInfo => {
-  //   return authedFunction({
-  //     method: 'POST',
-  //     data: {
-  //       bookingInfo,
-  //     },
-  //     url: getUrl('utility', 'sendBookingRequest'),
-  //   });
-  // },
-  // getString: async (site, id, useDefault) => {
-  //   return axios({
-  //     method: 'GET',
-  //     url: getUrl('strings', `get/${site}_${id}`, useDefault ? { useDefault } : undefined),
-  //   }).catch(error => {
-  //     console.log('getString error', error);
-  //     throw error;
-  //   });
-  // },
-  // getGeneralTerms: async () => {
-  //   return axios({
-  //     method: 'GET',
-  //     url: 'https://pluss.plussapp.com.au/strings-prd/get/plussSpace_termsofuse',
-  //   });
-  // },
-  // declineTerms: async (site, userID) => {
-  //   //deprecated
-  //   return null;
-  // },
 };

package/src/components/FilterPopupMenu.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableOpacity, Modal } from 'react-native';
+import { View, Text, TouchableOpacity, Modal, ScrollView, Dimensions } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { generalActions } from '../apis';
+import { maintenanceActions } from '../apis';
 import { Colours, Helper } from '../core.config';
 
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
 class FilterPopupMenu extends Component {
   constructor(props) {
     super(props);
@@ -13,6 +15,8 @@ class FilterPopupMenu extends Component {
       types: props.types || [],
       selectedStatus: props.status || '',
       selectedType: props.type || '',
+      selectedAssignee: props.assignee || '',
+      assignees: [],
     };
     this.statusOptions = [
       {
@@ -24,7 +28,7 @@ class FilterPopupMenu extends Component {
         value: 'Unassigned|In Progress',
       },
       {
-        label: 'Unassigned',
+        label: 'Open',
         value: 'Unassigned',
       },
       {
@@ -39,6 +43,7 @@ class FilterPopupMenu extends Component {
   }
 
   componentDidMount() {
+    this.getAssignees();
     if (_.isEmpty(this.state.types)) this.refreshTypes();
   }
 
@@ -48,8 +53,30 @@ class FilterPopupMenu extends Component {
     }
   }
 
+  getAssignees = async () => {
+    try {
+      const res = await maintenanceActions.getAssignees(this.props.site);
+      let assignees = res.data.Users.map(t => {
+        return { label: t.displayName, value: t.id };
+      });
+      assignees = _.orderBy(assignees, 'label');
+
+      assignees.splice(0, 0, { label: 'All', value: '' });
+
+      const newState = { assignees };
+
+      if (!assignees.some(a => a.value === this.state.selectedAssignee)) {
+        newState.selectedAssignee = '';
+      }
+      // console.log('refreshassignees', assignees);
+      this.setState(newState);
+    } catch (error) {
+      console.error('getAssignees', error);
+    }
+  };
+
   refreshTypes = async () => {
-    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
     const types = data.map(t => {
       return { label: t.typeName, value: t.typeName };
     });
@@ -66,11 +93,14 @@ class FilterPopupMenu extends Component {
 
   onDone = () => {
     const { onClose } = this.props;
-    const { selectedStatus, selectedType } = this.state;
+    const { selectedStatus, selectedType, selectedAssignee } = this.state;
     if (onClose)
       onClose({
         status: selectedStatus,
+        statusText: this.statusOptions.find(o => o.value === selectedStatus)?.label,
         type: selectedType,
+        assignee: selectedAssignee,
+        assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
       });
   };
 
@@ -123,10 +153,11 @@ class FilterPopupMenu extends Component {
         <View style={styles.container}>
           <View style={styles.menu}>
             {this.renderTitle()}
-            <View style={styles.optionContent}>
+            <ScrollView style={styles.optionContent}>
               {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
               {this.renderOptions('Type', this.state.types, 'selectedType')}
-            </View>
+              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
+            </ScrollView>
             {this.renderCancel()}
           </View>
         </View>
@@ -153,6 +184,7 @@ const styles = {
     backgroundColor: '#fff',
     borderTopLeftRadius: 12,
     borderTopRightRadius: 12,
+    maxHeight: SCREEN_HEIGHT * 0.8,
   },
   cancelContainer: {
     paddingVertical: 16,

package/src/components/MaintenanceList.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native';
 import _ from 'lodash';
 import { connect } from 'react-redux';
-import { generalActions } from '../apis';
+import { maintenanceActions } from '../apis';
 import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
 import FilterPopupMenu from './FilterPopupMenu';
@@ -14,6 +14,7 @@ class MaintenanceList extends Component {
     super(props);
 
     this.initialStatus = props.hasPermission ? 'Unassigned|In Progress' : '';
+    this.initialStatusText = props.hasPermission ? 'Incomplete' : '';
 
     this.state = {
       types: [],
@@ -22,7 +23,10 @@ class MaintenanceList extends Component {
       searchText: '',
       showFilterPopup: false,
       selectedStatus: this.initialStatus,
+      selectedStatusText: this.initialStatusText,
       selectedType: '',
+      selectedAssignee: '',
+      selectedAssigneeName: '',
     };
   }
 
@@ -43,8 +47,8 @@ class MaintenanceList extends Component {
       try {
         const { selectedStatus, selectedType } = this.state;
         // console.log('filters', { selectedStatus, selectedType });
-        const res = await generalActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
-        // console.log('refresh', JSON.stringify(res, null, 2));
+        const res = await maintenanceActions.getJobsRecursive(this.props.site, selectedStatus, selectedType);
+        // console.log('refresh', res?.data);
         if (selectedStatus !== this.initialStatus || !_.isEmpty(selectedType)) {
           this.props.jobsAdded(res);
         } else {
@@ -59,7 +63,7 @@ class MaintenanceList extends Component {
   };
 
   refreshTypes = async () => {
-    const { data } = await generalActions.getJobTypes(Helper.getSite(this.props.site));
+    const { data } = await maintenanceActions.getJobTypes(Helper.getSite(this.props.site));
     const types = data.map(t => {
       return { label: t.typeName, value: t.typeName };
     });
@@ -73,7 +77,7 @@ class MaintenanceList extends Component {
 
     this.onLoadingChanged(true, async () => {
       try {
-        const job = await generalActions.getJobByJobId(this.props.site, jobId);
+        const job = await maintenanceActions.getJobByJobId(this.props.site, jobId);
         // console.log('fetchJob', job?.data);
         this.props.jobAdded(job.data);
       } catch (error) {
@@ -88,11 +92,11 @@ class MaintenanceList extends Component {
     if (this.props.options && !_.isEmpty(this.props.options.EmptyText)) {
       return this.props.options.EmptyText;
     }
-    return this.props.userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
+    return this.props.userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
   }
 
   resetDataSource = (source = '') => {
-    const { searchText, selectedStatus, selectedType } = this.state;
+    const { searchText, selectedStatus, selectedType, selectedAssignee } = this.state;
     const { jobs } = this.props;
 
     let filteredList = jobs;
@@ -109,6 +113,7 @@ class MaintenanceList extends Component {
     }
     if (selectedStatus) filteredList = filteredList.filter(j => selectedStatus.includes(j.status));
     if (selectedType) filteredList = filteredList.filter(j => selectedType.includes(j.type));
+    if (selectedAssignee) filteredList = filteredList.filter(j => selectedAssignee.includes(j.AssigneeId));
     if (jobIdMatch) {
       const jobIndex = filteredList.indexOf(jobIdMatch);
       if (jobIndex > -1) {
@@ -143,10 +148,38 @@ class MaintenanceList extends Component {
   };
 
   onSelectFilter = selected => {
-    this.setState({ selectedStatus: selected.status, selectedType: selected.type }, () => {
-      this.resetDataSource();
-      this.onToggleFilter();
-    });
+    this.setState(
+      {
+        selectedStatus: selected.status,
+        selectedStatusText: selected.statusText,
+        selectedType: selected.type,
+        selectedAssignee: selected.assignee,
+        selectedAssigneeName: selected.assigneeName,
+      },
+      () => {
+        this.resetDataSource();
+        this.onToggleFilter();
+      },
+    );
+  };
+
+  getFilterButtonText = () => {
+    const { selectedStatus, selectedStatusText, selectedType, selectedAssignee, selectedAssigneeName } = this.state;
+    const filterTexts = [];
+    if (!_.isEmpty(selectedStatus)) {
+      filterTexts.push(selectedStatusText);
+    }
+
+    if (!_.isEmpty(selectedType)) {
+      filterTexts.push(selectedType);
+    }
+    if (!_.isEmpty(selectedAssignee)) {
+      filterTexts.push(selectedAssigneeName);
+    }
+    if (_.isEmpty(filterTexts)) {
+      return 'Filter';
+    }
+    return `Filtering by ${filterTexts.join(', ')}`;
   };
 
   renderEmptyList() {
@@ -157,7 +190,7 @@ class MaintenanceList extends Component {
     return (
       <TouchableOpacity onPress={this.onToggleFilter}>
         <View style={styles.filterButton}>
-          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>Filter</Text>
+          <Text style={[styles.filterButtonText, { color: this.props.colourBrandingMain }]}>{this.getFilterButtonText()}</Text>
         </View>
       </TouchableOpacity>
     );
@@ -169,7 +202,7 @@ class MaintenanceList extends Component {
     return (
       <View style={styles.searchContainer}>
         <Components.GenericInput
-          placeholder="Search by Job ID or Location"
+          placeholder={`Search by ${values.textEntityName} ID or Address`}
           value={this.state.searchText}
           onChangeText={this.onSearchText}
           onSubmitEditing={this.onSearchSubmit}
@@ -186,7 +219,7 @@ class MaintenanceList extends Component {
     const { ListHeaderComponent } = this.props;
     return (
       <View>
-        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 32 }} />}
+        {ListHeaderComponent ? ListHeaderComponent : <View style={{ height: 8 }} />}
         {this.renderFilterButton()}
         {this.renderSearch()}
       </View>
@@ -211,11 +244,18 @@ class MaintenanceList extends Component {
   }
 
   renderFilterPopup() {
-    const { showFilterPopup, types, selectedStatus, selectedType } = this.state;
+    const { showFilterPopup, types, selectedStatus, selectedType, selectedAssignee } = this.state;
     if (!showFilterPopup) return null;
 
     return (
-      <FilterPopupMenu site={this.props.site} types={types} status={selectedStatus} type={selectedType} onClose={this.onSelectFilter} />
+      <FilterPopupMenu
+        site={this.props.site}
+        types={types}
+        status={selectedStatus}
+        assignee={selectedAssignee}
+        type={selectedType}
+        onClose={this.onSelectFilter}
+      />
     );
   }
 
@@ -266,9 +306,9 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
   },
   filterButton: {
-    position: 'absolute',
-    right: 20,
-    top: -32,
+    paddingBottom: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row-reverse',
   },
   filterButtonText: {
     fontFamily: 'sf-semibold',

package/src/components/MaintenanceListItem.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';
 import _ from 'lodash';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import { connect } from 'react-redux';
 import moment from 'moment';
 // import {
@@ -64,7 +64,7 @@ class MaintenanceListItem extends Component {
     const { job } = this.props;
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const activityTimeText = job.expectedDate ? moment(job.expectedDate).format('D MMMM') : '--';
+    const assigneeText = job.Assignee ? `Assigned to\n${job.Assignee.displayName}` : '';
     const { statusText, statusColor } = getJobStatusProps(job.status);
 
     return (
@@ -73,12 +73,18 @@ class MaintenanceListItem extends Component {
           <View style={styles.jobInnerContainer}>
             <View style={styles.jobTopSection}>
               <View style={styles.jobTopLeft}>
-                {job.jobId ? <Text style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}>{`Job #${job.jobId}`}</Text> : null}
+                {job.jobId ? (
+                  <Text
+                    style={[styles.jobIdText, { color: this.props.colourBrandingMain }]}
+                  >{`${values.textEntityName} #${job.jobId}`}</Text>
+                ) : null}
                 <Text style={styles.jobTitleText}>{job.title}</Text>
                 {job.room ? <Text style={styles.jobLocationText}>{job.room}</Text> : null}
                 <View style={styles.jobTypeSeenContainer}>
                   <View style={[styles.jobTypeContainer, { backgroundColor: Colours.hexToRGBAstring(this.props.colourBrandingMain, 0.2) }]}>
-                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]}>{job.type}</Text>
+                    <Text style={[styles.jobTypeText, { color: this.props.colourBrandingMain }]} numberOfLines={2}>
+                      {job.type}
+                    </Text>
                   </View>
                   {this.renderSeen()}
                 </View>
@@ -93,14 +99,14 @@ class MaintenanceListItem extends Component {
               <Text style={styles.jobCreatedText}>{createdTimeText}</Text>
               <View style={styles.jobActivityContainer}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                  <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
+                  {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
                   <Text style={styles.jobStatusText}>{statusText}</Text>
                 </View>
                 <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
                 <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
-                <Text style={styles.jobStatusDateText}>{activityTimeText}</Text>
+                <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
               </View>
             </View>
           </View>
@@ -152,8 +158,9 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   jobTypeContainer: {
-    height: 20,
-    width: 80,
+    padding: 4,
+    minWidth: 80,
+    maxWidth: 140,
     borderRadius: 4,
     justifyContent: 'center',
   },
@@ -161,6 +168,7 @@ const styles = StyleSheet.create({
     fontFamily: 'sf-semibold',
     fontSize: 12,
     textAlign: 'center',
+    maxWidth: '100%',
   },
   jobSeenContainer: {
     flexDirection: 'row',
@@ -228,7 +236,7 @@ const styles = StyleSheet.create({
   jobStatusContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    justifyContent: 'center',
     width: 105,
     height: 30,
     paddingHorizontal: 8,
@@ -266,7 +274,7 @@ const styles = StyleSheet.create({
   jobStatusDateText: {
     flex: 1,
     textAlign: 'right',
-    fontFamily: 'sf-bold',
+    fontFamily: 'sf-medium',
     fontSize: 14,
     color: Colours.TEXT_DARK,
   },

package/src/components/MaintenanceWidgetItem.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
 import { connect } from 'react-redux';
-import { Icon } from 'react-native-elements';
+import { Icon } from '@rneui/themed';
 import moment from 'moment';
 import _ from 'lodash';
 import { getJobStatusProps, jobStatusOptions } from '../helper';
@@ -44,7 +44,7 @@ class MaintenanceWidgetItem extends Component {
             </View>
             <View style={styles.jobBottomSection}>
               <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
-                <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} />
+                {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
                 <Text style={styles.jobStatusText}>{statusText}</Text>
               </View>
             </View>

package/src/components/StatusSelectorPopup.js

@@ -11,6 +11,7 @@ class StatusSelectorPopup extends PureComponent {
       ? filter.map(status => {
           return {
             name: status,
+            label: getJobStatusLabel(status),
             color: getJobStatusColour(status),
           };
         })
@@ -32,7 +33,7 @@ class StatusSelectorPopup extends PureComponent {
             return (
               <TouchableOpacity key={status.name} onPress={() => onSelect(status.name)}>
                 <View style={[styles.jobStatusContainer, { backgroundColor: status.color }]}>
-                  <Text style={styles.jobStatusText}>{status.name}</Text>
+                  <Text style={styles.jobStatusText}>{status.label}</Text>
                 </View>
               </TouchableOpacity>
             );

package/src/components/WidgetSmall.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Text, View, ScrollView, StyleSheet } from 'react-native';
 import { connect } from 'react-redux';
 import _ from 'lodash';
-import { generalActions } from '../apis';
+import { maintenanceActions } from '../apis';
 import { jobsLoaded } from '../actions';
 import MaintenanceWidgetItem from './MaintenanceWidgetItem';
 import { Services } from '../feature.config';
@@ -34,13 +34,13 @@ class WidgetSmall extends Component {
   getEmptyStateText = () => {
     const { options, userCategory } = this.props;
     if (options && !_.isEmpty(options.EmptyText)) return options.EmptyText;
-    return userCategory === 'staff' ? Config.env.strings.EMPTY_REQUESTS_STAFF : Config.env.strings.EMPTY_REQUESTS_USER;
+    return userCategory === 'staff' ? values.emptyRequestsStaff : values.emptyRequestsUser;
   };
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const res = await generalActions.getJobsRecursive(this.props.site);
+        const res = await maintenanceActions.getJobsRecursive(this.props.site);
         // console.log('WidgetSmall - refresh', res.data);
         this.props.jobsLoaded(res);
       } catch (error) {
@@ -59,7 +59,7 @@ class WidgetSmall extends Component {
   };
 
   onPressAll = () => {
-    Services.navigation.navigate('maintenance', { options: this.props.options });
+    Services.navigation.navigate(values.screenMaintenance, { options: this.props.options });
   };
 
   renderContent() {
@@ -144,7 +144,7 @@ const mapStateToProps = state => {
     jobs: _.orderBy(jobs.jobs, ['createdUnix'], ['desc']),
     site: user.site,
     userCategory: user.category,
-    dataUpdated: notifications.dataUpdated.jobs,
+    dataUpdated: notifications.dataUpdated[values.updateKey],
     strings: state.strings?.config || {},
   };
 };

package/src/feature.config.js

@@ -16,7 +16,7 @@ const FeatureConfig = {
   title: values.textFeatureTitle,
   gridMenu: {
     icon: values.iconGridMenu,
-    viewBox: '0 0 30 30',
+    viewBox: values.gridViewBox,
     navigate: values.screenMaintenance,
   },
   addMenu: {
@@ -26,18 +26,20 @@ const FeatureConfig = {
     navigate: values.screenServiceRequest,
     visibleExps: { type: 'feature', value: values.featureKey },
   },
-  moreMenu: {
-    order: values.orderMoreMenu,
-    title: values.textMoreMenuTitle,
-    navigate: values.screenMaintenance,
-    visibleExps: {
-      type: 'and',
-      exps: [
-        { type: 'notHidden', value: 'maintenanceRequest' },
-        { type: 'notUserType', value: 'KIOSK' },
-      ],
-    },
-  },
+  moreMenu: values.hasMoreOption
+    ? {
+        order: values.orderMoreMenu,
+        title: values.textMoreMenuTitle,
+        navigate: values.screenMaintenance,
+        visibleExps: {
+          type: 'and',
+          exps: [
+            { type: 'notHidden', value: 'maintenanceRequest' },
+            { type: 'notUserType', value: 'KIOSK' },
+          ],
+        },
+      }
+    : undefined,
   kioskAction: {
     order: values.orderKioskAction,
     icon: values.iconKioskAction,

package/src/helper.js

@@ -1,16 +1,20 @@
+import { label } from 'aws-amplify';
 import { Colours } from './core.config';
 
 const jobStatusOptions = [
   {
     name: 'Unassigned',
+    label: 'Open',
     color: Colours.LINEGREY,
   },
   {
     name: 'In Progress',
+    label: 'In Progress',
     color: Colours.COLOUR_TEAL,
   },
   {
     name: 'Completed',
+    label: 'Completed',
     color: Colours.COLOUR_GREEN_LIGHT,
   },
 ];
@@ -20,11 +24,16 @@ const getJobStatusColour = status => {
   return option ? option.color : jobStatusOptions[0].color;
 };
 
+const getJobStatusLabel = status => {
+  const option = jobStatusOptions.find(item => item.name === status);
+  return option ? option.label : jobStatusOptions[0].label;
+};
+
 const getJobStatusProps = status => {
-  const statusText = status || jobStatusOptions[0].name;
+  const statusText = getJobStatusLabel(status) || jobStatusOptions[0].label;
   const statusColor = getJobStatusColour(statusText);
 
   return { statusText, statusColor };
 };
 
-export { jobStatusOptions, getJobStatusColour, getJobStatusProps };
+export { jobStatusOptions, getJobStatusColour, getJobStatusProps, getJobStatusLabel };

package/src/reducers/JobsReducer.js

@@ -3,8 +3,9 @@ import _ from 'lodash';
 import { REHYDRATE } from 'redux-persist';
 import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from '../actions/types';
 import { ActionTypes } from '../core.config';
+import { values } from '../values.config';
 
-const REDUCER_KEY = 'jobs';
+const REDUCER_KEY = values.reducerKey;
 
 const INITIAL_STATE = {
   jobs: [],