[DRAFT] refactor: Run i18n-pro-codemod Campaign shard

apps/web/app/(ee)/app.dub.co/(new-program)/[slug]/programs/new/form.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { onboardProgramAction } from "@/lib/actions/partners/onboard-program";
 import { getLinkStructureOptions } from "@/lib/partners/get-link-structure-options";
@@ -27,6 +29,8 @@ import { toast } from "sonner";
 import useSWRImmutable from "swr/immutable";
 
 export function Form() {
+const t = useTranslations("program-creation-form");
+
   const router = useRouter();
   const { isMobile } = useMediaQuery();
   const [isUploading, setIsUploading] = useState(false);
@@ -127,27 +131,19 @@ export function Form() {
   return (
     <form onSubmit={handleSubmit(onSubmit)} className="space-y-10">
       <div>
-        <label className="block text-sm font-medium text-neutral-800">
-          Company name
-        </label>
-        <p className="mb-4 mt-1 text-sm text-neutral-600">
-          The name of the company you're setting up the program for
-        </p>
+        <label className="block text-sm font-medium text-neutral-800">{t('labels.company-name')}</label>
+        <p className="mb-4 mt-1 text-sm text-neutral-600">{t('descriptions.company-name')}</p>
         <Input
           {...register("name", { required: true })}
-          placeholder="Acme"
+          placeholder={t('placeholders.company-name')}
           autoFocus={!isMobile}
           className="mt-2 max-w-full"
         />
       </div>
 
       <div>
-        <label className="block text-sm font-medium text-neutral-800">
-          Logo
-        </label>
-        <p className="mb-4 mt-1 text-sm text-neutral-600">
-          A square logo that will be used in various parts of your program
-        </p>
+        <label className="block text-sm font-medium text-neutral-800">{t('labels.logo')}</label>
+        <p className="mb-4 mt-1 text-sm text-neutral-600">{t('descriptions.logo')}</p>
         <div className="flex w-full items-center justify-center gap-2 rounded-lg border border-neutral-200 p-1">
           <Controller
             control={control}
@@ -174,24 +170,18 @@ export function Form() {
 
       <div className="space-y-6">
         <div className="space-y-1">
-          <h2 className="text-base font-medium text-neutral-900">
-            Referral link
-          </h2>
-          <p className="text-sm font-normal text-neutral-600">
-            Set the custom domain and destination URL for your referral links
-          </p>
+          <h2 className="text-base font-medium text-neutral-900">{t('headings.referral-link')}</h2>
+          <p className="text-sm font-normal text-neutral-600">{t('descriptions.referral-link-setup')}</p>
         </div>
 
         <div className="space-y-2">
           <div className="flex items-center gap-x-2">
-            <label className="block text-sm font-medium text-neutral-800">
-              Custom domain
-            </label>
+            <label className="block text-sm font-medium text-neutral-800">{t('labels.custom-domain')}</label>
 
             <InfoTooltip
               content={
                 <SimpleTooltipContent
-                  title="A connected domain or sub-domain is required to create a program."
+                  title={t('tooltips.domain-requirement')}
                   cta="Learn more"
                   href="https://dub.co/help/article/choosing-a-custom-domain"
                 />
@@ -204,9 +194,7 @@ export function Form() {
             setSelectedDomain={(domain) => setValue("domain", domain)}
           />
 
-          <p className="text-xs font-normal text-neutral-500">
-            Custom domain that will be used for your program's referral links
-          </p>
+          <p className="text-xs font-normal text-neutral-500">{t('descriptions.custom-domain')}</p>
         </div>
 
         <AnimatePresence>
@@ -227,19 +215,14 @@ export function Form() {
         </AnimatePresence>
 
         <div className="space-y-2">
-          <label className="block text-sm font-medium text-neutral-800">
-            Destination URL
-          </label>
+          <label className="block text-sm font-medium text-neutral-800">{t('labels.destination-url')}</label>
           <Input
             {...register("url", { required: true })}
             type="url"
-            placeholder="https://dub.co"
+            placeholder={t('placeholders.destination-url')}
             className="max-w-full"
           />
-          <p className="text-xs font-normal text-neutral-500">
-            Where people will be redirected to when they click on your program's
-            referral links
-          </p>
+          <p className="text-xs font-normal text-neutral-500">{t('descriptions.destination-url')}</p>
         </div>
       </div>
 
@@ -253,9 +236,7 @@ export function Form() {
             transition={{ duration: 0.2 }}
             className="space-y-2"
           >
-            <h2 className="text-base font-medium text-neutral-900">
-              Referral link preview
-            </h2>
+            <h2 className="text-base font-medium text-neutral-900">{t('headings.referral-link-preview')}</h2>
 
             <div className="rounded-2xl bg-neutral-50 p-2">
               <div className="flex items-center gap-3 rounded-xl border border-neutral-200 bg-white p-4">
@@ -301,7 +282,7 @@ export function Form() {
       </AnimatePresence>
 
       <Button
-        text="Continue"
+        text={t('buttons.continue')}
         className="w-full"
         loading={isSubmitting || isPending || hasSubmitted}
         disabled={buttonDisabled}

apps/web/app/(ee)/partners.dub.co/(apply)/[programSlug]/apply/form.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { createProgramApplicationAction } from "@/lib/actions/partners/create-program-application";
 import { Program } from "@dub/prisma/client";
@@ -30,6 +32,8 @@ export function ProgramApplicationForm({
     "id" | "slug" | "name" | "termsUrl" | "ageVerification"
   >;
 }) {
+const t = useTranslations("partner-application-form");
+
   const { isMobile } = useMediaQuery();
   const router = useRouter();
   const { data: session } = useSession();
@@ -96,7 +100,7 @@ export function ProgramApplicationForm({
       className="flex flex-col gap-6"
     >
       <label>
-        <span className="text-sm font-medium text-neutral-800">Name</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.name')}</span>
         <input
           type="text"
           className={cn(
@@ -105,7 +109,7 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="Acme, Inc."
+          placeholder={t('placeholders.company-name')}
           autoFocus={!isMobile}
           {...register("name", {
             required: true,
@@ -114,7 +118,7 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">Email</span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.email')}</span>
         <input
           type="email"
           className={cn(
@@ -123,17 +127,15 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="panic@thedis.co"
+          placeholder={t('placeholders.email-address')}
           {...register("email", {
             required: true,
           })}
         />
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Website / Social media channel
-        </span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.website-social-channel')}</span>
         <input
           type="text"
           className={cn(
@@ -142,17 +144,15 @@ export function ProgramApplicationForm({
               ? "border-red-400 pr-10 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500"
               : "border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-[var(--brand)] focus:ring-[var(--brand)]",
           )}
-          placeholder="https://example.com"
+          placeholder={t('placeholders.website-url')}
           {...register("website", {
             required: true,
           })}
         />
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          How do you plan to promote {program.name}?
-        </span>
+        <span className="text-sm font-medium text-neutral-800">{t('labels.promotion-plan', { "programName": program.name })}</span>
         <ReactTextareaAutosize
           className={cn(
             "mt-2 block max-h-48 min-h-12 w-full rounded-md focus:outline-none sm:text-sm",
@@ -167,9 +167,9 @@ export function ProgramApplicationForm({
       </label>
 
       <label>
-        <span className="text-sm font-medium text-neutral-800">
-          Any additional questions or comments?
-          <span className="font-normal text-neutral-500"> (optional)</span>
+        <span className="text-sm font-medium text-neutral-800">{t.rich('labels.additional-comments', {
+      component0: (chunks) => <span className="font-normal text-neutral-500">{chunks}</span>
+    })}
         </span>
         <ReactTextareaAutosize
           className={cn(
@@ -197,9 +197,7 @@ export function ProgramApplicationForm({
               required: true,
             })}
           />
-          <label htmlFor="ageVerification" className="text-sm text-neutral-800">
-            I'm {program.ageVerification} years or older
-          </label>
+          <label htmlFor="ageVerification" className="text-sm text-neutral-800">{t('checkboxes.age-verification', { "programAgeVerification": program.ageVerification })}</label>
         </div>
       )}
 
@@ -214,22 +212,23 @@ export function ProgramApplicationForm({
             )}
             {...register("termsAgreement", { required: true })}
           />
-          <label htmlFor="termsAgreement" className="text-sm text-neutral-800">
-            I agree to the{" "}
-            <a
+          <label htmlFor="termsAgreement" className="text-sm text-neutral-800">{t.rich('checkboxes.terms-agreement', {
+      programName,
+      component0: (chunks) => <a
               href={program.termsUrl}
               target="_blank"
               rel="noopener noreferrer"
               className="text-[var(--brand)] underline hover:opacity-80"
             >
-              {program.name} Partner Program Terms ↗
-            </a>
+              </a>
+    })}
+
           </label>
         </div>
       )}
 
       <Button
-        text="Submit application"
+        text={t('buttons.submit-application')}
         className="mt-4 enabled:border-[var(--brand)] enabled:bg-[var(--brand)] enabled:hover:bg-[var(--brand)] enabled:hover:ring-[var(--brand-ring)]"
         loading={isLoading}
       />

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/earnings/earnings-composite-chart.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { DUB_PARTNERS_ANALYTICS_INTERVAL } from "@/lib/analytics/constants";
 import { formatDateTooltip } from "@/lib/analytics/format-date-tooltip";
@@ -43,6 +45,8 @@ const EVENT_TYPE_LINE_COLORS = {
 const MAX_LINES = LINE_COLORS.length;
 
 export function EarningsCompositeChart() {
+const t = useTranslations("earnings-composite-chart");
+
   const { queryParams, searchParamsObj } = useRouterStuff();
 
   const {
@@ -108,7 +112,7 @@ export function EarningsCompositeChart() {
       <div className="rounded-lg border border-neutral-200 p-6">
         <div className="flex w-full items-center justify-between">
           <div className="flex flex-col gap-1">
-            <span className="text-sm text-neutral-500">Total Earnings</span>
+            <span className="text-sm text-neutral-500">{t('labels.total-earnings')}</span>
             <div className="mt-1">
               {total !== undefined ? (
                 <NumberFlow
@@ -136,7 +140,7 @@ export function EarningsCompositeChart() {
                 label: (
                   <div className="flex items-center gap-1.5 text-neutral-600">
                     <Hyperlink className="size-4" />
-                    <span className="text-sm">Link</span>
+                    <span className="text-sm">{t('toggle-options.link')}</span>
                   </div>
                 ),
                 value: "linkId",
@@ -145,7 +149,7 @@ export function EarningsCompositeChart() {
                 label: (
                   <div className="flex items-center gap-1.5 text-neutral-600">
                     <Sliders className="size-4" />
-                    <span className="text-sm">Type</span>
+                    <span className="text-sm">{t('toggle-options.type')}</span>
                   </div>
                 ),
                 value: "type",