forked from M-Labs/web2019
2396 lines
81 KiB
JavaScript
2396 lines
81 KiB
JavaScript
'use strict';
|
|
|
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
|
|
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
|
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
|
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
|
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
|
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
|
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
|
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
|
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
|
|
|
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
|
|
|
|
function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
|
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
|
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
|
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
|
|
var _window$ReactBeautifu = window.ReactBeautifulDnd,
|
|
DragDropContext = _window$ReactBeautifu.DragDropContext,
|
|
Draggable = _window$ReactBeautifu.Draggable,
|
|
Droppable = _window$ReactBeautifu.Droppable;
|
|
var data = window.shop_data;
|
|
var axios = window.axios;
|
|
|
|
var productStyle = function productStyle(style, snapshot, removeAnim, hovered, selected) {
|
|
var custom = {
|
|
opacity: snapshot.isDragging ? .7 : 1,
|
|
backgroundColor: hovered || selected ? '#eae7f7' : 'initial'
|
|
};
|
|
|
|
if (!snapshot.isDropAnimating) {
|
|
return _objectSpread({}, style, {}, custom);
|
|
}
|
|
|
|
if (removeAnim) {
|
|
// cannot be 0, but make it super tiny
|
|
custom.transitionDuration = '0.001s';
|
|
}
|
|
|
|
return _objectSpread({}, style, {}, custom);
|
|
};
|
|
|
|
var cartStyle = function cartStyle(style, snapshot) {
|
|
var isDraggingOver = snapshot.isDraggingOver;
|
|
return _objectSpread({}, style, {}, {
|
|
backgroundColor: isDraggingOver ? '#f2f2f2' : '#f9f9f9',
|
|
border: isDraggingOver ? '1px dashed #ccc' : '0'
|
|
});
|
|
};
|
|
|
|
var nbrConnectorsStyle = function nbrConnectorsStyle(data) {
|
|
if (!data || !data.nbrCurrentSlot) {
|
|
return {};
|
|
}
|
|
|
|
var p = data.nbrCurrentSlot * 100 / data.nbrSlotMax;
|
|
|
|
if (p > 100) {
|
|
p = 100;
|
|
}
|
|
|
|
return {
|
|
width: "".concat(p, "%")
|
|
};
|
|
};
|
|
|
|
var nbrClocksStyle = function nbrClocksStyle(data) {
|
|
if (!data || !data.nbrCurrentClock) {
|
|
return {};
|
|
}
|
|
|
|
var p = data.nbrCurrentClock * 100 / data.nbrClockMax;
|
|
|
|
if (p > 100) {
|
|
p = 100;
|
|
}
|
|
|
|
return {
|
|
width: "".concat(p, "%")
|
|
};
|
|
};
|
|
|
|
var copy = function copy(model, source, destination, droppableSource, droppableDestination) {
|
|
var sourceClone = Array.from(source.itemIds);
|
|
var destClone = Array.from(destination.items);
|
|
var item = sourceClone[droppableSource.index];
|
|
destClone.splice(droppableDestination.index, 0, _objectSpread({}, model[item], {
|
|
id: uuidv4()
|
|
}));
|
|
return destClone;
|
|
};
|
|
|
|
var reorder = function reorder(list, startIndex, endIndex) {
|
|
var result = Array.from(list);
|
|
|
|
var _result$splice = result.splice(startIndex, 1),
|
|
_result$splice2 = _slicedToArray(_result$splice, 1),
|
|
removed = _result$splice2[0];
|
|
|
|
result.splice(endIndex, 0, removed);
|
|
return result;
|
|
};
|
|
|
|
var remove = function remove(list, startIndex) {
|
|
var result = Array.from(list);
|
|
result.splice(startIndex, 1);
|
|
return result;
|
|
};
|
|
|
|
var nbrOccupiedSlotsInCrate = function nbrOccupiedSlotsInCrate(items) {
|
|
return items.reduce(function (prev, next) {
|
|
return prev + (next.hp === 8 ? 2 : 1);
|
|
}, 0);
|
|
};
|
|
|
|
function formatMoney(amount) {
|
|
var decimalCount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
|
|
var decimal = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ".";
|
|
var thousands = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : ",";
|
|
|
|
// https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript
|
|
// changes: return amount if error in order to avoid empty value
|
|
try {
|
|
decimalCount = Math.abs(decimalCount);
|
|
decimalCount = isNaN(decimalCount) ? 2 : decimalCount;
|
|
var negativeSign = amount < 0 ? "-" : "";
|
|
var i = parseInt(amount = Math.abs(Number(amount) || 0).toFixed(decimalCount)).toString();
|
|
var j = i.length > 3 ? i.length % 3 : 0;
|
|
return negativeSign + (j ? i.substr(0, j) + thousands : '') + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousands) + (decimalCount ? decimal + Math.abs(amount - i).toFixed(decimalCount).slice(2) : "");
|
|
} catch (e) {
|
|
return amount;
|
|
}
|
|
}
|
|
|
|
;
|
|
/**
|
|
* Component that provides a base layout (aside/main) for the page.
|
|
*/
|
|
|
|
var Layout =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent) {
|
|
_inherits(Layout, _React$PureComponent);
|
|
|
|
_createClass(Layout, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
aside: PropTypes.any,
|
|
main: PropTypes.any,
|
|
mobileSideMenuShouldOpen: PropTypes.bool,
|
|
isMobile: PropTypes.bool,
|
|
newCardJustAdded: PropTypes.bool,
|
|
onClickToggleMobileSideMenu: PropTypes.func,
|
|
onClickCloseRFQFeedback: PropTypes.func,
|
|
RFQBodyType: PropTypes.string,
|
|
RFQBodyOrder: PropTypes.string,
|
|
onClickLoadCustomConf: PropTypes.func
|
|
};
|
|
}
|
|
}, {
|
|
key: "defaultProps",
|
|
get: function get() {
|
|
return {
|
|
mobileSideMenuShouldOpen: false
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function Layout(props) {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Layout);
|
|
|
|
_this = _possibleConstructorReturn(this, _getPrototypeOf(Layout).call(this, props));
|
|
_this.state = {
|
|
customconf: '',
|
|
error: null
|
|
};
|
|
_this.handleCustomConfig = _this.handleCustomConfig.bind(_assertThisInitialized(_this));
|
|
_this.handleClickLoad = _this.handleClickLoad.bind(_assertThisInitialized(_this));
|
|
_this.checkValidation = _this.checkValidation.bind(_assertThisInitialized(_this));
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Layout, [{
|
|
key: "handleCustomConfig",
|
|
value: function handleCustomConfig(e) {
|
|
var value = e.target.value;
|
|
this.checkValidation(value);
|
|
}
|
|
}, {
|
|
key: "checkValidation",
|
|
value: function checkValidation(conf) {
|
|
var conf_obj;
|
|
|
|
if (!conf) {
|
|
conf = this.state.customconf;
|
|
}
|
|
|
|
try {
|
|
conf_obj = JSON.parse(conf);
|
|
} catch (e) {
|
|
return this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format'
|
|
}));
|
|
}
|
|
|
|
if (!conf_obj) {
|
|
return this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format'
|
|
}));
|
|
}
|
|
|
|
if ((!conf_obj.items || !conf_obj.type) && (Object.prototype.toString.call(conf_obj.items) !== '[object Array]' || Object.prototype.toString.call(conf_obj.type) !== '[object String]')) {
|
|
return this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format'
|
|
}));
|
|
}
|
|
|
|
if (conf_obj.type !== "desktop" && conf_obj.type !== "rack") {
|
|
return this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format'
|
|
}));
|
|
}
|
|
|
|
conf_obj.items.map(function (item) {
|
|
try {
|
|
return JSON.parse(item);
|
|
} catch (e) {
|
|
return null;
|
|
}
|
|
});
|
|
conf_obj.items = conf_obj.items.filter(function (item) {
|
|
return item;
|
|
});
|
|
|
|
if (conf_obj.items.filter(function (item) {
|
|
return Object.prototype.toString.call(item) !== '[object Object]' || !item.pn || Object.prototype.toString.call(item.pn) !== '[object String]';
|
|
}).length > 0) {
|
|
return this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
customconf_ready: null,
|
|
error: 'invalid format'
|
|
}));
|
|
}
|
|
|
|
conf_obj.items = conf_obj.items.map(function (item) {
|
|
return {
|
|
pn: item.pn
|
|
};
|
|
});
|
|
this.setState(_objectSpread({}, this.state, {
|
|
customconf: conf,
|
|
error: null,
|
|
customconf_ready: conf_obj
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleClickLoad",
|
|
value: function handleClickLoad() {
|
|
this.checkValidation();
|
|
|
|
if (this.props.onClickLoadCustomConf) {
|
|
this.props.onClickLoadCustomConf(this.state.customconf_ready);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props = this.props,
|
|
aside = _this$props.aside,
|
|
main = _this$props.main,
|
|
mobileSideMenuShouldOpen = _this$props.mobileSideMenuShouldOpen,
|
|
isMobile = _this$props.isMobile,
|
|
newCardJustAdded = _this$props.newCardJustAdded,
|
|
onClickToggleMobileSideMenu = _this$props.onClickToggleMobileSideMenu,
|
|
onClickCloseRFQFeedback = _this$props.onClickCloseRFQFeedback,
|
|
showRFQFeedback = _this$props.showRFQFeedback,
|
|
RFQBodyType = _this$props.RFQBodyType,
|
|
RFQBodyOrder = _this$props.RFQBodyOrder;
|
|
return React.createElement("div", {
|
|
className: "layout"
|
|
}, React.createElement("aside", {
|
|
className: 'aside ' + (mobileSideMenuShouldOpen ? 'menu-opened' : '')
|
|
}, aside), mobileSideMenuShouldOpen ? React.createElement("section", {
|
|
className: "main",
|
|
onClick: onClickToggleMobileSideMenu
|
|
}, main) : React.createElement("section", {
|
|
className: "main"
|
|
}, main), isMobile && newCardJustAdded ? React.createElement("div", {
|
|
className: "feedback-add-success"
|
|
}, "\u2713 added") : null, React.createElement("div", {
|
|
"class": "modal fade ".concat(showRFQFeedback ? 'show' : ''),
|
|
style: {
|
|
'display': showRFQFeedback ? 'block' : 'none'
|
|
},
|
|
id: "exampleModal",
|
|
tabindex: "-1",
|
|
role: "dialog",
|
|
"aria-labelledby": "exampleModalLabel",
|
|
"aria-hidden": "true"
|
|
}, React.createElement("div", {
|
|
"class": "modal-dialog",
|
|
role: "document"
|
|
}, React.createElement("div", {
|
|
"class": "modal-content"
|
|
}, React.createElement("div", {
|
|
"class": "modal-body rfqFeedback"
|
|
}, React.createElement("div", {
|
|
className: "d-flex w-100"
|
|
}, RFQBodyType === 'email' ? React.createElement("div", {
|
|
className: "d-flex"
|
|
}, React.createElement("div", null, React.createElement("img", {
|
|
width: "30px",
|
|
src: "/images/shop/icon-done.svg",
|
|
alt: "close"
|
|
})), React.createElement("div", {
|
|
style: {
|
|
'padding': '0 .5em'
|
|
}
|
|
}, "We've received your request and will be in contact soon.")) : null, RFQBodyType === 'show' ? React.createElement("p", null, RFQBodyOrder) : null, RFQBodyType === 'import' ? React.createElement("div", {
|
|
className: "w-100"
|
|
}, React.createElement("form", {
|
|
className: "form w-100"
|
|
}, React.createElement("div", {
|
|
className: "form-group"
|
|
}, React.createElement("p", {
|
|
className: "small"
|
|
}, "Add your own configuration below. Should be something like:", React.createElement("br", null), JSON.stringify({
|
|
"items": [{
|
|
"pn": "1123"
|
|
}, {
|
|
"pn": "2118"
|
|
}, {
|
|
"pn": "2118"
|
|
}, {
|
|
"pn": "2128"
|
|
}],
|
|
"type": "desktop"
|
|
}))), React.createElement("div", {
|
|
className: "form-group w-100"
|
|
}, React.createElement("textarea", {
|
|
onChange: this.handleCustomConfig,
|
|
value: this.state.customconf,
|
|
className: "form-control w-100",
|
|
rows: "5",
|
|
placeholder: "Add your custom configuration here. e.g "
|
|
})), this.state.error ? React.createElement("div", {
|
|
className: "form-group"
|
|
}, React.createElement("p", {
|
|
className: "text-danger"
|
|
}, this.state.error)) : null), React.createElement("div", {
|
|
className: "d-flex flex-column flex-sm-row justify-content-end"
|
|
}, React.createElement("a", {
|
|
type: "button",
|
|
onClick: onClickCloseRFQFeedback,
|
|
"class": "btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 mr-sm-2"
|
|
}, "Close"), React.createElement("a", {
|
|
type: "button",
|
|
onClick: this.handleClickLoad,
|
|
"class": "btn btn-sm btn-primary m-0 ml-sm-2 ".concat(this.state.error ? 'disabled' : '')
|
|
}, "Load configuration"))) : null, React.createElement("div", null, React.createElement("button", {
|
|
onClick: onClickCloseRFQFeedback
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-close.svg",
|
|
alt: "close"
|
|
})))))))), React.createElement("div", {
|
|
onClick: onClickCloseRFQFeedback,
|
|
className: "modal-backdrop fade ".concat(showRFQFeedback ? 'show' : ''),
|
|
style: {
|
|
'display': showRFQFeedback ? 'initial' : 'none'
|
|
}
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Layout;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that renders a product.
|
|
* Used in the aside (e.g backlog of product)
|
|
*/
|
|
|
|
|
|
var ProductItem =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent2) {
|
|
_inherits(ProductItem, _React$PureComponent2);
|
|
|
|
_createClass(ProductItem, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
id: PropTypes.string.isRequired,
|
|
index: PropTypes.number.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
name_codename: PropTypes.string,
|
|
price: PropTypes.number.isRequired,
|
|
currency: PropTypes.string.isRequired,
|
|
image: PropTypes.string.isRequired,
|
|
specs: PropTypes.array,
|
|
onClickAddItem: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function ProductItem(props) {
|
|
var _this2;
|
|
|
|
_classCallCheck(this, ProductItem);
|
|
|
|
_this2 = _possibleConstructorReturn(this, _getPrototypeOf(ProductItem).call(this, props));
|
|
_this2.handleOnClickAddItem = _this2.handleOnClickAddItem.bind(_assertThisInitialized(_this2));
|
|
return _this2;
|
|
}
|
|
|
|
_createClass(ProductItem, [{
|
|
key: "handleOnClickAddItem",
|
|
value: function handleOnClickAddItem(index, tap, e) {
|
|
if (this.props.onClickAddItem) {
|
|
this.props.onClickAddItem(index, tap);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props2 = this.props,
|
|
id = _this$props2.id,
|
|
index = _this$props2.index,
|
|
name = _this$props2.name,
|
|
name_codename = _this$props2.name_codename,
|
|
price = _this$props2.price,
|
|
currency = _this$props2.currency,
|
|
image = _this$props2.image,
|
|
specs = _this$props2.specs;
|
|
var render_specs = specs && specs.length > 0 && React.createElement("ul", null, specs.map(function (spec, index) {
|
|
return React.createElement("li", {
|
|
key: index
|
|
}, spec);
|
|
}));
|
|
return React.createElement("section", {
|
|
className: "productItem"
|
|
}, React.createElement("div", {
|
|
className: "content"
|
|
}, React.createElement("h3", {
|
|
style: {
|
|
'margin-bottom': name_codename ? '5px' : '20px'
|
|
}
|
|
}, name), name_codename ? React.createElement("p", null, name_codename) : null, React.createElement("div", {
|
|
className: "price"
|
|
}, "".concat(currency, " ").concat(formatMoney(price))), render_specs), React.createElement("div", {
|
|
className: "content"
|
|
}, React.createElement("button", {
|
|
onClick: this.handleOnClickAddItem.bind(this, index, true)
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-add.svg",
|
|
alt: "add"
|
|
})), React.createElement(Draggable, {
|
|
draggableId: id,
|
|
index: index
|
|
}, function (provided, snapshot) {
|
|
return React.createElement(React.Fragment, null, React.createElement("img", _extends({
|
|
ref: provided.innerRef
|
|
}, provided.draggableProps, provided.dragHandleProps, {
|
|
style: productStyle(provided.draggableProps.style, snapshot, true // hack: remove weird animation after a drop
|
|
),
|
|
src: image
|
|
})), snapshot.isDragging && React.createElement("img", {
|
|
className: "simclone",
|
|
src: image
|
|
}));
|
|
})));
|
|
}
|
|
}]);
|
|
|
|
return ProductItem;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that renders a product.
|
|
* Used in the crate
|
|
*/
|
|
|
|
|
|
var ProductCartItem =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent3) {
|
|
_inherits(ProductCartItem, _React$PureComponent3);
|
|
|
|
_createClass(ProductCartItem, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
isMobile: PropTypes.bool,
|
|
hovered: PropTypes.bool,
|
|
index: PropTypes.number.isRequired,
|
|
model: PropTypes.object.isRequired,
|
|
data: PropTypes.object,
|
|
onToggleProgress: PropTypes.func,
|
|
onToggleWarning: PropTypes.func,
|
|
onToggleOverlayRemove: PropTypes.func,
|
|
onClickRemoveItem: PropTypes.func
|
|
};
|
|
}
|
|
}, {
|
|
key: "defaultProps",
|
|
get: function get() {
|
|
return {
|
|
hovered: false
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function ProductCartItem(props) {
|
|
var _this3;
|
|
|
|
_classCallCheck(this, ProductCartItem);
|
|
|
|
_this3 = _possibleConstructorReturn(this, _getPrototypeOf(ProductCartItem).call(this, props));
|
|
_this3.handleOnMouseEnterItem = _this3.handleOnMouseEnterItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnMouseLeaveItem = _this3.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnMouseEnterWarningItem = _this3.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnMouseLeaveWarningItem = _this3.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnMouseEnterRemoveItem = _this3.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnMouseLeaveRemoveItem = _this3.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(_this3));
|
|
_this3.handleOnClickRemoveItem = _this3.handleOnClickRemoveItem.bind(_assertThisInitialized(_this3));
|
|
return _this3;
|
|
}
|
|
|
|
_createClass(ProductCartItem, [{
|
|
key: "handleOnMouseEnterItem",
|
|
value: function handleOnMouseEnterItem(index, e) {
|
|
if (this.props.onToggleProgress) {
|
|
this.props.onToggleProgress(index, true);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseLeaveItem",
|
|
value: function handleOnMouseLeaveItem(index, e) {
|
|
if (this.props.onToggleProgress) {
|
|
this.props.onToggleProgress(index, false);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseEnterWarningItem",
|
|
value: function handleOnMouseEnterWarningItem(index, isWarning, e) {
|
|
if (!isWarning) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.onToggleWarning) {
|
|
this.props.onToggleWarning(index, true);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseLeaveWarningItem",
|
|
value: function handleOnMouseLeaveWarningItem(index, isWarning, e) {
|
|
if (!isWarning) {
|
|
return;
|
|
}
|
|
|
|
if (this.props.onToggleWarning) {
|
|
this.props.onToggleWarning(index, false);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseEnterRemoveItem",
|
|
value: function handleOnMouseEnterRemoveItem(index, e) {
|
|
if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
|
|
this.props.onToggleOverlayRemove(index, true);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseLeaveRemoveItem",
|
|
value: function handleOnMouseLeaveRemoveItem(index, e) {
|
|
if (this.props.onToggleOverlayRemove && !this.props.isMobile) {
|
|
this.props.onToggleOverlayRemove(index, false);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnClickRemoveItem",
|
|
value: function handleOnClickRemoveItem(index, e) {
|
|
if (this.props.onClickRemoveItem) {
|
|
this.props.onClickRemoveItem(index);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
var _this$props3 = this.props,
|
|
hovered = _this$props3.hovered,
|
|
model = _this$props3.model,
|
|
data = _this$props3.data,
|
|
index = _this$props3.index;
|
|
var warning;
|
|
|
|
if (data && data.warnings) {
|
|
var warningsKeys = Object.keys(data.warnings);
|
|
|
|
if (warningsKeys && warningsKeys.length > 0) {
|
|
// we display only the first warning
|
|
warning = data.warnings[warningsKeys[0]];
|
|
}
|
|
}
|
|
|
|
var render_progress;
|
|
|
|
if (model.showProgress && data) {
|
|
switch (model.type) {
|
|
case 'kasli':
|
|
case 'kasli-backplane':
|
|
render_progress = React.createElement("div", {
|
|
className: "k-popup-connectors"
|
|
}, React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " EEM connectors used")), React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
|
|
break;
|
|
|
|
case 'zotino':
|
|
case 'hd68':
|
|
render_progress = React.createElement("div", {
|
|
className: "k-popup-connectors"
|
|
}, React.createElement("p", null, "".concat(data.nbrCurrentSlot, "/").concat(model.nbrSlotMax, " connectors used")));
|
|
break;
|
|
|
|
case 'clocker':
|
|
render_progress = React.createElement("div", {
|
|
className: "k-popup-connectors"
|
|
}, React.createElement("p", null, "".concat(data.nbrCurrentClock, "/").concat(model.nbrClockMax, " Clock connectors used")));
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
return React.createElement(Draggable, {
|
|
draggableId: model.id,
|
|
index: index
|
|
}, function (provided, snapshot) {
|
|
return React.createElement("div", _extends({
|
|
ref: provided.innerRef
|
|
}, provided.draggableProps, provided.dragHandleProps, {
|
|
style: _objectSpread({}, productStyle(provided.draggableProps.style, snapshot, true, hovered ? true : false, model.selected ? true : false)),
|
|
onMouseEnter: _this4.handleOnMouseEnterRemoveItem.bind(_this4, index),
|
|
onMouseLeave: _this4.handleOnMouseLeaveRemoveItem.bind(_this4, index)
|
|
}), React.createElement("div", {
|
|
style: {
|
|
'height': '24px'
|
|
},
|
|
className: "progress-container warning",
|
|
onMouseEnter: _this4.handleOnMouseEnterWarningItem.bind(_this4, index, warning),
|
|
onMouseLeave: _this4.handleOnMouseLeaveWarningItem.bind(_this4, index, warning)
|
|
}, warning && React.createElement("img", {
|
|
className: "alert-warning",
|
|
src: warning ? "/images".concat(warning.icon) : null
|
|
}), warning && model.showWarning && React.createElement("div", {
|
|
className: "k-popup-warning"
|
|
}, React.createElement("p", {
|
|
className: "rule warning"
|
|
}, React.createElement("i", null, warning.message)))), React.createElement("h6", null, model.name_number), React.createElement("div", {
|
|
style: {
|
|
'height': '350px'
|
|
},
|
|
onMouseEnter: _this4.handleOnMouseEnterRemoveItem.bind(_this4, index)
|
|
}, React.createElement("img", {
|
|
className: "item-cart",
|
|
src: "/images".concat(model.image)
|
|
})), React.createElement("div", {
|
|
style: {
|
|
'display': model.showOverlayRemove ? 'flex' : 'none'
|
|
},
|
|
className: "overlayRemove",
|
|
onClick: _this4.handleOnClickRemoveItem.bind(_this4, index)
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-remove.svg",
|
|
alt: "rm"
|
|
}), React.createElement("p", null, "Remove")), React.createElement("div", {
|
|
style: {
|
|
'height': '22px'
|
|
},
|
|
className: "progress-container",
|
|
onMouseEnter: _this4.handleOnMouseEnterItem.bind(_this4, index),
|
|
onMouseLeave: _this4.handleOnMouseLeaveItem.bind(_this4, index)
|
|
}, model.nbrSlotMax > 0 && React.createElement("div", {
|
|
className: "nbr-connectors"
|
|
}, React.createElement("div", {
|
|
style: _objectSpread({}, nbrConnectorsStyle(data))
|
|
})), model.nbrClockMax > 0 && React.createElement("div", {
|
|
className: "nbr-clocks"
|
|
}, React.createElement("div", {
|
|
style: _objectSpread({}, nbrClocksStyle(data))
|
|
})), render_progress));
|
|
});
|
|
}
|
|
}]);
|
|
|
|
return ProductCartItem;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that displays a placeholder inside crate.
|
|
* Allows to display how it remains space for the current crate.
|
|
*/
|
|
|
|
|
|
var FakePlaceholder =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent4) {
|
|
_inherits(FakePlaceholder, _React$PureComponent4);
|
|
|
|
function FakePlaceholder() {
|
|
_classCallCheck(this, FakePlaceholder);
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(FakePlaceholder).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(FakePlaceholder, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props4 = this.props,
|
|
isDraggingOver = _this$props4.isDraggingOver,
|
|
nbrSlots = _this$props4.nbrSlots,
|
|
items = _this$props4.items;
|
|
var fakePlaceholder = [];
|
|
var nbrOccupied = nbrOccupiedSlotsInCrate(items);
|
|
|
|
for (var i = nbrSlots - nbrOccupied; i > 0; i--) {
|
|
fakePlaceholder.push(React.createElement("div", {
|
|
key: i,
|
|
style: {
|
|
display: isDraggingOver ? 'none' : 'block',
|
|
border: '1px dashed #ccc',
|
|
width: '45px',
|
|
marginBottom: '5px'
|
|
}
|
|
}));
|
|
}
|
|
|
|
return React.createElement(React.Fragment, null, fakePlaceholder);
|
|
}
|
|
}], [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
isDraggingOver: PropTypes.bool,
|
|
nbrSlots: PropTypes.number.isRequired,
|
|
items: PropTypes.array.isRequired
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return FakePlaceholder;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that displays a list of <ProductCartItem>
|
|
*/
|
|
|
|
|
|
var Cart =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent5) {
|
|
_inherits(Cart, _React$PureComponent5);
|
|
|
|
function Cart() {
|
|
_classCallCheck(this, Cart);
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(Cart).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(Cart, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props5 = this.props,
|
|
isMobile = _this$props5.isMobile,
|
|
nbrSlots = _this$props5.nbrSlots,
|
|
itemHovered = _this$props5.itemHovered,
|
|
data = _this$props5.data,
|
|
onToggleProgress = _this$props5.onToggleProgress,
|
|
onToggleWarning = _this$props5.onToggleWarning,
|
|
onToggleOverlayRemove = _this$props5.onToggleOverlayRemove,
|
|
onClickRemoveItem = _this$props5.onClickRemoveItem;
|
|
var products = data.items.map(function (item, index) {
|
|
var itemData;
|
|
|
|
if (data.itemsData && index in data.itemsData) {
|
|
itemData = data.itemsData[index];
|
|
}
|
|
|
|
return React.createElement(ProductCartItem, {
|
|
isMobile: isMobile,
|
|
hovered: item.id === itemHovered,
|
|
key: item.id,
|
|
index: index,
|
|
data: itemData,
|
|
onToggleProgress: onToggleProgress,
|
|
onToggleWarning: onToggleWarning,
|
|
onToggleOverlayRemove: onToggleOverlayRemove,
|
|
onClickRemoveItem: onClickRemoveItem,
|
|
model: item
|
|
});
|
|
});
|
|
return React.createElement(Droppable, {
|
|
droppableId: data.id,
|
|
direction: "horizontal"
|
|
}, function (provided, snapshot) {
|
|
return React.createElement("div", _extends({
|
|
ref: provided.innerRef
|
|
}, provided.droppableProps, {
|
|
style: cartStyle(provided.droppableProps.style, snapshot),
|
|
className: "items-cart-list"
|
|
}), products, provided.placeholder && React.createElement("div", {
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
}, provided.placeholder), React.createElement(FakePlaceholder, {
|
|
nbrSlots: nbrSlots,
|
|
items: data.items,
|
|
isDraggingOver: snapshot.isDraggingOver
|
|
}));
|
|
});
|
|
}
|
|
}], [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
isMobile: PropTypes.bool,
|
|
nbrSlots: PropTypes.number,
|
|
itemHovered: PropTypes.string,
|
|
data: PropTypes.object.isRequired,
|
|
onToggleProgress: PropTypes.func,
|
|
onToggleWarning: PropTypes.func,
|
|
onToggleOverlayRemove: PropTypes.func,
|
|
onClickRemoveItem: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return Cart;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that displays crate modes
|
|
*/
|
|
|
|
|
|
var CrateMode =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent6) {
|
|
_inherits(CrateMode, _React$PureComponent6);
|
|
|
|
_createClass(CrateMode, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
items: PropTypes.array.isRequired,
|
|
mode: PropTypes.string.isRequired,
|
|
onClickMode: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function CrateMode(props) {
|
|
var _this5;
|
|
|
|
_classCallCheck(this, CrateMode);
|
|
|
|
_this5 = _possibleConstructorReturn(this, _getPrototypeOf(CrateMode).call(this, props));
|
|
_this5.handleOnClickMode = _this5.handleOnClickMode.bind(_assertThisInitialized(_this5));
|
|
return _this5;
|
|
}
|
|
|
|
_createClass(CrateMode, [{
|
|
key: "handleOnClickMode",
|
|
value: function handleOnClickMode(mode, e) {
|
|
if (this.props.onClickMode) {
|
|
this.props.onClickMode(mode);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this6 = this;
|
|
|
|
var _this$props6 = this.props,
|
|
mode = _this$props6.mode,
|
|
items = _this$props6.items;
|
|
return React.createElement("div", {
|
|
className: "crate-mode"
|
|
}, items.map(function (item) {
|
|
return React.createElement("a", {
|
|
key: item.id,
|
|
className: mode == item.id ? 'active' : '',
|
|
onClick: _this6.handleOnClickMode.bind(_this6, item.id),
|
|
href: "#",
|
|
role: "button"
|
|
}, item.name);
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return CrateMode;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that displays the main crate with reminder rules.
|
|
* It includes <Cart> and rules
|
|
*/
|
|
|
|
|
|
var Crate =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent7) {
|
|
_inherits(Crate, _React$PureComponent7);
|
|
|
|
function Crate() {
|
|
_classCallCheck(this, Crate);
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(Crate).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(Crate, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props7 = this.props,
|
|
rules = _this$props7.rules,
|
|
cart = _this$props7.cart;
|
|
return React.createElement("div", {
|
|
className: "crate"
|
|
}, React.createElement("div", {
|
|
className: "crate-products"
|
|
}, cart, rules && rules.length > 0 && React.createElement("div", {
|
|
className: "crate-info"
|
|
}, rules.map(function (rule, index) {
|
|
return React.createElement("p", {
|
|
key: index,
|
|
className: "rule",
|
|
style: {
|
|
'color': rule.color ? rule.color : 'inherit'
|
|
}
|
|
}, React.createElement("img", {
|
|
src: "/images".concat(rule.icon)
|
|
}), " ", React.createElement("i", null, React.createElement("strong", null, rule.name, ":"), " ", rule.message));
|
|
}))));
|
|
}
|
|
}], [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
rules: PropTypes.array,
|
|
cart: PropTypes.element
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return Crate;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that renders all things for order.
|
|
* It acts like-a layout, this component do nothing more.
|
|
*/
|
|
|
|
|
|
var OrderPanel =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent8) {
|
|
_inherits(OrderPanel, _React$PureComponent8);
|
|
|
|
function OrderPanel() {
|
|
_classCallCheck(this, OrderPanel);
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(OrderPanel).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(OrderPanel, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props8 = this.props,
|
|
title = _this$props8.title,
|
|
description = _this$props8.description,
|
|
crateMode = _this$props8.crateMode,
|
|
crate = _this$props8.crate,
|
|
summaryPrice = _this$props8.summaryPrice,
|
|
form = _this$props8.form,
|
|
isMobile = _this$props8.isMobile,
|
|
onClickToggleMobileSideMenu = _this$props8.onClickToggleMobileSideMenu,
|
|
onClickOpenImport = _this$props8.onClickOpenImport;
|
|
return React.createElement("section", {
|
|
className: "panel"
|
|
}, React.createElement("h2", null, title), React.createElement("div", {
|
|
className: "control"
|
|
}, React.createElement("p", {
|
|
className: "description"
|
|
}, description), crateMode), React.createElement("div", null, React.createElement("input", {
|
|
className: "btn btn-sm btn-outline-primary m-0 mb-2",
|
|
style: {
|
|
'cursor': 'pointer'
|
|
},
|
|
value: "Import configurations",
|
|
onClick: onClickOpenImport
|
|
})), isMobile ? React.createElement("div", {
|
|
className: "mobileBtnDisplaySideMenu"
|
|
}, React.createElement("button", {
|
|
onClick: onClickToggleMobileSideMenu
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-add.svg",
|
|
alt: "add"
|
|
}))) : null, crate, React.createElement("section", {
|
|
className: "summary"
|
|
}, summaryPrice, form));
|
|
}
|
|
}], [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
title: PropTypes.string,
|
|
description: PropTypes.string,
|
|
crateMode: PropTypes.element,
|
|
crate: PropTypes.element,
|
|
summaryPrice: PropTypes.element,
|
|
form: PropTypes.element,
|
|
isMobile: PropTypes.bool,
|
|
onClickToggleMobileSideMenu: PropTypes.func,
|
|
onClickOpenImport: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return OrderPanel;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Components that renders the form to request quote.
|
|
*/
|
|
|
|
|
|
var OrderForm =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent9) {
|
|
_inherits(OrderForm, _React$PureComponent9);
|
|
|
|
_createClass(OrderForm, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
isProcessing: PropTypes.bool,
|
|
isProcessingComplete: PropTypes.bool,
|
|
onClickSubmit: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function OrderForm(props) {
|
|
var _this7;
|
|
|
|
_classCallCheck(this, OrderForm);
|
|
|
|
_this7 = _possibleConstructorReturn(this, _getPrototypeOf(OrderForm).call(this, props));
|
|
_this7.state = {
|
|
note: '',
|
|
email: '',
|
|
error: {
|
|
note: null,
|
|
email: null
|
|
},
|
|
empty: {
|
|
note: null,
|
|
email: null
|
|
}
|
|
};
|
|
_this7.handleEmail = _this7.handleEmail.bind(_assertThisInitialized(_this7));
|
|
_this7.handleNote = _this7.handleNote.bind(_assertThisInitialized(_this7));
|
|
_this7.handleSubmit = _this7.handleSubmit.bind(_assertThisInitialized(_this7));
|
|
_this7.resetEmptyError = _this7.resetEmptyError.bind(_assertThisInitialized(_this7));
|
|
_this7.checkValidation = _this7.checkValidation.bind(_assertThisInitialized(_this7));
|
|
return _this7;
|
|
}
|
|
|
|
_createClass(OrderForm, [{
|
|
key: "checkValidation",
|
|
value: function checkValidation() {
|
|
var isValid = true;
|
|
|
|
var validationFields = _objectSpread({}, this.state);
|
|
|
|
var _this$validateEmail = this.validateEmail(this.state.email),
|
|
isEmailEmpty = _this$validateEmail.isEmpty,
|
|
isEmailError = _this$validateEmail.isError;
|
|
|
|
validationFields = _objectSpread({}, validationFields, {
|
|
error: _objectSpread({}, this.state.error, {
|
|
email: isEmailError
|
|
}),
|
|
empty: _objectSpread({}, this.state.empty, {
|
|
email: isEmailEmpty
|
|
})
|
|
});
|
|
this.setState(validationFields);
|
|
isValid = !isEmailEmpty && !isEmailError;
|
|
return isValid;
|
|
}
|
|
}, {
|
|
key: "validateEmail",
|
|
value: function validateEmail(value) {
|
|
var isEmpty = null;
|
|
var isError = null;
|
|
var t = this.props.t;
|
|
|
|
if (!value || value.trim() === '') {
|
|
isEmpty = true;
|
|
} else if (value && !value.match(/^\w+([\+\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
|
|
isError = {
|
|
message: 'Your email is incomplete'
|
|
};
|
|
}
|
|
|
|
return {
|
|
isEmpty: isEmpty,
|
|
isError: isError
|
|
};
|
|
}
|
|
}, {
|
|
key: "validateNote",
|
|
value: function validateNote(value) {
|
|
var isEmpty = null;
|
|
|
|
if (!value || value.trim() === '') {
|
|
isEmpty = true;
|
|
}
|
|
|
|
return {
|
|
isEmpty: isEmpty
|
|
};
|
|
}
|
|
}, {
|
|
key: "resetEmptyError",
|
|
value: function resetEmptyError(key) {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
error: _objectSpread({}, this.state.error, _defineProperty({}, key, null)),
|
|
empty: _objectSpread({}, this.state.empty, _defineProperty({}, key, null))
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleEmail",
|
|
value: function handleEmail(e) {
|
|
var value = e.target.value;
|
|
|
|
var _this$validateEmail2 = this.validateEmail(value),
|
|
isEmpty = _this$validateEmail2.isEmpty,
|
|
isError = _this$validateEmail2.isError;
|
|
|
|
this.setState(_objectSpread({}, this.state, {
|
|
email: value,
|
|
error: _objectSpread({}, this.state.error, {
|
|
email: isError
|
|
}),
|
|
empty: _objectSpread({}, this.state.empty, {
|
|
email: isEmpty
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleNote",
|
|
value: function handleNote(e) {
|
|
var value = e.target.value;
|
|
this.setState(_objectSpread({}, this.state, {
|
|
note: value
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleSubmit",
|
|
value: function handleSubmit(event) {
|
|
event.preventDefault();
|
|
|
|
if (this.props.onClickSubmit) {
|
|
// check validation input fields
|
|
var isValidated = this.checkValidation();
|
|
|
|
if (!isValidated) {
|
|
return false;
|
|
}
|
|
|
|
this.props.onClickSubmit(this.state.note, this.state.email);
|
|
}
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var handleEmail = this.handleEmail,
|
|
handleNote = this.handleNote,
|
|
resetEmptyError = this.resetEmptyError,
|
|
handleSubmit = this.handleSubmit;
|
|
var onClickShow = this.props.onClickShow;
|
|
var _this$state = this.state,
|
|
email = _this$state.email,
|
|
note = _this$state.note,
|
|
error = _this$state.error,
|
|
empty = _this$state.empty;
|
|
var _this$props9 = this.props,
|
|
isProcessing = _this$props9.isProcessing,
|
|
isProcessingComplete = _this$props9.isProcessingComplete;
|
|
return React.createElement("div", {
|
|
className: "summary-form"
|
|
}, React.createElement("form", {
|
|
onSubmit: handleSubmit,
|
|
noValidate: true
|
|
}, React.createElement("input", {
|
|
className: "".concat(error && error.email ? 'errorField' : ''),
|
|
type: "email",
|
|
placeholder: "Email",
|
|
onFocus: function onFocus() {
|
|
return resetEmptyError('email');
|
|
},
|
|
onChange: handleEmail,
|
|
onBlur: handleEmail,
|
|
value: email
|
|
}), empty && empty.email ? React.createElement("div", {
|
|
className: "error"
|
|
}, React.createElement("small", null, "Required")) : null, error && error.email ? React.createElement("div", {
|
|
className: "error"
|
|
}, React.createElement("small", null, "Your email is incomplete")) : null, React.createElement("textarea", {
|
|
onChange: handleNote,
|
|
value: note,
|
|
rows: "5",
|
|
placeholder: "Additional notes"
|
|
}), React.createElement("div", {
|
|
className: "d-flex flex-column flex-sm-row justify-content-between"
|
|
}, React.createElement("input", {
|
|
className: "btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 mr-sm-2",
|
|
style: {
|
|
'cursor': 'pointer',
|
|
'fontWeight': '700'
|
|
},
|
|
value: "Show configurations",
|
|
onClick: onClickShow
|
|
}), React.createElement("input", {
|
|
className: "btn btn-primary w-100 m-0 ml-sm-2",
|
|
type: "submit",
|
|
value: "".concat(isProcessing ? 'Processing ...' : 'Request quote')
|
|
}))));
|
|
}
|
|
}]);
|
|
|
|
return OrderForm;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Components that displays the list of card that are used in the crate.
|
|
* It is a summary of purchase
|
|
*/
|
|
|
|
|
|
var OrderSumary =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent10) {
|
|
_inherits(OrderSumary, _React$PureComponent10);
|
|
|
|
_createClass(OrderSumary, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
currency: PropTypes.string,
|
|
modes: PropTypes.array,
|
|
currentMode: PropTypes.string,
|
|
summary: PropTypes.array,
|
|
itemsData: PropTypes.array,
|
|
onDeleteItem: PropTypes.func,
|
|
onDeleteAllItems: PropTypes.func,
|
|
onMouseEnterItem: PropTypes.func,
|
|
onMouseLeaveItem: PropTypes.func,
|
|
onClickSelectItem: PropTypes.func
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function OrderSumary(props) {
|
|
var _this8;
|
|
|
|
_classCallCheck(this, OrderSumary);
|
|
|
|
_this8 = _possibleConstructorReturn(this, _getPrototypeOf(OrderSumary).call(this, props));
|
|
_this8.handleOnDeleteItem = _this8.handleOnDeleteItem.bind(_assertThisInitialized(_this8));
|
|
_this8.handleOnDeleteAllItems = _this8.handleOnDeleteAllItems.bind(_assertThisInitialized(_this8));
|
|
_this8.handleOnMouseEnterItem = _this8.handleOnMouseEnterItem.bind(_assertThisInitialized(_this8));
|
|
_this8.handleOnMouseLeaveItem = _this8.handleOnMouseLeaveItem.bind(_assertThisInitialized(_this8));
|
|
_this8.handleOnClickSelectItem = _this8.handleOnClickSelectItem.bind(_assertThisInitialized(_this8));
|
|
return _this8;
|
|
}
|
|
|
|
_createClass(OrderSumary, [{
|
|
key: "handleOnDeleteItem",
|
|
value: function handleOnDeleteItem(index, e) {
|
|
if (this.props.onDeleteItem) {
|
|
this.props.onDeleteItem(index);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnDeleteAllItems",
|
|
value: function handleOnDeleteAllItems(e) {
|
|
if (this.props.onDeleteAllItems) {
|
|
this.props.onDeleteAllItems();
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseEnterItem",
|
|
value: function handleOnMouseEnterItem(id, e) {
|
|
if (this.props.onMouseEnterItem) {
|
|
this.props.onMouseEnterItem(id);
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnMouseLeaveItem",
|
|
value: function handleOnMouseLeaveItem(e) {
|
|
if (this.props.onMouseLeaveItem) {
|
|
this.props.onMouseLeaveItem();
|
|
}
|
|
|
|
e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "handleOnClickSelectItem",
|
|
value: function handleOnClickSelectItem(index, e) {
|
|
if (e.target.tagName !== 'IMG') {
|
|
if (this.props.onClickSelectItem) {
|
|
this.props.onClickSelectItem(index);
|
|
}
|
|
}
|
|
|
|
return e.preventDefault();
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this9 = this;
|
|
|
|
var _this$props10 = this.props,
|
|
currency = _this$props10.currency,
|
|
modes = _this$props10.modes,
|
|
currentMode = _this$props10.currentMode,
|
|
summary = _this$props10.summary,
|
|
itemsData = _this$props10.itemsData;
|
|
var mode = modes.find(function (elem) {
|
|
return elem.id === currentMode;
|
|
});
|
|
return React.createElement("div", {
|
|
className: "summary-price"
|
|
}, React.createElement("table", null, React.createElement("thead", null, React.createElement("tr", null, React.createElement("td", {
|
|
colSpan: "2",
|
|
className: "summary-remove-all"
|
|
}, React.createElement("span", {
|
|
className: "item-card-name"
|
|
}, "Remove all cards"), React.createElement("button", {
|
|
onClick: this.handleOnDeleteAllItems
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-remove.svg"
|
|
})))), mode && React.createElement("tr", null, React.createElement("td", {
|
|
className: "item-card-name"
|
|
}, mode.name), React.createElement("td", {
|
|
className: "price"
|
|
}, React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(mode.price)), React.createElement("button", {
|
|
style: {
|
|
'opacity': '0',
|
|
'cursor': 'initial'
|
|
}
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-remove.svg"
|
|
}))), React.createElement("span", {
|
|
style: {
|
|
'display': 'inline-block',
|
|
'width': '30px'
|
|
}
|
|
}, "\xA0")))), React.createElement("tbody", null, summary.map(function (item, index) {
|
|
var alert;
|
|
var warning;
|
|
|
|
if (itemsData[index]) {
|
|
alert = itemsData[index];
|
|
var warningsKeys = Object.keys(alert.warnings);
|
|
|
|
if (warningsKeys && warningsKeys.length > 0) {
|
|
warning = alert.warnings[warningsKeys[0]];
|
|
}
|
|
}
|
|
|
|
return React.createElement("tr", {
|
|
key: item.id,
|
|
className: "hoverable ".concat(item.selected ? 'selected' : ''),
|
|
onClick: _this9.handleOnClickSelectItem.bind(_this9, index),
|
|
onMouseEnter: _this9.handleOnMouseEnterItem.bind(_this9, item.id),
|
|
onMouseLeave: _this9.handleOnMouseLeaveItem
|
|
}, React.createElement("td", {
|
|
className: "item-card-name"
|
|
}, React.createElement("div", null, "".concat(item.name_number, " ").concat(item.name, " ").concat(item.name_codename))), React.createElement("td", {
|
|
className: "price"
|
|
}, React.createElement("div", null, "".concat(currency, " ").concat(formatMoney(item.price)), React.createElement("button", {
|
|
onClick: _this9.handleOnDeleteItem.bind(_this9, index)
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-remove.svg"
|
|
}))), warning && React.createElement("img", {
|
|
style: {
|
|
'marginLeft': '10px'
|
|
},
|
|
className: "alert-warning",
|
|
src: "/images/".concat(warning.icon)
|
|
}), !warning && React.createElement("span", {
|
|
style: {
|
|
'display': 'inline-block',
|
|
'width': '30px'
|
|
}
|
|
}, "\xA0")));
|
|
})), React.createElement("tfoot", null, React.createElement("tr", null, React.createElement("td", {
|
|
className: "item-card-name"
|
|
}, "Price estimate"), React.createElement("td", {
|
|
className: "price"
|
|
}, React.createElement("div", null, summary.length ? "".concat(currency, " ").concat(formatMoney(summary.reduce(function (prev, next) {
|
|
return prev + next.price;
|
|
}, 0) + mode.price)) : "".concat(currency, " ").concat(formatMoney(mode.price)), React.createElement("button", {
|
|
style: {
|
|
'opacity': '0',
|
|
'cursor': 'initial'
|
|
}
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-remove.svg",
|
|
alt: "icon remove"
|
|
}))), React.createElement("span", {
|
|
style: {
|
|
'display': 'inline-block',
|
|
'width': '30px'
|
|
}
|
|
}, "\xA0"))))));
|
|
}
|
|
}]);
|
|
|
|
return OrderSumary;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that renders the backlog in the aside
|
|
*/
|
|
|
|
|
|
var Backlog =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent11) {
|
|
_inherits(Backlog, _React$PureComponent11);
|
|
|
|
function Backlog() {
|
|
_classCallCheck(this, Backlog);
|
|
|
|
return _possibleConstructorReturn(this, _getPrototypeOf(Backlog).apply(this, arguments));
|
|
}
|
|
|
|
_createClass(Backlog, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$props11 = this.props,
|
|
currency = _this$props11.currency,
|
|
data = _this$props11.data,
|
|
items = _this$props11.items,
|
|
onClickAddItem = _this$props11.onClickAddItem,
|
|
onClickToggleMobileSideMenu = _this$props11.onClickToggleMobileSideMenu,
|
|
isMobile = _this$props11.isMobile;
|
|
var ordered_items = data.itemIds.map(function (itemId) {
|
|
return items[itemId];
|
|
});
|
|
var products = ordered_items.map(function (item, index) {
|
|
return React.createElement(ProductItem, {
|
|
key: item.id,
|
|
id: item.id,
|
|
index: index,
|
|
name: "".concat(item.name_number, " ").concat(item.name),
|
|
name_codename: item.name_codename,
|
|
price: item.price,
|
|
currency: currency,
|
|
image: "/images/".concat(item.image),
|
|
specs: item.specs,
|
|
onClickAddItem: onClickAddItem
|
|
});
|
|
});
|
|
return React.createElement(Droppable, {
|
|
droppableId: data.id,
|
|
isDropDisabled: true
|
|
}, function (provided) {
|
|
return React.createElement("div", _extends({
|
|
className: "backlog-container",
|
|
ref: provided.innerRef
|
|
}, provided.droppableProps), isMobile ? React.createElement("div", {
|
|
className: "mobileCloseMenu"
|
|
}, React.createElement("button", {
|
|
onClick: onClickToggleMobileSideMenu
|
|
}, React.createElement("img", {
|
|
src: "/images/shop/icon-close-white.svg",
|
|
alt: "add"
|
|
}))) : null, products, provided.placeholder && React.createElement("div", {
|
|
style: {
|
|
display: 'none'
|
|
}
|
|
}, provided.placeholder));
|
|
});
|
|
}
|
|
}], [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
currency: PropTypes.string,
|
|
data: PropTypes.object.isRequired,
|
|
items: PropTypes.object,
|
|
isMobile: PropTypes.bool,
|
|
onClickAddItem: PropTypes.func,
|
|
onClickToggleMobileSideMenu: PropTypes.func
|
|
};
|
|
}
|
|
}, {
|
|
key: "defaultProps",
|
|
get: function get() {
|
|
return {
|
|
items: {}
|
|
};
|
|
}
|
|
}]);
|
|
|
|
return Backlog;
|
|
}(React.PureComponent);
|
|
/**
|
|
* Component that render the entire shop
|
|
*/
|
|
|
|
|
|
var Shop =
|
|
/*#__PURE__*/
|
|
function (_React$PureComponent12) {
|
|
_inherits(Shop, _React$PureComponent12);
|
|
|
|
_createClass(Shop, null, [{
|
|
key: "propTypes",
|
|
get: function get() {
|
|
return {
|
|
data: PropTypes.object.isRequired
|
|
};
|
|
}
|
|
}]);
|
|
|
|
function Shop(props) {
|
|
var _this10;
|
|
|
|
_classCallCheck(this, Shop);
|
|
|
|
_this10 = _possibleConstructorReturn(this, _getPrototypeOf(Shop).call(this, props));
|
|
_this10.state = _this10.props.data;
|
|
_this10.handleCrateModeChange = _this10.handleCrateModeChange.bind(_assertThisInitialized(_this10));
|
|
_this10.handleOnDragEnd = _this10.handleOnDragEnd.bind(_assertThisInitialized(_this10));
|
|
_this10.handleDeleteItem = _this10.handleDeleteItem.bind(_assertThisInitialized(_this10));
|
|
_this10.handleDeleteAllItems = _this10.handleDeleteAllItems.bind(_assertThisInitialized(_this10));
|
|
_this10.handleMouseEnterItem = _this10.handleMouseEnterItem.bind(_assertThisInitialized(_this10));
|
|
_this10.handleMouseLeaveItem = _this10.handleMouseLeaveItem.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickAddItem = _this10.handleClickAddItem.bind(_assertThisInitialized(_this10));
|
|
_this10.checkAlerts = _this10.checkAlerts.bind(_assertThisInitialized(_this10));
|
|
_this10.handleToggleItemProgress = _this10.handleToggleItemProgress.bind(_assertThisInitialized(_this10));
|
|
_this10.handleToggleItemWarning = _this10.handleToggleItemWarning.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickSelectItem = _this10.handleClickSelectItem.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickSubmit = _this10.handleClickSubmit.bind(_assertThisInitialized(_this10));
|
|
_this10.handleToggleOverlayRemove = _this10.handleToggleOverlayRemove.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickToggleMobileSideMenu = _this10.handleClickToggleMobileSideMenu.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickCloseRFQFeedback = _this10.handleClickCloseRFQFeedback.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickShowOrder = _this10.handleClickShowOrder.bind(_assertThisInitialized(_this10));
|
|
_this10.handleClickOpenImport = _this10.handleClickOpenImport.bind(_assertThisInitialized(_this10));
|
|
_this10.handleLoadCustomConf = _this10.handleLoadCustomConf.bind(_assertThisInitialized(_this10));
|
|
_this10.timer = null;
|
|
return _this10;
|
|
}
|
|
|
|
_createClass(Shop, [{
|
|
key: "componentDidMount",
|
|
value: function componentDidMount() {
|
|
// index 0 is a Kasli, we place it as a default conf on the crate.
|
|
var source = {
|
|
droppableId: 'backlog',
|
|
index: 0
|
|
};
|
|
var destination = {
|
|
droppableId: 'cart',
|
|
index: 0
|
|
};
|
|
this.handleOnDragEnd({
|
|
source: source,
|
|
destination: destination,
|
|
draggableId: null
|
|
});
|
|
}
|
|
}, {
|
|
key: "componentDidUpdate",
|
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
var _this11 = this;
|
|
|
|
/**
|
|
* We check alerts (reminder + warning) only when items inside crate or
|
|
* crate mode change.
|
|
*
|
|
* In the function checkAlerts, we DO NOT want to change items as we will
|
|
* trigger again this function (componentDidUpdate) and thus,
|
|
* making an infinite loop.
|
|
*/
|
|
if (prevState.columns.cart.items !== this.state.columns.cart.items || prevState.currentMode !== this.state.currentMode) {
|
|
this.checkAlerts(prevState.columns.cart.items, this.state.columns.cart.items);
|
|
}
|
|
|
|
if (this.state.newCardJustAdded) {
|
|
this.timer = setTimeout(function () {
|
|
_this11.setState({
|
|
newCardJustAdded: false
|
|
});
|
|
}, 2000);
|
|
}
|
|
}
|
|
}, {
|
|
key: "componentWillUnmount",
|
|
value: function componentWillUnmount() {
|
|
clearTimeout(this.timer);
|
|
}
|
|
}, {
|
|
key: "handleCrateModeChange",
|
|
value: function handleCrateModeChange(mode) {
|
|
this.setState({
|
|
currentMode: mode
|
|
});
|
|
}
|
|
}, {
|
|
key: "handleDeleteItem",
|
|
value: function handleDeleteItem(index) {
|
|
var cloned = Array.from(this.state.columns.cart.items);
|
|
cloned.splice(index, 1);
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: cloned
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleDeleteAllItems",
|
|
value: function handleDeleteAllItems() {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: []
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleMouseEnterItem",
|
|
value: function handleMouseEnterItem(id) {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
currentItemHovered: id
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleMouseLeaveItem",
|
|
value: function handleMouseLeaveItem() {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
currentItemHovered: null
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleClickAddItem",
|
|
value: function handleClickAddItem(index, tap) {
|
|
var source = {
|
|
droppableId: 'backlog',
|
|
index: index
|
|
};
|
|
var destination = {
|
|
droppableId: 'cart',
|
|
index: this.state.columns.cart.items.length
|
|
};
|
|
this.handleOnDragEnd({
|
|
source: source,
|
|
destination: destination,
|
|
draggableId: null
|
|
}, tap);
|
|
}
|
|
}, {
|
|
key: "handleToggleItemProgress",
|
|
value: function handleToggleItemProgress(index, show) {
|
|
var itemsCloned = Array.from(this.state.columns.cart.items);
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: itemsCloned.map(function (item, i) {
|
|
return _objectSpread({}, item, {
|
|
showProgress: i === index ? show : false,
|
|
showOverlayRemove: false,
|
|
showWarning: false
|
|
});
|
|
})
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleToggleItemWarning",
|
|
value: function handleToggleItemWarning(index, show) {
|
|
var itemsCloned = Array.from(this.state.columns.cart.items);
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: itemsCloned.map(function (item, i) {
|
|
return _objectSpread({}, item, {
|
|
showWarning: i === index ? show : false,
|
|
showProgress: false,
|
|
showOverlayRemove: false
|
|
});
|
|
})
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleClickSelectItem",
|
|
value: function handleClickSelectItem(index) {
|
|
var itemsCloned = Array.from(this.state.columns.cart.items);
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: itemsCloned.map(function (item, id) {
|
|
return _objectSpread({}, item, {
|
|
selected: id === index ? true : false
|
|
});
|
|
})
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleToggleOverlayRemove",
|
|
value: function handleToggleOverlayRemove(index, show) {
|
|
var itemsCloned = Array.from(this.state.columns.cart.items);
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: itemsCloned.map(function (item, id) {
|
|
return _objectSpread({}, item, {
|
|
showOverlayRemove: id === index ? show : false,
|
|
showProgress: false,
|
|
showWarning: false
|
|
});
|
|
})
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleClickShowOrder",
|
|
value: function handleClickShowOrder() {
|
|
var crate = {
|
|
items: [],
|
|
type: this.state.currentMode
|
|
};
|
|
var clonedCart = Array.from(this.state.columns.cart.items);
|
|
|
|
for (var i in clonedCart) {
|
|
var item = clonedCart[i];
|
|
crate.items.push({
|
|
'pn': item.name_number
|
|
});
|
|
}
|
|
|
|
this.setState({
|
|
isProcessing: false,
|
|
shouldShowRFQFeedback: true,
|
|
RFQBodyType: 'show',
|
|
RFQBodyOrder: JSON.stringify(crate)
|
|
});
|
|
}
|
|
}, {
|
|
key: "handleClickOpenImport",
|
|
value: function handleClickOpenImport() {
|
|
this.setState({
|
|
isProcessing: false,
|
|
shouldShowRFQFeedback: true,
|
|
RFQBodyType: 'import'
|
|
});
|
|
}
|
|
}, {
|
|
key: "handleLoadCustomConf",
|
|
value: function handleLoadCustomConf(customconf) {
|
|
if (!customconf) {
|
|
return;
|
|
}
|
|
|
|
var items = this.props.data.items;
|
|
var self = this;
|
|
var new_items = [];
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: []
|
|
})
|
|
})
|
|
}), function () {
|
|
customconf.items.map(function (item) {
|
|
Object.keys(items).map(function (key) {
|
|
if (item.pn && item.pn === items[key].name_number) {
|
|
new_items.push(Object.assign(_objectSpread({}, items[key]), {
|
|
id: uuidv4()
|
|
}));
|
|
}
|
|
});
|
|
return item;
|
|
});
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
items: new_items
|
|
})
|
|
}),
|
|
currentMode: customconf.type
|
|
}));
|
|
});
|
|
}
|
|
}, {
|
|
key: "handleClickSubmit",
|
|
value: function handleClickSubmit(note, email) {
|
|
var _this12 = this;
|
|
|
|
var crate = {
|
|
items: [],
|
|
type: this.state.currentMode
|
|
};
|
|
var clonedCart = Array.from(this.state.columns.cart.items);
|
|
|
|
for (var i in clonedCart) {
|
|
var item = clonedCart[i];
|
|
crate.items.push({
|
|
'pn': item.name_number
|
|
});
|
|
}
|
|
|
|
var data = this.props.data;
|
|
var a = document.createElement('a');
|
|
var num = new Date().getTime();
|
|
var subject = "[Order hardware] - Request Quote";
|
|
var body = "Hello!<br><br>I would like to request a quotation for my below configuration:<br><br>".concat(JSON.stringify(crate), "<br><br>(Please do not edit the machine-readable representation above)<br><br>");
|
|
|
|
if (note) {
|
|
body = "".concat(body, "<br><br>Additional note:<br><br>").concat(note ? note.trim() : '');
|
|
}
|
|
|
|
this.setState({
|
|
isProcessing: true
|
|
});
|
|
axios.post(data.API_RFQ, {
|
|
email: email,
|
|
body: body,
|
|
configuration: JSON.stringify(crate),
|
|
headers: {
|
|
'X-MLABS-OH': 'rlebcleu'
|
|
}
|
|
}).then(function (response) {
|
|
_this12.setState({
|
|
isProcessing: false,
|
|
shouldShowRFQFeedback: true,
|
|
RFQBodyType: 'email',
|
|
isProcessingComplete: true
|
|
});
|
|
})["catch"](function (err) {
|
|
_this12.setState({
|
|
isProcessing: false
|
|
}, function () {
|
|
alert("We cannot receive your request. Try using the export by coping the configuration and send it to us at sales[at]m-labs.hk");
|
|
});
|
|
});
|
|
return;
|
|
document.body.appendChild(a);
|
|
a.style = 'display: none';
|
|
a.href = "mailto:sales@m-labs.hk?subject=".concat(subject, "&body=").concat(encodeURIComponent(body));
|
|
a.click();
|
|
}
|
|
}, {
|
|
key: "handleOnDragEnd",
|
|
value: function handleOnDragEnd(result, newAdded) {
|
|
var source = result.source,
|
|
destination = result.destination,
|
|
draggableId = result.draggableId;
|
|
|
|
if (!destination) {
|
|
if (source.droppableId === 'cart') {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
newCardJustAdded: false,
|
|
columns: _objectSpread({}, this.state.columns, _defineProperty({}, source.droppableId, _objectSpread({}, this.state.columns[source.droppableId], {
|
|
items: remove(this.state.columns[source.droppableId].items, source.index)
|
|
})))
|
|
}));
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
switch (source.droppableId) {
|
|
case 'backlog':
|
|
this.setState(_objectSpread({}, this.state, {
|
|
newCardJustAdded: newAdded ? true : false,
|
|
columns: _objectSpread({}, this.state.columns, _defineProperty({}, destination.droppableId, _objectSpread({}, this.state.columns[destination.droppableId], {
|
|
items: copy(this.state.items, this.state.columns[source.droppableId], this.state.columns[destination.droppableId], source, destination)
|
|
})))
|
|
}));
|
|
break;
|
|
|
|
case destination.droppableId:
|
|
this.setState(_objectSpread({}, this.state, {
|
|
newCardJustAdded: false,
|
|
columns: _objectSpread({}, this.state.columns, _defineProperty({}, destination.droppableId, _objectSpread({}, this.state.columns[destination.droppableId], {
|
|
items: reorder(this.state.columns[destination.droppableId].items, source.index, destination.index)
|
|
})))
|
|
}));
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
}, {
|
|
key: "handleClickToggleMobileSideMenu",
|
|
value: function handleClickToggleMobileSideMenu() {
|
|
this.setState(_objectSpread({}, this.state, {
|
|
mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen
|
|
}));
|
|
}
|
|
}, {
|
|
key: "handleClickCloseRFQFeedback",
|
|
value: function handleClickCloseRFQFeedback() {
|
|
this.setState({
|
|
shouldShowRFQFeedback: false
|
|
});
|
|
}
|
|
}, {
|
|
key: "checkAlerts",
|
|
value: function checkAlerts(prevItems, newItems) {
|
|
var _this13 = this;
|
|
|
|
console.log('--- START CHECKING CRATE WARNING ---');
|
|
var _this$state2 = this.state,
|
|
currentMode = _this$state2.currentMode,
|
|
crateModeSlots = _this$state2.crateModeSlots,
|
|
crateRules = _this$state2.crateRules;
|
|
var itemsCloned = Array.from(newItems);
|
|
var itemsData = {};
|
|
var rules = {}; // check number of slot in crate
|
|
|
|
var nbrOccupied = nbrOccupiedSlotsInCrate(newItems);
|
|
|
|
if (nbrOccupied > crateModeSlots[currentMode]) {
|
|
rules[crateRules.maxSlot.type] = _objectSpread({}, crateRules.maxSlot);
|
|
} else if (crateModeSlots[currentMode] === 21 && nbrOccupied <= 10) {
|
|
rules[crateRules.compactSlot.type] = _objectSpread({}, crateRules.compactSlot);
|
|
} // check the number of EEM connectors available for all Kasli
|
|
|
|
|
|
var idxK = itemsCloned.reduce(function (prev, next, i) {
|
|
if (next.type === 'kasli' || next.type === 'kasli-backplane') {
|
|
prev.push(i);
|
|
}
|
|
|
|
return prev;
|
|
}, []);
|
|
|
|
for (var _i2 = 0; _i2 <= idxK.length - 1; _i2++) {
|
|
var slots = void 0;
|
|
var nbUsedSlot = 0;
|
|
var nbrCurrentClock = 0;
|
|
var idx = idxK[_i2];
|
|
|
|
if (_i2 !== idxK.length - 1) {
|
|
slots = itemsCloned.slice(idx + 1, idxK[_i2 + 1]);
|
|
} else {
|
|
slots = itemsCloned.slice(idx + 1);
|
|
}
|
|
|
|
if (_i2 == 0) {
|
|
var slots_need_resource = itemsCloned.slice(0, idx);
|
|
var idx_need = slots_need_resource.findIndex(function (e) {
|
|
return e.rules && e.rules.resources;
|
|
});
|
|
|
|
if (idx_need != -1) {
|
|
if (idx_need in itemsData) {
|
|
if ('warnings' in itemsData[idx_need]) {
|
|
itemsData[idx_need].warnings.resources = _objectSpread({}, itemsCloned[idx_need].rules.resources);
|
|
} else {
|
|
itemsData[idx_need].warnings = {};
|
|
itemsData[idx_need].warnings.resources = _objectSpread({}, itemsCloned[idx_need].rules.resources);
|
|
}
|
|
} else {
|
|
itemsData[idx_need] = _objectSpread({}, itemsCloned[idx_need]);
|
|
itemsData[idx_need].warnings = {};
|
|
itemsData[idx_need].warnings.resources = _objectSpread({}, itemsCloned[idx_need].rules.resources);
|
|
}
|
|
}
|
|
}
|
|
|
|
nbUsedSlot = slots.filter(function (item) {
|
|
return item.type !== 'idc-bnc';
|
|
}).reduce(function (prev, next) {
|
|
return prev + next.slotOccupied;
|
|
}, 0);
|
|
nbrCurrentClock = slots.reduce(function (prev, next) {
|
|
return next.type === 'clocker' ? prev + next.clockOccupied : prev;
|
|
}, 0);
|
|
|
|
if (idx in itemsData) {
|
|
itemsData[idx].nbrCurrentSlot = nbUsedSlot;
|
|
itemsData[idx].nbrCurrentClock = nbrCurrentClock;
|
|
|
|
if (!('warnings' in itemsData[idx])) {
|
|
itemsData[idx].warnings = {};
|
|
}
|
|
} else {
|
|
itemsData[idx] = _objectSpread({}, itemsCloned[idx]);
|
|
itemsData[idx].nbrCurrentSlot = nbUsedSlot;
|
|
itemsData[idx].nbrCurrentClock = nbrCurrentClock;
|
|
itemsData[idx].warnings = {};
|
|
}
|
|
|
|
if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
|
|
if (itemsCloned[idx].rules.maxSlot.message) {
|
|
rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot);
|
|
}
|
|
|
|
itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning);
|
|
}
|
|
|
|
if (nbrCurrentClock > itemsCloned[idx].nbrClockMax) {
|
|
rules[itemsCloned[idx].rules.maxClock.type] = _objectSpread({}, itemsCloned[idx].rules.maxClock);
|
|
itemsData[idx].warnings.maxClockWarning = _objectSpread({}, itemsCloned[idx].rules.maxClockWarning);
|
|
}
|
|
|
|
if (itemsCloned.length > idx + 1) {
|
|
var ddkali = itemsCloned[idx + 1];
|
|
|
|
if (ddkali.type === 'kasli' || ddkali.type === 'kasli-backplane') {
|
|
rules[ddkali.rules.follow.type] = _objectSpread({}, ddkali.rules.follow);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (idxK.length === 0) {
|
|
var _slots_need_resource = itemsCloned.slice(0);
|
|
|
|
var _idx_need = _slots_need_resource.findIndex(function (e) {
|
|
return e.rules && e.rules.resources;
|
|
});
|
|
|
|
if (_idx_need != -1) {
|
|
if (_idx_need in itemsData) {
|
|
if ('warnings' in itemsData[_idx_need]) {
|
|
itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
|
|
} else {
|
|
itemsData[_idx_need].warnings = {};
|
|
itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
|
|
}
|
|
} else {
|
|
itemsData[_idx_need] = _objectSpread({}, itemsCloned[_idx_need]);
|
|
itemsData[_idx_need].warnings = {};
|
|
itemsData[_idx_need].warnings.resources = _objectSpread({}, itemsCloned[_idx_need].rules.resources);
|
|
}
|
|
}
|
|
} // check number of clock connector available
|
|
|
|
|
|
var idxC = itemsCloned.reduce(function (prev, next, i) {
|
|
if (next.type === 'kasli' || next.type === 'kasli-backplane' || next.type === 'clocker') {
|
|
prev.push(i);
|
|
}
|
|
|
|
return prev;
|
|
}, []);
|
|
|
|
for (var _i3 = 0; _i3 <= idxC.length - 1; _i3++) {
|
|
var _slots = void 0;
|
|
|
|
var _nbrCurrentClock = 0;
|
|
var _idx = idxC[_i3];
|
|
|
|
if (_i3 !== idxC.length - 1) {
|
|
_slots = itemsCloned.slice(_idx + 1, idxC[_i3 + 1]);
|
|
} else {
|
|
_slots = itemsCloned.slice(_idx + 1);
|
|
}
|
|
|
|
_nbrCurrentClock = _slots.reduce(function (prev, next) {
|
|
return prev + next.clockOccupied;
|
|
}, 0);
|
|
|
|
if (_idx in itemsData) {
|
|
if (itemsData[_idx].nbrCurrentClock) {
|
|
itemsData[_idx].nbrCurrentClock += _nbrCurrentClock;
|
|
} else {
|
|
itemsData[_idx].nbrCurrentClock = _nbrCurrentClock;
|
|
}
|
|
} else {
|
|
itemsData[_idx] = _objectSpread({}, itemsCloned[_idx]);
|
|
itemsData[_idx].nbrCurrentClock = _nbrCurrentClock;
|
|
itemsData[_idx].warnings = {};
|
|
}
|
|
|
|
if (_nbrCurrentClock > itemsCloned[_idx].nbrClockMax) {
|
|
rules[itemsCloned[_idx].rules.maxClock.type] = _objectSpread({}, itemsCloned[_idx].rules.maxClock);
|
|
itemsData[_idx].warnings.maxClockWarning = _objectSpread({}, itemsCloned[_idx].rules.maxClockWarning);
|
|
}
|
|
} // check for number of recommanded EEM connectors
|
|
|
|
|
|
['novo', 'urukul', 'koster'].map(function (_type) {
|
|
if (itemsCloned.find(function (elem) {
|
|
return elem.type === _type;
|
|
})) {
|
|
rules[_this13.state.items[_type].rules.connectors.type] = _objectSpread({}, _this13.state.items[_type].rules.connectors);
|
|
}
|
|
|
|
return _type;
|
|
});
|
|
|
|
if (itemsCloned.find(function (elem) {
|
|
return elem.type === 'urukul';
|
|
})) {
|
|
if (this.state.items['urukul'].rules.info) {
|
|
rules[this.state.items['urukul'].rules.info.type] = _objectSpread({}, this.state.items['urukul'].rules.info);
|
|
}
|
|
} // check if IDC-BNC is correctly positionned (after Zotino or HD68)
|
|
|
|
|
|
var idxIDCBNC = itemsCloned.reduce(function (prev, next, i) {
|
|
if (next.type === 'idc-bnc') {
|
|
prev.push(i);
|
|
}
|
|
|
|
return prev;
|
|
}, []);
|
|
|
|
for (var i = idxIDCBNC.length - 1; i >= 0; i--) {
|
|
var ce = idxIDCBNC[i];
|
|
var shouldWarning = false;
|
|
|
|
if (ce == 0) {
|
|
shouldWarning = true;
|
|
} else if (ce >= 1) {
|
|
var pe = idxIDCBNC[i] - 1;
|
|
|
|
if (itemsCloned[pe].type !== 'zotino' && itemsCloned[pe].type !== 'hd68' && itemsCloned[pe].type !== 'idc-bnc') {
|
|
shouldWarning = true;
|
|
}
|
|
}
|
|
|
|
if (shouldWarning) {
|
|
itemsData[ce] = _objectSpread({}, itemsCloned[ce]);
|
|
itemsData[ce].warnings = {};
|
|
itemsData[ce].warnings.wrong = _objectSpread({}, itemsCloned[ce].rules.wrong);
|
|
}
|
|
} // check number of IDC-BNC adapters for a Zotino and HD68-IDC
|
|
|
|
|
|
var idxZH = itemsCloned.reduce(function (prev, next, i) {
|
|
if (next.type === 'zotino' || next.type === 'hd68') {
|
|
prev.push(i);
|
|
}
|
|
|
|
return prev;
|
|
}, []);
|
|
|
|
var _loop = function _loop(_i4) {
|
|
var slots = void 0;
|
|
var nbUsedSlot = 0;
|
|
var idx = idxZH[_i4];
|
|
|
|
if (_i4 !== idxZH.length - 1) {
|
|
slots = itemsCloned.slice(idx + 1, idxZH[_i4 + 1]);
|
|
} else {
|
|
slots = itemsCloned.slice(idx + 1);
|
|
}
|
|
|
|
var stopCount = false;
|
|
nbUsedSlot = slots.reduce(function (prev, next, ci, ca) {
|
|
if (ci === 0 && next.type === 'idc-bnc') {
|
|
return prev + 1;
|
|
} else if (ca[0].type === 'idc-bnc' && ci > 0 && ca[ci - 1].type === 'idc-bnc') {
|
|
if (next.type !== 'idc-bnc') {
|
|
stopCount = true;
|
|
}
|
|
|
|
return prev + (next.type === 'idc-bnc' && !stopCount ? 1 : 0);
|
|
}
|
|
|
|
return prev;
|
|
}, 0);
|
|
|
|
if (idx in itemsData) {
|
|
itemsData[idx].nbrCurrentSlot = nbUsedSlot;
|
|
|
|
if (!('warnings' in itemsData[idx])) {
|
|
itemsData[idx].warnings = {};
|
|
}
|
|
} else {
|
|
itemsData[idx] = _objectSpread({}, itemsCloned[idx]);
|
|
itemsData[idx].nbrCurrentSlot = nbUsedSlot;
|
|
itemsData[idx].warnings = {};
|
|
}
|
|
|
|
if (nbUsedSlot > 0) {
|
|
if (itemsCloned[idx].rules.maxSlot.message) {
|
|
rules[itemsCloned[idx].rules.maxSlot.type] = _objectSpread({}, itemsCloned[idx].rules.maxSlot);
|
|
}
|
|
}
|
|
|
|
if (nbUsedSlot > itemsCloned[idx].nbrSlotMax) {
|
|
itemsData[idx].warnings.maxSlotWarning = _objectSpread({}, itemsCloned[idx].rules.maxSlotWarning);
|
|
} // check if HD68-IDC has at least 1 IDC-BNC adapter
|
|
|
|
|
|
if (itemsCloned[idx].type === 'hd68') {
|
|
var _shouldWarning = false;
|
|
|
|
if (idx < itemsCloned.length - 1) {
|
|
if (itemsCloned[idx + 1].type !== 'idc-bnc') {
|
|
_shouldWarning = true;
|
|
}
|
|
} else if (idx === itemsCloned.length - 1) {
|
|
_shouldWarning = true;
|
|
}
|
|
|
|
if (_shouldWarning) {
|
|
if (idx in itemsData) {
|
|
itemsData[idx].warnings.minAdapter = _objectSpread({}, itemsCloned[idx].rules.minAdapter);
|
|
} else {
|
|
itemsData[idx] = _objectSpread({}, itemsCloned[idx]);
|
|
itemsData[idx].warnings = {};
|
|
itemsData[idx].warnings.minAdapter = _objectSpread({}, itemsCloned[idx].rules.minAdapter);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
for (var _i4 = 0; _i4 <= idxZH.length - 1; _i4++) {
|
|
_loop(_i4);
|
|
} // update state with rules
|
|
|
|
|
|
this.setState(_objectSpread({}, this.state, {
|
|
columns: _objectSpread({}, this.state.columns, {
|
|
cart: _objectSpread({}, this.state.columns.cart, {
|
|
itemsData: _objectSpread({}, itemsData)
|
|
})
|
|
}),
|
|
rules: _objectSpread({}, rules)
|
|
}));
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this$state3 = this.state,
|
|
currency = _this$state3.currency,
|
|
currentItemHovered = _this$state3.currentItemHovered,
|
|
currentMode = _this$state3.currentMode,
|
|
crateModeSlots = _this$state3.crateModeSlots,
|
|
crateModeItems = _this$state3.crateModeItems,
|
|
items = _this$state3.items,
|
|
columns = _this$state3.columns,
|
|
rules = _this$state3.rules,
|
|
mobileSideMenuShouldOpen = _this$state3.mobileSideMenuShouldOpen,
|
|
newCardJustAdded = _this$state3.newCardJustAdded,
|
|
isProcessing = _this$state3.isProcessing,
|
|
shouldShowRFQFeedback = _this$state3.shouldShowRFQFeedback,
|
|
RFQBodyType = _this$state3.RFQBodyType,
|
|
RFQBodyOrder = _this$state3.RFQBodyOrder,
|
|
isProcessingComplete = _this$state3.isProcessingComplete;
|
|
var isMobile = window.deviceIsMobile();
|
|
return React.createElement(DragDropContext, {
|
|
onDragEnd: this.handleOnDragEnd
|
|
}, React.createElement(Layout, {
|
|
showRFQFeedback: shouldShowRFQFeedback,
|
|
RFQBodyType: RFQBodyType,
|
|
RFQBodyOrder: RFQBodyOrder,
|
|
className: "shop",
|
|
mobileSideMenuShouldOpen: mobileSideMenuShouldOpen,
|
|
isMobile: isMobile,
|
|
newCardJustAdded: newCardJustAdded,
|
|
onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
|
|
onClickCloseRFQFeedback: this.handleClickCloseRFQFeedback,
|
|
onClickLoadCustomConf: this.handleLoadCustomConf,
|
|
aside: React.createElement(Backlog, {
|
|
currency: currency,
|
|
items: items,
|
|
data: columns['backlog'],
|
|
onClickAddItem: this.handleClickAddItem,
|
|
onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
|
|
isMobile: isMobile
|
|
}),
|
|
main: React.createElement(OrderPanel, {
|
|
onClickToggleMobileSideMenu: this.handleClickToggleMobileSideMenu,
|
|
onClickOpenImport: this.handleClickOpenImport,
|
|
isMobile: isMobile,
|
|
title: "Order hardware",
|
|
description: " Drag and drop the cards you want into the crate below to see how the combination would look like. If you have any issues with this ordering system, or if you need other configurations, email us directly anytime at sales@m-****.hk. The price is estimated and must be confirmed by a quote.",
|
|
crateMode: React.createElement(CrateMode, {
|
|
items: crateModeItems,
|
|
mode: currentMode,
|
|
onClickMode: this.handleCrateModeChange
|
|
}),
|
|
crate: React.createElement(Crate, {
|
|
cart: React.createElement(Cart, {
|
|
nbrSlots: crateModeSlots[currentMode],
|
|
data: columns['cart'],
|
|
isMobile: isMobile,
|
|
itemHovered: currentItemHovered,
|
|
onToggleProgress: this.handleToggleItemProgress,
|
|
onToggleWarning: this.handleToggleItemWarning,
|
|
onToggleOverlayRemove: this.handleToggleOverlayRemove,
|
|
onClickRemoveItem: this.handleDeleteItem
|
|
}),
|
|
rules: Object.values(rules).filter(function (rule) {
|
|
return rule;
|
|
})
|
|
}),
|
|
summaryPrice: React.createElement(OrderSumary, {
|
|
currency: currency,
|
|
currentMode: currentMode,
|
|
modes: crateModeItems,
|
|
summary: columns['cart'].items,
|
|
itemsData: columns.cart.itemsData,
|
|
onMouseEnterItem: this.handleMouseEnterItem,
|
|
onMouseLeaveItem: this.handleMouseLeaveItem,
|
|
onDeleteItem: this.handleDeleteItem,
|
|
onDeleteAllItems: this.handleDeleteAllItems,
|
|
onClickSelectItem: this.handleClickSelectItem
|
|
}),
|
|
form: React.createElement(OrderForm, {
|
|
isProcessingComplete: isProcessingComplete,
|
|
processingComplete: this.handleProcessingComplete,
|
|
isProcessing: isProcessing,
|
|
onClickSubmit: this.handleClickSubmit,
|
|
onClickShow: this.handleClickShowOrder
|
|
})
|
|
})
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Shop;
|
|
}(React.PureComponent);
|
|
|
|
ReactDOM.render(React.createElement(Shop, {
|
|
data: data
|
|
}), document.querySelector('#root-shop'));
|