- {formatCurrency(currency, balance)}
+ {formatCurrency(currency, balance, locale)}
{balance !== 0 && (
- Balances
-
- This is the amount that each participant paid or was paid for.
-
+ {t('title')}
+ {t('description')}
- Suggested reimbursements
-
- Here are suggestions for optimized reimbursements between
- participants.
-
+ {t('Reimbursements.title')}
+ {t('Reimbursements.description')}
- Your balance:{' '}
+ {t('yourBalance')}{' '}
{balanceDetail}
diff --git a/src/app/groups/[groupId]/expenses/active-user-modal.tsx b/src/app/groups/[groupId]/expenses/active-user-modal.tsx
index 5d9d005..27d8ad8 100644
--- a/src/app/groups/[groupId]/expenses/active-user-modal.tsx
+++ b/src/app/groups/[groupId]/expenses/active-user-modal.tsx
@@ -12,7 +12,6 @@ import {
import {
Drawer,
DrawerContent,
- DrawerDescription,
DrawerFooter,
DrawerHeader,
DrawerTitle,
@@ -22,6 +21,7 @@ import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
import { getGroup } from '@/lib/api'
import { useMediaQuery } from '@/lib/hooks'
import { cn } from '@/lib/utils'
+import { useTranslations } from 'next-intl'
import { ComponentProps, useEffect, useState } from 'react'
type Props = {
@@ -29,6 +29,7 @@ type Props = {
}
export function ActiveUserModal({ group }: Props) {
+ const t = useTranslations('Expenses.ActiveUserModal')
const [open, setOpen] = useState(false)
const isDesktop = useMediaQuery('(min-width: 768px)')
@@ -52,16 +53,13 @@ export function ActiveUserModal({ group }: Props) {
-
+
)
}
diff --git a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
index 680fe33..4c276b5 100644
--- a/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
+++ b/src/app/groups/[groupId]/expenses/create-from-receipt-button.tsx
@@ -29,6 +29,7 @@ import { useMediaQuery } from '@/lib/hooks'
import { formatCurrency, formatDate, formatFileSize } from '@/lib/utils'
import { Category } from '@prisma/client'
import { ChevronRight, FileQuestion, Loader2, Receipt } from 'lucide-react'
+import { useLocale, useTranslations } from 'next-intl'
import { getImageData, usePresignedUpload } from 'next-s3-upload'
import Image from 'next/image'
import { useRouter } from 'next/navigation'
@@ -47,6 +48,8 @@ export function CreateFromReceiptButton({
groupCurrency,
categories,
}: Props) {
+ const locale = useLocale()
+ const t = useTranslations('CreateFromReceipt')
const [pending, setPending] = useState(false)
const { uploadToS3, FileInput, openFileDialog } = usePresignedUpload()
const { toast } = useToast()
@@ -60,10 +63,11 @@ export function CreateFromReceiptButton({
const handleFileChange = async (file: File) => {
if (file.size > MAX_FILE_SIZE) {
toast({
- title: 'The file is too big',
- description: `The maximum file size you can upload is ${formatFileSize(
- MAX_FILE_SIZE,
- )}. Yours is ${formatFileSize(file.size)}.`,
+ title: t('TooBigToast.title'),
+ description: t('TooBigToast.description', {
+ maxSize: formatFileSize(MAX_FILE_SIZE, locale),
+ size: formatFileSize(file.size, locale),
+ }),
variant: 'destructive',
})
return
@@ -82,13 +86,15 @@ export function CreateFromReceiptButton({
} catch (err) {
console.error(err)
toast({
- title: 'Error while uploading document',
- description:
- 'Something wrong happened when uploading the document. Please retry later or select a different file.',
+ title: t('ErrorToast.title'),
+ description: t('ErrorToast.description'),
variant: 'destructive',
action: (
-
upload()}>
- Retry
+ upload()}
+ >
+ {t('ErrorToast.retry')}
),
})
@@ -114,26 +120,23 @@ export function CreateFromReceiptButton({
}
title={
<>
- Create from receipt
+ {t('Dialog.title')}
Beta
}
- description={<>Extract the expense information from a receipt photo.}
+ description={<>{t('Dialog.description')}}
>
-
- Upload the photo of a receipt, and we’ll scan it to extract the
- expense information if we can.
-
+
{t('Dialog.body')}
) : (
- Select image…
+ {t('Dialog.selectImage')}
)}
-
Title:
+
{t('Dialog.titleLabel')}
{receiptInfo ? receiptInfo.title ?? : '…'}
-
Category:
+
{t('Dialog.categoryLabel')}
{receiptInfo ? (
receiptInfoCategory ? (
@@ -194,11 +197,17 @@ export function CreateFromReceiptButton({
-
Amount:
+
{t('Dialog.amountLabel')}
{receiptInfo ? (
receiptInfo.amount ? (
- <>{formatCurrency(groupCurrency, receiptInfo.amount)}
+ <>
+ {formatCurrency(
+ groupCurrency,
+ receiptInfo.amount,
+ locale,
+ )}
+
) : (
)
@@ -208,13 +217,15 @@ export function CreateFromReceiptButton({
-
Date:
+
{t('Dialog.dateLabel')}
{receiptInfo ? (
receiptInfo.date ? (
- formatDate(new Date(`${receiptInfo?.date}T12:00:00.000Z`), {
- dateStyle: 'medium',
- })
+ formatDate(
+ new Date(`${receiptInfo?.date}T12:00:00.000Z`),
+ locale,
+ { dateStyle: 'medium' },
+ )
) : (
)
@@ -225,7 +236,7 @@ export function CreateFromReceiptButton({
-
You’ll be able to edit the expense information next.
+
{t('Dialog.editNext')}
- Unknown
+ {t('unknown')}
)
}
diff --git a/src/app/groups/[groupId]/expenses/expense-card.tsx b/src/app/groups/[groupId]/expenses/expense-card.tsx
index 239f8fd..2ad4175 100644
--- a/src/app/groups/[groupId]/expenses/expense-card.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-card.tsx
@@ -5,18 +5,40 @@ import { Button } from '@/components/ui/button'
import { getGroupExpenses } from '@/lib/api'
import { cn, formatCurrency, formatDate } from '@/lib/utils'
import { ChevronRight } from 'lucide-react'
+import { useLocale, useTranslations } from 'next-intl'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { Fragment } from 'react'
+type Expense = Awaited>[number]
+
+function Participants({ expense }: { expense: Expense }) {
+ const t = useTranslations('ExpenseCard')
+ const key = expense.amount > 0 ? 'paidBy' : 'receivedBy'
+ const paidFor = expense.paidFor.map((paidFor, index) => (
+
+ {index !== 0 && <>, }
+ {paidFor.participant.name}
+
+ ))
+ const participants = t.rich(key, {
+ strong: (chunks) => {chunks},
+ paidBy: expense.paidBy.name,
+ paidFor: () => paidFor,
+ forCount: expense.paidFor.length,
+ })
+ return <>{participants}
+}
+
type Props = {
- expense: Awaited>[number]
+ expense: Expense
currency: string
groupId: string
}
export function ExpenseCard({ expense, currency, groupId }: Props) {
const router = useRouter()
+ const locale = useLocale()
return (
- {expense.amount > 0 ? 'Paid by ' : 'Received by '}
-
{expense.paidBy.name} for{' '}
- {expense.paidFor.map((paidFor, index) => (
-
- {index !== 0 && <>, }
- {paidFor.participant.name}
-
- ))}
+
@@ -58,10 +73,10 @@ export function ExpenseCard({ expense, currency, groupId }: Props) {
expense.isReimbursement ? 'italic' : 'font-bold',
)}
>
- {formatCurrency(currency, expense.amount)}
+ {formatCurrency(currency, expense.amount, locale)}
- {formatDate(expense.expenseDate, { dateStyle: 'medium' })}
+ {formatDate(expense.expenseDate, locale, { dateStyle: 'medium' })}
{groupExpenses.map((expense) => (
- Your group doesn’t contain any expense yet.{' '}
+ {t('noExpenses')}{' '}
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index d421fc2..068d46f 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/src/app/groups/[groupId]/expenses/page.tsx
@@ -19,6 +19,7 @@ import {
import { env } from '@/lib/env'
import { Download, Plus } from 'lucide-react'
import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
import Link from 'next/link'
import { notFound } from 'next/navigation'
import { Suspense } from 'react'
@@ -34,6 +35,7 @@ export default async function GroupExpensesPage({
}: {
params: { groupId: string }
}) {
+ const t = await getTranslations('Expenses')
const group = await cached.getGroup(groupId)
if (!group) notFound()
@@ -44,10 +46,8 @@ export default async function GroupExpensesPage({