@akinon/pz-theme 2.0.125-rc.0 → 2.0.125

package/CHANGELOG.md

@@ -1,40 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.125-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 [1595d458]
-- Updated dependencies [dca12811]
-  - @akinon/next@2.0.125-rc.0
-  - @akinon/theme-contract@2.0.125-rc.0
+## 2.0.125
+
+### Patch Changes
+
+- aaa4433: ZERO-5122: resolve search box texts per storefront language
+  - @akinon/next@2.0.125
+  - @akinon/theme-contract@2.0.125
 
 ## 2.0.124
 

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.125-rc.0",
+  "version": "2.0.125",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.125-rc.0",
+    "@akinon/next": "2.0.125",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.125-rc.0",
+    "@akinon/theme-contract": "2.0.125",
     "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.125-rc.0",
+    "@akinon/next": "2.0.125",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/search-box-block-locale.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+let localizationValue: Record<string, unknown> = {};
+
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => localizationValue
+}));
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/'
+}));
+
+import SearchBoxBlock from '../search-box-block';
+import type { BlockRendererProps } from '../block-renderer-registry';
+
+const setLocalization = (
+  locale: string,
+  locales: string[] = ['tr', 'en'],
+  defaultLocaleValue = 'tr'
+) => {
+  localizationValue = {
+    locale,
+    locales: locales.map((value) => ({ value, label: value.toUpperCase() })),
+    defaultLocaleValue,
+    localeUrlStrategy: 'hide_default_locale'
+  };
+};
+
+const TR = 'Ürün, kategori, renk arayabilirsiniz';
+const EN = 'You can search for products, categories, or colors.';
+
+const mount = (
+  properties: Record<string, unknown>,
+  extra: Partial<BlockRendererProps> = {}
+) =>
+  render(
+    <SearchBoxBlock
+      {...({
+        block: {
+          id: 'search',
+          type: 'search-box',
+          properties: { mode: 'icon', ...properties }
+        },
+        placeholderId: 'p',
+        sectionId: 's'
+      } as unknown as BlockRendererProps)}
+      {...extra}
+    />
+  );
+
+const open = (container: HTMLElement) => {
+  fireEvent.click(container.querySelector('[data-search-box]') as HTMLElement);
+  return container;
+};
+
+const placeholderOf = (properties: Record<string, unknown>) =>
+  open(mount(properties).container)
+    .querySelector('[data-search-input]')
+    ?.getAttribute('placeholder');
+
+beforeEach(() => setLocalization('tr'));
+
+describe('placeholder', () => {
+  it('keeps reading a plain string as it always has', () => {
+    expect(placeholderOf({ placeholder: TR })).toBe(TR);
+  });
+
+  it('picks the entry for the page’s language from a per-language map', () => {
+    expect(placeholderOf({ placeholder: { tr: TR, en: EN } })).toBe(TR);
+
+    setLocalization('en');
+    expect(placeholderOf({ placeholder: { tr: TR, en: EN } })).toBe(EN);
+  });
+
+  it('reads a per-language map typed into the field as JSON', () => {
+    setLocalization('en');
+    expect(
+      placeholderOf({ placeholder: JSON.stringify({ tr: TR, en: EN }) })
+    ).toBe(EN);
+  });
+
+  it('reads the JSON map the editor stores under a breakpoint', () => {
+    setLocalization('en');
+    expect(
+      placeholderOf({
+        placeholder: { desktop: JSON.stringify({ tr: TR, en: EN }) }
+      })
+    ).toBe(EN);
+
+    setLocalization('tr');
+    expect(
+      placeholderOf({
+        placeholder: { desktop: JSON.stringify({ tr: TR, en: EN }) }
+      })
+    ).toBe(TR);
+  });
+
+  it('still honours a per-breakpoint value, with or without languages inside', () => {
+    expect(placeholderOf({ placeholder: { desktop: EN } })).toBe(EN);
+    expect(
+      placeholderOf({ placeholder: { desktop: { tr: TR, en: EN } } })
+    ).toBe(TR);
+    expect(
+      placeholderOf({
+        placeholder: { tr: { desktop: TR }, en: { desktop: EN } }
+      })
+    ).toBe(TR);
+  });
+
+  it('falls back to the default language, then to the block’s own wording', () => {
+    setLocalization('en');
+    expect(placeholderOf({ placeholder: { tr: TR, en: '' } })).toBe(TR);
+    expect(placeholderOf({ placeholder: { tr: '', en: '' } })).toBe('Search');
+    expect(placeholderOf({})).toBe('Search');
+  });
+
+  it('does not treat a locale-looking map as languages the store does not have', () => {
+    setLocalization('de', ['de']);
+    expect(placeholderOf({ placeholder: { tr: TR, en: EN } })).toBe('Search');
+  });
+});
+
+describe('the other shopper-facing texts', () => {
+  it('resolve the trigger, close and submit labels per language', () => {
+    setLocalization('en');
+    const { container } = mount({
+      triggerLabel: { tr: 'Ara', en: 'Search' },
+      closeLabel: { tr: 'Aramayı kapat', en: 'Close search' },
+      submitLabel: { tr: 'Ara', en: 'Go' },
+      showSubmit: true,
+      showClose: true
+    });
+
+    expect(
+      container.querySelector('[data-search-box]')?.getAttribute('aria-label')
+    ).toBe('Search');
+
+    open(container);
+
+    expect(
+      container.querySelector('[data-search-close]')?.getAttribute('aria-label')
+    ).toBe('Close search');
+    expect(container.querySelector('button[type="submit"]')?.textContent).toBe(
+      'Go'
+    );
+  });
+
+  it('lets the trigger keep announcing the placeholder when no label is set', () => {
+    const { container } = mount({ placeholder: { tr: TR, en: EN } });
+
+    expect(
+      container.querySelector('[data-search-box]')?.getAttribute('aria-label')
+    ).toBe(TR);
+  });
+
+  it('leaves the non-text settings alone', () => {
+    const { container } = mount({ mode: { tr: 'inline', en: 'icon' } });
+
+    expect(container.querySelector('[data-search-box]')).not.toBeNull();
+  });
+});

