fix: fix payroll breadcrumbs and align with design

Author: serikjensen

src/components/Payroll/PayrollFlow/payrollStateMachine.ts

@@ -48,7 +48,7 @@ export const payrollFlowBreadcrumbsNodes: BreadcrumbNodes = {
     parent: null,
     item: {
       id: 'landing',
-      label: 'labels.breadcrumbLabel',
+      label: 'breadcrumbs.landing',
       namespace: 'Payroll.PayrollLanding',
       onNavigate: ((ctx: PayrollFlowContextInterface) => ({
         ...ctx,
@@ -90,6 +90,14 @@ export const payrollFlowBreadcrumbsNodes: BreadcrumbNodes = {
       })) as (context: unknown) => unknown,
     },
   },
+  submittedOverview: {
+    parent: 'landing',
+    item: {
+      id: 'submittedOverview',
+      label: 'breadcrumbs.overview',
+      namespace: 'Payroll.PayrollLanding',
+    },
+  },
   editEmployee: {
     parent: 'configuration',
     item: {
@@ -106,6 +114,14 @@ export const payrollFlowBreadcrumbsNodes: BreadcrumbNodes = {
       namespace: 'Payroll.PayrollReceipts',
     },
   },
+  submittedReceipts: {
+    parent: 'landing',
+    item: {
+      id: 'submittedReceipts',
+      label: 'breadcrumbs.receipt',
+      namespace: 'Payroll.PayrollLanding',
+    },
+  },
   blockers: {
     parent: 'landing',
     item: {
@@ -300,7 +316,23 @@ export const payrollMachine = {
         },
       ),
     ),
-
+    transition(
+      componentEvents.RUN_PAYROLL_PROCESSED,
+      'submittedOverview',
+      reduce((ctx: PayrollFlowContextInterface): PayrollFlowContextInterface => {
+        return {
+          ...updateBreadcrumbs('submittedOverview', ctx, {
+            startDate: ctx.payPeriod?.startDate ?? '',
+            endDate: ctx.payPeriod?.endDate ?? '',
+          }),
+          component: PayrollOverviewContextual,
+          ctaConfig: {
+            labelKey: 'exitFlowCta',
+            namespace: 'Payroll.PayrollOverview',
+          },
+        }
+      }),
+    ),
     transition(
       componentEvents.RUN_PAYROLL_RECEIPT_GET,
       'receipts',
@@ -330,6 +362,45 @@ export const payrollMachine = {
     ),
     exitFlowTransition,
   ),
+  submittedOverview: state<MachineTransition>(
+    breadcrumbNavigateTransition('landing'),
+    transition(
+      componentEvents.RUN_PAYROLL_RECEIPT_GET,
+      'submittedReceipts',
+      reduce((ctx: PayrollFlowContextInterface): PayrollFlowContextInterface => {
+        return {
+          ...updateBreadcrumbs('submittedReceipts', ctx, {
+            startDate: ctx.payPeriod?.startDate ?? '',
+            endDate: ctx.payPeriod?.endDate ?? '',
+          }),
+          component: PayrollReceiptsContextual,
+          progressBarType: 'breadcrumbs',
+          alerts: undefined,
+          ctaConfig: {
+            labelKey: 'exitFlowCta',
+            namespace: 'Payroll.PayrollReceipts',
+          },
+        }
+      }),
+    ),
+    transition(
+      componentEvents.RUN_PAYROLL_CANCELLED,
+      'landing',
+      reduce(
+        createReducer({
+          component: PayrollLandingContextual,
+          progressBarType: null,
+          alerts: undefined,
+          currentBreadcrumbId: 'landing',
+        }),
+      ),
+    ),
+    exitFlowTransition,
+  ),
+  submittedReceipts: state<MachineTransition>(
+    breadcrumbNavigateTransition('landing'),
+    exitFlowTransition,
+  ),
   editEmployee: state<MachineTransition>(
     breadcrumbNavigateTransition('landing'),
     breadcrumbNavigateTransition('configuration'),

src/components/Payroll/PayrollHistory/PayrollHistory.test.tsx

@@ -161,6 +161,8 @@ describe('PayrollHistory', () => {
       // Verify the correct event was emitted
       expect(onEvent).toHaveBeenCalledWith(componentEvents.RUN_PAYROLL_SUMMARY_VIEWED, {
         payrollId: 'payroll-1',
+        startDate: '2024-12-01',
+        endDate: '2024-12-15',
       })
     })
 
@@ -182,6 +184,8 @@ describe('PayrollHistory', () => {
 
       expect(onEvent).toHaveBeenCalledWith(componentEvents.RUN_PAYROLL_RECEIPT_VIEWED, {
         payrollId: 'payroll-1',
+        startDate: '2024-12-01',
+        endDate: '2024-12-15',
       })
     })
 

src/components/Payroll/PayrollHistory/PayrollHistory.tsx

@@ -77,12 +77,12 @@ export const Root = ({ onEvent, companyId, dictionary }: PayrollHistoryProps) =>
 
   const payrollHistory = payrollsData.payrollList || []
 
-  const handleViewSummary = (payrollId: string) => {
-    onEvent(componentEvents.RUN_PAYROLL_SUMMARY_VIEWED, { payrollId })
+  const handleViewSummary = (payrollId: string, startDate?: string, endDate?: string) => {
+    onEvent(componentEvents.RUN_PAYROLL_SUMMARY_VIEWED, { payrollId, startDate, endDate })
   }
 
-  const handleViewReceipt = (payrollId: string) => {
-    onEvent(componentEvents.RUN_PAYROLL_RECEIPT_VIEWED, { payrollId })
+  const handleViewReceipt = (payrollId: string, startDate?: string, endDate?: string) => {
+    onEvent(componentEvents.RUN_PAYROLL_RECEIPT_VIEWED, { payrollId, startDate, endDate })
   }
 
   const handleCancelPayroll = async (item: Payroll) => {

src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx

@@ -21,8 +21,8 @@ interface PayrollHistoryPresentationProps {
   wireInRequests: WireInRequest[]
   selectedTimeFilter: TimeFilterOption
   onTimeFilterChange: (value: TimeFilterOption) => void
-  onViewSummary: (payrollId: string) => void
-  onViewReceipt: (payrollId: string) => void
+  onViewSummary: (payrollId: string, startDate?: string, endDate?: string) => void
+  onViewReceipt: (payrollId: string, startDate?: string, endDate?: string) => void
   onCancelPayroll: (item: Payroll) => void
   cancelDialogItem: Payroll | null
   onCancelDialogOpen: (item: Payroll) => void
@@ -140,14 +140,14 @@ export const PayrollHistoryPresentation = ({
         label: t('menu.viewSummary'),
         icon: <FileIcon aria-hidden />,
         onClick: () => {
-          onViewSummary(payrollId)
+          onViewSummary(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)
         },
       },
       {
         label: t('menu.viewReceipt'),
         icon: <ReceiptIcon aria-hidden />,
         onClick: () => {
-          onViewReceipt(payrollId)
+          onViewReceipt(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)
         },
       },
     ]

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

@@ -222,6 +222,8 @@ describe('PayrollLanding', () => {
         componentEvents.RUN_PAYROLL_SUMMARY_VIEWED,
         {
           payrollId: 'payroll-1',
+          startDate: '2024-12-01',
+          endDate: '2024-12-15',
         },
       )
       await waitFor(() => {
@@ -257,7 +259,7 @@ describe('PayrollLanding', () => {
       // Verify the event was emitted to parent
       expect(defaultProps.onEvent).toHaveBeenCalledWith(
         componentEvents.RUN_PAYROLL_RECEIPT_VIEWED,
-        { payrollId: 'payroll-1' },
+        { payrollId: 'payroll-1', startDate: '2024-12-01', endDate: '2024-12-15' },
       )
     })
   })

src/components/Payroll/PayrollLanding/PayrollLanding.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { createMachine } from 'robot3'
 import type { ConfirmWireDetailsComponentType } from '../ConfirmWireDetails/ConfirmWireDetails'
-import { payrollLandingMachine } from './payrollLandingStateMachine'
+import { payrollLandingMachine, payrollLandingBreadcrumbNodes } from './payrollLandingStateMachine'
 import {
   PayrollLandingTabsContextual,
   type PayrollLandingFlowContextInterface,
@@ -11,6 +11,7 @@ import { Flow } from '@/components/Flow/Flow'
 import type { BaseComponentInterface } from '@/components/Base/Base'
 import { BaseComponent } from '@/components/Base/Base'
 import { useComponentDictionary } from '@/i18n'
+import { buildBreadcrumbs } from '@/helpers/breadcrumbHelpers'
 
 interface PayrollLandingProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {
   companyId: string
@@ -47,6 +48,9 @@ export function PayrollLandingFlow({
           selectedTab: 'run-payroll',
           withReimbursements,
           ConfirmWireDetailsComponent,
+          breadcrumbs: buildBreadcrumbs(payrollLandingBreadcrumbNodes),
+          currentBreadcrumbId: 'tabs',
+          progressBarType: null,
         }),
       ),
     [companyId, withReimbursements, ConfirmWireDetailsComponent],

src/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.tsx

@@ -31,6 +31,8 @@ export interface PayrollLandingFlowContextInterface extends FlowContextInterface
   selectedTab?: string
   withReimbursements: boolean
   ConfirmWireDetailsComponent?: ConfirmWireDetailsComponentType
+  startDate?: string
+  endDate?: string
 }
 
 export function PayrollLandingTabsContextual() {