fix: replace hard-coded strings with translation keys for internationalization (#20672)

* fix: replace hard-coded strings with translation keys for internationalization

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: replace loading text with translation key

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add translation keys for platform plans view

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add translation keys for oauth view

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add translation keys for users table

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add translation keys for oauth view toast messages

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add translation keys for verify view

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: update sendVerificationLogin to use t function

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: remove duplicate translation keys in common.json

Co-Authored-By: benny@cal.com <benny@cal.com>

* fix: add missing verification_email_sent translation key

Co-Authored-By: benny@cal.com <benny@cal.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: benny@cal.com <benny@cal.com>

apps/web/modules/settings/admin/components/UsersTable.tsx

@@ -1,5 +1,6 @@
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SMSLockState } from "@calcom/prisma/client";
 import { trpc } from "@calcom/trpc/react";
 import { Avatar } from "@calcom/ui/components/avatar";
@@ -51,6 +52,7 @@ const LockStatusTable = ({
   teams?: Team[];
   setSMSLockState: (param: { userId?: number; teamId?: number; lock: boolean }) => void;
 }) => {
+  const { t } = useLocale();
   function getActions({ user, team }: { user?: User; team?: Team }) {
     const smsLockState = user?.smsLockState ?? team?.smsLockState;
     if (!smsLockState) return [];
@@ -89,10 +91,10 @@ const LockStatusTable = ({
     <>
       <Table>
         <Header>
-          <ColumnTitle widthClassNames="w-auto">User/Team</ColumnTitle>
-          <ColumnTitle>Status</ColumnTitle>
+          <ColumnTitle widthClassNames="w-auto">{t("user_team")}</ColumnTitle>
+          <ColumnTitle>{t("status")}</ColumnTitle>
           <ColumnTitle widthClassNames="w-auto">
-            <span className="sr-only">Edit</span>
+            <span className="sr-only">{t("edit")}</span>
           </ColumnTitle>
         </Header>
 

apps/web/modules/settings/admin/oauth-view.tsx

@@ -5,12 +5,12 @@ import { useForm } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { ImageUploader } from "@calcom/ui/components/image-uploader";
 import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
 import { Form } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
 import { showToast } from "@calcom/ui/components/toast";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
@@ -95,7 +95,7 @@ export default function OAuthView() {
       ) : (
         <div>
           <div className="text-emphasis mb-5 text-xl font-semibold">{oAuthForm.getValues("name")}</div>
-          <div className="mb-2 font-medium">Client Id</div>
+          <div className="mb-2 font-medium">{t("client_id")}</div>
           <div className="flex">
             <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
               {" "}
@@ -105,7 +105,7 @@ export default function OAuthView() {
               <Button
                 onClick={() => {
                   navigator.clipboard.writeText(clientId);
-                  showToast("Client ID copied!", "success");
+                  showToast(t("client_id_copied"), "success");
                 }}
                 type="button"
                 className="rounded-l-none text-base"
@@ -116,7 +116,7 @@ export default function OAuthView() {
           </div>
           {clientSecret ? (
             <>
-              <div className="mb-2 mt-4 font-medium">Client Secret</div>
+              <div className="mb-2 mt-4 font-medium">{t("client_secret")}</div>
               <div className="flex">
                 <code className="bg-subtle text-default w-full truncate rounded-md rounded-r-none py-[6px] pl-2 pr-2 align-middle font-mono">
                   {" "}
@@ -127,7 +127,7 @@ export default function OAuthView() {
                     onClick={() => {
                       navigator.clipboard.writeText(clientSecret);
                       setClientSecret("");
-                      showToast("Client secret copied!", "success");
+                      showToast(t("client_secret_copied"), "success");
                     }}
                     type="button"
                     className="rounded-l-none text-base"