@configuratorware/configurator-admingui 1.40.5 → 1.41.0

package/Screens/DesignProductionMethods/Reducers/DesignProductionMethodsReducer.js

@@ -34,6 +34,9 @@ var initialState = _objectSpread({}, (0, _Reducer.getDefaultEntityState)({
       vectorsRequired: {
         value: false
       },
+      vectorizedLogoMandatory: {
+        value: false
+      },
       visualizationEffect: {
         value: 'print',
         constraints: {

package/Screens/DesignProductionMethods/Translations.js

@@ -21,7 +21,8 @@ require("../../App/i18n").use({
       embroidery: 'embroidery',
       doming: 'doming'
     },
-    'Vectors Required': 'Vectors Required',
+    vectorsRequired: 'Colorize step is mandatory',
+    vectorizedLogoMandatory: 'Force using vectorized logo',
     'Maximum Color Amount': 'Maximum Color Amount',
     'Minimum Font Size': 'Minimum Font Size',
     'Has Engraving Background Colors': 'Has Engraving Background Colors',
@@ -56,7 +57,8 @@ require("../../App/i18n").use({
       embroidery: 'Stick',
       doming: 'Doming'
     },
-    'Vectors Required': 'Erfordert Vektorisierung',
+    vectorsRequired: 'Umfärben erzwingen',
+    vectorizedLogoMandatory: 'Vektorisierte Bilddaten müssen verwendet werden',
     'Maximum Color Amount': 'Maximale Farbanzahl',
     'Minimum Font Size': 'Minimale Schriftgröße',
     'Has Engraving Background Colors': 'Hat Gravur-Hintergrundfarben',

package/Screens/Item/Components/Styles.scss

@@ -63,19 +63,20 @@
     overflow-y: hidden;
     height: 250px;
     white-space: nowrap;
-
-    li {
-      white-space: normal;
-      display: inline-block;
-      width: calc(25% - 10px);
-      margin-right: 10px;
-      height: 100%;
-      vertical-align: top;
-      padding: 0 10px;
-    }
   }
 }
 
+.draggable-option-item {
+  list-style-type: none;
+  white-space: normal;
+  display: inline-block;
+  width: calc(25% - 10px);
+  margin-right: 10px;
+  height: 100%;
+  vertical-align: top;
+  padding: 0 10px;
+}
+
 .optionclassificationEditor-item {
 
   .headline {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.40.5",
+  "version": "1.41.0",
   "license": "UNLICENSED",
   "private": false,
   "dependencies": {
@@ -29,7 +29,7 @@
     "react-redux-i18n": "^1.9.3",
     "react-router": "^3.2.6",
     "react-sortable-hoc": "^1.11.0",
-    "redhotmagma-visualization": "1.40.5",
+    "redhotmagma-visualization": "1.41.0",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/Components/Form.js

@@ -192,7 +192,7 @@ class ConfigurableForm extends Component {
             onChange: this.onChange,
             onAction: this.onAction,
             renderWrappedInput: this.renderWrappedInput,
-            helperText: input.helperText && T(input.helperText)
+            helperText: input.helperText && T(input.helperText),
         };
 
         if (input.name) {

package/src/Components/FormFragments/Checkbox.js

@@ -3,20 +3,24 @@ import React from 'react';
 import Checkbox from '../../UIComponents/Checkbox';
 import FormControlLabel from '../../UIComponents/FormControlLabel';
 import ErrorWrapper from './ErrorWrapper';
+import Typography from '@material-ui/core/Typography';
 
 const checkbox = props => (
-    <ErrorWrapper error={props.error}>
-        <FormControlLabel
-            control={
-                <Checkbox
-                    checked={!!props.value}
-                    onChange={evt => props.onChange(props.name, evt.target.checked)}
-                    name={props.name}
-                />
-            }
-            label={props.label}
-        />
-    </ErrorWrapper>
+    <>
+        <ErrorWrapper error={props.error}>
+            <FormControlLabel
+                control={
+                    <Checkbox
+                        checked={!!props.value}
+                        onChange={evt => props.onChange(props.name, evt.target.checked)}
+                        name={props.name}
+                    />
+                }
+                label={props.label}
+            />
+        </ErrorWrapper>
+        {props.helperText && <Typography variant={'caption'}>{props.helperText}</Typography>}
+    </>
 );
 
 export default checkbox;

package/src/Components/FormFragments/index.js

@@ -26,7 +26,7 @@ import Value from './Value';
 export { Value };
 import HintText from './HintText';
 export { HintText };
-import AttributeValueChip from "./AttributeValueChip";
+import AttributeValueChip from './AttributeValueChip';
 export { AttributeValueChip };
 
 export default {

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

@@ -31,6 +31,17 @@ const formFields = [
             },
         ],
     },
+    {
+        name: 'settings',
+        type: SimpleNestedData,
+        fields: [
+            {
+                name: 'vatrate',
+                label: 'VAT rate',
+                type: 'number',
+            },
+        ],
+    },
     {
         name: 'globalDiscountPercentage',
         label: 'discountPercentage',

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

@@ -17,6 +17,7 @@ const initialState = {
                 value: {},
                 schema: {
                     hidePrices: { value: false },
+                    vatrate: { value: null },
                 },
             },
         },

package/src/Screens/Channel/Translations.js

@@ -13,6 +13,7 @@ require('../../App/i18n').use(
             Identifier: 'Identifier',
             Currency: 'Währung',
             discountPercentage: 'Prozentualer Rabatt',
+            'VAT rate': 'Mehrwertsteuersatz'
         },
     },
     true

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

@@ -1,49 +1,74 @@
-import { TextField } from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import { T, t } from "../../../App/i18n";
-
-const ColorTextField = ({ name, value, onChange, error }) => {
-  const [customError, setCustomError] = useState(null);
-  useEffect(() => {
-    if (error) {
-      if (value === "" || value === undefined) {
-        setCustomError(error);
-      } else {
-        validateColor(value);
-      }
-    }
-  }, [error]);
-  
-  const validateColor = (color) => {
-    if (color !== '') {
-      const s = new Option().style;
-      s.color = color;
-      const isValidColorText = s.color == color;
-      if (isValidColorText || /^#[0-9a-fA-F]{6}$/i.test(color)) {
-        setCustomError(null);
-      } else if (/^[0-9a-fA-F]{6}$/i.test(color)) {
-        onChange(name, '#' + color);
-        setCustomError(null);
-      } else {
-        setCustomError(T('themeColorError'))
-      }
-    }
-  }
-  return (
-    <TextField
-      label={t("Theme - Highlight color")}
-      onChange={(evt) => {
-        onChange(name, evt.target.value);
-      }}
-      onBlur={(evt) => {
-        validateColor(evt.target.value)
-      }}
-      style={{ width: '100%' }}
-      error={customError}
-      helperText={customError}
-      value={value || ""}
-      type={"text"}
-    />
-  );
+import { TextField } from '@material-ui/core';
+import React, { useEffect, useState } from 'react';
+import { t } from '../../../App/i18n';
+import PropTypes from 'prop-types';
+
+const ColorTextField = ({ label, name, value, onChange, error }) => {
+    const [customError, setCustomError] = useState(null);
+    const [customHelperText, setCustomHelperText] = useState(null);
+
+    useEffect(() => {
+        checkIfColorIsEqualToBackgroundColor(value);
+    }, [value]);
+
+    useEffect(() => {
+        if (error) {
+            if (value === '' || value === undefined) {
+                setCustomError(error);
+            } else {
+                validateColor(value);
+            }
+        }
+    }, [error]);
+
+    const validateColor = color => {
+        if (color !== '') {
+            const s = new Option().style;
+            s.color = color;
+            const isValidColorText = s.color == color;
+            if (isValidColorText || /^#[0-9a-fA-F]{6}$/i.test(color)) {
+                setCustomError(null);
+            } else if (/^[0-9a-fA-F]{6}$/i.test(color)) {
+                onChange(name, '#' + color);
+                setCustomError(null);
+            } else {
+                setCustomError(t('themeColorError'));
+            }
+        }
+    };
+
+    const checkIfColorIsEqualToBackgroundColor = color => {
+        if (color.toUpperCase() === '#FFF' || color.toUpperCase() === '#FFFFFF') {
+            setCustomHelperText(t('highlightColorInfo'));
+        } else {
+            setCustomHelperText(null);
+        }
+    };
+
+    return (
+        <TextField
+            label={label || t('Theme - Highlight color')}
+            onChange={evt => {
+                onChange(name, evt.target.value);
+            }}
+            onBlur={evt => {
+                validateColor(evt.target.value);
+            }}
+            style={{ width: '100%' }}
+            error={customError}
+            helperText={customError || customHelperText}
+            value={value || ''}
+            type={'text'}
+        />
+    );
+};
+
+ColorTextField.propTypes = {
+    value: PropTypes.string,
+    error: PropTypes.node,
+    onChange: PropTypes.func.isRequired,
+    label: PropTypes.node,
+    name: PropTypes.string,
 };
+
 export default ColorTextField;

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

@@ -1,11 +1,10 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { 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';
 

package/src/Screens/Client/Translations.js

@@ -16,6 +16,8 @@ require('../../App/i18n').use(
             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',
+            highlightColorInfo:
+                'Highlight color is used for highlighting elements in the frontend. Make sure you use a color value that is visible, depending on the background color in your frontend.',
             clientFontMessage:
                 'For the font to be rendered correctly in the configuratorware frontend, make sure the filename does not contain any spaces and matches the fonts internal name.',
         },
@@ -49,6 +51,8 @@ require('../../App/i18n').use(
             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',
+            highlightColorInfo:
+                'Die Highlight Farbe wird genutzt um Elemente im Frontend zu unterstreichen. Benutze einen Farbwert, der auf der Hintgrundfarbe des Frontends sichtbar ist.',
             clientFontMessage:
                 'Für eine korrekte Darstellung der Schrift im configuratorware Fronted darf der Dateiname keine Leerzeichen enthalten und muss dem internen Namen der Schriftart entsprechen.',
         },

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

@@ -33,6 +33,12 @@ import { connect } from 'react-redux';
 import OptionPriceEditor from './OptionPriceEditor';
 
 import '../../Item/Components/Styles.scss';
+import Toggle from "../../../Components/FormFragments/Toggle";
+import {
+    arrayMove,
+    SortableContainer,
+    SortableElement
+} from "react-sortable-hoc";
 
 const OptionActionButton = ({ onClick, IconComponent }) => (
     <div className="optionActionButton-wrapper">
@@ -81,6 +87,36 @@ class OptionclassificationEditorOptionTile extends React.Component {
     }
 }
 
+const SortableList = SortableContainer(props => {
+    return <ul>{props.children}</ul>;
+});
+
+const SortableOptionTile = SortableElement( props => {
+    return (
+        <OptionTile
+           option={props.value}
+           onRemoveOption={props.onRemoveOption}
+           onEditOption={props.onEditOption}
+           onEditPrice={props.onEditPrice}
+           priceEditEnabled={props.priceEditEnabled}
+        />
+    );
+});
+
+const OptionTile = ({option, priceEditEnabled, onRemoveOption, onEditOption, onEditPrice}) => {
+    return (
+        <li key={option.identifier} className='draggable-option-item'>
+            <OptionclassificationEditorOptionTile
+                option={option}
+                onRemoveOption={onRemoveOption}
+                onEditOption={onEditOption}
+                onEditPrice={onEditPrice}
+                priceEditEnabled={priceEditEnabled}
+            />
+        </li>
+    );
+};
+
 class OptionclassificationEditorItem extends React.Component {
     constructor(props) {
         super(props);
@@ -118,8 +154,18 @@ class OptionclassificationEditorItem extends React.Component {
         this.props.onEditOptionPrice(this.props.optionclassification, option);
     };
 
+    onSortEnd = ({ oldIndex, newIndex }) => {
+        let component = this.props.optionclassification;
+        const items = arrayMove(component.selectableOptions, oldIndex, newIndex);
+        component.selectableOptions = items.map((item, index) => {
+            item.sequenceNumber = index + 1;
+            return item;
+        });
+        this.props.onChange(component);
+    };
+
     render() {
-        const { optionclassification, number, priceEditEnabled } = this.props;
+        const { optionclassification, number, sortable, priceEditEnabled } = this.props;
         const { selectableOptions } = optionclassification;
         const { open } = this.state;
 
@@ -158,25 +204,47 @@ class OptionclassificationEditorItem extends React.Component {
                         icon={<IconAdd />}
                     />
 
-                    {selectableOptions && (
-                        <div className="options-wrapper">
-                            <ul>
-                                {selectableOptions.map(option => {
-                                    return (
-                                        <li key={option.identifier}>
-                                            <OptionclassificationEditorOptionTile
+                    {selectableOptions &&
+                        (sortable ?
+                            <div className="options-wrapper">
+                                <SortableList
+                                    onSortEnd={this.onSortEnd}
+                                    axis="x"
+                                    lockAxis="x"
+                                    pressDelay="150"
+                                >
+                                    {selectableOptions.map((option, index) => {
+                                        return (
+                                            <SortableOptionTile
+                                                key={option.id}
+                                                index={index}
+                                                value={option}
+                                                onRemoveOption={this.removeOption}
+                                                onEditOption={this.editOption}
+                                                onEditPrice={this.editOptionPrice}
+                                                priceEditEnabled={priceEditEnabled}
+                                            />
+                                        );
+                                    })}
+                                </SortableList>
+                            </div>
+                            :
+                            <div className="options-wrapper">
+                                <ul>
+                                    {selectableOptions.map(option => {
+                                        return (
+                                            <OptionTile 
                                                 option={option}
                                                 onRemoveOption={this.removeOption}
                                                 onEditOption={this.editOption}
                                                 onEditPrice={this.editOptionPrice}
                                                 priceEditEnabled={priceEditEnabled}
                                             />
-                                        </li>
-                                    );
-                                })}
-                            </ul>
-                        </div>
-                    )}
+                                        );
+                                    })}
+                                </ul>
+                            </div>
+                        )}
                 </div>
             </div>
         );
@@ -207,18 +275,24 @@ class OptionclassificationEditor extends React.Component {
     };
 
     render() {
-        const { value, priceEditEnabled, ...otherProps } = this.props;
+        const { value, priceEditEnabled, overrideOptionOrder, setOverrideOptionOrder, showOverrideOptionOrderSaveHint, ...otherProps } = this.props;
 
         return (
             <div className="optionclassificationEditor-wrapper">
                 <div className="optionclassificationEditor-info">
                     {T(
                         value.length > 0
-                            ? 'constructionPatterns.components.infoText'
+                            ? 'constructionPatterns.option.sourceHeadline'
                             : 'constructionPatterns.components.noComponentsSelected'
                     )}
                 </div>
-
+                <Toggle
+                    label={T('constructionPatterns.overrideOptionOrder')}
+                    value={overrideOptionOrder}
+                    onChange={(name, checked) => setOverrideOptionOrder(checked)}
+                    fullWidth={false}
+                    error={showOverrideOptionOrderSaveHint ? T('constructionPatterns.overrideOptionOrderHint') : null}
+                />
                 {value.map((oc, idx) => {
                     return (
                         <OptionclassificationEditorItem
@@ -230,6 +304,7 @@ class OptionclassificationEditor extends React.Component {
                             onEditOption={this.editOption}
                             onEditOptionPrice={this.editOptionPrice}
                             priceEditEnabled={priceEditEnabled}
+                            sortable={overrideOptionOrder}
                         />
                     );
                 })}
@@ -385,6 +460,7 @@ function mapStateToProps({ baseConfigurationData, creatorData }) {
         selectedOption: baseConfigurationData.selectedOption,
         options: baseConfigurationData.selectableOptions,
         product: creatorData.source,
+        showOverrideOptionOrderSaveHint: baseConfigurationData.showOverrideOptionOrderSaveHint,
         priceEditEnabled:
             _.get(baseConfigurationData, 'dataSources.settings.calculationMethod') === 'deltaprices',
     };

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

@@ -11,6 +11,7 @@ import configurationActions, {
     CONFIGURATION_REDUCER_NAME,
     getAdminModeHash,
     setOverwriteComponentOrder,
+    setOverrideOptionOrder,
 } from '../Reducers/ConfigurationActions';
 import EditorPopup from '../../Item/Components/AttributeEditorPopup';
 import '../../Item/Containers/Styles.scss';
@@ -262,7 +263,7 @@ class ConfigurationDataFormBase extends Component {
     };
 
     renderTabContent(tab) {
-        const { entityState, setOverwriteComponentOrder } = this.props;
+        const { entityState, setOverwriteComponentOrder, setOverrideOptionOrder } = this.props;
         const source = _.get(entityState, 'dataSources.selectableComponents.data');
         const value = _.get(entityState, 'data.selectableComponents.value');
         const headLine = (
@@ -330,6 +331,8 @@ class ConfigurationDataFormBase extends Component {
                             name="selectableComponents"
                             value={value}
                             onChange={this.onChange}
+                            overrideOptionOrder={Boolean(_.get(entityState, 'data.item.value.overrideOptionOrder'))}
+                            setOverrideOptionOrder={setOverrideOptionOrder}
                         />
                     </div>
                 );
@@ -374,14 +377,15 @@ class ConfigurationDataFormBase extends Component {
     }
 }
 
-function withOverwriteComponentOrder(Component) {
+function withOverwriteOrder(Component) {
     return connect(() => ({}), {
         setOverwriteComponentOrder,
+        setOverrideOptionOrder
     })(Component);
 }
 
 const ConfigurationDataForm = connectDefault(
-    withOverwriteComponentOrder(ConfigurationDataFormBase),
+    withOverwriteOrder(ConfigurationDataFormBase),
     CONFIGURATION_REDUCER_NAME,
     configurationActions.setFieldData,
     configurationActions.postData

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

@@ -43,6 +43,7 @@ export const CONFIGURATION_HIDE_DESIGNER_PREVIEW_ERROR = 'CONFIGURATION_HIDE_DES
 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';
+export const CONFIGURATION_SET_OVERRIDE_OPTION_ORDER = 'CONFIGURATION_SET_OVERRIDE_OPTION_ORDER';
 
 export const showOptionSelection = (show = false, component = null) => ({
     type: CONFIGURATION_SHOW_OPTION_SELECTION,
@@ -212,3 +213,42 @@ export const setOverwriteComponentOrder = value => async (dispatch, getState) =>
         });
     }
 };
+
+export const setOverrideOptionOrder = value => async (dispatch, getState) => {
+    const entityState = getState()[CONFIGURATION_REDUCER_NAME];
+    await dispatch({
+        type: CONFIGURATION_SET_OVERRIDE_OPTION_ORDER,
+        value,
+    });
+    const item = get(entityState, 'data.item.value');
+    if (item) {
+        const { stock, ...itemData } = item;
+        const data = { ...itemData, overrideOptionOrder: value };
+        const url = `items`;
+        return dispatch(postData({ url }, data, CONFIGURATION_SAVE_ITEM)).then(apiAction => {
+            switch (apiAction.type) {
+                case RECEIVE_DATA: {
+                    dispatch(showInfoMessage(t('entity.saveOk')));
+                    dispatch(saveConfigurationSuccess(apiAction.data));
+                    return true;
+                }
+
+                case NETWORK_ERROR: {
+                    const state = getState();
+                    const source = state.dataBySource[apiAction.key];
+                    if (source.isPosted) {
+                        // data is saved
+                        dispatch(showErrorMessage(t('entity.saveError'), apiAction.error));
+                    } else {
+                        dispatch(showErrorMessage(t('entity.loadError'), apiAction.error));
+                    }
+                    dispatch({
+                        type: CONFIGURATION_SET_OVERRIDE_OPTION_ORDER,
+                        value: !value,
+                    });
+                    return false;
+                }
+            }
+        });
+    }
+};