Introduce PayrollLanding component as first step in RunPayrollFlow #586

jeffredodd · 2025-09-22T16:33:14Z

Summary

Introduces a Payroll Landing component that centralizes Payroll History and Run Payroll flows inside tabbed navigation.
Also resolves type errors in the PayrollListPresentation component.
These errors occurred because the embedded API model now exposes nullable date fields, but parseDateStringToLocal expects string parameters.

Changes

Centralized Payroll History and Run Payroll flows inside tabs on the new Payroll Landing component.
Updated the entry point to the Run Payroll flow to align with the new tabbed structure.

Screenshots

jeffredodd · 2025-09-22T16:37:42Z

src/components/Payroll/PayrollList/PayrollListPresentation.tsx

-        <Flex flexDirection="column" alignItems="center" gap={24}>
-          <div className={styles.doneIcon}>✓</div>
-          <Text>{t('emptyState')}</Text>
+    <Flex flexDirection="column" gap={16}>


Wrapped this in the same flex layout I've been using in Payroll History for consistent spacing

jeffredodd · 2025-09-22T16:40:09Z

.ladle/helpers/I18nWrapper.tsx

@@ -0,0 +1,18 @@
+import { I18nextProvider } from 'react-i18next'


Seemed like the best way to bring app i18n context to a story that had compound i18n dictionaries.

Is there a way we can set this on all stories? i thought we already had that configured somewhere?

Copilot

Pull Request Overview

This PR introduces a centralized Payroll Landing component that consolidates the Payroll History and Run Payroll flows into a tabbed navigation interface. It also fixes type safety issues in the PayrollListPresentation component where nullable date fields from the embedded API model were being passed to functions expecting non-null strings.

Centralizes payroll flows into a new tabbed interface structure
Resolves type errors by adding null checks before date parsing operations
Updates component exports and entry points to use the new landing component

Reviewed Changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/i18n/en/Payroll.PayrollList.json	Adds "title" translation for upcoming payroll section
src/i18n/en/Payroll.PayrollLanding.json	New translation file for tab labels and accessibility text
src/components/Payroll/index.ts	Exports the new PayrollLanding component
src/components/Payroll/RunPayrollFlow/RunPayrollFlow.tsx	Simplifies to use PayrollLanding instead of direct RunPayroll
src/components/Payroll/PayrollList/PayrollListPresentation.tsx	Fixes type safety with null checks for date parsing
src/components/Payroll/PayrollLanding/PayrollLanding.tsx	New tabbed interface component for payroll flows
src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx	Comprehensive test coverage for the new component
src/components/Payroll/PayrollLanding/PayrollLanding.stories.tsx	Storybook implementation for design system integration
src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx	Minor layout alignment adjustment
src/components/Payroll/PayrollHistory/PayrollHistory.stories.tsx	Adds I18n wrapper for proper localization
.ladle/helpers/I18nWrapper.tsx	New helper component for storybook internationalization

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

serikjensen

Looking good! biggest thing is replacing RunPayroll in PayrollLanding with the PayrollList component and then replacing PayrollList in RunPayroll with the PayrollLanding component

serikjensen · 2025-09-22T20:37:51Z

.ladle/helpers/I18nWrapper.tsx

@@ -0,0 +1,18 @@
+import { I18nextProvider } from 'react-i18next'


Is there a way we can set this on all stories? i thought we already had that configured somewhere?

serikjensen · 2025-09-22T20:39:21Z

src/components/Payroll/PayrollLanding/PayrollLanding.stories.tsx

+const PayrollLandingStoryContent = () => {
+  const [selectedTab, setSelectedTab] = useState('run-payroll')
+  const { Tabs } = useComponentContext()
+
+  const tabs = [
+    {
+      id: 'run-payroll',
+      label: 'Run payroll',
+      content: (
+        <PayrollListPresentation
+          payrolls={mockPayrolls}
+          paySchedules={mockPaySchedules}
+          onRunPayroll={action('onRunPayroll')}
+        />
+      ),
+    },
+    {
+      id: 'payroll-history',
+      label: 'Payroll history',
+      content: (
+        <PayrollHistoryPresentation
+          payrollHistory={mockPayrollHistory}
+          selectedTimeFilter="3months"
+          onTimeFilterChange={action('onTimeFilterChange')}
+          onViewSummary={action('onViewSummary')}
+          onViewReceipt={action('onViewReceipt')}
+          onCancelPayroll={action('onCancelPayroll')}
+        />
+      ),
+    },
+  ]
+
+  return (
+    <Tabs
+      tabs={tabs}
+      selectedId={selectedTab}
+      onSelectionChange={setSelectedTab}
+      aria-label="Payroll navigation"
+    />
+  )
+}


