blob: 19b75f11ccab7a90446c4037c33d47bb52da8ac4 [file] [log] [blame]
Adrià Vilanova Martínezf19ea432024-01-23 20:20:52 +01001// Copyright 2019 The Chromium Authors
Adrià Vilanova Martínezac4a6442022-05-15 19:05:13 +02002// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import * as React from 'react';
6import {makeStyles} from '@material-ui/styles';
7import Dialog from '@material-ui/core/Dialog';
8import DialogTitle from '@material-ui/core/DialogTitle';
9import DialogContent from '@material-ui/core/DialogContent';
10import DialogContentText from '@material-ui/core/DialogContentText';
11import DialogActions from '@material-ui/core/DialogActions';
12import Button from '@material-ui/core/Button';
13import Input from '@material-ui/core/Input';
14
15const userStyles = makeStyles({
16 title: {
17 backgroundColor: 'rgb(84, 110, 122)',
18 color: 'white',
19 font: '300 20px / 24px Roboto, RobotoDraft, Helvetica, Arial, sans-serif'
20 },
21 inputArea: {
22 padding: '10px',
23 },
24 content: {
25 backgroundColor: 'rgb(250, 250, 250)',
26 padding: '12px 16px',
27 },
28 contentText: {
29 fontSize: '12px',
30 },
31 actionsButton: {
32 backgroundColor: 'rgb(250, 250, 250)',
33 borderTop: '1px solid rgb(224, 224, 224)',
34 }
35});
36
37type Props = {
38 enable: boolean,
39 setEnable: Function,
40}
41
42export function IssueWizardFeedback(props: Props): React.ReactElement {
43 React.useEffect(() => {
44 const script = document.createElement("script");
45 script.src = 'https://support.google.com/inapp/api.js';
46 script.async = true;
47 document.body.appendChild(script);
48 }, []);
49
50 const classes = userStyles();
51 const {enable, setEnable} = props;
52 const [feedback, setFeedback] = React.useState('');
53
54 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
55 const textInput = e.target.value;
56 setFeedback(textInput);
57 };
58
59 const issueWizardFeedbackSend = () => {
60 window.userfeedback.api.startFeedback({
61 'productId': '5208992', // Required.
62 'bucket': 'IssueWizard', // Optional.
63 'report': {
64 'description': feedback
65 }
66 });
67 setEnable(false);
68 }
69
70 return (
71 <Dialog open={enable}>
72 <DialogTitle className={classes.title}>Send Feedback</DialogTitle>
73 <Input
74 placeholder="Have Feedback? We'd love to hear it, but please don't share sensitive informations. Have questions? Try help or support."
75 disableUnderline={true}
76 multiline={true}
77 rows={3}
78 className={classes.inputArea}
79 inputProps={{maxLength: 5000}}
80 onChange={handleInputChange}
81 />
82 <DialogContent className={classes.content}>
83 <DialogContentText className={classes.contentText}>
84 Some account and system information may be sent to Google. We will use it to fix problems and improve our services, subject to our
85 <a href="https://myaccount.google.com/privacypolicy?hl=en&amp;authuser=0" target="_blank"> Privacy Policy </a>
86 and <a href="https://www.google.com/intl/en/policies/terms?authuser=0" target="_blank"> Terms of Service </a>
87 . We may email you for more information or updates.
88 Go to <a href="https://support.google.com/legal/answer/3110420?hl=en&amp;authuser=0" target="_blank"> Legal Help </a>
89 to ask for content changes for legal reasons.
90 </DialogContentText>
91 </DialogContent>
92 <DialogActions className={classes.actionsButton}>
93 <Button onClick={()=>{setEnable(false);}}>Cancel</Button>
94 <Button onClick={issueWizardFeedbackSend}>Send</Button>
95 </DialogActions>
96 </Dialog>
97 );
98}