@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/backend/messages/message-compose-form-groups.tsx

@@ -3,6 +3,7 @@ import { FileCode, Globe, Lock } from 'lucide-react'
 import { type CrudField } from '../CrudForm'
 import { IconButton } from '../../primitives/icon-button'
 import { Input } from '../../primitives/input'
+import { EmailInput } from '../../primitives/email-input'
 import { Label } from '../../primitives/label'
 import {
   Select,
@@ -191,9 +192,8 @@ function ComposeModeFields({ compose }: ComposeProps) {
             {compose.visibility === 'public' ? (
               <>
                 <Label htmlFor="messages-compose-external-email">{compose.t('messages.externalEmail', 'External email')}</Label>
-                <Input
+                <EmailInput
                   id="messages-compose-external-email"
-                  type="email"
                   value={compose.externalEmail}
                   onChange={(event) => compose.setExternalEmail(event.target.value)}
                   placeholder={compose.t('messages.placeholders.externalEmail', 'name@example.com')}

package/src/backend/utils/api.ts

@@ -23,6 +23,23 @@ function readRedirectOverride(headers: Headers, headerName: string): boolean {
   return headers.get(headerName) === '0'
 }
 
+function isSameOriginRequest(input: RequestInfo | URL): boolean {
+  if (typeof window === 'undefined') return false
+  const host = window.location?.host
+  if (!host) return false
+  let urlString: string
+  if (typeof input === 'string') urlString = input
+  else if (input instanceof URL) urlString = input.toString()
+  else if (typeof Request !== 'undefined' && input instanceof Request) urlString = input.url
+  else return false
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(urlString)) return true
+  try {
+    return new URL(urlString).host === host
+  } catch {
+    return false
+  }
+}
+
 export async function withScopedApiHeaders<T>(headers: Record<string, string>, run: () => Promise<T>): Promise<T> {
   return scopedHeaders.withScopedHeaders(headers, run)
 }
@@ -109,9 +126,17 @@ export async function apiFetch(input: RequestInfo | URL, init?: RequestInit): Pr
     )
   }
   const scoped = scopedHeaders.resolveScopedHeaders()
-  const mergedInit = Object.keys(scoped).length
+  const baseInit: RequestInit = Object.keys(scoped).length
     ? { ...(init ?? {}), headers: mergeHeaders(init?.headers, scoped) }
-    : init
+    : init ?? {}
+  // Only auto-inject credentials: 'include' for same-origin requests so cookies
+  // round-trip across Next.js proxy.ts rewrites (custom-domain portal flows)
+  // without leaking session cookies to third-party hosts.
+  const mergedInit: RequestInit = baseInit.credentials
+    ? baseInit
+    : isSameOriginRequest(input)
+      ? { ...baseInit, credentials: 'include' }
+      : baseInit
   const requestHeaders = new Headers(mergedInit?.headers)
   const disableUnauthorizedRedirect = readRedirectOverride(requestHeaders, 'x-om-unauthorized-redirect')
   const disableForbiddenRedirect = readRedirectOverride(requestHeaders, 'x-om-forbidden-redirect')

package/src/backend/utils/serverErrors.ts

@@ -124,12 +124,19 @@ export function normalizeCrudServerError(err: unknown): NormalizedCrudServerErro
 
     if (typeof current !== 'object') continue
 
+    const errorField = (current as any).error
+    const nestedErrorMessage =
+      errorField && typeof errorField === 'object' &&
+      typeof (errorField as any).message === 'string' &&
+      (errorField as any).message.trim()
+        ? ((errorField as any).message as string)
+        : undefined
     const candidateMessage =
-      typeof (current as any).error === 'string'
-        ? (current as any).error
+      typeof errorField === 'string'
+        ? errorField
         : typeof (current as any).message === 'string'
           ? (current as any).message
-          : undefined
+          : nestedErrorMessage
     if (candidateMessage && !message) message = candidateMessage
 
     for (const key of JSON_FIELD_KEYS) {
@@ -266,12 +273,12 @@ export async function raiseCrudError(res: Response, fallbackMessage?: string): P
 
   if (parsed && typeof parsed === 'object') {
     const data = parsed as Record<string, unknown>
+    const normalized = normalizeCrudServerError(data)
+    const normalizedMessage = normalized.message?.trim()
     const rawMessage =
-      typeof data.error === 'string' && data.error.trim()
-        ? data.error.trim()
-        : typeof data.message === 'string' && data.message.trim()
-          ? data.message.trim()
-          : fallbackMessage ?? `Request failed (${res.status})`
+      normalizedMessage && normalizedMessage.length > 0
+        ? normalizedMessage
+        : fallbackMessage ?? `Request failed (${res.status})`
     const message = parseServerMessage(rawMessage)
     throw buildHttpError(message, {
       ...data,

package/src/backend/utils/useAutoDiscoveredFields.ts

@@ -17,6 +17,7 @@ type ColumnMeta = {
   filterLoadOptions?: (query?: string) => Promise<FilterOption[]>
   filterable?: boolean
   filterGroup?: string
+  filterIconName?: string
   columnChooserGroup?: string
   alwaysVisible?: boolean
   hidden?: boolean
@@ -85,6 +86,7 @@ export function useAutoDiscoveredFields({
           type,
           group: meta?.filterGroup ?? meta?.columnChooserGroup,
         }
+        if (meta?.filterIconName) field.iconName = meta.filterIconName
         if (meta?.filterOptions) field.options = meta.filterOptions
         if (meta?.filterLoadOptions) field.loadOptions = meta.filterLoadOptions
         filterFields.push(field)

package/src/backend/utils/useCurrentUserId.ts

@@ -0,0 +1,40 @@
+'use client'
+import * as React from 'react'
+import { apiCall } from './apiCall'
+
+type FeatureCheckResponse = {
+  ok: boolean
+  granted: string[]
+  userId: string
+}
+
+/**
+ * Read the current user's id on the client. Returns `''` until the request resolves.
+ *
+ * Implementation note: there is no first-class `/api/auth/me` endpoint yet, so this
+ * piggy-backs on `/api/auth/feature-check` with an empty `features` array — the response
+ * always carries the JWT `userId`. Replace with a dedicated `/api/auth/me` or an
+ * SSR-bootstrapped user context once available, and remove this hop.
+ */
+export function useCurrentUserId(): string {
+  const [userId, setUserId] = React.useState<string>('')
+  React.useEffect(() => {
+    let cancelled = false
+    void (async () => {
+      try {
+        const res = await apiCall<FeatureCheckResponse>('/api/auth/feature-check', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ features: [] }),
+        })
+        if (!cancelled && res.ok && typeof res.result?.userId === 'string') {
+          setUserId(res.result.userId)
+        }
+      } catch {
+        if (!cancelled) setUserId('')
+      }
+    })()
+    return () => { cancelled = true }
+  }, [])
+  return userId
+}

package/src/portal/utils/__tests__/nav.test.ts

@@ -135,6 +135,86 @@ describe('buildPortalNav', () => {
     expect(buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })).toEqual([])
   })
 
+  it('dedupes manifest entries that share the same portal pattern', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main', order: 10 },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main', order: 10 },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    const main = groups.find((g) => g.id === 'main')!
+    expect(main.items).toHaveLength(1)
+    const ids = main.items.map((i) => i.id)
+    expect(new Set(ids).size).toBe(ids.length)
+  })
+
+  it('prefers the override with non-empty requireCustomerFeatures over a broad fallback', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/dashboard',
+        requireCustomerFeatures: ['portal.dashboard.view'],
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+    ]
+
+    const without = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    expect(without).toEqual([])
+
+    const withGrant = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.dashboard.view'],
+    })
+    expect(withGrant).toEqual([
+      { id: 'main', items: [expect.objectContaining({ label: 'Dashboard' })] },
+    ])
+  })
+
+  it('prefers the override with the longer requireCustomerFeatures list', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        moduleId: 'core',
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+      makeRoute({
+        moduleId: 'app',
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view', 'portal.orders.manage'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+    ]
+
+    const partial = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.orders.view'],
+    })
+    expect(partial).toEqual([])
+
+    const full = buildPortalNav({
+      routes,
+      orgSlug: 'my-org',
+      grantedFeatures: ['portal.orders.view', 'portal.orders.manage'],
+    })
+    expect(full[0].items[0].label).toBe('Orders')
+  })
+
   it('sorts items by order then label', () => {
     const routes: FrontendRouteManifestEntry[] = [
       makeRoute({

package/src/portal/utils/nav.ts

@@ -46,6 +46,20 @@ function pickGroup(group: unknown): PortalNavGroupId {
   return 'main'
 }
 
+function pickPreferredRoute(
+  existing: FrontendRouteManifestEntry,
+  candidate: FrontendRouteManifestEntry,
+): FrontendRouteManifestEntry {
+  const existingFeatures = existing.requireCustomerFeatures ?? []
+  const candidateFeatures = candidate.requireCustomerFeatures ?? []
+  if (existingFeatures.length === 0 && candidateFeatures.length > 0) return candidate
+  if (candidateFeatures.length === 0 && existingFeatures.length > 0) return existing
+  if (existingFeatures.length !== candidateFeatures.length) {
+    return candidateFeatures.length > existingFeatures.length ? candidate : existing
+  }
+  return existing
+}
+
 /**
  * Build the portal sidebar from the frontend route manifest.
  *
@@ -66,19 +80,27 @@ export function buildPortalNav({
   const mainItems: PortalNavItem[] = []
   const accountItems: PortalNavItem[] = []
 
+  const dedupedByPattern = new Map<string, FrontendRouteManifestEntry>()
   for (const route of routes) {
     const pattern = route.pattern ?? route.path
     if (!isPortalPattern(pattern)) continue
     if (route.navHidden) continue
     const nav = route.nav
     if (!nav || typeof nav.label !== 'string' || nav.label.length === 0) continue
+    const existing = dedupedByPattern.get(pattern)
+    dedupedByPattern.set(pattern, existing ? pickPreferredRoute(existing, route) : route)
+  }
+
+  for (const route of dedupedByPattern.values()) {
+    const pattern = (route.pattern ?? route.path) as string
+    const nav = route.nav!
 
     const requireFeatures = route.requireCustomerFeatures ?? []
     if (!isPortalAdmin && requireFeatures.length) {
       if (!hasAllFeatures(grantedFeatures as string[], requireFeatures as string[])) continue
     }
 
-    const href = resolveHref(pattern as string, orgSlug)
+    const href = resolveHref(pattern, orgSlug)
     if (!hasNoUnresolvedParams(href)) continue
 
     const group = pickGroup(nav.group)

package/src/primitives/__tests__/password-input.test.tsx

@@ -0,0 +1,93 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { PasswordInput } from '../password-input'
+
+describe('PasswordInput primitive', () => {
+  it('renders the inner input as type="password" by default', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).not.toBeNull()
+    expect(input.type).toBe('password')
+  })
+
+  it('toggles the input type when the reveal button is clicked', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    const toggle = screen.getByRole('button', { name: 'Show password' })
+    expect(input.type).toBe('password')
+    expect(toggle).toHaveAttribute('aria-pressed', 'false')
+
+    fireEvent.click(toggle)
+
+    expect(input.type).toBe('text')
+    expect(screen.getByRole('button', { name: 'Hide password' })).toHaveAttribute('aria-pressed', 'true')
+  })
+
+  it('respects the controlled reveal state via revealed prop', () => {
+    const onRevealedChange = jest.fn()
+    const { container, rerender } = render(
+      <PasswordInput defaultValue="secret" revealed={false} onRevealedChange={onRevealedChange} />,
+    )
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.type).toBe('password')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Show password' }))
+    expect(onRevealedChange).toHaveBeenCalledWith(true)
+    expect(input.type).toBe('password')
+
+    rerender(<PasswordInput defaultValue="secret" revealed onRevealedChange={onRevealedChange} />)
+    expect(input.type).toBe('text')
+  })
+
+  it('hides the reveal toggle when revealable is false', () => {
+    render(<PasswordInput defaultValue="secret" revealable={false} />)
+    expect(screen.queryByRole('button', { name: /show password|hide password/i })).toBeNull()
+  })
+
+  it('hides the leading lock icon when showLockIcon is false', () => {
+    const { container } = render(<PasswordInput showLockIcon={false} defaultValue="secret" />)
+    expect(container.querySelector('svg.lucide-lock')).toBeNull()
+  })
+
+  it('forwards consumer-supplied autoComplete to the input element', () => {
+    const { container } = render(
+      <PasswordInput defaultValue="secret" autoComplete="new-password" />,
+    )
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).toHaveAttribute('autocomplete', 'new-password')
+  })
+
+  it('does not set autoComplete when the consumer omits it (lets browser heuristics decide)', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.getAttribute('autocomplete')).toBeNull()
+  })
+
+  it('forwards name and id to the input element', () => {
+    const { container } = render(<PasswordInput id="signup-password" name="password" />)
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input.id).toBe('signup-password')
+    expect(input.name).toBe('password')
+  })
+
+  it('disables both the input and the reveal toggle when disabled', () => {
+    const { container } = render(<PasswordInput defaultValue="secret" disabled />)
+    const input = container.querySelector('input') as HTMLInputElement
+    const toggle = screen.getByRole('button', { name: 'Show password' }) as HTMLButtonElement
+    expect(input.disabled).toBe(true)
+    expect(toggle.disabled).toBe(true)
+  })
+
+  it('forwards refs to the underlying input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<PasswordInput ref={ref} defaultValue="secret" />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('INPUT')
+  })
+})

package/src/primitives/__tests__/search-input.test.tsx

@@ -0,0 +1,95 @@
+/** @jest-environment jsdom */
+
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { SearchInput } from '../search-input'
+
+function Harness(initial: string, props: Partial<React.ComponentProps<typeof SearchInput>> = {}) {
+  const { onChange: consumerOnChange, ...rest } = props
+  function Wrapped() {
+    const [value, setValue] = React.useState(initial)
+    return (
+      <SearchInput
+        {...rest}
+        value={value}
+        onChange={(next) => {
+          setValue(next)
+          consumerOnChange?.(next)
+        }}
+      />
+    )
+  }
+  return render(<Wrapped />)
+}
+
+describe('SearchInput primitive', () => {
+  it('renders an input with type="search"', () => {
+    const { container } = Harness('')
+    const input = container.querySelector('input') as HTMLInputElement
+    expect(input).not.toBeNull()
+    expect(input.type).toBe('search')
+  })
+
+  it('exposes the searchbox ARIA role (matches Playwright getByRole expectations)', () => {
+    Harness('')
+    expect(screen.getByRole('searchbox')).toBeInTheDocument()
+  })
+
+  it('uses the translated placeholder fallback', () => {
+    Harness('')
+    expect(screen.getByPlaceholderText('Search…')).toBeInTheDocument()
+  })
+
+  it('honors a consumer-supplied placeholder over the i18n fallback', () => {
+    Harness('', { placeholder: 'Find a customer' })
+    expect(screen.getByPlaceholderText('Find a customer')).toBeInTheDocument()
+  })
+
+  it('does not render the clear button when value is empty', () => {
+    Harness('')
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('renders the clear button when value is non-empty', () => {
+    Harness('jan')
+    expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument()
+  })
+
+  it('clicking the clear button calls onChange("") when no onClear is supplied', () => {
+    const onChange = jest.fn()
+    Harness('jan', { onChange })
+    fireEvent.click(screen.getByRole('button', { name: 'Clear search' }))
+    expect(onChange).toHaveBeenCalledWith('')
+  })
+
+  it('clicking the clear button calls onClear instead of onChange when onClear is supplied', () => {
+    const onChange = jest.fn()
+    const onClear = jest.fn()
+    Harness('jan', { onChange, onClear })
+    fireEvent.click(screen.getByRole('button', { name: 'Clear search' }))
+    expect(onClear).toHaveBeenCalledTimes(1)
+    expect(onChange).not.toHaveBeenCalled()
+  })
+
+  it('hides the clear button when clearable=false even with non-empty value', () => {
+    Harness('jan', { clearable: false })
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('hides the clear button when disabled', () => {
+    Harness('jan', { disabled: true })
+    expect(screen.queryByRole('button', { name: /clear search/i })).toBeNull()
+  })
+
+  it('forwards typing to onChange', () => {
+    const onChange = jest.fn()
+    Harness('', { onChange })
+    const input = screen.getByRole('searchbox') as HTMLInputElement
+    fireEvent.change(input, { target: { value: 'kowalski' } })
+    expect(onChange).toHaveBeenCalledWith('kowalski')
+  })
+})

package/src/primitives/__tests__/zindex-overlay.test.tsx

@@ -1,3 +1,7 @@
+jest.mock('@open-mercato/shared/lib/i18n/context', () => ({
+  useT: () => (_key: string, fallback: string) => fallback,
+}))
+
 import * as React from 'react'
 import * as fs from 'fs'
 import * as path from 'path'
@@ -14,6 +18,7 @@ const Z_INDEX_BY_TOKEN: Record<string, number> = {
   'z-modal': 40,
   'z-popover': 45,
   'z-toast': 50,
+  'z-modal-elevated': 55,
   'z-tooltip': 60,
   'z-banner': 70,
   'z-top': 100,
@@ -129,4 +134,25 @@ describe('Issue #1836: portaled overlay primitives sit above modals (z-popover >
       expect(css).toContain('z-index: var(--z-index-popover);')
     }
   })
+
+  it('globals.css defines z-modal-elevated (55) above z-popover so dialogs opened from inside popovers are visible', () => {
+    const repoRoot = path.resolve(__dirname, '../../../../..')
+    const cssPaths = [
+      path.join(repoRoot, 'apps/mercato/src/app/globals.css'),
+      path.join(repoRoot, 'packages/create-app/template/src/app/globals.css'),
+    ]
+
+    for (const cssPath of cssPaths) {
+      const css = fs.readFileSync(cssPath, 'utf8')
+
+      expect(css).toContain('@utility z-modal-elevated')
+      expect(css).toMatch(/z-index:\s*var\(--z-index-modal-elevated(?:,\s*\d+)?\);/)
+
+      const elevatedMatch = css.match(/--z-index-modal-elevated:\s*(\d+);/)
+      const popoverMatch = css.match(/--z-index-popover:\s*(\d+);/)
+      expect(elevatedMatch).not.toBeNull()
+      expect(popoverMatch).not.toBeNull()
+      expect(Number(elevatedMatch![1])).toBeGreaterThan(Number(popoverMatch![1]))
+    }
+  })
 })