2021-02-04 19:15:23 +01:00
|
|
|
import PropTypes from 'prop-types';
|
2023-03-06 18:48:28 +01:00
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { useSelector } from 'react-redux';
|
2021-02-04 19:15:23 +01:00
|
|
|
import FileInput from 'react-simple-file-input';
|
2023-03-06 18:48:28 +01:00
|
|
|
import {
|
|
|
|
ButtonLink,
|
|
|
|
FormTextField,
|
|
|
|
Text,
|
|
|
|
TEXT_FIELD_SIZES,
|
|
|
|
TEXT_FIELD_TYPES,
|
|
|
|
} from '../../../components/component-library';
|
|
|
|
import {
|
|
|
|
Size,
|
|
|
|
TextVariant,
|
2023-05-24 00:54:30 +02:00
|
|
|
TextAlign,
|
2023-03-06 18:48:28 +01:00
|
|
|
} from '../../../helpers/constants/design-system';
|
2022-08-23 16:19:31 +02:00
|
|
|
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
|
2023-03-06 18:48:28 +01:00
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
|
|
import { displayWarning } from '../../../store/actions';
|
|
|
|
import BottomButtons from './bottom-buttons';
|
2019-06-17 13:07:34 +02:00
|
|
|
|
2023-03-06 18:48:28 +01:00
|
|
|
JsonImportSubview.propTypes = {
|
|
|
|
importAccountFunc: PropTypes.func.isRequired,
|
|
|
|
};
|
2020-01-28 14:40:03 +01:00
|
|
|
|
2023-03-06 18:48:28 +01:00
|
|
|
export default function JsonImportSubview({ importAccountFunc }) {
|
|
|
|
const t = useI18nContext();
|
|
|
|
const warning = useSelector((state) => state.appState.warning);
|
|
|
|
const [password, setPassword] = useState('');
|
|
|
|
const [fileContents, setFileContents] = useState('');
|
2018-03-09 16:30:31 +01:00
|
|
|
|
2023-05-24 00:54:30 +02:00
|
|
|
const isPrimaryDisabled = fileContents === '';
|
2018-01-10 19:25:38 +01:00
|
|
|
|
2023-03-06 18:48:28 +01:00
|
|
|
function handleKeyPress(event) {
|
|
|
|
if (!isPrimaryDisabled && event.key === 'Enter') {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
2023-03-06 18:48:28 +01:00
|
|
|
_importAccountFunc();
|
2018-03-09 16:30:31 +01:00
|
|
|
}
|
|
|
|
}
|
2016-11-04 23:08:50 +01:00
|
|
|
|
2023-03-06 18:48:28 +01:00
|
|
|
function _importAccountFunc() {
|
|
|
|
if (isPrimaryDisabled) {
|
|
|
|
displayWarning(t('needImportFile'));
|
|
|
|
} else {
|
|
|
|
importAccountFunc('JSON File', [fileContents, password]);
|
2018-03-09 16:30:31 +01:00
|
|
|
}
|
2017-01-19 01:09:21 +01:00
|
|
|
}
|
2020-01-28 14:40:03 +01:00
|
|
|
|
2023-03-06 18:48:28 +01:00
|
|
|
return (
|
|
|
|
<>
|
2023-05-24 00:54:30 +02:00
|
|
|
<Text variant={TextVariant.bodyMd} textAlign={TextAlign.Center}>
|
2023-03-06 18:48:28 +01:00
|
|
|
{t('usedByClients')}
|
|
|
|
<ButtonLink
|
|
|
|
size={Size.inherit}
|
|
|
|
href={ZENDESK_URLS.IMPORTED_ACCOUNTS}
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
>
|
|
|
|
{t('fileImportFail')}
|
|
|
|
</ButtonLink>
|
|
|
|
</Text>
|
|
|
|
|
|
|
|
<FileInput
|
2023-05-24 00:54:30 +02:00
|
|
|
id="file-input"
|
|
|
|
data-testid="file-input"
|
2023-03-06 18:48:28 +01:00
|
|
|
readAs="text"
|
|
|
|
onLoad={(event) => setFileContents(event.target.result)}
|
|
|
|
style={{
|
|
|
|
padding: '20px 0px 12px 15%',
|
|
|
|
fontSize: '16px',
|
|
|
|
display: 'flex',
|
|
|
|
justifyContent: 'center',
|
|
|
|
width: '100%',
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<FormTextField
|
|
|
|
id="json-password-box"
|
|
|
|
size={TEXT_FIELD_SIZES.LARGE}
|
|
|
|
autoFocus
|
|
|
|
type={TEXT_FIELD_TYPES.PASSWORD}
|
|
|
|
helpText={warning}
|
|
|
|
error
|
2023-05-24 00:54:30 +02:00
|
|
|
placeholder={t('enterOptionalPassword')}
|
2023-03-06 18:48:28 +01:00
|
|
|
value={password}
|
2023-05-24 00:54:30 +02:00
|
|
|
onChange={(event) => {
|
|
|
|
setPassword(event.target.value);
|
|
|
|
}}
|
2023-03-06 18:48:28 +01:00
|
|
|
inputProps={{
|
|
|
|
onKeyPress: handleKeyPress,
|
|
|
|
}}
|
|
|
|
marginBottom={4}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<BottomButtons
|
|
|
|
importAccountFunc={_importAccountFunc}
|
|
|
|
isPrimaryDisabled={isPrimaryDisabled}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
2018-03-09 16:30:31 +01:00
|
|
|
}
|