@configuratorware/configurator-frontendgui 1.28.6 → 1.29.3

package/App/Screens/Configurator/Components/CalculationWidget/index.story.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _storybookState = require("@sambego/storybook-state");
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _PriceList = _interopRequireDefault(require("../../../../Shared/Components/PriceList"));
+
+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 mockedDesignAreas = [{
+  name: 'Auf Schaft',
+  identifier: 'auf_schaft'
+}, {
+  name: 'Auf Clip',
+  identifier: 'auf_clip'
+}, {
+  name: 'Auf Schaft Rückseite',
+  identifier: 'auf_schaft_rueckseite'
+}, {
+  name: 'Druckknopf',
+  identifier: 'druckknopf'
+}];
+var mockedCalculationData = [{
+  key: '100 x ' + (0, _i18n.t)('mockedData.demoPen'),
+  identifier: 'costs',
+  label: (0, _i18n.t)('mockedData.demoPen'),
+  selectable: false,
+  price: '50,00 €'
+}, {
+  key: 'Grundkosten',
+  identifier: 'basiccosts',
+  label: (0, _i18n.t)('mockedData.basicCosts'),
+  selectable: false,
+  price: '29,00 €'
+}, {
+  key: 'Druckkosten',
+  identifier: 'printcosts',
+  label: (0, _i18n.t)('mockedData.printingCosts'),
+  selectable: false,
+  price: '44,00 €'
+}, {
+  key: 'Profi-Datencheck',
+  identifier: 'datacheck',
+  label: (0, _i18n.t)('mockedData.professionalCheck'),
+  selectable: true,
+  selectet: false,
+  price: '10,00 €'
+}];
+var designProductionList = [{
+  name: (0, _i18n.t)('mockedData.print'),
+  identifier: 'Druck'
+}, {
+  name: (0, _i18n.t)('mockedData.embossing'),
+  identifier: 'Prägung'
+}, {
+  name: (0, _i18n.t)('mockedData.engraving'),
+  identifier: 'Gravur'
+}];
+var selectedColorAmountList = [{
+  name: '1 ' + (0, _i18n.t)('mockedData.color'),
+  identifier: '1 farbig'
+}, {
+  name: '2 ' + (0, _i18n.t)('mockedData.colors'),
+  identifier: '2 farbig'
+}, {
+  name: '3 ' + (0, _i18n.t)('mockedData.colors'),
+  identifier: '3 farbig'
+}];
+var store = new _storybookState.Store({
+  amount: '100',
+  priceData: 'mockedCalculationData',
+  mockedCalculationData: mockedCalculationData,
+  designProductionList: designProductionList,
+  selectedColorAmountList: selectedColorAmountList,
+  selectedColorAmount: '1 farbig',
+  designProduction: 'Druck'
+});
+
+function handleChangeAmount(event) {
+  store.set({
+    amount: event.target.value
+  });
+}
+
+var onSelectableChanged = function onSelectableChanged(mockedCalculationData) {
+  return function (key, newSelected) {
+    var nextData = mockedCalculationData.map(function (currentElement) {
+      if (currentElement.key === key) {
+        return _objectSpread(_objectSpread({}, currentElement), {}, {
+          selected: newSelected,
+          price: newSelected ? '10,00 €' : '0,00 €'
+        });
+      }
+
+      return currentElement;
+    });
+    store.set({
+      mockedCalculationData: nextData
+    });
+  };
+};
+
+function handleChangeDesignProductionMethod(event) {
+  store.set({
+    designProduction: event.target.value
+  });
+}
+
+function handleChangeSelectedColorAmount(event) {
+  store.set({
+    selectedColorAmount: event.target.value
+  });
+}
+
+(0, _react2.storiesOf)('CalculationWidget', module).add('designCalculationScreen', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      colorAmountList: state.selectedColorAmountList,
+      currentSelectedColorAmount: state.selectedColorAmount,
+      designProductionMethods: state.designProductionList,
+      currentDesignProductionMethod: state.designProduction,
+      handleChangeDesignProductionMethod: handleChangeDesignProductionMethod,
+      handleChangeSelectedColorAmount: handleChangeSelectedColorAmount,
+      designAreas: mockedDesignAreas,
+      amountValue: state.amount,
+      onChangeAmount: handleChangeAmount,
+      calculationData: state.mockedCalculationData,
+      onSelectableChanged: onSelectableChanged(state.mockedCalculationData),
+      totalPrice: '123,00 €',
+      priceListComponent: /*#__PURE__*/_react["default"].createElement(_PriceList["default"], {
+        amount: state.amount,
+        list: state.mockedCalculationData,
+        totalPrice: '123,00€',
+        taxNote: (0, _i18n.t)('amountPrice.vatNotice'),
+        onSelectableChanged: onSelectableChanged(state.mockedCalculationData)
+      })
+    });
+  });
+});

