diff --git a/locale/en/translation.json b/locale/en/translation.json index 2bf4850ab..d18212ae9 100644 --- a/locale/en/translation.json +++ b/locale/en/translation.json @@ -143,6 +143,19 @@ "scrollToTop": "Scroll to top", "goToFeedback": "Was this page helpful?" }, + "releaseSubscription": { + "title": "Get future LTS release notice via email", + "placeholder": "Your email", + "button": { + "subscribe": "Subscribe", + "subscribing": "Subscribing..." + }, + "error": { + "invalidEmail": "Invalid email address.", + "networkError": "Network error, please try again later." + }, + "success": "Thank you! You will be notified when new LTS release comes out." + }, "banner": { "docDash2024": { "link": "https://www.pingcap.com/event/tidb-docs-dash/", diff --git a/locale/zh/translation.json b/locale/zh/translation.json index 8bd589154..1c9b9bf30 100644 --- a/locale/zh/translation.json +++ b/locale/zh/translation.json @@ -140,6 +140,19 @@ "scrollToTop": "回到顶部", "goToFeedback": "文档内容是否有帮助？" }, + "releaseSubscription": { + "title": "订阅 LTS 版本更新", + "placeholder": "邮箱地址", + "button": { + "subscribe": "订阅", + "subscribing": "订阅中..." + }, + "error": { + "invalidEmail": "无效邮箱地址。", + "networkError": "网络错误，请稍后重试。" + }, + "success": "感谢订阅！当新的 LTS 版本发布时，我们会通过邮件通知您。" + }, "banner": { "docDash2024": { "link": "https://asktug.com/t/topic/1019364", diff --git a/package.json b/package.json index 4a72fb053..c2fae0f20 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,8 @@ "redux": "^4.1.2", "rehype-katex": "5.0.0", "remark-math": "3.0.1", - "signale": "^1.4.0" + "signale": "^1.4.0", + "zod": "^3.22.4" }, "devDependencies": { "@prantlf/railroad-diagrams": "^1.0.1", diff --git a/src/components/MDXComponents/EmailSubscriptionForm.tsx b/src/components/MDXComponents/EmailSubscriptionForm.tsx new file mode 100644 index 000000000..644f4efe9 --- /dev/null +++ b/src/components/MDXComponents/EmailSubscriptionForm.tsx @@ -0,0 +1,139 @@ +import { Trans, useI18next } from "gatsby-plugin-react-i18next" +import { useState } from "react" +import { z } from "zod" + +import axios from "axios" + +import { LoadingButton } from "@mui/lab" +import Box from "@mui/material/Box" +import TextField from "@mui/material/TextField" + + +type FormType = { + email: string; + loading: boolean; + error: null | "invalidEmail" | "networkError"; +}; + + +// Collect email address that subscribe to TiDB release and send it to the SendGrid API +function EmailSubscriptionForm() { + const { t, navigate } = useI18next(); + + const API_URL = + "https://03tryjsrrb.execute-api.us-west-2.amazonaws.com/Prod/subscribe/"; + + const [formData, setFormData] = useState({ + email: "", + loading: false, + error: null, + }); + const [success, setSuccess] = useState(false); + + const validateEmail = (): boolean => { + // Set up a schema for validating the email address + const schema = z.string().email(); + + try { + schema.parse(formData.email); + return true; + } catch (e) { + console.error(e); + setFormData({ ...formData, error: "invalidEmail" }); + return false; + } + }; + + const handleChange = (event: React.ChangeEvent) => { + const { value } = event.target; + setFormData((prevState) => ({ ...prevState, email: value })); + }; + + const handleSubmit = async (event: React.FormEvent) => { + event.preventDefault(); + + if (validateEmail()) { + // Submitting... + setFormData({ ...formData, loading: true, error: null }); + + try { + + const payload = new URLSearchParams({ + email: formData.email + }) + await axios.post(API_URL, payload); + + setFormData({ ...formData, loading: false, error: null }); + setSuccess(true); + } catch (e) { + setFormData({ ...formData, loading: false, error: "networkError" }); + console.error(e); + } + } + }; + + return ( +
+

+ + : + +

+ + {!success ? ( +
+
+ + + + + + + +
+
+ ) : ( + +

+ + 💌 + + +

+ + )} +
+ ); +} + +export function EmailSubscriptionWrapper() { + const { language } = useI18next(); + const disabled = language === Locale.ja; + + if (disabled) { + return null; + } + + return +} diff --git a/src/components/MDXComponents/index.tsx b/src/components/MDXComponents/index.tsx index df02beaea..76c710458 100644 --- a/src/components/MDXComponents/index.tsx +++ b/src/components/MDXComponents/index.tsx @@ -1,27 +1,28 @@ export { - Tip, - Note, + CustomAlert, Important, + Note, + Tip, Warning, - CustomAlert, } from "components/MDXComponents/Alert"; export { ColumnTitle, NavColumn, NavColumns, } from "components/MDXComponents/ColumnDeprecated"; -export { SimpleTab } from "components/MDXComponents/SimpleTab"; -export { SyntaxDiagram } from "components/MDXComponents/SyntaxDiagram"; -export { TabsPanel } from "components/MDXComponents/TabsPanel"; export { CustomContent } from "components/MDXComponents/CustomContent"; export { - LearningPathContainer, - LearningPath, -} from "components/MDXComponents/LearningPath"; -export { + DocHomeCard, + DocHomeCardContainer, DocHomeContainer, DocHomeSection, - DocHomeCardContainer, - DocHomeCard, } from "components/MDXComponents/DocHome"; +export { EmailSubscriptionWrapper } from "components/MDXComponents/EmailSubscriptionForm"; +export { + LearningPath, + LearningPathContainer, +} from "components/MDXComponents/LearningPath"; export { MDSvgIcon } from "components/MDXComponents/MDSvgIcon"; +export { SimpleTab } from "components/MDXComponents/SimpleTab"; +export { SyntaxDiagram } from "components/MDXComponents/SyntaxDiagram"; +export { TabsPanel } from "components/MDXComponents/TabsPanel"; diff --git a/yarn.lock b/yarn.lock index d4fb38621..53b9af7c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14603,6 +14603,11 @@ z-schema@^5.0.1: optionalDependencies: commander "^2.7.1" +zod@^3.22.4: + version "3.22.4" + resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff" + integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg== + zwitch@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.5.tgz#d11d7381ffed16b742f6af7b3f223d5cd9fe9920"