@configuratorware/configurator-frontendgui 1.41.1 → 1.42.1

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import withStyles from '@material-ui/core/styles/withStyles';
-import ListItemText from '@material-ui/core/ListItemText/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem/MenuItem';
-import Select from '@material-ui/core/Select/Select';
-import FormControl from '@material-ui/core/FormControl/FormControl';
-import Input from '@material-ui/core/Input/Input';
-import Typography from '@material-ui/core/Typography/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import ListItemText from '@material-ui/core/ListItemText';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+import FormControl from '@material-ui/core/FormControl';
+import Input from '@material-ui/core/Input';
+import Typography from '@material-ui/core/Typography';
 import AnalyticsWrapper from '../Analytics/AnalyticsWrapper';
 import PropTypes from 'prop-types';
 

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

@@ -25,7 +25,10 @@ import { getConf } from '../../../configuration';
 import { isBulkNamesSelected } from '../../../Reducers/DesignArea/Selectors';
 import AmountPrice from '../../Components/AmountPrice';
 import { AmountPriceAdminareaWrapper } from './AmountPriceAdminareaWrapper';
-import { getAvailableConfigurationModes } from '../../../Reducers/ConfigurationMode/Selectors';
+import {
+    getAvailableConfigurationModes,
+    isCreatorModeSelected,
+} from '../../../Reducers/ConfigurationMode/Selectors';
 
 export const showProductVariantsForItem = createSelector(getItem, item => findMaxChildrenCount(item) > 1);
 
@@ -189,6 +192,7 @@ const mapStateToProps = ({ configurator, configurationMode, ui }) => {
         showCallToAction: query.has('_cta_element')
             ? query.get('_cta_element') !== 'none'
             : showCallToAction(configurator),
+        skipPriceOverview: query.has('_skipcartoverlay'),
         displayAcceptDesign: !designerAvailable ? false : getConf('displayAcceptDesign', true),
         isBulkNamesSelected: isBulkNamesSelected(configurator),
         bulkNameErrors: isBulkNamesSelected(configurator) ? createBulkNameErrors(configurator) : null,
@@ -198,6 +202,7 @@ const mapStateToProps = ({ configurator, configurationMode, ui }) => {
         addToCartPopUpLoader: getVisibilityMapProperty(ui, 'addToCartPopUpLoader'),
         userComment: get(configurator, 'configuration.customdata.comment', ''),
         userConfiguration: getConfiguration(configurator),
+        isCreator: isCreatorModeSelected({ configurationMode }),
     };
 };
 
@@ -215,6 +220,7 @@ const mapDispatchToProps = () => ({
     onShowChange: on => Services.configurator.setCalculationAutoResolveEnabled(!on),
     validateConfiguration: () =>
         getConf('validateBeforeCTA') && Services.configurator.validateConfiguration(),
+    toggleGlobalLoader: on => Services.ui.toggle('globalLoader', on),
 });
 
 export default containerConnect(mapStateToProps, mapDispatchToProps);

package/src/App/Shared/Containers/SaveConfiguration.js

@@ -1,4 +1,4 @@
-import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';
 import containerConnect from 'Framework/ComponentContainer';
 import { Services } from 'App/ServiceLocator';
 import SaveConfiguration from '../Components/SaveConfiguration';

package/src/App/Utils/Request/lazyFetch.js

@@ -1,9 +1,8 @@
-import { pathParams } from './pathParams';
 import Api from '../../../Framework/Api';
 
