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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-maintenance-app-forms",
-  "version": "6.0.12-beta.0",
+  "version": "7.0.0-beta.0",
   "description": "Extension package to enable maintenance on Pluss Communities Platform",
   "main": "dist/module/index.js",
   "module": "dist/module/index.js",
@@ -10,7 +10,7 @@
     "src/"
   ],
   "scripts": {
-    "build": "npm i --legacy-peer-deps && bob build",
+    "build": "npm i && bob build",
     "betapatch": "npm version prepatch --preid=beta",
     "patch": "npm version patch",
     "betaupload": "npm run build && npm publish --access public --tag beta",
@@ -28,15 +28,16 @@
   "license": "ISC",
   "dependencies": {},
   "peerDependencies": {
-    "@plusscommunities/pluss-core-app": "^6.1.6",
+    "@plusscommunities/pluss-core-app": "7.0.0-beta.0",
     "axios": "^1.6.8",
     "lodash": "^4.17.4",
     "moment": "^2.30.1",
-    "react": "18.2.0",
-    "react-native": "0.73.6",
-    "react-native-elements": "^0.17.0",
+    "react": "18.3.1",
+    "react-native": "0.76.9",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
     "react-native-iphone-x-helper": "^1.3.1",
-    "react-native-webview": "13.6.4",
+    "react-native-webview": "13.12.5",
     "react-redux": "^7.2.6",
     "redux-persist": "^6.0.0"
   },
@@ -50,4 +51,4 @@
       "module"
     ]
   }
-}
+}

package/src/actions/JobActions.js

@@ -1,7 +1,4 @@
-import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED, JOBS_STATUSES_LOADED, JOBS_HIDE_SEEN, JOB_FILTER_LOADED } from './types';
-import { stringActions } from '../apis';
-import { values } from '../values.config';
-import { jobStatusOptions } from '../helper';
+import { JOBS_LOADED, JOB_ADDED, JOBS_ADDED } from './types';
 
 export const jobsLoaded = jobs => {
   return {
@@ -23,52 +20,3 @@ export const jobsAdded = jobs => {
     payload: jobs,
   };
 };
-
-export const jobStatusesUpdate = (site, callback = null) => {
-  return dispatch => {
-    stringActions
-      .getString(site, values.stringConfigJobStatus)
-      .then(res => {
-        dispatch({
-          type: JOBS_STATUSES_LOADED,
-          payload: res.data,
-        });
-        if (callback) callback(res.data);
-      })
-      .catch(() => {
-        dispatch({
-          type: JOBS_STATUSES_LOADED,
-          payload: jobStatusOptions,
-        });
-        if (callback) callback(jobStatusOptions);
-      });
-  };
-};
-
-export const jobHideSeenUpdate = (site, callback = null) => {
-  return (dispatch) => {
-    stringActions
-      .getString(site, values.stringConfigHideSeen)
-      .then((res) => {
-        dispatch({
-          type: JOBS_HIDE_SEEN,
-          payload: res.data,
-        });
-        if (callback) callback(res.data);
-      })
-      .catch((_error) => {
-        dispatch({
-          type: JOBS_HIDE_SEEN,
-          payload: false,
-        });
-        if (callback) callback(false);
-      });
-  };
-};
-
-export const jobsFilterLoaded = filters => {
-  return {
-    type: JOB_FILTER_LOADED,
-    payload: filters,
-  };
-};

package/src/actions/types.js

@@ -3,7 +3,3 @@ import { values } from '../values.config';
 export const JOBS_LOADED = values.actionJobsLoaded;
 export const JOB_ADDED = values.actionJobAdded;
 export const JOBS_ADDED = values.actionJobsAdded;
-export const JOBS_STATUSES_LOADED = values.actionJobsStatusesLoaded;
-export const JOBS_HIDE_SEEN = values.actionJobsHideSeen;
-export const JOB_FILTER_LOADED = values.actionJobFilterLoaded;
-

package/src/apis/index.js

@@ -1,5 +1 @@
-import { Apis } from '../core.config';
-
-export const stringActions = Apis.stringActions;
-
 export * from './maintenanceActions';

package/src/apis/maintenanceActions.js

@@ -23,14 +23,11 @@ export const maintenanceActions = {
       data: { site, status, type },
     });
   },
