Blocks
AddEmployeesHoliday
Employee selection screen for assigning employees to a company's holiday pay policy.
AddEmployeesHolidayProps
Props for AddEmployeesHoliday.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
Inherits children, className, defaultValues, dictionary, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/holidayAddEmployees/done | Employee selection is saved | The updated HolidayPayPolicy response, or undefined when no changes were submitted |
CANCEL | The user cancels | — |
Endpoints
| Method | Path |
|---|---|
| GET | /v1/companies/:companyId/employees |
| GET | /v1/companies/:companyUuid/holiday_pay_policy |
| PUT | /v1/companies/:companyUuid/holiday_pay_policy/add |
AddEmployeesToPolicy
Employee selection screen for assigning employees to a sick or vacation time off policy.
Remarks
Displays all active employees with search filtering and pagination. Employees already enrolled in the policy are pre-selected, and carry-over balances are auto-populated from each employee's existing paid time off data. Starting balances can be manually set or overridden per employee. When employees are being moved from another policy a reassignment warning is shown, and removing a previously enrolled employee requires confirmation.
Example
import { TimeOff } from '@gusto/embedded-react-sdk'
function MyComponent() {
return (
<TimeOff.AddEmployeesToPolicy
companyId="your-company-id"
policyId="policy-uuid"
policyType="vacation"
onEvent={() => {}}
/>
)
}
AddEmployeesToPolicyProps
Props for AddEmployeesToPolicy.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
policyId | string | The time off policy identifier. |
policyType | CreatableTimeOffPolicyType | The type of policy being edited — 'sick' or 'vacation'. |
Inherits children, className, defaultValues, dictionary, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/addEmployees/done | Fired when employee selection is saved | The updated time off policy, or undefined when no changes were submitted |
timeOff/addEmployees/back | Fired when the user navigates back without saving | — |
Endpoints
| Method | Path |
|---|---|
| GET | /v1/companies/:companyId/employees |
| GET | /v1/time_off_policies/:timeOffPolicyUuid |
| PUT | /v1/time_off_policies/:timeOffPolicyUuid |
| PUT | /v1/time_off_policies/:timeOffPolicyUuid/add_employees |
HolidaySelectionForm
Lets a user select which US federal holidays are observed by the company's holiday pay policy.
In 'create' mode, submitting creates a new holiday pay policy. In 'edit' mode, the form
is pre-populated with the existing policy's selections and submitting updates it. All 11 US
federal holidays are shown with their observed and next-observation dates; in create mode they
are all selected by default.
HolidaySelectionFormProps
Props for HolidaySelectionForm.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffHolidayPolicy>> | 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 for details. |
mode? | "edit" | "create" | Whether to create a new holiday policy or edit the existing one. Defaults to 'create'. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/holidaySelection/done | Holidays were saved in create mode | — |
timeOff/holidaySelection/editDone | Holidays were saved in edit mode | — |
CANCEL | The user backed out of the form | — |
Endpoints
| Method | Path |
|---|---|
| GET | /v1/companies/:companyUuid/holiday_pay_policy |
| POST | /v1/companies/:companyUuid/holiday_pay_policy |
| PUT | /v1/companies/:companyUuid/holiday_pay_policy |
PolicyConfigurationForm
Form for creating or editing the details of a sick or vacation time off policy — its name and accrual configuration.
Remarks
Omit policyId to create a new policy; pass policyId to edit an existing
one. In edit mode, the form fetches the policy via Suspense and merges the
derived defaults with any defaultValues you supply (your overrides win).
When editing a policy whose configuration is already complete, the accrual
method selector is restricted to the matching category (unlimited vs.
accrual-based).
PolicyConfigurationFormProps
Props for PolicyConfigurationForm.
| Property | Type | Description |
|---|---|---|
companyId | string | Company that owns the policy being created or edited. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
policyType | "vacation" | "sick" | Type of policy being configured. |
defaultValues? | Partial<PolicyConfigurationFormData> | Pre-populated values to merge into the form's defaults. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffCreateTimeOffPolicy>> | 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 for details. |
policyId? | string | When set, the form loads the existing policy and submits an update. |
Inherits children, className, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/policyDetails/done | Fired after the policy is successfully created or updated | { policyId: string, accrualMethod: string } |
CANCEL | Fired when the user clicks the cancel button | — |
Endpoints
| Method | Path |
|---|---|
| POST | /v1/companies/:companyUuid/time_off_policies |
| GET | /v1/time_off_policies/:timeOffPolicyUuid |
| PUT | /v1/time_off_policies/:timeOffPolicyUuid |
PolicyList
Displays all active time off policies (sick, vacation, and holiday) for a company.
Each row shows the policy name and the enrolled-employee count. Incomplete policies surface a finish-setup action. Sick and vacation policies are deactivated via the time-off policies API; the holiday pay policy (if one exists) is merged into the same list and is deleted via the holiday pay policy API. Both flows go through a confirmation dialog and show a success alert.
PolicyListProps
Props for the PolicyList component.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffTimeOffPolicies>> | 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 for details. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/createPolicy | The user clicked the create-policy action. | — |
timeOff/viewPolicy | The user opened an existing policy or clicked finish-setup on an incomplete one. | { policyId: string, policyType: string } |
timeOff/deletePolicy/done | A policy was successfully deleted. | { policyId: string } |
Endpoints
PolicySettings
Configures additional policy limits and rules for a sick or vacation policy. This step is skipped for policies with unlimited accrual.
Remarks
Fetches the time off policy, derives the accrual method category, and submits updates to the time off policies endpoint. Emits the following events:
PolicySettingsProps
Props for PolicySettings.
| Property | Type | Description |
|---|---|---|
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
policyId | string | UUID of the time off policy being configured. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffCreateTimeOffPolicy>> | 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 for details. |
mode? | "edit" | "create" | Whether the form is being used to create a new policy or edit an existing one. Defaults to create. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/policySettings/done | Fired when policy settings are saved | The updated TimeOffPolicy |
timeOff/policySettings/back | Fired when the user navigates back | — |
Endpoints
PolicySettingsPresentation
Presentation-only form for configuring time off policy limits and rules.
Remarks
Use this component when you need to render the policy settings form without the data-fetching container — provide the accrualMethod and handle submission yourself. For the data-connected version, use PolicySettings.
The fields shown depend on accrualMethod:
- Accrual maximum and waiting period are shown for
'hours_worked'and'fixed_per_pay_period' - Balance maximum, carry-over limit, and paid-out-on-termination are always shown
PolicySettingsPresentationProps
Props for PolicySettingsPresentation.
| Property | Type | Description |
|---|---|---|
accrualMethod | PolicySettingsAccrualMethod | Accrual method category of the policy. Controls which fields are shown. |
onBack | () => void | Called when the user navigates back. |
onContinue | (data: PolicySettingsFormData) => void | Called with the form values when the user submits. |
defaultValues? | Partial<PolicySettingsFormData> | Optional default values to prefill the form. |
editingPolicyName? | string | Name of the policy being edited. Shown in the heading when mode is 'edit'. |
isPending? | boolean | Whether a submit is in flight. Disables the back button and shows a loading state on the continue button. |
mode? | "edit" | "create" | Whether the form is being used to create a new policy or edit an existing one. Defaults to create. |
Endpoints
PolicyTypeSelector
Selection screen for choosing which kind of time-off policy to create — sick, vacation, or holiday.
Remarks
The holiday option is omitted when the company already has a holiday pay policy, since a company can only have one.
PolicyTypeSelectorProps
Props for PolicyTypeSelector.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
defaultPolicyType? | PolicyType | Pre-selected policy type rendered when the form mounts. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffSelectPolicyType>> | 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 for details. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/policyTypeSelected | The user confirms a selection | { policyType: {@link PolicyType} } |
CANCEL | The user cancels | — |
Endpoints
| Method | Path |
|---|---|
| GET | /v1/companies/:companyUuid/holiday_pay_policy |
TimeOffPolicyDetail
Detail view for a sick or vacation time-off policy.
Remarks
Loads the policy and its enrolled employees, then renders the tabbed detail view with actions for editing the policy, adding or removing employees, and adjusting individual balances. Editable actions are only shown for sick and vacation policies.
TimeOffPolicyDetailProps
Props for TimeOffPolicyDetail.
| Property | Type | Description |
|---|---|---|
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
policyId | string | UUID of the time-off policy to display. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffTimeOffPolicyDetails>> | 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 for details. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/addEmployeesToPolicy | The add-employees action was clicked. | { policyId: string } |
timeOff/backToList | The back navigation was clicked. | — |
timeOff/changeSettings | The change-settings action was clicked. | { policyId: string } |
timeOff/editPolicy | The edit-policy action was clicked. | { policyId: string } |
Endpoints
TimeOffPolicyDetailPresentation
Presentational detail view for sick and vacation time-off policies.
Remarks
Displays policy configuration and accrual settings in a tabbed interface alongside the list of enrolled employees. Provides actions for editing the policy, changing settings, adding employees, removing employees, and editing individual employee balances. This component is fully controlled — pass in the data, selected tab, and dialog state and wire up the callbacks. The corresponding container component is TimeOffPolicyDetail.
Parameters
| Parameter | Type | Description |
|---|---|---|
input | TimeOffPolicyDetailPresentationProps | See TimeOffPolicyDetailPresentationProps. |
Endpoints
ViewHolidayEmployees
Displays the holiday policy detail view with the employees tab selected.
Remarks
Shows enrolled employees with search filtering, and provides actions to add employees, edit the holiday selection, or remove employees.
ViewHolidayEmployeesProps
Props for ViewHolidayEmployees.
| Property | Type | Description |
|---|---|---|
companyId | string | Identifier of the company whose holiday policy enrollment is displayed. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffHolidayPolicy>> | Record<"en", DeepPartial<CompanyTimeOffPolicyDetail>> | 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 for details. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/holidayAddEmployees | User clicks to add employees | — |
timeOff/editHolidayPolicy | User clicks to edit holidays | — |
timeOff/backToList | User navigates back to the policy list | — |
Endpoints
| Method | Path |
|---|---|
| GET | /v1/companies/:companyId/employees |
| GET | /v1/companies/:companyUuid/holiday_pay_policy |
| PUT | /v1/companies/:companyUuid/holiday_pay_policy/remove |
ViewHolidayPolicyDetails
Displays the holiday pay policy for a company with tabbed views of the included holidays and the enrolled employees.
ViewHolidayPolicyDetailsProps
Props for the ViewHolidayPolicyDetails component.
| Property | Type | Description |
|---|---|---|
companyId | string | The associated company identifier. |
onEvent | OnEventType<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 and each component's event table for the full list of emitted events. |
defaultTab? | "holidays" | "employees" | Which tab to display initially. Defaults to 'holidays'. |
dictionary? | Record<"en", DeepPartial<CompanyTimeOffHolidayPolicy>> | Record<"en", DeepPartial<CompanyTimeOffPolicyDetail>> | 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 for details. |
Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.
Events
| Event | Description | Data |
|---|---|---|
timeOff/backToList | The user clicked the back navigation. | — |
timeOff/holidayAddEmployees | The user clicked the add-employees action. | — |
timeOff/editHolidayPolicy | The user clicked the edit-policy action. |