-export const lazyFetch = async (url, params, fallbackValue) => {
+export const lazyFetch = async (requestConfig, fallbackValue) => {
     try {
-        return await Api.request(pathParams(url, params));
+        return await Api.request(requestConfig);
     } catch (e) {
         // eslint-disable-next-line no-console
         console.error(e);

package/src/App/configuration.js

@@ -1,8 +1,11 @@
-import _ from 'lodash';
+import get from 'lodash/get';
+import find from 'lodash/find';
+import first from 'lodash/first';
+import merge from 'lodash/merge';
+import set from 'lodash/set';
 import Api from '../Framework/Api';
 import { initLanguage } from './Translations';
 import hyphensDeDE from 'hyphenated-de';
-import hyphensEnGB from 'hyphenated-en-gb';
 
 import { setStateChangeReducers, setSubReducers } from './Reducers/Configurator/Reducer';
 
@@ -62,9 +65,11 @@ let applicationConfiguration = {
     // the available locales
     locales: [{ code: 'de_DE', preferred: true }, { code: 'en_GB' }],
 
+    // although our locale is en-GB we use American English patterns for hyphenation
+    // to reduce bundle size because they are already included in hyphenated/react-hyphen
     hyphenations: {
         'de-DE': hyphensDeDE,
-        'en-GB': hyphensEnGB,
+        'en-GB': 'en-US',
     },
 
     // array of configuration save types
@@ -272,9 +277,9 @@ function preventLeavingPage() {
 export function init() {
     const externalConfig = window.externalConfiguration;
     if (externalConfig) {
-        applicationConfiguration = _.merge(applicationConfiguration, externalConfig);
+        applicationConfiguration = merge(applicationConfiguration, externalConfig);
     }
-    applicationConfiguration = _.merge(applicationConfiguration, getQueryParams());
+    applicationConfiguration = merge(applicationConfiguration, getQueryParams());
 
     Api.init(applicationConfiguration.network);
 
@@ -376,7 +381,7 @@ export function getQueryParams() {
 }
 
 export function setConfiguration(customApplicationConfiguration) {
-    applicationConfiguration = _.merge(
+    applicationConfiguration = merge(
         applicationConfiguration,
         customApplicationConfiguration,
         getQueryParams()
@@ -390,7 +395,7 @@ export function setConfiguration(customApplicationConfiguration) {
     }
 
     // set possible sub reducers and state change reducers
-    if (_.get(applicationConfiguration, 'reducers.configurator')) {
+    if (get(applicationConfiguration, 'reducers.configurator')) {
         const { subReducers, stateChangeReducers } = applicationConfiguration.reducers.configurator;
         setSubReducers(subReducers);
         setStateChangeReducers(stateChangeReducers);
@@ -405,9 +410,9 @@ function setLanguage() {
     }
     // if there is a locales array in the configuration...
     else if (applicationConfiguration.locales) {
-        const browserLanguage = _.get(navigator, 'languages[0]', navigator.language).replace('-', '_');
-        const matchToBrowserLanguage = _.find(applicationConfiguration.locales, { code: browserLanguage });
-        const preferred = _.find(applicationConfiguration.locales, { preferred: true });
+        const browserLanguage = get(navigator, 'languages[0]', navigator.language).replace('-', '_');
+        const matchToBrowserLanguage = find(applicationConfiguration.locales, { code: browserLanguage });
+        const preferred = find(applicationConfiguration.locales, { preferred: true });
 
         // if there is a match with the browser language use that
         if (matchToBrowserLanguage) {
@@ -419,14 +424,14 @@ function setLanguage() {
         }
         // otherwise use the first from the locales list
         else {
-            language = _.first(applicationConfiguration.locales).code;
+            language = first(applicationConfiguration.locales).code;
         }
     }
     // we have no info about the language, so try to use the browser language
     else {
-        language = _.get(navigator, 'languages[0]', navigator.language).replace('-', '_') || 'de_DE';
+        language = get(navigator, 'languages[0]', navigator.language).replace('-', '_') || 'de_DE';
     }
-    if (!_.find(applicationConfiguration.locales, { code: language })) {
+    if (!find(applicationConfiguration.locales, { code: language })) {
         // eslint-disable-next-line no-console
         console.warn(`The selected language (${language}) is not listed in the available languages!`);
     }
@@ -439,11 +444,11 @@ function setLanguage() {
 export const setCustomApplicationConfiguration = setConfiguration;
 
 export function getConf(path, dflt) {
-    return path ? _.get(applicationConfiguration, path, dflt) : applicationConfiguration;
+    return path ? get(applicationConfiguration, path, dflt) : applicationConfiguration;
 }
 
 export function setConf(path, value) {
-    _.set(applicationConfiguration, path, value);
+    set(applicationConfiguration, path, value);
 }
 
 // backward compatibility alias

package/src/App/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 import './setup';
@@ -17,7 +17,7 @@ export const App = () => (
 );
 
 export const render = () => {
-    ReactDOM.render(<App />, document.getElementById('root'));
+    createRoot(document.getElementById('root')).render(<App />);
 };
 
 export const main = () => {

package/src/Framework/Api.js

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import qs from 'qs';
-import _ from 'lodash';
+import isFunction from 'lodash/isFunction';
 
 const CancelToken = axios.CancelToken;
 let source = CancelToken.source();
@@ -15,10 +15,10 @@ const ax = axios.create({
 export class Api {
     static request(config, successCb, failCb) {
         const promise = ax.request(config);
-        if (_.isFunction(successCb)) {
+        if (isFunction(successCb)) {
             promise.then(successCb);
         }
-        if (_.isFunction(failCb)) {
+        if (isFunction(failCb)) {
             promise.catch(failCb);
         }
         return promise;

package/src/Framework/Components/Carousel/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Swipeable } from 'react-swipeable';
-import _ from 'lodash';
+import isEqual from 'lodash/isEqual';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
@@ -121,7 +121,7 @@ class Carousel extends React.Component {
             nextActive,
             showArrows,
         };
-        if (!_.isEqual(state, this.state)) {
+        if (!isEqual(state, this.state)) {
             this.setState(state);
         }
     };

package/src/Framework/Components/Dialog/index.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import _ from 'lodash';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+import isFunction from 'lodash/isFunction';
+import isNumber from 'lodash/isNumber';
+import Typography from '@material-ui/core/Typography';
 
 import { T } from '../../i18n';
 import PropTypes from 'prop-types';
 import './Style.scss';
-import { Typography } from '@material-ui/core';
 
 const whichTransitionEvent = function() {
     let t;
@@ -94,7 +97,7 @@ export default class Dialog extends React.Component {
 
             const position = this.calculatePosition();
             // check the position after rendering
-            if (!_.isEqual(position, this.position)) {
+            if (!isEqual(position, this.position)) {
                 // rerender if not correct
                 this.position = position;
 
@@ -109,12 +112,12 @@ export default class Dialog extends React.Component {
     componentWillReceiveProps(props) {
         let shouldRecalculate = this.props.show ^ props.show; // was or will be shown
 
-        if (!_.isEqual(props, this.props) && props.show) {
+        if (!isEqual(props, this.props) && props.show) {
             if (!this.props.show) {
                 this.zIndex = Dialog.zIndex += 2;
             }
 
-            const relativeElement = _.isFunction(props.relativeTo) ? props.relativeTo() : props.relativeTo;
+            const relativeElement = isFunction(props.relativeTo) ? props.relativeTo() : props.relativeTo;
 
             if (relativeElement && relativeElement !== this.lastRelativeElement) {
                 this.lastRelativeElement = relativeElement;
@@ -151,7 +154,7 @@ export default class Dialog extends React.Component {
 
     componentDidMount() {
         const { relativeTo, show } = this.props;
-        const relativeElement = _.isFunction(relativeTo) ? relativeTo() : relativeTo;
+        const relativeElement = isFunction(relativeTo) ? relativeTo() : relativeTo;
         if (relativeElement && show) {
             this.lastRelativeElement = relativeElement;
         }
@@ -164,7 +167,7 @@ export default class Dialog extends React.Component {
                 // check the position after rendering
                 const position = this.calculatePosition();
                 // check the position after rendering
-                if (!_.isEqual(position, this.position)) {
+                if (!isEqual(position, this.position)) {
                     // rerender if not correct
                     this.position = position;
                     this.forceUpdate();
@@ -176,13 +179,13 @@ export default class Dialog extends React.Component {
             const updateIfPositionChanged = () => {
                 const position = this.calculatePosition();
                 // check the position after rendering
-                if (!_.isEqual(position, this.position)) {
+                if (!isEqual(position, this.position)) {
                     // rerender if not correct
                     this.position = position;
                     this.forceUpdate();
                 }
             };
-            const updateDebounced = _.debounce(updateIfPositionChanged, 50);
+            const updateDebounced = debounce(updateIfPositionChanged, 50);
 
             // create an observer instance
             this.observer = new MutationObserver(mutations => {
@@ -285,7 +288,7 @@ export default class Dialog extends React.Component {
                     (/%$/.test(dialogStyle.maxHeight)
                         ? (parent.clientHeight * parseInt(dialogStyle.maxHeight)) / 100
                         : parseInt(dialogStyle.maxHeight)) - dialogTitleBar.current.offsetHeight;
-                if (!_.isNumber(maxContentHeight)) {
+                if (!isNumber(maxContentHeight)) {
                     // fallback to parents height
                     maxContentHeight = parent.clientHeight;
                 }

package/src/Framework/Components/DialogSelect/index.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import _ from 'lodash';
+import isArray from 'lodash/isEqual';
+import isFunction from 'lodash/isFunction';
 import Typography from '@material-ui/core/Typography';
 import Dialog from '../Dialog';
 
@@ -69,7 +70,7 @@ export default class DialogSelect extends React.Component {
     }
 
     isSelected(option) {
-        if (_.isFunction(this.props.isSelected)) {
+        if (isFunction(this.props.isSelected)) {
             return this.props.isSelected(option);
         }
 
@@ -80,7 +81,7 @@ export default class DialogSelect extends React.Component {
         }
 
         // if there are more values in the selection
-        if (_.isArray(this.props.value)) {
+        if (isArray(this.props.value)) {
             for (let v of this.props.value) {
                 if (valueProperty) {
                     if (v[valueProperty] === option[valueProperty]) {
@@ -187,7 +188,7 @@ export default class DialogSelect extends React.Component {
 
         const relativeElement = relativeTo || this.control;
 
-        const show = _.isArray(options) && options.length > 0 && this.state.isOpen;
+        const show = isArray(options) && options.length > 0 && this.state.isOpen;
 
         const disabled = this.props.disabled || false;
 
@@ -214,7 +215,7 @@ export default class DialogSelect extends React.Component {
                     overlay={overlay}
                     overlayClassName="dialogselect-overlay"
                 >
-                    {_.isArray(options) && options.map((option, key) => this.renderOption(option, key))}
+                    {isArray(options) && options.map((option, key) => this.renderOption(option, key))}
                 </Dialog>
             </div>
         );

package/src/Framework/i18n.js

@@ -2,7 +2,10 @@ import { loadTranslations, setLocale, Translate, Localize, I18n } from 'react-re
 import React, { Component } from 'react';
 import ReactDOMServer from 'react-dom/server';
 import { connect } from 'react-redux';
-import _ from 'lodash';
+import get from 'lodash/get';
+import isObject from 'lodash/isObject';
+import isString from 'lodash/isString';
+import merge from 'lodash/merge';
 import Hyphen from 'react-hyphen';
 import { getConf } from '../App/configuration';
 
@@ -62,7 +65,7 @@ export const mergeTranslations = translationsObject => {
     if (!store) {
         throw new Error('Store must be set up first!');
     }
-    const translations = _.merge(store.getState().i18n.translations || {}, translationsObject);
+    const translations = merge(store.getState().i18n.translations || {}, translationsObject);
     store.dispatch(loadTranslations(translations));
 };
 
@@ -101,10 +104,10 @@ export const T = (value, props = {}) => {
     const { escapeDot, ...otherProps } = props;
     if (value === undefined) {
         return value;
-    } else if (escapeDot && _.isString(value)) {
+    } else if (escapeDot && isString(value)) {
         value = value.replace(/\./g, '[DOT]');
     }
-    if (_.isObject(otherProps)) {
+    if (isObject(otherProps)) {
         for (let p in otherProps) {
             // if the replacement is a jsx element, just render it in place
             if (React.isValidElement(otherProps[p])) {
@@ -128,7 +131,7 @@ export const L = (value, props = {}) => {
     const { escapeDot, ...otherProps } = props;
     if (value === undefined) {
         return value;
-    } else if (escapeDot && _.isString(value)) {
+    } else if (escapeDot && isString(value)) {
         value = value.replace(/\./g, '[DOT]');
     }
     return <Localize value={'' + value} {...otherProps} />;
@@ -137,7 +140,11 @@ export const L = (value, props = {}) => {
 export const Hyphenated = connect(({ i18n: { locale } }) => ({ locale }))(({ children, locale }) => {
     const hyphenations = getConf('hyphenations');
     if (hyphenations[locale]) {
-        return <Hyphen language={hyphenations[locale]}>{children}</Hyphen>;
+        return locale === 'en-GB' ? (
+            <Hyphen>{children}</Hyphen>
+        ) : (
+            <Hyphen language={hyphenations[locale]}>{children}</Hyphen>
+        );
     }
     return children;
 });
@@ -154,7 +161,7 @@ export function use(translationsObject) {
         mergeTranslations(translationsObject);
     } else {
         // merge with pre-init translations
-        _.merge(translations, translationsObject);
+        merge(translations, translationsObject);
     }
 }
 
@@ -174,7 +181,7 @@ export const translationExists = key => {
         return false;
     }
 
-    const translation = _.get(translations, key, null);
+    const translation = get(translations, key, null);
 
     return translation !== null;
 };

package/src/Shared/Components/CustomDialog.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { withStyles, withWidth } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth from '@material-ui/core/withWidth';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Icon from '@material-ui/core/Icon';

package/src/Shared/Components/CustomDialogSelect.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import Dialog from 'Framework/Components/Dialog';
 
-import { isArray } from 'lodash';
+import isArray from 'lodash/isArray';
 import PropTypes from 'prop-types';
 import DialogContent from '@material-ui/core/DialogContent';
 import LoadingOverlay from 'Framework/Components/LoadingOverlay';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
     theme => {

package/src/Shared/Components/MainButton.js

@@ -1,5 +1,5 @@
-import { withStyles } from '@material-ui/core';
-import Button from '@material-ui/core/Button/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
 import React from 'react';
 import PropTypes from 'prop-types';
 

package/src/Shared/Components/__tests__/index.test.jsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import CustomDialog from '../CustomDialog';
 import { render } from 'enzyme';
-import { DialogTitle, Icon, Typography, DialogContent, DialogActions, Button } from '@material-ui/core';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import Icon from '@material-ui/core/Icon';
+import Typography from '@material-ui/core/Typography';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogActions from '@material-ui/core/DialogActions';
+import Button from '@material-ui/core/Button';
 
 HTMLCanvasElement.prototype.getContext = () => {
     // return whatever getContext has to return

package/src/Shared/HOCs/ResizeDetect/ResizeDetect.dev.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { withResizeDetect, withResizeDetectWrapper } from './ResizeDetect';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     test: {

package/src/Utils/Decorators/Observable.js

@@ -24,6 +24,7 @@ export class Observable {
             eventName,
             callback,
         });
+        return () => this.off(eventName, callback);
     }
 
     off(eventName, callback) {

package/src/Utils/Test/mountWithState.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import mount from 'enzyme/mount';
 import { Provider } from 'react-redux';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();