-
Notifications
You must be signed in to change notification settings - Fork 34
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: redesign doc feedback UI (#447)
* feat(components): add new feedback section types * feat(feedback): add hubspot form tracking * feat(feedback): provide feedback section UI * feat(locale): add new feedback i18n * feat: add new feedback section to doc template * refactor: remove legacy feedback button from doc template * fix(feedback): fix skip behavior * refine(feedback): improve styles * refine(template): enable JP feedback * fix(feedback): fix styles * refine(feedback): improve typography styles * refine(locale/ja): improve translation * refine(locale/ja): improve feedback translation * refine(locale/en): improve feedback translation
- Loading branch information
Showing
10 changed files
with
561 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
273 changes: 273 additions & 0 deletions
273
src/components/Card/FeedbackSection/FeedbackSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,273 @@ | ||
| import { Trans } from "gatsby-plugin-react-i18next"; | ||
| import { | ||
| Box, | ||
| Stack, | ||
| Typography, | ||
| FormControl, | ||
| RadioGroup, | ||
| Radio, | ||
| FormControlLabel, | ||
| } from "@mui/material"; | ||
| import { ThumbUpOutlined, ThumbDownOutlined } from "@mui/icons-material"; | ||
| import { Locale } from "static/Type"; | ||
| import { useState } from "react"; | ||
| import { trackCustomEvent } from "gatsby-plugin-google-analytics"; | ||
| import { submitFeedbackDetail, submitLiteFeedback } from "./tracking"; | ||
| import { FeedbackCategory } from "./types"; | ||
| import { | ||
| ActionButton, | ||
| controlLabelSx, | ||
| labelProps, | ||
| radioSx, | ||
| ThumbButton, | ||
| typoFontFamily, | ||
| } from "./components"; | ||
|
|
||
| interface FeedbackSectionProps { | ||
| title: string; | ||
| locale: Locale; | ||
| } | ||
|
|
||
| export function FeedbackSection({ title, locale }: FeedbackSectionProps) { | ||
| const [thumbVisible, setThumbVisible] = useState(true); | ||
| const [helpful, setHelpful] = useState<boolean>(); | ||
| const [surveyVisible, setSurverVisible] = useState(false); | ||
|
|
||
| const onThumbClick = (helpful: boolean) => { | ||
| trackCustomEvent({ | ||
| category: helpful ? `doc-${locale}-useful` : `doc-${locale}-useless`, | ||
| action: "click", | ||
| label: title, | ||
| transport: "beacon", | ||
| }); | ||
| submitLiteFeedback({ | ||
| locale, | ||
| category: helpful ? FeedbackCategory.Positive : FeedbackCategory.Negative | ||
| }) | ||
|
|
||
| setHelpful(helpful); | ||
| setThumbVisible(false); | ||
| setSurverVisible(true); | ||
| }; | ||
|
|
||
| const [positiveVal, setPositiveVal] = useState<string>(""); | ||
| const onPositiveChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| setPositiveVal((event.target as HTMLInputElement).value); | ||
| }; | ||
|
|
||
| const [negativeVal, setNegativeVal] = useState<string>(""); | ||
| const onNegativeChange = (event: React.ChangeEvent<HTMLInputElement>) => { | ||
| setNegativeVal((event.target as HTMLInputElement).value); | ||
| }; | ||
|
|
||
| const [submitted, setSubmitted] = useState(false); | ||
|
|
||
| const onPositiveSubmit = () => { | ||
| submitFeedbackDetail({ | ||
| locale, | ||
| category: FeedbackCategory.Positive, | ||
| reason: positiveVal, | ||
| }); | ||
| setSurverVisible(false); | ||
| setSubmitted(true); | ||
| }; | ||
| const onNegativeSubmit = () => { | ||
| submitFeedbackDetail({ | ||
| locale, | ||
| category: FeedbackCategory.Negative, | ||
| reason: negativeVal, | ||
| }); | ||
| setSurverVisible(false); | ||
| setSubmitted(true); | ||
| }; | ||
|
|
||
| const onSkip = () => { | ||
| setSurverVisible(false); | ||
| setPositiveVal(""); | ||
| setNegativeVal(""); | ||
| setSubmitted(true); | ||
| }; | ||
|
|
||
| return ( | ||
| <Box px="1.5rem"> | ||
| <Typography | ||
| variant="h2" | ||
| sx={{ | ||
| color: "website.f1", | ||
| fontSize: "1.5rem", | ||
| fontWeight: 600, | ||
| fontFamily: typoFontFamily, | ||
| lineHeight: 1.25, | ||
| marginTop: "24px", | ||
| marginBottom: "16px", | ||
| paddingBottom: "0.3em", | ||
| borderBottom: "1px solid #d8dee4", | ||
| }} | ||
| > | ||
| <Trans i18nKey="docHelpful.header" /> | ||
| </Typography> | ||
| {thumbVisible && ( | ||
| <Stack direction="row" spacing={2} mb="48px"> | ||
| <ThumbButton | ||
| variant="contained" | ||
| size="small" | ||
| startIcon={<ThumbUpOutlined sx={{ width: 14, height: 14 }} />} | ||
| className="FeedbackBtn-thumbUp" | ||
| aria-label="Thumb Up" | ||
| onClick={() => onThumbClick(true)} | ||
| > | ||
| <Trans i18nKey="docHelpful.thumbUp" /> | ||
| </ThumbButton> | ||
| <ThumbButton | ||
| variant="contained" | ||
| size="small" | ||
| startIcon={<ThumbDownOutlined sx={{ width: 14, height: 14 }} />} | ||
| className="FeedbackBtn-thumbDown" | ||
| aria-label="Thumb Down" | ||
| onClick={() => onThumbClick(false)} | ||
| > | ||
| <Trans i18nKey="docHelpful.thumbDown" /> | ||
| </ThumbButton> | ||
| </Stack> | ||
| )} | ||
| {surveyVisible && helpful && ( | ||
| <Box> | ||
| <FormControl> | ||
| <Typography variant="body1" color="website.f1" fontWeight={500} fontFamily={typoFontFamily}> | ||
| <Trans i18nKey="docFeedbackSurvey.positive.title" /> | ||
| </Typography> | ||
| <RadioGroup | ||
| aria-labelledby="doc-positive-feedback-survey" | ||
| name="doc-positive-feedback-survey-radio-group" | ||
| value={positiveVal} | ||
| onChange={onPositiveChange} | ||
| sx={{ my: "6px" }} | ||
| > | ||
| <FormControlLabel | ||
| value="easy" | ||
| label={<Trans i18nKey="docFeedbackSurvey.positive.easy" />} | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="solvedProblem" | ||
| label={ | ||
| <Trans i18nKey="docFeedbackSurvey.positive.solvedProblem" /> | ||
| } | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="helpToDecide" | ||
| label={ | ||
| <Trans i18nKey="docFeedbackSurvey.positive.helpToDecide" /> | ||
| } | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="other" | ||
| label={<Trans i18nKey="docFeedbackSurvey.positive.other" />} | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| </RadioGroup> | ||
| </FormControl> | ||
| <Stack direction="row" spacing={2} mt="12px" mb="24px"> | ||
| <ActionButton | ||
| variant="outlined" | ||
| size="small" | ||
| disabled={!positiveVal} | ||
| onClick={onPositiveSubmit} | ||
| > | ||
| <Trans i18nKey="docFeedbackSurvey.action.submit" /> | ||
| </ActionButton> | ||
| <ActionButton variant="outlined" size="small" onClick={onSkip}> | ||
| <Trans i18nKey="docFeedbackSurvey.action.skip" /> | ||
| </ActionButton> | ||
| </Stack> | ||
| </Box> | ||
| )} | ||
| {surveyVisible && !helpful && ( | ||
| <Box> | ||
| <FormControl> | ||
| <Typography variant="body1" color="website.f1" fontWeight={500} fontFamily={typoFontFamily}> | ||
| <Trans i18nKey="docFeedbackSurvey.negative.title" /> | ||
| </Typography> | ||
| <RadioGroup | ||
| aria-labelledby="doc-negative-feedback-survey" | ||
| name="doc-negative-feedback-survey-radio-group" | ||
| value={negativeVal} | ||
| onChange={onNegativeChange} | ||
| sx={{ my: "6px" }} | ||
| > | ||
| <FormControlLabel | ||
| value="hard" | ||
| label={<Trans i18nKey="docFeedbackSurvey.negative.hard" />} | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="nothingFound" | ||
| label={ | ||
| <Trans i18nKey="docFeedbackSurvey.negative.nothingFound" /> | ||
| } | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="inaccurate" | ||
| label={ | ||
| <Trans i18nKey="docFeedbackSurvey.negative.inaccurate" /> | ||
| } | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="sampleError" | ||
| label={ | ||
| <Trans i18nKey="docFeedbackSurvey.negative.sampleError" /> | ||
| } | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| <FormControlLabel | ||
| value="other" | ||
| label={<Trans i18nKey="docFeedbackSurvey.negative.other" />} | ||
| control={<Radio size="small" sx={radioSx} />} | ||
| componentsProps={labelProps} | ||
| sx={controlLabelSx} | ||
| /> | ||
| </RadioGroup> | ||
| </FormControl> | ||
| <Stack direction="row" spacing={2} mt="12px" mb="24px"> | ||
| <ActionButton | ||
| variant="outlined" | ||
| size="small" | ||
| disabled={!negativeVal} | ||
| onClick={onNegativeSubmit} | ||
| > | ||
| <Trans i18nKey="docFeedbackSurvey.action.submit" /> | ||
| </ActionButton> | ||
| <ActionButton variant="outlined" size="small" onClick={onSkip}> | ||
| <Trans i18nKey="docFeedbackSurvey.action.skip" /> | ||
| </ActionButton> | ||
| </Stack> | ||
| </Box> | ||
| )} | ||
| {submitted && ( | ||
| <Typography variant="body1" color="website.f1" fontWeight={500} fontFamily={typoFontFamily} mb="48px"> | ||
| <Trans i18nKey="docFeedbackSurvey.message.thank" /> | ||
| </Typography> | ||
| )} | ||
| </Box> | ||
| ); | ||
| } |
Oops, something went wrong.