@configuratorware/configurator-frontendgui 1.30.1 → 1.31.0

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

@@ -97,7 +97,8 @@ var PriceOverview = /*#__PURE__*/function (_React$Component) {
           receiveOfferFormComponent = _this$props.receiveOfferFormComponent,
           showReceiveOfferForm = _this$props.showReceiveOfferForm,
           amount = _this$props.amount,
-          acceptDesignComponent = _this$props.acceptDesignComponent;
+          acceptDesignComponent = _this$props.acceptDesignComponent,
+          acceptDataPrivacyComponent = _this$props.acceptDataPrivacyComponent;
       return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
         item: true,
         xs: 12,
@@ -124,7 +125,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, amount > 0 && /*#__PURE__*/_react["default"].createElement(_Divider["default"], null), priceListComponent), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
+      }, acceptDesignComponent, acceptDataPrivacyComponent, 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"], {
@@ -167,7 +168,8 @@ _defineProperty(PriceOverview, "propTypes", {
   receiveOfferFormComponent: _propTypes["default"].element,
   showReceiveOfferForm: _propTypes["default"].bool,
   amount: _propTypes["default"].number,
-  acceptDesignComponent: _propTypes["default"].element
+  acceptDesignComponent: _propTypes["default"].element,
+  acceptDataPrivacyComponent: _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: 14,
+      padding: 10,
       fontSize: 15
     }, theme.breakpoints.down('xs'), {
       padding: 19
@@ -143,7 +143,6 @@ 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;
   }
 
@@ -231,7 +230,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.email'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!email.error,
@@ -256,7 +255,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.name'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!name.error,
@@ -278,7 +277,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.company'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!company.error,
@@ -300,7 +299,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.phonenumber'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!phonenumber.error,
@@ -329,7 +328,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.zip'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!zip.error,
@@ -355,7 +354,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.city'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!city.error,
@@ -377,7 +376,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.street'),
-        margin: "normal",
+        margin: "dense",
         variant: "outlined",
         fullWidth: true,
         error: !!street.error,
@@ -399,7 +398,7 @@ var ReceiveOfferForm = /*#__PURE__*/function (_React$Component) {
         onChange: this.handleChange,
         onBlur: this.handleBlur,
         label: (0, _i18n.t)('receiveOfferForm.country'),
-        margin: "normal",
+        margin: "dense",
         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_LOCAL,
+  development: DEVELOPMENT_HOST_INT,
   test: ''
 };
 var resourceUrlsByNodeEnv = {

package/package.json

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

package/public/translations/de_DE.json

@@ -158,7 +158,10 @@
     "checkInputsInForm": "Bitte Eingaben im Formular prüfen",
     "sentOk": "Anfrage wurde erfolgreich versandt.",
     "sentError": "Fehler beim Senden der Anfrage.",
-    "sendButton": "Angebot anfordern"
+    "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"
   },
   "acceptDesignScreen": {
     "selectionError": "Checkbox nicht bestätigt",

package/public/translations/en_GB.json

@@ -159,7 +159,10 @@
     "checkInputsInForm": "Please check the form inputs below",
     "sentOk": "Request was successfully sent.",
     "sentError": "Error sending the request.",
-    "sendButton": "Request a quote"
+    "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"
   },
   "acceptDesignScreen": {
     "checkedSelectionActive": "I have checked all provided data and the design and I approve the configuration",

package/src/App/Modules/Designer/Components/ImageColorPicker/ImageColorPicker.js

@@ -210,9 +210,7 @@ export class ImageColorPicker extends React.Component {
         const { width: pw, height: ph } = container.getBoundingClientRect();
         const { width: ow, height: oh } = img;
 
-        const oa = ow / oh;
-
-        if (oa <= 1) {
+        if (ow / oh <= pw / ph) {
             const height = ph;
             const width = height * (ow / oh);
 

package/src/App/Modules/Designer/Utils/Transformers.js

@@ -20,7 +20,7 @@ export const fixSrcURL = src => {
 export const getRasterURL = imageURL => ('' + imageURL).replace(/svg$/, 'png');
 
 export const isOriginalVector = imageData =>
-    /^(eps|ept|pdf|ai|svg)$/i.test(get(imageData, 'original.format', ''));
+    /^(eps|ept|ps|pdf|ai|svg)$/i.test(get(imageData, 'original.format', ''));
 
 export const noCache = src => `${src}?${Math.random()}`;
 

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,37 +497,6 @@ 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,
@@ -535,7 +504,7 @@ export const switchOptions = (
     refreshOptions = false,
     setChecked = false
 ) => dispatch => {
-    return dispatch(switchOptionArrays(configuration, switchOptionData, noCheck)).then(action => {
+    return dispatch(switchOptionsBasic(configuration, switchOptionData, noCheck)).then(action => {
         const extraData = { switchOptionData, noCheck, refreshOptions, setChecked };
         return dispatch(receiveSwitchoptionsresult(action.data, extraData));
     });
@@ -701,10 +670,10 @@ export const resolveConflicts = () => (dispatch, getState) => {
                 if (switchOptionsData) {
                     if (p) {
                         p = p.then(action => {
-                            return dispatch(switchOptionArrays(action.data, switchOptionsData, true));
+                            return dispatch(switchOptionsBasic(action.data, switchOptionsData, true));
                         });
                     } else {
-                        p = dispatch(switchOptionArrays(configuration, switchOptionsData, true));
+                        p = dispatch(switchOptionsBasic(configuration, switchOptionsData, true));
                     }
                 }
             }
@@ -781,7 +750,7 @@ export const selectMultipleOptions = optionsList => (dispatch, getState) => {
     for (const component of optionsList) {
         switchOptionData[component.identifier] = component.selectedoptions.map(({ identifier, amount }) => ({
             identifier,
-            amount: amount || 1,
+            amount: typeof amount === 'undefined' ? 1 : amount,
             check_results: null,
         }));
     }

package/src/App/Screens/Configurator/ThemeProvider.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { MuiThemeProvider, createTheme } from '@material-ui/core/styles';
 import { grey } from '@material-ui/core/colors';
 import merge from 'lodash/merge';
 import cloneDeep from 'lodash/cloneDeep';
@@ -245,7 +245,7 @@ const mapStateToProps = state => ({
 
 export const ThemeMixer = ({ client, customTheme, withTheme, children }) => {
     const themeMix = useMemo(() => {
-        const theme = createMuiTheme(
+        const theme = createTheme(
             createThemeFromClientTheme(client && client.theme ? client.theme : {}, customTheme || {})
         );
         if (typeof withTheme === 'function') {

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>