@faststore/core 4.4.1-dev.0 → 4.5.0-dev.1

package/test/components/account/ContractSwitcher.browser.test.tsx

@@ -0,0 +1,236 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockUseAvailableContracts = vi.hoisted(() => vi.fn())
+const mockSwitchContract = vi.hoisted(() => vi.fn())
+const mockUseSwitchContract = vi.hoisted(() => vi.fn())
+
+vi.mock('src/sdk/account/useAvailableContracts', () => ({
+  useAvailableContracts: mockUseAvailableContracts,
+}))
+
+vi.mock('src/sdk/account/useSwitchContract', () => ({
+  useSwitchContract: mockUseSwitchContract,
+}))
+
+vi.mock('src/sdk/session', () => ({
+  useSession: () => ({
+    b2b: { customerId: 'a', unitId: 'unit-1' },
+  }),
+}))
+
+import { ContractSwitcher } from '../../../src/components/account/Drawer/OrganizationDrawer/ContractSwitcher'
+
+const contracts = [
+  { id: 'a', corporateName: 'Stellar Global', isActive: true, isDefault: true },
+  { id: 'b', corporateName: 'Acme Foods', isActive: false },
+  { id: 'c', corporateName: 'Beacon Security Corp', isActive: false },
+]
+
+describe('ContractSwitcher', () => {
+  beforeEach(() => {
+    mockSwitchContract.mockResolvedValue(true)
+    mockUseSwitchContract.mockReturnValue({
+      switchContract: mockSwitchContract,
+      loading: false,
+      error: null,
+      enabled: true,
+    })
+    mockUseAvailableContracts.mockReturnValue({
+      contracts,
+      loading: false,
+      error: null,
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('shows a loading state while contracts load', () => {
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [],
+      loading: true,
+      error: null,
+    })
+
+    const { container } = render(
+      <ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />
+    )
+
+    expect(
+      container.querySelector('[data-fs-contract-switcher-loading]')
+    ).toBeTruthy()
+  })
+
+  it('shows an error state when the list fails to load', () => {
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [],
+      loading: false,
+      error: new Error('boom'),
+    })
+
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    expect(screen.getByRole('alert')).toBeTruthy()
+  })
+
+  it('shows an empty state when there is no alternative contract', () => {
+    mockUseAvailableContracts.mockReturnValue({
+      contracts: [{ id: 'a', corporateName: 'Stellar Global', isActive: true }],
+      loading: false,
+      error: null,
+    })
+
+    const { container } = render(
+      <ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />
+    )
+
+    expect(
+      container.querySelector('[data-fs-contract-switcher-empty]')
+    ).toBeTruthy()
+  })
+
+  it('shows the active contract as the current session and lists alternatives (REQ-04, REQ-05)', () => {
+    const { container } = render(
+      <ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />
+    )
+
+    const currentCard = container.querySelector(
+      '[data-fs-contract-switcher-current-card]'
+    )
+    expect(currentCard?.textContent).toContain('Stellar Global')
+    expect(
+      currentCard?.querySelector('[data-fs-contract-switcher-default]')
+    ).toBeTruthy()
+
+    // The active contract is not offered as a selectable alternative.
+    expect(screen.getByText('Acme Foods')).toBeTruthy()
+    expect(screen.getByText('Beacon Security Corp')).toBeTruthy()
+    const options = container.querySelectorAll(
+      '[data-fs-contract-switcher-option]'
+    )
+    expect(options.length).toBe(2)
+  })
+
+  it('requires selecting a contract before Confirm is enabled, then switches (REQ-03)', async () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    const confirm = screen.getByRole('button', { name: /confirm/i })
+    expect((confirm as HTMLButtonElement).disabled).toBe(true)
+
+    fireEvent.click(screen.getByText('Acme Foods'))
+    expect((confirm as HTMLButtonElement).disabled).toBe(false)
+
+    fireEvent.click(confirm)
+
+    await waitFor(() => expect(mockSwitchContract).toHaveBeenCalledWith('b'))
+  })
+
+  it('keeps Confirm disabled until a different contract is selected', () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    const confirm = screen.getByRole('button', { name: /confirm/i })
+    expect((confirm as HTMLButtonElement).disabled).toBe(true)
+
+    fireEvent.click(screen.getByText('Acme Foods'))
+
+    expect((confirm as HTMLButtonElement).disabled).toBe(false)
+  })
+
+  it('keeps Confirm disabled when switching is unavailable', () => {
+    mockUseSwitchContract.mockReturnValue({
+      switchContract: mockSwitchContract,
+      loading: false,
+      error: null,
+      enabled: false,
+    })
+
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    fireEvent.click(screen.getByText('Acme Foods'))
+
+    const confirm = screen.getByRole('button', { name: /confirm/i })
+    expect((confirm as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('keeps Confirm disabled when the selected contract is filtered out', () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    fireEvent.click(screen.getByText('Acme Foods'))
+
+    const confirm = screen.getByRole('button', { name: /confirm/i })
+    expect((confirm as HTMLButtonElement).disabled).toBe(false)
+
+    fireEvent.change(screen.getByLabelText('Search contracts'), {
+      target: { value: 'beacon' },
+    })
+
+    expect((confirm as HTMLButtonElement).disabled).toBe(true)
+  })
+
+  it('filters the alternatives by search', () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    fireEvent.change(screen.getByLabelText('Search contracts'), {
+      target: { value: 'acme' },
+    })
+
+    expect(screen.getByText('Acme Foods')).toBeTruthy()
+    expect(screen.queryByText('Beacon Security Corp')).toBeNull()
+  })
+
+  it('shows an empty search result message when nothing matches', () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    fireEvent.change(screen.getByLabelText('Search contracts'), {
+      target: { value: 'zzzz-no-match' },
+    })
+
+    expect(screen.getByText('No contracts match your search.')).toBeTruthy()
+  })
+
+  it('clears the search input', () => {
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    const searchInput = screen.getByLabelText(
+      'Search contracts'
+    ) as HTMLInputElement
+
+    fireEvent.change(searchInput, {
+      target: { value: 'acme' },
+    })
+    fireEvent.click(screen.getByLabelText('Clear search'))
+
+    expect(searchInput.value).toBe('')
+    expect(screen.getByText('Beacon Security Corp')).toBeTruthy()
+  })
+
+  it('shows a switch error when the contract change fails', () => {
+    mockUseSwitchContract.mockReturnValue({
+      switchContract: mockSwitchContract,
+      loading: false,
+      error: new Error('switch failed'),
+      enabled: true,
+    })
+
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    expect(screen.getByText(/couldn't switch your contract/i)).toBeTruthy()
+  })
+
+  it('does not reload when the switch returns false', async () => {
+    mockSwitchContract.mockResolvedValue(false)
+
+    render(<ContractSwitcher onBack={vi.fn()} onClose={vi.fn()} />)
+
+    fireEvent.click(screen.getByText('Acme Foods'))
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }))
+
+    await waitFor(() => expect(mockSwitchContract).toHaveBeenCalledWith('b'))
+  })
+})

