@configuratorware/configurator-frontendgui 1.39.2 → 1.40.0

package/App/Routing.js

@@ -137,7 +137,11 @@ var Routing = /*#__PURE__*/function (_Component2) {
       }, /*#__PURE__*/_react["default"].createElement(_ErrorBoundary["default"], null, /*#__PURE__*/_react["default"].createElement(_Frame["default"], null, /*#__PURE__*/_react["default"].createElement(_reactRouter.Switch, null, /*#__PURE__*/_react["default"].createElement(Route, {
         exact: true,
         path: "/",
-        component: _Screens["default"].Configurator
+        component: _Screens["default"].ItemOverview
+      }), /*#__PURE__*/_react["default"].createElement(Route, {
+        exact: true,
+        path: "/items",
+        component: _Screens["default"].ItemOverview
       }), /*#__PURE__*/_react["default"].createElement(_reactRouter.Redirect, {
         from: "blank",
         to: this.basePath

package/App/Screens/Configurator/Components/ItemTile/ItemTile.js

@@ -0,0 +1,88 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));
+
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+
+var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var useStyles = (0, _makeStyles["default"])(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '10px',
+      width: '70%',
+      height: '300px',
+      backgroundColor: '#fff',
+      padding: '25px',
+      borderRadius: '5px',
+      margin: '20px',
+      boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.2)'
+    },
+    image: {
+      margin: 'auto',
+      width: '170px',
+      height: '170px',
+      '& img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'contain'
+      }
+    },
+    title: {
+      marginBottom: 'auto'
+    },
+    buttonContainer: {
+      width: '150px',
+      margin: 'auto'
+    },
+    button: {
+      width: '100%',
+      backgroundColor: theme.palette.primary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.light
+      }
+    }
+  };
+}, {
+  name: 'ItemTile'
+});
+
+var ItemTile = function ItemTile(_ref) {
+  var title = _ref.title,
+      linkTo = _ref.linkTo,
+      image = _ref.image;
+  var classes = useStyles();
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.root
+  }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+    variant: "h6",
+    className: classes.title
+  }, title), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.image
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: image,
+    alt: title
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.buttonContainer
+  }, /*#__PURE__*/_react["default"].createElement("a", {
+    href: linkTo
+  }, /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+    className: classes.button
+  }, (0, _i18n.T)('itemOverview.customize')))));
+};
+
+var _default = ItemTile;
+exports["default"] = _default;

package/App/Screens/ItemOverview.js

