web2019/static/js/shop.min.js

'use strict';

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var _window$ReactBeautifu = window.ReactBeautifulDnd,
    DragDropContext = _window$ReactBeautifu.DragDropContext,
    Draggable = _window$ReactBeautifu.Draggable,
    Droppable = _window$ReactBeautifu.Droppable;
var data = window.shop_data;

var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) {
  var custom = {
    opacity: snapshot.isDragging ? .7 : 1,
    backgroundColor: hovered || selected ? '#eae7f7' : 'initial'
  };

  if (!snapshot.isDropAnimating) {
    return _objectSpread({}, style, {}, custom);
  }

  if (removeAnim) {
    // cannot be 0, but make it super tiny
    custom.transitionDuration = '0.001s';
  }

  return _objectSpread({}, style, {}, custom);
};

var cartStyle = function cartStyle(style, snapshot) {
  var isDraggingOver = snapshot.isDraggingOver;
  return _objectSpread({}, style, {}, {
    backgroundColor: isDraggingOver ? '#f2f2f2' : '#f9f9f9',
    border: isDraggingOver ? '1px dashed #ccc' : '0'
  });
};

var nbrConnectorsStyle = function nbrConnectorsStyle(data) {
  if (!data || !data.nbrCurrentSlot) {
    return {};
  }

  var p = data.nbrCurrentSlot * 100 / data.nbrSlotMax;

  if (p > 100) {
    p = 100;
  }

  return {
    width: "".concat(p, "%")
  };
};

var nbrClocksStyle = function nbrClocksStyle(data) {
  if (!data || !data.nbrCurrentClock) {
    return {};
  }

  var p = data.nbrCurrentClock * 100 / data.nbrClockMax;

  if (p > 100) {
    p = 100;
  }

  return {
    width: "".concat(p, "%")
  };
};

var copy = function copy(model, source, destination, droppableSource, droppableDestination) {
  var sourceClone = Array.from(source.itemIds);
  var destClone = Array.from(destination.items);
  var item = sourceClone[droppableSource.index];
  destClone.splice(droppableDestination.index, 0, _objectSpread({}, model[item], {
    id: uuidv4()
  }));
  return destClone;
};

var reorder = function reorder(list, startIndex, endIndex) {
  var result = Array.from(list);

  var _result$splice = result.splice(startIndex, 1),
      _result$splice2 = _slicedToArray(_result$splice, 1),
      removed = _result$splice2[0];

  result.splice(endIndex, 0, removed);
  return result;
};

var remove = function remove(list, startIndex) {
  var result = Array.from(list);
  result.splice(startIndex, 1);
  return result;
};

var nbrOccupiedSlotsInCrate = function nbrOccupiedSlotsInCrate(items) {
  return items.reduce(function (prev, next) {
    return prev + (next.hp === 8 ? 2 : 1);
  }, 0);
};

function formatMoney(amount) {
  var decimalCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
  var decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
  var thousands = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ",";

  // https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript
  // changes: return amount if error in order to avoid empty value
  try {
    decimalCount = Math.abs(decimalCount);
    decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
    var negativeSign = amount < 0 ? "-" : "";
    var i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
    var j = i.length > 3 ? i.length % 3 : 0;
    return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
  } catch (e) {
    return amount;
  }
}

;
/**
 * Component that provides a base layout (aside/main) for the page.
 */

var Layout =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Layout, _React$PureComponent);

  function Layout() {
    _classCallCheck(this, Layout);

    return _possibleConstructorReturn(this, _getPrototypeOf(Layout).apply(this, arguments));
  }

  _createClass(Layout, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          aside = _this$props.aside,
          main = _this$props.main,
          mobileSideMenuShouldOpen = _this$props.mobileSideMenuShouldOpen,
          isMobile = _this$props.isMobile,
          newCardJustAdded = _this$props.newCardJustAdded,
          onClickToggleMobileSideMenu = _this$props.onClickToggleMobileSideMenu;
      return React.createElement("div", {
        className: "layout"
      }, React.createElement("aside", {
        className: 'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')
      }, aside), mobileSideMenuShouldOpen ? React.createElement("section", {
        className: "main",
        onClick: onClickToggleMobileSideMenu
      }, main) : React.createElement("section", {
        className: "main"
      }, main), isMobile && newCardJustAdded ? React.createElement("div", {
        className: "feedback-add-success"
      }, "\u2713 added") : null);
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        aside: PropTypes.any,
        main: PropTypes.any,
        mobileSideMenuShouldOpen: PropTypes.bool,
        isMobile: PropTypes.bool,
        newCardJustAdded: PropTypes.bool,
        onClickToggleMobileSideMenu: PropTypes.func
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        mobileSideMenuShouldOpen: false
      };
    }
  }]);

  return Layout;
}(React.PureComponent);
/**
 * Component that renders a product.
 * Used in the aside (e.g backlog of product)
 */


