@configuratorware/configurator-frontendgui 1.41.2 → 1.42.2

package/src/App/Screens/Configurator/Components/ItemTile/ItemTile.js

@@ -1,11 +1,18 @@
-import React from 'react';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import MainButton from '../../../../../Shared/Components/MainButton';
 import { T } from 'Framework/i18n';
+import PropTypes from 'prop-types';
+import { fetchConfiguration } from '../../../../Reducers/Configurator/Actions';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import { withGlobalLoader } from '../../../../Reducers/UI/Actions';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import getImageUrl from '../../../../Utils/getImageUrl';
 
 const useStyles = makeStyles(
-    theme => ({
+    () => ({
         root: {
             display: 'flex',
             flexDirection: 'column',
@@ -20,7 +27,7 @@ const useStyles = makeStyles(
         },
         image: {
             margin: 'auto',
-            width: '170px',
+            width: '70%',
             height: '170px',
             '& img': {
                 width: '100%',
@@ -28,42 +35,73 @@ const useStyles = makeStyles(
                 objectFit: 'contain',
             },
         },
+        progress: {
+            margin: 'auto',
+            width: '70%',
+            height: '170px',
+        },
         title: {
-            marginBottom: 'auto',
+            wordWrap: 'break-word',
+            margin: 'auto',
+            height: '30%',
+            width: '100%',
         },
         buttonContainer: {
-            width: '150px',
+            width: '70%',
             margin: 'auto',
         },
-        button: {
-            width: '100%',
-            backgroundColor: theme.palette.primary.main,
-            '&:hover': {
-                backgroundColor: theme.palette.primary.light,
-            },
-        },
     }),
     { name: 'ItemTile' }
 );
 
 const ItemTile = ({ title, linkTo, image }) => {
     const classes = useStyles();
+    const dispatch = useDispatch();
+    const history = useHistory();
+    const [loadState, setLoadState] = useState(true);
+
+    const handleClick = async link => {
+        try {
+            await dispatch(withGlobalLoader(fetchConfiguration(linkTo)));
+            history.push(link);
+        } catch (e) {
+            alert(`could not load configuration: ${linkTo}`);
+        }
+    };
 
     return (
         <div className={classes.root}>
             <Typography variant="h6" className={classes.title}>
                 {title}
             </Typography>
+            {loadState && <CircularProgress className={classes.progress} />}
             <div className={classes.image}>
-                <img src={image} alt={title} />
+                <img
+                    src={getImageUrl(image)}
+                    alt={title}
+                    onLoad={() => setLoadState(false)}
+                    onError={() => setLoadState(false)}
+                />
             </div>
             <div className={classes.buttonContainer}>
-                <a href={linkTo}>
-                    <MainButton className={classes.button}>{T('itemOverview.customize')}</MainButton>
-                </a>
+                <MainButton fullWidth onClick={() => handleClick(`/identifier:${linkTo}`)}>
+                    {T('itemOverview.customize')}
+                </MainButton>
             </div>
         </div>
     );
 };
 
+ItemTile.defaultProps = {
+    title: '',
+    linkTo: '',
+    image: '',
+};
+
+ItemTile.propTypes = {
+    title: PropTypes.string,
+    linkTo: PropTypes.string,
+    image: PropTypes.string,
+};
+
 export default ItemTile;

package/src/App/Screens/Configurator/Components/LandscapeInformation/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
-import Icon from '@material-ui/core/Icon/Icon';
+import Icon from '@material-ui/core/Icon';
 import { t } from 'Framework/i18n';
 import Typography from '@material-ui/core/Typography';
 import PropTypes from 'prop-types';

package/src/App/Screens/Configurator/Components/NoVisualization/NoVisualization.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { T } from 'Framework/i18n';
 import Typography from '@material-ui/core/Typography';
-import { withStyles } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
 const styles = {
     root: {

package/src/App/Screens/Configurator/Components/PreviewPortal/index.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import { isFunction } from 'lodash';
-import Icon from '@material-ui/core/Icon/Icon';
-import withStyles from '@material-ui/core/styles/withStyles';
-import withWidth from '@material-ui/core/withWidth/withWidth';
-import { Typography, Button, Grid } from '@material-ui/core';
+import isFunction from 'lodash/isFunction';
+import Icon from '@material-ui/core/Icon';
+import { withStyles } from '@material-ui/core/styles';
+import withWidth from '@material-ui/core/withWidth';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
 import { withAlignTarget } from 'redhotmagma-visualization/AlignTargetProvider';
 import { t } from 'Framework/i18n';
 import AnalyticsWrapper from 'App/Shared/Components/Analytics/AnalyticsWrapper';

package/src/App/Screens/Configurator/Components/Thumbnail/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Scrollbars } from 'react-custom-scrollbars';
-import { isFunction, get } from 'lodash';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Icon from '@material-ui/core/Icon/Icon';
+import isFunction from 'lodash/isFunction';
+import get from 'lodash/get';
+import { withStyles } from '@material-ui/core/styles';
+import Icon from '@material-ui/core/Icon';
 import { withResizeDetectWrapper } from 'Shared/HOCs/ResizeDetect/ResizeDetect';
-import { Typography } from '@material-ui/core';
+import Typography from '@material-ui/core/Typography';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 
 export const styles = theme => ({

package/src/App/Screens/Configurator/Components/TotalPrice/TotalPrice.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography/index';
-import Divider from '@material-ui/core/Divider/index';
-import makeStyles from '@material-ui/core/styles/makeStyles';
+import Typography from '@material-ui/core/Typography';
+import Divider from '@material-ui/core/Divider';
+import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(
     {

package/src/App/Screens/Configurator/Containers/AmountPrice.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import AmountPrice from 'App/Shared/Containers/AmountPrice';
 import ProductVariant from 'App/Shared/Containers/ProductVariant';
 import ConfigurationModeSwitch from './ConfigurationModeSwitch';
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(
     theme => {

package/src/App/Screens/Configurator/Containers/__tests__/CalculationWidget.test.js

@@ -19,7 +19,10 @@ import uiReducer from 'App/Reducers/UI/Reducer';
 import ServiceLocator from 'App/ServiceLocator';
 import mountWithState from 'Utils/Test/mountWithState';
 import { actionTypes as designAreaActionTypes } from 'App/Reducers/DesignArea/Actions';
-import { Switch, Select, Button } from '@material-ui/core';
+import Switch from '@material-ui/core/Switch';
+import Select from '@material-ui/core/Select';
+import Button from '@material-ui/core/Button';
+
 import configurationModeReducer from 'App/Reducers/ConfigurationMode/Reducer';
 
 const createInitialState = () => ({

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useEffect } from 'react';
-import { hot } from 'react-hot-loader';
 
 import { containerConnect } from 'Framework/ComponentContainer';
 
@@ -38,8 +37,9 @@ import { getConf } from 'App/configuration';
 
 import { DesignerScreen } from 'App/Modules/Designer/DesignerScreen';
 import { CreatorScreen } from 'App/Modules/Creator/CreatorScreen';
-import { useMediaQuery } from '@material-ui/core';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { Services } from '../../ServiceLocator';
+import { useParams } from 'react-router';
 
 /**
  * Main Screen of the configurator
@@ -56,6 +56,13 @@ export const Configurator = props => {
         }
     }, [imageOnly]);
 
+    let { identifier, code } = useParams();
+    useEffect(() => {
+        if ((identifier && identifier !== props.loadIdentifier) || (code && code !== props.loadCode)) {
+            Services.configurator.initialize();
+        }
+    }, [identifier, code]);
+
     const { fatalError } = props;
     if (fatalError) {
         return <ErrorPage />;
@@ -124,8 +131,6 @@ Configurator.defaultProps = {
     isPortraitMode: false,
 };
 
-const ConfiguratorHot = hot(module)(Configurator);
-
 const mapStateToProps = state => {
     const activeDesignArea = isAnyDesignAreaSelected(state);
     const fallbackMode = 'fallback' === getCurrentVisualizationSettings(state);
@@ -142,6 +147,7 @@ const mapStateToProps = state => {
     const showAddToCartButton = state.ui.visibilityMap.addToCartButton;
     const showConfigurationVariantSelection = state.ui.visibilityMap.configurationvariantSelection;
     const visualizationOverlayMode = visualizationModeCheck(state).is2DOverlay();
+    const { loadIdentifier, loadCode } = state.configurator;
 
     const configuration = {
         showAddToCartButton: getConf('showAddToCartButton'),
@@ -151,7 +157,7 @@ const mapStateToProps = state => {
     };
 
     return {
-        Component: ConfiguratorHot,
+        Component: Configurator,
         selectedConfigurationMode,
         showConfigurationModeSwitch,
         activeDesignArea,
@@ -166,6 +172,8 @@ const mapStateToProps = state => {
         showConfigurationVariantSelection,
         configuration,
         visualizationOverlayMode,
+        loadIdentifier,
+        loadCode,
     };
 };
 

package/src/App/Screens/Configurator/__tests__/Screen.test.js

@@ -6,6 +6,8 @@ jest.mock('react-file-drop/dist/FileDrop/FileDrop.js', () => ({}));
 import { ThemeMixer } from '../ThemeProvider';
 import { createStoreProvider } from '../../../../Utils/Test/createStoreProvider';
 import ServiceLocator from '../../../ServiceLocator';
+jest.mock('react-router');
+import { useParams } from 'react-router';
 
 describe('Screen component', () => {
     ServiceLocator.provide(
@@ -20,8 +22,12 @@ describe('Screen component', () => {
             initDesignAreaInteraction() {
                 return null;
             }
+            registerComponentChangeListener() {
+                return null;
+            }
         })()
     );
+    useParams.mockImplementation(() => ({}));
 
     it('renders the custom elements', () => {
         const { StoreProvider } = createStoreProvider();

package/src/App/Screens/DesignerProductPreview/Screen.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { hot } from 'react-hot-loader';
 import clsx from 'clsx';
 import { connect } from 'react-redux';
 
@@ -10,7 +9,7 @@ import Radio from '@material-ui/core/Radio';
 import Switch from '@material-ui/core/Switch';
 import Grid from '@material-ui/core/Grid';
 import FormControl from '@material-ui/core/FormControl';
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 
 import MainButton from '../../../Shared/Components/MainButton';
 import { T } from '../../../Framework/i18n';
@@ -316,4 +315,4 @@ const mapDispatchToProps = dispatch => ({
 export const ConnectedDesignerProductPreviewScreen = connect(
     mapStateToProps,
     mapDispatchToProps
-)(hot(module)(withStyles(styles, { name: 'DesignProductionPreviewScreen' })(DesignerProductPreviewScreen)));
+)(withStyles(styles, { name: 'DesignProductionPreviewScreen' })(DesignerProductPreviewScreen));

package/src/App/Screens/DesignerProductPreview/__tests__/__snapshots__/Screen.test.js.snap

@@ -8,14 +8,14 @@ exports[`Screens/DesignerProductPreview/Screen renders the initial image upload
     id="react-file-drop-mock"
   >
     <div
-      class="ImageEditDialog-imageUploadDropZone-34 DesignProductionPreviewScreen-imageUploadDropZone-4"
+      class="ImageEditDialog-imageUploadDropZone-35 DesignProductionPreviewScreen-imageUploadDropZone-4"
     >
       <div
-        class="ImageEditDialog-imageUploadContainer-35"
+        class="ImageEditDialog-imageUploadContainer-36"
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root ImageEditDialog-imageUploadIcon-36"
+          class="MuiSvgIcon-root ImageEditDialog-imageUploadIcon-37"
           focusable="false"
           viewBox="0 0 24 24"
         >
@@ -24,17 +24,17 @@ exports[`Screens/DesignerProductPreview/Screen renders the initial image upload
           />
         </svg>
         <p
-          class="MuiTypography-root ImageEditDialog-imageUploadText-44 MuiTypography-body2"
+          class="MuiTypography-root ImageEditDialog-imageUploadText-45 MuiTypography-body2"
         >
           fileUpload.dragDropFiles
         </p>
         <button
-          class="MuiButtonBase-root MuiButton-root MainButton-root-50 MuiButton-contained ImageEditDialog-imageUploadButton-39"
+          class="MuiButtonBase-root MuiButton-root MainButton-root-52 MuiButton-contained ImageEditDialog-imageUploadButton-40"
           tabindex="0"
           type="button"
         >
           <span
-            class="MuiButton-label MainButton-label-51"
+            class="MuiButton-label MainButton-label-53"
           >
             fileUpload.chooseImage
             <input
@@ -46,20 +46,20 @@ exports[`Screens/DesignerProductPreview/Screen renders the initial image upload
       </div>
     </div>
     <div
-      class="MuiFormGroup-root ImageEditDialog-imageUploadOwnership-40"
+      class="MuiFormGroup-root ImageEditDialog-imageUploadOwnership-41"
     >
       <label
         class="MuiFormControlLabel-root"
       >
         <span
           aria-disabled="false"
-          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-52 MuiCheckbox-root ImageEditDialog-imageUploadOwnershipCheckbox-41 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
+          class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-54 MuiCheckbox-root ImageEditDialog-imageUploadOwnershipCheckbox-42 MuiCheckbox-colorSecondary MuiIconButton-colorSecondary"
         >
           <span
             class="MuiIconButton-label"
           >
             <input
-              class="PrivateSwitchBase-input-55"
+              class="PrivateSwitchBase-input-57"
               data-indeterminate="false"
               type="checkbox"
             />
@@ -95,13 +95,13 @@ exports[`Screens/DesignerProductPreview/Screen renders the initial image upload
       class="MuiGrid-root MuiGrid-item"
     >
       <button
-        class="MuiButtonBase-root MuiButton-root MainButton-root-50 MuiButton-contained Mui-disabled Mui-disabled"
+        class="MuiButtonBase-root MuiButton-root MainButton-root-52 MuiButton-contained Mui-disabled Mui-disabled"
         disabled=""
         tabindex="-1"
         type="button"
       >
         <span
-          class="MuiButton-label MainButton-label-51"
+          class="MuiButton-label MainButton-label-53"
         >
           <span>
             fileUpload.continue

package/src/App/Screens/ItemOverview.js

@@ -2,12 +2,19 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import ItemTile from './Configurator/Components/ItemTile/ItemTile';
-import makeStyles from '@material-ui/core/styles/makeStyles';
-import { AppBar, ButtonBase, Typography, Grid, useMediaQuery, useTheme } from '@material-ui/core';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Typography from '@material-ui/core/Typography';
+import Grid from '@material-ui/core/Grid';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { T } from 'Framework/i18n';
 import { lazyFetch } from '../Utils/Request/lazyFetch';
 import { Pagination } from '@material-ui/lab';
-import { getConf } from '../configuration';
+import GlobalLoader from '../Shared/Containers/GlobalLoader';
+import { withGlobalLoader } from '../Reducers/UI/Actions';
+import { useDispatch } from 'react-redux';
+import DefaultThemeProvider from './Configurator/ThemeProvider';
 
 const useStyles = makeStyles(
     theme => ({
@@ -73,55 +80,61 @@ const useStyles = makeStyles(
     { name: 'ItemOverview' }
 );
 
-const ItemOverview = ({ pageSize }) => {
+export const ItemOverview = ({ ThemeProvider, pageSize }) => {
     const classes = useStyles();
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
-    const [allItems, setAllItems] = useState([]);
     const [items, setItems] = useState([]);
     const [categories, setCategories] = useState([]);
-    const [chosenCategory, setChosenCategory] = useState('');
+    const [chosenCategory, setChosenCategory] = useState(0);
     const [pagination, setPagination] = useState({
         count: 0,
         from: 0,
-        to: pageSize,
     });
-    const HOST = getConf('network.host');
+    const dispatch = useDispatch();
 
     const fetchItems = async () => {
-        const response = await lazyFetch('items');
-        return response.data.data;
+        const params = {
+            offset: pagination.from,
+            limit: pageSize,
+        };
+        if (chosenCategory) {
+            params['item-classifications'] = `[${chosenCategory}]`;
+        }
+        const response = await dispatch(
+            withGlobalLoader(() =>
+                lazyFetch({
+                    url: `items`,
+                    params,
+                })
+            )
+        );
+        return response.data;
     };
 
     const fetchCategories = async () => {
-        const response = await lazyFetch('item-classifications');
+        const response = await dispatch(() => lazyFetch('item-classifications'));
         return response.data;
     };
 
     useEffect(() => {
         (async () => {
-            const items = await fetchItems();
-            setAllItems(items);
-            setItems(items);
             setCategories(await fetchCategories());
         })();
     }, []);
 
     useEffect(() => {
-        setPagination({ ...pagination, count: Math.ceil(items.length / pageSize) });
-    }, [items, pagination.from, pagination.to]);
+        setPagination({ ...pagination, from: 0 });
+    }, [chosenCategory]);
 
     useEffect(() => {
-        setPagination({ ...pagination, from: 0, to: pageSize });
-
-        if (!chosenCategory) return setItems(allItems);
-        setItems(
-            allItems.filter(item =>
-                item.itemclassifications.some(classification => classification.identifier === chosenCategory)
-            )
-        );
-    }, [chosenCategory]);
+        (async () => {
+            const { data: items, count } = await fetchItems();
+            setItems(items);
+            setPagination({ ...pagination, count: Math.ceil(count / pageSize) });
+        })();
+    }, [pagination.from, chosenCategory]);
 
     const onClickCategory = identifier => {
         if (chosenCategory === identifier) return setChosenCategory('');
@@ -130,9 +143,7 @@ const ItemOverview = ({ pageSize }) => {
 
     const handlePageChange = (event, page) => {
         const from = (page - 1) * pageSize;
-        const to = (page - 1) * pageSize + pageSize;
-
-        setPagination({ ...pagination, from: from, to: to });
+        setPagination({ ...pagination, from: from });
     };
 
     const renderCategories = () => {
@@ -140,14 +151,11 @@ const ItemOverview = ({ pageSize }) => {
             <div className={classes.categoryContainer}>
                 {categories.map(category => (
                     <ButtonBase
-                        className={clsx(
-                            classes.categoryButton,
-                            chosenCategory === category.identifier && 'active'
-                        )}
+                        className={clsx(classes.categoryButton, chosenCategory === category.id && 'active')}
                         key={category.identifier}
-                        onClick={() => onClickCategory(category.identifier)}
+                        onClick={() => onClickCategory(category.id)}
                     >
-                        <Typography variant="body2">{category.translated_title}</Typography>
+                        {category.translated_title}
                     </ButtonBase>
                 ))}
             </div>
@@ -168,46 +176,55 @@ const ItemOverview = ({ pageSize }) => {
     };
 
     const renderItems = () => {
-        const itemsPerPage = items.slice(pagination.from, pagination.to);
-
-        return (
-            <div className={classes.itemContainer}>
-                {renderPagination()}
-                <Grid container className={classes.gridContainer}>
-                    {itemsPerPage.map((item, index) => (
-                        <Grid item key={item.identifier} xs={12} sm={6} md={3}>
-                            <ItemTile
-                                title={item.title}
-                                index={index}
-                                image={item.thumbnail}
-                                linkTo={`${HOST}/identifier:${item.identifier}`}
-                                key={item.identifier}
-                            ></ItemTile>
-                        </Grid>
-                    ))}
-                </Grid>
-            </div>
-        );
+        if (items.length < 1) {
+            return (
+                <div>
+                    <Typography variant="body2">{T('itemOverview.noItems')}</Typography>
+                </div>
+            );
+        } else {
+            return (
+                <div className={classes.itemContainer}>
+                    {renderPagination()}
+                    <Grid container className={classes.gridContainer}>
+                        {items.map((item, index) => (
+                            <Grid item key={item.identifier} xs={12} sm={6} md={3}>
+                                <ItemTile
+                                    title={item.title}
+                                    index={index}
+                                    image={item.thumbnail}
+                                    linkTo={item.identifier}
+                                    key={item.identifier}
+                                />
+                            </Grid>
+                        ))}
+                    </Grid>
+                </div>
+            );
+        }
     };
 
     return (
-        <>
-            <AppBar className={classes.header}>
+        <ThemeProvider>
+            <AppBar color="default" className={classes.header}>
                 <Typography variant="h5">{T('itemOverview.title')}</Typography>
             </AppBar>
             <div className={classes.container}>
                 {!!categories.length && renderCategories()}
                 {!!items.length && renderItems()}
             </div>
-        </>
+            <GlobalLoader />
+        </ThemeProvider>
     );
 };
 
 ItemOverview.propTypes = {
+    ThemeProvider: PropTypes.elementType.isRequired,
     pageSize: PropTypes.number,
 };
 
 ItemOverview.defaultProps = {
+    ThemeProvider: DefaultThemeProvider,
     pageSize: 8,
 };
 

package/src/App/Screens.js

@@ -10,7 +10,7 @@ const screens = getConf('screens', {});
 // note: require should be used here to avoid importing the screen when it's not used
 
 if (!screens.ItemOverview) {
-    const ItemOverview = require('./Screens/ItemOverview').default;
+    const { ItemOverview } = require('./Screens/ItemOverview');
     screens.ItemOverview = ItemOverview;
 }
 if (!screens.Configurator) {

package/src/App/Services/AnalyticsService.js

@@ -2,7 +2,8 @@ import { Services } from '../ServiceLocator';
 import { EventTypes } from 'App/Constant';
 import { t } from '../../Framework/i18n';
 import { isDesignerMode } from '../Reducers/ConfigurationMode/Selectors';
-import { map, filter } from 'lodash';
+import filter from 'lodash/filter';
+import map from 'lodash/map';
 
 export const actionsToTrack = {
     /***************************\