Merge pull request #61 from GSG-G7/34-feedback

34 feedback component

client/package.json

@@ -9,7 +9,8 @@
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-router-dom": "^5.1.1",
-    "react-scripts": "^3.1.2"
+    "react-scripts": "^3.1.2",
+    "react-stars": "^2.2.5"
   },
   "devDependencies": {
     "eslint": "^5.12.0",

client/public/index.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Creepster|Roboto&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/components/App/index.js

@@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import MenuPage from '../MealPage';
 
 import Login from '../pages/Login/index';
+import Feedback from '../feedback';
 import Error404 from '../pages/Error404/index';
 import './style.css';
 
@@ -27,8 +28,8 @@ export default class App extends React.Component {
               <Login updateTableNumber={this.updateTableNumber} {...props} />
             )}
           />
+          <Route exact path="/feedback" component={Feedback} />
           <Route path="/meals" component={MenuPage} />
-
           <Route exact path="*" component={Error404} />
         </Switch>
       </Router>

client/src/components/App/style.css

@@ -1,11 +1,9 @@
 *{
+  margin:0;
   padding: 0;
-  margin: 0;
   box-sizing: border-box;
 }
-.App {
-  text-align: center;
-}
+
 .nav{
   height: 3rem;
 }

client/src/components/feedback/index.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import ReactStars from 'react-stars';
+import propTypes from 'prop-types';
+import Button from '../utils/Button';
+import schemad from '../../validation/feedback';
+import Pop from '../utils/PopUp';
+import './style.css';
+
+export default class FeedbackComponent extends React.Component {
+  state = {
+    rate: 2.5,
+    email: '',
+    content: '',
+    feedbackDone: '',
+    errorMessage: '',
+  };
+
+  setFeedback = event => this.setState({ content: event.target.value });
+
+  setEmail = event => this.setState({ email: event.target.value });
+
+  newRate = newR => this.setState({ rate: newR });
+
+  sendFeedback = () => {
+    const {
+      location: { state },
+    } = this.props;
+
+    const { history } = this.props;
+    if (!state) {
+      history.push('/');
+      return '';
+    }
+    const {
+      location: {
+        state: { orderId },
+      },
+    } = this.props;
+    const { email, content: feedback } = this.state;
+    const data = {
+      orderId,
+      email,
+      feedback,
+    };
+    return schemad
+      .validateAsync(data)
+      .then(() =>
+        fetch('/api/v1/post-feedback', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(data),
+        })
+      )
+      .then(res => res.json())
+      .then(payload => {
+        return payload.statusCode === 201
+          ? this.setState({ feedbackDone: 'feedback sent successfully' })
+          : this.setState({ errorMessage: payload.error });
+      })
+      .catch(err => {
+        if (err.details[0]) {
+          this.setState({ errorMessage: err.details[0].message });
+        } else {
+          history.push('/serverError');
+        }
+      });
+  };
+
+  feedbackPopUp = () => {
+    const { history } = this.props;
+    const { feedbackDone } = this.state;
+    if (feedbackDone)
+      return (
+        <Pop
+          message={feedbackDone}
+          is2btnNeeded={false}
+          onClick1={() => history.push('/')}
+          btnName1="Home"
+        />
+      );
+    return '';
+  };
+
+  render() {
+    const { history } = this.props;
+    const { rate, errorMessage, email, content } = this.state;
+
+    return (
+      <div>
+        {this.feedbackPopUp()}
+        <div className="bg">
+          <div className="card">
+            <h3 className="header-feedback"> feedback</h3>
+            <div className="order-info">
+              <div className="order-number">
+                <p> 23</p>
+                <h4>Order</h4>
+              </div>
+              <div className="table-number">
+                <p>5</p>
+                <h4>Table</h4>
+              </div>
+            </div>
+            <div className="error">{errorMessage}</div>
+            <form className="feedback-form">
+              <input
+                type="email"
+                value={email}
+                onChange={this.setEmail}
+                className="email"
+                placeholder="Email"
+              />
+
+              <textarea
+                className="feedback"
+                value={content}
+                onChange={this.setFeedback}
+                placeholder="We are looking forward to hearing from you"
+              ></textarea>
+            </form>
+            <div className="container_star">
+              <ReactStars
+                value={rate}
+                count={5}
+                onChange={this.newRate}
+                size={24}
+                color2="#F5C518"
+              />
+            </div>
+            <div className="All">
+              <div className="div-button">
+                <Button className="button" onClick={this.sendFeedback}>
+                  Send
+                </Button>
+              </div>
+              <div className="div-button">
+                <Button className="button" onClick={() => history.push('/')}>
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+FeedbackComponent.propTypes = {
+  history: propTypes.objectOf(propTypes.any).isRequired,
+  orderId: propTypes.number.isRequired,
+  location: propTypes.objectOf(propTypes.any).isRequired,
+};

client/src/components/feedback/style.css

@@ -0,0 +1,96 @@
+:root{
+  --width-inputs:60vw;
+}
+.bg{
+  background: url('../../assets/images/feedback.png');
+  width:                          100vw;
+  height:                         100vh;
+  background-repeat:          no-repeat;
+  background-size:                cover;
+  padding:                         1.4rem;
+}
+
+.card{
+  margin:        1rem auto;
+  background:         #000;
+  font-family: Lato, sans-serif;
+  color: white;
+  opacity:               .85;
+  width:                75vw;
+  height:               77vh;
+  border-radius:       .3rem;
+  padding: 1rem;
+  padding-top: 6vh;
+}
+.header-feedback{
+  text-align: center;
+  margin-bottom: 3.4vh;
+  font-size: 2.8vh;
+}
+.error{
+  text-align: center;
+  color: red
+}
+.order-info{
+  margin-bottom: 2rem;
+  background: #ED6707;
+  margin: 1vh auto;
+  width: 60vw;
+  font-size: 14px;
+  height: 3.5rem;
+  border-radius: .2rem;
+  display: flex;
+  text-align: center;
+  line-height: 1.4rem;
+  padding: .45rem;
+}
+.order-number{
+  width: 40vw
+}
+.table-number{
+  width:40vw
+}
+.feedback-form{
+  text-align: center;
+  padding-top: 1.6vh;
+}
+.email{
+  width: var(--width-inputs);
+  border-radius: 3px;
+  height: 45.33px;
+  font-size: 0.75rem;
+  padding: .2rem;
+  position: unset;
+  color:black;
+  padding-left: .5rem;
+} 
+.feedback{
+  width: var(--width-inputs);
+  border-radius: 3px;
+  height: 6rem;
+  margin-top:.6rem;
+  padding: .2rem;
+  font-size: 0.75rem;
+  padding-left: .5rem;
+}
+
+.container_star{
+  position: absolute;
+  right: 50%;
+  margin: 0 auto;
+  transform: translate(50%, 19%);
+}
+.first{
+  margin-top: 4rem;
+}
+.div-button{
+  margin: .1rem auto 0 auto;
+  width: 44.2vw;
+}
+
+.button{
+  width: 44.2vw;
+}
+.All{
+  margin-top: 8.5vh;
+}

client/src/components/utils/PopUp/style.css

@@ -12,6 +12,7 @@
   flex-direction: column;
   justify-content: space-between;
 
+
 }
 
 .popup-background{
@@ -23,6 +24,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  z-index: 10;
 }
 
 .popup-img-container{

client/src/validation/feedback.js

@@ -0,0 +1,11 @@
+import Joi from '@hapi/joi';
+
+const feedbackSchema = Joi.object().keys({
+  orderId: Joi.number().required(),
+  email: Joi.string()
+    .email({ minDomainSegments: 2, tlds: { allow: ['com', 'net'] } })
+    .required(),
+  feedback: Joi.string().required(),
+});
+
+export default feedbackSchema;

server/app.js

@@ -1,14 +1,12 @@
 const express = require('express');
 const cookieParser = require('cookie-parser');
-const cors = require('cors');
 const router = require('./controllers');
 require('env2')('config.env');
 
 const app = express();
 
 const port = process.env.PORT || 5000;
 app.set('port', port);
-app.use(cors());
 app.use(cookieParser());
 app.use(express.json());
 app.use(express.urlencoded({ extended: false }));