forked from M-Labs/web2019
16 lines
35 KiB
JavaScript
16 lines
35 KiB
JavaScript
'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)};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 used")),React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors used")));break;case"zotino":case"hd68":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," connectors used")));break;case"clocker":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors used")));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"}),"This will open an email window. Send the email to make your request."))}}]),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);/**
|
|
* 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"));
|