Newer
Older
Component based on `redux-form`.
Submit form through a wizard (applicable for `Submit Manuscript` flow) using a configuration file.
Configuration file must be under config `journal` (make use of `withJournal`) and exported with `wizard` key.
`/xpub-collabra/app/config/journal/wizard.js` (see below file example)
### `Wizard.js` options
|Key|Description|Required|Default|Type|
| :---: | :---: | :---: | :---: | :---: |
| showProgress | Show progress bar | true | false | `bool` |
| submitText | Text to show on Submit button | false | 'Submit Manuscript' | `string` |
| backText | Text to show on Back button - Go back 1 step | false | 'Back' | `string` |
| nextText | Text to show on Back button - Go forward 1 step | false | 'Next' | `string` |
| cancelText | Text to show on Cancel button - Go to `/` | false | 'Back' | `string` |
| submissionRedirect | Path to redirect user after submitting the form. Passes as state `project` as project.id and `version` as version.id | false | `/` | `string` |
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
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
| confirmationModal | If present, component will be rendered as a modal before submitting the form. Accepts `toggleConfirming` to close the modal and must have 2 buttons for submit and close modal (see below) | false | none | `React Component` |
| formSectionKeys | Redux form data model. Keys to be saved on the form. | true | [] | `array` |
| dispatchFunctions | Functions to be dispatched in case a component needs a dispatched function (f.i. `uploadFile`) | true | none | `array` |
| steps | Each object in steps array represents a step in the form. In case of one-page form, just 1 step is needed. | true | none | `array` of `object` |
#### `Steps` options
|Key|Description|Required|Default|Type|
| :---: | :---: | :---: | :---: | :---: |
| label | Text on progress bar | false | '' | `string` |
| title | Text as title of the step | false | '' | `string` |
| subtitle | Text as info of the step | false | '' | `string` or `HTML` |
| children | Fields/Components to be rendered per each step | true | none | `array` of `object` |
#### `Steps children` options
|Key|Description|Required|Default|Type|
| :---: | :---: | :---: | :---: | :---: |
| fieldId | Path to the `redux-form` (f.i. for title in metadata use `metadata.title` ) | true | none | `string` |
| renderComponent | React Component to be rendered. Usually, a PubSweetUI component or custom component | true | none | `React Component` |
| validate | Array of custom validation per each field | false | none | `array` |
| `<props>` | Other props to be passed for that specific component | false | none | `label` `options` `placeholder` `title` `parse` `format` |
#### ConfirmationModal.js
```js
const ConfirmationModal = ({ toggleConfirming }) => (
<div>
<p>Explanatory text here</p>
<Button primary type="submit"> Submit your manuscript</Button>
<Button onClick={toggleConfirming}> get back to your submission (close modal)</Button>
</div>
)
```
#### Example of `Wizard.js` for one-page form
```js
export default {
showProgress: false,
submitText: 'Submit your manuscript',
backText: 'Back',
cancelText: 'Cancel',
nextText: 'Next',
formSectionKeys: [
'metadata',
'files',
],
submissionRedirect: '/',
confirmationModal: ConfirmModal,
dispatchFunctions: [uploadFile],
steps: [
{
label: 'Submission information',
title: 'Submission information',
subtitle: `We have ingested your manuscript. To access your manuscript in an editor, please view manuscript page.
<br/> To complete your submission, please answer the following questions. <br/>
The answers will be automatically saved.`,
children: [
{
fieldId: 'metadata.title',
renderComponent: TitleEditor,
placeholder: 'Title',
title: 'Title',
validate: [required, minChars20, maxChars500],
},
{
fieldId: 'metadata.abstract',
renderComponent: AbstractEditor,
title: 'Abstract',
placeholder: 'Write an abstract',
validate: [required, minChars100, maxChars5000],
},
{
fieldId: 'label-authors',
renderComponent: Label,
label: 'Authors',
},
{
fieldId: 'metadata.authors',
renderComponent: TextField,
title: 'Authors',
placeholder: 'Enter author names...',
format: join(),
parse: split(),
validate: [minSize1],
},
{
fieldId: 'files.supplementary',
label: 'Upload supplementary materials',
renderComponent: Supplementary,
},
],
},
],
}
```