@gusto/embedded-react-sdk 0.52.2 → 0.54.0

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

@@ -0,0 +1,133 @@
+import { jsx as t, jsxs as l, Fragment as h } from "react/jsx-runtime";
+import { useState as T } from "react";
+import { useTranslation as D } from "react-i18next";
+import { Flex as M } from "../../../../Common/Flex/Flex.js";
+import { Loading as f } from "../../../../Common/Loading/Loading.js";
+import { HamburgerMenu as y } from "../../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseBoundaries as E, BaseLayout as b } from "../../../../Base/Base.js";
+import { useComponentContext as k } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as N } from "../../../../../i18n/I18n.js";
+import { PAYMENT_METHODS as _, componentEvents as d } from "../../../../../shared/constants.js";
+import v from "../../../../../assets/icons/plus-circle.svg.js";
+import P from "../../../../../assets/icons/trashcan.svg.js";
+import { useContractorPaymentMethodSummary as R } from "../../shared/useContractorPaymentMethodSummary/useContractorPaymentMethodSummary.js";
+import { useDataView as L } from "../../../../Common/DataView/useDataView.js";
+import { DataView as B } from "../../../../Common/DataView/DataView.js";
+function J({ LoaderComponent: i, ...a }) {
+  return /* @__PURE__ */ t(
+    E,
+    {
+      componentName: "Contractor.Management.PaymentMethod",
+      LoaderComponent: i,
+      children: /* @__PURE__ */ t(O, { LoaderComponent: i, ...a })
+    }
+  );
+}
+function O({
+  contractorId: i,
+  onEvent: a,
+  LoaderComponent: p
+}) {
+  N("Contractor.Management.PaymentMethod");
+  const { t: e } = D("Contractor.Management.PaymentMethod"), n = k(), o = R({ contractorId: i }), [g, c] = T(!1), u = o.isLoading, m = !o.isLoading && o.data.paymentMethod.type === _.directDeposit, s = o.isLoading ? void 0 : o.data.bankAccount, A = L({
+    data: s ? [s] : [],
+    columns: [
+      {
+        key: "name",
+        title: e("nicknameColumn"),
+        render: (r) => /* @__PURE__ */ l(h, { children: [
+          r.name,
+          /* @__PURE__ */ t(n.Text, { variant: "supporting", size: "sm", children: r.hiddenAccountNumber })
+        ] })
+      },
+      { key: "routingNumber", title: e("routingNumberColumn") },
+      { key: "accountType", title: e("accountTypeColumn") }
+    ],
+    itemMenu: () => /* @__PURE__ */ t(
+      y,
+      {
+        items: [
+          {
+            label: e("editCta"),
+            onClick: () => {
+              a(d.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_EDIT_REQUESTED, {
+                contractorId: i
+              });
+            }
+          },
+          {
+            label: e("removeBankAccountCta"),
+            onClick: () => {
+              c(!0);
+            },
+            icon: /* @__PURE__ */ t(P, { "aria-hidden": !0 })
+          }
+        ],
+        triggerLabel: e("hamburgerTitle")
+      }
+    )
+  }), C = async () => {
+    if (o.isLoading) return;
+    const r = await o.actions.onRemoveBankAccount();
+    c(!1), r && a(d.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_REMOVED, r.data);
+  };
+  return /* @__PURE__ */ l(b, { error: o.errorHandling.errors, LoaderComponent: p, children: [
+    /* @__PURE__ */ t(
+      n.Box,
+      {
+        withPadding: !m,
+        header: /* @__PURE__ */ t(
+          n.BoxHeader,
+          {
+            title: e("title"),
+            action: m ? void 0 : /* @__PURE__ */ t(
+              n.Button,
+              {
+                variant: "secondary",
+                icon: /* @__PURE__ */ t(v, {}),
+                isDisabled: u,
+                onClick: () => {
+                  a(
+                    d.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,
+                    {
+                      contractorId: i
+                    }
+                  );
+                },
+                children: e("addBankAccountCta")
+              }
+            )
+          }
+        ),
+        children: u ? /* @__PURE__ */ t(f, {}) : m ? /* @__PURE__ */ t(B, { label: e("bankAccountListLabel"), isWithinBox: !0, ...A }) : /* @__PURE__ */ l(M, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ t(n.Text, { variant: "supporting", children: e("paymentMethodLabel") }),
+          /* @__PURE__ */ t(n.Text, { children: e("checkLabel") })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ t(
+      n.Dialog,
+      {
+        isOpen: g,
+        onClose: () => {
+          c(!1);
+        },
+        onPrimaryActionClick: () => {
+          C();
+        },
+        isDestructive: !0,
+        isPrimaryActionLoading: !o.isLoading && o.status.isPending,
+        title: e("removeBankAccountDialog.title"),
+        primaryActionLabel: e("removeBankAccountDialog.confirmCta"),
+        closeActionLabel: e("removeBankAccountDialog.cancelCta"),
+        children: /* @__PURE__ */ t(n.Text, { children: e("removeBankAccountDialog.description", {
+          account: s?.hiddenAccountNumber ?? ""
+        }) })
+      }
+    )
+  ] });
+}
+export {
+  J as PaymentMethodCard
+};
+//# sourceMappingURL=PaymentMethodCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethodCard.js","sources":["../../../../../../src/components/Contractor/PaymentMethod/management/PaymentMethodCard/PaymentMethodCard.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useContractorPaymentMethodSummary } from '../../shared/useContractorPaymentMethodSummary'\nimport { DataView, useDataView, Loading } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, PAYMENT_METHODS, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\n/**\n * Props for {@link PaymentMethodCard}.\n *\n * @public\n */\nexport interface PaymentMethodCardProps {\n  /** The associated contractor identifier. */\n  contractorId: string\n  /** Event handler fired on card interactions. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone \"Payment\" card showing a contractor's payment method.\n *\n * @remarks\n * Fetches its own data and emits the management block's scoped events when\n * the user clicks the card's CTAs or confirms removing the bank account. The\n * card has no alert API — alert rendering is the orchestrator's\n * responsibility.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/management/paymentMethod/card/addRequested` | Fired when the user clicks \"Add bank account\" | `{ contractorId: string }` |\n * | `contractor/management/paymentMethod/card/editRequested` | Fired when the user chooses \"Edit\" from the bank account row menu | `{ contractorId: string }` |\n * | `contractor/management/paymentMethod/card/removed` | Fired after the bank account is removed and the payment method reverts to Check | The updated `ContractorPaymentMethod` entity |\n *\n * @param props - See {@link PaymentMethodCardProps}.\n * @returns The \"Payment\" card.\n * @public\n */\nexport function PaymentMethodCard({ LoaderComponent, ...props }: PaymentMethodCardProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Contractor.Management.PaymentMethod\"\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaymentMethodCardContent({\n  contractorId,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodCardProps) {\n  useI18n('Contractor.Management.PaymentMethod')\n  const { t } = useTranslation('Contractor.Management.PaymentMethod')\n  const Components = useComponentContext()\n  const summary = useContractorPaymentMethodSummary({ contractorId })\n  const [isRemoveDialogOpen, setIsRemoveDialogOpen] = useState(false)\n\n  const isLoading = summary.isLoading\n  const isDirectDeposit =\n    !summary.isLoading && summary.data.paymentMethod.type === PAYMENT_METHODS.directDeposit\n  const bankAccount = summary.isLoading ? undefined : summary.data.bankAccount\n\n  const dataViewProps = useDataView({\n    data: bankAccount ? [bankAccount] : [],\n    columns: [\n      {\n        key: 'name',\n        title: t('nicknameColumn'),\n        render: account => (\n          <>\n            {account.name}\n            <Components.Text variant=\"supporting\" size=\"sm\">\n              {account.hiddenAccountNumber}\n            </Components.Text>\n          </>\n        ),\n      },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n    ],\n    itemMenu: () => (\n      <HamburgerMenu\n        items={[\n          {\n            label: t('editCta'),\n            onClick: () => {\n              onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_EDIT_REQUESTED, {\n                contractorId,\n              })\n            },\n          },\n          {\n            label: t('removeBankAccountCta'),\n            onClick: () => {\n              setIsRemoveDialogOpen(true)\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n  })\n\n  const handleConfirmRemove = async () => {\n    if (summary.isLoading) return\n    const result = await summary.actions.onRemoveBankAccount()\n    setIsRemoveDialogOpen(false)\n    if (result) {\n      onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_REMOVED, result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={summary.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        withPadding={!isDirectDeposit}\n        header={\n          <Components.BoxHeader\n            title={t('title')}\n            action={\n              !isDirectDeposit ? (\n                <Components.Button\n                  variant=\"secondary\"\n                  icon={<PlusCircleIcon />}\n                  isDisabled={isLoading}\n                  onClick={() => {\n                    onEvent(\n                      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,\n                      {\n                        contractorId,\n                      },\n                    )\n                  }}\n                >\n                  {t('addBankAccountCta')}\n                </Components.Button>\n              ) : undefined\n            }\n          />\n        }\n      >\n        {isLoading ? (\n          <Loading />\n        ) : isDirectDeposit ? (\n          <DataView label={t('bankAccountListLabel')} isWithinBox {...dataViewProps} />\n        ) : (\n          <Flex flexDirection=\"column\" gap={0}>\n            <Components.Text variant=\"supporting\">{t('paymentMethodLabel')}</Components.Text>\n            <Components.Text>{t('checkLabel')}</Components.Text>\n          </Flex>\n        )}\n      </Components.Box>\n      <Components.Dialog\n        isOpen={isRemoveDialogOpen}\n        onClose={() => {\n          setIsRemoveDialogOpen(false)\n        }}\n        onPrimaryActionClick={() => {\n          void handleConfirmRemove()\n        }}\n        isDestructive\n        isPrimaryActionLoading={!summary.isLoading && summary.status.isPending}\n        title={t('removeBankAccountDialog.title')}\n        primaryActionLabel={t('removeBankAccountDialog.confirmCta')}\n        closeActionLabel={t('removeBankAccountDialog.cancelCta')}\n      >\n        <Components.Text>\n          {t('removeBankAccountDialog.description', {\n            account: bankAccount?.hiddenAccountNumber ?? '',\n          })}\n        </Components.Text>\n      </Components.Dialog>\n    </BaseLayout>\n  )\n}\n"],"names":["PaymentMethodCard","LoaderComponent","props","jsx","BaseBoundaries","PaymentMethodCardContent","contractorId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","summary","useContractorPaymentMethodSummary","isRemoveDialogOpen","setIsRemoveDialogOpen","useState","isLoading","isDirectDeposit","PAYMENT_METHODS","bankAccount","dataViewProps","useDataView","jsxs","Fragment","account","HamburgerMenu","componentEvents","TrashCanSvg","handleConfirmRemove","result","BaseLayout","PlusCircleIcon","Loading","DataView","Flex"],"mappings":"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"}

package/dist/components/Contractor/PaymentMethod/management/PaymentMethodCard/index.d.ts

@@ -0,0 +1 @@
+export { PaymentMethodCard, type PaymentMethodCardProps } from './PaymentMethodCard';

package/dist/components/Contractor/PaymentMethod/management/PaymentMethodComponents.d.ts

@@ -0,0 +1,12 @@
+import { FlowContextInterface } from '../../../Flow/useFlow';
+type PaymentMethodSuccessAlertCode = 'bankAccountAdded' | 'bankAccountRemoved';
+/** @internal */
+export interface PaymentMethodContextInterface extends FlowContextInterface {
+    contractorId?: string;
+    successAlert?: PaymentMethodSuccessAlertCode | null;
+}
+/** @internal */
+export declare function CardContextual(): import("react").JSX.Element;
+/** @internal */
+export declare function PaymentMethodEditFormContextual(): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import { PaymentMethodEditForm as u } from "./PaymentMethodEditForm.js";
+import { Flex as d } from "../../../Common/Flex/Flex.js";
+import { useFlow as e } from "../../../Flow/useFlow.js";
+import { useComponentContext as p } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ensureRequired as m } from "../../../../helpers/ensureRequired.js";
+import { componentEvents as f } from "../../../../shared/constants.js";
+import { PaymentMethodCard as C } from "./PaymentMethodCard/PaymentMethodCard.js";
+function _() {
+  const { contractorId: n, onEvent: o, successAlert: t, LoaderComponent: s } = e(), { t: a } = l("Contractor.Management.PaymentMethod"), c = p();
+  return /* @__PURE__ */ i(d, { flexDirection: "column", gap: 16, children: [
+    t ? /* @__PURE__ */ r(
+      c.Alert,
+      {
+        status: "success",
+        label: a(`alerts.${t}`),
+        onDismiss: () => {
+          o(f.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null);
+        }
+      }
+    ) : null,
+    /* @__PURE__ */ r(
+      C,
+      {
+        contractorId: m(n),
+        onEvent: o,
+        LoaderComponent: s
+      }
+    )
+  ] });
+}
+function y() {
+  const { contractorId: n, onEvent: o, LoaderComponent: t } = e();
+  return /* @__PURE__ */ r(
+    u,
+    {
+      contractorId: m(n),
+      onEvent: o,
+      LoaderComponent: t
+    }
+  );
+}
+export {
+  _ as CardContextual,
+  y as PaymentMethodEditFormContextual
+};
+//# sourceMappingURL=PaymentMethodComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Contractor/PaymentMethod/management/PaymentMethodComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { PaymentMethodEditForm } from './PaymentMethodEditForm'\nimport { PaymentMethodCard } from './PaymentMethodCard'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { componentEvents } from '@/shared/constants'\n\ntype PaymentMethodSuccessAlertCode = 'bankAccountAdded' | 'bankAccountRemoved'\n\n/** @internal */\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  contractorId?: string\n  successAlert?: PaymentMethodSuccessAlertCode | null\n}\n\n/** @internal */\nexport function CardContextual() {\n  const { contractorId, onEvent, successAlert, LoaderComponent } =\n    useFlow<PaymentMethodContextInterface>()\n  const { t } = useTranslation('Contractor.Management.PaymentMethod')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <PaymentMethodCard\n        contractorId={ensureRequired(contractorId)}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodEditFormContextual() {\n  const { contractorId, onEvent, LoaderComponent } = useFlow<PaymentMethodContextInterface>()\n  return (\n    <PaymentMethodEditForm\n      contractorId={ensureRequired(contractorId)}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["CardContextual","contractorId","onEvent","successAlert","LoaderComponent","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","PaymentMethodCard","ensureRequired","PaymentMethodEditFormContextual","PaymentMethodEditForm"],"mappings":";;;;;;;;;AAkBO,SAASA,IAAiB;AAC/B,QAAM,EAAE,cAAAC,GAAc,SAAAC,GAAS,cAAAC,GAAc,iBAAAC,EAAA,IAC3CC,EAAA,GACI,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC,GAC5DC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAR,IACC,gBAAAS;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUH,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQW,EAAgB,sDAAsD,IAAI;AAAA,QACpF;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,IACJ,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,cAAcC,EAAed,CAAY;AAAA,QACzC,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAGO,SAASY,IAAkC;AAChD,QAAM,EAAE,cAAAf,GAAc,SAAAC,GAAS,iBAAAE,EAAA,IAAoBC,EAAA;AACnD,SACE,gBAAAO;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,cAAcF,EAAed,CAAY;AAAA,MACzC,SAAAC;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Contractor/PaymentMethod/management/PaymentMethodEditForm.d.ts

@@ -0,0 +1,30 @@
+import { BaseComponentInterface } from '../../../Base';
+/**
+ * Props for {@link PaymentMethodEditForm}.
+ *
+ * @public
+ */
+export interface PaymentMethodEditFormProps extends BaseComponentInterface<'Contractor.Management.PaymentMethod'> {
+    /** The associated contractor identifier. */
+    contractorId: string;
+}
+/**
+ * Standalone bank-account form for a contractor's payment method.
+ *
+ * @remarks
+ * Renders fields for the account nickname, routing number, account number,
+ * and account type. Saving creates the bank account, which updates the
+ * contractor's payment method to Direct Deposit as a server-side effect. Save
+ * and Cancel both emit events so the parent can return to the read view.
+ *
+ * @events
+ * | Event | Description | Data |
+ * | ----- | ----------- | ---- |
+ * | `contractor/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully saved | The created `ContractorBankAccount` entity |
+ * | `contractor/management/paymentMethod/bankForm/cancelled` | Fired when the user clicks Cancel | — |
+ *
+ * @param input - See {@link PaymentMethodEditFormProps}.
+ * @returns The contractor payment method bank-account form.
+ * @public
+ */
+export declare function PaymentMethodEditForm({ FallbackComponent, LoaderComponent, ...props }: PaymentMethodEditFormProps): import("react").JSX.Element;

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

@@ -0,0 +1,57 @@
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import C from "classnames";
+import { useManagementBankAccountFieldsDictionary as A } from "./useFormDictionary.js";
+import N from "./PaymentMethodEditForm.module.scss.js";
+import { BaseBoundaries as f } from "../../../Base/Base.js";
+import "../../../Base/useBase.js";
+import { useI18n as u, useComponentDictionary as E } from "../../../../i18n/I18n.js";
+import { componentEvents as m } from "../../../../shared/constants.js";
+import { useComponentContext as T } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ContractorBankAccountFormBody as y } from "../shared/ContractorBankAccountFormBody/ContractorBankAccountFormBody.js";
+function H({
+  FallbackComponent: n,
+  LoaderComponent: o,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    f,
+    {
+      componentName: "Contractor.Management.PaymentMethod",
+      FallbackComponent: n,
+      LoaderComponent: o,
+      children: /* @__PURE__ */ t(_, { LoaderComponent: o, ...e })
+    }
+  );
+}
+function _({
+  contractorId: n,
+  className: o,
+  dictionary: e,
+  onEvent: r,
+  LoaderComponent: a
+}) {
+  u("Contractor.Management.PaymentMethod"), E("Contractor.Management.PaymentMethod", e);
+  const { t: i } = p("Contractor.Management.PaymentMethod"), c = T(), s = A();
+  return /* @__PURE__ */ d("section", { className: C(N.container, o), children: [
+    /* @__PURE__ */ t(c.Heading, { as: "h2", children: i("form.title") }),
+    /* @__PURE__ */ t(
+      y,
+      {
+        contractorId: n,
+        dictionary: s,
+        LoaderComponent: a,
+        onSaved: (M) => {
+          r(m.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, M);
+        },
+        onCancel: () => {
+          r(m.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED);
+        }
+      }
+    )
+  ] });
+}
+export {
+  H as PaymentMethodEditForm
+};
+//# sourceMappingURL=PaymentMethodEditForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethodEditForm.js","sources":["../../../../../src/components/Contractor/PaymentMethod/management/PaymentMethodEditForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { ContractorBankAccountFormBody } from '../shared/ContractorBankAccountFormBody'\nimport { useManagementBankAccountFieldsDictionary } from './useFormDictionary'\nimport styles from './PaymentMethodEditForm.module.scss'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n/**\n * Props for {@link PaymentMethodEditForm}.\n *\n * @public\n */\nexport interface PaymentMethodEditFormProps extends BaseComponentInterface<'Contractor.Management.PaymentMethod'> {\n  /** The associated contractor identifier. */\n  contractorId: string\n}\n\n/**\n * Standalone bank-account form for a contractor's payment method.\n *\n * @remarks\n * Renders fields for the account nickname, routing number, account number,\n * and account type. Saving creates the bank account, which updates the\n * contractor's payment method to Direct Deposit as a server-side effect. Save\n * and Cancel both emit events so the parent can return to the read view.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully saved | The created `ContractorBankAccount` entity |\n * | `contractor/management/paymentMethod/bankForm/cancelled` | Fired when the user clicks Cancel | — |\n *\n * @param input - See {@link PaymentMethodEditFormProps}.\n * @returns The contractor payment method bank-account form.\n * @public\n */\nexport function PaymentMethodEditForm({\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodEditFormProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Contractor.Management.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodEditFormRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaymentMethodEditFormRoot({\n  contractorId,\n  className,\n  dictionary,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodEditFormProps) {\n  useI18n('Contractor.Management.PaymentMethod')\n  useComponentDictionary('Contractor.Management.PaymentMethod', dictionary)\n  const { t } = useTranslation('Contractor.Management.PaymentMethod')\n  const Components = useComponentContext()\n  const bankAccountFieldsDictionary = useManagementBankAccountFieldsDictionary()\n\n  return (\n    <section className={classNames(styles.container, className)}>\n      <Components.Heading as=\"h2\">{t('form.title')}</Components.Heading>\n      <ContractorBankAccountFormBody\n        contractorId={contractorId}\n        dictionary={bankAccountFieldsDictionary}\n        LoaderComponent={LoaderComponent}\n        onSaved={data => {\n          onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, data)\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED)\n        }}\n      />\n    </section>\n  )\n}\n"],"names":["PaymentMethodEditForm","FallbackComponent","LoaderComponent","props","jsx","BaseBoundaries","PaymentMethodEditFormRoot","contractorId","className","dictionary","onEvent","useI18n","useComponentDictionary","t","useTranslation","Components","useComponentContext","bankAccountFieldsDictionary","useManagementBankAccountFieldsDictionary","classNames","styles","ContractorBankAccountFormBody","data","componentEvents"],"mappings":";;;;;;;;;;;AAuCO,SAASA,EAAsB;AAAA,EACpC,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAJ;AAAA,MACA,iBAAAC;AAAA,MAEA,UAAA,gBAAAE,EAACE,GAAA,EAA0B,iBAAAJ,GAAmC,GAAGC,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG9E;AAEA,SAASG,EAA0B;AAAA,EACjC,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAR;AACF,GAA+B;AAC7B,EAAAS,EAAQ,qCAAqC,GAC7CC,EAAuB,uCAAuCH,CAAU;AACxE,QAAM,EAAE,GAAAI,EAAA,IAAMC,EAAe,qCAAqC,GAC5DC,IAAaC,EAAA,GACbC,IAA8BC,EAAA;AAEpC,2BACG,WAAA,EAAQ,WAAWC,EAAWC,EAAO,WAAWZ,CAAS,GACxD,UAAA;AAAA,IAAA,gBAAAJ,EAACW,EAAW,SAAX,EAAmB,IAAG,MAAM,UAAAF,EAAE,YAAY,GAAE;AAAA,IAC7C,gBAAAT;AAAA,MAACiB;AAAA,MAAA;AAAA,QACC,cAAAd;AAAA,QACA,YAAYU;AAAA,QACZ,iBAAAf;AAAA,QACA,SAAS,CAAAoB,MAAQ;AACf,UAAAZ,EAAQa,EAAgB,0DAA0DD,CAAI;AAAA,QACxF;AAAA,QACA,UAAU,MAAM;AACd,UAAAZ,EAAQa,EAAgB,wDAAwD;AAAA,QAClF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

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

@@ -0,0 +1,8 @@
+const n = "_container_18572_1", t = {
+  container: n
+};
+export {
+  n as container,
+  t as default
+};
+//# sourceMappingURL=PaymentMethodEditForm.module.scss.js.map

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

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

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

@@ -0,0 +1,3 @@
+export { PaymentMethod, type PaymentMethodProps } from './PaymentMethod';
+export { PaymentMethodCard, type PaymentMethodCardProps } from './PaymentMethodCard';
+export { PaymentMethodEditForm, type PaymentMethodEditFormProps } from './PaymentMethodEditForm';

package/dist/components/Contractor/PaymentMethod/management/paymentMethodStateMachine.d.ts

@@ -0,0 +1,5 @@
+/** @internal */
+export declare const paymentMethodStateMachine: {
+    card: import('robot3').MachineState<any>;
+    editPaymentMethod: import('robot3').MachineState<any>;
+};

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

@@ -0,0 +1,61 @@
+import { state as T, transition as e, reduce as E } from "robot3";
+import { PaymentMethodEditFormContextual as M, CardContextual as n } from "./PaymentMethodComponents.js";
+import { componentEvents as A } from "../../../../shared/constants.js";
+const o = E(
+  (t) => ({
+    ...t,
+    component: n,
+    successAlert: null
+  })
+), _ = (t) => E((c) => ({
+  ...c,
+  component: n,
+  successAlert: t
+})), C = {
+  card: T(
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,
+      "editPaymentMethod",
+      E((t) => ({
+        ...t,
+        component: M,
+        successAlert: null
+      }))
+    ),
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_EDIT_REQUESTED,
+      "editPaymentMethod",
+      E((t) => ({
+        ...t,
+        component: M,
+        successAlert: null
+      }))
+    ),
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_REMOVED,
+      "card",
+      _("bankAccountRemoved")
+    ),
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED,
+      "card",
+      o
+    )
+  ),
+  editPaymentMethod: T(
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED,
+      "card",
+      _("bankAccountAdded")
+    ),
+    e(
+      A.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED,
+      "card",
+      o
+    )
+  )
+};
+export {
+  C as paymentMethodStateMachine
+};
+//# sourceMappingURL=paymentMethodStateMachine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Contractor/PaymentMethod/management/paymentMethodStateMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { ComponentType } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport { CardContextual, PaymentMethodEditFormContextual } from './PaymentMethodComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\nconst returnToCard = reduce(\n  (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: CardContextual as ComponentType,\n    successAlert: null,\n  }),\n)\n\nconst returnToCardWithAlert = (alert: PaymentMethodContextInterface['successAlert']) =>\n  reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n    ...ctx,\n    component: CardContextual as ComponentType,\n    successAlert: alert,\n  }))\n\n/** @internal */\nexport const paymentMethodStateMachine = {\n  card: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED,\n      'editPaymentMethod',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodEditFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_EDIT_REQUESTED,\n      'editPaymentMethod',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: PaymentMethodEditFormContextual as ComponentType,\n        successAlert: null,\n      })),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_CARD_REMOVED,\n      'card',\n      returnToCardWithAlert('bankAccountRemoved'),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED,\n      'card',\n      returnToCard,\n    ),\n  ),\n  editPaymentMethod: state<MachineTransition>(\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED,\n      'card',\n      returnToCardWithAlert('bankAccountAdded'),\n    ),\n    transition(\n      componentEvents.CONTRACTOR_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED,\n      'card',\n      returnToCard,\n    ),\n  ),\n}\n"],"names":["returnToCard","reduce","ctx","CardContextual","returnToCardWithAlert","alert","paymentMethodStateMachine","state","transition","componentEvents","PaymentMethodEditFormContextual"],"mappings":";;;AAOA,MAAMA,IAAeC;AAAA,EACnB,CAACC,OAAuE;AAAA,IACtE,GAAGA;AAAA,IACH,WAAWC;AAAA,IACX,cAAc;AAAA,EAAA;AAElB,GAEMC,IAAwB,CAACC,MAC7BJ,EAAO,CAACC,OAAuE;AAAA,EAC7E,GAAGA;AAAA,EACH,WAAWC;AAAA,EACX,cAAcE;AAChB,EAAE,GAGSC,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWQ;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAR,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWQ;AAAA,QACX,cAAc;AAAA,MAAA,EACd;AAAA,IAAA;AAAA,IAEJF;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,oBAAoB;AAAA,IAAA;AAAA,IAE5CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,mBAAmBO;AAAA,IACjBC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAL,EAAsB,kBAAkB;AAAA,IAAA;AAAA,IAE1CI;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAT;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/Contractor/PaymentMethod/management/useFormDictionary.d.ts

