@configuratorware/configurator-frontendgui 1.36.0-beta.0 → 1.36.1

package/src/App/Services/__tests__/DesignDataService.test.js

@@ -600,6 +600,9 @@ describe('Services/DesignDataService', () => {
                         selectedDesignArea: {},
                         previousEditedDesignArea: {},
                     },
+                    designView: {
+                        selectedDesignView: {},
+                    },
                 };
                 dispatch = jest.fn();
             })();
@@ -624,6 +627,75 @@ describe('Services/DesignDataService', () => {
             expect(srv.selectFirstDesignArea).toHaveBeenCalled();
         }
     );
+    test(
+        '[INTEGRATION] openDesignAreaEditor calls the ui.show action to show the designer, and calls the ' +
+            'designArea from designView because a designView is selected',
+        () => {
+            const mockStoreSrv = new (class StoreService {
+                static serviceName = 'StoreService';
+                state = {
+                    configurator: {
+                        configuration: {
+                            designData: {},
+                        },
+                    },
+                    designArea: {
+                        selectedDesignArea: {},
+                        previousEditedDesignArea: {},
+                        filteredDesignAreas: [
+                            {
+                                identifier: 'back',
+                                designView: {
+                                    identifier: '03_back',
+                                },
+                                designProductionMethods: [],
+                            },
+                            {
+                                identifier: 'front',
+                                designView: {
+                                    identifier: '02_front',
+                                },
+                                designProductionMethods: [],
+                            },
+                            {
+                                identifier: 'side',
+                                designView: {
+                                    identifier: '01_side',
+                                },
+                                designProductionMethods: [],
+                            },
+                        ],
+                    },
+                    designView: {
+                        selectedDesignView: {
+                            identifier: '01_side',
+                        },
+                    },
+                };
+                dispatch = jest.fn();
+            })();
+            ServiceLocator.provide(mockStoreSrv);
+            const mockUISrv = new (class UIService {
+                static serviceName = 'UIService';
+                show = jest.fn();
+            })();
+            ServiceLocator.provide(mockUISrv);
+            const mockVisualizationSrv = new (class VisualizationService {
+                static serviceName = 'VisualizationService';
+                enableUserMovement = jest.fn();
+                disableUserMovement = jest.fn();
+                freeUserMovement = jest.fn();
+                getActiveDesignArea = jest.fn();
+            })();
+            ServiceLocator.provide(mockVisualizationSrv);
+
+            const srv = new DesignDataService();
+            srv.selectDesignArea = jest.fn();
+            srv.openDesignAreaEditor();
+            expect(mockUISrv.show).toHaveBeenCalledWith('designer');
+            expect(srv.selectDesignArea).toHaveBeenCalledWith('side');
+        }
+    );
     test(
         '[INTEGRATION] openDesignAreaEditor calls the ui.show action to show the designer, and calls the ' +
             'designArea from designData with objects to open',
@@ -659,6 +731,9 @@ describe('Services/DesignDataService', () => {
                         selectedDesignArea: {},
                         previousEditedDesignArea: {},
                     },
+                    designView: {
+                        selectedDesignView: {},
+                    },
                 };
                 dispatch = jest.fn();
             })();
@@ -701,6 +776,9 @@ describe('Services/DesignDataService', () => {
                             identifier: 'area-51',
                         },
                     },
+                    designView: {
+                        selectedDesignView: {},
+                    },
                 };
                 dispatch = jest.fn();
             })();
@@ -739,6 +817,9 @@ describe('Services/DesignDataService', () => {
                         },
                         previousEditedDesignArea: {},
                     },
