Skip to content

Commit aedcfdc

Browse files
serikjensenserikjensen
authored
chore: add initial contractor onboarding documentation (#362)
1 parent 7cd1086 commit aedcfdc

File tree

1 file changed

+146
-0
lines changed

1 file changed

+146
-0
lines changed

‎docs/05/03/contractor-onboarding.md

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
## Overview
2+
3+
The Contractor Onboarding workflow provides a complete experience for onboarding a contractor to a company. It is used to collect all required information for a contractor to be added to the system.
4+
5+
## Using Contractor Subcomponents
6+
7+
### Available Subcomponents
8+
9+
- Contractor.ContractorList
10+
- Contractor.Address
11+
- Contractor.PaymentMethod
12+
- Contractor.NewHireReport
13+
14+
### Contractor.List
15+
16+
Displays a list of contractors containing their full name and their current onboarding status. This list also contains actions that allow for the editing or removal of a contractor.
17+
18+
```jsx
19+
import { Contractor } from '@gusto/embedded-react-sdk'
20+
21+
function MyApp() {
22+
return <Contractor.List companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365" onEvent={() => {}} />
23+
}
24+
```
25+
26+
#### Props
27+
28+
| Name | Type | Description |
29+
| ------------------ | ------ | -------------------------------------------- |
30+
| companyId Required | string | The associated company identifier. |
31+
| onEvent Required | | See events table below for available events. |
32+
33+
#### Events
34+
35+
| Event type | Description | Data |
36+
| ------------------ | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
37+
| CONTRACTOR_CREATE | Fired when user clicks "Add contractor" button | Undefined |
38+
| CONTRACTOR_UPDATE | Fired when user selects "Edit" from contractor actions menu | { contractorId: string } |
39+
| CONTRACTOR_DELETED | Fired after selecting delete from the contractor actions menu and the deleting a contractor operation completes | Response data from [Delete a contractor](https://docs.gusto.com/embedded-payroll/reference/delete-v1-contractors-contractor_uuid) endpoint |
40+
41+
### Contractor.Address
42+
43+
Used to collect address information about the contractor:
44+
45+
- Street address (line 1 and line 2)
46+
- City
47+
- State
48+
- ZIP code
49+
50+
```jsx
51+
import { Contractor } from '@gusto/embedded-react-sdk'
52+
53+
function MyComponent() {
54+
return (
55+
<Contractor.Address
56+
defaultValues={{
57+
street1: '123 Main St',
58+
city: 'San Francisco',
59+
state: 'CA',
60+
zip: '94105',
61+
}}
62+
contractorId="4b3f930f-82cd-48a8-b797-798686e12e5e"
63+
onEvent={() => {}}
64+
/>
65+
)
66+
}
67+
```
68+
69+
#### Props
70+
71+
| Name | Type | Default | Description |
72+
| --------------------- | ------------------------------------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
73+
| contractorId Required | string | | The associated contractor identifier. |
74+
| onEvent Required | | | See events table for available events. |
75+
| defaultValues | { street1?: string street2?: string city?: string state?: string zip?: string } | undefined | Default values for the contractor address form inputs. If contractor data is available via the API, defaultValues will be overwritten. |
76+
77+
#### Events
78+
79+
| Event type | Description | Data |
80+
| -------------------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
81+
| CONTRACTOR_ADDRESS_UPDATED | Fired after form is submitted when updating contractor address | Response from the [Update contractor address](https://docs.gusto.com/embedded-payroll/reference/put-v1-contractors-contractor_uuid-address) endpoint |
82+
| CONTRACTOR_ADDRESS_DONE | Fired after form submission and all api calls have finished and we are ready to advance to the next step | None |
83+
| CANCEL | Fired when user clicks cancel button | None |
84+
85+
### Contractor.PaymentMethod
86+
87+
Used for configuring contractor payment method and bank account(s). Bank accounts created with this component will be used to pay the contractor when payments are processed.
88+
89+
```jsx
90+
import { Contractor } from '@gusto/embedded-react-sdk'
91+
92+
function MyComponent() {
93+
return (
94+
<Contractor.PaymentMethod
95+
contractorId="4b3f930f-82cd-48a8-b797-798686e12e5e"
96+
onEvent={() => {}}
97+
/>
98+
)
99+
}
100+
```
101+
102+
#### Props
103+
104+
| Name | Type | Description |
105+
| --------------------- | ------ | -------------------------------------- |
106+
| contractorId Required | string | The associated contractor identifier. |
107+
| onEvent Required | | See events table for available events. |
108+
109+
#### Events
110+
111+
| Event type | Description | Data |
112+
| --------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
113+
| CONTRACTOR_BANK_ACCOUNT_CREATED | Fired after add bank account form is submitted and new account is created | Response from the [Create a contractor bank account](https://docs.gusto.com/embedded-payroll/reference/post-v1-contractors-contractor_uuid-bank_accounts) endpoint |
114+
| CONTRACTOR_PAYMENT_METHOD_UPDATED | Fired when the contractor updates the payment method | Response from the [Update contractor payment method](https://docs.gusto.com/embedded-payroll/reference/put-v1-contractors-contractor_id-payment_method) endpoint |
115+
| CONTRACTOR_PAYMENT_METHOD_DONE | Fired when the continue CTA is selected, all API calls are finished, and we are ready to advance to the next step | None |
116+
117+
### Contractor.NewHireReport
118+
119+
Used for configuring new hire reporting requirements for the contractor. This component allows setting whether a new hire report should be filed and in which state.
120+
121+
```jsx
122+
import { Contractor } from '@gusto/embedded-react-sdk'
123+
124+
function MyComponent() {
125+
return (
126+
<Contractor.NewHireReport
127+
contractorId="4b3f930f-82cd-48a8-b797-798686e12e5e"
128+
onEvent={() => {}}
129+
/>
130+
)
131+
}
132+
```
133+
134+
#### Props
135+
136+
| Name | Type | Description |
137+
| --------------------- | ------ | -------------------------------------- |
138+
| contractorId Required | string | The associated contractor identifier. |
139+
| onEvent Required | | See events table for available events. |
140+
141+
#### Events
142+
143+
| Event type | Description | Data |
144+
| ---------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
145+
| CONTRACTOR_NEW_HIRE_REPORT_UPDATED | Fired after the new hire report form is submitted and contractor is updated | Response from the [Update contractor](https://docs.gusto.com/embedded-payroll/reference/put-v1-contractors-contractor_uuid) endpoint |
146+
| CONTRACTOR_NEW_HIRE_REPORT_DONE | Fired when new hire report setup is complete and user is ready to navigate to the next step | None |

0 commit comments

Comments
 (0)