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

Add a deadend step to report flow

Browse source
This commit is contained in:
seotts 2020-03-27 11:40:30 -04:00
parent af78e4c05e
commit 739cf8117b
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, category: 0,
subcategory: 1, subcategory: 1,
textInput: 2, textInput: 2,
confirmation: 3 confirmation: 3,
deadend: 4
}; };
class ReportModal extends React.Component { class ReportModal extends React.Component {
@ -51,9 +52,13 @@ class ReportModal extends React.Component {
}); });
} }
handleSetSubcategory (formData) { 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({ return this.setState({
subcategoryValue: formData.subcategory, subcategoryValue: subcategory.value,
step: STEPS.textInput step: subcategory.preventSubmission ? STEPS.deadend : STEPS.textInput
}); });
} }
handleSubmit (formData) { handleSubmit (formData) {
@ -177,9 +182,9 @@ class ReportModal extends React.Component {
> >
<div className="instructions"> <div className="instructions">
<div className="instructions-header"> <div className="instructions-header">
<FormattedMessage {...subcategory.label} /> <FormattedMessage {...finalCategory.label} />
</div> </div>
<FormattedMessage {...subcategory.prompt} /> <FormattedMessage {...finalCategory.prompt} />
</div> </div>
<TextArea <TextArea
autoFocus autoFocus
@ -213,6 +218,20 @@ class ReportModal extends React.Component {
<FormattedMessage id="report.receivedBody" /> <FormattedMessage id="report.receivedBody" />
</div> </div>
</FormStep> </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> </Progression>
</ModalInnerContent> </ModalInnerContent>
</div> </div>