@configuratorware/configurator-frontendgui 1.31.0 → 1.31.1

package/App/Reducers/Configurator/Actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setSelectedCalculation = exports.switchSelectedAmount = exports.setComment = exports.deleteSelectedAmounts = exports.setSelectedAmounts = exports.deleteSelectedAmount = exports.clearBulkNames = exports.saveBulkNames = exports.setSelectedAmount = exports.loadDesignerData = exports.receiveDesignerData = exports.loadConfiguration = exports.viewOptionDetails = exports.selectMultipleOptions = exports.selectOption = exports.resolveConflicts = exports.loadInitialOptionclassification = exports.fetchInitialConfiguration = exports.setConflictingSwitchoptionData = exports.setOptionclassificationChecked = exports.setCalculationEnabled = exports.setSelectedVariantIdentifier = exports.setStockInformationOption = exports.setLoadIdentifier = exports.setLoadCode = exports.fetchInspirations = exports.fetchClientData = exports.fetchCodesnippets = exports.fetchConfigurationVariants = exports.validateConfiguration = exports.saveConfiguration = exports.fetchOptionDetails = exports.doCalculation = exports.switchOptions = exports.switchOptionsBasic = exports.fetchOptions = exports.fetchConfigurationByCodeAsync = exports.fetchConfigurationByCode = exports.fetchConfiguration = exports.inspectValidationResults = exports.inspectCheckResults = exports.setCustomTitle = exports.receiveInspirations = exports.receiveClientData = exports.fetchConfigurationForDesignerProductPreview = exports.receiveCodesnippets = exports.receiveConfigurationVariants = exports.receiveValidation = exports.receiveSavedConfiguration = exports.clearOptionDetails = exports.receiveOptionDetails = exports.skipNextAutoResolve = exports.setCalculationAutoResolveEnabled = exports.setCalculationErrorsResolved = exports.invalidateCalculation = exports.receiveCalculation = exports.receiveSwitchoptionsresult = exports.receiveOptions = exports.selectOptionclassification = exports.applyVariantAmountPreSelection = exports.setDefaultSelectedVariantIdentifier = exports.deleteMissingVariants = exports.receiveConfiguration = exports.DELETE_SELECTED_AMOUNTS = exports.SET_SELECTED_AMOUNTS = exports.SET_COMMENT = exports.SET_SELECTED_CALCULATION = exports.DELETE_SELECTED_AMOUNT = exports.CLEAR_BULKNAMES = exports.SAVE_BULKNAMES = exports.SWITCH_SELECTED_AMOUNT = exports.SET_SELECTED_AMOUNT = exports.SET_CONFLICTING_SWITCHOPTION_DATA = exports.SET_OPTIONCLASSIFICATION_CHECKED = exports.SET_CALCULATION_AUTO_RESOLVE_ENABLED = exports.SET_CALCULATION_ERRORS_RESOLVED = exports.SET_CALCULATION_ENABLED = exports.SET_SELECTED_VARIANT_IDENTIFIER = exports.SET_STOCK_INFORMATION_OPTION = exports.SET_LOAD_IDENTIFIER = exports.SET_LOAD_CODE = exports.SET_CUSTOM_TITLE = exports.RECEIVE_INSPIRATIONS = exports.RECEIVE_CLIENT_DATA = exports.RECEIVE_CODESNIPPETS = exports.RECEIVE_CONFIGURATIONVARIANTS = exports.RECEIVE_VALIDATION = exports.RECEIVE_SAVEDCONFIGURATION = exports.RECEIVE_OPTIONDETAILS = exports.INVALIDATE_CALCULATION = exports.RECEIVE_CALCULATION = exports.RECEIVE_SWITCHOPTIONSRESULT = exports.RECEIVE_OPTIONS = exports.SELECT_OPTIONCLASSIFICATION = exports.RECEIVE_DESIGNER_DATA = exports.RECEIVE_CONFIGURATION = void 0;
+exports.setSelectedCalculation = exports.switchSelectedAmount = exports.setComment = exports.deleteSelectedAmounts = exports.setSelectedAmounts = exports.deleteSelectedAmount = exports.clearBulkNames = exports.saveBulkNames = exports.setSelectedAmount = exports.loadDesignerData = exports.receiveDesignerData = exports.loadConfiguration = exports.viewOptionDetails = exports.selectMultipleOptions = exports.selectOption = exports.resolveConflicts = exports.loadInitialOptionclassification = exports.fetchInitialConfiguration = exports.setConflictingSwitchoptionData = exports.setOptionclassificationChecked = exports.setCalculationEnabled = exports.setSelectedVariantIdentifier = exports.setStockInformationOption = exports.setLoadIdentifier = exports.setLoadCode = exports.fetchInspirations = exports.fetchClientData = exports.fetchCodesnippets = exports.fetchConfigurationVariants = exports.validateConfiguration = exports.saveConfiguration = exports.fetchOptionDetails = exports.doCalculation = exports.switchOptions = exports.switchOptionArrays = exports.switchOptionsBasic = exports.fetchOptions = exports.fetchConfigurationByCodeAsync = exports.fetchConfigurationByCode = exports.fetchConfiguration = exports.inspectValidationResults = exports.inspectCheckResults = exports.setCustomTitle = exports.receiveInspirations = exports.receiveClientData = exports.fetchConfigurationForDesignerProductPreview = exports.receiveCodesnippets = exports.receiveConfigurationVariants = exports.receiveValidation = exports.receiveSavedConfiguration = exports.clearOptionDetails = exports.receiveOptionDetails = exports.skipNextAutoResolve = exports.setCalculationAutoResolveEnabled = exports.setCalculationErrorsResolved = exports.invalidateCalculation = exports.receiveCalculation = exports.receiveSwitchoptionsresult = exports.receiveOptions = exports.selectOptionclassification = exports.applyVariantAmountPreSelection = exports.setDefaultSelectedVariantIdentifier = exports.deleteMissingVariants = exports.receiveConfiguration = exports.DELETE_SELECTED_AMOUNTS = exports.SET_SELECTED_AMOUNTS = exports.SET_COMMENT = exports.SET_SELECTED_CALCULATION = exports.DELETE_SELECTED_AMOUNT = exports.CLEAR_BULKNAMES = exports.SAVE_BULKNAMES = exports.SWITCH_SELECTED_AMOUNT = exports.SET_SELECTED_AMOUNT = exports.SET_CONFLICTING_SWITCHOPTION_DATA = exports.SET_OPTIONCLASSIFICATION_CHECKED = exports.SET_CALCULATION_AUTO_RESOLVE_ENABLED = exports.SET_CALCULATION_ERRORS_RESOLVED = exports.SET_CALCULATION_ENABLED = exports.SET_SELECTED_VARIANT_IDENTIFIER = exports.SET_STOCK_INFORMATION_OPTION = exports.SET_LOAD_IDENTIFIER = exports.SET_LOAD_CODE = exports.SET_CUSTOM_TITLE = exports.RECEIVE_INSPIRATIONS = exports.RECEIVE_CLIENT_DATA = exports.RECEIVE_CODESNIPPETS = exports.RECEIVE_CONFIGURATIONVARIANTS = exports.RECEIVE_VALIDATION = exports.RECEIVE_SAVEDCONFIGURATION = exports.RECEIVE_OPTIONDETAILS = exports.INVALIDATE_CALCULATION = exports.RECEIVE_CALCULATION = exports.RECEIVE_SWITCHOPTIONSRESULT = exports.RECEIVE_OPTIONS = exports.SELECT_OPTIONCLASSIFICATION = exports.RECEIVE_DESIGNER_DATA = exports.RECEIVE_CONFIGURATION = void 0;
 
 var apiActions = _interopRequireWildcard(require("../Actions"));
 
