web2019/static/js/shop/OrderPanel.jsx

import React, {PureComponent} from 'react'
import PropTypes from "prop-types";

/**
 * Component that renders all things for order.
 * It acts like-a layout, this component do nothing more.
 */
export class OrderPanel extends PureComponent {

    static get propTypes() {
        return {
            title: PropTypes.string,
            description: PropTypes.element,
            cratesList: PropTypes.element,
            summaryPrice: PropTypes.element,
            form: PropTypes.element,
            isMobile: PropTypes.bool,
            onClickToggleMobileSideMenu: PropTypes.func,
            onClickOpenImport: PropTypes.func,
        };
    }

    render() {
        const {
            title,
            description,
            cratesList,
            summaryPrice,
            form,
            isMobile,
            onClickToggleMobileSideMenu,
            onClickOpenImport,
        } = this.props;

        return (
            <section className="panel">

                <h2>{title}</h2>

                <div className="control">
                    {description}
                </div>

                <div>
                    <button
                        className="btn btn-sm btn-outline-primary m-0 mb-2"
                        style={{'cursor': 'pointer'}}
                        onClick={onClickOpenImport}>Import JSON
                    </button>
                </div>

                {isMobile ? (
                    <div className="mobileBtnDisplaySideMenu">
                        <button onClick={onClickToggleMobileSideMenu}>
                            <img src="/images/shop/icon-add.svg" alt="add"/>
                        </button>
                    </div>
                ) : null}

                {cratesList}

                <section className="summary">
                    {summaryPrice}

                    {form}
                </section>

            </section>
        );
    }
}