@akinon/pz-theme 2.0.117-rc.0 → 2.0.118-beta.0

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.117-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c2]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b1]
-- Updated dependencies [1595d45]
-- Updated dependencies [dca1281]
-  - @akinon/next@2.0.117-rc.0
-  - @akinon/theme-contract@2.0.117-rc.0
+## 2.0.118-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.118-beta.0
+  - @akinon/theme-contract@2.0.118-beta.0
+
+## 2.0.117
+
+### Patch Changes
+
+- bed36c7: ZERO-5100: Keep theme links in the language of the page they are on. Block links, router navigations and authored rich text now carry the active locale, so an English page no longer prefetches Turkish URLs and turns the shopper's session Turkish. Full URLs to the same storefront count as paths; the API, Next's assets and file addresses are left alone. Custom sections get ThemeLink and useLocalizeHref from @akinon/pz-theme/src/custom, ThemeEditable localizes the href of the anchor it wraps, and both ThemeEditable and useThemeSetting accept authored text written per language.
+  - @akinon/next@2.0.117
+  - @akinon/theme-contract@2.0.117
 
 ## 2.0.116
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.117-rc.0",
+  "version": "2.0.118-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.117-rc.0",
+    "@akinon/next": "2.0.118-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.117-rc.0",
+    "@akinon/theme-contract": "2.0.118-beta.0",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.117-rc.0",
+    "@akinon/next": "2.0.118-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/locale-links.test.tsx

