@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

package/App/Modules/Creator/Components/Option/index.js

@@ -0,0 +1,545 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodash = require("lodash");
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
+
+var _core = require("@material-ui/core");
+
+var _BlockRounded = _interopRequireDefault(require("@material-ui/icons/BlockRounded"));
+
+var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
+
+var _RestoreRounded = _interopRequireDefault(require("@material-ui/icons/RestoreRounded"));
+
+var _WarningRounded = _interopRequireDefault(require("@material-ui/icons/WarningRounded"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _Markdown = _interopRequireDefault(require("../../../../../Framework/Components/Markdown"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
+
+var _OptionAmount = _interopRequireDefault(require("../OptionAmount"));
+
+var _OptionGroup = _interopRequireDefault(require("../OptionGroup"));
+
+var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
+
+var _excluded = ["children", "render"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var styles = function styles(theme) {
+  var textWidthWithAmount = theme.creator.option.image.width !== 'auto' ? "calc(94% - (".concat(theme.creator.option.image.width, " + 35px))") : theme.creator.option.textArea.textWidth;
+  var customValues = {
+    icon: {
+      fontSize: '16px',
+      lineHeight: 1.6
+    },
+    image: {
+      fontSize: '11px',
+      lineHeight: '11px'
+    },
+    textArea: {
+      fontSize: '0.8em',
+      title: {
+        fontWeight: 'bold'
+      }
+    }
+  };
+  return {
+    description: {},
+    materialIcon: {},
+    price: {},
+    details: {
+      display: 'inline-block'
+    },
+    iconWithText: {
+      lineHeight: customValues.icon.lineHeight,
+      display: 'flex',
+      verticalAlign: 'middle',
+      '& $materialIcon': {
+        "float": 'left',
+        display: 'inline-block',
+        paddingRight: '8px',
+        minWidth: '20px',
+        textAlign: 'center'
+      }
+    },
+    optionList: {
+      overflow: 'hidden'
+    },
+    title: {
+      fontWeight: 'bold',
+      display: '-webkit-box',
+      overflow: 'hidden',
+      wordWrap: 'break-word',
+      boxOrient: 'vertical',
+      lineClamp: 3,
+      textOverflow: 'ellipsis'
+    },
+    image: {
+      display: 'inline-block',
+      "float": 'left',
+      height: '100%',
+      maxHeight: '100%',
+      maxWidth: theme.creator.option.image.width,
+      marginRight: '10px',
+      fontSize: 0,
+      '& img': {
+        maxHeight: '100%',
+        maxWidth: '100%'
+      },
+      '& .imageNotAvailableElement': {
+        padding: '4px',
+        lineHeight: customValues.image.lineHeight,
+        fontSize: customValues.image.fontSize
+      }
+    },
+    root: {
+      minHeight: '100px',
+      padding: 10,
+      cursor: 'pointer',
+      fontSize: customValues.textArea.fontSize,
+      display: 'table',
+      width: '94%',
+      '& .content': {
+        position: 'relative',
+        display: 'table-cell',
+        verticalAlign: 'middle',
+        margin: 0
+      },
+      '& .disabled': {
+        cursor: 'not-allowed',
+        opacity: '0.8'
+      },
+      '&.selected': {
+        backgroundColor: '#d8d8d8'
+      },
+      tapHighlightColor: theme.tapHighlightColor
+    },
+    text: {
+      "float": 'left',
+      width: 'calc(94% - ' + theme.creator.option.image.width + ')',
+      '& a': {
+        textDecoration: 'underline'
+      },
+      '& $description': {
+        marginBottom: 10,
+        '& p': {
+          margin: 0
+        }
+      },
+      '& $price': {
+        marginBottom: 10
+      },
+      '& $title': {
+        fontWeight: customValues.textArea.title.fontWeight,
+        marginBottom: '10px'
+      }
+    },
+    withAmount: {
+      '& $text': {
+        width: textWidthWithAmount
+      }
+    }
+  };
+};
+
+var Option = function Option(_ref) {
+  var children = _ref.children,
+      render = _ref.render,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var className = props.className,
+      onClick = props.onClick,
+      onSelect = props.onSelect,
+      onToggle = props.onToggle,
+      option = props.option,
+      optionclassification = props.optionclassification,
+      selected = props.selected,
+      viewDetails = props.viewDetails,
+      viewStockInformation = props.viewStockInformation,
+      OptionAmountComponent = props.OptionAmountComponent,
+      OptionGroupComponent = props.OptionGroupComponent,
+      classes = props.classes,
+      isAdminMode = props.isAdminMode;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageAvailable = _useState2[0],
+      setImageAvailable = _useState2[1];
+
+  var query = new URLSearchParams(location.search);
+  var hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';
+  var smallerScreen = (0, _core.useMediaQuery)('(min-device-width : 300px) and (max-device-width : 340px)');
+  var thumbnail = (0, _lodash.get)(option, 'thumbnail', '');
+  var detailImage = (0, _lodash.get)(option, 'detailImage');
+  var optionIdentifier = (0, _lodash.get)(option, 'identifier', '');
+  var amountIsSelectable = (0, _lodash.get)(option, 'amount_is_selectable', false);
+  var resultStatus = (0, _lodash.get)(option, 'check_results.status', true);
+  var optionIsMultiSelect = (0, _lodash.get)(option, 'is_multiselect', false);
+  var optionAmount = (0, _lodash.get)(option, 'amount', 0);
+
+  var translations = _objectSpread(_objectSpread({}, (0, _i18n.t)('common')), (0, _i18n.t)('optionlistitem'));
+
+  var setImageAvailability = function setImageAvailability() {
+    setImageAvailable(!imageAvailable);
+  };
+
+  var isEnabled = function isEnabled() {
+    return (0, _lodash.get)(option, 'stock.traffic_light', false) !== 'red';
+  };
+
+  var shouldDisplayDetails = function shouldDisplayDetails() {
+    var displayDetails = false;
+
+    if (option["abstract"] || option.description || detailImage) {
+      displayDetails = true;
+    }
+
+    return displayDetails;
+  };
+
+  var onOptionSelected = function onOptionSelected() {
+    var optionClassificationIsMultiselect = (0, _lodash.get)(optionclassification, 'is_multiselect', false);
+
+    if (amountIsSelectable) {
+      onSelect(_objectSpread(_objectSpread({}, option), {}, {
+        amount: !optionAmount ? 1 : optionAmount
+      }));
+    } else if (optionClassificationIsMultiselect || isAdminMode) {
+      onSelect(_objectSpread(_objectSpread({}, option), {}, {
+        amount: selected ? 0 : 1
+      }));
+    } else if (!selected) {
+      onSelect(_objectSpread(_objectSpread({}, option), {}, {
+        amount: 1
+      }));
+    }
+  };
+
+  var onOptionClicked = function onOptionClicked(event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (isEnabled()) {
+      onOptionSelected();
+      onClick();
+    }
+  };
+
+  var onAmountChanged = function onAmountChanged(optionAmount) {
+    if (!isEnabled()) {
+      return;
+    }
+
+    var amount;
+
+    if (amountIsSelectable) {
+      amount = optionAmount;
+    } else if (optionIsMultiSelect) {
+      amount = selected ? 0 : 1;
+    } else if (!selected) {
+      amount = 1;
+    }
+
+    if (amount < 0) {
+      return; // prevent setting below 0
+    }
+
+    onSelect(_objectSpread(_objectSpread({}, option), {}, {
+      amount: amount
+    }));
+  };
+
+  var onDetailsClicked = function onDetailsClicked(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (isEnabled()) {
+      viewDetails(option);
+    }
+  };
+
+  var onIncompatibilityClicked = function onIncompatibilityClicked(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (isEnabled()) {
+      onOptionSelected();
+    }
+  };
+
+  var onOptionGroupClicked = function onOptionGroupClicked(event) {
+    event.stopPropagation();
+  };
+
+  var onOptionGroupItemSelected = function onOptionGroupItemSelected(option) {
+    onSelect(_objectSpread(_objectSpread({}, option), {}, {
+      amount: 1
+    }));
+  };
+
+  var onLateDeliveryClicked = function onLateDeliveryClicked(event) {
+    event.stopPropagation();
+    event.preventDefault();
+
+    if (isEnabled()) {
+      viewStockInformation(option);
+    }
+  };
+
+  var renderImage = function renderImage() {
+    var src = (0, _getImageUrl["default"])(thumbnail);
+    return src && /*#__PURE__*/_react["default"].createElement("img", {
+      src: src,
+      onError: setImageAvailability
+    });
+  };
+
+  var renderNotAvailableImage = function renderNotAvailableImage() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: 'imageNotAvailableElement'
+    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      variant: 'caption'
+    }, translations.imageNotAvailable));
+  };
+
+  var renderStockStatus = function renderStockStatus() {
+    if (option.stock) {
+      switch (option.stock.traffic_light) {
+        case 'red':
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.iconWithText
+          }, /*#__PURE__*/_react["default"].createElement(_BlockRounded["default"], {
+            className: classes.materialIcon
+          }), ' ', /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+            variant: 'body2'
+          }, translations.notAvailable));
+
+        case 'yellow':
+          return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+            className: classes.iconWithText,
+            onClick: onLateDeliveryClicked
+          }, /*#__PURE__*/_react["default"].createElement(_RestoreRounded["default"], {
+            className: classes.materialIcon
+          }), ' ', /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+            variant: 'body2'
+          }, translations.lateDelivery)));
+
+        case 'green':
+          return null;
+      }
+    }
+
+    return null;
+  };
+
+  var renderOptionGroup = function renderOptionGroup() {
+    if (!isEnabled()) {
+      return null;
+    }
+
+    var optionGroup = (0, _lodash.get)(option, 'option_group', {});
+
+    if ((0, _lodash.has)(optionGroup, 'children') && (0, _lodash.isArray)(optionGroup.children) && optionGroup.children.length > 0) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        onClick: onOptionGroupClicked
+      }, /*#__PURE__*/_react["default"].createElement(OptionGroupComponent, {
+        itemGroup: optionGroup,
+        option: option,
+        optionclassification: optionclassification,
+        onOptionSelect: onOptionGroupItemSelected,
+        selected: selected,
+        onToggle: onToggle
+      }));
+    }
+
+    return null;
+  };
+
+  var renderActions = function renderActions() {
+    var displayDetails = shouldDisplayDetails();
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.details
+    }, displayDetails && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+      className: classes.iconWithText,
+      onClick: onDetailsClicked
+    }, /*#__PURE__*/_react["default"].createElement(_InfoRounded["default"], {
+      className: classes.materialIcon
+    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      variant: 'body2',
+      className: classes.iconWithText
+    }, translations.details))), resultStatus !== true && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
+      className: classes.iconWithText,
+      onClick: onIncompatibilityClicked
+    }, /*#__PURE__*/_react["default"].createElement(_WarningRounded["default"], {
+      className: classes.materialIcon
+    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      variant: 'body2'
+    }, translations.incompatibility))), renderStockStatus(), renderOptionGroup());
+  };
+
+  var renderText = function renderText() {
+    return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      item: true,
+      xs: 12
+    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      component: 'div',
+      className: classes.optionList,
+      variant: 'body2'
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.title
+    }, option.title), !hidePrices && /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.price
+    }, option.priceFormatted), smallerScreen && renderControls('horizontal'), option["abstract"] && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
+      className: classes.description
+    }, option["abstract"]), renderActions()));
+  };
+
+  var renderControls = function renderControls(view) {
+    if (isEnabled() && amountIsSelectable) {
+      return /*#__PURE__*/_react["default"].createElement(OptionAmountComponent, {
+        view: view,
+        option: option,
+        onAmountChange: onAmountChanged,
+        onSelect: onSelect
+      });
+    } else {
+      return null;
+    }
+  };
+
+  var getRootClassName = function getRootClassName() {
+    return (0, _clsx["default"])(classes.root, selected && 'selected', (0, _customClassName["default"])('option'));
+  };
+
+  var getContentClassName = function getContentClassName() {
+    var amountClass = amountIsSelectable && !smallerScreen ? classes.withAmount : '';
+    return (0, _clsx["default"])('content', className, optionIdentifier, amountClass, !isEnabled() && 'disabled', resultStatus !== true && 'incompatible');
+  };
+
+  var getRenderProps = function getRenderProps() {
+    return _objectSpread(_objectSpread({}, props), {}, {
+      imageAvailable: imageAvailable,
+      smallerScreen: smallerScreen,
+      renderImage: renderImage,
+      renderNotAvailableImage: renderNotAvailableImage,
+      renderText: renderText,
+      renderControls: renderControls,
+      renderActions: renderActions,
+      renderOptionGroup: renderOptionGroup,
+      renderStockStatus: renderStockStatus,
+      setImageAvailability: setImageAvailability,
+      isEnabled: isEnabled,
+      shouldDisplayDetails: shouldDisplayDetails,
+      onOptionSelected: onOptionSelected,
+      onOptionClicked: onOptionClicked,
+      onAmountChanged: onAmountChanged,
+      onDetailsClicked: onDetailsClicked,
+      onIncompatibilityClicked: onIncompatibilityClicked,
+      onOptionGroupClicked: onOptionGroupClicked,
+      onOptionGroupItemSelected: onOptionGroupItemSelected,
+      onLateDeliveryClicked: onLateDeliveryClicked,
+      getRootClassName: getRootClassName,
+      getContentClassName: getContentClassName
+    });
+  };
+
+  var renderItem = function renderItem() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: getRootClassName(),
+      "data-option": option.identifier,
+      onClick: onOptionClicked
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: getContentClassName()
+    }, typeof children === 'function' ? children(getRenderProps()) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.image
+    }, imageAvailable ? renderImage() : renderNotAvailableImage()), /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.text
+    }, renderText()), !smallerScreen && renderControls())));
+  };
+
+  return typeof render === 'function' ? render(getRenderProps()) : renderItem();
+};
+
+Option.defaultProps = {
+  className: '',
+  onClick: function onClick() {},
+  onSelect: function onSelect() {},
+  onToggle: function onToggle() {},
+  optionclassification: {},
+  option: {},
+  selected: false,
+  translations: {},
+  viewDetails: function viewDetails() {},
+  viewStockInformation: function viewStockInformation() {},
+  OptionAmountComponent: _OptionAmount["default"],
+  OptionGroupComponent: _OptionGroup["default"]
+};
+Option.propTypes = {
+  className: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  onToggle: _propTypes["default"].func,
+  option: _propTypes["default"].object,
+  optionclassification: _propTypes["default"].object,
+  selected: _propTypes["default"].bool,
+  translations: _propTypes["default"].object,
+  viewDetails: _propTypes["default"].func,
+  viewStockInformation: _propTypes["default"].func,
+  OptionAmountComponent: _propTypes["default"].elementType,
+  OptionGroupComponent: _propTypes["default"].elementType,
+  isAdminMode: _propTypes["default"].bool,
+  children: _propTypes["default"].func,
+  render: _propTypes["default"].func
+};
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'Option'
+})(Option);
+
+exports["default"] = _default;