@gusto/embedded-react-sdk 0.48.3 → 0.50.0

package/dist/components/Contractor/PaymentMethod/PaymentMethod.js

@@ -1,116 +1,113 @@
-import { jsx as e, jsxs as H } from "react/jsx-runtime";
-import { useTranslation as j } from "react-i18next";
-import { useForm as G, useWatch as Q, FormProvider as V } from "react-hook-form";
-import { useContractorPaymentMethodGetSuspense as Y, buildContractorPaymentMethodGetQuery as z } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet";
-import { useContractorPaymentMethodGetBankAccountsSuspense as L } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts";
-import { useContractorPaymentMethodsCreateBankAccountMutation as K } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount";
-import { useState as W, useMemo as J } from "react";
-import n from "zod";
-import { zodResolver as X } from "@hookform/resolvers/zod";
-import { useContractorPaymentMethodUpdateMutation as Z } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodUpdate";
-import { useQueryClient as $ } from "@tanstack/react-query";
-import { useGustoEmbeddedContext as I } from "@gusto/embedded-api-v-2025-11-15/react-query/_context";
-import { BankAccountForm as tt } from "./BankAccountForm.js";
-import { PaymentTypeForm as et } from "./PaymentTypeForm.js";
-import { useComponentDictionary as ot, useI18n as nt } from "../../../i18n/I18n.js";
-import { BaseComponent as rt } from "../../Base/Base.js";
-import { useBase as ct } from "../../Base/useBase.js";
-import { useComponentContext as at } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Form as it } from "../../Common/Form/Form.js";
-import { PAYMENT_METHODS as m, componentEvents as s } from "../../../shared/constants.js";
-import { ActionsLayout as mt } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { Flex as st } from "../../Common/Flex/Flex.js";
-import { routingNumberValidation as ut, accountNumberValidation as dt } from "../../../helpers/validations.js";
-const pt = n.discriminatedUnion("type", [
-  n.object({
-    type: n.literal("Direct Deposit"),
-    name: n.string().min(1),
-    routingNumber: ut,
-    accountNumber: n.any(),
-    //Explicitely setting account number as most permissive
-    accountType: n.enum(["Checking", "Savings"])
-  }),
-  n.object({
-    type: n.literal("Check")
-  })
-]);
-function Ht(o) {
-  return /* @__PURE__ */ e(rt, { ...o, children: /* @__PURE__ */ e(yt, { ...o, children: o.children }) });
+import { jsx as t, jsxs as d, Fragment as E } from "react/jsx-runtime";
+import { useTranslation as M } from "react-i18next";
+import O from "classnames";
+import { useContractorPaymentMethodForm as L } from "./shared/useContractorPaymentMethodForm/useContractorPaymentMethodForm.js";
+import { useContractorBankAccountForm as _ } from "./shared/useContractorBankAccountForm/useContractorBankAccountForm.js";
+import H from "./PaymentMethod.module.scss.js";
+import { useComponentDictionary as P, useI18n as v } from "../../../i18n/I18n.js";
+import { BaseBoundaries as B, BaseLayout as p } from "../../Base/Base.js";
+import "../../Base/useBase.js";
+import { useComponentContext as U } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Form as I } from "../../Common/Form/Form.js";
+import { PAYMENT_METHODS as b, componentEvents as c } from "../../../shared/constants.js";
+import { composeErrorHandler as S } from "../../../partner-hook-utils/composeErrorHandler.js";
+import { composeSubmitHandler as A } from "../../../partner-hook-utils/form/composeSubmitHandler.js";
+import { ActionsLayout as x } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { Flex as Y } from "../../Common/Flex/Flex.js";
+import "react";
+function io({ dictionary: i, ...s }) {
+  return P("Contractor.PaymentMethod", i), /* @__PURE__ */ t(B, { componentName: "Contractor.PaymentMethod", children: /* @__PURE__ */ t(Q, { ...s }) });
 }
