feat: more translation

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<Props> = ({ 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<Props> = ({ serverName, nextStep }) => {
 
   return (
     <StyledWrapper>
-      <span className="primaryText">Now let’s set up your admin account</span>
-      <span className="secondaryText">You are the 1st user and admin of your space!</span>
+      <span className="primaryText">{t("admin_title")}</span>
+      <span className="secondaryText">{t("admin_desc")}</span>
       <StyledInput
         className="input"
         placeholder="Enter your email"
@@ -161,7 +163,7 @@ const AdminAccount: FC<Props> = ({ serverName, nextStep }) => {
           });
         }}
       >
-        {!(isSigningUp || isLoggingIn || isUpdatingServer) ? "Sign Up" : "..."}
+        {!(isSigningUp || isLoggingIn || isUpdatingServer) ? t("sign") : "..."}
       </StyledButton>
     </StyledWrapper>
   );

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 (
     <StyledWrapper>
-      <span className="primaryText">Welcome to {serverName}</span>
-      <span className="secondaryText">Proudly presented by VoceChat</span>
+      <span className="primaryText">{t("done_welcome", { serverName })}</span>
+      <span className="secondaryText">{t("done_title")}</span>
       <span className="tip">
-        More settings, including domain resolution, privileges, securities, and invites are
-        available in <span className="strong">Settings</span>
+        <Trans i18nKey={"onboarding.done_desc"} ns={"welcome"}>
+          <span className="strong" />
+        </Trans>
       </span>
       <StyledButton className="startButton" onClick={() => navigate("/")}>
         <img src={PlayIcon} alt="play icon" />
-        <span>Enter</span>
+        <span>{t("enter")}</span>
       </StyledButton>
     </StyledWrapper>
   );

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 (
     <StyledWrapper>
-      <span className="primaryText">Last step: invite others!</span>
-      <span className="secondaryText">Now let’s invite others!</span>
-      <span className="tip">Send invitation link to your future community members:</span>
+      <span className="primaryText">{t("invite_title")}</span>
+      <span className="secondaryText">{t("last_tip")}</span>
+      <span className="tip">{t("last_desc")}</span>
       <div className="link">
         <StyledInput className="large" readOnly placeholder="Generating" value={link} />
         <StyledButton onClick={copyLink} className="ghost small border_less">
-          {linkCopied ? "Copied" : `Copy`}
+          {linkCopied ? "Copied" : ct("action.copy")}
         </StyledButton>
       </div>
       <StyledButton className="button" onClick={nextStep}>
-        Done
+        {t("done")}
       </StyledButton>
     </StyledWrapper>
   );

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<Props> = ({ serverName, setServerName, nextStep }) => {
+  const { t } = useTranslation("welcome", { keyPrefix: "onboarding" });
   return (
     <StyledWrapper>
-      <span className="primaryText">Create a new server</span>
+      <span className="primaryText">{t("new_server")}</span>
       <span className="secondaryText">
-        Servers are shared environments where teams can work on projects and chat.
+        {t("server_desc")}
       </span>
       <StyledInput
         className="input"
-        placeholder="Enter server name"
+        placeholder={t("placeholder_server")}
         value={serverName}
         onChange={(e) => setServerName(e.target.value)}
       />
@@ -74,7 +76,7 @@ const ServerName: FC<Props> = ({ serverName, setServerName, nextStep }) => {
           nextStep();
         }}
       >
-        Create Server
+        {t("create_server")}
       </StyledButton>
     </StyledWrapper>
   );

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 (
     <StyledWrapper>
-      <span className="primaryText">Welcome to your VoceChat!</span>
+      <span className="primaryText">{t("welcome")}</span>
       <span className="secondaryText">
-        Everything in this space is owned by you. Let’s set up your space!
+        {t("welcome_desc")}
       </span>
       <StyledButton className="startButton" onClick={nextStep}>
         <img src={PlayIcon} alt="play icon" />
-        <span>Start</span>
+        <span>{t("start")}</span>
       </StyledButton>
     </StyledWrapper>
   );

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 (
     <StyledWrapper>
-      <span className="primaryText">Last step: invite others!</span>
-      <span className="secondaryText">Firstly, who can sign up to this server?</span>
+      <span className="primaryText">{t("onboarding.invite_title")}</span>
+      <span className="secondaryText">{t("onboarding.invite_desc")}</span>
       <StyledRadio
-        options={["Everyone", "Invitation link only"]}
+        options={[t("overview.sign_up.everyone", { ns: "setting" }), t("overview.sign_up.invite", { ns: "setting" })]}
         values={["EveryOne", "InvitationOnly"]}
         value={value}
         onChange={setValue}
@@ -85,7 +87,7 @@ export default function SignUpSetting({ nextStep }: { nextStep: () => void }) {
           }
         }}
       >
-        Confirm
+        {t("onboarding.confirm")}
       </StyledButton>
     </StyledWrapper>
   );