<input type="submit" value="Request quote" />
          This will open an email window. Send the email to make your request.
        </form>

</div>
    );
  }
}

/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */
class OrderSumary extends React.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 (
      <div className="summary-price">

<table>

<thead>
            <tr>
              <td colSpan="2" className="summary-remove-all">
                <span className="item-card-name">Remove all cards</span>

{mode && (
              <tr>
                <td className="item-card-name">{mode.name}</td>
                <td className="price">
                  <div>
                    {`${currency} ${formatMoney(mode.price)}`}

<tbody>
            {summary.map((item, index) => {
              let alert;
              let warning;

if (itemsData[index]) {
                alert = itemsData[index];
                const warningsKeys = Object.keys(alert.warnings);
                if (warningsKeys && warningsKeys.length > 0) {
                  warning = alert.warnings[warningsKeys[0]];
                }
              }

return (
                <tr key={item.id}
                    className={`hoverable ${item.selected ? 'selected' : ''}`}
                    onClick={this.handleOnClickSelectItem.bind(this, index)}
                    onMouseEnter={this.handleOnMouseEnterItem.bind(this, item.id)}
                    onMouseLeave={this.handleOnMouseLeaveItem}>

<td className="price">
                    <div>
                      {`${currency} ${formatMoney(item.price)}`}

{warning && (
                      <img
                          style={{'marginLeft': '10px'}}
                          className="alert-warning"
                          src={`/images/${warning.icon}`}
                      />
                    )}

{!warning && (
                      <span style={{
                        'display': 'inline-block',
                        'width': '30px',
                      }}> </span>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>

<tfoot>
            <tr>
              <td className="item-card-name">Price estimate</td>
              <td className="price">
                <div>
                  {summary.length ? (
                    `${currency} ${formatMoney(summary.reduce(
                      (prev, next) => {
                        return prev + next.price;
                      }, 0
                    ) + mode.price)}`
                  ) : (
                    `${currency} ${formatMoney(mode.price)}`
                  )}

</table>

</div>
    );
  }
}

/**
 * Component that renders the backlog in the aside
 */
class Backlog extends React.PureComponent {

static get propTypes() {
    return {
      currency: PropTypes.string,
      data: PropTypes.object.isRequired,
      items: PropTypes.object,
      isMobile: PropTypes.bool,
      onClickAddItem: PropTypes.func,
      onClickToggleMobileSideMenu: PropTypes.func,
    };
  }

static get defaultProps() {
    return {
      items: {},
    };
  }

render() {
    const {
      currency,
      data,
      items,
      onClickAddItem,
      onClickToggleMobileSideMenu,
      isMobile,
    } = this.props;

return (
      <Droppable
          droppableId={data.id}
          isDropDisabled={true}>

{(provided) => (
          <div
              className="backlog-container"
              ref={provided.innerRef}
              {...provided.droppableProps}>

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

{products}

{provided.placeholder && (
              <div style={{ display: 'none' }}>
                {provided.placeholder}
              </div>
            )}
          </div>
        )}

</Droppable>
    );
  }
}

/**
 * Component that render the entire shop
 */
class Shop extends React.PureComponent {

static get propTypes() {
    return {
      data: PropTypes.object.isRequired,
    };
  }

constructor(props) {
    super(props);
    this.state = this.props.data;
    this.handleCrateModeChange = this.handleCrateModeChange.bind(this);
    this.handleOnDragEnd = this.handleOnDragEnd.bind(this);
    this.handleDeleteItem = this.handleDeleteItem.bind(this);
    this.handleDeleteAllItems = this.handleDeleteAllItems.bind(this);
    this.handleMouseEnterItem = this.handleMouseEnterItem.bind(this);
    this.handleMouseLeaveItem = this.handleMouseLeaveItem.bind(this);
    this.handleClickAddItem = this.handleClickAddItem.bind(this);
    this.checkAlerts = this.checkAlerts.bind(this);
    this.handleToggleItemProgress = this.handleToggleItemProgress.bind(this);
    this.handleToggleItemWarning = this.handleToggleItemWarning.bind(this);
    this.handleClickSelectItem = this.handleClickSelectItem.bind(this);
    this.handleClickSubmit = this.handleClickSubmit.bind(this);
    this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this);
    this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this);
  }

componentDidMount() {
    // index 0 is a Kasli, we place it as a default conf on the crate.
    const source = {
      droppableId: 'backlog',
      index: 0,
    };
    const destination = {
      droppableId: 'cart',
      index: 0,
    };

this.handleOnDragEnd({
      source,
      destination,
      draggableId: null,
    });
  }

componentDidUpdate(prevProps, prevState) {
    /**
     * We check alerts (reminder + warning) only when items inside crate or
     * crate mode change.
     *
     * In the function checkAlerts, we DO NOT want to change items as we will
     * trigger again this function (componentDidUpdate) and thus,
     * making an infinite loop.
     */
    if (
      (prevState.columns.cart.items !== this.state.columns.cart.items) ||
      (prevState.currentMode !== this.state.currentMode)
    ) {
      this.checkAlerts(
        prevState.columns.cart.items,
        this.state.columns.cart.items);
    }
  }

handleCrateModeChange(mode) {
    this.setState({
      currentMode: mode,
    });
  }

handleDeleteItem(index) {
    const cloned = Array.from(this.state.columns.cart.items);
    cloned.splice(index, 1);
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: cloned,
        },
      },
    });
  }

handleDeleteAllItems() {
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: [],
        },
      },
    });
  }

