@configuratorware/configurator-admingui 1.41.1 → 1.42.1

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

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

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

@@ -1,196 +0,0 @@
-import Actions, { REDUCER_NAME } from '../Reducers/Actions';
-import SimpleNestedData from '../../../Components/FormFragments/SimpleNestedData';
-import generateConnectedEdit from '../../../Components/DefaultConnectedForm';
-import ColorTextField from '../Components/ColorTextField';
-import { T, t } from '../../../App/i18n';
-import React from 'react';
-import { CallToActionField } from '../../../Components/CallToActionField';
-import { PdfMarkDownField } from '../Components/PdfMarkdownField';
-
-const formFields = [
-    {
-        name: 'identifier',
-        label: 'Identifier',
-        type: 'text',
-    },
-    {
-        name: 'users',
-        label: 'Users',
-        type: 'array',
-        array: {
-            addButtonLabel: 'client.users.addButtonLabel',
-            columns: [
-                {
-                    name: 'email',
-                    label: 'Email',
-                },
-            ],
-            fields: [
-                {
-                    name: 'email',
-                    label: 'Email',
-                    type: 'text',
-                },
-                {
-                    name: 'password',
-                    label: 'Password',
-                    type: 'text',
-                },
-            ],
-        },
-    },
-    {
-        name: 'theme',
-        type: SimpleNestedData,
-        fields: [
-            {
-                name: 'highlightColor',
-                type: ColorTextField,
-            },
-            {
-                name: 'font',
-                label: 'Theme - Font',
-                type: 'file',
-                accept: '.ttf',
-                showFileName: true,
-                deleteEnabled: true,
-                warningMessage: T('clientFontMessage'),
-            },
-            {
-                name: 'logo',
-                label: 'Client logo',
-                type: 'file',
-                isPreviewRequired: true,
-                accept: '.bmp, .gif, .jpg, .png, .jpeg',
-            },
-        ],
-    },
-    {
-        name: 'pdfHeaderText',
-        label: 'PDF Header',
-        htmlField: 'pdfHeaderHtml',
-        type: PdfMarkDownField,
-        helperText: t('headerInfo'),
-    },
-    {
-        name: 'pdfFooterText',
-        label: 'PDF Footer',
-        htmlField: 'pdfFooterHtml',
-        type: PdfMarkDownField,
-        helperText: t('footerInfo'),
-    },
-    {
-        name: 'contactName',
-        label: 'Clientname / Shopname',
-        type: 'text',
-    },
-    {
-        name: 'contactStreet',
-        label: 'Street / no',
-        type: 'text',
-    },
-    {
-        name: 'contactPostCode',
-        label: 'Post code',
-        type: 'text',
-    },
-    {
-        name: 'contactCity',
-        label: 'City',
-        type: 'text',
-    },
-    {
-        name: 'contactPhone',
-        label: 'Phone',
-        type: 'text',
-    },
-    {
-        name: 'toEmailAddresses',
-        label: 'E-Mail(s) receiver for request offer',
-        type: 'text',
-        helperText: t('emailHint'),
-    },
-    {
-        name: 'fromEmailAddress',
-        label: 'E-Mail sender for request offer',
-        type: 'text',
-    },
-    {
-        name: 'ccEmailAddresses',
-        label: 'CC E-Mail(s) receiver for request offer',
-        type: 'text',
-        helperText: t('emailHint'),
-    },
-    {
-        name: 'bccEmailAddresses',
-        label: 'BCC E-Mail(s) receiver for request offer',
-        type: 'text',
-        helperText: t('emailHint'),
-    },
-    {
-        name: 'sendOfferRequestMailToCustomer',
-        label: 'Send offer request email to customer',
-        type: 'checkbox',
-    },
-    {
-        type: CallToActionField,
-        fields: [
-            {
-                name: 'callToAction',
-                label: 'callToAction.callToAction',
-                type: 'select',
-            },
-        ],
-        dynamicDefaultLabel: false,
-    },
-    {
-        name: 'texts',
-        label: 'termsAndConditionsLink',
-        type: 'intl',
-        intl: {
-            name: 'termsAndConditionsLink',
-            type: 'text',
-        },
-    },
-    {
-        name: 'texts',
-        label: 'dataPrivacyLink',
-        type: 'intl',
-        intl: {
-            name: 'dataPrivacyLink',
-            type: 'text',
-        },
-    },
-    {
-        name: 'channels',
-        label: 'channels',
-        type: 'dynSource',
-        sourceConfig: {
-            text: 'label',
-            value: 'identifier',
-        },
-        dynSource: {
-            type: 'chip',
-            listKey: 'channels_autocomplete',
-            url: 'channels',
-            maxSearchResults: 1000,
-            mapItems: ({ identifier, currency, ...others }) => ({
-                identifier,
-                currency,
-                ...others,
-                label: `${currency.symbol}/${currency.iso} (${identifier})`,
-            }),
-        },
-        useObjects: true,
-    },
-    {
-        name: 'customCss',
-        label: 'customCss',
-        type: 'codeEditor',
-        language: 'css',
-    },
-];
-
-const { setFieldData, postData } = Actions;
-
-export default generateConnectedEdit(formFields, REDUCER_NAME, setFieldData, postData);

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

