@configuratorware/configurator-admingui 1.31.1 → 1.31.4

package/Screens/Login/Reducers/Actions.js

@@ -88,11 +88,10 @@ var errorHandler = function errorHandler(dispatch) {
 
 var postLoginData = function postLoginData(username, password) {
   return function (dispatch) {
-    var data = new _Api.ObjectFormData({
-      _username: username,
-      _password: password
-    });
-    return (0, _Helpers.dispatchPostData)(dispatch)(LOGIN_DATA_KEY, 'login_check', data).then(function (apiAction) {
+    return (0, _Helpers.dispatchPostData)(dispatch)(LOGIN_DATA_KEY, 'login_check', {
+      username: username,
+      password: password
+    }).then(function (apiAction) {
       return dispatch((0, _Helpers.apiActionHandler)(apiAction, receiveHandler, errorHandler));
     });
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@configuratorware/configurator-admingui",
-  "version": "1.31.1",
+  "version": "1.31.4",
   "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.31.1",
+    "redhotmagma-visualization": "1.31.4",
     "redux": "^4.1.0",
     "redux-logger": "^3.0.6",
     "redux-persist": "^5.10.0",

package/src/App/Reducers/Api/Actions.js

@@ -10,12 +10,18 @@ export const POST_DATA = 'POST_DATA';
 export const DELETE_DATA = 'DELETE_DATA';
 export const CANCEL_REQUEST = 'CANCEL_REQUEST';
 export const EXPIRED_RESPONSE = 'EXPIRED_RESPONSE';
+export const RESET_DID_INVALIDATE = 'RESET_DID_INVALIDATE';
 
 export const invalidateSource = key => ({
     type: INVALIDATE_SOURCE,
     key,
 });
 
+export const resetDidInvalidate = key => ({
+    type: RESET_DID_INVALIDATE,
+    key,
+});
+
 export const requestData = (source, key) => ({
     type: REQUEST_DATA,
     source,

package/src/App/Reducers/Api/Reducer.js

@@ -7,6 +7,7 @@ import {
     DELETE_DATA,
     CANCEL_REQUEST,
     EXPIRED_RESPONSE,
+    RESET_DID_INVALIDATE,
 } from './Actions';
 
 const data = (
@@ -27,6 +28,11 @@ const data = (
                 didInvalidate: true,
                 data: null,
             };
+        case RESET_DID_INVALIDATE:
+            return {
+                ...state,
+                didInvalidate: false,
+            };
         case REQUEST_DATA:
             return {
                 ...state,
@@ -90,6 +96,7 @@ export const dataBySource = (state = {}, action) => {
         case DELETE_DATA:
         case CANCEL_REQUEST:
         case EXPIRED_RESPONSE:
+        case RESET_DID_INVALIDATE:
             return {
                 ...state,
                 [action.key]: data(state[action.key], action),

package/src/App/Reducers/Entity/Actions.js

@@ -15,10 +15,13 @@ export const reportUnsavedEntity = (reducerName, entityState, saveAndHide, hide,
     cancel,
 });
 
-export const releaseUnsavedEntity = () => (dispatch, getState) => {
+export const releaseUnsavedEntity = targetReducerName => (dispatch, getState) => {
     const state = getState();
     const { entity } = state;
     const { reducerName } = entity.unsavedEntity;
+    if (targetReducerName && targetReducerName !== reducerName) {
+        return;
+    }
     if (reducerName) {
         if (state[reducerName].showDetails) {
             dispatch({
@@ -422,7 +425,7 @@ export const generateDefaultActions = (listKey, dataKey, reducerName, url, ctx =
                     // onDelete callback
                     dispatchDeleteData(dispatch)(listKey, url, ids).then(() => {
                         dispatch(hideDetails(false));
-                        dispatch(releaseUnsavedEntity());
+                        dispatch(releaseUnsavedEntity(reducerName));
                         dispatch(invalidateSource(listKey));
                         dispatch(cancelDeleteEntitiesDialog());
                         ctx.afterDelete && dispatch(ctx.afterDelete(ids));

package/src/Components/DefaultForm.js

@@ -13,10 +13,11 @@ export default class DefaultForm extends Component {
             onAction,
             config,
             closeAfterSave,
+            customPostData
         } = this.props;
         const { actionButtons } = config;
 
-        const onSubmit = !closeAfterSave ? postData : () => postData(true);
+        const onSubmit = customPostData ? customPostData : !closeAfterSave ? postData : () => postData(true);
 
         return entityState.isReady ? (
             <Form

package/src/Components/DefaultList.js

@@ -33,7 +33,7 @@ export default class DefaultList extends Component {
     }
 
     componentDidUpdate(prevProps) {
-        if (prevProps.selected !== this.props.selected) {
+        if (this.props.selected && !_.isEqual(prevProps.selected, this.props.selected)) {
             this.setState({
                 selectedRows: this.props.selected,
             });

package/src/Components/TranslationFinder.js

@@ -20,6 +20,7 @@ let TranslationFinder = props => {
     const { language, data, property, fallback } = props;
     return <span>{get(find(data, { language }), property, fallback)}</span>;
 };
+
 const mapStateToProps = ({ i18n }) => ({
     language: i18n.locale.replace('-', '_'),
 });

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

@@ -1,7 +1,6 @@
 import Actions, { REDUCER_NAME } from '../Reducers/Actions';
 import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData';
 import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
-import TextFields from '../Components/TextFields';
 import ColorTextField from '../Components/ColorTextField';
 import { t } from '../../../App/i18n';
 import React from 'react';
@@ -139,8 +138,22 @@ const formFields = [
         dynamicDefaultLabel: false
     },
     {
-        type: TextFields,
         name: 'texts',
+        label: 'termsAndConditionsLink',
+        type: 'intl',
+        intl: {
+            name: 'termsAndConditionsLink',
+            type: 'text',
+        },
+    },
+    {
+        name: 'texts',
+        label: 'dataPrivacyLink',
+        type: 'intl',
+        intl: {
+            name: 'dataPrivacyLink',
+            type: 'text',
+        },
     },
     {
         name: 'channels',

package/src/Screens/Client/Translations.js

@@ -5,6 +5,7 @@ require('../../App/i18n').use(
             Users: 'Users',
             'Theme - Highlight color': 'Theme - Highlight color',
             termsAndConditionsLink: 'Terms and conditions link',
+            dataPrivacyLink: 'Data privacy Link',
             themeColorError: 'Please enter a valid hex color (e.g. #0000ff)"',
             client: {
                 addButtonLabel: 'Add Client',
@@ -21,7 +22,8 @@ require('../../App/i18n').use(
             Users: 'Benutzer',
             'Theme - Highlight color': 'Theme - Highlightfarbe',
             'Theme - Font': 'Theme - Font',
-            termsAndConditionsLink: 'Terms and conditions link',
+            termsAndConditionsLink: 'Link zu den Nutzungsbedingungen',
+            dataPrivacyLink: 'Link zu den Datenschutzbestimmungen',
             'Clientname / Shopname': 'Bezeichner/ Shopname',
             'E-mail (contact)': 'E-Mail (Kontakt)',
             'Street / no': 'Straße / Hausnummer',

package/src/Screens/ColorPalettes/Components/DefaultColorSwitch.js

@@ -20,20 +20,27 @@ export class DefaultColorSwitch extends Component {
     };
 
     onToggle = e => {
-        this.props.setDefaultColor(this.props.isDefaultColor ? null : this.props.color);
+        const colorId = get(this.props.color, 'id', null);
+        if (colorId) {
+            this.props.setDefaultColor(this.props.isDefaultColor ? null : this.props.color);
+        }
     };
 
     render() {
         const { classes } = this.props;
-        return (
-            <Switch
-                classes={{ switchBase: classes.switchBase }}
-                checked={this.props.isDefaultColor}
-                onClick={this.onToggle}
-                name="isDefaultColor"
-                color="primary"
-            />
-        );
+        const colorId = get(this.props.color, 'id', null);
+        if (colorId) {
+            return (
+                <Switch
+                    classes={{ switchBase: classes.switchBase }}
+                    checked={this.props.isDefaultColor}
+                    onClick={this.onToggle}
+                    name="isDefaultColor"
+                    color="primary"
+                />
+            );
+        }
+        return null;
     }
 }
 
@@ -42,7 +49,7 @@ const mapStateToProps = (state, ownProps) => {
     const defaultColorId = get(state, `${COLORPALETTES_REDUCER_NAME}.data.defaultColor.value.id`, null);
 
     return {
-        isDefaultColor: colorId === defaultColorId,
+        isDefaultColor: colorId === defaultColorId && colorId !== null && defaultColorId !== null,
     };
 };
 

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

@@ -7,8 +7,10 @@ import { t } from '../../../../../App/i18n';
 import ConfirmDelete from './ConfirmDelete';
 import Api from '../../../../../App/Api';
 import { networkError } from '../../../../../App/Reducers/Api/Actions';
+import { showErrorMessage, cancelErrorMessage } from '../../../../../App/Reducers/Frame/Actions';
 import { useDispatch } from 'react-redux';
 import { Tooltip } from '@material-ui/core';
+import FileDrop from 'react-file-drop';
 
 const ImageEditTools = withStyles({
     root: {
@@ -17,18 +19,32 @@ const ImageEditTools = withStyles({
     fileInput: {
         display: 'none',
     },
+    fileDrop: {
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        width: 150,
+        marginLeft: -75,
+        height: 100,
+    },
 })(({ classes, className, deleteEnabled, uploadUrl, removeUrl, onUpdate }) => {
     const fileInputRef = useRef(null);
     const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
     const dispatch = useDispatch();
 
     const uploadImage = async image => {
+        const allowedFormats = ['image/jpeg', 'image/jpg', 'image/png'];
+
         if (!uploadUrl) {
             throw new Error('uploadUrl is not provided!');
         }
+        if (allowedFormats.indexOf(image.type) === -1) {
+            return dispatch(showErrorMessage(t('visualizationAndMediaData.unsupportedFileTypeError')));
+        }
         try {
             const data = new FormData();
             data.append('file', image);
+            dispatch(cancelErrorMessage());
             return await Api.request({ method: 'post', url: uploadUrl, data });
         } catch (e) {
             dispatch(networkError('image', 'image', e));
@@ -46,47 +62,56 @@ const ImageEditTools = withStyles({
     };
 
     return (
-        <div className={`${classes.root} ${className}`}>
-            <input
-                ref={fileInputRef}
-                type="file"
-                accept="image/jpeg, image/png"
-                className={classes.fileInput}
-                onChange={async evt => {
-                    if (evt.target.files.length) {
-                        await uploadImage(evt.target.files[0]);
-                        onUpdate && onUpdate();
-                    }
-                }}
-            />
-            <label>
-                <Tooltip title={t('visualizationAndMediaData.imageAddTooltip')}>
-                    <IconButton onClick={() => fileInputRef.current.click()}>
-                        <ImageSearchIcon />
-                    </IconButton>
-                </Tooltip>
-            </label>
-            {deleteEnabled && (
-                <Tooltip title={t('visualizationAndMediaData.imageDeleteTooltip')}>
-                    <IconButton onClick={() => setShowDeleteConfirm(true)}>
-                        <DeleteIcon />
-                    </IconButton>
-                </Tooltip>
-            )}
+        <FileDrop
+            className={classes.fileDrop}
+            onDrop={async files => {
+                await uploadImage(files[0]);
+                onUpdate && onUpdate();
+            }}
+            multiple={false}
+        >
+            <div className={`${classes.root} ${className}`}>
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/jpeg, image/png"
+                    className={classes.fileInput}
+                    onChange={async evt => {
+                        if (evt.target.files.length) {
+                            await uploadImage(evt.target.files[0]);
+                            onUpdate && onUpdate();
+                        }
+                    }}
+                />
+                <label>
+                    <Tooltip title={t('visualizationAndMediaData.imageAddTooltip')}>
+                        <IconButton onClick={() => fileInputRef.current.click()}>
+                            <ImageSearchIcon />
+                        </IconButton>
+                    </Tooltip>
+                </label>
+                {deleteEnabled && (
+                    <Tooltip title={t('visualizationAndMediaData.imageDeleteTooltip')}>
+                        <IconButton onClick={() => setShowDeleteConfirm(true)}>
+                            <DeleteIcon />
+                        </IconButton>
+                    </Tooltip>
+                )}
 
-            <ConfirmDelete
-                open={showDeleteConfirm}
-                onCancel={() => setShowDeleteConfirm(false)}
-                onConfirm={async () => {
-                    await removeImage();
-                    setShowDeleteConfirm(false);
-                    onUpdate && onUpdate();
-                }}
-                title={t('visualizationAndMediaData.imageDeleteConfirm.title')}
-                message={t('visualizationAndMediaData.imageDeleteConfirm.message')}
-            />
-        </div>
+                <ConfirmDelete
+                    open={showDeleteConfirm}
+                    onCancel={() => setShowDeleteConfirm(false)}
+                    onConfirm={async () => {
+                        await removeImage();
+                        setShowDeleteConfirm(false);
+                        onUpdate && onUpdate();
+                    }}
+                    title={t('visualizationAndMediaData.imageDeleteConfirm.title')}
+                    message={t('visualizationAndMediaData.imageDeleteConfirm.message')}
+                />
+            </div>
+        </FileDrop>
     );
 });
 
-export default ImageEditTools;
+export default ImageEditTools;

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

@@ -44,6 +44,7 @@ require('../../../../App/i18n').use(
                     title: 'Delete image',
                     message: 'Do you really want to delete this image?',
                 },
+                unsupportedFileTypeError: 'Unsupported file format',
             },
         },
         de: {
@@ -92,6 +93,7 @@ require('../../../../App/i18n').use(
                     title: 'Bild löschen',
                     message: 'Möchtest du dieses Bild wirklich löschen?',
                 },
+                unsupportedFileTypeError: 'Nicht unterstütztes Dateiformat',
             },
         },
     },

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

@@ -70,6 +70,7 @@ const ImageTile = withStyles(theme => ({
     return (
         <div className={classes.imageTile}>
             {expectedSrc ? <PathStructure path={expectedSrc} /> : <Image src={src} />}
+
             {uploadUrl && removeUrl && (
                 <ImageEditTools
                     className={classes.imageEditTools}

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

@@ -3,6 +3,7 @@ import { act } from 'react-dom/test-utils';
 import { VisualizationAndMediaData } from './VisualizationAndMediaData';
 import { mount, render } from 'enzyme';
 import FormControl from '@material-ui/core/FormControl';
+jest.mock('react-file-drop', () => props => <div>{props.children}</div>);
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => ({

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

@@ -1,7 +1,6 @@
 import Actions, { REDUCER_NAME } from '../Reducers/Actions';
 import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData';
 import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
-import TextFields from '../../Client/Components/TextFields';
 import { withLoadAction } from '../../../Components/withLoadAction';
 import { t } from '../../../App/i18n';
 import { CallToActionField } from '../../../Components/CallToActionField';
@@ -108,8 +107,22 @@ const formFields = [
         dynamicDefaultLabel: false
     },
     {
-        type: TextFields,
         name: 'texts',
+        label: 'termsAndConditionsLink',
+        type: 'intl',
+        intl: {
+            name: 'termsAndConditionsLink',
+            type: 'text',
+        },
+    },
+    {
+        name: 'texts',
+        label: 'Title',
+        type: 'dataPrivacyLink',
+        intl: {
+            name: 'dataPrivacyLink',
+            type: 'text',
+        },
     },
     {
         name: 'customCss',

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

@@ -7,7 +7,7 @@ const initialState = {
     ...getDefaultEntityState(
         {
             id: null,
-            texts: { value: [], constraints: { presence: true } },
+            texts: { value: [] },
             theme: {
                 value: {},
                 schema: {

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

@@ -3,7 +3,6 @@ import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
 import { withLoadAction } from '../../../Components/withLoadAction';
 import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData';
 import { t, T } from '../../../App/i18n';
-import TextFields from '../../Client/Components/TextFields';
 import PdfMarkDownField from '../../Client/Components/PdfMarkdownField';
 
 const formFields = [
@@ -124,8 +123,22 @@ const formFields = [
         ],
     },
     {
-        type: TextFields,
         name: 'texts',
+        label: 'termsAndConditionsLink',
+        type: 'intl',
+        intl: {
+            name: 'termsAndConditionsLink',
+            type: 'text',
+        },
+    },
+    {
+        name: 'texts',
+        label: 'dataPrivacyLink',
+        type: 'intl',
+        intl: {
+            name: 'dataPrivacyLink',
+            type: 'text',
+        },
     },
     {
         name: 'customCss',

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

@@ -12,7 +12,7 @@ const initialState = {
             theme: {
                 value: {},
                 schema: {
-                    highlightColor: { value: '', constraints: { presence: true } },
+                    highlightColor: { value: '' },
                     logo: { value: '' },
                     font: { value: '' },
                 },

package/src/Screens/Designer/Containers/List.js

@@ -37,6 +37,6 @@ export default generateConnectedList(
     false, // skip remove entity
     {
         reducerName: DESIGNER_REDUCER_NAME,
-        entityIdKey: 'item.value.id',
+        entityIdKey: 'id.value',
     }
 );

package/src/Screens/Designer/SubScreens/Visualization/Containers/List.js

@@ -16,7 +16,7 @@ import { DESIGNER_REDUCER_NAME } from '../../../Reducers/Actions';
 class VisualizationSettings extends React.Component {
     static propTypes = {
         loadDetails: PropTypes.func.isRequired,
-        steState: PropTypes.func.isRequired,
+        setState: PropTypes.func.isRequired,
         onDeleteItems: PropTypes.func.isRequired,
     };
 

package/src/Screens/Group/Reducers/Actions.js

@@ -7,6 +7,6 @@ import { generateDefaultActions } from '../../../App/Reducers/Entity/Actions';
 
 const actions = generateDefaultActions(LIST_KEY, DATA_KEY, REDUCER_NAME, GROUPS_URL);
 
-export const { hideDetails, loadEntity } = actions;
+export const { hideDetails, loadEntity, postData } = actions;
 
 export default actions;

package/src/Screens/Item/Components/Variants/VariantsEditor.js

@@ -8,6 +8,7 @@ import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Checkbox from '@material-ui/core/Checkbox/Checkbox';
 import TablePagination from '@material-ui/core/TablePagination';
+import uniq from 'lodash/uniq';
 import { addReduxListener, removeReduxListener } from '../../../../App/ReduxListener';
 import { t } from '../../../../App/i18n';
 import Actions, { ITEM_REDUCER_NAME } from '../../Reducers/Actions';
@@ -64,7 +65,7 @@ const getGroupsFromChildren = children => {
         }
     }
 
-    return { groups, groupIdsInOrder };
+    return { groups, groupIdsInOrder: uniq(groupIdsInOrder) };
 };
 
 const prepareDataForRendering = children => {
@@ -222,7 +223,7 @@ class VariantsEditor extends Component {
 
         this.setState({
             groups,
-            groupIdsInOrder,
+            groupIdsInOrder: uniq(groupIdsInOrder),
         });
     };
 

package/src/Screens/Item/Components/Variants/VariantsEditorPopup.js

@@ -8,6 +8,7 @@ import * as GroupActions from '../../../Group/Reducers/Actions';
 import * as GroupEntryActions from '../../../GroupEntry/Reducers/Actions';
 
 import { T } from '../../../../App/i18n';
+import { resetDidInvalidate } from '../../../../App/Reducers/Api/Actions';
 
 export class VariantsEditorPopup extends React.Component {
     render() {
@@ -21,7 +22,11 @@ export class VariantsEditorPopup extends React.Component {
                     open={showGroupEditor}
                     scroll={'paper'}
                 >
-                    <GroupEdit onCancel={this.props.cancelGroup} closeAfterSave />
+                    <GroupEdit
+                        customPostData={this.props.customPostData}
+                        onCancel={this.props.cancelGroup}
+                        closeAfterSave
+                    />
                 </Dialog>
 
                 <Dialog
@@ -51,6 +56,11 @@ const renderDispatchToProps = dispatch => ({
     cancelGroup: () => {
         dispatch(GroupActions.hideDetails(false));
     },
+    customPostData: async () => {
+        await dispatch(GroupActions.postData(true));
+        // need to reset didInvalidate flag as it is set on save of group which is blocking to reloadList
+        dispatch(resetDidInvalidate(GroupActions.GROUPS_URL));
+    },
     cancelGroupEntry: () => {
         dispatch(GroupEntryActions.hideDetails(false));
     },

package/src/Screens/Login/Reducers/Actions.js

@@ -49,11 +49,7 @@ const errorHandler = dispatch => error => {
 };
 
 export const postLoginData = (username, password) => dispatch => {
-    const data = new ObjectFormData({
-        _username: username,
-        _password: password,
-    });
-    return dispatchPostData(dispatch)(LOGIN_DATA_KEY, 'login_check', data).then(apiAction => {
+    return dispatchPostData(dispatch)(LOGIN_DATA_KEY, 'login_check', {username, password}).then(apiAction => {
         return dispatch(apiActionHandler(apiAction, receiveHandler, errorHandler));
     });
 };