Lisätty käännöksiä ja logiikkaa eri ohjeille

src/clj/maksut/maksut/maksut_service.clj

@@ -10,7 +10,9 @@
             [clj-time.core :as time]
             [schema.core :as s]
             [ring.util.http-response :as response]
-            [taoensso.timbre :as log])
+            [taoensso.timbre :as log]
+            [camel-snake-kebab.core :as csk]
+            [camel-snake-kebab.extras :as cske])
   (:import (java.math RoundingMode)
            [java.time LocalDate]))
 
@@ -44,7 +46,9 @@
                (iso-date-str->date (:due-date lasku))
                (time/plus (time/today) (time/days (:due-days lasku))))
     :amount (.setScale (bigdec (:amount lasku)) 2 RoundingMode/HALF_UP)
-    :metadata (or (:metadata lasku) {})))
+    :metadata (cske/transform-keys
+                (csk/->snake_case)
+                (or (:metadata lasku) {}))))
 
 (defn- parse-order-id [prefixes lasku]
   (let [trim-zeroes (fn this [str] (if (clojure.string/starts-with? str "0")
@@ -149,7 +153,6 @@
             passed? #(.isAfter now %)
             all-passed? (every? passed? (mapv :due_date laskut))]
         ;do not let user to the page if all due_dates for all (linked) invoices has passed
-        (log/info "laskut " laskut)
         (if all-passed?
           (throw-specific-old-secret-error laskut secret)
           (map Lasku->json laskut)))

src/cljc/maksut/api_schemas.cljc

@@ -17,12 +17,17 @@
   {:id       s/Int
    :category s/Str
    :key      s/Str
-   :locale   (s/enum "fi" "sv" "en")
+   :locale   Locale
    :value    s/Str
    s/Any     s/Any})
 
+(s/defschema LocalizedString
+  {(s/optional-key :fi) s/Str
+   (s/optional-key :sv) s/Str
+   (s/optional-key :en) s/Str})
+
 (s/defschema Metadata
-  {(s/optional-key :form-name) s/Str})
+  {(s/optional-key :form-name) LocalizedString})
 
 ;Paytrail palauttamat kentät (konfiguroitavissa PARAMS-OUT kentässä)
 (s/defschema PaytrailCallbackRequest
@@ -97,7 +102,7 @@
    (s/optional-key :paid_at) s/Str  ;java.time.LocalDate - Does not port to CLJS
    :origin Origin
    :reference s/Str
-   (s/optional-key :metadata) Metadata})
+   (s/optional-key :metadata) s/Any})
 
 (s/defschema Laskut
   [Lasku])

src/maksut-ui/app/components/AstuPanel.tsx

@@ -1,15 +1,20 @@
+'use client'
+
 import { Lasku } from "@/app/lib/types";
 import styles from "@/app/page.module.css";
 import Maksu from "@/app/components/Maksu";
 import { Box } from "@mui/material";