@@ -0,0 +1,429 @@
+/**
+ * ZERO-5100: on an English page every internal link a block renders — and
+ * every navigation it makes itself — carries `/en`.
+ *
+ * Content stores storefront paths without a locale, so these used to point at
+ * the Turkish site: a click left the English site, and in production the
+ * prefetch of each unprefixed link made the middleware set `pz-locale=tr`,
+ * turning every later client request Turkish while the page stayed English.
+ */
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { renderToString } from 'react-dom/server';
+
+const mockPush = jest.fn();
+let mockPathname = '/en/';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: mockPush, replace: jest.fn() }),
+  usePathname: () => mockPathname,
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+// Turkish is the hidden default, English lives under /en — zsa-zsa-zsu's setup.
+const TURKISH = {
+  locale: 'tr',
+  defaultLocaleValue: 'tr',
+  localeUrlStrategy: 'hide-default-locale'
+};
+let mockLocalization: Record<string, unknown> = { ...TURKISH };
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ t: (path: string) => path, ...mockLocalization })
+}));
+
+jest.mock('@akinon/next/utils', () => ({
+  __esModule: true,
+  ...jest.requireActual('@akinon/next/utils'),
+  urlLocaleMatcherRegex: /^\/(en)(?=\/|$)/
+}));
+
+const mockMenu = [
+  {
+    pk: 1,
+    label: 'Bedroom',
+    url: '/yatak-odasi/',
+    children: [
+      { pk: 2, label: 'Beds', url: '/yatak-odasi/yataklar/', children: [] }
+    ]
+  },
+  {
+    pk: 3,
+    label: 'Lookbook',
+    url: 'https://lookbook.example.com/',
+    children: []
+  }
+];
+
+// jest maps every `@akinon/next/data/client/*` to one module, so this mock
+// stands in for `user` as well: the account menu needs its logout mutation.
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useGetMenuQuery: () => ({ data: mockMenu, isLoading: false }),
+  useLogoutMutation: () => [jest.fn(), { isLoading: false }]
+}));
+
+import NavMenuBlock from '../nav-menu-block';
+import SearchBoxBlock from '../search-box-block';
+import AccountMenuBlock from '../account-menu-block';
+import TextBlock from '../text-block';
+import GroupBlock from '../group-block';
+import HoverShowcaseSection from '../../sections/hover-showcase-section';
+
+const mkBlock = (type: string, properties: Record<string, unknown> = {}) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles: {},
+    blocks: []
+  } as never);
+
+const blockProps = {
+  placeholderId: 'header',
+  sectionId: 'header-main',
+  currentBreakpoint: 'desktop',
+  isDesigner: false
+};
+
+const navHrefs = (root: ParentNode) =>
+  Array.from(root.querySelectorAll('a')).map((a) => a.getAttribute('href'));
+
+beforeEach(() => {
+  mockLocalization = { ...TURKISH };
+  mockPathname = '/en/';
+  mockPush.mockClear();
+});
+
+describe('nav-menu links', () => {
+  it('carry /en on an English page, in the server HTML too', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    const nav = mkBlock('nav-menu', { showSubmenu: true });
+
+    const host = document.createElement('div');
+    host.innerHTML = renderToString(
+      <NavMenuBlock block={nav} {...blockProps} />
+    );
+
+    expect(navHrefs(host)).toContain('/en/yatak-odasi/');
+    expect(navHrefs(host)).not.toContain('/yatak-odasi/');
+    // Somewhere else entirely: no locale to add.
+    expect(navHrefs(host)).toContain('https://lookbook.example.com/');
+  });
+
+  it('stay unprefixed on the default locale', () => {
+    const { container } = render(
+      <NavMenuBlock block={mkBlock('nav-menu')} {...blockProps} />
+    );
+
+    expect(navHrefs(container)).toContain('/yatak-odasi/');
+    expect(navHrefs(container)).not.toContain('/en/yatak-odasi/');
+  });
+});
+
+describe('search submit', () => {
+  const submitSearch = () => {
+    const { container } = render(
+      <SearchBoxBlock
+        block={mkBlock('search-box', { mode: 'inline' })}
+        {...blockProps}
+      />
+    );
+    const input = container.querySelector(
+      '[data-search-input]'
+    ) as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: 'yastık' } });
+    fireEvent.submit(container.querySelector('form') as HTMLFormElement);
+  };
+
+  it('lands on the English results from an English page', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    submitSearch();
+
+    expect(mockPush).toHaveBeenCalledWith(
+      `/en/list?search_text=${encodeURIComponent('yastık')}`
+    );
+  });
+
+  it('keeps the authored path on the default locale', () => {
+    submitSearch();
+
+    expect(mockPush).toHaveBeenCalledWith(
+      `/list?search_text=${encodeURIComponent('yastık')}`
+    );
+  });
+});
+
+// The pathname carries `/en` while the stored URLs do not, so the current
+// entry has to be matched in its localized form.
+describe('current-page highlighting on an English page', () => {
+  const currentHrefs = (root: ParentNode) =>
+    Array.from(root.querySelectorAll('a[aria-current="page"]')).map((a) =>
+      a.getAttribute('href')
+    );
+
+  it('marks the nav-menu entry of the open category', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    mockPathname = '/en/yatak-odasi';
+
+    const { container } = render(
+      <NavMenuBlock block={mkBlock('nav-menu')} {...blockProps} />
+    );
+
+    expect(currentHrefs(container)).toEqual(['/en/yatak-odasi/']);
+  });
+
+  it('keeps marking it on the default locale', () => {
+    mockPathname = '/yatak-odasi';
+
+    const { container } = render(
+      <NavMenuBlock block={mkBlock('nav-menu')} {...blockProps} />
+    );
+
+    expect(currentHrefs(container)).toEqual(['/yatak-odasi/']);
+  });
+
+  it('never widens a section match to the English home entry', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    mockPathname = '/en/yatak-odasi/yataklar';
+    const withHome = mockMenu.slice();
+    mockMenu.unshift({ pk: 9, label: 'Home', url: '/', children: [] });
+
+    try {
+      const { container } = render(
+        <NavMenuBlock
+          block={mkBlock('nav-menu', { activeMatch: 'section' })}
+          {...blockProps}
+        />
+      );
+
+      expect(currentHrefs(container)).toEqual(['/en/yatak-odasi/']);
+    } finally {
+      mockMenu.splice(0, mockMenu.length, ...withHome);
+    }
+  });
+
+  it('marks the account-menu entry of the open account page', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    mockPathname = '/en/account/orders';
+
+    const { container } = render(
+      <AccountMenuBlock block={mkBlock('account-menu')} {...blockProps} />
+    );
+
+    expect(currentHrefs(container)).toEqual(['/en/account/orders']);
+  });
+});
+
+describe('links drawn outside ThemeLink', () => {
+  it('prefixes the links inside authored rich text', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    const text = {
+      ...(mkBlock('text') as object),
+      value: 'Detaylar için <a href="/kampanya/">tıklayın</a>'
+    } as never;
+
+    const host = document.createElement('div');
+    host.innerHTML = renderToString(<TextBlock block={text} {...blockProps} />);
+
+    expect(navHrefs(host)).toEqual(['/en/kampanya/']);
+  });
+
+  it('prefixes the hover-showcase item links the section draws itself', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+    const item = {
+      ...(mkBlock('hover-showcase-item', {
+        title: 'Bedroom',
+        link: '/yatak-odasi/'
+      }) as object)
+    };
+
+    const host = document.createElement('div');
+    host.innerHTML = renderToString(
+      <HoverShowcaseSection
+        section={
+          {
+            id: 'showcase',
+            type: 'hover-showcase',
+            label: 'showcase',
+            styles: {},
+            blocks: [item]
+          } as never
+        }
+        currentBreakpoint="desktop"
+        placeholderId="home"
+        isDesigner={false}
+      />
+    );
+
+    const hrefs = navHrefs(host);
+    expect(hrefs.length).toBeGreaterThan(0);
+    expect(new Set(hrefs)).toEqual(new Set(['/en/yatak-odasi/']));
+  });
+});
+
+/**
+ * A composed anchor is a group with `tag: 'a'`. Its href decides whether the
+ * click goes through the router — and the router link is the one that carries
+ * the locale, so an href that misses that branch loses `/en` with it.
+ */
+describe('group anchors', () => {
+  const groupAnchor = (href: string) =>
+    ({
+      ...(mkBlock('group', { tag: 'a', href }) as object)
+    } as never);
+
+  it('route a pasted path with its spaces still on it', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    const { container } = render(
+      <GroupBlock block={groupAnchor(' /yatak-odasi/ ')} {...blockProps} />
+    );
+
+    expect(navHrefs(container)).toEqual(['/en/yatak-odasi/']);
+  });
+
+  it('keep that path unprefixed, and trimmed, on the default locale', () => {
+    const { container } = render(
+      <GroupBlock block={groupAnchor(' /yatak-odasi/ ')} {...blockProps} />
+    );
+
+    expect(navHrefs(container)).toEqual(['/yatak-odasi/']);
+  });
+
+  it('leave an address somewhere else on its plain anchor', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    const { container } = render(
+      <GroupBlock
+        block={groupAnchor('https://lookbook.example.com/')}
+        {...blockProps}
+      />
+    );
+
+    expect(navHrefs(container)).toEqual(['https://lookbook.example.com/']);
+  });
+
+  /**
+   * A full URL of this storefront's own is one of its routes too, which is
+   * what `link-block` already made of it. Without this the merchant's pasted
+   * address bar fell to the plain anchor, and the click left the English site.
+   */
+  describe('with a full URL of this storefront', () => {
+    const configured = process.env.NEXT_PUBLIC_URL;
+
+    beforeEach(() => {
+      process.env.NEXT_PUBLIC_URL = 'https://www.zsazsazsu.com.tr';
+    });
+
+    afterAll(() => {
+      process.env.NEXT_PUBLIC_URL = configured;
+    });
+
+    it('routes it as the localized path on an English page', () => {
+      mockLocalization = { ...TURKISH, locale: 'en' };
+
+      const { container } = render(
+        <GroupBlock
+          block={groupAnchor('https://zsazsazsu.com.tr/yeni-urunler/')}
+          {...blockProps}
+        />
+      );
+
+      expect(navHrefs(container)).toEqual(['/en/yeni-urunler/']);
+    });
+
+    it('routes it as the bare path on the default locale', () => {
+      const { container } = render(
+        <GroupBlock
+          block={groupAnchor('https://www.zsazsazsu.com.tr/yeni-urunler/')}
+          {...blockProps}
+        />
+      );
+
+      expect(navHrefs(container)).toEqual(['/yeni-urunler/']);
+    });
+
+    // A file keeps the path it points at and gains no locale, exactly as a
+    // root-relative '/files/kvkk.pdf' has always been treated here.
+    it('adds no locale to a file on this storefront', () => {
+      mockLocalization = { ...TURKISH, locale: 'en' };
+
+      const { container } = render(
+        <GroupBlock
+          block={groupAnchor('https://www.zsazsazsu.com.tr/files/kvkk.pdf')}
+          {...blockProps}
+        />
+      );
+
+      expect(navHrefs(container)).toEqual(['/files/kvkk.pdf']);
+    });
+  });
+});
+
+/**
+ * Merchants paste the address bar rather than typing a path: the live home
+ * composition stores 42 of its links as full URLs to this same site. In
+ * production Next prefetches those as internal routes, and the middleware
+ * answers the unprefixed path with `pz-locale=tr`.
+ */
+describe('full URLs to this storefront', () => {
+  const configured = process.env.NEXT_PUBLIC_URL;
+
+  beforeEach(() => {
+    process.env.NEXT_PUBLIC_URL = 'https://www.zsazsazsu.com.tr';
+  });
+
+  afterAll(() => {
+    process.env.NEXT_PUBLIC_URL = configured;
+  });
+
+  const richText = (markup: string) =>
+    ({
+      ...(mkBlock('text') as object),
+      value: markup
+    } as never);
+
+  const markup =
+    '<a href="https://www.zsazsazsu.com.tr/kampanya/">kampanya</a>' +
+    '<a href="https://zsazsazsu.com.tr/yeni-urunler/">yeni</a>' +
+    '<a href="https://www.zsazsazsu.com.tr/files/kvkk.pdf">kvkk</a>' +
+    '<a href="https://lookbook.example.com/">lookbook</a>';
+
+  it('become localized paths in authored rich text', () => {
+    mockLocalization = { ...TURKISH, locale: 'en' };
+
+    const host = document.createElement('div');
+    host.innerHTML = renderToString(
+      <TextBlock block={richText(markup)} {...blockProps} />
+    );
+
+    expect(navHrefs(host)).toEqual([
+      '/en/kampanya/',
+      '/en/yeni-urunler/',
+      // No localized copy of a file, the same as `/manifest.json`.
+      'https://www.zsazsazsu.com.tr/files/kvkk.pdf',
+      'https://lookbook.example.com/'
+    ]);
+  });
+
+  it('stay byte for byte as the merchant wrote them on the Turkish page', () => {
+    const host = document.createElement('div');
+    host.innerHTML = renderToString(
+      <TextBlock block={richText(markup)} {...blockProps} />
+    );
+
+    expect(navHrefs(host)).toEqual([
+      'https://www.zsazsazsu.com.tr/kampanya/',
+      'https://zsazsazsu.com.tr/yeni-urunler/',
+      'https://www.zsazsazsu.com.tr/files/kvkk.pdf',
+      'https://lookbook.example.com/'
+    ]);
+  });
+});

