web2019/static/js/shop.min.js

'use strict';

var _react = _interopRequireDefault(require("react"));
var _axios = _interopRequireDefault(require("axios"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactBeautifulDnd = require("react-beautiful-dnd");
var _uuid = require("uuid");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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 { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : 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(o); 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) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
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(_objectSpread({}, style), custom);
  }
  if (removeAnim) {
    // cannot be 0, but make it super tiny
    custom.transitionDuration = '0.001s';
  }
  return _objectSpread(_objectSpread({}, style), custom);
};
var cartStyle = function cartStyle(style, snapshot) {
  var isDraggingOver = snapshot.isDraggingOver;
  return _objectSpread(_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, draggableSource, droppableDestination) {
  var destClone = Array.from(destination.items);
  destClone.splice(droppableDestination.index, 0, _objectSpread(_objectSpread({}, model[draggableSource]), {}, {
    id: (0, _uuid.v4)()
  }));
  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);
  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;
      try {
        conf_obj = JSON.parse(conf);
      } catch (e) {
        return this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }
      if (!conf_obj) {
        return this.setState(_objectSpread(_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(_objectSpread({}, this.state), {}, {
          customconf: conf,
          customconf_ready: null,
          error: 'invalid format'
        }));
      }
      if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
        return this.setState(_objectSpread(_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(_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(_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(_objectSpread({}, this.state), {}, {
        customconf: conf,
        error: null,
        customconf_ready: conf_obj
      }));
    }
  }, {
    key: "handleClickLoad",
    value: function handleClickLoad() {
      this.checkValidation(this.state.customconf);
      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["default"].createElement("div", {
        className: "layout"
      }, /*#__PURE__*/_react["default"].createElement("aside", {
        className: 'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')
      }, aside), mobileSideMenuShouldOpen ? /*#__PURE__*/_react["default"].createElement("section", {
        className: "main",
        onClick: onClickToggleMobileSideMenu
      }, main) : /*#__PURE__*/_react["default"].createElement("section", {
        className: "main"
      }, main), isMobile && newCardJustAdded ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "feedback-add-success"
      }, "\u2713 added") : null, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        "class": "modal-dialog",
        role: "document"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "class": "modal-content"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        "class": "modal-body rfqFeedback"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "d-flex w-100"
      }, RFQBodyType === 'email' ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "d-flex"
      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
        width: "30px",
        src: "/images/shop/icon-done.svg",
        alt: "close"
      })), /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          'padding': '0 .5em'
        }
      }, "We've received your request and will be in contact soon.")) : null, RFQBodyType === 'show' ? /*#__PURE__*/_react["default"].createElement("p", null, RFQBodyOrder) : null, RFQBodyType === 'import' ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "w-100"
      }, /*#__PURE__*/_react["default"].createElement("form", {
        className: "form w-100"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "small"
      }, "Input the JSON description below. Should be something like:", /*#__PURE__*/_react["default"].createElement("br", null), JSON.stringify({
        "items": [{
          "pn": "1124"
        }, {
          "pn": "2118"
        }, {
          "pn": "2118"
        }, {
          "pn": "2128"
        }],
        "type": "desktop"
      }))), /*#__PURE__*/_react["default"].createElement("div", {
        className: "form-group w-100"
      }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        className: "form-group"
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "text-danger"
      }, this.state.error)) : null), /*#__PURE__*/_react["default"].createElement("div", {
        className: "d-flex flex-column flex-sm-row justify-content-end"
      }, /*#__PURE__*/_react["default"].createElement("a", {
        type: "button",
        onClick: onClickCloseRFQFeedback,
        "class": "btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2"
      }, "Close"), /*#__PURE__*/_react["default"].createElement("a", {
        type: "button",
        onClick: this.handleClickLoad,
        "class": "btn btn-sm btn-primary m-0 ms-sm-2 ".concat(this.state.error ? 'disabled' : '')
      }, "Load configuration"))) : null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("button", {
        onClick: onClickCloseRFQFeedback
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-close.svg",
        alt: "close"
      })))))))), /*#__PURE__*/_react["default"].createElement("div", {
        onClick: onClickCloseRFQFeedback,
        className: "modal-backdrop fade ".concat(showRFQFeedback ? 'show' : ''),
        style: {
          'display': showRFQFeedback ? 'initial' : 'none'
        }
      }));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        aside: _propTypes["default"].any,
        main: _propTypes["default"].any,
        mobileSideMenuShouldOpen: _propTypes["default"].bool,
        isMobile: _propTypes["default"].bool,
        newCardJustAdded: _propTypes["default"].bool,
        onClickToggleMobileSideMenu: _propTypes["default"].func,
        onClickCloseRFQFeedback: _propTypes["default"].func,
        RFQBodyType: _propTypes["default"].string,
        RFQBodyOrder: _propTypes["default"].string,
        onClickLoadCustomConf: _propTypes["default"].func,
        items: _propTypes["default"].object
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        mobileSideMenuShouldOpen: false
      };
    }
  }]);
  return Layout;
}(_react["default"].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);
  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(id, tap, e) {
      if (this.props.onClickAddItem) {
        this.props.onClickAddItem(id, tap);
      }
      e.preventDefault();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
        id = _this$props2.id,
        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,
        datasheet_file = _this$props2.datasheet_file,
        datasheet_name = _this$props2.datasheet_name;
      var render_specs = specs && specs.length > 0 && /*#__PURE__*/_react["default"].createElement("ul", null, specs.map(function (spec, index) {
        return /*#__PURE__*/_react["default"].createElement("li", {
          key: index
        }, spec);
      }));
      var render_datasheet_link = datasheet_file && datasheet_name && /*#__PURE__*/_react["default"].createElement("div", {
        className: "ds"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        "class": "doc-icon"
      }), /*#__PURE__*/_react["default"].createElement("a", {
        href: datasheet_file,
        target: "_blank",
        rel: "noopener noreferrer"
      }, datasheet_name));
      return /*#__PURE__*/_react["default"].createElement("section", {
        className: "productItem"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "content"
      }, /*#__PURE__*/_react["default"].createElement("h3", {
        style: {
          'margin-bottom': name_codename ? '5px' : '20px'
        }
      }, name), name_codename ? /*#__PURE__*/_react["default"].createElement("p", null, name_codename) : null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "price"
      }, "".concat(currency, " ").concat(formatMoney(price))), render_specs, render_datasheet_link), /*#__PURE__*/_react["default"].createElement("div", {
        className: "content"
      }, /*#__PURE__*/_react["default"].createElement("button", {
        onClick: this.handleOnClickAddItem.bind(this, id, true)
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      })), /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
        draggableId: id
      }, function (provided, snapshot) {
        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].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["default"].createElement("img", {
          className: "simclone",
          src: image
        }));
      })));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        id: _propTypes["default"].string.isRequired,
        name: _propTypes["default"].string.isRequired,
        name_codename: _propTypes["default"].string,
        price: _propTypes["default"].number.isRequired,
        currency: _propTypes["default"].string.isRequired,
        image: _propTypes["default"].string.isRequired,
        specs: _propTypes["default"].array,
        datasheet_file: _propTypes["default"].string,
        datasheet_name: _propTypes["default"].string,
        onClickAddItem: _propTypes["default"].func
      };
    }
  }]);
  return ProductItem;
}(_react["default"].PureComponent);
/**
 * Component that renders a product.
 * Used in the crate
 */