@@ -1,36 +0,0 @@
-import Actions, { LIST_KEY } from '../Reducers/Actions';
-const { detailsAction, hideDetails, showDetails, createEntity, listAction, deleteEntities } = Actions;
-
-const columns = [
-    {
-        name: 'identifier',
-        label: 'Identifier',
-        filterable: false,
-        sortable: false,
-    },
-    {
-        name: 'email',
-        label: 'Email',
-        filterable: false,
-        sortable: false,
-    },
-];
-
-const listParams = {
-    entity: 'clients',
-    addButtonLabel: 'client.addButtonLabel',
-};
-
-import generateConnectedList from '../../../Components/DefaultConnectedList';
-
-export default generateConnectedList(
-    columns,
-    listParams,
-    LIST_KEY,
-    listAction,
-    detailsAction,
-    hideDetails,
-    showDetails,
-    createEntity,
-    deleteEntities
-);

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

@@ -1,74 +0,0 @@
-import cloneDeep from 'lodash/cloneDeep';
-import isObject from 'lodash/isObject';
-
-export const LIST_KEY = 'clients';
-export const DATA_KEY = 'client';
-export const REDUCER_NAME = 'clientData';
-export const URL = 'clients';
-export const UPLOAD_KEY = 'clientUpload';
-export const SET_LOGO_FILE = 'SET_LOGO_FILE';
-export const SET_FONT_FILE = 'SET_FONT_FILE';
-export const CLIENT_UPLOAD = `${LIST_KEY}/upload/{field}/{itemId}`;
-
-import { generateDefaultActions } from '../../../App/Reducers/Entity/Actions';
-import { dispatchPostData, RECEIVE_DATA } from '../../../App/Reducers/Api/Helpers';
-
-export const setLogoFile = logo => ({
-    type: SET_LOGO_FILE,
-    logo,
-});
-
-export const setFontFile = font => ({
-    type: SET_FONT_FILE,
-    font,
-});
-
-export const createClientActions = (listKey, dataKey, reducerName, url, ctx = {}) => {
-    const beforeApiStateHandler = apiAction => (dispatch, getState) => {
-        const state = cloneDeep(getState()[reducerName]);
-        if (apiAction.type === RECEIVE_DATA) {
-            return Promise.all([
-                state.logoFile && uploadFile(apiAction.data.id, state.logoFile, 'logo', dispatch),
-                state.fontFile && uploadFile(apiAction.data.id, state.fontFile, 'font', dispatch),
-            ]).then(() => apiAction);
-        }
-        return apiAction;
-    };
-
-    const actions = generateDefaultActions(listKey, dataKey, reducerName, url, {
-        beforeApiStateHandler,
-        ...ctx,
-    });
-    const originalSetDataAction = actions.setFieldData;
-
-    const uploadFile = (clientId, file, field, dispatch) => {
-        const fileToUpload = new FormData();
-        fileToUpload.append(field, file, file.name);
-        const url = CLIENT_UPLOAD.replace('{field}', field).replace('{itemId}', clientId);
-        return dispatchPostData(dispatch)(UPLOAD_KEY, url, fileToUpload);
-    };
-
-    actions.setFieldData = (field, value) => dispatch => {
-        if (field === 'theme') {
-            if (isObject(value.logo)) {
-                dispatch(setLogoFile(value.logo));
-            } else if (isObject(value.font)) {
-                dispatch(setFontFile(value.font));
-                dispatch(originalSetDataAction(field, { ...value, font: value.font.name || '' }));
-            } else if (value.font === null) {
-                dispatch(setFontFile(null));
-                dispatch(originalSetDataAction(field, value));
-            } else {
-                dispatch(originalSetDataAction(field, value));
-            }
-        } else {
-            dispatch(originalSetDataAction(field, value));
-        }
-    };
-
-    return actions;
-};
-
-const actions = createClientActions(LIST_KEY, DATA_KEY, REDUCER_NAME, URL);
-
-export default actions;

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