@@ -0,0 +1,11 @@
+import { ContractorBankAccountFieldsDictionary } from '../shared/ContractorBankAccountFields';
+/**
+ * Resolves the shared `ContractorBankAccountFields`/`ContractorBankAccountFormBody`
+ * text against management's existing `Contractor.Management.PaymentMethod`
+ * namespace (`form.*`). Management's `form.validations.accountNumber` covers both
+ * required and invalid-format cases today, so both shared validation keys map
+ * onto it here to keep the displayed message unchanged.
+ *
+ * @internal
+ */
+export declare function useManagementBankAccountFieldsDictionary(): ContractorBankAccountFieldsDictionary;

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

@@ -0,0 +1,33 @@
+import { useMemo as o } from "react";
+import { useTranslation as e } from "react-i18next";
+import { useI18n as n } from "../../../../i18n/I18n.js";
+function c() {
+  n("Contractor.Management.PaymentMethod");
+  const { t: a } = e("Contractor.Management.PaymentMethod");
+  return o(
+    () => ({
+      en: {
+        nameLabel: a("form.nameLabel"),
+        routingNumberLabel: a("form.routingNumberLabel"),
+        routingNumberDescription: a("form.routingNumberDescription"),
+        accountNumberLabel: a("form.accountNumberLabel"),
+        accountTypeLabel: a("form.accountTypeLabel"),
+        accountTypeChecking: a("form.accountTypeChecking"),
+        accountTypeSavings: a("form.accountTypeSavings"),
+        cancelCta: a("form.cancelCta"),
+        saveCta: a("form.saveCta"),
+        validations: {
+          accountName: a("form.validations.name"),
+          routingNumber: a("form.validations.routingNumber"),
+          accountNumber: a("form.validations.accountNumber"),
+          accountNumberFormat: a("form.validations.accountNumber")
+        }
+      }
+    }),
+    [a]
+  );
+}
+export {
+  c as useManagementBankAccountFieldsDictionary
+};
+//# sourceMappingURL=useFormDictionary.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormDictionary.js","sources":["../../../../../src/components/Contractor/PaymentMethod/management/useFormDictionary.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ContractorBankAccountFieldsDictionary } from '../shared/ContractorBankAccountFields'\nimport { useI18n } from '@/i18n'\n\n/**\n * Resolves the shared `ContractorBankAccountFields`/`ContractorBankAccountFormBody`\n * text against management's existing `Contractor.Management.PaymentMethod`\n * namespace (`form.*`). Management's `form.validations.accountNumber` covers both\n * required and invalid-format cases today, so both shared validation keys map\n * onto it here to keep the displayed message unchanged.\n *\n * @internal\n */\nexport function useManagementBankAccountFieldsDictionary(): ContractorBankAccountFieldsDictionary {\n  useI18n('Contractor.Management.PaymentMethod')\n  const { t } = useTranslation('Contractor.Management.PaymentMethod')\n\n  return useMemo<ContractorBankAccountFieldsDictionary>(\n    () => ({\n      en: {\n        nameLabel: t('form.nameLabel'),\n        routingNumberLabel: t('form.routingNumberLabel'),\n        routingNumberDescription: t('form.routingNumberDescription'),\n        accountNumberLabel: t('form.accountNumberLabel'),\n        accountTypeLabel: t('form.accountTypeLabel'),\n        accountTypeChecking: t('form.accountTypeChecking'),\n        accountTypeSavings: t('form.accountTypeSavings'),\n        cancelCta: t('form.cancelCta'),\n        saveCta: t('form.saveCta'),\n        validations: {\n          accountName: t('form.validations.name'),\n          routingNumber: t('form.validations.routingNumber'),\n          accountNumber: t('form.validations.accountNumber'),\n          accountNumberFormat: t('form.validations.accountNumber'),\n        },\n      },\n    }),\n    [t],\n  )\n}\n"],"names":["useManagementBankAccountFieldsDictionary","useI18n","t","useTranslation","useMemo"],"mappings":";;;AAcO,SAASA,IAAkF;AAChG,EAAAC,EAAQ,qCAAqC;AAC7C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,qCAAqC;AAElE,SAAOC;AAAA,IACL,OAAO;AAAA,MACL,IAAI;AAAA,QACF,WAAWF,EAAE,gBAAgB;AAAA,QAC7B,oBAAoBA,EAAE,yBAAyB;AAAA,QAC/C,0BAA0BA,EAAE,+BAA+B;AAAA,QAC3D,oBAAoBA,EAAE,yBAAyB;AAAA,QAC/C,kBAAkBA,EAAE,uBAAuB;AAAA,QAC3C,qBAAqBA,EAAE,0BAA0B;AAAA,QACjD,oBAAoBA,EAAE,yBAAyB;AAAA,QAC/C,WAAWA,EAAE,gBAAgB;AAAA,QAC7B,SAASA,EAAE,cAAc;AAAA,QACzB,aAAa;AAAA,UACX,aAAaA,EAAE,uBAAuB;AAAA,UACtC,eAAeA,EAAE,gCAAgC;AAAA,UACjD,eAAeA,EAAE,gCAAgC;AAAA,UACjD,qBAAqBA,EAAE,gCAAgC;AAAA,QAAA;AAAA,MACzD;AAAA,IACF;AAAA,IAEF,CAACA,CAAC;AAAA,EAAA;AAEN;"}

