Skip to content

Commit e94e211

Browse files
shhdgitshhdgit
authored
tweak: feedback details (#596)
1 parent 22f98a6 commit e94e211

File tree

5 files changed

+165
-106
lines changed

5 files changed

+165
-106
lines changed

‎locale/en/translation.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,15 +130,17 @@
130130
"easy": "Easy to understand",
131131
"solvedProblem": "Solved my problem",
132132
"helpToDecide": "Helped me decide to use the product",
133-
"other": "Others"
133+
"other": "Others",
134+
"otherPlaceholder": "Tell us more about your experience."
134135
},
135136
"negative": {
136137
"title": "What went wrong?",
137138
"hard": "Hard to understand",
138139
"nothingFound": "Couldn't find what I need",
139140
"inaccurate": "Inaccurate or out of date",
140141
"sampleError": "Code sample errors",
141-
"other": "Others"
142+
"other": "Others",
143+
"otherPlaceholder": "Tell us more about your experience."
142144
}
143145
},
144146
"doc404": {

‎locale/ja/translation.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,17 @@
127127
"easy": "理解しやすい",
128128
"solvedProblem": "問題を解決できた",
129129
"helpToDecide": "製品使用を決断するのに役立った",
130-
"other": "その他"
130+
"other": "その他",
131+
"otherPlaceholder": "ドキュメントの体験に関するフィードバックをもっとお聞かせください。"
131132
},
132133
"negative": {
133134
"title": "ドキュメントサイト改善のため、フィードバックをお願いします。",
134135
"hard": "分かりづらい",
135136
"nothingFound": "必要なものが見つからなかった",
136137
"inaccurate": "不正確または古い情報だった",
137138
"sampleError": "コードサンプルがエラーだった",
138-
"other": "その他"
139+
"other": "その他",
140+
"otherPlaceholder": "ドキュメントの体験に関するフィードバックをもっとお聞かせください。"
139141
}
140142
},
141143
"doc404": {

‎locale/zh/translation.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,15 +127,17 @@
127127
"easy": "容易理解",
128128
"solvedProblem": "解决了我的问题",
129129
"helpToDecide": "帮助我决定使用该产品",
130-
"other": "其他原因"
130+
"other": "其他原因",
131+
"otherPlaceholder": "请告诉我们更多您对文档体验的反馈。"
131132
},
132133
"negative": {
133134
"title": "您不喜欢文档的原因是？",
134135
"hard": "难以理解",
135136
"nothingFound": "找不到我想要的信息",
136137
"inaccurate": "内容不准确或过时",
137138
"sampleError": "代码示例错误",
138-
"other": "其他原因"
139+
"other": "其他原因",
140+
"otherPlaceholder": "请告诉我们更多您对文档体验的反馈。"
139141
}
140142
},
141143
"doc404": {

‎src/components/Card/FeedbackSection/FeedbackSection.tsx‎

Lines changed: 143 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Trans } from "gatsby-plugin-react-i18next";
1+
import { Trans, useTranslation } from "gatsby-plugin-react-i18next";
22
import {
33
Box,
44
Stack,
@@ -7,6 +7,7 @@ import {
77
RadioGroup,
88
Radio,
99
FormControlLabel,
10+
TextField,
1011
} from "@mui/material";
1112
import { ThumbUpOutlined, ThumbDownOutlined } from "@mui/icons-material";
1213
import { Locale } from "shared/interface";
@@ -26,10 +27,18 @@ interface FeedbackSectionProps {
2627
locale: Locale;
2728
}
2829

30+
const contactOtherVal = (val: string, otherVal: string) => {
31+
if (val === "other") {
32+
return `${val}: ${otherVal}`;
33+
}
34+
return val;
35+
};
36+
2937
export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
3038
const [thumbVisible, setThumbVisible] = useState(true);
3139
const [helpful, setHelpful] = useState<boolean>();
3240
const [surveyVisible, setSurverVisible] = useState(false);
41+
const { t } = useTranslation();
3342

3443
const onThumbClick = (helpful: boolean) => {
3544
trackCustomEvent({
@@ -49,13 +58,17 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
4958
};
5059

5160
const [positiveVal, setPositiveVal] = useState<string>("");
61+
const [positiveOtherVal, setPositiveOtherVal] = useState<string>("");
5262
const onPositiveChange = (event: React.ChangeEvent<HTMLInputElement>) => {
5363
setPositiveVal((event.target as HTMLInputElement).value);
64+
setPositiveOtherVal("");
5465
};
5566

5667
const [negativeVal, setNegativeVal] = useState<string>("");
68+
const [negativeOtherVal, setNegativeOtherVal] = useState<string>("");
5769
const onNegativeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
5870
setNegativeVal((event.target as HTMLInputElement).value);
71+
setNegativeOtherVal("");
5972
};
6073

6174
const [submitted, setSubmitted] = useState(false);
@@ -64,7 +77,7 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
6477
submitFeedbackDetail({
6578
locale,
6679
category: FeedbackCategory.Positive,
67-
reason: positiveVal,
80+
reason: contactOtherVal(positiveVal, positiveOtherVal),
6881
});
6982
setSurverVisible(false);
7083
setSubmitted(true);
@@ -73,7 +86,7 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
7386
submitFeedbackDetail({
7487
locale,
7588
category: FeedbackCategory.Negative,
76-
reason: negativeVal,
89+
reason: contactOtherVal(negativeVal, negativeOtherVal),
7790
});
7891
setSurverVisible(false);
7992
setSubmitted(true);
@@ -82,7 +95,9 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
8295
const onSkip = () => {
8396
setSurverVisible(false);
8497
setPositiveVal("");
98+
setPositiveOtherVal("");
8599
setNegativeVal("");
100+
setNegativeOtherVal("");
86101
setSubmitted(true);
87102
};
88103

@@ -129,51 +144,65 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
129144
)}
130145
{surveyVisible && helpful && (
131146
<Box>
132-
<FormControl>
133-
<Typography variant="body1" color="website.f1" fontWeight={500}>
134-
<Trans i18nKey="docFeedbackSurvey.positive.title" />
135-
</Typography>
136-
<RadioGroup
137-
aria-labelledby="doc-positive-feedback-survey"
138-
name="doc-positive-feedback-survey-radio-group"
139-
value={positiveVal}
140-
onChange={onPositiveChange}
141-
sx={{ my: "6px" }}
142-
>
143-
<FormControlLabel
144-
value="easy"
145-
label={<Trans i18nKey="docFeedbackSurvey.positive.easy" />}
146-
control={<Radio size="small" sx={radioSx} />}
147-
componentsProps={labelProps}
148-
sx={controlLabelSx}
149-
/>
150-
<FormControlLabel
151-
value="solvedProblem"
152-
label={
153-
<Trans i18nKey="docFeedbackSurvey.positive.solvedProblem" />
154-
}
155-
control={<Radio size="small" sx={radioSx} />}
156-
componentsProps={labelProps}
157-
sx={controlLabelSx}
158-
/>
159-
<FormControlLabel
160-
value="helpToDecide"
161-
label={
162-
<Trans i18nKey="docFeedbackSurvey.positive.helpToDecide" />
163-
}
164-
control={<Radio size="small" sx={radioSx} />}
165-
componentsProps={labelProps}
166-
sx={controlLabelSx}
167-
/>
168-
<FormControlLabel
169-
value="other"
170-
label={<Trans i18nKey="docFeedbackSurvey.positive.other" />}
171-
control={<Radio size="small" sx={radioSx} />}
172-
componentsProps={labelProps}
173-
sx={controlLabelSx}
147+
<Stack>
148+
<FormControl>
149+
<Typography variant="body1" color="website.f1" fontWeight={500}>
150+
<Trans i18nKey="docFeedbackSurvey.positive.title" />
151+
</Typography>
152+
<RadioGroup
153+
aria-labelledby="doc-positive-feedback-survey"
154+
name="doc-positive-feedback-survey-radio-group"
155+
value={positiveVal}
156+
onChange={onPositiveChange}
157+
sx={{ my: "6px" }}
158+
>
159+
<FormControlLabel
160+
value="easy"
161+
label={<Trans i18nKey="docFeedbackSurvey.positive.easy" />}
162+
control={<Radio size="small" sx={radioSx} />}
163+
componentsProps={labelProps}
164+
sx={controlLabelSx}
165+
/>
166+
<FormControlLabel
167+
value="solvedProblem"
168+
label={
169+
<Trans i18nKey="docFeedbackSurvey.positive.solvedProblem" />
170+
}
171+
control={<Radio size="small" sx={radioSx} />}
172+
componentsProps={labelProps}
173+
sx={controlLabelSx}
174+
/>
175+
<FormControlLabel
176+
value="helpToDecide"
177+
label={
178+
<Trans i18nKey="docFeedbackSurvey.positive.helpToDecide" />
179+
}
180+
control={<Radio size="small" sx={radioSx} />}
181+
componentsProps={labelProps}
182+
sx={controlLabelSx}
183+
/>
184+
<FormControlLabel
185+
value="other"
186+
label={<Trans i18nKey="docFeedbackSurvey.positive.other" />}
187+
control={<Radio size="small" sx={radioSx} />}
188+
componentsProps={labelProps}
189+
sx={controlLabelSx}
190+
/>
191+
</RadioGroup>
192+
</FormControl>
193+
194+
{positiveVal === "other" && (
195+
<TextField
196+
multiline
197+
rows={2}
198+
sx={{ paddingLeft: "32px", maxWidth: "500px" }}
199+
value={positiveOtherVal}
200+
onChange={(event) => setPositiveOtherVal(event.target.value)}
201+
placeholder={t("docFeedbackSurvey.positive.otherPlaceholder")}
174202
/>
175-
</RadioGroup>
176-
</FormControl>
203+
)}
204+
</Stack>
205+
177206
<Stack direction="row" spacing={2} mt="12px" mb="24px">
178207
<ActionButton
179208
variant="outlined"
@@ -191,60 +220,74 @@ export function FeedbackSection({ title, locale }: FeedbackSectionProps) {
191220
)}
192221
{surveyVisible && !helpful && (
193222
<Box>
194-
<FormControl>
195-
<Typography variant="body1" color="website.f1" fontWeight={500}>
196-
<Trans i18nKey="docFeedbackSurvey.negative.title" />
197-
</Typography>
198-
<RadioGroup
199-
aria-labelledby="doc-negative-feedback-survey"
200-
name="doc-negative-feedback-survey-radio-group"
201-
value={negativeVal}
202-
onChange={onNegativeChange}
203-
sx={{ my: "6px" }}
204-
>
205-
<FormControlLabel
206-
value="hard"
207-
label={<Trans i18nKey="docFeedbackSurvey.negative.hard" />}
208-
control={<Radio size="small" sx={radioSx} />}
209-
componentsProps={labelProps}
210-
sx={controlLabelSx}
211-
/>
212-
<FormControlLabel
213-
value="nothingFound"
214-
label={
215-
<Trans i18nKey="docFeedbackSurvey.negative.nothingFound" />
216-
}
217-
control={<Radio size="small" sx={radioSx} />}
218-
componentsProps={labelProps}
219-
sx={controlLabelSx}
220-
/>
221-
<FormControlLabel
222-
value="inaccurate"
223-
label={
224-
<Trans i18nKey="docFeedbackSurvey.negative.inaccurate" />
225-
}
226-
control={<Radio size="small" sx={radioSx} />}
227-
componentsProps={labelProps}
228-
sx={controlLabelSx}
229-
/>
230-
<FormControlLabel
231-
value="sampleError"
232-
label={
233-
<Trans i18nKey="docFeedbackSurvey.negative.sampleError" />
234-
}
235-
control={<Radio size="small" sx={radioSx} />}
236-
componentsProps={labelProps}
237-
sx={controlLabelSx}
238-
/>
239-
<FormControlLabel
240-
value="other"
241-
label={<Trans i18nKey="docFeedbackSurvey.negative.other" />}
242-
control={<Radio size="small" sx={radioSx} />}
243-
componentsProps={labelProps}
244-
sx={controlLabelSx}
223+
<Stack>
224+
<FormControl>
225+
<Typography variant="body1" color="website.f1" fontWeight={500}>
226+
<Trans i18nKey="docFeedbackSurvey.negative.title" />
227+
</Typography>
228+
<RadioGroup
229+
aria-labelledby="doc-negative-feedback-survey"
230+
name="doc-negative-feedback-survey-radio-group"
231+
value={negativeVal}
232+
onChange={onNegativeChange}
233+
sx={{ my: "6px" }}
234+
>
235+
<FormControlLabel
236+
value="hard"
237+
label={<Trans i18nKey="docFeedbackSurvey.negative.hard" />}
238+
control={<Radio size="small" sx={radioSx} />}
239+
componentsProps={labelProps}
240+
sx={controlLabelSx}
241+
/>
242+
<FormControlLabel
243+
value="nothingFound"
244+
label={
245+
<Trans i18nKey="docFeedbackSurvey.negative.nothingFound" />
246+
}
247+
control={<Radio size="small" sx={radioSx} />}
248+
componentsProps={labelProps}
249+
sx={controlLabelSx}
250+
/>
251+
<FormControlLabel
252+
value="inaccurate"
253+
label={
254+
<Trans i18nKey="docFeedbackSurvey.negative.inaccurate" />
255+
}
256+
control={<Radio size="small" sx={radioSx} />}
257+
componentsProps={labelProps}
258+
sx={controlLabelSx}
259+
/>
260+
<FormControlLabel
261+
value="sampleError"
262+
label={
263+
<Trans i18nKey="docFeedbackSurvey.negative.sampleError" />
264+
}
265+
control={<Radio size="small" sx={radioSx} />}
266+
componentsProps={labelProps}
267+
sx={controlLabelSx}
268+
/>
269+
<FormControlLabel
270+
value="other"
271+
label={<Trans i18nKey="docFeedbackSurvey.negative.other" />}
272+
control={<Radio size="small" sx={radioSx} />}
273+
componentsProps={labelProps}
274+
sx={controlLabelSx}
275+
/>
276+
</RadioGroup>
277+
</FormControl>
278+
279+
{negativeVal === "other" && (
280+
<TextField
281+
multiline
282+
rows={2}
283+
sx={{ paddingLeft: "32px", maxWidth: "500px" }}
284+
value={negativeOtherVal}
285+
onChange={(event) => setNegativeOtherVal(event.target.value)}
286+
placeholder={t("docFeedbackSurvey.negative.otherPlaceholder")}
245287
/>
246-
</RadioGroup>
247-
</FormControl>
288+
)}
289+
</Stack>
290+
248291
<Stack direction="row" spacing={2} mt="12px" mb="24px">
249292
<ActionButton
250293
variant="outlined"

‎src/theme/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,16 @@ theme = createTheme(theme, {
265265
},
266266
},
267267
},
268+
MuiOutlinedInput: {
269+
styleOverrides: {
270+
root: {
271+
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
272+
borderColor: theme.palette.text.primary,
273+
borderWidth: "1px",
274+
},
275+
},
276+
},
277+
},
268278
},
269279
} as ThemeOptions);
270280

0 commit comments

Comments
 (0)