Looks like this should actually be importing the PayrollLanding component instead of recreating the tabs here?

We can nuke this, this was an attempt at mocking since we can't run live code in ladle

Would you prefer I rename it to 'mock' and we keep it OR should we 🪓

I think we can just remove or bring in the actual component!

I went the removal path :)

serikjensen · 2025-09-22T20:41:21Z

src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx

+// Mock the child components
+vi.mock('../RunPayrollFlow/RunPayroll', () => ({
+  RunPayroll: ({
+    companyId,
+    onEvent,
+  }: {
+    companyId: string
+    onEvent: (event: string, payload: unknown) => void
+  }) => (
+    <div data-testid="run-payroll">
+      <h2>Run Payroll</h2>
+      <p>Company ID: {companyId}</p>
+      <button
+        onClick={() => {
+          onEvent('test-event', {})
+        }}
+      >
+        Test Event
+      </button>
+    </div>
+  ),
+}))
+
+vi.mock('../PayrollHistory/PayrollHistory', () => ({
+  PayrollHistory: ({
+    companyId,
+    onEvent,
+  }: {
+    companyId: string
+    onEvent: (event: string, payload: unknown) => void
+  }) => (
+    <div data-testid="payroll-history">
+      <h2>Payroll History</h2>
+      <p>Company ID: {companyId}</p>
+      <button
+        onClick={() => {
+          onEvent('test-event', {})
+        }}
+      >
+        Test Event
+      </button>
+    </div>
+  ),
+}))


Is it preferable to mock these? i wonder if it would be more aligned with our testing approach to configure the test fixtures so they could get mocked with msw

serikjensen · 2025-09-22T20:42:34Z

src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx

+  describe('internationalization', () => {
+    it('uses correct translation keys for tab labels', async () => {
+      renderWithProviders(<PayrollLanding {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(screen.getByTestId('run-payroll')).toBeInTheDocument()
+      })
+
+      // Check that translated tab labels are used
+      expect(screen.getByRole('tab', { name: 'Run payroll' })).toBeInTheDocument()
+      expect(screen.getByRole('tab', { name: 'Payroll history' })).toBeInTheDocument()
+    })
+  })


Nit: this kinda gets tested implicitly already with the above since we query by these to select the tabs

serikjensen · 2025-09-22T20:45:33Z

src/components/Payroll/PayrollLanding/PayrollLanding.tsx

+        <RunPayroll
+          companyId={companyId}
+          Configuration={PayrollConfiguration}
+          List={PayrollList}
+          Overview={PayrollOverview}
+          EditEmployee={PayrollEditEmployee}
+          onEvent={onEvent}
+        />


This is going to cause an issue where the entire payroll experience is in a single tab. We actually just want to render PayrollList for the content here.

Then, we would update the RunPayroll component to use this PayrollLanding component instead. This will emit events to RunPayroll which can manage transitions between the blocks

serikjensen

Looks good! left some optional follow ups

serikjensen · 2025-09-23T17:27:05Z

src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx

+  describe('event handling', () => {
+    it('renders child components with proper props', async () => {
+      renderWithProviders(<PayrollLanding {...defaultProps} />)
+
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Run payroll' })).toBeInTheDocument()
+      })
+
+      // Verify PayrollList is rendered with data
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { name: 'Upcoming payroll' })).toBeInTheDocument()
+      })
+
+      // Verify both tabs are available, indicating child components are receiving proper props
+      expect(screen.getByRole('tab', { name: 'Run payroll' })).toBeInTheDocument()
+      expect(screen.getByRole('tab', { name: 'Payroll history' })).toBeInTheDocument()
+    })
+  })


Nit: this says event handling and then doesn't actually verify events? current test looks redundant here?

serikjensen · 2025-09-23T17:28:15Z

src/components/Payroll/PayrollLanding/PayrollLanding.test.tsx

