feat: Apply i18n codemods

apps/web/app/locales/en.json

@@ -0,0 +1,4 @@
+{
+  "404-page-not-found": "404 - Page Not Found",
+  "sorry-the-page-you-are-looking-for-does-not-exist": "Sorry, the page you are looking for does not exist."
+}

apps/web/app/not-found.tsx

@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 
 const NotFound = () => {
+const { t } = useTranslation();
+
   return (
     <div data-testid="404-page">
-      <h1>404 - Page Not Found</h1>
-      <p>Sorry, the page you are looking for does not exist.</p>
+      <h1>{t('404-page-not-found')}</h1>
+      <p>{t('sorry-the-page-you-are-looking-for-does-not-exist')}</p>
     </div>
   );
 };

apps/web/app/settings/(admin-layout)/admin/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "admin-index": "Admin index"
+}

apps/web/app/settings/(admin-layout)/admin/page.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { _generateMetadata } from "app/_utils";
 
 export const generateMetadata = async () =>
@@ -6,5 +7,9 @@ export const generateMetadata = async () =>
     () => ""
   );
 
-const Page = () => <h1>Admin index</h1>;
+const Page = () =>  {
+const { t } = useTranslation();
+
+return <h1>{t('admin-index')}</h1>
+};
 export default Page;

apps/web/app/settings/(admin-layout)/admin/users/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "add-user": "Add user"
+}

apps/web/app/settings/(admin-layout)/admin/users/page.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { _generateMetadata, getTranslate } from "app/_utils";
 
 import UsersListingView from "@calcom/features/ee/users/pages/users-listing-view";
