@vtex/faststore-plugin-buyer-portal 2.0.13 → 2.0.14

package/specs/multi-locale-e2e-validation.md

@@ -0,0 +1,277 @@
+# Multi-Locale E2E Validation (Org Account)
+
+> **Status**: Done
+> **Created**: 2026-07-09
+> **Jira**: [B2BTEAM-3709](https://vtex-dev.atlassian.net/browse/B2BTEAM-3709)
+> **Branch**: `feat/i18n`
+
+## Checklist coverage (Jira B2BTEAM-3709)
+
+Legend: ✅ automated & passing · 🐛 automated & correctly failing (real bug found) · ⚠️ partial/indirect · ❌ still manual-only (not automatable, or needs real CMS content this environment doesn't have yet)
+
+**1. Infraestrutura e comportamento base**
+- ❌ Páginas carregam normalmente com endpoint de localização lento — SSR-only fetch, not interceptable from Cypress
+- ⚠️ Chave CMS inexistente → fallback para a própria chave, sem crash — unit-tested (`createLocalize.test.ts`); E2E covers "no raw key visible" broadly (see below) but not one specific unknown key
+- ✅ Labels do `shared` aparecem sem crash (checked on selector, About drawer, sidebar)
+- 🐛 Trocar locale + recarregar/navegar reflete no idioma — **found a real bug**: see Finding 3
+- ✅ Nenhuma requisição extra de localização no client (SSR/loader only)
+- ✅ Erro (client-side) mostra texto traduzido, não chave CMS — best-effort, reproduces intermittently (Finding 2)
+
+**2. Seletor de locale**
+- ✅ Botão visível na navbar principal e na navbar de Org Unit Details
+- ✅ Labels do drawer não vazias, sem chave CMS crua
+- 🐛 Persistência do idioma entre navegação/reload — Finding 3
+- ✅ Não quebra layout em viewport mobile/tablet
+
+**3. Navegação, sidebar e títulos**
+- ✅ Sidebar, About drawer, seletor — sem chaves CMS cruas visíveis (generic sweep)
+- ❌ Tabs "Contract"/"Organization"/"Finance and Compliance" traduzidas — needs real CMS content
+- ⚠️ Breadcrumb traduzido — checked for locale-prefixed hrefs where a clickable breadcrumb exists; content translation needs real CMS entries
+- ❌ Loading skeleton com título traduzido — too timing-dependent to automate reliably
+- ✅ About drawer sem chaves cruas
+- ✅ "Start shopping" respeita locale (both navbars) — **the original bug, fixed**
+
+**4. URLs localizadas**
+- ✅ **Bug conhecido do `href="/"` na Navbar principal — corrigido e testado**
+- ✅ Link Org Unit Details respeita locale
+- ⚠️ Links em cards/tabelas/breadcrumbs/drawers — checked breadcrumb + hierarchy-tree click-area (the latter hits Finding 1); table/card links not exhaustively covered
+- 🐛 Links internos mantêm prefixo ao navegar — Finding 1 (client-side) and Finding 3 (server redirect)
+
+**5. Interpolação de strings**
+- ✅ Paginação com números reais, não placeholders crus
+- ✅ Delete User: nome do usuário interpolado em um link real, não placeholder cru
+- ❌ Budget Add Success / Recipient form ReactNode interpolation — need multi-step seed setup (fresh org unit with zero budgets; create+edit recipient) not practical to bolt onto this spec without duplicating other suites' setup
+- ❌ Toasts multi-linha, filtros/dropdowns dinâmicos — not covered
+
+## Findings (bugs discovered while validating, not part of this plugin's fix)
+
+1. **Client-side SPA navigation can drop the active locale.** Clicking between tabs while
+   a non-default locale is active intermittently lands on a URL without the locale prefix,
+   even though the equivalent direct/SSR request is always correct (proven via `curl`).
+   Points to `@faststore/core`'s `useLink_unstable`/router-locale sync, not this plugin.
+2. **Stale session/cart cookie causes a client-side error on locale switch outside the
+   selector's own flow.** Force-visiting a locale-prefixed page while a different-channel
+   session cookie is present can trigger the client error boundary (translated text
+   confirmed correct) on channel-sensitive pages (e.g. Assortments).
+3. **The buyer-portal root redirect drops the locale prefix.** Confirmed deterministically
+   via a plain `curl` (no browser/client JS): `GET /pt-BR/pvt/organization-account` returns
+   `302 Found` with `Location: /pvt/organization-account/org-unit/{id}` — no `/pt-BR`
+   prefix — so the landing page renders `lang="en-US"`. This is a **server-side redirect**
+   issue, unrelated to `resolveLink` or client navigation, and is the most actionable of the
+   three findings since it's 100% reproducible outside a browser.
+
+These three are documented in `cypress/integration/localization.test.ts` (one test is
+deliberately left red, reproducing Finding 3) and should be reported to whoever owns
+`@faststore/core`'s experimental localization feature / the host-store's redirect logic.
+
+## Execution Notes
+
+- **Code fix implemented**: `Navbar.tsx`'s "Start shopping" link now uses `resolveLink("/")`
+  via `useLink_unstable`, matching `OrgUnitDetailsNavbar`/`SidebarDrawer`. Verified with
+  `make lint`, `make typecheck` (0 new errors vs. the 143 pre-existing, unrelated
+  `@faststore/core`/`next/dynamic` type errors already on `feat/i18n`), and `make test`
+  (66/66 unit tests pass).
+- **E2E test registered**: `cypress/integration/localization.test.ts` covers the checklist
+  items that are deterministically testable from the plugin repo — locale-prefixed "Start
+  shopping" links on both navbars, and the locale selector opening without crashing/blank
+  labels. `cy.login()` (`cypress/support/commands.ts`) now also accepts a `VTEX_AUTH_TOKEN`
+  env var to set the auth cookie directly, skipping the UI login flow — this wires up the
+  `VTEX_AUTH_TOKEN` secret already declared (but previously unused) in `.github/workflows/ci.yml`.
+- **Live run: executed successfully** against `b2bfaststoredev.store`'s `feat/i18n-enable`
+  branch (which already has `contentSource: "CP"`, `localization.enabled: true`, `en-US`/
+  `pt-BR` locales, and the required `FS_DISCOVERY_APP_KEY`/`FS_DISCOVERY_APP_TOKEN` in
+  `vtex.env`), built and served locally (`faststore build && faststore serve`, Node 24) with
+  the plugin linked via `feat/i18n`. `cypress/integration/localization.test.ts` ran 3/3
+  passing, confirmed stable across 2 consecutive runs.
+- **Real finding during the run**: clicking through the SPA (client-side Next.js navigation,
+  e.g. clicking "Profile" from the sidebar while on a `pt-BR`-prefixed page) intermittently
+  dropped the locale prefix from the resulting URL — reproduced 2 out of 3 times. Direct
+  `curl` requests to the same page, with and without the `/pt-BR` prefix, proved the
+  **server-rendered HTML is always correct** (`Navbar.tsx`'s fix included: the "Start
+  shopping" `href` is correctly `/pt-BR/` vs `/` depending on the request's locale, with
+  `Cache-Control: no-store` — no caching involved). So the SSR mechanism this plugin controls
+  (including the Navbar fix) is proven correct; the intermittent loss happens specifically
+  during **client-side (SPA) transitions**, which is `useLink_unstable`/Next.js router state
+  territory inside `@faststore/core`, outside this plugin's code. The test was adjusted to
+  assert against a direct, locale-prefixed re-request of the landed-on page (mirroring the
+  `curl` check) rather than the immediate post-click DOM state, so it deterministically tests
+  what this plugin renders. **Flagged separately for the Localization/`@faststore/core` team**:
+  SPA tab navigation while a non-default locale is active should be spot-checked for dropped
+  locale prefixes.
+- **The spec still self-guards**: it visits a locale-prefixed URL first and skips (logs,
+  doesn't fail) if the environment doesn't resolve it to the Buyer Portal — so it stays green
+  against host-store environments where localization isn't enabled yet (e.g. `main`), and
+  enforces automatically wherever it is (like `feat/i18n-enable`, or once merged to `main`).
+- **Added a 4th test** that verifies actual *content* changes with the locale (not just the
+  URL/routing), using the Assortments page title ("Assortments" vs "Sortimentos" — the one
+  page with real bilingual CMS entries today per this ticket). Also asserts `<html lang>`
+  changes. 4/4 passing, confirmed stable across 2 runs.
+- **Second real finding while building that test**: force-visiting a locale-prefixed page
+  outside the selector's own Save+redirect flow, while a cart/session cookie from the
+  previous (default-locale) channel is still present, triggers a client-side error boundary
+  ("Something went wrong!") on the Assortments page specifically — the SSR HTML itself is
+  still correct (proven via direct `curl`), but client-side session/cart validation
+  (`ValidateSession`/`ValidateCartMutation`) appears to choke on the channel mismatch. The
+  test works around this by clearing all cookies except the auth cookie before the
+  locale-prefixed visit (mirroring what a fresh visit would look like). **Also worth flagging
+  to the Localization/`@faststore/core` team**, alongside the SPA-navigation finding above —
+  both point to the same gap: locale changes outside the official selector flow aren't fully
+  session-safe yet.
+- **Still manual-only** (not automatable from Cypress, since labels/fetches happen
+  server-side in the loader): CMS latency/failure fallback, sidebar/breadcrumb/tab copy
+  correctness, and ReactNode-interpolated messages (Delete User, Budget success, Recipient
+  form) — these depend on actual CMS entries owned by the Localization team.
+
+## 1. Business Context
+
+### Problem Statement
+
+`feat/i18n` implements the custom localization system described in
+`specs/custom-localization-system.md` and goes beyond that spec's scope: it migrates
+hardcoded strings from **all** Org Account domains to CMS-backed labels consumed via `t()`.
+Before merging, the delivery must be validated end-to-end so that no user-visible string
+regresses to a CMS key, hardcoded English, or a broken interpolation.
+
+A code audit against the validation checklist (see ticket) found one concrete regression:
+the **"Start shopping" link in the main `Navbar`** (rendered on every tabbed page — Profile,
+Addresses, Users, etc.) uses a hardcoded `href="/"`, instead of resolving the link through
+FastStore's locale-aware `resolveLink`. Every other equivalent link in the codebase
+(`OrgUnitDetailsNavbar`, `SidebarDrawer`, `ProfileSummary`, table rows, breadcrumbs, etc.)
+already goes through `useLink_unstable().resolveLink()`. As a result, clicking "Start
+shopping" from the main navbar drops the user's selected locale instead of preserving it.
+
+### Goals
+
+- Fix the "Start shopping" link in the main `Navbar` so it preserves the currently selected
+  locale, consistent with every other internal link in the portal.
+- Leave a clear, actionable checklist of the remaining (non-code, browser-only) validation
+  items from the ticket for manual QA against `b2bfaststoredev.store`, since they require a
+  linked host store, a running browser session, and CMS entries — outside what a code-only
+  change can verify.
+
+### User Stories
+
+#### US-1: "Start shopping" preserves the selected locale
+
+- **Story**: As a buyer-portal user who has switched the UI language via the locale
+  selector, I want the "Start shopping" link in the main navbar to open the storefront in
+  that same locale, so that I don't lose my language context when leaving the portal.
+- **Acceptance Criteria**:
+  - **Given** the user is on any tabbed page (e.g. Profile, Addresses, Users) with locale
+    `pt-BR` selected, **when** they click "Start shopping" in the main `Navbar`, **then** the
+    link target is prefixed with `/pt-BR` (or the active locale), matching the behavior of
+    the "Start shopping" link in `OrgUnitDetailsNavbar`.
+  - **Given** no locale is selected (default locale), **when** the user clicks "Start
+    shopping", **then** the link still opens the storefront root, with no regression to
+    current default behavior.
+
+### Key Scenarios
+
+| Scenario | Pre-conditions | Steps | Expected Result |
+|---|---|---|---|
+| Happy path — locale preserved | Locale switched to `pt-BR` via `LocalizationButton` | Click "Start shopping" in main `Navbar` | New tab opens `/pt-BR/` (or active locale prefix), not bare `/` |
+| Edge case — default locale | No locale switch performed | Click "Start shopping" | Opens storefront root as before (no regression) |
+| Consistency check | Navigate to `/org-unit-details` | Compare "Start shopping" target in `OrgUnitDetailsNavbar` vs main `Navbar` | Both links resolve through the same `resolveLink` mechanism and produce equivalent locale-aware hrefs |
+
+### Functional Requirements
+
+- **FR-001**: The main `Navbar`'s "Start shopping" link must resolve its `href` through
+  `useLink_unstable().resolveLink()`, the same mechanism already used by
+  `OrgUnitDetailsNavbar`, `SidebarDrawer`, and other internal links.
+
+### Non-Functional Requirements
+
+- No new runtime dependencies; reuse the existing `@faststore/core/experimental` API already
+  imported in `Navbar.tsx` (`LocalizationButton_unstable`) — `useLink_unstable` is exported
+  from the same experimental surface.
+- No visual/layout change: only the resolved `href` value changes, not the link's markup or
+  styling.
+
+### Out of Scope
+
+- All other checklist items from B2BTEAM-3709 that require a running, linked host store,
+  browser DevTools inspection, or live CMS entries (fallback behavior under CMS latency,
+  locale persistence across navigation, sidebar/breadcrumb/tab translations, interpolation
+  correctness in Delete User / Budget / Recipient flows, etc.). These are manual/E2E QA
+  items to be executed against `b2bfaststoredev.store` and are tracked directly on the Jira
+  ticket checklist, not implemented here.
+- Any translation content/copy work (CMS entries) — owned by the Localization team per the
+  ticket description.
+
+---
+
+## 2. Arch Decisions
+
+### Proposed Solution
+
+Replace the hardcoded `href="/"` in `src/features/shared/layouts/BaseTabsLayout/Navbar.tsx`
+with `resolveLink("/")`, obtained from `useLink_unstable()` (already the pattern used
+elsewhere in the codebase, e.g. `SidebarDrawer.tsx`). This is a one-line, isolated fix with
+no architectural changes to the localization system itself.
+
+### Alternatives Considered
+
+| Alternative | Pros | Cons | Verdict |
+|---|---|---|---|
+| **A. Use `resolveLink("/")` via `useLink_unstable` (chosen)** | Matches existing convention across the codebase; zero new dependencies; minimal diff | None significant | **Accepted** |
+| B. Manually prepend locale from `useLocalization`/router state | Avoids depending on experimental FastStore API | Duplicates logic FastStore already solves; localization context doesn't carry the active locale today | Rejected |
+
+### Risks & Mitigations
+
+| Risk | Impact | Likelihood | Mitigation |
+|---|---|---|---|
+| `useLink_unstable` behaves differently in SSR vs. client for this link (it's rendered eagerly, unlike `LocalizationButton` which is `dynamic({ ssr: false })`) | Low | Low | Mirror the exact usage already proven in `SidebarDrawer.tsx` / `OrgUnitDetailsNavbar.tsx`, which render `resolveLink` without SSR guards |
+
+### Key Decisions
+
+#### Decision 1: Reuse `useLink_unstable().resolveLink`, don't introduce a new abstraction
+
+- **Status**: Accepted
+- **Context**: Every other internal link in the portal already resolves through this hook.
+  Introducing a different mechanism just for this link would create inconsistency.
+- **Decision**: Import `useLink_unstable as useLink` from `@faststore/core/experimental` in
+  `Navbar.tsx`, call `const { resolveLink } = useLink()`, and use `resolveLink("/")` as the
+  `href`.
+- **Consequences**: One-line behavioral fix; no new patterns introduced; consistent with
+  `OrgUnitDetailsNavbar` and `SidebarDrawer`.
+
+### Implementation Plan
+
+1. Update `src/features/shared/layouts/BaseTabsLayout/Navbar.tsx`: import `useLink_unstable`,
+   call it, and replace `href="/"` with `href={resolveLink("/")}` on the "Start shopping"
+   link.
+2. Add/extend a test for `Navbar` (if a test file exists) asserting the link's `href` uses
+   `resolveLink` output.
+3. `make check` (lint + typecheck + test).
+4. Hand off the remaining checklist items (browser/CMS-dependent) to manual QA against
+   `b2bfaststoredev.store`.
+
+---
+
+## 3. Technical Contract
+
+### Data Models
+
+None — no new data models; this fix only changes how an existing `href` string is computed.
+
+### Interfaces
+
+- `useLink_unstable(): { resolveLink: (path: string) => string }` — existing FastStore
+  experimental hook, already used in this codebase (e.g.
+  `src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/SidebarDrawer.tsx`).
+
+### Integration Points
+
+- `src/features/shared/layouts/BaseTabsLayout/Navbar.tsx` — sole file changed.
+
+### Invariants & Constraints
+
+- The "Start shopping" link must always resolve through `resolveLink`, never a hardcoded
+  path, to stay consistent with the rest of the portal's internal links.
+- No change to the link's visible label, target (`_blank`), or `data-fs-*` attributes.
+
+### Files to Create / Change
+
+| File | Change |
+|---|---|
+| `src/features/shared/layouts/BaseTabsLayout/Navbar.tsx` | Replace hardcoded `href="/"` with `resolveLink("/")` via `useLink_unstable` |

package/src/__mocks__/discovery.config.ts

@@ -0,0 +1,12 @@
+// Stub for `discovery.config` — provided by the host store at runtime.
+// This file is only loaded in the unit-test environment (via vitest alias).
+// Keep all fields that are accessed anywhere in src/ so unrelated unit tests
+// don't crash when they transitively import a module that reads this config.
+const discoveryConfig = {
+  api: { storeId: "test-store" },
+  secureSubdomain: "https://test-store.vtex.com",
+  storeUrl: "https://test-store.vtex.com",
+  seo: { title: "Test Store" },
+};
+
+export default discoveryConfig;

package/src/features/accounting-fields/components/AccountingConfirmDelete/AccountingConfirmDelete.tsx

@@ -5,10 +5,13 @@ import {
   ErrorMessage,
   InputText,
 } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 type AccountingConfirmDeleteProps = {
   title: string | ReactNode;
   confirmTerm?: string;
+  confirmLabel?: string;
+  confirmRequiredMessage?: string;
   loading?: boolean;
   children?: string | ReactNode;
   onConfirm?: () => void;
@@ -20,11 +23,18 @@ const LABEL_MAX_LENGTH = 30;
 export const AccountingConfirmDelete = ({
   title,
   confirmTerm,
+  confirmLabel,
+  confirmRequiredMessage,
   close,
   loading,
   onConfirm,
   children,
 }: AccountingConfirmDeleteProps) => {
+  const { t } = useLocalization();
+  const inputLabel = confirmLabel ?? t("accountingFields.forms.fieldLabel");
+  const requiredMessage =
+    confirmRequiredMessage ??
+    t("accountingFields.validation.fieldLabelRequired");
   const [confirmField, setConfirmField] = useState("");
   const [isTouched, setIsTouched] = useState(false);
 
@@ -44,7 +54,7 @@ export const AccountingConfirmDelete = ({
         {confirmTerm && (
           <form data-fs-bp-accounting-confirm-delete-form>
             <InputText
-              label="Field label"
+              label={inputLabel}
               value={confirmField}
               onChange={(e) =>
                 setConfirmField(
@@ -58,7 +68,7 @@ export const AccountingConfirmDelete = ({
             <div data-fs-bp-accounting-form-legend>
               <ErrorMessage
                 show={isTouched && !confirmFieldIsValid}
-                message="Field label is required"
+                message={requiredMessage}
               />
               <InputText.Legend>
                 {confirmField.length}/{LABEL_MAX_LENGTH}
@@ -69,7 +79,7 @@ export const AccountingConfirmDelete = ({
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close} disabled={loading}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="danger"
@@ -77,7 +87,7 @@ export const AccountingConfirmDelete = ({
           onClick={handleDeleteClick}
           disabled={disableDeleteBtn}
         >
-          Delete
+          {t("shared.buttons.delete")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </>

package/src/features/accounting-fields/components/AccountingFieldConfirmEdit/AccountingFieldConfirmEdit.tsx

@@ -1,4 +1,5 @@
 import { BasicDrawer } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 type AccountingFieldConfirmEditProps = {
   onConfirm?: () => void;
@@ -13,16 +14,20 @@ export const AccountingFieldConfirmEdit = ({
   onConfirm,
   loading = false,
 }: AccountingFieldConfirmEditProps) => {
+  const { t } = useLocalization();
+
   return (
     <>
-      <BasicDrawer.Heading onBack={onBack} title="Confirm field update" />
+      <BasicDrawer.Heading
+        onBack={onBack}
+        title={t("accountingFields.drawers.confirmFieldUpdateTitle")}
+      />
       <BasicDrawer.Body>
         <p data-fs-bp-accounting-field-confirm-edit-text>
-          This accounting field is used by all organizational units. Updates
-          will affect all of them.
+          {t("accountingFields.messages.confirmFieldUpdateDescription")}
         </p>
         <p data-fs-bp-accounting-field-confirm-edit-text>
-          Proceed with the update?
+          {t("accountingFields.messages.proceedWithUpdate")}
         </p>
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
@@ -31,14 +36,14 @@ export const AccountingFieldConfirmEdit = ({
           onClick={onCancel}
           disabled={loading}
         >
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
           isLoading={loading}
           onClick={onConfirm}
         >
-          Confirm
+          {t("shared.buttons.confirm")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </>

package/src/features/accounting-fields/components/AccountingFieldDropdown/AccountingFieldDropdown.tsx

@@ -9,6 +9,7 @@ import {
 
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { CreateAccountingValueDrawer } from "../CreateAccountingValueDrawer/CreateAccountingValueDrawer";
 import { DeleteAccountingFieldDrawer } from "../DeleteAccountingFieldDrawer/DeleteAccountingFieldDrawer";
@@ -31,6 +32,7 @@ export const AccountingFieldDropdown = ({
   contractId,
   refreshList,
 }: AccountingFieldDropdownProps) => {
+  const { t } = useLocalization();
   const router = useRouter();
   const route = buyerPortalRoutes.accountingFields({
     orgUnitId,
@@ -80,11 +82,11 @@ export const AccountingFieldDropdown = ({
         <BasicDropdownMenu>
           <DropdownItem onClick={openCreateAccountingValueDrawer}>
             <Icon name="Add" width={ICON_SIZE} height={ICON_SIZE} />
-            Add values
+            {t("accountingFields.dropdown.addValues")}
           </DropdownItem>
           <DropdownItem onClick={openEditAccountingFieldDrawer}>
             <Icon name="EditSettings" width={ICON_SIZE} height={ICON_SIZE} />
-            Field settings
+            {t("accountingFields.dropdown.fieldSettings")}
           </DropdownItem>
           <BasicDropdownMenu.Separator />
           <DropdownItem
@@ -92,7 +94,7 @@ export const AccountingFieldDropdown = ({
             onClick={openDeleteAccountingFieldDrawer}
           >
             <Icon name="Delete" width={ICON_SIZE} height={ICON_SIZE} />
-            Delete
+            {t("shared.buttons.delete")}
           </DropdownItem>
         </BasicDropdownMenu>
       </Dropdown>

package/src/features/accounting-fields/components/AccountingFieldForm/AccountingFieldForm.tsx

@@ -14,6 +14,7 @@ import {
   SettingsDrawerContext,
   type SettingsDrawerContextType,
 } from "../../../shared/components/SettingsDrawer/SettingsDrawerContext";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type {
   AccountingFieldLevel,
@@ -42,6 +43,7 @@ export function AccountingFieldForm({
   isEdit = false,
   context = {},
 }: AccountingFieldFormProps) {
+  const { t } = useLocalization();
   const [isTouched, setIsTouched] = useState(false);
   const [formData, setFormData] =
     useState<AccountingFieldFormData>(initialData);
@@ -67,8 +69,8 @@ export function AccountingFieldForm({
   );
 
   const listTypeOptions = useMemo(
-    () => createListTypeOptions(accountingFieldPlural),
-    [accountingFieldPlural]
+    () => createListTypeOptions(accountingFieldPlural, t),
+    [accountingFieldPlural, t]
   );
 
   return (
@@ -86,11 +88,12 @@ export function AccountingFieldForm({
           {isEdit ? (
             <>
               <p data-fs-bp-edit-accounting-field-text>
-                Set how buyers in this unit should enter {initialData.name}s
-                during checkout
+                {t("accountingFields.messages.editFieldDescription", [
+                  initialData.name,
+                ])}
               </p>
               <SettingsDrawer.ListType
-                title="List type"
+                title={t("accountingFields.settings.listTypeTitle")}
                 name={`${initialData.name}-list-type`}
                 value={listType}
                 onChange={setListType}
@@ -99,13 +102,12 @@ export function AccountingFieldForm({
             </>
           ) : (
             <p data-fs-bp-accounting-field-form-label>
-              Add and configure up to 20 custom accounting fields used by buyers
-              at checkout
+              {t("accountingFields.messages.createFieldDescription")}
             </p>
           )}
           <div data-fs-bp-accounting-field-form-item>
             <InputText
-              label="Field label"
+              label={t("accountingFields.forms.fieldLabel")}
               value={formData.name}
               hasError={isTouched && !labelFieldIsValid}
               name="field-label"
@@ -121,7 +123,7 @@ export function AccountingFieldForm({
               icon={
                 <Tooltip
                   placement="left-center"
-                  content="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, eum."
+                  content="" // TODO: Add message
                 >
                   <Icon name="InfoFilled" width={20} height={20} />
                 </Tooltip>
@@ -130,7 +132,7 @@ export function AccountingFieldForm({
             <div data-fs-bp-accounting-form-legend>
               <ErrorMessage
                 show={isTouched && !labelFieldIsValid}
-                message="Field label is required"
+                message={t("accountingFields.validation.fieldLabelRequired")}
               />
               <InputText.Legend>
                 {formData.name.length}/{LABEL_MAX_LENGTH}
@@ -139,7 +141,7 @@ export function AccountingFieldForm({
           </div>
           <div data-fs-bp-accounting-field-form-item>
             <p data-fs-bp-accounting-field-form-label className="radio">
-              Input level
+              {t("accountingFields.forms.inputLevel")}
             </p>
             <RadioGroup
               name="level"
@@ -152,24 +154,24 @@ export function AccountingFieldForm({
               }
             >
               <RadioOption
-                label="Order level - Applies to the entire order"
+                label={t("accountingFields.forms.orderLevel")}
                 name="level"
                 value="order"
               >
-                Order level - Applies to the entire order
+                {t("accountingFields.forms.orderLevel")}
               </RadioOption>
               <RadioOption
-                label="Item level - Applies to each item in the cart"
+                label={t("accountingFields.forms.itemLevel")}
                 name="level"
                 value="item"
               >
-                Item level - Applies to each item in the cart
+                {t("accountingFields.forms.itemLevel")}
               </RadioOption>
             </RadioGroup>
           </div>
           <div data-fs-bp-accounting-field-form-item>
             <p data-fs-bp-accounting-field-form-label className="radio">
-              Input requirement
+              {t("accountingFields.forms.inputRequirement")}
             </p>
             <RadioGroup
               name="requirement"
@@ -181,18 +183,26 @@ export function AccountingFieldForm({
                 }))
               }
             >
-              <RadioOption label="Required" name="requirement" value="true">
-                Required
+              <RadioOption
+                label={t("accountingFields.forms.required")}
+                name="requirement"
+                value="true"
+              >
+                {t("accountingFields.forms.required")}
               </RadioOption>
-              <RadioOption label="Optional" name="requirement" value="false">
-                Optional
+              <RadioOption
+                label={t("accountingFields.forms.optional")}
+                name="requirement"
+                value="false"
+              >
+                {t("accountingFields.forms.optional")}
               </RadioOption>
             </RadioGroup>
           </div>
           <div data-fs-bp-accounting-field-form-item>
             <CheckboxField
               id="accounting-field-form-enable"
-              label="Enable open text input so buyers can enter a value manually at checkout"
+              label={t("accountingFields.forms.enableOpenTextInput")}
               defaultChecked={formData.enabled}
               onChange={(e) =>
                 setFormData((data) => ({
@@ -206,7 +216,7 @@ export function AccountingFieldForm({
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
         <BasicDrawer.Button variant="ghost" onClick={close} disabled={loading}>
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
@@ -214,7 +224,7 @@ export function AccountingFieldForm({
           isLoading={loading}
           onClick={() => formRef.current?.requestSubmit()}
         >
-          {isEdit ? "Save" : "Create"}
+          {isEdit ? t("shared.buttons.save") : t("shared.buttons.create")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </SettingsDrawerContext.Provider>

package/src/features/accounting-fields/components/AccountingValueConfirmEdit/AccountingValueConfirmEdit.tsx

@@ -1,4 +1,5 @@
 import { BasicDrawer } from "../../../shared/components";
+import { useLocalization } from "../../../shared/localization/LocalizationContext";
 
 import type { AccountingField } from "../../types";
 
@@ -17,20 +18,23 @@ export const AccountingValueConfirmEdit = ({
   onConfirm,
   loading = false,
 }: AccountingValueConfirmEditProps) => {
+  const { t } = useLocalization();
+
   return (
     <>
       <BasicDrawer.Heading
-        title={`Confirm ${accountingField.name} update`}
+        title={t("accountingFields.drawers.confirmValueUpdateTitle", [
+          accountingField.name,
+        ])}
         onClose={onCancel}
         onBack={onBack}
       />
       <BasicDrawer.Body>
         <p data-fs-bp-accounting-value-confirm-edit-text>
-          This value may be used by multiple units. <br /> Updates will affect
-          all of them.
+          {t("accountingFields.messages.confirmValueUpdateDescription")}
         </p>
         <p data-fs-bp-accounting-value-confirm-edit-text>
-          Proceed with the update?
+          {t("accountingFields.messages.proceedWithUpdate")}
         </p>
       </BasicDrawer.Body>
       <BasicDrawer.Footer>
@@ -39,14 +43,14 @@ export const AccountingValueConfirmEdit = ({
           onClick={onCancel}
           disabled={loading}
         >
-          Cancel
+          {t("shared.buttons.cancel")}
         </BasicDrawer.Button>
         <BasicDrawer.Button
           variant="confirm"
           isLoading={loading}
           onClick={onConfirm}
         >
-          Confirm
+          {t("shared.buttons.confirm")}
         </BasicDrawer.Button>
       </BasicDrawer.Footer>
     </>