diff --git a/.reports/embedded-react-sdk.api.md b/.reports/embedded-react-sdk.api.md index ec9b8bde2f..a72f2822c9 100644 --- a/.reports/embedded-react-sdk.api.md +++ b/.reports/embedded-react-sdk.api.md @@ -3895,6 +3895,7 @@ function OffCycleReasonSelection(props: OffCycleReasonSelectionProps): JSX; // @public interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> { companyId: string; + defaultReason?: OffCycleReason; } // @public diff --git a/docs/reference/payroll/blocks.md b/docs/reference/payroll/blocks.md index 7837a46ade..7a8cea375b 100644 --- a/docs/reference/payroll/blocks.md +++ b/docs/reference/payroll/blocks.md @@ -242,6 +242,7 @@ Props for the [OffCycleReasonSelection](#offcyclereasonselection) component. | ------ | ------ | ------ | | `companyId` | `string` | The associated company identifier. | | `onEvent` | [`OnEventType`](../events.md#oneventtype)\<[`EventType`](../events.md#eventtype), `unknown`\> | Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the [Event Handling guide](https://docs.gusto.com/embedded-payroll/docs/event-handling) and each component's event table for the full list of emitted events. | +| `defaultReason?` | [`OffCycleReason`](#offcyclereason) | Pre-selected reason rendered when the form mounts. Leave unset to render with no option selected. | | `dictionary?` | `Record`\<`"en"`, [`DeepPartial`](../Translations/index.md#deeppartial)\<[`PayrollOffCycleReasonSelection`](../Translations/index.md#payrolloffcyclereasonselection)\>\> | Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the [Translation guide](https://docs.gusto.com/embedded-payroll/docs/translation) for details. | _Inherits `children`, `className`, `defaultValues`, `FallbackComponent`, `LoaderComponent` from [BaseComponentInterface](../blocks.md#basecomponentinterface)._ diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx index b67f60317a..d6ef2e3b7d 100644 --- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx +++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx @@ -1,5 +1,7 @@ +import { fn } from 'storybook/test' import { FormWrapper } from '../../../../.storybook/helpers/FormWrapper' import { OffCycleReasonSelectionPresentation } from './OffCycleReasonSelectionPresentation' +import { OffCycleReasonSelection } from './OffCycleReasonSelection' import { useI18n } from '@/i18n' function I18nLoader({ children }: { children: React.ReactNode }) { @@ -49,3 +51,7 @@ CorrectionSelected.decorators = [ ), ] + +export const WithDefaultReason = () => ( + +) diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx index a7a4b46da2..eabe0164ce 100644 --- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx +++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx @@ -56,6 +56,17 @@ describe('OffCycleReasonSelection', () => { expect(radio).not.toBeChecked() }) }) + + it('pre-selects the option matching defaultReason', async () => { + renderWithProviders() + + await waitFor(() => { + expect(screen.getByLabelText('Bonus')).toBeInTheDocument() + }) + + expect(screen.getByLabelText('Bonus')).toBeChecked() + expect(screen.getByLabelText('Correction payment')).not.toBeChecked() + }) }) describe('selection behavior', () => { diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx index 593ea45858..66ac1fabd8 100644 --- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx +++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx @@ -35,13 +35,13 @@ export function OffCycleReasonSelection(props: OffCycleReasonSelectionProps) { ) } -function Root({ dictionary }: OffCycleReasonSelectionProps) { +function Root({ dictionary, defaultReason }: OffCycleReasonSelectionProps) { useComponentDictionary('Payroll.OffCycleReasonSelection', dictionary) useI18n('Payroll.OffCycleReasonSelection') const { onEvent } = useBase() const methods = useForm<{ reason: OffCycleReason | '' }>({ - defaultValues: { reason: '' }, + defaultValues: { reason: defaultReason ?? '' }, }) const handleReasonChange = useCallback( diff --git a/src/components/Payroll/OffCycleReasonSelection/types.ts b/src/components/Payroll/OffCycleReasonSelection/types.ts index 92784562ef..7f276e879a 100644 --- a/src/components/Payroll/OffCycleReasonSelection/types.ts +++ b/src/components/Payroll/OffCycleReasonSelection/types.ts @@ -70,4 +70,6 @@ export interface SelectReasonPayload { export interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> { /** The associated company identifier. */ companyId: string + /** Pre-selected reason rendered when the form mounts. Leave unset to render with no option selected. */ + defaultReason?: OffCycleReason }