+                    designView: {
+                        selectedDesignView: {},
+                    },
                     configurator: {
                         configuration: {
                             designdata: {

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

@@ -339,6 +339,8 @@ class AmountPrice extends React.Component {
     receiveOfferFormComponentRef = React.createRef();
     dialogContentRef = React.createRef();
     priceListRef = React.createRef();
+    acceptDesignRef = React.createRef();
+    acceptDataPrivacyRef = React.createRef();
 
     handleChange = event => {
         this.setState({
@@ -349,10 +351,9 @@ class AmountPrice extends React.Component {
         });
     };
 
-    verifyRequestErrors = () => {
+    verifyRequestErrors = hasFormValidationErrors => {
         const { bulkNameErrors, displayAcceptDesign } = this.props;
         const designApproved = this.state.approval.value;
-
         if (bulkNameErrors && bulkNameErrors.length > 0) {
             this.setState({ showErrors: true });
             this.setState({ bulkNameErrors });
@@ -365,6 +366,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDesignRef.current &&
+                this.acceptDesignRef.current.scrollIntoView();
         }
         if (!this.dataPrivacyApproved()) {
             this.setState({
@@ -373,6 +377,9 @@ class AmountPrice extends React.Component {
                     error: true,
                 },
             });
+            !hasFormValidationErrors &&
+                this.acceptDataPrivacyRef.current &&
+                this.acceptDataPrivacyRef.current.scrollIntoView();
         }
     };
 
@@ -449,7 +456,7 @@ class AmountPrice extends React.Component {
                 this.setState({ hasErrorReceiveOfferForm: false });
             }
         } else {
-            this.verifyRequestErrors();
+            this.verifyRequestErrors(formValidation.hasError);
         }
     };
 
@@ -574,28 +581,32 @@ class AmountPrice extends React.Component {
                             amount={amount}
                             acceptDesignComponent={
                                 showCallToAction ? (
-                                    <AcceptDesignComponent
-                                        termsAndConditionsLink={termsAndConditionsLink}
-                                        displayAcceptDesign={displayAcceptDesign}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={approval}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        notice={notice}
-                                        noteLabel={t('amountPrice.notice')}
-                                        handleChange={this.handleBasketNoticeChange}
-                                    />
+                                    <div ref={this.acceptDesignRef}>
+                                        <AcceptDesignComponent
+                                            termsAndConditionsLink={termsAndConditionsLink}
+                                            displayAcceptDesign={displayAcceptDesign}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={approval}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            notice={notice}
+                                            noteLabel={t('amountPrice.notice')}
+                                            handleChange={this.handleBasketNoticeChange}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             acceptDataPrivacyComponent={
                                 showReceiveOfferForm && dataPrivacyLink ? (
-                                    <AcceptPrivacyComponent
-                                        dataPrivacyLink={dataPrivacyLink}
-                                        displayAcceptDesign={true}
-                                        handleChangeCheckboxApproval={this.handleChange}
-                                        approval={dataPrivacyAccepted}
-                                        closeProductOverviewDialog={this.handleClose}
-                                        displayNote={false}
-                                    />
+                                    <div ref={this.acceptDataPrivacyRef}>
+                                        <AcceptPrivacyComponent
+                                            dataPrivacyLink={dataPrivacyLink}
+                                            displayAcceptDesign={true}
+                                            handleChangeCheckboxApproval={this.handleChange}
+                                            approval={dataPrivacyAccepted}
+                                            closeProductOverviewDialog={this.handleClose}
+                                            displayNote={false}
+                                        />
+                                    </div>
                                 ) : null
                             }
                             notificationComponent={mergedNotifications.map(

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

@@ -1,11 +1,11 @@
 import React from 'react';
+import { Swipeable } from 'react-swipeable';
 import _ from 'lodash';
 
 import './Styles.scss';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { withStyles } from '@material-ui/core/styles';
-import { DOWN, LEFT, RIGHT, Swipeable, UP } from '../../../Shared/Components/Swipeable';
 
 const styles = theme => ({
     carousel: {
@@ -37,12 +37,10 @@ class Carousel extends React.Component {
     }
 
     componentDidMount() {
+        this.init();
         const { carousel } = this.refs;
-        if (carousel) {
-            this.init();
-            const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
-            carousel.addEventListener(wheelEventName, this.scrolled);
-        }
+        const wheelEventName = 'onwheel' in carousel ? 'wheel' : 'mousewheel';
+        carousel.addEventListener(wheelEventName, this.scrolled);
     }
 
     componentDidUpdate() {
@@ -142,16 +140,19 @@ class Carousel extends React.Component {
     };
 
     swiped = e => {
-        if (this.props.vertical) {
-            if (e.dir === UP) {
+        // if it's vertical deltaY should be the bigger
+        if (this.props.vertical && Math.abs(e.deltaY) >= Math.abs(e.deltaX)) {
+            if (e.deltaY > 0) {
                 this.next();
-            } else if (e.dir === DOWN) {
+            } else {
                 this.prev();
             }
-        } else {
-            if (e.dir === LEFT) {
+        }
+        // if it's not vertical deltaX should be the bigger
+        else if (!this.props.vertical && Math.abs(e.deltaX) >= Math.abs(e.deltaY)) {
+            if (e.deltaX > 0) {
                 this.next();
-            } else if (e.dir === RIGHT) {
+            } else {
                 this.prev();
             }
         }
@@ -198,11 +199,9 @@ class Carousel extends React.Component {
                     )}
                     <Swipeable
                         className={'carousel-frame'}
-                        options={{
-                            trackMouse: true,
-                            onSwiping: this.swiping,
-                            onSwiped: this.swiped,
-                        }}
+                        trackMouse={true}
+                        onSwiping={this.swiping}
+                        onSwiped={this.swiped}
                     >
                         <div
                             className="carousel-slider"

package/Shared/Components/Swipeable.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "UP", {
-  enumerable: true,
-  get: function get() {
-    return _reactSwipeable.UP;
-  }
-});
-Object.defineProperty(exports, "DOWN", {
-  enumerable: true,
-  get: function get() {
-    return _reactSwipeable.DOWN;
-  }
-});
-Object.defineProperty(exports, "LEFT", {
-  enumerable: true,
-  get: function get() {
-    return _reactSwipeable.LEFT;
-  }
-});
-Object.defineProperty(exports, "RIGHT", {
-  enumerable: true,
-  get: function get() {
-    return _reactSwipeable.RIGHT;
-  }
-});
-exports.Swipeable = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactSwipeable = require("react-swipeable");
-
-var _excluded = ["options"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-// eslint-disable-next-line react/prop-types,react/display-name
-var Swipeable = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var options = _ref.options,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var handlers = (0, _reactSwipeable.useSwipeable)(options);
-  return /*#__PURE__*/_react["default"].createElement("div", _extends({}, handlers, props, {
-    ref: ref
-  }));
-});
-
-exports.Swipeable = Swipeable;

package/src/Shared/Components/Swipeable.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import { useSwipeable, UP, DOWN, LEFT, RIGHT } from 'react-swipeable';
-
-export { UP, DOWN, LEFT, RIGHT };
-
-// eslint-disable-next-line react/prop-types,react/display-name
-export const Swipeable = React.forwardRef(({ options, ...props }, ref) => {
-    const handlers = useSwipeable(options);
-    return <div {...handlers} {...props} ref={ref} />;
-});