feat: Apply i18n codemods

apps/web/app/[domain]/not-found/page.tsx

@@ -1,5 +1,6 @@
 import { GlobeSearch } from "@dub/ui";
 import { constructMetadata } from "@dub/utils";
+import { getTranslations } from "next-intl/server";
 
 export const runtime = "edge";
 
@@ -12,20 +13,20 @@ export const metadata = constructMetadata({
 });
 
 export default async function NotFoundLinkPage() {
+  const t = await getTranslations("[domain]/not-found");
+
   return (
     <div className="z-10 mx-2 my-10 flex max-w-md flex-col items-center space-y-5 px-2.5 text-center sm:mx-auto sm:max-w-lg sm:px-0 lg:mb-16">
       <div className="font-display mx-auto flex h-20 w-20 items-center justify-center rounded-full border border-gray-300 bg-white/80 text-lg font-bold text-gray-400">
         <GlobeSearch className="size-6 text-gray-500" />
       </div>
-      <h1 className="font-display text-5xl font-bold">Link Not Found</h1>
-      <p className="text-lg text-gray-600">
-        This link does not exist. Please check the URL and try again.
-      </p>
+      <h1 className="font-display text-5xl font-bold">{t("link-not-found")}</h1>
+      <p className="text-lg text-gray-600">{t("link-not-exist-message")}</p>
       <a
         href="https://dub.co/home"
         className="rounded-full bg-gray-800 px-10 py-2 font-medium text-white transition-colors hover:bg-black"
       >
-        Create Your Free Branded Link
+        {t("create-free-branded-link")}
       </a>
     </div>
   );

apps/web/app/admin.dub.co/(dashboard)/components/user-info.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 import { Badge, Copy, Globe2, Tick, useCopyToClipboard } from "@dub/ui";
 import { capitalize, nFormatter } from "@dub/utils";
 import { toast } from "sonner";
@@ -22,15 +24,17 @@ export interface UserInfoProps {
 }
 
 export default function UserInfo({ data }: { data: UserInfoProps }) {
+  const t = useTranslations("admin.dub.co/(dashboard)/components");
+
   return (
     <div className="grid gap-2">
       <LoginLinkCopyButton text={data.email} url={data.email} />
       <LoginLinkCopyButton
-        text="app.dub.co login link"
+        text={t("app-dub-co-login-link")}
         url={data.impersonateUrl.app}
       />
       <LoginLinkCopyButton
-        text="partners.dub.co login link"
+        text={t("partners-dub-co-login-link")}
         url={data.impersonateUrl.partners}
       />
       {Object.keys(data.defaultDomainLinks).length > 0 && (
@@ -57,27 +61,27 @@ export default function UserInfo({ data }: { data: UserInfoProps }) {
               <Badge className="lowercase">{workspace.slug}</Badge>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">ID</span>
+              <span className="font-medium text-gray-700">{t("id")}</span>
               <span className="text-gray-500">{workspace.id}</span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Plan</span>
+              <span className="font-medium text-gray-700">{t("plan")}</span>
               <span className="text-gray-500">
                 {capitalize(workspace.plan)}
               </span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Domains</span>
+              <span className="font-medium text-gray-700">{t("domains")}</span>
               <span className="text-gray-500">{workspace.domains}</span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Links</span>
+              <span className="font-medium text-gray-700">{t("links")}</span>
               <span className="text-gray-500">
                 {nFormatter(workspace.links, { full: true })}
               </span>
             </div>
             <div className="flex justify-between text-sm">
-              <span className="font-medium text-gray-700">Clicks</span>
+              <span className="font-medium text-gray-700">{t("clicks")}</span>
               <span className="text-gray-500">
                 {nFormatter(workspace.clicks, { full: true })}
               </span>

apps/web/app/api/og/analytics/route.tsx

@@ -6,12 +6,15 @@ import {
   linkConstructor,
   nFormatter,
 } from "@dub/utils";
+import { getTranslations } from "next-intl/server";
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 
 export const runtime = "edge";
 
 export async function GET(req: NextRequest) {
+  const t = await getTranslations("api/og/analytics");
+
   const interMedium = await fetch(
     new URL("@/styles/Inter-Medium.ttf", import.meta.url),
   ).then((res) => res.arrayBuffer());
@@ -45,7 +48,7 @@ export async function GET(req: NextRequest) {
             <img
               tw="rounded-full w-10 h-10"
               src={`${GOOGLE_FAVICON_URL}${getApexDomain(link.url || "dub.co")}`}
-              alt="favicon"
+              alt={t("favicon-icon")}
             />
             <h1 tw="text-4xl font-bold ml-4">
               {linkConstructor({ domain, key, pretty: true })}
@@ -81,7 +84,7 @@ export async function GET(req: NextRequest) {
               <rect width="18" height="18" x="3" y="4" rx="2" />
               <path d="M3 10h18" />
             </svg>
-            <p tw="text-gray-700 ml-2 mt-4">Last 24 hours</p>
+            <p tw="text-gray-700 ml-2 mt-4">{t("last-24-hours")}</p>
           </div>
         </div>
         <div tw="flex flex-col h-full w-full rounded-lg border border-gray-200 bg-white shadow-lg overflow-hidden">
@@ -105,7 +108,7 @@ export async function GET(req: NextRequest) {
               </svg>
             </div>
             <p tw="text-lg font-medium uppercase -mt-4 text-gray-600">
-              Total Clicks
+              {t("total-clicks")}
             </p>
           </div>
 

apps/web/app/app.dub.co/(auth)/auth/reset-password/[token]/page.tsx

@@ -2,6 +2,7 @@ import { ResetPasswordForm } from "@/ui/auth/reset-password-form";
 import EmptyState from "@/ui/shared/empty-state";
 import { prisma } from "@dub/prisma";
 import { InputPassword } from "@dub/ui";
+import { getTranslations } from "next-intl/server";
 
 export const runtime = "nodejs";
 
@@ -12,14 +13,18 @@ interface Props {
 }
 
 export default async function ResetPasswordPage({ params: { token } }: Props) {
+  const t = await getTranslations(
+    "app.dub.co/(auth)/auth/reset-password/[token]",
+  );
+
   const validToken = await isValidToken(token);
 
   if (!validToken) {
     return (
       <EmptyState
         icon={InputPassword}
-        title="Invalid Reset Token"
-        description="The password reset token is invalid or expired. Please request a new one."
+        title={t("invalid-reset-token")}
+        description={t("invalid-or-expired-reset-token-message")}
       />
     );
   }
@@ -28,10 +33,8 @@ export default async function ResetPasswordPage({ params: { token } }: Props) {
     <div className="relative z-10 my-10 flex min-h-full w-full items-center justify-center">
       <div className="mx-auto w-full max-w-md overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-xl">
         <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 bg-white px-4 py-6 pt-8 text-center sm:px-16">
-          <h3 className="text-xl font-semibold">Reset your password</h3>
-          <p className="text-sm text-gray-500">
-            Enter new password for your account.
-          </p>
+          <h3 className="text-xl font-semibold">{t("reset-password")}</h3>
+          <p className="text-sm text-gray-500">{t("enter-new-password")}</p>
         </div>
         <div className="flex flex-col gap-3 bg-gray-50 px-4 py-8 sm:px-16">
           <ResetPasswordForm />

apps/web/app/app.dub.co/(auth)/auth/saml/page.tsx

@@ -1,16 +1,19 @@
 import EmptyState from "@/ui/shared/empty-state";
 import { LoadingSpinner } from "@dub/ui";
 import { APP_NAME } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import { Suspense } from "react";
 import SAMLIDPForm from "./form";
 
 export default function SAMLPage() {
+  const t = useTranslations("app.dub.co/(auth)/auth/saml");
+
   return (
     <>
       <EmptyState
         icon={LoadingSpinner}
-        title="SAML Authentication"
-        description={`${APP_NAME} is verifying your identity via SAML. This might take a few seconds...`}
+        title={t("saml-authentication")}
+        description={t("app-name-saml-verification", { APP_NAME: APP_NAME })}
       />
       <Suspense>
         <SAMLIDPForm />

apps/web/app/app.dub.co/(auth)/login/page.tsx

@@ -1,6 +1,7 @@
 import LoginForm from "@/ui/auth/login/login-form";
 import { AuthLayout } from "@/ui/layout/auth-layout";
 import { APP_DOMAIN, constructMetadata } from "@dub/utils";
+import { useTranslations } from "next-intl";
 import Link from "next/link";
 
 export const metadata = constructMetadata({
@@ -9,24 +10,29 @@ export const metadata = constructMetadata({
 });
 
 export default function LoginPage() {
+  const t = useTranslations("app.dub.co/(auth)/login");
+
   return (
     <AuthLayout>
       <div className="w-full max-w-md overflow-hidden border-y border-gray-200 sm:rounded-2xl sm:border sm:shadow-sm">
         <div className="border-b border-gray-200 bg-white pb-6 pt-8 text-center">
-          <h3 className="text-lg font-semibold">Sign in to your Dub account</h3>
+          <h3 className="text-lg font-semibold">{t("sign-in-dub-account")}</h3>
         </div>
         <div className="bg-gray-50 px-4 py-8 sm:px-16">
           <LoginForm />
         </div>
       </div>
       <p className="mt-4 text-center text-sm text-gray-500">
-        Don't have an account?&nbsp;
-        <Link
-          href="register"
-          className="font-semibold text-gray-500 underline underline-offset-2 transition-colors hover:text-black"
-        >
-          Sign up
-        </Link>
+        {t("dont-have-account-sign-up-link", {
+          component0: (
+            <Link
+              href="register"
+              className="font-semibold text-gray-500 underline underline-offset-2 transition-colors hover:text-black"
+            >
+              {t("dont-have-account-sign-up-link_component0")}
+            </Link>
+          ),
+        })}
       </p>
     </AuthLayout>
   );

apps/web/app/app.dub.co/(auth)/oauth/authorize/authorize-form.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { consolidateScopes, getScopesForRole } from "@/lib/api/tokens/scopes";
 import useWorkspaces from "@/lib/swr/use-workspaces";
@@ -25,6 +26,8 @@ export const AuthorizeForm = ({
   code_challenge,
   code_challenge_method,
 }: AuthorizeFormProps) => {
+  const t = useTranslations("app.dub.co/(auth)/oauth/authorize");
+
   const { data: session } = useSession();
   const { workspaces } = useWorkspaces();
   const { AddWorkspaceModal, setShowAddWorkspaceModal } =
@@ -141,7 +144,7 @@ export const AuthorizeForm = ({
           />
         )}
         <p className="text-sm text-gray-500">
-          Select a workspace to grant API access to
+          {t("select-workspace-api-access")}
         </p>
         <div className="max-w-md py-2">
           <InputSelect
@@ -153,7 +156,7 @@ export const AuthorizeForm = ({
             noItemsElement={
               <Button
                 icon={<OfficeBuilding className="size-4" />}
-                text="Create new workspace"
+                text={t("create-new-workspace")}
                 variant="outline"
                 onClick={() => setShowAddWorkspaceModal(true)}
                 className="justify-start text-gray-700"
@@ -163,14 +166,14 @@ export const AuthorizeForm = ({
         </div>
         <div className="mt-4 flex justify-between gap-4">
           <Button
-            text="Decline"
+            text={t("decline-action")}
             type="button"
             onClick={onDecline}
             variant="secondary"
             disabled={submitting}
           />
           <Button
-            text="Authorize"
+            text={t("authorize-action")}
             type="submit"
             loading={submitting}
             disabled={!selectedWorkspace}

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/partners/partner-stats.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import usePartnersCount from "@/lib/swr/use-partners-count";
 import { PartnerStatusBadges } from "@/ui/partners/partner-status-badges";
@@ -13,6 +14,10 @@ interface PartnerCount {
 }
 
 export function PartnerStats() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/programs/[programId]/partners",
+  );
+
   const { slug, programId } = useParams();
   const { queryParams } = useRouterStuff();
 
@@ -34,15 +39,15 @@ export function PartnerStats() {
   return (
     <div className="xs:grid-cols-4 xs:divide-x xs:divide-y-0 grid divide-y divide-neutral-200 overflow-hidden rounded-lg border border-neutral-200">
       <ProgramStatsFilter
-        label="All"
+        label={t("all-items")}
         href={`/${slug}/programs/${programId}/partners`}
         count={all}
         icon={Users}
         iconClassName="text-gray-600 bg-gray-100"
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Top partners"
+        label={t("top-partners")}
         href={
           queryParams({
             set: {
@@ -58,7 +63,7 @@ export function PartnerStats() {
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Approved"
+        label={t("approved-status")}
         href={
           queryParams({
             set: { status: "approved" },
@@ -71,7 +76,7 @@ export function PartnerStats() {
         error={!!error}
       />
       <ProgramStatsFilter
-        label="Pending"
+        label={t("pending-status")}
         href={
           queryParams({
             set: { status: "pending" },