package/App/Screens/Configurator/Components/CalculationWidget/index.test.js

@@ -0,0 +1,142 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodash = require("lodash");
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+
+var _core = require("@material-ui/core");
+
+var _ServiceLocator = _interopRequireDefault(require("../../../../ServiceLocator"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 designAreas = [{
+  name: 'Auf Schaft',
+  identifier: 'auf_schaft'
+}, {
+  name: 'Auf Clip',
+  identifier: 'auf_clip'
+}, {
+  name: 'Auf Schaft Rückseite',
+  identifier: 'auf_schaft_rueckseite'
+}, {
+  name: 'Druckknopf',
+  identifier: 'druckknopf'
+}];
+var productionMethod = [{
+  name: 'Druck',
+  identifier: 'Druck'
+}, {
+  name: 'Prägung',
+  identifier: 'Prägung'
+}, {
+  name: 'Gravur',
+  identifier: 'Gravur'
+}];
+var colorAmounts = [{
+  name: '1 farbig',
+  identifier: '1 farbig'
+}, {
+  name: '2 farbig',
+  identifier: '2 farbig'
+}, {
+  name: '3 farbig',
+  identifier: '3 farbig'
+}];
+it('renders correctly', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    designAreas: designAreas,
+    amountValue: 100,
+    designProductionMethods: productionMethod,
+    colorAmountList: colorAmounts,
+    onChangeAmount: _lodash.noop,
+    handleChangeDesignProductionMethod: _lodash.noop,
+    handleChangeSelectedColorAmount: _lodash.noop
+  }));
+  expect(tree).toMatchSnapshot();
+});
+/*Test doesn't run and should be fixed in a separate task*/
+
+it.skip('tests if the amount is updated', function () {
+  var onChangeHandler = jest.fn();
+  var tree = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    designAreas: designAreas,
+    amountValue: 103,
+    designProductionMethods: productionMethod,
+    colorAmountList: colorAmounts,
+    onChangeAmount: onChangeHandler,
+    handleChangeDesignProductionMethod: _lodash.noop,
+    handleChangeSelectedColorAmount: _lodash.noop
+  }));
+  var input = tree.find('TextField').find('input');
+  input.simulate('change');
+  expect(onChangeHandler.mock.calls[0][0].target.value).toEqual('103');
+});
+it('returns a callback for design production methods change', function () {
+  var _class, _temp;
+
+  var onChangeHandler = jest.fn();
+  var analyticsSrvc = new (_temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    _defineProperty(this, "triggerEvent", jest.fn());
+  }, _defineProperty(_class, "serviceName", 'AnalyticsService'), _temp)();
+
+  _ServiceLocator["default"].provide(analyticsSrvc);
+
+  var tree = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    designAreas: designAreas,
+    amountValue: 100,
+    designProductionMethods: productionMethod,
+    colorAmountList: colorAmounts,
+    onChangeAmount: _lodash.noop,
+    handleChangeDesignProductionMethod: onChangeHandler,
+    handleChangeSelectedColorAmount: _lodash.noop
+  })); //opens expansion panel
+
+  var select = tree.find(_core.ExpansionPanel).find(_core.ExpansionPanelDetails).at(0).find(_core.Select).at(0);
+  select.simulate('click'); //opens Dropdown
+
+  var button = select.find('[role="button"]');
+  button.simulate('mousedown', {
+    button: 0
+  }); //change menuItem
+
+  var option = tree.find(_MenuItem["default"]).at(2);
+  option.simulate('click');
+  expect(onChangeHandler).toHaveBeenCalled();
+});
+it('returns a callback for handleChangeSelectedColorAmount', function () {
+  var onChangeHandler = jest.fn();
+  var tree = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    designAreas: designAreas,
+    amountValue: 100,
+    designProductionMethods: productionMethod,
+    colorAmountList: colorAmounts,
+    onChangeAmount: _lodash.noop,
+    handleChangeDesignProductionMethod: _lodash.noop,
+    handleChangeSelectedColorAmount: onChangeHandler
+  })); //opens expansion panel
+
+  var select = tree.find(_core.ExpansionPanel).find(_core.ExpansionPanelDetails).at(0).find(_core.Select).at(1);
+  select.simulate('click'); //opens Dropdown
+
+  var button = select.find('[role="button"]');
+  button.simulate('mousedown', {
+    button: 0
+  }); //change menuItem
+
+  var option = tree.find(_MenuItem["default"]).at(2);
+  option.simulate('click');
+  expect(onChangeHandler).toHaveBeenCalled();
+});

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

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ConfigurationModeSwitch = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+var _core = require("@material-ui/core");
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _AnalyticsWrapper = _interopRequireDefault(require("../../../../Shared/Components/Analytics/AnalyticsWrapper"));
+
+var _excluded = ["configurationModeOptions", "onChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _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) {
+  return {
+    root: {
+      textTransform: 'none',
+      fontSize: 15
+    },
+    outlined: {
+      boxShadow: theme.shadows[2],
+      '&:hover': {
+        boxShadow: theme.shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: theme.shadows[2]
+        }
+      }
+    },
+    label: {}
+  };
+};
+
+var ConfigurationModeSwitch = function ConfigurationModeSwitch(_ref) {
+  var configurationModeOptions = _ref.configurationModeOptions,
+      onChange = _ref.onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var modeOption = configurationModeOptions[0];
+  return configurationModeOptions.length && /*#__PURE__*/_react["default"].createElement(_AnalyticsWrapper["default"], {
+    targetId: "configuration_mode_switch",
+    data: modeOption
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], _extends({
+    variant: "outlined",
+    fullWidth: true,
+    size: "medium",
+    onClick: function onClick() {
+      return onChange(modeOption);
+    }
+  }, props), (0, _i18n.t)("configurationModeSwitch.options.".concat(modeOption))));
+};
+
+exports.ConfigurationModeSwitch = ConfigurationModeSwitch;
+ConfigurationModeSwitch.propTypes = {
+  configurationModeOptions: _propTypes["default"].array,
+  onChange: _propTypes["default"].func.isRequired
+};
+ConfigurationModeSwitch.defaultProps = {
+  configurationModeOptions: []
+};
+
+var _default = (0, _core.withStyles)(styles, {
+  name: 'ConfigurationModeSwitch'
+})(ConfigurationModeSwitch);
+
+exports["default"] = _default;