@@ -0,0 +1,340 @@
+"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 _ItemTile = _interopRequireDefault(require("./Configurator/Components/ItemTile/ItemTile"));
+
+var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));
+
+var _core = require("@material-ui/core");
+
+var _i18n = require("../../Framework/i18n");
+
+var _lazyFetch = require("../Utils/Request/lazyFetch");
+
+var _lab = require("@material-ui/lab");
+
+var _configuration = require("../configuration");
+
+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 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 _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 useStyles = (0, _makeStyles["default"])(function (theme) {
+  return {
+    container: _defineProperty({
+      marginTop: '80px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '70%',
+      margin: 'auto'
+    }, theme.breakpoints.down('sm'), {
+      width: '95%'
+    }),
+    itemContainer: _defineProperty({
+      minWidth: '100%',
+      backgroundColor: '#C4C4C4',
+      padding: '30px',
+      marginBottom: '30px',
+      borderRadius: '10px'
+    }, theme.breakpoints.down('sm'), {
+      minWidth: '85%',
+      maxWidth: '95%'
+    }),
+    gridContainer: {
+      margin: 'auto'
+    },
+    categoryContainer: _defineProperty({
+      display: 'flex',
+      gap: '15px',
+      width: '100%',
+      marginTop: '40px',
+      marginBottom: '30px',
+      overflowX: 'auto'
+    }, theme.breakpoints.down('md'), {
+      marginTop: '20px'
+    }),
+    categoryButton: {
+      backgroundColor: '#ededed',
+      color: '#000',
+      borderRadius: '50px',
+      padding: '20px',
+      '&.active': {
+        backgroundColor: theme.palette.primary.main,
+        color: '#fff'
+      }
+    },
+    header: {
+      minHeight: '64px',
+      display: 'flex',
+      justifyContent: 'center',
+      paddingLeft: '25px'
+    },
+    paginationContainer: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: '10px'
+    }
+  };
+}, {
+  name: 'ItemOverview'
+});
+
+var ItemOverview = function ItemOverview(_ref) {
+  var pageSize = _ref.pageSize;
+  var classes = useStyles();
+  var theme = (0, _core.useTheme)();
+  var isMobile = (0, _core.useMediaQuery)(theme.breakpoints.down('sm'));
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      allItems = _useState2[0],
+      setAllItems = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = _slicedToArray(_useState5, 2),
+      categories = _useState6[0],
+      setCategories = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      _useState8 = _slicedToArray(_useState7, 2),
+      chosenCategory = _useState8[0],
+      setChosenCategory = _useState8[1];
+
+  var _useState9 = (0, _react.useState)({
+    count: 0,
+    from: 0,
+    to: pageSize
+  }),
+      _useState10 = _slicedToArray(_useState9, 2),
+      pagination = _useState10[0],
+      setPagination = _useState10[1];
+
+  var HOST = (0, _configuration.getConf)('network.host');
+
+  var fetchItems = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var response;
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return (0, _lazyFetch.lazyFetch)('items');
+
+            case 2:
+              response = _context.sent;
+              return _context.abrupt("return", response.data.data);
+
+            case 4:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function fetchItems() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var fetchCategories = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var response;
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return (0, _lazyFetch.lazyFetch)('item-classifications');
+
+            case 2:
+              response = _context2.sent;
+              return _context2.abrupt("return", response.data);
+
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+
+    return function fetchCategories() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var items;
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return fetchItems();
+
+            case 2:
+              items = _context3.sent;
+              setAllItems(items);
+              setItems(items);
+              _context3.t0 = setCategories;
+              _context3.next = 8;
+              return fetchCategories();
+
+            case 8:
+              _context3.t1 = _context3.sent;
+              (0, _context3.t0)(_context3.t1);
+
+            case 10:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }))();
+  }, []);
+  (0, _react.useEffect)(function () {
+    setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+      count: Math.ceil(items.length / pageSize)
+    }));
+  }, [items, pagination.from, pagination.to]);
+  (0, _react.useEffect)(function () {
+    setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+      from: 0,
+      to: pageSize
+    }));
+    if (!chosenCategory) return setItems(allItems);
+    setItems(allItems.filter(function (item) {
+      return item.itemclassifications.some(function (classification) {
+        return classification.identifier === chosenCategory;
+      });
+    }));
+  }, [chosenCategory]);
+
+  var onClickCategory = function onClickCategory(identifier) {
+    if (chosenCategory === identifier) return setChosenCategory('');
+    setChosenCategory(identifier);
+  };
+
+  var handlePageChange = function handlePageChange(event, page) {
+    var from = (page - 1) * pageSize;
+    var to = (page - 1) * pageSize + pageSize;
+    setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
+      from: from,
+      to: to
+    }));
+  };
+
+  var renderCategories = function renderCategories() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.categoryContainer
+    }, categories.map(function (category) {
+      return /*#__PURE__*/_react["default"].createElement(_core.ButtonBase, {
+        className: (0, _clsx["default"])(classes.categoryButton, chosenCategory === category.identifier && 'active'),
+        key: category.identifier,
+        onClick: function onClick() {
+          return onClickCategory(category.identifier);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+        variant: "body2"
+      }, category.translated_title));
+    }));
+  };
+
+  var renderPagination = function renderPagination() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.paginationContainer
+    }, /*#__PURE__*/_react["default"].createElement(_lab.Pagination, {
+      count: pagination.count,
+      color: "primary",
+      onChange: handlePageChange,
+      size: isMobile ? 'small' : 'large'
+    }));
+  };
+
+  var renderItems = function renderItems() {
+    var itemsPerPage = items.slice(pagination.from, pagination.to);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.itemContainer
+    }, renderPagination(), /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+      container: true,
+      className: classes.gridContainer
+    }, itemsPerPage.map(function (item, index) {
+      return /*#__PURE__*/_react["default"].createElement(_core.Grid, {
+        item: true,
+        key: item.identifier,
+        xs: 12,
+        sm: 6,
+        md: 3
+      }, /*#__PURE__*/_react["default"].createElement(_ItemTile["default"], {
+        title: item.title,
+        index: index,
+        image: item.thumbnail,
+        linkTo: "".concat(HOST, "/identifier:").concat(item.identifier),
+        key: item.identifier
+      }));
+    })));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_core.AppBar, {
+    className: classes.header
+  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    variant: "h5"
+  }, (0, _i18n.T)('itemOverview.title'))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, !!categories.length && renderCategories(), !!items.length && renderItems()));
+};
+
+ItemOverview.propTypes = {
+  pageSize: _propTypes["default"].number
+};
+ItemOverview.defaultProps = {
+  pageSize: 8
+};
+var _default = ItemOverview;
+exports["default"] = _default;

