scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-22 15:17:53 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add a deadend step to report flow

Browse source
This commit is contained in:
seotts 2020-03-27 11:40:30 -04:00
parent cb065e85c4
commit 010ee42a99
1 changed files with 24 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/modal/report/modal.jsx
View file

@ -25,7 +25,8 @@ const STEPS = {
category: 0,
subcategory: 1,
textInput: 2,
confirmation: 3
confirmation: 3,
deadend: 4
};
class ReportModal extends React.Component {
@ -51,9 +52,13 @@ class ReportModal extends React.Component {
});
}
handleSetSubcategory (formData) {
const category = this.props.reportOptions.find(o => o.value === this.state.categoryValue) || this.props.reportOptions[0];
const subcategory = category.subcategories.find(o => o.value === formData.subcategory) || category.subcategories[0];
return this.setState({
subcategoryValue: formData.subcategory,
step: STEPS.textInput
subcategoryValue: subcategory.value,
step: subcategory.preventSubmission ? STEPS.deadend : STEPS.textInput
});
}
handleSubmit (formData) {
@ -177,9 +182,9 @@ class ReportModal extends React.Component {
>
<div className="instructions">
<div className="instructions-header">
<FormattedMessage {...subcategory.label} />
<FormattedMessage {...finalCategory.label} />
</div>
<FormattedMessage {...subcategory.prompt} />
<FormattedMessage {...finalCategory.prompt} />
</div>
<TextArea
autoFocus
@ -213,6 +218,20 @@ class ReportModal extends React.Component {
<FormattedMessage id="report.receivedBody" />
</div>
</FormStep>
{/* Deadend */}
<FormStep
submitEnabled
nextLabel={{id: 'general.close'}}
onNext={onRequestClose}
>
<div className="instructions">
<div className="instructions-header">
<FormattedMessage {...finalCategory.label} />
</div>
<FormattedMessage {...finalCategory.prompt} />
</div>
</FormStep>
</Progression>
</ModalInnerContent>
</div>