@open-mercato/ui 0.7.1-develop.7153.1.7145d295e6 → 0.7.1-develop.7170.1.d95074d7ba

package/src/backend/__tests__/nav-utils.test.ts

@@ -1,9 +1,12 @@
 import {
   buildAdminNav,
+  buildProfileSections,
   buildSettingsSections,
   computeSettingsPathPrefixes,
   convertToSectionNavGroups,
+  mergeSectionsWithDiscovered,
   type AdminNavItem,
+  type SettingsSection,
 } from '../utils/nav'
 
 describe('settings navigation helpers', () => {
@@ -342,3 +345,180 @@ describe('settings navigation helpers', () => {
     ])
   })
 })
+
+describe('profile navigation helpers', () => {
+  const profileEntry = (overrides: Partial<AdminNavItem>): AdminNavItem => ({
+    group: 'Account',
+    groupId: 'profile.sections.account',
+    groupKey: 'profile.sections.account',
+    groupDefaultName: 'Account',
+    title: 'Notification Preferences',
+    defaultTitle: 'Notification Preferences',
+    titleKey: 'notifications.preferences.pageTitle',
+    href: '/backend/profile/notification-preferences',
+    enabled: true,
+    order: 30,
+    pageContext: 'profile',
+    ...overrides,
+  })
+
+  const accountBaseline = (): SettingsSection[] => [
+    {
+      id: 'profile.sections.account',
+      label: 'Account',
+      labelKey: 'profile.sections.account',
+      order: 1,
+      items: [
+        {
+          id: 'change-password',
+          label: 'Change Password',
+          labelKey: 'auth.changePassword.title',
+          href: '/backend/profile/change-password',
+          order: 1,
+        },
+      ],
+    },
+  ]
+
+  it('includes only profile-context entries', () => {
+    const entries: AdminNavItem[] = [
+      profileEntry({}),
+      profileEntry({
+        group: 'System',
+        groupId: 'settings.sections.system',
+        groupKey: 'settings.sections.system',
+        title: 'Audit Logs',
+        defaultTitle: 'Audit Logs',
+        href: '/backend/audit-logs',
+        pageContext: 'settings',
+      }),
+      profileEntry({
+        group: 'Customers',
+        groupId: 'customers.nav.group',
+        groupKey: undefined,
+        title: 'People',
+        defaultTitle: 'People',
+        href: '/backend/customers/people',
+        pageContext: undefined,
+      }),
+    ]
+
+    const sections = buildProfileSections(entries, { 'profile.sections.account': 1 })
+
+    expect(sections).toHaveLength(1)
+    expect(sections[0].id).toBe('profile.sections.account')
+    expect(sections[0].items.map((item) => item.href)).toEqual([
+      '/backend/profile/notification-preferences',
+    ])
+  })
+
+  it('folds discovered profile pages into the matching baseline section, ordered by weight', () => {
+    const discovered = buildProfileSections(
+      [
+        profileEntry({}),
+        profileEntry({
+          title: 'My communication channels',
+          defaultTitle: 'My communication channels',
+          titleKey: 'communication_channels.profile.title',
+          href: '/backend/profile/communication-channels',
+          order: 20,
+        }),
+      ],
+      { 'profile.sections.account': 1 },
+    )
+
+    const merged = mergeSectionsWithDiscovered(accountBaseline(), discovered)
+
+    expect(merged).toHaveLength(1)
+    expect(merged[0].items.map((item) => item.href)).toEqual([
+      '/backend/profile/change-password',
+      '/backend/profile/communication-channels',
+      '/backend/profile/notification-preferences',
+    ])
+  })
+
+  it('keeps the baseline entry when a discovered page repeats its href', () => {
+    const discovered = buildProfileSections(
+      [
+        profileEntry({
+          title: 'Password',
+          defaultTitle: 'Password',
+          titleKey: undefined,
+          href: '/backend/profile/change-password',
+          order: 99,
+        }),
+      ],
+      { 'profile.sections.account': 1 },
+    )
+
+    const merged = mergeSectionsWithDiscovered(accountBaseline(), discovered)
+
+    expect(merged[0].items).toHaveLength(1)
+    expect(merged[0].items[0].labelKey).toBe('auth.changePassword.title')
+  })
+
+  it('appends a section a module declares under its own group id', () => {
+    const discovered = buildProfileSections(
+      [
+        profileEntry({
+          group: 'Security',
+          groupId: 'security.profile.section',
+          groupKey: 'security.profile.section',
+          title: 'Security & MFA',
+          defaultTitle: 'Security & MFA',
+          titleKey: 'security.profile.pageTitle',
+          href: '/backend/profile/security',
+          order: 10,
+        }),
+      ],
+      { 'profile.sections.account': 1 },
+    )
+
+    const merged = mergeSectionsWithDiscovered(accountBaseline(), discovered)
+
+    expect(merged.map((section) => section.id)).toEqual([
+      'profile.sections.account',
+      'security.profile.section',
+    ])
+  })
+
+  it('leaves the baseline untouched when nothing is discovered', () => {
+    const baseline = accountBaseline()
+
+    const merged = mergeSectionsWithDiscovered(baseline, [])
+
+    expect(merged).toEqual(baseline)
+    expect(merged[0]).not.toBe(baseline[0])
+  })
+
+  // The baseline is a module-level constant (`profileSections`) reused across every request, so
+  // sorting a nested `children` array in place would permanently reorder shared state.
+  it('sorts nested children into a copy rather than reordering the baseline array', () => {
+    const children = [
+      { id: 'mfa', label: 'MFA', href: '/backend/profile/security/mfa', order: 20 },
+      { id: 'sessions', label: 'Sessions', href: '/backend/profile/security/sessions', order: 10 },
+    ]
+    const baseline: SettingsSection[] = [
+      {
+        id: 'profile.sections.account',
+        label: 'Account',
+        labelKey: 'profile.sections.account',
+        order: 1,
+        items: [
+          {
+            id: 'security',
+            label: 'Security',
+            href: '/backend/profile/security',
+            order: 1,
+            children,
+          },
+        ],
+      },
+    ]
+
+    const merged = mergeSectionsWithDiscovered(baseline, [])
+
+    expect(merged[0].items[0].children?.map((child) => child.id)).toEqual(['sessions', 'mfa'])
+    expect(children.map((child) => child.id)).toEqual(['mfa', 'sessions'])
+  })
+})

