Skip to content

Commit 86af339

Browse files
krisxcrashkrisxcrash
committed
feat: move alert and fix translations
1 parent 07c3dcd commit 86af339

File tree

6 files changed

+25
-99
lines changed

6 files changed

+25
-99
lines changed

‎src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function PayrollBlockerAlerts({
3737
const translationKeys = getBlockerTranslationKeys(blocker.key)
3838

3939
const title = t(translationKeys.titleKey, {
40-
defaultValue: blocker.key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
40+
defaultValue: blocker.message || t('defaultBlockerDescription'),
4141
})
4242
const description = t(translationKeys.descriptionKey, {
4343
defaultValue: blocker.message || t('defaultBlockerDescription'),

‎src/components/Payroll/PayrollBlocker/payrollHelpers.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,9 @@ export const payrollSubmitHandler = async (
106106
*/
107107
export function getBlockerTranslationKeys(key: string) {
108108
return {
109-
titleKey: `PayrollBlocker:blockers.${key}.title`,
110-
descriptionKey: `PayrollBlocker:blockers.${key}.description`,
111-
helpTextKey: `PayrollBlocker:blockers.${key}.help`,
112-
defaultActionKey: `PayrollBlocker:blockers.${key}.defaultAction`,
109+
titleKey: `blockers.${key}.title`,
110+
descriptionKey: `blockers.${key}.description`,
111+
helpTextKey: `blockers.${key}.help`,
112+
defaultActionKey: `blockers.${key}.defaultAction`,
113113
}
114114
}

‎src/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useState } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'
4+
import { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'
45
import { PayrollHistory } from '../PayrollHistory/PayrollHistory'
56
import { PayrollList } from '../PayrollList/PayrollList'
67
import { PayrollOverview } from '../PayrollOverview/PayrollOverview'
@@ -9,13 +10,16 @@ import {
910
ConfirmWireDetails,
1011
type ConfirmWireDetailsComponentType,
1112
} from '../ConfirmWireDetails/ConfirmWireDetails'
13+
import type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'
14+
import { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'
1215
import type { BaseComponentInterface } from '@/components/Base/Base'
1316
import { useFlow } from '@/components/Flow/useFlow'
1417
import { useI18n } from '@/i18n'
1518
import { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'
1619
import { ensureRequired } from '@/helpers/ensureRequired'
1720
import type { FlowContextInterface } from '@/components/Flow/useFlow'
1821
import { Flex } from '@/components/Common/Flex/Flex'
22+
import { componentEvents } from '@/shared/constants'
1923

2024
export interface PayrollLandingFlowProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {
2125
companyId: string
@@ -56,6 +60,21 @@ export function PayrollLandingTabsContextual() {
5660
r => r.status === 'awaiting_funds',
5761
)
5862

63+
const { data: blockersData } = usePayrollsGetBlockersSuspense({
64+
companyUuid: ensureRequired(companyId),
65+
})
66+
67+
const payrollBlockerList = blockersData.payrollBlockerList ?? []
68+
69+
const blockers: ApiPayrollBlocker[] = payrollBlockerList.map(blocker => ({
70+
key: blocker.key ?? 'unknown',
71+
message: blocker.message,
72+
}))
73+
74+
const onViewBlockers = () => {
75+
onEvent(componentEvents.RUN_PAYROLL_BLOCKERS_VIEW_ALL)
76+
}
77+
5978
const tabs = [
6079
{
6180
id: 'run-payroll',
@@ -74,6 +93,7 @@ export function PayrollLandingTabsContextual() {
7493
{hasActiveWireInRequests && (
7594
<ConfirmWireDetailsComponent companyId={ensureRequired(companyId)} onEvent={onEvent} />
7695
)}
96+
<PayrollBlockerAlerts blockers={blockers} onMultipleViewClick={onViewBlockers} />
7797
<Tabs
7898
tabs={tabs}
7999
selectedId={currentTab}

‎src/components/Payroll/PayrollList/PayrollList.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,6 @@ const Root = ({ companyId, onEvent }: PayrollListBlockProps) => {
6868
}: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => {
6969
onEvent(componentEvents.REVIEW_PAYROLL, { payrollUuid, payPeriod })
7070
}
71-
const onViewBlockers = () => {
72-
onEvent(componentEvents.RUN_PAYROLL_BLOCKERS_VIEW_ALL)
73-
}
7471
const onSkipPayroll = async ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => {
7572
const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollUuid)
7673

@@ -102,7 +99,6 @@ const Root = ({ companyId, onEvent }: PayrollListBlockProps) => {
10299
onRunPayroll={onRunPayroll}
103100
onSubmitPayroll={onSubmitPayroll}
104101
onSkipPayroll={onSkipPayroll}
105-
onViewBlockers={onViewBlockers}
106102
showSkipSuccessAlert={showSkipSuccessAlert}
107103
onDismissSkipSuccessAlert={() => {
108104
setShowSkipSuccessAlert(false)

‎src/components/Payroll/PayrollList/PayrollListPresentation.test.tsx‎

Lines changed: 0 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ describe('PayrollListPresentation', () => {
7777
onRunPayroll={() => {}}
7878
onSubmitPayroll={() => {}}
7979
onSkipPayroll={() => {}}
80-
onViewBlockers={() => {}}
8180
payrolls={[mockUnprocessedPayroll]}
8281
paySchedules={mockPaySchedules}
8382
showSkipSuccessAlert={false}
@@ -98,7 +97,6 @@ describe('PayrollListPresentation', () => {
9897
onRunPayroll={() => {}}
9998
onSubmitPayroll={() => {}}
10099
onSkipPayroll={() => {}}
101-
onViewBlockers={() => {}}
102100
payrolls={[mockUnprocessedPayroll]}
103101
paySchedules={mockPaySchedules}
104102
showSkipSuccessAlert={false}
@@ -121,7 +119,6 @@ describe('PayrollListPresentation', () => {
121119
onRunPayroll={() => {}}
122120
onSubmitPayroll={() => {}}
123121
onSkipPayroll={() => {}}
124-
onViewBlockers={() => {}}
125122
payrolls={[mockUnprocessedPayroll]}
126123
paySchedules={mockPaySchedules}
127124
showSkipSuccessAlert={false}
@@ -143,7 +140,6 @@ describe('PayrollListPresentation', () => {
143140
onRunPayroll={() => {}}
144141
onSubmitPayroll={() => {}}
145142
onSkipPayroll={() => {}}
146-
onViewBlockers={() => {}}
147143
payrolls={[mockUnprocessedPayroll]}
148144
paySchedules={mockPaySchedules}
149145
showSkipSuccessAlert={false}
@@ -178,7 +174,6 @@ describe('PayrollListPresentation', () => {
178174
onRunPayroll={() => {}}
179175
onSubmitPayroll={() => {}}
180176
onSkipPayroll={() => {}}
181-
onViewBlockers={() => {}}
182177
payrolls={[futurePayroll]}
183178
paySchedules={mockPaySchedules}
184179
showSkipSuccessAlert={false}
@@ -212,7 +207,6 @@ describe('PayrollListPresentation', () => {
212207
onRunPayroll={() => {}}
213208
onSubmitPayroll={() => {}}
214209
onSkipPayroll={() => {}}
215-
onViewBlockers={() => {}}
216210
payrolls={[todayPayroll]}
217211
paySchedules={mockPaySchedules}
218212
showSkipSuccessAlert={false}
@@ -247,7 +241,6 @@ describe('PayrollListPresentation', () => {
247241
onRunPayroll={() => {}}
248242
onSubmitPayroll={() => {}}
249243
onSkipPayroll={() => {}}
250-
onViewBlockers={() => {}}
251244
payrolls={[pastPayroll]}
252245
paySchedules={mockPaySchedules}
253246
showSkipSuccessAlert={false}
@@ -274,7 +267,6 @@ describe('PayrollListPresentation', () => {
274267
onRunPayroll={() => {}}
275268
onSubmitPayroll={() => {}}
276269
onSkipPayroll={() => {}}
277-
onViewBlockers={() => {}}
278270
payrolls={[processedPayroll]}
279271
paySchedules={mockPaySchedules}
280272
showSkipSuccessAlert={false}
@@ -301,7 +293,6 @@ describe('PayrollListPresentation', () => {
301293
onRunPayroll={onRunPayroll}
302294
onSubmitPayroll={() => {}}
303295
onSkipPayroll={() => {}}
304-
onViewBlockers={() => {}}
305296
payrolls={[mockUnprocessedPayroll]}
306297
paySchedules={mockPaySchedules}
307298
showSkipSuccessAlert={false}
@@ -335,7 +326,6 @@ describe('PayrollListPresentation', () => {
335326
onRunPayroll={() => {}}
336327
onSubmitPayroll={onSubmitPayroll}
337328
onSkipPayroll={() => {}}
338-
onViewBlockers={() => {}}
339329
payrolls={[mockCalculatedPayroll]}
340330
paySchedules={mockPaySchedules}
341331
showSkipSuccessAlert={false}
@@ -368,7 +358,6 @@ describe('PayrollListPresentation', () => {
368358
onRunPayroll={() => {}}
369359
onSubmitPayroll={() => {}}
370360
onSkipPayroll={() => {}}
371-
onViewBlockers={() => {}}
372361
payrolls={[mockUnprocessedPayroll]}
373362
paySchedules={mockPaySchedules}
374363
showSkipSuccessAlert={true}
@@ -389,7 +378,6 @@ describe('PayrollListPresentation', () => {
389378
onRunPayroll={() => {}}
390379
onSubmitPayroll={() => {}}
391380
onSkipPayroll={() => {}}
392-
onViewBlockers={() => {}}
393381
payrolls={[mockUnprocessedPayroll]}
394382
paySchedules={mockPaySchedules}
395383
showSkipSuccessAlert={false}
@@ -413,7 +401,6 @@ describe('PayrollListPresentation', () => {
413401
onRunPayroll={() => {}}
414402
onSubmitPayroll={() => {}}
415403
onSkipPayroll={() => {}}
416-
onViewBlockers={() => {}}
417404
payrolls={[mockUnprocessedPayroll]}
418405
paySchedules={mockPaySchedules}
419406
showSkipSuccessAlert={true}
@@ -431,77 +418,4 @@ describe('PayrollListPresentation', () => {
431418
expect(onDismissSkipSuccessAlert).toHaveBeenCalled()
432419
})
433420
})
434-
435-
describe('payroll blockers', () => {
436-
it('displays blocker alerts when blockers exist', async () => {
437-
renderWithProviders(
438-
<PayrollListPresentation
439-
onRunPayroll={() => {}}
440-
onSubmitPayroll={() => {}}
441-
onSkipPayroll={() => {}}
442-
onViewBlockers={() => {}}
443-
payrolls={[mockUnprocessedPayroll]}
444-
paySchedules={mockPaySchedules}
445-
showSkipSuccessAlert={false}
446-
onDismissSkipSuccessAlert={() => {}}
447-
skippingPayrollId={null}
448-
blockers={mockBlockers}
449-
wireInRequests={[]}
450-
/>,
451-
)
452-
453-
await screen.findByRole('heading', { name: 'Upcoming payroll' })
454-
expect(screen.getByText('Missing Bank Info')).toBeInTheDocument()
455-
expect(screen.getByText('Missing Signatory')).toBeInTheDocument()
456-
})
457-
458-
it('calls onViewBlockers when view all link is clicked with multiple blockers', async () => {
459-
const user = userEvent.setup()
460-
const onViewBlockers = vi.fn()
461-
462-
renderWithProviders(
463-
<PayrollListPresentation
464-
onRunPayroll={() => {}}
465-
onSubmitPayroll={() => {}}
466-
onSkipPayroll={() => {}}
467-
onViewBlockers={onViewBlockers}
468-
payrolls={[mockUnprocessedPayroll]}
469-
paySchedules={mockPaySchedules}
470-
showSkipSuccessAlert={false}
471-
onDismissSkipSuccessAlert={() => {}}
472-
skippingPayrollId={null}
473-
blockers={mockBlockers}
474-
wireInRequests={[]}
475-
/>,
476-
)
477-
478-
await screen.findByRole('heading', { name: 'Upcoming payroll' })
479-
const viewAllButton = screen.getByText('View All Blockers')
480-
await user.click(viewAllButton)
481-
482-
expect(onViewBlockers).toHaveBeenCalled()
483-
})
484-
485-
it('does not show blocker alerts when there are no blockers', async () => {
486-
renderWithProviders(
487-
<PayrollListPresentation
488-
onRunPayroll={() => {}}
489-
onSubmitPayroll={() => {}}
490-
onSkipPayroll={() => {}}
491-
onViewBlockers={() => {}}
492-
payrolls={[mockUnprocessedPayroll]}
493-
paySchedules={mockPaySchedules}
494-
showSkipSuccessAlert={false}
495-
onDismissSkipSuccessAlert={() => {}}
496-
skippingPayrollId={null}
497-
blockers={[]}
498-
wireInRequests={[]}
499-
/>,
500-
)
501-
502-
await screen.findByRole('heading', { name: 'Upcoming payroll' })
503-
expect(screen.queryByText('Missing Bank Info')).not.toBeInTheDocument()
504-
expect(screen.queryByText('Missing Signatory')).not.toBeInTheDocument()
505-
})
506-
})
507421
})

‎src/components/Payroll/PayrollList/PayrollListPresentation.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import type { WireInRequest } from '@gusto/embedded-api/models/components/wirein
44
import { useState, useRef } from 'react'
55
import { useTranslation } from 'react-i18next'
66
import type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'
7-
import { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'
87
import { PayrollStatusBadges } from '../PayrollStatusBadges'
98
import { getPayrollType } from '../helpers'
109
import styles from './PayrollListPresentation.module.scss'
@@ -20,7 +19,6 @@ interface PayrollListPresentationProps {
2019
onRunPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void
2120
onSubmitPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void
2221
onSkipPayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void
23-
onViewBlockers?: () => void
2422
payrolls: Payroll[]
2523
paySchedules: PayScheduleList[]
2624
showSkipSuccessAlert: boolean
@@ -34,7 +32,6 @@ export const PayrollListPresentation = ({
3432
onRunPayroll,
3533
onSubmitPayroll,
3634
onSkipPayroll,
37-
onViewBlockers,
3835
payrolls,
3936
paySchedules,
4037
showSkipSuccessAlert,
@@ -140,7 +137,6 @@ export const PayrollListPresentation = ({
140137
/>
141138
</div>
142139
)}
143-
<PayrollBlockerAlerts blockers={blockers} onMultipleViewClick={onViewBlockers} />
144140
<Flex
145141
flexDirection={{ base: 'column', medium: 'row' }}
146142
justifyContent="space-between"

0 commit comments

Comments
 (0)