import React, {PureComponent} from 'react'; import PropTypes from "prop-types"; import {SummaryPopup} from "./options/SummaryPopup.jsx"; import {formatMoney} from "./utils"; import {WarningIndicator} from "./CardWarnings.jsx"; /** * Components that displays the list of card that are used in the crate. * It is a summary of purchase */ export class OrderSummary extends PureComponent { static get propTypes() { return { currency: PropTypes.string, modes: PropTypes.array, currentMode: PropTypes.string, summary: PropTypes.array, itemsData: PropTypes.array, onDeleteItem: PropTypes.func, onDeleteAllItems: PropTypes.func, onMouseEnterItem: PropTypes.func, onMouseLeaveItem: PropTypes.func, onClickSelectItem: PropTypes.func, }; } constructor(props) { super(props); this.handleOnDeleteItem = this.handleOnDeleteItem.bind(this); this.handleOnDeleteAllItems = this.handleOnDeleteAllItems.bind(this); this.handleOnMouseEnterItem = this.handleOnMouseEnterItem.bind(this); this.handleOnMouseLeaveItem = this.handleOnMouseLeaveItem.bind(this); this.handleOnClickSelectItem = this.handleOnClickSelectItem.bind(this); } handleOnDeleteItem(index, e) { if (this.props.onDeleteItem) { this.props.onDeleteItem(index); } e.preventDefault(); } handleOnDeleteAllItems(e) { if (this.props.onDeleteAllItems) { this.props.onDeleteAllItems(); } e.preventDefault(); } handleOnMouseEnterItem(id, e) { if (this.props.onMouseEnterItem) { this.props.onMouseEnterItem(id); } e.preventDefault(); } handleOnMouseLeaveItem(e) { if (this.props.onMouseLeaveItem) { this.props.onMouseLeaveItem(); } e.preventDefault(); } handleOnClickSelectItem(index, e) { if (e.target.tagName !== 'IMG') { if (this.props.onClickSelectItem) { this.props.onClickSelectItem(index); } } return e.preventDefault(); } render() { const { currency, modes, currentMode, summary, itemsData, } = this.props; const mode = modes.find(elem => elem.id === currentMode); return (
{mode && ( )} {summary.map((item, index) => { let alert, warning, options, options_data; if (itemsData[index] && itemsData[index].warnings) { alert = itemsData[index]; const warningsKeys = Object.keys(alert.warnings); if (warningsKeys && warningsKeys.length > 0) { warning = alert.warnings[warningsKeys[0]]; } } options = itemsData[index] && itemsData[index].options; options_data = itemsData[index] && itemsData[index].options_data; const warnings = itemsData[index] && itemsData[index].show_warnings; return ( ); })}
Remove all cards
{mode.name}
{`${currency} ${formatMoney(mode.price)}`}
 
{`${item.name_number} ${item.name} ${item.name_codename}`}
{`${currency} ${formatMoney(item.price)}`}
{(warnings && warnings.length > 0 ? ( ) : (   ))} {((options && options_data) ? ( ) : (   ))}
Price estimate
{summary.length ? ( `${currency} ${formatMoney(summary.reduce( (prev, next) => { return prev + next.price; }, 0 ) + mode.price)}` ) : ( `${currency} ${formatMoney(mode.price)}` )}
 
); } }