package/src/backend/injection/InjectedField.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react'
 import type { InjectionFieldDefinition, FieldContext } from '@open-mercato/shared/modules/widgets/injection'
 import { evaluateInjectedVisibility } from './visibility-utils'
-import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useT, useOptionalLocale } from '@open-mercato/shared/lib/i18n/context'
+import { parseLocaleNumber } from '@open-mercato/shared/lib/number'
 import { Input } from '../../primitives/input'
 import { Checkbox } from '../../primitives/checkbox'
 import { Textarea } from '../../primitives/textarea'
@@ -182,24 +183,83 @@ export function InjectedField({ field, value, onChange, context, formData, readO
     )
   }
 
+  if (field.type === 'number') {
+    return (
+      <div className="space-y-2" data-crud-field-id={field.id}>
+        <Label htmlFor={field.id}>{label}</Label>
+        <NumberFieldInput
+          id={field.id}
+          value={value}
+          disabled={disabled}
+          onChange={(next) => onChange(field.id, next)}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2" data-crud-field-id={field.id}>
       <Label htmlFor={field.id}>{label}</Label>
       <Input
         id={field.id}
-        type={field.type === 'number' ? 'number' : field.type === 'date' ? 'date' : 'text'}
+        type={field.type === 'date' ? 'date' : 'text'}
         value={typeof value === 'string' || typeof value === 'number' ? String(value) : ''}
         disabled={disabled}
-        onChange={(event) => {
-          if (field.type === 'number') {
-            onChange(field.id, event.target.value === '' ? undefined : Number(event.target.value))
-            return
-          }
-          onChange(field.id, event.target.value)
-        }}
+        onChange={(event) => onChange(field.id, event.target.value)}
       />
     </div>
   )
 }
 