package/App/Screens/Configurator/Components/ConfigurationModeSwitch/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ConfigurationModeSwitch["default"];
+  }
+});
+
+var _ConfigurationModeSwitch = _interopRequireDefault(require("./ConfigurationModeSwitch"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/App/Screens/Configurator/Components/Confirm/index.js

@@ -0,0 +1,105 @@
+"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 = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
+
+var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogContent"));
+
+var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+require("./Styles.scss");
+
+var _CustomDialog = _interopRequireDefault(require("../../../../../Shared/Components/CustomDialog"));
+
+var _MainButton = _interopRequireDefault(require("../../../../../Shared/Components/MainButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 Confirm = /*#__PURE__*/function (_React$Component) {
+  _inherits(Confirm, _React$Component);
+
+  var _super = _createSuper(Confirm);
+
+  function Confirm() {
+    _classCallCheck(this, Confirm);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Confirm, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          confirm = _this$props.confirm,
+          onOk = _this$props.onOk,
+          onCancel = _this$props.onCancel;
+      var message = confirm && confirm.message ? confirm.message : '';
+      var okLabel = confirm && confirm.okLabel ? confirm.okLabel : '';
+      var cancelLabel = confirm && confirm.cancelLabel ? confirm.cancelLabel : '';
+      return /*#__PURE__*/_react["default"].createElement(_CustomDialog["default"], {
+        open: confirm !== null,
+        onClose: onCancel,
+        "aria-labelledby": "alert-dialog-title",
+        "aria-describedby": "alert-dialog-description",
+        dialogTitle: (0, _i18n.t)('errorDialogTitle'),
+        onCancel: onCancel
+      }, /*#__PURE__*/_react["default"].createElement(_DialogContent["default"], null, /*#__PURE__*/_react["default"].createElement(_DialogContentText["default"], {
+        id: "alert-dialog-description"
+      }, message)), /*#__PURE__*/_react["default"].createElement(_DialogActions["default"], null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+        onClick: onCancel,
+        variant: "contained"
+      }, cancelLabel), /*#__PURE__*/_react["default"].createElement(_MainButton["default"], {
+        onClick: onOk,
+        variant: "contained"
+      }, okLabel)));
+    }
+  }]);
+
+  return Confirm;
+}(_react["default"].Component);
+
+_defineProperty(Confirm, "propTypes", {
+  confirm: _propTypes["default"].object,
+  onOk: _propTypes["default"].func,
+  onCancel: _propTypes["default"].func,
+  classes: _propTypes["default"].object
+});
+
+var _default = Confirm;
+exports["default"] = _default;

