@gusto/embedded-react-sdk 0.53.0 → 0.54.1-rc.1

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

@@ -1,61 +1,63 @@
-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,
+import { jsx as e, jsxs as p, Fragment as v } from "react/jsx-runtime";
+import { useTranslation as V } from "react-i18next";
+import { useWatch as R } from "react-hook-form";
+import { usePaymentMethodList as U } from "../shared/usePaymentMethodList.js";
+import { usePaymentMethodForm as K } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
+import { useDeleteBankAccount as I } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as j } from "../shared/DeleteBankAccountDialog.js";
+import { useOnboardingBankFormDictionary as W } from "./useFormDictionary.js";
+import b from "./ListView.module.scss.js";
+import { Flex as G } from "../../../Common/Flex/Flex.js";
+import { ActionsLayout as y } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { HamburgerMenu as q } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { BaseLayout as k } from "../../../Base/Base.js";
+import { SDKFormProvider as z } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { composeErrorHandler as J } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { useComponentContext as Q } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { centsToDollars as X } from "../../../../helpers/currencyHelpers.js";
+import Z from "../../../../hooks/useNumberFormatter.js";
+import { componentEvents as l, SPLIT_BY as $, PAYMENT_METHODS as u } from "../../../../shared/constants.js";
+import tt from "../../../../assets/icons/trashcan.svg.js";
+import { BankFormBody as et } from "../shared/BankFormBody/BankFormBody.js";
+import { useDataView as ot } from "../../../Common/DataView/useDataView.js";
+import { DataView as nt } from "../../../Common/DataView/DataView.js";
+function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: a }) {
+  const n = U({ employeeId: m }), d = K({ employeeId: m }), D = J([n, d]);
+  return n.isLoading || d.isLoading ? /* @__PURE__ */ e(k, { isLoading: !0, error: D.errors, LoaderComponent: a }) : /* @__PURE__ */ e(
+    it,
     {
       employeeId: m,
-      isAdmin: p,
+      isAdmin: f,
       onEvent: i,
-      paymentMethodList: c,
-      paymentMethodForm: n,
-      errorHandling: f
+      paymentMethodList: n,
+      paymentMethodForm: d,
+      errorHandling: D,
+      LoaderComponent: a
     }
   );
 }
