Merge branch 'problem-report'

1 files changed, 108 insertions, 0 deletions

diff --git a/app/components/Support.js b/app/components/Support.js
new file mode 100644
index 0000000000..783133568f
--- /dev/null
+++ b/app/components/Support.js
@@ -0,0 +1,108 @@
+// @flow
+import React, { Component } from 'react';
+import { Layout, Container, Header } from './Layout';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
+
+export type SupportReport = {
+  email: string,
+  description: string
+};
+
+export type SupportState = SupportReport;
+export type SupportProps = {
+  onClose: () => void;
+  onViewLogs: () => void;
+  onSend: (report: SupportReport) => void;
+};
+
+export default class Support extends Component {
+  props: SupportProps;
+  state: SupportState = {
+    email: '',
+    description: ''
+  }
+
+  validate() {
+    return this.state.description.trim().length > 0;
+  }
+
+  onChangeEmail = (e: Event) => {
+    const input = e.target;
+    if(!(input instanceof HTMLInputElement)) {
+      throw new Error('input must be an instance of HTMLInputElement');
+    }
+    this.setState({ email: input.value });
+  }
+
+  onChangeDescription = (e: Event) => {
+    const input = e.target;
+    if(!(input instanceof HTMLTextAreaElement)) {
+      throw new Error('input must be an instance of HTMLTextAreaElement');
+    }
+    this.setState({ description: input.value });
+  }
+
+  onSend = () => {
+    this.props.onSend(this.state);
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ 'defaultDark' } />
+        <Container>
+          <div className="support">
+            <div className="support__close" onClick={ this.props.onClose }>
+              <img className="support__close-icon" src="./assets/images/icon-back.svg" />
+              <span className="support__close-title">Settings</span>
+            </div>
+            <div className="support__container">
+
+              <div className="support__header">
+                <h2 className="support__title">Contact support</h2>
+                <div className="support__subtitle">
+                  { `To help you more effectively, your app's log file will be attached to this message.
+                  Your data will remain secure and private, as it is encrypted & anonymised before sending.` }
+                </div>
+              </div>
+
+              <div className="support__content">
+                <div className="support__form">
+                  <div className="support__form-row">
+                    <input className="support__form-email"
+                      type="email"
+                      placeholder="Your email"
+                      value={ this.state.email }
+                      onChange={ this.onChangeEmail }
+                      autoFocus={ true } />
+                  </div>
+                  <div className="support__form-row support__form-row--description">
+                    <div className="support__form-description-scroll-wrap">
+                      <textarea className="support__form-description"
+                        placeholder="Describe your problem"
+                        value={ this.state.description }
+                        onChange={ this.onChangeDescription } />
+                    </div>
+                  </div>
+                  <div className="support__footer">
+                    <button type="button"
+                      className="button button--primary"
+                      onClick={ this.props.onViewLogs }>
+                      <span className="support__form-view-logs button-label">View app logs</span>
+                      <ExternalLinkSVG className="button-icon button-icon--16" />
+                    </button>
+                    <button type="button"
+                      className="support__form-send button button--positive"
+                      disabled={ !this.validate() }
+                      onClick={ this.onSend }>Send</button>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}