@configuratorware/configurator-frontendgui 1.30.4 → 1.31.2

package/src/App/Shared/Components/AcceptPrivacy/index.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { t } from 'Framework/i18n';
+import withWidth from '@material-ui/core/withWidth/withWidth';
+import Grid from '@material-ui/core/Grid/Grid';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import PropTypes from 'prop-types';
+
+const styles = theme => ({
+    checkboxLabel: {
+        fontSize: 15,
+        paddingLeft: 15,
+        paddingBottom: 12,
+        [theme.breakpoints.down('xs')]: {
+            paddingLeft: 12,
+        },
+    },
+    checkbox: {
+        alignSelf: 'flex-start',
+        top: -10,
+    },
+    formHelperText: {
+        marginLeft: 45,
+        marginBottom: 15,
+    },
+});
+
+class AcceptPrivacy extends React.Component {
+    static propTypes = {
+        classes: PropTypes.object,
+        width: PropTypes.string,
+        handleChangeCheckboxApproval: PropTypes.func,
+        approval: PropTypes.object,
+        dataPrivacyLink: PropTypes.string,
+    };
+    render() {
+        const { classes, handleChangeCheckboxApproval, approval, dataPrivacyLink } = this.props;
+
+        const privacyLink = `<a href="${dataPrivacyLink}"
+                              target="_blank">${t('receiveOfferForm.privacyLinkLabel')}</a>`;
+        const privacyNotice = t('receiveOfferForm.privacyNotice', { privacyLink });
+
+        return (
+            <Grid container>
+                <Grid item xs={12}>
+                    <FormControlLabel
+                        className={classes.checkboxLabel}
+                        control={
+                            <Checkbox
+                                className={classes.checkbox}
+                                name="dataPrivacyAccepted"
+                                checked={approval.value}
+                                onChange={handleChangeCheckboxApproval}
+                                color="primary"
+                            />
+                        }
+                        label={
+                            <span
+                                dangerouslySetInnerHTML={{
+                                    __html: privacyNotice,
+                                }}
+                            />
+                        }
+                    />
+                    {approval.error && (
+                        <FormHelperText error={true} className={classes.formHelperText}>
+                            {t('receiveOfferForm.selectionError')}
+                        </FormHelperText>
+                    )}
+                </Grid>
+            </Grid>
+        );
+    }
+}
+
+export default withWidth()(withStyles(styles, { name: 'AcceptPrivacy' })(AcceptPrivacy));

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