var ProductCartItem = /*#__PURE__*/function (_React$PureComponent3) {
  _inherits(ProductCartItem, _React$PureComponent3);
  var _super3 = _createSuper(ProductCartItem);
  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["default"].createElement("div", {
              className: "k-popup-connectors"
            }, /*#__PURE__*/_react["default"].createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")), /*#__PURE__*/_react["default"].createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
            break;
          case 'vhdcicarrier':
            render_progress = /*#__PURE__*/_react["default"].createElement("div", {
              className: "k-popup-connectors"
            }, /*#__PURE__*/_react["default"].createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")));
            break;
          case 'zotino':
          case 'hd68':
            render_progress = /*#__PURE__*/_react["default"].createElement("div", {
              className: "k-popup-connectors"
            }, /*#__PURE__*/_react["default"].createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " connectors used")));
            break;
          case 'clocker':
            render_progress = /*#__PURE__*/_react["default"].createElement("div", {
              className: "k-popup-connectors"
            }, /*#__PURE__*/_react["default"].createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
            break;
          default:
            break;
        }
      }
      return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Draggable, {
        draggableId: model.id,
        index: index
      }, function (provided, snapshot) {
        return /*#__PURE__*/_react["default"].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["default"].createElement("div", {
          className: "progress-container warning",
          onMouseEnter: _this4.handleOnMouseEnterWarningItem.bind(_this4, index, warning),
          onMouseLeave: _this4.handleOnMouseLeaveWarningItem.bind(_this4, index, warning)
        }, warning && /*#__PURE__*/_react["default"].createElement("img", {
          className: "alert-warning",
          src: warning ? "/images".concat(warning.icon) : null
        }), warning && model.showWarning && /*#__PURE__*/_react["default"].createElement("div", {
          className: "k-popup-warning ".concat(shouldTooltipWarningClassInverted ? 'inverted' : '')
        }, /*#__PURE__*/_react["default"].createElement("p", {
          className: "rule warning"
        }, /*#__PURE__*/_react["default"].createElement("i", null, warning.message)))), /*#__PURE__*/_react["default"].createElement("h6", null, model.name_number), /*#__PURE__*/_react["default"].createElement("div", {
          onMouseEnter: _this4.handleOnMouseEnterRemoveItem.bind(_this4, index)
        }, /*#__PURE__*/_react["default"].createElement("img", {
          className: "item-cart",
          src: "/images".concat(model.image)
        })), /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            'display': model.showOverlayRemove ? 'flex' : 'none'
          },
          className: "overlayRemove",
          onClick: _this4.handleOnClickRemoveItem.bind(_this4, index)
        }, /*#__PURE__*/_react["default"].createElement("img", {
          src: "/images/shop/icon-remove.svg",
          alt: "rm"
        }), /*#__PURE__*/_react["default"].createElement("p", null, "Remove")), /*#__PURE__*/_react["default"].createElement("div", {
          className: "progress-container",
          onMouseEnter: _this4.handleOnMouseEnterItem.bind(_this4, index),
          onMouseLeave: _this4.handleOnMouseLeaveItem.bind(_this4, index)
        }, model.nbrSlotMax > 0 && /*#__PURE__*/_react["default"].createElement("div", {
          className: "nbr-connectors"
        }, /*#__PURE__*/_react["default"].createElement("div", {
          style: _objectSpread({}, nbrConnectorsStyle(data))
        })), model.nbrClockMax > 0 && /*#__PURE__*/_react["default"].createElement("div", {
          className: "nbr-clocks"
        }, /*#__PURE__*/_react["default"].createElement("div", {
          style: _objectSpread({}, nbrClocksStyle(data))
        })), render_progress));
      });
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isMobile: _propTypes["default"].bool,
        hovered: _propTypes["default"].bool,
        index: _propTypes["default"].number.isRequired,
        model: _propTypes["default"].object.isRequired,
        data: _propTypes["default"].object,
        onToggleProgress: _propTypes["default"].func,
        onToggleWarning: _propTypes["default"].func,
        onToggleOverlayRemove: _propTypes["default"].func,
        onClickRemoveItem: _propTypes["default"].func,
        shouldTooltipWarningClassInverted: _propTypes["default"].bool
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        hovered: false
      };
    }
  }]);
  return ProductCartItem;
}(_react["default"].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["default"].createElement("div", {
          key: i,
          style: {
            display: isDraggingOver ? 'none' : 'block',
            border: '1px dashed #ccc',
            width: '45px',
            marginBottom: '5px'
          }
        }));
      }
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, fakePlaceholder);
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isDraggingOver: _propTypes["default"].bool,
        nbrSlots: _propTypes["default"].number.isRequired,
        items: _propTypes["default"].array.isRequired
      };
    }
  }]);
  return FakePlaceholder;
}(_react["default"].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["default"].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["default"].createElement(_reactBeautifulDnd.Droppable, {
        droppableId: data.id,
        direction: "horizontal"
      }, function (provided, snapshot) {
        return /*#__PURE__*/_react["default"].createElement("div", _extends({
          ref: provided.innerRef
        }, provided.droppableProps, {
          style: cartStyle(provided.droppableProps.style, snapshot),
          className: "items-cart-list"
        }), products, provided.placeholder && /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            display: 'none'
          }
        }, provided.placeholder), /*#__PURE__*/_react["default"].createElement(FakePlaceholder, {
          nbrSlots: nbrSlots,
          items: data.items,
          isDraggingOver: snapshot.isDraggingOver
        }));
      });
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isMobile: _propTypes["default"].bool,
        nbrSlots: _propTypes["default"].number,
        itemHovered: _propTypes["default"].string,
        data: _propTypes["default"].object.isRequired,
        onToggleProgress: _propTypes["default"].func,
        onToggleWarning: _propTypes["default"].func,
        onToggleOverlayRemove: _propTypes["default"].func,
        onClickRemoveItem: _propTypes["default"].func
      };
    }
  }]);
  return Cart;
}(_react["default"].PureComponent);
/**
 * Component that displays crate modes
 */
