Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feedback page #326

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/common/components/AppPages.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default {
},
},
ABOUT: '/about',
FEEDBACK: '/feedback',
PRIVACY_POLICY: '/privacy-policy',
LOADING: '/loading',
NOT_FOUND: '/404',
Expand Down
2 changes: 2 additions & 0 deletions src/common/components/AppRouter.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Redirect, Route, Switch } from 'react-router-dom';

import Upload from './layouts/pages/upload/Upload';
import About from './layouts/pages/about/About';
import Feedback from './layouts/pages/feedback/Feedback';
import PrivacyPolicy from './layouts/pages/privacyPolicy/PrivacyPolicy';
import Settings from './layouts/pages/settings/Settings';
import JobStatus from './layouts/pages/status/JobStatus';
Expand All @@ -19,6 +20,7 @@ function AppRouter() {
<Route path={AppPages.STATUS.route} component={JobStatus} />
<Route path={AppPages.RESULTS.route} component={Results} />
<Route exact path={AppPages.ABOUT} component={About} />
<Route exact path={AppPages.FEEDBACK} component={Feedback} />
<Route exact path={AppPages.PRIVACY_POLICY} component={PrivacyPolicy} />
<Route exact path={AppPages.NOT_FOUND} component={NotFound} />
<Route exact path={AppPages.INSPECT.route} component={Inspect} />
Expand Down
32 changes: 26 additions & 6 deletions src/common/components/layouts/header/Header.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import React from 'react';
import React, { useMemo } from 'react';
import { Link, useLocation } from 'react-router-dom';
import classNames from 'classnames';
import { Link as MaterialLink } from '@material-ui/core';
import { Link as MaterialLink, Typography } from '@material-ui/core';
import HelpOutline from '@material-ui/icons/HelpOutline';
import Feedback from '@material-ui/icons/Feedback';
import Policy from '@material-ui/icons/Policy';

import ResetButton from '../../shared/resetButton/ResetButton';
import AppPages from '../../AppPages';
Expand All @@ -13,6 +15,10 @@ import './Header.scss';

function Header() {
const location = useLocation();
const hideLinks = useMemo(
() => [AppPages.ABOUT, AppPages.FEEDBACK, AppPages.PRIVACY_POLICY].includes(location.pathname),
[location.pathname]
);
return (
<header className="app-header">
<section className="app-header__left">
Expand All @@ -21,15 +27,29 @@ function Header() {
</ResetButton>
</section>
<section className="app-header__right">
<Link
to={AppPages.FEEDBACK}
target="_blank"
className={classNames('app-link', 'feedback-link', { 'app-link_hidden': hideLinks })}
>
<Feedback />
<Typography className="text-link">FEEDBACK</Typography>
</Link>
<Link
to={AppPages.ABOUT}
target="_blank"
className={classNames('app-link', 'about-link', {
'app-link_hidden':
location.pathname === AppPages.ABOUT || location.pathname === AppPages.PRIVACY_POLICY,
})}
className={classNames('app-link', 'about-link', { 'app-link_hidden': hideLinks })}
>
<HelpOutline />
<Typography className="text-link">ABOUT</Typography>
</Link>
<Link
to={AppPages.PRIVACY_POLICY}
target="_blank"
className={classNames('app-link', 'privacy-policy-link', { 'app-link_hidden': hideLinks })}
>
<Policy />
<Typography className="text-link">PRIVACY POLICY</Typography>
</Link>
</section>
</header>
Expand Down
38 changes: 36 additions & 2 deletions src/common/components/layouts/header/Header.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@import "../../variables";

.app-header {
overflow: auto;
position: fixed;
top: 0;
height: 85px;
Expand All @@ -19,9 +20,11 @@
&__left,
&__right {
height: 100%;
min-width: 160px;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 20px;
}

&__left {
Expand All @@ -38,16 +41,47 @@
justify-content: flex-end;
}

@media (max-width: 620px) {
.app-header__right {
.text-link {
display: none !important;
}
}
}

.app-link {
display: flex;
vertical-align: middle;
padding: 5px 10px;
transition: $linear;
color: $text-color--basic;
color: $link-color--basic;
border-radius: 4px;
border: 1px solid rgba(100, 51, 70, 0.5);

.text-link {
display: inline-block;
vertical-align: middle;
line-height: 25px;
margin-left: 5px;
font-weight: 500;
font-size: 0.875rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-family: $font-family;
}

&:hover {
color: $link-color--basic;
border: 1px solid $color-primary;
background-color: rgba(0, 0, 0, 0.04);
}

&_hidden {
display: none;
}
}

.about-link {
margin: 0 20px;
}
}
138 changes: 138 additions & 0 deletions src/common/components/layouts/pages/feedback/Feedback.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import React, { useCallback, useState } from 'react';
import {
Box,
Radio,
Button,
TextField,
Typography,
RadioGroup,
FormLabel,
FormControl,
FormControlLabel,
} from '@material-ui/core';

import './Feedback.scss';

const FormItemName = {
SERVICE_QUALITY: 'serviceQuality',
COMMENT: 'comment',
REQUEST_ANALYSIS: 'requestAnalysis',
USERNAME: 'username',
EMAIL: 'email',
};

function Feedback() {
const [isAnalysisVisible, setIsAnalysisVisible] = useState(false);
const [isCommentVisible, setIsCommentVisible] = useState(false);
const handleValidationStatusChange = useCallback((e, value) => {
if (value === 'yes') {
setIsCommentVisible(false);
setIsAnalysisVisible(false);
} else setIsCommentVisible(true);
}, []);
const handleRequestAnalysisChange = useCallback((e, value) => {
if (value === 'no') setIsAnalysisVisible(false);
else setIsAnalysisVisible(true);
}, []);
const handleSubmit = useCallback(e => {
e.preventDefault();
const { target } = e;
if (target) {
const data = {
[FormItemName.SERVICE_QUALITY]: target.elements[FormItemName.SERVICE_QUALITY].value,
[FormItemName.COMMENT]: target.elements[FormItemName.COMMENT]?.value ?? '',
userData:
target.elements[FormItemName.REQUEST_ANALYSIS]?.value !== 'yes'
? null
: {
[FormItemName.EMAIL]: target.elements[FormItemName.EMAIL].value,
[FormItemName.USERNAME]: target.elements[FormItemName.USERNAME].value,
},
};
console.log('Form data:', data);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this console.log

}
}, []);
return (
<section className="feedback">
<Typography className="form-header">Feedback</Typography>
<form onSubmit={handleSubmit}>
<FormControl>
<Box className="form-block">
<FormLabel>Have we validated your PDF correctly?</FormLabel>
<RadioGroup row name={FormItemName.SERVICE_QUALITY} onChange={handleValidationStatusChange}>
<FormControlLabel value="yes" control={<Radio color="primary" required />} label="Yes" />
<FormControlLabel value="no" control={<Radio color="primary" required />} label="No" />
<FormControlLabel
value="partially"
label="Partially"
control={<Radio color="primary" required />}
/>
</RadioGroup>
</Box>
{isCommentVisible && (
<Box>
<Box className="form-block">
<FormLabel>Please provide any additional information if you like</FormLabel>
<TextField
multiline
maxRows={8}
minRows={8}
name={FormItemName.COMMENT}
variant="outlined"
placeholder="Additional information..."
/>
</Box>
<Box className="form-block">
<FormLabel>Would you like us to analyze the issues and come back to you?</FormLabel>
<RadioGroup
row
name={FormItemName.REQUEST_ANALYSIS}
onChange={handleRequestAnalysisChange}
>
<FormControlLabel
value="yes"
label="Yes"
control={<Radio color="primary" required />}
/>
<FormControlLabel
value="no"
label="No"
control={<Radio color="primary" required />}
/>
</RadioGroup>
</Box>
{isAnalysisVisible && (
<Box className="form-block">
<FormLabel>Enter your contact information</FormLabel>
<TextField
required
type="text"
variant="outlined"
placeholder="Your Name"
inputProps={{ 'data-testid': 'login-page-name' }}
name={FormItemName.USERNAME}
/>
<TextField
required
type="email"
variant="outlined"
placeholder="E-Mail Address"
inputProps={{ 'data-testid': 'login-page-email' }}
name={FormItemName.EMAIL}
/>
</Box>
)}
</Box>
)}
<Box>
GribovskyPavel marked this conversation as resolved.
Show resolved Hide resolved
<Button className="form-button" variant="contained" type="submit" color="primary">
Submit
</Button>
</Box>
</FormControl>
</form>
</section>
);
}

export default Feedback;
29 changes: 29 additions & 0 deletions src/common/components/layouts/pages/feedback/Feedback.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@import "../../../variables";

.feedback {
font-size: 24px;
padding: 0 20px;

.form-header {
font-size: 24px;
font-weight: 700;
margin: 19.92px 0px;
}

.form-block {
display: grid;
margin-bottom: 15px;
}

.form-button {
margin: 15px 0 30px 0;
}

.MuiFormLabel-root.Mui-focused {
color: rgba(0, 0, 0, 0.75);
}

.MuiOutlinedInput-root {
margin-top: 10px;
}
}
Loading