package/App/Screens.js

@@ -13,6 +13,12 @@ var screens = (0, _configuration.getConf)('screens', {}); // IMPORTANT
 // import base Screens if not replaced in custom project
 // note: require should be used here to avoid importing the screen when it's not used
 
+if (!screens.ItemOverview) {
+  var ItemOverview = require("./Screens/ItemOverview")["default"];
+
+  screens.ItemOverview = ItemOverview;
+}
+
 if (!screens.Configurator) {
   var _require = require("./Screens/Configurator/Screen"),
       ConnectedConfiguratorScreen = _require.ConnectedConfiguratorScreen;

package/App/Utils/Request/lazyFetch.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyFetch = void 0;
+
+var _pathParams = require("./pathParams");
+
+var _Api = _interopRequireDefault(require("../../../Framework/Api"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }); }; }
+
+var lazyFetch = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url, params, fallbackValue) {
+    return regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.prev = 0;
+            _context.next = 3;
+            return _Api["default"].request((0, _pathParams.pathParams)(url, params));
+
+          case 3:
+            return _context.abrupt("return", _context.sent);
+
+          case 6:
+            _context.prev = 6;
+            _context.t0 = _context["catch"](0);
+            // eslint-disable-next-line no-console
+            console.error(_context.t0);
+
+            if (!(typeof fallbackValue !== 'undefined')) {
+              _context.next = 11;
+              break;
+            }
+
+            return _context.abrupt("return", fallbackValue);
+
+          case 11:
+            throw _context.t0;
+
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[0, 6]]);
+  }));
+
+  return function lazyFetch(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+exports.lazyFetch = lazyFetch;

package/App/Utils/Request/pathParams.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pathParams = void 0;
+
+var pathParams = function pathParams(path) {
+  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var keys = Object.keys(params);
+  var result = path;
+
+  for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+    var key = _keys[_i];
+    result = result.replace("{".concat(key, "}"), params[key]);
+  }
+
+  return result;
+};
+
+exports.pathParams = pathParams;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.39.2",
+  "version": "1.40.0",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.39.2",
+    "@configuratorware/scripts": "1.40.0",
     "@hot-loader/react-dom": "^17.0.1",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",
@@ -39,8 +39,8 @@
     "react-router-dom": "^5.2.0",
     "react-swipeable": "^5.5.1",
     "react-zoom-pan-pinch": "^2.1.3",
-    "redhotmagma-graphics-editor": "1.39.2",
-    "redhotmagma-visualization": "1.39.2",
+    "redhotmagma-graphics-editor": "1.40.0",
+    "redhotmagma-visualization": "1.40.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -171,7 +171,8 @@
   },
   "calculationTypes": {
     "setup_cost": "Einrichtungskosten",
-    "production_cost": "Produktionskosten"
+    "production_cost": "Produktionskosten",
+    "gallery_image": "Gallerie-Bild"
   },
   "calculationWidget": {
     "addImage": "Bild gewünscht",
@@ -465,5 +466,34 @@
       "maxTexts_1": "Im gewählten Produktionsverfahren ist maximal %{max} Textelement erlaubt. Bitte lösche einen Text um das Produktionsverfahren zu wechseln.",
       "maxTexts_0": "Im gewählten Produktionsverfahren sind keine Textelemente erlaubt. Bitte lösche alle Texte um das Produktionsverfahren zu wechseln."
     }
