lml-main/packages/core-ui/dist/couriers/components/details/courier-details.js

This is now a mono repository published into many standalone packages.

"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 selectors_1 = require("../../../couriers/selectors");
const cosmoui_1 = require("cosmoui");
const constants_1 = require("../../../couriers/constants");
const components_1 = require("../../../common/components");
const _1 = require("./");
const job_counts_1 = require("../job-counts");
const courier_citytrak_status_1 = require("./courier-citytrak-status");
const actions_1 = require("../../actions");
const styles = require('./courier-details.scss');
class CourierDetailsComponent extends React.Component {
    constructor() {
        super(...arguments);
        this.renderHeader = () => {
            const { courier } = this.props;
            return (React.createElement(cosmoui_1.Row, { className: styles.header, align: "flex-start", fullWidth: true },
                React.createElement(cosmoui_1.Row, { className: styles.title },
                    React.createElement(cosmoui_1.Column, null,
                        React.createElement(cosmoui_1.Header, { size: "lg", marginless: true },
                            React.createElement("span", { id: "courier-details-callsign" }, courier.assignment.callsign),
                            React.createElement("span", null,
                                " - ",
                                courier.firstName,
                                " ",
                                courier.lastName)),
                        React.createElement(job_counts_1.CourierJobCounts, { refId: courier.refId })),
                    React.createElement(cosmoui_1.Divider, { vertical: true, className: styles.divider }),
                    React.createElement(components_1.AvatarIcon, { id: "courier-details-label", avatarName: courier.label.label }),
                    React.createElement(courier_citytrak_status_1.CourierCitytrakStatus, { courier: courier, id: "courier-citytrak-status" })),
                React.createElement(cosmoui_1.Row, { className: styles.actions },
                    React.createElement(cosmoui_1.Icon, { icon: "FrequencyLight", id: "courier-details-action-change-frequency", fill: "primary", size: 24, tooltip: "Change courier frequency", onClick: this.showCourierChangeFrequencyModal, className: styles.clickable }))));
        };
        this.renderInfo = () => {
            const { courier } = this.props;
            const paperStyle = { backgroundColor: 'white', height: '150px', padding: '10px' };
            return (React.createElement(cosmoui_1.Row, { fullWidth: true, align: "flex-start", className: styles.cards },
                React.createElement(cosmoui_1.Paper, { style: paperStyle, fullWidth: true, fullHeight: true }, this.renderCourierDetails()),
                React.createElement(cosmoui_1.Paper, { style: Object.assign({}, paperStyle, { margin: '0 20px' }), fullWidth: true, fullHeight: true }, this.renderCourierVehicle()),
                React.createElement(cosmoui_1.Paper, { style: paperStyle, fullWidth: true, fullHeight: true }, this.renderCourierEarnings())));
        };
        this.showCourierChangeFrequencyModal = () => this.props.showCourierChangeFrequencyModal(this.props.courier);
        this.renderCourierEarnings = () => {
            const { earnings } = this.props;
            return (React.createElement(cosmoui_1.Column, { align: "flex-start", id: "courier-earnings-details" },
                React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.cardHeader },
                    React.createElement(cosmoui_1.Column, null,
                        React.createElement(cosmoui_1.Text, { color: "darkgray", marginless: true, size: "xs" }, "Earning")),
                    React.createElement(cosmoui_1.Column, { float: "right" },
                        React.createElement(cosmoui_1.Text, { bold: true, success: true, marginless: true, size: "sm" },
                            "\u00A3 ",
                            earnings)))));
        };
    }
    render() {
        const { courier } = this.props;
        if (!courier)
            return null;
        return (React.createElement(cosmoui_1.Column, { className: styles.container, align: "flex-start", fullWidth: true },
            this.renderHeader(),
            this.renderInfo(),
            React.createElement(_1.CourierMap, { refId: courier.refId }),
            React.createElement(_1.CourierJobs, { courierRefId: courier.refId })));
    }
    renderCourierDetails() {
        const { courier } = this.props;
        return (React.createElement(cosmoui_1.Column, { align: "flex-start", style: { overflowY: 'auto' }, id: "courier-address-details" },
            React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.cardHeader },
                React.createElement(cosmoui_1.Column, null,
                    React.createElement(cosmoui_1.Text, { color: "darkgray", marginless: true, size: "xs" }, "Details")),
                React.createElement(cosmoui_1.Column, { float: "right" },
                    React.createElement("strong", null, this.renderCourierAttributes()))),
            React.createElement(cosmoui_1.Text, { bold: true, size: "lg", marginless: true }, courier.refId.split(':').pop()),
            React.createElement(cosmoui_1.Column, { className: styles.cardContent },
                this.renderCourierStreets(courier),
                React.createElement("span", null,
                    lodash_1.get(courier, 'metadata.contacts.addresses[0].town', ''),
                    React.createElement("span", null, " - "),
                    lodash_1.get(courier, 'metadata.contacts.addresses[0].postcode', ''))),
            React.createElement(cosmoui_1.Row, { className: styles.phone },
                React.createElement(cosmoui_1.Icon, { icon: "PhoneMessage", size: 14 }),
                React.createElement("span", { id: "courier-details-mobile" }, lodash_1.get(courier, 'metadata.contacts.mobile', '')))));
    }
    renderCourierVehicle() {
        const { courier, courier: { vehicleType, }, } = this.props;
        return (React.createElement(cosmoui_1.Column, { align: "flex-start", id: "courier-vehicle-details" },
            React.createElement(cosmoui_1.Row, { fullWidth: true, className: styles.cardHeader },
                React.createElement(cosmoui_1.Column, null,
                    React.createElement(cosmoui_1.Text, { color: "darkgray", marginless: true, size: "xs" }, "Vehicle")),
                React.createElement(cosmoui_1.Column, { float: "right" },
                    React.createElement(cosmoui_1.Icon, { icon: constants_1.VehicleFilterIconMetadata[vehicleType || "motorbike"].icon, size: 22 }))),
            React.createElement(cosmoui_1.Text, { bold: true, size: "lg", marginless: true }, lodash_1.get(courier, 'metadata.vehicle.regoNumber', '')),
            React.createElement(cosmoui_1.Row, { className: styles.cardContent },
                React.createElement(cosmoui_1.Text, { size: "xs" }, lodash_1.get(courier, 'metadata.vehicle.make', '')))));
    }
    renderCourierAttributes() {
        const { courier } = this.props;
        return React.createElement(cosmoui_1.Column, null, Object.keys(courier.attributes || {}).join(', '));
    }
    renderCourierStreets(courier) {
        const courierStreets = lodash_1.get(courier, 'metadata.contacts.addresses[0].streets', []);
        return (courierStreets || [])
            .map((street, index) => React.createElement(cosmoui_1.Row, { key: index },
            street,
            React.createElement("br", null)));
    }
}
exports.CourierDetailsComponent = CourierDetailsComponent;
const mapStateToProps = (state, props) => {
    const courier = cosmo_redux_api_1.getCourierById(state, props.refId);
    return {
        courier,
        earnings: courier ? cosmo_redux_api_1.getCourierEarnings(state, courier.refId) : 0,
        avatarPath: courier ? selectors_1.getCourierAvatarPath(courier) : '',
    };
};
const mapDispatchToProps = {
    showCourierChangeFrequencyModal: actions_1.showCourierChangeFrequencyModal,
};
exports.CourierDetails = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(CourierDetailsComponent);
//# sourceMappingURL=courier-details.js.map