@open-mercato/ui 0.4.11-develop.2631.481e9df5b0 → 0.5.0

package/src/backend/markdown/MarkdownContent.tsx

@@ -4,7 +4,65 @@ import * as React from 'react'
 import type { PluggableList } from 'unified'
 import { useMarkdownRemarkPlugins } from './useMarkdownRemarkPlugins'
 
-const ReactMarkdown = React.lazy(() => import('react-markdown'))
+type ReactMarkdownProps = {
+  children: React.ReactNode
+  remarkPlugins?: PluggableList
+}
+
+const isTestEnv = typeof process !== 'undefined' && process.env.NODE_ENV === 'test'
+
+const TestMarkdownComponent: React.ComponentType<ReactMarkdownProps> = ({ children }) => <>{children}</>
+
+let loadedReactMarkdownComponent: React.ComponentType<ReactMarkdownProps> | null = isTestEnv
+  ? TestMarkdownComponent
+  : null
+let reactMarkdownComponentPromise: Promise<React.ComponentType<ReactMarkdownProps>> | null = null
+
+function loadReactMarkdownComponent(): Promise<React.ComponentType<ReactMarkdownProps>> {
+  if (loadedReactMarkdownComponent) {
+    return Promise.resolve(loadedReactMarkdownComponent)
+  }
+
+  if (!reactMarkdownComponentPromise) {
+    reactMarkdownComponentPromise = import('react-markdown').then((mod) => {
+      const component = mod.default as React.ComponentType<ReactMarkdownProps>
+      loadedReactMarkdownComponent = component
+      return component
+    })
+  }
+
+  return reactMarkdownComponentPromise
+}
+
+function ReactMarkdownComponent(props: ReactMarkdownProps) {
+  const [Component, setComponent] = React.useState<React.ComponentType<ReactMarkdownProps> | null>(
+    () => loadedReactMarkdownComponent,
+  )
+
+  React.useEffect(() => {
+    if (Component) {
+      return
+    }
+
+    let active = true
+
+    void loadReactMarkdownComponent().then((resolved) => {
+      if (active) {
+        setComponent(() => resolved)
+      }
+    })
+
+    return () => {
+      active = false
+    }
+  }, [Component])
+
+  if (!Component) {
+    return null
+  }
+
+  return <Component {...props} />
+}
 
 export type MarkdownContentProps = {
   body: string
@@ -13,8 +71,22 @@ export type MarkdownContentProps = {
   remarkPlugins?: PluggableList
 }
 
+export type MarkdownPreviewProps = {
+  children: string
+  className?: string
+  remarkPlugins?: PluggableList
+}
+
 const EMPTY_PLUGINS: PluggableList = []
 
+export function MarkdownPreview({ children, className, remarkPlugins }: MarkdownPreviewProps) {
+  return (
+    <div className={className}>
+      <ReactMarkdownComponent remarkPlugins={remarkPlugins}>{children}</ReactMarkdownComponent>
+    </div>
+  )
+}
+
 export function MarkdownContent({
   body,
   format = 'text',
@@ -31,10 +103,8 @@ export function MarkdownContent({
   }
 
   return (
-    <React.Suspense fallback={<div className={className}>{body}</div>}>
-      <ReactMarkdown className={className} remarkPlugins={plugins}>
-        {body}
-      </ReactMarkdown>
-    </React.Suspense>
+    <MarkdownPreview className={className} remarkPlugins={plugins}>
+      {body}
+    </MarkdownPreview>
   )
 }

package/src/backend/section-page/types.ts

@@ -6,6 +6,7 @@ export type SectionNavItem = {
   labelKey?: string
   href: string
   icon?: ReactNode
+  iconName?: string
   iconMarkup?: string
   requireFeatures?: string[]
   order?: number

package/src/portal/PortalShell.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { type ReactNode, useState, useCallback, useMemo, useContext } from 'react'
+import { type ReactNode, useEffect, useState, useCallback, useMemo, useContext } from 'react'
 import Image from 'next/image'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
@@ -12,6 +12,8 @@ import { mergeMenuItems } from '../backend/injection/mergeMenuItems'
 import type { MergedMenuItem } from '../backend/injection/mergeMenuItems'
 import { PortalNotificationBell } from './components/PortalNotificationBell'
 import { usePortalContext } from './PortalContext'
+import { apiCall } from '../backend/utils/apiCall'
+import type { PortalNavGroup } from './utils/nav'
 
 // Component replacement handle IDs (FROZEN once shipped)
 export const PORTAL_SHELL_HANDLE = 'page:portal:layout'
@@ -174,29 +176,59 @@ export function PortalShell({
   const portalHome = orgSlug ? `/${orgSlug}/portal` : '/portal'
   const loginHref = orgSlug ? `/${orgSlug}/portal/login` : '/portal/login'
   const signupHref = orgSlug ? `/${orgSlug}/portal/signup` : '/portal/signup'
-  const dashboardHref = orgSlug ? `/${orgSlug}/portal/dashboard` : '/portal/dashboard'
-  const profileHref = orgSlug ? `/${orgSlug}/portal/profile` : '/portal/profile'
   // Always use the resolved organization name from the database.
   // Fall back to the generic portal title — never display the raw slug.
   const headerTitle = orgName || t('portal.title', 'Customer Portal')
 
   const closeMobile = useCallback(() => setMobileOpen(false), [])
 
+  const [autoNavGroups, setAutoNavGroups] = useState<PortalNavGroup[]>([])
+  useEffect(() => {
+    if (!authenticated) {
+      setAutoNavGroups([])
+      return
+    }
+    let cancelled = false
+    const load = async () => {
+      try {
+        const { ok, result } = await apiCall<{ ok: boolean; groups?: PortalNavGroup[] }>(
+          '/api/customer_accounts/portal/nav',
+        )
+        if (cancelled || !ok || !result?.ok) return
+        setAutoNavGroups(Array.isArray(result.groups) ? result.groups : [])
+      } catch {
+        if (!cancelled) setAutoNavGroups([])
+      }
+    }
+    void load()
+    return () => {
+      cancelled = true
+    }
+  }, [authenticated])
+
   const mergedNavItems = useMemo(() => {
     if (!authenticated) return []
-    const builtIn = [
-      { id: 'portal-dashboard', labelKey: 'portal.nav.dashboard', href: dashboardHref },
-    ]
+    const discovered = autoNavGroups.find((g) => g.id === 'main')?.items ?? []
+    const builtIn = discovered.map((item) => ({
+      id: item.id,
+      labelKey: item.labelKey,
+      label: item.label,
+      href: item.href,
+    }))
     return mergeMenuItems(builtIn, injectedMainItems)
-  }, [authenticated, dashboardHref, injectedMainItems])
+  }, [authenticated, autoNavGroups, injectedMainItems])
 
   const mergedAccountItems = useMemo(() => {
     if (!authenticated) return []
-    const builtIn = [
-      { id: 'portal-profile', labelKey: 'portal.nav.profile', href: profileHref },
-    ]
+    const discovered = autoNavGroups.find((g) => g.id === 'account')?.items ?? []
+    const builtIn = discovered.map((item) => ({
+      id: item.id,
+      labelKey: item.labelKey,
+      label: item.label,
+      href: item.href,
+    }))
     return mergeMenuItems(builtIn, injectedAccountItems)
-  }, [authenticated, profileHref, injectedAccountItems])
+  }, [authenticated, autoNavGroups, injectedAccountItems])
 
   /* ---- PUBLIC LAYOUT ---- */
   if (!authenticated) {

package/src/portal/hooks/__tests__/usePortalDashboardWidgets.test.tsx

@@ -0,0 +1,117 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { renderHook, waitFor } from '@testing-library/react'
+
+const loadInjectionWidgetsForSpotMock = jest.fn()
+const apiCallMock = jest.fn()
+
+jest.mock('@open-mercato/shared/modules/widgets/injection-loader', () => ({
+  loadInjectionWidgetsForSpot: (...args: unknown[]) => loadInjectionWidgetsForSpotMock(...args),
+}))
+
+jest.mock('../../../backend/utils/apiCall', () => ({
+  apiCall: (...args: unknown[]) => apiCallMock(...args),
+}))
+
+import { usePortalDashboardWidgets } from '../usePortalDashboardWidgets'
+
+function widget(id: string, features?: string[]) {
+  return {
+    moduleId: 'test',
+    spotId: 'portal:dashboard:sections',
+    widgetId: id,
+    Widget: () => null,
+    metadata: { id, features },
+  }
+}
+
+function mockFeatureCheckGranted(granted: string[]) {
+  apiCallMock.mockImplementation(async (url: string) => {
+    if (url === '/api/customer_accounts/portal/feature-check') {
+      return { ok: true, result: { ok: true, granted } }
+    }
+    throw new Error(`unexpected apiCall: ${url}`)
+  })
+}
+
+describe('usePortalDashboardWidgets — feature gating (Phase 1 regression)', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('returns widgets without required features regardless of grants', async () => {
+    loadInjectionWidgetsForSpotMock.mockResolvedValueOnce([widget('always-visible')])
+    // No features required → hook should skip the feature-check entirely
+
+    const { result } = renderHook(() => usePortalDashboardWidgets('portal:dashboard:sections' as any))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    expect(result.current.widgets).toHaveLength(1)
+    expect(result.current.widgets[0].widgetId).toBe('always-visible')
+    expect(apiCallMock).not.toHaveBeenCalled()
+  })
+
+  it('filters out widgets whose required feature the user lacks', async () => {
+    loadInjectionWidgetsForSpotMock.mockResolvedValueOnce([
+      widget('visible', ['portal.orders.view']),
+      widget('hidden', ['portal.billing.manage']),
+    ])
+    mockFeatureCheckGranted(['portal.orders.view'])
+
+    const { result } = renderHook(() => usePortalDashboardWidgets('portal:dashboard:sections' as any))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    const ids = result.current.widgets.map((w) => w.widgetId)
+    expect(ids).toEqual(['visible'])
+    expect(apiCallMock).toHaveBeenCalledWith(
+      '/api/customer_accounts/portal/feature-check',
+      expect.objectContaining({ method: 'POST' }),
+    )
+  })
+
+  it('resolves wildcard grants through the shared matcher', async () => {
+    loadInjectionWidgetsForSpotMock.mockResolvedValueOnce([
+      widget('orders-view', ['portal.orders.view']),
+      widget('orders-create', ['portal.orders.create']),
+      widget('billing', ['portal.billing.manage']),
+    ])
+    // Grant is a wildcard — server returns the concrete grants it matched.
+    mockFeatureCheckGranted(['portal.orders.view', 'portal.orders.create'])
+
+    const { result } = renderHook(() => usePortalDashboardWidgets('portal:dashboard:sections' as any))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    const ids = result.current.widgets.map((w) => w.widgetId).sort()
+    expect(ids).toEqual(['orders-create', 'orders-view'])
+  })
+
+  it('excludes all gated widgets when feature-check fails', async () => {
+    loadInjectionWidgetsForSpotMock.mockResolvedValueOnce([
+      widget('ungated'),
+      widget('gated', ['portal.orders.view']),
+    ])
+    apiCallMock.mockRejectedValueOnce(new Error('network down'))
+
+    const { result } = renderHook(() => usePortalDashboardWidgets('portal:dashboard:sections' as any))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    const ids = result.current.widgets.map((w) => w.widgetId)
+    // Ungated widget stays; gated widget is filtered because granted set is empty.
+    expect(ids).toEqual(['ungated'])
+  })
+
+  it('excludes widgets without a Widget component', async () => {
+    const noWidget = {
+      moduleId: 'test',
+      spotId: 'portal:dashboard:sections',
+      widgetId: 'data-only',
+      metadata: { id: 'data-only' },
+    } as any
+    loadInjectionWidgetsForSpotMock.mockResolvedValueOnce([widget('real'), noWidget])
+
+    const { result } = renderHook(() => usePortalDashboardWidgets('portal:dashboard:sections' as any))
+
+    await waitFor(() => expect(result.current.isLoading).toBe(false))
+    expect(result.current.widgets.map((w) => w.widgetId)).toEqual(['real'])
+  })
+})

package/src/portal/hooks/usePortalDashboardWidgets.ts

@@ -3,6 +3,39 @@
 import * as React from 'react'
 import type { InjectionSpotId } from '@open-mercato/shared/modules/widgets/injection'
 import { loadInjectionWidgetsForSpot, type LoadedInjectionWidget } from '@open-mercato/shared/modules/widgets/injection-loader'
+import { hasAllFeatures } from '@open-mercato/shared/security/features'
+import { apiCall } from '../../backend/utils/apiCall'
+
+type PortalFeatureCheckResponse = {
+  ok: boolean
+  granted?: string[]
+}
+
+function collectRequiredFeatures(widgets: LoadedInjectionWidget[]): string[] {
+  const set = new Set<string>()
+  for (const widget of widgets) {
+    for (const feature of widget.metadata.features ?? []) {
+      if (!feature || feature.trim().length === 0) continue
+      set.add(feature)
+    }
+  }
+  return Array.from(set)
+}
+
+async function readPortalGrantedFeatures(features: string[]): Promise<Set<string>> {
+  if (features.length === 0) return new Set()
+  try {
+    const { ok, result: data } = await apiCall<PortalFeatureCheckResponse>('/api/customer_accounts/portal/feature-check', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ features }),
+    })
+    if (!ok || !data?.ok) return new Set()
+    return new Set(data.granted ?? [])
+  } catch {
+    return new Set()
+  }
+}
 
 /**
  * Loads UI injection widgets (with Widget component) for a portal spot.
@@ -10,6 +43,11 @@ import { loadInjectionWidgetsForSpot, type LoadedInjectionWidget } from '@open-m
  * Unlike `useInjectionDataWidgets` which loads data-only widgets (columns, fields, menuItems),
  * this hook loads widgets that export a `Widget` React component — suitable for
  * portal dashboard sections and other UI injection spots.
+ *
+ * Feature gating: widgets declaring `metadata.features` are filtered against the
+ * authenticated customer's grants resolved via
+ * `/api/customer_accounts/portal/feature-check`. Wildcard grants (`portal.*`) resolve
+ * through the shared matcher.
  */
 export function usePortalDashboardWidgets(spotId: InjectionSpotId): {
   widgets: LoadedInjectionWidget[]
@@ -19,6 +57,7 @@ export function usePortalDashboardWidgets(spotId: InjectionSpotId): {
   const [widgets, setWidgets] = React.useState<LoadedInjectionWidget[]>([])
   const [isLoading, setIsLoading] = React.useState(true)
   const [error, setError] = React.useState<string | null>(null)
+  const [grantedFeatures, setGrantedFeatures] = React.useState<Set<string>>(new Set())
 
   React.useEffect(() => {
     let mounted = true
@@ -31,6 +70,10 @@ export function usePortalDashboardWidgets(spotId: InjectionSpotId): {
         // Only keep widgets that have a Widget component
         const uiWidgets = loaded.filter((w) => typeof w.Widget === 'function')
         setWidgets(uiWidgets)
+        const required = collectRequiredFeatures(uiWidgets)
+        const granted = await readPortalGrantedFeatures(required)
+        if (!mounted) return
+        setGrantedFeatures(granted)
       } catch (loadError) {
         if (!mounted) return
         console.error(`[usePortalDashboardWidgets] Failed to load widgets for spot ${spotId}:`, loadError)
@@ -46,5 +89,16 @@ export function usePortalDashboardWidgets(spotId: InjectionSpotId): {
     }
   }, [spotId])
 
-  return { widgets, isLoading, error }
+  const grantedFeatureList = React.useMemo(() => Array.from(grantedFeatures), [grantedFeatures])
+
+  const visibleWidgets = React.useMemo(
+    () =>
+      widgets.filter((widget) => {
+        const required = widget.metadata.features ?? []
+        return required.length === 0 || hasAllFeatures(grantedFeatureList, required)
+      }),
+    [widgets, grantedFeatureList],
+  )
+
+  return { widgets: visibleWidgets, isLoading, error }
 }

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

@@ -0,0 +1,199 @@
+import type { FrontendRouteManifestEntry } from '@open-mercato/shared/modules/registry'
+import { buildPortalNav, mergePortalSidebarGroupsWithInjected } from '../nav'
+
+function makeRoute(partial: Partial<FrontendRouteManifestEntry>): FrontendRouteManifestEntry {
+  return {
+    moduleId: 'test',
+    pattern: '/[orgSlug]/portal/test',
+    load: async () => null as any,
+    ...partial,
+  } as FrontendRouteManifestEntry
+}
+
+describe('buildPortalNav', () => {
+  it('auto-lists portal pages that declare nav metadata', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', labelKey: 'portal.nav.dashboard', group: 'main', order: 10 },
+      }),
+      makeRoute({
+        pattern: '/[orgSlug]/portal/profile',
+        nav: { label: 'Profile', labelKey: 'portal.nav.profile', group: 'account', order: 10 },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+
+    expect(groups).toEqual([
+      {
+        id: 'main',
+        items: [
+          expect.objectContaining({
+            label: 'Dashboard',
+            labelKey: 'portal.nav.dashboard',
+            href: '/my-org/portal/dashboard',
+            order: 10,
+          }),
+        ],
+      },
+      {
+        id: 'account',
+        items: [
+          expect.objectContaining({
+            label: 'Profile',
+            labelKey: 'portal.nav.profile',
+            href: '/my-org/portal/profile',
+            order: 10,
+          }),
+        ],
+      },
+    ])
+  })
+
+  it('skips pages without nav metadata', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({ pattern: '/[orgSlug]/portal/login' }),
+      makeRoute({
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+    ]
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    expect(groups).toHaveLength(1)
+    expect(groups[0].id).toBe('main')
+    expect(groups[0].items.map((i) => i.label)).toEqual(['Dashboard'])
+  })
+
+  it('skips pages the user lacks required features for', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+      makeRoute({
+        pattern: '/[orgSlug]/portal/dashboard',
+        nav: { label: 'Dashboard', group: 'main' },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })
+    expect(groups).toEqual([
+      { id: 'main', items: [expect.objectContaining({ label: 'Dashboard' })] },
+    ])
+  })
+
+  it('matches wildcard grants like portal.*', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: ['portal.*'] })
+    expect(groups).toEqual([{ id: 'main', items: [expect.objectContaining({ label: 'Orders' })] }])
+  })
+
+  it('bypasses feature checks when isPortalAdmin is true', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/orders',
+        requireCustomerFeatures: ['portal.orders.view'],
+        nav: { label: 'Orders', group: 'main' },
+      }),
+    ]
+
+    const groups = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [], isPortalAdmin: true })
+    expect(groups[0].items[0].label).toBe('Orders')
+  })
+
+  it('ignores navHidden pages even when nav is declared', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/secret',
+        navHidden: true,
+        nav: { label: 'Secret', group: 'main' },
+      }),
+    ]
+    expect(buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })).toEqual([])
+  })
+
+  it('skips non-portal routes and dynamic patterns with unresolved params', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/orders/[id]',
+        nav: { label: 'Order Detail', group: 'main' },
+      }),
+      makeRoute({
+        pattern: '/[orgSlug]/checkout',
+        nav: { label: 'Checkout', group: 'main' },
+      }),
+    ]
+    expect(buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })).toEqual([])
+  })
+
+  it('sorts items by order then label', () => {
+    const routes: FrontendRouteManifestEntry[] = [
+      makeRoute({
+        pattern: '/[orgSlug]/portal/b',
+        nav: { label: 'B', group: 'main', order: 20 },
+      }),
+      makeRoute({
+        pattern: '/[orgSlug]/portal/a',
+        nav: { label: 'A', group: 'main', order: 10 },
+      }),
+      makeRoute({
+        pattern: '/[orgSlug]/portal/aa',
+        nav: { label: 'Aa', group: 'main', order: 10 },
+      }),
+    ]
+    const main = buildPortalNav({ routes, orgSlug: 'my-org', grantedFeatures: [] })[0]
+    expect(main.items.map((i) => i.label)).toEqual(['A', 'Aa', 'B'])
+  })
+})
+
+describe('mergePortalSidebarGroupsWithInjected', () => {
+  it('dedupes injected items by id', () => {
+    const result = mergePortalSidebarGroupsWithInjected(
+      [
+        {
+          id: 'main',
+          items: [
+            { id: 'portal-nav:/[orgSlug]/portal/dashboard', label: 'Dashboard', href: '/x/portal/dashboard', order: 10 },
+          ],
+        },
+      ],
+      {
+        main: [
+          { id: 'portal-nav:/[orgSlug]/portal/dashboard', label: 'Dashboard (injected)', href: '/x/portal/dashboard' } as any,
+          { id: 'orders-external', label: 'External', href: 'https://external' } as any,
+        ],
+        account: [],
+      },
+    )
+    expect(result.main).toHaveLength(2)
+    expect(result.main[0]).toEqual(expect.objectContaining({ label: 'Dashboard' }))
+    expect(result.main[1]).toEqual(expect.objectContaining({ id: 'orders-external' }))
+  })
+
+  it('dedupes injected items by href', () => {
+    const result = mergePortalSidebarGroupsWithInjected(
+      [
+        {
+          id: 'main',
+          items: [
+            { id: 'portal-nav:/[orgSlug]/portal/profile', label: 'Profile', href: '/x/portal/profile', order: 10 },
+          ],
+        },
+      ],
+      {
+        main: [{ id: 'different-id', label: 'Profile', href: '/x/portal/profile' } as any],
+        account: [],
+      },
+    )
+    expect(result.main).toHaveLength(1)
+  })
+})