lml-main
Version:
This is now a mono repository published into many standalone packages.
76 lines • 4.76 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const react_redux_1 = require("react-redux");
const lodash_1 = require("lodash");
const cosmo_redux_api_1 = require("@lml/cosmo-redux-api");
const constants_1 = require("../../../couriers/constants");
const cosmoui_1 = require("cosmoui");
const courier_vehicle_icon_1 = require("../../../couriers/components/card/courier-vehicle-icon");
const selectors_1 = require("../../../frequencies/selectors");
const styles = require('./courier-change-frequency.scss');
const FREQUENCY_FIELD = 'frequencyField';
class CourierChangeFrequencyFormComponent extends React.Component {
constructor() {
super(...arguments);
this.onSubmit = (formData) => {
const { patchCourierLabel, courier } = this.props;
const val = formData[FREQUENCY_FIELD].value;
patchCourierLabel(courier, val.toUpperCase());
};
}
render() {
const { courier, patchCourierLabel, validate, onCancel } = this.props;
return (React.createElement(cosmoui_1.Form, { name: constants_1.CHANGE_COURIER_FREQUENCY_FORM_KEY, onSubmit: this.onSubmit },
React.createElement(cosmoui_1.Column, { className: styles.container },
React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.section },
React.createElement("span", { className: styles.mainTitle }, "Change Frequency")),
React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.section },
React.createElement(cosmoui_1.Column, { fullWidth: true },
React.createElement(cosmoui_1.Row, { className: styles.detailsSection },
React.createElement("span", { className: styles.courierDetails },
React.createElement("b", null, lodash_1.get(courier, 'assignment.callsign')),
" - ",
courier.firstName,
" ",
courier.lastName)),
React.createElement(cosmoui_1.Row, { className: styles.detailsSection },
React.createElement(cosmoui_1.Icon, { icon: "PhoneMessage", size: 12, className: styles.icon }),
' ',
React.createElement("span", { className: styles.courierDetails }, lodash_1.get(courier, 'metadata.contacts.mobile')))),
React.createElement(courier_vehicle_icon_1.CourierVehicleIcon, { courier: courier })),
React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.section },
React.createElement(cosmoui_1.Column, { className: styles.greyBlock },
React.createElement(cosmoui_1.Row, { className: styles.frequencyHeader }, "Current Frequency"),
React.createElement(cosmoui_1.Row, { className: styles.frequencyMain }, courier.label.label)),
React.createElement(cosmoui_1.Column, { className: styles.block },
React.createElement(cosmoui_1.Row, { className: styles.frequencyHeader }, "New Frequency"),
React.createElement(cosmoui_1.Row, { className: styles.frequencyMain },
React.createElement(cosmoui_1.TextInput, { name: FREQUENCY_FIELD, className: styles.input, validate: validate, autofocus: true })))),
React.createElement("div", { className: styles.setTo }, "to")),
React.createElement(cosmoui_1.ButtonBar, { className: styles.buttonBar },
React.createElement(cosmoui_1.Button, { id: "courier-change-frequency-update", type: "submit" }, "Update"),
React.createElement(cosmoui_1.Button, { id: "courier-change-frequency-cancel", onClick: onCancel }, "Cancel"))));
}
}
const validateFrequency = (state) => (frequency) => {
if (!frequency)
return ['* required'];
if (frequency.length < 2) {
return ['* Min 2 chars'];
}
const selectedFrequency = selectors_1.getFrequencyByLabel(state, frequency.toUpperCase());
// console.log('SELECTED FREQ', selectedFrequency)
if (!selectedFrequency) {
return ['* Not a valid frequency'];
}
return [];
};
const mapStateToProps = (state, ownProps) => ({
validate: validateFrequency(state),
});
const mapActionsToProps = {
patchCourierLabel: cosmo_redux_api_1.patchCourierLabel,
};
exports.CourierChangeFrequencyForm = react_redux_1.connect(mapStateToProps, mapActionsToProps)(CourierChangeFrequencyFormComponent);
//# sourceMappingURL=courier-change-frequency-form.js.map