@gusto/embedded-react-sdk 0.55.5 → 0.55.7

package/dist/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeductionsList.js","sources":["../../../../../../src/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { UseDeductionsListReady } from '../../shared/useDeductionsList'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { useDataView, DataView } from '@/components/Common'\nimport { ActionsLayout } from '@/components/Common'\nimport { EmptyData } from '@/components/Common/EmptyData/EmptyData'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\n/** @internal */\nexport interface DeductionsListProps {\n  className?: string\n  deductionsList: UseDeductionsListReady\n  onAdd: () => void\n  onEdit: (deduction: Garnishment) => void\n  onDelete: (deduction: Garnishment) => void\n  onContinue: () => void\n}\n\n/** @internal */\nexport function DeductionsList({\n  className,\n  deductionsList,\n  onAdd,\n  onEdit,\n  onDelete,\n  onContinue,\n}: DeductionsListProps) {\n  useI18n('Employee.Deductions')\n  const { t } = useTranslation('Employee.Deductions')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const formatPercent = useNumberFormatter('percent')\n\n  const { deductions } = deductionsList.data\n  const isPendingAny = deductionsList.status.isPending\n  const isEmpty = deductions.length === 0\n\n  const { ...dataViewProps } = useDataView({\n    data: deductions,\n    columns: [\n      {\n        key: 'description',\n        title: t('nameColumn'),\n      },\n      {\n        key: 'recurring',\n        title: t('frequencyColumn'),\n        render: deduction => {\n          return deduction.recurring ? t('recurringText') : t('nonRecurringText')\n        },\n      },\n      {\n        key: 'amount',\n        title: t('withheldColumn'),\n        render: deduction =>\n          formatDeductionAmount(deduction, {\n            formatCurrency,\n            formatPercent,\n            formatPerPaycheck: (value: string) => t('recurringAmount', { value }),\n          }),\n      },\n    ],\n    emptyState: () => (\n      <EmptyData title={t('includeDeductionsEmptyState')}>\n        <Components.Button type=\"button\" variant=\"secondary\" onClick={onAdd}>\n          <PlusCircleIcon />\n          {t('addDeductionButtonCta')}\n        </Components.Button>\n      </EmptyData>\n    ),\n    itemMenu: deduction => {\n      return (\n        <HamburgerMenu\n          isLoading={isPendingAny}\n          items={[\n            {\n              label: t('editCta'),\n              onClick: () => {\n                onEdit(deduction)\n              },\n              icon: <PencilSvg aria-hidden />,\n            },\n            {\n              label: t('deleteCta'),\n              onClick: () => {\n                onDelete(deduction)\n              },\n              icon: <TrashCanSvg aria-hidden />,\n            },\n          ]}\n        />\n      )\n    },\n  })\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n          <Components.Text variant=\"supporting\">\n            {t('includeDeductionsDescriptionV2')}\n          </Components.Text>\n        </Flex>\n\n        <DataView label={t('deductionsTableLabel')} {...dataViewProps} />\n        <ActionsLayout>\n          {!isEmpty && (\n            <Components.Button variant=\"secondary\" onClick={onAdd}>\n              <PlusCircleIcon />\n              {t('addDeductionCta')}\n            </Components.Button>\n          )}\n          <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n        </ActionsLayout>\n      </Flex>\n    </section>\n  )\n}\n"],"names":["DeductionsList","className","deductionsList","onAdd","onEdit","onDelete","onContinue","useI18n","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductions","isPendingAny","isEmpty","dataViewProps","useDataView","deduction","formatDeductionAmount","value","jsx","EmptyData","jsxs","PlusCircleIcon","HamburgerMenu","PencilSvg","TrashCanSvg","Flex","DataView","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"DeductionsList.js","sources":["../../../../../../src/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { UseDeductionsListReady } from '../../shared/useDeductionsList'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { useDataView, DataView } from '@/components/Common'\nimport { ActionsLayout } from '@/components/Common'\nimport { EmptyData } from '@/components/Common/EmptyData/EmptyData'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\n/** @internal */\nexport interface DeductionsListProps {\n  className?: string\n  deductionsList: UseDeductionsListReady\n  onAdd: () => void\n  onEdit: (deduction: Garnishment) => void\n  onDelete: (deduction: Garnishment) => void\n  onContinue: () => void\n}\n\n/** @internal */\nexport function DeductionsList({\n  className,\n  deductionsList,\n  onAdd,\n  onEdit,\n  onDelete,\n  onContinue,\n}: DeductionsListProps) {\n  useI18n('Employee.Deductions')\n  const { t } = useTranslation('Employee.Deductions')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const formatPercent = useNumberFormatter('percent')\n\n  const { deductions } = deductionsList.data\n  const isPendingAny = deductionsList.status.isPending\n  const isEmpty = deductions.length === 0\n\n  const { ...dataViewProps } = useDataView({\n    data: deductions,\n    columns: [\n      {\n        key: 'description',\n        title: t('nameColumn'),\n      },\n      {\n        key: 'recurring',\n        title: t('frequencyColumn'),\n        render: deduction => {\n          return deduction.recurring ? t('recurringText') : t('nonRecurringText')\n        },\n      },\n      {\n        key: 'amount',\n        title: t('withheldColumn'),\n        justify: 'end',\n        render: deduction =>\n          formatDeductionAmount(deduction, {\n            formatCurrency,\n            formatPercent,\n            formatPerPaycheck: (value: string) => t('recurringAmount', { value }),\n          }),\n      },\n    ],\n    emptyState: () => (\n      <EmptyData title={t('includeDeductionsEmptyState')}>\n        <Components.Button type=\"button\" variant=\"secondary\" onClick={onAdd}>\n          <PlusCircleIcon />\n          {t('addDeductionButtonCta')}\n        </Components.Button>\n      </EmptyData>\n    ),\n    itemMenu: deduction => {\n      return (\n        <HamburgerMenu\n          isLoading={isPendingAny}\n          items={[\n            {\n              label: t('editCta'),\n              onClick: () => {\n                onEdit(deduction)\n              },\n              icon: <PencilSvg aria-hidden />,\n            },\n            {\n              label: t('deleteCta'),\n              onClick: () => {\n                onDelete(deduction)\n              },\n              icon: <TrashCanSvg aria-hidden />,\n            },\n          ]}\n        />\n      )\n    },\n  })\n\n  return (\n    <section className={className}>\n      <Flex flexDirection=\"column\" gap={32}>\n        <Flex flexDirection=\"column\" gap={2}>\n          <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n          <Components.Text variant=\"supporting\">\n            {t('includeDeductionsDescriptionV2')}\n          </Components.Text>\n        </Flex>\n\n        <DataView label={t('deductionsTableLabel')} {...dataViewProps} />\n        <ActionsLayout>\n          {!isEmpty && (\n            <Components.Button variant=\"secondary\" onClick={onAdd}>\n              <PlusCircleIcon />\n              {t('addDeductionCta')}\n            </Components.Button>\n          )}\n          <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n        </ActionsLayout>\n      </Flex>\n    </section>\n  )\n}\n"],"names":["DeductionsList","className","deductionsList","onAdd","onEdit","onDelete","onContinue","useI18n","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductions","isPendingAny","isEmpty","dataViewProps","useDataView","deduction","formatDeductionAmount","value","jsx","EmptyData","jsxs","PlusCircleIcon","HamburgerMenu","PencilSvg","TrashCanSvg","Flex","DataView","ActionsLayout"],"mappings":"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"}

package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js

@@ -9,15 +9,13 @@ import "@gusto/embedded-api/models/errors/gustoembeddederror";
 import "@gusto/embedded-api/models/errors/sdkvalidationerror";
 import "@gusto/embedded-api/models/errors/unprocessableentityerror";
 import "@gusto/embedded-api/models/errors/httpclienterrors";
-import "dompurify";
-import "../../../../../../contexts/LocaleProvider/useLocale.js";
 import "../../../../../../shared/constants.js";
 import "../../../../../../contexts/ComponentAdapter/useComponentContext.js";
 import "../../../../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as t } from "../../../../../Base/createCompoundContext.js";
-const [v, P] = t("DocumentListContext");
+const [a, f] = t("DocumentListContext");
 export {
-  P as DocumentListProvider,
-  v as useDocumentList
+  f as DocumentListProvider,
+  a as useDocumentList
 };
 //# sourceMappingURL=useDocumentList.js.map

package/dist/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDocumentList.js","sources":["../../../../../../../src/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.ts"],"sourcesContent":["import type { Form } from '@gusto/embedded-api/models/components/form'\nimport { createCompoundContext } from '@/components/Base'\n\ntype DocumentListContextType = {\n  employeeForms: Form[]\n  hasSignedAllForms: boolean\n  handleContinue: () => void\n  handleRequestFormToSign: (form: Form) => void\n  documentListError: Error | null\n  formToSign?: Form\n}\n\nconst [useDocumentList, DocumentListProvider] =\n  createCompoundContext<DocumentListContextType>('DocumentListContext')\nexport { useDocumentList, DocumentListProvider }\n"],"names":["useDocumentList","DocumentListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}
+{"version":3,"file":"useDocumentList.js","sources":["../../../../../../../src/components/Employee/Documents/onboarding/DocumentSigner/DocumentList/useDocumentList.ts"],"sourcesContent":["import type { Form } from '@gusto/embedded-api/models/components/form'\nimport { createCompoundContext } from '@/components/Base'\n\ntype DocumentListContextType = {\n  employeeForms: Form[]\n  hasSignedAllForms: boolean\n  handleContinue: () => void\n  handleRequestFormToSign: (form: Form) => void\n  documentListError: Error | null\n  formToSign?: Form\n}\n\nconst [useDocumentList, DocumentListProvider] =\n  createCompoundContext<DocumentListContextType>('DocumentListContext')\nexport { useDocumentList, DocumentListProvider }\n"],"names":["useDocumentList","DocumentListProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;AAYA,MAAM,CAACA,GAAiBC,CAAoB,IAC1CC,EAA+C,qBAAqB;"}

package/dist/components/Employee/FederalTaxes/shared/FederalTaxesView.js

@@ -3,10 +3,10 @@ import { useTranslation as x, Trans as s } from "react-i18next";
 import { BaseLayout as b } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
 import { Form as I } from "../../../Common/Form/Form.js";
+import { Flex as l } from "../../../Common/Flex/Flex.js";
 import { SDKFormProvider as R } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
 import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as F, useComponentDictionary as S } from "../../../../i18n/I18n.js";
-import { Flex as l } from "../../../Common/Flex/Flex.js";
 function Q({
   federalTaxes: r,
   onSubmit: d,

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

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

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

@@ -1,13 +1,13 @@
 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 { useComponentContext as l } from "../../../../contexts/ComponentAdapter/useComponentContext.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 { Flex as f } from "../../../Common/Flex/Flex.js";
 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 = l();
-  return /* @__PURE__ */ c(f, { flexDirection: "column", gap: 32, children: [
+  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,

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

@@ -3,12 +3,12 @@ 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 { useDeleteBankAccount as j } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as I } from "../shared/DeleteBankAccountDialog.js";
 import { useOnboardingBankFormDictionary as W } from "./useFormDictionary.js";
-import b from "./ListView.module.scss.js";
+import y from "./ListView.module.scss.js";
 import { Flex as G } from "../../../Common/Flex/Flex.js";
-import { ActionsLayout as y } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { ActionsLayout as b } 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";
@@ -21,9 +21,9 @@ 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 }) {
+function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: s }) {
   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(
+  return n.isLoading || d.isLoading ? /* @__PURE__ */ e(k, { isLoading: !0, error: D.errors, LoaderComponent: s }) : /* @__PURE__ */ e(
     it,
     {
       employeeId: m,
@@ -32,7 +32,7 @@ function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: a }) {
       paymentMethodList: n,
       paymentMethodForm: d,
       errorHandling: D,
-      LoaderComponent: a
+      LoaderComponent: s
     }
   );
 }
@@ -40,12 +40,12 @@ function it({
   employeeId: m,
   isAdmin: f,
   onEvent: i,
-  paymentMethodList: a,
+  paymentMethodList: s,
   paymentMethodForm: n,
   errorHandling: d,
   LoaderComponent: D
 }) {
-  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({
+  const { paymentMethod: A, bankAccounts: a } = s.data, { deletePendingBankAccountUuid: B } = s.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"
   }), {
@@ -54,11 +54,11 @@ function it({
     deletedAccountNumber: C,
     setDeletedAccountNumber: N,
     handleConfirmDelete: _
-  } = I(async (o) => {
-    const r = await a.actions.onDelete(o);
+  } = j(async (o) => {
+    const r = await s.actions.onDelete(o);
     r && i(l.EMPLOYEE_BANK_ACCOUNT_DELETED, r.data);
   }), { ...M } = ot({
-    data: s,
+    data: a,
     columns: [
       { key: "name", title: t("nicknameColumn") },
       { key: "routingNumber", title: t("routingNumberColumn") },
@@ -66,6 +66,7 @@ function it({
       {
         key: "splitAmount",
         title: t("allocationColumn"),
+        justify: "end",
         render: (o) => {
           const r = A.splits?.find((H) => H.uuid === o.uuid)?.splitAmount ?? 0, x = A.splitBy === $.amount ? X(r) ?? 0 : r;
           return L(x);
@@ -102,8 +103,8 @@ function it({
   ), w = async () => {
     const o = await n.actions.onSubmit();
     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(
+  }, F = h === u.directDeposit && a.length === 0, S = h === u.check || a.length > 0, Y = h === u.directDeposit && a.length > 0 ? /* @__PURE__ */ p(b, { children: [
+    a.length > 1 && /* @__PURE__ */ e(
       c.Button,
       {
         variant: "secondary",
@@ -147,7 +148,7 @@ function it({
             withPadding: !1,
             footer: Y,
             children: [
-              /* @__PURE__ */ e("div", { className: b.section, children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: y.section, children: /* @__PURE__ */ e(
                 P.Type,
                 {
                   label: t("paymentFieldsetLegend"),
@@ -155,8 +156,8 @@ function it({
                   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(
+              h === u.directDeposit && a.length > 0 && /* @__PURE__ */ e(nt, { isWithinBox: !0, label: t("bankAccountsListLabel"), ...M }),
+              F && /* @__PURE__ */ e("div", { className: y.section, children: /* @__PURE__ */ e(
                 et,
                 {
                   employeeId: m,
@@ -169,7 +170,7 @@ function it({
             ]
           }
         ),
-        S && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+        S && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
           c.Button,
           {
             type: "button",
@@ -183,7 +184,7 @@ function it({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      j,
+      I,
       {
         pendingDeleteAccount: g,
         isPrimaryActionLoading: B === g?.uuid,

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

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n  usePaymentMethodForm,\n  type PaymentMethodType,\n  type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport styles from './ListView.module.scss'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  employeeId,\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n  LoaderComponent,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n  const dictionary = useOnboardingBankFormDictionary()\n\n  const { Fields } = paymentMethodForm.form\n  const watchedType = useWatch({\n    control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n    name: 'type',\n  })\n\n  const {\n    pendingDeleteAccount,\n    setPendingDeleteAccount,\n    deletedAccountNumber,\n    setDeletedAccountNumber,\n    handleConfirmDelete,\n  } = useDeleteBankAccount(async uuid => {\n    const result = await paymentMethodList.actions.onDelete(uuid)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n    }\n  })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        render: bankAccount => {\n          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\n        },\n      },\n    ],\n    itemMenu: bankAccount => (\n      <HamburgerMenu\n        items={[\n          {\n            label: t('deleteBankAccountCta'),\n            onClick: () => {\n              setPendingDeleteAccount({\n                uuid: bankAccount.uuid,\n                hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n              })\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n  })\n\n  const TypeFieldComponent = (props: RadioGroupProps) => (\n    <Components.RadioGroup\n      {...props}\n      options={props.options.map(option => ({\n        ...option,\n        description:\n          option.value === PAYMENT_METHODS.directDeposit\n            ? isAdmin\n              ? t('directDepositDescription')\n              : t('directDepositDescriptionSelf')\n            : isAdmin\n              ? t('checkDescription')\n              : t('checkDescriptionSelf'),\n      }))}\n    />\n  )\n\n  const handleContinue = async () => {\n    const result = await paymentMethodForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n    }\n  }\n\n  const showInlineBankForm =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length === 0\n  const showContinue = watchedType === PAYMENT_METHODS.check || bankAccounts.length > 0\n\n  const footer =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 ? (\n      <ActionsLayout>\n        {bankAccounts.length > 1 && (\n          <Components.Button\n            variant=\"secondary\"\n            type=\"button\"\n            onClick={() => {\n              onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n            }}\n          >\n            {t('splitCta')}\n          </Components.Button>\n        )}\n        <Components.Button\n          variant=\"secondary\"\n          type=\"button\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n          }}\n        >\n          {t('addAnotherCta')}\n        </Components.Button>\n      </ActionsLayout>\n    ) : undefined\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          {deletedAccountNumber !== null && (\n            <Components.Alert\n              status=\"success\"\n              label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n              onDismiss={() => {\n                setDeletedAccountNumber(null)\n              }}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={20}>\n            <Components.FormBox\n              header={<Components.FormBoxHeader title={t('title')} />}\n              withPadding={false}\n              footer={footer}\n            >\n              <div className={styles.section}>\n                <Fields.Type\n                  label={t('paymentFieldsetLegend')}\n                  getOptionLabel={(value: PaymentMethodType) =>\n                    value === PAYMENT_METHODS.directDeposit\n                      ? t('directDepositLabel')\n                      : t('checkLabel')\n                  }\n                  FieldComponent={TypeFieldComponent}\n                />\n              </div>\n              {watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 && (\n                <DataView isWithinBox label={t('bankAccountsListLabel')} {...dataViewProps} />\n              )}\n              {showInlineBankForm && (\n                <div className={styles.section}>\n                  <BankFormBody\n                    employeeId={employeeId}\n                    dictionary={dictionary}\n                    onSaved={data => {\n                      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n                    }}\n                  />\n                </div>\n              )}\n            </Components.FormBox>\n            {showContinue && (\n              <ActionsLayout>\n                <Components.Button\n                  type=\"button\"\n                  isLoading={paymentMethodForm.status.isPending}\n                  onClick={() => {\n                    void handleContinue()\n                  }}\n                >\n                  {t('submitCta')}\n                </Components.Button>\n              </ActionsLayout>\n            )}\n          </Flex>\n        </SDKFormProvider>\n      </BaseLayout>\n      <DeleteBankAccountDialog\n        pendingDeleteAccount={pendingDeleteAccount}\n        isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n        onClose={() => {\n          setPendingDeleteAccount(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDelete()\n        }}\n        title={t('deleteBankAccountDialog.title')}\n        description={t('deleteBankAccountDialog.description', {\n          account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n        })}\n        confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n        cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","LoaderComponent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","dictionary","useOnboardingBankFormDictionary","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleContinue","showInlineBankForm","showContinue","footer","ActionsLayout","jsxs","Fragment","SDKFormProvider","Flex","styles","value","DataView","BankFormBody","data","DeleteBankAccountDialog"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAuCO,SAASA,GAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,SAAAC,GAAS,iBAAAC,KAAkC;AACzF,QAAMC,IAAoBC,EAAqB,EAAE,YAAAL,GAAY,GACvDM,IAAoBC,EAAqB,EAAE,YAAAP,GAAY,GAEvDQ,IAAgBC,EAAoB,CAACL,GAAmBE,CAAiB,CAAC;AAEhF,SAAIF,EAAkB,aAAaE,EAAkB,8BAC3CI,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAc,QAAQ,iBAAAL,GAAkC,IAI5F,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,SAAAC;AAAA,MACA,mBAAAE;AAAA,MACA,mBAAAE;AAAA,MACA,eAAAE;AAAA,MACA,iBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN;AAQA,SAASS,GAAc;AAAA,EACrB,YAAAZ;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAE;AAAA,EACA,mBAAAE;AAAA,EACA,eAAAE;AAAA,EACA,iBAAAL;AACF,GAAuB;AACrB,QAAM,EAAE,eAAAU,GAAe,cAAAC,EAAA,IAAiBV,EAAkB,MACpD,EAAE,8BAAAW,MAAiCX,EAAkB,QACrD,EAAE,EAAA,IAAMY,EAAe,wBAAwB,GAC/CC,IAAaC,EAAA,GACbC,IAASC,EAAmBP,EAAc,YAAY,WAAW,aAAa,SAAS,GACvFQ,IAAaC,EAAA,GAEb,EAAE,QAAAC,MAAWjB,EAAkB,MAC/BkB,IAAcC,EAAS;AAAA,IAC3B,SAASnB,EAAkB,KAAK,kBAAkB,YAAY;AAAA,IAC9D,MAAM;AAAA,EAAA,CACP,GAEK;AAAA,IACJ,sBAAAoB;AAAA,IACA,yBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,yBAAAC;AAAA,IACA,qBAAAC;AAAA,EAAA,IACEC,EAAqB,OAAMC,MAAQ;AACrC,UAAMC,IAAS,MAAM7B,EAAkB,QAAQ,SAAS4B,CAAI;AAC5D,IAAIC,KACF/B,EAAQgC,EAAgB,+BAA+BD,EAAO,IAAI;AAAA,EAEtE,CAAC,GAEK,EAAE,GAAGE,EAAA,IAAkBC,GAAY;AAAA,IACvC,MAAMtB;AAAA,IACN,SAAS;AAAA,MACP,EAAE,KAAK,QAAQ,OAAO,EAAE,gBAAgB,EAAA;AAAA,MACxC,EAAE,KAAK,iBAAiB,OAAO,EAAE,qBAAqB,EAAA;AAAA,MACtD,EAAE,KAAK,eAAe,OAAO,EAAE,mBAAmB,EAAA;AAAA,MAClD;AAAA,QACE,KAAK;AAAA,QACL,OAAO,EAAE,kBAAkB;AAAA,QAC3B,QAAQ,CAAAuB,MAAe;AACrB,gBAAMC,IACJzB,EAAc,QAAQ,KAAK,CAAA0B,MAASA,EAAM,SAASF,EAAY,IAAI,GAAG,eAAe,GACjFG,IACJ3B,EAAc,YAAY4B,EAAS,SAC9BC,EAAeJ,CAAW,KAAK,IAChCA;AACN,iBAAOnB,EAAOqB,CAAY;AAAA,QAC5B;AAAA,MAAA;AAAA,IACF;AAAA,IAEF,UAAU,CAAAH,MACR,gBAAA1B;AAAA,MAACgC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL;AAAA,YACE,OAAO,EAAE,sBAAsB;AAAA,YAC/B,SAAS,MAAM;AACb,cAAAhB,EAAwB;AAAA,gBACtB,MAAMU,EAAY;AAAA,gBAClB,qBAAqBA,EAAY;AAAA,cAAA,CAClC;AAAA,YACH;AAAA,YACA,MAAM,gBAAA1B,EAACiC,IAAA,EAAY,eAAW,GAAA,CAAC;AAAA,UAAA;AAAA,QACjC;AAAA,QAEF,cAAc,EAAE,gBAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAClC,CAEH,GAEKC,IAAqB,CAACC,MAC1B,gBAAAnC;AAAA,IAACM,EAAW;AAAA,IAAX;AAAA,MACE,GAAG6B;AAAA,MACJ,SAASA,EAAM,QAAQ,IAAI,CAAAC,OAAW;AAAA,QACpC,GAAGA;AAAA,QACH,aACEA,EAAO,UAAUC,EAAgB,gBAE3B,EADF/C,IACI,6BACA,8BAD0B,IAG5B,EADFA,IACI,qBACA,sBADkB;AAAA,MACI,EAChC;AAAA,IAAA;AAAA,EAAA,GAIAgD,IAAiB,YAAY;AACjC,UAAMhB,IAAS,MAAM3B,EAAkB,QAAQ,SAAA;AAC/C,IAAI2B,MACF/B,EAAQgC,EAAgB,iCAAiCD,EAAO,IAAI,GACpE/B,EAAQgC,EAAgB,4BAA4B;AAAA,EAExD,GAEMgB,IACJ1B,MAAgBwB,EAAgB,iBAAiBlC,EAAa,WAAW,GACrEqC,IAAe3B,MAAgBwB,EAAgB,SAASlC,EAAa,SAAS,GAE9EsC,IACJ5B,MAAgBwB,EAAgB,iBAAiBlC,EAAa,SAAS,sBACpEuC,GAAA,EACE,UAAA;AAAA,IAAAvC,EAAa,SAAS,KACrB,gBAAAH;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAf,EAAQgC,EAAgB,sBAAsB;AAAA,QAChD;AAAA,QAEC,YAAE,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGjB,gBAAAvB;AAAA,MAACM,EAAW;AAAA,MAAX;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MAAM;AACb,UAAAf,EAAQgC,EAAgB,4BAA4B;AAAA,QACtD;AAAA,QAEC,YAAE,eAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EACpB,EAAA,CACF,IACE;AAEN,SACE,gBAAAoB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAA5C,EAACD,GAAA,EAAW,OAAOF,EAAc,QAAQ,iBAAAL,GACvC,UAAA,gBAAAmD,EAACE,GAAA,EAAgB,gBAAgBlD,GAC9B,UAAA;AAAA,MAAAsB,MAAyB,QACxB,gBAAAjB;AAAA,QAACM,EAAW;AAAA,QAAX;AAAA,UACC,QAAO;AAAA,UACP,OAAO,EAAE,iCAAiC,EAAE,SAASW,GAAsB;AAAA,UAC3E,WAAW,MAAM;AACf,YAAAC,EAAwB,IAAI;AAAA,UAC9B;AAAA,UACA,uBAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGzB,gBAAAyB,EAACG,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAH;AAAA,UAACrC,EAAW;AAAA,UAAX;AAAA,YACC,0BAASA,EAAW,eAAX,EAAyB,OAAO,EAAE,OAAO,GAAG;AAAA,YACrD,aAAa;AAAA,YACb,QAAAmC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAzC,EAAC,OAAA,EAAI,WAAW+C,EAAO,SACrB,UAAA,gBAAA/C;AAAA,gBAACY,EAAO;AAAA,gBAAP;AAAA,kBACC,OAAO,EAAE,uBAAuB;AAAA,kBAChC,gBAAgB,CAACoC,MACfA,MAAUX,EAAgB,gBACtB,EAAE,oBAAoB,IACtB,EAAE,YAAY;AAAA,kBAEpB,gBAAgBH;AAAA,gBAAA;AAAA,cAAA,GAEpB;AAAA,cACCrB,MAAgBwB,EAAgB,iBAAiBlC,EAAa,SAAS,KACtE,gBAAAH,EAACiD,IAAA,EAAS,aAAW,IAAC,OAAO,EAAE,uBAAuB,GAAI,GAAGzB,GAAe;AAAA,cAE7Ee,KACC,gBAAAvC,EAAC,OAAA,EAAI,WAAW+C,EAAO,SACrB,UAAA,gBAAA/C;AAAA,gBAACkD;AAAA,gBAAA;AAAA,kBACC,YAAA7D;AAAA,kBACA,YAAAqB;AAAA,kBACA,SAAS,CAAAyC,MAAQ;AACf,oBAAA5D,EAAQgC,EAAgB,+BAA+B4B,CAAI;AAAA,kBAC7D;AAAA,gBAAA;AAAA,cAAA,EACF,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHX,uBACEE,GAAA,EACC,UAAA,gBAAA1C;AAAA,UAACM,EAAW;AAAA,UAAX;AAAA,YACC,MAAK;AAAA,YACL,WAAWX,EAAkB,OAAO;AAAA,YACpC,SAAS,MAAM;AACb,cAAK2C,EAAA;AAAA,YACP;AAAA,YAEC,YAAE,WAAW;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,IACA,gBAAAtC;AAAA,MAACoD;AAAA,MAAA;AAAA,QACC,sBAAArC;AAAA,QACA,wBAAwBX,MAAiCW,GAAsB;AAAA,QAC/E,SAAS,MAAM;AACb,UAAAC,EAAwB,IAAI;AAAA,QAC9B;AAAA,QACA,WAAW,MAAM;AACf,UAAKG,EAAA;AAAA,QACP;AAAA,QACA,OAAO,EAAE,+BAA+B;AAAA,QACxC,aAAa,EAAE,uCAAuC;AAAA,UACpD,SAASJ,GAAsB,uBAAuB;AAAA,QAAA,CACvD;AAAA,QACD,cAAc,EAAE,oCAAoC;AAAA,QACpD,aAAa,EAAE,mCAAmC;AAAA,MAAA;AAAA,IAAA;AAAA,EACpD,GACF;AAEJ;"}
+{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n  usePaymentMethodForm,\n  type PaymentMethodType,\n  type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport styles from './ListView.module.scss'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n  LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  employeeId,\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n  LoaderComponent,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n  const dictionary = useOnboardingBankFormDictionary()\n\n  const { Fields } = paymentMethodForm.form\n  const watchedType = useWatch({\n    control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n    name: 'type',\n  })\n\n  const {\n    pendingDeleteAccount,\n    setPendingDeleteAccount,\n    deletedAccountNumber,\n    setDeletedAccountNumber,\n    handleConfirmDelete,\n  } = useDeleteBankAccount(async uuid => {\n    const result = await paymentMethodList.actions.onDelete(uuid)\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n    }\n  })\n\n  const { ...dataViewProps } = useDataView({\n    data: bankAccounts,\n    columns: [\n      { key: 'name', title: t('nicknameColumn') },\n      { key: 'routingNumber', title: t('routingNumberColumn') },\n      { key: 'accountType', title: t('accountTypeColumn') },\n      {\n        key: 'splitAmount',\n        title: t('allocationColumn'),\n        justify: 'end',\n        render: bankAccount => {\n          const splitAmount =\n            paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n          const displayValue =\n            paymentMethod.splitBy === SPLIT_BY.amount\n              ? (centsToDollars(splitAmount) ?? 0)\n              : splitAmount\n          return format(displayValue)\n        },\n      },\n    ],\n    itemMenu: bankAccount => (\n      <HamburgerMenu\n        items={[\n          {\n            label: t('deleteBankAccountCta'),\n            onClick: () => {\n              setPendingDeleteAccount({\n                uuid: bankAccount.uuid,\n                hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n              })\n            },\n            icon: <TrashCanSvg aria-hidden />,\n          },\n        ]}\n        triggerLabel={t('hamburgerTitle')}\n      />\n    ),\n  })\n\n  const TypeFieldComponent = (props: RadioGroupProps) => (\n    <Components.RadioGroup\n      {...props}\n      options={props.options.map(option => ({\n        ...option,\n        description:\n          option.value === PAYMENT_METHODS.directDeposit\n            ? isAdmin\n              ? t('directDepositDescription')\n              : t('directDepositDescriptionSelf')\n            : isAdmin\n              ? t('checkDescription')\n              : t('checkDescriptionSelf'),\n      }))}\n    />\n  )\n\n  const handleContinue = async () => {\n    const result = await paymentMethodForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n    }\n  }\n\n  const showInlineBankForm =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length === 0\n  const showContinue = watchedType === PAYMENT_METHODS.check || bankAccounts.length > 0\n\n  const footer =\n    watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 ? (\n      <ActionsLayout>\n        {bankAccounts.length > 1 && (\n          <Components.Button\n            variant=\"secondary\"\n            type=\"button\"\n            onClick={() => {\n              onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n            }}\n          >\n            {t('splitCta')}\n          </Components.Button>\n        )}\n        <Components.Button\n          variant=\"secondary\"\n          type=\"button\"\n          onClick={() => {\n            onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n          }}\n        >\n          {t('addAnotherCta')}\n        </Components.Button>\n      </ActionsLayout>\n    ) : undefined\n\n  return (\n    <>\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          {deletedAccountNumber !== null && (\n            <Components.Alert\n              status=\"success\"\n              label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n              onDismiss={() => {\n                setDeletedAccountNumber(null)\n              }}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={20}>\n            <Components.FormBox\n              header={<Components.FormBoxHeader title={t('title')} />}\n              withPadding={false}\n              footer={footer}\n            >\n              <div className={styles.section}>\n                <Fields.Type\n                  label={t('paymentFieldsetLegend')}\n                  getOptionLabel={(value: PaymentMethodType) =>\n                    value === PAYMENT_METHODS.directDeposit\n                      ? t('directDepositLabel')\n                      : t('checkLabel')\n                  }\n                  FieldComponent={TypeFieldComponent}\n                />\n              </div>\n              {watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 && (\n                <DataView isWithinBox label={t('bankAccountsListLabel')} {...dataViewProps} />\n              )}\n              {showInlineBankForm && (\n                <div className={styles.section}>\n                  <BankFormBody\n                    employeeId={employeeId}\n                    dictionary={dictionary}\n                    onSaved={data => {\n                      onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n                    }}\n                  />\n                </div>\n              )}\n            </Components.FormBox>\n            {showContinue && (\n              <ActionsLayout>\n                <Components.Button\n                  type=\"button\"\n                  isLoading={paymentMethodForm.status.isPending}\n                  onClick={() => {\n                    void handleContinue()\n                  }}\n                >\n                  {t('submitCta')}\n                </Components.Button>\n              </ActionsLayout>\n            )}\n          </Flex>\n        </SDKFormProvider>\n      </BaseLayout>\n      <DeleteBankAccountDialog\n        pendingDeleteAccount={pendingDeleteAccount}\n        isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n        onClose={() => {\n          setPendingDeleteAccount(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDelete()\n        }}\n        title={t('deleteBankAccountDialog.title')}\n        description={t('deleteBankAccountDialog.description', {\n          account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n        })}\n        confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n        cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","LoaderComponent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","dictionary","useOnboardingBankFormDictionary","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleContinue","showInlineBankForm","showContinue","footer","ActionsLayout","jsxs","Fragment","SDKFormProvider","Flex","styles","value","DataView","BankFormBody","data","DeleteBankAccountDialog"],"mappings":"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"}

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js

@@ -11,19 +11,19 @@ import { composeErrorHandler as Y } from "../../../../../partner-hook-utils/comp
 import { usePaymentMethodList as H } from "../../../PaymentMethod/shared/usePaymentMethodList.js";
 import { formatDateLongWithYear as R } from "../../../../../helpers/dateFormatting.js";
 import W from "../../../../../hooks/useNumberFormatter.js";
-import { useI18n as F } from "../../../../../i18n/I18n.js";
+import { useI18n as j } from "../../../../../i18n/I18n.js";
 import { componentEvents as w } from "../../../../../shared/constants.js";
-import V from "../../../../../assets/icons/download-cloud.svg.js";
-import { usePaystubsList as v } from "../../shared/usePaystubsList/usePaystubsList.js";
-import { useNonce as G } from "../../../../../contexts/NonceProvider/useNonce.js";
-import { useDataView as j } from "../../../../Common/DataView/useDataView.js";
+import F from "../../../../../assets/icons/download-cloud.svg.js";
+import { usePaystubsList as V } from "../../shared/usePaystubsList/usePaystubsList.js";
+import { useNonce as v } from "../../../../../contexts/NonceProvider/useNonce.js";
+import { useDataView as G } from "../../../../Common/DataView/useDataView.js";
 import { DataView as Q } from "../../../../Common/DataView/DataView.js";
 function pt({ LoaderComponent: a, ...i }) {
   return /* @__PURE__ */ o(O, { componentName: "Employee.Management.Paystubs", LoaderComponent: a, children: /* @__PURE__ */ o(q, { LoaderComponent: a, ...i }) });
 }
 function q({ employeeId: a, onEvent: i, LoaderComponent: s }) {
-  F("Employee.Management.Paystubs");
-  const { t: l } = D("Employee.Management.Paystubs"), u = S(), d = v({ employeeId: a }), e = H({ employeeId: a }), m = Y([d, e]);
+  j("Employee.Management.Paystubs");
+  const { t: l } = D("Employee.Management.Paystubs"), u = S(), d = V({ employeeId: a }), e = H({ employeeId: a }), m = Y([d, e]);
   return d.isLoading ? /* @__PURE__ */ o(M, { error: m.errors, LoaderComponent: s, children: /* @__PURE__ */ o(u.Box, { header: /* @__PURE__ */ o(u.BoxHeader, { title: l("title") }), children: /* @__PURE__ */ o(T, {}) }) }) : /* @__PURE__ */ o(
     z,
     {
@@ -44,7 +44,7 @@ function z({
   errorHandling: u,
   LoaderComponent: d
 }) {
-  const { t: e } = D("Employee.Management.Paystubs"), m = S(), y = W("currency"), { showBoundary: p } = _(), f = G(), [b, g] = L(
+  const { t: e } = D("Employee.Management.Paystubs"), m = S(), y = W("currency"), { showBoundary: p } = _(), f = v(), [b, g] = L(
     () => /* @__PURE__ */ new Set()
   ), { payStubs: h } = s.data, C = s.pagination.payStubs, N = l.isLoading ? void 0 : l.data.paymentMethod, B = k(
     async (t) => {
@@ -87,6 +87,7 @@ function z({
     {
       key: "checkAmount",
       title: e("checkAmount"),
+      justify: "end",
       render: (t) => {
         if (!t.netPay) return "-";
         const r = parseFloat(t.netPay);
@@ -96,6 +97,7 @@ function z({
     {
       key: "grossPay",
       title: e("grossPay"),
+      justify: "end",
       render: (t) => {
         if (!t.grossPay) return "-";
         const r = parseFloat(t.grossPay);
@@ -107,7 +109,7 @@ function z({
       title: e("paymentMethod"),
       render: () => N?.type || e("noPaymentMethod")
     }
-  ], x = j({
+  ], x = G({
     data: h,
     columns: A,
     pagination: C,
@@ -123,7 +125,7 @@ function z({
           onClick: () => {
             t.payrollUuid && B(t.payrollUuid);
           },
-          children: /* @__PURE__ */ o(V, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ o(F, { "aria-hidden": !0 })
         }
       );
     },

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaystubsCard.js","sources":["../../../../../../src/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useErrorBoundary } from 'react-error-boundary'\nimport {\n  usePaystubsList,\n  type EmployeePayStub,\n  type UsePaystubsListReady,\n} from '../../shared/usePaystubsList'\nimport { DataView, EmptyData, useDataView, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useNonce } from '@/contexts/NonceProvider'\nimport { openPdfInNewTab } from '@/helpers/openPdfInNewTab'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListResult,\n} from '@/components/Employee/PaymentMethod/shared'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport DownloadCloudIcon from '@/assets/icons/download-cloud.svg?react'\n\n/**\n * Props for {@link PaystubsCard}.\n *\n * @public\n */\nexport interface PaystubsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when paystub interactions occur. */\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 \"Paystubs\" card. Owns its own data fetch via\n * {@link usePaystubsList} and renders the paginated paystubs table with a\n * per-row PDF download action. Emits the management block's scoped events\n * (`EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_*`) on download request and on\n * download success. The card has no edit transitions and no alert API —\n * paystubs is a read-only surface whose only action is a download side\n * effect that opens the PDF in a new tab.\n *\n * @public\n */\nexport function PaystubsCard({ LoaderComponent, ...props }: PaystubsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Paystubs\" LoaderComponent={LoaderComponent}>\n      <PaystubsCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaystubsCardContent({ employeeId, onEvent, LoaderComponent }: PaystubsCardProps) {\n  useI18n('Employee.Management.Paystubs')\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const paystubsList = usePaystubsList({ employeeId })\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paystubsList, paymentMethodList])\n\n  if (paystubsList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Components.Box header={<Components.BoxHeader title={t('title')} />}>\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaystubsCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paystubsList={paystubsList}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface PaystubsCardReadyProps extends PaystubsCardProps {\n  paystubsList: UsePaystubsListReady\n  paymentMethodList: UsePaymentMethodListResult\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaystubsCardReady({\n  employeeId,\n  onEvent,\n  paystubsList,\n  paymentMethodList,\n  errorHandling,\n  LoaderComponent,\n}: PaystubsCardReadyProps) {\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const { showBoundary } = useErrorBoundary()\n  const nonce = useNonce()\n\n  const [downloadingPayrollUuids, setDownloadingPayrollUuids] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const { payStubs } = paystubsList.data\n  const payStubsPagination = paystubsList.pagination.payStubs\n  const paymentMethod = paymentMethodList.isLoading\n    ? undefined\n    : paymentMethodList.data.paymentMethod\n\n  const handleDownload = useCallback(\n    async (payrollUuid: string) => {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {\n        employeeId,\n        payrollUuid,\n      })\n\n      const tab = openPdfInNewTab({ loadingMessage: t('downloadLoadingMessage'), nonce })\n      setDownloadingPayrollUuids(prev => {\n        const next = new Set(prev)\n        next.add(payrollUuid)\n        return next\n      })\n      try {\n        const result = await paystubsList.actions.downloadPayStub(payrollUuid)\n        if (!result) {\n          tab.close()\n          return\n        }\n        tab.navigate(result.data)\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n          employeeId,\n          payrollUuid,\n        })\n      } catch (err) {\n        tab.close()\n        showBoundary(err instanceof Error ? err : new Error(String(err)))\n      } finally {\n        setDownloadingPayrollUuids(prev => {\n          if (!prev.has(payrollUuid)) return prev\n          const next = new Set(prev)\n          next.delete(payrollUuid)\n          return next\n        })\n      }\n    },\n    [paystubsList.actions, onEvent, employeeId, t, showBoundary, nonce],\n  )\n\n  const payStubsColumns = [\n    {\n      key: 'payday',\n      title: t('payday'),\n      render: (payStub: EmployeePayStub) => formatDateLongWithYear(payStub.checkDate) || '-',\n    },\n    {\n      key: 'checkAmount',\n      title: t('checkAmount'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.netPay) return '-'\n        const amount = parseFloat(payStub.netPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'grossPay',\n      title: t('grossPay'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.grossPay) return '-'\n        const amount = parseFloat(payStub.grossPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'paymentMethod',\n      title: t('paymentMethod'),\n      render: () => paymentMethod?.type || t('noPaymentMethod'),\n    },\n  ]\n\n  const payStubsDataView = useDataView({\n    data: payStubs,\n    columns: payStubsColumns,\n    pagination: payStubsPagination,\n    itemMenu: payStub => {\n      const isDownloading =\n        !!payStub.payrollUuid && downloadingPayrollUuids.has(payStub.payrollUuid)\n      return (\n        <Components.ButtonIcon\n          variant=\"tertiary\"\n          aria-label={t('downloadCta')}\n          isDisabled={!payStub.payrollUuid}\n          isLoading={isDownloading}\n          onClick={() => {\n            if (payStub.payrollUuid) {\n              void handleDownload(payStub.payrollUuid)\n            }\n          }}\n        >\n          <DownloadCloudIcon aria-hidden />\n        </Components.ButtonIcon>\n      )\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  const isShowingTable = payStubs.length > 0\n\n  return (\n    <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        withPadding={!isShowingTable}\n        header={<Components.BoxHeader title={t('title')} />}\n      >\n        {isShowingTable ? (\n          <DataView label={t('listLabel')} isWithinBox {...payStubsDataView} />\n        ) : (\n          <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["PaystubsCard","LoaderComponent","props","jsx","BaseBoundaries","PaystubsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paystubsList","usePaystubsList","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","Loading","PaystubsCardReady","formatCurrency","useNumberFormatter","showBoundary","useErrorBoundary","nonce","useNonce","downloadingPayrollUuids","setDownloadingPayrollUuids","useState","payStubs","payStubsPagination","paymentMethod","handleDownload","useCallback","payrollUuid","componentEvents","tab","openPdfInNewTab","prev","next","result","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}
+{"version":3,"file":"PaystubsCard.js","sources":["../../../../../../src/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useErrorBoundary } from 'react-error-boundary'\nimport {\n  usePaystubsList,\n  type EmployeePayStub,\n  type UsePaystubsListReady,\n} from '../../shared/usePaystubsList'\nimport { DataView, EmptyData, useDataView, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useNonce } from '@/contexts/NonceProvider'\nimport { openPdfInNewTab } from '@/helpers/openPdfInNewTab'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListResult,\n} from '@/components/Employee/PaymentMethod/shared'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport DownloadCloudIcon from '@/assets/icons/download-cloud.svg?react'\n\n/**\n * Props for {@link PaystubsCard}.\n *\n * @public\n */\nexport interface PaystubsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when paystub interactions occur. */\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 \"Paystubs\" card. Owns its own data fetch via\n * {@link usePaystubsList} and renders the paginated paystubs table with a\n * per-row PDF download action. Emits the management block's scoped events\n * (`EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_*`) on download request and on\n * download success. The card has no edit transitions and no alert API —\n * paystubs is a read-only surface whose only action is a download side\n * effect that opens the PDF in a new tab.\n *\n * @public\n */\nexport function PaystubsCard({ LoaderComponent, ...props }: PaystubsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Paystubs\" LoaderComponent={LoaderComponent}>\n      <PaystubsCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaystubsCardContent({ employeeId, onEvent, LoaderComponent }: PaystubsCardProps) {\n  useI18n('Employee.Management.Paystubs')\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const paystubsList = usePaystubsList({ employeeId })\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paystubsList, paymentMethodList])\n\n  if (paystubsList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Components.Box header={<Components.BoxHeader title={t('title')} />}>\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaystubsCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paystubsList={paystubsList}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface PaystubsCardReadyProps extends PaystubsCardProps {\n  paystubsList: UsePaystubsListReady\n  paymentMethodList: UsePaymentMethodListResult\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaystubsCardReady({\n  employeeId,\n  onEvent,\n  paystubsList,\n  paymentMethodList,\n  errorHandling,\n  LoaderComponent,\n}: PaystubsCardReadyProps) {\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const { showBoundary } = useErrorBoundary()\n  const nonce = useNonce()\n\n  const [downloadingPayrollUuids, setDownloadingPayrollUuids] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const { payStubs } = paystubsList.data\n  const payStubsPagination = paystubsList.pagination.payStubs\n  const paymentMethod = paymentMethodList.isLoading\n    ? undefined\n    : paymentMethodList.data.paymentMethod\n\n  const handleDownload = useCallback(\n    async (payrollUuid: string) => {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {\n        employeeId,\n        payrollUuid,\n      })\n\n      const tab = openPdfInNewTab({ loadingMessage: t('downloadLoadingMessage'), nonce })\n      setDownloadingPayrollUuids(prev => {\n        const next = new Set(prev)\n        next.add(payrollUuid)\n        return next\n      })\n      try {\n        const result = await paystubsList.actions.downloadPayStub(payrollUuid)\n        if (!result) {\n          tab.close()\n          return\n        }\n        tab.navigate(result.data)\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n          employeeId,\n          payrollUuid,\n        })\n      } catch (err) {\n        tab.close()\n        showBoundary(err instanceof Error ? err : new Error(String(err)))\n      } finally {\n        setDownloadingPayrollUuids(prev => {\n          if (!prev.has(payrollUuid)) return prev\n          const next = new Set(prev)\n          next.delete(payrollUuid)\n          return next\n        })\n      }\n    },\n    [paystubsList.actions, onEvent, employeeId, t, showBoundary, nonce],\n  )\n\n  const payStubsColumns = [\n    {\n      key: 'payday',\n      title: t('payday'),\n      render: (payStub: EmployeePayStub) => formatDateLongWithYear(payStub.checkDate) || '-',\n    },\n    {\n      key: 'checkAmount',\n      title: t('checkAmount'),\n      justify: 'end' as const,\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.netPay) return '-'\n        const amount = parseFloat(payStub.netPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'grossPay',\n      title: t('grossPay'),\n      justify: 'end' as const,\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.grossPay) return '-'\n        const amount = parseFloat(payStub.grossPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'paymentMethod',\n      title: t('paymentMethod'),\n      render: () => paymentMethod?.type || t('noPaymentMethod'),\n    },\n  ]\n\n  const payStubsDataView = useDataView({\n    data: payStubs,\n    columns: payStubsColumns,\n    pagination: payStubsPagination,\n    itemMenu: payStub => {\n      const isDownloading =\n        !!payStub.payrollUuid && downloadingPayrollUuids.has(payStub.payrollUuid)\n      return (\n        <Components.ButtonIcon\n          variant=\"tertiary\"\n          aria-label={t('downloadCta')}\n          isDisabled={!payStub.payrollUuid}\n          isLoading={isDownloading}\n          onClick={() => {\n            if (payStub.payrollUuid) {\n              void handleDownload(payStub.payrollUuid)\n            }\n          }}\n        >\n          <DownloadCloudIcon aria-hidden />\n        </Components.ButtonIcon>\n      )\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  const isShowingTable = payStubs.length > 0\n\n  return (\n    <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        withPadding={!isShowingTable}\n        header={<Components.BoxHeader title={t('title')} />}\n      >\n        {isShowingTable ? (\n          <DataView label={t('listLabel')} isWithinBox {...payStubsDataView} />\n        ) : (\n          <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["PaystubsCard","LoaderComponent","props","jsx","BaseBoundaries","PaystubsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paystubsList","usePaystubsList","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","Loading","PaystubsCardReady","formatCurrency","useNumberFormatter","showBoundary","useErrorBoundary","nonce","useNonce","downloadingPayrollUuids","setDownloadingPayrollUuids","useState","payStubs","payStubsPagination","paymentMethod","handleDownload","useCallback","payrollUuid","componentEvents","tab","openPdfInNewTab","prev","next","result","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}

package/dist/components/Flow/Flow.js

@@ -1,10 +1,10 @@
 import { jsx as n, jsxs as x } from "react/jsx-runtime";
 import { Suspense as d } from "react";
 import { useMachine as F } from "react-robot";
+import { Flex as s } from "../Common/Flex/Flex.js";
 import { FlowContext as v } from "./useFlow.js";
 import { FlowHeader as E } from "./FlowHeader.js";
 import { useLoadingIndicator as a } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-import { Flex as s } from "../Common/Flex/Flex.js";
 const g = 40;
 function H() {
   const { LoadingIndicator: o } = a();