fixes up remaining translation strings

packages/next/src/pages/Account/Default/index.tsx

@@ -56,7 +56,7 @@ export const DefaultAccount: React.FC<DefaultAccountViewProps> = (props) => {
 
   return (
     <React.Fragment>
-      {/* <Meta description={t('accountOfCurrentUser')} keywords={t('account')} title={t('account')} /> */}
+      {/* <Meta description={i18n.t('authentication:accountOfCurrentUser')} keywords={t('authentication:account')} title={t('authentication:account')} /> */}
       {/* <LoadingOverlayToggle name="account" show={isLoading} type="withoutNav" /> */}
       <OperationProvider operation="update">
         <Form

packages/next/src/pages/CreateFirstUser/index.tsx

@@ -29,8 +29,8 @@ export const generateMetadata = async ({
   })
 
   return meta({
-    title: t('createFirstUser'),
+    title: t('authentication:createFirstUser'),
-    description: t('createFirstUser'),
+    description: t('authentication:createFirstUser'),
     keywords: t('general:create'),
     config,
   })
@@ -69,22 +69,19 @@ export const CreateFirstUser: React.FC<{
   const fields = [
     {
       name: 'email',
-      label: 'Email Address',
+      label: t('general:emailAddress'),
-      // label: t('general:emailAddress'),
       required: true,
       type: 'email',
     },
     {
       name: 'password',
-      label: 'Password',
+      label: t('general:password'),
-      // label: t('general:password'),
       required: true,
       type: 'password',
     },
     {
       name: 'confirm-password',
-      label: 'Confirm Password',
+      label: t('authentication:confirmPassword'),
-      // label: t('confirmPassword'),
       required: true,
       type: 'confirmPassword',
     },
@@ -103,7 +100,7 @@ export const CreateFirstUser: React.FC<{
   return (
     <MinimalTemplate className={baseClass}>
       <h1>{t('general:welcome')}</h1>
-      <p>{t('beginCreateFirstUser')}</p>
+      <p>{t('authentication:beginCreateFirstUser')}</p>
       <Form
         action={`${serverURL}${api}/${userSlug}/first-register`}
         method="POST"

packages/next/src/pages/Document/index.tsx

@@ -15,7 +15,7 @@ import {
 import type { EditViewProps } from '@payloadcms/ui'
 import queryString from 'qs'
 import { notFound } from 'next/navigation'
-import { TFunction } from 'i18next'
+import { TFunction } from '@payloadcms/translations'
 import { AdminViewComponent } from 'payload/config'
 import { getViewsFromConfig } from './getViewsFromConfig'
 import type { DocumentPermissions } from 'payload/types'

packages/next/src/pages/ForgotPassword/index.tsx

@@ -5,8 +5,8 @@ import { SanitizedConfig } from 'payload/types'
 import Link from 'next/link'
 import { initPage } from '../../utilities/initPage'
 import { meta } from '../../utilities/meta'
-import i18n from 'i18next'
 import { Metadata } from 'next'
+import { getNextT } from '../../utilities/getNextT'
 
 const baseClass = 'forgot-password'
 
@@ -14,13 +14,18 @@ export const generateMetadata = async ({
   config,
 }: {
   config: Promise<SanitizedConfig>
-}): Promise<Metadata> =>
+}): Promise<Metadata> => {
-  meta({
+  const t = getNextT({
-    title: i18n.t('forgotPassword'),
+    config: await config,
-    description: i18n.t('forgotPassword'),
+  })
-    keywords: i18n.t('forgotPassword'),
+
+  return meta({
+    title: t('authentication:forgotPassword'),
+    description: t('authentication:forgotPassword'),
+    keywords: t('authentication:forgotPassword'),
     config,
   })
+}
 
 export const ForgotPassword: React.FC<{
   config: Promise<SanitizedConfig>
@@ -39,7 +44,7 @@ export const ForgotPassword: React.FC<{
   //       setHasSubmitted(true)
   //     },
   //     () => {
-  //       toast.error(t('emailNotValid'))
+  //       toast.error(i18n.t('authentication:emailNotValid'))
   //     },
   //   )
   // }
@@ -68,8 +73,8 @@ export const ForgotPassword: React.FC<{
   // if (hasSubmitted) {
   //   return (
   //     <MinimalTemplate className={baseClass}>
-  //       <h1>{t('emailSent')}</h1>
+  //       <h1>{i18n.t('authentication:emailSent')}</h1>
-  //       <p>{t('checkYourEmailForPasswordReset')}</p>
+  //       <p>{i18n.t('authentication:checkYourEmailForPasswordReset')}</p>
   //     </MinimalTemplate>
   //   )
   // }
@@ -81,30 +86,17 @@ export const ForgotPassword: React.FC<{
         // handleResponse={handleResponse}
         method="POST"
       >
-        <h1>
+        <h1>{i18n.t('authentication:forgotPassword')}</h1>
-          Forgot Password
+        <p>{i18n.t('authentication:forgotPasswordEmailInstructions')}</p>
-          {/* {t('forgotPassword')} */}
-        </h1>
-        <p>
-          Enter your email address and we will send you a link to reset your password.
-          {/* {t('forgotPasswordEmailInstructions')} */}
-        </p>
         <Email
           admin={{ autoComplete: 'email' }}
-          label="Email Address"
+          label={i18n.t('general:emailAddress')}
-          // label={t('general:emailAddress')}
           name="email"
           required
         />
-        <FormSubmit>
+        <FormSubmit>{i18n.t('general:submit')}</FormSubmit>
-          Submit
-          {/* {t('general:submit')} */}
-        </FormSubmit>
       </Form>
-      <Link href={`${admin}/login`}>
+      <Link href={`${admin}/login`}>{i18n.t('authentication:backToLogin')}</Link>
-        Back to Login
-        {/* {t('backToLogin')} */}
-      </Link>
     </MinimalTemplate>
   )
 }

packages/next/src/pages/Logout/LogoutClient.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { Fragment, useEffect } from 'react'
 import { useAuth } from '../../../../ui/src/providers/Auth'
-import { Button } from '@payloadcms/ui'
+import { Button, useTranslation } from '@payloadcms/ui'
 
 export const LogoutClient: React.FC<{
   inactivity?: boolean
@@ -11,8 +11,8 @@ export const LogoutClient: React.FC<{
   const { inactivity, adminRoute, redirect } = props
 
   const [isLoggingOut, setIsLoggingOut] = React.useState<boolean | undefined>(undefined)
-  const [hasLoggedOut, setHasLoggedOut] = React.useState<boolean | undefined>(undefined)
+  const { logOut } = useAuth()
-  const { logOut, user } = useAuth()
+  const { t } = useTranslation()
 
   useEffect(() => {
     if (!isLoggingOut) {
@@ -24,18 +24,8 @@ export const LogoutClient: React.FC<{
   if (isLoggingOut) {
     return (
       <Fragment>
-        {inactivity && (
+        {inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>}
-          <h2>
+        {!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>}
-            Logged Out Due To Inactivity
-            {/* {t('loggedOutInactivity')} */}
-          </h2>
-        )}
-        {!inactivity && (
-          <h2>
-            Logged Out Successfully
-            {/* {t('loggedOutSuccessfully')} */}
-          </h2>
-        )}
         <Button
           buttonStyle="secondary"
           el="link"
@@ -43,12 +33,12 @@ export const LogoutClient: React.FC<{
             redirect && redirect.length > 0 ? `?redirect=${encodeURIComponent(redirect)}` : ''
           }`}
         >
-          Log Back In
+          {t('authentication:logBackIn')}
-          {/* {t('logBackIn')} */}
         </Button>
       </Fragment>
     )
   }
 
+  // TODO(i18n): needs translation in all languages
   return <Fragment>Logging Out...</Fragment>
 }

packages/next/src/pages/Logout/index.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { MinimalTemplate, Button } from '@payloadcms/ui'
 import { meta } from '../../utilities/meta'
 import './index.scss'
-import i18n from 'i18next'
 import { Metadata } from 'next'
 import { SanitizedConfig } from 'payload/types'
 import { LogoutClient } from './LogoutClient'
+import { getNextT } from '../../utilities/getNextT'
 
 const baseClass = 'logout'
 
@@ -14,13 +14,18 @@ export const generateMetadata = async ({
   config,
 }: {
   config: Promise<SanitizedConfig>
-}): Promise<Metadata> =>
+}): Promise<Metadata> => {
-  meta({
+  const t = getNextT({
-    title: i18n.t('logout'),
+    config: await config,
-    description: `${i18n.t('logoutUser')}`,
+  })
-    keywords: `${i18n.t('logout')}`,
+
+  return meta({
+    title: t('authentication:logout'),
+    description: `${t('authentication:logoutUser')}`,
+    keywords: `${t('authentication:logout')}`,
     config,
   })
+}
 
 export const Logout: React.FC<{
   inactivity?: boolean

packages/next/src/pages/NotFound/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 
-import { Button, Gutter, useStepNav, useConfig } from '@payloadcms/ui'
+import { Button, Gutter, useStepNav, useConfig, useTranslation } from '@payloadcms/ui'
 // import Meta from '../../utilities/Meta'
 import './index.scss'
 
@@ -13,6 +13,7 @@ const NotFound: React.FC<{
   const { marginTop } = props
 
   const { setStepNav } = useStepNav()
+  const { t } = useTranslation()
 
   const {
     routes: { admin },
@@ -21,7 +22,7 @@ const NotFound: React.FC<{
   // useEffect(() => {
   //   setStepNav([
   //     {
-  //       label: t('notFound'),
+  //       label: t('general:notFound'),
   //     },
   //   ])
   // }, [setStepNav, t])
@@ -33,22 +34,15 @@ const NotFound: React.FC<{
         .join(' ')}
     >
       {/* <Meta
-        description={t('pageNotFound')}
+        description={t('general:pageNotFound')}
-        keywords={`404 ${t('notFound')}`}
+        keywords={`404 ${t('general:notFound')}`}
-        title={t('notFound')}
+        title={t('general:notFound')}
       /> */}
       <Gutter className={`${baseClass}__wrap`}>
-        <h1>
+        <h1>{t('general:nothingFound')}</h1>
-          Nothing Found
+        <p>{t('general:sorryNotFound')}</p>
-          {/* {t('nothingFound')} */}
-        </h1>
-        <p>
-          Sorry, we couldn't find what you were looking for.
-          {/* {t('sorryNotFound')} */}
-        </p>
         <Button className={`${baseClass}__button`} el="link" to={`${admin}`}>
-          Back to Dashboard
+          {t('general:backToDashboard')}
-          {/* {t('backToDashboard')} */}
         </Button>
       </Gutter>
     </div>

packages/next/src/pages/ResetPassword/index.tsx

@@ -14,9 +14,9 @@ import './index.scss'
 import { SanitizedConfig } from 'payload/types'
 import Link from 'next/link'
 import { initPage } from '../../utilities/initPage'
-import i18n from 'i18next'
 import { Metadata } from 'next'
 import { meta } from '../../utilities/meta'
+import { getNextT } from '../../utilities/getNextT'
 
 const baseClass = 'reset-password'
 
@@ -24,19 +24,24 @@ export const generateMetadata = async ({
   config,
 }: {
   config: Promise<SanitizedConfig>
-}): Promise<Metadata> =>
+}): Promise<Metadata> => {
-  meta({
+  const t = getNextT({
-    title: i18n.t('resetPassword'),
+    config: await config,
-    description: i18n.t('resetPassword'),
+  })
-    keywords: i18n.t('resetPassword'),
+
+  return meta({
+    title: t('authentication:resetPassword'),
+    description: t('authentication:resetPassword'),
+    keywords: t('authentication:resetPassword'),
     config,
   })
+}
 
 export const ResetPassword: React.FC<{
   config: Promise<SanitizedConfig>
   token: string
 }> = async ({ config: configPromise, token }) => {
-  const { config, user } = await initPage({ configPromise })
+  const { config, user, i18n } = await initPage({ configPromise })
 
   const {
     admin: { logoutRoute, user: userSlug },
@@ -50,7 +55,7 @@ export const ResetPassword: React.FC<{
   //     history.push(`${admin}`)
   //   } else {
   //     history.push(`${admin}/login`)
-  //     toast.success(t('general:updatedSuccessfully'), { autoClose: 3000 })
+  //     toast.success(i18n.t('general:updatedSuccessfully'), { autoClose: 3000 })
   //   }
   // }
 
@@ -58,10 +63,7 @@ export const ResetPassword: React.FC<{
     return (
       <MinimalTemplate className={baseClass}>
         <div className={`${baseClass}__wrap`}>
-          <h1>
+          <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>
-            Already Logged In
-            {/* {t('alreadyLoggedIn')} */}
-          </h1>
           <p>
             <Translation
               t={i18n.t}
@@ -73,8 +75,7 @@ export const ResetPassword: React.FC<{
           </p>
           <br />
           <Button buttonStyle="secondary" el="link" to={admin}>
-            Back to Dashboard
+            {i18n.t('general:backToDashboard')}
-            {/* {t('general:backToDashboard')} */}
           </Button>
         </div>
       </MinimalTemplate>
@@ -84,8 +85,7 @@ export const ResetPassword: React.FC<{
   return (
     <MinimalTemplate className={baseClass}>
       <div className={`${baseClass}__wrap`}>
-        Reset Password
+        <h1>{i18n.t('authentication:resetPassword')}</h1>
-        {/* <h1>{t('resetPassword')}</h1> */}
         <Form
           action={`${serverURL}${api}/${userSlug}/reset-password`}
           method="POST"
@@ -94,17 +94,13 @@ export const ResetPassword: React.FC<{
         >
           <Password
             autoComplete="off"
-            label="New Password"
+            label={i18n.t('authentication:newPassword')}
-            // label={t('newPassword')}
             name="password"
             required
           />
           <ConfirmPassword />
           <HiddenInput name="token" value={token} />
-          <FormSubmit>
+          <FormSubmit>{i18n.t('authentication:resetPassword')}</FormSubmit>
-            Reset Password
-            {/* {t('resetPassword')} */}
-          </FormSubmit>
         </Form>
       </div>
     </MinimalTemplate>

packages/next/src/pages/Unauthorized/UnauthorizedClient.tsx

@@ -0,0 +1,18 @@
+'use client'
+import React from 'react'
+import { Button, useTranslation } from '@payloadcms/ui'
+
+export const UnauthorizedClient: React.FC<{ logoutRoute: string }> = ({ logoutRoute }) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <h2>{t('error:unauthorized')}</h2>
+      <p>{t('error:notAllowedToAccessPage')}</p>
+      <br />
+      <Button el="link" to={logoutRoute}>
+        {t('authentication:logOut')}
+      </Button>
+    </>
+  )
+}

packages/next/src/pages/Unauthorized/index.tsx

@@ -1,22 +1,28 @@
 import React from 'react'
 
-import { MinimalTemplate, Button } from '@payloadcms/ui'
+import { MinimalTemplate } from '@payloadcms/ui'
 import { SanitizedConfig } from 'payload/types'
 import { meta } from '../../utilities/meta'
 import { Metadata } from 'next'
-import i18n from 'i18next'
+import { getNextT } from '../../utilities/getNextT'
+import { UnauthorizedClient } from './UnauthorizedClient'
 
 export const generateMetadata = async ({
   config,
 }: {
   config: Promise<SanitizedConfig>
-}): Promise<Metadata> =>
+}): Promise<Metadata> => {
-  meta({
+  const t = getNextT({
-    title: i18n.t('error:unauthorized'),
+    config: await config,
-    description: i18n.t('error:unauthorized'),
+  })
-    keywords: i18n.t('error:unauthorized'),
+
+  return meta({
+    title: t('error:unauthorized'),
+    description: t('error:unauthorized'),
+    keywords: t('error:unauthorized'),
     config,
   })
+}
 
 export const Unauthorized: React.FC<{
   config: Promise<SanitizedConfig>
@@ -30,19 +36,7 @@ export const Unauthorized: React.FC<{
 
   return (
     <MinimalTemplate className="unauthorized">
-      <h2>
+      <UnauthorizedClient logoutRoute={`${admin}${logoutRoute}`} />
-        Unauthorized
-        {/* {t('error:unauthorized')} */}
-      </h2>
-      <p>
-        Not Allowed
-        {/* {t('error:notAllowedToAccessPage')} */}
-      </p>
-      <br />
-      <Button el="link" to={`${admin}${logoutRoute}`}>
-        Log out
-        {/* {t('authentication:logOut')} */}
-      </Button>
     </MinimalTemplate>
   )
 }

packages/next/src/pages/Verify/index.tsx

@@ -6,8 +6,8 @@ import { initPage } from '../../utilities/initPage'
 import { SanitizedConfig } from 'payload/types'
 import { redirect } from 'next/navigation'
 import { Metadata } from 'next'
-import i18n from 'i18next'
 import { meta } from '../../utilities/meta'
+import { getNextT } from '../../utilities/getNextT'
 
 const baseClass = 'verify'
 
@@ -15,13 +15,18 @@ export const generateMetadata = async ({
   config,
 }: {
   config: Promise<SanitizedConfig>
-}): Promise<Metadata> =>
+}): Promise<Metadata> => {
-  meta({
+  const t = getNextT({
-    description: i18n.t('verifyUser'),
+    config: await config,
-    keywords: i18n.t('verify'),
+  })
-    title: i18n.t('verify'),
+
+  return meta({
+    description: t('authentication:verifyUser'),
+    keywords: t('authentication:verify'),
+    title: t('authentication:verify'),
     config,
   })
+}
 
 export const Verify: React.FC<{
   config: Promise<SanitizedConfig>
@@ -30,7 +35,7 @@ export const Verify: React.FC<{
   config: configPromise,
   // token
 }) => {
-  const { config, user } = await initPage({ configPromise })
+  const { config, user, i18n } = await initPage({ configPromise })
 
   const {
     admin: { user: userSlug },
@@ -60,10 +65,9 @@ export const Verify: React.FC<{
   }
 
   const getText = () => {
-    return 'Verify'
+    if (verifyResult?.status === 200) return i18n.t('authentication:verifiedSuccessfully')
-    // if (verifyResult?.status === 200) return t('verifiedSuccessfully')
+    if (verifyResult?.status === 202) return i18n.t('authentication:alreadyActivated')
-    // if (verifyResult?.status === 202) return t('alreadyActivated')
+    return i18n.t('authentication:unableToVerify')
-    // return t('unableToVerify')
   }
 
   return (
@@ -74,8 +78,7 @@ export const Verify: React.FC<{
       <h2>{getText()}</h2>
       {verifyResult?.status === 200 && (
         <Button buttonStyle="secondary" el="link" to={`${adminRoute}/login`}>
-          Login
+          {i18n.t('authentication:login')}
-          {/* {t('login')} */}
         </Button>
       )}
     </MinimalTemplate>

packages/next/src/pages/Version/Default/index.tsx

@@ -9,6 +9,7 @@ import fieldComponents from '../RenderFieldsToDiff/fields'
 import Restore from '../Restore'
 import './index.scss'
 import { mostRecentVersionOption } from '../shared'
+import { getTranslation } from '@payloadcms/translations'
 
 const baseClass = 'view-version'
 
@@ -52,8 +53,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
             docLabel = mostRecentDoc[useAsTitle]
           }
         } else {
-          docLabel = 'Untitled'
+          docLabel = `[${i18n.t('general:untitled')}]`
-          // docLabel = `[${t('general:untitled')}]`
         }
       } else {
         docLabel = mostRecentDoc.id
@@ -62,9 +62,7 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
 
     nav = [
       {
-        label:
+        label: getTranslation(collectionConfig.labels.plural, i18n),
-          typeof collectionConfig.labels.plural === 'string' ? collectionConfig.labels.plural : '', // TODO: fix this (see below)
-        // label: getTranslation(collectionConfig.labels.plural, i18n),
         url: `${admin}/collections/${collectionConfig.slug}`,
       },
       {
@@ -139,10 +137,9 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
       <Gutter className={`${baseClass}__wrap`}>
         <div className={`${baseClass}__header-wrap`}>
           <p className={`${baseClass}__created-at`}>
-            Version Created On
+            {i18n.t('versionCreatedOn', {
-            {/* {t('versionCreatedOn', {
+              version: i18n.t(doc?.autosave ? 'autosavedVersion' : 'version'),
-              version: t(doc?.autosave ? 'autosavedVersion' : 'version'),
+            })}
-            })} */}
           </p>
           <header className={`${baseClass}__header`}>
             <h2>{formattedCreatedAt}</h2>
@@ -184,6 +181,9 @@ export const DefaultVersionView: React.FC<DefaultVersionsViewProps> = ({
                 : []
             }
             version={doc?.version}
+            i18n={i18n}
+            locale={locale}
+            config={config}
           />
         )}
       </Gutter>

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Iterable/index.tsx

@@ -20,6 +20,8 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
   locales,
   permissions,
   version,
+  i18n,
+  config,
 }) => {
   const versionRowCount = Array.isArray(version) ? version.length : 0
   const comparisonRowCount = Array.isArray(comparison) ? comparison.length : 0
@@ -30,8 +32,7 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
       {field.label && (
         <Label>
           {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-          {field.label}
+          {getTranslation(field.label, i18n)}
-          {/* {getTranslation(field.label, i18n)} */}
         </Label>
       )}
       {maxRows > 0 && (
@@ -48,8 +49,7 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
               subFields = [
                 {
                   name: 'blockType',
-                  label: 'Block Type', // TODO: i18n
+                  label: i18n.t('fields:blockType'),
-                  // label: t('fields:blockType'),
                   type: 'text',
                 },
               ]
@@ -86,6 +86,9 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
                   )}
                   locales={locales}
                   version={versionRow}
+                  i18n={i18n}
+                  locale={locale}
+                  config={config}
                 />
               </div>
             )
@@ -94,12 +97,11 @@ const Iterable: React.FC<Props & { field: ArrayField | BlockField }> = ({
       )}
       {maxRows === 0 && (
         <div className={`${baseClass}__no-rows`}>
-          No rows found
+          {i18n.t('noRowsFound', {
-          {/* {t('noRowsFound', {
             label: field.labels?.plural
               ? getTranslation(field.labels?.plural, i18n)
-              : t('general:rows'),
+              : i18n.t('general:rows'),
-          })} */}
+          })}
         </div>
       )}
     </div>

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Nested/index.tsx

@@ -19,17 +19,15 @@ const Nested: React.FC<Props & { field: FieldWithSubFields }> = ({
   locales,
   permissions,
   version,
+  i18n,
+  config,
 }) => {
-  // const { i18n } = useTranslation()
-
   return (
     <div className={baseClass}>
       {field.label && (
         <Label>
           {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-          {field.label}
+          {getTranslation(field.label, i18n)}
-          // TODO(i18n)
-          {/* {getTranslation(field.label, i18n)} */}
         </Label>
       )}
       <div
@@ -44,6 +42,9 @@ const Nested: React.FC<Props & { field: FieldWithSubFields }> = ({
           fields={field.fields}
           locales={locales}
           version={version}
+          i18n={i18n}
+          locale={locale}
+          config={config}
         />
       </div>
     </div>

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Relationship/index.tsx

@@ -1,8 +1,6 @@
-'use client'
 import React from 'react'
 import { getTranslation } from '@payloadcms/translations'
 import ReactDiffViewer from 'react-diff-viewer-continued'
-import { useTranslation } from '@payloadcms/ui'
 
 import type { RelationshipField, SanitizedCollectionConfig } from 'payload/types'
 import type { Props } from '../types'
@@ -10,7 +8,6 @@ import type { Props } from '../types'
 import { fieldAffectsData, fieldIsPresentationalOnly } from 'payload/types'
 import Label from '../../Label'
 import { diffStyles } from '../styles'
-import { useConfig, useLocale } from '@payloadcms/ui'
 
 import './index.scss'
 
@@ -72,14 +69,13 @@ const Relationship: React.FC<Props & { field: RelationshipField }> = ({
   comparison,
   field,
   version,
+  i18n,
+  locale,
+  config: { collections },
 }) => {
-  const { collections } = useConfig()
-  const { i18n, t } = useTranslation()
-  const { code: locale } = useLocale()
-
   let placeholder = ''
 
-  if (version === comparison) placeholder = `[${t('general:noValue')}]`
+  if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]`
 
   let versionToRender = version
   let comparisonToRender = comparison

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Select/index.tsx

@@ -1,6 +1,4 @@
-import type { i18n as Ii18n } from 'i18next'
+import { getTranslation, I18n } from '@payloadcms/translations'
-
-import { getTranslation } from '@payloadcms/translations'
 import React from 'react'
 import { DiffMethod } from 'react-diff-viewer-continued'
 
@@ -34,31 +32,21 @@ const getOptionsToRender = (
 
 const getTranslatedOptions = (
   options: (OptionObject | string)[] | OptionObject | string,
-  i18n: Ii18n,
+  i18n: I18n,
 ): string => {
   if (Array.isArray(options)) {
-    return (
+    return options
-      options
+      .map((option) => (typeof option === 'string' ? option : getTranslation(option.label, i18n)))
-        // TODO: fix this
+      .join(', ')
-        // @ts-ignore-next-line
-        .map((option) => (typeof option === 'string' ? option : getTranslation(option.label, i18n)))
-        .join(', ')
-    )
   }
-  // TODO: fix this
+
-  // @ts-ignore-next-line
   return typeof options === 'string' ? options : getTranslation(options.label, i18n)
 }
 
-const Select: React.FC<Props> = ({ comparison, diffMethod, field, locale, version }) => {
+const Select: React.FC<Props> = ({ comparison, diffMethod, field, locale, version, i18n }) => {
   let placeholder = ''
-  // const { i18n, t } = useTranslation('general')
-  const t = (key: string) => key // TODO
-  const i18n = {
-    options: {},
-  } as Ii18n // TODO
 
-  if (version === comparison) placeholder = `[${t('noValue')}]`
+  if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]`
 
   const comparisonToRender =
     typeof comparison !== 'undefined'
@@ -73,8 +61,6 @@ const Select: React.FC<Props> = ({ comparison, diffMethod, field, locale, versio
     <div className={baseClass}>
       <Label>
         {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
-        {/* TODO: fix this
-        @ts-ignore-next-line */}
         {getTranslation(field.label, i18n)}
       </Label>
       <DiffViewer

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Tabs/index.tsx

@@ -15,6 +15,9 @@ const Tabs: React.FC<Props & { field: TabsField }> = ({
   locales,
   permissions,
   version,
+  i18n,
+  config,
+  locale,
 }) => (
   <div className={baseClass}>
     <div className={`${baseClass}__wrap`}>
@@ -29,6 +32,9 @@ const Tabs: React.FC<Props & { field: TabsField }> = ({
               locales={locales}
               permissions={permissions}
               version={version?.[tab.name]}
+              i18n={i18n}
+              config={config}
+              locale={locale}
             />
           )
         }
@@ -42,6 +48,9 @@ const Tabs: React.FC<Props & { field: TabsField }> = ({
             key={i}
             locales={locales}
             version={version}
+            i18n={i18n}
+            config={config}
+            locale={locale}
           />
         )
       })}

packages/next/src/pages/Version/RenderFieldsToDiff/fields/Text/index.tsx

@@ -17,12 +17,11 @@ const Text: React.FC<Props> = ({
   isRichText = false,
   locale,
   version,
+  i18n,
 }) => {
   let placeholder = ''
-  const t = (key: string) => key // TODO
-  const i18n = {} // TODO
 
-  if (version === comparison) placeholder = `[${t('noValue')}]`
+  if (version === comparison) placeholder = `[${i18n.t('general:noValue')}]`
 
   let versionToRender = version
   let comparisonToRender = comparison
@@ -37,8 +36,7 @@ const Text: React.FC<Props> = ({
       <Label>
         {locale && <span className={`${baseClass}__locale-label`}>{locale}</span>}
         {typeof field.label === 'string' ? field.label : '[field-label]' /* TODO */}
-        // TODO(i18n)
+        {getTranslation(field.label, i18n)}
-        {/* {getTranslation(field.label, i18n)} */}
       </Label>
       <DiffViewer
         comparisonToRender={comparisonToRender}

packages/next/src/pages/Version/RenderFieldsToDiff/fields/types.ts

@@ -2,6 +2,8 @@ import type React from 'react'
 import type { DiffMethod } from 'react-diff-viewer-continued'
 
 import type { FieldPermissions } from 'payload/auth'
+import type { I18n } from '@payloadcms/translations'
+import { SanitizedConfig } from 'payload/types'
 
 export type FieldComponents = Record<string, React.FC<Props>>
 
@@ -12,8 +14,10 @@ export type Props = {
   field: any
   fieldComponents: FieldComponents
   isRichText?: boolean
-  locale?: string
+  locale: string
   locales?: string[]
   permissions?: Record<string, FieldPermissions>
   version: any
+  i18n: I18n
+  config: SanitizedConfig
 }

packages/next/src/pages/Version/RenderFieldsToDiff/index.tsx

@@ -18,6 +18,9 @@ const RenderFieldsToDiff: React.FC<Props> = ({
   fields,
   locales,
   version,
+  i18n,
+  locale,
+  config,
 }) => {
   return (
     <div className={baseClass}>
@@ -60,6 +63,8 @@ const RenderFieldsToDiff: React.FC<Props> = ({
                             locales={locales}
                             permissions={subFieldPermissions}
                             version={versionLocaleValue}
+                            i18n={i18n}
+                            config={config}
                           />
                         </div>
                       </div>
@@ -80,6 +85,9 @@ const RenderFieldsToDiff: React.FC<Props> = ({
                   locales={locales}
                   permissions={subFieldPermissions}
                   version={versionValue}
+                  i18n={i18n}
+                  locale={locale}
+                  config={config}
                 />
               </div>
             )
@@ -96,6 +104,9 @@ const RenderFieldsToDiff: React.FC<Props> = ({
                 key={i}
                 locales={locales}
                 version={version}
+                i18n={i18n}
+                locale={locale}
+                config={config}
               />
             )
           }
@@ -112,6 +123,9 @@ const RenderFieldsToDiff: React.FC<Props> = ({
                 locales={locales}
                 permissions={fieldPermissions}
                 version={version}
+                i18n={i18n}
+                locale={locale}
+                config={config}
               />
             )
           }

packages/next/src/pages/Version/RenderFieldsToDiff/types.ts

@@ -1,6 +1,7 @@
 import type { FieldPermissions } from 'payload/auth'
-import type { Field } from 'payload/types'
+import type { Field, SanitizedConfig } from 'payload/types'
 import type { FieldComponents } from './fields/types'
+import type { I18n } from '@payloadcms/translations'
 
 export type Props = {
   comparison: Record<string, any>
@@ -9,4 +10,7 @@ export type Props = {
   fields: Field[]
   locales: string[]
   version: Record<string, any>
+  i18n: I18n
+  config: SanitizedConfig
+  locale: string
 }

packages/next/src/pages/Versions/index.tsx

@@ -6,12 +6,13 @@ import {
   PerPage,
   Table,
   SetDocumentStepNav as SetStepNav,
+  EditViewProps,
 } from '@payloadcms/ui'
 import { buildVersionColumns } from './columns'
 import './index.scss'
 
-import { EditViewProps } from '@payloadcms/ui'
 import { notFound } from 'next/navigation'
+import { getTranslation } from '@payloadcms/translations'
 
 const baseClass = 'versions'
 
@@ -58,7 +59,7 @@ export const VersionsView: React.FC<EditViewProps> = async (props) => {
     }
 
     docURL = `${serverURL}${api}/${slug}/${id}`
-    // entityLabel = getTranslation(collectionConfig.labels.singular, i18n)
+    entityLabel = getTranslation(collectionConfig.labels.singular, i18n)
     editURL = `${admin}/collections/${collectionSlug}/${id}`
   }
 
@@ -85,7 +86,7 @@ export const VersionsView: React.FC<EditViewProps> = async (props) => {
     }
 
     docURL = `${serverURL}${api}/globals/${globalSlug}`
-    // entityLabel = getTranslation(globalConfig.label, i18n)
+    entityLabel = getTranslation(globalConfig.label, i18n)
     editURL = `${admin}/globals/${globalSlug}`
   }
 
@@ -108,24 +109,28 @@ export const VersionsView: React.FC<EditViewProps> = async (props) => {
         globalSlug={globalConfig?.slug}
         id={id}
         isEditing
-        view="Versions" // TODO; i18n
         pluralLabel={collectionConfig?.labels?.plural}
-        // view={t('versions')}
+        view={i18n.t('version:versions')}
       />
       {/* <LoadingOverlayToggle name="versions" show={isLoadingVersions} /> */}
       <main className={baseClass}>
         {/* <Meta description={metaDesc} title={metaTitle} /> */}
         <Gutter className={`${baseClass}__wrap`}>
           {versionCount === 0 && (
-            <div className={`${baseClass}__no-versions`}>{/* {t('noFurtherVersionsFound')} */}</div>
+            <div className={`${baseClass}__no-versions`}>
+              {i18n.t('version:noFurtherVersionsFound')}
+            </div>
           )}
           {versionCount > 0 && (
             <React.Fragment>
-              {/* <div className={`${baseClass}__version-count`}>
+              <div className={`${baseClass}__version-count`}>
-                {t(versionCount === 1 ? 'versionCount_one' : 'versionCount_many', {
+                {i18n.t(
-                  count: versionCount,
+                  versionCount === 1 ? 'version:versionCount_one' : 'version:versionCount_many',
-                })}
+                  {
-              </div> */}
+                    count: versionCount,
+                  },
+                )}
+              </div>
               <Table
                 columns={buildVersionColumns({
                   config,
@@ -154,7 +159,7 @@ export const VersionsView: React.FC<EditViewProps> = async (props) => {
                       {versionsData.totalPages > 1 && versionsData.totalPages !== versionsData.page
                         ? versionsData.limit * versionsData.page
                         : versionsData.totalDocs}{' '}
-                      {/* {t('of')} {versionsData.totalDocs} */}
+                      {i18n.t('general:of')} {versionsData.totalDocs}
                     </div>
                     <PerPage
                       limit={limit ? Number(limit) : 10}

packages/payload/src/fields/validations.ts

@@ -181,15 +181,15 @@ const validateArrayLength: any = (
   if (!required && arrayLength === 0) return true
 
   if (minRows && arrayLength < minRows) {
-    return t('validation:requiresAtLeast', { count: minRows, label: t('rows') })
+    return t('validation:requiresAtLeast', { count: minRows, label: t('general:rows') })
   }
 
   if (maxRows && arrayLength > maxRows) {
-    return t('validation:requiresNoMoreThan', { count: maxRows, label: t('rows') })
+    return t('validation:requiresNoMoreThan', { count: maxRows, label: t('general:rows') })
   }
 
   if (required && !arrayLength) {
-    return t('validation:requiresAtLeast', { count: 1, label: t('row') })
+    return t('validation:requiresAtLeast', { count: 1, label: t('general:row') })
   }
 
   return true
@@ -218,11 +218,11 @@ export const number: Validate<unknown, unknown, NumberField> = (
     const numberValue = parseFloat(number as unknown as string)
 
     if (typeof max === 'number' && numberValue > max) {
-      return t('validation:greaterThanMax', { label: t('value'), max, value })
+      return t('validation:greaterThanMax', { label: t('general:value'), max, value })
     }
 
     if (typeof min === 'number' && numberValue < min) {
-      return t('validation:lessThanMin', { label: t('value'), min, value })
+      return t('validation:lessThanMin', { label: t('general:value'), min, value })
     }
   }
 
@@ -382,11 +382,19 @@ export const relationship: Validate<unknown, unknown, RelationshipField> = async
 
   if (Array.isArray(value) && value.length > 0) {
     if (minRows && value.length < minRows) {
-      return t('validation:lessThanMin', { label: t('rows'), min: minRows, value: value.length })
+      return t('validation:lessThanMin', {
+        label: t('general:rows'),
+        min: minRows,
+        value: value.length,
+      })
     }
 
     if (maxRows && value.length > maxRows) {
-      return t('validation:greaterThanMax', { label: t('rows'), max: maxRows, value: value.length })
+      return t('validation:greaterThanMax', {
+        label: t('general:rows'),
+        max: maxRows,
+        value: value.length,
+      })
     }
   }
 

packages/ui/src/elements/DocumentControls/index.tsx

@@ -74,16 +74,12 @@ export const DocumentControls: React.FC<{
             {collectionConfig && !isEditing && !isAccountView && (
               <li className={`${baseClass}__list-item`}>
                 <p className={`${baseClass}__value`}>
-                  Creating new{' '}
+                  {i18n.t('creatingNewLabel', {
-                  {typeof collectionConfig?.labels?.singular === 'string'
-                    ? collectionConfig.labels.singular
-                    : 'Doc'}
-                  {/* {t('creatingNewLabel', {
                     label:
                       typeof collectionConfig?.labels?.singular === 'string'
                         ? collectionConfig.labels.singular
                         : 'document',
-                  })} */}
+                  })}
                 </p>
               </li>
             )}
@@ -123,7 +119,7 @@ export const DocumentControls: React.FC<{
                     data?.updatedAt ? formatDate(data?.updatedAt, dateFormat, i18n.language) : ''
                   }
                 >
-                  <p className={`${baseClass}__label`}>{/* {t('lastModified')}:&nbsp; */}</p>
+                  <p className={`${baseClass}__label`}>{i18n.t('general:lastModified')}:&nbsp;</p>
                   {data?.updatedAt && (
                     <p className={`${baseClass}__value`}>
                       {formatDate(data.updatedAt, dateFormat, i18n.language)}
@@ -138,7 +134,7 @@ export const DocumentControls: React.FC<{
                     data?.createdAt ? formatDate(data?.createdAt, dateFormat, i18n.language) : ''
                   }
                 >
-                  <p className={`${baseClass}__label`}>{/* {t('created')}:&nbsp; */}</p>
+                  <p className={`${baseClass}__label`}>{i18n.t('general:created')}:&nbsp;</p>
                   {data?.createdAt && (
                     <p className={`${baseClass}__value`}>
                       {formatDate(data?.createdAt, dateFormat, i18n.language)}
@@ -213,8 +209,7 @@ export const DocumentControls: React.FC<{
                       id="action-create"
                       to={`${adminRoute}/collections/${collectionConfig?.slug}/create`}
                     >
-                      Create New
+                      {i18n.t('general:createNew')}
-                      {/* {t('createNew')} */}
                     </PopupList.Button>
                     {!collectionConfig?.admin?.disableDuplicate && isEditing && (
                       <DuplicateDocument

packages/ui/src/forms/RenderFields/index.tsx

@@ -1,16 +1,22 @@
 import React from 'react'
 
+import { fieldAffectsData } from 'payload/types'
 import type { Props } from './types'
-
 import { RenderCustomComponent } from '../../elements/RenderCustomComponent'
+
 import './index.scss'
+import { getTranslation } from '@payloadcms/translations'
 
 const baseClass = 'render-fields'
 
 const RenderFields: React.FC<Props> = (props) => {
-  const { className, fieldTypes, forceRender, margins, data, user, state } = props
+  const { className, fieldTypes, forceRender, margins, data, user, state, i18n } = props
 
   if ('fields' in props) {
+    if (!i18n) {
+      console.error('Need to implement i18n when calling RenderFields')
+    }
+
     return (
       <div
         className={[
@@ -73,11 +79,13 @@ const RenderFields: React.FC<Props> = (props) => {
 
           return (
             <div className="missing-field" key={fieldIndex}>
-              {/* {t('error:noMatchedField', {
+              {i18n
-                  label: fieldAffectsData(field)
+                ? i18n.t('error:noMatchedField', {
-                    ? getTranslation(field.label || field.name, i18n)
+                    label: fieldAffectsData(field)
-                    : field.path,
+                      ? getTranslation(field.label || field.name, i18n)
-                })} */}
+                      : field.path,
+                  })
+                : 'Need to implement i18n when calling RenderFields'}
             </div>
           )
         })}

packages/ui/src/forms/RenderFields/types.ts

@@ -3,6 +3,7 @@ import type { Document, Field, FieldWithPath } from 'payload/types'
 import type { ReducedField } from './filterFields'
 import { Fields } from '../Form/types'
 import { FieldTypes } from 'payload/config'
+import { I18n } from '@payloadcms/translations'
 
 export type Props = {
   className?: string
@@ -18,6 +19,7 @@ export type Props = {
       }
     | FieldPermissions
   readOnly?: boolean
+  i18n?: I18n
 } & (
   | {
       // Fields to be filtered by the component

packages/ui/src/views/Edit/index.tsx

@@ -5,7 +5,7 @@ import Form from '../../forms/Form'
 import { OperationProvider } from '../../providers/OperationProvider'
 import './index.scss'
 
-// import { getTranslation } from 'payload/utilities'
+// import { getTranslation } from '@payloadcms/translations'
 import { DocumentControls } from '../../elements/DocumentControls'
 import { DocumentFields } from '../../elements/DocumentFields'
 import { LeaveWithoutSaving } from '../../elements/LeaveWithoutSaving'
@@ -114,12 +114,12 @@ export const DefaultEditView: React.FC<EditViewProps> = async (props) => {
           />
 
           {/* <Meta
-        description={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
+        description={`${isEditing ? t('general:editing') : t('general:creating')} - ${getTranslation(
           collection.labels.singular,
           i18n,
         )}`}
         keywords={`${getTranslation(collection.labels.singular, i18n)}, Payload, CMS`}
-        title={`${isEditing ? t('editing') : t('creating')} - ${getTranslation(
+        title={`${isEditing ? t('general:editing') : t('general:creating')} - ${getTranslation(
           collection.labels.singular,
           i18n,
         )}`}

packages/ui/src/views/List/index.tsx

@@ -39,7 +39,7 @@ export const DefaultList: React.FC<DefaultListViewProps> = (props) => {
         useAsTitle,
       } = {},
       fields,
-      labels: { plural: pluralLabel },
+      labels: { plural: pluralLabel, singular: singularLabel } = {},
       slug: collectionSlug,
     },
     customHeader,
@@ -104,15 +104,15 @@ export const DefaultList: React.FC<DefaultListViewProps> = (props) => {
             {customHeader && customHeader}
             {!customHeader && (
               <Fragment>
-                <h1>{typeof pluralLabel === 'string' ? pluralLabel : pluralLabel['en']}</h1>
+                <h1>{getTranslation(pluralLabel, i18n)}</h1>
-                {/* <h1>{getTranslation(pluralLabel, i18n)}</h1> */}
                 {hasCreatePermission && (
                   <Pill
-                    // aria-label={t('createNewLabel', { label: getTranslation(singularLabel, i18n) })}
+                    aria-label={i18n.t('general:createNewLabel', {
+                      label: getTranslation(singularLabel, i18n),
+                    })}
                     to={newDocumentURL}
                   >
-                    Create New
+                    {i18n.t('general:createNew')}
-                    {/* {t('createNew')} */}
                   </Pill>
                 )}
                 {/* {!smallBreak && (
@@ -152,11 +152,10 @@ export const DefaultList: React.FC<DefaultListViewProps> = (props) => {
           )}
           {data.docs && data.docs.length === 0 && (
             <div className={`${baseClass}__no-results`}>
-              {/* <p>{t('noResults', { label: getTranslation(pluralLabel, i18n) })}</p> */}
+              <p>{i18n.t('general:noResults', { label: getTranslation(pluralLabel, i18n) })}</p>
               {hasCreatePermission && newDocumentURL && (
                 <Button el="link" to={newDocumentURL}>
-                  Create New
+                  {i18n.t('general:createNewLabel', { label: getTranslation(singularLabel, i18n) })}
-                  {/* {t('createNewLabel', { label: getTranslation(singularLabel, i18n) })} */}
                 </Button>
               )}
             </div>
@@ -184,7 +183,7 @@ export const DefaultList: React.FC<DefaultListViewProps> = (props) => {
                     {data.totalPages > 1 && data.totalPages !== data.page
                       ? data.limit * data.page
                       : data.totalDocs}{' '}
-                    {/* {t('of')} {data.totalDocs} */}
+                    {i18n.t('general:of')} {data.totalDocs}
                   </div>
                   <PerPage
                     handleChange={handlePerPageChange}