var ProductItem =
/*#__PURE__*/
function (_React$PureComponent2) {
  _inherits(ProductItem, _React$PureComponent2);

  _createClass(ProductItem, null, [{
    key: "propTypes",
    get: function get() {
      return {
        id: PropTypes.string.isRequired,
        index: PropTypes.number.isRequired,
        name: PropTypes.string.isRequired,
        name_codename: PropTypes.string,
        price: PropTypes.number.isRequired,
        currency: PropTypes.string.isRequired,
        image: PropTypes.string.isRequired,
        specs: PropTypes.array,
        onClickAddItem: PropTypes.func
      };
    }
  }]);

  function ProductItem(props) {
    var _this;

    _classCallCheck(this, ProductItem);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ProductItem).call(this, props));
    _this.handleOnClickAddItem = _this.handleOnClickAddItem.bind(_assertThisInitialized(_this));
    return _this;
  }

  _createClass(ProductItem, [{
    key: "handleOnClickAddItem",
    value: function handleOnClickAddItem(index, tap, e) {
      if (this.props.onClickAddItem) {
        this.props.onClickAddItem(index, tap);
      }

      e.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          id = _this$props2.id,
          index = _this$props2.index,
          name = _this$props2.name,
          name_codename = _this$props2.name_codename,
          price = _this$props2.price,
          currency = _this$props2.currency,
          image = _this$props2.image,
          specs = _this$props2.specs;
      var render_specs = specs && specs.length > 0 && React.createElement("ul", null, specs.map(function (spec, index) {
        return React.createElement("li", {
          key: index
        }, spec);
      }));
      return React.createElement("section", {
        className: "productItem"
      }, React.createElement("div", {
        className: "content"
      }, React.createElement("h3", {
        style: {
          'margin-bottom': name_codename ? '5px' : '20px'
        }
      }, name), name_codename ? React.createElement("p", null, name_codename) : null, React.createElement("div", {
        className: "price"
      }, "".concat(currency, " ").concat(formatMoney(price))), render_specs), React.createElement("div", {
        className: "content"
      }, React.createElement("button", {
        onClick: this.handleOnClickAddItem.bind(this, index, true)
      }, React.createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      })), React.createElement(Draggable, {
        draggableId: id,
        index: index
      }, function (provided, snapshot) {
        return React.createElement(React.Fragment, null, React.createElement("img", _extends({
          ref: provided.innerRef
        }, provided.draggableProps, provided.dragHandleProps, {
          style: productStyle(provided.draggableProps.style, snapshot, true // hack: remove weird animation after a drop
          ),
          src: image
        })), snapshot.isDragging && React.createElement("img", {
          className: "simclone",
          src: image
        }));
      })));
    }
  }]);

  return ProductItem;
}(React.PureComponent);
/**
 * Component that renders a product.
 * Used in the crate
 */