@@ -11,6 +12,8 @@ export const generateMetadata = async () =>
   );
 
 const Page = async () => {
+const { t } = useTranslation();
+
   const t = await getTranslate();
   return (
     <SettingsHeader
@@ -20,7 +23,7 @@ const Page = async () => {
         <div className="mt-4 space-x-5 sm:ml-16 sm:mt-0 sm:flex-none">
           {/* TODO: Add import users functionality */}
           {/* <Button disabled>Import users</Button> */}
-          <Button href="/settings/admin/users/add">Add user</Button>
+          <Button href="/settings/admin/users/add">{t('add-user')}</Button>
         </div>
       }>
       <UsersListingView />

apps/web/components/EnterprisePage.tsx

@@ -1,11 +1,15 @@
 "use client";
+import { useTranslation } from "react-i18next";
+
 
 import { ShellMain } from "@calcom/features/shell/Shell";
 import { UpgradeTip } from "@calcom/features/tips";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button, ButtonGroup, Icon } from "@calcom/ui";
 
 export default function EnterprisePage() {
+const { t } = useTranslation();
+
   const { t } = useLocale();
 
   const features = [
@@ -61,7 +65,7 @@ export default function EnterprisePage() {
               </ButtonGroup>
             </div>
           }>
-          <>Create Org</>
+          <>{t('create-org')}</>
         </UpgradeTip>
       </ShellMain>
     </div>

apps/web/components/apps/AppPage.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import type { IframeHTMLAttributes } from "react";
@@ -74,6 +75,8 @@ export const AppPage = ({
   concurrentMeetings,
   paid,
 }: AppPageProps) => {
+const { t } = useTranslation();
+
   const { t, i18n } = useLocale();
   const router = useRouter();
   const searchParams = useCompatSearchParams();
@@ -234,9 +237,7 @@ export const AppPage = ({
               </a>
             </h2>
             {isTemplate && (
-              <Badge variant="red" className="mt-4">
-                Template - Available in Dev Environment only for testing
-              </Badge>
+              <Badge variant="red" className="mt-4">{t('template-available-in-dev-environment-only-for-testing')}</Badge>
             )}
           </header>
         </div>

apps/web/components/apps/installation/ConfigureStepCard.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Dispatch, SetStateAction } from "react";
 import type { FC } from "react";
@@ -60,6 +61,8 @@ type TUpdatedEventTypesStatus = { id: number; updated: boolean }[][];
 
 const EventTypeAppSettingsForm = forwardRef<HTMLButtonElement, EventTypeAppSettingsFormProps>(
   function EventTypeAppSettingsForm(props, ref) {
+const { t } = useTranslation();
+
     const { handleDelete, onSubmit, eventType, loading, isConferencing } = props;
     const { t } = useLocale();
 
@@ -107,9 +110,7 @@ const EventTypeAppSettingsForm = forwardRef<HTMLButtonElement, EventTypeAppSetti
               className="absolute right-4 top-4 h-4 w-4 cursor-pointer"
               onClick={() => !loading && handleDelete()}
             />
-            <button type="submit" className="hidden" form={`eventtype-${eventType.id}`} ref={ref}>
-              Save
-            </button>
+            <button type="submit" className="hidden" form={`eventtype-${eventType.id}`} ref={ref}>{t('save-fragment-1')}</button>
           </div>
         </div>
       </Form>
@@ -186,6 +187,8 @@ const EventTypeGroup = ({
 };
 
 export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
+const { t } = useTranslation();
+
   const { loading, formPortalRef, handleSetUpLater } = props;
   const { t } = useLocale();
   const { control, watch } = useFormContext<TEventTypesForm>();
@@ -222,12 +225,15 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
     formPortalRef?.current &&
     createPortal(
       <div className="mt-8">
-        {fields.map((group, groupIndex) => (
+        {fields.map((group, groupIndex) =>  {
+const { t } = useTranslation();
+
+return (
           <div key={group.fieldId}>
             {eventTypeGroups[groupIndex].eventTypes.some((eventType) => eventType.selected === true) && (
               <div className="mb-2 mt-4 flex items-center">
                 <Avatar
-                  alt=""
+                  alt={t('empty-fragment')}
                   imageSrc={group.image} // if no image, use default avatar
                   size="md"
                   className="inline-flex justify-center"
@@ -242,10 +248,9 @@ export const ConfigureStepCard: FC<ConfigureStepCardProps> = (props) => {
               {...props}
             />
           </div>
-        ))}
-        <button form="outer-event-type-form" type="submit" className="hidden" ref={mainForSubmitRef}>
-          Save
-        </button>
+        )
+})}
+        <button form="outer-event-type-form" type="submit" className="hidden" ref={mainForSubmitRef}>{t('save-fragment-2')}</button>
         <Button
           className="text-md mt-6 w-full justify-center"
           type="button"

apps/web/components/apps/installation/EventTypesStepCard.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { Dispatch, SetStateAction } from "react";
 import type { FC } from "react";
 import React from "react";
@@ -64,18 +65,22 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
           )}
           <div className="mt-2 flex flex-row flex-wrap gap-2">
             {Boolean(durations.length) &&
-              durations.map((duration) => (
-                <Badge key={`event-type-${id}-duration-${duration}`} variant="gray" startIcon="clock">
-                  {duration}m
-                </Badge>
-              ))}
+              durations.map((duration) =>  {
+const { t } = useTranslation();
+
+return (
+                <Badge key={`event-type-${id}-duration-${duration}`} variant="gray" startIcon="clock">{t('duration-m', { duration })}</Badge>
+              )
+})}
           </div>
         </li>
       </label>
     </div>
   );
 };
 const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...props }) => {
+const { t } = useTranslation();
+
   const { control } = useFormContext<TEventTypesForm>();
   const { fields, update } = useFieldArray({
     control,
@@ -87,7 +92,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
     <div className="mt-10">
       <div className="mb-2 flex items-center">
         <Avatar
-          alt=""
+          alt={t('empty-string')}
           imageSrc={props.image} // if no image, use default avatar
           size="md"
           className="mt-1 inline-flex justify-center"
@@ -110,7 +115,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
                 />
               ))
             ) : (
-              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">Team has no Events</div>
+              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">{t('team-has-no-events')}</div>
             )}
           </ul>
         </ScrollableArea>

apps/web/components/apps/installation/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "duration-m": "{{duration}}m",
+  "empty-string": "\"\"",
+  "team-has-no-events": "Team has no Events",
+  "save-fragment-1": "Save",
+  "empty-fragment": "\"\"",
+  "save-fragment-2": "Save"
+}

apps/web/components/apps/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "template-available-in-dev-environment-only-for-testing": "Template - Available in Dev Environment only for testing"
+}

apps/web/components/auth/BackupCode.tsx

@@ -1,10 +1,13 @@
+import { useTranslation } from "react-i18next";
 import React from "react";
 import { useFormContext } from "react-hook-form";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Label, TextField } from "@calcom/ui";
 
 export default function TwoFactor({ center = true }) {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const methods = useFormContext();
 
@@ -16,9 +19,9 @@ export default function TwoFactor({ center = true }) {
 
       <TextField
         id="backup-code"
-        label=""
+        label={t('empty-string-fragment')}
         defaultValue=""
-        placeholder="XXXXX-XXXXX"
+        placeholder={t('xxxxx-xxxxx-fragment')}
         minLength={10} // without dash
         maxLength={11} // with dash
         required

apps/web/components/auth/locales/en.json

@@ -0,0 +1,4 @@
+{
+  "empty-string-fragment": "\"\"",
+  "xxxxx-xxxxx-fragment": "\"XXXXX-XXXXX\""
+}

apps/web/components/booking/BookingListItem.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { AssignmentReason } from "@prisma/client";
 import Link from "next/link";
 import { useState } from "react";
@@ -104,6 +105,8 @@ const isBookingReroutable = (booking: ParsedBooking): booking is ReroutableBooki
 };
 
 function BookingListItem(booking: BookingItemProps) {
+const { t } = useTranslation();
+
   const parsedBooking = buildParsedBooking(booking);
 
   const { userTimeZone, userTimeFormat, userEmail } = booking.loggedInUser;
@@ -490,7 +493,7 @@ function BookingListItem(booking: BookingItemProps) {
               label={
                 <>
                   {t("rejection_reason")}
-                  <span className="text-subtle font-normal"> (Optional)</span>
+                  <span className="text-subtle font-normal">{t('optional')}</span>
                 </>
               }
               value={rejectionReason}

apps/web/components/booking/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "optional": "(Optional)"
+}

apps/web/components/dialog/RerouteDialog.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useMutation } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -274,6 +275,8 @@ const NewRoutingManager = ({
   };
   reroutingState: ReturnType<typeof useReroutingState>;
 }) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const router = useRouter();
   const bookerUrl = useBookerUrl();
@@ -645,13 +648,11 @@ const NewRoutingManager = ({
     return (
       <div>
         <span className="text-attention">
-          <span>Continue with rerouting in the new</span>{" "}
+          <span>{t('continue-with-rerouting-in-the-new')}</span>{" "}
           <a
             href="javascript:void(0)"
             className="text-attention underline"
-            onClick={() => reroutingState.value?.reschedulerWindow?.focus()}>
-            tab
-          </a>
+            onClick={() => reroutingState.value?.reschedulerWindow?.focus()}>{t('tab')}</a>
         </span>
       </div>
     );

apps/web/components/dialog/RescheduleDialog.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import type { Dispatch, SetStateAction } from "react";
 import { useState } from "react";
 
@@ -22,6 +23,8 @@ interface IRescheduleDialog {
 }
 
 export const RescheduleDialog = (props: IRescheduleDialog) => {
+const { t } = useTranslation();
+
   const { t } = useLocale();
   const utils = trpc.useUtils();
   const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
@@ -51,7 +54,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
             <p className="text-subtle text-sm">{t("reschedule_modal_description")}</p>
             <p className="text-emphasis mb-2 mt-6 text-sm font-bold">
               {t("reason_for_reschedule_request")}
-              <span className="text-subtle font-normal"> (Optional)</span>
+              <span className="text-subtle font-normal">{t('optional')}</span>
             </p>
             <TextArea
               data-testid="reschedule_reason"

apps/web/components/dialog/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "optional": "(Optional)",
+  "continue-with-rerouting-in-the-new": "Continue with rerouting in the new",
+  "tab": "tab"
+}

apps/web/components/getting-started/steps-views/UserProfile.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
 import type { FormEvent } from "react";
 import { useRef, useState } from "react";
@@ -16,6 +17,8 @@ type FormData = {
 };
 
 const UserProfile = () => {
+const { t } = useTranslation();
+
   const [user] = trpc.viewer.me.useSuspenseQuery();
   const { t } = useLocale();
   const avatarRef = useRef<HTMLInputElement>(null);
@@ -106,7 +109,7 @@ const UserProfile = () => {
           type="hidden"
           name="avatar"
           id="avatar"
-          placeholder="URL"
+          placeholder={t('url')}
           className="border-default focus:ring-empthasis mt-1 block w-full rounded-sm border px-3 py-2 text-sm focus:border-gray-800 focus:outline-none"
           defaultValue={imageSrc}
         />

apps/web/components/getting-started/steps-views/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "url": "\"URL\""
+}

apps/web/components/locales/en.json

@@ -0,0 +1,3 @@
+{
+  "create-org": "Create Org"
+}