@gusto/embedded-react-sdk 0.44.2 → 0.46.0

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

@@ -1 +1 @@
-{"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport styles from './OnboardingSummary.module.scss'\nimport {\n  BaseComponent,\n  useBase,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, EmployeeOnboardingStatus } from '@/shared/constants'\nimport SuccessCheck from '@/assets/icons/success_check.svg?react'\nimport UncheckedCircular from '@/assets/icons/unchecked_circular.svg?react'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.OnboardingSummary'> {\n  employeeId: string\n  isAdmin?: boolean\n}\n\nexport function OnboardingSummary(props: SummaryProps & BaseComponentInterface) {\n  useI18n('Employee.OnboardingSummary')\n  useComponentDictionary('Employee.OnboardingSummary', props.dictionary)\n\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false }: SummaryProps) => {\n  const { onEvent } = useBase()\n  const { t } = useTranslation('Employee.OnboardingSummary')\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const { firstName, lastName } = employee!\n\n  const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n  const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n  const hasMissingRequirements =\n    onboardingSteps?.length &&\n    onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n  const isOnboardingCompleted =\n    onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED ||\n    (!hasMissingRequirements &&\n      onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n  const sanitizedFirstName = useMemo(() => DOMPurify.sanitize(firstName), [firstName])\n  const sanitizedLastName = useMemo(() => DOMPurify.sanitize(lastName), [lastName])\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          {isAdmin ? (\n            isOnboardingCompleted ? (\n              <>\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('onboardedAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text className={styles.description}>\n                  {t('onboardedAdminDescription')}\n                </Components.Text>\n              </>\n            ) : (\n              <Flex flexDirection=\"column\" alignItems=\"flex-start\" gap={8}>\n                <Components.Heading as=\"h2\">{t('missingRequirementsSubtitle')}</Components.Heading>\n                <Components.Text>{t('missingRequirementsDescription')}</Components.Text>\n                <ul className={styles.list}>\n                  {onboardingSteps\n                    ?.sort((a, b) => (a.completed ? -1 : 1))\n                    .map(step => {\n                      return (\n                        <li key={step.id} className={styles.listItem}>\n                          {step.completed ? (\n                            <SuccessCheck width={24} height={24} className={styles.listItemIcon} />\n                          ) : (\n                            <UncheckedCircular\n                              width={24}\n                              height={24}\n                              className={classNames(styles.listItemIcon, styles.incomplete)}\n                            />\n                          )}\n                          <Components.Heading as=\"h4\">\n                            {/* @ts-expect-error: id has typeof keyof steps */}\n                            {t(`steps.${step.id}`, step.title)}\n                          </Components.Heading>\n                        </li>\n                      )\n                    })}\n                </ul>\n              </Flex>\n            )\n          ) : (\n            <>\n              <Components.Heading as=\"h2\" textAlign=\"center\">\n                {t('onboardedSelfSubtitle')}\n              </Components.Heading>\n              <Components.Text className={styles.description}>\n                {t('onboardedSelfDescription')}\n              </Components.Text>\n              <ActionsLayout justifyContent={isOnboardingCompleted ? 'center' : 'start'}>\n                <Components.Button\n                  variant=\"secondary\"\n                  onClick={() => {\n                    onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n                  }}\n                >\n                  {t('doneCta')}\n                </Components.Button>\n              </ActionsLayout>\n            </>\n          )}\n        </Flex>\n\n        {isAdmin && (\n          <ActionsLayout justifyContent={'center'}>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEES_LIST)\n              }}\n            >\n              {t('doneCta')}\n            </Components.Button>\n          </ActionsLayout>\n        )}\n      </Flex>\n    </section>\n  )\n}\n\nexport const OnboardingSummaryContextual = () => {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  const { t } = useTranslation('common')\n\n  if (!employeeId) {\n    throw new Error(\n      t('errors.missingParamsOrContext', {\n        component: 'Summary',\n        param: 'employeeId',\n        provider: 'FlowProvider',\n      }),\n    )\n  }\n  return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["OnboardingSummary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","className","isAdmin","onEvent","useBase","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","sanitizedFirstName","useMemo","DOMPurify","sanitizedLastName","jsxs","Flex","Fragment","styles","a","b","SuccessCheck","UncheckedCircular","classNames","ActionsLayout","componentEvents","OnboardingSummaryContextual","useFlow","t"],"mappings":"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"}
+{"version":3,"file":"OnboardingSummary.js","sources":["../../../../src/components/Employee/OnboardingSummary/OnboardingSummary.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { useEmployeesGetOnboardingStatusSuspense } from '@gusto/embedded-api/react-query/employeesGetOnboardingStatus'\nimport DOMPurify from 'dompurify'\nimport { useMemo } from 'react'\nimport type { OnboardingContextInterface } from '../OnboardingFlow/OnboardingFlowComponents'\nimport styles from './OnboardingSummary.module.scss'\nimport {\n  BaseComponent,\n  useBase,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base'\nimport { Flex, ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, EmployeeOnboardingStatus } from '@/shared/constants'\nimport SuccessCheck from '@/assets/icons/success_check.svg?react'\nimport UncheckedCircular from '@/assets/icons/unchecked_circular.svg?react'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useComponentDictionary } from '@/i18n/I18n'\n\ninterface SummaryProps extends CommonComponentInterface<'Employee.OnboardingSummary'> {\n  employeeId: string\n  isAdmin?: boolean\n}\n\nexport function OnboardingSummary(props: SummaryProps & BaseComponentInterface) {\n  useI18n('Employee.OnboardingSummary')\n  useComponentDictionary('Employee.OnboardingSummary', props.dictionary)\n\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ employeeId, className, isAdmin = false }: SummaryProps) => {\n  const { onEvent } = useBase()\n  const { t } = useTranslation('Employee.OnboardingSummary')\n  const Components = useComponentContext()\n\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n  const { firstName, lastName } = employee!\n\n  const { data } = useEmployeesGetOnboardingStatusSuspense({ employeeId })\n  const { onboardingStatus, onboardingSteps } = data.employeeOnboardingStatus!\n\n  const hasMissingRequirements =\n    onboardingSteps?.length &&\n    onboardingSteps.findIndex(step => step.required && !step.completed) > -1\n\n  const isOnboardingCompleted =\n    onboardingStatus === EmployeeOnboardingStatus.ONBOARDING_COMPLETED ||\n    (!hasMissingRequirements &&\n      onboardingStatus === EmployeeOnboardingStatus.SELF_ONBOARDING_PENDING_INVITE)\n\n  const sanitizedFirstName = useMemo(() => DOMPurify.sanitize(firstName), [firstName])\n  const sanitizedLastName = useMemo(() => DOMPurify.sanitize(lastName), [lastName])\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={20}>\n        <Flex alignItems=\"center\" flexDirection=\"column\" gap={8}>\n          {isAdmin ? (\n            isOnboardingCompleted ? (\n              <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                <Components.Heading as=\"h2\" textAlign=\"center\">\n                  {t('onboardedAdminSubtitle', {\n                    name: `${sanitizedFirstName} ${sanitizedLastName}`,\n                    interpolation: { escapeValue: false },\n                  })}\n                </Components.Heading>\n                <Components.Text variant=\"supporting\" className={styles.description}>\n                  {t('onboardedAdminDescription')}\n                </Components.Text>\n              </Flex>\n            ) : (\n              <Flex flexDirection=\"column\" alignItems=\"flex-start\" gap={8}>\n                <Components.Heading as=\"h2\">{t('missingRequirementsSubtitle')}</Components.Heading>\n                <Components.Text>{t('missingRequirementsDescription')}</Components.Text>\n                <ul className={styles.list}>\n                  {onboardingSteps\n                    ?.sort((a, b) => (a.completed ? -1 : 1))\n                    .map(step => {\n                      return (\n                        <li key={step.id} className={styles.listItem}>\n                          {step.completed ? (\n                            <SuccessCheck width={24} height={24} className={styles.listItemIcon} />\n                          ) : (\n                            <UncheckedCircular\n                              width={24}\n                              height={24}\n                              className={classNames(styles.listItemIcon, styles.incomplete)}\n                            />\n                          )}\n                          <Components.Heading as=\"h4\">\n                            {/* @ts-expect-error: id has typeof keyof steps */}\n                            {t(`steps.${step.id}`, step.title)}\n                          </Components.Heading>\n                        </li>\n                      )\n                    })}\n                </ul>\n              </Flex>\n            )\n          ) : (\n            <>\n              <Flex flexDirection=\"column\" gap={20} alignItems=\"center\">\n                <Flex flexDirection=\"column\" gap={4} alignItems=\"center\">\n                  <Components.Heading as=\"h2\" textAlign=\"center\">\n                    {t('onboardedSelfSubtitle')}\n                  </Components.Heading>\n                  <Components.Text variant=\"supporting\" className={styles.description}>\n                    {t('onboardedSelfDescription')}\n                  </Components.Text>\n                </Flex>\n                <ActionsLayout justifyContent={isOnboardingCompleted ? 'center' : 'start'}>\n                  <Components.Button\n                    variant=\"secondary\"\n                    onClick={() => {\n                      onEvent(componentEvents.EMPLOYEE_ONBOARDING_DONE)\n                    }}\n                  >\n                    {t('doneCta')}\n                  </Components.Button>\n                </ActionsLayout>\n              </Flex>\n            </>\n          )}\n        </Flex>\n\n        {isAdmin && (\n          <ActionsLayout justifyContent={'center'}>\n            <Components.Button\n              variant=\"secondary\"\n              onClick={() => {\n                onEvent(componentEvents.EMPLOYEES_LIST)\n              }}\n            >\n              {t('doneCta')}\n            </Components.Button>\n          </ActionsLayout>\n        )}\n      </Flex>\n    </section>\n  )\n}\n\nexport const OnboardingSummaryContextual = () => {\n  const { employeeId, onEvent, isAdmin } = useFlow<OnboardingContextInterface>()\n  const { t } = useTranslation('common')\n\n  if (!employeeId) {\n    throw new Error(\n      t('errors.missingParamsOrContext', {\n        component: 'Summary',\n        param: 'employeeId',\n        provider: 'FlowProvider',\n      }),\n    )\n  }\n  return <OnboardingSummary employeeId={employeeId} onEvent={onEvent} isAdmin={isAdmin} />\n}\n"],"names":["OnboardingSummary","props","useI18n","useComponentDictionary","jsx","BaseComponent","Root","employeeId","className","isAdmin","onEvent","useBase","useTranslation","Components","useComponentContext","employee","useEmployeesGetSuspense","firstName","lastName","data","useEmployeesGetOnboardingStatusSuspense","onboardingStatus","onboardingSteps","hasMissingRequirements","step","isOnboardingCompleted","EmployeeOnboardingStatus","sanitizedFirstName","useMemo","DOMPurify","sanitizedLastName","jsxs","Flex","styles","a","b","SuccessCheck","UncheckedCircular","classNames","ActionsLayout","componentEvents","OnboardingSummaryContextual","useFlow","t"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
 import "./types/i18next.d.ts"
-export * from './PaymentMethod';
+export * from './onboarding';

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

@@ -0,0 +1,8 @@
+import { EventType } from '../../../../shared/constants';
+import { OnEventType } from '../../../Base/useBase';
+interface ListViewProps {
+    employeeId: string;
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function ListView({ employeeId, onEvent }: ListViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,138 @@
+import { jsx as e, jsxs as a, Fragment as T } from "react/jsx-runtime";
+import { useTranslation as y } from "react-i18next";
+import { usePaymentMethodList as k } from "../shared/usePaymentMethodList.js";
+import { useDeleteBankAccount as P } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as x } from "../shared/DeleteBankAccountDialog.js";
+import { Flex as s } from "../../../Common/Flex/Flex.js";
+import "classnames";
+import { PAYMENT_METHODS as B, componentEvents as d } from "../../../../shared/constants.js";
+import { BaseLayout as C } from "../../../Base/Base.js";
+import { composeErrorHandler as N } from "../../../../partner-hook-utils/composeErrorHandler.js";
+import { useComponentContext as M } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import _ from "../../../../assets/icons/plus-circle.svg.js";
+import v from "../../../../assets/icons/percent-circle.svg.js";
+import w from "../../../../assets/icons/trashcan.svg.js";
+import { HamburgerMenu as S } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as H } from "../../../Common/DataView/useDataView.js";
+import { DataView as O } from "../../../Common/DataView/DataView.js";
+function te({ employeeId: r, onEvent: i }) {
+  const c = k({ employeeId: r }), l = N([c]);
+  return c.isLoading ? /* @__PURE__ */ e(C, { isLoading: !0, error: l.errors }) : /* @__PURE__ */ e(
+    V,
+    {
+      employeeId: r,
+      onEvent: i,
+      paymentMethodList: c,
+      errorHandling: l
+    }
+  );
+}
+function V({ onEvent: r, paymentMethodList: i, errorHandling: c }) {
+  const { paymentMethod: l, bankAccounts: u } = i.data, { deletePendingBankAccountUuid: f } = i.status, { t } = y("Employee.PaymentMethod"), n = M(), {
+    pendingDeleteAccount: p,
+    setPendingDeleteAccount: h,
+    deletedAccountNumber: g,
+    setDeletedAccountNumber: D,
+    handleConfirmDelete: b
+  } = P(async (o) => {
+    const A = await i.actions.onDelete(o);
+    A && r(d.EMPLOYEE_BANK_ACCOUNT_DELETED, A.data);
+  }), { ...E } = H({
+    data: u,
+    columns: [
+      {
+        key: "name",
+        title: t("nicknameColumn"),
+        render: (o) => /* @__PURE__ */ a(s, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ e(n.Text, { children: o.name }),
+          /* @__PURE__ */ e(n.Text, { variant: "supporting", children: o.hiddenAccountNumber })
+        ] })
+      },
+      { key: "routingNumber", title: t("routingNumberColumn") },
+      { key: "accountType", title: t("accountTypeColumn") }
+    ],
+    itemMenu: (o) => /* @__PURE__ */ e(
+      S,
+      {
+        items: [
+          {
+            label: t("deleteBankAccountCta"),
+            onClick: () => {
+              h({
+                uuid: o.uuid,
+                hiddenAccountNumber: o.hiddenAccountNumber
+              });
+            },
+            icon: /* @__PURE__ */ e(w, { "aria-hidden": !0 })
+          }
+        ],
+        triggerLabel: t("hamburgerTitle")
+      }
+    )
+  }), m = l.type === B.directDeposit, L = /* @__PURE__ */ a(s, { gap: 8, alignItems: "center", children: [
+    m && u.length > 1 && /* @__PURE__ */ e(
+      n.Button,
+      {
+        variant: "secondary",
+        onClick: () => {
+          r(d.EMPLOYEE_SPLIT_PAYCHECK);
+        },
+        icon: /* @__PURE__ */ e(v, {}),
+        children: t("splitCta")
+      }
+    ),
+    /* @__PURE__ */ e(
+      n.Button,
+      {
+        variant: "secondary",
+        onClick: () => {
+          r(d.EMPLOYEE_BANK_ACCOUNT_CREATE);
+        },
+        icon: /* @__PURE__ */ e(_, {}),
+        children: u.length > 0 ? t("addAnotherCta") : t("addBankAccountCta")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ a(T, { children: [
+    /* @__PURE__ */ e(C, { error: c.errors, children: /* @__PURE__ */ a(
+      n.Box,
+      {
+        header: /* @__PURE__ */ e(n.BoxHeader, { title: t("managementTitle"), action: L }),
+        children: [
+          g !== null && /* @__PURE__ */ e(
+            n.Alert,
+            {
+              status: "success",
+              label: t("deleteBankAccountSuccessAlert", { account: g }),
+              onDismiss: () => {
+                D(null);
+              },
+              disableScrollIntoView: !0
+            }
+          ),
+          m && u.length > 0 ? /* @__PURE__ */ e(O, { label: t("bankAccountsListLabel"), ...E }) : /* @__PURE__ */ a(s, { flexDirection: "column", gap: 0, children: [
+            /* @__PURE__ */ e(n.Text, { variant: "supporting", children: t("paymentMethodLabel") }),
+            /* @__PURE__ */ e(n.Text, { children: t(m ? "directDepositLabel" : "checkLabel") })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      x,
+      {
+        pendingDeleteAccount: p,
+        isPrimaryActionLoading: f === p?.uuid,
+        onClose: () => {
+          h(null);
+        },
+        onConfirm: () => {
+          b();
+        }
+      }
+    )
+  ] });
+}
+export {
+  te as ListView
+};
+//# sourceMappingURL=ListView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/ListView.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 { DataView, useDataView } from '@/components/Common'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\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\ninterface ListViewProps {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function ListView({ employeeId, onEvent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList])\n\n  if (paymentMethodList.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({ onEvent, paymentMethodList, errorHandling }: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\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      {\n        key: 'name',\n        title: t('nicknameColumn'),\n        render: bankAccount => (\n          <Flex flexDirection=\"column\" gap={0}>\n            <Components.Text>{bankAccount.name}</Components.Text>\n            <Components.Text variant=\"supporting\">\n              {bankAccount.hiddenAccountNumber}\n            </Components.Text>\n          </Flex>\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    <Flex gap={8} alignItems=\"center\">\n      {isDirectDeposit && bankAccounts.length > 1 && (\n        <Components.Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_SPLIT_PAYCHECK)\n          }}\n          icon={<PercentCircleIcon />}\n        >\n          {t('splitCta')}\n        </Components.Button>\n      )}\n      <Components.Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n        }}\n        icon={<PlusCircleIcon />}\n      >\n        {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n      </Components.Button>\n    </Flex>\n  )\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <Components.Box\n          header={<Components.BoxHeader title={t('managementTitle')} action={headerAction} />}\n        >\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          {isDirectDeposit && bankAccounts.length > 0 ? (\n            <DataView label={t('bankAccountsListLabel')} {...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      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","onEvent","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","jsxs","Flex","HamburgerMenu","TrashCanSvg","isDirectDeposit","PAYMENT_METHODS","headerAction","PercentCircleIcon","PlusCircleIcon","Fragment","DataView","DeleteBankAccountDialog"],"mappings":"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"}

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

@@ -0,0 +1,11 @@
+import { BaseComponentInterface, CommonComponentInterface } from '../../../Base';
+import { EventType } from '../../../../shared/constants';
+import { OnEventType } from '../../../Base/useBase';
+export interface PaymentMethodProps extends CommonComponentInterface<'Employee.PaymentMethod'> {
+    employeeId: string;
+    defaultValues?: never;
+    isAdmin?: boolean;
+    initialState?: 'list' | 'add' | 'split';
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function PaymentMethod({ dictionary, FallbackComponent, ...props }: PaymentMethodProps & BaseComponentInterface): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethod.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethod.tsx"],"sourcesContent":["import { createMachine } from 'robot3'\nimport { useMemo } from 'react'\nimport type { PaymentMethodContextInterface } from './PaymentMethodComponents'\nimport {\n  ListViewContextual,\n  BankFormContextual,\n  SplitViewContextual,\n} from './PaymentMethodComponents'\nimport { paymentMethodStateMachine } from './paymentMethodStateMachine'\nimport { Flow } from '@/components/Flow/Flow'\nimport {\n  BaseBoundaries,\n  type BaseComponentInterface,\n  type CommonComponentInterface,\n} from '@/components/Base'\nimport { type EventType } from '@/shared/constants'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { useI18n } from '@/i18n'\nimport type { OnEventType } from '@/components/Base/useBase'\n\nexport interface PaymentMethodProps extends CommonComponentInterface<'Employee.PaymentMethod'> {\n  employeeId: string\n  defaultValues?: never\n  isAdmin?: boolean\n  initialState?: 'list' | 'add' | 'split'\n  onEvent: OnEventType<EventType, unknown>\n}\n\nfunction PaymentMethodFlow({\n  employeeId,\n  isAdmin = true,\n  initialState = 'list',\n  onEvent,\n}: PaymentMethodProps) {\n  useI18n('Employee.PaymentMethod')\n\n  const initialComponent =\n    initialState === 'add'\n      ? BankFormContextual\n      : initialState === 'split'\n        ? SplitViewContextual\n        : ListViewContextual\n\n  const machine = useMemo(\n    () =>\n      createMachine(\n        initialState,\n        paymentMethodStateMachine,\n        (ctx: PaymentMethodContextInterface) => ({\n          ...ctx,\n          component: initialComponent,\n          employeeId,\n          isAdmin,\n        }),\n      ),\n    [employeeId, isAdmin, initialState, initialComponent],\n  )\n\n  return <Flow machine={machine} onEvent={onEvent} />\n}\n\nexport function PaymentMethod({\n  dictionary,\n  FallbackComponent,\n  ...props\n}: PaymentMethodProps & BaseComponentInterface) {\n  useComponentDictionary('Employee.PaymentMethod', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.PaymentMethod.Management\"\n      FallbackComponent={FallbackComponent}\n    >\n      <PaymentMethodFlow {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["PaymentMethodFlow","employeeId","isAdmin","initialState","onEvent","useI18n","initialComponent","BankFormContextual","SplitViewContextual","ListViewContextual","machine","useMemo","createMachine","paymentMethodStateMachine","ctx","jsx","Flow","PaymentMethod","dictionary","FallbackComponent","props","useComponentDictionary","BaseBoundaries"],"mappings":";;;;;;;;;AA4BA,SAASA,EAAkB;AAAA,EACzB,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,cAAAC,IAAe;AAAA,EACf,SAAAC;AACF,GAAuB;AACrB,EAAAC,EAAQ,wBAAwB;AAEhC,QAAMC,IACJH,MAAiB,QACbI,IACAJ,MAAiB,UACfK,IACAC,GAEFC,IAAUC;AAAA,IACd,MACEC;AAAA,MACET;AAAA,MACAU;AAAA,MACA,CAACC,OAAwC;AAAA,QACvC,GAAGA;AAAA,QACH,WAAWR;AAAA,QACX,YAAAL;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IACF;AAAA,IAEJ,CAACD,GAAYC,GAASC,GAAcG,CAAgB;AAAA,EAAA;AAGtD,SAAO,gBAAAS,EAACC,GAAA,EAAK,SAAAN,GAAkB,SAAAN,EAAA,CAAkB;AACnD;AAEO,SAASa,EAAc;AAAA,EAC5B,YAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGC;AACL,GAAgD;AAC9C,SAAAC,EAAuB,0BAA0BH,CAAU,GAEzD,gBAAAH;AAAA,IAACO;AAAA,IAAA;AAAA,MACC,eAAc;AAAA,MACd,mBAAAH;AAAA,MAEA,UAAA,gBAAAJ,EAACf,GAAA,EAAmB,GAAGoB,EAAA,CAAO;AAAA,IAAA;AAAA,EAAA;AAGpC;"}

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

@@ -0,0 +1,8 @@
+import { FlowContextInterface } from '../../../Flow/useFlow';
+export interface PaymentMethodContextInterface extends FlowContextInterface {
+    employeeId: string;
+    isAdmin: boolean;
+}
+export declare function ListViewContextual(): import("react/jsx-runtime").JSX.Element;
+export declare function BankFormContextual(): import("react/jsx-runtime").JSX.Element;
+export declare function SplitViewContextual(): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentMethodComponents.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/PaymentMethodComponents.tsx"],"sourcesContent":["import { BankForm } from '../onboarding/BankForm'\nimport { SplitView } from '../onboarding/SplitView'\nimport { ListView } from './ListView'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\n\nexport interface PaymentMethodContextInterface extends FlowContextInterface {\n  employeeId: string\n  isAdmin: boolean\n}\n\nexport function ListViewContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <ListView employeeId={employeeId} onEvent={onEvent} />\n}\n\nexport function BankFormContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <BankForm employeeId={employeeId} onEvent={onEvent} />\n}\n\nexport function SplitViewContextual() {\n  const { employeeId, onEvent } = useFlow<PaymentMethodContextInterface>()\n  return <SplitView employeeId={employeeId} onEvent={onEvent} />\n}\n"],"names":["ListViewContextual","employeeId","onEvent","useFlow","jsx","ListView","BankFormContextual","BankForm","SplitViewContextual","SplitView"],"mappings":";;;;;AAWO,SAASA,IAAqB;AACnC,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,SAAO,gBAAAC,EAACC,GAAA,EAAS,YAAAJ,GAAwB,SAAAC,EAAA,CAAkB;AAC7D;AAEO,SAASI,IAAqB;AACnC,QAAM,EAAE,YAAAL,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,SAAO,gBAAAC,EAACG,GAAA,EAAS,YAAAN,GAAwB,SAAAC,EAAA,CAAkB;AAC7D;AAEO,SAASM,IAAsB;AACpC,QAAM,EAAE,YAAAP,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,SAAO,gBAAAC,EAACK,GAAA,EAAU,YAAAR,GAAwB,SAAAC,EAAA,CAAkB;AAC9D;"}

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

@@ -0,0 +1,4 @@
+import "./types/i18next.d.ts"
+export { ListView } from './ListView';
+export { PaymentMethod } from './PaymentMethod';
+export type { PaymentMethodProps } from './PaymentMethod';

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

@@ -0,0 +1,5 @@
+export declare const paymentMethodStateMachine: {
+    list: import('robot3').MachineState<any>;
+    add: import('robot3').MachineState<any>;
+    split: import('robot3').MachineState<any>;
+};

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

@@ -0,0 +1,75 @@
+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 { componentEvents as E } from "../../../../shared/constants.js";
+const l = {
+  list: i(
+    o(
+      E.EMPLOYEE_BANK_ACCOUNT_CREATE,
+      "add",
+      n(
+        (t) => ({
+          ...t,
+          component: m
+        })
+      )
+    ),
+    o(
+      E.EMPLOYEE_SPLIT_PAYCHECK,
+      "split",
+      n(
+        (t) => ({
+          ...t,
+          component: p
+        })
+      )
+    )
+  ),
+  add: i(
+    o(
+      E.EMPLOYEE_BANK_ACCOUNT_CREATED,
+      "list",
+      n(
+        (t) => ({
+          ...t,
+          component: e
+        })
+      )
+    ),
+    o(
+      E.CANCEL,
+      "list",
+      n(
+        (t) => ({
+          ...t,
+          component: e
+        })
+      )
+    )
+  ),
+  split: i(
+    o(
+      E.EMPLOYEE_PAYMENT_METHOD_UPDATED,
+      "list",
+      n(
+        (t) => ({
+          ...t,
+          component: e
+        })
+      )
+    ),
+    o(
+      E.CANCEL,
+      "list",
+      n(
+        (t) => ({
+          ...t,
+          component: e
+        })
+      )
+    )
+  )
+};
+export {
+  l as paymentMethodStateMachine
+};
+//# sourceMappingURL=paymentMethodStateMachine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paymentMethodStateMachine.js","sources":["../../../../../src/components/Employee/PaymentMethod/management/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\nexport const paymentMethodStateMachine = {\n  list: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE,\n      'add',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: BankFormContextual as ComponentType,\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.EMPLOYEE_SPLIT_PAYCHECK,\n      'split',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: SplitViewContextual as ComponentType,\n        }),\n      ),\n    ),\n  ),\n  add: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED,\n      'list',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: ListViewContextual as ComponentType,\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: ListViewContextual as ComponentType,\n        }),\n      ),\n    ),\n  ),\n  split: state<MachineTransition>(\n    transition(\n      componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED,\n      'list',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: ListViewContextual as ComponentType,\n        }),\n      ),\n    ),\n    transition(\n      componentEvents.CANCEL,\n      'list',\n      reduce(\n        (ctx: PaymentMethodContextInterface): PaymentMethodContextInterface => ({\n          ...ctx,\n          component: ListViewContextual as ComponentType,\n        }),\n      ),\n    ),\n  ),\n}\n"],"names":["paymentMethodStateMachine","state","transition","componentEvents","reduce","ctx","BankFormContextual","SplitViewContextual","ListViewContextual"],"mappings":";;;AAWO,MAAMA,IAA4B;AAAA,EACvC,MAAMC;AAAA,IACJC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWC;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEFJ;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWE;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,KAAKN;AAAA,IACHC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWG;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEFN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWG;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,OAAOP;AAAA,IACLC;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWG;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,IAEFN;AAAA,MACEC,EAAgB;AAAA,MAChB;AAAA,MACAC;AAAA,QACE,CAACC,OAAuE;AAAA,UACtE,GAAGA;AAAA,UACH,WAAWG;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAEJ;"}

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

@@ -0,0 +1,8 @@
+import { UseBankFormProps } from '../shared/useBankForm';
+import { EventType } from '../../../../shared/constants';
+import { OnEventType } from '../../../Base/useBase';
+export interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {
+    employeeId: string;
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+import { jsx as n, jsxs as s } from "react/jsx-runtime";
+import { useTranslation as p } from "react-i18next";
+import { useBankForm as N } from "../shared/useBankForm/useBankForm.js";
+import "classnames";
+import { componentEvents as m } from "../../../../shared/constants.js";
+import { ActionsLayout as g } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as C } from "../../../Common/Form/Form.js";
+import { BaseLayout as c } from "../../../Base/Base.js";
+import { SDKFormProvider as E } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as f } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+function U({ employeeId: u, onEvent: a, ...l }) {
+  const t = N({ employeeId: u, ...l }), { t: o } = p("Employee.PaymentMethod"), i = f();
+  if (t.isLoading)
+    return /* @__PURE__ */ n(c, { isLoading: !0, error: t.errorHandling.errors });
+  const { Fields: e } = t.form, d = async () => {
+    const r = await t.actions.onSubmit();
+    r && a(m.EMPLOYEE_BANK_ACCOUNT_CREATED, r.data);
+  }, b = () => {
+    a(m.CANCEL);
+  };
+  return /* @__PURE__ */ n(c, { error: t.errorHandling.errors, children: /* @__PURE__ */ n(E, { formHookResult: t, children: /* @__PURE__ */ s(C, { onSubmit: d, children: [
+    /* @__PURE__ */ n(
+      e.Name,
+      {
+        label: o("nameLabel"),
+        validationMessages: { REQUIRED: o("validations.accountName") }
+      }
+    ),
+    /* @__PURE__ */ n(
+      e.RoutingNumber,
+      {
+        label: o("routingNumberLabel"),
+        description: o("routingNumberDescription"),
+        validationMessages: {
+          REQUIRED: o("validations.routingNumber"),
+          INVALID_ROUTING_NUMBER: o("validations.routingNumber")
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      e.AccountNumber,
+      {
+        label: o("accountNumberLabel"),
+        validationMessages: {
+          REQUIRED: o("validations.accountNumber"),
+          INVALID_ACCOUNT_NUMBER: o("validations.accountNumber")
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      e.AccountType,
+      {
+        label: o("accountTypeLabel"),
+        getOptionLabel: (r) => o(r === "Checking" ? "accountTypeChecking" : "accountTypeSavings")
+      }
+    ),
+    /* @__PURE__ */ s(g, { children: [
+      /* @__PURE__ */ n(i.Button, { variant: "secondary", type: "button", onClick: b, children: o("cancelAddCta") }),
+      /* @__PURE__ */ n(i.Button, { type: "submit", isLoading: t.status.isPending, children: o("saveCta") })
+    ] })
+  ] }) }) });
+}
+export {
+  U as BankForm
+};
+//# sourceMappingURL=BankForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useBankForm, type AccountType, type UseBankFormProps } from '../shared/useBankForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\nexport interface BankFormProps extends Omit<UseBankFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function BankForm({ employeeId, onEvent, ...hookProps }: BankFormProps) {\n  const bankForm = useBankForm({ employeeId, ...hookProps })\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n\n  if (bankForm.isLoading) {\n    return <BaseLayout isLoading error={bankForm.errorHandling.errors} />\n  }\n\n  const { Fields } = bankForm.form\n\n  const handleSubmit = async () => {\n    const result = await bankForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, result.data)\n    }\n  }\n\n  const handleCancel = () => {\n    onEvent(componentEvents.CANCEL)\n  }\n\n  return (\n    <BaseLayout error={bankForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={bankForm}>\n        <Form onSubmit={handleSubmit}>\n          <Fields.Name\n            label={t('nameLabel')}\n            validationMessages={{ REQUIRED: t('validations.accountName') }}\n          />\n          <Fields.RoutingNumber\n            label={t('routingNumberLabel')}\n            description={t('routingNumberDescription')}\n            validationMessages={{\n              REQUIRED: t('validations.routingNumber'),\n              INVALID_ROUTING_NUMBER: t('validations.routingNumber'),\n            }}\n          />\n          <Fields.AccountNumber\n            label={t('accountNumberLabel')}\n            validationMessages={{\n              REQUIRED: t('validations.accountNumber'),\n              INVALID_ACCOUNT_NUMBER: t('validations.accountNumber'),\n            }}\n          />\n          <Fields.AccountType\n            label={t('accountTypeLabel')}\n            getOptionLabel={(type: AccountType) =>\n              type === 'Checking' ? t('accountTypeChecking') : t('accountTypeSavings')\n            }\n          />\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={handleCancel}>\n              {t('cancelAddCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={bankForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","bankForm","useBankForm","t","useTranslation","Components","useComponentContext","BaseLayout","Fields","handleSubmit","result","componentEvents","handleCancel","jsx","SDKFormProvider","jsxs","Form","type","ActionsLayout"],"mappings":";;;;;;;;;;AAeO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAWC,EAAY,EAAE,YAAAJ,GAAY,GAAGE,GAAW,GACnD,EAAE,GAAAG,EAAA,IAAMC,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA;AAEnB,MAAIL,EAAS;AACX,6BAAQM,GAAA,EAAW,WAAS,IAAC,OAAON,EAAS,cAAc,QAAQ;AAGrE,QAAM,EAAE,QAAAO,MAAWP,EAAS,MAEtBQ,IAAe,YAAY;AAC/B,UAAMC,IAAS,MAAMT,EAAS,QAAQ,SAAA;AACtC,IAAIS,KACFX,EAAQY,EAAgB,+BAA+BD,EAAO,IAAI;AAAA,EAEtE,GAEME,IAAe,MAAM;AACzB,IAAAb,EAAQY,EAAgB,MAAM;AAAA,EAChC;AAEA,SACE,gBAAAE,EAACN,GAAA,EAAW,OAAON,EAAS,cAAc,QACxC,UAAA,gBAAAY,EAACC,GAAA,EAAgB,gBAAgBb,GAC/B,UAAA,gBAAAc,EAACC,GAAA,EAAK,UAAUP,GACd,UAAA;AAAA,IAAA,gBAAAI;AAAA,MAACL,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,WAAW;AAAA,QACpB,oBAAoB,EAAE,UAAUA,EAAE,yBAAyB,EAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAE/D,gBAAAU;AAAA,MAACL,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,aAAaA,EAAE,0BAA0B;AAAA,QACzC,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAU;AAAA,MAACL,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,oBAAoB;AAAA,QAC7B,oBAAoB;AAAA,UAClB,UAAUA,EAAE,2BAA2B;AAAA,UACvC,wBAAwBA,EAAE,2BAA2B;AAAA,QAAA;AAAA,MACvD;AAAA,IAAA;AAAA,IAEF,gBAAAU;AAAA,MAACL,EAAO;AAAA,MAAP;AAAA,QACC,OAAOL,EAAE,kBAAkB;AAAA,QAC3B,gBAAgB,CAACc,MACOd,EAAtBc,MAAS,aAAe,wBAA2B,oBAAN;AAAA,MAA0B;AAAA,IAAA;AAAA,sBAG1EC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACR,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASO,GAC3D,UAAAT,EAAE,cAAc,EAAA,CACnB;AAAA,MACA,gBAAAU,EAACR,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAWJ,EAAS,OAAO,WACzD,UAAAE,EAAE,SAAS,EAAA,CACd;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,GACF,GACF;AAEJ;"}

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

@@ -0,0 +1,9 @@
+import { EventType } from '../../../../shared/constants';
+import { OnEventType } from '../../../Base/useBase';
+interface ListViewProps {
+    employeeId: string;
+    isAdmin: boolean;
+    onEvent: OnEventType<EventType, unknown>;
+}
+export declare function ListView({ employeeId, isAdmin, onEvent }: ListViewProps): import("react/jsx-runtime").JSX.Element;
+export {};