@open-mercato/ui 0.8.1-develop.7275.1.f772b944d4 → 0.8.1-develop.7294.1.0ef99fc518

package/src/backend/inputs/__tests__/PhoneNumberField.test.tsx

@@ -2,6 +2,7 @@
 
 jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
   useT: () => (_key: string, fallback: string) => fallback,
+  useOptionalLocale: () => undefined,
 }))
 
 jest.mock('@open-mercato/shared/lib/phone', () => ({
@@ -22,7 +23,15 @@ jest.mock('@open-mercato/shared/lib/phone', () => ({
 
 import * as React from 'react'
 import { fireEvent, render, screen } from '@testing-library/react'
-import { PHONE_COUNTRIES, PhoneNumberField } from '../PhoneNumberField'
+import type { TranslateFn } from '@open-mercato/shared/lib/i18n/context'
+import {
+  PHONE_COUNTRIES,
+  PhoneNumberField,
+  buildPhoneCountryOptions,
+  phoneCountryLabelKey,
+  resolvePhoneCountryLabel,
+  type PhoneCountry,
+} from '../PhoneNumberField'
 
 function PhoneFieldHarness(props: Partial<React.ComponentProps<typeof PhoneNumberField>>) {
   const [value, setValue] = React.useState<string | undefined>(undefined)
@@ -148,6 +157,88 @@ describe('PhoneNumberField initial country detection', () => {
   })
 })
 
+const englishOnly: TranslateFn = (key, fallback) => (typeof fallback === 'string' ? fallback : key)
+
+describe('PhoneNumberField country name localization', () => {
+  const poland = PHONE_COUNTRIES.find((country) => country.iso2 === 'PL') as PhoneCountry
+
+  it('builds the translation key from the ISO 3166-1 alpha-2 code', () => {
+    expect(phoneCountryLabelKey('pl')).toBe('ui.inputs.phoneNumberField.countryName.PL')
+  })
+
+  it('prefers a locale-file entry over every other source', () => {
+    const withOverride: TranslateFn = (key, fallback) =>
+      key === 'ui.inputs.phoneNumberField.countryName.PL' ? 'Rzeczpospolita Polska' : englishOnly(key, fallback)
+
+    expect(resolvePhoneCountryLabel(poland, withOverride, 'pl')).toBe('Rzeczpospolita Polska')
+  })
+
+  it('localizes an untranslated country through the active locale region data', () => {
+    expect(resolvePhoneCountryLabel(poland, englishOnly, 'pl')).toBe('Polska')
+    expect(resolvePhoneCountryLabel(poland, englishOnly, 'de')).toBe('Polen')
+  })
+
+  it('falls back to the English label when no locale is in scope', () => {
+    expect(resolvePhoneCountryLabel(poland, englishOnly, undefined)).toBe('Poland')
+  })
+
+  it('keeps the curated English dictionary names under an English locale', () => {
+    const antigua = PHONE_COUNTRIES.find((country) => country.iso2 === 'AG') as PhoneCountry
+
+    expect(resolvePhoneCountryLabel(poland, englishOnly, 'en')).toBe('Poland')
+    // CLDR spells this "Antigua & Barbuda"; the dictionary wins so existing
+    // English copy is never silently rewritten.
+    expect(antigua.label).toBe('Antigua and Barbuda')
+    expect(resolvePhoneCountryLabel(antigua, englishOnly, 'en')).toBe('Antigua and Barbuda')
+    expect(resolvePhoneCountryLabel(antigua, englishOnly, 'en-GB')).toBe('Antigua and Barbuda')
+  })
+
+  it('falls back to the English label for a code the runtime cannot name', () => {
+    const unassigned: PhoneCountry = { iso2: 'QQ', dialCode: '+999', label: 'Nowhere', flag: '' }
+    const malformed: PhoneCountry = { iso2: 'QQQ', dialCode: '+999', label: 'Nowhere', flag: '' }
+
+    expect(resolvePhoneCountryLabel(unassigned, englishOnly, 'pl')).toBe('Nowhere')
+    expect(resolvePhoneCountryLabel(malformed, englishOnly, 'pl')).toBe('Nowhere')
+  })
+})
+
+describe('PhoneNumberField country option list', () => {
+  it('localizes the built-in list and re-sorts it for the active locale', () => {
+    const options = buildPhoneCountryOptions(undefined, englishOnly, 'pl')
+
+    expect(options).toHaveLength(PHONE_COUNTRIES.length)
+    expect(options.find((option) => option.country.iso2 === 'DE')?.label).toBe('Niemcy')
+
+    const labels = options.map((option) => option.label)
+    const sorted = [...labels].sort((a, b) => a.localeCompare(b, 'pl', { sensitivity: 'base' }))
+    expect(labels).toEqual(sorted)
+  })
+
+  it('keeps a caller-supplied list authoritative in both label and order', () => {
+    const supplied: PhoneCountry[] = [
+      { iso2: 'DE', dialCode: '+49', label: 'Deutschland', flag: '🇩🇪' },
+      { iso2: 'PL', dialCode: '+48', label: 'Rzeczpospolita', flag: '🇵🇱' },
+    ]
+
+    expect(buildPhoneCountryOptions(supplied, englishOnly, 'pl')).toEqual([
+      { country: supplied[0], label: 'Deutschland' },
+      { country: supplied[1], label: 'Rzeczpospolita' },
+    ])
+  })
+})
+
+describe('PhoneNumberField option list under an unusable locale', () => {
+  it('falls back to English names and English collation instead of throwing', () => {
+    const options = buildPhoneCountryOptions(undefined, englishOnly, 'not a locale tag')
+
+    expect(options.find((option) => option.country.iso2 === 'DE')?.label).toBe('Germany')
+
+    const labels = options.map((option) => option.label)
+    const sorted = [...labels].sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' }))
+    expect(labels).toEqual(sorted)
+  })
+})
+
 describe('PhoneNumberField source options', () => {
   it('uses the translated country picker name and optional country asset', () => {
     render(<PhoneFieldHarness size={40} countryLabel="Numer kierunkowy kraju" renderCountryIcon={country => <img src={`${country.iso2}.svg`} alt="" />} />)

package/src/portal/PortalContext.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react'
 import type { CustomerAuthResult } from '@open-mercato/shared/modules/customer-auth'
 import type { CustomerAuthContext } from '@open-mercato/shared/modules/customer-auth'
+import { navigateWithPageReload } from '@open-mercato/shared/lib/navigation/pageReload'
 import { apiCall } from '../backend/utils/apiCall'
 
 /* ------------------------------------------------------------------ */
@@ -155,7 +156,7 @@ export function PortalProvider({ orgSlug, children, initialAuth, initialTenant }
     }
     profileEnrichedRef.current = false
     setAuthState({ user: null, roles: [], resolvedFeatures: [], isPortalAdmin: false, loading: false, error: null })
-    window.location.assign(`/${orgSlug}/portal/login`)
+    navigateWithPageReload(`/${orgSlug}/portal/login`)
   }, [orgSlug])
 
   /* ---- Tenant state ---- */

package/src/portal/__tests__/logoutPageReload.test.tsx

@@ -0,0 +1,118 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { act, render, waitFor } from '@testing-library/react'
+import type { CustomerAuthContext } from '@open-mercato/shared/modules/customer-auth'
+import { PortalProvider, usePortalContext } from '../PortalContext'
+import { useCustomerAuth } from '../hooks/useCustomerAuth'
+
+const apiCallMock = jest.fn()
+const navigateWithPageReloadMock = jest.fn()
+const routerPushMock = jest.fn()
+const routerReplaceMock = jest.fn()
+
+jest.mock('../../backend/utils/apiCall', () => ({
+  apiCall: (...args: unknown[]) => apiCallMock(...args),
+}))
+
+jest.mock('@open-mercato/shared/lib/navigation/pageReload', () => ({
+  navigateWithPageReload: (...args: unknown[]) => navigateWithPageReloadMock(...args),
+}))
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: routerPushMock, replace: routerReplaceMock }),
+}))
+
+function makeAuth(): CustomerAuthContext {
+  return {
+    sub: 'user-1',
+    email: 'user@example.com',
+    displayName: 'User One',
+    tenantId: 't-1',
+    orgId: 'o-1',
+    resolvedFeatures: ['portal.view'],
+    customerEntityId: null,
+    personEntityId: null,
+  } as unknown as CustomerAuthContext
+}
+
+/**
+ * The portal layout that computes `authenticated` and the customer session sits above the
+ * `[...slug]` segment, so it only re-runs on a document load. Both logout paths must therefore
+ * leave the authenticated side with a full page load; a client-side navigation would strand
+ * authenticated chrome over the login page. See `navigateWithPageReload`.
+ */
+describe('portal logout crosses the auth boundary with a full page load', () => {
+  beforeEach(() => {
+    apiCallMock.mockReset()
+    apiCallMock.mockResolvedValue({ ok: true, status: 200, result: { ok: true } })
+    navigateWithPageReloadMock.mockReset()
+    routerPushMock.mockReset()
+    routerReplaceMock.mockReset()
+  })
+
+  describe('useCustomerAuth().logout', () => {
+    function LogoutProbe({ orgSlug }: { orgSlug?: string }) {
+      const { logout } = useCustomerAuth(orgSlug)
+      return <button type="button" onClick={() => { void logout() }}>logout</button>
+    }
+
+    it('reloads the page onto the org-scoped login route', async () => {
+      const { getByText } = render(<LogoutProbe orgSlug="acme" />)
+
+      await act(async () => { getByText('logout').click() })
+
+      await waitFor(() => {
+        expect(navigateWithPageReloadMock).toHaveBeenCalledWith('/acme/portal/login')
+      })
+      expect(routerPushMock).not.toHaveBeenCalled()
+      expect(routerReplaceMock).not.toHaveBeenCalled()
+    })
+
+    it('reloads the page onto the unscoped login route when no org slug is known', async () => {
+      const { getByText } = render(<LogoutProbe />)
+
+      await act(async () => { getByText('logout').click() })
+
+      await waitFor(() => {
+        expect(navigateWithPageReloadMock).toHaveBeenCalledWith('/portal/login')
+      })
+    })
+
+    it('still reloads when the logout request fails', async () => {
+      apiCallMock.mockRejectedValue(new Error('[internal] network down'))
+      const { getByText } = render(<LogoutProbe orgSlug="acme" />)
+
+      await act(async () => { getByText('logout').click() })
+
+      await waitFor(() => {
+        expect(navigateWithPageReloadMock).toHaveBeenCalledWith('/acme/portal/login')
+      })
+    })
+  })
+
+  describe('PortalContext logout', () => {
+    function ContextLogoutProbe() {
+      const { auth } = usePortalContext()
+      return <button type="button" onClick={() => { void auth.logout() }}>logout</button>
+    }
+
+    it('reloads the page onto the login route', async () => {
+      const { getByText } = render(
+        <PortalProvider orgSlug="acme" initialAuth={makeAuth()}>
+          <ContextLogoutProbe />
+        </PortalProvider>,
+      )
+
+      await act(async () => { getByText('logout').click() })
+
+      await waitFor(() => {
+        expect(navigateWithPageReloadMock).toHaveBeenCalledWith('/acme/portal/login')
+      })
+      expect(routerPushMock).not.toHaveBeenCalled()
+      expect(routerReplaceMock).not.toHaveBeenCalled()
+    })
+  })
+})

package/src/portal/hooks/useCustomerAuth.ts

@@ -1,7 +1,7 @@
 "use client"
 import { useCallback, useEffect, useState } from 'react'
-import { useRouter } from 'next/navigation'
 import type { CustomerUser, CustomerRole, CustomerAuthResult } from '@open-mercato/shared/modules/customer-auth'
+import { navigateWithPageReload } from '@open-mercato/shared/lib/navigation/pageReload'
 import { apiCall } from '../../backend/utils/apiCall'
 
 export type { CustomerUser, CustomerRole, CustomerAuthResult }
@@ -27,7 +27,6 @@ export type { CustomerUser, CustomerRole, CustomerAuthResult }
  * ```
  */
 export function useCustomerAuth(orgSlug?: string) {
-  const router = useRouter()
   const [state, setState] = useState<CustomerAuthResult>({
     user: null,
     roles: [],
@@ -90,8 +89,8 @@ export function useCustomerAuth(orgSlug?: string) {
       loading: false,
       error: null,
     })
-    router.push(loginPath)
-  }, [router, loginPath])
+    navigateWithPageReload(loginPath)
+  }, [loginPath])
 
   return { ...state, logout }
 }