package/dist/components/Contractor/PaymentMethod/{PaymentMethod.d.ts → onboarding/PaymentMethod.d.ts}

@@ -32,4 +32,4 @@ import { PaymentMethodProps } from './types';
  * }
  * ```
  */
-export declare function PaymentMethod({ dictionary, ...props }: PaymentMethodProps): import("react").JSX.Element;
+export declare function PaymentMethod({ dictionary, LoaderComponent, ...props }: PaymentMethodProps): import("react").JSX.Element;

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

@@ -0,0 +1,87 @@
+import { jsx as t, jsxs as f } from "react/jsx-runtime";
+import { useTranslation as F } from "react-i18next";
+import N from "classnames";
+import { useContractorPaymentMethodForm as P } from "../shared/useContractorPaymentMethodForm/useContractorPaymentMethodForm.js";
+import { useContractorBankAccountForm as _ } from "../shared/useContractorBankAccountForm/useContractorBankAccountForm.js";
+import { useOnboardingBankAccountFieldsDictionary as R } from "./useFormDictionary.js";
+import H from "./PaymentMethod.module.scss.js";
+import { useComponentDictionary as k, useI18n as B } from "../../../../i18n/I18n.js";
+import { BaseBoundaries as L, BaseLayout as D } from "../../../Base/Base.js";
+import "../../../Base/useBase.js";
+import { useComponentContext as x } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Form as S } from "../../../Common/Form/Form.js";
+import { PAYMENT_METHODS as h, componentEvents as a } from "../../../../shared/constants.js";
+import { composeErrorHandler as Y } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { composeSubmitHandler as C } from "../../../../partner-hook-utils/form/composeSubmitHandler.js";
+import { ActionsLayout as j } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { Flex as y } from "../../../Common/Flex/Flex.js";
+import { ContractorBankAccountFields as w } from "../shared/ContractorBankAccountFields/ContractorBankAccountFields.js";
+function io({ dictionary: s, LoaderComponent: c, ...e }) {
+  return k("Contractor.PaymentMethod", s), /* @__PURE__ */ t(L, { componentName: "Contractor.PaymentMethod", LoaderComponent: c, children: /* @__PURE__ */ t(U, { LoaderComponent: c, ...e }) });
+}
+function U({
+  contractorId: s,
+  className: c,
+  onEvent: e,
+  LoaderComponent: u
+}) {
+  B("Contractor.PaymentMethod");
+  const { t: n } = F("Contractor.PaymentMethod"), m = x(), r = P({
+    contractorId: s,
+    shouldFocusError: !1
+  }), i = _({
+    contractorId: s,
+    shouldFocusError: !1
+  }), T = R();
+  if (r.isLoading || i.isLoading) {
+    const o = Y([r, i]);
+    return /* @__PURE__ */ t(D, { isLoading: !0, error: o.errors, LoaderComponent: u });
+  }
+  const d = r.status.isDirectDeposit, { Type: A } = r.form.Fields, b = async () => {
+    const o = await i.actions.onSubmit();
+    o && (e(a.CONTRACTOR_BANK_ACCOUNT_CREATED, {
+      contractorBankAccount: o.data
+    }), e(a.CONTRACTOR_PAYMENT_METHOD_DONE));
+  }, O = async () => {
+    const o = await r.actions.onSubmit();
+    o && (e(a.CONTRACTOR_PAYMENT_METHOD_UPDATED, {
+      contractorPaymentMethod: o.data
+    }), e(a.CONTRACTOR_PAYMENT_METHOD_DONE));
+  }, { handleSubmit: g, errorHandling: M } = d ? C([r, i], b) : C([r], O), l = r.status.isPending || i.status.isPending, E = (o) => /* @__PURE__ */ t(
+    m.RadioGroup,
+    {
+      ...o,
+      shouldVisuallyHideLabel: !0,
+      options: o.options.map((p) => ({
+        ...p,
+        description: p.value === h.directDeposit ? n("directDepositDescription") : n("checkDescription")
+      }))
+    }
+  );
+  return /* @__PURE__ */ t("section", { className: N(H.root, c), children: /* @__PURE__ */ t(D, { error: M.errors, LoaderComponent: u, children: /* @__PURE__ */ t(S, { onSubmit: g, children: /* @__PURE__ */ f(y, { gap: 32, flexDirection: "column", children: [
+    /* @__PURE__ */ t(m.Heading, { as: "h2", children: n("title") }),
+    /* @__PURE__ */ f(y, { flexDirection: "column", gap: 20, children: [
+      /* @__PURE__ */ t(
+        A,
+        {
+          label: n("paymentFieldsetLegend"),
+          getOptionLabel: (o) => o === h.directDeposit ? n("directDepositLabel") : n("checkLabel"),
+          FieldComponent: E,
+          formHookResult: r
+        }
+      ),
+      d && /* @__PURE__ */ t(
+        w,
+        {
+          bankAccountForm: i,
+          dictionary: T
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(j, { children: /* @__PURE__ */ t(m.Button, { type: "submit", variant: "primary", isDisabled: l, children: n(l ? "submittingCta" : "continueCta") }) })
+  ] }) }) }) });
+}
+export {
+  io as PaymentMethod
+};
+//# sourceMappingURL=PaymentMethod.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Contractor/PaymentMethod/onboarding/PaymentMethod.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport {\n  useContractorPaymentMethodForm,\n  type ContractorPaymentMethodFormType,\n} from '../shared/useContractorPaymentMethodForm'\nimport { useContractorBankAccountForm } from '../shared/useContractorBankAccountForm'\nimport { ContractorBankAccountFields } from '../shared/ContractorBankAccountFields'\nimport type { PaymentMethodProps } from './types'\nimport { useOnboardingBankAccountFieldsDictionary } from './useFormDictionary'\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, LoaderComponent, ...props }: PaymentMethodProps) {\n  useComponentDictionary('Contractor.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries componentName=\"Contractor.PaymentMethod\" LoaderComponent={LoaderComponent}>\n      <Root LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction Root({\n  contractorId,\n  className,\n  onEvent,\n  LoaderComponent,\n}: 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  const bankAccountFieldsDictionary = useOnboardingBankAccountFieldsDictionary()\n\n  if (paymentMethodForm.isLoading || bankAccountForm.isLoading) {\n    const loadingErrorHandling = composeErrorHandler([paymentMethodForm, bankAccountForm])\n    return (\n      <BaseLayout isLoading error={loadingErrorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  const isDirectDeposit = paymentMethodForm.status.isDirectDeposit\n  const { Type } = paymentMethodForm.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} LoaderComponent={LoaderComponent}>\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                <ContractorBankAccountFields\n                  bankAccountForm={bankAccountForm}\n                  dictionary={bankAccountFieldsDictionary}\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","LoaderComponent","props","useComponentDictionary","jsx","BaseBoundaries","Root","contractorId","className","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paymentMethodForm","useContractorPaymentMethodForm","bankAccountForm","useContractorBankAccountForm","bankAccountFieldsDictionary","useOnboardingBankAccountFieldsDictionary","loadingErrorHandling","composeErrorHandler","BaseLayout","isDirectDeposit","Type","submitDirectDeposit","result","componentEvents","submitCheck","handleSubmit","errorHandling","composeSubmitHandler","isPending","TypeFieldComponent","radioProps","option","PAYMENT_METHODS","classNames","styles","Form","Flex","jsxs","value","ContractorBankAccountFields","ActionsLayout"],"mappings":"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"}

package/dist/components/Contractor/PaymentMethod/{types.d.ts → onboarding/types.d.ts}

@@ -1,4 +1,4 @@
-import { BaseComponentInterface } from '../../Base';
+import { BaseComponentInterface } from '../../../Base';
 /**
  * Props for the {@link PaymentMethod} component.
  *

package/dist/components/Contractor/PaymentMethod/onboarding/useFormDictionary.d.ts

@@ -0,0 +1,12 @@
+import { ContractorBankAccountFieldsDictionary } from '../shared/ContractorBankAccountFields';
+/**
+ * Resolves the shared `ContractorBankAccountFields`' text against onboarding's
+ * existing `Contractor.PaymentMethod` namespace (`bankAccountForm.*`), preserving
+ * backward compatibility for partners overriding the onboarding keys through the
+ * block's `dictionary` prop. Onboarding's `bankAccountForm.validations.accountNumber`
+ * covers both required and invalid-format cases today, so both shared validation
+ * keys map onto it here to keep the displayed message unchanged.
+ *
+ * @internal
+ */
+export declare function useOnboardingBankAccountFieldsDictionary(): ContractorBankAccountFieldsDictionary;