+/**
+ * Buffers the raw string the user is typing so a value that is not YET a number —
+ * `110,` on the way to `110,70` — does not clear the box. Renders as text rather than
+ * type="number" because a type="number" value is sanitized against the BROWSER locale,
+ * which discards the separator the application locale displays (issue #5552).
+ */
+function NumberFieldInput({
+  id,
+  value,
+  disabled,
+  onChange,
+}: {
+  id: string
+  value: unknown
+  disabled?: boolean
+  onChange: (value: number | undefined) => void
+}) {
+  const locale = useOptionalLocale()
+  const serializedValue = typeof value === 'string' || typeof value === 'number' ? String(value) : ''
+  const [local, setLocal] = React.useState<string>(serializedValue)
+  const isFocusedRef = React.useRef(false)
+
+  React.useEffect(() => {
+    if (!isFocusedRef.current) setLocal(serializedValue)
+  }, [serializedValue])
+
+  return (
+    <Input
+      id={id}
+      type="text"
+      inputMode="decimal"
+      // A text input is eligible for autofill and spellcheck; a number field is not.
+      autoComplete="off"
+      spellCheck={false}
+      value={local}
+      disabled={disabled}
+      onFocus={() => {
+        isFocusedRef.current = true
+      }}
+      onBlur={() => {
+        isFocusedRef.current = false
+      }}
+      onChange={(event) => {
+        const raw = event.target.value
+        setLocal(raw)
+        onChange(raw === '' ? undefined : (parseLocaleNumber(raw, locale) ?? undefined))
+      }}
+    />
+  )
+}
+
 export default InjectedField

package/src/backend/injection/__tests__/InjectedField.localeNumber.test.tsx

@@ -0,0 +1,94 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { fireEvent } from '@testing-library/react'
+import { renderWithProviders } from '@open-mercato/shared/lib/testing/renderWithProviders'
+import type { FieldContext, InjectionFieldDefinition } from '@open-mercato/shared/modules/widgets/injection'
+import { InjectedField } from '../InjectedField'
+
+const numberField: InjectionFieldDefinition = {
+  id: 'amount',
+  type: 'number',
+  label: 'Amount',
+}
+
+const context = {} as FieldContext
+
+// A stateful host, because that is how the field is really used: the value it reports
+// flows straight back in as its `value` prop, so a transient parse failure that cleared
+// the box would make the field impossible to type into.
+function Harness({ onChange }: { onChange: (id: string, value: unknown) => void }) {
+  const [value, setValue] = React.useState<unknown>('')
+  return (
+    <InjectedField
+      field={numberField}
+      value={value}
+      onChange={(id, next) => {
+        setValue(next)
+        onChange(id, next)
+      }}
+      context={context}
+      formData={{}}
+    />
+  )
+}
+
+// The locale is pinned to one that does NOT use a dot decimal separator; an en-US pin
+// would pass on the buggy implementation too.
+function renderField(locale: string, onChange: (id: string, value: unknown) => void) {
+  const { container } = renderWithProviders(<Harness onChange={onChange} />, { locale })
+  const input = container.querySelector('input')
+  expect(input).not.toBeNull()
+  return input as HTMLInputElement
+}
+
+describe('InjectedField number inputs accept the locale decimal separator (issue #5552)', () => {
+  it('does not render a type="number" input, whose value the browser sanitizes per BROWSER locale', () => {
+    const input = renderField('pl', () => {})
+    expect(input.getAttribute('type')).toBe('text')
+    expect(input.getAttribute('inputMode')).toBe('decimal')
+  })
+
+  it('parses a comma-typed value under a Polish locale', () => {
+    const onChange = jest.fn()
+    const input = renderField('pl', onChange)
+
+    fireEvent.change(input, { target: { value: '110,70' } })
+
+    expect(onChange).toHaveBeenCalledWith('amount', 110.7)
+  })
+
+  it('still parses a dot-typed value, and reports a cleared field as undefined', () => {
+    const onChange = jest.fn()
+    const input = renderField('pl', onChange)
+
+    fireEvent.change(input, { target: { value: '2.5' } })
+    expect(onChange).toHaveBeenLastCalledWith('amount', 2.5)
+
+    fireEvent.change(input, { target: { value: '' } })
+    expect(onChange).toHaveBeenLastCalledWith('amount', undefined)
+  })
+
+  it('reports an unparseable value as undefined rather than NaN', () => {
+    const onChange = jest.fn()
+    const input = renderField('pl', onChange)
+
+    fireEvent.change(input, { target: { value: 'abc' } })
+
+    expect(onChange).toHaveBeenLastCalledWith('amount', undefined)
+  })
+
+  it('keeps a half-typed decimal in the box on the way to a complete one', () => {
+    const onChange = jest.fn()
+    const input = renderField('pl', onChange)
+
+    fireEvent.focus(input)
+    // `110,` is not yet a number, but clearing the box here would make the value
+    // impossible to finish typing in a controlled host.
+    fireEvent.change(input, { target: { value: '110,' } })
+    expect(input.value).toBe('110,')
+
+    fireEvent.change(input, { target: { value: '110,70' } })
+    expect(input.value).toBe('110,70')
+    expect(onChange).toHaveBeenLastCalledWith('amount', 110.7)
+  })
+})