handleMouseEnterItem(id) {
    this.setState({
      ...this.state,
      currentItemHovered: id,
    });
  }

handleMouseLeaveItem() {
    this.setState({
      ...this.state,
      currentItemHovered: null,
    });
  }

handleClickAddItem(index) {
    const source = {
      droppableId: 'backlog',
      index: index,
    };
    const destination = {
      droppableId: 'cart',
      index: this.state.columns.cart.items.length,
    };

this.handleOnDragEnd({
      source,
      destination,
      draggableId: null,
    });
  }

handleToggleItemProgress(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, i) => {
            return {
              ...item,
              showProgress: i === index ? show : false,
              showOverlayRemove: false,
              showWarning: false,
            };
          }),
        }
      },
    });
  }

handleToggleItemWarning(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, i) => {
            return {
              ...item,
              showWarning: i === index ? show : false,
              showProgress: false,
              showOverlayRemove: false,
            };
          }),
        }
      },
    });
  }

handleClickSelectItem(index) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, id) => {
            return {...item, selected: id === index ? true : false};
          }),
        }
      },
    });
  }

handleToggleOverlayRemove(index, show) {
    const itemsCloned = Array.from(this.state.columns.cart.items);

this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          items: itemsCloned.map((item, id) => {
            return {
              ...item,
              showOverlayRemove: id === index ? show : false,
              showProgress: false,
              showWarning: false,
            };
          }),
        }
      },
    });
  }

handleClickSubmit(note) {
    const crate = {
      items: [],
      type: this.state.currentMode,
    };
    const clonedCart = Array.from(this.state.columns.cart.items);
    for (const i in clonedCart) {
      const item = clonedCart[i];
      crate.items.push({
        'name': item.name,
      });
    }

const a = document.createElement('a');
    const num = (new Date()).getTime();
    const subject = `[Order hardware] - Request Quote`;
    let body = `Hello!\n\nI would like to request a quotation for my below configuration:\n\n${JSON.stringify(crate)}\n\n(Please do not edit the machine-readable representation above)\n\n`;

if (note) {
      body = `${body}\n\nAdditional note:\n\n${note ? note.trim() : ''}`;
    }

document.body.appendChild(a);

a.style = 'display: none';
    a.href = `mailto:sales@m-labs.hk?subject=${subject}&body=${encodeURIComponent(body)}`;
    a.click();
  }

handleOnDragEnd(result) {
    const {
      source,
      destination,
      draggableId,
    } = result;

if (!destination) {
      if (source.droppableId === 'cart') {
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [source.droppableId]: {
              ...this.state.columns[source.droppableId],
              items: remove(
                this.state.columns[source.droppableId].items,
                source.index,
              ),
            },
          },
        });
      }

return;
    }

switch(source.droppableId) {

case 'backlog':
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [destination.droppableId]: {
              ...this.state.columns[destination.droppableId],
              items: copy(
                this.state.items,
                this.state.columns[source.droppableId],
                this.state.columns[destination.droppableId],
                source,
                destination,
              ),
            },
          },
        });
        break;

case destination.droppableId:
        this.setState({
          ...this.state,
          columns: {
            ...this.state.columns,
            [destination.droppableId]: {
              ...this.state.columns[destination.droppableId],
              items: reorder(
                this.state.columns[destination.droppableId].items,
                source.index,
                destination.index,
              ),
            },
          },
        });
        break;

default:
        break;
    }
  }

handleClickToggleMobileSideMenu() {
    this.setState({
      ...this.state,
      mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen,
    });
  }