+  },
+  "receiveOffersRequestMail": {
+    "subject": "Sie haben eine Angebotsanfrage über den Konfigurator erhalten.",
+    "configurationCode": "Konfiguration Code",
+    "emailAddress": "E-Mail",
+    "name": "Name",
+    "company": "Firma",
+    "phoneNumber": "Telefonnummer",
+    "zip": "PLZ",
+    "city": "Ort",
+    "street": "Straße",
+    "country": "Land",
+    "note": "Hinweis",
+    "productionData": "Produktionsdaten"
+  },
+  "offerRequestCustomerEmail": {
+    "subject": "Ihre Konfigurationsanfrage %{code}",
+    "greeting": "Sehr geehrte(r) %{name}",
+    "text1": "Vielen Dank für Ihre Anfrage.",
+    "text2": "Ihr Konfigurations-Code lautet: %{code}",
+    "text3": "Sie können Ihre Konfiguration unter folgendem Link aufrufen: %{shareUrl}",
+    "text4": "Wir werden Ihnen das Angebot innerhalb der nächsten 1-2 Werktage bearbeitet zukommen lassen.",
+    "text5": "Sollten sich Fragen oder Änderungen ergeben, lassen Sie es uns gerne wissen.",
+    "regards": "Mit freundlichen Grüßen",
+    "signature": ""
+  },
+  "itemOverview": {
+    "title": "Produktübersicht",
+    "customize": "Konfigurieren"
   }
 }

package/public/translations/en_GB.json

@@ -171,7 +171,8 @@
   },
   "calculationTypes": {
     "setup_cost": "Setup cost",
-    "production_cost": "Production cost"
+    "production_cost": "Production cost",
+    "gallery_image": "Gallery image"
   },
   "calculationWidget": {
     "addImage": "Image wanted",
@@ -465,5 +466,34 @@
       "maxTexts_1": "A maximum of %{max} text element is allowed for the selected production method. Please delete a text to change the production method.",
       "maxTexts_0": "There are no text elements allowed for the selected production method. Please delete all texts to change the production method."
     }
+  },
+  "receiveOffersRequestMail": {
+    "subject": "You have received an offer request via the configurator.",
+    "configurationCode": "Configuration code",
+    "emailAddress": "Email",
+    "name": "Name",
+    "company": "Company",
+    "phoneNumber": "Phone",
+    "zip": "Zip",
+    "city": "City",
+    "street": "Street",
+    "country": "Country",
+    "note": "Note",
+    "productionData": "Production data"
+  },
+  "offerRequestCustomerEmail": {
+    "subject": "Your configuration request %{code}",
+    "greeting": "Dear %{name}",
+    "text1": "Thank you for your inquiry.",
+    "text2": "Your configuration code is: %{code}",
+    "text3": "You can access your configuration under the following link:",
+    "text4": "We will send you our offer within the next 1-2 working days.",
+    "text5": "If you have any questions or changes, please let us know.",
+    "regards": "Best regards",
+    "signature": ""
+  },
+  "itemOverview": {
+    "title": "Item Overview",
+    "customize": "Customize"
   }
 }

package/src/App/Routing.js