var CrateMode = /*#__PURE__*/function (_React$PureComponent6) {
  _inherits(CrateMode, _React$PureComponent6);
  var _super6 = _createSuper(CrateMode);
  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["default"].createElement("div", {
        className: "crate-mode"
      }, items.map(function (item) {
        return /*#__PURE__*/_react["default"].createElement("a", {
          key: item.id,
          className: mode == item.id ? 'active' : '',
          onClick: _this6.handleOnClickMode.bind(_this6, item.id),
          href: "#",
          role: "button"
        }, item.name);
      }));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        items: _propTypes["default"].array.isRequired,
        mode: _propTypes["default"].string.isRequired,
        onClickMode: _propTypes["default"].func
      };
    }
  }]);
  return CrateMode;
}(_react["default"].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["default"].createElement("div", {
        className: "crate"
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "crate-products"
      }, cart, rules && rules.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
        className: "crate-info"
      }, rules.map(function (rule, index) {
        return /*#__PURE__*/_react["default"].createElement("p", {
          key: index,
          className: "rule",
          style: {
            'color': rule.color ? rule.color : 'inherit'
          }
        }, /*#__PURE__*/_react["default"].createElement("img", {
          src: "/images".concat(rule.icon)
        }), " ", /*#__PURE__*/_react["default"].createElement("i", null, /*#__PURE__*/_react["default"].createElement("strong", null, rule.name, ":"), " ", rule.message));
      }))));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        rules: _propTypes["default"].array,
        cart: _propTypes["default"].element
      };
    }
  }]);
  return Crate;
}(_react["default"].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["default"].createElement("section", {
        className: "panel"
      }, /*#__PURE__*/_react["default"].createElement("h2", null, title), /*#__PURE__*/_react["default"].createElement("div", {
        className: "control"
      }, /*#__PURE__*/_react["default"].createElement("p", {
        className: "description"
      }, description), crateMode), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("input", {
        className: "btn btn-sm btn-outline-primary m-0 mb-2",
        style: {
          'cursor': 'pointer'
        },
        value: "Import JSON",
        onClick: onClickOpenImport
      })), isMobile ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "mobileBtnDisplaySideMenu"
      }, /*#__PURE__*/_react["default"].createElement("button", {
        onClick: onClickToggleMobileSideMenu
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-add.svg",
        alt: "add"
      }))) : null, crate, /*#__PURE__*/_react["default"].createElement("section", {
        className: "summary"
      }, summaryPrice, form));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        title: _propTypes["default"].string,
        description: _propTypes["default"].string,
        crateMode: _propTypes["default"].element,
        crate: _propTypes["default"].element,
        summaryPrice: _propTypes["default"].element,
        form: _propTypes["default"].element,
        isMobile: _propTypes["default"].bool,
        onClickToggleMobileSideMenu: _propTypes["default"].func,
        onClickOpenImport: _propTypes["default"].func
      };
    }
  }]);
  return OrderPanel;
}(_react["default"].PureComponent);
/**
 * Components that renders the form to request quote.
 */
