@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

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

@@ -0,0 +1,154 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _redux = require("redux");
+
+var _reactRedux = require("react-redux");
+
+var _react2 = require("@storybook/react");
+
+var _ThemeProvider = _interopRequireDefault(require("../../../../Screens/Configurator/ThemeProvider"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var initialState = {
+  availableOption: {
+    identifier: '010002011000',
+    imageIdentifier: '010002011000',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    amount_is_selectable: false,
+    check_results: {
+      status: true
+    }
+  },
+  unavailableOption: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    amount_is_selectable: false,
+    check_results: {
+      status: true
+    }
+  },
+  optionWithSelectableAmount: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    amount_is_selectable: true,
+    check_results: {
+      status: true
+    }
+  },
+  optionWithDetails: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    "abstract": 'abstract',
+    amount_is_selectable: false,
+    check_results: {
+      status: true
+    }
+  },
+  incompatibleOption: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    "abstract": 'abstract',
+    amount_is_selectable: false
+  },
+  optionNotInStock: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    stock: {
+      traffic_light: 'red'
+    }
+  },
+  optionWithDelay: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    stock: {
+      traffic_light: 'yellow'
+    }
+  },
+  optionWithOptionGroup: {
+    identifier: '010002011000',
+    imageIdentifier: '',
+    title: 'Argentina 1000',
+    priceFormatted: '€ 123.00',
+    option_group: {
+      children: [{
+        identifier: '1',
+        title: 'Child 1'
+      }, {
+        identifier: '2',
+        title: 'Child 2'
+      }],
+      title: 'My group'
+    }
+  },
+  translations: {
+    imageNotAvailable: 'No preview available',
+    details: 'Details',
+    incompatibility: 'Incompatibility',
+    notAvailable: 'Not avaiable',
+    lateDelivery: 'Late delivery'
+  }
+};
+
+var reducer = function reducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var action = arguments.length > 1 ? arguments[1] : undefined;
+  return _objectSpread(_objectSpread({}, action), state);
+};
+
+var store = (0, _redux.createStore)(reducer, ['Use Redux']);
+
+var createStory = function createStory(option) {
+  return /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
+    store: store
+  }, /*#__PURE__*/_react["default"].createElement(_ThemeProvider["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      backgroundColor: 'lightblue',
+      width: '350px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    option: option,
+    translations: initialState.translations
+  }))));
+};
+
+(0, _react2.storiesOf)('Option', module).add('with available image', function () {
+  return createStory(initialState.availableOption);
+}).add('with unavailable image', function () {
+  return createStory(initialState.unavailableOption);
+}).add('with selectable amount', function () {
+  return createStory(initialState.optionWithSelectableAmount);
+}).add('with details', function () {
+  return createStory(initialState.optionWithDetails);
+}).add('with incompatibility link', function () {
+  return createStory(initialState.incompatibleOption);
+}).add('with stock - not available', function () {
+  return createStory(initialState.optionNotInStock);
+}).add('with stock - late delivery', function () {
+  return createStory(initialState.optionWithDelay);
+}).add('with option group', function () {
+  return createStory(initialState.optionWithOptionGroup);
+});

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

