@gusto/embedded-react-sdk 0.52.1 → 0.53.0

package/dist/components/Employee/PaymentMethod/management/PaymentMethodBankForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodBankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodBankForm.tsx"],"sourcesContent":["import { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useManagementBankFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link PaymentMethodBankForm}.\n *\n * @public\n */\nexport interface PaymentMethodBankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on bank-form lifecycle events. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone bank-account form for the management flow.\n *\n * @remarks\n * Renders the shared bank-account form and emits per-component scoped events\n * when the form is submitted or cancelled. Reads its copy from the dedicated\n * `Employee.Management.PaymentMethodBankForm` namespace so partner overrides on\n * the management bank form don't leak into the onboarding form.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully created | The created bank account |\n * | `employee/management/paymentMethod/bankForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link PaymentMethodBankFormProps}.\n * @returns The bank-account form.\n * @public\n */\nexport function PaymentMethodBankForm({\n  employeeId,\n  onEvent,\n  ...hookProps\n}: PaymentMethodBankFormProps) {\n  const dictionary = useManagementBankFormDictionary()\n\n  return (\n    <BankFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["PaymentMethodBankForm","employeeId","onEvent","hookProps","dictionary","useManagementBankFormDictionary","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;AAqCO,SAASA,EAAsB;AAAA,EACpC,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,wDAAwDD,CAAI;AAAA,MACtF;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,sDAAsD;AAAA,MAChF;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"PaymentMethodBankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodBankForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useManagementBankFormDictionary } from './useFormDictionary'\nimport { Flex } from '@/components/Common/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/**\n * Props for {@link PaymentMethodBankForm}.\n *\n * @public\n */\nexport interface PaymentMethodBankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on bank-form lifecycle events. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone bank-account form for the management flow.\n *\n * @remarks\n * Renders the shared bank-account form and emits per-component scoped events\n * when the form is submitted or cancelled. Reads its copy from the dedicated\n * `Employee.Management.PaymentMethodBankForm` namespace so partner overrides on\n * the management bank form don't leak into the onboarding form.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/bankForm/submitted` | Fired after the bank account is successfully created | The created bank account |\n * | `employee/management/paymentMethod/bankForm/cancelled` | Fired when the user cancels the form | — |\n *\n * @param props - See {@link PaymentMethodBankFormProps}.\n * @returns The bank-account form.\n * @public\n */\nexport function PaymentMethodBankForm({\n  employeeId,\n  onEvent,\n  ...hookProps\n}: PaymentMethodBankFormProps) {\n  const dictionary = useManagementBankFormDictionary()\n  const { t } = useTranslation('Employee.Management.PaymentMethodBankForm')\n  const Components = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Components.Heading as=\"h1\" styledAs=\"h2\">\n        {t('title')}\n      </Components.Heading>\n      <BankFormBody\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onSaved={data => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, data)\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED)\n        }}\n        {...hookProps}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentMethodBankForm","employeeId","onEvent","hookProps","dictionary","useManagementBankFormDictionary","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;;;;AAwCO,SAASA,EAAsB;AAAA,EACpC,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA+B;AAC7B,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,2CAA2C,GAClEC,IAAaC,EAAA;AAEnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,EAAW,SAAX,EAAmB,IAAG,MAAK,UAAS,MAClC,UAAAF,EAAE,OAAO,EAAA,CACZ;AAAA,IACA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,YAAAZ;AAAA,QACA,YAAAG;AAAA,QACA,SAAS,CAAAU,MAAQ;AACf,UAAAZ,EAAQa,EAAgB,wDAAwDD,CAAI;AAAA,QACtF;AAAA,QACA,UAAU,MAAM;AACd,UAAAZ,EAAQa,EAAgB,sDAAsD;AAAA,QAChF;AAAA,QACC,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/onboarding/BankForm.js

@@ -1,25 +1,31 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useOnboardingBankFormDictionary as c } from "./useFormDictionary.js";
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { useOnboardingBankFormDictionary as d } from "./useFormDictionary.js";
+import { Flex as l } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as f } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { componentEvents as r } from "../../../../shared/constants.js";
-import { BankFormBody as e } from "../shared/BankFormBody/BankFormBody.js";
-function B({ employeeId: n, onEvent: o, ...m }) {
-  const t = c();
-  return /* @__PURE__ */ a(
-    e,
-    {
-      employeeId: n,
-      dictionary: t,
-      onSaved: (i) => {
-        o(r.EMPLOYEE_BANK_ACCOUNT_CREATED, i);
-      },
-      onCancel: () => {
-        o(r.CANCEL);
-      },
-      ...m
-    }
-  );
+import { BankFormBody as C } from "../shared/BankFormBody/BankFormBody.js";
+function F({ employeeId: t, onEvent: o, ...m }) {
+  const e = d(), { t: i } = p("Employee.PaymentMethod"), a = f();
+  return /* @__PURE__ */ c(l, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ n(a.Heading, { as: "h1", styledAs: "h2", children: i("addBankAccountFormTitle") }),
+    /* @__PURE__ */ n(
+      C,
+      {
+        employeeId: t,
+        dictionary: e,
+        onSaved: (s) => {
+          o(r.EMPLOYEE_BANK_ACCOUNT_CREATED, s);
+        },
+        onCancel: () => {
+          o(r.CANCEL);
+        },
+        ...m
+      }
+    )
+  ] });
 }
 export {
-  B as BankForm
+  F as BankForm
 };
 //# sourceMappingURL=BankForm.js.map

