Skip to content

Commit

Permalink
feat: provide popover for docs survey campaign (#460)
Browse files Browse the repository at this point in the history
* feat(locale): add docs survey campaign translations

* feat(components): add feedback survey component

* feat(templates): use docs survey campaign instead of fab

* refine(campaign): improve survey

* fix(campaign/survey): move `localStorage` into `useEffect` for SSG
  • Loading branch information
Yuiham authored Jan 6, 2024
1 parent 45ef87c commit 00f3cf8
Show file tree
Hide file tree
Showing 6 changed files with 186 additions and 2 deletions.
8 changes: 8 additions & 0 deletions locale/en/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -150,5 +150,13 @@
"date": "Jan 9 - Jan 12 (UTC)",
"intro": "Join us to improve docs and win a prize!"
}
},
"campaign": {
"docSurvey": {
"link": "https://forms.gle/Swhb3jHcgd2Tjq2s9",
"title": "We love your feedback!",
"content": "Your insights are invaluable in shaping the future of TiDB docs.",
"action": "Take the survey"
}
}
}
8 changes: 8 additions & 0 deletions locale/ja/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -142,5 +142,13 @@
"fab": {
"scrollToTop": "トップへ戻る",
"goToFeedback": "このページは役に立ちましたか?"
},
"campaign": {
"docSurvey": {
"link": "https://forms.gle/LbWEygumJkc4jAPD7",
"title": "フィードバック募集中!",
"content": "ご意見は、TiDBドキュメントの発展に大いに役立ちます。",
"action": "アンケートへ"
}
}
}
8 changes: 8 additions & 0 deletions locale/zh/translation.json
Original file line number Diff line number Diff line change
Expand Up @@ -147,5 +147,13 @@
"date": "1/9 - 1/12",
"intro": "提 PR 或 Issue 来赢取 Bose 耳机、机械键盘等奖品吧!"
}
},
"campaign": {
"docSurvey": {
"link": "https://pingcap.feishu.cn/share/base/form/shrcnHSzhZvFgUHMeW8J0rFMmJC",
"title": "文档满意度调查",
"content": "我们一起让 TiDB 文档变得更好!",
"action": "立即参与"
}
}
}
156 changes: 156 additions & 0 deletions src/components/Campaign/FeedbackSurvey.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
import {
Avatar,
Box,
Card,
CardContent,
CardHeader,
IconButton,
Stack,
Typography,
} from "@mui/material";
import {
CampaignOutlined,
CloseOutlined,
EastOutlined,
} from "@mui/icons-material";
import { useLocation } from "@reach/router";
import { useI18next } from "gatsby-plugin-react-i18next";
import { useEffect, useState } from "react";

type SurveyStorage = {
disabled?: boolean;
updatedTime?: number;
path?: string;
};

function useDisclosure(cacheDuration: number = 0) {
const location = useLocation();
const [visible, setVisible] = useState(false);
const storageKey = "docs.campaign.survey.v1";
const close = () => {
localStorage.setItem(
storageKey,
JSON.stringify({
disabled: true,
updatedTime: Date.now(),
path: location.pathname,
})
);

setVisible(false);
};

useEffect(() => {
const strValue = localStorage.getItem(storageKey);
const data: SurveyStorage = JSON.parse(strValue || "{}");
const cachedVisible =
(data.updatedTime || 0) < Date.now() - cacheDuration
? true
: !data.disabled;

setVisible(cachedVisible);
}, []);

return [visible, close] as const;
}

export function FeedbackSurveyCampaign() {
const { t } = useI18next();
const [visible, close] = useDisclosure(120 * 60 * 1000);

if (!visible) {
return null;
}

return (
<Box
sx={{
bgcolor: "website.m1",
borderRadius: "8px",
}}
>
<Card
component="a"
href={t("campaign.docSurvey.link")}
target="_blank"
variant="outlined"
sx={{
display: "block",
width: "15rem",
borderRadius: "8px",
borderColor: "website.k1",
background:
"radial-gradient(181.14% 96.64% at 101.72% 103.13%, rgba(211, 97, 230, 0.50) 0%, rgba(16, 190, 235, 0.17) 39.41%, rgba(255, 255, 255, 0.00) 100%)",
boxShadow: "0px 2px 4px 0px rgba(0, 0, 0, 0.04)",
textDecoration: "none",
}}
>
<CardHeader
avatar={
<Avatar
sx={{
width: "18px",
height: "18px",
background:
"linear-gradient(135deg, #0FC7C7, #00AEEF, #CA5AF0)",
}}
aria-label="Docs Survey Campaign"
>
<CampaignOutlined sx={{ width: 14, height: 14 }} />
</Avatar>
}
action={
<IconButton
aria-label="close"
size="small"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
close();
}}
>
<CloseOutlined fontSize="inherit" />
</IconButton>
}
title={t("campaign.docSurvey.title")}
titleTypographyProps={{
sx: {
fontSize: 14,
fontWeight: 600,
background: "linear-gradient(90deg, #9A3CBB, #284DAB, #2D9BB7)",
backgroundClip: "text",
"-webkit-text-fill-color": "transparent",
},
}}
sx={{
"& > .MuiCardHeader-avatar": {
mr: "8px",
},
}}
/>
<CardContent sx={{ pt: 0, "&:last-child": { pb: "16px" } }}>
<Stack spacing={2}>
<Typography variant="body2">
{t("campaign.docSurvey.content")}
</Typography>
<Typography
variant="body2"
color="website.k1"
fontWeight={700}
display="flex"
alignItems="center"
>
{t("campaign.docSurvey.action")}
<EastOutlined
fontSize="inherit"
stroke="currentColor"
strokeWidth="1.5"
sx={{ ml: "4px" }}
/>
</Typography>
</Stack>
</CardContent>
</Card>
</Box>
);
}
4 changes: 3 additions & 1 deletion src/templates/DocSearchTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
ZH_DOC_TYPE_LIST,
} from "static";
import { Locale } from "static/Type";
import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";

// TiDB: get latest two LTS versions + latest DMR version
// TiDB Cloud: only has one version
Expand Down Expand Up @@ -335,7 +336,8 @@ export default function DocSearchTemplate({
right: "1rem",
}}
>
<ScrollToTopBtn />
<FeedbackSurveyCampaign />
{/* <ScrollToTopBtn /> */}
</Box>
</Container>
</Layout>
Expand Down
4 changes: 3 additions & 1 deletion src/templates/DocTemplate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import Seo from "components/Layout/Seo";
import { getStable, generateUrl } from "utils";
import GitCommitInfoCard from "components/Card/GitCommitInfoCard";
import { FeedbackSection } from "components/Card/FeedbackSection";
import { FeedbackSurveyCampaign } from "components/Campaign/FeedbackSurvey";

interface DocTemplateProps {
pageContext: PageContext & {
Expand Down Expand Up @@ -263,7 +264,8 @@ export default function DocTemplate({
right: "1rem",
}}
>
<ScrollToTopBtn />
<FeedbackSurveyCampaign />
{/* <ScrollToTopBtn /> */}
</Box>
</Box>
</Box>
Expand Down

1 comment on commit 00f3cf8

@vercel
Copy link

@vercel vercel bot commented on 00f3cf8 Jan 6, 2024

Choose a reason for hiding this comment

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

Please sign in to comment.