Checkout Translations

.github/workflows/i18n_translate.yml

@@ -0,0 +1,56 @@
+name: Generate Translations
+
+on:
+  pull_request:
+    paths:
+      - "clients/packages/i18n/src/locales/en.ts"
+      - "clients/packages/i18n/src/config.ts"
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  translate:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        working-directory: ${{ github.workspace }}/clients
+
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.head_ref }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - uses: pnpm/action-setup@v4
+        with:
+          package_json_file: clients/package.json
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: clients/.node-version
+          cache: "pnpm"
+          cache-dependency-path: "clients/pnpm-lock.yaml"
+
+      - name: Install dependencies
+        run: pnpm install --ignore-scripts
+
+      - name: Generate translations
+        env:
+          GOOGLE_GENERATIVE_AI_API_KEY: ${{ secrets.GOOGLE_GENERATIVE_AI_API_KEY }}
+        run: pnpm --filter @polar-sh/i18n translate
+
+      - name: Commit translations
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add packages/i18n/
+          git diff --staged --quiet || git commit -m "chore(i18n): update translations"
+          git push

clients/apps/web/package.json

@@ -42,8 +42,9 @@
     "@polar-sh/client": "workspace:*",
     "@polar-sh/currency": "workspace:^",
     "@polar-sh/customer-portal": "workspace:*",
+    "@polar-sh/i18n": "workspace:*",
     "@polar-sh/mdx": "workspace:*",
-    "@polar-sh/sdk": "^0.42.5",
+    "@polar-sh/sdk": "^0.43.0",
     "@polar-sh/ui": "workspace:*",
     "@posthog/ai": "^7.5.4",
     "@posthog/core": "^1.14.0",
@@ -115,7 +116,7 @@
     "@types/mdx": "^2.0.13",
     "@types/node": "^24.0.0",
     "@types/qrcode": "^1.5.6",
-    "@types/react": "19.2.10",
+    "@types/react": "19.2.13",
     "@types/react-dom": "19.2.3",
     "@types/tinycolor2": "^1.4.6",
     "@types/web": "^0.0.323",

clients/apps/web/src/app/checkout/[clientSecret]/CheckoutPage.tsx

@@ -3,19 +3,22 @@
 import Checkout from '@/components/Checkout/Checkout'
 import CheckoutLayout from '@/components/Checkout/CheckoutLayout'
 import { useCheckout } from '@polar-sh/checkout/providers'
+import { AcceptedLocale } from '@polar-sh/i18n'
 
 const ClientPage = ({
   embed,
   theme,
+  locale,
 }: {
   embed: boolean
   theme?: 'light' | 'dark'
+  locale: AcceptedLocale
 }) => {
   const { checkout } = useCheckout()
 
   return (
     <CheckoutLayout checkout={checkout} embed={embed} theme={theme}>
-      <Checkout embed={embed} theme={theme} />
+      <Checkout embed={embed} theme={theme} locale={locale} />
     </CheckoutLayout>
   )
 }

clients/apps/web/src/app/checkout/[clientSecret]/confirmation/page.tsx

@@ -1,6 +1,7 @@
 import { CheckoutConfirmation } from '@/components/Checkout/CheckoutConfirmation'
 import CheckoutLayout from '@/components/Checkout/CheckoutLayout'
 import { getServerURL } from '@/utils/api'
+import { resolveLocale } from '@/utils/i18n'
 import { PolarCore } from '@polar-sh/sdk/core'
 import { checkoutsClientGet } from '@polar-sh/sdk/funcs/checkoutsClientGet'
 import { ExpiredCheckoutError } from '@polar-sh/sdk/models/errors/expiredcheckouterror'
