lml-main
Version:
This is now a mono repository published into many standalone packages.
176 lines • 9.23 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const moment = require("moment");
const react_redux_1 = require("react-redux");
const lodash_1 = require("lodash");
const cosmo_ui_auth_1 = require("@lml/cosmo-ui-auth");
const constants_1 = require("../../constants");
const selectors_1 = require("../../../couriers/selectors");
const actions_1 = require("../../../couriers/actions");
const incidents_1 = require("../../../jobs/actions/incidents");
const components_1 = require("../../../jobs/components");
const cosmoui_1 = require("cosmoui");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
class CourierActionFormComponent extends cosmoui_1.StylableComponent {
constructor() {
super(...arguments);
this.containerStyles = {
paddingRight: this.padding(600),
paddingLeft: this.padding(600),
boxSizing: 'border-box',
paddingBottom: '0px',
maxWidth: '500px',
};
this.renderDeliveredMessage = () => (React.createElement(cosmoui_1.Text, { success: true, style: { padding: '20px' } }, "A Delivery Stop has been made. This job has now been completed."));
this.renderErrorMessage = () => (React.createElement(cosmoui_1.Text, { error: true, style: { padding: '20px' } }, "There are no associated actions with this job type. Please refresh."));
this.renderAction = (action) => (React.createElement(cosmoui_1.Button, { id: `courier-action-btn_${action.actionType.toLowerCase()}`, key: action.label, style: this.getButtonStyle(action), primary: false, onClick: this.onActionClick(action) },
React.createElement(cosmoui_1.Image, { height: "48px", size: "contain", position: "center", style: { margin: 'auto' }, url: action.image }),
React.createElement("br", null),
action.label));
this.onSubmit = (formData) => {
const { job, selectedCourierAction } = this.props;
const timestamp = this.getMinTimestamp(formData.dateTime.value);
if (!selectedCourierAction) {
return;
}
const data = {
job: { refId: job.refId },
courier: { refId: job.currentAllocation.courier.refId },
type: selectedCourierAction.actionType,
timestamp,
user: this.props.username,
};
if (selectedCourierAction.stopType) {
// get the right stop from the job object
const stop = job.stops.find(s => s.type === selectedCourierAction.stopType);
if (!stop) {
throw new Error(`Job must have stop of type ${selectedCourierAction.stopType}`);
}
data.stop = {
refId: stop.refId,
type: selectedCourierAction.stopType,
};
}
this.props.postCourierAction(data);
if (formData.impact.value && formData.reason.value) {
this.props.submitJobIncidentForm(job.refId, formData.impact.value, formData.reason.value, formData.comment.value);
}
};
this.isSelected = (action) => {
const { selectedCourierAction } = this.props;
return selectedCourierAction && action.label === selectedCourierAction.label;
};
this.onActionClick = (action) => () => {
this.props.setSelectedCourierAction(action);
};
this.formGroupStyles = (width) => ({
width: `${width}px`,
color: this.gray(),
});
// when the acceptance tests do the courier actions in quick succession
// they often have the exact same timestamp because the form is only
// accurate to the nearest minute. This function ensures that the next
// timestamp is always at least 1 millisecond ahead of the previous one
this.getMinTimestamp = (datetime) => {
console.log('GET MIN TIMESTAMP', datetime);
const { lastCourierAction } = this.props;
const momentDate = moment.utc(datetime); // the datetime string is already utc
if (!lastCourierAction)
return momentDate.toISOString();
const lastSavedTimestamp = moment(lastCourierAction.timestamp).valueOf();
const formTimestamp = momentDate.valueOf();
const diff = formTimestamp - lastSavedTimestamp;
return diff > 0
? momentDate.toISOString()
: moment(lastSavedTimestamp + 1).toISOString();
};
}
componentDidMount() {
this.props.fetchJobById(this.props.jobRefId, 'job');
this.props.fetchCourierActionByJobId(this.props.jobRefId);
}
componentDidUpdate(prevProps) {
const { availableActions } = this.props;
if (prevProps.availableActions !== availableActions) {
const firstAction = availableActions ? availableActions[0] : null;
this.props.setSelectedCourierAction(firstAction);
}
}
render() {
const { availableActions, currentType, stopType } = this.props;
if (currentType === 'STOP_MADE' && stopType === 'delivery') {
return this.renderDeliveredMessage();
}
else if (!availableActions) {
return this.renderErrorMessage();
}
return (React.createElement(cosmoui_1.Form, { name: constants_1.COURIER_ACTION_FORM_KEY, onSubmit: this.onSubmit },
React.createElement(cosmoui_1.Column, { style: this.containerStyles },
React.createElement(cosmoui_1.Row, { align: "center", justify: "center", style: { paddingBottom: '20px' }, fullWidth: true }, availableActions.map((a) => this.renderAction(a))),
React.createElement(cosmoui_1.FormGroup, { label: "Time:", style: this.formGroupStyles(210) },
React.createElement(cosmoui_1.DateTimeInput, { saveAsUtc: true, name: "dateTime", id: "job-form-status-change-datetime-field", placeholder: "placeholder text" })),
React.createElement(components_1.JobIncidentForm, { required: false, defaultReasonCode: "9C" })),
React.createElement(cosmoui_1.ButtonBar, null,
React.createElement(cosmoui_1.Button, { id: `job-form-status-change-confirm`, disabled: this.props.selectedCourierAction === null, type: "submit" }, "YES"),
React.createElement(cosmoui_1.Button, { id: `job-form-status-change-cancel`, onClick: this.props.onCancel }, "NO"))));
}
getButtonStyle(action) {
const { submitted, selectedCourierAction } = this.props;
const styles = {
minWidth: '130px',
height: '100px',
marginRight: this.margin(100),
marginRLeft: this.margin(100),
border: `solid 1px ${this.success()}`,
};
if (submitted && selectedCourierAction === null) {
styles.backgroundColor = 'white';
styles.border = `solid 1px ${this.error()}`;
}
else if (!this.isSelected(action)) {
styles.backgroundColor = 'white';
styles.border = `solid 1px ${this.gray(200)}`,
styles.color = this.gray(500);
}
return styles;
}
}
exports.getAvailableCourierActions = (currentCourierAction, currentType, stopType) => {
const options = constants_1.COURIER_ACTION_FLOW[currentType];
// something went badly wrong
if (!options) {
console.warn(`Unsupported courier action type: ${currentType}`);
return null;
}
// if it's an array then that means we already have the answer
if (Array.isArray(options))
return options;
return lodash_1.get(options, stopType, null);
};
const mapStateToProps = (state, ownProps) => {
const courierActions = cosmo_redux_api_1.getCourierActionByJobId(state, ownProps.jobRefId);
const lastCourierAction = lodash_1.last(courierActions) || null;
const currentType = lodash_1.get(lastCourierAction, 'type', 'ALLOCATED');
const stopType = lodash_1.get(lastCourierAction, 'stop.type', null);
const availableActions = exports.getAvailableCourierActions(lastCourierAction, currentType, stopType);
return {
username: cosmo_ui_auth_1.getUsername(state),
job: cosmo_redux_api_1.getJobById(state, ownProps.jobRefId),
lastCourierAction,
availableActions,
currentType,
stopType,
selectedCourierAction: selectors_1.getSelectedCourierAction(state),
submitted: cosmoui_1.isFormFieldSubmitted(state, constants_1.COURIER_ACTION_FORM_KEY, 'code'),
};
};
const mapActionsToProps = {
postCourierAction: cosmo_redux_api_1.postCourierAction,
submitJobIncidentForm: incidents_1.submitJobIncidentForm,
setSelectedCourierAction: actions_1.setSelectedCourierAction,
fetchJobById: cosmo_redux_api_1.fetchJobById,
fetchCourierActionByJobId: cosmo_redux_api_1.fetchCourierActionByJobId,
};
exports.CourierActionForm = react_redux_1.connect(mapStateToProps, mapActionsToProps)(CourierActionFormComponent);
//# sourceMappingURL=courier-action-form.js.map