var ProductCartItem =
/*#__PURE__*/
function (_React$PureComponent3) {
  _inherits(ProductCartItem, _React$PureComponent3);

  _createClass(ProductCartItem, null, [{
    key: "propTypes",
    get: function get() {
      return {
        isMobile: PropTypes.bool,
        hovered: PropTypes.bool,
        index: PropTypes.number.isRequired,
        model: PropTypes.object.isRequired,
        data: PropTypes.object,
        onToggleProgress: PropTypes.func,
        onToggleWarning: PropTypes.func,
        onToggleOverlayRemove: PropTypes.func,
        onClickRemoveItem: PropTypes.func
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        hovered: false
      };
    }
  }]);

  function ProductCartItem(props) {
    var _this2;

    _classCallCheck(this, ProductCartItem);

    _this2 = _possibleConstructorReturn(this, _getPrototypeOf(ProductCartItem).call(this, props));
    _this2.handleOnMouseEnterItem = _this2.handleOnMouseEnterItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnMouseLeaveItem = _this2.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnMouseEnterWarningItem = _this2.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnMouseLeaveWarningItem = _this2.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnMouseEnterRemoveItem = _this2.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnMouseLeaveRemoveItem = _this2.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(_this2));
    _this2.handleOnClickRemoveItem = _this2.handleOnClickRemoveItem.bind(_assertThisInitialized(_this2));
    return _this2;
  }

  _createClass(ProductCartItem, [{
    key: "handleOnMouseEnterItem",
    value: function handleOnMouseEnterItem(index, e) {
      if (this.props.onToggleProgress) {
        this.props.onToggleProgress(index, true);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseLeaveItem",
    value: function handleOnMouseLeaveItem(index, e) {
      if (this.props.onToggleProgress) {
        this.props.onToggleProgress(index, false);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseEnterWarningItem",
    value: function handleOnMouseEnterWarningItem(index, isWarning, e) {
      if (!isWarning) {
        return;
      }

      if (this.props.onToggleWarning) {
        this.props.onToggleWarning(index, true);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseLeaveWarningItem",
    value: function handleOnMouseLeaveWarningItem(index, isWarning, e) {
      if (!isWarning) {
        return;
      }

      if (this.props.onToggleWarning) {
        this.props.onToggleWarning(index, false);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseEnterRemoveItem",
    value: function handleOnMouseEnterRemoveItem(index, e) {
      if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
        this.props.onToggleOverlayRemove(index, true);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseLeaveRemoveItem",
    value: function handleOnMouseLeaveRemoveItem(index, e) {
      if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
        this.props.onToggleOverlayRemove(index, false);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnClickRemoveItem",
    value: function handleOnClickRemoveItem(index, e) {
      if (this.props.onClickRemoveItem) {
        this.props.onClickRemoveItem(index);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var _this$props3 = this.props,
          hovered = _this$props3.hovered,
          model = _this$props3.model,
          data = _this$props3.data,
          index = _this$props3.index;
      var warning;

      if (data && data.warnings) {
        var warningsKeys = Object.keys(data.warnings);

        if (warningsKeys && warningsKeys.length > 0) {
          // we display only the first warning
          warning = data.warnings[warningsKeys[0]];
        }
      }

      var render_progress;

      if (model.showProgress && data) {
        switch (model.type) {
          case 'kasli':
          case 'kasli-backplane':
            render_progress = React.createElement("div", {
              className: "k-popup-connectors"
            }, React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")), React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
            break;

          case 'zotino':
          case 'hd68':
            render_progress = React.createElement("div", {
              className: "k-popup-connectors"
            }, React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " connectors used")));
            break;

          case 'clocker':
            render_progress = React.createElement("div", {
              className: "k-popup-connectors"
            }, React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
            break;

          default:
            break;
        }
      }

      return React.createElement(Draggable, {
        draggableId: model.id,
        index: index
      }, function (provided, snapshot) {
        return React.createElement("div", _extends({
          ref: provided.innerRef
        }, provided.draggableProps, provided.dragHandleProps, {
          style: _objectSpread({}, productStyle(provided.draggableProps.style, snapshot, true, hovered ? true : false, model.selected ? true : false)),
          onMouseEnter: _this3.handleOnMouseEnterRemoveItem.bind(_this3, index),
          onMouseLeave: _this3.handleOnMouseLeaveRemoveItem.bind(_this3, index)
        }), React.createElement("div", {
          style: {
            'height': '24px'
          },
          className: "progress-container warning",
          onMouseEnter: _this3.handleOnMouseEnterWarningItem.bind(_this3, index, warning),
          onMouseLeave: _this3.handleOnMouseLeaveWarningItem.bind(_this3, index, warning)
        }, warning && React.createElement("img", {
          className: "alert-warning",
          src: warning ? "/images".concat(warning.icon) : null
        }), warning && model.showWarning && React.createElement("div", {
          className: "k-popup-warning"
        }, React.createElement("p", {
          className: "rule warning"
        }, React.createElement("i", null, warning.message)))), React.createElement("h6", null, model.name_number), React.createElement("div", {
          style: {
            'height': '350px'
          },
          onMouseEnter: _this3.handleOnMouseEnterRemoveItem.bind(_this3, index)
        }, React.createElement("img", {
          className: "item-cart",
          src: "/images".concat(model.image)
        })), React.createElement("div", {
          style: {
            'display': model.showOverlayRemove ? 'flex' : 'none'
          },
          className: "overlayRemove",
          onClick: _this3.handleOnClickRemoveItem.bind(_this3, index)
        }, React.createElement("img", {
          src: "/images/shop/icon-remove.svg",
          alt: "rm"
        }), React.createElement("p", null, "Remove")), React.createElement("div", {
          style: {
            'height': '22px'
          },
          className: "progress-container",
          onMouseEnter: _this3.handleOnMouseEnterItem.bind(_this3, index),
          onMouseLeave: _this3.handleOnMouseLeaveItem.bind(_this3, index)
        }, model.nbrSlotMax > 0 && React.createElement("div", {
          className: "nbr-connectors"
        }, React.createElement("div", {
          style: _objectSpread({}, nbrConnectorsStyle(data))
        })), model.nbrClockMax > 0 && React.createElement("div", {
          className: "nbr-clocks"
        }, React.createElement("div", {
          style: _objectSpread({}, nbrClocksStyle(data))
        })), render_progress));
      });
    }
  }]);

  return ProductCartItem;
}(React.PureComponent);
/**
 * Component that displays a placeholder inside crate.
 * Allows to display how it remains space for the current crate.
 */


var FakePlaceholder =
/*#__PURE__*/
function (_React$PureComponent4) {
  _inherits(FakePlaceholder, _React$PureComponent4);

  function FakePlaceholder() {
    _classCallCheck(this, FakePlaceholder);

    return _possibleConstructorReturn(this, _getPrototypeOf(FakePlaceholder).apply(this, arguments));
  }

  _createClass(FakePlaceholder, [{
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          isDraggingOver = _this$props4.isDraggingOver,
          nbrSlots = _this$props4.nbrSlots,
          items = _this$props4.items;
      var fakePlaceholder = [];
      var nbrOccupied = nbrOccupiedSlotsInCrate(items);

      for (var i = nbrSlots - nbrOccupied; i > 0; i--) {
        fakePlaceholder.push(React.createElement("div", {
          key: i,
          style: {
            display: isDraggingOver ? 'none' : 'block',
            border: '1px dashed #ccc',
            width: '45px',
            marginBottom: '5px'
          }
        }));
      }

      return React.createElement(React.Fragment, null, fakePlaceholder);
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isDraggingOver: PropTypes.bool,
        nbrSlots: PropTypes.number.isRequired,
        items: PropTypes.array.isRequired
      };
    }
  }]);

  return FakePlaceholder;
}(React.PureComponent);
/**
 * Component that displays a list of <ProductCartItem>
 */


var Cart =
/*#__PURE__*/
function (_React$PureComponent5) {
  _inherits(Cart, _React$PureComponent5);

  function Cart() {
    _classCallCheck(this, Cart);

    return _possibleConstructorReturn(this, _getPrototypeOf(Cart).apply(this, arguments));
  }

  _createClass(Cart, [{
    key: "render",
    value: function render() {
      var _this$props5 = this.props,
          isMobile = _this$props5.isMobile,
          nbrSlots = _this$props5.nbrSlots,
          itemHovered = _this$props5.itemHovered,
          data = _this$props5.data,
          onToggleProgress = _this$props5.onToggleProgress,
          onToggleWarning = _this$props5.onToggleWarning,
          onToggleOverlayRemove = _this$props5.onToggleOverlayRemove,
          onClickRemoveItem = _this$props5.onClickRemoveItem;
      var products = data.items.map(function (item, index) {
        var itemData;

        if (data.itemsData && index in data.itemsData) {
          itemData = data.itemsData[index];
        }

        return React.createElement(ProductCartItem, {
          isMobile: isMobile,
          hovered: item.id === itemHovered,
          key: item.id,
          index: index,
          data: itemData,
          onToggleProgress: onToggleProgress,
          onToggleWarning: onToggleWarning,
          onToggleOverlayRemove: onToggleOverlayRemove,
          onClickRemoveItem: onClickRemoveItem,
          model: item
        });
      });
      return React.createElement(Droppable, {
        droppableId: data.id,
        direction: "horizontal"
      }, function (provided, snapshot) {
        return React.createElement("div", _extends({
          ref: provided.innerRef
        }, provided.droppableProps, {
          style: cartStyle(provided.droppableProps.style, snapshot),
          className: "items-cart-list"
        }), products, provided.placeholder && React.createElement("div", {
          style: {
            display: 'none'
          }
        }, provided.placeholder), React.createElement(FakePlaceholder, {
          nbrSlots: nbrSlots,
          items: data.items,
          isDraggingOver: snapshot.isDraggingOver
        }));
      });
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isMobile: PropTypes.bool,
        nbrSlots: PropTypes.number,
        itemHovered: PropTypes.string,
        data: PropTypes.object.isRequired,
        onToggleProgress: PropTypes.func,
        onToggleWarning: PropTypes.func,
        onToggleOverlayRemove: PropTypes.func,
        onClickRemoveItem: PropTypes.func
      };
    }
  }]);

  return Cart;
}(React.PureComponent);
/**
 * Component that displays crate modes
 */


var CrateMode =
/*#__PURE__*/
function (_React$PureComponent6) {
  _inherits(CrateMode, _React$PureComponent6);

  _createClass(CrateMode, null, [{
    key: "propTypes",
    get: function get() {
      return {
        items: PropTypes.array.isRequired,
        mode: PropTypes.string.isRequired,
        onClickMode: PropTypes.func
      };
    }
  }]);

  function CrateMode(props) {
    var _this4;

    _classCallCheck(this, CrateMode);

    _this4 = _possibleConstructorReturn(this, _getPrototypeOf(CrateMode).call(this, props));
    _this4.handleOnClickMode = _this4.handleOnClickMode.bind(_assertThisInitialized(_this4));
    return _this4;
  }

  _createClass(CrateMode, [{
    key: "handleOnClickMode",
    value: function handleOnClickMode(mode, e) {
      if (this.props.onClickMode) {
        this.props.onClickMode(mode);
      }

      e.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      var _this$props6 = this.props,
          mode = _this$props6.mode,
          items = _this$props6.items;
      return React.createElement("div", {
        className: "crate-mode"
      }, items.map(function (item) {
        return React.createElement("a", {
          key: item.id,
          className: mode == item.id ? 'active' : '',
          onClick: _this5.handleOnClickMode.bind(_this5, item.id),
          href: "#",
          role: "button"
        }, item.name);
      }));
    }
  }]);

  return CrateMode;
}(React.PureComponent);
/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */


var Crate =
/*#__PURE__*/
function (_React$PureComponent7) {
  _inherits(Crate, _React$PureComponent7);

  function Crate() {
    _classCallCheck(this, Crate);

    return _possibleConstructorReturn(this, _getPrototypeOf(Crate).apply(this, arguments));
  }

  _createClass(Crate, [{
    key: "render",
    value: function render() {
      var _this$props7 = this.props,
          rules = _this$props7.rules,
          cart = _this$props7.cart;
      return React.createElement("div", {
        className: "crate"
      }, React.createElement("div", {
        className: "crate-products"
      }, cart, rules && rules.length > 0 && React.createElement("div", {
        className: "crate-info"
      }, rules.map(function (rule, index) {
        return React.createElement("p", {
          key: index,
          className: "rule",
          style: {
            'color': rule.color ? rule.color : 'inherit'
          }
        }, React.createElement("img", {
          src: "/images".concat(rule.icon)
        }), " ", React.createElement("i", null, React.createElement("strong", null, rule.name, ":"), " ", rule.message));
      }))));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        rules: PropTypes.array,
        cart: PropTypes.element
      };
    }
  }]);

  return Crate;
}(React.PureComponent);
/**
 * Component that renders all things for order.
 * It acts like-a layout, this component do nothing more.
 */


var OrderPanel =
/*#__PURE__*/
function (_React$PureComponent8) {
  _inherits(OrderPanel, _React$PureComponent8);

  function OrderPanel() {
    _classCallCheck(this, OrderPanel);

    return _possibleConstructorReturn(this, _getPrototypeOf(OrderPanel).apply(this, arguments));
  }

  _createClass(OrderPanel, [{
    key: "render",
    value: function render() {
      var _this$props8 = this.props,
          title = _this$props8.title,
          description = _this$props8.description,
          crateMode = _this$props8.crateMode,
          crate = _this$props8.crate,
          summaryPrice = _this$props8.summaryPrice,
          form = _this$props8.form,
          isMobile = _this$props8.isMobile,
          onClickToggleMobileSideMenu = _this$props8.onClickToggleMobileSideMenu;
      return React.createElement("section", {
        className: "panel"
      }, React.createElement("h2", null, title), React.createElement("div", {
        className: "control"
      }, React.createElement("p", {
        className: "description"
      }, description), crateMode), isMobile ? React.createElement("div", {
        className: "mobileBtnDisplaySideMenu"
      }, React.createElement("button", {
        onClick: onClickToggleMobileSideMenu
      }, React.createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      }))) : null, crate, React.createElement("section", {
        className: "summary"
      }, summaryPrice, form));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        title: PropTypes.string,
        description: PropTypes.string,
        crateMode: PropTypes.element,
        crate: PropTypes.element,
        summaryPrice: PropTypes.element,
        form: PropTypes.element,
        isMobile: PropTypes.bool,
        onClickToggleMobileSideMenu: PropTypes.func
      };
    }
  }]);

  return OrderPanel;
}(React.PureComponent);
/**
 * Components that renders the form to request quote.
 */


var OrderForm =
/*#__PURE__*/
function (_React$PureComponent9) {
  _inherits(OrderForm, _React$PureComponent9);

  _createClass(OrderForm, null, [{
    key: "propTypes",
    get: function get() {
      return {
        onClickSubmit: PropTypes.func
      };
    }
  }]);

  function OrderForm(props) {
    var _this6;

    _classCallCheck(this, OrderForm);

    _this6 = _possibleConstructorReturn(this, _getPrototypeOf(OrderForm).call(this, props));
    _this6.state = {
      note: ''
    };
    _this6.handleNoteChange = _this6.handleNoteChange.bind(_assertThisInitialized(_this6));
    _this6.handleSubmit = _this6.handleSubmit.bind(_assertThisInitialized(_this6));
    return _this6;
  }

  _createClass(OrderForm, [{
    key: "handleNoteChange",
    value: function handleNoteChange(event) {
      this.setState({
        note: event.target.value
      });
    }
  }, {
    key: "handleSubmit",
    value: function handleSubmit(event) {
      if (this.props.onClickSubmit) {
        this.props.onClickSubmit(this.state.note);
      }

      event.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      return React.createElement("div", {
        className: "summary-form"
      }, React.createElement("form", {
        onSubmit: this.handleSubmit
      }, React.createElement("textarea", {
        value: this.state.note,
        onChange: this.handleNoteChange,
        rows: "5",
        placeholder: "Additional notes"
      }), React.createElement("input", {
        type: "submit",
        value: "Request quote"
      }), "This will open an email window. Send the email to make your request."));
    }
  }]);

  return OrderForm;
}(React.PureComponent);
/**
 * Components that displays the list of card that are used in the crate.
 * It is a summary of purchase
 */


var OrderSumary =
/*#__PURE__*/
function (_React$PureComponent10) {
  _inherits(OrderSumary, _React$PureComponent10);

  _createClass(OrderSumary, null, [{
    key: "propTypes",
    get: function get() {
      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
      };
    }
  }]);

  function OrderSumary(props) {
    var _this7;

    _classCallCheck(this, OrderSumary);

    _this7 = _possibleConstructorReturn(this, _getPrototypeOf(OrderSumary).call(this, props));
    _this7.handleOnDeleteItem = _this7.handleOnDeleteItem.bind(_assertThisInitialized(_this7));
    _this7.handleOnDeleteAllItems = _this7.handleOnDeleteAllItems.bind(_assertThisInitialized(_this7));
    _this7.handleOnMouseEnterItem = _this7.handleOnMouseEnterItem.bind(_assertThisInitialized(_this7));
    _this7.handleOnMouseLeaveItem = _this7.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this7));
    _this7.handleOnClickSelectItem = _this7.handleOnClickSelectItem.bind(_assertThisInitialized(_this7));
    return _this7;
  }

  _createClass(OrderSumary, [{
    key: "handleOnDeleteItem",
    value: function handleOnDeleteItem(index, e) {
      if (this.props.onDeleteItem) {
        this.props.onDeleteItem(index);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnDeleteAllItems",
    value: function handleOnDeleteAllItems(e) {
      if (this.props.onDeleteAllItems) {
        this.props.onDeleteAllItems();
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseEnterItem",
    value: function handleOnMouseEnterItem(id, e) {
      if (this.props.onMouseEnterItem) {
        this.props.onMouseEnterItem(id);
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnMouseLeaveItem",
    value: function handleOnMouseLeaveItem(e) {
      if (this.props.onMouseLeaveItem) {
        this.props.onMouseLeaveItem();
      }

      e.preventDefault();
    }
  }, {
    key: "handleOnClickSelectItem",
    value: function handleOnClickSelectItem(index, e) {
      if (e.target.tagName !== 'IMG') {
        if (this.props.onClickSelectItem) {
          this.props.onClickSelectItem(index);
        }
      }

      return e.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _this8 = this;

      var _this$props9 = this.props,
          currency = _this$props9.currency,
          modes = _this$props9.modes,
          currentMode = _this$props9.currentMode,
          summary = _this$props9.summary,
          itemsData = _this$props9.itemsData;
      var mode = modes.find(function (elem) {
        return elem.id === currentMode;
      });
      return React.createElement("div", {
        className: "summary-price"
      }, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("td", {
        colSpan: "2",
        className: "summary-remove-all"
      }, React.createElement("span", {
        className: "item-card-name"
      }, "Remove all cards"), React.createElement("button", {
        onClick: this.handleOnDeleteAllItems
      }, React.createElement("img", {
        src: "/images/shop/icon-remove.svg"
      })))), mode && React.createElement("tr", null, React.createElement("td", {
        className: "item-card-name"
      }, mode.name), React.createElement("td", {
        className: "price"
      }, React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(mode.price)), React.createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, React.createElement("img", {
        src: "/images/shop/icon-remove.svg"
      }))), React.createElement("span", {
        style: {
          'display': 'inline-block',
          'width': '30px'
        }
      }, "\xA0")))), React.createElement("tbody", null, summary.map(function (item, index) {
        var alert;
        var warning;

        if (itemsData[index]) {
          alert = itemsData[index];
          var warningsKeys = Object.keys(alert.warnings);

          if (warningsKeys && warningsKeys.length > 0) {
            warning = alert.warnings[warningsKeys[0]];
          }
        }

        return React.createElement("tr", {
          key: item.id,
          className: "hoverable ".concat(item.selected ? 'selected' : ''),
          onClick: _this8.handleOnClickSelectItem.bind(_this8, index),
          onMouseEnter: _this8.handleOnMouseEnterItem.bind(_this8, item.id),
          onMouseLeave: _this8.handleOnMouseLeaveItem
        }, React.createElement("td", {
          className: "item-card-name"
        }, React.createElement("div", null, "".concat(item.name_number, " ").concat(item.name, " ").concat(item.name_codename))), React.createElement("td", {
          className: "price"
        }, React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(item.price)), React.createElement("button", {
          onClick: _this8.handleOnDeleteItem.bind(_this8, index)
        }, React.createElement("img", {
          src: "/images/shop/icon-remove.svg"
        }))), warning && React.createElement("img", {
          style: {
            'marginLeft': '10px'
          },
          className: "alert-warning",
          src: "/images/".concat(warning.icon)
        }), !warning && React.createElement("span", {
          style: {
            'display': 'inline-block',
            'width': '30px'
          }
        }, "\xA0")));
      })), React.createElement("tfoot", null, React.createElement("tr", null, React.createElement("td", {
        className: "item-card-name"
      }, "Price estimate"), React.createElement("td", {
        className: "price"
      }, React.createElement("div", null, summary.length ? "".concat(currency, " ").concat(formatMoney(summary.reduce(function (prev, next) {
        return prev + next.price;
      }, 0) + mode.price)) : "".concat(currency, " ").concat(formatMoney(mode.price)), React.createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, React.createElement("img", {
        src: "/images/shop/icon-remove.svg",
        alt: "icon remove"
      }))), React.createElement("span", {
        style: {
          'display': 'inline-block',
          'width': '30px'
        }
      }, "\xA0"))))));
    }
  }]);

  return OrderSumary;
}(React.PureComponent);
/**
 * Component that renders the backlog in the aside
 */