package/test/components/account/Layout.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseSession = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
+
+vi.mock('../../../src/components/account/Menu', () => ({
+  __esModule: true,
+  default: ({ items }: { items: Array<{ title: string; route: string }> }) => (
+    <ul>
+      {items.map((item) => (
+        <li key={item.route}>{item.title}</li>
+      ))}
+    </ul>
+  ),
+}))
+
+import Layout from '../../../src/components/account/Layout/Layout'
+
+describe('Layout', () => {
+  it('hides the Quotes route when the user is not an org member', () => {
+    mockUseSession.mockReturnValue({ b2b: null })
+
+    render(<Layout accountName="Jane Doe">content</Layout>)
+
+    expect(screen.queryByText('Quotes')).toBeNull()
+    expect(screen.getByText('Profile')).toBeTruthy()
+  })
+
+  it('shows the Quotes route when the user belongs to an org unit', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(<Layout accountName="Jane Doe">content</Layout>)
+
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('hides User Details when not a representative, regardless of org membership', () => {
+    mockUseSession.mockReturnValue({ b2b: { unitId: 'unit-1' } })
+
+    render(
+      <Layout accountName="Jane Doe" isRepresentative={false}>
+        content
+      </Layout>
+    )
+
+    expect(screen.queryByText('User Details')).toBeNull()
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('renders children inside the layout content area', () => {
+    mockUseSession.mockReturnValue({ b2b: null })
+
+    render(<Layout accountName="Jane Doe">child content</Layout>)
+
+    expect(screen.getByText('child content')).toBeTruthy()
+  })
+})

package/test/components/account/OrganizationDrawer.browser.test.tsx

@@ -0,0 +1,197 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ReactNode } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const mockFadeOut = vi.hoisted(() => vi.fn())
+const mockUseSession = vi.hoisted(() => vi.fn())
+const mockCloseDrawer = vi.hoisted(() => vi.fn())
+
+vi.mock('@faststore/ui', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@faststore/ui')>()
+
+  return {
+    ...actual,
+    useFadeEffect: () => ({ fade: 'in', fadeOut: mockFadeOut }),
+    SlideOver: ({
+      children,
+      isOpen,
+      onTransitionEnd,
+    }: {
+      children: ReactNode
+      isOpen: boolean
+      onTransitionEnd?: () => void
+    }) =>
+      isOpen ? (
+        <div
+          data-testid="organization-drawer"
+          onTransitionEnd={onTransitionEnd}
+        >
+          {children}
+        </div>
+      ) : null,
+  }
+})
+
+vi.mock('src/sdk/session', () => ({ useSession: mockUseSession }))
+
+vi.mock(
+  '../../../src/components/account/Drawer/OrganizationDrawer/ContractSwitcher',
+  () => ({
+    ContractSwitcher: ({
+      onBack,
+      onClose,
+    }: {
+      onBack: () => void
+      onClose: () => void
+    }) => (
+      <div data-testid="contract-switcher">
+        <button type="button" onClick={onBack}>
+          Back to menu
+        </button>
+        <button type="button" onClick={onClose}>
+          Close switcher
+        </button>
+      </div>
+    ),
+  })
+)
+
+vi.mock(
+  '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerBody',
+  () => ({
+    OrganizationDrawerBody: () => <nav data-fs-organization-drawer-body />,
+  })
+)
+
+import { OrganizationDrawer } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawer'
+
+describe('OrganizationDrawer', () => {
+  beforeEach(() => {
+    mockUseSession.mockReturnValue({
+      b2b: {
+        unitId: 'unit-1',
+        unitName: 'Stellar Global',
+        contractName: 'Acme Contract',
+        userName: 'Jane Buyer',
+        userEmail: 'jane@example.com',
+        organizationManager: true,
+      },
+      person: { givenName: 'Jane' },
+    })
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders the menu view with contract details and manage footer', () => {
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.getByText('Acme Contract')).toBeTruthy()
+    expect(screen.getByText('Stellar Global')).toBeTruthy()
+    expect(screen.getByText('Jane Buyer')).toBeTruthy()
+    expect(screen.getByRole('link', { name: /manage/i })).toBeTruthy()
+    expect(screen.getByRole('button', { name: /change/i })).toBeTruthy()
+  })
+
+  it('opens the contract switcher and returns to the menu on back', () => {
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /change/i }))
+    expect(screen.getByTestId('contract-switcher')).toBeTruthy()
+
+    fireEvent.click(screen.getByRole('button', { name: /back to menu/i }))
+    expect(screen.queryByTestId('contract-switcher')).toBeNull()
+    expect(screen.getByRole('button', { name: /change/i })).toBeTruthy()
+  })
+
+  it('resets to the menu when the drawer closes', () => {
+    const { rerender } = render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /change/i }))
+    expect(screen.getByTestId('contract-switcher')).toBeTruthy()
+
+    rerender(
+      <OrganizationDrawer
+        isOpen={false}
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    rerender(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.queryByTestId('contract-switcher')).toBeNull()
+    expect(screen.getByRole('button', { name: /change/i })).toBeTruthy()
+  })
+
+  it('falls back to person name when contract metadata is missing', () => {
+    mockUseSession.mockReturnValue({
+      b2b: {
+        unitId: 'unit-1',
+        userName: 'Jane Buyer',
+      },
+      person: { givenName: 'Jane' },
+    })
+
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.getByRole('heading', { name: 'Jane', level: 1 })).toBeTruthy()
+  })
+
+  it('hides contract switching when the buyer has no organization unit', () => {
+    mockUseSession.mockReturnValue({
+      b2b: {
+        userName: 'Jane Buyer',
+      },
+      person: null,
+    })
+
+    render(
+      <OrganizationDrawer
+        isOpen
+        closeDrawer={mockCloseDrawer}
+        isRepresentative={false}
+      />
+    )
+
+    expect(screen.queryByRole('button', { name: /change/i })).toBeNull()
+    expect(
+      screen.getByRole('heading', { name: 'Organization', level: 1 })
+    ).toBeTruthy()
+  })
+})