@@ -57,9 +57,17 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 _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); }
+
 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 _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); }
+function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
@@ -745,7 +753,7 @@ var fetchOptions = function fetchOptions(itemidentifier, optionclassification, c
 
 exports.fetchOptions = fetchOptions;
 
-var switchOptionsBasic = function switchOptionsBasic(configuration, switchedOptions) {
+var switchOptionsBasic = function switchOptionsBasic(configuration, switchedoptions) {
   var noCheck = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var config = {};
 
@@ -757,7 +765,7 @@ var switchOptionsBasic = function switchOptionsBasic(configuration, switchedOpti
 
   return apiActions.postData('configuration/switchoption', {
     configuration: configuration,
-    switchedOptions: switchedOptions
+    switchedoptions: switchedoptions
   }, function (data) {
     return {
       // dummy receiver
@@ -769,12 +777,65 @@ var switchOptionsBasic = function switchOptionsBasic(configuration, switchedOpti
 
 exports.switchOptionsBasic = switchOptionsBasic;
 
+var switchOptionArrays = function switchOptionArrays(configuration, switchOptionData) {
+  var noCheck = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  return function (dispatch) {
+    var switchedoptions = {};
+    var afterSwitch = [];
+
+    for (var componentIdentifier in switchOptionData) {
+      if ((0, _lodash.isArray)(switchOptionData[componentIdentifier])) {
+        var _switchOptionData$com = _toArray(switchOptionData[componentIdentifier]),
+            firstOption = _switchOptionData$com[0],
+            otherOptions = _switchOptionData$com.slice(1);
+
+        switchedoptions[componentIdentifier] = firstOption;
+
+        if (otherOptions.length > 0) {
+          var _iterator2 = _createForOfIteratorHelper(otherOptions),
+              _step2;
+
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var optionData = _step2.value;
+              afterSwitch.push(_defineProperty({}, componentIdentifier, optionData));
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        }
+      } else {
+        switchedoptions[componentIdentifier] = switchOptionData[componentIdentifier];
+      }
+    }
+
+    var p = dispatch(switchOptionsBasic(configuration, switchedoptions, noCheck));
+
+    var _loop = function _loop() {
+      var switchOption = _afterSwitch[_i];
+      p = p.then(function (action) {
+        return dispatch(switchOptionsBasic(action.data, switchOption, noCheck));
+      });
+    };
+
+    for (var _i = 0, _afterSwitch = afterSwitch; _i < _afterSwitch.length; _i++) {
+      _loop();
+    }
+
+    return p;
+  };
+};
+
+exports.switchOptionArrays = switchOptionArrays;
+
 var switchOptions = function switchOptions(configuration, switchOptionData) {
   var noCheck = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var refreshOptions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var setChecked = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return function (dispatch) {
-    return dispatch(switchOptionsBasic(configuration, switchOptionData, noCheck)).then(function (action) {
+    return dispatch(switchOptionArrays(configuration, switchOptionData, noCheck)).then(function (action) {
       var extraData = {
         switchOptionData: switchOptionData,
         noCheck: noCheck,
@@ -999,12 +1060,12 @@ var resolveConflicts = function resolveConflicts() {
     if ((0, _lodash.isArray)(incompatibilityCheckResults.check_results)) {
       dispatch(setCalculationEnabled(false)); // disable calculation while waiting for all options to be switched
 
-      var _iterator2 = _createForOfIteratorHelper(incompatibilityCheckResults.check_results),
-          _step2;
+      var _iterator3 = _createForOfIteratorHelper(incompatibilityCheckResults.check_results),
+          _step3;
 
       try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var result = _step2.value;
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var result = _step3.value;
 
           if (result.status === false) {
             (function () {
@@ -1014,19 +1075,19 @@ var resolveConflicts = function resolveConflicts() {
               if (switchOptionsData) {
                 if (p) {
                   p = p.then(function (action) {
-                    return dispatch(switchOptionsBasic(action.data, switchOptionsData, true));
+                    return dispatch(switchOptionArrays(action.data, switchOptionsData, true));
                   });
                 } else {
-                  p = dispatch(switchOptionsBasic(configuration, switchOptionsData, true));
+                  p = dispatch(switchOptionArrays(configuration, switchOptionsData, true));
                 }
               }
             })();
           }
         }
       } catch (err) {
-        _iterator2.e(err);
+        _iterator3.e(err);
       } finally {
-        _iterator2.f();
+        _iterator3.f();
       }
 
       if (p) {
@@ -1099,26 +1160,26 @@ var selectMultipleOptions = function selectMultipleOptions(optionsList) {
     var configuration = (0, _Selectors.getConfiguration)((0, _Selectors.getConfigurator)(getState()));
     var switchOptionData = {};
 
-    var _iterator3 = _createForOfIteratorHelper(optionsList),
-        _step3;
+    var _iterator4 = _createForOfIteratorHelper(optionsList),
+        _step4;
 
     try {
-      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-        var component = _step3.value;
+      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+        var component = _step4.value;
         switchOptionData[component.identifier] = component.selectedoptions.map(function (_ref5) {
           var identifier = _ref5.identifier,
               amount = _ref5.amount;
           return {
             identifier: identifier,
-            amount: typeof amount === 'undefined' ? 1 : amount,
+            amount: amount || 1,
             check_results: null
           };
         });
       }
     } catch (err) {
-      _iterator3.e(err);
+      _iterator4.e(err);
     } finally {
-      _iterator3.f();
+      _iterator4.f();
     }
 
     return dispatch(switchOptions(configuration, switchOptionData, false, false, true));

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();
+});

package/App/{Shared/Components/AcceptPrivacy/index.js → Screens/Configurator/Containers/DesignApproval.js}

@@ -9,21 +9,13 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styles = require("@material-ui/core/styles");
-
-var _i18n = require("../../../../Framework/i18n");
-
-var _withWidth = _interopRequireDefault(require("@material-ui/core/withWidth/withWidth"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
-
-var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormControlLabel"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Checkbox = _interopRequireDefault(require("@material-ui/core/Checkbox"));
+var _Selectors = require("../../../Reducers/Configurator/Selectors");
 
-var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));
+var _DesignApproval = _interopRequireDefault(require("../Components/DesignApproval"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ComponentContainer = require("../../../../Framework/ComponentContainer");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -49,88 +41,89 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 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) {
-  return {
-    checkboxLabel: _defineProperty({
-      fontSize: 15,
-      paddingLeft: 15,
-      paddingBottom: 12
-    }, theme.breakpoints.down('xs'), {
-      paddingLeft: 12
-    }),
-    checkbox: {
-      alignSelf: 'flex-start',
-      top: -10
-    },
-    formHelperText: {
-      marginLeft: 45,
-      marginBottom: 15
-    }
-  };
-};
+var DesignApprovalContainer = /*#__PURE__*/function (_React$Component) {
+  _inherits(DesignApprovalContainer, _React$Component);
+
+  var _super = _createSuper(DesignApprovalContainer);
 
-var AcceptPrivacy = /*#__PURE__*/function (_React$Component) {
-  _inherits(AcceptPrivacy, _React$Component);
+  function DesignApprovalContainer(props) {
+    var _this;
 
-  var _super = _createSuper(AcceptPrivacy);
+    _classCallCheck(this, DesignApprovalContainer);
 
-  function AcceptPrivacy() {
-    _classCallCheck(this, AcceptPrivacy);
+    _this = _super.call(this, props);
 
-    return _super.apply(this, arguments);
+    _defineProperty(_assertThisInitialized(_this), "handleApprovalChange", function (checked) {
+      _this.setState({
+        approval: {
+          checked: checked,
+          error: false
+        }
+      });
+    });
+
+    _this.state = {
+      approval: {
+        checked: false,
+        error: false
+      }
+    };
+    return _this;
   }
 
-  _createClass(AcceptPrivacy, [{
+  _createClass(DesignApprovalContainer, [{
+    key: "validate",
+    value: function validate() {
+      var checked = this.state.approval.checked;
+
+      if (checked) {
+        return true;
+      }
+
+      this.setState({
+        approval: {
+          checked: checked,
+          error: true
+        }
+      });
+      return false;
+    }
+  }, {
     key: "render",
     value: function render() {
+      var approval = this.state.approval;
       var _this$props = this.props,
-          classes = _this$props.classes,
-          handleChangeCheckboxApproval = _this$props.handleChangeCheckboxApproval,
-          approval = _this$props.approval,
-          dataPrivacyLink = _this$props.dataPrivacyLink;
-      var privacyLink = "<a href=\"".concat(dataPrivacyLink, "\"\n                              target=\"_blank\">").concat((0, _i18n.t)('receiveOfferForm.privacyLinkLabel'), "</a>");
-      var privacyNotice = (0, _i18n.t)('receiveOfferForm.privacyNotice', {
-        privacyLink: privacyLink
+          termsAndConditionsLink = _this$props.termsAndConditionsLink,
+          DesignApprovalComponent = _this$props.DesignApprovalComponent;
+      return /*#__PURE__*/_react["default"].createElement(DesignApprovalComponent, {
+        checked: approval.checked,
+        error: approval.error,
+        link: termsAndConditionsLink,
+        onChange: this.handleApprovalChange
       });
-      return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        container: true
-      }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-        item: true,
-        xs: 12
-      }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
-        className: classes.checkboxLabel,
-        control: /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
-          className: classes.checkbox,
-          name: "dataPrivacyAccepted",
-          checked: approval.value,
-          onChange: handleChangeCheckboxApproval,
-          color: "primary"
-        }),
-        label: /*#__PURE__*/_react["default"].createElement("span", {
-          dangerouslySetInnerHTML: {
-            __html: privacyNotice
-          }
-        })
-      }), approval.error && /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], {
-        error: true,
-        className: classes.formHelperText
-      }, (0, _i18n.t)('receiveOfferForm.selectionError'))));
     }
   }]);
 
-  return AcceptPrivacy;
+  return DesignApprovalContainer;
 }(_react["default"].Component);
 
-_defineProperty(AcceptPrivacy, "propTypes", {
-  classes: _propTypes["default"].object,
-  width: _propTypes["default"].string,
-  handleChangeCheckboxApproval: _propTypes["default"].func,
-  approval: _propTypes["default"].object,
-  dataPrivacyLink: _propTypes["default"].string
+_defineProperty(DesignApprovalContainer, "propTypes", {
+  termsAndConditionsLink: _propTypes["default"].string,
+  DesignApprovalComponent: _propTypes["default"].func
 });
 
-var _default = (0, _withWidth["default"])()((0, _styles.withStyles)(styles, {
-  name: 'AcceptPrivacy'
-})(AcceptPrivacy));
+_defineProperty(DesignApprovalContainer, "defaultProps", {
+  DesignApprovalComponent: _DesignApproval["default"]
+});
+
+var mapStateToProps = function mapStateToProps(_ref) {
+  var configurator = _ref.configurator;
+  return {
+    Component: DesignApprovalContainer,
+    termsAndConditionsLink: (0, _Selectors.getClientTexts)(configurator).termsAndConditionsLink
+  };
+};
+
+var _default = (0, _ComponentContainer.containerConnect)(mapStateToProps);
 
 exports["default"] = _default;

package/App/Screens/Configurator/ThemeProvider.js

@@ -267,7 +267,7 @@ var ThemeMixer = function ThemeMixer(_ref) {
       withTheme = _ref.withTheme,
       children = _ref.children;
   var themeMix = (0, _react.useMemo)(function () {
-    var theme = (0, _styles.createTheme)(createThemeFromClientTheme(client && client.theme ? client.theme : {}, customTheme || {}));
+    var theme = (0, _styles.createMuiTheme)(createThemeFromClientTheme(client && client.theme ? client.theme : {}, customTheme || {}));
 
     if (typeof withTheme === 'function') {
       withTheme(theme);

package/App/Shared/Components/AddToBasket/index.js

@@ -78,7 +78,7 @@ var styles = function styles(theme) {
       bottom: 90,
       fontSize: 15,
       right: 200,
-      color: theme.palette.primary.main
+      color: '#ED1C29'
     }, theme.breakpoints.down('xs'), {
       left: 15,
       whiteSpace: 'nowrap'