@configuratorware/configurator-frontendgui 1.40.5 → 1.41.0

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

@@ -11,6 +11,31 @@ exports[`renders a boxed component with the boxed prop 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
+        <div
+          class="MuiGrid-root MuiGrid-container"
+        >
+          <div
+            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
+          >
+            <span
+              aria-hidden="true"
+              class="material-icons MuiIcon-root"
+            >
+              list_alt
+            </span>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                amountPrice.configurationOverview
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -63,12 +88,12 @@ exports[`renders a boxed component with the boxed prop 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MainButton-root-17 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
+              class="MuiButtonBase-root MuiButton-root MainButton-root-19 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label MainButton-label-18 AmountPrice-mainButtonLabel-11"
+                class="MuiButton-label MainButton-label-20 AmountPrice-mainButtonLabel-11"
               >
                 amountPrice.intoCart
               </span>
@@ -92,6 +117,31 @@ exports[`renders correctly 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
+        <div
+          class="MuiGrid-root MuiGrid-container"
+        >
+          <div
+            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
+          >
+            <span
+              aria-hidden="true"
+              class="material-icons MuiIcon-root"
+            >
+              list_alt
+            </span>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                amountPrice.configurationOverview
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -144,12 +194,12 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MainButton-root-17 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
+              class="MuiButtonBase-root MuiButton-root MainButton-root-19 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label MainButton-label-18 AmountPrice-mainButtonLabel-11"
+                class="MuiButton-label MainButton-label-20 AmountPrice-mainButtonLabel-11"
               >
                 amountPrice.intoCart
               </span>
@@ -173,6 +223,31 @@ exports[`renders receiveOfferForm 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
+        <div
+          class="MuiGrid-root MuiGrid-container"
+        >
+          <div
+            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
+          >
+            <span
+              aria-hidden="true"
+              class="material-icons MuiIcon-root"
+            >
+              list_alt
+            </span>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                amountPrice.configurationOverview
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -232,12 +307,12 @@ exports[`renders receiveOfferForm 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MainButton-root-17 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
+              class="MuiButtonBase-root MuiButton-root MainButton-root-19 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label MainButton-label-18 AmountPrice-mainButtonLabel-11"
+                class="MuiButton-label MainButton-label-20 AmountPrice-mainButtonLabel-11"
               >
                 receiveOfferForm.sendButton
               </span>
@@ -261,6 +336,31 @@ exports[`renders the ConfigurationModeSwitchComponent (if it is provided) 1`] =
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
+        <div
+          class="MuiGrid-root MuiGrid-container"
+        >
+          <div
+            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
+          >
+            <span
+              aria-hidden="true"
+              class="material-icons MuiIcon-root"
+            >
+              list_alt
+            </span>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                amountPrice.configurationOverview
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >
@@ -320,12 +420,12 @@ exports[`renders the ConfigurationModeSwitchComponent (if it is provided) 1`] =
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6"
           >
             <button
-              class="MuiButtonBase-root MuiButton-root MainButton-root-17 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
+              class="MuiButtonBase-root MuiButton-root MainButton-root-19 AmountPrice-mainButton-10 MuiButton-contained custom-css-cta-button MuiButton-fullWidth"
               tabindex="0"
               type="button"
             >
               <span
-                class="MuiButton-label MainButton-label-18 AmountPrice-mainButtonLabel-11"
+                class="MuiButton-label MainButton-label-20 AmountPrice-mainButtonLabel-11"
               >
                 amountPrice.intoCart
               </span>
@@ -349,6 +449,31 @@ exports[`renders without callToAction 1`] = `
       <div
         class="MuiCardContent-root AmountPrice-AmountPriceContent-6 AmountPrice-cardContentWrapper-5"
       >
+        <div
+          class="MuiGrid-root MuiGrid-container"
+        >
+          <div
+            class="MuiGrid-root AmountPrice-summary-17 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-12 MuiGrid-grid-md-12 MuiGrid-grid-lg-12"
+          >
+            <span
+              aria-hidden="true"
+              class="material-icons MuiIcon-root"
+            >
+              list_alt
+            </span>
+            <button
+              class="MuiButtonBase-root MuiButton-root MuiButton-text AmountPrice-configurationButton-16 MuiButton-textSizeSmall MuiButton-sizeSmall"
+              tabindex="0"
+              type="button"
+            >
+              <span
+                class="MuiButton-label"
+              >
+                amountPrice.configurationOverview
+              </span>
+            </button>
+          </div>
+        </div>
         <div
           class="MuiGrid-root MuiGrid-container"
         >

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

@@ -31,6 +31,8 @@ import AcceptDesign from '../AcceptDesign';
 import LoadingOverlay from '../../../../Framework/Components/LoadingOverlay';
 import { debounce } from '@material-ui/core';
 import AcceptPrivacy from '../AcceptPrivacy';
+import ConfigurationOverview from '../ConfigurationOverview';
+import { isMobileDevice } from 'Framework/Helpers/isMobileDevice';
 const styles = theme => ({
     contentPositioning: {
         paddingLeft: 32,
@@ -209,6 +211,22 @@ const styles = theme => ({
             cursor: 'pointer',
         },
     },
+    configurationButton: {
+        '&:hover': {
+            cursor: 'pointer',
+        },
+        fontWeight: 'bold',
+        textTransform: 'none',
+        padding: '6px 15px',
+        marginRight: '5px',
+    },
+    summary: {
+        display: 'flex',
+        alignItems: 'center',
+        '& svg': {
+            marginRight: 5,
+        },
+    },
     dialogTitleRoot: {
         padding: '20px 0',
     },
@@ -277,12 +295,14 @@ class AmountPrice extends React.Component {
         ReceiveOfferFormComponent: PropTypes.elementType,
         AcceptDesignComponent: PropTypes.elementType,
         PriceOverviewComponent: PropTypes.elementType,
+        ConfigurationOverviewComponent: PropTypes.elementType,
         NotificationComponent: PropTypes.elementType,
         PriceListComponent: PropTypes.elementType,
         AddToCartComponent: PropTypes.elementType,
         renderPriceBox: PropTypes.func,
         userComment: PropTypes.string,
         AcceptPrivacyComponent: PropTypes.elementType,
+        userConfiguration: PropTypes.object,
     };
 
     static defaultProps = {
@@ -296,6 +316,7 @@ class AmountPrice extends React.Component {
         ReceiveOfferFormComponent: ReceiveOfferForm,
         AcceptDesignComponent: AcceptDesign,
         PriceOverviewComponent: PriceOverview,
+        ConfigurationOverviewComponent: ConfigurationOverview,
         NotificationComponent: Notification,
         PriceListComponent: PriceList,
         AddToCartComponent: AddToCart,
@@ -304,6 +325,7 @@ class AmountPrice extends React.Component {
 
     state = {
         showPriceOverview: false,
+        showConfigurationOverview: false,
         notice: '',
         hasErrorReceiveOfferForm: false,
         bulkNameErrors: [],
@@ -332,6 +354,13 @@ class AmountPrice extends React.Component {
             const { onShowChange } = this.props;
             onShowChange && onShowChange(showPriceOverview);
         }
+
+        const { showConfigurationOverview } = this.state;
+        if (showConfigurationOverview !== prevState.showConfigurationOverview) {
+            const { onShowChange } = this.props;
+            onShowChange && onShowChange(showConfigurationOverview);
+        }
+
         if (this.state.notice === prevState.notice && this.props.userComment !== this.state.notice) {
             this.setState({ notice: this.props.userComment });
         }
@@ -432,8 +461,22 @@ class AmountPrice extends React.Component {
         }
     };
 
+    openConfigurationOverview = async () => {
+        try {
+            await this.props.validateConfiguration();
+            this.setState({
+                showConfigurationOverview: true,
+                hasErrorReceiveOfferForm: false,
+            });
+        } catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(`Error while validating configuration: ${e}`);
+        }
+    };
+
     handleClose = () => {
         this.setState({
+            showConfigurationOverview: false,
             showPriceOverview: false,
             bulkNameErrors: [],
             approval: {
@@ -490,6 +533,47 @@ class AmountPrice extends React.Component {
         this.setState({ inView: inView });
     };
 
+    renderConfigurationOverview() {
+        const { showConfigurationOverview } = this.state;
+
+        const { ConfigurationOverviewComponent, userConfiguration, width, classes } = this.props;
+
+        return (
+            <Dialog
+                aria-labelledby="alert-dialog-title"
+                aria-describedby="alert-dialog-description"
+                classes={{
+                    paper: classes.dialogWrapper,
+                    container: width === 'md' || width === 'xs' ? classes.dialogPositioning : '',
+                    root: classes.dialogPositioning,
+                }}
+                BackdropProps={{ className: classes.dialogPositioning }}
+                onClose={this.handleClose.bind(this)}
+                open={showConfigurationOverview}
+                fullWidth
+                fullScreen={width === 'sm' || width === 'xs'}
+                scroll="paper"
+            >
+                <LoadingOverlay show={this.props.addToCartPopUpLoader} />
+                <DialogTitle classes={{ root: classes.dialogTitleRoot }}>
+                    <Typography variant="body1">
+                        <b>{t('amountPrice.configurationOverview')}</b>
+                    </Typography>
+                    <Icon className={classes.closeIcon} onClick={this.handleClose.bind(this)}>
+                        close
+                    </Icon>
+                </DialogTitle>
+                <RootRef rootRef={this.dialogContentRef}>
+                    <DialogContent classes={{ root: classes.contentPositioning }}>
+                        <ConfigurationOverviewComponent
+                            optionclassifications={userConfiguration.optionclassifications}
+                        />
+                    </DialogContent>
+                </RootRef>
+            </Dialog>
+        );
+    }
+
     renderPriceOverview() {
         const {
             notice,
@@ -684,6 +768,7 @@ class AmountPrice extends React.Component {
             ConfigurationModeSwitchComponent,
         } = this.props;
 
+        const isMobile = isMobileDevice();
         const boxStyle = boxed ? classes.card : classes.cardUnboxed;
         return (
             <Card className={clsx(boxStyle, customClassName('cta-box'))}>
@@ -692,6 +777,21 @@ class AmountPrice extends React.Component {
                         className={classes.cardContentWrapper}
                         classes={{ root: classes.AmountPriceContent }}
                     >
+                        {!isMobile && (
+                            <Grid container>
+                                <Grid item xs={12} sm={12} md={12} lg={12} className={classes.summary}>
+                                    <Icon>list_alt</Icon>
+                                    <Button
+                                        className={classes.configurationButton}
+                                        variant="text"
+                                        size="small"
+                                        onClick={this.openConfigurationOverview}
+                                    >
+                                        {t('amountPrice.configurationOverview')}
+                                    </Button>
+                                </Grid>
+                            </Grid>
+                        )}
                         <Grid container>
                             {!hidePieces && (
                                 <Grid item xs={12} sm={6} md={5} lg={5}>
@@ -781,15 +881,21 @@ class AmountPrice extends React.Component {
     render() {
         const { wrapperClass, renderPriceBox, ...props } = this.props;
 
-        const { showPriceOverview } = this.state;
-        const { openPriceOverview, renderDefaultPriceBox } = this;
+        const { showPriceOverview, showConfigurationOverview } = this.state;
+        const { openPriceOverview, openConfigurationOverview, renderDefaultPriceBox } = this;
 
         return (
             <div className={wrapperClass}>
                 {renderPriceBox
-                    ? renderPriceBox({ ...props, openPriceOverview, renderDefaultPriceBox })
+                    ? renderPriceBox({
+                          ...props,
+                          openPriceOverview,
+                          openConfigurationOverview,
+                          renderDefaultPriceBox,
+                      })
                     : this.renderDefaultPriceBox()}
                 {showPriceOverview && this.renderPriceOverview()}
+                {showConfigurationOverview && this.renderConfigurationOverview()}
             </div>
         );
     }

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid/Grid';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+
+const styles = () => ({
+    li: {
+        listStyle: 'none',
+    },
+    gridWrapper: {
+        padding: '10px 0 25px 0',
+    },
+    title: {
+        fontWeight: 'bold',
+    },
+});
+
+class ConfigurationOverview extends React.Component {
+    static propTypes = {
+        optionclassifications: PropTypes.array,
+        classes: PropTypes.object,
+    };
+    render() {
+        const { optionclassifications, classes } = this.props;
+
+        return (
+            <div className={classes.gridWrapper}>
+                <Grid container spacing={2}>
+                    {optionclassifications?.map(optionclassification => (
+                        <>
+                            <Grid item xs={6} key={optionclassification.identifier}>
+                                <Typography className={classes.title}>
+                                    {optionclassification.title}
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={6}>
+                                {optionclassification.selectedoptions?.map(option => (
+                                    <li key={option.identifier} className={classes.li}>
+                                        {option.amount !== 1 ? (
+                                            <Typography>
+                                                {option.amount} x {option.title}
+                                            </Typography>
+                                        ) : (
+                                            <Typography>{option.title}</Typography>
+                                        )}
+                                    </li>
+                                ))}
+                            </Grid>
+                        </>
+                    ))}
+                </Grid>
+            </div>
+        );
+    }
+}
+
+export default withStyles(styles, { name: 'ConfigurationOverview' })(ConfigurationOverview);

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

@@ -18,6 +18,7 @@ import {
     getClientTexts,
     showCallToAction,
     showReceiveOfferForm,
+    getConfiguration,
 } from '../../../Reducers/Configurator/Selectors';
 import { getVisibilityMapProperty } from '../../../Reducers/UI/Selectors';
 import { getConf } from '../../../configuration';
@@ -196,6 +197,7 @@ const mapStateToProps = ({ configurator, configurationMode, ui }) => {
         clientTexts: getClientTexts(configurator),
         addToCartPopUpLoader: getVisibilityMapProperty(ui, 'addToCartPopUpLoader'),
         userComment: get(configurator, 'configuration.customdata.comment', ''),
+        userConfiguration: getConfiguration(configurator),
     };
 };
 

package/src/App/configuration.js

@@ -13,7 +13,7 @@ const DEVELOPMENT_HOST_LOCAL = 'http://localhost:10030';
 
 const hostsByNodeEnv = {
     production: '',
-    development: DEVELOPMENT_HOST_INT,
+    development: DEVELOPMENT_HOST_LOCAL,
     test: '',
 };