@@ -35,7 +35,7 @@ const styles = theme => ({
         bottom: 90,
         fontSize: 15,
         right: 200,
-        color: '#ED1C29',
+        color: theme.palette.primary.main,
         [theme.breakpoints.down('xs')]: {
             left: 15,
             whiteSpace: 'nowrap',

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

@@ -30,6 +30,7 @@ import ReceiveOfferForm from '../ReceiveOfferForm';
 import AcceptDesign from '../AcceptDesign';
 import LoadingOverlay from '../../../../Framework/Components/LoadingOverlay';
 import { debounce } from '@material-ui/core';
+import AcceptPrivacy from '../AcceptPrivacy';
 const styles = theme => ({
     contentPositioning: {
         paddingLeft: 32,
@@ -280,6 +281,7 @@ class AmountPrice extends React.Component {
         AddToCartComponent: PropTypes.elementType,
         renderPriceBox: PropTypes.func,
         userComment: PropTypes.string,
+        AcceptPrivacyComponent: PropTypes.elementType,
     };
 
     static defaultProps = {
@@ -296,6 +298,7 @@ class AmountPrice extends React.Component {
         NotificationComponent: Notification,
         PriceListComponent: PriceList,
         AddToCartComponent: AddToCart,
+        AcceptPrivacyComponent: AcceptPrivacy,
     };
 
     state = {
@@ -309,6 +312,7 @@ class AmountPrice extends React.Component {
         },
         inView: true,
         showErrors: false,
+        dataPrivacyAccepted: false,
     };
 
     componentDidUpdate(prevProps, prevState) {
@@ -348,6 +352,7 @@ class AmountPrice extends React.Component {
     verifyRequestErrors = () => {
         const { bulkNameErrors, displayAcceptDesign } = this.props;
         const designApproved = this.state.approval.value;
+
         if (bulkNameErrors && bulkNameErrors.length > 0) {
             this.setState({ showErrors: true });
             this.setState({ bulkNameErrors });
@@ -361,12 +366,24 @@ class AmountPrice extends React.Component {
                 },
             });
         }
+        if (!this.dataPrivacyApproved()) {
+            this.setState({
+                dataPrivacyAccepted: {
+                    value: false,
+                    error: true,
+                },
+            });
+        }
     };
 
     requestHasErrors = () => {
         const { bulkNameErrors, displayAcceptDesign } = this.props;
         const designApproved = this.state.approval.value;
-        if ((bulkNameErrors && bulkNameErrors.length > 0) || (displayAcceptDesign && !designApproved)) {
+        if (
+            (bulkNameErrors && bulkNameErrors.length > 0) ||
+            (displayAcceptDesign && !designApproved) ||
+            !this.dataPrivacyApproved()
+        ) {
             return true;
         }
         return false;
@@ -381,6 +398,13 @@ class AmountPrice extends React.Component {
         }
     };
 
+    dataPrivacyApproved = () => {
+        const { showReceiveOfferForm, clientTexts } = this.props;
+        const { dataPrivacyLink } = clientTexts;
+        const dataPrivacyApproved = this.state.dataPrivacyAccepted.value;
+        return showReceiveOfferForm && dataPrivacyApproved && dataPrivacyLink;
+    };
+
     handleTouchMove = (evt => {
         const dialogContent = this.dialogContentRef.current;
         evt.preventDefault();
@@ -459,7 +483,15 @@ class AmountPrice extends React.Component {
     };
 
     renderPriceOverview() {
-        const { notice, showPriceOverview, approval, inView, showErrors, bulkNameErrors } = this.state;
+        const {
+            notice,
+            showPriceOverview,
+            approval,
+            inView,
+            showErrors,
+            bulkNameErrors,
+            dataPrivacyAccepted,
+        } = this.state;
         const {
             amount,
             priceList,
@@ -484,9 +516,10 @@ class AmountPrice extends React.Component {
             NotificationComponent,
             PriceListComponent,
             AddToCartComponent,
+            AcceptPrivacyComponent,
         } = this.props;
 
-        const { termsAndConditionsLink } = clientTexts;
+        const { termsAndConditionsLink, dataPrivacyLink } = clientTexts;
         const mergedNotifications = [...notifications] || [];
 
         if (showErrors && bulkNameErrors && bulkNameErrors.length > 0) {
@@ -553,6 +586,18 @@ class AmountPrice extends React.Component {
                                     />
                                 ) : null
                             }
+                            acceptDataPrivacyComponent={
+                                showReceiveOfferForm && dataPrivacyLink ? (
+                                    <AcceptPrivacyComponent
+                                        dataPrivacyLink={dataPrivacyLink}
+                                        displayAcceptDesign={true}
+                                        handleChangeCheckboxApproval={this.handleChange}
+                                        approval={dataPrivacyAccepted}
+                                        closeProductOverviewDialog={this.handleClose}
+                                        displayNote={false}
+                                    />
+                                ) : null
+                            }
                             notificationComponent={mergedNotifications.map(
                                 ({ message, level, color }, key) => {
                                     return (

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

@@ -48,6 +48,7 @@ class PriceOverview extends React.Component {
         showReceiveOfferForm: PropTypes.bool,
         amount: PropTypes.number,
         acceptDesignComponent: PropTypes.element,
+        acceptDataPrivacyComponent: PropTypes.element,
     };
     render() {
         const {
@@ -63,6 +64,7 @@ class PriceOverview extends React.Component {
             showReceiveOfferForm,
             amount,
             acceptDesignComponent,
+            acceptDataPrivacyComponent,
         } = this.props;
 
         return (
@@ -87,6 +89,7 @@ class PriceOverview extends React.Component {
                                 </Grid>
                                 <Grid item xs={12}>
                                     {acceptDesignComponent}
+                                    {acceptDataPrivacyComponent}
                                     {amount > 0 && <Divider />}
                                     {priceListComponent}
                                 </Grid>

package/src/App/Shared/Components/ReceiveOfferForm/__snapshots__/index.test.jsx.snap

@@ -3,20 +3,20 @@
 exports[`renders correctly with approval 1`] = `
 Array [
   <div
-    class="MuiFormControl-root MuiTextField-root ReceiveOfferForm-MuiFormControlRoot-2 MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root ReceiveOfferForm-MuiFormControlRoot-2 MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.email
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="email"
         type="text"
         value=""
@@ -36,20 +36,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.name
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="name"
         type="text"
         value=""
@@ -69,20 +69,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.company
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="company"
         type="text"
         value=""
@@ -102,20 +102,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.phonenumber
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="phonenumber"
         type="text"
         value=""
@@ -141,20 +141,20 @@ Array [
       class="MuiGrid-root ReceiveOfferForm-Grid-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4"
     >
       <div
-        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
           data-shrink="false"
         >
           receiveOfferForm.zip
         </label>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
             name="zip"
             type="text"
             value=""
@@ -178,20 +178,20 @@ Array [
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8"
     >
       <div
-        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
           data-shrink="false"
         >
           receiveOfferForm.city
         </label>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
             name="city"
             type="text"
             value=""
@@ -213,20 +213,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.street
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="street"
         type="text"
         value=""
@@ -246,20 +246,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.country
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="country"
         type="text"
         value=""
@@ -284,20 +284,20 @@ Array [
 exports[`renders correctly without approval 1`] = `
 Array [
   <div
-    class="MuiFormControl-root MuiTextField-root ReceiveOfferForm-MuiFormControlRoot-2 MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root ReceiveOfferForm-MuiFormControlRoot-2 MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.email
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="email"
         type="text"
         value=""
@@ -317,20 +317,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.name
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="name"
         type="text"
         value=""
@@ -350,20 +350,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.company
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="company"
         type="text"
         value=""
@@ -383,20 +383,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.phonenumber
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="phonenumber"
         type="text"
         value=""
@@ -422,20 +422,20 @@ Array [
       class="MuiGrid-root ReceiveOfferForm-Grid-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-4"
     >
       <div
-        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
           data-shrink="false"
         >
           receiveOfferForm.zip
         </label>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
             name="zip"
             type="text"
             value=""
@@ -459,20 +459,20 @@ Array [
       class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-8"
     >
       <div
-        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+        class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
       >
         <label
-          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+          class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
           data-shrink="false"
         >
           receiveOfferForm.city
         </label>
         <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
         >
           <input
             aria-invalid="false"
-            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+            class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
             name="city"
             type="text"
             value=""
@@ -494,20 +494,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.street
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="street"
         type="text"
         value=""
@@ -527,20 +527,20 @@ Array [
     </div>
   </div>,
   <div
-    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal MuiFormControl-fullWidth"
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
   >
     <label
-      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-marginDense MuiInputLabel-outlined ReceiveOfferForm-outlinedLabel-4"
       data-shrink="false"
     >
       receiveOfferForm.country
     </label>
     <div
-      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl"
+      class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-marginDense MuiOutlinedInput-marginDense"
     >
       <input
         aria-invalid="false"
-        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3"
+        class="MuiInputBase-input MuiOutlinedInput-input ReceiveOfferForm-outlinedInput-3 MuiInputBase-inputMarginDense MuiOutlinedInput-inputMarginDense"
         name="country"
         type="text"
         value=""