Skip to content

feat: extract Work address card from DashboardFlow into standalone management block #2007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
serikjensen wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: extract Work address card from DashboardFlow into standalone management block #2007

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 43 additions & 4 deletions .reports/embedded-react-sdk.api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1076,6 +1076,11 @@ export const componentEvents: {
readonly EMPLOYEE_PROFILE_MANAGEMENT_UPDATED: "employee/profile/management/updated";
readonly EMPLOYEE_PROFILE_MANAGEMENT_EDIT_CANCELLED: "employee/profile/management/editCancelled";
readonly EMPLOYEE_PROFILE_MANAGEMENT_ALERT_DISMISSED: "employee/profile/management/alertDismissed";
readonly EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_REQUESTED: "employee/management/workAddress/editRequested";
readonly EMPLOYEE_MANAGEMENT_WORK_ADDRESS_CREATED: "employee/management/workAddress/created";
readonly EMPLOYEE_MANAGEMENT_WORK_ADDRESS_UPDATED: "employee/management/workAddress/updated";
readonly EMPLOYEE_MANAGEMENT_WORK_ADDRESS_DELETED: "employee/management/workAddress/deleted";
readonly EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_CANCELLED: "employee/management/workAddress/editCancelled";
readonly ROBOT_MACHINE_DONE: "done";
readonly ERROR: "ERROR";
readonly CANCEL: "CANCEL";
Expand Down Expand Up @@ -2015,7 +2020,11 @@ declare namespace EmployeeManagement {
HomeAddressCardProps,
HomeAddressEditFormProps,
WorkAddress,
WorkAddressCard,
WorkAddressEditForm,
WorkAddressProps,
WorkAddressCardProps,
WorkAddressEditFormProps,
FederalTaxes_2 as FederalTaxes,
FederalTaxesProps_2 as FederalTaxesProps,
StateTaxes_2 as StateTaxes,
Expand Down Expand Up @@ -3641,7 +3650,7 @@ function PayrollLanding(props: PayrollLandingProps): JSX_2.Element;
// Warning: (ae-forgotten-export) The symbol "PayrollListBlockProps" needs to be exported by the entry point index.d.ts
// Warning: (ae-missing-release-tag) "PayrollList" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
// @public
function PayrollList(props: PayrollListBlockProps): JSX_2.Element;

// Warning: (ae-missing-release-tag) "PayrollLoadingProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Expand Down Expand Up @@ -5792,7 +5801,37 @@ export function withOptions<TEntry = unknown>(base: FieldMetadata, options: Arra
// Warning: (ae-missing-release-tag) "WorkAddress" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
function WorkAddress(input: WorkAddressProps & BaseComponentInterface): JSX_2.Element;
function WorkAddress(input: WorkAddressProps & BaseComponentInterface<'Employee.Management.WorkAddress'>): JSX_2.Element;

// Warning: (ae-missing-release-tag) "WorkAddressCard" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public
function WorkAddressCard(input: WorkAddressCardProps): JSX_2.Element;

// Warning: (ae-missing-release-tag) "WorkAddressCardProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
interface WorkAddressCardProps {
// (undocumented)
employeeId: string;
// (undocumented)
onEvent: OnEventType<EventType, unknown>;
}

// Warning: (ae-missing-release-tag) "WorkAddressEditForm" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
function WorkAddressEditForm(input: WorkAddressEditFormProps & BaseComponentInterface): JSX_2.Element;

// Warning: (ae-missing-release-tag) "WorkAddressEditFormProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
interface WorkAddressEditFormProps extends CommonComponentInterface<'Employee.Management.WorkAddress'> {
// (undocumented)
employeeId: string;
// (undocumented)
onEvent: BaseComponentInterface['onEvent'];
}

// Warning: (ae-missing-release-tag) "WorkAddressErrorCode" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
Expand Down Expand Up @@ -5843,11 +5882,11 @@ export type WorkAddressOptionalFieldsToRequire = OptionalFieldsToRequire<typeof
// Warning: (ae-missing-release-tag) "WorkAddressProps" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
//
// @public (undocumented)
interface WorkAddressProps extends CommonComponentInterface<'Employee.WorkAddress.Management'> {
interface WorkAddressProps extends CommonComponentInterface<'Employee.Management.WorkAddress'> {
// (undocumented)
employeeId: string;
// (undocumented)
onEvent: BaseComponentInterface['onEvent'];
onEvent: OnEventType<EventType, unknown>;
}

// Warning: (ae-missing-release-tag) "RequiredValidation" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
Expand Down
8 changes: 0 additions & 8 deletions docs/reference/endpoint-inventory.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -841,10 +841,6 @@
"method": "GET",
"path": "/v1/employees/:employeeId/pay_stubs"
},
{
Copy link
Copy Markdown
Contributor

@jeffredodd jeffredodd Jun 3, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this code verification of the work

"method": "GET",
"path": "/v1/employees/:employeeId/work_addresses"
},
{
"method": "GET",
"path": "/v1/employees/:employeeUuid/federal_taxes"
Expand Down Expand Up @@ -1990,10 +1986,6 @@
"method": "GET",
"path": "/v1/employees/:employeeId/pay_stubs"
},
{
"method": "GET",
"path": "/v1/employees/:employeeId/work_addresses"
},
{
"method": "GET",
"path": "/v1/employees/:employeeUuid/federal_taxes"
Expand Down
2 changes: 0 additions & 2 deletions docs/reference/endpoint-reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,7 +164,6 @@ import inventory from '@gusto/embedded-react-sdk/endpoint-inventory.json'
| | GET | `/v1/employees/:employeeId/forms` |
| | GET | `/v1/employees/:employeeId/jobs` |
| | GET | `/v1/employees/:employeeId/pay_stubs` |
| | GET | `/v1/employees/:employeeId/work_addresses` |
| | GET | `/v1/employees/:employeeUuid/federal_taxes` |
| | GET | `/v1/employees/:employeeUuid/state_taxes` |
| | DELETE | `/v1/jobs/:jobId` |
Expand Down Expand Up @@ -376,7 +375,6 @@ import inventory from '@gusto/embedded-react-sdk/endpoint-inventory.json'
| | GET | `/v1/employees/:employeeId/forms` |
| | GET | `/v1/employees/:employeeId/jobs` |
| | GET | `/v1/employees/:employeeId/pay_stubs` |
| | GET | `/v1/employees/:employeeId/work_addresses` |
| | GET | `/v1/employees/:employeeUuid/federal_taxes` |
| | GET | `/v1/employees/:employeeUuid/state_taxes` |
| | DELETE | `/v1/jobs/:jobId` |
Expand Down
42 changes: 22 additions & 20 deletions docs/workflows-overview/employee-dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,23 @@ function MyApp() {

#### Events

| Event type | Description | Data |
| ---------------------------- | ------------------------------------------------------- | -------------------------------------------------------- |
| EMPLOYEE_UPDATE | Fired when editing basic details | { employeeId: string } |
| EMPLOYEE_HOME_ADDRESS | Fired when managing home address | { employeeId: string } |
| EMPLOYEE_WORK_ADDRESS | Fired when managing work address | { employeeId: string } |
| EMPLOYEE_COMPENSATION_CREATE | Fired when editing compensation | { employeeId: string, job: Job } |
| EMPLOYEE_JOB_ADD | Fired when adding a job (empty state or multi-job view) | { employeeId: string } |
| EMPLOYEE_JOB_DELETED | Fired after a non-primary job is deleted from the table | { employeeId: string, jobId: string } |
| EMPLOYEE_BANK_ACCOUNT_CREATE | Fired when adding a bank account | { employeeId: string } |
| EMPLOYEE_DEDUCTION_ADD | Fired when adding a deduction | { employeeId: string } |
| EMPLOYEE_FEDERAL_TAXES_EDIT | Fired when editing federal taxes | { employeeId: string, federalTaxes: EmployeeFederalTax } |
| EMPLOYEE_STATE_TAXES_EDIT | Fired when editing state taxes | { employeeId: string, state: string } |
| EMPLOYEE_VIEW_FORM_TO_SIGN | Fired when viewing a form | { employeeId: string, formUuid: string } |
| Event type | Description | Data |
| ----------------------------------------------- | --------------------------------------------------------------- | -------------------------------------------------------- |
| EMPLOYEE_UPDATE | Fired when editing basic details | { employeeId: string } |
| EMPLOYEE_HOME_ADDRESS | Fired when managing home address | { employeeId: string } |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_REQUESTED | Fired when the "Manage" CTA is clicked on the Work address card | { employeeId: string } |
| EMPLOYEE_COMPENSATION_CREATE | Fired when editing compensation | { employeeId: string, job: Job } |
| EMPLOYEE_JOB_ADD | Fired when adding a job (empty state or multi-job view) | { employeeId: string } |
| EMPLOYEE_JOB_DELETED | Fired after a non-primary job is deleted from the table | { employeeId: string, jobId: string } |
| EMPLOYEE_BANK_ACCOUNT_CREATE | Fired when adding a bank account | { employeeId: string } |
| EMPLOYEE_DEDUCTION_ADD | Fired when adding a deduction | { employeeId: string } |
| EMPLOYEE_FEDERAL_TAXES_EDIT | Fired when editing federal taxes | { employeeId: string, federalTaxes: EmployeeFederalTax } |
| EMPLOYEE_STATE_TAXES_EDIT | Fired when editing state taxes | { employeeId: string, state: string } |
| EMPLOYEE_VIEW_FORM_TO_SIGN | Fired when viewing a form | { employeeId: string, formUuid: string } |

## Using Dashboard Subcomponents

The Dashboard workflow can be used through the wrapping flow component or rendered directly without the flow wrapper. The `EmployeeManagement` namespace also exports related steady-state components that are typically rendered in response to events emitted from the Dashboard (for example, an "Edit work address" CTA emits `EMPLOYEE_WORK_ADDRESS` and your application should render `EmployeeManagement.WorkAddress` in response). For guidance on creating a custom workflow, see [docs on composition](../integration-guide/composition.md).
The Dashboard workflow can be used through the wrapping flow component or rendered directly without the flow wrapper. The `EmployeeManagement` namespace also exports related steady-state components that are typically rendered in response to events emitted from the Dashboard (for example, an "Edit work address" CTA emits `EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_REQUESTED` and your application should render `EmployeeManagement.WorkAddress` in response). For guidance on creating a custom workflow, see [docs on composition](../integration-guide/composition.md).

### Available Subcomponents

Expand Down Expand Up @@ -120,7 +120,7 @@ function MyComponent() {

### EmployeeManagement.WorkAddress

A standalone management screen for viewing and editing an employee's work addresses. Supports adding, switching the active address (with an effective date), editing existing addresses, and deleting addresses. Typically rendered in response to the `EMPLOYEE_WORK_ADDRESS` event emitted from the Dashboard.
A self-contained block for viewing and managing an employee's work addresses. Renders a read-only card; clicking the card's "Manage" CTA swaps the card view for an edit screen that supports adding, switching the active address (with an effective date), editing existing addresses, and deleting addresses. Typically rendered in response to the `EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_REQUESTED` event emitted from the Dashboard. See [employee-management.md](./employee-management/employee-management.md#employeemanagementworkaddress) for the full props and events surface.

```jsx
import { EmployeeManagement } from '@gusto/embedded-react-sdk'
Expand All @@ -141,11 +141,13 @@ function MyComponent() {

#### Events

| Event type | Description | Data |
| ----------------------------- | ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| EMPLOYEE_WORK_ADDRESS_CREATED | Fired when a new work address is created | [Response from the Create a work address endpoint](https://docs.gusto.com/embedded-payroll/reference/post-v1-employees-employee_id-work_addresses) |
| EMPLOYEE_WORK_ADDRESS_UPDATED | Fired when an existing work address is updated | [Response from the Update a work address endpoint](https://docs.gusto.com/embedded-payroll/reference/put-v1-work_addresses-work_address_uuid) |
| EMPLOYEE_WORK_ADDRESS_DELETED | Fired when a work address is deleted | The deleted `EmployeeWorkAddress` snapshot |
| Event type | Description | Data |
| ----------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_REQUESTED | Fired when the "Manage" CTA is clicked on the card; the block swaps to the edit screen | { employeeId: string } |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_CREATED | Fired when a new work address is created on the edit screen | [Response from the Create a work address endpoint](https://docs.gusto.com/embedded-payroll/reference/post-v1-employees-employee_id-work_addresses) |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_UPDATED | Fired when an existing work address is updated on the edit screen | [Response from the Update a work address endpoint](https://docs.gusto.com/embedded-payroll/reference/put-v1-work_addresses-work_address_uuid) |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_DELETED | Fired when a work address is deleted on the edit screen | The deleted `EmployeeWorkAddress` snapshot |
| EMPLOYEE_MANAGEMENT_WORK_ADDRESS_EDIT_CANCELLED | Fired when the user clicks Back on the edit screen; the block returns to the card view | None |

### EmployeeManagement.StateTaxes

Expand Down
Loading
Loading