Newer
Older

Alexandru Munteanu
committed
import React, { Fragment } from 'react'

Anca Ursachi
committed
import { get, isNull, last } from 'lodash'
import { connect } from 'react-redux'
import { th } from '@pubsweet/ui-toolkit'
import { actions } from 'pubsweet-client'
import { withJournal } from 'xpub-journal'
import { ConnectPage } from 'xpub-connect'
import { DragDropContext } from 'react-dnd'
import styled, { css } from 'styled-components'

Alexandru Munteanu
committed
import { Button, Spinner, Steps } from '@pubsweet/ui'
import { selectCollection, selectFragment } from 'xpub-selectors'

Anca Ursachi
committed
import { Redirect } from 'react-router'
import {
compose,
toClass,
withProps,
withHandlers,
} from 'recompose'

Sinzeanu Demetriad
committed
import { Row, MultiAction, IconButton } from 'pubsweet-component-faraday-ui'
import { withModal } from 'pubsweet-component-modal/src/components'
import { getUserToken } from 'pubsweet-component-faraday-selectors/src'
reduxForm,
getFormValues,
hasSubmitFailed,
getFormSyncErrors,

Alexandru Munteanu
committed
import {
addAuthor,
deleteAuthor,
getAuthorError,

Alexandru Munteanu
committed
getAuthorFetching,
} from 'pubsweet-components-faraday/src/redux/authors'
import {
uploadFile,
deleteFile,
getSignedUrl,

Alexandru Munteanu
committed
getFileFetching,
} from 'pubsweet-components-faraday/src/redux/files'
import { wizardSteps } from './'
import { submitManuscript } from '../redux/conversion'
import { getAutosaveFetching } from '../redux/autosave'
import { onChange, onSubmit, setInitialValues, validate } from './utils'

Alexandru Munteanu
committed
isFilesFetching,
isAuthorsFetching,
...rest

Anca Ursachi
committed
}) =>
canEdit ? (

Anca Ursachi
committed
<Root className="wizard-root">
<Steps currentStep={step}>
{wizardSteps.map(({ stepTitle }) => (
<Steps.Step key={stepTitle} title={stepTitle} />
))}
</Steps>

Anca Ursachi
committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<StepRoot className="wizard-step" step={step}>
{React.createElement(wizardSteps[step].component, {
manuscriptTypes,
journal,
isAuthorsFetching,
...rest,
})}
<Row justify="center" mt={2}>
{(isAuthorsFetching || isFilesFetching) && isLastStep ? (
<Spinner />
) : (
<Fragment>
<Button
data-test-id="submission-back"
mr={1}
onClick={isFirstStep ? history.goBack : prevStep}
>
<IconButton
fontIcon="arrowLeft"
mb={0.1}
paddingBottom={1.2}
paddingRight={0.9}
/>
Back
</Button>
<Button
data-test-id="submission-next"
ml={isFirstStep ? 0 : 1}
onClick={handleSubmit}
primary
>
{getButtonText()}
<IconButton
fontIcon="arrowRight"
mb={0.1}
paddingBottom={0.5}
/>
</Button>
</Fragment>
)}
</Row>
</StepRoot>
</Root>
) : (
<Redirect to="/404" />
)
// #endregion
// #region export
export default compose(
ConnectPage(({ match }) => [
actions.getCollection({ id: match.params.project }),
actions.getFragment(
{ id: match.params.project },
{ id: match.params.version },
),
]),
withJournal,
connect(
(state, { match }) => ({
isFetching: getAutosaveFetching(state),

Alexandru Munteanu
committed
isFilesFetching: getFileFetching(state),
reduxAuthorError: getAuthorError(state),
formValues: getFormValues('submission')(state),
submitFailed: hasSubmitFailed('submission')(state),
formSyncErrors: getFormSyncErrors('submission')(state),

Alexandru Munteanu
committed
fragment: selectFragment(state, get(match, 'params.version')),
collection: selectCollection(state, get(match, 'params.project')),

Alexandru Munteanu
committed
isAuthorsFetching: getAuthorFetching(state) || getAutosaveFetching(state),
}),
{
submitManuscript,
updateFragment: actions.updateFragment,
},
),
{ step: 0, authorEditIndex: null },
nextStep: ({ step }) => () => ({
step: Math.min(wizardSteps.length - 1, step + 1),
}),
prevStep: ({ step }) => () => ({ step: Math.max(0, step - 1) }),
setAuthorEditIndex: () => index => ({
authorEditIndex: index,
}),
withProps(setInitialValues),
withProps(
({
step,
location,

Anca Ursachi
committed
fragment,

Anca Ursachi
committed
collection,
submitFailed,
formSyncErrors,
authorEditIndex,
reduxAuthorError,
}) => ({
deleteFile,
uploadFile,
getSignedUrl,
isFirstStep: step === 0,
isAuthorEdit: !isNull(authorEditIndex),
isLastStep: step === wizardSteps.length - 1,
isEditMode: get(location, 'state.editMode', false),
filesError: submitFailed && get(formSyncErrors, 'files', ''),
authorsError:
(submitFailed && get(formSyncErrors, 'authors', '')) ||
reduxAuthorError,

Anca Ursachi
committed
isLastFragment:
get(fragment, 'id', '') === last(get(collection, 'fragments', [])),

Anca Ursachi
committed
status: get(collection, 'status', ''),
}),
),
withProps(({ status, isLastFragment }) => ({
canEdit:
isLastFragment && !(status === 'accepted' || status === 'rejected'),
})),
withHandlers({
getButtonText: ({ isLastStep, isEditMode }) => () => {
if (isEditMode && isLastStep) {
return 'SAVE CHANGES'
}

Sinzeanu Demetriad
committed
return isLastStep ? `SUBMIT MANUSCRIPT` : `NEXT STEP`
withModal(({ isFetching }) => ({
isFetching,
modalComponent: MultiAction,
onChange,
onSubmit,
form: 'submission',
const Root = styled.div`
padding-bottom: calc(${th('gridUnit')} * 3);
const stepCSS = ({ step = 0 }) =>
step === 1
? css`
min-width: calc(${th('gridUnit')} * 96);
`
: css`
width: calc(${th('gridUnit')} * 96);
`
background-color: ${th('wizard.colorBackground')};
border-radius: ${th('borderRadius')};
box-shadow: ${th('boxShadow')};
margin: ${th('gridUnit')} auto 0;
padding: calc(${th('gridUnit')} * 5) calc(${th('gridUnit')} * 4);
position: relative;