diff --git a/packages/component-modal/src/components/ConfirmationModal.js b/packages/component-modal/src/components/ConfirmationModal.js
index c3436753c864b33c18c7756756e2ad29b894d4bb..55b2b1012309f77fdf25e892516c8c6ff9662fdf 100644
--- a/packages/component-modal/src/components/ConfirmationModal.js
+++ b/packages/component-modal/src/components/ConfirmationModal.js
@@ -1,23 +1,23 @@
import React from 'react'
+import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
import { compose, withHandlers } from 'recompose'
-import { Icon, Button, th, Spinner } from '@pubsweet/ui'
-import styled, { css, withTheme } from 'styled-components'
+import { Icon, Button, Spinner } from '@pubsweet/ui'
const ConfirmationModal = ({
title,
- subtitle,
content,
- onConfirm,
onClose,
- confirmText = 'OK',
- cancelText = 'Cancel',
- theme,
+ subtitle,
+ onConfirm,
modalError,
isFetching,
+ confirmText = 'OK',
+ cancelText = 'Cancel',
}) => (
<Root>
<CloseIcon data-test="icon-modal-hide" onClick={onClose}>
- <Icon color={theme.colorPrimary}>x</Icon>
+ <Icon primary>x</Icon>
</CloseIcon>
{title && <Title dangerouslySetInnerHTML={{ __html: title }} />}
{subtitle && <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />}
@@ -44,7 +44,6 @@ const ConfirmationModal = ({
)
export default compose(
- withTheme,
withHandlers({
onClose: ({ onCancel, hideModal }) => () => {
if (onCancel && typeof onCancel === 'function') {
@@ -120,5 +119,4 @@ const ErrorMessage = styled.div`
margin: ${th('subGridUnit')};
text-align: center;
`
-
// #endregion
diff --git a/packages/component-modal/src/components/SubmissionModal.js b/packages/component-modal/src/components/SubmissionModal.js
new file mode 100644
index 0000000000000000000000000000000000000000..62060fb6bfcc8c6024cded7bbe56c9c573967d3d
--- /dev/null
+++ b/packages/component-modal/src/components/SubmissionModal.js
@@ -0,0 +1,130 @@
+import React from 'react'
+import { th } from '@pubsweet/ui-toolkit'
+import styled, { css } from 'styled-components'
+import { Icon, Button, Spinner } from '@pubsweet/ui'
+
+const SubmissionModal = ({
+ title,
+ content,
+ onClose,
+ subtitle,
+ hideModal,
+ onConfirm,
+ modalError,
+ isFetching,
+ confirmText = 'OK',
+ cancelText = 'Cancel',
+}) => (
+ <Root>
+ <CloseIcon onClick={hideModal}>
+ <Icon primary>x</Icon>
+ </CloseIcon>
+ <Title>{title}</Title>
+ <Text>
+ The corresponding author confirms that all co-authors are included, and
+ taht everyone listed as co-author agrees to that role and all the
+ following requirements and acknowledgements. The submission represents
+ original work and that sources are given proper attribution.
+ </Text>
+ <Text>
+ The journal employs <b>CrossCheck</b> to compare submissions agaist a
+ large and growing database of published scholarly content. If in the
+ judgement of a senior editor a submission is genuinely suspected of
+ plagiarism, it will be returned to the author(s) with a request for
+ explanation.
+ </Text>
+ <Text>
+ The research was conducted in accordance with ethical principles.
+ </Text>
+ <Text>
+ There is a Data Accessibility Statement, containing information about the
+ location of open data and materials, in the manuscript.
+ </Text>
+ <Text>
+ A conflict of interest statement is present in the manuscript, even if to
+ state no conflicts of interest.
+ </Text>
+ {modalError && <ErrorMessage>{modalError}</ErrorMessage>}
+ <ButtonsContainer>
+ <Button data-test="button-modal-hide" onClick={onClose}>
+ {cancelText}
+ </Button>
+ {onConfirm &&
+ (isFetching ? (
+ <SpinnerContainer>
+ <Spinner size={4} />
+ </SpinnerContainer>
+ ) : (
+ <Button data-test="button-modal-confirm" onClick={onConfirm} primary>
+ {confirmText}
+ </Button>
+ ))}
+ </ButtonsContainer>
+ </Root>
+)
+
+export default SubmissionModal
+
+// #region styled-components
+const defaultText = css`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+`
+
+const SpinnerContainer = styled.div`
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: calc(${th('gridUnit')} * 2);
+ min-width: calc(${th('gridUnit')} * 4);
+`
+
+const Root = styled.div`
+ background-color: ${th('backgroundColor')};
+ border: ${th('borderDefault')};
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: calc(${th('gridUnit')} * 2);
+ position: relative;
+ overflow-y: scroll;
+ width: calc(${th('gridUnit')} * 25);
+`
+
+const Title = styled.div`
+ ${defaultText};
+ font-size: ${th('fontSizeHeading5')};
+ margin-bottom: ${th('gridUnit')};
+ text-align: center;
+`
+
+const Text = styled.span`
+ ${defaultText};
+ font-size: ${th('fontSizeBase')};
+ margin-bottom: calc(${th('gridUnit')} / 2);
+
+ & b {
+ display: inline;
+ }
+`
+
+const ButtonsContainer = styled.div`
+ display: flex;
+ justify-content: space-evenly;
+ margin: ${th('gridUnit')} auto 0;
+ width: 100%;
+`
+const CloseIcon = styled.div`
+ cursor: pointer;
+ position: absolute;
+ top: ${th('subGridUnit')};
+ right: ${th('subGridUnit')};
+`
+
+const ErrorMessage = styled.div`
+ color: ${th('colorError')};
+ margin: ${th('subGridUnit')};
+ text-align: center;
+`
+// #endregion
diff --git a/packages/component-modal/src/components/index.js b/packages/component-modal/src/components/index.js
index 724e8d8878f79f7754077b39dda7a1105632eebb..b9e2ba4d828924a9056c7716da563fb644db0d51 100644
--- a/packages/component-modal/src/components/index.js
+++ b/packages/component-modal/src/components/index.js
@@ -1,3 +1,4 @@
export { default as withModal } from './withModal'
export { default as SuccessModal } from './SuccessModal'
+export { default as SubmissionModal } from './SubmissionModal'
export { default as ConfirmationModal } from './ConfirmationModal'
diff --git a/packages/component-wizard/src/components/StepOne.js b/packages/component-wizard/src/components/StepOne.js
index 3b5ab9e4ad28feeb99e509df04842d7029709309..a70040ef39c43074df5e84c9573cc0813d75271e 100644
--- a/packages/component-wizard/src/components/StepOne.js
+++ b/packages/component-wizard/src/components/StepOne.js
@@ -1,7 +1,6 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
-import { required } from 'xpub-validators'
import { Checkbox, ValidatedField } from '@pubsweet/ui'
import { FormItems } from 'pubsweet-components-faraday/src/components'
@@ -36,6 +35,7 @@ const StepOne = () => (
<DefaultText>
I am aware that accepted manuscripts are subject to{' '}
<a
+ data-test="apc-anchor"
href="https://www.hindawi.com/apc/"
rel="noopener noreferrer"
target="_blank"
@@ -47,7 +47,12 @@ const StepOne = () => (
<Row justify="flex-start">
<DefaultText>
I am aware that an{' '}
- <a href="https://orcid.org/" rel="noopener noreferrer" target="_blank">
+ <a
+ data-test="orcid-anchor"
+ href="https://orcid.org/"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
ORCID ID
</a>{' '}
is required for the corresponding author before the article can be
@@ -59,6 +64,7 @@ const StepOne = () => (
<DefaultText>
I am aware that if my submission is covered by an{' '}
<a
+ data-test="membership-anchor"
href="https://www.hindawi.com/members/"
rel="noopener noreferrer"
target="_blank"
@@ -74,17 +80,13 @@ const StepOne = () => (
</DefaultText>
</Row>
<Row justify="center">
- <ValidatedField
- component={CustomCheckbox}
- name="declarations.agree"
- validate={[required]}
- />
+ <ValidatedField component={CustomCheckbox} name="declarations.agree" />
</Row>
</Fragment>
)
const CustomCheckbox = input => (
- <RootCheckbox>
+ <RootCheckbox data-test="agree-checkbox">
<Checkbox
checked={input.value}
{...input}
diff --git a/packages/component-wizard/src/components/StepThree.js b/packages/component-wizard/src/components/StepThree.js
index d0e68a9cb2db14701176b3f5f2f291497b9672ee..79697e70a5dff0756fdb377e5b75d16daa4c946f 100644
--- a/packages/component-wizard/src/components/StepThree.js
+++ b/packages/component-wizard/src/components/StepThree.js
@@ -1,5 +1,4 @@
import React, { Fragment } from 'react'
-import { get, has } from 'lodash'
import { Field } from 'redux-form'
import { Files, FormItems } from 'pubsweet-components-faraday/src/components'
@@ -8,7 +7,7 @@ import { Empty } from './'
const { Err, Row, Label, Title, RowItem, Subtitle } = FormItems
-const StepThree = ({ version, project, submitFailed, formSyncErrors }) => (
+const StepThree = ({ version, project, filesError }) => (
<Fragment>
<Title>3. Manuscript Files Upload</Title>
<Subtitle>
@@ -20,10 +19,7 @@ const StepThree = ({ version, project, submitFailed, formSyncErrors }) => (
<Label>Files</Label>
<Field component={Empty} name="files" />
<Files parentForm="submission" project={project} version={version} />
- {submitFailed &&
- has(formSyncErrors, 'files') && (
- <Err align="left">{get(formSyncErrors, 'files')}</Err>
- )}
+ {filesError && <Err align="left">{filesError}</Err>}
</RowItem>
</Row>
</Fragment>
diff --git a/packages/component-wizard/src/components/StepTwo.js b/packages/component-wizard/src/components/StepTwo.js
index 5170f23d2cf866ade051968fd908187dedcfa8b5..840d381490d20c980f89ea6e7a3ee5fce7d59e3c 100644
--- a/packages/component-wizard/src/components/StepTwo.js
+++ b/packages/component-wizard/src/components/StepTwo.js
@@ -1,9 +1,11 @@
import React, { Fragment } from 'react'
-import { get, has } from 'lodash'
import { Field } from 'redux-form'
+import { Tooltip } from 'react-tippy'
+import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { AbstractEditor } from 'xpub-edit'
-import { Menu, YesOrNo, ValidatedField } from '@pubsweet/ui'
+import { Menu, YesOrNo, ValidatedField, Icon } from '@pubsweet/ui'
+import styled from 'styled-components'
import {
FormItems,
@@ -12,23 +14,13 @@ import {
import { Empty } from './'
-const {
- Err,
- Row,
- Label,
- Title,
- RowItem,
- Subtitle,
- TextField,
- TextAreaField,
-} = FormItems
+const { Err, Row, Label, Title, RowItem, Subtitle, TextField } = FormItems
const StepTwo = ({
version,
project,
- formValues,
- submitFailed,
- formSyncErrors,
+ hasConflicts,
+ authorsError,
manuscriptTypes,
}) => (
<Fragment>
@@ -40,7 +32,7 @@ const StepTwo = ({
authors.
</Subtitle>
<Row>
- <RowItem flex={3} vertical withRightMargin>
+ <RowItem data-test="submission-title" flex={3} vertical withRightMargin>
<Label>MANUSCRIPT TITLE*</Label>
<ValidatedField
component={TextField}
@@ -48,7 +40,7 @@ const StepTwo = ({
validate={[required]}
/>
</RowItem>
- <RowItem vertical>
+ <RowItem data-test="submission-type" vertical>
<Label>MANUSCRIPT TYPE*</Label>
<ValidatedField
component={input => <Menu options={manuscriptTypes} {...input} />}
@@ -58,7 +50,7 @@ const StepTwo = ({
</RowItem>
</Row>
<Row>
- <RowItem vertical>
+ <RowItem data-test="submission-abstract" vertical>
<Label>ABSTRACT*</Label>
<ValidatedField
component={AbstractEditor}
@@ -69,23 +61,48 @@ const StepTwo = ({
</Row>
<Row>
<RowItem vertical>
- <Label>AUTHORS DETAILS*</Label>
+ <Label justify="space-between">
+ AUTHORS DETAILS*
+ <AuthorGuidelines
+ data-test="authors-anchor"
+ href="https://www.hindawi.com/authors/"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ Hindawi Author Submission Guidelines
+ </AuthorGuidelines>
+ </Label>
<Field component={Empty} name="authors" />
<AuthorList
parentForm="submission"
project={project}
version={version}
/>
- {submitFailed &&
- has(formSyncErrors, 'authors') && (
- <Err align="left">{get(formSyncErrors, 'authors')}</Err>
- )}
+ {authorsError && (
+ <Err align="left" data-test="error-author">
+ {authorsError}
+ </Err>
+ )}
</RowItem>
</Row>
<Row>
- <RowItem vertical>
- <Label>Is there a potential conflict of interest?</Label>
+ <RowItem data-test="submission-conflicts-radio" vertical>
+ <Label>
+ Is there a potential conflict of interest?
+ <Tooltip
+ arrow
+ data-test="submission-tooltip"
+ html={<ConflictsTooltip />}
+ interactive
+ position="bottom"
+ trigger="click"
+ >
+ <TooltipIcon>
+ <Icon primary>help-circle</Icon>
+ </TooltipIcon>
+ </Tooltip>
+ </Label>
<Field
component={({ input }) => <YesOrNo {...input} />}
name="conflicts.hasConflicts"
@@ -93,12 +110,12 @@ const StepTwo = ({
</RowItem>
</Row>
- {get(formValues, 'conflicts.hasConflicts', 'no') === 'yes' && (
+ {hasConflicts && (
<Row>
- <RowItem vertical>
+ <RowItem data-test="submission-conflicts-text" vertical>
<Label>CONFLICT OF INTEREST DETAILS*</Label>
<ValidatedField
- component={TextAreaField}
+ component={AbstractEditor}
name="conflicts.message"
validate={[required]}
/>
@@ -109,3 +126,44 @@ const StepTwo = ({
)
export default StepTwo
+
+const ConflictsTooltip = () => (
+ <TooltipText>
+ When an author, editor, or reviewer has a financial/personal interest or
+ belief that could affest his/her objectivity, or inappropriately influence
+ his/her actions, a potential conflict of interest exists.
+ <MoreInfoLink
+ href="https://www.hindawi.com/editors/coi/"
+ rel="noopener noreferrer"
+ target="_blank"
+ >
+ More info
+ </MoreInfoLink>
+ </TooltipText>
+)
+
+// #region styled-components
+const AuthorGuidelines = styled.a`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeBaseSmall')};
+ text-transform: none;
+`
+
+const TooltipIcon = styled.div.attrs({
+ className: 'tooltip-icon',
+})`
+ padding-top: ${th('subGridUnit')};
+`
+
+const TooltipText = styled.span`
+ color: #d8d8d8;
+ font-family: 'Noto Serif';
+ font-size: 14px;
+`
+
+const MoreInfoLink = styled.a`
+ color: #d8d8d8;
+ margin-left: 3px;
+`
+// #endregion
diff --git a/packages/component-wizard/src/components/NewWizard.js b/packages/component-wizard/src/components/SubmissionWizard.js
similarity index 76%
rename from packages/component-wizard/src/components/NewWizard.js
rename to packages/component-wizard/src/components/SubmissionWizard.js
index 04bec6db14666f45de1021cea6ce6083f9596166..d425016fb8dee8861acb58139b102d03a7355526 100644
--- a/packages/component-wizard/src/components/NewWizard.js
+++ b/packages/component-wizard/src/components/SubmissionWizard.js
@@ -12,6 +12,11 @@ import HTML5Backend from 'react-dnd-html5-backend'
import { selectCollection, selectFragment } from 'xpub-selectors'
import { withStateHandlers, compose, toClass, withProps } from 'recompose'
+import {
+ withModal,
+ SubmissionModal,
+} from 'pubsweet-component-modal/src/components'
+
import {
reduxForm,
getFormValues,
@@ -34,31 +39,39 @@ const NewWizard = ({
step,
history,
prevStep,
+ isLastStep,
+ isFirstStep,
handleSubmit,
journal: { manuscriptTypes = [] },
...rest
}) => (
<Root className="wizard-root">
<Steps currentStep={step} margin="0 20px 60px 0">
- <Steps.Step key="step-one" title="Pre-submission Checklist" />
- <Steps.Step key="step-two" title="Manuscript & Author Details" />
- <Steps.Step key="step-three" title="Files Upload" />
+ {wizardSteps.map(({ stepTitle }) => (
+ <Steps.Step key={stepTitle} title={stepTitle} />
+ ))}
</Steps>
<StepRoot className="wizard-step">
- <IconButton onClick={() => history.push('/')}>
+ <IconButton
+ data-test="submission-close"
+ onClick={() => history.push('/')}
+ >
<Icon primary size={4}>
x
</Icon>
</IconButton>
- {wizardSteps[step]({ manuscriptTypes, ...rest })}
+ {wizardSteps[step].component({ manuscriptTypes, ...rest })}
<Row centered>
- <ButtonContainer isFirstStep={step === 0}>
- {step !== 0 && <Button onClick={prevStep}>{`< BACK`}</Button>}
- <Button onClick={handleSubmit} primary>
- {step === wizardSteps.length - 1
- ? `SUBMIT MANUSCRIPT`
- : `NEXT STEP >`}
+ <ButtonContainer isFirstStep={isFirstStep}>
+ {!isFirstStep && (
+ <Button
+ data-test="submission-back"
+ onClick={prevStep}
+ >{`< BACK`}</Button>
+ )}
+ <Button data-test="submission-next" onClick={handleSubmit} primary>
+ {isLastStep ? `SUBMIT MANUSCRIPT` : `NEXT STEP >`}
</Button>
</ButtonContainer>
</Row>
@@ -104,6 +117,16 @@ export default compose(
},
),
withProps(setInitialValues),
+ withProps(({ formValues, formSyncErrors, submitFailed, step }) => ({
+ isFirstStep: step === 0,
+ isLastStep: step === wizardSteps.length - 1,
+ filesError: submitFailed && get(formSyncErrors, 'files', ''),
+ authorsError: submitFailed && get(formSyncErrors, 'authors', ''),
+ hasConflicts: get(formValues, 'conflicts.hasConflicts', 'no') === 'yes',
+ })),
+ withModal(() => ({
+ modalComponent: SubmissionModal,
+ })),
reduxForm({
form: 'submission',
validate,
diff --git a/packages/component-wizard/src/components/index.js b/packages/component-wizard/src/components/index.js
index 55ca40ca494c40dc84ed7e2e419d384b20f22a0a..f0e2b5fa9f1ea4cbbf617e9b451531f13b40c9c0 100644
--- a/packages/component-wizard/src/components/index.js
+++ b/packages/component-wizard/src/components/index.js
@@ -4,6 +4,19 @@ import StepThree from './StepThree'
export { default as Empty } from './Empty'
export { default as Wizard } from './WizardPage'
-export { default as NewWizard } from './NewWizard'
+export { default as SubmissionWizard } from './SubmissionWizard'
-export const wizardSteps = [StepOne, StepTwo, StepThree]
+export const wizardSteps = [
+ {
+ stepTitle: 'Pre-submission Checklist',
+ component: StepOne,
+ },
+ {
+ stepTitle: 'Manuscript & Author Details',
+ component: StepTwo,
+ },
+ {
+ stepTitle: 'Files Upload',
+ component: StepThree,
+ },
+]
diff --git a/packages/component-wizard/src/components/utils.js b/packages/component-wizard/src/components/utils.js
index aab74fa98f1d2d347ffcd6413594db79efb4af95..052f731d68102b32a44da1253efafbc90888e15e 100644
--- a/packages/component-wizard/src/components/utils.js
+++ b/packages/component-wizard/src/components/utils.js
@@ -1,5 +1,14 @@
import { SubmissionError } from 'redux-form'
-import { get, isBoolean, isEmpty, debounce, isEqual, pick, omit } from 'lodash'
+import {
+ set,
+ get,
+ omit,
+ pick,
+ isEqual,
+ isEmpty,
+ debounce,
+ isBoolean,
+} from 'lodash'
export const setInitialValues = ({ version }) => ({
initialValues: {
@@ -14,6 +23,10 @@ export const setInitialValues = ({ version }) => ({
export const validate = (values, props) => {
const errors = {}
+ if (!get(values, 'declarations.agree')) {
+ set(errors, 'declarations.agree', 'Required')
+ }
+
if (isEmpty(get(values, 'authors', []))) {
errors.authors = 'Authors are required.'
}
@@ -30,6 +43,10 @@ export const validate = (values, props) => {
errors.files = 'At least one manuscript file is required.'
}
+ if (isEmpty(get(values, 'files.coverLetter', []))) {
+ errors.files = 'Cover letter file is required.'
+ }
+
return errors
}
@@ -64,6 +81,8 @@ export const onSubmit = (
step,
history,
nextStep,
+ showModal,
+ hideModal,
submitManuscript,
version: { id: fragmentId },
project: { id: collectionId, customId },
@@ -72,18 +91,26 @@ export const onSubmit = (
if (step !== 2) {
nextStep()
} else {
- submitManuscript(collectionId, fragmentId)
- .then(r => {
- history.push('/confirmation-page', {
- customId,
- version: fragmentId,
- project: collectionId,
- })
- })
- .catch(err => {
- if (err.validationErrors) {
- throw new SubmissionError()
- }
- })
+ showModal({
+ title:
+ 'By submitting the manuscript you agree to the following statements:',
+ confirmText: 'AGREE & SUBMIT',
+ cancelText: 'BACK TO SUBMISSION',
+ onConfirm: () =>
+ submitManuscript(collectionId, fragmentId)
+ .then(r => {
+ history.push('/confirmation-page', {
+ customId,
+ version: fragmentId,
+ project: collectionId,
+ })
+ })
+ .catch(err => {
+ if (err.validationErrors) {
+ throw new SubmissionError()
+ }
+ }),
+ onCancel: hideModal,
+ })
}
}
diff --git a/packages/components-faraday/src/components/AuthorList/Author.js b/packages/components-faraday/src/components/AuthorList/Author.js
index d993d10b1074579a766a60f75e880cd07a00c3cd..56f50c048418e7e6468061d8c4e5650d16b1bd98 100644
--- a/packages/components-faraday/src/components/AuthorList/Author.js
+++ b/packages/components-faraday/src/components/AuthorList/Author.js
@@ -28,12 +28,20 @@ export default ({
<Title>{parseAuthorType(isSubmitting, isCorresponding, index)}</Title>
<ButtonContainer>
{!isSubmitting && (
- <ClickableIcon onClick={removeAuthor(id)} title="Delete author">
+ <ClickableIcon
+ data-test={`delete-author-${id}`}
+ onClick={removeAuthor(id)}
+ title="Delete author"
+ >
<Icon size={3}>trash</Icon>
</ClickableIcon>
)}
{editedAuthor < 0 && (
- <ClickableIcon onClick={setAuthorEdit(index)} title="Edit author">
+ <ClickableIcon
+ data-test={`edit-author-${id}`}
+ onClick={setAuthorEdit(index)}
+ title="Edit author"
+ >
<Icon size={3}>edit-2</Icon>
</ClickableIcon>
)}
diff --git a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
index c8dd1d3d28672334d1818d3459ffc7c5bb5fb192..aed72d53cbbfa529b176c8152fef0d590e99caf8 100644
--- a/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
+++ b/packages/components-faraday/src/components/AuthorList/AuthorEditor.js
@@ -1,10 +1,12 @@
import React, { Fragment } from 'react'
import { pick } from 'lodash'
import { connect } from 'react-redux'
-import styled, { css } from 'styled-components'
-import { Icon, Checkbox, th } from '@pubsweet/ui'
+import { required } from 'xpub-validators'
import { compose, withProps } from 'recompose'
+import styled, { css } from 'styled-components'
+import { Icon, Checkbox, ValidatedField, th } from '@pubsweet/ui'
import { reduxForm, Field, change as changeForm } from 'redux-form'
+import { FormItems } from 'pubsweet-components-faraday/src/components'
import { Spinner } from '../UIComponents'
@@ -13,10 +15,11 @@ import {
authorFailure,
getAuthorFetching,
} from '../../redux/authors'
-import { ValidatedTextField, Label } from './FormItems'
import { authorKeys, parseEditedAuthors } from './utils'
+const { Row, Label, RowItem, TextField, DefaultText } = FormItems
+
const renderCheckbox = ({ input }) => (
<Checkbox checked={input.value} type="checkbox" {...input} />
)
@@ -45,11 +48,14 @@ const AuthorEdit = ({
</TitleContainer>
<ButtonsContainer>
- <ClickableIcon onClick={setAuthorEdit(-1)}>
+ <ClickableIcon
+ data-test="author-edit-close"
+ onClick={setAuthorEdit(-1)}
+ >
<Icon size={3}>x-circle</Icon>
</ClickableIcon>
{!isFetching ? (
- <ClickableIcon onClick={handleSubmit}>
+ <ClickableIcon data-test="author-edit-save" onClick={handleSubmit}>
<Icon size={3}>check-circle</Icon>
</ClickableIcon>
) : (
@@ -59,21 +65,37 @@ const AuthorEdit = ({
</Header>
<Row>
- <ValidatedTextField
- isRequired
- label="First name*"
- name="edit.firstName"
- />
- <ValidatedTextField isRequired label="Last name*" name="edit.lastName" />
+ <RowItem data-test="edit-author-firstname" vertical withRightMargin>
+ <Label>First name*</Label>
+ <ValidatedField
+ component={TextField}
+ name="edit.firstName"
+ validate={[required]}
+ />
+ </RowItem>
+ <RowItem data-test="edit-author-lastname" vertical>
+ <Label>Last name*</Label>
+ <ValidatedField
+ component={TextField}
+ name="edit.lastName"
+ validate={[required]}
+ />
+ </RowItem>
</Row>
<Row>
- <Label label="Email" value={email} />
- <ValidatedTextField
- isRequired
- label="Affiliation*"
- name="edit.affiliation"
- />
+ <RowItem vertical withRightMargin>
+ <Label>Email</Label>
+ <DefaultText>{email}</DefaultText>
+ </RowItem>
+ <RowItem data-test="edit-author-affiliation" vertical>
+ <Label>Affiliation*</Label>
+ <ValidatedField
+ component={TextField}
+ name="edit.affiliation"
+ validate={[required]}
+ />
+ </RowItem>
</Row>
</Root>
)
@@ -111,11 +133,11 @@ const defaultText = css`
font-family: ${th('fontReading')};
`
-const Row = styled.div`
- display: flex;
- flex-direction: row;
- margin: ${th('subGridUnit')} 0;
-`
+// const Row = styled.div`
+// display: flex;
+// flex-direction: row;
+// margin: ${th('subGridUnit')} 0;
+// `
const TitleContainer = styled.div`
align-items: center;
diff --git a/packages/components-faraday/src/components/Files/Files.js b/packages/components-faraday/src/components/Files/Files.js
index 82296d4448ed08c73c8b88e2feb49261b0890e4e..b225acbabea7d6188800d23957eb4c630c228c30 100644
--- a/packages/components-faraday/src/components/Files/Files.js
+++ b/packages/components-faraday/src/components/Files/Files.js
@@ -45,7 +45,7 @@ const Files = ({
maxFiles={Number.POSITIVE_INFINITY}
moveItem={moveItem('manuscripts')}
removeFile={removeFile('manuscripts')}
- title="Main manuscript"
+ title="Main manuscript*"
/>
<FileSection
addFile={addFile('supplementary')}
@@ -69,7 +69,7 @@ const Files = ({
maxFiles={1}
moveItem={moveItem('coverLetter')}
removeFile={removeFile('coverLetter')}
- title="Cover letter"
+ title="Cover letter*"
/>
<Error show={error}> File error, please try again.</Error>
</Fragment>
diff --git a/packages/components-faraday/src/components/UIComponents/FormItems.js b/packages/components-faraday/src/components/UIComponents/FormItems.js
index e364c5f599a9c7d4ab0538941d87ca0e1c60e123..c9290916b65b57cc542c10166a61792e95fe2638 100644
--- a/packages/components-faraday/src/components/UIComponents/FormItems.js
+++ b/packages/components-faraday/src/components/UIComponents/FormItems.js
@@ -1,4 +1,5 @@
import React from 'react'
+import { get } from 'lodash'
import { th } from '@pubsweet/ui-toolkit'
import styled, { css } from 'styled-components'
@@ -68,7 +69,7 @@ export const FormContainer = styled.form``
export const Row = styled.div.attrs({
className: 'form-row',
})`
- align-items: flex-start;
+ align-items: ${props => get(props, 'alignItems', 'flex-start')};
display: flex;
flex-direction: row;
justify-content: ${({ justify }) => justify || 'space-evenly'};
@@ -100,10 +101,15 @@ export const RowItem = styled.div.attrs({
}
`
-export const Label = styled.div`
+export const Label = styled.div.attrs({
+ className: 'form-label',
+})`
+ align-items: center;
color: ${th('colorPrimary')};
+ display: flex;
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBaseSmall')};
+ justify-content: ${({ justify }) => justify || 'flex-start'};
margin: ${th('subGridUnit')} 0;
text-transform: uppercase;
`
diff --git a/packages/xpub-faraday/app/routes.js b/packages/xpub-faraday/app/routes.js
index 8b77e380a003582af147fe8b6b7777152c3fac4c..6e067df7e6d46c1665d346ae2c29928802497cda 100644
--- a/packages/xpub-faraday/app/routes.js
+++ b/packages/xpub-faraday/app/routes.js
@@ -2,7 +2,7 @@ import React from 'react'
import { Route, Switch } from 'react-router-dom'
import { AuthenticatedComponent } from 'pubsweet-client'
-import { NewWizard } from 'pubsweet-component-wizard/src/components'
+import { SubmissionWizard } from 'pubsweet-component-wizard/src/components'
import {
UserProfilePage,
ChangePasswordPage,
@@ -108,7 +108,7 @@ const Routes = () => (
path="/admin/users/edit/:userId"
/>
<PrivateRoute
- component={NewWizard}
+ component={SubmissionWizard}
exact
path="/projects/:project/versions/:version/submit"
/>