@gusto/embedded-react-sdk 0.50.0 → 0.51.2

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

@@ -1,110 +1,112 @@
-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 { jsx as t, jsxs as u, Fragment as M } from "react/jsx-runtime";
+import { useTranslation as O } from "react-i18next";
+import L from "classnames";
+import { useContractorPaymentMethodForm as _ } from "./shared/useContractorPaymentMethodForm/useContractorPaymentMethodForm.js";
+import { useContractorBankAccountForm as H } from "./shared/useContractorBankAccountForm/useContractorBankAccountForm.js";
+import P from "./PaymentMethod.module.scss.js";
+import { useComponentDictionary as v, useI18n as B } from "../../../i18n/I18n.js";
+import { BaseBoundaries as U, BaseLayout as b } 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 { useComponentContext as I } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Form as x } from "../../Common/Form/Form.js";
+import { PAYMENT_METHODS as A, 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 { composeSubmitHandler as N } from "../../../partner-hook-utils/form/composeSubmitHandler.js";
+import { ActionsLayout as Y } from "../../Common/ActionsLayout/ActionsLayout.js";
+import { Flex as f } 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 }) });
+  return v("Contractor.PaymentMethod", i), /* @__PURE__ */ t(U, { componentName: "Contractor.PaymentMethod", children: /* @__PURE__ */ t(Q, { ...s }) });
 }
 function Q({ contractorId: i, className: s, onEvent: a }) {
-  v("Contractor.PaymentMethod");
-  const { t: o } = M("Contractor.PaymentMethod"), m = U(), r = L({
+  B("Contractor.PaymentMethod");
+  const { t: o } = O("Contractor.PaymentMethod"), m = I(), r = _({
     contractorId: i,
     shouldFocusError: !1
-  }), e = _({
+  }), e = H({
     contractorId: i,
     shouldFocusError: !1
   });
   if (r.isLoading || e.isLoading) {
     const n = S([r, e]);
-    return /* @__PURE__ */ t(p, { isLoading: !0, error: n.errors });
+    return /* @__PURE__ */ t(b, { 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 l = r.status.isDirectDeposit, { Type: D } = r.form.Fields, { Name: C, RoutingNumber: g, AccountNumber: h, AccountType: T } = e.form.Fields, F = 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 () => {
+  }, R = 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(
+  }, { handleSubmit: k, errorHandling: y } = l ? N([r, e], F) : N([r], R), d = r.status.isPending || e.status.isPending, E = (n) => /* @__PURE__ */ t(
     m.RadioGroup,
     {
       ...n,
       shouldVisuallyHideLabel: !0,
-      options: n.options.map((l) => ({
-        ...l,
-        description: l.value === b.directDeposit ? o("directDepositDescription") : o("checkDescription")
+      options: n.options.map((p) => ({
+        ...p,
+        description: p.value === A.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: [
+  return /* @__PURE__ */ t("section", { className: L(P.root, s), children: /* @__PURE__ */ t(b, { error: y.errors, children: /* @__PURE__ */ t(x, { onSubmit: k, children: /* @__PURE__ */ u(f, { gap: 32, flexDirection: "column", children: [
     /* @__PURE__ */ t(m.Heading, { as: "h2", children: o("title") }),
-    /* @__PURE__ */ t(
-      N,
-      {
-        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__ */ u(f, { flexDirection: "column", gap: 20, children: [
       /* @__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
+          label: o("paymentFieldsetLegend"),
+          getOptionLabel: (n) => n === A.directDeposit ? o("directDepositLabel") : o("checkLabel"),
+          FieldComponent: E,
+          formHookResult: r
         }
       ),
-      /* @__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
-        }
-      )
+      l && /* @__PURE__ */ u(M, { children: [
+        /* @__PURE__ */ t(
+          C,
+          {
+            label: o("bankAccountForm.nameLabel"),
+            validationMessages: { REQUIRED: o("bankAccountForm.validations.accountName") },
+            formHookResult: e
+          }
+        ),
+        /* @__PURE__ */ t(
+          g,
+          {
+            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(
+          h,
+          {
+            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") }) })
+    /* @__PURE__ */ t(Y, { children: /* @__PURE__ */ t(m.Button, { type: "submit", variant: "primary", isDisabled: d, children: o(d ? "submittingCta" : "continueCta") }) })
   ] }) }) }) });
 }
 export {

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 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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"}
+{"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            <Flex flexDirection=\"column\" gap={20}>\n              <Type\n                label={t('paymentFieldsetLegend')}\n                getOptionLabel={(value: ContractorPaymentMethodFormType) =>\n                  value === PAYMENT_METHODS.directDeposit\n                    ? t('directDepositLabel')\n                    : 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            </Flex>\n            <ActionsLayout>\n              <Components.Button type=\"submit\" variant=\"primary\" isDisabled={isPending}>\n                {isPending ? t('submittingCta') : 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","jsxs","value","Fragment","ActionsLayout"],"mappings":"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"}

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

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

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

@@ -29,16 +29,7 @@ export type AccountNumberValidation = (typeof ContractorBankAccountErrorCodes)[k
  * @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
- */
+/** @internal */
 export declare function NameField(props: NameFieldProps): import("react").JSX.Element;
 /**
  * Props accepted by {@link useContractorBankAccountForm}'s `Fields.RoutingNumber` component.
@@ -46,16 +37,7 @@ export declare function NameField(props: NameFieldProps): import("react").JSX.El
  * @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
- */
+/** @internal */
 export declare function RoutingNumberField(props: RoutingNumberFieldProps): import("react").JSX.Element;
 /**
  * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountNumber` component.
@@ -63,16 +45,7 @@ export declare function RoutingNumberField(props: RoutingNumberFieldProps): impo
  * @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
- */
+/** @internal */
 export declare function AccountNumberField(props: AccountNumberFieldProps): import("react").JSX.Element;
 /**
  * Props accepted by {@link useContractorBankAccountForm}'s `Fields.AccountType` component.
@@ -80,14 +53,5 @@ export declare function AccountNumberField(props: AccountNumberFieldProps): impo
  * @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
- */
+/** @internal */
 export declare function AccountTypeField(props: AccountTypeFieldProps): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
 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";
+import { TextInputHookField as o } from "../../../../../partner-hook-utils/form/fields/TextInputHookField.js";
 function m(e) {
   return /* @__PURE__ */ n(o, { ...e, name: "name" });
 }

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

@@ -1 +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;"}
+{"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/** @internal */\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/** @internal */\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/** @internal */\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/** @internal */\nexport function AccountTypeField(props: AccountTypeFieldProps) {\n  return <RadioGroupHookField {...props} name=\"accountType\" />\n}\n"],"names":["NameField","props","jsx","TextInputHookField","RoutingNumberField","AccountNumberField","AccountTypeField","RadioGroupHookField"],"mappings":";;;AA+CO,SAASA,EAAUC,GAAuB;AAC/C,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,QAAO;AACpD;AAYO,SAASG,EAAmBH,GAAgC;AACjE,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,iBAAgB;AAC7D;AAYO,SAASI,EAAmBJ,GAAgC;AACjE,SAAO,gBAAAC,EAACC,GAAA,EAAoB,GAAGF,GAAO,MAAK,iBAAgB;AAC7D;AAYO,SAASK,EAAiBL,GAA8B;AAC7D,SAAO,gBAAAC,EAACK,GAAA,EAAqB,GAAGN,GAAO,MAAK,eAAc;AAC5D;"}

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

@@ -1,5 +1,4 @@
-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 { ContractorBankAccountErrorCodes, ACCOUNT_TYPES, type ContractorBankAccountErrorCode, type ContractorAccountType, type ContractorBankAccountFormData, 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

@@ -1,9 +1,9 @@
 import { ComponentType } from 'react';
 import { UseFormProps } from 'react-hook-form';
-import { ContractorBankAccount } from '@gusto/embedded-api-v-2025-11-15/models/components/contractorbankaccount';
+import { ContractorBankAccount } from '@gusto/embedded-api/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';
+import { BaseFormHookReady, FieldMetadata, HookLoadingResult, HookSubmitResult } from '../../../../../partner-hook-utils/types';
 /**
  * Props for {@link useContractorBankAccountForm}.
  *
@@ -48,7 +48,7 @@ export interface ContractorBankAccountFormFields {
  *
  * @public
  */
-export interface UseContractorBankAccountFormReady extends BaseFormHookReady<FieldsMetadata, ContractorBankAccountFormData, ContractorBankAccountFormFields> {
+export interface UseContractorBankAccountFormReady extends BaseFormHookReady<ContractorBankAccountFieldsMetadata, ContractorBankAccountFormData, ContractorBankAccountFormFields> {
     /** The contractor's current bank account, loaded from the API, if any. */
     data: {
         bankAccount: ContractorBankAccount | undefined;
@@ -124,4 +124,5 @@ export type UseContractorBankAccountFormResult = HookLoadingResult | UseContract
  *
  * @public
  */
-export type ContractorBankAccountFieldsMetadata = UseContractorBankAccountFormReady['form']['fieldsMetadata'];
+export type ContractorBankAccountFieldsMetadata = { name: FieldMetadata; routingNumber: FieldMetadata; accountNumber: FieldMetadata; accountType: import("../../../../../partner-hook-utils/types").FieldMetadataWithOptions<"Checking" | "Savings">; };
+export {};

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

@@ -1,70 +1,74 @@
-import { useMemo as N } from "react";
-import { useForm as E } from "react-hook-form";
-import { zodResolver as P } from "@hookform/resolvers/zod";
-import { useContractorPaymentMethodGetBankAccounts as V } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodGetBankAccounts";
-import { useContractorPaymentMethodsCreateBankAccountMutation as H } from "@gusto/embedded-api-v-2025-11-15/react-query/contractorPaymentMethodsCreateBankAccount";
-import { createContractorBankAccountSchema as L, ACCOUNT_TYPES as g } from "./useContractorBankAccountFormSchema.js";
-import { AccountTypeField as O, AccountNumberField as R, RoutingNumberField as U, NameField as x } from "./fields.js";
-import { useDeriveFieldsMetadata as G } from "../../../../../partner-hook-utils/form/useDeriveFieldsMetadata.js";
-import { useHookFormInternals as I } from "../../../../../partner-hook-utils/form/useHookFormInternals.js";
-import { createGetFormSubmissionValues as q } from "../../../../../partner-hook-utils/form/getFormSubmissionValues.js";
-import { withOptions as z } from "../../../../../partner-hook-utils/form/withOptions.js";
-import { composeErrorHandler as K } from "../../../../../partner-hook-utils/composeErrorHandler.js";
-import { useBaseSubmit as Q } from "../../../../Base/useBaseSubmit.js";
-import { SDKInternalError as Y } from "../../../../../types/sdkError.js";
+import { useMemo as f } from "react";
+import { useForm as v } from "react-hook-form";
+import { zodResolver as E } from "@hookform/resolvers/zod";
+import { useContractorPaymentMethodGetBankAccounts as P } from "@gusto/embedded-api/react-query/contractorPaymentMethodGetBankAccounts";
+import { useContractorPaymentMethodsCreateBankAccountMutation as V } from "@gusto/embedded-api/react-query/contractorPaymentMethodsCreateBankAccount";
+import { createContractorBankAccountSchema as H, ACCOUNT_TYPES as N } from "./useContractorBankAccountFormSchema.js";
+import { AccountTypeField as L, AccountNumberField as O, RoutingNumberField as R, NameField as U } from "./fields.js";
+import { useDeriveFieldsMetadata as x } from "../../../../../partner-hook-utils/form/useDeriveFieldsMetadata.js";
+import { useHookFormInternals as G } from "../../../../../partner-hook-utils/form/useHookFormInternals.js";
+import { createGetFormSubmissionValues as I } from "../../../../../partner-hook-utils/form/getFormSubmissionValues.js";
+import { withOptions as q } from "../../../../../partner-hook-utils/form/withOptions.js";
+import { composeErrorHandler as z } from "../../../../../partner-hook-utils/composeErrorHandler.js";
+import { useBaseSubmit as K } from "../../../../Base/useBaseSubmit.js";
+import { SDKInternalError as Q } from "../../../../../types/sdkError.js";
+function Y(o) {
+  const n = N.map((t) => ({ value: t, label: t }));
+  return {
+    name: o.name,
+    routingNumber: o.routingNumber,
+    accountNumber: o.accountNumber,
+    accountType: q(o.accountType, n, [
+      ...N
+    ])
+  };
+}
 function at({
-  contractorId: m,
-  optionalFieldsToRequire: i,
-  defaultValues: o,
+  contractorId: o,
+  optionalFieldsToRequire: n,
+  defaultValues: t,
   validationMode: A = "onSubmit",
-  shouldFocusError: k = !0
+  shouldFocusError: g = !0
 }) {
-  const u = V({
-    contractorUuid: m
-  }), t = u.data?.contractorBankAccountList?.[0] ?? void 0, r = t?.hiddenAccountNumber ?? void 0, [s, y] = N(
-    () => L({
-      optionalFieldsToRequire: i,
+  const u = P({
+    contractorUuid: o
+  }), e = u.data?.contractorBankAccountList?.[0] ?? void 0, r = e?.hiddenAccountNumber ?? void 0, [m, k] = f(
+    () => H({
+      optionalFieldsToRequire: n,
       existingAccountNumberMask: r
     }),
-    [i, r]
-  ), d = N(
+    [n, r]
+  ), i = f(
     () => ({
-      name: o?.name ?? t?.name ?? "",
-      routingNumber: o?.routingNumber ?? t?.routingNumber ?? "",
-      accountNumber: o?.accountNumber ?? r ?? "",
-      accountType: o?.accountType ?? t?.accountType ?? "Checking"
+      name: t?.name ?? e?.name ?? "",
+      routingNumber: t?.routingNumber ?? e?.routingNumber ?? "",
+      accountNumber: t?.accountNumber ?? r ?? "",
+      accountType: t?.accountType ?? e?.accountType ?? "Checking"
     }),
-    [o, t, r]
-  ), n = E({
-    resolver: P(s),
+    [t, e, r]
+  ), c = v({
+    resolver: E(m),
     mode: A,
-    shouldFocusError: k,
-    defaultValues: d,
-    values: d,
+    shouldFocusError: g,
+    defaultValues: i,
+    values: i,
     resetOptions: { keepDirtyValues: !0 }
-  }), b = H(), B = b.isPending, {
-    baseSubmitHandler: F,
-    error: h,
+  }), s = V(), y = s.isPending, {
+    baseSubmitHandler: B,
+    error: F,
     setError: C
-  } = Q("ContractorBankAccountForm"), p = K([u], {
-    submitError: h,
+  } = K("ContractorBankAccountForm"), d = z([u], {
+    submitError: F,
     setSubmitError: C
-  }), S = g.map((e) => ({ value: e, label: e })), c = G(y, n.control), T = {
-    name: c.name,
-    routingNumber: c.routingNumber,
-    accountNumber: c.accountNumber,
-    accountType: z(c.accountType, S, [
-      ...g
-    ])
-  }, M = async () => {
-    let e;
-    return await new Promise((f) => {
-      n.handleSubmit(
-        async (v) => {
-          await F(v, async (a) => {
-            const l = await b.mutateAsync({
+  }), h = x(k, c.control), M = Y(h), S = async () => {
+    let b;
+    return await new Promise((l) => {
+      c.handleSubmit(
+        async (w) => {
+          await B(w, async (a) => {
+            const p = await s.mutateAsync({
               request: {
-                contractorUuid: m,
+                contractorUuid: o,
                 contractorBankAccountCreateRequestBody: {
                   name: a.name,
                   routingNumber: a.routingNumber,
@@ -73,33 +77,33 @@ function at({
                 }
               }
             });
-            if (!l.contractorBankAccount)
-              throw new Y("Bank account creation failed");
-            e = { mode: "create", data: l.contractorBankAccount };
-          }), f();
+            if (!p.contractorBankAccount)
+              throw new Q("Bank account creation failed");
+            b = { mode: "create", data: p.contractorBankAccount };
+          }), l();
         },
         () => {
-          f();
+          l();
         }
       )();
-    }), e;
-  }, w = I(n);
-  return u.isLoading ? { isLoading: !0, errorHandling: p } : {
+    }), b;
+  }, T = G(c);
+  return u.isLoading ? { isLoading: !0, errorHandling: d } : {
     isLoading: !1,
-    data: { bankAccount: t },
-    status: { isPending: B, mode: "create" },
-    actions: { onSubmit: M },
-    errorHandling: p,
+    data: { bankAccount: e },
+    status: { isPending: y, mode: "create" },
+    actions: { onSubmit: S },
+    errorHandling: d,
     form: {
       Fields: {
-        Name: x,
-        RoutingNumber: U,
-        AccountNumber: R,
-        AccountType: O
+        Name: U,
+        RoutingNumber: R,
+        AccountNumber: O,
+        AccountType: L
       },
-      fieldsMetadata: T,
-      hookFormInternals: w,
-      getFormSubmissionValues: q(n, s)
+      fieldsMetadata: M,
+      hookFormInternals: T,
+      getFormSubmissionValues: I(c, m)
     }
   };
 }