+import { useTranslations } from "@/app/i18n/useTranslations";
+
+const AstuPanel = ({ lasku }: {lasku: Lasku}) => {
+  const {t, translateEntity} = useTranslations();
 
-const AstuPanel = ({lasku}: {lasku: Lasku}) => {
   return (
     <>
-      <h2>{lasku.reference}</h2>
+      <h2>{translateEntity(lasku.metadata?.form_name)}</h2>
       <span>Hakemuksesi käsitelty jne. loremipsum</span>
       <Box className={styles.maksut}>
-        <Maksu lasku={lasku}/>
+        <Maksu lasku={lasku} title={t('maksu.päätös')}/>
       </Box>
     </>)
 }

src/maksut-ui/app/components/Header.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { Box } from "@mui/material";
+import { Lasku } from "@/app/lib/types";
+import { useTranslations } from "@/app/i18n/useTranslations";
+
+const Header = ({lasku}: {lasku: Lasku}) => {
+  const {t} = useTranslations();
+
+  return (
+    <Box style={{textAlign: 'center'}}>
+      <h3>{`${lasku.last_name} ${lasku.first_name}`}</h3>
+      <h1>{t('title')}</h1>
+    </Box>
+  )
+}
+
+export default Header;

src/maksut-ui/app/components/Maksu.tsx

@@ -1,13 +1,28 @@
+'use client'
+
 import styles from "@/app/page.module.css";
 import { Lasku } from "@/app/lib/types";
+import { useTranslations } from "@/app/i18n/useTranslations";
+
+const Maksu = ({lasku, title}: {lasku: Lasku, title: string}) => {
+  const {t} = useTranslations();
+
+  const parseDate = (date: string) => {
+    const [year, month, day] = date.split("-");
+    return `${day}.${month}.${year}`;
+  }
+
+  return (
+    <div className={styles.maksu}>
+      <h4>{title}</h4>
 
-const Maksu = ({lasku}: {lasku: Lasku}) => {
-  return <div className={styles.maksu}>
-    Päätösmaksu<br/>
-    Tila {lasku.status}<br/>
-    Määrä {`${lasku.amount}€`}<br/>
-    Eräpäivä {`${lasku.due_date}`}<br/>
-  </div>
+      {t('maksu.tila')} {t(`maksu.tila.${lasku.status}`)}<br/>
+      {t('maksu.summa')} {`${lasku.amount}€`}<br/>
+      {lasku.status ?
+        `${t('maksu.eräpäivä')} ${parseDate(lasku.due_date)}` :
+        `${t('maksu.maksupäivä')} ${parseDate(lasku.paid_at)}`}<br/>
+    </div>
+  )
 }
 
 export default Maksu

src/maksut-ui/app/components/MaksutPanel.tsx

@@ -1,16 +1,25 @@
 'use client'
 
-import { Lasku } from "@/app/lib/types";
+import { Lasku, Locale } from "@/app/lib/types";
 import TutuPanel from "@/app/components/TutuPanel";
 import AstuPanel from "@/app/components/AstuPanel";
 import { Box, useTheme } from "@mui/material";
 import { Button, colors } from "@opetushallitus/oph-design-system"
 import { backendUrl } from "@/app/lib/configurations";
 import { notFound } from "next/navigation";
+import { useEffect } from "react";
+import { useTranslations } from "@/app/i18n/useTranslations";
 
-export default function MaksutPanel({ laskut, secret, locale }: {laskut: Array<Lasku>, secret: string, locale: string}) {
+export const dynamic = 'force-dynamic';
+
+export default function MaksutPanel({ laskut, secret, locale }: {laskut: Array<Lasku>, secret: string, locale: Locale}) {
   const theme = useTheme()
   const activeLasku = laskut.find((lasku) => lasku.secret === secret)
+  const {t, i18n} = useTranslations();
+
+  useEffect(() => {
+    i18n.changeLanguage(locale)
+  }, [locale, i18n])
 
   if (activeLasku === undefined) {
     notFound()
@@ -41,7 +50,7 @@ export default function MaksutPanel({ laskut, secret, locale }: {laskut: Array<L
         href={`${backendUrl}/lasku/${activeLasku.order_id}/maksa?secret=${secret}&locale=${locale}`}
         disabled={activeLasku.status !== 'active'}
       >
-        Maksa
+        {t('maksutPanel.maksa')}
       </Button>
     </Box>
   );

src/maksut-ui/app/components/TopBar.tsx

@@ -2,6 +2,7 @@
 
 import { AppBar, Box, useTheme } from "@mui/material";
 import Image from "next/image";
+
 export const TopBar = ({lang}: {lang: string} ) => {
   const theme = useTheme()
   return (

src/maksut-ui/app/components/TutuPanel.tsx

@@ -1,19 +1,59 @@
+'use client'
+
 import { Lasku } from "@/app/lib/types";
 import styles from "@/app/page.module.css";
 import Maksu from "@/app/components/Maksu";
-import { Box, Button } from "@mui/material";
+import { Box } from "@mui/material";
+import { useTranslations } from "@/app/i18n/useTranslations";
 
 const TutuPanel = ({laskut}: {laskut: Array<Lasku>}) => {
   const kasittely = laskut.find((lasku) => lasku.order_id.endsWith('-1'))
   const paatos = laskut.find((lasku) => lasku.order_id.endsWith('-2'))
+  const {t} = useTranslations();
+
+  const stateText = () => {
+    if (paatos) {
+      if (paatos.status === 'paid') {
+        return (
+          <>
+            <span>{t('tutuPanel.paatosMaksettu')}</span>
+            <span>{t('maksutPanel.yhteiskäytto')}</span>
+          </>
+        )
+      } else {
+        return <span>{t('tutuPanel.paatosMaksamatta')}</span>
+      }
+    }
+    if (kasittely) {
+      if (kasittely.status === 'paid') {
+        return (
+          <>
+            <span>{t('tutuPanel.kasittelyMaksettu1')}</span>
+            <span>{t('tutuPanel.kasittelyMaksettu2')}</span>
+            <span>{t('tutuPanel.kasittelyMaksettu3')}</span>
+            <span>{t('maksutPanel.yhteiskäytto')}</span>
+          </>
+        )
+      } else {
+        return (
+          <>
+          <span>{t('tutuPanel.kasittelyMaksamatta1')}</span>
+            <span>{t('tutuPanel.kasittelyMaksamatta2')}</span>
+            <span>{t('tutuPanel.kasittelyMaksamatta3')}</span>
+            <span>{t('tutuPanel.kasittelyMaksamatta4')}</span>
+          </>
+        )
+      }
+    }
+  }
 
   return (
     <>
-      <h2>Tutu lasku title</h2>
-      <span>Hakemuksesi käsitelty jne. loremipsum</span>
+      <h2>{t('tutuPanel.title')}</h2>
+      {stateText()}
       <Box className={styles.maksut}>
-        {kasittely && <Maksu lasku={kasittely}/>}
-        {paatos && <Maksu lasku={paatos}/>}
+        {kasittely && <Maksu lasku={kasittely} title={t('maksu.käsittely')}/>}
+        {paatos && <Maksu lasku={paatos} title={t('maksu.päätös')}/>}
       </Box>
     </>
   )

src/maksut-ui/app/i18n/localizations.ts

@@ -0,0 +1,30 @@
+'use client'
+
+import FetchBackend from 'i18next-fetch-backend';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { backendUrl, isDev } from "@/app/lib/configurations";
+
+export const FALLBACK_LOCALE = 'fi';
+export const SUPPORTED_LOCALES = ['en', 'fi', 'sv'] as const;
+
+export const createLocalization = () => {
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  i18n
+    .use(FetchBackend)
+    .use(initReactI18next)
+    .init({
+      debug: isDev, // Set to true to see console logs
+      backend: {
+        loadPath: `${backendUrl}/localisation/{{lng}}`,
+        requestOptions: {
+          mode: 'no-cors',
+        }
+      },
+      preload: SUPPORTED_LOCALES,
+      supportedLngs: SUPPORTED_LOCALES,
+      fallbackLng: FALLBACK_LOCALE,
+      lng: FALLBACK_LOCALE,
+    })
+  return i18n;
+};

src/maksut-ui/app/i18n/localizationsProvider.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { I18nextProvider } from "react-i18next";
+import { createLocalization } from "@/app/i18n/localizations";
+
+const localizations = createLocalization()
+
+export default function LocalizationsProvider({ children} : { children: React.ReactNode }) {
+  return (
+    <I18nextProvider i18n={localizations}>{children}</I18nextProvider>
+  )
+}

src/maksut-ui/app/i18n/translationUtils.ts

@@ -0,0 +1,17 @@
+import { Locale, LocalizedString } from "@/app/lib/types";
+
+export function translateLocalizedString(
+  translated: LocalizedString,
+  userLanguage: Locale = 'fi',
+): string {
+  const prop = userLanguage as keyof LocalizedString;
+  const translation = translated[prop];
+  if (translation && translation?.trim().length > 0) {
+    return translated[prop] || '';
+  } else if (translated.fi && translated.fi.trim().length > 0) {
+    return translated.fi;
+  } else if (translated.en && translated.en.trim().length > 0) {
+    return translated.en;
+  }
+  return translated.sv || '';
+}

src/maksut-ui/app/i18n/useTranslations.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { useTranslation } from 'react-i18next';
+import { useCallback } from 'react';
+import { Locale, LocalizedString } from "@/app/lib/types";
+import { translateLocalizedString } from "@/app/i18n/translationUtils";
+
+export const useTranslations = () => {
+  const { t, i18n } = useTranslation();
+  const translateEntity = useCallback(
+    (translateable?: LocalizedString) => {
+      return translateable
+        ? translateLocalizedString(translateable, i18n.language as Locale)
+        : '';
+    },
+    [i18n],
+  );
+
+  return { t, translateEntity, language: i18n.language as Locale, i18n };
+};

src/maksut-ui/app/lib/configurations.ts

@@ -1 +1,3 @@
-export const backendUrl: string = process.env.MAKSUT_URL || "https://localhost:9000/maksut/api"
+export const backendUrl: string = process.env.MAKSUT_URL || "https://localhost:9000/maksut/api"
+
+export const isDev: boolean = (process.env.DEVELOPMENT === 'true') || true

src/maksut-ui/app/lib/data.ts

@@ -1,5 +1,5 @@
 import { backendUrl } from "@/app/lib/configurations";
-import { Lasku } from "@/app/lib/types";
+import { Lasku, Locale } from "@/app/lib/types";
 
 export const fetchLaskutBySecret = async (secret: string | undefined): Promise<Array<Lasku>> => {
   const response = await fetch(`${backendUrl}/laskut-by-secret?secret=${secret}`, {cache: "no-cache"})