diff --git a/static/js/shop.min.js b/static/js/shop.min.js
index a208e53..74c0846 100644
--- a/static/js/shop.min.js
+++ b/static/js/shop.min.js
@@ -1,8 +1,15 @@
 'use strict';function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0// hack: remove weird animation after a drop
-,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(a,b){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a)){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(b,!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var _window$ReactBeautifu=window.ReactBeautifulDnd,DragDropContext=_window$ReactBeautifu.DragDropContext,Draggable=_window$ReactBeautifu.Draggable,Droppable=_window$ReactBeautifu.Droppable,data=window.shop_data,productStyle=function(a,b,c,d,e){var f={opacity:b.isDragging?.7:1,backgroundColor:d||e?"#eae7f7":"initial"};return b.isDropAnimating?(c&&(f.transitionDuration="0.001s"),_objectSpread({},a,{},f)):_objectSpread({},a,{},f)},cartStyle=function(a,b){var c=b.isDraggingOver;return _objectSpread({},a,{},{backgroundColor:c?"#f2f2f2":"#f9f9f9",border:c?"1px dashed #ccc":"0"})},nbrConnectorsStyle=function(a){if(!a||!a.nbrCurrentSlot)return{};var b=100*a.nbrCurrentSlot/a.nbrSlotMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},nbrClocksStyle=function(a){if(!a||!a.nbrCurrentClock)return{};var b=100*a.nbrCurrentClock/a.nbrClockMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},copy=function(a,b,c,d,e){var f=Array.from(b.itemIds),g=Array.from(c.items),h=f[d.index];return g.splice(e.index,0,_objectSpread({},a[h],{id:uuidv4()})),g},reorder=function(a,b,c){var d=Array.from(a),e=d.splice(b,1),f=_slicedToArray(e,1),g=f[0];return d.splice(c,0,g),d},remove=function(a,b){var c=Array.from(a);return c.splice(b,1),c},nbrOccupiedSlotsInCrate=function(a){return a.reduce(function(a,b){return a+(8===b.hp?2:1)},0)},Layout=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.aside,c=a.main;return React.createElement("div",{className:"layout"},React.createElement("aside",{className:"aside"},b),React.createElement("section",{className:"main"},c))}}],[{key:"propTypes",get:function get(){return{aside:PropTypes.any,main:PropTypes.any}}}]),b}(React.PureComponent),ProductItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickAddItem=c.handleOnClickAddItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{id:PropTypes.string.isRequired,index:PropTypes.number.isRequired,name:PropTypes.string.isRequired,price:PropTypes.number.isRequired,currency:PropTypes.string.isRequired,image:PropTypes.string.isRequired,specs:PropTypes.array,onClickAddItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickAddItem",value:function handleOnClickAddItem(a,b){this.props.onClickAddItem&&this.props.onClickAddItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.index,d=a.name,e=a.price,f=a.currency,g=a.image,h=a.specs,i=h&&0<h.length&&React.createElement("ul",null,h.map(function(a,b){return React.createElement("li",{key:b},a)}));return React.createElement("section",{className:"productItem"},React.createElement("div",{className:"content"},React.createElement("h3",null,d),React.createElement("div",{className:"price"},"".concat(f," ").concat(e)),i),React.createElement("div",{className:"content"},React.createElement("button",{onClick:this.handleOnClickAddItem.bind(this,c)},React.createElement("img",{src:"/images/shop/icon-add.svg",alt:"add"})),React.createElement(Draggable,{draggableId:b,index:c},function(a,b){return React.createElement(React.Fragment,null,React.createElement("img",_extends({ref:a.innerRef},a.draggableProps,a.dragHandleProps,{style:productStyle(a.draggableProps.style,b,!0),src:g})),b.isDragging&&React.createElement("img",{className:"",src:g}))})))}}]),b}(React.PureComponent),ProductCartItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterWarningItem=c.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveWarningItem=c.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterRemoveItem=c.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveRemoveItem=c.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(c)),c.handleOnClickRemoveItem=c.handleOnClickRemoveItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{hovered:PropTypes.bool,index:PropTypes.number.isRequired,model:PropTypes.object.isRequired,data:PropTypes.object,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{hovered:!1}}}]),_createClass(b,[{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!1),b.preventDefault()}},{key:"handleOnMouseEnterWarningItem",value:function handleOnMouseEnterWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!0),c.preventDefault())}},{key:"handleOnMouseLeaveWarningItem",value:function handleOnMouseLeaveWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!1),c.preventDefault())}},{key:"handleOnMouseEnterRemoveItem",value:function handleOnMouseEnterRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveRemoveItem",value:function handleOnMouseLeaveRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!1),b.preventDefault()}},{key:"handleOnClickRemoveItem",value:function handleOnClickRemoveItem(a){this.props.onClickRemoveItem&&this.props.onClickRemoveItem(a)}},{key:"render",value:function render(){var a,b=this,c=this.props,d=c.hovered,e=c.model,f=c.data,g=c.index;if(f&&f.warnings){var i=Object.keys(f.warnings);i&&0<i.length&&(a=f.warnings[i[0]])}var h;if(e.showProgress&&f)switch(e.type){case"kasli":case"kasli-backplane":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," EEM connectors available")),React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;case"zotino":case"hd68":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," connectors available")));break;case"clocker":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;default:}return React.createElement(Draggable,{draggableId:e.id,index:g},function(c,i){return React.createElement("div",_extends({ref:c.innerRef},c.draggableProps,c.dragHandleProps,{style:_objectSpread({},productStyle(c.draggableProps.style,i,!0,!!d,!!e.selected)),onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveRemoveItem.bind(b,g)}),React.createElement("div",{style:{height:"24px"},className:"progress-container warning",onMouseEnter:b.handleOnMouseEnterWarningItem.bind(b,g,a),onMouseLeave:b.handleOnMouseLeaveWarningItem.bind(b,g,a)},a&&React.createElement("img",{className:"alert-warning",src:a?"/images".concat(a.icon):null}),a&&e.showWarning&&React.createElement("div",{className:"k-popup-warning"},React.createElement("p",{className:"rule warning"},React.createElement("i",null,a.message)))),React.createElement("h6",null,e.name),React.createElement("div",{style:{height:"250px"},onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g)},React.createElement("img",{className:"item-cart",src:"/images".concat(e.image)})),React.createElement("div",{style:{display:e.showOverlayRemove?"flex":"none"},className:"overlayRemove",onClick:b.handleOnClickRemoveItem.bind(b,g)},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"rm"}),React.createElement("p",null,"remove")),React.createElement("div",{style:{height:"22px"},className:"progress-container",onMouseEnter:b.handleOnMouseEnterItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveItem.bind(b,g)},0<e.nbrSlotMax&&React.createElement("div",{className:"nbr-connectors"},React.createElement("div",{style:_objectSpread({},nbrConnectorsStyle(f))})),0<e.nbrClockMax&&React.createElement("div",{className:"nbr-clocks"},React.createElement("div",{style:_objectSpread({},nbrClocksStyle(f))})),h))})}}]),b}(React.PureComponent),FakePlaceholder=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){for(var a=this.props,b=a.isDraggingOver,c=a.nbrSlots,d=a.items,e=[],f=nbrOccupiedSlotsInCrate(d),g=c-f;0<g;g--)e.push(React.createElement("div",{key:g,style:{display:b?"none":"block",border:"1px dashed #ccc",width:"45px",marginBottom:"5px"}}));return React.createElement(React.Fragment,null,e)}}],[{key:"propTypes",get:function get(){return{isDraggingOver:PropTypes.bool,nbrSlots:PropTypes.number.isRequired,items:PropTypes.array.isRequired}}}]),b}(React.PureComponent),Cart=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.nbrSlots,c=a.itemHovered,d=a.data,e=a.onToggleProgress,f=a.onToggleWarning,g=a.onToggleOverlayRemove,h=a.onClickRemoveItem,i=d.items.map(function(a,b){var i;return d.itemsData&&b in d.itemsData&&(i=d.itemsData[b]),React.createElement(ProductCartItem,{hovered:a.id===c,key:a.id,index:b,data:i,onToggleProgress:e,onToggleWarning:f,onToggleOverlayRemove:g,onClickRemoveItem:h,model:a})});return React.createElement(Droppable,{droppableId:d.id,direction:"horizontal"},function(a,c){return React.createElement("div",_extends({ref:a.innerRef},a.droppableProps,{style:cartStyle(a.droppableProps.style,c),className:"items-cart-list"}),i,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder),React.createElement(FakePlaceholder,{nbrSlots:b,items:d.items,isDraggingOver:c.isDraggingOver}))})}}],[{key:"propTypes",get:function get(){return{nbrSlots:PropTypes.number,itemHovered:PropTypes.string,data:PropTypes.object.isRequired,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}}]),b}(React.PureComponent),CrateMode=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickMode=c.handleOnClickMode.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{items:PropTypes.array.isRequired,mode:PropTypes.string.isRequired,onClickMode:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickMode",value:function handleOnClickMode(a,b){this.props.onClickMode&&this.props.onClickMode(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.mode,d=b.items;return React.createElement("div",{className:"crate-mode"},d.map(function(b){return React.createElement("a",{key:b.id,className:c==b.id?"active":"",onClick:a.handleOnClickMode.bind(a,b.id),href:"#",role:"button"},b.name)}))}}]),b}(React.PureComponent),Crate=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.rules,c=a.cart;return React.createElement("div",{className:"crate"},React.createElement("div",{className:"crate-products"},c,b&&0<b.length&&React.createElement("div",{className:"crate-info"},b.map(function(a,b){return React.createElement("p",{key:b,className:"rule",style:{color:a.color?a.color:"inherit"}},React.createElement("img",{src:"/images".concat(a.icon)})," ",React.createElement("i",null,React.createElement("strong",null,a.name,":")," ",a.message))}))))}}],[{key:"propTypes",get:function get(){return{rules:PropTypes.array,cart:PropTypes.element}}}]),b}(React.PureComponent),OrderPanel=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.title,c=a.description,d=a.crateMode,e=a.crate,f=a.summaryPrice,g=a.form;return React.createElement("section",{className:"panel"},React.createElement("h2",null,b),React.createElement("div",{className:"control"},React.createElement("p",{className:"description"},c),d),e,React.createElement("section",{className:"summary"},f,g))}}],[{key:"propTypes",get:function get(){return{title:PropTypes.string,description:PropTypes.string,crateMode:PropTypes.element,crate:PropTypes.element,summaryPrice:PropTypes.element,form:PropTypes.element}}}]),b}(React.PureComponent),OrderForm=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state={note:""},c.handleNoteChange=c.handleNoteChange.bind(_assertThisInitialized(c)),c.handleSubmit=c.handleSubmit.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{onClickSubmit:PropTypes.func}}}]),_createClass(b,[{key:"handleNoteChange",value:function handleNoteChange(a){this.setState({note:a.target.value})}},{key:"handleSubmit",value:function handleSubmit(a){this.props.onClickSubmit&&this.props.onClickSubmit(this.state.note),a.preventDefault()}},{key:"render",value:function render(){return React.createElement("div",{className:"summary-form"},React.createElement("form",{onSubmit:this.handleSubmit},React.createElement("textarea",{value:this.state.note,onChange:this.handleNoteChange,rows:"5",placeholder:"Additional notes"}),React.createElement("input",{type:"submit",value:"Request quote"})))}}]),b}(React.PureComponent),OrderSumary=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnDeleteItem=c.handleOnDeleteItem.bind(_assertThisInitialized(c)),c.handleOnDeleteAllItems=c.handleOnDeleteAllItems.bind(_assertThisInitialized(c)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnClickSelectItem=c.handleOnClickSelectItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{currency:PropTypes.string,modes:PropTypes.array,currentMode:PropTypes.string,summary:PropTypes.array,itemsData:PropTypes.array,onDeleteItem:PropTypes.func,onDeleteAllItems:PropTypes.func,onMouseEnterItem:PropTypes.func,onMouseLeaveItem:PropTypes.func,onClickSelectItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnDeleteItem",value:function handleOnDeleteItem(a,b){this.props.onDeleteItem&&this.props.onDeleteItem(a),b.preventDefault()}},{key:"handleOnDeleteAllItems",value:function handleOnDeleteAllItems(a){this.props.onDeleteAllItems&&this.props.onDeleteAllItems(),a.preventDefault()}},{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onMouseEnterItem&&this.props.onMouseEnterItem(a),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a){this.props.onMouseLeaveItem&&this.props.onMouseLeaveItem(),a.preventDefault()}},{key:"handleOnClickSelectItem",value:function handleOnClickSelectItem(a,b){return"IMG"!==b.target.tagName&&this.props.onClickSelectItem&&this.props.onClickSelectItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.currency,d=b.modes,e=b.currentMode,f=b.summary,g=b.itemsData,h=d.find(function(a){return a.id===e});return React.createElement("div",{className:"summary-price"},React.createElement("table",null,React.createElement("thead",null,React.createElement("tr",null,React.createElement("td",{colSpan:"2",className:"summary-remove-all"},React.createElement("span",{className:"item-card-name"},"Remove all cards"),React.createElement("button",{onClick:this.handleOnDeleteAllItems},React.createElement("img",{src:"/images/shop/icon-remove.svg"})))),h&&React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},h.name),React.createElement("td",{className:"price"},"".concat(c," ").concat(h.price),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))))),React.createElement("tbody",null,f.map(function(b,d){var e,f;if(g[d]){e=g[d];var h=Object.keys(e.warnings);h&&0<h.length&&(f=e.warnings[h[0]])}return React.createElement("tr",{key:b.id,className:"hoverable ".concat(b.selected?"selected":""),onClick:a.handleOnClickSelectItem.bind(a,d),onMouseEnter:a.handleOnMouseEnterItem.bind(a,b.id),onMouseLeave:a.handleOnMouseLeaveItem},React.createElement("td",{className:"item-card-name"},React.createElement("div",null,b.name)),React.createElement("td",{className:"price"},React.createElement("div",null,"".concat(c," ").concat(b.price),React.createElement("button",{onClick:a.handleOnDeleteItem.bind(a,d)},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))),f&&React.createElement("img",{style:{marginLeft:"10px"},className:"alert-warning",src:"/images/".concat(f.icon)})))})),React.createElement("tfoot",null,React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},"Price estimate"),React.createElement("td",{className:"price"},f.length?"".concat(c," ").concat(f.reduce(function(a,b){return a+b.price},0)+h.price):"".concat(c," ").concat(h.price),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"icon remove"})))))))}}]),b}(React.PureComponent),Backlog=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.currency,c=a.data,d=a.items,e=a.onClickAddItem,f=c.itemIds.map(function(a){return d[a]}),g=f.map(function(a,c){return React.createElement(ProductItem,{key:a.id,id:a.id,index:c,name:a.name,price:a.price,currency:b,image:"/images/".concat(a.image),specs:a.specs,onClickAddItem:e})});return React.createElement(Droppable,{droppableId:c.id,isDropDisabled:!0},function(a){return React.createElement("div",_extends({className:"backlog-container",ref:a.innerRef},a.droppableProps),g,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder))})}}],[{key:"propTypes",get:function get(){return{currency:PropTypes.string,data:PropTypes.object.isRequired,items:PropTypes.object,onClickAddItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{items:{}}}}]),b}(React.PureComponent),Shop=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state=c.props.data,c.handleCrateModeChange=c.handleCrateModeChange.bind(_assertThisInitialized(c)),c.handleOnDragEnd=c.handleOnDragEnd.bind(_assertThisInitialized(c)),c.handleDeleteItem=c.handleDeleteItem.bind(_assertThisInitialized(c)),c.handleDeleteAllItems=c.handleDeleteAllItems.bind(_assertThisInitialized(c)),c.handleMouseEnterItem=c.handleMouseEnterItem.bind(_assertThisInitialized(c)),c.handleMouseLeaveItem=c.handleMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleClickAddItem=c.handleClickAddItem.bind(_assertThisInitialized(c)),c.checkAlerts=c.checkAlerts.bind(_assertThisInitialized(c)),c.handleToggleItemProgress=c.handleToggleItemProgress.bind(_assertThisInitialized(c)),c.handleToggleItemWarning=c.handleToggleItemWarning.bind(_assertThisInitialized(c)),c.handleClickSelectItem=c.handleClickSelectItem.bind(_assertThisInitialized(c)),c.handleClickSubmit=c.handleClickSubmit.bind(_assertThisInitialized(c)),c.handleToggleOverlayRemove=c.handleToggleOverlayRemove.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{data:PropTypes.object.isRequired}}}]),_createClass(b,[{key:"componentDidMount",value:function componentDidMount(){// index 0 is a Kasli, we place it as a default conf on the crate.
+,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(a,b){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a)){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(b,!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var _window$ReactBeautifu=window.ReactBeautifulDnd,DragDropContext=_window$ReactBeautifu.DragDropContext,Draggable=_window$ReactBeautifu.Draggable,Droppable=_window$ReactBeautifu.Droppable,data=window.shop_data,productStyle=function(a,b,c,d,e){var f={opacity:b.isDragging?.7:1,backgroundColor:d||e?"#eae7f7":"initial"};return b.isDropAnimating?(c&&(f.transitionDuration="0.001s"),_objectSpread({},a,{},f)):_objectSpread({},a,{},f)},cartStyle=function(a,b){var c=b.isDraggingOver;return _objectSpread({},a,{},{backgroundColor:c?"#f2f2f2":"#f9f9f9",border:c?"1px dashed #ccc":"0"})},nbrConnectorsStyle=function(a){if(!a||!a.nbrCurrentSlot)return{};var b=100*a.nbrCurrentSlot/a.nbrSlotMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},nbrClocksStyle=function(a){if(!a||!a.nbrCurrentClock)return{};var b=100*a.nbrCurrentClock/a.nbrClockMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},copy=function(a,b,c,d,e){var f=Array.from(b.itemIds),g=Array.from(c.items),h=f[d.index];return g.splice(e.index,0,_objectSpread({},a[h],{id:uuidv4()})),g},reorder=function(a,b,c){var d=Array.from(a),e=d.splice(b,1),f=_slicedToArray(e,1),g=f[0];return d.splice(c,0,g),d},remove=function(a,b){var c=Array.from(a);return c.splice(b,1),c},nbrOccupiedSlotsInCrate=function(a){return a.reduce(function(a,b){return a+(8===b.hp?2:1)},0)};function formatMoney(a){var b=Math.abs,c=1<arguments.length&&void 0!==arguments[1]?arguments[1]:2,d=2<arguments.length&&void 0!==arguments[2]?arguments[2]:".",e=3<arguments.length&&void 0!==arguments[3]?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{c=b(c),c=isNaN(c)?2:c;var f=0>a?"-":"",g=parseInt(a=b(+a||0).toFixed(c)).toString(),h=3<g.length?g.length%3:0;return f+(h?g.substr(0,h)+e:"")+g.substr(h).replace(/(\d{3})(?=\d)/g,"$1"+e)+(c?d+b(a-g).toFixed(c).slice(2):"")}catch(b){return a}}/**
+ * Component that provides a base layout (aside/main) for the page.
+ */var Layout=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.aside,c=a.main;return React.createElement("div",{className:"layout"},React.createElement("aside",{className:"aside"},b),React.createElement("section",{className:"main"},c))}}],[{key:"propTypes",get:function get(){return{aside:PropTypes.any,main:PropTypes.any}}}]),b}(React.PureComponent),ProductItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickAddItem=c.handleOnClickAddItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{id:PropTypes.string.isRequired,index:PropTypes.number.isRequired,name:PropTypes.string.isRequired,price:PropTypes.number.isRequired,currency:PropTypes.string.isRequired,image:PropTypes.string.isRequired,specs:PropTypes.array,onClickAddItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickAddItem",value:function handleOnClickAddItem(a,b){this.props.onClickAddItem&&this.props.onClickAddItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.index,d=a.name,e=a.price,f=a.currency,g=a.image,h=a.specs,i=h&&0<h.length&&React.createElement("ul",null,h.map(function(a,b){return React.createElement("li",{key:b},a)}));return React.createElement("section",{className:"productItem"},React.createElement("div",{className:"content"},React.createElement("h3",null,d),React.createElement("div",{className:"price"},"".concat(f," ").concat(formatMoney(e))),i),React.createElement("div",{className:"content"},React.createElement("button",{onClick:this.handleOnClickAddItem.bind(this,c)},React.createElement("img",{src:"/images/shop/icon-add.svg",alt:"add"})),React.createElement(Draggable,{draggableId:b,index:c},function(a,b){return React.createElement(React.Fragment,null,React.createElement("img",_extends({ref:a.innerRef},a.draggableProps,a.dragHandleProps,{style:productStyle(a.draggableProps.style,b,!0),src:g})),b.isDragging&&React.createElement("img",{className:"",src:g}))})))}}]),b}(React.PureComponent),ProductCartItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterWarningItem=c.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveWarningItem=c.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterRemoveItem=c.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveRemoveItem=c.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(c)),c.handleOnClickRemoveItem=c.handleOnClickRemoveItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{hovered:PropTypes.bool,index:PropTypes.number.isRequired,model:PropTypes.object.isRequired,data:PropTypes.object,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{hovered:!1}}}]),_createClass(b,[{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!1),b.preventDefault()}},{key:"handleOnMouseEnterWarningItem",value:function handleOnMouseEnterWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!0),c.preventDefault())}},{key:"handleOnMouseLeaveWarningItem",value:function handleOnMouseLeaveWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!1),c.preventDefault())}},{key:"handleOnMouseEnterRemoveItem",value:function handleOnMouseEnterRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveRemoveItem",value:function handleOnMouseLeaveRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!1),b.preventDefault()}},{key:"handleOnClickRemoveItem",value:function handleOnClickRemoveItem(a){this.props.onClickRemoveItem&&this.props.onClickRemoveItem(a)}},{key:"render",value:function render(){var a,b=this,c=this.props,d=c.hovered,e=c.model,f=c.data,g=c.index;if(f&&f.warnings){var i=Object.keys(f.warnings);i&&0<i.length&&(a=f.warnings[i[0]])}var h;if(e.showProgress&&f)switch(e.type){case"kasli":case"kasli-backplane":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," EEM connectors available")),React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;case"zotino":case"hd68":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," connectors available")));break;case"clocker":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;default:}return React.createElement(Draggable,{draggableId:e.id,index:g},function(c,i){return React.createElement("div",_extends({ref:c.innerRef},c.draggableProps,c.dragHandleProps,{style:_objectSpread({},productStyle(c.draggableProps.style,i,!0,!!d,!!e.selected)),onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveRemoveItem.bind(b,g)}),React.createElement("div",{style:{height:"24px"},className:"progress-container warning",onMouseEnter:b.handleOnMouseEnterWarningItem.bind(b,g,a),onMouseLeave:b.handleOnMouseLeaveWarningItem.bind(b,g,a)},a&&React.createElement("img",{className:"alert-warning",src:a?"/images".concat(a.icon):null}),a&&e.showWarning&&React.createElement("div",{className:"k-popup-warning"},React.createElement("p",{className:"rule warning"},React.createElement("i",null,a.message)))),React.createElement("h6",null,e.name),React.createElement("div",{style:{height:"250px"},onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g)},React.createElement("img",{className:"item-cart",src:"/images".concat(e.image)})),React.createElement("div",{style:{display:e.showOverlayRemove?"flex":"none"},className:"overlayRemove",onClick:b.handleOnClickRemoveItem.bind(b,g)},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"rm"}),React.createElement("p",null,"Remove")),React.createElement("div",{style:{height:"22px"},className:"progress-container",onMouseEnter:b.handleOnMouseEnterItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveItem.bind(b,g)},0<e.nbrSlotMax&&React.createElement("div",{className:"nbr-connectors"},React.createElement("div",{style:_objectSpread({},nbrConnectorsStyle(f))})),0<e.nbrClockMax&&React.createElement("div",{className:"nbr-clocks"},React.createElement("div",{style:_objectSpread({},nbrClocksStyle(f))})),h))})}}]),b}(React.PureComponent),FakePlaceholder=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){for(var a=this.props,b=a.isDraggingOver,c=a.nbrSlots,d=a.items,e=[],f=nbrOccupiedSlotsInCrate(d),g=c-f;0<g;g--)e.push(React.createElement("div",{key:g,style:{display:b?"none":"block",border:"1px dashed #ccc",width:"45px",marginBottom:"5px"}}));return React.createElement(React.Fragment,null,e)}}],[{key:"propTypes",get:function get(){return{isDraggingOver:PropTypes.bool,nbrSlots:PropTypes.number.isRequired,items:PropTypes.array.isRequired}}}]),b}(React.PureComponent),Cart=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.nbrSlots,c=a.itemHovered,d=a.data,e=a.onToggleProgress,f=a.onToggleWarning,g=a.onToggleOverlayRemove,h=a.onClickRemoveItem,i=d.items.map(function(a,b){var i;return d.itemsData&&b in d.itemsData&&(i=d.itemsData[b]),React.createElement(ProductCartItem,{hovered:a.id===c,key:a.id,index:b,data:i,onToggleProgress:e,onToggleWarning:f,onToggleOverlayRemove:g,onClickRemoveItem:h,model:a})});return React.createElement(Droppable,{droppableId:d.id,direction:"horizontal"},function(a,c){return React.createElement("div",_extends({ref:a.innerRef},a.droppableProps,{style:cartStyle(a.droppableProps.style,c),className:"items-cart-list"}),i,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder),React.createElement(FakePlaceholder,{nbrSlots:b,items:d.items,isDraggingOver:c.isDraggingOver}))})}}],[{key:"propTypes",get:function get(){return{nbrSlots:PropTypes.number,itemHovered:PropTypes.string,data:PropTypes.object.isRequired,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}}]),b}(React.PureComponent),CrateMode=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickMode=c.handleOnClickMode.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{items:PropTypes.array.isRequired,mode:PropTypes.string.isRequired,onClickMode:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickMode",value:function handleOnClickMode(a,b){this.props.onClickMode&&this.props.onClickMode(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.mode,d=b.items;return React.createElement("div",{className:"crate-mode"},d.map(function(b){return React.createElement("a",{key:b.id,className:c==b.id?"active":"",onClick:a.handleOnClickMode.bind(a,b.id),href:"#",role:"button"},b.name)}))}}]),b}(React.PureComponent),Crate=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.rules,c=a.cart;return React.createElement("div",{className:"crate"},React.createElement("div",{className:"crate-products"},c,b&&0<b.length&&React.createElement("div",{className:"crate-info"},b.map(function(a,b){return React.createElement("p",{key:b,className:"rule",style:{color:a.color?a.color:"inherit"}},React.createElement("img",{src:"/images".concat(a.icon)})," ",React.createElement("i",null,React.createElement("strong",null,a.name,":")," ",a.message))}))))}}],[{key:"propTypes",get:function get(){return{rules:PropTypes.array,cart:PropTypes.element}}}]),b}(React.PureComponent),OrderPanel=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.title,c=a.description,d=a.crateMode,e=a.crate,f=a.summaryPrice,g=a.form;return React.createElement("section",{className:"panel"},React.createElement("h2",null,b),React.createElement("div",{className:"control"},React.createElement("p",{className:"description"},c),d),e,React.createElement("section",{className:"summary"},f,g))}}],[{key:"propTypes",get:function get(){return{title:PropTypes.string,description:PropTypes.string,crateMode:PropTypes.element,crate:PropTypes.element,summaryPrice:PropTypes.element,form:PropTypes.element}}}]),b}(React.PureComponent),OrderForm=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state={note:""},c.handleNoteChange=c.handleNoteChange.bind(_assertThisInitialized(c)),c.handleSubmit=c.handleSubmit.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{onClickSubmit:PropTypes.func}}}]),_createClass(b,[{key:"handleNoteChange",value:function handleNoteChange(a){this.setState({note:a.target.value})}},{key:"handleSubmit",value:function handleSubmit(a){this.props.onClickSubmit&&this.props.onClickSubmit(this.state.note),a.preventDefault()}},{key:"render",value:function render(){return React.createElement("div",{className:"summary-form"},React.createElement("form",{onSubmit:this.handleSubmit},React.createElement("textarea",{value:this.state.note,onChange:this.handleNoteChange,rows:"5",placeholder:"Additional notes"}),React.createElement("input",{type:"submit",value:"Request quote"})))}}]),b}(React.PureComponent),OrderSumary=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnDeleteItem=c.handleOnDeleteItem.bind(_assertThisInitialized(c)),c.handleOnDeleteAllItems=c.handleOnDeleteAllItems.bind(_assertThisInitialized(c)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnClickSelectItem=c.handleOnClickSelectItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{currency:PropTypes.string,modes:PropTypes.array,currentMode:PropTypes.string,summary:PropTypes.array,itemsData:PropTypes.array,onDeleteItem:PropTypes.func,onDeleteAllItems:PropTypes.func,onMouseEnterItem:PropTypes.func,onMouseLeaveItem:PropTypes.func,onClickSelectItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnDeleteItem",value:function handleOnDeleteItem(a,b){this.props.onDeleteItem&&this.props.onDeleteItem(a),b.preventDefault()}},{key:"handleOnDeleteAllItems",value:function handleOnDeleteAllItems(a){this.props.onDeleteAllItems&&this.props.onDeleteAllItems(),a.preventDefault()}},{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onMouseEnterItem&&this.props.onMouseEnterItem(a),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a){this.props.onMouseLeaveItem&&this.props.onMouseLeaveItem(),a.preventDefault()}},{key:"handleOnClickSelectItem",value:function handleOnClickSelectItem(a,b){return"IMG"!==b.target.tagName&&this.props.onClickSelectItem&&this.props.onClickSelectItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.currency,d=b.modes,e=b.currentMode,f=b.summary,g=b.itemsData,h=d.find(function(a){return a.id===e});return React.createElement("div",{className:"summary-price"},React.createElement("table",null,React.createElement("thead",null,React.createElement("tr",null,React.createElement("td",{colSpan:"2",className:"summary-remove-all"},React.createElement("span",{className:"item-card-name"},"Remove all cards"),React.createElement("button",{onClick:this.handleOnDeleteAllItems},React.createElement("img",{src:"/images/shop/icon-remove.svg"})))),h&&React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},h.name),React.createElement("td",{className:"price"},React.createElement("div",null,"".concat(c," ").concat(formatMoney(h.price)),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))),React.createElement("span",{style:{display:"inline-block",width:"30px"}},"\xA0")))),React.createElement("tbody",null,f.map(function(b,d){var e,f;if(g[d]){e=g[d];var h=Object.keys(e.warnings);h&&0<h.length&&(f=e.warnings[h[0]])}return React.createElement("tr",{key:b.id,className:"hoverable ".concat(b.selected?"selected":""),onClick:a.handleOnClickSelectItem.bind(a,d),onMouseEnter:a.handleOnMouseEnterItem.bind(a,b.id),onMouseLeave:a.handleOnMouseLeaveItem},React.createElement("td",{className:"item-card-name"},React.createElement("div",null,b.name)),React.createElement("td",{className:"price"},React.createElement("div",null,"".concat(c," ").concat(formatMoney(b.price)),React.createElement("button",{onClick:a.handleOnDeleteItem.bind(a,d)},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))),f&&React.createElement("img",{style:{marginLeft:"10px"},className:"alert-warning",src:"/images/".concat(f.icon)}),!f&&React.createElement("span",{style:{display:"inline-block",width:"30px"}},"\xA0")))})),React.createElement("tfoot",null,React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},"Price estimate"),React.createElement("td",{className:"price"},React.createElement("div",null,f.length?"".concat(c," ").concat(formatMoney(f.reduce(function(a,b){return a+b.price},0)+h.price)):"".concat(c," ").concat(formatMoney(h.price)),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"icon remove"}))),React.createElement("span",{style:{display:"inline-block",width:"30px"}},"\xA0"))))))}}]),b}(React.PureComponent),Backlog=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.currency,c=a.data,d=a.items,e=a.onClickAddItem,f=c.itemIds.map(function(a){return d[a]}),g=f.map(function(a,c){return React.createElement(ProductItem,{key:a.id,id:a.id,index:c,name:a.name,price:a.price,currency:b,image:"/images/".concat(a.image),specs:a.specs,onClickAddItem:e})});return React.createElement(Droppable,{droppableId:c.id,isDropDisabled:!0},function(a){return React.createElement("div",_extends({className:"backlog-container",ref:a.innerRef},a.droppableProps),g,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder))})}}],[{key:"propTypes",get:function get(){return{currency:PropTypes.string,data:PropTypes.object.isRequired,items:PropTypes.object,onClickAddItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{items:{}}}}]),b}(React.PureComponent),Shop=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state=c.props.data,c.handleCrateModeChange=c.handleCrateModeChange.bind(_assertThisInitialized(c)),c.handleOnDragEnd=c.handleOnDragEnd.bind(_assertThisInitialized(c)),c.handleDeleteItem=c.handleDeleteItem.bind(_assertThisInitialized(c)),c.handleDeleteAllItems=c.handleDeleteAllItems.bind(_assertThisInitialized(c)),c.handleMouseEnterItem=c.handleMouseEnterItem.bind(_assertThisInitialized(c)),c.handleMouseLeaveItem=c.handleMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleClickAddItem=c.handleClickAddItem.bind(_assertThisInitialized(c)),c.checkAlerts=c.checkAlerts.bind(_assertThisInitialized(c)),c.handleToggleItemProgress=c.handleToggleItemProgress.bind(_assertThisInitialized(c)),c.handleToggleItemWarning=c.handleToggleItemWarning.bind(_assertThisInitialized(c)),c.handleClickSelectItem=c.handleClickSelectItem.bind(_assertThisInitialized(c)),c.handleClickSubmit=c.handleClickSubmit.bind(_assertThisInitialized(c)),c.handleToggleOverlayRemove=c.handleToggleOverlayRemove.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{data:PropTypes.object.isRequired}}}]),_createClass(b,[{key:"componentDidMount",value:function componentDidMount(){// index 0 is a Kasli, we place it as a default conf on the crate.
 this.handleOnDragEnd({source:{droppableId:"backlog",index:0},destination:{droppableId:"cart",index:0},draggableId:null})}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){(b.columns.cart.items!==this.state.columns.cart.items||b.currentMode!==this.state.currentMode)&&this.checkAlerts(b.columns.cart.items,this.state.columns.cart.items)}},{key:"handleCrateModeChange",value:function handleCrateModeChange(a){this.setState({currentMode:a})}},{key:"handleDeleteItem",value:function handleDeleteItem(a){var b=Array.from(this.state.columns.cart.items);b.splice(a,1),this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:b})})}))}},{key:"handleDeleteAllItems",value:function handleDeleteAllItems(){this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:[]})})}))}},{key:"handleMouseEnterItem",value:function handleMouseEnterItem(a){this.setState(_objectSpread({},this.state,{currentItemHovered:a}))}},{key:"handleMouseLeaveItem",value:function handleMouseLeaveItem(){this.setState(_objectSpread({},this.state,{currentItemHovered:null}))}},{key:"handleClickAddItem",value:function handleClickAddItem(a){var b={droppableId:"cart",index:this.state.columns.cart.items.length};this.handleOnDragEnd({source:{droppableId:"backlog",index:a},destination:b,draggableId:null})}},{key:"handleToggleItemProgress",value:function handleToggleItemProgress(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showProgress:d===a&&b,showOverlayRemove:!1,showWarning:!1})})})})}))}},{key:"handleToggleItemWarning",value:function handleToggleItemWarning(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showWarning:d===a&&b,showProgress:!1,showOverlayRemove:!1})})})})}))}},{key:"handleClickSelectItem",value:function handleClickSelectItem(a){var b=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:b.map(function(b,c){return _objectSpread({},b,{selected:c===a})})})})}))}},{key:"handleToggleOverlayRemove",value:function handleToggleOverlayRemove(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showOverlayRemove:d===a&&b,showProgress:!1,showWarning:!1})})})})}))}},{key:"handleClickSubmit",value:function handleClickSubmit(b){var c={items:[],type:this.state.currentMode},d=Array.from(this.state.columns.cart.items);for(var g in d){var h=d[g];c.items.push({name:h.name})}var e=document.createElement("a"),a=new Date().getTime(),f="Hello!\n\nI would like to request a quotation for my below configuration:\n\n".concat(JSON.stringify(c),"\n\n(Please do not edit the machine-readable representation above)\n\n");b&&(f="".concat(f,"\n\nAdditional note:\n\n").concat(b?b.trim():"")),document.body.appendChild(e),e.style="display: none",e.href="mailto:sales@m-labs.hk?subject=".concat("[Order hardware] - Request Quote","&body=").concat(encodeURIComponent(f)),e.click()}},{key:"handleOnDragEnd",value:function handleOnDragEnd(a){var b=a.source,c=a.destination,d=a.draggableId;if(!c)return void("cart"===b.droppableId&&this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},b.droppableId,_objectSpread({},this.state.columns[b.droppableId],{items:remove(this.state.columns[b.droppableId].items,b.index)})))})));switch(b.droppableId){case"backlog":this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},c.droppableId,_objectSpread({},this.state.columns[c.droppableId],{items:copy(this.state.items,this.state.columns[b.droppableId],this.state.columns[c.droppableId],b,c)})))}));break;case c.droppableId:this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},c.droppableId,_objectSpread({},this.state.columns[c.droppableId],{items:reorder(this.state.columns[c.droppableId].items,b.index,c.index)})))}));break;default:}}},{key:"checkAlerts",value:function checkAlerts(a,b){var c=this;console.log("--- START CHECKING CRATE WARNING ---");var d=this.state,e=d.currentMode,f=d.crateModeSlots,g=d.crateRules,h=Array.from(b),j={},k={},l=nbrOccupiedSlotsInCrate(b);l>f[e]&&(k[g.maxSlot.type]=_objectSpread({},g.maxSlot));for(var m=h.reduce(function(a,b,c){return("kasli"===b.type||"kasli-backplane"===b.type)&&a.push(c),a},[]),n=0;n<=m.length-1;n++){var o=void 0,p=0,q=0,r=m[n];if(o=n==m.length-1?h.slice(r+1):h.slice(r+1,m[n+1]),0==n){var s=h.slice(0,r),t=s.findIndex(function(a){return a.rules&&a.rules.resources});-1!=t&&(t in j?"warnings"in j[t]?j[t].warnings.resources=_objectSpread({},h[t].rules.resources):(j[t].warnings={},j[t].warnings.resources=_objectSpread({},h[t].rules.resources)):(j[t]=_objectSpread({},h[t]),j[t].warnings={},j[t].warnings.resources=_objectSpread({},h[t].rules.resources)))}if(p=o.filter(function(a){return"idc-bnc"!==a.type}).reduce(function(a,b){return a+b.slotOccupied},0),q=o.reduce(function(a,b){return"clocker"===b.type?a+b.clockOccupied:a},0),r in j?(j[r].nbrCurrentSlot=p,j[r].nbrCurrentClock=q,!("warnings"in j[r])&&(j[r].warnings={})):(j[r]=_objectSpread({},h[r]),j[r].nbrCurrentSlot=p,j[r].nbrCurrentClock=q,j[r].warnings={}),p>h[r].nbrSlotMax&&(k[h[r].rules.maxSlot.type]=_objectSpread({},h[r].rules.maxSlot),j[r].warnings.maxSlotWarning=_objectSpread({},h[r].rules.maxSlotWarning)),q>h[r].nbrClockMax&&(k[h[r].rules.maxClock.type]=_objectSpread({},h[r].rules.maxClock),j[r].warnings.maxClockWarning=_objectSpread({},h[r].rules.maxClockWarning)),h.length>r+1){var G=h[r+1];("kasli"===G.type||"kasli-backplane"===G.type)&&(k[G.rules.follow.type]=_objectSpread({},G.rules.follow))}}// check number of clock connector available
 for(var u=h.reduce(function(a,b,c){return("kasli"===b.type||"kasli-backplane"===b.type||"clocker"===b.type)&&a.push(c),a},[]),v=0;v<=u.length-1;v++){var w=void 0,x=0,y=u[v];w=v==u.length-1?h.slice(y+1):h.slice(y+1,u[v+1]),x=w.reduce(function(a,b){return a+b.clockOccupied},0),y in j?j[y].nbrCurrentClock?j[y].nbrCurrentClock+=x:j[y].nbrCurrentClock=x:(j[y]=_objectSpread({},h[y]),j[y].nbrCurrentClock=x,j[y].warnings={}),x>h[y].nbrClockMax&&(k[h[y].rules.maxClock.type]=_objectSpread({},h[y].rules.maxClock),j[y].warnings.maxClockWarning=_objectSpread({},h[y].rules.maxClockWarning))}// check for number of recommanded EEM connectors
 ["novo","urukul","koster"].map(function(a){return h.find(function(b){return b.type===a})&&(k[c.state.items[a].rules.connectors.type]=_objectSpread({},c.state.items[a].rules.connectors)),a});for(var z=h.reduce(function(a,b,c){return"idc-bnc"===b.type&&a.push(c),a},[]),A=z.length-1;0<=A;A--){var B=z[A],C=!1;if(0==B)C=!0;else if(1<=B){var H=z[A]-1;"zotino"!==h[H].type&&"hd68"!==h[H].type&&"idc-bnc"!==h[H].type&&(C=!0)}C&&(j[B]=_objectSpread({},h[B]),j[B].warnings={},j[B].warnings.wrong=_objectSpread({},h[B].rules.wrong))}// check number of IDC-BNC adapters for a Zotino and HD68-IDC
 for(var D=h.reduce(function(a,b,c){return("zotino"===b.type||"hd68"===b.type)&&a.push(c),a},[]),E=function(a){var b=void 0,c=0,d=D[a];b=a===D.length-1?h.slice(d+1):h.slice(d+1,D[a+1]);var e=!1;// check if HD68-IDC has at least 1 IDC-BNC adapter
 if(c=b.reduce(function(a,b,c,d){return 0===c&&"idc-bnc"===b.type?a+1:"idc-bnc"===d[0].type&&0<c&&"idc-bnc"===d[c-1].type?("idc-bnc"!==b.type&&(e=!0),a+("idc-bnc"!==b.type||e?0:1)):a},0),(d in j)?(j[d].nbrCurrentSlot=c,!("warnings"in j[d])&&(j[d].warnings={})):(j[d]=_objectSpread({},h[d]),j[d].nbrCurrentSlot=c,j[d].warnings={}),0<c&&(k[h[d].rules.maxSlot.type]=_objectSpread({},h[d].rules.maxSlot)),c>h[d].nbrSlotMax&&(j[d].warnings.maxSlotWarning=_objectSpread({},h[d].rules.maxSlotWarning)),"hd68"===h[d].type){var f=!1;d<h.length-1?"idc-bnc"!==h[d+1].type&&(f=!0):d===h.length-1&&(f=!0),f&&((d in j)?j[d].warnings.minAdapter=_objectSpread({},h[d].rules.minAdapter):(j[d]=_objectSpread({},h[d]),j[d].warnings={},j[d].warnings.minAdapter=_objectSpread({},h[d].rules.minAdapter)))}},F=0;F<=D.length-1;F++)E(F);// update state with rules
-this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{itemsData:_objectSpread({},j)})}),rules:_objectSpread({},k)}))}},{key:"render",value:function render(){var a=this.state,b=a.currency,c=a.currentItemHovered,d=a.currentMode,e=a.crateModeSlots,f=a.crateModeItems,g=a.items,h=a.columns,i=a.rules;return React.createElement(DragDropContext,{onDragEnd:this.handleOnDragEnd},React.createElement(Layout,{className:"shop",aside:React.createElement(Backlog,{currency:b,items:g,data:h.backlog,onClickAddItem:this.handleClickAddItem}),main:React.createElement(OrderPanel,{title:"Order hardware",description:" Drag and drop the cards you want into the crate below to see how the combination would look like. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-****.hk. The price is estimated and must be confirmed by a quote.",crateMode:React.createElement(CrateMode,{items:f,mode:d,onClickMode:this.handleCrateModeChange}),crate:React.createElement(Crate,{cart:React.createElement(Cart,{nbrSlots:e[d],data:h.cart,itemHovered:c,onToggleProgress:this.handleToggleItemProgress,onToggleWarning:this.handleToggleItemWarning,onToggleOverlayRemove:this.handleToggleOverlayRemove,onClickRemoveItem:this.handleDeleteItem}),rules:Object.values(i).filter(function(a){return a})}),summaryPrice:React.createElement(OrderSumary,{currency:b,currentMode:d,modes:f,summary:h.cart.items,itemsData:h.cart.itemsData,onMouseEnterItem:this.handleMouseEnterItem,onMouseLeaveItem:this.handleMouseLeaveItem,onDeleteItem:this.handleDeleteItem,onDeleteAllItems:this.handleDeleteAllItems,onClickSelectItem:this.handleClickSelectItem}),form:React.createElement(OrderForm,{onClickSubmit:this.handleClickSubmit})})}))}}]),b}(React.PureComponent);ReactDOM.render(React.createElement(Shop,{data:data}),document.querySelector("#root-shop"));
+this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{itemsData:_objectSpread({},j)})}),rules:_objectSpread({},k)}))}},{key:"render",value:function render(){var a=this.state,b=a.currency,c=a.currentItemHovered,d=a.currentMode,e=a.crateModeSlots,f=a.crateModeItems,g=a.items,h=a.columns,i=a.rules;return React.createElement(DragDropContext,{onDragEnd:this.handleOnDragEnd},React.createElement(Layout,{className:"shop",aside:React.createElement(Backlog,{currency:b,items:g,data:h.backlog,onClickAddItem:this.handleClickAddItem}),main:React.createElement(OrderPanel,{title:"Order hardware",description:" Drag and drop the cards you want into the crate below to see how the combination would look like. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-****.hk. The price is estimated and must be confirmed by a quote.",crateMode:React.createElement(CrateMode,{items:f,mode:d,onClickMode:this.handleCrateModeChange}),crate:React.createElement(Crate,{cart:React.createElement(Cart,{nbrSlots:e[d],data:h.cart,itemHovered:c,onToggleProgress:this.handleToggleItemProgress,onToggleWarning:this.handleToggleItemWarning,onToggleOverlayRemove:this.handleToggleOverlayRemove,onClickRemoveItem:this.handleDeleteItem}),rules:Object.values(i).filter(function(a){return a})}),summaryPrice:React.createElement(OrderSumary,{currency:b,currentMode:d,modes:f,summary:h.cart.items,itemsData:h.cart.itemsData,onMouseEnterItem:this.handleMouseEnterItem,onMouseLeaveItem:this.handleMouseLeaveItem,onDeleteItem:this.handleDeleteItem,onDeleteAllItems:this.handleDeleteAllItems,onClickSelectItem:this.handleClickSelectItem}),form:React.createElement(OrderForm,{onClickSubmit:this.handleClickSubmit})})}))}}]),b}(React.PureComponent);/**
+ * Component that renders a product.
+ * Used in the aside (e.g backlog of product)
+ */ReactDOM.render(React.createElement(Shop,{data:data}),document.querySelector("#root-shop"));