package/test/components/account/OrganizationDrawerBody.test.tsx

@@ -0,0 +1,52 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+const mockUseAccountNavigationLabels = vi.hoisted(() => vi.fn())
+vi.mock('src/sdk/account/accountPageContext', () => ({
+  useAccountNavigationLabels: mockUseAccountNavigationLabels,
+}))
+
+vi.mock('src/components/ui/Link', () => ({
+  __esModule: true,
+  default: ({
+    href,
+    children,
+  }: {
+    href: string
+    children: React.ReactNode
+  }) => <a href={href}>{children}</a>,
+}))
+
+import { OrganizationDrawerBody } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerBody'
+
+describe('OrganizationDrawerBody', () => {
+  it('hides the Quotes route when the user is not an org member', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative isOrgMember={false} />)
+
+    expect(screen.queryByText('Quotes')).toBeNull()
+    expect(screen.getByText('Profile')).toBeTruthy()
+  })
+
+  it('shows the Quotes route when the user belongs to an org unit', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative isOrgMember />)
+
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+
+  it('hides User Details when not a representative, regardless of org membership', () => {
+    mockUseAccountNavigationLabels.mockReturnValue(undefined)
+
+    render(<OrganizationDrawerBody isRepresentative={false} isOrgMember />)
+
+    expect(screen.queryByText('User Details')).toBeNull()
+    expect(screen.getByText('Quotes')).toBeTruthy()
+  })
+})

