From 79832fefe3127b15352c319191c121605ebbb79a Mon Sep 17 00:00:00 2001 From: Tristan Yang Date: Fri, 25 Nov 2022 11:27:01 +0800 Subject: [PATCH] feat: more translation --- public/locales/en/welcome.json | 25 +++++++++++++++++++- src/routes/onboarding/index.tsx | 11 +++++---- src/routes/onboarding/steps/adminAccount.tsx | 8 ++++--- src/routes/onboarding/steps/donePage.tsx | 13 ++++++---- src/routes/onboarding/steps/inviteLink.tsx | 14 ++++++----- src/routes/onboarding/steps/serverName.tsx | 10 ++++---- src/routes/onboarding/steps/welcomePage.tsx | 8 ++++--- src/routes/onboarding/steps/whoCanSignUp.tsx | 10 ++++---- 8 files changed, 68 insertions(+), 31 deletions(-) diff --git a/public/locales/en/welcome.json b/public/locales/en/welcome.json index 7cf1b720..380b70a5 100644 --- a/public/locales/en/welcome.json +++ b/public/locales/en/welcome.json @@ -5,5 +5,28 @@ "start_by_channel": "Create a Channel to Start a Conversation", "start_by_dm": "Send a Direct Message", "download": "Download Mobile apps", - "help": "Got questions? Visit our help center" + "help": "Got questions? Visit our help center", + "onboarding": { + "title": "VoceChat Setup", + "welcome": "Welcome to your VoceChat!", + "welcome_desc": "Everything in this space is owned by you. Let’s set up your space!", + "start": "Start", + "new_server": "Create a new server", + "server_desc": "Servers are shared environments where teams can work on projects and chat.", + "placeholder_server": "Enter server name", + "create_server": "Create Server", + "admin_title": "Now let’s set up your admin account", + "admin_desc": "You are the 1st user and admin of your space!", + "sign": "Sign Up", + "invite_title": "Last step: invite others!", + "invite_desc": "Firstly, who can sign up to this server?", + "confirm": "Confirm", + "done_welcome": "Welcome to {{serverName}}", + "done_title": "Proudly presented by VoceChat", + "done_desc": "More settings, including domain resolution, privileges, securities, and invites are available in <0>Settings", + "enter": "Enter", + "last_tip": "Now let’s invite others!", + "last_desc": "Send invitation link to your future community members:", + "done": "Done" + } } diff --git a/src/routes/onboarding/index.tsx b/src/routes/onboarding/index.tsx index 68b4b6ad..79bf208c 100644 --- a/src/routes/onboarding/index.tsx +++ b/src/routes/onboarding/index.tsx @@ -10,6 +10,7 @@ import InviteLink from "./steps/inviteLink"; import DonePage from "./steps/donePage"; import useServerSetup, { steps } from "./useServerSetup"; import StyledOnboardingPage from "./styled"; +import { useTranslation } from "react-i18next"; interface Props { step: string; @@ -17,6 +18,7 @@ interface Props { } const Navigator: FC = ({ step, setStep }) => { + const index = steps.map((value) => value.name).indexOf(step); const canJumpTo = steps.find((value) => value.name === step)?.canJumpTo || []; @@ -24,9 +26,8 @@ const Navigator: FC = ({ step, setStep }) => {
{steps.map((stepToRender, indexToRender) => { const clickable = canJumpTo.includes(stepToRender.name); - const nodeCls = `node ${indexToRender === index ? "emphasized" : ""} ${ - indexToRender > index ? "disabled" : "" - } ${clickable ? "clickable" : ""}`; + const nodeCls = `node ${indexToRender === index ? "emphasized" : ""} ${indexToRender > index ? "disabled" : "" + } ${clickable ? "clickable" : ""}`; const arrowCls = `arrow ${indexToRender >= index ? "disabled" : ""}`; return ( @@ -49,12 +50,12 @@ const Navigator: FC = ({ step, setStep }) => { }; export default function OnboardingPage() { + const { t } = useTranslation("welcome"); const serverSetup = useServerSetup(); - return ( <> - VoceChat Setup + {t("onboarding.title")} diff --git a/src/routes/onboarding/steps/adminAccount.tsx b/src/routes/onboarding/steps/adminAccount.tsx index 9b3638a0..f0416423 100644 --- a/src/routes/onboarding/steps/adminAccount.tsx +++ b/src/routes/onboarding/steps/adminAccount.tsx @@ -12,6 +12,7 @@ import { import { useLoginMutation } from "../../../app/services/auth"; import { updateInitialized } from "../../../app/slices/auth.data"; import { useAppSelector } from "../../../app/store"; +import { useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -68,6 +69,7 @@ type Props = { nextStep: () => void; }; const AdminAccount: FC = ({ serverName, nextStep }) => { + const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); const loggedIn = useAppSelector((store) => !!store.authData.token); const dispatch = useDispatch(); @@ -112,8 +114,8 @@ const AdminAccount: FC = ({ serverName, nextStep }) => { return ( - Now let’s set up your admin account - You are the 1st user and admin of your space! + {t("admin_title")} + {t("admin_desc")} = ({ serverName, nextStep }) => { }); }} > - {!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."} + {!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."} ); diff --git a/src/routes/onboarding/steps/donePage.tsx b/src/routes/onboarding/steps/donePage.tsx index b6288e4a..3872e0da 100644 --- a/src/routes/onboarding/steps/donePage.tsx +++ b/src/routes/onboarding/steps/donePage.tsx @@ -2,6 +2,7 @@ import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import StyledButton from "../../../common/component/styled/Button"; import PlayIcon from "../../../assets/icons/play.svg?url"; +import { Trans, useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -58,19 +59,21 @@ const StyledWrapper = styled.div` `; export default function DonePage({ serverName }: { serverName: string }) { + const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); const navigate = useNavigate(); return ( - Welcome to {serverName} - Proudly presented by VoceChat + {t("done_welcome", { serverName })} + {t("done_title")} - More settings, including domain resolution, privileges, securities, and invites are - available in Settings + + + navigate("/")}> play icon - Enter + {t("enter")} ); diff --git a/src/routes/onboarding/steps/inviteLink.tsx b/src/routes/onboarding/steps/inviteLink.tsx index 3b68d72f..44b91896 100644 --- a/src/routes/onboarding/steps/inviteLink.tsx +++ b/src/routes/onboarding/steps/inviteLink.tsx @@ -2,6 +2,7 @@ import styled from "styled-components"; import StyledInput from "../../../common/component/styled/Input"; import StyledButton from "../../../common/component/styled/Button"; import useInviteLink from "../../../common/hook/useInviteLink"; +import { useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -74,21 +75,22 @@ const StyledWrapper = styled.div` `; export default function InviteLink({ nextStep }: { nextStep: () => void }) { + const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); + const { t: ct } = useTranslation(); const { link, linkCopied, copyLink } = useInviteLink(); - return ( - Last step: invite others! - Now let’s invite others! - Send invitation link to your future community members: + {t("invite_title")} + {t("last_tip")} + {t("last_desc")}
- {linkCopied ? "Copied" : `Copy`} + {linkCopied ? "Copied" : ct("action.copy")}
- Done + {t("done")} ); diff --git a/src/routes/onboarding/steps/serverName.tsx b/src/routes/onboarding/steps/serverName.tsx index 385bd4eb..052e2fb7 100644 --- a/src/routes/onboarding/steps/serverName.tsx +++ b/src/routes/onboarding/steps/serverName.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import toast from "react-hot-toast"; import StyledInput from "../../../common/component/styled/Input"; import StyledButton from "../../../common/component/styled/Button"; +import { useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -51,15 +52,16 @@ type Props = { nextStep: () => void; }; const ServerName: FC = ({ serverName, setServerName, nextStep }) => { + const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); return ( - Create a new server + {t("new_server")} - Servers are shared environments where teams can work on projects and chat. + {t("server_desc")} setServerName(e.target.value)} /> @@ -74,7 +76,7 @@ const ServerName: FC = ({ serverName, setServerName, nextStep }) => { nextStep(); }} > - Create Server + {t("create_server")} ); diff --git a/src/routes/onboarding/steps/welcomePage.tsx b/src/routes/onboarding/steps/welcomePage.tsx index 26fdf56e..a9111fa0 100644 --- a/src/routes/onboarding/steps/welcomePage.tsx +++ b/src/routes/onboarding/steps/welcomePage.tsx @@ -1,6 +1,7 @@ import styled from "styled-components"; import StyledButton from "../../../common/component/styled/Button"; import PlayIcon from "../../../assets/icons/play.svg?url"; +import { useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -44,15 +45,16 @@ const StyledWrapper = styled.div` `; export default function WelcomePage({ nextStep }: { nextStep: () => void }) { + const { t } = useTranslation("welcome", { keyPrefix: "onboarding" }); return ( - Welcome to your VoceChat! + {t("welcome")} - Everything in this space is owned by you. Let’s set up your space! + {t("welcome_desc")} play icon - Start + {t("start")} ); diff --git a/src/routes/onboarding/steps/whoCanSignUp.tsx b/src/routes/onboarding/steps/whoCanSignUp.tsx index ee2d6191..36311b10 100644 --- a/src/routes/onboarding/steps/whoCanSignUp.tsx +++ b/src/routes/onboarding/steps/whoCanSignUp.tsx @@ -5,6 +5,7 @@ import StyledRadio from "../../../common/component/styled/Radio"; import StyledButton from "../../../common/component/styled/Button"; import { useGetLoginConfigQuery, useUpdateLoginConfigMutation } from "../../../app/services/server"; import { WhoCanSignUp } from "../../../types/server"; +import { useTranslation } from "react-i18next"; const StyledWrapper = styled.div` height: 100%; @@ -40,6 +41,7 @@ const StyledWrapper = styled.div` `; export default function SignUpSetting({ nextStep }: { nextStep: () => void }) { + const { t } = useTranslation("welcome"); const { data: loginConfig } = useGetLoginConfigQuery(); const [updateLoginConfig, { isSuccess, error }] = useUpdateLoginConfigMutation(); @@ -65,10 +67,10 @@ export default function SignUpSetting({ nextStep }: { nextStep: () => void }) { return ( - Last step: invite others! - Firstly, who can sign up to this server? + {t("onboarding.invite_title")} + {t("onboarding.invite_desc")} void }) { } }} > - Confirm + {t("onboarding.confirm")} );