From 66d454e6c663e871ac79309670a52348b3b9d728 Mon Sep 17 00:00:00 2001
From: Fernando Palomo <fpalomo@deloitte.es>
Date: Mon, 19 Sep 2022 15:36:26 +0000
Subject: [PATCH] Implement the new strings into the client

---
 .../messaging/bars/MessageOverlayBar.tsx      | 19 +++++++++++--------
 src/components/common/user/UserBadges.tsx     |  4 ++--
 src/components/markdown/plugins/Codeblock.tsx |  4 +++-
 .../settings/account/AccountManagement.tsx    |  6 +++---
 .../account/MultiFactorAuthentication.tsx     | 12 ++++++++++--
 src/pages/channels/voice/VoiceHeader.tsx      | 10 +++++-----
 src/pages/discover/Discover.tsx               | 12 ++++--------
 src/pages/friends/Friends.tsx                 |  4 ++--
 src/pages/home/Home.tsx                       |  1 +
 src/pages/login/ConfirmDelete.tsx             | 19 ++++++++++++-------
 src/pages/login/forms/CaptchaBlock.tsx        |  2 +-
 src/pages/settings/panes/Audio.tsx            |  4 ++--
 src/pages/settings/panes/Feedback.tsx         |  6 +++---
 src/pages/settings/panes/MyBots.tsx           |  7 +++----
 src/pages/settings/panes/Profile.tsx          | 10 +++++-----
 src/pages/settings/panes/Sessions.tsx         |  4 ++--
 src/pages/settings/server/Overview.tsx        |  6 +++---
 17 files changed, 72 insertions(+), 58 deletions(-)

diff --git a/src/components/common/messaging/bars/MessageOverlayBar.tsx b/src/components/common/messaging/bars/MessageOverlayBar.tsx
index f17dcbfd..36a8f48e 100644
--- a/src/components/common/messaging/bars/MessageOverlayBar.tsx
+++ b/src/components/common/messaging/bars/MessageOverlayBar.tsx
@@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite";
 import { Message as MessageObject } from "revolt.js";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { openContextMenu } from "preact-context-menu";
 import { useEffect, useState } from "preact/hooks";
 
