@gusto/embedded-react-sdk 0.52.2 → 0.54.0

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodCard.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport styles from './PaymentMethodCard.module.scss'\nimport { DataView, useDataView, Loading } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, PAYMENT_METHODS, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport PercentCircleIcon from '@/assets/icons/percent-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\n/**\n * Props for {@link PaymentMethodCard}.\n *\n * @public\n */\nexport interface PaymentMethodCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on card interactions. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone \"Payment\" card.\n *\n * @remarks\n * Owns its own data fetch and emits the management block's scoped events\n * when the user clicks the card's CTAs or confirms a bank-account deletion.\n * The card has no alert API — alert rendering is the orchestrator's\n * responsibility.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/card/addRequested` | Fired when the user clicks the add-account CTA | — |\n * | `employee/management/paymentMethod/card/splitRequested` | Fired when the user clicks the split-paycheck CTA | — |\n * | `employee/management/paymentMethod/card/bankAccountDeleted` | Fired after a bank account is successfully deleted | The delete response payload |\n *\n * @param props - See {@link PaymentMethodCardProps}.\n * @returns The \"Payment\" card.\n * @public\n */\nexport function PaymentMethodCard(props: PaymentMethodCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.PaymentMethod\">\n      <PaymentMethodCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaymentMethodCardContent({ employeeId, onEvent }: PaymentMethodCardProps) {\n  useI18n('Employee.Management.PaymentMethod')\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList])\n\n  if (paymentMethodList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors}>\n        <Components.Box\n          header={\n            <Components.BoxHeader\n              title={t('title')}\n              action={\n                <div className={styles.headerAction}>\n                  <Components.Button variant=\"secondary\" icon={<PlusCircleIcon />} isDisabled>\n                    {t('addBankAccountCta')}\n                  </Components.Button>\n                </div>\n              }\n            />\n          }\n        >\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaymentMethodCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface PaymentMethodCardReadyProps extends PaymentMethodCardProps {\n  paymentMethodList: UsePaymentMethodListReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaymentMethodCardReady({\n  onEvent,\n  paymentMethodList,\n  errorHandling,\n}: PaymentMethodCardReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n\n  const { pendingDeleteAccount, setPendingDeleteAccount, handleConfirmDelete } =\n    useDeleteBankAccount(async uuid => {\n      const result = await paymentMethodList.actions.onDelete(uuid)\n      if (result) {\n        onEvent(\n          componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,\n          result.data,\n        )\n      }\n    })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      {\n        key: 'name',\n        title: t('nicknameColumn'),\n        render: bankAccount => (\n          <>\n            {bankAccount.name}\n            <Components.Text variant=\"supporting\" size=\"sm\">\n              {bankAccount.hiddenAccountNumber}\n            </Components.Text>\n          </>\n        ),\n      },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\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 isDirectDeposit = paymentMethod.type === PAYMENT_METHODS.directDeposit\n\n  const headerAction = (\n    <div className={styles.headerAction}>\n      {isDirectDeposit && bankAccounts.length > 1 && (\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED)\n          }}\n          icon={<PercentCircleIcon />}\n        >\n          {t('splitCta')}\n        </Components.Button>\n      )}\n      <Components.Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED)\n        }}\n        icon={<PlusCircleIcon />}\n      >\n        {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n      </Components.Button>\n    </div>\n  )\n\n  const isShowingBankAccountTable = isDirectDeposit && bankAccounts.length > 0\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <Components.Box\n          withPadding={!isShowingBankAccountTable}\n          header={<Components.BoxHeader title={t('title')} action={headerAction} />}\n        >\n          {isShowingBankAccountTable ? (\n            <DataView label={t('bankAccountsListLabel')} isWithinBox {...dataViewProps} />\n          ) : (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text variant=\"supporting\">{t('paymentMethodLabel')}</Components.Text>\n              <Components.Text>\n                {isDirectDeposit ? t('directDepositLabel') : t('checkLabel')}\n              </Components.Text>\n            </Flex>\n          )}\n        </Components.Box>\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":["PaymentMethodCard","props","jsx","BaseBoundaries","PaymentMethodCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","styles","PlusCircleIcon","Loading","PaymentMethodCardReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","pendingDeleteAccount","setPendingDeleteAccount","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","jsxs","Fragment","bankAccount","HamburgerMenu","TrashCanSvg","isDirectDeposit","PAYMENT_METHODS","headerAction","PercentCircleIcon","isShowingBankAccountTable","DataView","Flex","DeleteBankAccountDialog"],"mappings":"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"}
+{"version":3,"file":"PaymentMethodCard.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport styles from './PaymentMethodCard.module.scss'\nimport { DataView, useDataView, Loading } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, PAYMENT_METHODS, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport PercentCircleIcon from '@/assets/icons/percent-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\n/**\n * Props for {@link PaymentMethodCard}.\n *\n * @public\n */\nexport interface PaymentMethodCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired on card interactions. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone \"Payment\" card.\n *\n * @remarks\n * Owns its own data fetch and emits the management block's scoped events\n * when the user clicks the card's CTAs or confirms a bank-account deletion.\n * The card has no alert API — alert rendering is the orchestrator's\n * responsibility.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/paymentMethod/card/addRequested` | Fired when the user clicks the add-account CTA | — |\n * | `employee/management/paymentMethod/card/splitRequested` | Fired when the user clicks the split-paycheck CTA | — |\n * | `employee/management/paymentMethod/card/bankAccountDeleted` | Fired after a bank account is successfully deleted | The delete response payload |\n *\n * @param props - See {@link PaymentMethodCardProps}.\n * @returns The \"Payment\" card.\n * @public\n */\nexport function PaymentMethodCard({ LoaderComponent, ...props }: PaymentMethodCardProps) {\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.PaymentMethod\"\n      LoaderComponent={LoaderComponent}\n    >\n      <PaymentMethodCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaymentMethodCardContent({\n  employeeId,\n  onEvent,\n  LoaderComponent,\n}: PaymentMethodCardProps) {\n  useI18n('Employee.Management.PaymentMethod')\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList])\n\n  if (paymentMethodList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Components.Box\n          header={\n            <Components.BoxHeader\n              title={t('title')}\n              action={\n                <div className={styles.headerAction}>\n                  <Components.Button variant=\"secondary\" icon={<PlusCircleIcon />} isDisabled>\n                    {t('addBankAccountCta')}\n                  </Components.Button>\n                </div>\n              }\n            />\n          }\n        >\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaymentMethodCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface PaymentMethodCardReadyProps extends PaymentMethodCardProps {\n  paymentMethodList: UsePaymentMethodListReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaymentMethodCardReady({\n  onEvent,\n  paymentMethodList,\n  errorHandling,\n  LoaderComponent,\n}: PaymentMethodCardReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n\n  const { pendingDeleteAccount, setPendingDeleteAccount, handleConfirmDelete } =\n    useDeleteBankAccount(async uuid => {\n      const result = await paymentMethodList.actions.onDelete(uuid)\n      if (result) {\n        onEvent(\n          componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_BANK_ACCOUNT_DELETED,\n          result.data,\n        )\n      }\n    })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      {\n        key: 'name',\n        title: t('nicknameColumn'),\n        render: bankAccount => (\n          <>\n            {bankAccount.name}\n            <Components.Text variant=\"supporting\" size=\"sm\">\n              {bankAccount.hiddenAccountNumber}\n            </Components.Text>\n          </>\n        ),\n      },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\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 isDirectDeposit = paymentMethod.type === PAYMENT_METHODS.directDeposit\n\n  const headerAction = (\n    <div className={styles.headerAction}>\n      {isDirectDeposit && bankAccounts.length > 1 && (\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_SPLIT_REQUESTED)\n          }}\n          icon={<PercentCircleIcon />}\n        >\n          {t('splitCta')}\n        </Components.Button>\n      )}\n      <Components.Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_CARD_ADD_REQUESTED)\n        }}\n        icon={<PlusCircleIcon />}\n      >\n        {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n      </Components.Button>\n    </div>\n  )\n\n  const isShowingBankAccountTable = isDirectDeposit && bankAccounts.length > 0\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Components.Box\n          withPadding={!isShowingBankAccountTable}\n          header={<Components.BoxHeader title={t('title')} action={headerAction} />}\n        >\n          {isShowingBankAccountTable ? (\n            <DataView label={t('bankAccountsListLabel')} isWithinBox {...dataViewProps} />\n          ) : (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text variant=\"supporting\">{t('paymentMethodLabel')}</Components.Text>\n              <Components.Text>\n                {isDirectDeposit ? t('directDepositLabel') : t('checkLabel')}\n              </Components.Text>\n            </Flex>\n          )}\n        </Components.Box>\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":["PaymentMethodCard","LoaderComponent","props","jsx","BaseBoundaries","PaymentMethodCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","styles","PlusCircleIcon","Loading","PaymentMethodCardReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","pendingDeleteAccount","setPendingDeleteAccount","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","jsxs","Fragment","bankAccount","HamburgerMenu","TrashCanSvg","isDirectDeposit","PAYMENT_METHODS","headerAction","PercentCircleIcon","isShowingBankAccountTable","DataView","Flex","DeleteBankAccountDialog"],"mappings":"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"}

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

