Feedback button

imports/ui/components/Feedback/Feedback.js

@@ -0,0 +1,120 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Meteor } from 'meteor/meteor';
+import { translate } from 'react-i18next';
+import { FormGroup, Button, FormControl } from 'react-bootstrap';
+import { Bert } from 'meteor/themeteorchef:bert';
+import validate from '../../../modules/validate';
+
+import './Feedback.scss';
+
+class Feedback extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.onTabClick = this.onTabClick.bind(this);
+  }
+
+  componentDidMount() {
+    const component = this;
+
+    validate(component.form, {
+      rules: {
+        email: {
+          required: true,
+          email: true
+        },
+        feedbackText: {
+          required: true
+        }
+      },
+      messages: {
+        feedbackText: {
+          required: this.t('Por favor, escribe aquí tu feedback...')
+        },
+        email: {
+          required: this.t('Tu correo'),
+          email: this.t('¿Es correcto este correo?')
+        }
+      },
+      submitHandler() { component.handleSubmit(); }
+    });
+  }
+
+  onTabClick() {
+    $('#feedback-form').toggle('slide');
+  }
+
+  handleSubmit() {
+    const email = this.email.value.trim();
+    const feedbackText = this.feedbackText.value.trim();
+
+    Meteor.call('send-feedback', email, feedbackText, (error) => {
+      if (error) {
+        Bert.alert(error.reason, 'danger');
+      } else {
+        this.form.reset();
+        Bert.alert('Feedback recibido, gracias...', 'success');
+        this.onTabClick();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div id="feedback">
+        <div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
+          <form
+              ref={form => (this.form = form)}
+              className="form card-body"
+              onSubmit={event => event.preventDefault()}
+          >
+            <FormGroup controlId="formEmail">
+              <input
+                  onChange={this.handleChange}
+                  name="email"
+                  autoFocus
+                  className="form-control"
+                  ref={email => (this.email = email)}
+                  placeholder={this.t('Tu correo')}
+                  type="email"
+              />
+            </FormGroup>
+            <FormGroup
+                controlId="formFeedback"
+            >
+              <textarea
+                  className="form-control"
+                  name="feedbackText"
+                  ref={feedbackText => (this.feedbackText = feedbackText)}
+                  placeholder={this.t('Por favor, escribe aquí tu feedback...')}
+                  rows="6"
+              />
+              <FormControl.Feedback />
+            </FormGroup>
+            <Button type="submit" bsStyle="success" className="float-right" >
+              {this.t('Enviar')}
+            </Button>
+          </form>
+        </div>
+        <div
+            id="feedback-tab"
+            onClick={(event) => { this.onTabClick(event); }}
+        >
+          {this.t('Feedback')}
+        </div>
+      </div>
+    );
+  }
+}
+
+Feedback.propTypes = {
+  t: PropTypes.func.isRequired
+};
+
+export default translate([], { wait: true })(Feedback);

imports/ui/components/Feedback/Feedback.scss

@@ -0,0 +1,71 @@
+/* From: https://github.com/spektom/bootstrap-feedback-form */
+@import '../../stylesheets/mixins';
+
+#feedback {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  bottom: 0;
+  height: 350px;
+  margin-left: -3px;
+  margin-bottom: 10px;
+  font-size: 12px;
+}
+
+@include breakpoint(tablet) {
+  #feedback {
+    height: 400px;
+  }
+}
+
+#feedback-form {
+  float: left;
+  width: 400px;
+  height: 100%;
+  z-index: 1000;
+  padding-left: 5px;
+  padding-right: 10px;
+  background-clip: padding-box;
+  border: 1px solid rgba(0,0,0,.2);
+  border-radius: 0px;
+  box-shadow: 0 5px 10px rgba(0,0,0,.2);
+}
+
+@include breakpoint(mobile) {
+  #feedback-form {
+    width: 270px;
+  }
+}
+
+#feedback-tab {
+  float: right;
+  color: #fff;
+  font-size: 12px;
+  cursor: pointer;
+  text-align: center;
+  width: 80px;
+  height: 24px;
+  background-color: rgba(0,0,0,0.5);
+  margin-top: 60px;
+  margin-left: -28px;
+  padding-top: 3px;
+  -webkit-border-top-left-radius: 3px;
+  -webkit-border-top-right-radius: 3px;
+  -moz-border-radius-topleft: 3px;
+  -moz-border-radius-topright: 3px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+#feedback-tab:hover {
+  background-color: rgba(0,0,0,0.4);
+}
+
+#feedback-form textarea {
+  resize: none;
+}