feat: add company document signer state machine #164
Conversation
| function hasRequiredParams<TParams extends object, TRequiredParams extends keyof TParams>( | ||
| params: TParams, | ||
| requiredParams: TRequiredParams[], | ||
| ): params is TParams & Required<Pick<TParams, TRequiredParams>> { | ||
| return requiredParams.every(param => param in params && typeof params[param] !== 'undefined') | ||
| } | ||
|
|
There was a problem hiding this comment.
This provides a type guard for the existing useFlowParams hook below. We can assert that all the required params are supplied as expected and then communicate that with TS.
Without this TS determines a prop which is conditional in the flow interface (by design since it's not required for each flow component, only signature form) and throws an error
There was a problem hiding this comment.
Nice! Looks good! Great use of types here
| export type MachineEventType< | ||
| TEventPayloads, | ||
| TEventType extends keyof TEventPayloads = keyof TEventPayloads, | ||
| > = { | ||
| type: TEventType | ||
| payload: TEventPayloads[TEventType] | ||
| } |
There was a problem hiding this comment.
Needed to share this across state machines, lmk if there's a better file to put it in
serikjensen
force-pushed
the
feat/GWS-3736
branch
from
8d0e1c2 to
f3fab14
Compare
| signatoryId?: string | ||
| } | ||
|
|
||
| export const DocumentSigner = ({ companyId, signatoryId, onEvent }: DocumentSignerProps) => { |
There was a problem hiding this comment.
I feel like this should be DocumentSignerMachine but thats just a suggestion I'm still not the most confident in robot3
There was a problem hiding this comment.
Hmm but I also see this below too in documentSignerStateMachine. But it returns a flow so maybe Flow is the suffix i'm thinking fits here. Just seems like we have a lot of components called DocumentSigner.
There was a problem hiding this comment.
So the thought around this is that Flow already is kind of a reserved word for the mega user flows like employee onboarding. These are still technically at the level of a component like payment method or compensation so the idea would be that they are usable in the same way.
I guess it would come down to if we felt ok making flow something that could be at the component level which is tough given that we have language around what flows mean atm
i also might be overthinking this lol here's the current docs on flows https://docs.gusto.com/embedded-payroll/docs/workflows-overview
| function hasRequiredParams<TParams extends object, TRequiredParams extends keyof TParams>( | ||
| params: TParams, | ||
| requiredParams: TRequiredParams[], | ||
| ): params is TParams & Required<Pick<TParams, TRequiredParams>> { | ||
| return requiredParams.every(param => param in params && typeof params[param] !== 'undefined') | ||
| } | ||
|
|
There was a problem hiding this comment.
Nice! Looks good! Great use of types here
| }) | ||
| if (!hasRequiredParams(params, requiredParams)) { | ||
| const missingParam = requiredParams.find(param => typeof params[param] === 'undefined') | ||
| throw new Error( |
There was a problem hiding this comment.
What happens when the required params are missing? Do we just throw an error and break the flow? Just trying to think of cases where this could happen.
There was a problem hiding this comment.
It currently just breaks! i think we could address catching errors and providing an escape hatch with some sort of flow error boundary
| import { type MachineEventType } from '@/types/Helpers' | ||
|
|
||
| type EventPayloads = { | ||
| [companyEvents.COMPANY_VIEW_FORM_TO_SIGN]: Schemas['Form'] |
There was a problem hiding this comment.
I wonder if we should further scope these events for easier management, like documentSignerEvents.
There was a problem hiding this comment.
yeah +1 to providing better scope!
|
this is awesome! |
serikjensen
force-pushed
the
feat/GWS-3736
branch
from
f3fab14 to
a55ea59
Compare
This adds a document signer state machine to put together all steps in company document signer.
See workflow in figma here https://www.figma.com/design/6dxOSiONDiJoa9zY1wOwbs/Frontend-SDK-Partner-Design-File?node-id=5220-17923&m=dev
Proof of functionality
Assign signatory (as self) -> documents list -> signature form -> documents list
Screen.Recording.2025-02-25.at.4.35.43.PM.mov
Inviting signatory
Screen.Recording.2025-02-25.at.4.39.07.PM.mov