var Backlog =
/*#__PURE__*/
function (_React$PureComponent11) {
  _inherits(Backlog, _React$PureComponent11);

  function Backlog() {
    _classCallCheck(this, Backlog);

    return _possibleConstructorReturn(this, _getPrototypeOf(Backlog).apply(this, arguments));
  }

  _createClass(Backlog, [{
    key: "render",
    value: function render() {
      var _this$props10 = this.props,
          currency = _this$props10.currency,
          data = _this$props10.data,
          items = _this$props10.items,
          onClickAddItem = _this$props10.onClickAddItem,
          onClickToggleMobileSideMenu = _this$props10.onClickToggleMobileSideMenu,
          isMobile = _this$props10.isMobile;
      var ordered_items = data.itemIds.map(function (itemId) {
        return items[itemId];
      });
      var products = ordered_items.map(function (item, index) {
        return React.createElement(ProductItem, {
          key: item.id,
          id: item.id,
          index: index,
          name: "".concat(item.name_number, " ").concat(item.name),
          name_codename: item.name_codename,
          price: item.price,
          currency: currency,
          image: "/images/".concat(item.image),
          specs: item.specs,
          onClickAddItem: onClickAddItem
        });
      });
      return React.createElement(Droppable, {
        droppableId: data.id,
        isDropDisabled: true
      }, function (provided) {
        return React.createElement("div", _extends({
          className: "backlog-container",
          ref: provided.innerRef
        }, provided.droppableProps), isMobile ? React.createElement("div", {
          className: "mobileCloseMenu"
        }, React.createElement("button", {
          onClick: onClickToggleMobileSideMenu
        }, React.createElement("img", {
          src: "/images/shop/icon-close-white.svg",
          alt: "add"
        }))) : null, products, provided.placeholder && React.createElement("div", {
          style: {
            display: 'none'
          }
        }, provided.placeholder));
      });
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        currency: PropTypes.string,
        data: PropTypes.object.isRequired,
        items: PropTypes.object,
        isMobile: PropTypes.bool,
        onClickAddItem: PropTypes.func,
        onClickToggleMobileSideMenu: PropTypes.func
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        items: {}
      };
    }
  }]);

  return Backlog;
}(React.PureComponent);
/**
 * Component that render the entire shop
 */