package/dist/components/Employee/PaymentMethod/onboarding/BankForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps) {\n  const dictionary = useOnboardingBankFormDictionary()\n\n  return (\n    <BankFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.CANCEL)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","dictionary","useOnboardingBankFormDictionary","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;AAaO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,+BAA+BD,CAAI;AAAA,MAC7D;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,MAAM;AAAA,MAChC;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}
+{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport { Flex } from '@/components/Common/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n/** @internal */\nexport interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps) {\n  const dictionary = useOnboardingBankFormDictionary()\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Components.Heading as=\"h1\" styledAs=\"h2\">\n        {t('addBankAccountFormTitle')}\n      </Components.Heading>\n      <BankFormBody\n        employeeId={employeeId}\n        dictionary={dictionary}\n        onSaved={data => {\n          onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.CANCEL)\n        }}\n        {...hookProps}\n      />\n    </Flex>\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","dictionary","useOnboardingBankFormDictionary","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;;;;AAgBO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA;AAEnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACJ,EAAW,SAAX,EAAmB,IAAG,MAAK,UAAS,MAClC,UAAAF,EAAE,yBAAyB,EAAA,CAC9B;AAAA,IACA,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,YAAAZ;AAAA,QACA,YAAAG;AAAA,QACA,SAAS,CAAAU,MAAQ;AACf,UAAAZ,EAAQa,EAAgB,+BAA+BD,CAAI;AAAA,QAC7D;AAAA,QACA,UAAU,MAAM;AACd,UAAAZ,EAAQa,EAAgB,MAAM;AAAA,QAChC;AAAA,QACC,GAAGZ;AAAA,MAAA;AAAA,IAAA;AAAA,EACN,GACF;AAEJ;"}

package/dist/components/Employee/PaymentMethod/onboarding/ListView.js

@@ -1,58 +1,62 @@
-import { jsx as e, jsxs as f, Fragment as M } from "react/jsx-runtime";
-import { useTranslation as O } from "react-i18next";
-import { useWatch as S } from "react-hook-form";
-import { usePaymentMethodList as Y } from "../shared/usePaymentMethodList.js";
-import { usePaymentMethodForm as w } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
-import { useDeleteBankAccount as H } from "../shared/useDeleteBankAccount.js";
-import { DeleteBankAccountDialog as F } from "../shared/DeleteBankAccountDialog.js";
-import { ActionsLayout as V } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { HamburgerMenu as x } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { Form as R } from "../../../Common/Form/Form.js";
-import { BaseLayout as g } from "../../../Base/Base.js";
-import { SDKFormProvider as U } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { composeErrorHandler as v } from "../../../../partner-hook-utils/composeErrorHandler.js";
-import { useComponentContext as K } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { centsToDollars as j } from "../../../../helpers/currencyHelpers.js";
-import I from "../../../../hooks/useNumberFormatter.js";
-import { componentEvents as m, SPLIT_BY as G, PAYMENT_METHODS as A } from "../../../../shared/constants.js";
-import W from "../../../../assets/icons/trashcan.svg.js";
-import { useDataView as q } from "../../../Common/DataView/useDataView.js";
-import { DataView as z } from "../../../Common/DataView/DataView.js";
-function Dt({ employeeId: c, isAdmin: r, onEvent: l }) {
-  const n = Y({ employeeId: c }), u = w({ employeeId: c }), a = v([n, u]);
-  return n.isLoading || u.isLoading ? /* @__PURE__ */ e(g, { isLoading: !0, error: a.errors }) : /* @__PURE__ */ e(
-    J,
+import { jsx as e, jsxs as d, Fragment as H } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import { useWatch as V } from "react-hook-form";
+import { usePaymentMethodList as R } from "../shared/usePaymentMethodList.js";
+import { usePaymentMethodForm as U } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
+import { useDeleteBankAccount as K } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as I } from "../shared/DeleteBankAccountDialog.js";
+import { useOnboardingBankFormDictionary as j } from "./useFormDictionary.js";
+import E from "./ListView.module.scss.js";
+import { Flex as W } from "../../../Common/Flex/Flex.js";
+import { ActionsLayout as b } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { HamburgerMenu as G } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseLayout as y } from "../../../Base/Base.js";
+import { SDKFormProvider as q } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { composeErrorHandler as z } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { useComponentContext as J } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { centsToDollars as Q } from "../../../../helpers/currencyHelpers.js";
+import X from "../../../../hooks/useNumberFormatter.js";
+import { componentEvents as l, SPLIT_BY as Z, PAYMENT_METHODS as u } from "../../../../shared/constants.js";
+import $ from "../../../../assets/icons/trashcan.svg.js";
+import { BankFormBody as tt } from "../shared/BankFormBody/BankFormBody.js";
+import { useDataView as et } from "../../../Common/DataView/useDataView.js";
+import { DataView as ot } from "../../../Common/DataView/DataView.js";
+function Pt({ employeeId: m, isAdmin: p, onEvent: i }) {
+  const c = R({ employeeId: m }), n = U({ employeeId: m }), f = z([c, n]);
+  return c.isLoading || n.isLoading ? /* @__PURE__ */ e(y, { isLoading: !0, error: f.errors }) : /* @__PURE__ */ e(
+    nt,
     {
-      employeeId: c,
-      isAdmin: r,
-      onEvent: l,
-      paymentMethodList: n,
-      paymentMethodForm: u,
-      errorHandling: a
+      employeeId: m,
+      isAdmin: p,
+      onEvent: i,
+      paymentMethodList: c,
+      paymentMethodForm: n,
+      errorHandling: f
     }
   );
 }
-function J({
-  isAdmin: c,
-  onEvent: r,
-  paymentMethodList: l,
+function nt({
+  employeeId: m,
+  isAdmin: p,
+  onEvent: i,
+  paymentMethodList: c,
   paymentMethodForm: n,
-  errorHandling: u
+  errorHandling: f
 }) {
-  const { paymentMethod: a, bankAccounts: d } = l.data, { deletePendingBankAccountUuid: h } = l.status, { t } = O("Employee.PaymentMethod"), s = K(), E = I(a.splitBy === "Amount" ? "currency" : "percent"), { Fields: C } = n.form, L = S({
+  const { paymentMethod: h, bankAccounts: s } = c.data, { deletePendingBankAccountUuid: k } = c.status, { t } = v("Employee.PaymentMethod"), a = J(), L = X(h.splitBy === "Amount" ? "currency" : "percent"), B = j(), { Fields: T } = n.form, D = V({
     control: n.form.hookFormInternals.formMethods.control,
     name: "type"
   }), {
-    pendingDeleteAccount: p,
-    setPendingDeleteAccount: D,
-    deletedAccountNumber: b,
-    setDeletedAccountNumber: y,
-    handleConfirmDelete: k
-  } = H(async (o) => {
-    const i = await l.actions.onDelete(o);
-    i && r(m.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
-  }), { ...T } = q({
-    data: d,
+    pendingDeleteAccount: A,
+    setPendingDeleteAccount: g,
+    deletedAccountNumber: C,
+    setDeletedAccountNumber: P,
+    handleConfirmDelete: N
+  } = K(async (o) => {
+    const r = await c.actions.onDelete(o);
+    r && i(l.EMPLOYEE_BANK_ACCOUNT_DELETED, r.data);
+  }), { ..._ } = et({
+    data: s,
     columns: [
       { key: "name", title: t("nicknameColumn") },
       { key: "routingNumber", title: t("routingNumberColumn") },
@@ -61,105 +65,135 @@ function J({
         key: "splitAmount",
         title: t("allocationColumn"),
         render: (o) => {
-          const i = a.splits?.find((_) => _.uuid === o.uuid)?.splitAmount ?? 0, N = a.splitBy === G.amount ? j(i) ?? 0 : i;
-          return E(N);
+          const r = h.splits?.find((x) => x.uuid === o.uuid)?.splitAmount ?? 0, Y = h.splitBy === Z.amount ? Q(r) ?? 0 : r;
+          return L(Y);
         }
       }
     ],
     itemMenu: (o) => /* @__PURE__ */ e(
-      x,
+      G,
       {
         items: [
           {
             label: t("deleteBankAccountCta"),
             onClick: () => {
-              D({
+              g({
                 uuid: o.uuid,
                 hiddenAccountNumber: o.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ e(W, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e($, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle")
       }
     )
-  }), P = (o) => /* @__PURE__ */ e(
-    s.RadioGroup,
+  }), M = (o) => /* @__PURE__ */ e(
+    a.RadioGroup,
     {
       ...o,
-      options: o.options.map((i) => ({
-        ...i,
-        description: i.value === A.directDeposit ? t(c ? "directDepositDescription" : "directDepositDescriptionSelf") : t(c ? "checkDescription" : "checkDescriptionSelf")
+      options: o.options.map((r) => ({
+        ...r,
+        description: r.value === u.directDeposit ? t(p ? "directDepositDescription" : "directDepositDescriptionSelf") : t(p ? "checkDescription" : "checkDescriptionSelf")
       }))
     }
-  ), B = async () => {
+  ), O = async () => {
     const o = await n.actions.onSubmit();
-    o && (r(m.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), r(m.EMPLOYEE_PAYMENT_METHOD_DONE));
-  };
-  return /* @__PURE__ */ f(M, { children: [
-    /* @__PURE__ */ e(g, { error: u.errors, children: /* @__PURE__ */ e(U, { formHookResult: n, children: /* @__PURE__ */ f(R, { onSubmit: B, children: [
-      b !== null && /* @__PURE__ */ e(
-        s.Alert,
+    o && (i(l.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), i(l.EMPLOYEE_PAYMENT_METHOD_DONE));
+  }, w = D === u.directDeposit && s.length === 0, F = D === u.check || s.length > 0, S = D === u.directDeposit && s.length > 0 ? /* @__PURE__ */ d(b, { children: [
+    s.length > 1 && /* @__PURE__ */ e(
+      a.Button,
+      {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          i(l.EMPLOYEE_SPLIT_PAYMENT);
+        },
+        children: t("splitCta")
+      }
+    ),
+    /* @__PURE__ */ e(
+      a.Button,
+      {
+        variant: "secondary",
+        type: "button",
+        onClick: () => {
+          i(l.EMPLOYEE_BANK_ACCOUNT_CREATE);
+        },
+        children: t("addAnotherCta")
+      }
+    )
+  ] }) : void 0;
+  return /* @__PURE__ */ d(H, { children: [
+    /* @__PURE__ */ e(y, { error: f.errors, children: /* @__PURE__ */ d(q, { formHookResult: n, children: [
+      C !== null && /* @__PURE__ */ e(
+        a.Alert,
         {
           status: "success",
-          label: t("deleteBankAccountSuccessAlert", { account: b }),
+          label: t("deleteBankAccountSuccessAlert", { account: C }),
           onDismiss: () => {
-            y(null);
+            P(null);
           },
           disableScrollIntoView: !0
         }
       ),
-      /* @__PURE__ */ e(s.Heading, { as: "h2", children: t("title") }),
-      /* @__PURE__ */ e(
-        C.Type,
-        {
-          label: t("paymentFieldsetLegend"),
-          getOptionLabel: (o) => o === A.directDeposit ? t("directDepositLabel") : t("checkLabel"),
-          FieldComponent: P
-        }
-      ),
-      d.length > 0 && /* @__PURE__ */ e(z, { label: t("bankAccountsListLabel"), ...T }),
-      /* @__PURE__ */ f(V, { children: [
-        d.length > 1 && /* @__PURE__ */ e(
-          s.Button,
+      /* @__PURE__ */ d(W, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ d(
+          a.FormBox,
           {
-            variant: "secondary",
-            type: "button",
-            onClick: () => {
-              r(m.EMPLOYEE_SPLIT_PAYMENT);
-            },
-            children: t("splitCta")
+            header: /* @__PURE__ */ e(a.FormBoxHeader, { title: t("title") }),
+            withPadding: !1,
+            footer: S,
+            children: [
+              /* @__PURE__ */ e("div", { className: E.section, children: /* @__PURE__ */ e(
+                T.Type,
+                {
+                  label: t("paymentFieldsetLegend"),
+                  getOptionLabel: (o) => o === u.directDeposit ? t("directDepositLabel") : t("checkLabel"),
+                  FieldComponent: M
+                }
+              ) }),
+              D === u.directDeposit && s.length > 0 && /* @__PURE__ */ e(ot, { isWithinBox: !0, label: t("bankAccountsListLabel"), ..._ }),
+              w && /* @__PURE__ */ e("div", { className: E.section, children: /* @__PURE__ */ e(
+                tt,
+                {
+                  employeeId: m,
+                  dictionary: B,
+                  onSaved: (o) => {
+                    i(l.EMPLOYEE_BANK_ACCOUNT_CREATED, o);
+                  }
+                }
+              ) })
+            ]
           }
         ),
-        L === A.directDeposit && /* @__PURE__ */ e(
-          s.Button,
+        F && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
+          a.Button,
           {
-            variant: "secondary",
             type: "button",
+            isLoading: n.status.isPending,
             onClick: () => {
-              r(m.EMPLOYEE_BANK_ACCOUNT_CREATE);
+              O();
             },
-            children: d.length > 0 ? t("addAnotherCta") : t("addBankAccountCta")
+            children: t("submitCta")
           }
-        ),
-        /* @__PURE__ */ e(s.Button, { type: "submit", isLoading: n.status.isPending, children: t("submitCta") })
+        ) })
       ] })
-    ] }) }) }),
+    ] }) }),
     /* @__PURE__ */ e(
-      F,
+      I,
       {
-        pendingDeleteAccount: p,
-        isPrimaryActionLoading: h === p?.uuid,
+        pendingDeleteAccount: A,
+        isPrimaryActionLoading: k === A?.uuid,
         onClose: () => {
-          D(null);
+          g(null);
         },
         onConfirm: () => {
-          k();
+          N();
         },
         title: t("deleteBankAccountDialog.title"),
         description: t("deleteBankAccountDialog.description", {
-          account: p?.hiddenAccountNumber ?? ""
+          account: A?.hiddenAccountNumber ?? ""
         }),
         confirmLabel: t("deleteBankAccountDialog.confirmCta"),
         cancelLabel: t("deleteBankAccountDialog.cancelCta")
@@ -168,6 +202,6 @@ function J({
   ] });
 }
 export {
-  Dt as ListView
+  Pt as ListView
 };
 //# sourceMappingURL=ListView.js.map

package/dist/components/Employee/PaymentMethod/onboarding/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n  usePaymentMethodForm,\n  type PaymentMethodType,\n  type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n\n  const { Fields } = paymentMethodForm.form\n  const watchedType = useWatch({\n    control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n    name: 'type',\n  })\n\n  const {\n    pendingDeleteAccount,\n    setPendingDeleteAccount,\n    deletedAccountNumber,\n    setDeletedAccountNumber,\n    handleConfirmDelete,\n  } = useDeleteBankAccount(async uuid => {\n    const result = await paymentMethodList.actions.onDelete(uuid)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n    }\n  })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        render: bankAccount => {\n          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\n        },\n      },\n    ],\n    itemMenu: bankAccount => (\n      <HamburgerMenu\n        items={[\n          {\n            label: t('deleteBankAccountCta'),\n            onClick: () => {\n              setPendingDeleteAccount({\n                uuid: bankAccount.uuid,\n                hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n              })\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n  })\n\n  const TypeFieldComponent = (props: RadioGroupProps) => (\n    <Components.RadioGroup\n      {...props}\n      options={props.options.map(option => ({\n        ...option,\n        description:\n          option.value === PAYMENT_METHODS.directDeposit\n            ? isAdmin\n              ? t('directDepositDescription')\n              : t('directDepositDescriptionSelf')\n            : isAdmin\n              ? t('checkDescription')\n              : t('checkDescriptionSelf'),\n      }))}\n    />\n  )\n\n  const handleSubmit = async () => {\n    const result = await paymentMethodForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n    }\n  }\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          <Form onSubmit={handleSubmit}>\n            {deletedAccountNumber !== null && (\n              <Components.Alert\n                status=\"success\"\n                label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n                onDismiss={() => {\n                  setDeletedAccountNumber(null)\n                }}\n                disableScrollIntoView\n              />\n            )}\n            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <Fields.Type\n              label={t('paymentFieldsetLegend')}\n              getOptionLabel={(value: PaymentMethodType) =>\n                value === PAYMENT_METHODS.directDeposit ? t('directDepositLabel') : t('checkLabel')\n              }\n              FieldComponent={TypeFieldComponent}\n            />\n            {bankAccounts.length > 0 && (\n              <DataView label={t('bankAccountsListLabel')} {...dataViewProps} />\n            )}\n            <ActionsLayout>\n              {bankAccounts.length > 1 && (\n                <Components.Button\n                  variant=\"secondary\"\n                  type=\"button\"\n                  onClick={() => {\n                    onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n                  }}\n                >\n                  {t('splitCta')}\n                </Components.Button>\n              )}\n              {watchedType === PAYMENT_METHODS.directDeposit && (\n                <Components.Button\n                  variant=\"secondary\"\n                  type=\"button\"\n                  onClick={() => {\n                    onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n                  }}\n                >\n                  {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n                </Components.Button>\n              )}\n              <Components.Button type=\"submit\" isLoading={paymentMethodForm.status.isPending}>\n                {t('submitCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Form>\n        </SDKFormProvider>\n      </BaseLayout>\n      <DeleteBankAccountDialog\n        pendingDeleteAccount={pendingDeleteAccount}\n        isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n        onClose={() => {\n          setPendingDeleteAccount(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDelete()\n        }}\n        title={t('deleteBankAccountDialog.title')}\n        description={t('deleteBankAccountDialog.description', {\n          account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n        })}\n        confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n        cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleSubmit","jsxs","Fragment","SDKFormProvider","Form","value","DataView","ActionsLayout","DeleteBankAccountDialog"],"mappings":"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"}
+{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n  usePaymentMethodForm,\n  type PaymentMethodType,\n  type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport styles from './ListView.module.scss'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  employeeId,\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n  const dictionary = useOnboardingBankFormDictionary()\n\n  const { Fields } = paymentMethodForm.form\n  const watchedType = useWatch({\n    control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n    name: 'type',\n  })\n\n  const {\n    pendingDeleteAccount,\n    setPendingDeleteAccount,\n    deletedAccountNumber,\n    setDeletedAccountNumber,\n    handleConfirmDelete,\n  } = useDeleteBankAccount(async uuid => {\n    const result = await paymentMethodList.actions.onDelete(uuid)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n    }\n  })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        render: bankAccount => {\n          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\n        },\n      },\n    ],\n    itemMenu: bankAccount => (\n      <HamburgerMenu\n        items={[\n          {\n            label: t('deleteBankAccountCta'),\n            onClick: () => {\n              setPendingDeleteAccount({\n                uuid: bankAccount.uuid,\n                hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n              })\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n  })\n\n  const TypeFieldComponent = (props: RadioGroupProps) => (\n    <Components.RadioGroup\n      {...props}\n      options={props.options.map(option => ({\n        ...option,\n        description:\n          option.value === PAYMENT_METHODS.directDeposit\n            ? isAdmin\n              ? t('directDepositDescription')\n              : t('directDepositDescriptionSelf')\n            : isAdmin\n              ? t('checkDescription')\n              : t('checkDescriptionSelf'),\n      }))}\n    />\n  )\n\n  const handleContinue = async () => {\n    const result = await paymentMethodForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n    }\n  }\n\n  const showInlineBankForm =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length === 0\n  const showContinue = watchedType === PAYMENT_METHODS.check || bankAccounts.length > 0\n\n  const footer =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 ? (\n      <ActionsLayout>\n        {bankAccounts.length > 1 && (\n          <Components.Button\n            variant=\"secondary\"\n            type=\"button\"\n            onClick={() => {\n              onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n            }}\n          >\n            {t('splitCta')}\n          </Components.Button>\n        )}\n        <Components.Button\n          variant=\"secondary\"\n          type=\"button\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n          }}\n        >\n          {t('addAnotherCta')}\n        </Components.Button>\n      </ActionsLayout>\n    ) : undefined\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          {deletedAccountNumber !== null && (\n            <Components.Alert\n              status=\"success\"\n              label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n              onDismiss={() => {\n                setDeletedAccountNumber(null)\n              }}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={20}>\n            <Components.FormBox\n              header={<Components.FormBoxHeader title={t('title')} />}\n              withPadding={false}\n              footer={footer}\n            >\n              <div className={styles.section}>\n                <Fields.Type\n                  label={t('paymentFieldsetLegend')}\n                  getOptionLabel={(value: PaymentMethodType) =>\n                    value === PAYMENT_METHODS.directDeposit\n                      ? t('directDepositLabel')\n                      : t('checkLabel')\n                  }\n                  FieldComponent={TypeFieldComponent}\n                />\n              </div>\n              {watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 && (\n                <DataView isWithinBox label={t('bankAccountsListLabel')} {...dataViewProps} />\n              )}\n              {showInlineBankForm && (\n                <div className={styles.section}>\n                  <BankFormBody\n                    employeeId={employeeId}\n                    dictionary={dictionary}\n                    onSaved={data => {\n                      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n                    }}\n                  />\n                </div>\n              )}\n            </Components.FormBox>\n            {showContinue && (\n              <ActionsLayout>\n                <Components.Button\n                  type=\"button\"\n                  isLoading={paymentMethodForm.status.isPending}\n                  onClick={() => {\n                    void handleContinue()\n                  }}\n                >\n                  {t('submitCta')}\n                </Components.Button>\n              </ActionsLayout>\n            )}\n          </Flex>\n        </SDKFormProvider>\n      </BaseLayout>\n      <DeleteBankAccountDialog\n        pendingDeleteAccount={pendingDeleteAccount}\n        isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n        onClose={() => {\n          setPendingDeleteAccount(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDelete()\n        }}\n        title={t('deleteBankAccountDialog.title')}\n        description={t('deleteBankAccountDialog.description', {\n          account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n        })}\n        confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n        cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","dictionary","useOnboardingBankFormDictionary","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleContinue","showInlineBankForm","showContinue","footer","ActionsLayout","jsxs","Fragment","SDKFormProvider","Flex","styles","value","DataView","BankFormBody","data","DeleteBankAccountDialog"],"mappings":"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"}

package/dist/components/Employee/PaymentMethod/onboarding/ListView.module.scss.js

@@ -0,0 +1,8 @@
+const s = "_section_ixb3q_1", t = {
+  section: s
+};
+export {
+  t as default,
+  s as section
+};
+//# sourceMappingURL=ListView.module.scss.js.map

package/dist/components/Employee/PaymentMethod/onboarding/ListView.module.scss.js.map

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

package/dist/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.d.ts

@@ -14,7 +14,7 @@ export interface BankFormBodyProps extends Omit<UseBankFormProps, 'employeeId'>
     dictionary?: BankFormBodyDictionary;
     /** Called with the created bank account after a successful submit. */
     onSaved: (bankAccount: EmployeeBankAccount) => void;
-    onCancel: () => void;
+    onCancel?: () => void;
 }
 /**
  * Shared bank-account form body. Owns the `useBankForm` composition, the field

package/dist/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.js

@@ -1,29 +1,28 @@
-import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import { useTranslation as b } from "react-i18next";
 import { useBankForm as g } from "../useBankForm/useBankForm.js";
 import { ActionsLayout as y } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as N } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { Form as f } from "../../../../Common/Form/Form.js";
-import { BaseLayout as m } from "../../../../Base/Base.js";
-import { SDKFormProvider as B } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { Form as N } from "../../../../Common/Form/Form.js";
+import { BaseLayout as s } from "../../../../Base/Base.js";
+import { SDKFormProvider as f } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as B } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as v, useComponentDictionary as L } from "../../../../../i18n/I18n.js";
-function A({
-  employeeId: s,
-  dictionary: u,
-  onSaved: c,
-  onCancel: l,
+function U({
+  employeeId: u,
+  dictionary: c,
+  onSaved: l,
+  onCancel: a,
   ...d
 }) {
-  v("Employee.BankFormBody"), L("Employee.BankFormBody", u);
-  const r = g({ employeeId: s, ...d }), { t: o } = b("Employee.BankFormBody"), a = N();
+  v("Employee.BankFormBody"), L("Employee.BankFormBody", c);
+  const r = g({ employeeId: u, ...d }), { t: o } = b("Employee.BankFormBody"), i = B();
   if (r.isLoading)
-    return /* @__PURE__ */ n(m, { isLoading: !0, error: r.errorHandling.errors });
+    return /* @__PURE__ */ n(s, { isLoading: !0, error: r.errorHandling.errors });
   const { Fields: t } = r.form, p = async () => {
     const e = await r.actions.onSubmit();
-    e && c(e.data);
+    e && l(e.data);
   };
-  return /* @__PURE__ */ n(m, { error: r.errorHandling.errors, children: /* @__PURE__ */ n(B, { formHookResult: r, children: /* @__PURE__ */ i(f, { onSubmit: p, children: [
+  return /* @__PURE__ */ n(s, { error: r.errorHandling.errors, children: /* @__PURE__ */ n(f, { formHookResult: r, children: /* @__PURE__ */ m(N, { onSubmit: p, children: [
     /* @__PURE__ */ n(
       t.Name,
       {
@@ -59,13 +58,13 @@ function A({
         getOptionLabel: (e) => o(e === "Checking" ? "accountTypeChecking" : "accountTypeSavings")
       }
     ),
-    /* @__PURE__ */ i(y, { children: [
-      /* @__PURE__ */ n(a.Button, { variant: "secondary", type: "button", onClick: l, children: o("cancelCta") }),
-      /* @__PURE__ */ n(a.Button, { type: "submit", isLoading: r.status.isPending, children: o("saveCta") })
+    /* @__PURE__ */ m(y, { children: [
+      a && /* @__PURE__ */ n(i.Button, { variant: "secondary", type: "button", onClick: a, children: o("cancelCta") }),
+      /* @__PURE__ */ n(i.Button, { type: "submit", isLoading: r.status.isPending, children: o("saveCta") })
     ] })
   ] }) }) });
 }
 export {
-  A as BankFormBody
+  U as BankFormBody
 };
 //# sourceMappingURL=BankFormBody.js.map

package/dist/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"BankFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeBankAccount } from '@gusto/embedded-api/models/components/employeebankaccount'\nimport { useBankForm, type AccountType, type UseBankFormProps } from '../useBankForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type BankFormBodyDictionary = ResourceDictionary<'Employee.BankFormBody'>\n\n/** @internal */\nexport interface BankFormBodyProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: BankFormBodyDictionary\n  /** Called with the created bank account after a successful submit. */\n  onSaved: (bankAccount: EmployeeBankAccount) => void\n  onCancel: () => void\n}\n\n/**\n * Shared bank-account form body. Owns the `useBankForm` composition, the field\n * JSX, and the submit/cancel actions. Reads its copy from the internal\n * `Employee.BankFormBody` namespace; consuming surfaces inject their own copy\n * via the `dictionary` prop and map the `onSaved`/`onCancel` callbacks onto\n * their surface-specific events.\n *\n * @internal\n */\nexport function BankFormBody({\n  employeeId,\n  dictionary,\n  onSaved,\n  onCancel,\n  ...hookProps\n}: BankFormBodyProps) {\n  useI18n('Employee.BankFormBody')\n  useComponentDictionary('Employee.BankFormBody', dictionary)\n  const bankForm = useBankForm({ employeeId, ...hookProps })\n  const { t } = useTranslation('Employee.BankFormBody')\n  const Components = useComponentContext()\n\n  if (bankForm.isLoading) {\n    return <BaseLayout isLoading error={bankForm.errorHandling.errors} />\n  }\n\n  const { Fields } = bankForm.form\n\n  const handleSubmit = async () => {\n    const result = await bankForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={bankForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={bankForm}>\n        <Form onSubmit={handleSubmit}>\n          <Fields.Name\n            label={t('nameLabel')}\n            validationMessages={{ REQUIRED: t('validations.accountName') }}\n          />\n          <Fields.RoutingNumber\n            label={t('routingNumberLabel')}\n            description={t('routingNumberDescription')}\n            validationMessages={{\n              REQUIRED: t('validations.routingNumber'),\n              INVALID_ROUTING_NUMBER: t('validations.routingNumber'),\n            }}\n          />\n          <Fields.AccountNumber\n            label={t('accountNumberLabel')}\n            validationMessages={{\n              REQUIRED: t('validations.accountNumber'),\n              INVALID_ACCOUNT_NUMBER: t('validations.accountNumberFormat'),\n            }}\n          />\n          <Fields.AccountType\n            label={t('accountTypeLabel')}\n            getOptionLabel={(type: AccountType) =>\n              type === 'Checking' ? t('accountTypeChecking') : t('accountTypeSavings')\n            }\n          />\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={bankForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["BankFormBody","employeeId","dictionary","onSaved","onCancel","hookProps","useI18n","useComponentDictionary","bankForm","useBankForm","t","useTranslation","Components","useComponentContext","BaseLayout","Fields","handleSubmit","result","jsx","SDKFormProvider","jsxs","Form","type","ActionsLayout"],"mappings":";;;;;;;;;;AAqCO,SAASA,EAAa;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBL,CAAU;AAC1D,QAAMM,IAAWC,EAAY,EAAE,YAAAR,GAAY,GAAGI,GAAW,GACnD,EAAE,GAAAK,EAAA,IAAMC,EAAe,uBAAuB,GAC9CC,IAAaC,EAAA;AAEnB,MAAIL,EAAS;AACX,6BAAQM,GAAA,EAAW,WAAS,IAAC,OAAON,EAAS,cAAc,QAAQ;AAGrE,QAAM,EAAE,QAAAO,MAAWP,EAAS,MAEtBQ,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMT,EAAS,QAAQ,SAAA;AACtC,IAAIS,KACFd,EAAQc,EAAO,IAAI;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAACJ,GAAA,EAAW,OAAON,EAAS,cAAc,QACxC,UAAA,gBAAAU,EAACC,GAAA,EAAgB,gBAAgBX,GAC/B,UAAA,gBAAAY,EAACC,GAAA,EAAK,UAAUL,GACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,WAAW;AAAA,QACpB,oBAAoB,EAAE,UAAUA,EAAE,yBAAyB,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAE/D,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,aAAaA,EAAE,0BAA0B;AAAA,QACzC,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,iCAAiC;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,kBAAkB;AAAA,QAC3B,gBAAgB,CAACY,MACOZ,EAAtBY,MAAS,aAAe,wBAA2B,oBAAN;AAAA,MAA0B;AAAA,IAAA;AAAA,sBAG1EC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACN,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASR,GAC3D,UAAAM,EAAE,WAAW,EAAA,CAChB;AAAA,MACA,gBAAAQ,EAACN,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWJ,EAAS,OAAO,WACzD,UAAAE,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}
+{"version":3,"file":"BankFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/BankFormBody/BankFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { EmployeeBankAccount } from '@gusto/embedded-api/models/components/employeebankaccount'\nimport { useBankForm, type AccountType, type UseBankFormProps } from '../useBankForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type BankFormBodyDictionary = ResourceDictionary<'Employee.BankFormBody'>\n\n/** @internal */\nexport interface BankFormBodyProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: BankFormBodyDictionary\n  /** Called with the created bank account after a successful submit. */\n  onSaved: (bankAccount: EmployeeBankAccount) => void\n  onCancel?: () => void\n}\n\n/**\n * Shared bank-account form body. Owns the `useBankForm` composition, the field\n * JSX, and the submit/cancel actions. Reads its copy from the internal\n * `Employee.BankFormBody` namespace; consuming surfaces inject their own copy\n * via the `dictionary` prop and map the `onSaved`/`onCancel` callbacks onto\n * their surface-specific events.\n *\n * @internal\n */\nexport function BankFormBody({\n  employeeId,\n  dictionary,\n  onSaved,\n  onCancel,\n  ...hookProps\n}: BankFormBodyProps) {\n  useI18n('Employee.BankFormBody')\n  useComponentDictionary('Employee.BankFormBody', dictionary)\n  const bankForm = useBankForm({ employeeId, ...hookProps })\n  const { t } = useTranslation('Employee.BankFormBody')\n  const Components = useComponentContext()\n\n  if (bankForm.isLoading) {\n    return <BaseLayout isLoading error={bankForm.errorHandling.errors} />\n  }\n\n  const { Fields } = bankForm.form\n\n  const handleSubmit = async () => {\n    const result = await bankForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={bankForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={bankForm}>\n        <Form onSubmit={handleSubmit}>\n          <Fields.Name\n            label={t('nameLabel')}\n            validationMessages={{ REQUIRED: t('validations.accountName') }}\n          />\n          <Fields.RoutingNumber\n            label={t('routingNumberLabel')}\n            description={t('routingNumberDescription')}\n            validationMessages={{\n              REQUIRED: t('validations.routingNumber'),\n              INVALID_ROUTING_NUMBER: t('validations.routingNumber'),\n            }}\n          />\n          <Fields.AccountNumber\n            label={t('accountNumberLabel')}\n            validationMessages={{\n              REQUIRED: t('validations.accountNumber'),\n              INVALID_ACCOUNT_NUMBER: t('validations.accountNumberFormat'),\n            }}\n          />\n          <Fields.AccountType\n            label={t('accountTypeLabel')}\n            getOptionLabel={(type: AccountType) =>\n              type === 'Checking' ? t('accountTypeChecking') : t('accountTypeSavings')\n            }\n          />\n          <ActionsLayout>\n            {onCancel && (\n              <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n                {t('cancelCta')}\n              </Components.Button>\n            )}\n            <Components.Button type=\"submit\" isLoading={bankForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["BankFormBody","employeeId","dictionary","onSaved","onCancel","hookProps","useI18n","useComponentDictionary","bankForm","useBankForm","t","useTranslation","Components","useComponentContext","BaseLayout","Fields","handleSubmit","result","jsx","SDKFormProvider","jsxs","Form","type","ActionsLayout"],"mappings":";;;;;;;;;AAqCO,SAASA,EAAa;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,EAAAC,EAAQ,uBAAuB,GAC/BC,EAAuB,yBAAyBL,CAAU;AAC1D,QAAMM,IAAWC,EAAY,EAAE,YAAAR,GAAY,GAAGI,GAAW,GACnD,EAAE,GAAAK,EAAA,IAAMC,EAAe,uBAAuB,GAC9CC,IAAaC,EAAA;AAEnB,MAAIL,EAAS;AACX,6BAAQM,GAAA,EAAW,WAAS,IAAC,OAAON,EAAS,cAAc,QAAQ;AAGrE,QAAM,EAAE,QAAAO,MAAWP,EAAS,MAEtBQ,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMT,EAAS,QAAQ,SAAA;AACtC,IAAIS,KACFd,EAAQc,EAAO,IAAI;AAAA,EAEvB;AAEA,SACE,gBAAAC,EAACJ,GAAA,EAAW,OAAON,EAAS,cAAc,QACxC,UAAA,gBAAAU,EAACC,GAAA,EAAgB,gBAAgBX,GAC/B,UAAA,gBAAAY,EAACC,GAAA,EAAK,UAAUL,GACd,UAAA;AAAA,IAAA,gBAAAE;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,WAAW;AAAA,QACpB,oBAAoB,EAAE,UAAUA,EAAE,yBAAyB,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAE/D,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,aAAaA,EAAE,0BAA0B;AAAA,QACzC,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,iCAAiC;AAAA,QAAA;AAAA,MAC7D;AAAA,IAAA;AAAA,IAEF,gBAAAQ;AAAA,MAACH,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,kBAAkB;AAAA,QAC3B,gBAAgB,CAACY,MACOZ,EAAtBY,MAAS,aAAe,wBAA2B,oBAAN;AAAA,MAA0B;AAAA,IAAA;AAAA,sBAG1EC,GAAA,EACE,UAAA;AAAA,MAAAnB,KACC,gBAAAc,EAACN,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASR,GAC3D,UAAAM,EAAE,WAAW,EAAA,CAChB;AAAA,MAEF,gBAAAQ,EAACN,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWJ,EAAS,OAAO,WACzD,UAAAE,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}