@@ -12,12 +13,13 @@ export default async function Page(props: {
   searchParams: Promise<{
     embed?: string
     theme?: 'light' | 'dark'
+    locale?: string
     customer_session_token?: string
   }>
 }) {
   const searchParams = await props.searchParams
 
-  const { embed, theme, customer_session_token } = searchParams
+  const { embed, theme, locale: _locale, customer_session_token } = searchParams
 
   const params = await props.params
 
@@ -61,12 +63,15 @@ export default async function Page(props: {
     redirect(checkout.url)
   }
 
+  const locale = await resolveLocale(_locale, checkout.locale)
+
   return (
     <CheckoutLayout checkout={checkout} embed={embed === 'true'} theme={theme}>
       <CheckoutConfirmation
         checkout={checkout}
         embed={embed === 'true'}
         theme={theme}
+        locale={locale}
         customerSessionToken={customer_session_token}
       />
     </CheckoutLayout>

clients/apps/web/src/app/checkout/[clientSecret]/page.tsx

@@ -1,4 +1,5 @@
 import { getPublicServerURL, getServerURL } from '@/utils/api'
+import { resolveLocale } from '@/utils/i18n'
 import {
   CheckoutFormProvider,
   CheckoutProvider,
@@ -12,11 +13,15 @@ import CheckoutPage from './CheckoutPage'
 
 export default async function Page(props: {
   params: Promise<{ clientSecret: string }>
-  searchParams: Promise<{ embed?: string; theme?: 'light' | 'dark' }>
+  searchParams: Promise<{
+    embed?: string
+    theme?: 'light' | 'dark'
+    locale?: string
+  }>
 }) {
   const searchParams = await props.searchParams
 
-  const { embed: _embed, theme } = searchParams
+  const { embed: _embed, theme, locale: _locale } = searchParams
 
   const params = await props.params
 
@@ -75,13 +80,15 @@ export default async function Page(props: {
     redirect(`/checkout/${checkout.clientSecret}/confirmation`)
   }
 
+  const locale = await resolveLocale(_locale, checkout.locale)
+
   return (
     <CheckoutProvider
       clientSecret={checkout.clientSecret}
       serverURL={getPublicServerURL()}
     >
-      <CheckoutFormProvider>
-        <CheckoutPage theme={theme} embed={embed} />
+      <CheckoutFormProvider locale={locale}>
+        <CheckoutPage theme={theme} embed={embed} locale={locale} />
       </CheckoutFormProvider>
     </CheckoutProvider>
   )

clients/apps/web/src/components/Benefit/BenefitGrant.tsx

@@ -1,6 +1,11 @@
 import { useCustomerBenefitGrantUpdate } from '@/hooks/queries'
 import { markdownOptions } from '@/utils/markdown'
 import { Client, schemas } from '@polar-sh/client'
+import {
+  DEFAULT_LOCALE,
+  useTranslations,
+  type AcceptedLocale,
+} from '@polar-sh/i18n'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import {
   Select,
@@ -15,11 +20,12 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import DownloadablesBenefitGrant from './Downloadables/DownloadablesBenefitGrant'
 import { LicenseKeyBenefitGrant } from './LicenseKeys/LicenseKeyBenefitGrant'
-import { benefitsDisplayNames, resolveBenefitIcon } from './utils'
+import { resolveBenefitIcon } from './utils'
 
 interface BenefitGrantProps {
   api: Client
   benefitGrant: schemas['CustomerBenefitGrant']
+  locale?: AcceptedLocale
 }
 
 const BenefitGrantCustom = ({
@@ -48,6 +54,7 @@ const BenefitGrantOAuth = ({
   api,
   benefitGrant,
   platform,
+  locale = DEFAULT_LOCALE,
   connectButtonText,
   openButtonUrl,
   openButtonText,
@@ -58,11 +65,13 @@ const BenefitGrantOAuth = ({
     | schemas['CustomerBenefitGrantGitHubRepository']
     | schemas['CustomerBenefitGrantDiscord']
   platform: 'github' | 'discord'
+  locale?: AcceptedLocale
   openButtonText: string
   openButtonUrl: string
   connectButtonText: string
   selectPlaceholder: string
 }) => {
+  const t = useTranslations(locale)
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const {
@@ -199,7 +208,7 @@ const BenefitGrantOAuth = ({
               variant="secondary"
               className="grow"
             >
-              Request new invite
+              {t('checkout.benefits.requestNewInvite')}
             </Button>
           </>
         )}
@@ -214,7 +223,7 @@ const BenefitGrantOAuth = ({
                 disabled={retryCountdown > 0}
               >
                 {retryCountdown > 0
-                  ? `Try again in ${retryCountdown} second${retryCountdown === 1 ? '' : 's'}`
+                  ? t('checkout.benefits.retryIn', { count: retryCountdown })
                   : connectButtonText}
               </Button>
             ) : (
@@ -240,7 +249,9 @@ const BenefitGrantOAuth = ({
                         {account.account_username}
                       </SelectItem>
                     ))}
-                    <SelectItem value="add">Connect new account</SelectItem>
+                    <SelectItem value="add">
+                      {t('checkout.benefits.connectNewAccount')}
+                    </SelectItem>
                   </SelectContent>
                 </Select>
                 <Button
@@ -249,7 +260,7 @@ const BenefitGrantOAuth = ({
                   fullWidth
                   variant="secondary"
                 >
-                  Request my invite
+                  {t('checkout.benefits.requestMyInvite')}
                 </Button>
               </>
             )}
@@ -268,10 +279,13 @@ const BenefitGrantOAuth = ({
 const BenefitGrantGitHubRepository = ({
   api,
   benefitGrant,
+  locale = DEFAULT_LOCALE,
 }: {
   api: Client
   benefitGrant: schemas['CustomerBenefitGrantGitHubRepository']
+  locale?: AcceptedLocale
 }) => {
+  const t = useTranslations(locale)
   const {
     benefit: {
       properties: { repository_owner, repository_name },
@@ -282,21 +296,27 @@ const BenefitGrantGitHubRepository = ({
       api={api}
       benefitGrant={benefitGrant}
       platform="github"
-      connectButtonText="Connect GitHub account"
-      openButtonText={`Go to ${repository_owner}/${repository_name}`}
+      locale={locale}
+      connectButtonText={t('checkout.benefits.github.connect')}
+      openButtonText={t('checkout.benefits.github.goTo', {
+        repository: `${repository_owner}/${repository_name}`,
+      })}
       openButtonUrl={`https://github.com/${repository_owner}/${repository_name}/invitations`}
-      selectPlaceholder="Select a GitHub account"
+      selectPlaceholder={t('checkout.benefits.github.selectAccount')}
     />
   )
 }
 
 const BenefitGrantDiscord = ({
   api,
   benefitGrant,
+  locale = DEFAULT_LOCALE,
 }: {
   api: Client
   benefitGrant: schemas['CustomerBenefitGrantDiscord']
+  locale?: AcceptedLocale
 }) => {
+  const t = useTranslations(locale)
   const {
     benefit: {
       properties: { guild_id },
@@ -307,15 +327,21 @@ const BenefitGrantDiscord = ({
       api={api}
       benefitGrant={benefitGrant}
       platform="discord"
-      connectButtonText="Connect Discord account"
-      openButtonText="Open Discord"
+      locale={locale}
+      connectButtonText={t('checkout.benefits.discord.connect')}
+      openButtonText={t('checkout.benefits.discord.open')}
       openButtonUrl={`https://www.discord.com/channels/${guild_id}`}
-      selectPlaceholder="Select a Discord account"
+      selectPlaceholder={t('checkout.benefits.discord.selectAccount')}
     />
   )
 }
 
-export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
+export const BenefitGrant = ({
+  api,
+  benefitGrant,
+  locale = DEFAULT_LOCALE,
+}: BenefitGrantProps) => {
+  const t = useTranslations(locale)
   const { benefit } = benefitGrant
 
   return (
@@ -329,7 +355,7 @@ export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
         <div className="flex flex-col">
           <h3 className="text-sm font-medium">{benefit.description}</h3>
           <p className="dark:text-polar-500 flex flex-row gap-x-1 truncate text-sm text-gray-500">
-            {benefitsDisplayNames[benefit.type]}
+            {t(`benefitTypes.${benefit.type}`)}
           </p>
         </div>
       </div>
@@ -352,6 +378,7 @@ export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
           benefitGrant={
             benefitGrant as schemas['CustomerBenefitGrantLicenseKeys']
           }
+          locale={locale}
         />
       )}
       {benefit.type === 'github_repository' && (
@@ -360,12 +387,14 @@ export const BenefitGrant = ({ api, benefitGrant }: BenefitGrantProps) => {
           benefitGrant={
             benefitGrant as schemas['CustomerBenefitGrantGitHubRepository']
           }
+          locale={locale}
         />
       )}
       {benefit.type === 'discord' && (
         <BenefitGrantDiscord
           api={api}
           benefitGrant={benefitGrant as schemas['CustomerBenefitGrantDiscord']}
+          locale={locale}
         />
       )}
     </div>