chore: adding payroll date to breadcrumbs

Author: dmortal

src/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.test.tsx

@@ -0,0 +1,81 @@
+import { describe, it, expect } from 'vitest'
+import { FlowBreadcrumbs } from './FlowBreadcrumbs'
+import { renderWithProviders } from '@/test-utils/renderWithProviders'
+
+describe('FlowBreadcrumbs date formatting', () => {
+  it('should render without errors when breadcrumbs have date string variables', () => {
+    const breadcrumbs = [
+      {
+        id: 'configuration',
+        label: 'breadcrumbLabel',
+        namespace: 'Payroll.PayrollConfiguration',
+        variables: {
+          startDate: '2023-12-25',
+          endDate: '2024-01-05',
+        },
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      <FlowBreadcrumbs breadcrumbs={breadcrumbs} currentBreadcrumbId="configuration" />,
+    )
+
+    expect(container).toBeTruthy()
+  })
+
+  it('should render without errors when breadcrumbs have no date variables', () => {
+    const breadcrumbs = [
+      {
+        id: 'landing',
+        label: 'labels.breadcrumbLabel',
+        namespace: 'Payroll.PayrollLanding',
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      <FlowBreadcrumbs breadcrumbs={breadcrumbs} currentBreadcrumbId="landing" />,
+    )
+
+    expect(container).toBeTruthy()
+  })
+
+  it('should render without errors when date strings are invalid', () => {
+    const breadcrumbs = [
+      {
+        id: 'configuration',
+        label: 'breadcrumbLabel',
+        namespace: 'Payroll.PayrollConfiguration',
+        variables: {
+          startDate: 'invalid-date',
+          endDate: '2024-01-05',
+        },
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      <FlowBreadcrumbs breadcrumbs={breadcrumbs} currentBreadcrumbId="configuration" />,
+    )
+
+    expect(container).toBeTruthy()
+  })
+
+  it('should render without errors when date variables are not strings', () => {
+    const breadcrumbs = [
+      {
+        id: 'configuration',
+        label: 'breadcrumbLabel',
+        namespace: 'Payroll.PayrollConfiguration',
+        variables: {
+          startDate: new Date('2023-12-25'),
+          endDate: new Date('2024-01-05'),
+        },
+      },
+    ]
+
+    const { container } = renderWithProviders(
+      <FlowBreadcrumbs breadcrumbs={breadcrumbs} currentBreadcrumbId="configuration" />,
+    )
+
+    expect(container).toBeTruthy()
+  })
+})

src/components/Common/FlowBreadcrumbs/FlowBreadcrumbs.tsx

@@ -5,13 +5,16 @@ import type { FlowBreadcrumbsProps } from './FlowBreadcrumbsTypes'
 import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
 import { componentEvents } from '@/shared/constants'
 import { useI18n } from '@/i18n/I18n'
+import { useLocale } from '@/contexts/LocaleProvider/useLocale'
+import { formatDateForBreadcrumb } from '@/helpers/dateFormatting'
 
 export function FlowBreadcrumbs({
   breadcrumbs,
   currentBreadcrumbId,
   onEvent,
 }: FlowBreadcrumbsProps) {
   const { Breadcrumbs } = useComponentContext()
+  const { locale } = useLocale()
   const namespaces = breadcrumbs.reduce<Array<keyof CustomTypeOptions['resources']>>(
     (acc, breadcrumb) => {
       if (breadcrumb.namespace) {
@@ -23,26 +26,39 @@ export function FlowBreadcrumbs({
   )
   useI18n(namespaces)
   const { t } = useTranslation(namespaces)
-
   const parsedBreadcrumbs = useMemo(
     () =>
       breadcrumbs.map(breadcrumb => {
+        const formattedVariables = breadcrumb.variables
+          ? {
+              ...breadcrumb.variables,
+              startDate:
+                typeof breadcrumb.variables.startDate === 'string'
+                  ? formatDateForBreadcrumb(breadcrumb.variables.startDate, locale)
+                  : breadcrumb.variables.startDate,
+              endDate:
+                typeof breadcrumb.variables.endDate === 'string'
+                  ? formatDateForBreadcrumb(breadcrumb.variables.endDate, locale)
+                  : breadcrumb.variables.endDate,
+            }
+          : undefined
+
         const translatedLabel = breadcrumb.namespace
           ? (t(breadcrumb.label, {
               ns: breadcrumb.namespace,
               defaultValue: breadcrumb.label,
-              ...breadcrumb.variables,
+              ...formattedVariables,
             } as never) as unknown as string)
           : (t(breadcrumb.label, {
               defaultValue: breadcrumb.label,
-              ...breadcrumb.variables,
+              ...formattedVariables,
             } as never) as unknown as string)
         return {
           id: breadcrumb.id,
           label: translatedLabel,
         }
       }),
-    [breadcrumbs, t],
+    [breadcrumbs, t, locale],
   )
 
   const handleBreadcrumbClick = (breadcrumbId: string) => {
@@ -54,7 +70,6 @@ export function FlowBreadcrumbs({
       })
     }
   }
-
   return (
     <Breadcrumbs
       breadcrumbs={parsedBreadcrumbs}

src/helpers/breadcrumbHelpers.ts

@@ -81,13 +81,10 @@ export const updateBreadcrumbs = <
   const allBreadcrumbs = context.breadcrumbs ?? {}
   const trail = allBreadcrumbs[stateName] ?? []
   const resolvedTrail = trail.map(breadcrumb => {
-    if (breadcrumb.id === stateName && variables) {
-      return {
-        ...breadcrumb,
-        variables: resolveBreadcrumbVariables(variables, context as Record<string, unknown>),
-      }
+    return {
+      ...breadcrumb,
+      variables: resolveBreadcrumbVariables(variables, context as Record<string, unknown>),
     }
-    return breadcrumb
   })
   return {
     ...context,

src/helpers/dateFormatting.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest'
-import { parseDateStringToLocal, normalizeDateToLocal } from './dateFormatting'
+import {
+  parseDateStringToLocal,
+  normalizeDateToLocal,
+  formatDateForBreadcrumb,
+} from './dateFormatting'
 
 describe('parseDateStringToLocal', () => {
   it('should parse valid YYYY-MM-DD date strings correctly in local timezone', () => {
@@ -40,3 +44,35 @@ describe('normalizeDateToLocal', () => {
     expect(normalizeDateToLocal(new Date('invalid-date'))).toBeNull()
   })
 })
+
+describe('formatDateForBreadcrumb', () => {
+  it('should format valid date string using locale', () => {
+    const result = formatDateForBreadcrumb('2023-12-25', 'en-US')
+    expect(result).toBeTruthy()
+    expect(result).toContain('Dec')
+    expect(result).toContain('25')
+    expect(result).toContain('2023')
+  })
+
+  it('should return empty string for undefined', () => {
+    expect(formatDateForBreadcrumb(undefined, 'en-US')).toBe('')
+  })
+
+  it('should return empty string for invalid date strings', () => {
+    expect(formatDateForBreadcrumb('', 'en-US')).toBe('')
+    expect(formatDateForBreadcrumb('invalid', 'en-US')).toBe('')
+    expect(formatDateForBreadcrumb('2023-13-01', 'en-US')).toBe('')
+  })
+
+  it('should format dates correctly for different locales', () => {
+    const dateString = '2023-12-25'
+
+    const usFormat = formatDateForBreadcrumb(dateString, 'en-US')
+    expect(usFormat).toBeTruthy()
+    expect(usFormat).toContain('Dec')
+
+    const ukFormat = formatDateForBreadcrumb(dateString, 'en-GB')
+    expect(ukFormat).toBeTruthy()
+    expect(ukFormat).toContain('Dec')
+  })
+})

src/helpers/dateFormatting.ts

@@ -72,3 +72,20 @@ export const normalizeDateToLocal = (date: Date | null): Date | null => {
 
   return new Date(year, month - 1, day)
 }
+
+/**
+ * Formats a date string for breadcrumb display using locale-aware formatting.
+ * Returns empty string if the date is invalid.
+ */
+export const formatDateForBreadcrumb = (dateString: string | undefined, locale: string): string => {
+  if (!dateString) return ''
+
+  const date = parseDateStringToLocal(dateString)
+  if (!date) return ''
+
+  return date.toLocaleDateString(locale, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+}