var Shop =
/*#__PURE__*/
function (_React$PureComponent12) {
  _inherits(Shop, _React$PureComponent12);

  _createClass(Shop, null, [{
    key: "propTypes",
    get: function get() {
      return {
        data: PropTypes.object.isRequired
      };
    }
  }]);

  function Shop(props) {
    var _this9;

    _classCallCheck(this, Shop);

    _this9 = _possibleConstructorReturn(this, _getPrototypeOf(Shop).call(this, props));
    _this9.state = _this9.props.data;
    _this9.handleCrateModeChange = _this9.handleCrateModeChange.bind(_assertThisInitialized(_this9));
    _this9.handleOnDragEnd = _this9.handleOnDragEnd.bind(_assertThisInitialized(_this9));
    _this9.handleDeleteItem = _this9.handleDeleteItem.bind(_assertThisInitialized(_this9));
    _this9.handleDeleteAllItems = _this9.handleDeleteAllItems.bind(_assertThisInitialized(_this9));
    _this9.handleMouseEnterItem = _this9.handleMouseEnterItem.bind(_assertThisInitialized(_this9));
    _this9.handleMouseLeaveItem = _this9.handleMouseLeaveItem.bind(_assertThisInitialized(_this9));
    _this9.handleClickAddItem = _this9.handleClickAddItem.bind(_assertThisInitialized(_this9));
    _this9.checkAlerts = _this9.checkAlerts.bind(_assertThisInitialized(_this9));
    _this9.handleToggleItemProgress = _this9.handleToggleItemProgress.bind(_assertThisInitialized(_this9));
    _this9.handleToggleItemWarning = _this9.handleToggleItemWarning.bind(_assertThisInitialized(_this9));
    _this9.handleClickSelectItem = _this9.handleClickSelectItem.bind(_assertThisInitialized(_this9));
    _this9.handleClickSubmit = _this9.handleClickSubmit.bind(_assertThisInitialized(_this9));
    _this9.handleToggleOverlayRemove = _this9.handleToggleOverlayRemove.bind(_assertThisInitialized(_this9));
    _this9.handleClickToggleMobileSideMenu = _this9.handleClickToggleMobileSideMenu.bind(_assertThisInitialized(_this9));
    _this9.timer = null;
    return _this9;
  }

  _createClass(Shop, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      // index 0 is a Kasli, we place it as a default conf on the crate.
      var source = {
        droppableId: 'backlog',
        index: 0
      };
      var destination = {
        droppableId: 'cart',
        index: 0
      };
      this.handleOnDragEnd({
        source: source,
        destination: destination,
        draggableId: null
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this10 = this;

      /**
       * 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);
      }

      if (this.state.newCardJustAdded) {
        this.timer = setTimeout(function () {
          _this10.setState({
            newCardJustAdded: false
          });
        }, 2000);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      clearTimeout(this.timer);
    }
  }, {
    key: "handleCrateModeChange",
    value: function handleCrateModeChange(mode) {
      this.setState({
        currentMode: mode
      });
    }
  }, {
    key: "handleDeleteItem",
    value: function handleDeleteItem(index) {
      var cloned = Array.from(this.state.columns.cart.items);
      cloned.splice(index, 1);
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: cloned
          })
        })
      }));
    }
  }, {
    key: "handleDeleteAllItems",
    value: function handleDeleteAllItems() {
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: []
          })
        })
      }));
    }
  }, {
    key: "handleMouseEnterItem",
    value: function handleMouseEnterItem(id) {
      this.setState(_objectSpread({}, this.state, {
        currentItemHovered: id
      }));
    }
  }, {
    key: "handleMouseLeaveItem",
    value: function handleMouseLeaveItem() {
      this.setState(_objectSpread({}, this.state, {
        currentItemHovered: null
      }));
    }
  }, {
    key: "handleClickAddItem",
    value: function handleClickAddItem(index, tap) {
      var source = {
        droppableId: 'backlog',
        index: index
      };
      var destination = {
        droppableId: 'cart',
        index: this.state.columns.cart.items.length
      };
      this.handleOnDragEnd({
        source: source,
        destination: destination,
        draggableId: null
      }, tap);
    }
  }, {
    key: "handleToggleItemProgress",
    value: function handleToggleItemProgress(index, show) {
      var itemsCloned = Array.from(this.state.columns.cart.items);
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: itemsCloned.map(function (item, i) {
              return _objectSpread({}, item, {
                showProgress: i === index ? show : false,
                showOverlayRemove: false,
                showWarning: false
              });
            })
          })
        })
      }));
    }
  }, {
    key: "handleToggleItemWarning",
    value: function handleToggleItemWarning(index, show) {
      var itemsCloned = Array.from(this.state.columns.cart.items);
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: itemsCloned.map(function (item, i) {
              return _objectSpread({}, item, {
                showWarning: i === index ? show : false,
                showProgress: false,
                showOverlayRemove: false
              });
            })
          })
        })
      }));
    }
  }, {
    key: "handleClickSelectItem",
    value: function handleClickSelectItem(index) {
      var itemsCloned = Array.from(this.state.columns.cart.items);
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: itemsCloned.map(function (item, id) {
              return _objectSpread({}, item, {
                selected: id === index ? true : false
              });
            })
          })
        })
      }));
    }
  }, {
    key: "handleToggleOverlayRemove",
    value: function handleToggleOverlayRemove(index, show) {
      var itemsCloned = Array.from(this.state.columns.cart.items);
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: itemsCloned.map(function (item, id) {
              return _objectSpread({}, item, {
                showOverlayRemove: id === index ? show : false,
                showProgress: false,
                showWarning: false
              });
            })
          })
        })
      }));
    }
  }, {
    key: "handleClickSubmit",
    value: function handleClickSubmit(note) {
      var crate = {
        items: [],
        type: this.state.currentMode
      };
      var clonedCart = Array.from(this.state.columns.cart.items);

      for (var i in clonedCart) {
        var item = clonedCart[i];
        crate.items.push({
          'pn': item.name_number
        });
      }

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

      if (note) {
        body = "".concat(body, "\n\nAdditional note:\n\n").concat(note ? note.trim() : '');
      }

      document.body.appendChild(a);
      a.style = 'display: none';
      a.href = "mailto:sales@m-labs.hk?subject=".concat(subject, "&body=").concat(encodeURIComponent(body));
      a.click();
    }
  }, {
    key: "handleOnDragEnd",
    value: function handleOnDragEnd(result, newAdded) {
      var source = result.source,
          destination = result.destination,
          draggableId = result.draggableId;

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

        return;
      }

      switch (source.droppableId) {
        case 'backlog':
          this.setState(_objectSpread({}, this.state, {
            newCardJustAdded: newAdded ? true : false,
            columns: _objectSpread({}, this.state.columns, _defineProperty({}, destination.droppableId, _objectSpread({}, 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(_objectSpread({}, this.state, {
            newCardJustAdded: false,
            columns: _objectSpread({}, this.state.columns, _defineProperty({}, destination.droppableId, _objectSpread({}, this.state.columns[destination.droppableId], {
              items: reorder(this.state.columns[destination.droppableId].items, source.index, destination.index)
            })))
          }));
          break;

        default:
          break;
      }
    }
  }, {
    key: "handleClickToggleMobileSideMenu",
    value: function handleClickToggleMobileSideMenu() {
      this.setState(_objectSpread({}, this.state, {
        mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen
      }));
    }
  }, {
    key: "checkAlerts",
    value: function checkAlerts(prevItems, newItems) {
      var _this11 = this;

      console.log('--- START CHECKING CRATE WARNING ---');
      var _this$state = this.state,
          currentMode = _this$state.currentMode,
          crateModeSlots = _this$state.crateModeSlots,
          crateRules = _this$state.crateRules;
      var itemsCloned = Array.from(newItems);
      var itemsData = {};
      var rules = {}; // check number of slot in crate

      var nbrOccupied = nbrOccupiedSlotsInCrate(newItems);

      if (nbrOccupied > crateModeSlots[currentMode]) {
        rules[crateRules.maxSlot.type] = _objectSpread({}, crateRules.maxSlot);
      } else if (crateModeSlots[currentMode] === 21 && nbrOccupied <= 10) {
        rules[crateRules.compactSlot.type] = _objectSpread({}, crateRules.compactSlot);
      } // check the number of EEM connectors available for all Kasli


      var idxK = itemsCloned.reduce(function (prev, next, i) {
        if (next.type === 'kasli' || next.type === 'kasli-backplane') {
          prev.push(i);
        }

        return prev;
      }, []);

      for (var _i2 = 0; _i2 <= idxK.length - 1; _i2++) {
        var slots = void 0;
        var nbUsedSlot = 0;
        var nbrCurrentClock = 0;
        var idx = idxK[_i2];

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

        if (_i2 == 0) {
          var slots_need_resource = itemsCloned.slice(0, idx);
          var idx_need = slots_need_resource.findIndex(function (e) {
            return 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 = _objectSpread({}, itemsCloned[idx_need].rules.resources);
              } else {
                itemsData[idx_need].warnings = {};
                itemsData[idx_need].warnings.resources = _objectSpread({}, itemsCloned[idx_need].rules.resources);
              }
            } else {
              itemsData[idx_need] = _objectSpread({}, itemsCloned[idx_need]);
              itemsData[idx_need].warnings = {};
              itemsData[idx_need].warnings.resources = _objectSpread({}, itemsCloned[idx_need].rules.resources);
            }
          }
        }

        nbUsedSlot = slots.filter(function (item) {
          return item.type !== 'idc-bnc';
        }).reduce(function (prev, next) {
          return prev + next.slotOccupied;
        }, 0);
        nbrCurrentClock = slots.reduce(function (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] = _objectSpread({}, itemsCloned[idx]);
          itemsData[idx].nbrCurrentSlot = nbUsedSlot;
          itemsData[idx].nbrCurrentClock = nbrCurrentClock;
          itemsData[idx].warnings = {};
        }

        if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
          if (itemsCloned[idx].rules.maxSlot.message) {
            rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot);
          }

          itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning);
        }

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

        if (itemsCloned.length > idx + 1) {
          var ddkali = itemsCloned[idx + 1];

          if (ddkali.type === 'kasli' || ddkali.type === 'kasli-backplane') {
            rules[ddkali.rules.follow.type] = _objectSpread({}, ddkali.rules.follow);
          }
        }
      }

      if (idxK.length === 0) {
        var _slots_need_resource = itemsCloned.slice(0);

        var _idx_need = _slots_need_resource.findIndex(function (e) {
          return 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 = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
            } else {
              itemsData[_idx_need].warnings = {};
              itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
            }
          } else {
            itemsData[_idx_need] = _objectSpread({}, itemsCloned[_idx_need]);
            itemsData[_idx_need].warnings = {};
            itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
          }
        }
      } // check number of clock connector available


      var idxC = itemsCloned.reduce(function (prev, next, i) {
        if (next.type === 'kasli' || next.type === 'kasli-backplane' || next.type === 'clocker') {
          prev.push(i);
        }

        return prev;
      }, []);

      for (var _i3 = 0; _i3 <= idxC.length - 1; _i3++) {
        var _slots = void 0;

        var _nbrCurrentClock = 0;
        var _idx = idxC[_i3];

        if (_i3 !== idxC.length - 1) {
          _slots = itemsCloned.slice(_idx + 1, idxC[_i3 + 1]);
        } else {
          _slots = itemsCloned.slice(_idx + 1);
        }

        _nbrCurrentClock = _slots.reduce(function (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] = _objectSpread({}, itemsCloned[_idx]);
          itemsData[_idx].nbrCurrentClock = _nbrCurrentClock;
          itemsData[_idx].warnings = {};
        }

        if (_nbrCurrentClock > itemsCloned[_idx].nbrClockMax) {
          rules[itemsCloned[_idx].rules.maxClock.type] = _objectSpread({}, itemsCloned[_idx].rules.maxClock);
          itemsData[_idx].warnings.maxClockWarning = _objectSpread({}, itemsCloned[_idx].rules.maxClockWarning);
        }
      } // check for number of recommanded EEM connectors


      ['novo', 'urukul', 'koster'].map(function (_type) {
        if (itemsCloned.find(function (elem) {
          return elem.type === _type;
        })) {
          rules[_this11.state.items[_type].rules.connectors.type] = _objectSpread({}, _this11.state.items[_type].rules.connectors);
        }

        return _type;
      });

      if (itemsCloned.find(function (elem) {
        return elem.type === 'urukul';
      })) {
        if (this.state.items['urukul'].rules.info) {
          rules[this.state.items['urukul'].rules.info.type] = _objectSpread({}, this.state.items['urukul'].rules.info);
        }
      } // check if IDC-BNC is correctly positionned (after Zotino or HD68)


      var idxIDCBNC = itemsCloned.reduce(function (prev, next, i) {
        if (next.type === 'idc-bnc') {
          prev.push(i);
        }

        return prev;
      }, []);

      for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
        var ce = idxIDCBNC[i];
        var shouldWarning = false;

        if (ce == 0) {
          shouldWarning = true;
        } else if (ce >= 1) {
          var pe = idxIDCBNC[i] - 1;

          if (itemsCloned[pe].type !== 'zotino' && itemsCloned[pe].type !== 'hd68' && itemsCloned[pe].type !== 'idc-bnc') {
            shouldWarning = true;
          }
        }

        if (shouldWarning) {
          itemsData[ce] = _objectSpread({}, itemsCloned[ce]);
          itemsData[ce].warnings = {};
          itemsData[ce].warnings.wrong = _objectSpread({}, itemsCloned[ce].rules.wrong);
        }
      } // check number of IDC-BNC adapters for a Zotino and HD68-IDC


      var idxZH = itemsCloned.reduce(function (prev, next, i) {
        if (next.type === 'zotino' || next.type === 'hd68') {
          prev.push(i);
        }

        return prev;
      }, []);

      var _loop = function _loop(_i4) {
        var slots = void 0;
        var nbUsedSlot = 0;
        var idx = idxZH[_i4];

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

        var stopCount = false;
        nbUsedSlot = slots.reduce(function (prev, next, ci, ca) {
          if (ci === 0 && next.type === 'idc-bnc') {
            return prev + 1;
          } else if (ca[0].type === 'idc-bnc' && ci > 0 && ca[ci - 1].type === 'idc-bnc') {
            if (next.type !== 'idc-bnc') {
              stopCount = true;
            }

            return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0);
          }

          return prev;
        }, 0);

        if (idx in itemsData) {
          itemsData[idx].nbrCurrentSlot = nbUsedSlot;

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

        if (nbUsedSlot > 0) {
          if (itemsCloned[idx].rules.maxSlot.message) {
            rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot);
          }
        }

        if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
          itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning);
        } // check if HD68-IDC has at least 1 IDC-BNC adapter


        if (itemsCloned[idx].type === 'hd68') {
          var _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 = _objectSpread({}, itemsCloned[idx].rules.minAdapter);
            } else {
              itemsData[idx] = _objectSpread({}, itemsCloned[idx]);
              itemsData[idx].warnings = {};
              itemsData[idx].warnings.minAdapter = _objectSpread({}, itemsCloned[idx].rules.minAdapter);
            }
          }
        }
      };

      for (var _i4 = 0; _i4 <= idxZH.length - 1; _i4++) {
        _loop(_i4);
      } // update state with rules


      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            itemsData: _objectSpread({}, itemsData)
          })
        }),
        rules: _objectSpread({}, rules)
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$state2 = this.state,
          currency = _this$state2.currency,
          currentItemHovered = _this$state2.currentItemHovered,
          currentMode = _this$state2.currentMode,
          crateModeSlots = _this$state2.crateModeSlots,
          crateModeItems = _this$state2.crateModeItems,
          items = _this$state2.items,
          columns = _this$state2.columns,
          rules = _this$state2.rules,
          mobileSideMenuShouldOpen = _this$state2.mobileSideMenuShouldOpen,
          newCardJustAdded = _this$state2.newCardJustAdded;
      var isMobile = window.deviceIsMobile();
      return React.createElement(DragDropContext, {
        onDragEnd: this.handleOnDragEnd
      }, React.createElement(Layout, {
        className: "shop",
        mobileSideMenuShouldOpen: mobileSideMenuShouldOpen,
        isMobile: isMobile,
        newCardJustAdded: newCardJustAdded,
        onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
        aside: React.createElement(Backlog, {
          currency: currency,
          items: items,
          data: columns['backlog'],
          onClickAddItem: this.handleClickAddItem,
          onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
          isMobile: isMobile
        }),
        main: React.createElement(OrderPanel, {
          onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
          isMobile: isMobile,
          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: React.createElement(CrateMode, {
            items: crateModeItems,
            mode: currentMode,
            onClickMode: this.handleCrateModeChange
          }),
          crate: React.createElement(Crate, {
            cart: React.createElement(Cart, {
              nbrSlots: crateModeSlots[currentMode],
              data: columns['cart'],
              isMobile: isMobile,
              itemHovered: currentItemHovered,
              onToggleProgress: this.handleToggleItemProgress,
              onToggleWarning: this.handleToggleItemWarning,
              onToggleOverlayRemove: this.handleToggleOverlayRemove,
              onClickRemoveItem: this.handleDeleteItem
            }),
            rules: Object.values(rules).filter(function (rule) {
              return rule;
            })
          }),
          summaryPrice: React.createElement(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
          }),
          form: React.createElement(OrderForm, {
            onClickSubmit: this.handleClickSubmit
          })
        })
      }));
    }
  }]);

  return Shop;
}(React.PureComponent);

ReactDOM.render(React.createElement(Shop, {
  data: data
}), document.querySelector('#root-shop'));