@@ -1,67 +0,0 @@
-import { DATA_KEY, REDUCER_NAME, SET_LOGO_FILE, SET_FONT_FILE } from './Actions';
-import { getDefaultEntityState, defaultEntityReducer } from '../../../App/Reducers/Entity/Reducer';
-import { createFeatureReducer } from '../../../App/FeatureReducers';
-
-const initialState = {
-    ...getDefaultEntityState(
-        {
-            id: null,
-            identifier: { value: '', constraints: { identifier: true } },
-            users: {
-                value: [],
-                schema: {
-                    id: { value: null },
-                    email: { value: null, constraints: { presence: true } },
-                    password: { value: null, constraints: { presence: true } },
-                },
-            },
-            texts: { value: [], constraints: { presence: true } },
-            theme: {
-                value: {},
-                schema: {
-                    highlightColor: { value: '', constraints: { color: true } },
-                    logo: { value: '' },
-                    font: { value: '' },
-                },
-            },
-            pdfHeaderText: { value: '' },
-            pdfHeaderHtml: { value: '' },
-            pdfFooterText: { value: '' },
-            pdfFooterHtml: { value: '' },
-            contactName: { value: '' },
-            contactStreet: { value: '' },
-            contactPostCode: { value: '' },
-            contactCity: { value: '' },
-            contactPhone: { value: '' },
-            contactEmail: { value: '' },
-            toEmailAddresses: { value: '' },
-            fromEmailAddress: { value: '' },
-            ccEmailAddresses: { value: '' },
-            bccEmailAddresses: { value: '' },
-            sendOfferRequestMailToCustomer: { value: '' },
-            callToAction: '',
-            channels: { value: [] },
-            customCss: '',
-        },
-        null,
-        DATA_KEY
-    ),
-};
-
-export const createClientReducer = initialState => (state = initialState, action) => {
-    if (action.type === SET_LOGO_FILE) {
-        state = {
-            ...state,
-            logoFile: action.logo,
-        };
-    } else if (action.type === SET_FONT_FILE) {
-        state = {
-            ...state,
-            fontFile: action.font,
-        };
-    }
-
-    return defaultEntityReducer(state, action, initialState);
-};
-
-export default createFeatureReducer(REDUCER_NAME, createClientReducer(initialState));

package/src/Screens/Client/Screen.js

@@ -1,20 +0,0 @@
-import Actions, { REDUCER_NAME } from './Reducers/Actions';
-const { invalidateList, triggerUnsavedEntity, hideDetails } = Actions;
-
-import List from './Containers/List';
-import Edit from './Containers/Edit';
-
-import './Styles.scss';
-import './Translations';
-
-import { generateConnectedSplitScreen } from '../../Components/DefaultConnectedScreen';
-
-export default generateConnectedSplitScreen(
-    'clients',
-    List,
-    Edit,
-    REDUCER_NAME,
-    invalidateList,
-    triggerUnsavedEntity,
-    hideDetails
-);

package/src/Screens/Client/Styles.scss

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

package/src/Screens/Client/Translations.js

@@ -1,61 +0,0 @@
-require('../../App/i18n').use(
-    {
-        en: {
-            clients: 'Clients',
-            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',
-                users: {
-                    addButtonLabel: 'Add user',
-                },
-            },
-            headerInfo: 'Please check your changes in a generated pdf to make sure it looks as expected',
-            footerInfo: 'Please check your changes in a generated pdf to make sure it looks as expected',
-            emailHint: 'separate multiple addresses with a semicolon',
-            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.',
-        },
-        de: {
-            clients: 'Klienten',
-            Users: 'Benutzer',
-            'Theme - Highlight color': 'Theme - Highlightfarbe',
-            'Theme - Font': 'Theme - Font',
-            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',
-            'Post code': 'PLZ',
-            City: 'Stadt',
-            Phone: 'Telefonnummer',
-            'E-Mail(s) receiver for request offer': 'E-Mail(s) für die Angebotsanfrage',
-            'E-Mail sender for request offer': 'Absender E-Mail für die Angebotsanfrage',
-            'CC E-Mail(s) receiver for request offer': 'CC E-Mail(s) für die Angebotsanfrage',
-            'BCC E-Mail(s) receiver for request offer': 'BCC E-Mail(s) für die Angebotsanfrage',
-            'Send offer request email to customer': 'Angebotsanfrage per E-Mail an den Kunden senden',
-            'Client logo': 'Kunden Logo',
-            Texts: 'Texte',
-            themeColorError: 'Bitte gib einen hexadezimalen Farbwert ein (z.B. #0000ff)',
-            client: {
-                addButtonLabel: 'Klienten hinzufügen',
-                users: {
-                    addButtonLabel: 'Benutzer hinzufügen',
-                },
-            },
-            headerInfo: 'Bitte überprüfe Deine Änderungen in einem generierten PDF',
-            footerInfo: 'Bitte überprüfe Deine Änderungen in einem generierten PDF',
-            emailHint: 'trenne mehrere Adressen mit einem Semikolon',
-            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.',
-        },
-    },
-    true
-);

package/src/Screens/Client/index.js

@@ -1,9 +0,0 @@
-import Screen from './Screen';
-import Reducer from './Reducers/Reducer';
-import { addReducers } from '../../App/FeatureReducers';
-
-addReducers(Reducer);
-
-export default {
-    Screen,
-};