checkAlerts(prevItems, newItems) {
    console.log('--- START CHECKING CRATE WARNING ---');

const {
      currentMode,
      crateModeSlots,
      crateRules,
    } = this.state;

const itemsCloned = Array.from(newItems);
    const itemsData = {};
    const rules = {};

// check number of slot in crate
    const nbrOccupied = nbrOccupiedSlotsInCrate(newItems);
    if (nbrOccupied > crateModeSlots[currentMode]) {
      rules[crateRules.maxSlot.type] = {...crateRules.maxSlot};
    }

// check the number of EEM connectors available for all Kasli
    const idxK = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'kasli' || next.type === 'kasli-backplane') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxK.length - 1; i++) {
      let slots;
      let nbUsedSlot = 0;
      let nbrCurrentClock = 0;
      let idx = idxK[i];

if (i !== idxK.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxK[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

if (i == 0) {
        const slots_need_resource = itemsCloned.slice(0, idx);
        const idx_need = slots_need_resource.findIndex(e => (e.rules && e.rules.resources));

if (idx_need != -1) {
          if (idx_need in itemsData) {
            if ('warnings' in itemsData[idx_need]) {
              itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
            } else {
              itemsData[idx_need].warnings = {};
              itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
            }
          } else {
            itemsData[idx_need] = {...itemsCloned[idx_need]};
            itemsData[idx_need].warnings = {};
            itemsData[idx_need].warnings.resources = {...itemsCloned[idx_need].rules.resources};
          }
        }
      }

nbUsedSlot = slots
        .filter(item => item.type !== 'idc-bnc')
        .reduce((prev, next) => {
          return prev + next.slotOccupied;
        }, 0);
      nbrCurrentClock = slots
        .reduce((prev, next) => {
          return next.type === 'clocker' ? prev + next.clockOccupied : prev;
        }, 0);

if (idx in itemsData) {
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        if (!('warnings' in itemsData[idx])) {
          itemsData[idx].warnings = {};
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        itemsData[idx].warnings = {};
      }

if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
        rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
        itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
      }

if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
        rules[itemsCloned[idx].rules.maxClock.type] = {...itemsCloned[idx].rules.maxClock};
        itemsData[idx].warnings.maxClockWarning = {...itemsCloned[idx].rules.maxClockWarning};
      }

if (itemsCloned.length > (idx + 1)) {
        const ddkali = itemsCloned[idx + 1];
        if (ddkali.type === 'kasli' || ddkali.type === 'kasli-backplane') {
          rules[ddkali.rules.follow.type] = {...ddkali.rules.follow};
        }
      }
    }

// check number of clock connector available
    const idxC = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'kasli' || next.type === 'kasli-backplane' || next.type === 'clocker') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxC.length - 1; i++) {
      let slots;
      let nbrCurrentClock = 0;
      let idx = idxC[i];

if (i !== idxC.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxC[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

nbrCurrentClock = slots.reduce((prev, next) => {
        return prev + next.clockOccupied;
      }, 0);

if (idx in itemsData) {
        if (itemsData[idx].nbrCurrentClock) {
          itemsData[idx].nbrCurrentClock += nbrCurrentClock;
        } else {
          itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentClock = nbrCurrentClock;
        itemsData[idx].warnings = {};
      }

// check for number of recommanded EEM connectors
    ['novo', 'urukul', 'koster'].map(_type => {
      if (itemsCloned.find(elem => elem.type === _type)) {
        rules[this.state.items[_type].rules.connectors.type] = {...this.state.items[_type].rules.connectors};
      }
      return _type;
    });

// check if IDC-BNC is correctly positionned (after Zotino or HD68)
    const idxIDCBNC = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'idc-bnc') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
      const ce = idxIDCBNC[i];
      let shouldWarning = false;

if (ce == 0) {
        shouldWarning = true;
      } else if (ce >= 1) {
        const pe = idxIDCBNC[i] - 1;
        if (itemsCloned[pe].type !== 'zotino' &&
            itemsCloned[pe].type !== 'hd68' &&
            itemsCloned[pe].type !== 'idc-bnc') {
          shouldWarning = true;
        }
      }

if (shouldWarning) {
        itemsData[ce] = {...itemsCloned[ce]};
        itemsData[ce].warnings = {};
        itemsData[ce].warnings.wrong = {...itemsCloned[ce].rules.wrong};
      }
    }

// check number of IDC-BNC adapters for a Zotino and HD68-IDC
    const idxZH = itemsCloned.reduce((prev, next, i) => {
      if (next.type === 'zotino' || next.type === 'hd68') {
        prev.push(i);
      }
      return prev;
    }, []);
    for (let i = 0; i <= idxZH.length - 1; i++) {
      let slots;
      let nbUsedSlot = 0;
      let idx = idxZH[i];

if (i !== idxZH.length - 1) {
        slots = itemsCloned.slice(idx + 1, idxZH[i + 1]);
      } else {
        slots = itemsCloned.slice(idx + 1);
      }

if (idx in itemsData) {
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        if (!('warnings' in itemsData[idx])) {
          itemsData[idx].warnings = {};
        }
      } else {
        itemsData[idx] = {...itemsCloned[idx]};
        itemsData[idx].nbrCurrentSlot = nbUsedSlot;
        itemsData[idx].warnings = {};
      }

if (nbUsedSlot > 0) {
        rules[itemsCloned[idx].rules.maxSlot.type] = {...itemsCloned[idx].rules.maxSlot};
      }
      if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
        itemsData[idx].warnings.maxSlotWarning = {...itemsCloned[idx].rules.maxSlotWarning};
      }

// check if HD68-IDC has at least 1 IDC-BNC adapter
      if (itemsCloned[idx].type === 'hd68') {
        let shouldWarning = false;

if (idx < itemsCloned.length - 1) {
          if (itemsCloned[idx + 1].type !== 'idc-bnc') {
            shouldWarning = true;
          }
        } else if (idx === itemsCloned.length - 1) {
          shouldWarning = true;
        }

if (shouldWarning) {
          if (idx in itemsData) {
            itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
          } else {
            itemsData[idx] = {...itemsCloned[idx]};
            itemsData[idx].warnings = {};
            itemsData[idx].warnings.minAdapter = {...itemsCloned[idx].rules.minAdapter};
          }
        }
      }
    }

// update state with rules
    this.setState({
      ...this.state,
      columns: {
        ...this.state.columns,
        cart: {
          ...this.state.columns.cart,
          itemsData: {
            ...itemsData,
          },
        }
      },
      rules: {
        ...rules,
      },
    });
  }