@@ -109,7 +110,7 @@ export const MessageOverlayBar = observer(
         return (
             <OverlayBar>
                 {message.channel?.havePermission("SendMessage") && (
-                    <Tooltip content="Reply">
+                    <Tooltip content={ <Text id="app.popover.message.reply" /> }>
                         <Entry
                             onClick={() =>
                                 internalEmit("ReplyBar", "add", message)
@@ -125,7 +126,7 @@ export const MessageOverlayBar = observer(
                             open={reactionsOpen}
                             setOpen={setReactionsOpen}
                             message={message}>
-                            <Tooltip content="React">
+                            <Tooltip content={ <Text id="app.popover.message.react" /> }>
                                 <Entry>
                                     <HappyBeaming size={18} />
                                 </Entry>
@@ -134,7 +135,7 @@ export const MessageOverlayBar = observer(
                     )}
 
                 {isAuthor && (
-                    <Tooltip content="Edit">
+                    <Tooltip content={ <Text id="app.popover.message.edit" /> }>
                         <Entry
                             onClick={() =>
                                 internalEmit(
@@ -150,7 +151,7 @@ export const MessageOverlayBar = observer(
                 {isAuthor ||
                 (message.channel &&
                     message.channel.havePermission("ManageMessages")) ? (
-                    <Tooltip content="Delete">
+                    <Tooltip content={ <Text id="app.popover.message.delete" /> }>
                         <Entry
                             onClick={(e) =>
                                 e.shiftKey
@@ -164,7 +165,7 @@ export const MessageOverlayBar = observer(
                         </Entry>
                     </Tooltip>
                 ) : undefined}
-                <Tooltip content="More">
+                <Tooltip content={ <Text id="app.popover.message.more" /> }>
                     <Entry
                         onClick={() =>
                             openContextMenu("Menu", {
@@ -179,7 +180,7 @@ export const MessageOverlayBar = observer(
                 {extraActions && (
                     <>
                         <Divider />
-                        <Tooltip content="Mark as Unread">
+                        <Tooltip content={ <Text id="app.popover.message.mark_unread" /> }>
                             <Entry
                                 onClick={() => {
                                     // ! FIXME: deduplicate this code with ctx menu
@@ -207,7 +208,7 @@ export const MessageOverlayBar = observer(
                         </Tooltip>
                         <Tooltip
                             content={
-                                copied === "link" ? "Copied!" : "Copy Link"
+                                <Text id={`app.popover.message.${copied === "link" ? 'copied' : 'copy_link'}`} />
                             }
                             hideOnClick={false}>
                             <Entry
@@ -219,7 +220,9 @@ export const MessageOverlayBar = observer(
                             </Entry>
                         </Tooltip>
                         <Tooltip
-                            content={copied === "id" ? "Copied!" : "Copy ID"}
+                            content={
+                                <Text id={`app.popover.message.${copied === "id" ? 'copied' : 'copy_id'}`} />
+                            }
                             hideOnClick={false}>
                             <Entry
                                 onClick={() => {
diff --git a/src/components/common/user/UserBadges.tsx b/src/components/common/user/UserBadges.tsx
index b14d8c6a..38775542 100644
--- a/src/components/common/user/UserBadges.tsx
+++ b/src/components/common/user/UserBadges.tsx
@@ -130,14 +130,14 @@ export default function UserBadges({ badges, uid }: Props) {
                     <></>
                 )}
                 {badges & Badges.ReservedRelevantJokeBadge1 ? (
-                    <Tooltip content="sus">
+                    <Tooltip content={ <Text id="app.popover.user_profile.badges.sus" /> }>
                         <img src="/assets/badges/amog.svg" />
                     </Tooltip>
                 ) : (
                     <></>
                 )}
                 {badges & Badges.ReservedRelevantJokeBadge2 ? (
-                    <Tooltip content="It's Morbin Time">
+                    <Tooltip content={ <Text id="app.popover.user_profile.badges.morbin_time" /> }>
                         <img src="/assets/badges/amorbus.svg" />
                     </Tooltip>
                 ) : (
diff --git a/src/components/markdown/plugins/Codeblock.tsx b/src/components/markdown/plugins/Codeblock.tsx
index 85f27ece..0b25f45d 100644
--- a/src/components/markdown/plugins/Codeblock.tsx
+++ b/src/components/markdown/plugins/Codeblock.tsx
@@ -2,6 +2,8 @@ import styled from "styled-components";
 
 import { useCallback, useRef } from "preact/hooks";
 
+import { Localizer, Text } from "preact-i18n";
+
 import { Tooltip } from "@revoltchat/ui";
 
 import { modalController } from "../../../controllers/modals/ModalController";
@@ -66,7 +68,7 @@ export const RenderCodeblock: React.FC<{ class: string }> = ({
     return (
         <Base ref={ref}>
             <Lang>
-                <Tooltip content="Copy to Clipboard" placement="top">
+                <Tooltip content={ <Text id="app.popover.misc.copy" /> } placement="top">
                     {/**
                     // @ts-expect-error Preact-React */}
                     <a onClick={onCopy}>{text}</a>
diff --git a/src/components/settings/account/AccountManagement.tsx b/src/components/settings/account/AccountManagement.tsx
index 6c9c5310..9ebe23c3 100644
--- a/src/components/settings/account/AccountManagement.tsx
+++ b/src/components/settings/account/AccountManagement.tsx
@@ -39,7 +39,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Block size={24} color="var(--error)" />}
                 description={
-                    "Disable your account. You won't be able to access it unless you contact support."
+                    <Text id="app.settings.pages.account.manage.disable_long" />
                 }
                 action="chevron"
                 onClick={callback("disable")}>
@@ -49,7 +49,7 @@ export default function AccountManagement() {
             <CategoryButton
                 icon={<Trash size={24} color="var(--error)" />}
                 description={
-                    "Your account will be queued for deletion, a confirmation email will be sent."
+                    <Text id="app.settings.pages.account.manage.delete_long" />
                 }
                 action="chevron"
                 onClick={callback("delete")}>
@@ -57,4 +57,4 @@ export default function AccountManagement() {
             </CategoryButton>
         </>
     );
-}
+}
\ No newline at end of file
diff --git a/src/components/settings/account/MultiFactorAuthentication.tsx b/src/components/settings/account/MultiFactorAuthentication.tsx
index 8341f756..3f68594a 100644
--- a/src/components/settings/account/MultiFactorAuthentication.tsx
+++ b/src/components/settings/account/MultiFactorAuthentication.tsx
@@ -198,7 +198,15 @@ export default function MultiFactorAuthentication() {
                         color={!mfa?.totp_mfa ? "var(--error)" : undefined}
                     />
                 }
-                description={"Set up time-based one-time password."}
+                description={
+                    <Text
+                        id={`app.settings.pages.account.2fa.${
+                            mfa?.recovery_active
+                                ? "remove"
+                                : "add"
+                        }_long`}
+                    />
+                }
                 disabled={!mfa || (!mfa.recovery_active && !mfa.totp_mfa)}
                 onClick={totpAction}>
                 <Text
@@ -219,4 +227,4 @@ export default function MultiFactorAuthentication() {
             )}
         </>
     );
-}
+}
\ No newline at end of file
diff --git a/src/pages/channels/voice/VoiceHeader.tsx b/src/pages/channels/voice/VoiceHeader.tsx
index 618baaa2..ef5bf418 100644
--- a/src/pages/channels/voice/VoiceHeader.tsx
+++ b/src/pages/channels/voice/VoiceHeader.tsx
@@ -141,20 +141,20 @@ export default observer(({ id }: Props) => {
                 )}
             </div>
             <div className="actions">
-                <Tooltip content={"Leave call"} placement={"top"}>
+                <Tooltip content={ <Text id="app.popover.voice.leave_call" /> } placement={"top"}>
                     <Button palette="error" onClick={voiceState.disconnect}>
                         <PhoneOff width={20} />
                     </Button>
                 </Tooltip>
                 {voiceState.isProducing("audio") ? (
-                    <Tooltip content={"Mute microphone"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.mute_self" /> } placement={"top"}>
                         <Button
                             onClick={() => voiceState.stopProducing("audio")}>
                             <Microphone width={20} />
                         </Button>
                     </Tooltip>
                 ) : (
-                    <Tooltip content={"Unmute microphone"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.unmute_self" /> } placement={"top"}>
                         <Button
                             onClick={() => voiceState.startProducing("audio")}>
                             <MicrophoneOff width={20} />
@@ -162,13 +162,13 @@ export default observer(({ id }: Props) => {
                     </Tooltip>
                 )}
                 {voiceState.isDeaf() ? (
-                    <Tooltip content={"Undeafen"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.undeafen" /> } placement={"top"}>
                         <Button onClick={() => voiceState.stopDeafen()}>
                             <VolumeMute width={20} />
                         </Button>
                     </Tooltip>
                 ) : (
-                    <Tooltip content={"Deafen"} placement={"top"}>
+                    <Tooltip content={ <Text id="app.popover.voice.deafen" /> } placement={"top"}>
                         <Button onClick={() => voiceState.startDeafen()}>
                             <VolumeFull width={20} />
                         </Button>
diff --git a/src/pages/discover/Discover.tsx b/src/pages/discover/Discover.tsx
index 666daeed..5f456afa 100644
--- a/src/pages/discover/Discover.tsx
+++ b/src/pages/discover/Discover.tsx
@@ -5,6 +5,8 @@ import styled, { css } from "styled-components/macro";
 
 import { useEffect, useMemo, useRef, useState } from "preact/hooks";
 
+import { Text } from "preact-i18n";
+
 import { Header, Preloader } from "@revoltchat/ui";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
@@ -19,7 +21,6 @@ const Container = styled.div`
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-
     ${() =>
         isTouchscreenDevice
             ? css`
@@ -28,7 +29,6 @@ const Container = styled.div`
                   width: 100%;
                   height: 100%;
                   position: fixed;
-
                   padding-bottom: 50px;
                   background: var(--background);
               `
@@ -39,7 +39,6 @@ const Container = styled.div`
 
 const Frame = styled.iframe<{ loaded: boolean }>`
     border: none;
-
     ${() =>
         !isTouchscreenDevice &&
         css`
@@ -47,13 +46,11 @@ const Frame = styled.iframe<{ loaded: boolean }>`
             border-start-start-radius: 8px;
             border-end-start-radius: 8px;
         `}
-
     ${() =>
         isTouchscreenDevice &&
         css`
             padding-top: 56px;
         `}
-
     ${(props) =>
         props.loaded
             ? css`
@@ -66,7 +63,6 @@ const Frame = styled.iframe<{ loaded: boolean }>`
 
 const Loader = styled.div`
     flex-grow: 1;
-
     ${() =>
         !isTouchscreenDevice &&
         css`
@@ -165,7 +161,7 @@ export default function Discover() {
             {isTouchscreenDevice && (
                 <Header palette="primary" withTransparency>
                     <Compass size={27} />
-                    Discover
+                    <Text id="app.navigation.tabs.discover" />
                 </Header>
             )}
             {!loaded && (
@@ -182,4 +178,4 @@ export default function Discover() {
             />
         </Container>
     );
-}
+}
\ No newline at end of file
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index e4374a26..b3ad14b2 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -78,7 +78,7 @@ export default observer(() => {
                         </IconButton>
                     </Tooltip>
                     <div className={styles.divider} />*/}
-                    <Tooltip content={"Create Group"} placement="bottom">
+                    <Tooltip content={ <Text id="app.popover.user_profile.friends.new_group" /> } placement="bottom">
                         <IconButton
                             onClick={() =>
                                 modalController.push({
@@ -88,7 +88,7 @@ export default observer(() => {
                             <MessageAdd size={24} />
                         </IconButton>
                     </Tooltip>
-                    <Tooltip content={"Add Friend"} placement="bottom">
+                    <Tooltip content={ <Text id="app.popover.user_profile.friends.add" /> } placement="bottom">
                         <IconButton
                             onClick={() =>
                                 modalController.push({
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 75609150..fab6cf2b 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -182,6 +182,7 @@ export default observer(() => {
                                 </CategoryButton>
                             </Link>
                         </div>
+                        {/* TODO: TRANSLATE */}
                         {isDecember && (
                             <a href="#" onClick={toggleSeasonalTheme}>
                                 Turn {seasonalTheme ? "off" : "on"} homescreen
diff --git a/src/pages/login/ConfirmDelete.tsx b/src/pages/login/ConfirmDelete.tsx
index 37560e11..dc2a77f7 100644
--- a/src/pages/login/ConfirmDelete.tsx
+++ b/src/pages/login/ConfirmDelete.tsx
@@ -2,6 +2,7 @@ import { Check } from "@styled-icons/boxicons-regular";
 import { useParams } from "react-router-dom";
 import styled from "styled-components";
 
+import { Text } from "preact-i18n";
 import { useEffect, useState } from "preact/hooks";
 
 import { Modal, Preloader } from "@revoltchat/ui";
@@ -24,20 +25,24 @@ export default function ConfirmDelete() {
 
     return (
         <Modal
-            title={deleted ? "Confirmed deletion." : "Please wait..."}
+            title={
+                <Text id={`${ 
+                    deleted
+                        ? 'app.special.modals.account.delete.confirmation'
+                        : 'generic.please_wait'
+                }`} />
+            }
             description={
                 deleted ? (
                     <>
-                        Your account will be deleted in 7 days.
-                        <br />
-                        You may contact{" "}
+                        <Text id="app.special.modals.account.delete.long.a" />{" "}
                         <a href="mailto:contact@revolt.chat">
-                            Revolt support
+                            <Text id="app.special.modals.account.delete.long.b" />
                         </a>{" "}
-                        to cancel the request if you wish.
+                        <Text id="app.special.modals.account.delete.long.c" />
                     </>
                 ) : (
-                    "Contacting the server."
+                    <Text id="generic.contacting_server" />
                 )
             }
             nonDismissable>
diff --git a/src/pages/login/forms/CaptchaBlock.tsx b/src/pages/login/forms/CaptchaBlock.tsx
index c91d75e1..51a7c343 100644
--- a/src/pages/login/forms/CaptchaBlock.tsx
+++ b/src/pages/login/forms/CaptchaBlock.tsx
@@ -28,7 +28,7 @@ export const CaptchaBlock = observer((props: CaptchaProps) => {
 
     return (
         <div className={styles.captcha}>
-            <div className={styles.title}>Are you human?</div>
+            <div className={styles.title}><Text id="login.captcha_title" /></div>
             <div className={styles.checkbox}>
                 <HCaptcha
                     theme="dark"
diff --git a/src/pages/settings/panes/Audio.tsx b/src/pages/settings/panes/Audio.tsx
index 093d83cd..afaf562b 100644
--- a/src/pages/settings/panes/Audio.tsx
+++ b/src/pages/settings/panes/Audio.tsx
@@ -226,7 +226,7 @@ export function Audio() {
             <hr />
             <div className={styles.opus}>
                 <img height="20" src={opusSVG} draggable={false} />
-                Audio codec powered by Opus
+                <Text id="app.settings.pages.audio.audio_codec" />
             </div>
         </>
     );
@@ -242,4 +242,4 @@ function changeAudioDevice(deviceId: string, deviceType: string) {
     } else if (deviceType === "output") {
         window.localStorage.setItem("audioOutputDevice", deviceId);
     }
-}
+}
\ No newline at end of file
diff --git a/src/pages/settings/panes/Feedback.tsx b/src/pages/settings/panes/Feedback.tsx
index 66125beb..4ec7a7b5 100644
--- a/src/pages/settings/panes/Feedback.tsx
+++ b/src/pages/settings/panes/Feedback.tsx
@@ -54,11 +54,11 @@ export function Feedback() {
                     <CategoryButton
                         action="chevron"
                         icon={<Group size={24} />}
-                        description="You can report issues and discuss improvements with us directly here.">
-                        Join Testers server.
+                        description={<Text id="app.home.join-testers_desc" />}>
+                        <Text id="app.home.join-testers_desc" />
                     </CategoryButton>
                 </a>
             </Link>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/pages/settings/panes/MyBots.tsx b/src/pages/settings/panes/MyBots.tsx
index 03af49c0..9b512984 100644
--- a/src/pages/settings/panes/MyBots.tsx
+++ b/src/pages/settings/panes/MyBots.tsx
@@ -56,7 +56,6 @@ const BotBadge = styled.div`
     user-select: none;
     margin-inline-start: 2px;
     text-transform: uppercase;
-
     color: var(--accent-contrast);
     background: var(--accent);
     border-radius: calc(var(--border-radius) / 2);
@@ -521,12 +520,12 @@ export const MyBots = observer(() => {
                 <Text id="app.settings.pages.bots.create_bot" />
             </CategoryButton>
             <h5>
-                By creating a bot, you are agreeing to the {` `}
+                <Text id="app.settings.pages.bots.usage_policy.a" />{" "}
                 <a
                     href="https://revolt.chat/aup"
                     target="_blank"
                     rel="noreferrer">
-                    Acceptable Usage Policy
+                    <Text id="app.settings.pages.bots.usage_policy.b" />
                 </a>
                 .
             </h5>
@@ -573,4 +572,4 @@ export const MyBots = observer(() => {
             </div>
         </div>
     );
-});
+});
\ No newline at end of file
diff --git a/src/pages/settings/panes/Profile.tsx b/src/pages/settings/panes/Profile.tsx
index 76f68e37..0298ea9c 100644
--- a/src/pages/settings/panes/Profile.tsx
+++ b/src/pages/settings/panes/Profile.tsx
@@ -175,12 +175,12 @@ export const Profile = observer(() => {
             <div className={styles.markdown}>
                 <Markdown size="24" />
                 <h5>
-                    Descriptions support Markdown formatting,{" "}
+                    <Text id="app.settings.tips.markdown.a" />{" "}
                     <a
                         href="https://developers.revolt.chat/markdown"
                         target="_blank"
                         rel="noreferrer">
-                        learn more here
+                        <Text id="app.settings.tips.markdown.b" />
                     </a>
                     .
                 </h5>
@@ -202,12 +202,12 @@ export const Profile = observer(() => {
             <LineDivider />
             <Tip>
                 <span>
-                    Want to change your username?{" "}
+                    <Text id="app.settings.tips.profile.a" />{" "}
                     <a onClick={() => switchPage("account")}>
-                        Head over to your account settings.
+                        <Text id="app.settings.tips.profile.b" />
                     </a>
                 </span>
             </Tip>
         </div>
     );
-});
+});
\ No newline at end of file
diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx
index b937686b..0197ee1d 100644
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -238,7 +238,7 @@ export function Sessions() {
                 icon={<LogOut size={24} color={"var(--error)"} />}
                 action={"chevron"}
                 description={
-                    "Logs you out of all sessions except this device."
+                    <Text id="app.settings.pages.sessions.logout_long" />
                 }>
                 <Text id="app.settings.pages.sessions.logout" />
             </CategoryButton>
@@ -254,4 +254,4 @@ export function Sessions() {
             </Tip>
         </div>
     );
-}
+}
\ No newline at end of file
diff --git a/src/pages/settings/server/Overview.tsx b/src/pages/settings/server/Overview.tsx
index 7dc56c39..f4a10119 100644
--- a/src/pages/settings/server/Overview.tsx
+++ b/src/pages/settings/server/Overview.tsx
@@ -96,12 +96,12 @@ export const Overview = observer(({ server }: Props) => {
             <div className={styles.markdown}>
                 <Markdown size="24" />
                 <h5>
-                    Descriptions support Markdown formatting,{" "}
+                    <Text id="app.settings.tips.markdown.a" />{" "}
                     <a
                         href="https://developers.revolt.chat/markdown"
                         target="_blank"
                         rel="noreferrer">
-                        learn more here
+                        <Text id="app.settings.tips.markdown.b" />
                     </a>
                     .
                 </h5>
@@ -186,4 +186,4 @@ export const Overview = observer(({ server }: Props) => {
             </p>
         </div>
     );
-});
+});
\ No newline at end of file