@configuratorware/configurator-admingui 1.27.3-beta.1 → 1.27.3-beta.5

package/src/Screens/Client/Components/PdfMarkdownField.js

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import ReactMde from 'react-mde';
+import * as Showdown from 'showdown';
+import 'react-mde/lib/styles/css/react-mde-all.css';
+import FormControlLabel from '../../../UIComponents/FormControlLabel';
+import { withStyles } from '@material-ui/core/styles';
+import debounce from 'lodash/debounce';
+
+const MARK_DOWN_FIELD_TRANSLATION_KEY = 'markDownField';
+
+import { use, t } from '../../../App/i18n';
+import ErrorWrapper from '../../../Components/FormFragments/ErrorWrapper';
+use(
+    {
+        en: {
+            [MARK_DOWN_FIELD_TRANSLATION_KEY]: {
+                write: 'Write',
+                preview: 'Preview',
+            },
+        },
+        de: {
+            [MARK_DOWN_FIELD_TRANSLATION_KEY]: {
+                write: 'Schreiben',
+                preview: 'Vorschau',
+            },
+        },
+    },
+    true
+);
+
+const converter = new Showdown.Converter({
+    tables: true,
+    simplifiedAutoLink: true,
+    openLinksInNewWindow: true,
+    simpleLineBreaks: true,
+});
+
+const toolbarCommands = [['bold', 'italic'], ['link'], ['unordered-list', 'ordered-list']];
+
+const StyledFormControlLabel = withStyles({
+    labelPlacementStart: {},
+    root: {
+        margin: 0,
+        alignItems: 'flex-start',
+        width: '100%',
+    },
+})(FormControlLabel);
+
+const StyledMde = withStyles({
+    reactMde: {
+        width: '100%',
+        border: 0,
+        marginBottom: 10,
+    },
+    toolbar: {
+        background: 'none',
+        border: 0,
+    },
+    textArea: {
+        border: '1px solid rgba(0, 0, 0, 0.2) !important',
+    },
+    preview: {
+        overflowX: 'auto',
+    },
+})(ReactMde);
+
+export const PdfMarkDownField = props => {
+    const [selectedTab, setSelectedTab] = useState('write');
+    const { value, error, onChange, label, classes, maxEditorHeight, name, htmlField, helperText } = props;
+    const [currentValue, setCurrentValue] = useState(value.text);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    const changeHandler = value => {
+        setCurrentValue(value);
+        onChange(htmlField, converter.makeHtml(value));
+        onChange(name, value);
+        setCurrentValue(value);
+    };
+    const translations = t(MARK_DOWN_FIELD_TRANSLATION_KEY);
+
+    return (
+        <ErrorWrapper error={error}>
+            <StyledFormControlLabel
+                label={label}
+                labelPlacement="top"
+                classes={classes}
+                control={
+                    <StyledMde
+                        maxEditorHeight={maxEditorHeight}
+                        value={currentValue}
+                        onChange={changeHandler}
+                        selectedTab={selectedTab}
+                        onTabChange={setSelectedTab}
+                        generateMarkdownPreview={markdown => Promise.resolve(converter.makeHtml(markdown))}
+                        childProps={{
+                            writeButton: {
+                                tabIndex: -1,
+                            },
+                        }}
+                        toolbarCommands={toolbarCommands}
+                        l18n={translations}
+                    />
+                }
+            />
+            {helperText && <span className="helper-text">{helperText}</span>}
+        </ErrorWrapper>
+    );
+};
+
+PdfMarkDownField.propTypes = {
+    value: PropTypes.string,
+    error: PropTypes.node,
+    onChange: PropTypes.func.isRequired,
+    label: PropTypes.node,
+    classes: PropTypes.object,
+    maxEditorHeight: PropTypes.number,
+    name: PropTypes.string,
+    htmlField: PropTypes.string,
+    helperText: PropTypes.string,
+};
+
+PdfMarkDownField.defaultProps = {
+    value: '',
+};
+
+export default PdfMarkDownField;

package/src/Screens/Client/Containers/Edit.js