-  getJobs2: (site, status, priority, type, lastKey) => {
+  getJobs2: (site, status, type, lastKey) => {
     const query = { site };
     if (status) {
       query.status = status;
     }
-    if (priority) {
-      query.priority = priority;
-    }
     if (type) {
       query.type = type;
     }
@@ -42,14 +39,14 @@ export const maintenanceActions = {
       url: Helper.getUrl(values.serviceKey, 'get/requests', query),
     });
   },
-  getJobsRecursive: (site, status, priority, type, lastKey, jobs = []) => {
+  getJobsRecursive: (site, status, type, lastKey, jobs = []) => {
     return new Promise(resolve => {
-      maintenanceActions.getJobs2(site, status, priority, 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(maintenanceActions.getJobsRecursive(site, status, priority, type, jobRes.data.LastKey, newJobs));
+        return resolve(maintenanceActions.getJobsRecursive(site, status, type, jobRes.data.LastKey, newJobs));
       });
     });
   },
@@ -103,13 +100,6 @@ export const maintenanceActions = {
       data: { id, status },
     });
   },
-  editJobPriority: (id, priority) => {
-    return Session.authedFunction({
-      method: 'POST',
-      url: Helper.getUrl(values.serviceKey, 'update/priority'),
-      data: { id, priority },
-    });
-  },
   assignJob: (jobId, userId) => {
     return Session.authedFunction({
       method: 'POST',
@@ -126,7 +116,7 @@ export const maintenanceActions = {
       url: Helper.getUrl(values.serviceKey, 'get/assignees', { site }),
     });
   },
-  addNote: (jobId, note, attachments, images) => {
+  addNote: (jobId, note, attachments) => {
     return Session.authedFunction({
       method: 'POST',
       url: Helper.getUrl(values.serviceKey, 'requests/note'),
@@ -134,12 +124,11 @@ export const maintenanceActions = {
         id: jobId,
         note,
         attachments,
-        images,
         action: 'AddNote',
       },
     });
   },
-  editNote: (jobId, noteId, note, attachments, images) => {
+  editNote: (jobId, noteId, note, attachments) => {
     return Session.authedFunction({
       method: 'POST',
       url: Helper.getUrl(values.serviceKey, 'requests/note'),
@@ -147,7 +136,6 @@ export const maintenanceActions = {
         id: jobId,
         note,
         attachments,
-        images,
         noteId,
         action: 'EditNote',
       },

package/src/components/FilterPopupMenu.js

@@ -4,8 +4,6 @@ import { connect } from 'react-redux';
 import _ from 'lodash';
 import { maintenanceActions } from '../apis';
 import { Colours, Helper } from '../core.config';
-import { getJobStatusOptions, getIncompleteJobStatuses, jobPriorityOptions } from '../helper';
-import { values } from '../values.config';
 
 const SCREEN_HEIGHT = Dimensions.get('window').height;
 
@@ -16,20 +14,31 @@ class FilterPopupMenu extends Component {
     this.state = {
       types: props.types || [],
       selectedStatus: props.status || '',
-      selectedPriority: props.priority || '',
       selectedType: props.type || '',
       selectedAssignee: props.assignee || '',
       assignees: [],
     };
-    this.priorityOptions = [
+    this.statusOptions = [
       {
         label: 'All',
         value: '',
       },
-      ...jobPriorityOptions.map(p => ({
-        label: p.label,
-        value: p.label,
-      }))
+      {
+        label: 'Incomplete',
+        value: 'Unassigned|In Progress',
+      },
+      {
+        label: 'Open',
+        value: 'Unassigned',
+      },
+      {
+        label: 'In Progress',
+        value: 'In Progress',
+      },
+      {
+        label: 'Completed',
+        value: 'Completed',
+      },
     ];
   }
 
@@ -44,26 +53,6 @@ class FilterPopupMenu extends Component {
     }
   }
 
-  getStatusOptions = () => {
-    const statusOptions = getJobStatusOptions(this.props);
-    const options = [
-      {
-        label: 'All',
-        value: '',
-      },
-      {
-        label: 'Incomplete',
-        value: `Unassigned|${getIncompleteJobStatuses(this.props).map(s => s.text).join('|')}`,
-      },
-      ...statusOptions.map(s => ({
-        label: s.text,
-        value: s.text,
-      })),
-    ];
-    // console.log('getStatusOptions', options);
-    return options;
-  }
-
   getAssignees = async () => {
     try {
       const res = await maintenanceActions.getAssignees(this.props.site);
@@ -104,12 +93,11 @@ class FilterPopupMenu extends Component {
 
   onDone = () => {
     const { onClose } = this.props;
-    const { selectedStatus, selectedPriority, selectedType, selectedAssignee } = this.state;
+    const { selectedStatus, selectedType, selectedAssignee } = this.state;
     if (onClose)
       onClose({
         status: selectedStatus,
-        statusText: this.getStatusOptions().find(o => o.value === selectedStatus)?.label,
-        priority: selectedPriority,
+        statusText: this.statusOptions.find(o => o.value === selectedStatus)?.label,
         type: selectedType,
         assignee: selectedAssignee,
         assigneeName: this.state.assignees.find(a => a.value === selectedAssignee)?.label,
@@ -160,20 +148,15 @@ class FilterPopupMenu extends Component {
   }
 
   render() {
-    // console.log('FilterPopupMenu', JSON.stringify({ category: this.props.user.category, permissions: this.props.user.permissions }, null, 2))
-    const isStaff = this.props.user.category === 'staff'
-    const canFilterAssignee = !_.includes(this.props.user.permissions, values.permissionMaintenanceAssignment);
-
     return (
       <Modal visible transparent animationType="slide" onRequestClose={this.onDone}>
         <View style={styles.container}>
           <View style={styles.menu}>
             {this.renderTitle()}
             <ScrollView style={styles.optionContent}>
-              {this.renderOptions('Status', this.getStatusOptions(), 'selectedStatus')}
-              {isStaff ? this.renderOptions('Priority', this.priorityOptions, 'selectedPriority') : null}
+              {this.renderOptions('Status', this.statusOptions, 'selectedStatus')}
               {this.renderOptions('Type', this.state.types, 'selectedType')}
-              {canFilterAssignee ? this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee') : null}
+              {this.renderOptions('Assigned To', this.state.assignees, 'selectedAssignee')}
             </ScrollView>
             {this.renderCancel()}
           </View>
@@ -265,10 +248,8 @@ const mapStateToProps = state => {
   const { user } = state;
 
   return {
-    user,
     site: user.site,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    statusTypes: state[values.reducerKey].jobstatuses,
   };
 };
 

package/src/components/MaintenanceList.js

@@ -3,45 +3,53 @@ import { View, StyleSheet, FlatList, TouchableOpacity, Text } from 'react-native
 import _ from 'lodash';
 import { connect } from 'react-redux';
 import { maintenanceActions } from '../apis';
-import { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded } from '../actions';
+import { jobsLoaded, jobAdded, jobsAdded } from '../actions';
 import MaintenanceListItem from '../components/MaintenanceListItem';
 import FilterPopupMenu from './FilterPopupMenu';
-import { Components, Colours, Helper } from '../core.config';
+import { Components, Colours, Config, Helper } from '../core.config';
 import { values } from '../values.config';
 
 class MaintenanceList extends Component {
   constructor(props) {
     super(props);
 
+    this.initialStatus = props.hasPermission ? 'Unassigned|In Progress' : '';
+    this.initialStatusText = props.hasPermission ? 'Incomplete' : '';
+
     this.state = {
       types: [],
       filteredList: props.jobs,
       loading: false,
       searchText: '',
       showFilterPopup: false,
+      selectedStatus: this.initialStatus,
+      selectedStatusText: this.initialStatusText,
+      selectedType: '',
+      selectedAssignee: '',
+      selectedAssigneeName: '',
     };
   }
 
   componentDidMount() {
-    this.props.jobStatusesUpdate(this.props.site);
-    this.props.jobHideSeenUpdate(this.props.site);
     this.refresh();
     this.refreshTypes();
+
     this.resetDataSource();
   }
 
   componentDidUpdate(prevProps) {
     if (!prevProps.dataUpdated && this.props.dataUpdated) this.refresh();
-    if (!_.isEqual(prevProps.jobs, this.props.jobs) || !_.isEqual(prevProps.jobfilters, this.props.jobfilters)) this.resetDataSource();
+    if (!_.isEqual(prevProps.jobs, this.props.jobs)) this.resetDataSource();
   }
 
   refresh = () => {
     this.onLoadingChanged(true, async () => {
       try {
-        const { jobfilters } = this.props;
-        const res = await maintenanceActions.getJobsRecursive(this.props.site, jobfilters.status, jobfilters.priority, jobfilters.type);
-        // console.log('refresh', res ? JSON.stringify(res[0], null, 2) : null);
-        if (!_.isEmpty(jobfilters.status) || !_.isEmpty(jobfilters.priority) || !_.isEmpty(jobfilters.type)) {
+        const { selectedStatus, selectedType } = this.state;
+        // console.log('filters', { selectedStatus, selectedType });
+        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 {
           this.props.jobsLoaded(res);
@@ -88,8 +96,7 @@ class MaintenanceList extends Component {
   }
 
   resetDataSource = (source = '') => {
-    const { jobfilters } = this.props;
-    const { searchText } = this.state;
+    const { searchText, selectedStatus, selectedType, selectedAssignee } = this.state;
     const { jobs } = this.props;
 
     let filteredList = jobs;
@@ -104,10 +111,9 @@ class MaintenanceList extends Component {
       });
       if (!jobIdMatch) this.fetchJob(searchText);
     }
-    if (jobfilters.status) filteredList = filteredList.filter(j => jobfilters.status.includes(j.status));
-    if (jobfilters.priority) filteredList = filteredList.filter(j => jobfilters.priority.includes(j.priority));
-    if (jobfilters.type) filteredList = filteredList.filter(j => jobfilters.type.includes(j.type));
-    if (jobfilters.assignee) filteredList = filteredList.filter(j => jobfilters.assignee.includes(j.AssigneeId));
+    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) {
@@ -142,24 +148,33 @@ class MaintenanceList extends Component {
   };
 
   onSelectFilter = selected => {
-    this.props.jobsFilterLoaded(selected);
-    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 { jobfilters } = this.props;
+    const { selectedStatus, selectedStatusText, selectedType, selectedAssignee, selectedAssigneeName } = this.state;
     const filterTexts = [];
-    if (!_.isEmpty(jobfilters.status)) {
-      filterTexts.push(jobfilters.statusText);
+    if (!_.isEmpty(selectedStatus)) {
+      filterTexts.push(selectedStatusText);
     }
-    if (!_.isEmpty(jobfilters.priority)) {
-      filterTexts.push(jobfilters.priority);
-    }
-    if (!_.isEmpty(jobfilters.type)) {
-      filterTexts.push(jobfilters.type);
+
+    if (!_.isEmpty(selectedType)) {
+      filterTexts.push(selectedType);
     }
-    if (!_.isEmpty(jobfilters.assignee)) {
-      filterTexts.push(jobfilters.assigneeName);
+    if (!_.isEmpty(selectedAssignee)) {
+      filterTexts.push(selectedAssigneeName);
     }
     if (_.isEmpty(filterTexts)) {
       return 'Filter';
@@ -229,18 +244,16 @@ class MaintenanceList extends Component {
   }
 
   renderFilterPopup() {
-    const { jobfilters } = this.props;
-    const { showFilterPopup, types } = this.state;
+    const { showFilterPopup, types, selectedStatus, selectedType, selectedAssignee } = this.state;
     if (!showFilterPopup) return null;
 
     return (
       <FilterPopupMenu
         site={this.props.site}
         types={types}
-        status={jobfilters.status}
-        priority={jobfilters.priority}
-        assignee={jobfilters.assignee}
-        type={jobfilters.type}
+        status={selectedStatus}
+        assignee={selectedAssignee}
+        type={selectedType}
         onClose={this.onSelectFilter}
       />
     );
@@ -316,11 +329,7 @@ const mapStateToProps = state => {
     userCategory: user.category,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
     dataUpdated: notifications.dataUpdated[values.updateKey],
-    statusTypes: state[values.reducerKey].jobstatuses,
-    jobfilters: state[values.reducerKey].jobfilters,
   };
 };
 
-export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded, jobStatusesUpdate, jobHideSeenUpdate, jobsFilterLoaded }, null, { forwardRef: true })(
-  MaintenanceList,
-);
+export default connect(mapStateToProps, { jobsLoaded, jobAdded, jobsAdded }, null, { forwardRef: true })(MaintenanceList);

package/src/components/MaintenanceListItem.js

@@ -1,10 +1,22 @@
 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 { getJobStatus, getJobPriority } from '../helper';
+// import {
+//   getShadowStyle,
+//   LINEGREY,
+//   TEXT_DARK,
+//   TEXT_LIGHT,
+//   COLOUR_GREEN,
+//   getMainBrandingColourFromState,
+//   hexToRGBAstring,
+//   getJobStatusProps,
+//   jobStatusOptions,
+// } from '../../js';
+// import NavigationService from '../../js/NavigationService';
+import { getJobStatusProps, jobStatusOptions } from '../helper';
 import { Services } from '../feature.config';
 import { Helper, Colours } from '../core.config';
 import { values } from '../values.config';
@@ -35,9 +47,9 @@ class MaintenanceListItem extends Component {
   }
 
   renderSeen() {
-    const { job, hideSeen } = this.props;
-    const showSeen = !job.status || job.status === getJobStatus(null, this.props).text;
-    if (hideSeen || !showSeen || !job.seen) {
+    const { job } = this.props;
+    const showSeen = !job.status || job.status === jobStatusOptions[0].name;
+    if (!showSeen || !job.seen) {
       return null;
     }
     return (
@@ -53,9 +65,7 @@ class MaintenanceListItem extends Component {
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
     const assigneeText = job.Assignee ? `Assigned to\n${job.Assignee.displayName}` : '';
-    const status = getJobStatus(job.status, this.props);
-    const priority = getJobPriority(job.priority);
-    const isStaff = this.props.user.category === 'staff'
+    const { statusText, statusColor } = getJobStatusProps(job.status);
 
     return (
       <TouchableOpacity onPress={this.onPressJob}>
@@ -88,21 +98,16 @@ class MaintenanceListItem extends Component {
               {/* {this.renderDescription()} */}
               <Text style={styles.jobCreatedText}>{createdTimeText}</Text>
               <View style={styles.jobActivityContainer}>
-                <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
+                <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
                   {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                  <Text style={styles.jobStatusText}>{status?.text}</Text>
+                  <Text style={styles.jobStatusText}>{statusText}</Text>
                 </View>
-                <View style={[styles.jobStatusLine, { borderColor: status?.color }]}>
+                <View style={[styles.jobStatusLine, { borderColor: statusColor }]}>
                   <View style={styles.jobStatusLineMask} />
                 </View>
-                <View style={[styles.jobStatusCircle, { backgroundColor: status?.color }]} />
+                <View style={[styles.jobStatusCircle, { backgroundColor: statusColor }]} />
                 <Text style={styles.jobStatusDateText}>{assigneeText}</Text>
               </View>
-              {isStaff && (
-                <View style={[styles.jobPriorityContainer, { backgroundColor: priority.color }]}>
-                  <Text style={styles.jobPriorityText}>{priority.label}</Text>
-                </View>
-              )}
             </View>
           </View>
         </View>
@@ -273,30 +278,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     color: Colours.TEXT_DARK,
   },
-  jobPriorityContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 105,
-    height: 24,
-    paddingHorizontal: 8,
-    borderRadius: 4,
-    marginTop: 8,
-  },
-  jobPriorityText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-semibold',
-    fontSize: 13,
-  },
 });
 
 const mapStateToProps = state => {
   return {
-    user: state.user,
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    statusTypes: state[values.reducerKey].jobstatuses,
-    hideSeen: state[values.reducerKey].hideSeen,
   };
 };
 

package/src/components/MaintenanceWidgetItem.js

@@ -1,10 +1,10 @@
 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 { getJobStatus } from '../helper';
+import { getJobStatusProps, jobStatusOptions } from '../helper';
 import { Services } from '../feature.config';
 import { Colours, Helper } from '../core.config';
 import { values } from '../values.config';
@@ -15,12 +15,12 @@ class MaintenanceWidgetItem extends Component {
   };
 
   render() {
-    const { job, hideSeen } = this.props;
+    const { job } = this.props;
     const createdTime = moment(job.createdUnix);
     const createdTimeText = `${createdTime.format('ddd, D MMMM')} • ${createdTime.format('h:mma')}`;
-    const status = getJobStatus(job.status, this.props);
+    const { statusText, statusColor } = getJobStatusProps(job.status);
     const seenText = (() => {
-      if (!job.status || job.status === getJobStatus(null, this.props).text) {
+      if (!job.status || job.status === jobStatusOptions[0].name) {
         return job.seen ? 'Seen' : 'Unseen';
       }
       return '';
@@ -35,19 +35,17 @@ class MaintenanceWidgetItem extends Component {
                 {job.title}
               </Text>
               <Text style={styles.jobCreatedTimeText}>{createdTimeText}</Text>
-              {!hideSeen ? (
-                <View style={styles.jobSeenContainer}>
-                  {job.seen && !_.isEmpty(seenText) && (
-                    <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
-                  )}
-                  <Text style={[styles.jobSeenText, job.seen && { color: this.props.colourBrandingMain }]}>{seenText}</Text>
-                </View>
-              ) : null}
+              <View style={styles.jobSeenContainer}>
+                {job.seen && !_.isEmpty(seenText) && (
+                  <Icon name="check" type="font-awesome" iconStyle={[styles.jobSeenIcon, { color: this.props.colourBrandingMain }]} />
+                )}
+                <Text style={[styles.jobSeenText, job.seen && { color: this.props.colourBrandingMain }]}>{seenText}</Text>
+              </View>
             </View>
             <View style={styles.jobBottomSection}>
-              <View style={[styles.jobStatusContainer, { backgroundColor: status?.color }]}>
+              <View style={[styles.jobStatusContainer, { backgroundColor: statusColor }]}>
                 {/* <Icon name="wrench" type="font-awesome" iconStyle={styles.jobStatusIcon} /> */}
-                <Text style={styles.jobStatusText}>{status?.text}</Text>
+                <Text style={styles.jobStatusText}>{statusText}</Text>
               </View>
             </View>
           </View>
@@ -128,8 +126,6 @@ const styles = StyleSheet.create({
 const mapStateToProps = state => {
   return {
     colourBrandingMain: Colours.getMainBrandingColourFromState(state),
-    statusTypes: state[values.reducerKey].jobstatuses,
-    hideSeen: state[values.reducerKey].hideSeen,
   };
 };