package/test/components/account/OrganizationDrawerFooter.browser.test.tsx

@@ -0,0 +1,54 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { OrganizationDrawerFooter } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerFooter'
+
+describe('OrganizationDrawerFooter', () => {
+  it('renders org and user details with optional email', () => {
+    render(
+      <OrganizationDrawerFooter
+        orgName="Stellar Global"
+        userName="Jane Buyer"
+        userEmail="jane@example.com"
+      />
+    )
+
+    expect(screen.getByText('Stellar Global')).toBeTruthy()
+    expect(screen.getByText('Jane Buyer')).toBeTruthy()
+    expect(screen.getByText('jane@example.com')).toBeTruthy()
+  })
+
+  it('shows manage link for organization managers', () => {
+    render(
+      <OrganizationDrawerFooter
+        orgName="Stellar Global"
+        userName="Jane Buyer"
+        showManageLink
+        manageUrl="/pvt/organization-account/org-unit/unit-1"
+      />
+    )
+
+    expect(
+      screen.getByRole('link', { name: /manage/i }).getAttribute('href')
+    ).toBe('/pvt/organization-account/org-unit/unit-1')
+  })
+
+  it('calls onLogoutClick from the logout button', () => {
+    const onLogoutClick = vi.fn()
+
+    render(
+      <OrganizationDrawerFooter
+        orgName="Stellar Global"
+        userName="Jane Buyer"
+        onLogoutClick={onLogoutClick}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /log out/i }))
+    expect(onLogoutClick).toHaveBeenCalledTimes(1)
+  })
+})

package/test/components/account/OrganizationDrawerHeader.browser.test.tsx

@@ -0,0 +1,55 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { OrganizationDrawerHeader } from '../../../src/components/account/Drawer/OrganizationDrawer/OrganizationDrawerHeader'
+
+describe('OrganizationDrawerHeader', () => {
+  it('renders contract name fallback initial and links when contractUrl is set', () => {
+    render(
+      <OrganizationDrawerHeader
+        contractName="Acme Corp"
+        contractUrl="/pvt/organization-account/org-unit/unit-1"
+        onCloseDrawer={vi.fn()}
+      />
+    )
+
+    expect(screen.getByText('Acme Corp')).toBeTruthy()
+    expect(screen.getByLabelText('Acme Corp').getAttribute('href')).toBe(
+      '/pvt/organization-account/org-unit/unit-1'
+    )
+    expect(screen.getByText('A')).toBeTruthy()
+  })
+
+  it('shows default star and Change action when configured', () => {
+    const onChangeContract = vi.fn()
+
+    render(
+      <OrganizationDrawerHeader
+        contractName="Acme Corp"
+        contractUrl={null}
+        isDefault
+        onChangeContract={onChangeContract}
+      />
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: /change/i }))
+    expect(onChangeContract).toHaveBeenCalledTimes(1)
+  })
+
+  it('renders custom contract image and omits manage links without contractUrl', () => {
+    render(
+      <OrganizationDrawerHeader
+        contractName="Acme Corp"
+        contractUrl={null}
+        contractImage={<img alt="Logo" src="/logo.png" />}
+      />
+    )
+
+    expect(screen.getByAltText('Logo')).toBeTruthy()
+    expect(screen.queryByRole('link', { name: /acme corp/i })).toBeNull()
+  })
+})