+    it('switches to payroll history component when tab is clicked', async () => {
+      const user = userEvent.setup()
+      renderWithProviders(<PayrollLanding {...defaultProps} />)
+
+      // Wait for initial render
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Run payroll' })).toBeInTheDocument()
+      })
+
+      // Click on payroll history tab
+      const payrollHistoryTab = screen.getByRole('tab', { name: 'Payroll history' })
+      await user.click(payrollHistoryTab)
+
+      // Check that payroll history tab is now selected
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Payroll history' })).toHaveAttribute(
+          'aria-selected',
+          'true',
+        )
+      })
+
+      expect(screen.getByRole('tab', { name: 'Run payroll' })).toHaveAttribute(
+        'aria-selected',
+        'false',
+      )
+
+      // Verify PayrollHistory component content is now visible
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { name: 'Payroll history' })).toBeInTheDocument()
+      })
+      expect(screen.queryByRole('heading', { name: 'Run payroll' })).not.toBeInTheDocument()
+    })
+
+    it('switches back to run payroll component when tab is clicked', async () => {
+      const user = userEvent.setup()
+      renderWithProviders(<PayrollLanding {...defaultProps} />)
+
+      // Wait for initial render
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Run payroll' })).toBeInTheDocument()
+      })
+
+      // Switch to payroll history tab
+      const payrollHistoryTab = screen.getByRole('tab', { name: 'Payroll history' })
+      await user.click(payrollHistoryTab)
+
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Payroll history' })).toHaveAttribute(
+          'aria-selected',
+          'true',
+        )
+      })
+
+      // Switch back to run payroll tab
+      const runPayrollTab = screen.getByRole('tab', { name: 'Run payroll' })
+      await user.click(runPayrollTab)
+
+      // Check that run payroll tab is selected again
+      await waitFor(() => {
+        expect(screen.getByRole('tab', { name: 'Run payroll' })).toHaveAttribute(
+          'aria-selected',
+          'true',
+        )
+      })
+
+      expect(screen.getByRole('tab', { name: 'Payroll history' })).toHaveAttribute(
+        'aria-selected',
+        'false',
+      )
+
+      // Verify PayrollList component content is visible again
+      await waitFor(() => {
+        expect(screen.getByRole('heading', { name: 'Upcoming payroll' })).toBeInTheDocument()
+      })
+      expect(screen.queryByRole('heading', { name: 'Payroll history' })).not.toBeInTheDocument()
+    })


This ends up being a pretty large couple of tests to verify tab clicking behavior. is it sufficient to have this covered by a single test that verifies the navigation?

serikjensen · 2025-09-23T17:29:39Z

src/components/Payroll/RunPayrollFlow/RunPayroll.tsx

  companyId,
  Configuration,
+  Landing,
  List,


Looks like we should be able to remove List from the component now since that is no longer being used?

- Add PayrollLanding component with RunPayroll and PayrollHistory tabs - Fix TypeScript interface to include resource key generic - Add comprehensive unit tests focused on component orchestration - Add translation support with Payroll.PayrollLanding namespace - Fix ESLint import order in PayrollHistory.stories.tsx - Fix failing test in PayrollHistoryPresentation with waitFor - Add demo story for PayrollLanding (uses presentation components directly) - Update PayrollLanding to use proper BaseComponentInterface typing

jeffredodd commented Sep 22, 2025

View reviewed changes

jeffredodd marked this pull request as ready for review September 22, 2025 16:41

jeffredodd requested review from Copilot and serikjensen September 22, 2025 16:41

Copilot AI reviewed Sep 22, 2025

View reviewed changes

serikjensen reviewed Sep 22, 2025

View reviewed changes

jeffredodd changed the title ~~Fix PayrollListPresentation type issues after cherry-pick~~ Introduce PayrollLanding component as first step in RunPayrollFlow Sep 23, 2025

serikjensen approved these changes Sep 23, 2025

View reviewed changes

jeffredodd added 3 commits September 23, 2025 11:47

fix: pr feedback

5151b8f

fix: pr feedback

4603a73

jeffredodd force-pushed the jdj/landing-page-payroll branch from 967ce6e to 4603a73 Compare September 23, 2025 18:47

jeffredodd enabled auto-merge (squash) September 23, 2025 18:48

jeffredodd merged commit cdba1c6 into main Sep 23, 2025
3 checks passed

jeffredodd deleted the jdj/landing-page-payroll branch September 23, 2025 18:50

		@@ -0,0 +1,18 @@
		import { I18nextProvider } from 'react-i18next'

Introduce PayrollLanding component as first step in RunPayrollFlow #586

Introduce PayrollLanding component as first step in RunPayrollFlow #586

Conversation

jeffredodd commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Screenshots

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

serikjensen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serikjensen left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

jeffredodd commented Sep 22, 2025 •

edited

Loading