@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Employee/HomeAddress/management/HomeAddressEditForm.js

@@ -1,21 +1,33 @@
-import { jsx as o } from "react/jsx-runtime";
-import { HomeAddressView as i } from "./HomeAddressView.js";
-import { useHomeAddressManagement as E, isUseHomeAddressManagementSuccess as A } from "./useHomeAddressManagement.js";
-import { BaseBoundaries as H, BaseLayout as m } from "../../../Base/Base.js";
-import { useI18n as p, useComponentDictionary as c } from "../../../../i18n/I18n.js";
-import { componentEvents as a } from "../../../../shared/constants.js";
-function g({ employeeId: d, onEvent: r, dictionary: t }) {
-  p("Employee.Management.HomeAddress"), c("Employee.Management.HomeAddress", t);
-  const e = E({ employeeId: d, onEvent: r });
+import { jsx as s } from "react/jsx-runtime";
+import { HomeAddressView as E } from "./HomeAddressView.js";
+import { useHomeAddressManagement as A, isUseHomeAddressManagementSuccess as H } from "./useHomeAddressManagement.js";
+import { BaseBoundaries as c, BaseLayout as t } from "../../../Base/Base.js";
+import { useI18n as g, useComponentDictionary as l } from "../../../../i18n/I18n.js";
+import { componentEvents as i } from "../../../../shared/constants.js";
+function D({
+  employeeId: d,
+  onEvent: r,
+  dictionary: o,
+  LoaderComponent: m
+}) {
+  g("Employee.Management.HomeAddress"), l("Employee.Management.HomeAddress", o);
+  const e = A({ employeeId: d, onEvent: r });
   if (e.isLoading)
-    return /* @__PURE__ */ o(m, { isLoading: !0, error: e.errorHandling.errors });
-  if (!A(e))
-    return /* @__PURE__ */ o(m, { error: e.errorHandling.errors });
-  const n = (s) => {
-    s.mode === "create" ? r(a.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_CREATED, s.data) : r(a.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_UPDATED, s.data);
+    return /* @__PURE__ */ s(
+      t,
+      {
+        isLoading: !0,
+        error: e.errorHandling.errors,
+        LoaderComponent: m
+      }
+    );
+  if (!H(e))
+    return /* @__PURE__ */ s(t, { error: e.errorHandling.errors, LoaderComponent: m });
+  const n = (a) => {
+    a.mode === "create" ? r(i.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_CREATED, a.data) : r(i.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_UPDATED, a.data);
   };
-  return /* @__PURE__ */ o(m, { error: e.errorHandling.errors, children: /* @__PURE__ */ o(
-    i,
+  return /* @__PURE__ */ s(t, { error: e.errorHandling.errors, LoaderComponent: m, children: /* @__PURE__ */ s(
+    E,
     {
       editHomeAddressForm: e.data.editHomeAddressForm,
       createHomeAddressForm: e.data.createHomeAddressForm,
@@ -26,23 +38,28 @@ function g({ employeeId: d, onEvent: r, dictionary: t }) {
       onSaved: n,
       onConfirmDelete: e.actions.confirmDeleteHomeAddress,
       onBack: () => {
-        r(a.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_CANCELLED);
+        r(i.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_CANCELLED);
       },
       isDeletePending: e.status.isDeletePending
     }
   ) });
 }
-function y({ FallbackComponent: d, ...r }) {
-  return /* @__PURE__ */ o(
-    H,
+function N({
+  FallbackComponent: d,
+  LoaderComponent: r,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    c,
     {
       componentName: "Employee.Management.HomeAddress",
       FallbackComponent: d,
-      children: /* @__PURE__ */ o(g, { ...r })
+      LoaderComponent: r,
+      children: /* @__PURE__ */ s(D, { LoaderComponent: r, ...o })
     }
   );
 }
 export {
-  y as HomeAddressEditForm
+  N as HomeAddressEditForm
 };
 //# sourceMappingURL=HomeAddressEditForm.js.map

package/dist/components/Employee/HomeAddress/management/HomeAddressEditForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomeAddressEditForm.js","sources":["../../../../../src/components/Employee/HomeAddress/management/HomeAddressEditForm.tsx"],"sourcesContent":["import type { EmployeeAddress } from '@gusto/embedded-api/models/components/employeeaddress'\nimport { HomeAddressView } from './HomeAddressView'\nimport {\n  isUseHomeAddressManagementSuccess,\n  useHomeAddressManagement,\n} from './useHomeAddressManagement'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport type { HookSubmitResult } from '@/partner-hook-utils/types'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link HomeAddressEditForm}.\n *\n * @public\n */\nexport interface HomeAddressEditFormProps extends BaseComponentInterface<'Employee.Management.HomeAddress'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\nfunction HomeAddressEditFormRoot({ employeeId, onEvent, dictionary }: HomeAddressEditFormProps) {\n  useI18n('Employee.Management.HomeAddress')\n  useComponentDictionary('Employee.Management.HomeAddress', dictionary)\n\n  const management = useHomeAddressManagement({ employeeId, onEvent })\n\n  if (management.isLoading) {\n    return <BaseLayout isLoading error={management.errorHandling.errors} />\n  }\n\n  if (!isUseHomeAddressManagementSuccess(management)) {\n    return <BaseLayout error={management.errorHandling.errors} />\n  }\n\n  const handleSaved = (result: HookSubmitResult<EmployeeAddress>) => {\n    if (result.mode === 'create') {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_CREATED, result.data)\n    } else {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_UPDATED, result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={management.errorHandling.errors}>\n      <HomeAddressView\n        editHomeAddressForm={management.data.editHomeAddressForm}\n        createHomeAddressForm={management.data.createHomeAddressForm}\n        employeeHomeAddresses={management.data.employeeHomeAddresses}\n        employeeDisplayName={management.data.employeeDisplayName}\n        editingHomeAddressUuid={management.data.editingHomeAddressUuid}\n        onEditAddressTargetChange={management.actions.setEditAddressTarget}\n        onSaved={handleSaved}\n        onConfirmDelete={management.actions.confirmDeleteHomeAddress}\n        onBack={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_CANCELLED)\n        }}\n        isDeletePending={management.status.isDeletePending}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Standalone employee home address edit form for creating, updating, and deleting addresses.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/homeAddress/created` | A new home address was created | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/updated` | An existing home address was updated | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/deleted` | A home address was deleted | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/editCancelled` | User backed out of the edit form | — |\n *\n * @public\n */\nexport function HomeAddressEditForm({ FallbackComponent, ...props }: HomeAddressEditFormProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.HomeAddress\"\n      FallbackComponent={FallbackComponent}\n    >\n      <HomeAddressEditFormRoot {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["HomeAddressEditFormRoot","employeeId","onEvent","dictionary","useI18n","useComponentDictionary","management","useHomeAddressManagement","BaseLayout","isUseHomeAddressManagementSuccess","jsx","handleSaved","result","componentEvents","HomeAddressView","HomeAddressEditForm","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;AAqBA,SAASA,EAAwB,EAAE,YAAAC,GAAY,SAAAC,GAAS,YAAAC,KAAwC;AAC9F,EAAAC,EAAQ,iCAAiC,GACzCC,EAAuB,mCAAmCF,CAAU;AAEpE,QAAMG,IAAaC,EAAyB,EAAE,YAAAN,GAAY,SAAAC,GAAS;AAEnE,MAAII,EAAW;AACb,6BAAQE,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAW,cAAc,QAAQ;AAGvE,MAAI,CAACG,EAAkCH,CAAU;AAC/C,WAAO,gBAAAI,EAACF,GAAA,EAAW,OAAOF,EAAW,cAAc,QAAQ;AAG7D,QAAMK,IAAc,CAACC,MAA8C;AACjE,IAAIA,EAAO,SAAS,WAClBV,EAAQW,EAAgB,0CAA0CD,EAAO,IAAI,IAE7EV,EAAQW,EAAgB,0CAA0CD,EAAO,IAAI;AAAA,EAEjF;AAEA,SACE,gBAAAF,EAACF,GAAA,EAAW,OAAOF,EAAW,cAAc,QAC1C,UAAA,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACC,qBAAqBR,EAAW,KAAK;AAAA,MACrC,uBAAuBA,EAAW,KAAK;AAAA,MACvC,uBAAuBA,EAAW,KAAK;AAAA,MACvC,qBAAqBA,EAAW,KAAK;AAAA,MACrC,wBAAwBA,EAAW,KAAK;AAAA,MACxC,2BAA2BA,EAAW,QAAQ;AAAA,MAC9C,SAASK;AAAA,MACT,iBAAiBL,EAAW,QAAQ;AAAA,MACpC,QAAQ,MAAM;AACZ,QAAAJ,EAAQW,EAAgB,+CAA+C;AAAA,MACzE;AAAA,MACA,iBAAiBP,EAAW,OAAO;AAAA,IAAA;AAAA,EAAA,GAEvC;AAEJ;AAeO,SAASS,EAAoB,EAAE,mBAAAC,GAAmB,GAAGC,KAAmC;AAC7F,SACE,gBAAAP;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MAEA,UAAA,gBAAAN,EAACV,GAAA,EAAyB,GAAGiB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG1C;"}
+{"version":3,"file":"HomeAddressEditForm.js","sources":["../../../../../src/components/Employee/HomeAddress/management/HomeAddressEditForm.tsx"],"sourcesContent":["import type { EmployeeAddress } from '@gusto/embedded-api/models/components/employeeaddress'\nimport { HomeAddressView } from './HomeAddressView'\nimport {\n  isUseHomeAddressManagementSuccess,\n  useHomeAddressManagement,\n} from './useHomeAddressManagement'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useI18n, useComponentDictionary } from '@/i18n'\nimport type { HookSubmitResult } from '@/partner-hook-utils/types'\nimport { componentEvents } from '@/shared/constants'\n\n/**\n * Props for {@link HomeAddressEditForm}.\n *\n * @public\n */\nexport interface HomeAddressEditFormProps extends BaseComponentInterface<'Employee.Management.HomeAddress'> {\n  /** The associated employee identifier. */\n  employeeId: string\n}\n\nfunction HomeAddressEditFormRoot({\n  employeeId,\n  onEvent,\n  dictionary,\n  LoaderComponent,\n}: HomeAddressEditFormProps) {\n  useI18n('Employee.Management.HomeAddress')\n  useComponentDictionary('Employee.Management.HomeAddress', dictionary)\n\n  const management = useHomeAddressManagement({ employeeId, onEvent })\n\n  if (management.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={management.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  if (!isUseHomeAddressManagementSuccess(management)) {\n    return <BaseLayout error={management.errorHandling.errors} LoaderComponent={LoaderComponent} />\n  }\n\n  const handleSaved = (result: HookSubmitResult<EmployeeAddress>) => {\n    if (result.mode === 'create') {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_CREATED, result.data)\n    } else {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_UPDATED, result.data)\n    }\n  }\n\n  return (\n    <BaseLayout error={management.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <HomeAddressView\n        editHomeAddressForm={management.data.editHomeAddressForm}\n        createHomeAddressForm={management.data.createHomeAddressForm}\n        employeeHomeAddresses={management.data.employeeHomeAddresses}\n        employeeDisplayName={management.data.employeeDisplayName}\n        editingHomeAddressUuid={management.data.editingHomeAddressUuid}\n        onEditAddressTargetChange={management.actions.setEditAddressTarget}\n        onSaved={handleSaved}\n        onConfirmDelete={management.actions.confirmDeleteHomeAddress}\n        onBack={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_HOME_ADDRESS_EDIT_CANCELLED)\n        }}\n        isDeletePending={management.status.isDeletePending}\n      />\n    </BaseLayout>\n  )\n}\n\n/**\n * Standalone employee home address edit form for creating, updating, and deleting addresses.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/homeAddress/created` | A new home address was created | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/updated` | An existing home address was updated | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/deleted` | A home address was deleted | {@link APIModels.EmployeeAddress} |\n * | `employee/management/homeAddress/editCancelled` | User backed out of the edit form | — |\n *\n * @public\n */\nexport function HomeAddressEditForm({\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: HomeAddressEditFormProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.HomeAddress\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <HomeAddressEditFormRoot LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["HomeAddressEditFormRoot","employeeId","onEvent","dictionary","LoaderComponent","useI18n","useComponentDictionary","management","useHomeAddressManagement","jsx","BaseLayout","isUseHomeAddressManagementSuccess","handleSaved","result","componentEvents","HomeAddressView","HomeAddressEditForm","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;AAqBA,SAASA,EAAwB;AAAA,EAC/B,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AACF,GAA6B;AAC3B,EAAAC,EAAQ,iCAAiC,GACzCC,EAAuB,mCAAmCH,CAAU;AAEpE,QAAMI,IAAaC,EAAyB,EAAE,YAAAP,GAAY,SAAAC,GAAS;AAEnE,MAAIK,EAAW;AACb,WACE,gBAAAE;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAS;AAAA,QACT,OAAOH,EAAW,cAAc;AAAA,QAChC,iBAAAH;AAAA,MAAA;AAAA,IAAA;AAKN,MAAI,CAACO,EAAkCJ,CAAU;AAC/C,6BAAQG,GAAA,EAAW,OAAOH,EAAW,cAAc,QAAQ,iBAAAH,GAAkC;AAG/F,QAAMQ,IAAc,CAACC,MAA8C;AACjE,IAAIA,EAAO,SAAS,WAClBX,EAAQY,EAAgB,0CAA0CD,EAAO,IAAI,IAE7EX,EAAQY,EAAgB,0CAA0CD,EAAO,IAAI;AAAA,EAEjF;AAEA,2BACGH,GAAA,EAAW,OAAOH,EAAW,cAAc,QAAQ,iBAAAH,GAClD,UAAA,gBAAAK;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,qBAAqBR,EAAW,KAAK;AAAA,MACrC,uBAAuBA,EAAW,KAAK;AAAA,MACvC,uBAAuBA,EAAW,KAAK;AAAA,MACvC,qBAAqBA,EAAW,KAAK;AAAA,MACrC,wBAAwBA,EAAW,KAAK;AAAA,MACxC,2BAA2BA,EAAW,QAAQ;AAAA,MAC9C,SAASK;AAAA,MACT,iBAAiBL,EAAW,QAAQ;AAAA,MACpC,QAAQ,MAAM;AACZ,QAAAL,EAAQY,EAAgB,+CAA+C;AAAA,MACzE;AAAA,MACA,iBAAiBP,EAAW,OAAO;AAAA,IAAA;AAAA,EAAA,GAEvC;AAEJ;AAeO,SAASS,EAAoB;AAAA,EAClC,mBAAAC;AAAA,EACA,iBAAAb;AAAA,EACA,GAAGc;AACL,GAA6B;AAC3B,SACE,gBAAAT;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAF;AAAA,MACA,iBAAAb;AAAA,MAEA,UAAA,gBAAAK,EAACT,GAAA,EAAwB,iBAAAI,GAAmC,GAAGc,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAG5E;"}

package/dist/components/Employee/OnboardingSummary/OnboardingSummary.js

@@ -8,8 +8,8 @@ import { BaseComponent as L } from "../../Base/Base.js";
 import { useBase as T } from "../../Base/useBase.js";
 import { Flex as r } from "../../Common/Flex/Flex.js";
 import { ActionsLayout as p } from "../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { RequirementsList as P } from "../../Common/RequirementsList/RequirementsList.js";
+import { RequirementsList as B } from "../../Common/RequirementsList/RequirementsList.js";
+import { useComponentContext as P } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as R, useComponentDictionary as w } from "../../../i18n/I18n.js";
 import { EmployeeOnboardingStatus as u, EmployeeSelfOnboardingStatuses as G, componentEvents as f } from "../../../shared/constants.js";
 import { useFlow as F } from "../../Flow/useFlow.js";
@@ -29,7 +29,7 @@ function $(n) {
   return R("Employee.OnboardingSummary"), w("Employee.OnboardingSummary", n.dictionary), /* @__PURE__ */ e(L, { ...n, children: /* @__PURE__ */ e(j, { ...n, children: n.children }) });
 }
 const j = ({ employeeId: n, className: c, isAdmin: d = !1 }) => {
-  const { onEvent: s } = T(), { t } = D("Employee.OnboardingSummary"), i = B(), {
+  const { onEvent: s } = T(), { t } = D("Employee.OnboardingSummary"), i = P(), {
     data: { employee: I }
   } = v({ employeeId: n }), { firstName: g, lastName: h } = I, { data: b } = A({ employeeId: n }), { onboardingStatus: m, onboardingSteps: l } = b.employeeOnboardingStatus, N = l?.length && l.findIndex((o) => o.required && !o.completed) > -1, E = m === u.ONBOARDING_COMPLETED || !N && m === u.SELF_ONBOARDING_PENDING_INVITE, S = m === u.SELF_ONBOARDING_PENDING_INVITE || m !== void 0 && G.has(m), _ = x(() => y.sanitize(g), [g]), O = x(() => y.sanitize(h), [h]);
   return /* @__PURE__ */ e("section", { className: c, children: /* @__PURE__ */ a(r, { flexDirection: "column", gap: 20, children: [
@@ -63,7 +63,7 @@ const j = ({ employeeId: n, className: c, isAdmin: d = !1 }) => {
           }
         ) }),
         children: l && /* @__PURE__ */ e(
-          P,
+          B,
           {
             requirements: l.filter(
               (o) => o.completed !== void 0 && q(o.id)

package/dist/components/Employee/PaymentMethod/management/PaymentMethod.d.ts

@@ -43,4 +43,4 @@ export interface PaymentMethodProps extends BaseComponentInterface<'Employee.Man
  * }
  * ```
  */
-export declare function PaymentMethod({ dictionary, FallbackComponent, ...props }: PaymentMethodProps): import("react").JSX.Element;
+export declare function PaymentMethod({ dictionary, FallbackComponent, LoaderComponent, ...props }: PaymentMethodProps): import("react").JSX.Element;

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

@@ -1,46 +1,54 @@
 import { jsx as n } from "react/jsx-runtime";
-import { createMachine as M } from "robot3";
-import { useMemo as c } from "react";
-import { PaymentMethodBankFormContextual as u, PaymentMethodSplitFormContextual as h, PaymentMethodCardContextual as i } from "./PaymentMethodComponents.js";
-import { paymentMethodStateMachine as d } from "./paymentMethodStateMachine.js";
-import { Flow as l } from "../../../Flow/Flow.js";
-import { BaseBoundaries as s } from "../../../Base/Base.js";
+import { createMachine as c } from "robot3";
+import { useMemo as u } from "react";
+import { PaymentMethodBankFormContextual as h, PaymentMethodSplitFormContextual as i, PaymentMethodCardContextual as l } from "./PaymentMethodComponents.js";
+import { paymentMethodStateMachine as s } from "./paymentMethodStateMachine.js";
+import { Flow as y } from "../../../Flow/Flow.js";
+import { BaseBoundaries as d } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentDictionary as y, useI18n as f } from "../../../../i18n/I18n.js";
-function P({
-  employeeId: o,
-  isAdmin: t = !0,
+import { useComponentDictionary as f, useI18n as P } from "../../../../i18n/I18n.js";
+function x({
+  employeeId: t,
+  isAdmin: o = !0,
   initialState: e = "list",
-  onEvent: r
+  onEvent: m,
+  LoaderComponent: r
 }) {
-  f("Employee.Management.PaymentMethod");
-  const m = e === "add" ? u : e === "split" ? h : i, a = c(
-    () => M(
+  P("Employee.Management.PaymentMethod");
+  const a = e === "add" ? h : e === "split" ? i : l, p = u(
+    () => c(
       e,
-      d,
-      (p) => ({
-        ...p,
-        component: m,
-        employeeId: o,
-        isAdmin: t,
-        successAlert: null
+      s,
+      (M) => ({
+        ...M,
+        component: a,
+        employeeId: t,
+        isAdmin: o,
+        successAlert: null,
+        LoaderComponent: r
       })
     ),
-    [o, t, e, m]
+    [t, o, e, a, r]
   );
-  return /* @__PURE__ */ n(l, { machine: a, onEvent: r });
+  return /* @__PURE__ */ n(y, { machine: p, onEvent: m });
 }
-function D({ dictionary: o, FallbackComponent: t, ...e }) {
-  return y("Employee.Management.PaymentMethod", o), /* @__PURE__ */ n(
-    s,
+function N({
+  dictionary: t,
+  FallbackComponent: o,
+  LoaderComponent: e,
+  ...m
+}) {
+  return f("Employee.Management.PaymentMethod", t), /* @__PURE__ */ n(
+    d,
     {
       componentName: "Employee.Management.PaymentMethod",
-      FallbackComponent: t,
-      children: /* @__PURE__ */ n(P, { ...e })
+      FallbackComponent: o,
+      LoaderComponent: e,
+      children: /* @__PURE__ */ n(x, { LoaderComponent: e, ...m })
     }
   );
 }
 export {
-  D as PaymentMethod
+  N as PaymentMethod
 };
 //# sourceMappingURL=PaymentMethod.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.Management.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — payment method management edits live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `true`. */\n  isAdmin?: boolean\n  /** Step to render first: the list card, the add-account form, or the split-paycheck form. Defaults to `'list'`. */\n  initialState?: 'list' | 'add' | 'split'\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = true,\n  initialState = 'list',\n  onEvent,\n}: PaymentMethodProps) {\n  useI18n('Employee.Management.PaymentMethod')\n\n  const initialComponent =\n    initialState === 'add'\n      ? PaymentMethodBankFormContextual\n      : initialState === 'split'\n        ? PaymentMethodSplitFormContextual\n        : PaymentMethodCardContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        paymentMethodStateMachine,\n        (ctx: PaymentMethodContextInterface) => ({\n          ...ctx,\n          component: initialComponent,\n          employeeId,\n          isAdmin,\n          successAlert: null,\n        }),\n      ),\n    [employeeId, isAdmin, initialState, initialComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Management flow for editing an employee's payment method.\n *\n * @remarks\n * Orchestrates the list card, add-bank-account form, and split-paycheck form\n * for an existing employee. Routes between steps based on user actions\n * starting from `initialState`. Composed of the smaller standalone components\n * ({@link PaymentMethodCard}, {@link PaymentMethodBankForm},\n * {@link PaymentMethodSplitForm}) which can also be used directly when an\n * orchestrator other than this flow is needed.\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method management flow.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeManagement.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({ dictionary, FallbackComponent, ...props }: PaymentMethodProps) {\n  useComponentDictionary('Employee.Management.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n    >\n      <PaymentMethodFlow {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","initialState","onEvent","useI18n","initialComponent","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual","PaymentMethodCardContextual","machine","useMemo","createMachine","paymentMethodStateMachine","ctx","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AA8BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,mCAAmC;AAE3C,QAAMC,IACJH,MAAiB,QACbI,IACAJ,MAAiB,UACfK,IACAC,GAEFC,IAAUC;AAAA,IACd,MACEC;AAAA,MACET;AAAA,MACAU;AAAA,MACA,CAACC,OAAwC;AAAA,QACvC,GAAGA;AAAA,QACH,WAAWR;AAAA,QACX,YAAAL;AAAA,QACA,SAAAC;AAAA,QACA,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,IAEJ,CAACD,GAAYC,GAASC,GAAcG,CAAgB;AAAA,EAAA;AAGtD,SAAO,gBAAAS,EAACC,GAAA,EAAK,SAAAN,GAAkB,SAAAN,EAAA,CAAkB;AACnD;AA+BO,SAASa,EAAc,EAAE,YAAAC,GAAY,mBAAAC,GAAmB,GAAGC,KAA6B;AAC7F,SAAAC,EAAuB,qCAAqCH,CAAU,GAEpE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MAEA,UAAA,gBAAAJ,EAACf,GAAA,EAAmB,GAAGoB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGpC;"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  PaymentMethodCardContextual,\n  PaymentMethodBankFormContextual,\n  PaymentMethodSplitFormContextual,\n} from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.Management.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — payment method management edits live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `true`. */\n  isAdmin?: boolean\n  /** Step to render first: the list card, the add-account form, or the split-paycheck form. Defaults to `'list'`. */\n  initialState?: 'list' | 'add' | 'split'\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = true,\n  initialState = 'list',\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.Management.PaymentMethod')\n\n  const initialComponent =\n    initialState === 'add'\n      ? PaymentMethodBankFormContextual\n      : initialState === 'split'\n        ? PaymentMethodSplitFormContextual\n        : PaymentMethodCardContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        paymentMethodStateMachine,\n        (ctx: PaymentMethodContextInterface) => ({\n          ...ctx,\n          component: initialComponent,\n          employeeId,\n          isAdmin,\n          successAlert: null,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, initialState, initialComponent, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Management flow for editing an employee's payment method.\n *\n * @remarks\n * Orchestrates the list card, add-bank-account form, and split-paycheck form\n * for an existing employee. Routes between steps based on user actions\n * starting from `initialState`. Composed of the smaller standalone components\n * ({@link PaymentMethodCard}, {@link PaymentMethodBankForm},\n * {@link PaymentMethodSplitForm}) which can also be used directly when an\n * orchestrator other than this flow is needed.\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method management flow.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeManagement } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeManagement.PaymentMethod\n *       employeeId=\"4b3f930f-82cd-48a8-b797-798686e12e5e\"\n *       onEvent={() => {}}\n *     />\n *   )\n * }\n * ```\n */\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  LoaderComponent,\n  ...props\n}: PaymentMethodProps) {\n  useComponentDictionary('Employee.Management.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","initialState","onEvent","LoaderComponent","useI18n","initialComponent","PaymentMethodBankFormContextual","PaymentMethodSplitFormContextual","PaymentMethodCardContextual","machine","useMemo","createMachine","paymentMethodStateMachine","ctx","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AA8BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,mCAAmC;AAE3C,QAAMC,IACJJ,MAAiB,QACbK,IACAL,MAAiB,UACfM,IACAC,GAEFC,IAAUC;AAAA,IACd,MACEC;AAAA,MACEV;AAAA,MACAW;AAAA,MACA,CAACC,OAAwC;AAAA,QACvC,GAAGA;AAAA,QACH,WAAWR;AAAA,QACX,YAAAN;AAAA,QACA,SAAAC;AAAA,QACA,cAAc;AAAA,QACd,iBAAAG;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACJ,GAAYC,GAASC,GAAcI,GAAkBF,CAAe;AAAA,EAAA;AAGvE,SAAO,gBAAAW,EAACC,GAAA,EAAK,SAAAN,GAAkB,SAAAP,EAAA,CAAkB;AACnD;AA+BO,SAASc,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAf;AAAA,EACA,GAAGgB;AACL,GAAuB;AACrB,SAAAC,EAAuB,qCAAqCH,CAAU,GAEpE,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAf;AAAA,MAEA,UAAA,gBAAAW,EAAChB,GAAA,EAAkB,iBAAAK,GAAmC,GAAGgB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;"}

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

@@ -1,29 +1,35 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useManagementBankFormDictionary as _ } from "./useFormDictionary.js";
-import { componentEvents as E } from "../../../../shared/constants.js";
-import { BankFormBody as a } from "../shared/BankFormBody/BankFormBody.js";
-function T({
-  employeeId: n,
+import { jsxs as M, jsx as n } from "react/jsx-runtime";
+import { useTranslation as s } from "react-i18next";
+import { useManagementBankFormDictionary as p } from "./useFormDictionary.js";
+import { Flex as c } from "../../../Common/Flex/Flex.js";
+import { useComponentContext as _ } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { componentEvents as t } from "../../../../shared/constants.js";
+import { BankFormBody as l } from "../shared/BankFormBody/BankFormBody.js";
+function F({
+  employeeId: e,
   onEvent: o,
-  ...r
+  ...m
 }) {
-  const M = _();
-  return /* @__PURE__ */ t(
-    a,
-    {
-      employeeId: n,
-      dictionary: M,
-      onSaved: (m) => {
-        o(E.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, m);
-      },
-      onCancel: () => {
-        o(E.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED);
-      },
-      ...r
-    }
-  );
+  const r = p(), { t: a } = s("Employee.Management.PaymentMethodBankForm"), i = _();
+  return /* @__PURE__ */ M(c, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ n(i.Heading, { as: "h1", styledAs: "h2", children: a("title") }),
+    /* @__PURE__ */ n(
+      l,
+      {
+        employeeId: e,
+        dictionary: r,
+        onSaved: (E) => {
+          o(t.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_SUBMITTED, E);
+        },
+        onCancel: () => {
+          o(t.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_BANK_FORM_CANCELLED);
+        },
+        ...m
+      }
+    )
+  ] });
 }
 export {
-  T as PaymentMethodBankForm
+  F as PaymentMethodBankForm
 };
 //# sourceMappingURL=PaymentMethodBankForm.js.map

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/management/PaymentMethodCard.d.ts

@@ -1,5 +1,6 @@
 import { EventType } from '../../../../shared/constants';
 import { OnEventType } from '../../../Base/useBase';
+import { LoaderComponentType } from '../../../Base';
 /**
  * Props for {@link PaymentMethodCard}.
  *
@@ -10,6 +11,8 @@ export interface PaymentMethodCardProps {
     employeeId: string;
     /** Event handler fired on card interactions. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Standalone "Payment" card.
@@ -31,4 +34,4 @@ export interface PaymentMethodCardProps {
  * @returns The "Payment" card.
  * @public
  */
-export declare function PaymentMethodCard(props: PaymentMethodCardProps): import("react").JSX.Element;
+export declare function PaymentMethodCard({ LoaderComponent, ...props }: PaymentMethodCardProps): import("react").JSX.Element;

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

@@ -1,102 +1,115 @@
-import { jsx as e, jsxs as m, Fragment as g } from "react/jsx-runtime";
-import { useTranslation as D } from "react-i18next";
-import { usePaymentMethodList as N } from "../shared/usePaymentMethodList.js";
-import { useDeleteBankAccount as _ } from "../shared/useDeleteBankAccount.js";
-import { DeleteBankAccountDialog as b } from "../shared/DeleteBankAccountDialog.js";
-import M from "./PaymentMethodCard.module.scss.js";
-import { Flex as k } from "../../../Common/Flex/Flex.js";
-import { Loading as L } from "../../../Common/Loading/Loading.js";
-import { HamburgerMenu as x } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { BaseBoundaries as v, BaseLayout as C } from "../../../Base/Base.js";
-import { composeErrorHandler as H } from "../../../../partner-hook-utils/composeErrorHandler.js";
-import { useComponentContext as f } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as O } from "../../../../i18n/I18n.js";
-import { PAYMENT_METHODS as S, componentEvents as h } from "../../../../shared/constants.js";
-import y from "../../../../assets/icons/plus-circle.svg.js";
-import Y from "../../../../assets/icons/percent-circle.svg.js";
-import w from "../../../../assets/icons/trashcan.svg.js";
-import { useDataView as R } from "../../../Common/DataView/useDataView.js";
-import { DataView as U } from "../../../Common/DataView/DataView.js";
-function ce(n) {
-  return /* @__PURE__ */ e(v, { componentName: "Employee.Management.PaymentMethod", children: /* @__PURE__ */ e(G, { ...n }) });
+import { jsx as e, jsxs as s, Fragment as D } from "react/jsx-runtime";
+import { useTranslation as M } from "react-i18next";
+import { usePaymentMethodList as _ } from "../shared/usePaymentMethodList.js";
+import { useDeleteBankAccount as b } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as k } from "../shared/DeleteBankAccountDialog.js";
+import f from "./PaymentMethodCard.module.scss.js";
+import { Flex as L } from "../../../Common/Flex/Flex.js";
+import { Loading as x } from "../../../Common/Loading/Loading.js";
+import { HamburgerMenu as v } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseBoundaries as H, BaseLayout as C } from "../../../Base/Base.js";
+import { composeErrorHandler as O } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { useComponentContext as y } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as S } from "../../../../i18n/I18n.js";
+import { PAYMENT_METHODS as Y, componentEvents as p } from "../../../../shared/constants.js";
+import T from "../../../../assets/icons/plus-circle.svg.js";
+import w from "../../../../assets/icons/percent-circle.svg.js";
+import R from "../../../../assets/icons/trashcan.svg.js";
+import { useDataView as U } from "../../../Common/DataView/useDataView.js";
+import { DataView as G } from "../../../Common/DataView/DataView.js";
+function le({ LoaderComponent: n, ...i }) {
+  return /* @__PURE__ */ e(
+    H,
+    {
+      componentName: "Employee.Management.PaymentMethod",
+      LoaderComponent: n,
+      children: /* @__PURE__ */ e(V, { LoaderComponent: n, ...i })
+    }
+  );
 }
-function G({ employeeId: n, onEvent: a }) {
-  O("Employee.Management.PaymentMethod");
-  const { t: d } = D("Employee.Management.PaymentMethod"), c = f(), o = N({ employeeId: n }), l = H([o]);
-  return o.isLoading ? /* @__PURE__ */ e(C, { error: l.errors, children: /* @__PURE__ */ e(
+function V({
+  employeeId: n,
+  onEvent: i,
+  LoaderComponent: l
+}) {
+  S("Employee.Management.PaymentMethod");
+  const { t: d } = M("Employee.Management.PaymentMethod"), c = y(), o = _({ employeeId: n }), m = O([o]);
+  return o.isLoading ? /* @__PURE__ */ e(C, { error: m.errors, LoaderComponent: l, children: /* @__PURE__ */ e(
     c.Box,
     {
       header: /* @__PURE__ */ e(
         c.BoxHeader,
         {
           title: d("title"),
-          action: /* @__PURE__ */ e("div", { className: M.headerAction, children: /* @__PURE__ */ e(c.Button, { variant: "secondary", icon: /* @__PURE__ */ e(y, {}), isDisabled: !0, children: d("addBankAccountCta") }) })
+          action: /* @__PURE__ */ e("div", { className: f.headerAction, children: /* @__PURE__ */ e(c.Button, { variant: "secondary", icon: /* @__PURE__ */ e(T, {}), isDisabled: !0, children: d("addBankAccountCta") }) })
         }
       ),
-      children: /* @__PURE__ */ e(L, {})
+      children: /* @__PURE__ */ e(x, {})
     }
   ) }) : /* @__PURE__ */ e(
-    V,
+    j,
     {
       employeeId: n,
-      onEvent: a,
+      onEvent: i,
       paymentMethodList: o,
-      errorHandling: l
+      errorHandling: m,
+      LoaderComponent: l
     }
   );
 }
-function V({
+function j({
   onEvent: n,
-  paymentMethodList: a,
-  errorHandling: d
+  paymentMethodList: i,
+  errorHandling: l,
+  LoaderComponent: d
 }) {
-  const { paymentMethod: c, bankAccounts: o } = a.data, { deletePendingBankAccountUuid: l } = a.status, { t } = D("Employee.Management.PaymentMethod"), r = f(), { pendingDeleteAccount: s, setPendingDeleteAccount: p, handleConfirmDelete: T } = _(async (i) => {
-    const E = await a.actions.onDelete(i);
-    E && n(
-      h.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,
-      E.data
+  const { paymentMethod: c, bankAccounts: o } = i.data, { deletePendingBankAccountUuid: m } = i.status, { t } = M("Employee.Management.PaymentMethod"), r = y(), { pendingDeleteAccount: u, setPendingDeleteAccount: A, handleConfirmDelete: B } = b(async (a) => {
+    const g = await i.actions.onDelete(a);
+    g && n(
+      p.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,
+      g.data
     );
-  }), { ...B } = R({
+  }), { ...P } = U({
     data: o,
     columns: [
       {
         key: "name",
         title: t("nicknameColumn"),
-        render: (i) => /* @__PURE__ */ m(g, { children: [
-          i.name,
-          /* @__PURE__ */ e(r.Text, { variant: "supporting", size: "sm", children: i.hiddenAccountNumber })
+        render: (a) => /* @__PURE__ */ s(D, { children: [
+          a.name,
+          /* @__PURE__ */ e(r.Text, { variant: "supporting", size: "sm", children: a.hiddenAccountNumber })
         ] })
       },
       { key: "routingNumber", title: t("routingNumberColumn") },
       { key: "accountType", title: t("accountTypeColumn") }
     ],
-    itemMenu: (i) => /* @__PURE__ */ e(
-      x,
+    itemMenu: (a) => /* @__PURE__ */ e(
+      v,
       {
         items: [
           {
             label: t("deleteBankAccountCta"),
             onClick: () => {
-              p({
-                uuid: i.uuid,
-                hiddenAccountNumber: i.hiddenAccountNumber
+              A({
+                uuid: a.uuid,
+                hiddenAccountNumber: a.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ e(w, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e(R, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle")
       }
     )
-  }), u = c.type === S.directDeposit, P = /* @__PURE__ */ m("div", { className: M.headerAction, children: [
-    u && o.length > 1 && /* @__PURE__ */ e(
+  }), h = c.type === Y.directDeposit, N = /* @__PURE__ */ s("div", { className: f.headerAction, children: [
+    h && o.length > 1 && /* @__PURE__ */ e(
       r.Button,
       {
         variant: "secondary",
         onClick: () => {
-          n(h.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED);
+          n(p.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED);
         },
-        icon: /* @__PURE__ */ e(Y, {}),
+        icon: /* @__PURE__ */ e(w, {}),
         children: t("splitCta")
       }
     ),
@@ -105,39 +118,39 @@ function V({
       {
         variant: "secondary",
         onClick: () => {
-          n(h.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED);
+          n(p.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED);
         },
-        icon: /* @__PURE__ */ e(y, {}),
+        icon: /* @__PURE__ */ e(T, {}),
         children: o.length > 0 ? t("addAnotherCta") : t("addBankAccountCta")
       }
     )
-  ] }), A = u && o.length > 0;
-  return /* @__PURE__ */ m(g, { children: [
-    /* @__PURE__ */ e(C, { error: d.errors, children: /* @__PURE__ */ e(
+  ] }), E = h && o.length > 0;
+  return /* @__PURE__ */ s(D, { children: [
+    /* @__PURE__ */ e(C, { error: l.errors, LoaderComponent: d, children: /* @__PURE__ */ e(
       r.Box,
       {
-        withPadding: !A,
-        header: /* @__PURE__ */ e(r.BoxHeader, { title: t("title"), action: P }),
-        children: A ? /* @__PURE__ */ e(U, { label: t("bankAccountsListLabel"), isWithinBox: !0, ...B }) : /* @__PURE__ */ m(k, { flexDirection: "column", gap: 0, children: [
+        withPadding: !E,
+        header: /* @__PURE__ */ e(r.BoxHeader, { title: t("title"), action: N }),
+        children: E ? /* @__PURE__ */ e(G, { label: t("bankAccountsListLabel"), isWithinBox: !0, ...P }) : /* @__PURE__ */ s(L, { flexDirection: "column", gap: 0, children: [
           /* @__PURE__ */ e(r.Text, { variant: "supporting", children: t("paymentMethodLabel") }),
-          /* @__PURE__ */ e(r.Text, { children: t(u ? "directDepositLabel" : "checkLabel") })
+          /* @__PURE__ */ e(r.Text, { children: t(h ? "directDepositLabel" : "checkLabel") })
         ] })
       }
     ) }),
     /* @__PURE__ */ e(
-      b,
+      k,
       {
-        pendingDeleteAccount: s,
-        isPrimaryActionLoading: l === s?.uuid,
+        pendingDeleteAccount: u,
+        isPrimaryActionLoading: m === u?.uuid,
         onClose: () => {
-          p(null);
+          A(null);
         },
         onConfirm: () => {
-          T();
+          B();
         },
         title: t("deleteBankAccountDialog.title"),
         description: t("deleteBankAccountDialog.description", {
-          account: s?.hiddenAccountNumber ?? ""
+          account: u?.hiddenAccountNumber ?? ""
         }),
         confirmLabel: t("deleteBankAccountDialog.confirmCta"),
         cancelLabel: t("deleteBankAccountDialog.cancelCta")
@@ -146,6 +159,6 @@ function V({
   ] });
 }
 export {
-  ce as PaymentMethodCard
+  le as PaymentMethodCard
 };
 //# sourceMappingURL=PaymentMethodCard.js.map