@@ -0,0 +1,236 @@
+"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 _clsx = _interopRequireDefault(require("clsx"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _core = require("@material-ui/core");
+
+var _Add = _interopRequireDefault(require("@material-ui/icons/Add"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+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 asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+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; }
+
+var useStyles = (0, _core.makeStyles)(function () {
+  var amountColor = 'rgba(0,0,0,0.1)';
+  var plusBorder = '1px solid ' + amountColor;
+  return {
+    minus: {
+      '&:hover': {
+        color: 'rgba(0,0,0, 0.5)'
+      },
+      '&.disable': {
+        color: 'rgba(0, 0, 0, 0.26)',
+        cursor: 'auto',
+        '&:hover': {
+          color: 'rgba(0,0,0, 0.26)'
+        }
+      }
+    },
+    plus: {
+      '&:hover': {
+        color: 'rgba(0,0,0, 0.5)'
+      }
+    },
+    value: {
+      borderTop: '1px solid rgba(0,0,0,0.1)',
+      borderBottom: '1px solid rgba(0,0,0,0.1)',
+      '& .MuiInput-underline:before': {
+        content: 'none'
+      },
+      '& .MuiInput-underline:after': {
+        borderBottom: 'none'
+      },
+      '& input': {
+        textAlign: 'center'
+      }
+    },
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      flexDirection: 'column',
+      maxWidth: 35,
+      "float": 'right',
+      border: plusBorder,
+      '&.horizontal': {
+        flexDirection: 'row-reverse',
+        maxWidth: '100%',
+        "float": 'left',
+        marginBottom: 8,
+        '& $value': {
+          width: 35,
+          minWidth: 35,
+          borderWidth: '0 1px 0 1px',
+          borderStyle: 'solid',
+          borderColor: 'rgba(0,0,0,0.1)'
+        },
+        '& svg': {
+          padding: 8
+        }
+      },
+      '& svg': {
+        height: 20,
+        width: 20,
+        padding: '6px 0'
+      },
+      '& > span': {
+        display: 'block',
+        height: 30,
+        textAlign: 'center',
+        verticalAlign: 'middle',
+        lineHeight: '30px',
+        fontSize: 20,
+        fontFamily: 'Roboto',
+        '& $plus': {
+          backgroundColor: amountColor
+        },
+        '& $minus': {
+          backgroundColor: amountColor
+        },
+        '& $value': {
+          backgroundColor: 'white'
+        }
+      }
+    }
+  };
+}, {
+  name: 'OptionAmount'
+});
+
+var OptionAmount = function OptionAmount(_ref) {
+  var option = _ref.option,
+      onAmountChange = _ref.onAmountChange,
+      onSelect = _ref.onSelect,
+      view = _ref.view;
+  var classes = useStyles();
+  var textRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      optionAmount = _useState2[0],
+      setOptionAmount = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setOptionAmount(option.amount === null ? 0 : option.amount);
+  }, [option]);
+
+  var onAmountClicked = function onAmountClicked(event) {
+    event.stopPropagation();
+  };
+
+  var plus = function plus() {
+    onAmountChange(parseInt(textRef.current.value) + 1);
+  };
+
+  var minus = function minus() {
+    onAmountChange(parseInt(textRef.current.value) - 1);
+  };
+
+  var onChangeDebounced = (0, _debounce["default"])(function () {
+    onSelect(_objectSpread(_objectSpread({}, option), {}, {
+      amount: isNaN(parseInt(textRef.current.value)) ? 0 : parseInt(textRef.current.value)
+    }));
+  }, 1000);
+
+  var updateAmount = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(e) {
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!isNaN(parseInt(e.target.value))) {
+                setOptionAmount(parseInt(e.target.value));
+              } else {
+                setOptionAmount('');
+              }
+
+              onChangeDebounced();
+
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateAmount(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _clsx["default"])(classes.root, view),
+    onClick: onAmountClicked
+  }, /*#__PURE__*/_react["default"].createElement(_Add["default"], {
+    className: classes.plus,
+    onClick: plus
+  }), /*#__PURE__*/_react["default"].createElement(_core.TextField, {
+    value: optionAmount,
+    inputRef: textRef,
+    onChange: updateAmount,
+    className: classes.value,
+    onFocus: function onFocus(event) {
+      // select text async for mac os safari
+      var target = event.target;
+      setTimeout(function () {
+        return target.select();
+      }, 0);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Remove["default"], {
+    className: (0, _clsx["default"])(classes.minus, !optionAmount && 'disable'),
+    onClick: minus
+  }));
+};
+
+OptionAmount.defaultProps = {
+  option: {},
+  onAmountChange: function onAmountChange() {},
+  onSelect: function onSelect() {}
+};
+OptionAmount.propTypes = {
+  option: _propTypes["default"].object,
+  onAmountChange: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  view: _propTypes["default"].string
+};
+var _default = OptionAmount;
+exports["default"] = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _DialogSelect = _interopRequireDefault(require("../../../../../Framework/Components/DialogSelect"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var OptionGroup = function OptionGroup(_ref) {
+  var adjustWidth = _ref.adjustWidth,
+      dialogPositioning = _ref.dialogPositioning,
+      isSelected = _ref.isSelected,
+      itemGroup = _ref.itemGroup,
+      onOptionSelect = _ref.onOptionSelect,
+      onToggle = _ref.onToggle,
+      option = _ref.option,
+      renderOption = _ref.renderOption,
+      relativeTo = _ref.relativeTo,
+      selected = _ref.selected;
+  return /*#__PURE__*/_react["default"].createElement(_DialogSelect["default"], {
+    onChange: onOptionSelect,
+    options: itemGroup.children,
+    value: selected ? option : undefined,
+    label: itemGroup.title,
+    valueProperty: "identifier",
+    relativeTo: relativeTo,
+    dialogPositioning: dialogPositioning,
+    adjustWidth: adjustWidth,
+    isSelected: isSelected,
+    renderOption: renderOption,
+    onToggle: onToggle
+  });
+};
+
+OptionGroup.defaultProps = {
+  adjustWidth: false,
+  itemGroup: {},
+  onToggle: function onToggle() {},
+  selected: false
+};
+OptionGroup.propTypes = {
+  adjustWidth: _propTypes["default"].bool,
+  itemGroup: _propTypes["default"].object,
+  onToggle: _propTypes["default"].func,
+  selected: _propTypes["default"].bool
+};
+var _default = OptionGroup;
+exports["default"] = _default;

package/App/Modules/Creator/Components/Optiondetail/ZoomImage/index.js

@@ -0,0 +1,173 @@
+"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 _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactZoomPanPinch = require("react-zoom-pan-pinch");
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+var _Modal = _interopRequireDefault(require("@material-ui/core/Modal"));
+
+var _getImageUrl = _interopRequireDefault(require("../../../../../Utils/getImageUrl"));
+
+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 _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 _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 styles = function styles(theme) {
+  var _closeButtonContainer, _closeButton;
+
+  return {
+    root: _defineProperty({
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column'
+    }, theme.breakpoints.down('xs'), {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)'
+    }),
+    closeButtonContainer: (_closeButtonContainer = {
+      justifyContent: 'flex-end',
+      display: 'flex',
+      position: 'fixed',
+      right: '2rem',
+      top: '2rem'
+    }, _defineProperty(_closeButtonContainer, theme.breakpoints.down('xs'), {
+      right: '1rem'
+    }), _defineProperty(_closeButtonContainer, "zIndex", 1), _closeButtonContainer),
+    closeButton: (_closeButton = {
+      width: '3rem',
+      height: '3rem'
+    }, _defineProperty(_closeButton, theme.breakpoints.down('xs'), {
+      width: '2rem',
+      height: '2rem'
+    }), _defineProperty(_closeButton, "display", 'flex'), _defineProperty(_closeButton, "alignItems", 'center'), _defineProperty(_closeButton, "justifyContent", 'center'), _defineProperty(_closeButton, "borderRadius", '50%'), _defineProperty(_closeButton, "border", 'none'), _defineProperty(_closeButton, "cursor", 'pointer'), _defineProperty(_closeButton, "color", theme.palette.primary.darkText), _closeButton)
+  };
+};
+
+var ZoomImage = function ZoomImage(_ref) {
+  var show = _ref.show,
+      onClose = _ref.onClose,
+      image = _ref.image,
+      width = _ref.width,
+      classes = _ref.classes,
+      _ref$minScale = _ref.minScale,
+      minScale = _ref$minScale === void 0 ? 1 : _ref$minScale,
+      _ref$maxScale = _ref.maxScale,
+      maxScale = _ref$maxScale === void 0 ? 4 : _ref$maxScale,
+      _ref$alignmentAnimati = _ref.alignmentAnimationX,
+      alignmentAnimationX = _ref$alignmentAnimati === void 0 ? -5 : _ref$alignmentAnimati,
+      _ref$alignmentAnimati2 = _ref.alignmentAnimationY,
+      alignmentAnimationY = _ref$alignmentAnimati2 === void 0 ? -5 : _ref$alignmentAnimati2,
+      isLandscapeFormat = _ref.isLandscapeFormat,
+      title = _ref.title;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      imageLoaded = _useState2[0],
+      setImageLoaded = _useState2[1];
+
+  var imgStyleLandscape = {
+    height: 'auto',
+    maxWidth: width
+  };
+  var imgStylePortrait = {
+    maxHeight: window.innerHeight,
+    width: 'auto'
+  };
+
+  var handleImageLoaded = function handleImageLoaded() {
+    setImageLoaded(true);
+  };
+
+  var handleBackDropClick = function handleBackDropClick(event, reason) {
+    if (reason === 'backdropClick') {
+      onClose();
+    }
+  };
+
+  if (show) {
+    return /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+      className: classes.root,
+      open: show,
+      onClose: handleBackDropClick
+    }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, imageLoaded && /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.closeButtonContainer
+    }, /*#__PURE__*/_react["default"].createElement("button", {
+      className: classes.closeButton,
+      onClick: onClose
+    }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null))), /*#__PURE__*/_react["default"].createElement(_reactZoomPanPinch.TransformWrapper, {
+      initialScale: 1,
+      limitToBounds: true,
+      initialPositionX: 0,
+      initialPositionY: 0,
+      minScale: minScale,
+      maxScale: maxScale,
+      alignmentAnimation: {
+        sizeX: alignmentAnimationX,
+        sizeY: alignmentAnimationY,
+        animationTime: 0,
+        velocityAlignmentTime: 0
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_reactZoomPanPinch.TransformComponent, null, /*#__PURE__*/_react["default"].createElement("img", {
+      onLoad: handleImageLoaded,
+      src: (0, _getImageUrl["default"])(image),
+      style: isLandscapeFormat ? imgStyleLandscape : imgStylePortrait,
+      alt: title
+    })))));
+  }
+
+  return null;
+};
+
+ZoomImage.propTypes = {
+  onClose: _propTypes["default"].func.isRequired,
+  show: _propTypes["default"].bool,
+  image: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  maxScale: _propTypes["default"].number,
+  minScale: _propTypes["default"].number,
+  alignmentAnimationX: _propTypes["default"].number,
+  alignmentAnimationY: _propTypes["default"].number,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  isLandscapeFormat: _propTypes["default"].bool,
+  classes: _propTypes["default"].object
+};
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'ZoomImage'
+})(ZoomImage);
+
+exports["default"] = _default;