@@ -53,7 +53,9 @@ export default class Routing extends Component {
                 <ErrorBoundary>
                     <WrapperFrame>
                         <Switch>
-                            <Route exact path="/" component={combinedScreens.Configurator} />
+                            <Route exact path="/" component={combinedScreens.ItemOverview} />
+
+                            <Route exact path="/items" component={combinedScreens.ItemOverview} />
 
                             <Redirect from="blank" to={this.basePath} />
 

package/src/App/Screens/Configurator/Components/ItemTile/ItemTile.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography';
+import MainButton from '../../../../../Shared/Components/MainButton';
+import { T } from 'Framework/i18n';
+
+const useStyles = makeStyles(
+    theme => ({
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '10px',
+            width: '70%',
+            height: '300px',
+            backgroundColor: '#fff',
+            padding: '25px',
+            borderRadius: '5px',
+            margin: '20px',
+            boxShadow: '0px 0px 5px 0px rgba(0,0,0,0.2)',
+        },
+        image: {
+            margin: 'auto',
+            width: '170px',
+            height: '170px',
+            '& img': {
+                width: '100%',
+                height: '100%',
+                objectFit: 'contain',
+            },
+        },
+        title: {
+            marginBottom: 'auto',
+        },
+        buttonContainer: {
+            width: '150px',
+            margin: 'auto',
+        },
+        button: {
+            width: '100%',
+            backgroundColor: theme.palette.primary.main,
+            '&:hover': {
+                backgroundColor: theme.palette.primary.light,
+            },
+        },
+    }),
+    { name: 'ItemTile' }
+);
+
+const ItemTile = ({ title, linkTo, image }) => {
+    const classes = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <Typography variant="h6" className={classes.title}>
+                {title}
+            </Typography>
+            <div className={classes.image}>
+                <img src={image} alt={title} />
+            </div>
+            <div className={classes.buttonContainer}>
+                <a href={linkTo}>
+                    <MainButton className={classes.button}>{T('itemOverview.customize')}</MainButton>
+                </a>
+            </div>
+        </div>
+    );
+};
+
+export default ItemTile;

package/src/App/Screens/ItemOverview.js