-function nt({
+function it({
   employeeId: m,
-  isAdmin: p,
+  isAdmin: f,
   onEvent: i,
-  paymentMethodList: c,
+  paymentMethodList: a,
   paymentMethodForm: n,
-  errorHandling: f
+  errorHandling: d,
+  LoaderComponent: D
 }) {
-  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({
+  const { paymentMethod: A, bankAccounts: s } = a.data, { deletePendingBankAccountUuid: B } = a.status, { t } = V("Employee.PaymentMethod"), c = Q(), L = Z(A.splitBy === "Amount" ? "currency" : "percent"), T = W(), { Fields: P } = n.form, h = R({
     control: n.form.hookFormInternals.formMethods.control,
     name: "type"
   }), {
-    pendingDeleteAccount: A,
-    setPendingDeleteAccount: g,
+    pendingDeleteAccount: g,
+    setPendingDeleteAccount: E,
     deletedAccountNumber: C,
-    setDeletedAccountNumber: P,
-    handleConfirmDelete: N
-  } = K(async (o) => {
-    const r = await c.actions.onDelete(o);
+    setDeletedAccountNumber: N,
+    handleConfirmDelete: _
+  } = I(async (o) => {
+    const r = await a.actions.onDelete(o);
     r && i(l.EMPLOYEE_BANK_ACCOUNT_DELETED, r.data);
-  }), { ..._ } = et({
+  }), { ...M } = ot({
     data: s,
     columns: [
       { key: "name", title: t("nicknameColumn") },
@@ -65,44 +67,44 @@ function nt({
         key: "splitAmount",
         title: t("allocationColumn"),
         render: (o) => {
-          const r = h.splits?.find((x) => x.uuid === o.uuid)?.splitAmount ?? 0, Y = h.splitBy === Z.amount ? Q(r) ?? 0 : r;
-          return L(Y);
+          const r = A.splits?.find((H) => H.uuid === o.uuid)?.splitAmount ?? 0, x = A.splitBy === $.amount ? X(r) ?? 0 : r;
+          return L(x);
         }
       }
     ],
     itemMenu: (o) => /* @__PURE__ */ e(
-      G,
+      q,
       {
         items: [
           {
             label: t("deleteBankAccountCta"),
             onClick: () => {
-              g({
+              E({
                 uuid: o.uuid,
                 hiddenAccountNumber: o.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ e($, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ e(tt, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: t("hamburgerTitle")
       }
     )
-  }), M = (o) => /* @__PURE__ */ e(
-    a.RadioGroup,
+  }), O = (o) => /* @__PURE__ */ e(
+    c.RadioGroup,
     {
       ...o,
       options: o.options.map((r) => ({
         ...r,
-        description: r.value === u.directDeposit ? t(p ? "directDepositDescription" : "directDepositDescriptionSelf") : t(p ? "checkDescription" : "checkDescriptionSelf")
+        description: r.value === u.directDeposit ? t(f ? "directDepositDescription" : "directDepositDescriptionSelf") : t(f ? "checkDescription" : "checkDescriptionSelf")
       }))
     }
-  ), O = async () => {
+  ), w = async () => {
     const o = await n.actions.onSubmit();
     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: [
+  }, F = h === u.directDeposit && s.length === 0, S = h === u.check || s.length > 0, Y = h === u.directDeposit && s.length > 0 ? /* @__PURE__ */ p(y, { children: [
     s.length > 1 && /* @__PURE__ */ e(
-      a.Button,
+      c.Button,
       {
         variant: "secondary",
         type: "button",
@@ -113,7 +115,7 @@ function nt({
       }
     ),
     /* @__PURE__ */ e(
-      a.Button,
+      c.Button,
       {
         variant: "secondary",
         type: "button",
@@ -124,41 +126,41 @@ function nt({
       }
     )
   ] }) : void 0;
-  return /* @__PURE__ */ d(H, { children: [
-    /* @__PURE__ */ e(y, { error: f.errors, children: /* @__PURE__ */ d(q, { formHookResult: n, children: [
+  return /* @__PURE__ */ p(v, { children: [
+    /* @__PURE__ */ e(k, { error: d.errors, LoaderComponent: D, children: /* @__PURE__ */ p(z, { formHookResult: n, children: [
       C !== null && /* @__PURE__ */ e(
-        a.Alert,
+        c.Alert,
         {
           status: "success",
           label: t("deleteBankAccountSuccessAlert", { account: C }),
           onDismiss: () => {
-            P(null);
+            N(null);
           },
           disableScrollIntoView: !0
         }
       ),
-      /* @__PURE__ */ d(W, { flexDirection: "column", gap: 20, children: [
-        /* @__PURE__ */ d(
-          a.FormBox,
+      /* @__PURE__ */ p(G, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ p(
+          c.FormBox,
           {
-            header: /* @__PURE__ */ e(a.FormBoxHeader, { title: t("title") }),
+            header: /* @__PURE__ */ e(c.FormBoxHeader, { title: t("title") }),
             withPadding: !1,
-            footer: S,
+            footer: Y,
             children: [
-              /* @__PURE__ */ e("div", { className: E.section, children: /* @__PURE__ */ e(
-                T.Type,
+              /* @__PURE__ */ e("div", { className: b.section, children: /* @__PURE__ */ e(
+                P.Type,
                 {
                   label: t("paymentFieldsetLegend"),
                   getOptionLabel: (o) => o === u.directDeposit ? t("directDepositLabel") : t("checkLabel"),
-                  FieldComponent: M
+                  FieldComponent: O
                 }
               ) }),
-              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,
+              h === u.directDeposit && s.length > 0 && /* @__PURE__ */ e(nt, { isWithinBox: !0, label: t("bankAccountsListLabel"), ...M }),
+              F && /* @__PURE__ */ e("div", { className: b.section, children: /* @__PURE__ */ e(
+                et,
                 {
                   employeeId: m,
-                  dictionary: B,
+                  dictionary: T,
                   onSaved: (o) => {
                     i(l.EMPLOYEE_BANK_ACCOUNT_CREATED, o);
                   }
@@ -167,13 +169,13 @@ function nt({
             ]
           }
         ),
-        F && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
-          a.Button,
+        S && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+          c.Button,
           {
             type: "button",
             isLoading: n.status.isPending,
             onClick: () => {
-              O();
+              w();
             },
             children: t("submitCta")
           }
@@ -181,19 +183,19 @@ function nt({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      I,
+      j,
       {
-        pendingDeleteAccount: A,
-        isPrimaryActionLoading: k === A?.uuid,
+        pendingDeleteAccount: g,
+        isPrimaryActionLoading: B === g?.uuid,
         onClose: () => {
-          g(null);
+          E(null);
         },
         onConfirm: () => {
-          N();
+          _();
         },
         title: t("deleteBankAccountDialog.title"),
         description: t("deleteBankAccountDialog.description", {
-          account: A?.hiddenAccountNumber ?? ""
+          account: g?.hiddenAccountNumber ?? ""
         }),
         confirmLabel: t("deleteBankAccountDialog.confirmCta"),
         cancelLabel: t("deleteBankAccountDialog.cancelCta")
@@ -202,6 +204,6 @@ function nt({
   ] });
 }
 export {
-  Pt as ListView
+  Nt 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 { 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":";;;;;;;;;;;;;;;;;;;;;;;AAqCO,SAASA,GAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,SAAAC,KAA0B;AACxE,QAAMC,IAAoBC,EAAqB,EAAE,YAAAJ,GAAY,GACvDK,IAAoBC,EAAqB,EAAE,YAAAN,GAAY,GAEvDO,IAAgBC,EAAoB,CAACL,GAAmBE,CAAiB,CAAC;AAEhF,SAAIF,EAAkB,aAAaE,EAAkB,8BAC3CI,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAc,QAAQ,IAI1D,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAX;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,mBAAAC;AAAA,MACA,mBAAAE;AAAA,MACA,eAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;AAQA,SAASI,GAAc;AAAA,EACrB,YAAAX;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,mBAAAE;AAAA,EACA,eAAAE;AACF,GAAuB;AACrB,QAAM,EAAE,eAAAK,GAAe,cAAAC,EAAA,IAAiBV,EAAkB,MACpD,EAAE,8BAAAW,MAAiCX,EAAkB,QACrD,EAAE,EAAA,IAAMY,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA,GACbC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GACvFQ,IAAaC,EAAA,GAEb,EAAE,QAAAC,MAAWjB,EAAkB,MAC/BkB,IAAcC,EAAS;AAAA,IAC3B,SAASnB,EAAkB,KAAK,kBAAkB,YAAY;AAAA,IAC9D,MAAM;AAAA,EAAA,CACP,GAEK;AAAA,IACJ,sBAAAoB;AAAA,IACA,yBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACEC,EAAqB,OAAMC,MAAQ;AACrC,UAAMC,IAAS,MAAM7B,EAAkB,QAAQ,SAAS4B,CAAI;AAC5D,IAAIC,KACF9B,EAAQ+B,EAAgB,+BAA+BD,EAAO,IAAI;AAAA,EAEtE,CAAC,GAEK,EAAE,GAAGE,EAAA,IAAkBC,GAAY;AAAA,IACvC,MAAMtB;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAA;AAAA,MACxC,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAA;AAAA,MACtD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAA;AAAA,MAClD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAAuB,MAAe;AACrB,gBAAMC,IACJzB,EAAc,QAAQ,KAAK,CAAA0B,MAASA,EAAM,SAASF,EAAY,IAAI,GAAG,eAAe,GACjFG,IACJ3B,EAAc,YAAY4B,EAAS,SAC9BC,EAAeJ,CAAW,KAAK,IAChCA;AACN,iBAAOnB,EAAOqB,CAAY;AAAA,QAC5B;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU,CAAAH,MACR,gBAAA1B;AAAA,MAACgC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAhB,EAAwB;AAAA,gBACtB,MAAMU,EAAY;AAAA,gBAClB,qBAAqBA,EAAY;AAAA,cAAA,CAClC;AAAA,YACH;AAAA,YACA,MAAM,gBAAA1B,EAACiC,GAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAClC,CAEH,GAEKC,IAAqB,CAACC,MAC1B,gBAAAnC;AAAA,IAACM,EAAW;AAAA,IAAX;AAAA,MACE,GAAG6B;AAAA,MACJ,SAASA,EAAM,QAAQ,IAAI,CAAAC,OAAW;AAAA,QACpC,GAAGA;AAAA,QACH,aACEA,EAAO,UAAUC,EAAgB,gBAE3B,EADF9C,IACI,6BACA,8BAD0B,IAG5B,EADFA,IACI,qBACA,sBADkB;AAAA,MACI,EAChC;AAAA,IAAA;AAAA,EAAA,GAIA+C,IAAiB,YAAY;AACjC,UAAMhB,IAAS,MAAM3B,EAAkB,QAAQ,SAAA;AAC/C,IAAI2B,MACF9B,EAAQ+B,EAAgB,iCAAiCD,EAAO,IAAI,GACpE9B,EAAQ+B,EAAgB,4BAA4B;AAAA,EAExD,GAEMgB,IACJ1B,MAAgBwB,EAAgB,iBAAiBlC,EAAa,WAAW,GACrEqC,IAAe3B,MAAgBwB,EAAgB,SAASlC,EAAa,SAAS,GAE9EsC,IACJ5B,MAAgBwB,EAAgB,iBAAiBlC,EAAa,SAAS,sBACpEuC,GAAA,EACE,UAAA;AAAA,IAAAvC,EAAa,SAAS,KACrB,gBAAAH;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAd,EAAQ+B,EAAgB,sBAAsB;AAAA,QAChD;AAAA,QAEC,YAAE,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjB,gBAAAvB;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAd,EAAQ+B,EAAgB,4BAA4B;AAAA,QACtD;AAAA,QAEC,YAAE,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,EAAA,CACF,IACE;AAEN,SACE,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAA5C,EAACD,KAAW,OAAOF,EAAc,QAC/B,UAAA,gBAAA8C,EAACE,GAAA,EAAgB,gBAAgBlD,GAC9B,UAAA;AAAA,MAAAsB,MAAyB,QACxB,gBAAAjB;AAAA,QAACM,EAAW;AAAA,QAAX;AAAA,UACC,QAAO;AAAA,UACP,OAAO,EAAE,iCAAiC,EAAE,SAASW,GAAsB;AAAA,UAC3E,WAAW,MAAM;AACf,YAAAC,EAAwB,IAAI;AAAA,UAC9B;AAAA,UACA,uBAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGzB,gBAAAyB,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACrC,EAAW;AAAA,UAAX;AAAA,YACC,0BAASA,EAAW,eAAX,EAAyB,OAAO,EAAE,OAAO,GAAG;AAAA,YACrD,aAAa;AAAA,YACb,QAAAmC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAzC,EAAC,OAAA,EAAI,WAAW+C,EAAO,SACrB,UAAA,gBAAA/C;AAAA,gBAACY,EAAO;AAAA,gBAAP;AAAA,kBACC,OAAO,EAAE,uBAAuB;AAAA,kBAChC,gBAAgB,CAACoC,MACfA,MAAUX,EAAgB,gBACtB,EAAE,oBAAoB,IACtB,EAAE,YAAY;AAAA,kBAEpB,gBAAgBH;AAAA,gBAAA;AAAA,cAAA,GAEpB;AAAA,cACCrB,MAAgBwB,EAAgB,iBAAiBlC,EAAa,SAAS,KACtE,gBAAAH,EAACiD,IAAA,EAAS,aAAW,IAAC,OAAO,EAAE,uBAAuB,GAAI,GAAGzB,GAAe;AAAA,cAE7Ee,KACC,gBAAAvC,EAAC,OAAA,EAAI,WAAW+C,EAAO,SACrB,UAAA,gBAAA/C;AAAA,gBAACkD;AAAA,gBAAA;AAAA,kBACC,YAAA5D;AAAA,kBACA,YAAAoB;AAAA,kBACA,SAAS,CAAAyC,MAAQ;AACf,oBAAA3D,EAAQ+B,EAAgB,+BAA+B4B,CAAI;AAAA,kBAC7D;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHX,uBACEE,GAAA,EACC,UAAA,gBAAA1C;AAAA,UAACM,EAAW;AAAA,UAAX;AAAA,YACC,MAAK;AAAA,YACL,WAAWX,EAAkB,OAAO;AAAA,YACpC,SAAS,MAAM;AACb,cAAK2C,EAAA;AAAA,YACP;AAAA,YAEC,YAAE,WAAW;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAAtC;AAAA,MAACoD;AAAA,MAAA;AAAA,QACC,sBAAArC;AAAA,QACA,wBAAwBX,MAAiCW,GAAsB;AAAA,QAC/E,SAAS,MAAM;AACb,UAAAC,EAAwB,IAAI;AAAA,QAC9B;AAAA,QACA,WAAW,MAAM;AACf,UAAKG,EAAA;AAAA,QACP;AAAA,QACA,OAAO,EAAE,+BAA+B;AAAA,QACxC,aAAa,EAAE,uCAAuC;AAAA,UACpD,SAASJ,GAAsB,uBAAuB;AAAA,QAAA,CACvD;AAAA,QACD,cAAc,EAAE,oCAAoC;AAAA,QACpD,aAAa,EAAE,mCAAmC;AAAA,MAAA;AAAA,IAAA;AAAA,EACpD,GACF;AAEJ;"}
+{"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 { LoaderComponentType } from '@/components/Base'\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  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: 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} LoaderComponent={LoaderComponent} />\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      LoaderComponent={LoaderComponent}\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  LoaderComponent,\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} LoaderComponent={LoaderComponent}>\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","LoaderComponent","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/PaymentMethod.d.ts

@@ -46,6 +46,6 @@ export interface PaymentMethodProps extends BaseComponentInterface<'Employee.Pay
  * }
  * ```
  */
-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;
 /** @internal */
 export declare function PaymentMethodContextual(): import("react").JSX.Element;

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

@@ -1,40 +1,67 @@
-import { jsx as m } from "react/jsx-runtime";
-import { createMachine as i } from "robot3";
+import { jsx as n } from "react/jsx-runtime";
 import { useMemo as p } from "react";
 import { ListViewContextual as a } from "./PaymentMethodComponents.js";
 import { paymentMethodStateMachine as u } from "./paymentMethodStateMachine.js";
-import { Flow as f } from "../../../Flow/Flow.js";
-import { useFlow as c } from "../../../Flow/useFlow.js";
-import { BaseBoundaries as s } from "../../../Base/Base.js";
+import { createMachine as f } from "../../../../lib/state-machine/core.js";
+import { Flow as c } from "../../../Flow/Flow.js";
+import { useFlow as s } from "../../../Flow/useFlow.js";
+import { BaseBoundaries as l } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
-import { useComponentDictionary as l, useI18n as y } from "../../../../i18n/I18n.js";
+import { useComponentDictionary as y, useI18n as h } from "../../../../i18n/I18n.js";
 import { ensureRequired as d } from "../../../../helpers/ensureRequired.js";
-function h({ employeeId: e, isAdmin: o = !1, onEvent: t }) {
-  y("Employee.PaymentMethod");
-  const n = p(
-    () => i(
+function M({
+  employeeId: e,
+  isAdmin: o = !1,
+  onEvent: t,
+  LoaderComponent: m
+}) {
+  h("Employee.PaymentMethod");
+  const r = p(
+    () => f(
       "list",
       u,
-      (r) => ({
-        ...r,
+      (i) => ({
+        ...i,
         component: a,
         employeeId: e,
-        isAdmin: o
+        isAdmin: o,
+        LoaderComponent: m
       })
     ),
-    [e, o]
+    [e, o, m]
   );
-  return /* @__PURE__ */ m(f, { machine: n, onEvent: t });
+  return /* @__PURE__ */ n(c, { machine: r, onEvent: t });
 }
-function M({ dictionary: e, FallbackComponent: o, ...t }) {
-  return l("Employee.PaymentMethod", e), /* @__PURE__ */ m(s, { componentName: "Employee.PaymentMethod", FallbackComponent: o, children: /* @__PURE__ */ m(h, { ...t }) });
+function P({
+  dictionary: e,
+  FallbackComponent: o,
+  LoaderComponent: t,
+  ...m
+}) {
+  return y("Employee.PaymentMethod", e), /* @__PURE__ */ n(
+    l,
+    {
+      componentName: "Employee.PaymentMethod",
+      FallbackComponent: o,
+      LoaderComponent: t,
+      children: /* @__PURE__ */ n(M, { LoaderComponent: t, ...m })
+    }
+  );
 }
-function D() {
-  const { employeeId: e, onEvent: o, isAdmin: t } = c();
-  return /* @__PURE__ */ m(M, { employeeId: d(e), onEvent: o, isAdmin: t });
+function N() {
+  const { employeeId: e, onEvent: o, isAdmin: t, LoaderComponent: m } = s();
+  return /* @__PURE__ */ n(
+    P,
+    {
+      employeeId: d(e),
+      onEvent: o,
+      isAdmin: t,
+      LoaderComponent: m
+    }
+  );
 }
 export {
-  M as PaymentMethod,
-  D as PaymentMethodContextual
+  P as PaymentMethod,
+  N as PaymentMethodContextual
 };
 //# sourceMappingURL=PaymentMethod.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../../OnboardingFlow/OnboardingFlowComponents'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport { ListViewContextual } from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — onboarding payment method editing operates on live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\nfunction PaymentMethodFlow({ employeeId, isAdmin = false, onEvent }: PaymentMethodProps) {\n  useI18n('Employee.PaymentMethod')\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        'list',\n        paymentMethodStateMachine,\n        (initialContext: PaymentMethodContextInterface) => ({\n          ...initialContext,\n          component: ListViewContextual,\n          employeeId,\n          isAdmin,\n        }),\n      ),\n    [employeeId, isAdmin],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Onboarding step for setting up an employee's payment method.\n *\n * @remarks\n * Lets the employee (or admin acting on their behalf) choose between Direct\n * Deposit and Check, add bank accounts, and configure split-paycheck\n * allocations across multiple accounts.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/paymentMethod/updated` | Fired after the payment method is saved | The updated payment method |\n * | `employee/paymentMethod/done` | Fired when payment method setup is complete and the parent flow can advance | — |\n * | `employee/bankAccount/created` | Fired after a bank account is successfully added | The created bank account |\n * | `employee/bankAccount/deleted` | Fired after a bank account is successfully removed | — |\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method onboarding step.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.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.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries componentName=\"Employee.PaymentMethod\" FallbackComponent={FallbackComponent}>\n      <PaymentMethodFlow {...props} />\n    </BaseBoundaries>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodContextual() {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  return (\n    <PaymentMethod employeeId={ensureRequired(employeeId)} onEvent={onEvent} isAdmin={isAdmin} />\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","onEvent","useI18n","machine","useMemo","createMachine","paymentMethodStateMachine","initialContext","ListViewContextual","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries","PaymentMethodContextual","useFlow","ensureRequired"],"mappings":";;;;;;;;;;;AA2BA,SAASA,EAAkB,EAAE,YAAAC,GAAY,SAAAC,IAAU,IAAO,SAAAC,KAA+B;AACvF,EAAAC,EAAQ,wBAAwB;AAEhC,QAAMC,IAAUC;AAAA,IACd,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAmD;AAAA,QAClD,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,YAAAT;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACD,GAAYC,CAAO;AAAA,EAAA;AAGtB,SAAO,gBAAAS,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAF,EAAA,CAAkB;AACnD;AAoCO,SAASU,EAAc,EAAE,YAAAC,GAAY,mBAAAC,GAAmB,GAAGC,KAA6B;AAC7F,SAAAC,EAAuB,0BAA0BH,CAAU,GAEzD,gBAAAH,EAACO,KAAe,eAAc,0BAAyB,mBAAAH,GACrD,UAAA,gBAAAJ,EAACX,GAAA,EAAmB,GAAGgB,EAAA,CAAO,EAAA,CAChC;AAEJ;AAGO,SAASG,IAA0B;AACxC,QAAM,EAAE,YAAAlB,GAAY,SAAAE,GAAS,SAAAD,EAAA,IAAYkB,EAAA;AACzC,2BACGP,GAAA,EAAc,YAAYQ,EAAepB,CAAU,GAAG,SAAAE,GAAkB,SAAAD,GAAkB;AAE/F;"}
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethod.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../../OnboardingFlow/OnboardingFlowComponents'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport { ListViewContextual } from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { createMachine } from '@/lib/state-machine'\nimport { Flow } from '@/components/Flow/Flow'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { BaseBoundaries, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\n/**\n * Props for {@link PaymentMethod}.\n *\n * @public\n */\nexport interface PaymentMethodProps extends BaseComponentInterface<'Employee.PaymentMethod'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Not used — onboarding payment method editing operates on live data. */\n  defaultValues?: never\n  /** Whether the current viewer is an admin. Defaults to `false`. */\n  isAdmin?: boolean\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = false,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodProps) {\n  useI18n('Employee.PaymentMethod')\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        'list',\n        paymentMethodStateMachine,\n        (initialContext: PaymentMethodContextInterface) => ({\n          ...initialContext,\n          component: ListViewContextual,\n          employeeId,\n          isAdmin,\n          LoaderComponent,\n        }),\n      ),\n    [employeeId, isAdmin, LoaderComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\n/**\n * Onboarding step for setting up an employee's payment method.\n *\n * @remarks\n * Lets the employee (or admin acting on their behalf) choose between Direct\n * Deposit and Check, add bank accounts, and configure split-paycheck\n * allocations across multiple accounts.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/paymentMethod/updated` | Fired after the payment method is saved | The updated payment method |\n * | `employee/paymentMethod/done` | Fired when payment method setup is complete and the parent flow can advance | — |\n * | `employee/bankAccount/created` | Fired after a bank account is successfully added | The created bank account |\n * | `employee/bankAccount/deleted` | Fired after a bank account is successfully removed | — |\n *\n * @param props - See {@link PaymentMethodProps}.\n * @returns The payment method onboarding step.\n * @public\n *\n * @example\n * ```tsx\n * import { EmployeeOnboarding } from '@gusto/embedded-react-sdk'\n *\n * function MyComponent() {\n *   return (\n *     <EmployeeOnboarding.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.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.PaymentMethod\"\n      FallbackComponent={FallbackComponent}\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodFlow LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodContextual() {\n  const { employeeId, onEvent, isAdmin, LoaderComponent } = useFlow<OnboardingContextInterface>()\n  return (\n    <PaymentMethod\n      employeeId={ensureRequired(employeeId)}\n      onEvent={onEvent}\n      isAdmin={isAdmin}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","onEvent","LoaderComponent","useI18n","machine","useMemo","createMachine","paymentMethodStateMachine","initialContext","ListViewContextual","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries","PaymentMethodContextual","useFlow","ensureRequired"],"mappings":";;;;;;;;;;;AA2BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,iBAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,wBAAwB;AAEhC,QAAMC,IAAUC;AAAA,IACd,MACEC;AAAA,MACE;AAAA,MACAC;AAAA,MACA,CAACC,OAAmD;AAAA,QAClD,GAAGA;AAAA,QACH,WAAWC;AAAA,QACX,YAAAV;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACH,GAAYC,GAASE,CAAe;AAAA,EAAA;AAGvC,SAAO,gBAAAQ,EAACC,GAAA,EAAK,SAAAP,GAAkB,SAAAH,EAAA,CAAkB;AACnD;AAoCO,SAASW,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAZ;AAAA,EACA,GAAGa;AACL,GAAuB;AACrB,SAAAC,EAAuB,0BAA0BH,CAAU,GAEzD,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MACA,iBAAAZ;AAAA,MAEA,UAAA,gBAAAQ,EAACZ,GAAA,EAAkB,iBAAAI,GAAmC,GAAGa,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGtE;AAGO,SAASG,IAA0B;AACxC,QAAM,EAAE,YAAAnB,GAAY,SAAAE,GAAS,SAAAD,GAAS,iBAAAE,EAAA,IAAoBiB,EAAA;AAC1D,SACE,gBAAAT;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAYQ,EAAerB,CAAU;AAAA,MACrC,SAAAE;AAAA,MACA,SAAAD;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -1,23 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
-import { BankForm as i } from "./BankForm.js";
-import { ListView as m } from "./ListView.js";
-import { SplitView as p } from "./SplitView.js";
+import { BankForm as m } from "./BankForm.js";
+import { ListView as p } from "./ListView.js";
+import { SplitView as u } from "./SplitView.js";
 import { useFlow as n } from "../../../Flow/useFlow.js";
-function a() {
-  const { employeeId: o, isAdmin: t, onEvent: r } = n();
-  return /* @__PURE__ */ e(m, { employeeId: o, isAdmin: t, onEvent: r });
+function d() {
+  const { employeeId: o, isAdmin: t, onEvent: r, LoaderComponent: i } = n();
+  return /* @__PURE__ */ e(
+    p,
+    {
+      employeeId: o,
+      isAdmin: t,
+      onEvent: r,
+      LoaderComponent: i
+    }
+  );
 }
 function w() {
   const { employeeId: o, onEvent: t } = n();
-  return /* @__PURE__ */ e(i, { employeeId: o, onEvent: t });
+  return /* @__PURE__ */ e(m, { employeeId: o, onEvent: t });
 }
 function x() {
   const { employeeId: o, onEvent: t } = n();
-  return /* @__PURE__ */ e(p, { employeeId: o, onEvent: t });
+  return /* @__PURE__ */ e(u, { employeeId: o, onEvent: t });
 }
 export {
   w as BankFormContextual,
-  a as ListViewContextual,
+  d as ListViewContextual,
   x as SplitViewContextual
 };
 //# sourceMappingURL=PaymentMethodComponents.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethodComponents.tsx"],"sourcesContent":["import { BankForm } from './BankForm'\nimport { ListView } from './ListView'\nimport { SplitView } from './SplitView'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\n\n/** @internal */\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  employeeId: string\n  isAdmin: boolean\n}\n\n/** @internal */\nexport function ListViewContextual() {\n  const { employeeId, isAdmin, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <ListView employeeId={employeeId} isAdmin={isAdmin} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function BankFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <BankForm employeeId={employeeId} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function SplitViewContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <SplitView employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["ListViewContextual","employeeId","isAdmin","onEvent","useFlow","jsx","ListView","BankFormContextual","BankForm","SplitViewContextual","SplitView"],"mappings":";;;;;AAaO,SAASA,IAAqB;AACnC,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,SAAAC,EAAA,IAAYC,EAAA;AACzC,SAAO,gBAAAC,EAACC,GAAA,EAAS,YAAAL,GAAwB,SAAAC,GAAkB,SAAAC,EAAA,CAAkB;AAC/E;AAGO,SAASI,IAAqB;AACnC,QAAM,EAAE,YAAAN,GAAY,SAAAE,EAAA,IAAYC,EAAA;AAChC,SAAO,gBAAAC,EAACG,GAAA,EAAS,YAAAP,GAAwB,SAAAE,EAAA,CAAkB;AAC7D;AAGO,SAASM,IAAsB;AACpC,QAAM,EAAE,YAAAR,GAAY,SAAAE,EAAA,IAAYC,EAAA;AAChC,SAAO,gBAAAC,EAACK,GAAA,EAAU,YAAAT,GAAwB,SAAAE,EAAA,CAAkB;AAC9D;"}
+{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/PaymentMethodComponents.tsx"],"sourcesContent":["import { BankForm } from './BankForm'\nimport { ListView } from './ListView'\nimport { SplitView } from './SplitView'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\n\n/** @internal */\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  employeeId: string\n  isAdmin: boolean\n}\n\n/** @internal */\nexport function ListViewContextual() {\n  const { employeeId, isAdmin, onEvent, LoaderComponent } = useFlow<PaymentMethodContextInterface>()\n  return (\n    <ListView\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\n/** @internal */\nexport function BankFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <BankForm employeeId={employeeId} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function SplitViewContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <SplitView employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["ListViewContextual","employeeId","isAdmin","onEvent","LoaderComponent","useFlow","jsx","ListView","BankFormContextual","BankForm","SplitViewContextual","SplitView"],"mappings":";;;;;AAaO,SAASA,IAAqB;AACnC,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,SAAAC,GAAS,iBAAAC,EAAA,IAAoBC,EAAA;AAC1D,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASI,IAAqB;AACnC,QAAM,EAAE,YAAAP,GAAY,SAAAE,EAAA,IAAYE,EAAA;AAChC,SAAO,gBAAAC,EAACG,GAAA,EAAS,YAAAR,GAAwB,SAAAE,EAAA,CAAkB;AAC7D;AAGO,SAASO,IAAsB;AACpC,QAAM,EAAE,YAAAT,GAAY,SAAAE,EAAA,IAAYE,EAAA;AAChC,SAAO,gBAAAC,EAACK,GAAA,EAAU,YAAAV,GAAwB,SAAAE,EAAA,CAAkB;AAC9D;"}

package/dist/components/Employee/PaymentMethod/onboarding/paymentMethodStateMachine.d.ts

@@ -1,6 +1,6 @@
 /** @internal */
 export declare const paymentMethodStateMachine: {
-    list: import('robot3').MachineState<any>;
-    add: import('robot3').MachineState<any>;
-    split: import('robot3').MachineState<any>;
+    list: import('../../../../lib/state-machine').StateDefinition;
+    add: import('../../../../lib/state-machine').StateDefinition;
+    split: import('../../../../lib/state-machine').StateDefinition;
 };

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

@@ -1,14 +1,15 @@
-import { state as i, transition as o, reduce as n } from "robot3";
-import { ListViewContextual as e, BankFormContextual as m, SplitViewContextual as p } from "./PaymentMethodComponents.js";
+import { ListViewContextual as e, SplitViewContextual as m, BankFormContextual as p } from "./PaymentMethodComponents.js";
+import "react";
+import { state as i, transition as o, reduce as n } from "../../../../lib/state-machine/core.js";
 import { componentEvents as E } from "../../../../shared/constants.js";
-const l = {
+const r = {
   list: i(
     o(
       E.EMPLOYEE_BANK_ACCOUNT_CREATE,
       "add",
       n((t) => ({
         ...t,
-        component: m
+        component: p
       }))
     ),
     o(
@@ -16,7 +17,7 @@ const l = {
       "split",
       n((t) => ({
         ...t,
-        component: p
+        component: m
       }))
     )
   ),
@@ -58,6 +59,6 @@ const l = {
   )
 };
 export {
-  l as paymentMethodStateMachine
+  r as paymentMethodStateMachine
 };
 //# sourceMappingURL=paymentMethodStateMachine.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/paymentMethodStateMachine.ts"],"sourcesContent":["import { reduce, state, transition } from 'robot3'\nimport type { ComponentType } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  ListViewContextual,\n  BankFormContextual,\n  SplitViewContextual,\n} from './PaymentMethodComponents'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\n/** @internal */\nexport const paymentMethodStateMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE,\n      'add',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: BankFormContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_SPLIT_PAYMENT,\n      'split',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: SplitViewContextual as ComponentType,\n      })),\n    ),\n  ),\n  add: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n  ),\n  split: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n  ),\n}\n"],"names":["paymentMethodStateMachine","state","transition","componentEvents","reduce","ctx","BankFormContextual","SplitViewContextual","ListViewContextual"],"mappings":";;;AAYO,MAAMA,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWC;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWE;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,KAAKN;AAAA,IACHC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,OAAOP;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAEJ;"}
+{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/paymentMethodStateMachine.ts"],"sourcesContent":["import type { ComponentType } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  ListViewContextual,\n  BankFormContextual,\n  SplitViewContextual,\n} from './PaymentMethodComponents'\nimport { reduce, state, transition } from '@/lib/state-machine'\nimport { componentEvents } from '@/shared/constants'\nimport type { MachineTransition } from '@/types/Helpers'\n\n/** @internal */\nexport const paymentMethodStateMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE,\n      'add',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: BankFormContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_SPLIT_PAYMENT,\n      'split',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: SplitViewContextual as ComponentType,\n      })),\n    ),\n  ),\n  add: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n  ),\n  split: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce((ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n        ...ctx,\n        component: ListViewContextual as ComponentType,\n      })),\n    ),\n  ),\n}\n"],"names":["paymentMethodStateMachine","state","transition","componentEvents","reduce","ctx","BankFormContextual","SplitViewContextual","ListViewContextual"],"mappings":";;;;AAYO,MAAMA,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWC;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWE;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,KAAKN;AAAA,IACHC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAAA,EAEF,OAAOP;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,IAEJN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC,EAAO,CAACC,OAAuE;AAAA,QAC7E,GAAGA;AAAA,QACH,WAAWG;AAAA,MAAA,EACX;AAAA,IAAA;AAAA,EACJ;AAEJ;"}