Feat/herbatika editable UI translations

apps/herbatika/AGENTS.md

@@ -50,7 +50,7 @@
 - From the repo root, prefer `pnpm -C apps/herbatika <script>` for app scripts.
 - Do not use the root frontend-demo `localhost:3000` assumption for this app.
 - `pnpm build` builds production output; `pnpm start` serves the production build.
-- Temporary rule: do not run Biome commands in this app until stability issue is resolved.
+- Run `pnpm -C apps/herbatika lint` before handoff to match the Nx/CI Biome check.
 
 ## Testing Workflow
 - For manual QA, use skill `local-web-testing`.
@@ -69,3 +69,11 @@
   - `~/.local/share/medusa`
   - `~/.local/share/zagjs`
 - If local mirrors are missing/outdated, use official upstream docs.
+
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+
+**Keep this block, including in commits.** It is part of the project's agent setup, maintained by `next dev` for every agent that works here. If it appears as an uncommitted change, that is intentional — commit it as-is. Do not remove it to clean up a diff; it will be regenerated.
+<!-- END:nextjs-agent-rules -->

apps/herbatika/next.config.ts

@@ -1,5 +1,8 @@
 import { join } from "node:path"
 import type { NextConfig } from "next"
+import createNextIntlPlugin from "next-intl/plugin"
+
+const withNextIntl = createNextIntlPlugin()
 
 type ImageRemotePattern = {
   protocol: "http" | "https"
@@ -52,9 +55,19 @@ const shouldDisableImageOptimization = imageRemotePatterns.some(
 )
 
 const nextConfig: NextConfig = {
+  allowedDevOrigins: [
+    "herbatica.sk",
+    "herbatica.cz",
+    "herbatica.hu",
+    "herbatica.ro",
+  ],
   reactStrictMode: true,
   output: "standalone",
-  transpilePackages: ["@techsio/ui-kit", "@techsio/storefront-data"],
+  transpilePackages: [
+    "@techsio/ui-kit",
+    "@techsio/storefront-data",
+    "@techsio/storefront-i18n",
+  ],
   reactCompiler: true,
   cacheComponents: true,
   outputFileTracingRoot: join(__dirname, "../../"),
@@ -96,4 +109,4 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default withNextIntl(nextConfig)

apps/herbatika/package.json

@@ -30,8 +30,10 @@
     "@tanstack/react-form": "^1.27.4",
     "@tanstack/react-query": "^5.90.2",
     "@techsio/storefront-data": "workspace:*",
+    "@techsio/storefront-i18n": "workspace:*",
     "@techsio/ui-kit": "workspace:*",
     "next": "16.3.0-preview.5",
+    "next-intl": "^4.13.2",
     "nuqs": "^2.8.8",
     "qrcode": "1.5.4",
     "react": "19.2.3",

apps/herbatika/src/app/auth/forgot-password/forgot-password-panel.tsx

@@ -1,23 +1,23 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { useState } from "react"
 import { ForgotPasswordForm } from "@/components/auth/forgot-password-form"
 import { requestPasswordResetProxy } from "@/lib/storefront/auth/proxy"
 
 const LOGIN_HREF = "/auth/login"
 
 export const ForgotPasswordPanel = () => {
+  const tAuth = useTranslations("auth")
   const [isBusy, setIsBusy] = useState(false)
 
   const handleSubmit = async (values: { email: string }) => {
     setIsBusy(true)
     try {
       await requestPasswordResetProxy(values.email)
       return null
-    } catch (error) {
-      return error instanceof Error
-        ? error.message
-        : "Nepodarilo sa odoslať odkaz na obnovu hesla."
+    } catch {
+      return tAuth("forgot.failed")
     } finally {
       setIsBusy(false)
     }
@@ -26,10 +26,9 @@ export const ForgotPasswordPanel = () => {
   return (
     <section className="mx-auto max-w-max-w space-y-400 p-400">
       <header className="space-y-200">
-        <h1 className="font-semibold text-lg">Zabudnuté heslo</h1>
+        <h1 className="font-semibold text-lg">{tAuth("forgot.title")}</h1>
         <p className="text-fg-secondary text-sm">
-          Zadajte e-mailovú adresu, na ktorú máte vytvorený účet. Pošleme vám
-          odkaz na obnovu hesla.
+          {tAuth("forgot.description")}
         </p>
       </header>
 

apps/herbatika/src/app/auth/reset-password/reset-password-panel.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { useState } from "react"
 import { ResetPasswordForm } from "@/components/auth/reset-password-form"
 import { requestPasswordUpdateProxy } from "@/lib/storefront/auth/proxy"
@@ -15,55 +16,40 @@ type ResetPasswordPanelProps = {
   flow: ResetPasswordFlow
 }
 
-const getResetPasswordCopy = ({
-  email,
-  flow,
-}: {
-  email: string | null
-  flow: ResetPasswordFlow
-}) => {
-  if (flow === "account-setup") {
-    return {
-      description: email
-        ? `Dokončite registráciu účtu ${email} nastavením hesla.`
-        : "Dokončite registráciu účtu nastavením hesla.",
-      expiredHref: FORGOT_PASSWORD_HREF,
-      expiredHelp:
-        "Na prihlasovacej stránke si môžete vyžiadať nový odkaz na nastavenie hesla.",
-      expiredLinkLabel: "Vyžiadať nový odkaz na nastavenie hesla",
-      expiredMessage:
-        "Tento odkaz na dokončenie registrácie je neplatný alebo už vypršal.",
-      submitError: "Nepodarilo sa nastaviť heslo.",
-      submitLabel: "Nastaviť heslo",
-      successMessage: "Heslo bolo úspešne nastavené. Môžete sa prihlásiť.",
-      title: "Nastavenie hesla",
-    }
-  }
-
-  return {
-    description: email
-      ? `Nastavte nové heslo pre účet ${email}.`
-      : "Zadajte nové heslo pre váš účet.",
-    expiredHref: FORGOT_PASSWORD_HREF,
-    expiredHelp: "Skúste si vyžiadať nový odkaz na obnovu hesla.",
-    expiredLinkLabel: "Vyžiadať nový odkaz",
-    expiredMessage: "Tento odkaz je neplatný alebo už vypršal.",
-    submitError: "Nepodarilo sa obnoviť heslo.",
-    submitLabel: "Obnoviť heslo",
-    successMessage:
-      "Heslo bolo úspešne zmenené. Môžete sa prihlásiť pomocou nového hesla.",
-    title: "Obnova hesla",
-  }
-}
-
 export const ResetPasswordPanel = ({
   token,
   email,
   flow,
 }: ResetPasswordPanelProps) => {
+  const tAuth = useTranslations("auth")
   const [isBusy, setIsBusy] = useState(false)
   const hasToken = Boolean(token)
-  const copy = getResetPasswordCopy({ email, flow })
+  const copy =
+    flow === "account-setup"
+      ? {
+          description: email
+            ? tAuth("account_setup.description_with_email", { email })
+            : tAuth("account_setup.description"),
+          expiredHelp: tAuth("account_setup.expired_help"),
+          expiredLinkLabel: tAuth("account_setup.expired_link"),
+          expiredMessage: tAuth("account_setup.expired_message"),
+          submitError: tAuth("account_setup.failed"),
+          submitLabel: tAuth("account_setup.submit"),
+          successMessage: tAuth("account_setup.success"),
+          title: tAuth("account_setup.title"),
+        }
+      : {
+          description: email
+            ? tAuth("reset.description_with_email", { email })
+            : tAuth("reset.description"),
+          expiredHelp: tAuth("reset.expired_help"),
+          expiredLinkLabel: tAuth("reset.expired_link"),
+          expiredMessage: tAuth("reset.expired_message"),
+          submitError: tAuth("reset.failed"),
+          submitLabel: tAuth("reset.submit"),
+          successMessage: tAuth("reset.success"),
+          title: tAuth("reset.title"),
+        }
 
   const handleSubmit = async (values: {
     password: string
@@ -80,8 +66,8 @@ export const ResetPasswordPanel = ({
         token,
       })
       return null
-    } catch (error) {
-      return error instanceof Error ? error.message : copy.submitError
+    } catch {
+      return copy.submitError
     } finally {
       setIsBusy(false)
     }
@@ -101,7 +87,7 @@ export const ResetPasswordPanel = ({
         loginHref={LOGIN_HREF}
         onSubmit={handleSubmit}
         text={{
-          expiredHref: copy.expiredHref,
+          expiredHref: FORGOT_PASSWORD_HREF,
           expiredHelp: copy.expiredHelp,
           expiredLinkLabel: copy.expiredLinkLabel,
           expiredMessage: copy.expiredMessage,

apps/herbatika/src/app/layout.tsx

@@ -7,13 +7,17 @@ import type { RegionInfo } from "@techsio/storefront-data/shared/region"
 import type { Metadata } from "next"
 import { Inter, Open_Sans, Roboto, Rubik } from "next/font/google"
 import localFont from "next/font/local"
+import { type AbstractIntlMessages, NextIntlClientProvider } from "next-intl"
+import { getMessages } from "next-intl/server"
 import { Suspense } from "react"
 import { AppShell } from "@/components/app-shell"
 import {
   buildCategoryListParams,
   CATEGORY_TREE_FIELDS,
   CATEGORY_TREE_LIMIT,
 } from "@/lib/storefront/category-query-config"
+import type { HerbatikaMarketContext } from "@/lib/storefront/market-context"
+import { getMarketServerContext } from "@/lib/storefront/market-context.server"
 import { getRegionServerContext } from "@/lib/storefront/ssr/context"
 import { fetchServerCategories } from "@/lib/storefront/storefront-server"
 import "./globals.css"
@@ -61,39 +65,58 @@ const roboto = Roboto({
   display: "swap",
 })
 
-export const metadata: Metadata = {
-  title: "Herbatica",
-  description: "Herbatica e-shop - prírodné produkty",
+export async function generateMetadata(): Promise<Metadata> {
+  const marketContext = await getMarketServerContext()
+
+  return {
+    title: marketContext.metadata.title,
+    description: marketContext.metadata.description,
+  }
 }
 
 type LayoutShellProps = Readonly<{
   children: React.ReactNode
   dehydratedState: DehydratedState
   initialRegion?: RegionInfo | null
+  marketContext: HerbatikaMarketContext
+  messages: AbstractIntlMessages
 }>
 
 function LayoutShell({
   children,
   dehydratedState,
   initialRegion = null,
+  marketContext,
+  messages,
 }: LayoutShellProps) {
   return (
-    <Providers initialRegion={initialRegion}>
-      <HydrationBoundary state={dehydratedState}>
-        <Suspense fallback={<div className="min-h-dvh bg-base" />}>
-          <AppShell>{children}</AppShell>
-        </Suspense>
-      </HydrationBoundary>
-    </Providers>
+    <NextIntlClientProvider messages={messages}>
+      <Providers
+        initialMarketContext={marketContext}
+        initialRegion={initialRegion}
+      >
+        <HydrationBoundary state={dehydratedState}>
+          <Suspense fallback={<div className="min-h-dvh bg-base" />}>
+            <AppShell>{children}</AppShell>
+          </Suspense>
+        </HydrationBoundary>
+      </Providers>
+    </NextIntlClientProvider>
   )
 }
 
 async function ResolvedLayoutShell({
   children,
+  marketContext,
 }: Readonly<{
   children: React.ReactNode
+  marketContext: HerbatikaMarketContext
 }>) {
-  const { queryClient, region } = await getRegionServerContext()
+  const [{ queryClient, region }, messages] = await Promise.all([
+    getRegionServerContext(),
+    getMessages(),
+  ])
+
   try {
     await fetchServerCategories(
       queryClient,
@@ -111,31 +134,49 @@ async function ResolvedLayoutShell({
     <LayoutShell
       dehydratedState={dehydrate(queryClient)}
       initialRegion={region}
+      marketContext={marketContext}
+      messages={messages}
     >
       {children}
     </LayoutShell>
   )
 }
 
-export default function RootLayout({
+async function ResolvedRootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
+  const marketContext = await getMarketServerContext()
+
   return (
     <html
       className={`${verdana.variable} ${openSans.variable} ${inter.variable} ${rubik.variable} ${roboto.variable}`}
-      lang="sk"
+      lang={marketContext.htmlLang}
     >
       <body className={`text-fg-primary ${verdana.className}`}>
         <Suspense
           // Avoid rendering a fallback app shell here. During streaming, it can
           // coexist with the resolved shell and duplicate header popover ids.
           fallback={<div className="min-h-dvh bg-base" />}
         >
-          <ResolvedLayoutShell>{children}</ResolvedLayoutShell>
+          <ResolvedLayoutShell marketContext={marketContext}>
+            {children}
+          </ResolvedLayoutShell>
         </Suspense>
       </body>
     </html>
   )
 }
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <Suspense fallback={null}>
+      <ResolvedRootLayout>{children}</ResolvedRootLayout>
+    </Suspense>
+  )
+}