@@ -1,39 +1,46 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { useTranslation as a } from "react-i18next";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
 import { PaymentMethodBankForm as i } from "./PaymentMethodBankForm.js";
-import { PaymentMethodSplitForm as p } from "./PaymentMethodSplitForm.js";
-import { PaymentMethodCard as u } from "./PaymentMethodCard.js";
-import { Flex as c } from "../../../Common/Flex/Flex.js";
+import { PaymentMethodSplitForm as u } from "./PaymentMethodSplitForm.js";
+import { PaymentMethodCard as c } from "./PaymentMethodCard.js";
+import { Flex as d } from "../../../Common/Flex/Flex.js";
 import { useFlow as n } from "../../../Flow/useFlow.js";
 import { useComponentContext as E } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { componentEvents as M } from "../../../../shared/constants.js";
-function D() {
-  const { employeeId: o, onEvent: t, successAlert: m } = n(), { t: r } = a("Employee.Management.PaymentMethod"), s = E();
-  return /* @__PURE__ */ l(c, { flexDirection: "column", gap: 16, children: [
+function I() {
+  const { employeeId: t, onEvent: o, successAlert: m, LoaderComponent: r } = n(), { t: s } = p("Employee.Management.PaymentMethod"), l = E();
+  return /* @__PURE__ */ a(d, { flexDirection: "column", gap: 16, children: [
     m ? /* @__PURE__ */ e(
-      s.Alert,
+      l.Alert,
       {
         status: "success",
-        label: r(`alerts.${m}`),
+        label: s(`alerts.${m}`),
         onDismiss: () => {
-          t(M.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null);
+          o(M.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null);
         }
       }
     ) : null,
-    /* @__PURE__ */ e(u, { employeeId: o, onEvent: t })
+    /* @__PURE__ */ e(
+      c,
+      {
+        employeeId: t,
+        onEvent: o,
+        LoaderComponent: r
+      }
+    )
   ] });
 }
-function I() {
-  const { employeeId: o, onEvent: t } = n();
-  return /* @__PURE__ */ e(i, { employeeId: o, onEvent: t });
-}
 function S() {
-  const { employeeId: o, onEvent: t } = n();
-  return /* @__PURE__ */ e(p, { employeeId: o, onEvent: t });
+  const { employeeId: t, onEvent: o } = n();
+  return /* @__PURE__ */ e(i, { employeeId: t, onEvent: o });
+}
+function T() {
+  const { employeeId: t, onEvent: o } = n();
+  return /* @__PURE__ */ e(u, { employeeId: t, onEvent: o });
 }
 export {
-  I as PaymentMethodBankFormContextual,
-  D as PaymentMethodCardContextual,
-  S as PaymentMethodSplitFormContextual
+  S as PaymentMethodBankFormContextual,
+  I as PaymentMethodCardContextual,
+  T as PaymentMethodSplitFormContextual
 };
 //# sourceMappingURL=PaymentMethodComponents.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { PaymentMethodBankForm } from './PaymentMethodBankForm'\nimport { PaymentMethodSplitForm } from './PaymentMethodSplitForm'\nimport { PaymentMethodCard } from './PaymentMethodCard'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents } from '@/shared/constants'\n\n/** @internal */\nexport type PaymentMethodSuccessAlertCode =\n  'bankAccountAdded' | 'bankAccountDeleted' | 'splitUpdated'\n\n/** @internal */\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  employeeId: string\n  isAdmin: boolean\n  successAlert?: PaymentMethodSuccessAlertCode | null\n}\n\n/** @internal */\nexport function PaymentMethodCardContextual() {\n  const { employeeId, onEvent, successAlert } = useFlow<PaymentMethodContextInterface>()\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <PaymentMethodCard employeeId={employeeId} onEvent={onEvent} />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodBankFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <PaymentMethodBankForm employeeId={employeeId} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function PaymentMethodSplitFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <PaymentMethodSplitForm employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["PaymentMethodCardContextual","employeeId","onEvent","successAlert","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","PaymentMethodCard","PaymentMethodBankFormContextual","PaymentMethodBankForm","PaymentMethodSplitFormContextual","PaymentMethodSplitForm"],"mappings":";;;;;;;;;AAqBO,SAASA,IAA8B;AAC5C,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,EAAA,IAAiBC,EAAA,GACxC,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC,GAC1DC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAP,IACC,gBAAAQ;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUF,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQU,EAAgB,oDAAoD,IAAI;AAAA,QAClF;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,IACJ,gBAAAD,EAACE,GAAA,EAAkB,YAAAZ,GAAwB,SAAAC,EAAA,CAAkB;AAAA,EAAA,GAC/D;AAEJ;AAGO,SAASY,IAAkC;AAChD,QAAM,EAAE,YAAAb,GAAY,SAAAC,EAAA,IAAYE,EAAA;AAChC,SAAO,gBAAAO,EAACI,GAAA,EAAsB,YAAAd,GAAwB,SAAAC,EAAA,CAAkB;AAC1E;AAGO,SAASc,IAAmC;AACjD,QAAM,EAAE,YAAAf,GAAY,SAAAC,EAAA,IAAYE,EAAA;AAChC,SAAO,gBAAAO,EAACM,GAAA,EAAuB,YAAAhB,GAAwB,SAAAC,EAAA,CAAkB;AAC3E;"}
+{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { PaymentMethodBankForm } from './PaymentMethodBankForm'\nimport { PaymentMethodSplitForm } from './PaymentMethodSplitForm'\nimport { PaymentMethodCard } from './PaymentMethodCard'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents } from '@/shared/constants'\n\n/** @internal */\nexport type PaymentMethodSuccessAlertCode =\n  'bankAccountAdded' | 'bankAccountDeleted' | 'splitUpdated'\n\n/** @internal */\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  employeeId: string\n  isAdmin: boolean\n  successAlert?: PaymentMethodSuccessAlertCode | null\n}\n\n/** @internal */\nexport function PaymentMethodCardContextual() {\n  const { employeeId, onEvent, successAlert, LoaderComponent } =\n    useFlow<PaymentMethodContextInterface>()\n  const { t } = useTranslation('Employee.Management.PaymentMethod')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYMENT_METHOD_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <PaymentMethodCard\n        employeeId={employeeId}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function PaymentMethodBankFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <PaymentMethodBankForm employeeId={employeeId} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function PaymentMethodSplitFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <PaymentMethodSplitForm employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["PaymentMethodCardContextual","employeeId","onEvent","successAlert","LoaderComponent","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","PaymentMethodCard","PaymentMethodBankFormContextual","PaymentMethodBankForm","PaymentMethodSplitFormContextual","PaymentMethodSplitForm"],"mappings":";;;;;;;;;AAqBO,SAASA,IAA8B;AAC5C,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,GAAc,iBAAAC,EAAA,IACzCC,EAAA,GACI,EAAE,GAAAC,EAAA,IAAMC,EAAe,mCAAmC,GAC1DC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAR,IACC,gBAAAS;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUH,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQW,EAAgB,oDAAoD,IAAI;AAAA,QAClF;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,IACJ,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,YAAAb;AAAA,QACA,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAGO,SAASW,IAAkC;AAChD,QAAM,EAAE,YAAAd,GAAY,SAAAC,EAAA,IAAYG,EAAA;AAChC,SAAO,gBAAAO,EAACI,GAAA,EAAsB,YAAAf,GAAwB,SAAAC,EAAA,CAAkB;AAC1E;AAGO,SAASe,IAAmC;AACjD,QAAM,EAAE,YAAAhB,GAAY,SAAAC,EAAA,IAAYG,EAAA;AAChC,SAAO,gBAAAO,EAACM,GAAA,EAAuB,YAAAjB,GAAwB,SAAAC,EAAA,CAAkB;AAC3E;"}

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

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

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

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

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

@@ -1,10 +1,12 @@
 import { EventType } from '../../../../shared/constants';
 import { OnEventType } from '../../../Base/useBase';
+import { LoaderComponentType } from '../../../Base';
 interface ListViewProps {
     employeeId: string;
     isAdmin: boolean;
     onEvent: OnEventType<EventType, unknown>;
+    LoaderComponent?: LoaderComponentType;
 }
 /** @internal */
-export declare function ListView({ employeeId, isAdmin, onEvent }: ListViewProps): import("react").JSX.Element;
+export declare function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: ListViewProps): import("react").JSX.Element;
 export {};

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

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