var OrderForm = /*#__PURE__*/function (_React$PureComponent9) {
  _inherits(OrderForm, _React$PureComponent9);
  var _super9 = _createSuper(OrderForm);
  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(_objectSpread({}, validationFields), {}, {
        error: _objectSpread(_objectSpread({}, this.state.error), {}, {
          email: isEmailError
        }),
        empty: _objectSpread(_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(_objectSpread({}, this.state), {}, {
        error: _objectSpread(_objectSpread({}, this.state.error), {}, _defineProperty({}, key, null)),
        empty: _objectSpread(_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(_objectSpread({}, this.state), {}, {
        email: value,
        error: _objectSpread(_objectSpread({}, this.state.error), {}, {
          email: isError
        }),
        empty: _objectSpread(_objectSpread({}, this.state.empty), {}, {
          email: isEmpty
        })
      }));
    }
  }, {
    key: "handleNote",
    value: function handleNote(e) {
      var value = e.target.value;
      this.setState(_objectSpread(_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["default"].createElement("div", {
        className: "summary-form"
      }, /*#__PURE__*/_react["default"].createElement("form", {
        onSubmit: handleSubmit,
        noValidate: true
      }, /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        className: "error"
      }, /*#__PURE__*/_react["default"].createElement("small", null, "Required")) : null, error && error.email ? /*#__PURE__*/_react["default"].createElement("div", {
        className: "error"
      }, /*#__PURE__*/_react["default"].createElement("small", null, "Your email is incomplete")) : null, /*#__PURE__*/_react["default"].createElement("textarea", {
        onChange: handleNote,
        value: note,
        rows: "5",
        placeholder: "Additional notes"
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: "d-flex flex-column flex-sm-row justify-content-between"
      }, /*#__PURE__*/_react["default"].createElement("input", {
        className: "btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2",
        style: {
          'cursor': 'pointer',
          'fontWeight': '700'
        },
        value: "Show JSON",
        onClick: onClickShow
      }), /*#__PURE__*/_react["default"].createElement("input", {
        className: "btn btn-primary w-100 m-0  ms-sm-2",
        type: "submit",
        value: "".concat(isProcessing ? 'Processing ...' : 'Request quote')
      }))));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        isProcessing: _propTypes["default"].bool,
        isProcessingComplete: _propTypes["default"].bool,
        onClickSubmit: _propTypes["default"].func
      };
    }
  }]);
  return OrderForm;
}(_react["default"].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);
  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["default"].createElement("div", {
        className: "summary-price"
      }, /*#__PURE__*/_react["default"].createElement("table", null, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
        colSpan: "2",
        className: "summary-remove-all"
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "item-card-name"
      }, "Remove all cards"), /*#__PURE__*/_react["default"].createElement("button", {
        onClick: this.handleOnDeleteAllItems
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-remove.svg"
      })))), mode && /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
        className: "item-card-name"
      }, mode.name), /*#__PURE__*/_react["default"].createElement("td", {
        className: "price"
      }, /*#__PURE__*/_react["default"].createElement("div", null, "".concat(currency, " ").concat(formatMoney(mode.price)), /*#__PURE__*/_react["default"].createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-remove.svg"
      }))), /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          'display': 'inline-block',
          'width': '30px'
        }
      }, "\xA0")))), /*#__PURE__*/_react["default"].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["default"].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["default"].createElement("td", {
          className: "item-card-name"
        }, /*#__PURE__*/_react["default"].createElement("div", null, "".concat(item.name_number, " ").concat(item.name, " ").concat(item.name_codename))), /*#__PURE__*/_react["default"].createElement("td", {
          className: "price"
        }, /*#__PURE__*/_react["default"].createElement("div", null, "".concat(currency, " ").concat(formatMoney(item.price)), /*#__PURE__*/_react["default"].createElement("button", {
          onClick: _this9.handleOnDeleteItem.bind(_this9, index)
        }, /*#__PURE__*/_react["default"].createElement("img", {
          src: "/images/shop/icon-remove.svg"
        }))), warning && /*#__PURE__*/_react["default"].createElement("img", {
          style: {
            'marginLeft': '10px'
          },
          className: "alert-warning",
          src: "/images/".concat(warning.icon)
        }), !warning && /*#__PURE__*/_react["default"].createElement("span", {
          style: {
            'display': 'inline-block',
            'width': '30px'
          }
        }, "\xA0")));
      })), /*#__PURE__*/_react["default"].createElement("tfoot", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
        className: "item-card-name"
      }, "Price estimate"), /*#__PURE__*/_react["default"].createElement("td", {
        className: "price"
      }, /*#__PURE__*/_react["default"].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["default"].createElement("button", {
        style: {
          'opacity': '0',
          'cursor': 'initial'
        }
      }, /*#__PURE__*/_react["default"].createElement("img", {
        src: "/images/shop/icon-remove.svg",
        alt: "icon remove"
      }))), /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          'display': 'inline-block',
          'width': '30px'
        }
      }, "\xA0"))))));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        currency: _propTypes["default"].string,
        modes: _propTypes["default"].array,
        currentMode: _propTypes["default"].string,
        summary: _propTypes["default"].array,
        itemsData: _propTypes["default"].array,
        onDeleteItem: _propTypes["default"].func,
        onDeleteAllItems: _propTypes["default"].func,
        onMouseEnterItem: _propTypes["default"].func,
        onMouseLeaveItem: _propTypes["default"].func,
        onClickSelectItem: _propTypes["default"].func
      };
    }
  }]);
  return OrderSumary;
}(_react["default"].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_groups = data.categories.map(function (groupItem) {
        return {
          name: groupItem.name,
          items: groupItem.itemIds.map(function (itemId) {
            return items[itemId];
          })
        };
      });
      var groups = ordered_groups.map(function (group, g_index) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "accordion-item"
        }, /*#__PURE__*/_react["default"].createElement("h2", {
          className: "accordion-header"
        }, /*#__PURE__*/_react["default"].createElement("button", {
          className: "accordion-button collapsed",
          type: "button",
          "data-bs-toggle": "collapse",
          "data-bs-target": "#collapse".concat(g_index),
          "aria-expanded": "true",
          "aria-controls": "collapse".concat(g_index)
        }, group.name)), /*#__PURE__*/_react["default"].createElement("div", {
          id: "collapse".concat(g_index),
          className: "accordion-collapse collapse",
          "aria-labelledby": "headingOne",
          "data-bs-parent": "#accordion_categories"
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "accordion-body"
        }, group.items.map(function (item) {
          return /*#__PURE__*/_react["default"].createElement(ProductItem, {
            key: item.id,
            id: item.id,
            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,
            datasheet_file: item.datasheet_file,
            datasheet_name: item.datasheet_name,
            onClickAddItem: onClickAddItem
          });
        }))));
      });
      return /*#__PURE__*/_react["default"].createElement(_reactBeautifulDnd.Droppable, {
        droppableId: data.id,
        isDropDisabled: true
      }, function (provided) {
        return /*#__PURE__*/_react["default"].createElement("div", _extends({
          className: "backlog-container",
          ref: provided.innerRef
        }, provided.droppableProps), isMobile ? /*#__PURE__*/_react["default"].createElement("div", {
          className: "mobileCloseMenu"
        }, /*#__PURE__*/_react["default"].createElement("button", {
          onClick: onClickToggleMobileSideMenu
        }, /*#__PURE__*/_react["default"].createElement("img", {
          src: "/images/shop/icon-close-white.svg",
          alt: "add"
        }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
          className: "accordion accordion-flush",
          id: "accordion_categories"
        }, groups), provided.placeholder && /*#__PURE__*/_react["default"].createElement("div", {
          style: {
            display: 'none'
          }
        }, provided.placeholder));
      });
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        currency: _propTypes["default"].string,
        data: _propTypes["default"].object.isRequired,
        items: _propTypes["default"].object,
        isMobile: _propTypes["default"].bool,
        onClickAddItem: _propTypes["default"].func,
        onClickToggleMobileSideMenu: _propTypes["default"].func
      };
    }
  }, {
    key: "defaultProps",
    get: function get() {
      return {
        items: {}
      };
    }
  }]);
  return Backlog;
}(_react["default"].PureComponent);
/**
 * Component that render the entire shop
 */