package/App/Screens/Configurator/Components/DesignApproval/index.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _core = require("@material-ui/core");
+
+var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+
+var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+
+var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+
+var _i18n = require("../../../../../Framework/i18n");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var styles = function styles(theme) {
+  return {
+    link: {
+      '& a': {
+        color: theme.palette.primary.main
+      }
+    }
+  };
+};
+
+var DesignApproval = function DesignApproval(props) {
+  var handleChange = function handleChange(event) {
+    var onChange = props.onChange;
+    onChange(event.target.checked);
+  };
+
+  var classes = props.classes,
+      checked = props.checked,
+      error = props.error,
+      link = props.link;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
+    control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      name: "approval",
+      checked: checked,
+      onChange: handleChange,
+      color: "primary"
+    }),
+    label: /*#__PURE__*/_react["default"].createElement("div", {
+      className: classes.link,
+      dangerouslySetInnerHTML: {
+        __html: (0, _i18n.t)('receiveOfferForm.approval', {
+          link: link
+        })
+      }
+    })
+  }), error && /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], {
+    error: true
+  }, (0, _i18n.t)('receiveOfferForm.errors.notApproved')));
+};
+
+DesignApproval.propTypes = {
+  classes: _propTypes["default"].object,
+  onChange: _propTypes["default"].func,
+  checked: _propTypes["default"].bool,
+  error: _propTypes["default"].bool,
+  link: _propTypes["default"].string
+};
+
+var _default = (0, _core.withStyles)(styles, {
+  name: 'DesignApproval'
+})(DesignApproval);
+
+exports["default"] = _default;

package/App/Screens/Configurator/Components/DesignApproval/index.story.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+(0, _react2.storiesOf)('DesignApproval', module).add('without error', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    checked: true,
+    error: false,
+    link: 'fakeLink',
+    onChange: _noop["default"]
+  });
+}).add('with error', function () {
+  return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    checked: false,
+    error: true,
+    link: 'fakeLink',
+    onChange: _noop["default"]
+  });
+});

package/App/Screens/Configurator/Components/DesignApproval/index.test.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _noop = _interopRequireDefault(require("lodash/noop"));
+
+var _enzyme = require("enzyme");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/* eslint-env jest */
+it('renders correctly without error', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    checked: true,
+    error: false,
+    link: 'fakeLink',
+    onChange: _noop["default"]
+  }));
+  expect(tree).toMatchSnapshot();
+});
+it('renders correctly with error', function () {
+  var tree = (0, _enzyme.render)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    checked: false,
+    error: true,
+    link: 'fakeLink',
+    onChange: _noop["default"]
+  }));
+  expect(tree).toMatchSnapshot();
+});