feat: Apply i18n codemods

apps/web/app/admin.dub.co/(dashboard)/revenue/client.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import { Areas, TimeSeriesChart, XAxis, YAxis } from "@dub/ui/charts";
 import { currencyFormatter } from "@dub/utils";
@@ -9,6 +10,8 @@ export default function RevenueClient({
 }: {
   data: { date: string; value: number }[];
 }) {
+  const t = useTranslations("admin.dub.co/(dashboard)/revenue");
+
   // take the last 12 months
   const chartData = data.slice(-12).map(({ date, value }) => ({
     date: new Date(date),
@@ -45,7 +48,7 @@ export default function RevenueClient({
       <div className="w-fit border-b-2 border-black px-8 py-6">
         <div className="flex items-center gap-2.5 text-sm text-gray-600">
           <div className="h-2 w-2 rounded-sm bg-green-200 shadow-[inset_0_0_0_1px_#00000019]" />
-          <span>MRR</span>
+          <span>{t("mrr-message-1")}</span>
         </div>
         <div className="mt-1 flex items-center gap-3">
           <h3 className="text-3xl font-medium">
@@ -72,7 +75,9 @@ export default function RevenueClient({
                   <Fragment>
                     <div className="flex items-center gap-2">
                       <div className="h-2 w-2 rounded-sm bg-current bg-green-200 opacity-50 shadow-[inset_0_0_0_1px_#0003]" />
-                      <p className="capitalize text-gray-600">MRR</p>
+                      <p className="capitalize text-gray-600">
+                        {t("mrr-message-2")}
+                      </p>
                     </div>
                     <p className="text-right font-medium text-gray-900">
                       {currencyFormatter(d.values.value)}

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-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-your-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)/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")}
             type="button"
             onClick={onDecline}
             variant="secondary"
             disabled={submitting}
           />
           <Button
-            text="Authorize"
+            text={t("authorize")}
             type="submit"
             loading={submitting}
             disabled={!selectedWorkspace}

apps/web/app/app.dub.co/(dashboard)/[slug]/programs/[programId]/overview-chart.tsx

@@ -15,9 +15,14 @@ import { LoadingSpinner } from "@dub/ui/icons";
 import { currencyFormatter } from "@dub/utils";
 import NumberFlow from "@number-flow/react";
 import { LinearGradient } from "@visx/gradient";
+import { useTranslations } from "next-intl";
 import { useId, useMemo } from "react";
 
 export function OverviewChart() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/programs/[programId]",
+  );
+
   const id = useId();
   const { searchParamsObj } = useRouterStuff();
 
@@ -56,7 +61,7 @@ export function OverviewChart() {
     <div>
       <div className="flex justify-between">
         <div className="flex flex-col gap-1 p-2">
-          <span className="text-sm text-neutral-500">Revenue</span>
+          <span className="text-sm text-neutral-500">{t("revenue")}</span>
           {!metrics ? (
             <div className="h-11 w-24 animate-pulse rounded-md bg-neutral-200" />
           ) : (
@@ -79,7 +84,7 @@ export function OverviewChart() {
           </div>
         ) : error ? (
           <div className="flex size-full items-center justify-center text-sm text-neutral-500">
-            Failed to load data
+            {t("failed-to-load-data")}
           </div>
         ) : (
           <TimeSeriesChart
@@ -103,7 +108,9 @@ export function OverviewChart() {
                   <div className="grid grid-cols-2 gap-x-6 gap-y-2 px-4 py-3 text-sm">
                     <div className="flex items-center gap-2">
                       <div className="h-2 w-2 rounded-sm bg-violet-500 shadow-[inset_0_0_0_1px_#0003]" />
-                      <p className="capitalize text-gray-600">Revenue</p>
+                      <p className="capitalize text-gray-600">
+                        {t("revenue-duplicate")}
+                      </p>
                     </div>
                     <p className="text-right font-medium text-gray-900">
                       {currencyFormatter(d.values.saleAmount, {

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/invoices/page-client.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import useWorkspace from "@/lib/swr/use-workspace";
 import { InvoiceProps } from "@/lib/types";
@@ -20,6 +21,10 @@ import { useParams } from "next/navigation";
 import useSWR from "swr";
 
 export default function WorkspaceInvoicesClient() {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/billing/invoices",
+  );
+
   const { slug } = useParams();
   const { payoutMethodId } = useWorkspace();
   const { searchParams, queryParams } = useRouterStuff();
@@ -42,9 +47,9 @@ export default function WorkspaceInvoicesClient() {
             <ChevronLeft className="size-5" />
           </Link>
           <div>
-            <h2 className="text-xl font-medium">Invoices</h2>
+            <h2 className="text-xl font-medium">{t("invoices")}</h2>
             <p className="text-balance text-sm leading-normal text-neutral-500">
-              A history of all your Dub invoices
+              {t("invoices-history")}
             </p>
           </div>
         </div>
@@ -74,8 +79,8 @@ export default function WorkspaceInvoicesClient() {
             ))
           ) : (
             <AnimatedEmptyState
-              title="No invoices found"
-              description="You don't have any invoices yet"
+              title={t("no-invoices-found")}
+              description={t("no-invoices-yet")}
               cardContent={() => (
                 <>
                   <Receipt2 className="size-4 text-neutral-700" />
@@ -98,6 +103,10 @@ export default function WorkspaceInvoicesClient() {
 }
 
 const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
+  const t = useTranslations(
+    "app.dub.co/(dashboard)/[slug]/settings/billing/invoices",
+  );
+
   return (
     <div className="grid grid-cols-3 gap-4 px-6 py-4 sm:px-12">
       <div className="text-sm">
@@ -112,7 +121,7 @@ const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
       </div>
 
       <div className="text-left text-sm">
-        <div className="font-medium">Total</div>
+        <div className="font-medium">{t("total")}</div>
         <div className="flex items-center gap-1.5 text-neutral-500">
           <span className="text-sm">
             {currencyFormatter(invoice.total / 100, {
@@ -145,14 +154,14 @@ const InvoiceCard = ({ invoice }: { invoice: InvoiceProps }) => {
               "flex size-8 items-center justify-center rounded-md border text-sm sm:size-auto sm:h-9 sm:px-3",
             )}
           >
-            <p className="hidden sm:block">View invoice</p>
+            <p className="hidden sm:block">{t("view-invoice")}</p>
             <InvoiceDollar className="size-4 sm:hidden" />
           </a>
         ) : (
           <Button
             className="w-fit"
             variant="secondary"
-            text="View invoice"
+            text={t("view-invoice-text")}
             disabled
             disabledTooltip="Invoice not available. Contact support if you need assistance."
           />

apps/web/app/app.dub.co/(dashboard)/[slug]/settings/billing/payment-methods.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { useTranslations } from "next-intl";
 
 import usePaymentMethods from "@/lib/swr/use-payment-methods";
 import useWorkspace from "@/lib/swr/use-workspace";
@@ -11,6 +12,8 @@ import { Stripe } from "stripe";
 import { PaymentMethodTypesList } from "./payment-method-types";
 
 export default function PaymentMethods() {
+  const t = useTranslations("app.dub.co/(dashboard)/[slug]/settings/billing");
+
   const { stripeId, partnersEnabled } = useWorkspace();
   const { paymentMethods } = usePaymentMethods();
 
@@ -26,13 +29,16 @@ export default function PaymentMethods() {
     <div className="rounded-lg border border-neutral-200 bg-white">
       <div className="flex flex-col items-center justify-between gap-y-4 p-6 md:p-8 xl:flex-row">
         <div>
-          <h2 className="text-xl font-medium">Payment methods</h2>
+          <h2 className="text-xl font-medium">{t("payment-methods-title")}</h2>
           <p className="text-balance text-sm leading-normal text-neutral-500">
-            Manage your payment methods on Dub
+            {t("manage-payment-methods-description")}
           </p>
         </div>
         {stripeId && (
-          <ManageSubscriptionButton text="Manage" className="w-fit" />
+          <ManageSubscriptionButton
+            text={t("manage-action")}
+            className="w-fit"
+          />
         )}
       </div>
       <div className="grid gap-4 border-t border-neutral-200 p-6">
@@ -47,8 +53,8 @@ export default function PaymentMethods() {
             ))
           ) : (
             <AnimatedEmptyState
-              title="No payment methods found"
-              description="You haven't added any payment methods yet"
+              title={t("no-payment-methods-found")}
+              description={t("no-payment-methods-added-yet")}
               cardContent={() => (
                 <>
                   <CreditCard className="size-4 text-neutral-700" />
@@ -91,6 +97,8 @@ const PaymentMethodCard = ({
   type: Stripe.PaymentMethod.Type;
   paymentMethod?: Stripe.PaymentMethod;
 }) => {
+  const t = useTranslations("app.dub.co/(dashboard)/[slug]/settings/billing");
+
   const { slug } = useWorkspace();
   const [isLoading, setIsLoading] = useState(false);
 
@@ -133,7 +141,7 @@ const PaymentMethodCard = ({
             <p className="font-medium text-neutral-900">{title}</p>
             {type === "us_bank_account" && (
               <Badge variant="neutral">
-                Recommended for Dub Partners payouts
+                {t("recommended-for-partners-payouts")}
               </Badge>
             )}
           </div>
@@ -144,7 +152,7 @@ const PaymentMethodCard = ({
         <Button
           variant="primary"
           className="h-8 w-fit"
-          text="Connect"
+          text={t("connect-action")}
           onClick={() => managePaymentMethods(type)}
           loading={isLoading}
         />