@@ -0,0 +1,214 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import ItemTile from './Configurator/Components/ItemTile/ItemTile';
+import makeStyles from '@material-ui/core/styles/makeStyles';
+import { AppBar, ButtonBase, Typography, Grid, useMediaQuery, useTheme } from '@material-ui/core';
+import { T } from 'Framework/i18n';
+import { lazyFetch } from '../Utils/Request/lazyFetch';
+import { Pagination } from '@material-ui/lab';
+import { getConf } from '../configuration';
+
+const useStyles = makeStyles(
+    theme => ({
+        container: {
+            marginTop: '80px',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            width: '70%',
+            margin: 'auto',
+            [theme.breakpoints.down('sm')]: {
+                width: '95%',
+            },
+        },
+        itemContainer: {
+            minWidth: '100%',
+            backgroundColor: '#C4C4C4',
+            padding: '30px',
+            marginBottom: '30px',
+            borderRadius: '10px',
+            [theme.breakpoints.down('sm')]: {
+                minWidth: '85%',
+                maxWidth: '95%',
+            },
+        },
+        gridContainer: {
+            margin: 'auto',
+        },
+        categoryContainer: {
+            display: 'flex',
+            gap: '15px',
+            width: '100%',
+            marginTop: '40px',
+            marginBottom: '30px',
+            overflowX: 'auto',
+            [theme.breakpoints.down('md')]: {
+                marginTop: '20px',
+            },
+        },
+        categoryButton: {
+            backgroundColor: '#ededed',
+            color: '#000',
+            borderRadius: '50px',
+            padding: '20px',
+            '&.active': {
+                backgroundColor: theme.palette.primary.main,
+                color: '#fff',
+            },
+        },
+        header: {
+            minHeight: '64px',
+            display: 'flex',
+            justifyContent: 'center',
+            paddingLeft: '25px',
+        },
+        paginationContainer: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginBottom: '10px',
+        },
+    }),
+    { name: 'ItemOverview' }
+);
+
+const ItemOverview = ({ pageSize }) => {
+    const classes = useStyles();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+    const [allItems, setAllItems] = useState([]);
+    const [items, setItems] = useState([]);
+    const [categories, setCategories] = useState([]);
+    const [chosenCategory, setChosenCategory] = useState('');
+    const [pagination, setPagination] = useState({
+        count: 0,
+        from: 0,
+        to: pageSize,
+    });
+    const HOST = getConf('network.host');
+
+    const fetchItems = async () => {
+        const response = await lazyFetch('items');
+        return response.data.data;
+    };
+
+    const fetchCategories = async () => {
+        const response = await lazyFetch('item-classifications');
+        return response.data;
+    };
+
+    useEffect(() => {
+        (async () => {
+            const items = await fetchItems();
+            setAllItems(items);
+            setItems(items);
+            setCategories(await fetchCategories());
+        })();
+    }, []);
+
+    useEffect(() => {
+        setPagination({ ...pagination, count: Math.ceil(items.length / pageSize) });
+    }, [items, pagination.from, pagination.to]);
+
+    useEffect(() => {
+        setPagination({ ...pagination, from: 0, to: pageSize });
+
+        if (!chosenCategory) return setItems(allItems);
+        setItems(
+            allItems.filter(item =>
+                item.itemclassifications.some(classification => classification.identifier === chosenCategory)
+            )
+        );
+    }, [chosenCategory]);
+
+    const onClickCategory = identifier => {
+        if (chosenCategory === identifier) return setChosenCategory('');
+        setChosenCategory(identifier);
+    };
+
+    const handlePageChange = (event, page) => {
+        const from = (page - 1) * pageSize;
+        const to = (page - 1) * pageSize + pageSize;
+
+        setPagination({ ...pagination, from: from, to: to });
+    };
+
+    const renderCategories = () => {
+        return (
+            <div className={classes.categoryContainer}>
+                {categories.map(category => (
+                    <ButtonBase
+                        className={clsx(
+                            classes.categoryButton,
+                            chosenCategory === category.identifier && 'active'
+                        )}
+                        key={category.identifier}
+                        onClick={() => onClickCategory(category.identifier)}
+                    >
+                        <Typography variant="body2">{category.translated_title}</Typography>
+                    </ButtonBase>
+                ))}
+            </div>
+        );
+    };
+
+    const renderPagination = () => {
+        return (
+            <div className={classes.paginationContainer}>
+                <Pagination
+                    count={pagination.count}
+                    color="primary"
+                    onChange={handlePageChange}
+                    size={isMobile ? 'small' : 'large'}
+                />
+            </div>
+        );
+    };
+
+    const renderItems = () => {
+        const itemsPerPage = items.slice(pagination.from, pagination.to);
+
+        return (
+            <div className={classes.itemContainer}>
+                {renderPagination()}
+                <Grid container className={classes.gridContainer}>
+                    {itemsPerPage.map((item, index) => (
+                        <Grid item key={item.identifier} xs={12} sm={6} md={3}>
+                            <ItemTile
+                                title={item.title}
+                                index={index}
+                                image={item.thumbnail}
+                                linkTo={`${HOST}/identifier:${item.identifier}`}
+                                key={item.identifier}
+                            ></ItemTile>
+                        </Grid>
+                    ))}
+                </Grid>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <AppBar className={classes.header}>
+                <Typography variant="h5">{T('itemOverview.title')}</Typography>
+            </AppBar>
+            <div className={classes.container}>
+                {!!categories.length && renderCategories()}
+                {!!items.length && renderItems()}
+            </div>
+        </>
+    );
+};
+
+ItemOverview.propTypes = {
+    pageSize: PropTypes.number,
+};
+
+ItemOverview.defaultProps = {
+    pageSize: 8,
+};
+
+export default ItemOverview;

package/src/App/Screens.js

@@ -9,6 +9,10 @@ const screens = getConf('screens', {});
 // import base Screens if not replaced in custom project
 // note: require should be used here to avoid importing the screen when it's not used
 
+if (!screens.ItemOverview) {
+    const ItemOverview = require('./Screens/ItemOverview').default;
+    screens.ItemOverview = ItemOverview;
+}
 if (!screens.Configurator) {
     const { ConnectedConfiguratorScreen } = require('./Screens/Configurator/Screen');
     screens.Configurator = ConnectedConfiguratorScreen;

package/src/App/Utils/Request/lazyFetch.js

@@ -0,0 +1,15 @@
+import { pathParams } from './pathParams';
+import Api from '../../../Framework/Api';
+
+export const lazyFetch = async (url, params, fallbackValue) => {
+    try {
+        return await Api.request(pathParams(url, params));
+    } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error(e);
+        if (typeof fallbackValue !== 'undefined') {
+            return fallbackValue;
+        }
+        throw e;
+    }
+};

package/src/App/Utils/Request/pathParams.js

@@ -0,0 +1,8 @@
+export const pathParams = (path, params = {}) => {
+    const keys = Object.keys(params);
+    let result = path;
+    for (let key of keys) {
+        result = result.replace(`{${key}}`, params[key]);
+    }
+    return result;
+};