@configuratorware/configurator-frontendgui 1.31.0 → 1.31.1

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

@@ -71,8 +71,6 @@ var _LoadingOverlay = _interopRequireDefault(require("../../../../Framework/Comp
 
 var _core = require("@material-ui/core");
 
-var _AcceptPrivacy = _interopRequireDefault(require("../AcceptPrivacy"));
-
 var _excluded = ["onTouchMove"],
     _excluded2 = ["wrapperClass", "renderPriceBox"];
 
@@ -348,8 +346,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
         error: null
       },
       inView: true,
-      showErrors: false,
-      dataPrivacyAccepted: false
+      showErrors: false
     });
 
     _defineProperty(_assertThisInitialized(_this), "receiveOfferFormComponentRef", /*#__PURE__*/_react["default"].createRef());
@@ -391,15 +388,6 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           }
         });
       }
-
-      if (!_this.dataPrivacyApproved()) {
-        _this.setState({
-          dataPrivacyAccepted: {
-            value: false,
-            error: true
-          }
-        });
-      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "requestHasErrors", function () {
@@ -408,7 +396,7 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           displayAcceptDesign = _this$props2.displayAcceptDesign;
       var designApproved = _this.state.approval.value;
 
-      if (bulkNameErrors && bulkNameErrors.length > 0 || displayAcceptDesign && !designApproved || !_this.dataPrivacyApproved()) {
+      if (bulkNameErrors && bulkNameErrors.length > 0 || displayAcceptDesign && !designApproved) {
         return true;
       }
 
@@ -425,15 +413,6 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "dataPrivacyApproved", function () {
-      var _this$props3 = _this.props,
-          showReceiveOfferForm = _this$props3.showReceiveOfferForm,
-          clientTexts = _this$props3.clientTexts;
-      var dataPrivacyLink = clientTexts.dataPrivacyLink;
-      var dataPrivacyApproved = _this.state.dataPrivacyAccepted.value;
-      return showReceiveOfferForm && dataPrivacyApproved && dataPrivacyLink;
-    });
-
     _defineProperty(_assertThisInitialized(_this), "handleTouchMove", function (evt) {
       var dialogContent = _this.dialogContentRef.current;
       evt.preventDefault();
@@ -575,18 +554,18 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderDefaultPriceBox", function () {
-      var _this$props4 = _this.props,
-          classes = _this$props4.classes,
-          amount = _this$props4.amount,
-          boxed = _this$props4.boxed,
-          priceFormatted = _this$props4.priceFormatted,
-          hidePrices = _this$props4.hidePrices,
-          hidePieces = _this$props4.hidePieces,
-          vatNotice = _this$props4.vatNotice,
-          showReceiveOfferForm = _this$props4.showReceiveOfferForm,
-          showCallToAction = _this$props4.showCallToAction,
-          showConfigurationModeSwitch = _this$props4.showConfigurationModeSwitch,
-          ConfigurationModeSwitchComponent = _this$props4.ConfigurationModeSwitchComponent;
+      var _this$props3 = _this.props,
+          classes = _this$props3.classes,
+          amount = _this$props3.amount,
+          boxed = _this$props3.boxed,
+          priceFormatted = _this$props3.priceFormatted,
+          hidePrices = _this$props3.hidePrices,
+          hidePieces = _this$props3.hidePieces,
+          vatNotice = _this$props3.vatNotice,
+          showReceiveOfferForm = _this$props3.showReceiveOfferForm,
+          showCallToAction = _this$props3.showCallToAction,
+          showConfigurationModeSwitch = _this$props3.showConfigurationModeSwitch,
+          ConfigurationModeSwitchComponent = _this$props3.ConfigurationModeSwitchComponent;
       var boxStyle = boxed ? classes.card : classes.cardUnboxed;
       return /*#__PURE__*/_react["default"].createElement(_Card["default"], {
         className: (0, _clsx["default"])(boxStyle, (0, _customClassName["default"])('cta-box'))
@@ -674,9 +653,9 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
   _createClass(AmountPrice, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props5 = this.props,
-          error = _this$props5.error,
-          bulkNameErrors = _this$props5.bulkNameErrors;
+      var _this$props4 = this.props,
+          error = _this$props4.error,
+          bulkNameErrors = _this$props4.bulkNameErrors;
 
       if (error && !(0, _isEqual["default"])(error, prevProps.error) && this.dialogContentRef.current) {
         this.dialogContentRef.current.scrollTo(0, 0);
@@ -716,35 +695,32 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           approval = _this$state.approval,
           inView = _this$state.inView,
           showErrors = _this$state.showErrors,
-          bulkNameErrors = _this$state.bulkNameErrors,
-          dataPrivacyAccepted = _this$state.dataPrivacyAccepted;
-      var _this$props6 = this.props,
-          amount = _this$props6.amount,
-          priceList = _this$props6.priceList,
-          priceFormatted = _this$props6.priceFormatted,
-          onSelectableChanged = _this$props6.onSelectableChanged,
-          showProductVariants = _this$props6.showProductVariants,
-          ProductVariantComponent = _this$props6.ProductVariantComponent,
-          error = _this$props6.error,
-          width = _this$props6.width,
-          hidePrices = _this$props6.hidePrices,
-          title = _this$props6.title,
-          classes = _this$props6.classes,
-          showReceiveOfferForm = _this$props6.showReceiveOfferForm,
-          vatNotice = _this$props6.vatNotice,
-          clientTexts = _this$props6.clientTexts,
-          displayAcceptDesign = _this$props6.displayAcceptDesign,
-          notifications = _this$props6.notifications,
-          showCallToAction = _this$props6.showCallToAction,
-          ReceiveOfferFormComponent = _this$props6.ReceiveOfferFormComponent,
-          AcceptDesignComponent = _this$props6.AcceptDesignComponent,
-          PriceOverviewComponent = _this$props6.PriceOverviewComponent,
-          NotificationComponent = _this$props6.NotificationComponent,
-          PriceListComponent = _this$props6.PriceListComponent,
-          AddToCartComponent = _this$props6.AddToCartComponent,
-          AcceptPrivacyComponent = _this$props6.AcceptPrivacyComponent;
-      var termsAndConditionsLink = clientTexts.termsAndConditionsLink,
-          dataPrivacyLink = clientTexts.dataPrivacyLink;
+          bulkNameErrors = _this$state.bulkNameErrors;
+      var _this$props5 = this.props,
+          amount = _this$props5.amount,
+          priceList = _this$props5.priceList,
+          priceFormatted = _this$props5.priceFormatted,
+          onSelectableChanged = _this$props5.onSelectableChanged,
+          showProductVariants = _this$props5.showProductVariants,
+          ProductVariantComponent = _this$props5.ProductVariantComponent,
+          error = _this$props5.error,
+          width = _this$props5.width,
+          hidePrices = _this$props5.hidePrices,
+          title = _this$props5.title,
+          classes = _this$props5.classes,
+          showReceiveOfferForm = _this$props5.showReceiveOfferForm,
+          vatNotice = _this$props5.vatNotice,
+          clientTexts = _this$props5.clientTexts,
+          displayAcceptDesign = _this$props5.displayAcceptDesign,
+          notifications = _this$props5.notifications,
+          showCallToAction = _this$props5.showCallToAction,
+          ReceiveOfferFormComponent = _this$props5.ReceiveOfferFormComponent,
+          AcceptDesignComponent = _this$props5.AcceptDesignComponent,
+          PriceOverviewComponent = _this$props5.PriceOverviewComponent,
+          NotificationComponent = _this$props5.NotificationComponent,
+          PriceListComponent = _this$props5.PriceListComponent,
+          AddToCartComponent = _this$props5.AddToCartComponent;
+      var termsAndConditionsLink = clientTexts.termsAndConditionsLink;
       var mergedNotifications = _toConsumableArray(notifications) || [];
 
       if (showErrors && bulkNameErrors && bulkNameErrors.length > 0) {
@@ -809,14 +785,6 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
           noteLabel: (0, _i18n.t)('amountPrice.notice'),
           handleChange: this.handleBasketNoticeChange
         }) : null,
-        acceptDataPrivacyComponent: showReceiveOfferForm && dataPrivacyLink ? /*#__PURE__*/_react["default"].createElement(AcceptPrivacyComponent, {
-          dataPrivacyLink: dataPrivacyLink,
-          displayAcceptDesign: true,
-          handleChangeCheckboxApproval: this.handleChange,
-          approval: dataPrivacyAccepted,
-          closeProductOverviewDialog: this.handleClose,
-          displayNote: false
-        }) : null,
         notificationComponent: mergedNotifications.map(function (_ref4, key) {
           var message = _ref4.message,
               level = _ref4.level,
@@ -871,10 +839,10 @@ var AmountPrice = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props7 = this.props,
-          wrapperClass = _this$props7.wrapperClass,
-          renderPriceBox = _this$props7.renderPriceBox,
-          props = _objectWithoutProperties(_this$props7, _excluded2);
+      var _this$props6 = this.props,
+          wrapperClass = _this$props6.wrapperClass,
+          renderPriceBox = _this$props6.renderPriceBox,
+          props = _objectWithoutProperties(_this$props6, _excluded2);
 
       var showPriceOverview = this.state.showPriceOverview;
       var openPriceOverview = this.openPriceOverview,
@@ -931,8 +899,7 @@ _defineProperty(AmountPrice, "propTypes", {
   PriceListComponent: _propTypes["default"].elementType,
   AddToCartComponent: _propTypes["default"].elementType,
   renderPriceBox: _propTypes["default"].func,
-  userComment: _propTypes["default"].string,
-  AcceptPrivacyComponent: _propTypes["default"].elementType
+  userComment: _propTypes["default"].string
 });
 
 _defineProperty(AmountPrice, "defaultProps", {
@@ -948,8 +915,7 @@ _defineProperty(AmountPrice, "defaultProps", {
   PriceOverviewComponent: _PriceOverview["default"],
   NotificationComponent: _Notification["default"],
   PriceListComponent: _PriceList["default"],
-  AddToCartComponent: _AddToBasket["default"],
-  AcceptPrivacyComponent: _AcceptPrivacy["default"]
+  AddToCartComponent: _AddToBasket["default"]
 });
 
 var _default = (0, _withWidth["default"])()((0, _styles.withStyles)(styles, {

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

@@ -97,8 +97,7 @@ var PriceOverview = /*#__PURE__*/function (_React$Component) {
           receiveOfferFormComponent = _this$props.receiveOfferFormComponent,
           showReceiveOfferForm = _this$props.showReceiveOfferForm,
           amount = _this$props.amount,
-          acceptDesignComponent = _this$props.acceptDesignComponent,
-          acceptDataPrivacyComponent = _this$props.acceptDataPrivacyComponent;
+          acceptDesignComponent = _this$props.acceptDesignComponent;
       return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
@@ -125,7 +124,7 @@ var PriceOverview = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement("b", null, contactData)), receiveOfferFormComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
-      }, acceptDesignComponent, acceptDataPrivacyComponent, amount > 0 && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), priceListComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, acceptDesignComponent, amount > 0 && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), priceListComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12
       }, addToCartComponent && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), addToCartComponent)), !showReceiveOfferForm && /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
@@ -168,8 +167,7 @@ _defineProperty(PriceOverview, "propTypes", {
   receiveOfferFormComponent: _propTypes["default"].element,
   showReceiveOfferForm: _propTypes["default"].bool,
   amount: _propTypes["default"].number,
-  acceptDesignComponent: _propTypes["default"].element,
-  acceptDataPrivacyComponent: _propTypes["default"].element
+  acceptDesignComponent: _propTypes["default"].element
 });
 
 var _default = (0, _styles.withStyles)(styles, {

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

@@ -58,7 +58,7 @@ var styles = function styles(theme) {
       marginTop: 0
     },
     outlinedInput: _defineProperty({
-      padding: 10,
+      padding: 14,
       fontSize: 15
     }, theme.breakpoints.down('xs'), {
       padding: 19
@@ -143,6 +143,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleBlur = _this.handleBlur.bind(_assertThisInitialized(_this));
     _this.setInputRef = _this.setInputRef.bind(_assertThisInitialized(_this));
+    _this.designApprovalRef = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
 
@@ -230,7 +231,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.email'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!email.error,
@@ -255,7 +256,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.name'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!name.error,
@@ -277,7 +278,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.company'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!company.error,
@@ -299,7 +300,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.phonenumber'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!phonenumber.error,
@@ -328,7 +329,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.zip'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!zip.error,
@@ -354,7 +355,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.city'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!city.error,
@@ -376,7 +377,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.street'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!street.error,
@@ -398,7 +399,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.country'),
-        margin: "dense",
+        margin: "normal",
         variant: "outlined",
         fullWidth: true,
         error: !!country.error,

package/App/configuration.js

@@ -31,7 +31,7 @@ var DEVELOPMENT_HOST_INT = 'http://int.configuratorware.local'; // eslint-disabl
 var DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 var hostsByNodeEnv = {
   production: '',
-  development: DEVELOPMENT_HOST_INT,
+  development: DEVELOPMENT_HOST_LOCAL,
   test: ''
 };
 var resourceUrlsByNodeEnv = {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@configuratorware/configurator-frontendgui",
-  "version": "1.31.0",
+  "version": "1.31.1",
   "license": "UNLICENSED",
   "private": false,
   "main": "./index.js",
   "dependencies": {
     "@babel/polyfill": "^7.12.1",
-    "@configuratorware/scripts": "1.31.0",
+    "@configuratorware/scripts": "1.31.1",
     "@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.31.0",
-    "redhotmagma-visualization": "1.31.0",
+    "redhotmagma-graphics-editor": "1.31.1",
+    "redhotmagma-visualization": "1.31.1",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/public/translations/de_DE.json

@@ -158,10 +158,7 @@
     "checkInputsInForm": "Bitte Eingaben im Formular prüfen",
     "sentOk": "Anfrage wurde erfolgreich versandt.",
     "sentError": "Fehler beim Senden der Anfrage.",
-    "sendButton": "Angebot anfordern",
-    "privacyNotice": "Ich willige darin ein, dass die von mir überreichten Informationen und Kontaktdaten dazu verwendet werden, um mit mir anlässlich meiner Kontaktaufnahme in Verbindung zu treten, hierüber zu kommunizieren und meine Anfrage abzuwickeln. Dies gilt insbesondere für die Verwendung der E-Mail-Adresse zum vorgenannten Zweck. Die Einwilligung kann jederzeit mit Wirkung für die Zukunft per E-Mail widerrufen werden. Die Datenschutzerklärung kann %{privacyLink} eingesehen werden.",
-    "privacyLinkLabel": "hier",
-    "selectionError": "Checkbox nicht bestätigt"
+    "sendButton": "Angebot anfordern"
   },
   "acceptDesignScreen": {
     "selectionError": "Checkbox nicht bestätigt",

package/public/translations/en_GB.json

@@ -159,10 +159,7 @@
     "checkInputsInForm": "Please check the form inputs below",
     "sentOk": "Request was successfully sent.",
     "sentError": "Error sending the request.",
-    "sendButton": "Request a quote",
-    "privacyNotice": "I consent to the information and contact details I have provided being used to contact me, to communicate about and to process my request. This applies in particular to the use of the e-mail address for the aforementioned purpose. The consent can be revoked at any time with effect for the future by e-mail. The privacy policy can be viewed %{privacyLink}.",
-    "privacyLinkLabel": "here",
-    "selectionError": "No consent given"
+    "sendButton": "Request a quote"
   },
   "acceptDesignScreen": {
     "checkedSelectionActive": "I have checked all provided data and the design and I approve the configuration",

package/src/App/Reducers/Configurator/Actions.js

@@ -480,14 +480,14 @@ export const fetchOptions = (itemidentifier, optionclassification, configuration
     );
 };
 
-export const switchOptionsBasic = (configuration, switchedOptions, noCheck = false) => {
+export const switchOptionsBasic = (configuration, switchedoptions, noCheck = false) => {
     const config = {};
     if (noCheck) {
         config.params = { nocheck: 1 };
     }
     return apiActions.postData(
         'configuration/switchoption',
-        { configuration, switchedOptions },
+        { configuration, switchedoptions },
         data => ({
             // dummy receiver
             type: 'RECEIVE_SWITCHOPTIONSRESULT_BASIC',
@@ -497,6 +497,37 @@ export const switchOptionsBasic = (configuration, switchedOptions, noCheck = fal
     );
 };
 
+export const switchOptionArrays = (configuration, switchOptionData, noCheck = false) => dispatch => {
+    const switchedoptions = {};
+    const afterSwitch = [];
+
+    for (const componentIdentifier in switchOptionData) {
+        if (isArray(switchOptionData[componentIdentifier])) {
+            const [firstOption, ...otherOptions] = switchOptionData[componentIdentifier];
+
+            switchedoptions[componentIdentifier] = firstOption;
+
+            if (otherOptions.length > 0) {
+                for (let optionData of otherOptions) {
+                    afterSwitch.push({
+                        [componentIdentifier]: optionData,
+                    });
+                }
+            }
+        } else {
+            switchedoptions[componentIdentifier] = switchOptionData[componentIdentifier];
+        }
+    }
+
+    let p = dispatch(switchOptionsBasic(configuration, switchedoptions, noCheck));
+    for (let switchOption of afterSwitch) {
+        p = p.then(action => {
+            return dispatch(switchOptionsBasic(action.data, switchOption, noCheck));
+        });
+    }
+    return p;
+};
+
 export const switchOptions = (
     configuration,
     switchOptionData,
@@ -504,7 +535,7 @@ export const switchOptions = (
     refreshOptions = false,
     setChecked = false
 ) => dispatch => {
-    return dispatch(switchOptionsBasic(configuration, switchOptionData, noCheck)).then(action => {
+    return dispatch(switchOptionArrays(configuration, switchOptionData, noCheck)).then(action => {
         const extraData = { switchOptionData, noCheck, refreshOptions, setChecked };
         return dispatch(receiveSwitchoptionsresult(action.data, extraData));
     });
@@ -670,10 +701,10 @@ export const resolveConflicts = () => (dispatch, getState) => {
                 if (switchOptionsData) {
                     if (p) {
                         p = p.then(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));
                     }
                 }
             }
@@ -750,7 +781,7 @@ export const selectMultipleOptions = optionsList => (dispatch, getState) => {
     for (const component of optionsList) {
         switchOptionData[component.identifier] = component.selectedoptions.map(({ identifier, amount }) => ({
             identifier,
-            amount: typeof amount === 'undefined' ? 1 : amount,
+            amount: amount || 1,
             check_results: null,
         }));
     }

package/src/App/Screens/Configurator/Components/DesignApproval/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly with error 1`] = `
+Array [
+  <label
+    class="MuiFormControlLabel-root"
+  >
+    <span
+      aria-disabled="false"
+      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary MuiIconButton-colorPrimary"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <input
+          class="PrivateSwitchBase-input-5"
+          data-indeterminate="false"
+          name="approval"
+          type="checkbox"
+        />
+        <svg
+          aria-hidden="true"
+          class="MuiSvgIcon-root"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </span>
+    </span>
+    <span
+      class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+    >
+      <div
+        class="DesignApproval-link-1"
+      >
+        receiveOfferForm.approval
+      </div>
+    </span>
+  </label>,
+  <p
+    class="MuiFormHelperText-root Mui-error"
+  >
+    receiveOfferForm.errors.notApproved
+  </p>,
+]
+`;
+
+exports[`renders correctly without error 1`] = `
+<label
+  class="MuiFormControlLabel-root"
+>
+  <span
+    aria-disabled="false"
+    class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-2 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-3 Mui-checked MuiIconButton-colorPrimary"
+  >
+    <span
+      class="MuiIconButton-label"
+    >
+      <input
+        checked=""
+        class="PrivateSwitchBase-input-5"
+        data-indeterminate="false"
+        name="approval"
+        type="checkbox"
+      />
+      <svg
+        aria-hidden="true"
+        class="MuiSvgIcon-root"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+        />
+      </svg>
+    </span>
+  </span>
+  <span
+    class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"
+  >
+    <div
+      class="DesignApproval-link-1"
+    >
+      receiveOfferForm.approval
+    </div>
+  </span>
+</label>
+`;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import { t } from 'Framework/i18n';
+
+const styles = theme => ({
+    link: {
+        '& a': {
+            color: theme.palette.primary.main,
+        },
+    },
+});
+
+const DesignApproval = props => {
+    const handleChange = event => {
+        const { onChange } = props;
+
+        onChange(event.target.checked);
+    };
+
+    const { classes, checked, error, link } = props;
+
+    return (
+        <React.Fragment>
+            <FormControlLabel
+                control={
+                    <Checkbox name="approval" checked={checked} onChange={handleChange} color="primary" />
+                }
+                label={
+                    <div
+                        className={classes.link}
+                        dangerouslySetInnerHTML={{ __html: t('receiveOfferForm.approval', { link }) }}
+                    />
+                }
+            />
+            {error && (
+                <FormHelperText error={true}>{t('receiveOfferForm.errors.notApproved')}</FormHelperText>
+            )}
+        </React.Fragment>
+    );
+};
+
+DesignApproval.propTypes = {
+    classes: PropTypes.object,
+    onChange: PropTypes.func,
+    checked: PropTypes.bool,
+    error: PropTypes.bool,
+    link: PropTypes.string,
+};
+
+export default withStyles(styles, { name: 'DesignApproval' })(DesignApproval);

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { storiesOf } from '@storybook/react';
+import DesignApproval from './index';
+
+storiesOf('DesignApproval', module)
+    .add('without error', () => (
+        <DesignApproval checked={true} error={false} link={'fakeLink'} onChange={noop} />
+    ))
+    .add('with error', () => (
+        <DesignApproval checked={false} error={true} link={'fakeLink'} onChange={noop} />
+    ));

package/src/App/Screens/Configurator/Components/DesignApproval/index.test.jsx

@@ -0,0 +1,17 @@
+/* eslint-env jest */
+import React from 'react';
+import noop from 'lodash/noop';
+import { render } from 'enzyme';
+import DesignApproval from './index';
+
+it('renders correctly without error', () => {
+    const tree = render(<DesignApproval checked={true} error={false} link={'fakeLink'} onChange={noop} />);
+
+    expect(tree).toMatchSnapshot();
+});
+
+it('renders correctly with error', () => {
+    const tree = render(<DesignApproval checked={false} error={true} link={'fakeLink'} onChange={noop} />);
+
+    expect(tree).toMatchSnapshot();
+});