package/src/blocks/account-button-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { useSession } from 'next-auth/react';
 import { usePathname } from 'next/navigation';
 import { getResponsiveValue, partAttrs } from '../utils';

package/src/blocks/account-menu-block.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import React from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { usePathname } from 'next/navigation';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { signOut } from 'next-auth/react';
 import { useLogoutMutation } from '@akinon/next/data/client/user';
 import { emitCommerceEvent } from '../utils/analytics';
@@ -67,6 +68,7 @@ const AccountMenuBlock = ({
   const emptyLabel = prop('emptyLabel', '');
 
   const pathname = usePathname();
+  const localize = useLocalizeHref();
   const [logout, { isLoading: isLoggingOut }] = useLogoutMutation();
 
   const definitions: Record<
@@ -114,15 +116,19 @@ const AccountMenuBlock = ({
     .map((key) => definitions[key])
     .filter((item) => Boolean(item?.href) && Boolean(item?.label));
 
+  // The pathname carries the locale (`/en/account/orders`) and the configured
+  // hrefs do not, so each item is matched in the localized form its link renders.
   const isActive = (href: string) => {
     if (!pathname || !href) return false;
+    const target = localize(href);
     if (activeMatch === 'startsWith') {
       return (
-        pathname === href || pathname.startsWith(`${href.replace(/\/$/, '')}/`)
+        pathname === target ||
+        pathname.startsWith(`${target.replace(/\/$/, '')}/`)
       );
     }
 
-    return pathname === href;
+    return pathname === target;
   };
 
   const handleLogout = async () => {

package/src/blocks/applied-filters-block.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { getResponsiveValue, partAttrs } from '../utils';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { BlockRendererProps } from './block-renderer-registry';
 import {
@@ -48,6 +49,7 @@ const AppliedFiltersBlock = ({
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const localize = useLocalizeHref();
 
   const showClearAll = readToggle(
     block.properties?.showClearAll,
@@ -121,7 +123,11 @@ const AppliedFiltersBlock = ({
   const hrefForParams = (params: URLSearchParams) => {
     // Any filter change invalidates the current page cursor.
     params.delete(pageQueryParam);
-    return buildListingHref(pathname || listing?.path || '', params);
+    // Commerce's `listing.path` has no locale; `localize` adds the page's (and
+    // leaves the one a `pathname` already carries).
+    return localize(
+      buildListingHref(pathname || listing?.path || '', params)
+    );
   };
 
   /**

package/src/blocks/auth-form-block.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import React, { useContext, useRef, useState } from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { signIn, useSession } from 'next-auth/react';
 import { useLocalization } from '@akinon/next/hooks';
 import { getResponsiveValue, partAttrs, resolveOption } from '../utils';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import {
   AuthFieldErrors,
   AuthFieldErrorsProvider,
@@ -298,6 +299,7 @@ const AuthFormBlock = ({
   );
 
   const router = useRouter();
+  const localize = useLocalizeHref();
   const search = useSearchParams();
   const pathname = usePathname();
   const { status } = useSession();
@@ -395,8 +397,8 @@ const AuthFormBlock = ({
   React.useEffect(() => {
     if (!isSignedIn || whenSignedIn !== 'redirect') return;
 
-    router.replace(resolveSignedInDestination(signedInHref, search));
-  }, [isSignedIn, whenSignedIn, signedInHref, router, search]);
+    router.replace(localize(resolveSignedInDestination(signedInHref, search)));
+  }, [isSignedIn, whenSignedIn, signedInHref, router, search, localize]);
 
   /**
    * The form's contents, wrapped so a Captcha block (or the form's own slot)
@@ -607,7 +609,8 @@ const AuthFormBlock = ({
       // Our own resolved path rather than next-auth's echo of it: the response
       // url is whatever we handed in, and this one has been through the
       // same-origin check. `null` is `stay` — there is nowhere to go.
-      if (destination) router.push(destination);
+      // An authored destination has no locale; a returned one keeps its own.
+      if (destination) router.push(localize(destination));
     } catch {
       setError(errorLabel);
     } finally {

package/src/blocks/basket-items-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { useSession } from 'next-auth/react';
 import {
   useGetBasketQuery,

package/src/blocks/basket-summary-block.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import NextLink from 'next/link';
+import { ThemeLink as NextLink } from '../components/theme-link';
 import { useSession } from 'next-auth/react';
 import {
   basketApi,

package/src/blocks/button-block.tsx

@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { useLocalization } from '@akinon/next/hooks';
+import { useLocalizeHref } from '../hooks/use-localize-href';
 import { useEmailSubscriptionMutation } from '@akinon/next/data/client/misc';
 import { Modal } from '@akinon/next/components/modal';
 import {
@@ -26,6 +27,7 @@ const ButtonBlock = ({
   const action = useBlockAction(block, { currentBreakpoint, isDesigner });
 
   const { locale } = useLocalization();
+  const localize = useLocalizeHref();
   const [emailSubscription] = useEmailSubscriptionMutation();
   const [feedbackModal, setFeedbackModal] = useState({
     open: false,
@@ -677,7 +679,9 @@ const ButtonBlock = ({
   return (
     <>
       <a
-        href={url}
+        // A plain anchor, so the locale ThemeLink gives other links is added
+        // here: an authored `/yatak-odasi/` is the Turkish page.
+        href={localize(url)}
         target={target}
         rel={target === '_blank' ? 'noopener noreferrer' : undefined}
         {...partAttrs('root')}