Merge pull request #3753 from LLK/hotfix/multi-step-report

[Hotfix/Develop] Split project report flow into two steps

src/components/modal/base/modal.scss

@@ -84,6 +84,12 @@ row to appear to contain overflow. */
     margin-bottom: .9375rem;
 }
 
+/* For action button row where left/right margin is handled by parent element */
+.action-buttons.action-buttons-no-inset {
+    margin-left: 0;
+    margin-right: 0;
+}
+
 .action-button {
     margin: 0 0 0 .54625rem;
     border-radius: .25rem;

src/components/modal/report/form-step.jsx

+const bindAll = require('lodash.bindall');
+const PropTypes = require('prop-types');
+const React = require('react');
+const FormattedMessage = require('react-intl').FormattedMessage;
+const classNames = require('classnames');
+
+const Form = require('../../forms/form.jsx');
+const Button = require('../../forms/button.jsx');
+const Spinner = require('../../spinner/spinner.jsx');
+const FlexRow = require('../../flex-row/flex-row.jsx');
+require('../../forms/button.scss');
+
+/**
+ * Step to be used in a form progression. Provides wrapping form element,
+ * renders children input elements, then provides a next button row
+ * that responds to form validation and submission spinner.
+ */
+class FormStep extends React.Component {
+    constructor (props) {
+        super(props);
+        this.state = {
+            valid: false
+        };
+        bindAll(this, [
+            'handleValid',
+            'handleInvalid'
+        ]);
+    }
+    handleValid () {
+        this.setState({valid: true});
+    }
+    handleInvalid () {
+        this.setState({valid: false});
+    }
+    render () {
+        const {onNext, children, isWaiting, nextLabel} = this.props;
+        // Submit button is enabled if form isn't already submitting, and either the form passes validation,
+        // or the submitEnabled prop is true. This lets submitEnabled prop override validation.
+        const submitEnabled = (this.props.submitEnabled || this.state.valid) && !isWaiting;
+        const submitDisabledParam = submitEnabled ? {} : {disabled: 'disabled'};
+        return (
+            <Form
+                onInvalid={this.handleInvalid}
+                onValid={this.handleValid}
+                onValidSubmit={onNext}
+            >
+                {children}
+                <FlexRow className={classNames('action-buttons', 'action-buttons-no-inset')}>
+                    <Button
+                        className={classNames(
+                            'action-button',
+                            'submit-button',
+                            {disabled: !submitEnabled}
+                        )}
+                        {...submitDisabledParam}
+                        key="submitButton"
+                        type="submit"
+                    >
+                        {isWaiting ? (
+                            <div className="action-button-text">
+                                <Spinner />
+                                <FormattedMessage id="report.sending" />
+                            </div>
+                        ) : (
+                            <div className="action-button-text">
+                                <FormattedMessage {...nextLabel} />
+                            </div>
+                        )}
+                    </Button>
+                </FlexRow>
+            </Form>
+        );
+    }
+}
+
+FormStep.propTypes = {
+    children: PropTypes.node.isRequired,
+    isWaiting: PropTypes.bool,
+    nextLabel: PropTypes.shape({id: PropTypes.string.isRequired}).isRequired,
+    onNext: PropTypes.func.isRequired,
+    submitEnabled: PropTypes.bool
+};
+
+FormStep.defaultProps = {
+    isWaiting: false,
+    submitEnabled: false
+};
+
+module.exports = FormStep;

src/components/modal/report/modal.scss

@@ -13,15 +13,8 @@
 
     .instructions {
         line-height: 1.5rem;
-    }
-
-    .received {
-        margin: 0 auto;
-        width: 90%;
-        text-align: center;
-        line-height: 1.65rem;
 
-        .received-header {
+        .instructions-header {
             font-weight: bold;
         }
     }

src/components/modal/report/report-options.js

+const PropTypes = require('prop-types');
+
+const {
+    arrayOf,
+    string,
+    shape
+} = PropTypes;
+
+/**
+ * Define both the PropType shape and default value for report options
+ * to ensure structure is validated by PropType checking going forward.
+ */
+
+const messageShape = shape({
+    id: string.isRequired
+});
+
+const categoryShape = shape({
+    value: string.isRequired,
+    label: messageShape.isRequired,
+    prompt: messageShape.isRequired
+});
+
+const reportOptionsShape = arrayOf(categoryShape);
+
+const REPORT_OPTIONS = [
+    {
+        value: '',
+        label: {id: 'report.reasonPlaceHolder'},
+        prompt: {id: 'report.promptPlaceholder'}
+    },
+    {
+        value: '0',
+        label: {id: 'report.reasonCopy'},
+        prompt: {id: 'report.promptCopy'}
+    },
+    {
+        value: '1',
+        label: {id: 'report.reasonUncredited'},
+        prompt: {id: 'report.promptUncredited'}
+    },
+    {
+        value: '2',
+        label: {id: 'report.reasonScary'},
+        prompt: {id: 'report.promptScary'}
+    },
+    {
+        value: '3',
+        label: {id: 'report.reasonLanguage'},
+        prompt: {id: 'report.promptLanguage'}
+    },
+    {
+        value: '4',
+        label: {id: 'report.reasonMusic'},
+        prompt: {id: 'report.promptMusic'}
+    },
+    {
+        value: '8',
+        label: {id: 'report.reasonImage'},
+        prompt: {id: 'report.promptImage'}
+    },
+    {
+        value: '5',
+        label: {id: 'report.reasonPersonal'},
+        prompt: {id: 'report.promptPersonal'}
+    },
+    {
+        value: '6',
+        label: {id: 'general.other'},
+        prompt: {id: 'report.promptGuidelines'}
+    }
+];
+
+module.exports = {
+    reportOptionsShape,
+    REPORT_OPTIONS
+};