var Shop = /*#__PURE__*/function (_React$PureComponent12) {
  _inherits(Shop, _React$PureComponent12);
  var _super12 = _createSuper(Shop);
  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 sourceIds = Array.from(this.state.columns.backlog.categories.map(function (groupId) {
        return groupId.itemIds;
      }).flat());
      var source = {
        droppableId: 'backlog',
        index: null
      };
      var destination = {
        droppableId: 'cart',
        index: 0
      };
      this.handleOnDragEnd({
        source: source,
        destination: destination,
        draggableId: sourceIds[0]
      });
    }
  }, {
    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(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: cloned
          })
        })
      }));
    }
  }, {
    key: "handleDeleteAllItems",
    value: function handleDeleteAllItems() {
      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: []
          })
        })
      }));
    }
  }, {
    key: "handleMouseEnterItem",
    value: function handleMouseEnterItem(id) {
      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
        currentItemHovered: id
      }));
    }
  }, {
    key: "handleMouseLeaveItem",
    value: function handleMouseLeaveItem() {
      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
        currentItemHovered: null
      }));
    }
  }, {
    key: "handleClickAddItem",
    value: function handleClickAddItem(id, tap) {
      var source = {
        droppableId: 'backlog',
        index: null
      };
      var destination = {
        droppableId: 'cart',
        index: this.state.columns.cart.items.length
      };
      this.handleOnDragEnd({
        source: source,
        destination: destination,
        draggableId: id
      }, tap);
    }
  }, {
    key: "handleToggleItemProgress",
    value: function handleToggleItemProgress(index, show) {
      var itemsCloned = Array.from(this.state.columns.cart.items);
      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: itemsCloned.map(function (item, i) {
              return _objectSpread(_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(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: itemsCloned.map(function (item, i) {
              return _objectSpread(_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(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: itemsCloned.map(function (item, id) {
              return _objectSpread(_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(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_objectSpread({}, this.state.columns.cart), {}, {
            items: itemsCloned.map(function (item, id) {
              return _objectSpread(_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(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_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: (0, _uuid.v4)()
              }));
            }
          });
          return item;
        });
        this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
          columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
            cart: _objectSpread(_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["default"].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(_objectSpread({}, this.state), {}, {
            newCardJustAdded: false,
            columns: _objectSpread(_objectSpread({}, this.state.columns), {}, _defineProperty({}, source.droppableId, _objectSpread(_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(_objectSpread({}, this.state), {}, {
            newCardJustAdded: newAdded ? true : false,
            columns: _objectSpread(_objectSpread({}, this.state.columns), {}, _defineProperty({}, destination.droppableId, _objectSpread(_objectSpread({}, this.state.columns[destination.droppableId]), {}, {
              items: copy(this.state.items, this.state.columns[source.droppableId], this.state.columns[destination.droppableId], draggableId, destination)
            })))
          }));
          break;
        case destination.droppableId:
          this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
            newCardJustAdded: false,
            columns: _objectSpread(_objectSpread({}, this.state.columns), {}, _defineProperty({}, destination.droppableId, _objectSpread(_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(_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() {
        var slots;
        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();
      }

      // update state with rules
      this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
        columns: _objectSpread(_objectSpread({}, this.state.columns), {}, {
          cart: _objectSpread(_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["default"].createElement(_reactBeautifulDnd.DragDropContext, {
        onDragEnd: this.handleOnDragEnd
      }, /*#__PURE__*/_react["default"].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["default"].createElement(Backlog, {
          currency: currency,
          items: items,
          data: columns['backlog'],
          onClickAddItem: this.handleClickAddItem,
          onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
          isMobile: isMobile
        }),
        main: /*#__PURE__*/_react["default"].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["default"].createElement(CrateMode, {
            items: crateModeItems,
            mode: currentMode,
            onClickMode: this.handleCrateModeChange
          }),
          crate: /*#__PURE__*/_react["default"].createElement(Crate, {
            cart: /*#__PURE__*/_react["default"].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["default"].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["default"].createElement(OrderForm, {
            isProcessingComplete: isProcessingComplete,
            processingComplete: this.handleProcessingComplete,
            isProcessing: isProcessing,
            onClickSubmit: this.handleClickSubmit,
            onClickShow: this.handleClickShowOrder
          })
        })
      }));
    }
  }], [{
    key: "propTypes",
    get: function get() {
      return {
        data: _propTypes["default"].object.isRequired
      };
    }
  }]);
  return Shop;
}(_react["default"].PureComponent);
_reactDom["default"].render( /*#__PURE__*/_react["default"].createElement(Shop, {
  data: data
}), document.querySelector('#root-shop'));