chore: update changelog with breaking changes and update docs (#345)

Author: serikjensen

CHANGELOG.md

@@ -9,6 +9,10 @@
 - Fixed state tax boolean validation issues
 - Updated Gusto embedded-api version to the latest
 
+### Breaking changes
+
+Be sure to note the breaking change listed below for version 0.8.2 around component renaming and removal of the top level Flow component.
+
 ## 0.8.2
 
 - Refactored employee flow components structure and improved organization within Employee namespace
@@ -17,6 +21,56 @@
 - Fixed commission Zod schema validation issues
 - Fixed issue with headers not being passed properly through our API client
 
+### Breaking changes
+
+> Note: We are pre alpha and are regularly iterating on the SDK as we learn more about our consumers and their needs which sometimes involves breaking changes. [Read more about our current versioning strategy here](./docs/04/01/versioning.md).
+
+#### Rename components to remove the "Flow" naming suffix
+
+The following components have been updated to remove the "Flow" naming suffix.
+
+| Old name                      | Updated name              |
+| ----------------------------- | ------------------------- |
+| `Employee.DocumentSignerFlow` | `Employee.DocumentSigner` |
+| `Company.LocationsFlow`       | `Company.Locations`       |
+| `Company.BankAccountFlow`     | `Company.BankAccount`     |
+| `Company.StateTaxesFlow`      | `Company.StateTaxes`      |
+| `Company.DocumentSignerFlow`  | `Company.DocumentSigner`  |
+
+#### Removed top level Flow component and renamed flow subcomponents
+
+We have removed the top level `Flow` component and have migrated the flow subcomponents to `Employee` and `Company` respectively.
+
+| Old name                          | Updated name                  |
+| --------------------------------- | ----------------------------- |
+| `Flow.EmployeeOnboardingFlow`     | `Employee.OnboardingFlow`     |
+| `Flow.EmployeeSelfOnboardingFlow` | `Employee.SelfOnboardingFlow` |
+
+Some examples of before/after:
+
+_Before_
+
+```tsx
+import { Flow } from '@gusto/embedded-react-sdk'
+
+...
+
+<Flow.EmployeeOnboardingFlow ... />
+<Flow.EmployeeSelfOnboardingFlow ... />
+
+```
+
+_After_
+
+```tsx
+import { Employee } from '@gusto/embedded-react-sdk'
+
+...
+
+<Employee.OnboardingFlow ... />
+<Employee.SelfOnboardingFlow ... />
+```
+
 ## 0.8.1
 
 - Replaced Valibot with Zod for bundle size reduction. Also included zod as a dependency
@@ -125,7 +179,9 @@ You would do the following instead::
 >
 ```
 
-#### DocumentSigner has been renamed to DocumentSigner
+#### DocumentSigner has been renamed to DocumentSignerFlow
+
+> This was actually reverted in 0.8.2. If you have DocumentSigner as the component name, you can continue to use that if you are on 0.8.2 or later. Between 0.7.0 up until 0.8.2 the naming is DocumentSignerFlow
 
 Where you would previously do
 
@@ -136,7 +192,7 @@ Where you would previously do
 You should update the naming as follows:
 
 ```tsx
-<Employee.DocumentSigner employeeId="some-id" onEvent={() => {}} />
+<Employee.DocumentSignerFlow employeeId="some-id" onEvent={() => {}} />
 ```
 
 ## 0.6.0

docs/03/01/authentication-1.md

@@ -12,13 +12,13 @@ The most simple implementation is one where a partner has a backend service that
 
 ![](https://files.readme.io/161c4c0c0952486a811a18c71d959a8bd74ca4884f2fc1abe39737c988f3a05f-image.png)
 
-The `<GustoApiProvider>` can receive a `baseUrl` that can be configured with the address of your backend proxy service and can also be used if necessary to pass along vendor authentication credentials.
+The `<GustoProvider>` can receive a `baseUrl` that can be configured with the address of your backend proxy service and can also be used if necessary to pass along vendor authentication credentials.
 
 ```jsx react
-import { GustoApiProvider } from '@gusto/embedded-react-sdk'
+import { GustoProvider } from '@gusto/embedded-react-sdk'
 
 function App() {
-  return <GustoApiProvider config={{ baseUrl: '/proxy-url/' }}>Your app here!</GustoApiProvider>
+  return <GustoProvider config={{ baseUrl: '/proxy-url/' }}>Your app here!</GustoProvider>
 }
 
 export default App

docs/03/getting-started-1.md

@@ -14,13 +14,13 @@ npm i @gusto/embedded-react-sdk
 
 ## Configuring the API provider
 
-The `GustoApiProvider` is used to configure the SDK at the application level. It must wrap the top-level component tree (typically at the root of the application) to ensure SDK components have access to the necessary configurations.
+The `GustoProvider` is used to configure the SDK at the application level. It must wrap the top-level component tree (typically at the root of the application) to ensure SDK components have access to the necessary configurations.
 
 ```jsx
-import { GustoApiProvider } from '@gusto/embedded-react-sdk'
+import { GustoProvider } from '@gusto/embedded-react-sdk'
 
 function App() {
-  return <GustoApiProvider config={{ baseUrl: '/proxy-url/' }}>...</GustoApiProvider>
+  return <GustoProvider config={{ baseUrl: '/proxy-url/' }}>...</GustoProvider>
 }
 
 export default App

docs/04/01/composition.md

@@ -11,13 +11,13 @@ import { EmployeeOnboardingFlow } from '@gusto/embedded-react-sdk';
 
 function MyApp({ companyId }) {
   return(
-    <GustoApiProvider
+    <GustoProvider
       config={{
         baseUrl: `/myapp/`,
       }}
     >
       <EmployeeOnboardingFlow companyId={companyId} onEvent={() => {...}} />
-    </GustoApiProvider>
+    </GustoProvider>
   );
 }
 ```
@@ -33,7 +33,7 @@ import { Employee } from '@gusto/embedded-react-sdk';
 
 function MyApp({ employeeId, startDate }) {
   return(
-    <GustoApiProvider
+    <GustoProvider
       config={{
         baseUrl: `/myapp/`,
       }}
@@ -43,7 +43,7 @@ function MyApp({ employeeId, startDate }) {
         startDate={startDate}
         onEvent={() => {...}}
       />
-    </GustoApiProvider>
+    </GustoProvider>
   );
 }
 ```
@@ -53,46 +53,3 @@ function MyApp({ employeeId, startDate }) {
 Each step of the employee onboarding flow can be imported like this in isolation and used directly as needed. (For a comprehensive list of employee onboarding components available [see the Employee Onboarding documentation here](?tab=t.ueez3pueaqpd#heading=h.ojoq455ctuev)).
 
 Because each step is available for direct use in isolation, it is also possible to rearrange steps, compose them with your own content, or [integrate them with your routing infrastructure as outlined here](?tab=t.kl25ghwrpy9i#heading=h.n2ha5hq6v67a). For example, we could place this compensation form inside of an existing page inline with our own components, or we could use this as a step in a different flow entirely.
-
-### Further customization
-
-Individual flow components can be further decomposed, modified or rearranged. Every flow component makes its individual pieces available (header, actions, content, etc). This enables developers and designers to customize the layout and order according to their needs. The following example demonstrates how to break down the `Employee.Compensation` component (from the previous section) into subcomponents, insert additional content after the header, and insert custom styles around the actions.
-
-```jsx
-import { Employee } from '@gusto/embedded-react-sdk'
-
-function MyApp({ employeeId, startDate }) {
-  return (
-    <GustoApiProvider
-      config={{
-        baseUrl: `/myapp/`,
-      }}
-    >
-      <Employee.Compensation startDate={startDate} employeeId={employeeId} onEvent={() => {}}>
-        <Employee.Compensation.Head />
-        {/* Custom instructional message */}
-        <p>Fill out all fields as best you can</p>
-        <Employee.Compensation.List />
-        <Employee.Compensation.Edit />
-        {/* Actions wrapped in custom styling */}
-        <div
-          style={{
-            borderTop: '1px solid #6C6C72',
-            width: '100%',
-            padding: '1rem',
-            backgroundColor: '#F4F4F3',
-          }}
-        >
-          <Employee.Compensation.Actions />
-        </div>
-      </Employee.Compensation>
-    </GustoApiProvider>
-  )
-}
-```
-
-![](https://files.readme.io/b2108cbc99e8dda2b7e89fe95ea4b7dcc3ab18f4d96f36313a0be226ea6baed3-image.png)
-
-The `Employee.Compensation` component can be broken out into individual subcomponents which can be rearranged or customized as needed. These subcomponents can be set as children, and provided in any order.
-
-In the code sample above, we’ve provided some additional “Fill out all fields as best you can” helper text between the header and the edit form. We’ve also updated the actions to have a top border, gray background, and some more prominent actions by wrapping them in a dedicated div.

docs/04/01/event-handling.md

@@ -37,13 +37,13 @@ const handleEvent = (eventType, data) => {
 
 function MyApp({ companyId }) {
   return (
-    <GustoApiProvider
+    <GustoProvider
       config={{
         baseUrl: `/myapp/`,
       }}
     >
       <Employee.Profile companyId={companyId} employeeId={employeeId} onEvent={handleEvent} />
-    </GustoApiProvider>
+    </GustoProvider>
   )
 }
 ```

docs/04/01/providing-your-own-data.md

@@ -18,7 +18,7 @@ function MyApp({ employeeId, startDate }) {
   };
 
   return(
-    <GustoApiProvider
+    <GustoProvider
       config={{
         baseUrl: `/myapp/`,
       }}
@@ -29,7 +29,7 @@ function MyApp({ employeeId, startDate }) {
         onEvent={() => {...}}
         defaultValues={someApplicationData}
       />
-    </GustoApiProvider>
+    </GustoProvider>
   );
 }
 ```

docs/04/01/routing.md

@@ -279,13 +279,13 @@ export default function App({ companyId, employeeId }: AppProps) {
     employeeId,
   });
   return (
-    <GustoApiProvider
+    <GustoProvider
       config={{
         baseUrl: `/myapp/`,
       }}
     >
       <RouterProvider router={router} />
-    </GustoApiProvider>
+    </GustoProvider>
   );
 }