@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Designer/SubScreens/DesignAreas/Containers/FormProductionMethods.js

@@ -1,1002 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { T, t, getLocale } from '../../../../../App/i18n';
-import _ from 'lodash';
-import get from 'lodash/get';
-import withStyles from '@material-ui/core/styles/withStyles';
-import Grid from '@material-ui/core/Grid/Grid';
-import Checkbox from '@material-ui/core/Checkbox/Checkbox';
-import TextField from '@material-ui/core/TextField/TextField';
-import FormControlLabel from '@material-ui/core/FormControlLabel/FormControlLabel';
-import DeleteIcon from '../../../../../UIComponents/icons/DeleteIcon';
-import IconButton from '../../../../../UIComponents/IconButton';
-import FormLabel from '@material-ui/core/FormLabel/FormLabel';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary/ExpansionPanelSummary';
-import Typography from '@material-ui/core/Typography/Typography';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails/ExpansionPanelDetails';
-import Dialog from '@material-ui/core/Dialog';
-import EditIcon from '@material-ui/icons/Edit';
-import ExpandMoreIcon from '../../../../../UIComponents/icons/ExpandMoreIcon';
-import RaisedButton from '../../../../../UIComponents/RaisedButton';
-import Add from '../../../../../UIComponents/icons/AddIcon';
-import TranslationFinder from '../../../../../Components/TranslationFinder';
-import UISelectField from '../../../../../UIComponents/SelectField';
-import ColorPalettes from '../Components/ColorPalettes';
-import { ProductionMethodMaskEditorField } from './ConnectedMaskEditorField';
-import MenuItem from '../../../../../UIComponents/MenuItem';
-import { Card } from '@material-ui/core';
-import { LocalizedPriceTextField } from '../../../../../Components/LocalizedPriceTextField';
-
-const isEngravingEffect = designProductionMethod =>
-    'engraving' === get(designProductionMethod, 'options.visualizationEffect');
-
-const styles = () => ({
-    checkboxGrid: {
-        display: 'flex',
-        justifyContent: 'space-between',
-    },
-    engravingBackgroundColor: {
-        display: 'flex',
-        alignItems: 'baseline',
-        marginBottom: '1em',
-        marginLeft: '1em',
-    },
-    inputAlign: {
-        textAlign: 'center',
-    },
-    TypographyFontWeight: {
-        fontWeight: 'bold',
-    },
-    FormLabel: {
-        padding: '20px 0 10px 0',
-    },
-    ExpansionPanelDetailRoot: {
-        display: 'block',
-    },
-    gridFormatting: {
-        display: 'flex',
-    },
-    inputText: {
-        height: '2em',
-    },
-    variantsDefaultColorBox: {
-        width: '2em',
-        height: '2em',
-        background: '#000',
-        float: 'left',
-        marginRight: '1em',
-        border: '1px solid #999',
-        borderRadius: 3,
-    },
-    varyingDimensionsInputWrapper: {
-        marginBottom: '1em',
-    },
-    validationError: {
-        color: 'red',
-    },
-    card: {
-        padding: '0 1em 0 1em',
-        margin: '1em 0 1em 0',
-    },
-    InputLabel: {
-        paddingRight: 8,
-    },
-    inputWithLabel: {
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '20px 0px',
-        alignItems: 'baseline',
-    },
-});
-
-class FormProductionMethods extends React.Component {
-    static propTypes = {
-        editDesignProductionMethods: PropTypes.array,
-        colorPalettes: PropTypes.array,
-        variantsDefaultColors: PropTypes.array,
-        onChange: PropTypes.func,
-        onRemove: PropTypes.func,
-        data: PropTypes.object,
-        classes: PropTypes.object,
-        channels: PropTypes.array,
-        rowNumber: PropTypes.number,
-        errors: PropTypes.array,
-        setProductionMethodIsDefault: PropTypes.func,
-        extendedItem: PropTypes.object,
-    };
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            checked: false,
-            expanded: null,
-            openedVariantsDefaultColor: null,
-            maxImageError: false,
-            maxTextError: false,
-        };
-    }
-
-    onChange = key => e => {
-        const { data } = this.props;
-        let { value } = e.target;
-        const nextData = {};
-
-        if (key === 'allowBulkNames' || key === 'isDefault' || key === 'designElementsLocked' || key === 'oneLineText') {
-            value = e.target.checked;
-        }
-
-        if (key === 'defaultColors') {
-            value = e.target.checked ? {} : null;
-        }
-
-        if (key === 'varyingDimensions') {
-            const checked = !this.state.checked;
-            this.setState({ checked });
-            return (
-                !checked &&
-                this.props.onChange(
-                    {
-                        ...data,
-                        width: 0,
-                        height: 0,
-                    },
-                    this.props.rowNumber
-                )
-            );
-        }
-
-        if (key === 'id') {
-            // skip if it's the same id
-            if (data.id === value) {
-                return;
-            }
-            const productionMethod = _.find(this.props.editDesignProductionMethods, { id: value }) || {};
-            const calculationTypes = _.get(productionMethod, 'calculationTypes') || [];
-            Object.assign(nextData, _.cloneDeep(productionMethod), {
-                calculationTypes: calculationTypes.map(calculationType => {
-                    if (calculationType.prices === null) {
-                        return {
-                            ...calculationType,
-                            prices: [],
-                        };
-                    } else {
-                        return calculationType;
-                    }
-                }),
-            });
-        } else {
-            Object.assign(nextData, data, { [key]: value });
-        }
-
-        if (key === 'maxTexts') {
-            if (value === '0' && data.maxImages !== null && Number(data.maxImages) === 0) {
-                this.setState({ maxTextError: true });
-                Object.assign(nextData, data, { [key]: '' });
-            }
-            if (value === '') {
-                Object.assign(nextData, data, { [key]: null });
-            }
-            if (this.state.maxTextError && (Number(value) > 0 || Number(data.maxImages) > 0)) {
-                this.setState({ maxTextError: false });
-            }
-        }
-
-        if (key === 'maxImages') {
-            if (value === '0' && data.maxTexts !== null && Number(data.maxTexts) === 0) {
-                this.setState({ maxImageError: true });
-                Object.assign(nextData, data, { [key]: '' });
-            }
-            if (value === '') {
-                Object.assign(nextData, data, { [key]: null });
-            }
-            if (this.state.maxImageError && (Number(value) > 0 || Number(data.maxTexts) > 0)) {
-                this.setState({ maxImageError: false });
-            }
-        }
-
-        if (key === 'maxElements') {
-            if (value === '') {
-                Object.assign(nextData, data, { [key]: null });
-            }
-        }
-
-        if (key === 'isDefault') {
-            this.props.setProductionMethodIsDefault(nextData.id, value);
-            return;
-        }
-
-        this.props.onChange(nextData, this.props.rowNumber);
-    };
-
-    onChangeEngravingBackgroundColor = ({ itemIdentifier }) => ({ target: { value } }) => {
-        const data = _.cloneDeep(this.props.data);
-        data.additionalData = {
-            ...data.additionalData,
-            engravingBackgroundColors: this.addOrReplaceEngravingBackgroundColor(itemIdentifier, value),
-        };
-        this.props.onChange(data, this.props.rowNumber);
-    };
-
-    onChangeCalculationTypesPrices = (calculationTypeIdentifier, price, priceIndex, value) => {
-        const data = _.cloneDeep(this.props.data);
-        const calculationTypes = _.get(data, 'calculationTypes');
-        let selectedType = _.find(calculationTypes, { identifier: calculationTypeIdentifier });
-
-        if (selectedType) {
-            const changedCalculationType = {
-                ...data,
-                calculationTypes: this.addPrices(calculationTypeIdentifier, value, price, priceIndex),
-            };
-            this.props.onChange(changedCalculationType);
-        }
-    };
-
-    addPrices(identifier, value, price, priceIndex) {
-        const { data: productionMethod } = this.props;
-        const currentValues = _.cloneDeep(_.get(productionMethod, 'calculationTypes', []));
-        const item = _.find(currentValues, { identifier: identifier });
-        if (item) {
-            let prices = _.get(item, 'prices', []);
-            const selectedPrice = prices[priceIndex];
-            if (selectedPrice) {
-                selectedPrice[price] = value;
-            }
-        }
-        return currentValues;
-    }
-
-    onCollapseClick = key => (event, expanded) => {
-        this.setState({
-            expanded: expanded ? key : false,
-        });
-    };
-
-    onRemovePrices(price, identifier) {
-        const { data: productionMethod } = this.props;
-        const newValues = _.cloneDeep(productionMethod);
-        const calculationType = _.find(newValues.calculationTypes || [], { identifier: identifier });
-
-        if (calculationType) {
-            let prices = _.get(calculationType, 'prices', []);
-            //'remove' mutates the array
-            _.remove(prices, price);
-            this.props.onDelete(newValues);
-        }
-    }
-
-    onAddNewPrices(calculationTypeIdentifier, channelID) {
-        const { data } = this.props;
-        const calculationTypes = _.get(data, 'calculationTypes', []);
-        const indexOfCalculationType = _.findIndex(calculationTypes, {
-            identifier: calculationTypeIdentifier,
-        });
-        if (indexOfCalculationType < -1) {
-            return;
-        }
-        const oldCalculationType = calculationTypes[indexOfCalculationType];
-        const modifiedCalculationType = {
-            ...oldCalculationType,
-            prices: [...(oldCalculationType.prices || []), this.createPriceObject(channelID)],
-        };
-        const newCalculationTypes = [...calculationTypes];
-        newCalculationTypes.splice(indexOfCalculationType, 1, modifiedCalculationType);
-
-        const newData = {
-            ...data,
-            calculationTypes: newCalculationTypes,
-        };
-        this.props.onChange(newData);
-    }
-
-    // noinspection JSMethodCanBeStatic
-    createPriceObject(channelID) {
-        return {
-            id: null,
-            channel: channelID,
-            colorAmountFrom: null,
-            amountFrom: null,
-            price: null,
-            priceNet: null,
-        };
-    }
-
-    addOrReplaceEngravingBackgroundColor(itemIdentifier, value) {
-        const { data: productionMethod } = this.props;
-        const currentValues = _.cloneDeep(
-            _.get(productionMethod, 'additionalData.engravingBackgroundColors', [])
-        );
-        const item = _.find(currentValues, { itemIdentifier });
-        if (item) {
-            item.colorHex = value;
-        } else {
-            currentValues.push({
-                itemIdentifier,
-                colorHex: value,
-            });
-        }
-        return currentValues;
-    }
-
-    engravingBackgroundColors() {
-        const { extendedItem, data: productionMethod } = this.props;
-        if (!extendedItem) {
-            return [];
-        }
-        const currentValues = _.get(productionMethod, 'additionalData.engravingBackgroundColors', []);
-        const availableItemIdentifiers = (_.isArray(_.get(extendedItem, 'children')) && extendedItem.children.length > 0)
-            ? extendedItem.children.map(({ identifier }) => identifier)
-            : [extendedItem.identifier];
-        const result = [];
-        for (let identifier of availableItemIdentifiers) {
-            const item = _.find(currentValues, { itemIdentifier: identifier });
-            result.push({
-                itemIdentifier: identifier,
-                colorHex: item ? item.colorHex : 'rgba(0, 0, 0, 0.5)',
-            });
-        }
-        return result;
-    }
-
-    componentDidMount() {
-        const { data: productionMethod } = this.props;
-
-        const varyingDimensionsHeight = _.get(productionMethod, 'height');
-        const varyingDimensionsWidth = _.get(productionMethod, 'width');
-        if (
-            (varyingDimensionsWidth && varyingDimensionsWidth !== 0) ||
-            (varyingDimensionsHeight && varyingDimensionsHeight !== 0)
-        ) {
-            this.setState({ checked: true });
-        } else {
-            this.setState({ checked: false });
-        }
-
-        const editDesignProductionMethodId = _.get(this.props.editDesignProductionMethods, '[0].id');
-        const editDesignProductionMethodIdentifier = _.get(
-            this.props.editDesignProductionMethods,
-            '[0].identifier'
-        );
-
-        if (this.props.data.id === null) {
-            const data = _.cloneDeep(this.props.data);
-            data.id = editDesignProductionMethodId;
-            data.identifier = editDesignProductionMethodIdentifier;
-
-            const calculationTypes = _.get(
-                _.find(this.props.editDesignProductionMethods, { id: data.id }),
-                'calculationTypes'
-            );
-            if (editDesignProductionMethodIdentifier) {
-                data.calculationTypes = calculationTypes.map(calculationType => {
-                    if (calculationType.prices === null) {
-                        return {
-                            ...calculationType,
-                            prices: [],
-                        };
-                    } else {
-                        return calculationType;
-                    }
-                });
-            }
-            this.props.onChange(data, this.props.rowNumber);
-        }
-    }
-
-    getProductionMethodLabel = productionMethod => {
-        if (Array.isArray(productionMethod) && productionMethod.length === 0) {
-            return undefined;
-        }
-
-        const title =
-            productionMethod.title ||
-            productionMethod.translatedTitle ||
-            (() => {
-                const { locale } = this.props;
-                return _.get(_.find(productionMethod.texts, { language: locale.replace('-', '_') }), 'title');
-            })();
-
-        return `${title} (${productionMethod.identifier})`;
-    };
-
-    onProductionMethodChange = e => {
-        this.onChange('id')(e);
-    };
-
-    onColorPalettesDialogClose = () => {
-        this.setState({ openedVariantsDefaultColor: null });
-    };
-
-    onDefaultColorEditClick = variantsDefaultColor => {
-        this.setState({ openedVariantsDefaultColor: variantsDefaultColor });
-    };
-
-    getColorFromVariantsDefaultColor = variantsDefaultColor => {
-        if (
-            variantsDefaultColor.colorPaletteIdentifier === null ||
-            variantsDefaultColor.colorIdentifier === null
-        ) {
-            return null;
-        }
-
-        const colorPalette = _.find(this.props.colorPalettes, {
-            identifier: variantsDefaultColor.colorPaletteIdentifier,
-        });
-
-        if (!colorPalette) {
-            return null;
-        }
-
-        const color = _.find(colorPalette.colors, { identifier: variantsDefaultColor.colorIdentifier });
-
-        return color ? color : null;
-    };
-
-    onColorPalettesDialogSelectClick = (value, colorIdentifier, colorPaletteIdentifier) => {
-        const { openedVariantsDefaultColor } = this.state;
-        const { data } = this.props;
-        const newData = {
-            ...data,
-            defaultColors: {
-                ...data.defaultColors,
-                [openedVariantsDefaultColor.variantIdentifier]: {
-                    [colorPaletteIdentifier]: colorIdentifier,
-                },
-            },
-        };
-
-        this.props.onChange(newData, this.props.rowNumber);
-
-        this.setState({ openedVariantsDefaultColor: null });
-    };
-
-    getVariantsDefaultColorTitle = variantsDefaultColor => {
-        const color = this.getColorFromVariantsDefaultColor(variantsDefaultColor);
-
-        if (!color) {
-            return '';
-        }
-
-        const language = getLocale().replace('-', '_');
-
-        return _.get(_.find(color.texts, { language }), 'title', color.identifier);
-    };
-
-    getVariantsDefaultColorValue = variantsDefaultColor => {
-        const color = this.getColorFromVariantsDefaultColor(variantsDefaultColor);
-
-        if (!color) {
-            return '';
-        }
-
-        return '#' + color.hex_value;
-    };
-
-    renderMaskEditorField() {
-        const {
-            data: { mask, width, height, identifier, id },
-        } = this.props;
-        const props = {
-            width,
-            height,
-            value: mask,
-            designProductionMethodIdentifier: identifier,
-            designProductionMethodId: id,
-            onChange: (name, data) => this.onChange('mask')({ target: { value: data } }),
-        };
-        return <ProductionMethodMaskEditorField {...props} />;
-    }
-
-    getErrorProps(field) {
-        const error = _.get(this.props.schema, `${field}.error[${this.props.rowNumber}]`);
-        return !error
-            ? {}
-            : {
-                  error: true,
-                  helperText: error,
-              };
-    }
-
-    isCalculationError(calculationIndex) {
-        const { errors } = this.props;
-        return errors.some(
-            ({ property }) => property.indexOf(`calculationTypes[${calculationIndex}]`) !== -1
-        );
-    }
-
-    getPriceError(calculationIndex, priceIndex) {
-        const { errors, classes } = this.props;
-        const messages = errors
-            .filter(
-                ({ property }) =>
-                    property.indexOf(`calculationTypes[${calculationIndex}].prices[${priceIndex}]`) !== -1
-            )
-            .map(({ message }) => message);
-        return messages.map(message => (
-            <div key={message} className={classes.validationError}>
-                {t(`validation.designProductionMethod.calculationType.price.${message}`)}
-            </div>
-        ));
-    }
-
-    renderCalculationTypes(productionMethod, channels) {
-        const { classes } = this.props;
-        const calculationTypes = (productionMethod && productionMethod.calculationTypes) || [];
-        return (
-            <Grid container>
-                <Grid item xs={12}>
-                    {calculationTypes.length > 0 && (
-                        <FormLabel classes={{ root: classes.FormLabel }} component="legend">
-                            {t('CalculationTypes')}
-                        </FormLabel>
-                    )}
-                    {calculationTypes
-                        .filter(calculationType => calculationType.itemAmountDependent)
-                        .map((calculationType, calculationIndex) => (
-                            <ExpansionPanel
-                                expanded={
-                                    this.state.expanded === calculationType.identifier ||
-                                    this.isCalculationError(calculationIndex)
-                                }
-                                onChange={this.onCollapseClick(calculationType.identifier)}
-                                key={calculationType.identifier}
-                            >
-                                <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-                                    <Typography>
-                                        {productionMethod.id === null || !calculationType.title ? (
-                                            <TranslationFinder
-                                                data={calculationType.texts}
-                                                property="title"
-                                                fallback={calculationType.identifier}
-                                            />
-                                        ) : (
-                                            calculationType.title
-                                        )}
-                                    </Typography>
-                                </ExpansionPanelSummary>
-                                <ExpansionPanelDetails classes={{ root: classes.ExpansionPanelDetailRoot }}>
-                                    {(channels || []).map(channel => (
-                                        <React.Fragment key={channel.identifier}>
-                                            <Typography className={classes.TypographyFontWeight}>
-                                                {channel.identifier +
-                                                    '/' +
-                                                    channel.currency.symbol +
-                                                    '(' +
-                                                    channel.currency.iso +
-                                                    ')'}
-                                            </Typography>
-                                            {(calculationType.prices || [])
-                                                .map((price, priceIndex) => {
-                                                    if (parseInt(price.channel) === channel.id) {
-                                                        return (
-                                                            <React.Fragment key={priceIndex}>
-                                                                <Grid container>
-                                                                    <Grid item xs={3}>
-                                                                        <TextField
-                                                                            label={t('colorAmountFrom')}
-                                                                            onChange={e => {
-                                                                                this.onChangeCalculationTypesPrices(
-                                                                                    calculationType.identifier,
-                                                                                    'colorAmountFrom',
-                                                                                    priceIndex,
-                                                                                    e.target.value
-                                                                                );
-                                                                            }}
-                                                                            value={price.colorAmountFrom || ''}
-                                                                            type="number"
-                                                                            InputProps={{
-                                                                                classes: {
-                                                                                    inputType: classes.inputText,
-                                                                                },
-                                                                            }}
-                                                                        />
-                                                                    </Grid>
-                                                                    <Grid item xs={3}>
-                                                                        <LocalizedPriceTextField
-                                                                            label={t('Price')}
-                                                                            onChange={(name, value) => {
-                                                                                this.onChangeCalculationTypesPrices(
-                                                                                    calculationType.identifier,
-                                                                                    'price',
-                                                                                    priceIndex,
-                                                                                    value
-                                                                                );
-                                                                            }}
-                                                                            value={price.price}
-                                                                            inputProps={{
-                                                                                style: {
-                                                                                    height: '2em',
-                                                                                },
-                                                                            }}
-                                                                        />
-                                                                    </Grid>
-                                                                    <Grid item xs={3}>
-                                                                        <LocalizedPriceTextField
-                                                                            label={t('PriceNet')}
-                                                                            onChange={(name, value) => {
-                                                                                this.onChangeCalculationTypesPrices(
-                                                                                    calculationType.identifier,
-                                                                                    'priceNet',
-                                                                                    priceIndex,
-                                                                                    value
-                                                                                );
-                                                                            }}
-                                                                            value={price.priceNet}
-                                                                            inputProps={{
-                                                                                style: {
-                                                                                    height: '2em',
-                                                                                },
-                                                                            }}
-                                                                        />
-                                                                    </Grid>
-                                                                    <Grid
-                                                                        item
-                                                                        xs={3}
-                                                                        className={classes.gridFormatting}
-                                                                    >
-                                                                        <TextField
-                                                                            label={t('AmountFrom')}
-                                                                            onChange={e => {
-                                                                                this.onChangeCalculationTypesPrices(
-                                                                                    calculationType.identifier,
-                                                                                    'amountFrom',
-                                                                                    priceIndex,
-                                                                                    e.target.value
-                                                                                );
-                                                                            }}
-                                                                            value={price.amountFrom || ''}
-                                                                            type="number"
-                                                                            InputProps={{
-                                                                                classes: {
-                                                                                    inputType: classes.inputText,
-                                                                                },
-                                                                            }}
-                                                                        />
-                                                                        <IconButton
-                                                                            label={t('Remove')}
-                                                                            onClick={() =>
-                                                                                this.onRemovePrices(
-                                                                                    price,
-                                                                                    calculationType.identifier
-                                                                                )
-                                                                            }
-                                                                            id="remove"
-                                                                        >
-                                                                            <DeleteIcon />
-                                                                        </IconButton>
-                                                                    </Grid>
-                                                                </Grid>
-                                                                <div>
-                                                                    {this.getPriceError(calculationIndex, priceIndex)}
-                                                                </div>
-                                                            </React.Fragment>
-                                                        );
-                                                    };
-                                                })
-                                            }
-                                            <Grid container>
-                                                <Grid item xs={12}>
-                                                    <div className="action-buttons">
-                                                        <RaisedButton
-                                                            primary={true}
-                                                            onClick={() =>
-                                                                this.onAddNewPrices(
-                                                                    calculationType.identifier,
-                                                                    channel.id
-                                                                )
-                                                            }
-                                                        >
-                                                            <Add />
-                                                            {T('Add')}
-                                                        </RaisedButton>
-                                                    </div>
-                                                </Grid>
-                                            </Grid>
-                                        </React.Fragment>
-                                    ))}
-                                </ExpansionPanelDetails>
-                            </ExpansionPanel>
-                        ))}
-                </Grid>
-            </Grid>
-        );
-    }
-
-    render() {
-        const {
-            onRemove,
-            data: productionMethod,
-            classes,
-            channels,
-            colorPalettes,
-            editDesignProductionMethods,
-            variantsDefaultColors,
-        } = this.props;
-        const { checked, openedVariantsDefaultColor } = this.state;
-        const engravingBackgroundColors = this.engravingBackgroundColors();
-        const calculationTypes = _.get(productionMethod, 'calculationTypes');
-        productionMethod.calculationTypes =
-            calculationTypes &&
-            calculationTypes.map(calculationType => {
-                if (calculationType.prices === null) {
-                    return {
-                        ...calculationType,
-                        prices: [],
-                    };
-                } else {
-                    return calculationType;
-                }
-            });
-
-        return (
-            <Card className={classes.card}>
-                <Grid container>
-                    <Grid item xs={12}>
-                        <UISelectField
-                            style={{ width: '100%' }}
-                            onChange={this.onProductionMethodChange}
-                            value={productionMethod.id}
-                        >
-                            {editDesignProductionMethods.map(productionMethod => (
-                                <MenuItem value={productionMethod.id} key={productionMethod.id}>
-                                    {this.getProductionMethodLabel(productionMethod)}
-                                </MenuItem>
-                            ))}
-                        </UISelectField>
-                        <Grid item xs={12}>
-                            {isEngravingEffect(productionMethod) && (
-                                <React.Fragment>
-                                    <Typography>
-                                        {t('EngravingBackgroundColor')}
-                                    </Typography>
-                                    {
-                                        engravingBackgroundColors.map(item => (
-                                            <div
-                                                key={item.itemIdentifier}
-                                                className={classes.engravingBackgroundColor}
-                                            >
-                                                <FormLabel classes={{ root: classes.InputLabel }} component="legend">
-                                                    {item.itemIdentifier}:
-                                                </FormLabel>
-                                                <TextField
-                                                    key={item.itemIdentifier}
-                                                    placeholder={t('EngravingBackgroundColorPlaceholder')}
-                                                    onChange={this.onChangeEngravingBackgroundColor(item)}
-                                                    value={item.colorHex}
-                                                    style={styles.input}
-                                                    className={classes.inputAlign}
-                                                />
-                                            </div>
-                                        ))
-                                    }
-                                </React.Fragment>
-                                )}
-                        </Grid>
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={checked}
-                                    onChange={this.onChange('varyingDimensions')}
-                                    value={t('varyingDimensions')}
-                                    color="primary"
-                                />
-                            }
-                            label={t('varyingDimensions')}
-                        />
-                    </Grid>
-                    {checked && (
-                        <Grid container>
-                            <Grid item xs={6}>
-                                <TextField
-                                    className={classes.varyingDimensionsInputWrapper}
-                                    label={t('Width')}
-                                    onChange={this.onChange('width')}
-                                    value={productionMethod.width || ''}
-                                    style={styles.input}
-                                    type="number"
-                                />
-                            </Grid>
-                            <Grid item xs={6}>
-                                <TextField
-                                    className={classes.varyingDimensionsInputWrapper}
-                                    label={t('Height')}
-                                    onChange={this.onChange('height')}
-                                    value={productionMethod.height || ''}
-                                    style={styles.input}
-                                    type="number"
-                                />
-                            </Grid>
-                        </Grid>
-                    )}
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={productionMethod.allowBulkNames}
-                                    onChange={this.onChange('allowBulkNames')}
-                                    value={'allowBulkNames'}
-                                    color="primary"
-                                />
-                            }
-                            label={t('allowBulkNames')}
-                        />
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={productionMethod.isDefault === true}
-                                    onChange={this.onChange('isDefault')}
-                                    value={'isDefault'}
-                                    color="primary"
-                                />
-                            }
-                            label={t('isDefault')}
-                        />
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={!!productionMethod.defaultColors}
-                                    onChange={this.onChange('defaultColors')}
-                                    value={'varyingDefaultColors'}
-                                    color="primary"
-                                />
-                            }
-                            label={t('varyingDefaultColors')}
-                        />
-                    </Grid>
-                    {!!variantsDefaultColors.length &&
-                        variantsDefaultColors.map((variantsDefaultColor, index) => (
-                            <Grid container key={index}>
-                                <Grid item xs={6}>
-                                    <p>{variantsDefaultColor.variantTitle}</p>
-                                </Grid>
-                                <Grid item xs={6}>
-                                    {variantsDefaultColor.colorPaletteIdentifier &&
-                                        variantsDefaultColor.colorIdentifier && (
-                                            <React.Fragment>
-                                                <div
-                                                    className={classes.variantsDefaultColorBox}
-                                                    style={{
-                                                        background: this.getVariantsDefaultColorValue(
-                                                            variantsDefaultColor
-                                                        ),
-                                                    }}
-                                                />
-                                                <TextField
-                                                    value={this.getVariantsDefaultColorTitle(
-                                                        variantsDefaultColor
-                                                    )}
-                                                    style={styles.input}
-                                                    disabled
-                                                />
-                                            </React.Fragment>
-                                        )}
-                                    <IconButton
-                                        label={t('Edit')}
-                                        onClick={() => this.onDefaultColorEditClick(variantsDefaultColor)}
-                                    >
-                                        <EditIcon />
-                                    </IconButton>
-                                </Grid>
-                            </Grid>
-                        ))}
-
-                    {this.renderMaskEditorField()}
-
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={productionMethod.designElementsLocked}
-                                    onChange={this.onChange('designElementsLocked')}
-                                    value={t('designElementsLocked')}
-                                    color="primary"
-                                />
-                            }
-                            label={t('designElementsLocked')}
-                        />
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <FormControlLabel
-                            control={
-                                <Checkbox
-                                    checked={productionMethod.oneLineText}
-                                    onChange={this.onChange('oneLineText')}
-                                    value={'oneLineText'}
-                                    color="primary"
-                                />
-                            }
-                            label={t('oneLineText')}
-                        />
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <TextField
-                            label={t('minimumOrderAmount')}
-                            onChange={this.onChange('minimumOrderAmount')}
-                            value={productionMethod.minimumOrderAmount || ''}
-                            style={styles.input}
-                            type="number"
-                            {...this.getErrorProps('minimumOrderAmount')}
-                        />
-                    </Grid>
-
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <div className={classes.inputWithLabel}>
-                            <FormLabel component="legend"> {t('maxTextElements')} </FormLabel>
-                            <TextField
-                                onChange={this.onChange('maxTexts')}
-                                value={productionMethod.maxTexts}
-                                type="number"
-                                error={this.state.maxTextError}
-                                helperText={this.state.maxTextError ? T('minElementsError') : ''}
-                                {...this.getErrorProps('maxTexts')}
-                            />
-                        </div>
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <div className={classes.inputWithLabel}>
-                            <FormLabel component="legend"> {t('maxImageElements')} </FormLabel>
-                            <TextField
-                                onChange={this.onChange('maxImages')}
-                                value={productionMethod.maxImages}
-                                type="number"
-                                error={this.state.maxImageError}
-                                helperText={this.state.maxImageError ? T('minElementsError') : ''}
-                                {...this.getErrorProps('maxImages')}
-                            />
-                        </div>
-                    </Grid>
-                    <Grid item xs={12} className={classes.checkboxGrid}>
-                        <div className={classes.inputWithLabel}>
-                            <FormLabel component="legend"> {t('maxTotalElements')} </FormLabel>
-                            <TextField
-                                onChange={this.onChange('maxElements')}
-                                value={productionMethod.maxElements || ''}
-                                type="number"
-                                {...this.getErrorProps('maxElements')}
-                            />
-                        </div>
-                    </Grid>
-
-                    {this.renderCalculationTypes(productionMethod, channels)}
-
-                    <Grid container justify="flex-end">
-                        <Grid item xs={12}>
-                            <IconButton
-                                label={t('Remove')}
-                                onClick={() => onRemove(productionMethod)}
-                                id="remove"
-                            >
-                                <DeleteIcon />
-                            </IconButton>
-                        </Grid>
-                    </Grid>
-                    {openedVariantsDefaultColor !== null && (
-                        <Dialog
-                            open={true}
-                            maxWidth="xs"
-                            fullWidth={true}
-                            onClose={this.onColorPalettesDialogClose}
-                        >
-                            <ColorPalettes
-                                selectedColor={this.getColorFromVariantsDefaultColor(
-                                    openedVariantsDefaultColor
-                                )}
-                                colorSelectClick={this.onColorPalettesDialogSelectClick}
-                                colorPalettes={colorPalettes}
-                                closeColorPalettes={this.onColorPalettesDialogClose}
-                            />
-                        </Dialog>
-                    )}
-                </Grid>
-            </Card>
-        );
-    }
-}
-
-export default withStyles(styles)(FormProductionMethods);