@@ -4,6 +4,9 @@ import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
 import TextFields from '../Components/TextFields';
 import ColorTextField from '../Components/ColorTextField';
 import { t } from '../../../App/i18n';
+import React from 'react';
+import { CallToActionField } from '../../../Components/CallToActionField';
+import { PdfMarkDownField } from '../Components/PdfMarkdownField';
 
 const formFields = [
     {
@@ -11,11 +14,6 @@ const formFields = [
         label: 'Identifier',
         type: 'text',
     },
-    {
-        name: 'email',
-        label: 'Email',
-        type: 'text',
-    },
     {
         name: 'users',
         label: 'Users',
@@ -47,7 +45,7 @@ const formFields = [
         type: SimpleNestedData,
         fields: [
             {
-                name: "highlightColor",
+                name: 'highlightColor',
                 type: ColorTextField,
             },
             {
@@ -67,6 +65,20 @@ const formFields = [
             },
         ],
     },
+    {
+        name: 'pdfHeaderText',
+        label: 'PDF Header',
+        htmlField: 'pdfHeaderHtml',
+        type: PdfMarkDownField,
+        helperText: t('headerInfo'),
+    },
+    {
+        name: 'pdfFooterText',
+        label: 'PDF Footer',
+        htmlField: 'pdfFooterHtml',
+        type: PdfMarkDownField,
+        helperText: t('footerInfo'),
+    },
     {
         name: 'contactName',
         label: 'Clientname / Shopname',
@@ -93,38 +105,38 @@ const formFields = [
         type: 'text',
     },
     {
-        name: 'contactEmail',
-        label: 'E-mail (contact)',
+        name: 'toEmailAddresses',
+        label: 'E-Mail(s) receiver for request offer',
         type: 'text',
+        helperText: t('emailHint'),
     },
     {
-        name: 'callToAction',
-        label: 'callToAction.callToAction',
-        type: 'select',
-        sourceConfig: {
-            text: function text(_ref) {
-                const label = _ref.label;
-                return t(label);
-            },
-            value: 'value',
-        },
-        source: [
-            {
-                value: 'addToCart',
-                label: 'callToAction.addToCart',
-                id: 'addToCart',
-            },
-            {
-                value: 'requestOffer',
-                label: 'callToAction.requestOffer',
-                id: 'requestOffer',
-            },
+        name: 'fromEmailAddress',
+        label: 'E-Mail sender for request offer',
+        type: 'text',
+    },
+    {
+        name: 'ccEmailAddresses',
+        label: 'CC E-Mail(s) receiver for request offer',
+        type: 'text',
+        helperText: t('emailHint'),
+    },
+    {
+        name: 'bccEmailAddresses',
+        label: 'BCC E-Mail(s) receiver for request offer',
+        type: 'text',
+        helperText: t('emailHint'),
+    },
+    {
+        type: CallToActionField,
+        fields: [
             {
-                value: 'none',
-                label: 'callToAction.none',
-                id: 'none',
+                name: 'callToAction',
+                label: 'callToAction.callToAction',
+                type: 'select',
             },
         ],
+        dynamicDefaultLabel: false
     },
     {
         type: TextFields,

package/src/Screens/Client/Reducers/Reducer.js

@@ -25,13 +25,21 @@ const initialState = {
                     font: { value: '' },
                 },
             },
-            contactName: { value: '', constraints: { presence: true } },
-            contactStreet: { value: '', constraints: { presence: true } },
-            contactPostCode: { value: '', constraints: { presence: true } },
-            contactCity: { value: '', constraints: { presence: true } },
-            contactPhone: { value: '', constraints: { presence: true } },
-            contactEmail: { value: '', constraints: { presence: true } },
-            callToAction: 'addToCart',
+            pdfHeaderText: { value: '' },
+            pdfHeaderHtml: { value: '' },
+            pdfFooterText: { value: '' },
+            pdfFooterHtml: { value: '' },
+            contactName: { value: '' },
+            contactStreet: { value: '' },
+            contactPostCode: { value: '' },
+            contactCity: { value: '' },
+            contactPhone: { value: '' },
+            contactEmail: { value: '' },
+            toEmailAddresses: { value: '' },
+            fromEmailAddress: { value: '' },
+            ccEmailAddresses: { value: '' },
+            bccEmailAddresses: { value: '' },
+            callToAction: '',
             channels: { value: [] },
             customCss: '',
         },

package/src/Screens/Client/Styles.scss

@@ -0,0 +1,3 @@
+.helper-text {
+  font-size: 12px
+}

package/src/Screens/Client/Translations.js

@@ -12,6 +12,9 @@ require('../../App/i18n').use(
                     addButtonLabel: 'Add user',
                 },
             },
+            headerInfo: 'Please check your changes in a generated pdf to make sure it looks as expected',
+            footerInfo: 'Please check your changes in a generated pdf to make sure it looks as expected',
+            emailHint: 'separate multiple addresses with a semicolon',
         },
         de: {
             clients: 'Klienten',
@@ -20,11 +23,15 @@ require('../../App/i18n').use(
             'Theme - Font': 'Theme - Font',
             termsAndConditionsLink: 'Terms and conditions link',
             'Clientname / Shopname': 'Bezeichner/ Shopname',
+            'E-mail (contact)': 'E-Mail (Kontakt)',
             'Street / no': 'Straße / Hausnummer',
             'Post code': 'PLZ',
             City: 'Stadt',
             Phone: 'Telefonnummer',
-            'E-mail (contact)': 'E-Mail (Kontakt)',
+            'E-Mail(s) receiver for request offer': 'E-Mail(s) für die Angebotsanfrage',
+            'E-Mail sender for request offer': 'Absender E-Mail für die Angebotsanfrage',
+            'CC E-Mail(s) receiver for request offer': 'CC E-Mail(s) für die Angebotsanfrage',
+            'BCC E-Mail(s) receiver for request offer': 'BCC E-Mail(s) für die Angebotsanfrage',
             'Client logo': 'Kunden Logo',
             Texts: 'Texte',
             themeColorError: 'Bitte gib einen hexadezimalen Farbwert ein (z.B. #0000ff)',
@@ -34,6 +41,9 @@ require('../../App/i18n').use(
                     addButtonLabel: 'Benutzer hinzufügen',
                 },
             },
+            headerInfo: 'Bitte überprüfe Deine Änderungen in einem generierten PDF',
+            footerInfo: 'Bitte überprüfe Deine Änderungen in einem generierten PDF',
+            emailHint: 'trenne mehrere Adressen mit einem Semikolon',
         },
     },
     true

package/src/Screens/Creator/Components/CheckData/CheckData.js

@@ -121,7 +121,7 @@ const styles = {
     },
 };
 
-const CheckData = withStyles(styles)(({ itemIdentifier, checkItemData, area, license, classes }) => {
+const CheckData = withStyles(styles)(({ itemIdentifier, itemId, checkItemData, area, license, classes }) => {
     const [data, setData] = useState(null);
     const [error, setError] = useState(null);
     const loadData = async () => {
@@ -206,7 +206,7 @@ const CheckData = withStyles(styles)(({ itemIdentifier, checkItemData, area, lic
         <AsyncDialog
             buttonLabel={T('dataCheck.buttonLabel')}
             dialogTitle={T('dataCheck.dialogTitle')}
-            buttonDisabled={!itemIdentifier}
+            buttonDisabled={!itemId}
             asyncTask={loadData}
         >
             {data && renderResult(data)}

package/src/Screens/Creator/Components/ComponentEditor.js

@@ -90,10 +90,12 @@ export const ComponentEditor = ({ component, onChange, onClose }) => {
         (loading ? (
             <CircularProgress size={24} />
         ) : (
-            <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-            }}>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                }}
+            >
                 {T('componentEditor.dialogInfo')}
 
                 <SelectField
@@ -109,7 +111,9 @@ export const ComponentEditor = ({ component, onChange, onClose }) => {
                         fontSize: '1.2 em',
                     }}
                 >
-                    <MenuItem value={'default'}>{T('componentEditor.fields.linkedViewDefaultLabel')}</MenuItem>
+                    <MenuItem value={'default'}>
+                        {T('componentEditor.fields.linkedViewDefaultLabel')}
+                    </MenuItem>
                     {creatorViewList &&
                         creatorViewList.map(option => (
                             <MenuItem value={option.id} key={option.id}>

package/src/Screens/Creator/Components/ConfiguratorQuickView.js

@@ -1,12 +1,17 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
-import { CONFIGURATION_REDUCER_NAME, showConfiguratorAdminMode } from '../Reducers/ConfigurationActions';
+import {
+    CONFIGURATION_REDUCER_NAME,
+    hideOpenCreatorPreviewError,
+    showConfiguratorAdminMode,
+} from '../Reducers/ConfigurationActions';
 import ConfiguratorOverlay from '../../../Components/GeneralFragments/ConfiguratorOverlay';
 import { CREATOR_REDUCER_NAME } from '../Reducers/Actions';
 import networkConfig from '../../../App/Config/network';
 import { T } from '../../../App/i18n';
 import RaisedButton from '../../../UIComponents/RaisedButton';
+import ShowPreviewErrorDialog from './ShowPreviewErrorDialog';
 
 const mapStateToProps = state => {
     const { i18n } = state;
@@ -15,6 +20,8 @@ const mapStateToProps = state => {
     const locale = i18n.locale.replace('-', '_');
     const configurationData = state[CONFIGURATION_REDUCER_NAME];
     const { adminModeHash } = configurationData;
+    const itemId = get(state[CREATOR_REDUCER_NAME], 'data.id.value');
+    const showOpenCreatorPreviewError = get(configurationData, 'showOpenCreatorPreviewError');
 
     const params = new URLSearchParams({
         _adminmode: 'quickView',
@@ -31,22 +38,45 @@ const mapStateToProps = state => {
     return {
         show: state[CONFIGURATION_REDUCER_NAME].showConfiguratorAdminMode,
         configuratorUrl,
+        itemId,
+        showOpenCreatorPreviewError,
     };
 };
 
 const mapDispatchToProps = dispatch => ({
     close: () => dispatch(showConfiguratorAdminMode(false)),
-    open: () => dispatch(showConfiguratorAdminMode(true)),
+    open: itemId =>
+        dispatch(showConfiguratorAdminMode(true, 'creator', itemId)),
+    hideOpenCreatorPreviewError: () => dispatch(hideOpenCreatorPreviewError()),
 });
 
-const ConfiguratorQuickView = ({ show, open, close, configuratorUrl, style, className }) => (
+const ConfiguratorQuickView = ({
+    show,
+    open,
+    close,
+    configuratorUrl,
+    style,
+    className,
+    itemId,
+    showOpenCreatorPreviewError,
+    hideOpenCreatorPreviewError,
+}) => (
     <div style={style} className={className}>
         <RaisedButton
             label={T('configuratorQuickView.buttonText')}
-            onClick={open}
+            onClick={() => open(itemId)}
             disabled={!configuratorUrl}
         />
         <ConfiguratorOverlay show={show} configuratorUrl={configuratorUrl} onClose={close} />
+        {showOpenCreatorPreviewError && 
+            <ShowPreviewErrorDialog
+                dialogTitle={T('openPreviewError.title')}
+                open={showOpenCreatorPreviewError}
+                onClose={hideOpenCreatorPreviewError}
+            >
+                <p>{T('openPreviewError.openCreatorPreviewError')}</p>
+            </ShowPreviewErrorDialog>
+        }
     </div>
 );
 

package/src/Screens/Creator/Components/ShowPreviewErrorDialog.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import Dialog from '../../../UIComponents/Dialog';
+import withStyles from '@material-ui/core/styles/withStyles';
+import FlatButton from '../../../UIComponents/FlatButton';
+import { T } from '../../../App/i18n';
+
+const styles = () => ({
+    paperRoot: {
+        minWidth: '450px',
+    },
+    dialogContentRoot: {
+        overflow: 'hidden',
+        display: 'flex',
+    },
+    dialogContentTextRoot: {
+        width: '100%',
+    },
+});
+
+const ShowPreviewErrorDialog = withStyles(styles)(
+    ({
+        classes,
+        dialogTitle,
+        open,
+        onClose,
+        children,
+    }) => {
+        return (
+                <Dialog
+                    title={dialogTitle}
+                    open={open}
+                    maxWidth="sm"
+                    classes={{
+                        dialogContentTextRoot: classes.dialog,
+                    }}
+                    actions={[
+                        <FlatButton label={T('Ok')} key="closeButton" primary={false} onClick={onClose} />,
+                    ]}
+                >
+                    {children}
+                </Dialog>
+        );
+    }
+);
+
+export default withStyles(styles)(ShowPreviewErrorDialog);

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/EditableText.js

@@ -29,7 +29,7 @@ export const EditableText = withStyles(() => ({
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-    }
+    },
 }))(({ value, onChange, classes, ...props }) => {
     const [open, setOpen] = useState(false);
     const [currentValue, setCurrentValue] = useState(value);

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/Image.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { T } from '../../../../../App/i18n';
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from '@material-ui/core';
 
 const Image = withStyles({
     image: {

package/src/Screens/Creator/Components/VisualizationAndMediaData/Components/ImageEditTools.js

@@ -8,7 +8,7 @@ import ConfirmDelete from './ConfirmDelete';
 import Api from '../../../../../App/Api';
 import { networkError } from '../../../../../App/Reducers/Api/Actions';
 import { useDispatch } from 'react-redux';
-import {Tooltip} from "@material-ui/core";
+import { Tooltip } from '@material-ui/core';
 
 const ImageEditTools = withStyles({
     root: {

package/src/Screens/Creator/Components/VisualizationAndMediaData/Translations.js

@@ -20,8 +20,7 @@ require('../../../../App/i18n').use(
                     'All files are put into the described folders on the server.<br/>' +
                     'Important: If you add folders and images via FTP, non existing items can also mean that the file permissions are wrong (folders and images need to be readable).',
                 infoBoxTextComponentsAndOptions:
-                    '' +
-                    'All Thumbnails and Detail Images are added globally once per component / option.',
+                    '' + 'All Thumbnails and Detail Images are added globally once per component / option.',
                 infoBoxTextViewsAndVisualization:
                     '' +
                     'For 2D Visualization image data is edited in one or more views. Here you can check the image data for each view.',
@@ -60,7 +59,8 @@ require('../../../../App/i18n').use(
                 },
                 missingImageNotice: {
                     noMissingImage: 'Alle Optionen haben Bilder für alle Ansichten und Komponenten',
-                    imagesAreMissing: 'HINWEIS: Nicht alle Optionen haben Bilder für alle Ansichten und Komponenten',
+                    imagesAreMissing:
+                        'HINWEIS: Nicht alle Optionen haben Bilder für alle Ansichten und Komponenten',
                 },
                 infoBoxText:
                     '' +

package/src/Screens/Creator/Components/VisualizationAndMediaData/VisualizationAndMediaData.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import first from 'lodash/first';
 import get from 'lodash/get';

package/src/Screens/Creator/Containers/Edit.js

@@ -133,11 +133,16 @@ class CreatorForm extends Component {
         };
 
         const itemIdentifier = _.get(this.props.entityState, 'data.identifier.value');
+        const itemId = _.get(this.props.entityState, 'data.identifier.value');
         return (
             <div className="itemEdit">
                 <div className={classes.itemStatusForm}>
                     <ConfiguratorQuickView className="configuratorQuickView" />
-                    <CheckData itemIdentifier={itemIdentifier} area={'creator'} />
+                    <CheckData 
+                        itemIdentifier={itemIdentifier} 
+                        itemId={itemId}
+                        area={'creator'} 
+                    />
                 </div>
                 <div className={classes.root}>
                     <Tabs value={currentTab} onChange={this.onTabChange} className={classes.flexContainer}>

package/src/Screens/Creator/Reducers/ConfigurationActions.js

@@ -37,6 +37,10 @@ export const CONFIGURATION_SAVE_CONFIGURATION_SUCCESS = 'CONFIGURATION_SAVE_CONF
 export const CONFIGURATION_ADMIN_MODE_HASH_KEY = 'admin_mode_hash';
 export const CONFIGURATION_ADMIN_MODE_HASH_URL = 'adminmode/gethash';
 export const CONFIGURATION_GET_ADMIN_MODE_HASH = 'CONFIGURATION_GET_ADMIN_MODE_HASH';
+export const CONFIGURATION_SHOW_DESIGNER_PREVIEW_ERROR = 'CONFIGURATION_SHOW_DESIGNER_PREVIEW_ERROR';
+export const CONFIGURATION_SHOW_CREATOR_PREVIEW_ERROR = 'CONFIGURATION_SHOW_CREATOR_PREVIEW_ERROR';
+export const CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR = 'CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR';
+export const CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR = 'CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR';
 export const CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE = 'CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE';
 export const CONFIGURATION_SET_OVERWRITE_COMPONENT_ORDER = 'CONFIGURATION_SET_OVERWRITE_COMPONENT_ORDER';
 
@@ -47,7 +51,7 @@ export const showOptionSelection = (show = false, component = null) => ({
 });
 
 import { dispatchFetchData, RECEIVE_DATA, NETWORK_ERROR } from '../../../App/Reducers/Api/Helpers';
-import { postData } from '../../../App/Reducers/Api/Actions';
+import { fetchData, postData } from '../../../App/Reducers/Api/Actions';
 
 export const invalidateOptions = () => ({
     type: CONFIGURATION_INVALIDATE_OPTIONS,
@@ -125,11 +129,43 @@ export const saveConfigurationSuccess = data => ({
     data,
 });
 
-export const showConfiguratorAdminMode = (show = false) => ({
-    type: CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE,
-    show,
+export const showOpenDesignerPreviewError = () => ({
+    type: CONFIGURATION_SHOW_DESIGNER_PREVIEW_ERROR,
+});
+
+export const showOpenCreatorPreviewError = () => ({
+    type: CONFIGURATION_SHOW_CREATOR_PREVIEW_ERROR,
+});
+
+export const hideOpenDesignerPreviewError = () => ({
+    type: CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR,
+});
+
+export const hideOpenCreatorPreviewError = () => ({
+    type: CONFIGURATION_HIDE_CREATOR_PREVIEW_ERROR,
 });
 
+export const showConfiguratorAdminMode = (show = false, configurationMode = null, itemId = null) => async dispatch => {
+    if (show) {
+        if (configurationMode === 'designer') {
+            const designareas = await dispatch(fetchData(`designareas?_language=en_GB&offset=0&limit=20&filters%5Bdesignarea.item.id%5D=${itemId}`));
+            const designareaCount = +(get(designareas, 'data.metadata.totalcount'));
+
+            if (!designareaCount) return dispatch(showOpenDesignerPreviewError()); 
+
+        } else {            
+            const components = await dispatch(fetchData(`constructionpatterns/${itemId}?_language=en_GB`));
+            const componentCount = (get(components, 'data.selectableComponents')).length;            
+
+            if (!componentCount) return dispatch(showOpenCreatorPreviewError());
+        }    
+    }
+    dispatch({
+        type: CONFIGURATION_SHOW_CONFIGURATOR_ADMIN_MODE,
+        show,
+    }); 
+};
+
 export const getAdminModeHash = () => dispatch => {
     const url = CONFIGURATION_ADMIN_MODE_HASH_URL;
     dispatch({
@@ -146,8 +182,8 @@ export const setOverwriteComponentOrder = value => async (dispatch, getState) =>
     });
     const item = get(entityState, 'data.item.value');
     if (item) {
-        const { id, identifier } = item;
-        const data = { id, identifier, overwriteComponentOrder: value };
+        const { stock, ...itemData } = item;
+        const data = { ...itemData, overwriteComponentOrder: value };
         const url = `items`;
         return dispatch(postData({ url }, data, CONFIGURATION_SAVE_ITEM)).then(apiAction => {
             switch (apiAction.type) {