diff --git a/docs/src/components/CustomDocItem/index.tsx b/docs/src/components/CustomDocItem/index.tsx index 02f13b48910..4296e6491d5 100644 --- a/docs/src/components/CustomDocItem/index.tsx +++ b/docs/src/components/CustomDocItem/index.tsx @@ -2,11 +2,11 @@ import React from 'react'; import ActualDocItem from '@theme/DocItem'; import HasuraConBanner from '@site/src/components/HasuraConBanner'; import GraphQLWithHasuraBanner from '@site/src/components/GraphQLWithHasuraBanner'; -import PageHelpful from '@site/src/components/PageHelpful'; import CustomFooter from '@site/src/components/CustomFooter'; import styles from './styles.module.scss'; +import {ScrollToFeedbackButton} from "@site/src/components/Feedback/ScrollToFeedbackButton"; -const CustomDocItem = (props) => { +const CustomDocItem = props => { return (
{ >
- + {/**/} + diff --git a/docs/src/components/Feedback/Feedback.tsx b/docs/src/components/Feedback/Feedback.tsx new file mode 100644 index 00000000000..fd1835f6a68 --- /dev/null +++ b/docs/src/components/Feedback/Feedback.tsx @@ -0,0 +1,164 @@ +import React, {ReactNode, useRef, useState} from 'react'; +import {saTrack} from '@site/src/utils/segmentAnalytics'; +import styles from './styles.module.scss'; +export const Feedback = ({metadata}: {metadata: any}) => { + const [rating, setRating] = useState<1 | 2 | 3 | 4 | 5 | null>(null); + const [notes, setNotes] = useState(null); + const [errorText, setErrorText] = useState(null); + const [hoveredScore, setHoveredScore] = useState(null); + const [textAreaLabel, setTextAreaLabel] = useState(null); + const [textAreaPlaceholder, setTextAreaPlaceholder] = useState('This section is optional ✌️'); + const [isSubmitSuccess, setIsSubmitSuccess] = useState(false); + + const submitDisabled = rating === null || (rating < 4 && (notes === null || notes === '')); + + const scores: (1 | 2 | 3 | 4 | 5)[] = [1, 2, 3, 4, 5]; + + const handleSubmit = async () => { + if (rating === null) { + setErrorText('Please select a score.'); + return; + } + + if (rating < 4 && notes === null) { + setErrorText( + "Because this doc wasn't up to scratch please provide us with some feedback of where we can improve." + ); + return; + } + + const sendData = async () => { + const myHeaders = new Headers(); + myHeaders.append('Content-Type', 'application/json'); + + const raw = JSON.stringify({ + feedback: { + isHelpful: rating >= 4 ? `👍` : `👎`, + score: rating, + notes, + pageTitle: document.title, + url: window.location.href, + }, + }); + + const requestOptions = { + method: 'POST', + headers: myHeaders, + body: raw, + redirect: 'follow', + } + + fetch('https://us-central1-websitecloud-352908.cloudfunctions.net/docs-feedback', requestOptions) + .then(response => response.text()) + .catch(error => console.error('error', error)); + }; + + if (window.location.hostname === 'localhost') { + alert('Testing feedback (not) sent!'); + setRating(null); + setNotes(null); + setIsSubmitSuccess(true); + return; + } + + sendData().then(() => { + saTrack('Responded to Did You Find This Page Helpful', { + label: 'Responded to Did You Find This Page Helpful', + response: rating >= 4 ? 'YES' : 'NO', + pageUrl: window.location.href, + }); + setRating(null); + setNotes(null); + setIsSubmitSuccess(true); + }).catch((e) => {console.error(e)}); + + return; + }; + + const handleScoreClick = (scoreItem: 1 | 2 | 3 | 4 | 5) => { + if (scoreItem === rating) { + setRating(null); + setErrorText(null); + setHoveredScore(null); + return + } + setErrorText(null); + setRating(scoreItem); + if (scoreItem < 4) { + setTextAreaLabel(<> +

What can we do to improve it? Please be as detailed as you like.

+

Real human beings read every single review.

+ ); + setTextAreaPlaceholder('This section is required... how can we do better? ✍️'); + } + if (scoreItem >= 4) { + setTextAreaLabel( + <> +

Any general feedback you'd like to add?

+

We'll take it all... tell us how well we're doing or where we can improve.

+

Real human beings read every single review.

+ + ); + setTextAreaPlaceholder('This section is optional ✌️'); + } + }; + + // Do not show on Intro page + if (metadata.source === '@site/docs/index.mdx') { + return null; + } + + return ( +
+
+
+

What did you think of this doc?

+ + {isSubmitSuccess ? +
+

Thanks for your feedback.

+

Feel free to review as many docs pages as you like!

+
+ :
+ {scores.map((star, index) => ( + handleScoreClick(star)} + onMouseEnter={() => setHoveredScore(index + 1)} + onMouseLeave={() => setHoveredScore(-1)}> + {rating >= star ? ( + + + + ) : ( + + index ? '#ffc107' : '#B1BCC7'} + d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z"/> + + )} + + ))} +
+ } +
+
+
{textAreaLabel}
+