package/src/blocks/search-box-block.tsx

@@ -7,6 +7,10 @@ import { emitCommerceEvent } from '../utils/analytics';
 import { useLocalizeHref } from '../hooks/use-localize-href';
 import { applySearchTermTransform } from '../utils/search-transform';
 import { useOverlay } from '../hooks/use-overlay';
+import {
+  resolveLocalizedValue,
+  useValueLocale
+} from '../utils/localized-value';
 import ThemeBlock from '../theme-block';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
@@ -61,21 +65,35 @@ const SearchBoxBlock = ({
     isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
   const panelOpen = open || forcedOpen;
 
+  const valueLocale = useValueLocale();
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
     );
+  const text = (key: string, fallback: string) => {
+    const localized = resolveLocalizedValue(
+      block.properties?.[key],
+      valueLocale
+    );
+    const value = resolveLocalizedValue(
+      getResponsiveValue(localized, currentBreakpoint, ''),
+      valueLocale
+    );
+    return value === undefined || value === null || value === ''
+      ? fallback
+      : String(value);
+  };
 
   const mode = prop('mode', 'icon');
-  const placeholder = prop('placeholder', 'Search');
+  const placeholder = text('placeholder', 'Search');
   const searchUrl = prop('searchUrl', '/list');
   const queryParam = prop('queryParam', 'search_text');
-  const closeLabel = prop('closeLabel', 'Close search');
-  const submitLabel = prop('submitLabel', 'Search');
+  const closeLabel = text('closeLabel', 'Close search');
+  const submitLabel = text('submitLabel', 'Search');
   const submitStyle = prop('submitStyle', 'label');
   // Empty on purpose: the trigger has always announced itself with the
   // placeholder, so an unset label must keep doing exactly that.
-  const triggerLabel = prop('triggerLabel', '');
+  const triggerLabel = text('triggerLabel', '');
   const showIcon = readToggle(
     block.properties?.showIcon,
     currentBreakpoint,