Internationalization + Finnish language (#181)

* I18n with next-intl

* package-lock

* Finnish translations

* Development fix

* Use locale for positioning currency symbol

* Translations: Expenses.ActiveUserModal

* Translations: group 404

* Better translation for ExpenseCard

* Apply translations in CategorySelect search

* Fix for Finnish translation

* Translations for ExpenseDocumentsInput

* Translations for CreateFromReceipt

* Fix for Finnish translation

* Translations for schema errors

* Fix for Finnish translation

* Fixes for Finnish translations

* Prettier

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/[groupId]/stats/page.tsx

@@ -10,6 +10,7 @@ import {
 import { getGroupExpenses } from '@/lib/api'
 import { getTotalGroupSpending } from '@/lib/totals'
 import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 import { notFound } from 'next/navigation'
 
 export const metadata: Metadata = {
@@ -21,6 +22,7 @@ export default async function TotalsPage({
 }: {
   params: { groupId: string }
 }) {
+  const t = await getTranslations('Stats')
   const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
@@ -31,10 +33,8 @@ export default async function TotalsPage({
     <>
       <Card className="mb-4">
         <CardHeader>
-          <CardTitle>Totals</CardTitle>
-          <CardDescription>
-            Spending summary of the entire group.
-          </CardDescription>
+          <CardTitle>{t('Totals.title')}</CardTitle>
+          <CardDescription>{t('Totals.description')}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col space-y-4">
           <Totals

src/app/groups/[groupId]/stats/totals-group-spending.tsx

@@ -1,4 +1,5 @@
 import { formatCurrency } from '@/lib/utils'
+import { useLocale, useTranslations } from 'next-intl'
 
 type Props = {
   totalGroupSpendings: number
@@ -6,12 +7,14 @@ type Props = {
 }
 
 export function TotalsGroupSpending({ totalGroupSpendings, currency }: Props) {
-  const balance = totalGroupSpendings < 0 ? 'earnings' : 'spendings'
+  const locale = useLocale()
+  const t = useTranslations('Stats.Totals')
+  const balance = totalGroupSpendings < 0 ? 'groupEarnings' : 'groupSpendings'
   return (
     <div>
-      <div className="text-muted-foreground">Total group {balance}</div>
+      <div className="text-muted-foreground">{t(balance)}</div>
       <div className="text-lg">
-        {formatCurrency(currency, Math.abs(totalGroupSpendings))}
+        {formatCurrency(currency, Math.abs(totalGroupSpendings), locale)}
       </div>
     </div>
   )

src/app/groups/[groupId]/stats/totals-your-share.tsx

@@ -2,6 +2,7 @@
 import { getGroup, getGroupExpenses } from '@/lib/api'
 import { getTotalActiveUserShare } from '@/lib/totals'
 import { cn, formatCurrency } from '@/lib/utils'
+import { useLocale, useTranslations } from 'next-intl'
 import { useEffect, useState } from 'react'
 
 type Props = {
@@ -10,6 +11,8 @@ type Props = {
 }
 
 export function TotalsYourShare({ group, expenses }: Props) {
+  const locale = useLocale()
+  const t = useTranslations('Stats.Totals')
   const [activeUser, setActiveUser] = useState('')
 
   useEffect(() => {
@@ -25,14 +28,14 @@ export function TotalsYourShare({ group, expenses }: Props) {
 
   return (
     <div>
-      <div className="text-muted-foreground">Your total share</div>
+      <div className="text-muted-foreground">{t('yourShare')}</div>
       <div
         className={cn(
           'text-lg',
           totalActiveUserShare < 0 ? 'text-green-600' : 'text-red-600',
         )}
       >
-        {formatCurrency(currency, Math.abs(totalActiveUserShare))}
+        {formatCurrency(currency, Math.abs(totalActiveUserShare), locale)}
       </div>
     </div>
   )

src/app/groups/[groupId]/stats/totals-your-spending.tsx

@@ -3,6 +3,7 @@ import { getGroup, getGroupExpenses } from '@/lib/api'
 import { useActiveUser } from '@/lib/hooks'
 import { getTotalActiveUserPaidFor } from '@/lib/totals'
 import { cn, formatCurrency } from '@/lib/utils'
+import { useLocale, useTranslations } from 'next-intl'
 
 type Props = {
   group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
@@ -10,6 +11,8 @@ type Props = {
 }
 
 export function TotalsYourSpendings({ group, expenses }: Props) {
+  const locale = useLocale()
+  const t = useTranslations('Stats.Totals')
   const activeUser = useActiveUser(group.id)
 
   const totalYourSpendings =
@@ -17,11 +20,11 @@ export function TotalsYourSpendings({ group, expenses }: Props) {
       ? 0
       : getTotalActiveUserPaidFor(activeUser, expenses)
   const currency = group.currency
-  const balance = totalYourSpendings < 0 ? 'earnings' : 'spendings'
+  const balance = totalYourSpendings < 0 ? 'yourEarnings' : 'yourSpendings'
 
   return (
     <div>
-      <div className="text-muted-foreground">Your total {balance}</div>
+      <div className="text-muted-foreground">{t(balance)}</div>
 
       <div
         className={cn(
@@ -29,7 +32,7 @@ export function TotalsYourSpendings({ group, expenses }: Props) {
           totalYourSpendings < 0 ? 'text-green-600' : 'text-red-600',
         )}
       >
-        {formatCurrency(currency, Math.abs(totalYourSpendings))}
+        {formatCurrency(currency, Math.abs(totalYourSpendings), locale)}
       </div>
     </div>
   )