-function yt({ contractorId: o, className: P, dictionary: C }) {
-  ot("Contractor.PaymentMethod", C), nt("Contractor.PaymentMethod");
-  const { t: u } = j("Contractor.PaymentMethod"), { onEvent: a, baseSubmitHandler: b } = ct(), d = at(), A = $(), N = I(), [T, p] = W(!1), g = Y({
-    contractorUuid: o
-  }), k = z(N, {
-    contractorUuid: o
-  }), i = g.data.contractorPaymentMethod, {
-    data: { contractorBankAccountList: D }
-  } = L({
-    contractorUuid: o
-  }), t = D?.[0] || void 0, { mutateAsync: E, isPending: R } = Z(), { mutateAsync: B, isPending: v } = K(), O = J(
-    () => ({
-      type: i.type || m.check,
-      name: t?.name || "",
-      routingNumber: t?.routingNumber || "",
-      accountNumber: t?.hiddenAccountNumber || "",
-      accountType: t?.accountType || "Checking"
-    }),
-    [i, t]
-  ), r = G({
-    resolver: X(pt),
-    defaultValues: O
-  }), S = Q({ control: r.control, name: "type" }), _ = async (x) => {
-    await b(x, async (c) => {
-      let y;
-      if (c.type === m.directDeposit) {
-        const { name: h, accountNumber: f, routingNumber: l, accountType: M } = c;
-        if ((h !== t?.name || l !== t.routingNumber || M !== t.accountType || f !== t.hiddenAccountNumber) && !dt.safeParse(c.accountNumber).success) {
-          r.setError("accountNumber", { type: "validate" });
-          return;
-        }
-        const w = await B({
-          request: {
-            contractorUuid: o,
-            contractorBankAccountCreateRequestBody: {
-              name: h,
-              routingNumber: l,
-              accountNumber: f,
-              accountType: M
-            }
-          }
-        });
-        a(s.CONTRACTOR_BANK_ACCOUNT_CREATED, w), p(!0);
-        const q = (await A.fetchQuery(k)).contractorPaymentMethod;
-        p(!1), y = q.version;
-      }
-      const F = await E({
-        request: {
-          contractorUuid: o,
-          requestBody: {
-            type: c.type,
-            version: y || i.version
-          }
-        }
-      });
-      a(s.CONTRACTOR_PAYMENT_METHOD_UPDATED, F), a(s.CONTRACTOR_PAYMENT_METHOD_DONE);
-    });
-  }, U = S === m.directDeposit;
-  return /* @__PURE__ */ e("section", { className: P, children: /* @__PURE__ */ e(V, { ...r, children: /* @__PURE__ */ e(it, { onSubmit: r.handleSubmit(_), children: /* @__PURE__ */ H(st, { gap: 32, flexDirection: "column", children: [
-    /* @__PURE__ */ e(d.Heading, { as: "h2", children: u("title") }),
-    /* @__PURE__ */ e(et, {}),
-    U && /* @__PURE__ */ e(tt, { bankAccount: t }),
-    /* @__PURE__ */ e(mt, { children: /* @__PURE__ */ e(
-      d.Button,
+function Q({ contractorId: i, className: s, onEvent: a }) {
+  v("Contractor.PaymentMethod");
+  const { t: o } = M("Contractor.PaymentMethod"), m = U(), r = L({
+    contractorId: i,
+    shouldFocusError: !1
+  }), e = _({
+    contractorId: i,
+    shouldFocusError: !1
+  });
+  if (r.isLoading || e.isLoading) {
+    const n = S([r, e]);
+    return /* @__PURE__ */ t(p, { isLoading: !0, error: n.errors });
+  }
+  const u = r.status.isDirectDeposit, { Type: N } = r.form.Fields, { Name: f, RoutingNumber: D, AccountNumber: C, AccountType: T } = e.form.Fields, h = async () => {
+    const n = await e.actions.onSubmit();
+    n && (a(c.CONTRACTOR_BANK_ACCOUNT_CREATED, {
+      contractorBankAccount: n.data
+    }), a(c.CONTRACTOR_PAYMENT_METHOD_DONE));
+  }, g = async () => {
+    const n = await r.actions.onSubmit();
+    n && (a(c.CONTRACTOR_PAYMENT_METHOD_UPDATED, {
+      contractorPaymentMethod: n.data
+    }), a(c.CONTRACTOR_PAYMENT_METHOD_DONE));
+  }, { handleSubmit: F, errorHandling: R } = u ? A([r, e], h) : A([r], g), k = r.status.isPending || e.status.isPending, y = (n) => /* @__PURE__ */ t(
+    m.RadioGroup,
+    {
+      ...n,
+      shouldVisuallyHideLabel: !0,
+      options: n.options.map((l) => ({
+        ...l,
+        description: l.value === b.directDeposit ? o("directDepositDescription") : o("checkDescription")
+      }))
+    }
+  );
+  return /* @__PURE__ */ t("section", { className: O(H.root, s), children: /* @__PURE__ */ t(p, { error: R.errors, children: /* @__PURE__ */ t(I, { onSubmit: F, children: /* @__PURE__ */ d(Y, { gap: 32, flexDirection: "column", children: [
+    /* @__PURE__ */ t(m.Heading, { as: "h2", children: o("title") }),
+    /* @__PURE__ */ t(
+      N,
       {
-        type: "submit",
-        variant: "primary",
-        isDisabled: R || v || T,
-        children: u("continueCta")
+        label: o("paymentFieldsetLegend"),
+        getOptionLabel: (n) => n === b.directDeposit ? o("directDepositLabel") : o("checkLabel"),
+        FieldComponent: y,
+        formHookResult: r
       }
-    ) })
+    ),
+    u && /* @__PURE__ */ d(E, { children: [
+      /* @__PURE__ */ t(
+        f,
+        {
+          label: o("bankAccountForm.nameLabel"),
+          validationMessages: { REQUIRED: o("bankAccountForm.validations.accountName") },
+          formHookResult: e
+        }
+      ),
+      /* @__PURE__ */ t(
+        D,
+        {
+          label: o("bankAccountForm.routingNumberLabel"),
+          description: o("bankAccountForm.routingNumberDescription"),
+          validationMessages: {
+            REQUIRED: o("bankAccountForm.validations.routingNumber"),
+            INVALID_ROUTING_NUMBER: o("bankAccountForm.validations.routingNumber")
+          },
+          formHookResult: e
+        }
+      ),
+      /* @__PURE__ */ t(
+        C,
+        {
+          label: o("bankAccountForm.accountNumberLabel"),
+          validationMessages: {
+            REQUIRED: o("bankAccountForm.validations.accountNumber"),
+            INVALID_ACCOUNT_NUMBER: o("bankAccountForm.validations.accountNumber")
+          },
+          formHookResult: e
+        }
+      ),
+      /* @__PURE__ */ t(
+        T,
+        {
+          label: o("bankAccountForm.accountTypeLabel"),
+          getOptionLabel: (n) => o(n === "Checking" ? "bankAccountForm.accountTypeChecking" : "bankAccountForm.accountTypeSavings"),
+          formHookResult: e
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(x, { children: /* @__PURE__ */ t(m.Button, { type: "submit", variant: "primary", isDisabled: k, children: o("continueCta") }) })
   ] }) }) }) });
 }
 export {
-  Ht as PaymentMethod
+  io as PaymentMethod
 };
 //# sourceMappingURL=PaymentMethod.js.map

package/dist/components/Contractor/PaymentMethod/PaymentMethod.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Contractor/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { SubmitHandler } from 'react-hook-form'\nimport { FormProvider, useForm, useWatch } from 'react-hook-form'\nimport { useContractorPaymentMethodGetSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet'\nimport { useContractorPaymentMethodGetBankAccountsSuspense } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts'\nimport { useContractorPaymentMethodsCreateBankAccountMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount'\nimport { useMemo, useState } from 'react'\nimport z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { useContractorPaymentMethodUpdateMutation } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodUpdate'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { buildContractorPaymentMethodGetQuery } from '@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGet'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api-v-2025-11-15/react-query/_context'\nimport type { PaymentMethodProps } from './types'\nimport { BankAccountForm } from './BankAccountForm'\nimport { PaymentTypeForm } from './PaymentTypeForm'\nimport { useI18n } from '@/i18n'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, PAYMENT_METHODS } from '@/shared/constants'\nimport { ActionsLayout } from '@/components/Common/ActionsLayout'\nimport { Flex } from '@/components/Common'\nimport { accountNumberValidation, routingNumberValidation } from '@/helpers/validations'\n\nconst PaymentMethodSchema = z.discriminatedUnion('type', [\n  z.object({\n    type: z.literal('Direct Deposit'),\n    name: z.string().min(1),\n    routingNumber: routingNumberValidation,\n    accountNumber: z.any(), //Explicitely setting account number as most permissive\n    accountType: z.enum(['Checking', 'Savings']),\n  }),\n  z.object({\n    type: z.literal('Check'),\n  }),\n])\n\ntype PaymentMethodSchemaInputs = z.input<typeof PaymentMethodSchema>\n\n/**\n * Manages a contractor's payment method, capturing a bank account for direct deposit or recording check as the payment method.\n *\n * Displays the current payment type, lets the user switch between direct deposit and check, and\n * collects bank account details (account holder name, routing number, account number, and account\n * type) when direct deposit is selected. Submitting creates the bank account if needed and then\n * updates the contractor's payment method.\n *\n * @remarks\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/bankAccount/created` | Fired after a bank account is created for the contractor | The API response object; access the created bank account at `.contractorBankAccount` |\n * | `contractor/paymentMethod/updated` | Fired after the payment method is updated | The API response object; access the updated payment method at `.contractorPaymentMethod` |\n * | `contractor/paymentMethod/done` | Fired when the payment method step completes | — |\n *\n * @param props - Component configuration; see {@link PaymentMethodProps}.\n * @returns The rendered payment method form.\n * @public\n *\n * @example\n * ```tsx\n * import { ContractorOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function PaymentMethodStep() {\n *   return (\n *     <ContractorOnboarding.PaymentMethod\n *       contractorId=\"contractor-uuid\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod(props: PaymentMethodProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ contractorId, className, dictionary }: PaymentMethodProps) {\n  useComponentDictionary('Contractor.PaymentMethod', dictionary)\n  useI18n('Contractor.PaymentMethod')\n  const { t } = useTranslation('Contractor.PaymentMethod')\n  const { onEvent, baseSubmitHandler } = useBase()\n  const Components = useComponentContext()\n  const queryClient = useQueryClient()\n  const gustoClient = useGustoEmbeddedContext()\n  const [isPaymentMethodPending, setIsPaymentMethodPending] = useState(false)\n\n  const contractorPaymentMethod = useContractorPaymentMethodGetSuspense({\n    contractorUuid: contractorId,\n  })\n\n  const getPaymentMethodQuery = buildContractorPaymentMethodGetQuery(gustoClient, {\n    contractorUuid: contractorId,\n  })\n\n  const paymentMethod = contractorPaymentMethod.data.contractorPaymentMethod!\n\n  const {\n    data: { contractorBankAccountList },\n  } = useContractorPaymentMethodGetBankAccountsSuspense({\n    contractorUuid: contractorId,\n  })\n  const bankAccount = contractorBankAccountList?.[0] || undefined\n\n  const { mutateAsync: updatePaymentMethod, isPending: paymentMethodPending } =\n    useContractorPaymentMethodUpdateMutation()\n  const { mutateAsync: createBankAccount, isPending: bankAccountPending } =\n    useContractorPaymentMethodsCreateBankAccountMutation()\n\n  const defaultValues = useMemo(\n    () => ({\n      type: paymentMethod.type || PAYMENT_METHODS.check,\n      name: bankAccount?.name || '',\n      routingNumber: bankAccount?.routingNumber || '',\n      accountNumber: bankAccount?.hiddenAccountNumber || '',\n      accountType: bankAccount?.accountType || 'Checking',\n    }),\n    [paymentMethod, bankAccount],\n  )\n\n  const formMethods = useForm({\n    resolver: zodResolver(PaymentMethodSchema),\n    defaultValues: defaultValues,\n  })\n\n  const watchedType = useWatch({ control: formMethods.control, name: 'type' })\n  const onSubmit: SubmitHandler<PaymentMethodSchemaInputs> = async data => {\n    await baseSubmitHandler(data, async payload => {\n      let updatedPaymentMethodVersion: string | undefined\n      if (payload.type === PAYMENT_METHODS.directDeposit) {\n        /** Custom validation logic for accountNumber - because masked account value is used as default value, it is only validated when any of the bank-related fields are modified*/\n        const { name, accountNumber, routingNumber, accountType } = payload\n        if (\n          name !== bankAccount?.name ||\n          routingNumber !== bankAccount.routingNumber ||\n          accountType !== bankAccount.accountType ||\n          accountNumber !== bankAccount.hiddenAccountNumber\n        ) {\n          const res = accountNumberValidation.safeParse(payload.accountNumber)\n          if (!res.success) {\n            formMethods.setError('accountNumber', { type: 'validate' })\n            return\n          }\n        }\n\n        const bankAccountResponse = await createBankAccount({\n          request: {\n            contractorUuid: contractorId,\n            contractorBankAccountCreateRequestBody: {\n              name,\n              routingNumber,\n              accountNumber,\n              accountType,\n            },\n          },\n        })\n\n        onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, bankAccountResponse)\n\n        // We have to fetch the updated payment method imperatively here because updating the bank\n        // account will cause the payment method version to update. This ensures we have the latest version.\n        setIsPaymentMethodPending(true)\n        const updatedPaymentMethodResponse = await queryClient.fetchQuery(getPaymentMethodQuery)\n        const updatedPaymentMethod = updatedPaymentMethodResponse.contractorPaymentMethod!\n        setIsPaymentMethodPending(false)\n\n        updatedPaymentMethodVersion = updatedPaymentMethod.version as string\n      }\n      // For check payment method, no bank account creation needed\n      const paymentMethodResponse = await updatePaymentMethod({\n        request: {\n          contractorUuid: contractorId,\n          requestBody: {\n            type: payload.type,\n            version: updatedPaymentMethodVersion || (paymentMethod.version as string),\n          },\n        },\n      })\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, paymentMethodResponse)\n      onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)\n    })\n  }\n\n  const showBankAccountForm = watchedType === PAYMENT_METHODS.directDeposit\n\n  return (\n    <section className={className}>\n      <FormProvider {...formMethods}>\n        <Form onSubmit={formMethods.handleSubmit(onSubmit)}>\n          <Flex gap={32} flexDirection={'column'}>\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <PaymentTypeForm />\n            {showBankAccountForm && <BankAccountForm bankAccount={bankAccount} />}\n            <ActionsLayout>\n              <Components.Button\n                type=\"submit\"\n                variant=\"primary\"\n                isDisabled={paymentMethodPending || bankAccountPending || isPaymentMethodPending}\n              >\n                {t('continueCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </FormProvider>\n    </section>\n  )\n}\n"],"names":["PaymentMethodSchema","z","routingNumberValidation","PaymentMethod","props","jsx","BaseComponent","Root","contractorId","className","dictionary","useComponentDictionary","useI18n","t","useTranslation","onEvent","baseSubmitHandler","useBase","Components","useComponentContext","queryClient","useQueryClient","gustoClient","useGustoEmbeddedContext","isPaymentMethodPending","setIsPaymentMethodPending","useState","contractorPaymentMethod","useContractorPaymentMethodGetSuspense","getPaymentMethodQuery","buildContractorPaymentMethodGetQuery","paymentMethod","contractorBankAccountList","useContractorPaymentMethodGetBankAccountsSuspense","bankAccount","updatePaymentMethod","paymentMethodPending","useContractorPaymentMethodUpdateMutation","createBankAccount","bankAccountPending","useContractorPaymentMethodsCreateBankAccountMutation","defaultValues","useMemo","PAYMENT_METHODS","formMethods","useForm","zodResolver","watchedType","useWatch","onSubmit","data","payload","updatedPaymentMethodVersion","name","accountNumber","routingNumber","accountType","accountNumberValidation","bankAccountResponse","componentEvents","updatedPaymentMethod","paymentMethodResponse","showBankAccountForm","FormProvider","Form","jsxs","Flex","PaymentTypeForm","BankAccountForm","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../src/components/Contractor/PaymentMethod/PaymentMethod.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport type { PaymentMethodProps } from './types'\nimport {\n  useContractorPaymentMethodForm,\n  type ContractorPaymentMethodFormType,\n} from './shared/useContractorPaymentMethodForm'\nimport { useContractorBankAccountForm } from './shared/useContractorBankAccountForm'\nimport styles from './PaymentMethod.module.scss'\nimport { useI18n } from '@/i18n'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, PAYMENT_METHODS } from '@/shared/constants'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { composeSubmitHandler } from '@/partner-hook-utils/form/composeSubmitHandler'\nimport { ActionsLayout } from '@/components/Common/ActionsLayout'\nimport { Flex } from '@/components/Common'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\n\n/**\n * Manages a contractor's payment method, capturing a bank account for direct deposit or recording check as the payment method.\n *\n * Displays the current payment type, lets the user switch between direct deposit and check, and\n * collects bank account details (account holder name, routing number, account number, and account\n * type) when direct deposit is selected. Direct deposit creates the bank account (which updates the\n * payment method server-side); check updates the contractor's payment method type directly.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/bankAccount/created` | Fired on the direct deposit path after the bank account is created | The created bank account at `.contractorBankAccount` |\n * | `contractor/paymentMethod/updated` | Fired on the check path after the payment method type is updated | The updated payment method at `.contractorPaymentMethod` |\n * | `contractor/paymentMethod/done` | Fired when the payment method step completes | — |\n *\n * @param props - Component configuration; see {@link PaymentMethodProps}.\n * @returns The rendered payment method form.\n * @public\n *\n * @example\n * ```tsx\n * import { ContractorOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function PaymentMethodStep() {\n *   return (\n *     <ContractorOnboarding.PaymentMethod\n *       contractorId=\"contractor-uuid\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({ dictionary, ...props }: PaymentMethodProps) {\n  useComponentDictionary('Contractor.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries componentName=\"Contractor.PaymentMethod\">\n      <Root {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction Root({ contractorId, className, onEvent }: Omit<PaymentMethodProps, 'dictionary'>) {\n  useI18n('Contractor.PaymentMethod')\n  const { t } = useTranslation('Contractor.PaymentMethod')\n  const Components = useComponentContext()\n\n  const paymentMethodForm = useContractorPaymentMethodForm({\n    contractorId,\n    shouldFocusError: false,\n  })\n  const bankAccountForm = useContractorBankAccountForm({\n    contractorId,\n    shouldFocusError: false,\n  })\n\n  if (paymentMethodForm.isLoading || bankAccountForm.isLoading) {\n    const loadingErrorHandling = composeErrorHandler([paymentMethodForm, bankAccountForm])\n    return <BaseLayout isLoading error={loadingErrorHandling.errors} />\n  }\n\n  const isDirectDeposit = paymentMethodForm.status.isDirectDeposit\n  const { Type } = paymentMethodForm.form.Fields\n  const { Name, RoutingNumber, AccountNumber, AccountType } = bankAccountForm.form.Fields\n\n  // Direct Deposit always submits the bank account (which sets the payment\n  // method server-side); Check updates the payment method type directly. The\n  // account number is pre-filled with the masked token, which the API treats as\n  // \"keep the existing account,\" so an unchanged submit preserves it while a\n  // newly typed number replaces it.\n  const submitDirectDeposit = async () => {\n    const result = await bankAccountForm.actions.onSubmit()\n    if (!result) return\n    onEvent(componentEvents.CONTRACTOR_BANK_ACCOUNT_CREATED, {\n      contractorBankAccount: result.data,\n    })\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)\n  }\n\n  const submitCheck = async () => {\n    const result = await paymentMethodForm.actions.onSubmit()\n    if (!result) return\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_UPDATED, {\n      contractorPaymentMethod: result.data,\n    })\n    onEvent(componentEvents.CONTRACTOR_PAYMENT_METHOD_DONE)\n  }\n\n  const { handleSubmit, errorHandling } = isDirectDeposit\n    ? composeSubmitHandler([paymentMethodForm, bankAccountForm], submitDirectDeposit)\n    : composeSubmitHandler([paymentMethodForm], submitCheck)\n\n  const isPending = paymentMethodForm.status.isPending || bankAccountForm.status.isPending\n\n  const TypeFieldComponent = (radioProps: RadioGroupProps) => (\n    <Components.RadioGroup\n      {...radioProps}\n      shouldVisuallyHideLabel\n      options={radioProps.options.map(option => ({\n        ...option,\n        description:\n          option.value === PAYMENT_METHODS.directDeposit\n            ? t('directDepositDescription')\n            : t('checkDescription'),\n      }))}\n    />\n  )\n\n  return (\n    <section className={classNames(styles.root, className)}>\n      <BaseLayout error={errorHandling.errors}>\n        <Form onSubmit={handleSubmit}>\n          <Flex gap={32} flexDirection=\"column\">\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <Type\n              label={t('paymentFieldsetLegend')}\n              getOptionLabel={(value: ContractorPaymentMethodFormType) =>\n                value === PAYMENT_METHODS.directDeposit ? t('directDepositLabel') : t('checkLabel')\n              }\n              FieldComponent={TypeFieldComponent}\n              formHookResult={paymentMethodForm}\n            />\n            {isDirectDeposit && (\n              <>\n                <Name\n                  label={t('bankAccountForm.nameLabel')}\n                  validationMessages={{ REQUIRED: t('bankAccountForm.validations.accountName') }}\n                  formHookResult={bankAccountForm}\n                />\n                <RoutingNumber\n                  label={t('bankAccountForm.routingNumberLabel')}\n                  description={t('bankAccountForm.routingNumberDescription')}\n                  validationMessages={{\n                    REQUIRED: t('bankAccountForm.validations.routingNumber'),\n                    INVALID_ROUTING_NUMBER: t('bankAccountForm.validations.routingNumber'),\n                  }}\n                  formHookResult={bankAccountForm}\n                />\n                <AccountNumber\n                  label={t('bankAccountForm.accountNumberLabel')}\n                  validationMessages={{\n                    REQUIRED: t('bankAccountForm.validations.accountNumber'),\n                    INVALID_ACCOUNT_NUMBER: t('bankAccountForm.validations.accountNumber'),\n                  }}\n                  formHookResult={bankAccountForm}\n                />\n                <AccountType\n                  label={t('bankAccountForm.accountTypeLabel')}\n                  getOptionLabel={(value: string) =>\n                    value === 'Checking'\n                      ? t('bankAccountForm.accountTypeChecking')\n                      : t('bankAccountForm.accountTypeSavings')\n                  }\n                  formHookResult={bankAccountForm}\n                />\n              </>\n            )}\n            <ActionsLayout>\n              <Components.Button type=\"submit\" variant=\"primary\" isDisabled={isPending}>\n                {t('continueCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Flex>\n        </Form>\n      </BaseLayout>\n    </section>\n  )\n}\n"],"names":["PaymentMethod","dictionary","props","useComponentDictionary","jsx","BaseBoundaries","Root","contractorId","className","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paymentMethodForm","useContractorPaymentMethodForm","bankAccountForm","useContractorBankAccountForm","loadingErrorHandling","composeErrorHandler","BaseLayout","isDirectDeposit","Type","Name","RoutingNumber","AccountNumber","AccountType","submitDirectDeposit","result","componentEvents","submitCheck","handleSubmit","errorHandling","composeSubmitHandler","isPending","TypeFieldComponent","radioProps","option","PAYMENT_METHODS","classNames","styles","Form","Flex","value","jsxs","Fragment","ActionsLayout"],"mappings":"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"}

package/dist/components/Contractor/PaymentMethod/PaymentMethod.module.scss.js

@@ -0,0 +1,8 @@
+const o = "_root_gqrwc_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};
+//# sourceMappingURL=PaymentMethod.module.scss.js.map

package/dist/components/Contractor/PaymentMethod/PaymentMethod.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethod.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/Contractor/PaymentMethod/shared/index.d.ts

@@ -0,0 +1,2 @@
+import "./types/i18next.d.ts"
+export * from './useContractorPaymentMethodForm';

package/dist/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/fields.d.ts

@@ -0,0 +1,93 @@
+import { ContractorAccountType, ContractorBankAccountErrorCodes } from './useContractorBankAccountFormSchema';
+import { TextInputHookFieldProps } from '../../../../../partner-hook-utils/form/fields/TextInputHookField';
+import { RadioGroupHookFieldProps } from '../../../../../partner-hook-utils/form/fields/RadioGroupHookField';
+import { HookFieldProps } from '../../../../../partner-hook-utils/types';
+/**
+ * Validation error code emitted by {@link useContractorBankAccountForm} fields
+ * that only emit `REQUIRED`.
+ *
+ * @public
+ */
+export type RequiredValidation = typeof ContractorBankAccountErrorCodes.REQUIRED;
+/**
+ * Validation error codes emitted by the `routingNumber` field of
+ * {@link useContractorBankAccountForm}.
+ *
+ * @public
+ */
+export type RoutingNumberValidation = (typeof ContractorBankAccountErrorCodes)[keyof Pick<typeof ContractorBankAccountErrorCodes, 'REQUIRED' | 'INVALID_ROUTING_NUMBER'>];
+/**
+ * Validation error codes emitted by the `accountNumber` field of
+ * {@link useContractorBankAccountForm}.
+ *
+ * @public
+ */
+export type AccountNumberValidation = (typeof ContractorBankAccountErrorCodes)[keyof Pick<typeof ContractorBankAccountErrorCodes, 'REQUIRED' | 'INVALID_ACCOUNT_NUMBER'>];
+/**
+ * Props accepted by {@link useContractorBankAccountForm}'s `Fields.Name` component.
+ *
+ * @public
+ */
+export type NameFieldProps = HookFieldProps<TextInputHookFieldProps<RequiredValidation>>;
+/**
+ * Text input bound to the `name` field of {@link useContractorBankAccountForm}.
+ *
+ * @remarks
+ * Surfaced to partners as `form.Fields.Name`; see {@link ContractorBankAccountFormFields}.
+ *
+ * @param props - See {@link NameFieldProps}.
+ * @returns The rendered text input bound to `name`.
+ * @internal
+ */
+export declare function NameField(props: NameFieldProps): import("react").JSX.Element;
+/**
+ * Props accepted by {@link useContractorBankAccountForm}'s `Fields.RoutingNumber` component.
+ *
+ * @public
+ */
+export type RoutingNumberFieldProps = HookFieldProps<TextInputHookFieldProps<RoutingNumberValidation>>;
+/**
+ * Text input bound to the `routingNumber` field of {@link useContractorBankAccountForm}.
+ *
+ * @remarks
+ * Surfaced to partners as `form.Fields.RoutingNumber`; see {@link ContractorBankAccountFormFields}.
+ *
+ * @param props - See {@link RoutingNumberFieldProps}.
+ * @returns The rendered text input bound to `routingNumber`.
+ * @internal
+ */
+export declare function RoutingNumberField(props: RoutingNumberFieldProps): import("react").JSX.Element;
+/**
+ * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountNumber` component.
+ *
+ * @public
+ */
+export type AccountNumberFieldProps = HookFieldProps<TextInputHookFieldProps<AccountNumberValidation>>;
+/**
+ * Text input bound to the `accountNumber` field of {@link useContractorBankAccountForm}.
+ *
+ * @remarks
+ * Surfaced to partners as `form.Fields.AccountNumber`; see {@link ContractorBankAccountFormFields}.
+ *
+ * @param props - See {@link AccountNumberFieldProps}.
+ * @returns The rendered text input bound to `accountNumber`.
+ * @internal
+ */
+export declare function AccountNumberField(props: AccountNumberFieldProps): import("react").JSX.Element;
+/**
+ * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountType` component.
+ *
+ * @public
+ */
+export type AccountTypeFieldProps = HookFieldProps<RadioGroupHookFieldProps<RequiredValidation, ContractorAccountType>>;
+/**
+ * Radio group bound to the `accountType` field of {@link useContractorBankAccountForm}.
+ *
+ * @remarks
+ * Surfaced to partners as `form.Fields.AccountType`; see {@link ContractorBankAccountFormFields}.
+ *
+ * @param props - See {@link AccountTypeFieldProps}.
+ * @returns The rendered radio group bound to `accountType`.
+ * @internal
+ */
+export declare function AccountTypeField(props: AccountTypeFieldProps): import("react").JSX.Element;

package/dist/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/fields.js

@@ -0,0 +1,22 @@
+import { jsx as n } from "react/jsx-runtime";
+import { TextInputHookField as o } from "../../../../../partner-hook-utils/form/fields/TextInputHookField.js";
+import { RadioGroupHookField as r } from "../../../../../partner-hook-utils/form/fields/RadioGroupHookField.js";
+function m(e) {
+  return /* @__PURE__ */ n(o, { ...e, name: "name" });
+}
+function c(e) {
+  return /* @__PURE__ */ n(o, { ...e, name: "routingNumber" });
+}
+function a(e) {
+  return /* @__PURE__ */ n(o, { ...e, name: "accountNumber" });
+}
+function p(e) {
+  return /* @__PURE__ */ n(r, { ...e, name: "accountType" });
+}
+export {
+  a as AccountNumberField,
+  p as AccountTypeField,
+  m as NameField,
+  c as RoutingNumberField
+};
+//# sourceMappingURL=fields.js.map

package/dist/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/fields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.js","sources":["../../../../../../src/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/fields.tsx"],"sourcesContent":["import type {\n  ContractorAccountType,\n  ContractorBankAccountErrorCodes,\n} from './useContractorBankAccountFormSchema'\nimport type { TextInputHookFieldProps } from '@/partner-hook-utils/form/fields/TextInputHookField'\nimport type { RadioGroupHookFieldProps } from '@/partner-hook-utils/form/fields/RadioGroupHookField'\nimport { TextInputHookField, RadioGroupHookField } from '@/partner-hook-utils/form/fields'\nimport type { HookFieldProps } from '@/partner-hook-utils/types'\n\n/**\n * Validation error code emitted by {@link useContractorBankAccountForm} fields\n * that only emit `REQUIRED`.\n *\n * @public\n */\nexport type RequiredValidation = typeof ContractorBankAccountErrorCodes.REQUIRED\n\n/**\n * Validation error codes emitted by the `routingNumber` field of\n * {@link useContractorBankAccountForm}.\n *\n * @public\n */\nexport type RoutingNumberValidation = (typeof ContractorBankAccountErrorCodes)[keyof Pick<\n  typeof ContractorBankAccountErrorCodes,\n  'REQUIRED' | 'INVALID_ROUTING_NUMBER'\n>]\n\n/**\n * Validation error codes emitted by the `accountNumber` field of\n * {@link useContractorBankAccountForm}.\n *\n * @public\n */\nexport type AccountNumberValidation = (typeof ContractorBankAccountErrorCodes)[keyof Pick<\n  typeof ContractorBankAccountErrorCodes,\n  'REQUIRED' | 'INVALID_ACCOUNT_NUMBER'\n>]\n\n/**\n * Props accepted by {@link useContractorBankAccountForm}'s `Fields.Name` component.\n *\n * @public\n */\nexport type NameFieldProps = HookFieldProps<TextInputHookFieldProps<RequiredValidation>>\n\n/**\n * Text input bound to the `name` field of {@link useContractorBankAccountForm}.\n *\n * @remarks\n * Surfaced to partners as `form.Fields.Name`; see {@link ContractorBankAccountFormFields}.\n *\n * @param props - See {@link NameFieldProps}.\n * @returns The rendered text input bound to `name`.\n * @internal\n */\nexport function NameField(props: NameFieldProps) {\n  return <TextInputHookField {...props} name=\"name\" />\n}\n\n/**\n * Props accepted by {@link useContractorBankAccountForm}'s `Fields.RoutingNumber` component.\n *\n * @public\n */\nexport type RoutingNumberFieldProps = HookFieldProps<\n  TextInputHookFieldProps<RoutingNumberValidation>\n>\n\n/**\n * Text input bound to the `routingNumber` field of {@link useContractorBankAccountForm}.\n *\n * @remarks\n * Surfaced to partners as `form.Fields.RoutingNumber`; see {@link ContractorBankAccountFormFields}.\n *\n * @param props - See {@link RoutingNumberFieldProps}.\n * @returns The rendered text input bound to `routingNumber`.\n * @internal\n */\nexport function RoutingNumberField(props: RoutingNumberFieldProps) {\n  return <TextInputHookField {...props} name=\"routingNumber\" />\n}\n\n/**\n * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountNumber` component.\n *\n * @public\n */\nexport type AccountNumberFieldProps = HookFieldProps<\n  TextInputHookFieldProps<AccountNumberValidation>\n>\n\n/**\n * Text input bound to the `accountNumber` field of {@link useContractorBankAccountForm}.\n *\n * @remarks\n * Surfaced to partners as `form.Fields.AccountNumber`; see {@link ContractorBankAccountFormFields}.\n *\n * @param props - See {@link AccountNumberFieldProps}.\n * @returns The rendered text input bound to `accountNumber`.\n * @internal\n */\nexport function AccountNumberField(props: AccountNumberFieldProps) {\n  return <TextInputHookField {...props} name=\"accountNumber\" />\n}\n\n/**\n * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountType` component.\n *\n * @public\n */\nexport type AccountTypeFieldProps = HookFieldProps<\n  RadioGroupHookFieldProps<RequiredValidation, ContractorAccountType>\n>\n\n/**\n * Radio group bound to the `accountType` field of {@link useContractorBankAccountForm}.\n *\n * @remarks\n * Surfaced to partners as `form.Fields.AccountType`; see {@link ContractorBankAccountFormFields}.\n *\n * @param props - See {@link AccountTypeFieldProps}.\n * @returns The rendered radio group bound to `accountType`.\n * @internal\n */\nexport function AccountTypeField(props: AccountTypeFieldProps) {\n  return <RadioGroupHookField {...props} name=\"accountType\" />\n}\n"],"names":["NameField","props","jsx","TextInputHookField","RoutingNumberField","AccountNumberField","AccountTypeField","RadioGroupHookField"],"mappings":";;;AAwDO,SAASA,EAAUC,GAAuB;AAC/C,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,QAAO;AACpD;AAqBO,SAASG,EAAmBH,GAAgC;AACjE,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,iBAAgB;AAC7D;AAqBO,SAASI,EAAmBJ,GAAgC;AACjE,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,iBAAgB;AAC7D;AAqBO,SAASK,EAAiBL,GAA8B;AAC7D,SAAO,gBAAAC,EAACK,GAAA,EAAqB,GAAGN,GAAO,MAAK,eAAc;AAC5D;"}

package/dist/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/index.d.ts

@@ -0,0 +1,5 @@
+import "./types/i18next.d.ts"
+export { useContractorBankAccountForm } from './useContractorBankAccountForm';
+export type { UseContractorBankAccountFormProps, UseContractorBankAccountFormResult, UseContractorBankAccountFormReady, ContractorBankAccountFormFields, ContractorBankAccountFieldsMetadata, } from './useContractorBankAccountForm';
+export { ContractorBankAccountErrorCodes, ACCOUNT_TYPES, createContractorBankAccountSchema, type ContractorBankAccountErrorCode, type ContractorAccountType, type ContractorBankAccountFormData, type ContractorBankAccountFormOutputs, type ContractorBankAccountFormField, type ContractorBankAccountOptionalFieldsToRequire, } from './useContractorBankAccountFormSchema';
+export { type RequiredValidation as ContractorBankAccountRequiredValidation, type RoutingNumberValidation as ContractorBankAccountRoutingNumberValidation, type AccountNumberValidation as ContractorBankAccountAccountNumberValidation, type NameFieldProps, type RoutingNumberFieldProps, type AccountNumberFieldProps, type AccountTypeFieldProps, } from './fields';

package/dist/components/Contractor/PaymentMethod/shared/useContractorBankAccountForm/useContractorBankAccountForm.d.ts

@@ -0,0 +1,127 @@
+import { ComponentType } from 'react';
+import { UseFormProps } from 'react-hook-form';
+import { ContractorBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorbankaccount';
+import { ContractorBankAccountFormData, ContractorBankAccountOptionalFieldsToRequire } from './useContractorBankAccountFormSchema';
+import { AccountNumberFieldProps, AccountTypeFieldProps, NameFieldProps, RoutingNumberFieldProps } from './fields';
+import { BaseFormHookReady, FieldsMetadata, HookLoadingResult, HookSubmitResult } from '../../../../../partner-hook-utils/types';
+/**
+ * Props for {@link useContractorBankAccountForm}.
+ *
+ * @public
+ */
+export interface UseContractorBankAccountFormProps {
+    /** Contractor for whom to create the bank account. */
+    contractorId: string;
+    /** Override optional fields to be required. */
+    optionalFieldsToRequire?: ContractorBankAccountOptionalFieldsToRequire;
+    /** Pre-fill form values. The contractor's existing bank account is used when no override is supplied. */
+    defaultValues?: Partial<ContractorBankAccountFormData>;
+    /** When validation runs. Passed through to react-hook-form. Defaults to `'onSubmit'`. */
+    validationMode?: UseFormProps['mode'];
+    /** Auto-focus the first invalid field on submit. Set to `false` when using `composeSubmitHandler`. Defaults to `true`. */
+    shouldFocusError?: boolean;
+}
+/**
+ * Field components exposed by {@link useContractorBankAccountForm} on `form.Fields`.
+ *
+ * @public
+ */
+export interface ContractorBankAccountFormFields {
+    /** Bound to `name`. Captures the bank account nickname. */
+    Name: ComponentType<NameFieldProps>;
+    /** Bound to `routingNumber`. Validated against a 9-digit numeric pattern. */
+    RoutingNumber: ComponentType<RoutingNumberFieldProps>;
+    /**
+     * Bound to `accountNumber`. Pre-filled with the masked account number (e.g.
+     * "XXXX1207"), which is accepted unchanged to keep the existing account; a
+     * newly entered value is validated against the 1–17 digit numeric pattern.
+     */
+    AccountNumber: ComponentType<AccountNumberFieldProps>;
+    /**
+     * Bound to `accountType`. Options are `Checking` and `Savings`; defaults to
+     * `Checking`. Supply `getOptionLabel` to translate the option labels.
+     */
+    AccountType: ComponentType<AccountTypeFieldProps>;
+}
+/**
+ * Ready-state return value of {@link useContractorBankAccountForm}.
+ *
+ * @public
+ */
+export interface UseContractorBankAccountFormReady extends BaseFormHookReady<FieldsMetadata, ContractorBankAccountFormData, ContractorBankAccountFormFields> {
+    /** The contractor's current bank account, loaded from the API, if any. */
+    data: {
+        bankAccount: ContractorBankAccount | undefined;
+    };
+    /** `isPending` reflects the in-flight create mutation; `mode` is always `'create'`. */
+    status: {
+        isPending: boolean;
+        mode: 'create';
+    };
+    /** Submit the form. Returns the created bank account on success or `undefined` on validation/mutation failure. */
+    actions: {
+        onSubmit: () => Promise<HookSubmitResult<ContractorBankAccount> | undefined>;
+    };
+}
+/**
+ * Headless React Hook Form hook for creating a contractor's bank account.
+ *
+ * @remarks
+ * Captures the account nickname, routing number, account number, and account
+ * type. Creating a bank account also updates the contractor's payment method to
+ * Direct Deposit on the Gusto API as a side-effect, so the Direct Deposit path
+ * needs only this submit — no separate payment method update.
+ *
+ * When the contractor already has a bank account on file, the account number
+ * field is pre-filled with the masked token the API returns (e.g. "XXXX1207").
+ * The API requires `account_number` on every write and treats that exact masked
+ * value as "keep the existing account," so submitting it unchanged preserves the
+ * account while still applying any name/routing/type edits; typing a real number
+ * replaces it.
+ *
+ * @param props - See {@link UseContractorBankAccountFormProps}.
+ * @returns A loading-state result while data loads, or a {@link UseContractorBankAccountFormReady} once ready.
+ * @public
+ *
+ * @example
+ * ```tsx
+ * import { useContractorBankAccountForm, SDKFormProvider } from '@gusto/embedded-react-sdk'
+ *
+ * function AddBankAccount({ contractorId }: { contractorId: string }) {
+ *   const bankForm = useContractorBankAccountForm({ contractorId })
+ *
+ *   if (bankForm.isLoading) return null
+ *   const { Fields } = bankForm.form
+ *
+ *   return (
+ *     <SDKFormProvider formHookResult={bankForm}>
+ *       <form
+ *         onSubmit={e => {
+ *           e.preventDefault()
+ *           void bankForm.actions.onSubmit()
+ *         }}
+ *       >
+ *         <Fields.Name label="Account nickname" />
+ *         <Fields.RoutingNumber label="Routing number" />
+ *         <Fields.AccountNumber label="Account number" />
+ *         <Fields.AccountType label="Account type" />
+ *         <button type="submit" disabled={bankForm.status.isPending}>Save</button>
+ *       </form>
+ *     </SDKFormProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function useContractorBankAccountForm({ contractorId, optionalFieldsToRequire, defaultValues: partnerDefaults, validationMode, shouldFocusError, }: UseContractorBankAccountFormProps): HookLoadingResult | UseContractorBankAccountFormReady;
+/**
+ * Return type of {@link useContractorBankAccountForm} — a discriminated union on `isLoading`.
+ *
+ * @public
+ */
+export type UseContractorBankAccountFormResult = HookLoadingResult | UseContractorBankAccountFormReady;
+/**
+ * Per-field metadata exposed on `form.fieldsMetadata` for {@link useContractorBankAccountForm}.
+ *
+ * @public
+ */
+export type ContractorBankAccountFieldsMetadata = UseContractorBankAccountFormReady['form']['fieldsMetadata'];