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) { "@babel/helpers - typeof"; 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 _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 _createSuper(Derived) { return function () { var Super = _getPrototypeOf(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }

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

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

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(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 axios = window.axios;

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);

  var _super = _createSuper(Layout);

  _createClass(Layout, 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,
        onClickCloseRFQFeedback: PropTypes.func,
        RFQBodyType: PropTypes.string,
        RFQBodyOrder: PropTypes.string,
        onClickLoadCustomConf: PropTypes.func,
        items: PropTypes.object
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        mobileSideMenuShouldOpen: false
      };
    }
  }]);

  function Layout(props) {
    var _this;

    _classCallCheck(this, Layout);

    _this = _super.call(this, props);
    _this.state = {
      customconf: '',
      error: null
    };
    _this.handleCustomConfig = _this.handleCustomConfig.bind(_assertThisInitialized(_this));
    _this.handleClickLoad = _this.handleClickLoad.bind(_assertThisInitialized(_this));
    _this.checkValidation = _this.checkValidation.bind(_assertThisInitialized(_this)); // retrieve list of available pn

    var items_keys = Object.keys(props.items);
    _this.list_pn = items_keys.map(function (key) {
      return props.items[key].name_number;
    });
    return _this;
  }

  _createClass(Layout, [{
    key: "handleCustomConfig",
    value: function handleCustomConfig(e) {
      var value = e.target.value;
      this.checkValidation(value);
    }
  }, {
    key: "checkValidation",
    value: function checkValidation(conf) {
      var conf_obj;

      if (!conf) {
        conf = this.state.customconf;
      }

      try {
        conf_obj = JSON.parse(conf);
      } catch (e) {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }

      if (!conf_obj) {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }

      if ((!conf_obj.items || !conf_obj.type) && (Object.prototype.toString.call(conf_obj.items) !== '[object Array]' || Object.prototype.toString.call(conf_obj.type) !== '[object String]')) {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }

      if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }

      conf_obj.items.map(function (item) {
        try {
          return JSON.parse(item);
        } catch (e) {
          return null;
        }
      });
      conf_obj.items = conf_obj.items.filter(function (item) {
        return item;
      });

      if (conf_obj.items.filter(function (item) {
        return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]';
      }).length > 0) {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }

      conf_obj.items = conf_obj.items.map(function (item) {
        return {
          pn: item.pn
        };
      });
      var self = this;
      var unknow_pn = conf_obj.items.filter(function (item_pn) {
        return self.list_pn.includes(item_pn.pn) === false;
      }).map(function (item_pn) {
        return item_pn.pn;
      });

      if (unknow_pn.length > 0) {
        return this.setState(_objectSpread({}, this.state, {
          customconf: conf,
          customconf_ready: null,
          error: "".concat(unknow_pn.join(', '), " unknown").concat(unknow_pn.length > 1 ? 's' : '', " pn number")
        }));
      }

      this.setState(_objectSpread({}, this.state, {
        customconf: conf,
        error: null,
        customconf_ready: conf_obj
      }));
    }
  }, {
    key: "handleClickLoad",
    value: function handleClickLoad() {
      this.checkValidation();

      if (this.props.onClickLoadCustomConf) {
        this.props.onClickLoadCustomConf(this.state.customconf_ready);
      }
    }
  }, {
    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,
          onClickCloseRFQFeedback = _this$props.onClickCloseRFQFeedback,
          showRFQFeedback = _this$props.showRFQFeedback,
          RFQBodyType = _this$props.RFQBodyType,
          RFQBodyOrder = _this$props.RFQBodyOrder;
      return /*#__PURE__*/React.createElement("div", {
        className: "layout"
      }, /*#__PURE__*/React.createElement("aside", {
        className: 'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')
      }, aside), mobileSideMenuShouldOpen ? /*#__PURE__*/React.createElement("section", {
        className: "main",
        onClick: onClickToggleMobileSideMenu
      }, main) : /*#__PURE__*/React.createElement("section", {
        className: "main"
      }, main), isMobile && newCardJustAdded ? /*#__PURE__*/React.createElement("div", {
        className: "feedback-add-success"
      }, "\u2713 added") : null, /*#__PURE__*/React.createElement("div", {
        "class": "modal fade ".concat(showRFQFeedback ? 'show' : ''),
        style: {
          'display': showRFQFeedback ? 'block' : 'none'
        },
        id: "exampleModal",
        tabindex: "-1",
        role: "dialog",
        "aria-labelledby": "exampleModalLabel",
        "aria-hidden": "true"
      }, /*#__PURE__*/React.createElement("div", {
        "class": "modal-dialog",
        role: "document"
      }, /*#__PURE__*/React.createElement("div", {
        "class": "modal-content"
      }, /*#__PURE__*/React.createElement("div", {
        "class": "modal-body rfqFeedback"
      }, /*#__PURE__*/React.createElement("div", {
        className: "d-flex w-100"
      }, RFQBodyType === 'email' ? /*#__PURE__*/React.createElement("div", {
        className: "d-flex"
      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("img", {
        width: "30px",
        src: "/images/shop/icon-done.svg",
        alt: "close"
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          'padding': '0 .5em'
        }
      }, "We've received your request and will be in contact soon.")) : null, RFQBodyType === 'show' ? /*#__PURE__*/React.createElement("p", null, RFQBodyOrder) : null, RFQBodyType === 'import' ? /*#__PURE__*/React.createElement("div", {
        className: "w-100"
      }, /*#__PURE__*/React.createElement("form", {
        className: "form w-100"
      }, /*#__PURE__*/React.createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/React.createElement("p", {
        className: "small"
      }, "Input the JSON description below. Should be something like:", /*#__PURE__*/React.createElement("br", null), JSON.stringify({
        "items": [{
          "pn": "1124"
        }, {
          "pn": "2118"
        }, {
          "pn": "2118"
        }, {
          "pn": "2128"
        }],
        "type": "desktop"
      }))), /*#__PURE__*/React.createElement("div", {
        className: "form-group w-100"
      }, /*#__PURE__*/React.createElement("textarea", {
        onChange: this.handleCustomConfig,
        value: this.state.customconf,
        className: "form-control w-100",
        rows: "5",
        placeholder: "Input JSON description here."
      })), this.state.error ? /*#__PURE__*/React.createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/React.createElement("p", {
        className: "text-danger"
      }, this.state.error)) : null), /*#__PURE__*/React.createElement("div", {
        className: "d-flex flex-column flex-sm-row justify-content-end"
      }, /*#__PURE__*/React.createElement("a", {
        type: "button",
        onClick: onClickCloseRFQFeedback,
        "class": "btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2"
      }, "Close"), /*#__PURE__*/React.createElement("a", {
        type: "button",
        onClick: this.handleClickLoad,
        "class": "btn btn-sm btn-primary m-0 ml-sm-2 ".concat(this.state.error ? 'disabled' : '')
      }, "Load configuration"))) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
        onClick: onClickCloseRFQFeedback
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-close.svg",
        alt: "close"
      })))))))), /*#__PURE__*/React.createElement("div", {
        onClick: onClickCloseRFQFeedback,
        className: "modal-backdrop fade ".concat(showRFQFeedback ? 'show' : ''),
        style: {
          'display': showRFQFeedback ? 'initial' : 'none'
        }
      }));
    }
  }]);

  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);

  var _super2 = _createSuper(ProductItem);

  _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 _this2;

    _classCallCheck(this, ProductItem);

    _this2 = _super2.call(this, props);
    _this2.handleOnClickAddItem = _this2.handleOnClickAddItem.bind(_assertThisInitialized(_this2));
    return _this2;
  }

  _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 && /*#__PURE__*/React.createElement("ul", null, specs.map(function (spec, index) {
        return /*#__PURE__*/React.createElement("li", {
          key: index
        }, spec);
      }));
      return /*#__PURE__*/React.createElement("section", {
        className: "productItem"
      }, /*#__PURE__*/React.createElement("div", {
        className: "content"
      }, /*#__PURE__*/React.createElement("h3", {
        style: {
          'margin-bottom': name_codename ? '5px' : '20px'
        }
      }, name), name_codename ? /*#__PURE__*/React.createElement("p", null, name_codename) : null, /*#__PURE__*/React.createElement("div", {
        className: "price"
      }, "".concat(currency, " ").concat(formatMoney(price))), render_specs), /*#__PURE__*/React.createElement("div", {
        className: "content"
      }, /*#__PURE__*/React.createElement("button", {
        onClick: this.handleOnClickAddItem.bind(this, index, true)
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      })), /*#__PURE__*/React.createElement(Draggable, {
        draggableId: id,
        index: index
      }, function (provided, snapshot) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/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 && /*#__PURE__*/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);

  var _super3 = _createSuper(ProductCartItem);

  _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,
        shouldTooltipWarningClassInverted: PropTypes.bool
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        hovered: false
      };
    }
  }]);

  function ProductCartItem(props) {
    var _this3;

    _classCallCheck(this, ProductCartItem);

    _this3 = _super3.call(this, props);
    _this3.handleOnMouseEnterItem = _this3.handleOnMouseEnterItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnMouseLeaveItem = _this3.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnMouseEnterWarningItem = _this3.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnMouseLeaveWarningItem = _this3.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnMouseEnterRemoveItem = _this3.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnMouseLeaveRemoveItem = _this3.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(_this3));
    _this3.handleOnClickRemoveItem = _this3.handleOnClickRemoveItem.bind(_assertThisInitialized(_this3));
    return _this3;
  }

  _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 _this4 = this;

      var _this$props3 = this.props,
          hovered = _this$props3.hovered,
          model = _this$props3.model,
          data = _this$props3.data,
          index = _this$props3.index,
          shouldTooltipWarningClassInverted = _this$props3.shouldTooltipWarningClassInverted;
      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':
            render_progress = /*#__PURE__*/React.createElement("div", {
              className: "k-popup-connectors"
            }, /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")), /*#__PURE__*/React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
            break;

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

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

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

          default:
            break;
        }
      }

      return /*#__PURE__*/React.createElement(Draggable, {
        draggableId: model.id,
        index: index
      }, function (provided, snapshot) {
        return /*#__PURE__*/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: _this4.handleOnMouseEnterRemoveItem.bind(_this4, index),
          onMouseLeave: _this4.handleOnMouseLeaveRemoveItem.bind(_this4, index)
        }), /*#__PURE__*/React.createElement("div", {
          style: {
            'height': '24px'
          },
          className: "progress-container warning",
          onMouseEnter: _this4.handleOnMouseEnterWarningItem.bind(_this4, index, warning),
          onMouseLeave: _this4.handleOnMouseLeaveWarningItem.bind(_this4, index, warning)
        }, warning && /*#__PURE__*/React.createElement("img", {
          className: "alert-warning",
          src: warning ? "/images".concat(warning.icon) : null
        }), warning && model.showWarning && /*#__PURE__*/React.createElement("div", {
          className: "k-popup-warning ".concat(shouldTooltipWarningClassInverted ? 'inverted' : '')
        }, /*#__PURE__*/React.createElement("p", {
          className: "rule warning"
        }, /*#__PURE__*/React.createElement("i", null, warning.message)))), /*#__PURE__*/React.createElement("h6", null, model.name_number), /*#__PURE__*/React.createElement("div", {
          style: {
            'height': '350px'
          },
          onMouseEnter: _this4.handleOnMouseEnterRemoveItem.bind(_this4, index)
        }, /*#__PURE__*/React.createElement("img", {
          className: "item-cart",
          src: "/images".concat(model.image)
        })), /*#__PURE__*/React.createElement("div", {
          style: {
            'display': model.showOverlayRemove ? 'flex' : 'none'
          },
          className: "overlayRemove",
          onClick: _this4.handleOnClickRemoveItem.bind(_this4, index)
        }, /*#__PURE__*/React.createElement("img", {
          src: "/images/shop/icon-remove.svg",
          alt: "rm"
        }), /*#__PURE__*/React.createElement("p", null, "Remove")), /*#__PURE__*/React.createElement("div", {
          style: {
            'height': '22px'
          },
          className: "progress-container",
          onMouseEnter: _this4.handleOnMouseEnterItem.bind(_this4, index),
          onMouseLeave: _this4.handleOnMouseLeaveItem.bind(_this4, index)
        }, model.nbrSlotMax > 0 && /*#__PURE__*/React.createElement("div", {
          className: "nbr-connectors"
        }, /*#__PURE__*/React.createElement("div", {
          style: _objectSpread({}, nbrConnectorsStyle(data))
        })), model.nbrClockMax > 0 && /*#__PURE__*/React.createElement("div", {
          className: "nbr-clocks"
        }, /*#__PURE__*/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);

  var _super4 = _createSuper(FakePlaceholder);

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

    return _super4.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( /*#__PURE__*/React.createElement("div", {
          key: i,
          style: {
            display: isDraggingOver ? 'none' : 'block',
            border: '1px dashed #ccc',
            width: '45px',
            marginBottom: '5px'
          }
        }));
      }

      return /*#__PURE__*/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);

  var _super5 = _createSuper(Cart);

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

    return _super5.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 nbrOccupied = nbrOccupiedSlotsInCrate(data.items);
      var shouldTooltipWarningClassInverted = nbrSlots - nbrOccupied < 5;
      var products = data.items.map(function (item, index) {
        var itemData;

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

        return /*#__PURE__*/React.createElement(ProductCartItem, {
          isMobile: isMobile,
          hovered: item.id === itemHovered,
          key: item.id,
          index: index,
          data: itemData,
          shouldTooltipWarningClassInverted: shouldTooltipWarningClassInverted && index > 10,
          onToggleProgress: onToggleProgress,
          onToggleWarning: onToggleWarning,
          onToggleOverlayRemove: onToggleOverlayRemove,
          onClickRemoveItem: onClickRemoveItem,
          model: item
        });
      });
      return /*#__PURE__*/React.createElement(Droppable, {
        droppableId: data.id,
        direction: "horizontal"
      }, function (provided, snapshot) {
        return /*#__PURE__*/React.createElement("div", _extends({
          ref: provided.innerRef
        }, provided.droppableProps, {
          style: cartStyle(provided.droppableProps.style, snapshot),
          className: "items-cart-list"
        }), products, provided.placeholder && /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'none'
          }
        }, provided.placeholder), /*#__PURE__*/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);

  var _super6 = _createSuper(CrateMode);

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

  function CrateMode(props) {
    var _this5;

    _classCallCheck(this, CrateMode);

    _this5 = _super6.call(this, props);
    _this5.handleOnClickMode = _this5.handleOnClickMode.bind(_assertThisInitialized(_this5));
    return _this5;
  }

  _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 _this6 = this;

      var _this$props6 = this.props,
          mode = _this$props6.mode,
          items = _this$props6.items;
      return /*#__PURE__*/React.createElement("div", {
        className: "crate-mode"
      }, items.map(function (item) {
        return /*#__PURE__*/React.createElement("a", {
          key: item.id,
          className: mode == item.id ? 'active' : '',
          onClick: _this6.handleOnClickMode.bind(_this6, 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);

  var _super7 = _createSuper(Crate);

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

    return _super7.apply(this, arguments);
  }

  _createClass(Crate, [{
    key: "render",
    value: function render() {
      var _this$props7 = this.props,
          rules = _this$props7.rules,
          cart = _this$props7.cart;
      return /*#__PURE__*/React.createElement("div", {
        className: "crate"
      }, /*#__PURE__*/React.createElement("div", {
        className: "crate-products"
      }, cart, rules && rules.length > 0 && /*#__PURE__*/React.createElement("div", {
        className: "crate-info"
      }, rules.map(function (rule, index) {
        return /*#__PURE__*/React.createElement("p", {
          key: index,
          className: "rule",
          style: {
            'color': rule.color ? rule.color : 'inherit'
          }
        }, /*#__PURE__*/React.createElement("img", {
          src: "/images".concat(rule.icon)
        }), " ", /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/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);

  var _super8 = _createSuper(OrderPanel);

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

    return _super8.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,
          onClickOpenImport = _this$props8.onClickOpenImport;
      return /*#__PURE__*/React.createElement("section", {
        className: "panel"
      }, /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement("div", {
        className: "control"
      }, /*#__PURE__*/React.createElement("p", {
        className: "description"
      }, description), crateMode), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
        className: "btn btn-sm btn-outline-primary m-0 mb-2",
        style: {
          'cursor': 'pointer'
        },
        value: "Import JSON",
        onClick: onClickOpenImport
      })), isMobile ? /*#__PURE__*/React.createElement("div", {
        className: "mobileBtnDisplaySideMenu"
      }, /*#__PURE__*/React.createElement("button", {
        onClick: onClickToggleMobileSideMenu
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      }))) : null, crate, /*#__PURE__*/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,
        onClickOpenImport: PropTypes.func
      };
    }
  }]);

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


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

  var _super9 = _createSuper(OrderForm);

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

  function OrderForm(props) {
    var _this7;

    _classCallCheck(this, OrderForm);

    _this7 = _super9.call(this, props);
    _this7.state = {
      note: '',
      email: '',
      error: {
        note: null,
        email: null
      },
      empty: {
        note: null,
        email: null
      }
    };
    _this7.handleEmail = _this7.handleEmail.bind(_assertThisInitialized(_this7));
    _this7.handleNote = _this7.handleNote.bind(_assertThisInitialized(_this7));
    _this7.handleSubmit = _this7.handleSubmit.bind(_assertThisInitialized(_this7));
    _this7.resetEmptyError = _this7.resetEmptyError.bind(_assertThisInitialized(_this7));
    _this7.checkValidation = _this7.checkValidation.bind(_assertThisInitialized(_this7));
    return _this7;
  }

  _createClass(OrderForm, [{
    key: "checkValidation",
    value: function checkValidation() {
      var isValid = true;

      var validationFields = _objectSpread({}, this.state);

      var _this$validateEmail = this.validateEmail(this.state.email),
          isEmailEmpty = _this$validateEmail.isEmpty,
          isEmailError = _this$validateEmail.isError;

      validationFields = _objectSpread({}, validationFields, {
        error: _objectSpread({}, this.state.error, {
          email: isEmailError
        }),
        empty: _objectSpread({}, this.state.empty, {
          email: isEmailEmpty
        })
      });
      this.setState(validationFields);
      isValid = !isEmailEmpty && !isEmailError;
      return isValid;
    }
  }, {
    key: "validateEmail",
    value: function validateEmail(value) {
      var isEmpty = null;
      var isError = null;
      var t = this.props.t;

      if (!value || value.trim() === '') {
        isEmpty = true;
      } else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
        isError = {
          message: 'Your email is incomplete'
        };
      }

      return {
        isEmpty: isEmpty,
        isError: isError
      };
    }
  }, {
    key: "validateNote",
    value: function validateNote(value) {
      var isEmpty = null;

      if (!value || value.trim() === '') {
        isEmpty = true;
      }

      return {
        isEmpty: isEmpty
      };
    }
  }, {
    key: "resetEmptyError",
    value: function resetEmptyError(key) {
      this.setState(_objectSpread({}, this.state, {
        error: _objectSpread({}, this.state.error, _defineProperty({}, key, null)),
        empty: _objectSpread({}, this.state.empty, _defineProperty({}, key, null))
      }));
    }
  }, {
    key: "handleEmail",
    value: function handleEmail(e) {
      var value = e.target.value;

      var _this$validateEmail2 = this.validateEmail(value),
          isEmpty = _this$validateEmail2.isEmpty,
          isError = _this$validateEmail2.isError;

      this.setState(_objectSpread({}, this.state, {
        email: value,
        error: _objectSpread({}, this.state.error, {
          email: isError
        }),
        empty: _objectSpread({}, this.state.empty, {
          email: isEmpty
        })
      }));
    }
  }, {
    key: "handleNote",
    value: function handleNote(e) {
      var value = e.target.value;
      this.setState(_objectSpread({}, this.state, {
        note: value
      }));
    }
  }, {
    key: "handleSubmit",
    value: function handleSubmit(event) {
      event.preventDefault();

      if (this.props.onClickSubmit) {
        // check validation input fields
        var isValidated = this.checkValidation();

        if (!isValidated) {
          return false;
        }

        this.props.onClickSubmit(this.state.note, this.state.email);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var handleEmail = this.handleEmail,
          handleNote = this.handleNote,
          resetEmptyError = this.resetEmptyError,
          handleSubmit = this.handleSubmit;
      var onClickShow = this.props.onClickShow;
      var _this$state = this.state,
          email = _this$state.email,
          note = _this$state.note,
          error = _this$state.error,
          empty = _this$state.empty;
      var _this$props9 = this.props,
          isProcessing = _this$props9.isProcessing,
          isProcessingComplete = _this$props9.isProcessingComplete;
      return /*#__PURE__*/React.createElement("div", {
        className: "summary-form"
      }, /*#__PURE__*/React.createElement("form", {
        onSubmit: handleSubmit,
        noValidate: true
      }, /*#__PURE__*/React.createElement("input", {
        className: "".concat(error && error.email ? 'errorField' : ''),
        type: "email",
        placeholder: "Email",
        onFocus: function onFocus() {
          return resetEmptyError('email');
        },
        onChange: handleEmail,
        onBlur: handleEmail,
        value: email
      }), empty && empty.email ? /*#__PURE__*/React.createElement("div", {
        className: "error"
      }, /*#__PURE__*/React.createElement("small", null, "Required")) : null, error && error.email ? /*#__PURE__*/React.createElement("div", {
        className: "error"
      }, /*#__PURE__*/React.createElement("small", null, "Your email is incomplete")) : null, /*#__PURE__*/React.createElement("textarea", {
        onChange: handleNote,
        value: note,
        rows: "5",
        placeholder: "Additional notes"
      }), /*#__PURE__*/React.createElement("div", {
        className: "d-flex flex-column flex-sm-row justify-content-between"
      }, /*#__PURE__*/React.createElement("input", {
        className: "btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 mr-sm-2",
        style: {
          'cursor': 'pointer',
          'fontWeight': '700'
        },
        value: "Show JSON",
        onClick: onClickShow
      }), /*#__PURE__*/React.createElement("input", {
        className: "btn btn-primary w-100 m-0  ml-sm-2",
        type: "submit",
        value: "".concat(isProcessing ? 'Processing ...' : 'Request quote')
      }))));
    }
  }]);

  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);

  var _super10 = _createSuper(OrderSumary);

  _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 _this8;

    _classCallCheck(this, OrderSumary);

    _this8 = _super10.call(this, props);
    _this8.handleOnDeleteItem = _this8.handleOnDeleteItem.bind(_assertThisInitialized(_this8));
    _this8.handleOnDeleteAllItems = _this8.handleOnDeleteAllItems.bind(_assertThisInitialized(_this8));
    _this8.handleOnMouseEnterItem = _this8.handleOnMouseEnterItem.bind(_assertThisInitialized(_this8));
    _this8.handleOnMouseLeaveItem = _this8.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this8));
    _this8.handleOnClickSelectItem = _this8.handleOnClickSelectItem.bind(_assertThisInitialized(_this8));
    return _this8;
  }

  _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 _this9 = this;

      var _this$props10 = this.props,
          currency = _this$props10.currency,
          modes = _this$props10.modes,
          currentMode = _this$props10.currentMode,
          summary = _this$props10.summary,
          itemsData = _this$props10.itemsData;
      var mode = modes.find(function (elem) {
        return elem.id === currentMode;
      });
      return /*#__PURE__*/React.createElement("div", {
        className: "summary-price"
      }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
        colSpan: "2",
        className: "summary-remove-all"
      }, /*#__PURE__*/React.createElement("span", {
        className: "item-card-name"
      }, "Remove all cards"), /*#__PURE__*/React.createElement("button", {
        onClick: this.handleOnDeleteAllItems
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-remove.svg"
      })))), mode && /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
        className: "item-card-name"
      }, mode.name), /*#__PURE__*/React.createElement("td", {
        className: "price"
      }, /*#__PURE__*/React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(mode.price)), /*#__PURE__*/React.createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-remove.svg"
      }))), /*#__PURE__*/React.createElement("span", {
        style: {
          'display': 'inline-block',
          'width': '30px'
        }
      }, "\xA0")))), /*#__PURE__*/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 /*#__PURE__*/React.createElement("tr", {
          key: item.id,
          className: "hoverable ".concat(item.selected ? 'selected' : ''),
          onClick: _this9.handleOnClickSelectItem.bind(_this9, index),
          onMouseEnter: _this9.handleOnMouseEnterItem.bind(_this9, item.id),
          onMouseLeave: _this9.handleOnMouseLeaveItem
        }, /*#__PURE__*/React.createElement("td", {
          className: "item-card-name"
        }, /*#__PURE__*/React.createElement("div", null, "".concat(item.name_number, " ").concat(item.name, " ").concat(item.name_codename))), /*#__PURE__*/React.createElement("td", {
          className: "price"
        }, /*#__PURE__*/React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(item.price)), /*#__PURE__*/React.createElement("button", {
          onClick: _this9.handleOnDeleteItem.bind(_this9, index)
        }, /*#__PURE__*/React.createElement("img", {
          src: "/images/shop/icon-remove.svg"
        }))), warning && /*#__PURE__*/React.createElement("img", {
          style: {
            'marginLeft': '10px'
          },
          className: "alert-warning",
          src: "/images/".concat(warning.icon)
        }), !warning && /*#__PURE__*/React.createElement("span", {
          style: {
            'display': 'inline-block',
            'width': '30px'
          }
        }, "\xA0")));
      })), /*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
        className: "item-card-name"
      }, "Price estimate"), /*#__PURE__*/React.createElement("td", {
        className: "price"
      }, /*#__PURE__*/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)), /*#__PURE__*/React.createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, /*#__PURE__*/React.createElement("img", {
        src: "/images/shop/icon-remove.svg",
        alt: "icon remove"
      }))), /*#__PURE__*/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);

  var _super11 = _createSuper(Backlog);

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

    return _super11.apply(this, arguments);
  }

  _createClass(Backlog, [{
    key: "render",
    value: function render() {
      var _this$props11 = this.props,
          currency = _this$props11.currency,
          data = _this$props11.data,
          items = _this$props11.items,
          onClickAddItem = _this$props11.onClickAddItem,
          onClickToggleMobileSideMenu = _this$props11.onClickToggleMobileSideMenu,
          isMobile = _this$props11.isMobile;
      var ordered_items = data.itemIds.map(function (itemId) {
        return items[itemId];
      });
      var products = ordered_items.map(function (item, index) {
        return /*#__PURE__*/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 /*#__PURE__*/React.createElement(Droppable, {
        droppableId: data.id,
        isDropDisabled: true
      }, function (provided) {
        return /*#__PURE__*/React.createElement("div", _extends({
          className: "backlog-container",
          ref: provided.innerRef
        }, provided.droppableProps), isMobile ? /*#__PURE__*/React.createElement("div", {
          className: "mobileCloseMenu"
        }, /*#__PURE__*/React.createElement("button", {
          onClick: onClickToggleMobileSideMenu
        }, /*#__PURE__*/React.createElement("img", {
          src: "/images/shop/icon-close-white.svg",
          alt: "add"
        }))) : null, products, provided.placeholder && /*#__PURE__*/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);

  var _super12 = _createSuper(Shop);

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

  function Shop(props) {
    var _this10;

    _classCallCheck(this, Shop);

    _this10 = _super12.call(this, props);
    _this10.state = _this10.props.data;
    _this10.handleCrateModeChange = _this10.handleCrateModeChange.bind(_assertThisInitialized(_this10));
    _this10.handleOnDragEnd = _this10.handleOnDragEnd.bind(_assertThisInitialized(_this10));
    _this10.handleDeleteItem = _this10.handleDeleteItem.bind(_assertThisInitialized(_this10));
    _this10.handleDeleteAllItems = _this10.handleDeleteAllItems.bind(_assertThisInitialized(_this10));
    _this10.handleMouseEnterItem = _this10.handleMouseEnterItem.bind(_assertThisInitialized(_this10));
    _this10.handleMouseLeaveItem = _this10.handleMouseLeaveItem.bind(_assertThisInitialized(_this10));
    _this10.handleClickAddItem = _this10.handleClickAddItem.bind(_assertThisInitialized(_this10));
    _this10.checkAlerts = _this10.checkAlerts.bind(_assertThisInitialized(_this10));
    _this10.handleToggleItemProgress = _this10.handleToggleItemProgress.bind(_assertThisInitialized(_this10));
    _this10.handleToggleItemWarning = _this10.handleToggleItemWarning.bind(_assertThisInitialized(_this10));
    _this10.handleClickSelectItem = _this10.handleClickSelectItem.bind(_assertThisInitialized(_this10));
    _this10.handleClickSubmit = _this10.handleClickSubmit.bind(_assertThisInitialized(_this10));
    _this10.handleToggleOverlayRemove = _this10.handleToggleOverlayRemove.bind(_assertThisInitialized(_this10));
    _this10.handleClickToggleMobileSideMenu = _this10.handleClickToggleMobileSideMenu.bind(_assertThisInitialized(_this10));
    _this10.handleClickCloseRFQFeedback = _this10.handleClickCloseRFQFeedback.bind(_assertThisInitialized(_this10));
    _this10.handleClickShowOrder = _this10.handleClickShowOrder.bind(_assertThisInitialized(_this10));
    _this10.handleClickOpenImport = _this10.handleClickOpenImport.bind(_assertThisInitialized(_this10));
    _this10.handleLoadCustomConf = _this10.handleLoadCustomConf.bind(_assertThisInitialized(_this10));
    _this10.timer = null;
    return _this10;
  }

  _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 _this11 = 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 () {
          _this11.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: "handleClickShowOrder",
    value: function handleClickShowOrder() {
      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
        });
      }

      this.setState({
        isProcessing: false,
        shouldShowRFQFeedback: true,
        RFQBodyType: 'show',
        RFQBodyOrder: JSON.stringify(crate)
      });
    }
  }, {
    key: "handleClickOpenImport",
    value: function handleClickOpenImport() {
      this.setState({
        isProcessing: false,
        shouldShowRFQFeedback: true,
        RFQBodyType: 'import'
      });
    }
  }, {
    key: "handleLoadCustomConf",
    value: function handleLoadCustomConf(customconf) {
      if (!customconf) {
        return;
      }

      var items = this.props.data.items;
      var self = this;
      var new_items = [];
      this.setState(_objectSpread({}, this.state, {
        columns: _objectSpread({}, this.state.columns, {
          cart: _objectSpread({}, this.state.columns.cart, {
            items: []
          })
        })
      }), function () {
        customconf.items.map(function (item) {
          Object.keys(items).map(function (key) {
            if (item.pn && item.pn === items[key].name_number) {
              new_items.push(Object.assign(_objectSpread({}, items[key]), {
                id: uuidv4()
              }));
            }
          });
          return item;
        });
        this.setState(_objectSpread({}, this.state, {
          columns: _objectSpread({}, this.state.columns, {
            cart: _objectSpread({}, this.state.columns.cart, {
              items: new_items
            })
          }),
          currentMode: customconf.type
        }));
      });
    }
  }, {
    key: "handleClickSubmit",
    value: function handleClickSubmit(note, email) {
      var _this12 = this;

      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 data = this.props.data;
      this.setState({
        isProcessing: true
      });
      axios.post(data.API_RFQ, {
        email: email,
        note: note,
        configuration: JSON.stringify(crate)
      }).then(function (response) {
        _this12.setState({
          isProcessing: false,
          shouldShowRFQFeedback: true,
          RFQBodyType: 'email',
          isProcessingComplete: true
        });
      })["catch"](function (err) {
        _this12.setState({
          isProcessing: false
        }, function () {
          alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales[at]m-labs.hk");
        });
      });
    }
  }, {
    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: "handleClickCloseRFQFeedback",
    value: function handleClickCloseRFQFeedback() {
      this.setState({
        shouldShowRFQFeedback: false
      });
    }
  }, {
    key: "checkAlerts",
    value: function checkAlerts(prevItems, newItems) {
      var _this13 = this;

      console.log('--- START CHECKING CRATE WARNING ---');
      var _this$state2 = this.state,
          currentMode = _this$state2.currentMode,
          crateModeSlots = _this$state2.crateModeSlots,
          crateRules = _this$state2.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 === 'vhdcicarrier') {
          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 === 'vhdcicarrier') {
            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 === '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[_this13.state.items[_type].rules.connectors.type] = _objectSpread({}, _this13.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$state3 = this.state,
          currency = _this$state3.currency,
          currentItemHovered = _this$state3.currentItemHovered,
          currentMode = _this$state3.currentMode,
          crateModeSlots = _this$state3.crateModeSlots,
          crateModeItems = _this$state3.crateModeItems,
          items = _this$state3.items,
          columns = _this$state3.columns,
          rules = _this$state3.rules,
          mobileSideMenuShouldOpen = _this$state3.mobileSideMenuShouldOpen,
          newCardJustAdded = _this$state3.newCardJustAdded,
          isProcessing = _this$state3.isProcessing,
          shouldShowRFQFeedback = _this$state3.shouldShowRFQFeedback,
          RFQBodyType = _this$state3.RFQBodyType,
          RFQBodyOrder = _this$state3.RFQBodyOrder,
          isProcessingComplete = _this$state3.isProcessingComplete;
      var isMobile = window.deviceIsMobile();
      return /*#__PURE__*/React.createElement(DragDropContext, {
        onDragEnd: this.handleOnDragEnd
      }, /*#__PURE__*/React.createElement(Layout, {
        showRFQFeedback: shouldShowRFQFeedback,
        RFQBodyType: RFQBodyType,
        RFQBodyOrder: RFQBodyOrder,
        className: "shop",
        mobileSideMenuShouldOpen: mobileSideMenuShouldOpen,
        isMobile: isMobile,
        newCardJustAdded: newCardJustAdded,
        onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
        onClickCloseRFQFeedback: this.handleClickCloseRFQFeedback,
        onClickLoadCustomConf: this.handleLoadCustomConf,
        items: items,
        aside: /*#__PURE__*/React.createElement(Backlog, {
          currency: currency,
          items: items,
          data: columns['backlog'],
          onClickAddItem: this.handleClickAddItem,
          onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
          isMobile: isMobile
        }),
        main: /*#__PURE__*/React.createElement(OrderPanel, {
          onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
          onClickOpenImport: this.handleClickOpenImport,
          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: /*#__PURE__*/React.createElement(CrateMode, {
            items: crateModeItems,
            mode: currentMode,
            onClickMode: this.handleCrateModeChange
          }),
          crate: /*#__PURE__*/React.createElement(Crate, {
            cart: /*#__PURE__*/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: /*#__PURE__*/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: /*#__PURE__*/React.createElement(OrderForm, {
            isProcessingComplete: isProcessingComplete,
            processingComplete: this.handleProcessingComplete,
            isProcessing: isProcessing,
            onClickSubmit: this.handleClickSubmit,
            onClickShow: this.handleClickShowOrder
          })
        })
      }));
    }
  }]);

  return Shop;
}(React.PureComponent);

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