package/src/backend/utils/nav.ts

@@ -113,18 +113,19 @@ function legacySettingsSectionSlug(groupLabel: string): string {
 }
 
 /**
- * Groups the settings-context nav entries into ordered sections.
+ * Groups the nav entries declaring `pageContext` into ordered sections for that context's sidebar.
  *
  * `sectionOrder` is keyed by the untranslated group id (`AdminNavItem.groupId`, i.e. the page's
  * `pageGroupKey` when it declares one) — the same convention the main sidebar's `defaultGroupOrder`
  * follows. Keying off the rendered label instead made every non-English deployment miss its weights
  * and fall back to the catch-all bucket (#4843).
  */
-export function buildSettingsSections(
+function buildContextSections(
   entries: AdminNavItem[],
-  sectionOrder: Record<string, number>
+  sectionOrder: Record<string, number>,
+  pageContext: 'settings' | 'profile'
 ): SettingsSection[] {
-  const settingsItems = entries.filter(e => e.pageContext === 'settings')
+  const contextItems = entries.filter(e => e.pageContext === pageContext)
 
   const sectionMap = new Map<string, SettingsSection>()
 
@@ -142,7 +143,7 @@ export function buildSettingsSections(
     }
   }
 
-  for (const item of settingsItems) {
+  for (const item of contextItems) {
     const sectionId = item.groupId
     const order = sectionOrder[sectionId] ?? sectionOrder[legacySettingsSectionSlug(item.group)] ?? 999
 
@@ -175,6 +176,75 @@ export function buildSettingsSections(
   return sections
 }
 
+/**
+ * Groups the settings-context nav entries into ordered sections for the settings sidebar.
+ */
+export function buildSettingsSections(
+  entries: AdminNavItem[],
+  sectionOrder: Record<string, number>
+): SettingsSection[] {
+  return buildContextSections(entries, sectionOrder, 'settings')
+}
+
+/**
+ * Groups the profile-context nav entries into ordered sections for the profile sidebar.
+ *
+ * The profile sidebar used to render a hard-coded list, so per-user pages contributed by other
+ * modules (notification preferences, communication channels) were reachable from the profile
+ * dropdown but missing from the sidebar (#5594). Deriving them from `pageContext: 'profile'` keeps
+ * both surfaces in sync, including for third-party modules.
+ */
+export function buildProfileSections(
+  entries: AdminNavItem[],
+  sectionOrder: Record<string, number>
+): SettingsSection[] {
+  return buildContextSections(entries, sectionOrder, 'profile')
+}
+
+/**
+ * Folds discovered sections into a statically declared baseline, keyed by section id and item href.
+ *
+ * The baseline carries entries that route discovery cannot see — a `navHidden` page such as
+ * `/backend/profile/change-password` never reaches `buildAdminNav`'s output — so it wins on
+ * conflicts and keeps its declared position, while discovered items extend the matching section or
+ * append a new one.
+ *
+ * The baseline is never mutated: sections, their item arrays and any nested `children` are copied
+ * before sorting, because callers pass module-level constants that outlive a single request.
+ */
+export function mergeSectionsWithDiscovered(
+  baseline: SettingsSection[],
+  discovered: SettingsSection[]
+): SettingsSection[] {
+  const merged = baseline.map((section) => ({ ...section, items: [...section.items] }))
+  const byId = new Map(merged.map((section) => [section.id, section]))
+  const knownHrefs = new Set(merged.flatMap((section) => section.items.map((item) => item.href)))
+
+  for (const section of discovered) {
+    const items = section.items.filter((item) => !knownHrefs.has(item.href))
+    items.forEach((item) => knownHrefs.add(item.href))
+    if (items.length === 0) continue
+    const existing = byId.get(section.id)
+    if (existing) {
+      existing.items.push(...items)
+      continue
+    }
+    const added = { ...section, items }
+    byId.set(added.id, added)
+    merged.push(added)
+  }
+
+  const sortItems = (items: SettingsSectionItem[]): SettingsSectionItem[] =>
+    [...items]
+      .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+      .map((item) => (item.children?.length ? { ...item, children: sortItems(item.children) } : item))
+
+  merged.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+  for (const section of merged) section.items = sortItems(section.items)
+
+  return merged
+}
+
 export function computeSettingsPathPrefixes(sections: SettingsSection[]): string[] {
   const prefixes = new Set<string>()
   const visitItem = (item: SettingsSectionItem) => {