render() {

const {
      currency,
      currentItemHovered,
      currentMode,
      crateModeSlots,
      crateModeItems,
      items,
      columns,
      rules,
      mobileSideMenuShouldOpen,
    } = this.state;

return (
      <DragDropContext onDragEnd={this.handleOnDragEnd}>

<Layout
            className="shop"
            mobileSideMenuShouldOpen={mobileSideMenuShouldOpen}
            onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
            aside={
              <Backlog
                  currency={currency}
                  items={items}
                  data={columns['backlog']}
                  onClickAddItem={this.handleClickAddItem}
                  onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
                  isMobile={window.deviceIsMobile()}>
              </Backlog>
            }
            main={(
              <OrderPanel
                  onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu}
                  isMobile={window.deviceIsMobile()}
                  title="Order hardware"
                  description="
                    Drag and drop the cards you want into the crate below to see how the combination would look like. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-****.hk. The price is estimated and must be confirmed by a quote."
                  crateMode={
                    <CrateMode
                        items={crateModeItems}
                        mode={currentMode}
                        onClickMode={this.handleCrateModeChange}>
                    </CrateMode>}
                  crate={
                    <Crate
                        cart={
                          <Cart
                              nbrSlots={crateModeSlots[currentMode]}
                              data={columns['cart']}
                              itemHovered={currentItemHovered}
                              onToggleProgress={this.handleToggleItemProgress}
                              onToggleWarning={this.handleToggleItemWarning}
                              onToggleOverlayRemove={this.handleToggleOverlayRemove}
                              onClickRemoveItem={this.handleDeleteItem}>
                          </Cart>
                        }
                        rules={Object.values(rules).filter(rule => rule)}>
                    </Crate>
                  }
                  summaryPrice={
                    <OrderSumary
                        currency={currency}
                        currentMode={currentMode}
                        modes={crateModeItems}
                        summary={columns['cart'].items}
                        itemsData={columns.cart.itemsData}
                        onMouseEnterItem={this.handleMouseEnterItem}
                        onMouseLeaveItem={this.handleMouseLeaveItem}
                        onDeleteItem={this.handleDeleteItem}
                        onDeleteAllItems={this.handleDeleteAllItems}
                        onClickSelectItem={this.handleClickSelectItem}>
                    </OrderSumary>
                  }
                  form={
                    <OrderForm
                        onClickSubmit={this.handleClickSubmit}>
                    </OrderForm>
                  }>
              </OrderPanel>
            )}>
        </Layout>

</DragDropContext>
    );
  }
}

ReactDOM.render(
  <Shop data={data} />,
  document.querySelector('#root-shop'),
);

{name}

{model.name}

{title}