@gusto/embedded-react-sdk 0.46.2 → 0.47.0

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

@@ -1,66 +1,25 @@
-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") })
-    ] })
-  ] }) }) });
+import { jsx as a } from "react/jsx-runtime";
+import { useOnboardingBankFormDictionary as c } from "./useFormDictionary.js";
+import { componentEvents as r } from "../../../../shared/constants.js";
+import { BankFormBody as e } from "../shared/BankFormBody/BankFormBody.js";
+function B({ employeeId: n, onEvent: o, ...m }) {
+  const t = c();
+  return /* @__PURE__ */ a(
+    e,
+    {
+      employeeId: n,
+      dictionary: t,
+      onSaved: (i) => {
+        o(r.EMPLOYEE_BANK_ACCOUNT_CREATED, i);
+      },
+      onCancel: () => {
+        o(r.CANCEL);
+      },
+      ...m
+    }
+  );
 }
 export {
-  U as BankForm
+  B as BankForm
 };
 //# sourceMappingURL=BankForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { 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;"}
+{"version":3,"file":"BankForm.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/BankForm.tsx"],"sourcesContent":["import { BankFormBody } from '../shared/BankFormBody'\nimport type { UseBankFormProps } from '../shared/useBankForm'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\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 dictionary = useOnboardingBankFormDictionary()\n\n  return (\n    <BankFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.CANCEL)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["BankForm","employeeId","onEvent","hookProps","dictionary","useOnboardingBankFormDictionary","jsx","BankFormBody","data","componentEvents"],"mappings":";;;;AAWO,SAASA,EAAS,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA4B;AAC7E,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,+BAA+BD,CAAI;AAAA,MAC7D;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,MAAM;AAAA,MAChC;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -5,5 +5,5 @@ interface ListViewProps {
     isAdmin: boolean;
     onEvent: OnEventType<EventType, unknown>;
 }
-export declare function ListView({ employeeId, isAdmin, onEvent }: ListViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListView({ employeeId, isAdmin, onEvent }: ListViewProps): import("react").JSX.Element;
 export {};

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

@@ -1,15 +1,14 @@
-import { jsx as e, jsxs as p, Fragment as M } from "react/jsx-runtime";
+import { jsx as e, jsxs as f, Fragment as M } from "react/jsx-runtime";
 import { useTranslation as O } from "react-i18next";
 import { useWatch as S } from "react-hook-form";
 import { usePaymentMethodList as Y } from "../shared/usePaymentMethodList.js";
 import { usePaymentMethodForm as w } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
 import { useDeleteBankAccount as H } from "../shared/useDeleteBankAccount.js";
 import { DeleteBankAccountDialog as F } from "../shared/DeleteBankAccountDialog.js";
-import "classnames";
-import { SPLIT_BY as V, PAYMENT_METHODS as f, componentEvents as m } from "../../../../shared/constants.js";
+import { SPLIT_BY as V, PAYMENT_METHODS as A, componentEvents as m } from "../../../../shared/constants.js";
 import { ActionsLayout as x } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { Form as R } from "../../../Common/Form/Form.js";
-import { BaseLayout as E } from "../../../Base/Base.js";
+import { BaseLayout as g } from "../../../Base/Base.js";
 import { SDKFormProvider as U } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
 import { composeErrorHandler as v } from "../../../../partner-hook-utils/composeErrorHandler.js";
 import { useComponentContext as K } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
@@ -19,40 +18,40 @@ import G from "../../../../assets/icons/trashcan.svg.js";
 import { HamburgerMenu as W } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useDataView as q } from "../../../Common/DataView/useDataView.js";
 import { DataView as z } from "../../../Common/DataView/DataView.js";
-function ht({ employeeId: c, isAdmin: r, onEvent: u }) {
-  const n = Y({ employeeId: c }), l = w({ employeeId: c }), s = v([n, l]);
-  return n.isLoading || l.isLoading ? /* @__PURE__ */ e(E, { isLoading: !0, error: s.errors }) : /* @__PURE__ */ e(
+function Dt({ employeeId: c, isAdmin: r, onEvent: l }) {
+  const n = Y({ employeeId: c }), u = w({ employeeId: c }), a = v([n, u]);
+  return n.isLoading || u.isLoading ? /* @__PURE__ */ e(g, { isLoading: !0, error: a.errors }) : /* @__PURE__ */ e(
     J,
     {
       employeeId: c,
       isAdmin: r,
-      onEvent: u,
+      onEvent: l,
       paymentMethodList: n,
-      paymentMethodForm: l,
-      errorHandling: s
+      paymentMethodForm: u,
+      errorHandling: a
     }
   );
 }
 function J({
   isAdmin: c,
   onEvent: r,
-  paymentMethodList: u,
+  paymentMethodList: l,
   paymentMethodForm: n,
-  errorHandling: l
+  errorHandling: u
 }) {
-  const { paymentMethod: s, bankAccounts: d } = u.data, { deletePendingBankAccountUuid: b } = u.status, { t } = O("Employee.PaymentMethod"), a = K(), g = I(s.splitBy === "Amount" ? "currency" : "percent"), { Fields: y } = n.form, C = S({
+  const { paymentMethod: a, bankAccounts: d } = l.data, { deletePendingBankAccountUuid: h } = l.status, { t } = O("Employee.PaymentMethod"), s = K(), E = I(a.splitBy === "Amount" ? "currency" : "percent"), { Fields: C } = n.form, L = S({
     control: n.form.hookFormInternals.formMethods.control,
     name: "type"
   }), {
-    pendingDeleteAccount: A,
+    pendingDeleteAccount: p,
     setPendingDeleteAccount: D,
-    deletedAccountNumber: h,
-    setDeletedAccountNumber: L,
-    handleConfirmDelete: T
+    deletedAccountNumber: b,
+    setDeletedAccountNumber: y,
+    handleConfirmDelete: k
   } = H(async (o) => {
-    const i = await u.actions.onDelete(o);
+    const i = await l.actions.onDelete(o);
     i && r(m.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
-  }), { ...P } = q({
+  }), { ...T } = q({
     data: d,
     columns: [
       { key: "name", title: t("nicknameColumn") },
@@ -62,8 +61,8 @@ function J({
         key: "splitAmount",
         title: t("allocationColumn"),
         render: (o) => {
-          const i = s.splits?.find((B) => B.uuid === o.uuid)?.splitAmount ?? 0, _ = s.splitBy === V.amount ? j(i) ?? 0 : i;
-          return g(_);
+          const i = a.splits?.find((_) => _.uuid === o.uuid)?.splitAmount ?? 0, N = a.splitBy === V.amount ? j(i) ?? 0 : i;
+          return E(N);
         }
       }
     ],
@@ -85,45 +84,45 @@ function J({
         triggerLabel: t("hamburgerTitle")
       }
     )
-  }), k = (o) => /* @__PURE__ */ e(
-    a.RadioGroup,
+  }), P = (o) => /* @__PURE__ */ e(
+    s.RadioGroup,
     {
       ...o,
       options: o.options.map((i) => ({
         ...i,
-        description: i.value === f.directDeposit ? t(c ? "directDepositDescription" : "directDepositDescriptionSelf") : t(c ? "checkDescription" : "checkDescriptionSelf")
+        description: i.value === A.directDeposit ? t(c ? "directDepositDescription" : "directDepositDescriptionSelf") : t(c ? "checkDescription" : "checkDescriptionSelf")
       }))
     }
-  ), N = async () => {
+  ), B = async () => {
     const o = await n.actions.onSubmit();
     o && (r(m.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), r(m.EMPLOYEE_PAYMENT_METHOD_DONE));
   };
-  return /* @__PURE__ */ p(M, { children: [
-    /* @__PURE__ */ e(E, { error: l.errors, children: /* @__PURE__ */ e(U, { formHookResult: n, children: /* @__PURE__ */ p(R, { onSubmit: N, children: [
-      h !== null && /* @__PURE__ */ e(
-        a.Alert,
+  return /* @__PURE__ */ f(M, { children: [
+    /* @__PURE__ */ e(g, { error: u.errors, children: /* @__PURE__ */ e(U, { formHookResult: n, children: /* @__PURE__ */ f(R, { onSubmit: B, children: [
+      b !== null && /* @__PURE__ */ e(
+        s.Alert,
         {
           status: "success",
-          label: t("deleteBankAccountSuccessAlert", { account: h }),
+          label: t("deleteBankAccountSuccessAlert", { account: b }),
           onDismiss: () => {
-            L(null);
+            y(null);
           },
           disableScrollIntoView: !0
         }
       ),
-      /* @__PURE__ */ e(a.Heading, { as: "h2", children: t("title") }),
+      /* @__PURE__ */ e(s.Heading, { as: "h2", children: t("title") }),
       /* @__PURE__ */ e(
-        y.Type,
+        C.Type,
         {
           label: t("paymentFieldsetLegend"),
-          getOptionLabel: (o) => o === f.directDeposit ? t("directDepositLabel") : t("checkLabel"),
-          FieldComponent: k
+          getOptionLabel: (o) => o === A.directDeposit ? t("directDepositLabel") : t("checkLabel"),
+          FieldComponent: P
         }
       ),
-      d.length > 0 && /* @__PURE__ */ e(z, { label: t("bankAccountsListLabel"), ...P }),
-      /* @__PURE__ */ p(x, { children: [
+      d.length > 0 && /* @__PURE__ */ e(z, { label: t("bankAccountsListLabel"), ...T }),
+      /* @__PURE__ */ f(x, { children: [
         d.length > 1 && /* @__PURE__ */ e(
-          a.Button,
+          s.Button,
           {
             variant: "secondary",
             type: "button",
@@ -133,8 +132,8 @@ function J({
             children: t("splitCta")
           }
         ),
-        C === f.directDeposit && /* @__PURE__ */ e(
-          a.Button,
+        L === A.directDeposit && /* @__PURE__ */ e(
+          s.Button,
           {
             variant: "secondary",
             type: "button",
@@ -144,25 +143,31 @@ function J({
             children: d.length > 0 ? t("addAnotherCta") : t("addBankAccountCta")
           }
         ),
-        /* @__PURE__ */ e(a.Button, { type: "submit", isLoading: n.status.isPending, children: t("submitCta") })
+        /* @__PURE__ */ e(s.Button, { type: "submit", isLoading: n.status.isPending, children: t("submitCta") })
       ] })
     ] }) }) }),
     /* @__PURE__ */ e(
       F,
       {
-        pendingDeleteAccount: A,
-        isPrimaryActionLoading: b === A?.uuid,
+        pendingDeleteAccount: p,
+        isPrimaryActionLoading: h === p?.uuid,
         onClose: () => {
           D(null);
         },
         onConfirm: () => {
-          T();
-        }
+          k();
+        },
+        title: t("deleteBankAccountDialog.title"),
+        description: t("deleteBankAccountDialog.description", {
+          account: p?.hiddenAccountNumber ?? ""
+        }),
+        confirmLabel: t("deleteBankAccountDialog.confirmCta"),
+        cancelLabel: t("deleteBankAccountDialog.cancelCta")
       }
     )
   ] });
 }
 export {
-  ht as ListView
+  Dt as ListView
 };
 //# sourceMappingURL=ListView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n  usePaymentMethodForm,\n  type PaymentMethodType,\n  type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function ListView({ employeeId, isAdmin, onEvent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n\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 handleSubmit = 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  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          <Form onSubmit={handleSubmit}>\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            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <Fields.Type\n              label={t('paymentFieldsetLegend')}\n              getOptionLabel={(value: PaymentMethodType) =>\n                value === PAYMENT_METHODS.directDeposit ? t('directDepositLabel') : t('checkLabel')\n              }\n              FieldComponent={TypeFieldComponent}\n            />\n            {bankAccounts.length > 0 && (\n              <DataView label={t('bankAccountsListLabel')} {...dataViewProps} />\n            )}\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              {watchedType === PAYMENT_METHODS.directDeposit && (\n                <Components.Button\n                  variant=\"secondary\"\n                  type=\"button\"\n                  onClick={() => {\n                    onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n                  }}\n                >\n                  {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n                </Components.Button>\n              )}\n              <Components.Button type=\"submit\" isLoading={paymentMethodForm.status.isPending}>\n                {t('submitCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Form>\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      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","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","handleSubmit","jsxs","Fragment","SDKFormProvider","Form","value","DataView","ActionsLayout","DeleteBankAccountDialog"],"mappings":"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"}
+{"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 { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\n\ninterface ListViewProps {\n  employeeId: string\n  isAdmin: boolean\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function ListView({ employeeId, isAdmin, onEvent }: ListViewProps) {\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n  const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n  const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n  if (paymentMethodList.isLoading || paymentMethodForm.isLoading) {\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  return (\n    <ListViewReady\n      employeeId={employeeId}\n      isAdmin={isAdmin}\n      onEvent={onEvent}\n      paymentMethodList={paymentMethodList}\n      paymentMethodForm={paymentMethodForm}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n  paymentMethodList: UsePaymentMethodListReady\n  paymentMethodForm: UsePaymentMethodFormReady\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n  isAdmin,\n  onEvent,\n  paymentMethodList,\n  paymentMethodForm,\n  errorHandling,\n}: ListViewReadyProps) {\n  const { paymentMethod, bankAccounts } = paymentMethodList.data\n  const { deletePendingBankAccountUuid } = paymentMethodList.status\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n\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 handleSubmit = 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  return (\n    <>\n      <BaseLayout error={errorHandling.errors}>\n        <SDKFormProvider formHookResult={paymentMethodForm}>\n          <Form onSubmit={handleSubmit}>\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            <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n            <Fields.Type\n              label={t('paymentFieldsetLegend')}\n              getOptionLabel={(value: PaymentMethodType) =>\n                value === PAYMENT_METHODS.directDeposit ? t('directDepositLabel') : t('checkLabel')\n              }\n              FieldComponent={TypeFieldComponent}\n            />\n            {bankAccounts.length > 0 && (\n              <DataView label={t('bankAccountsListLabel')} {...dataViewProps} />\n            )}\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              {watchedType === PAYMENT_METHODS.directDeposit && (\n                <Components.Button\n                  variant=\"secondary\"\n                  type=\"button\"\n                  onClick={() => {\n                    onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n                  }}\n                >\n                  {bankAccounts.length > 0 ? t('addAnotherCta') : t('addBankAccountCta')}\n                </Components.Button>\n              )}\n              <Components.Button type=\"submit\" isLoading={paymentMethodForm.status.isPending}>\n                {t('submitCta')}\n              </Components.Button>\n            </ActionsLayout>\n          </Form>\n        </SDKFormProvider>\n      </BaseLayout>\n      <DeleteBankAccountDialog\n        pendingDeleteAccount={pendingDeleteAccount}\n        isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n        onClose={() => {\n          setPendingDeleteAccount(null)\n        }}\n        onConfirm={() => {\n          void handleConfirmDelete()\n        }}\n        title={t('deleteBankAccountDialog.title')}\n        description={t('deleteBankAccountDialog.description', {\n          account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n        })}\n        confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n        cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n      />\n    </>\n  )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","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","handleSubmit","jsxs","Fragment","SDKFormProvider","Form","value","DataView","ActionsLayout","DeleteBankAccountDialog"],"mappings":"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"}

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

@@ -7,5 +7,5 @@ export interface PaymentMethodProps extends CommonComponentInterface<'Employee.P
     isAdmin?: boolean;
     onEvent: OnEventType<EventType, unknown>;
 }
-export declare function PaymentMethod({ dictionary, FallbackComponent, ...props }: PaymentMethodProps & BaseComponentInterface): import("react/jsx-runtime").JSX.Element;
-export declare function PaymentMethodContextual(): import("react/jsx-runtime").JSX.Element;
+export declare function PaymentMethod({ dictionary, FallbackComponent, ...props }: PaymentMethodProps & BaseComponentInterface): import("react").JSX.Element;
+export declare function PaymentMethodContextual(): import("react").JSX.Element;

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

@@ -3,6 +3,6 @@ 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;
+export declare function ListViewContextual(): import("react").JSX.Element;
+export declare function BankFormContextual(): import("react").JSX.Element;
+export declare function SplitViewContextual(): import("react").JSX.Element;

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

@@ -5,4 +5,4 @@ export interface SplitViewProps extends Omit<UseSplitPaymentsFormProps, 'employe
     employeeId: string;
     onEvent: OnEventType<EventType, unknown>;
 }
-export declare function SplitView({ employeeId, onEvent, ...hookProps }: SplitViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SplitView({ employeeId, onEvent, ...hookProps }: SplitViewProps): import("react").JSX.Element;

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

@@ -1,97 +1,25 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { useTranslation as T, Trans as v } from "react-i18next";
-import c from "dompurify";
-import { useSplitPaymentsForm as D } from "../shared/useSplitPaymentsForm/useSplitPaymentsForm.js";
-import "classnames";
-import { SPLIT_BY as u, componentEvents as p } from "../../../../shared/constants.js";
-import { ActionsLayout as P } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { Form as S } from "../../../Common/Form/Form.js";
-import { ReorderableList as C } from "../../../Common/ReorderableList/ReorderableList.js";
-import { BaseLayout as b } from "../../../Base/Base.js";
-import { SDKFormProvider as N } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { useComponentContext as R } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-function z({ employeeId: a, onEvent: n, ...e }) {
-  const o = D({ employeeId: a, ...e });
-  return o.isLoading ? /* @__PURE__ */ r(b, { isLoading: !0, error: o.errorHandling.errors }) : /* @__PURE__ */ r(M, { onEvent: n, splitForm: o });
-}
-function M({ onEvent: a, splitForm: n }) {
-  const { t: e } = T("Employee.PaymentMethod"), o = R(), { Fields: i } = n.form, { remainderId: E, bankAccounts: g } = n.data, { splitBy: s, percentageTotal: f, hasPercentageImbalance: L } = n.status, A = async () => {
-    const t = await n.actions.onSubmit();
-    t && a(p.EMPLOYEE_PAYMENT_METHOD_UPDATED, t.data);
-  }, h = () => {
-    a(p.CANCEL);
-  };
-  if (g.length < 2) return null;
-  const m = (t) => e("splitAmountLabel", {
-    name: c.sanitize(t.name ?? ""),
-    account_number: c.sanitize(t.hiddenAccountNumber ?? ""),
-    interpolation: { escapeValue: !1 }
-  }), y = (t) => {
-    const I = t.map((l) => i.splits[l]?.uuid).filter((l) => !!l);
-    n.actions.reorderSplits(I);
-  };
-  return /* @__PURE__ */ r(b, { error: n.errorHandling.errors, children: /* @__PURE__ */ r(N, { formHookResult: n, children: /* @__PURE__ */ d(S, { onSubmit: A, children: [
-    L && /* @__PURE__ */ r(
-      o.Alert,
-      {
-        status: "error",
-        label: e("validations.percentageErrorWithTotal", { total: f }),
-        disableScrollIntoView: !0
-      }
-    ),
-    /* @__PURE__ */ r(o.Heading, { as: "h2", children: e("title") }),
-    /* @__PURE__ */ r(v, { t: e, i18nKey: "splitDescription", components: { p: /* @__PURE__ */ r(o.Text, {}) } }),
-    /* @__PURE__ */ r(
-      i.SplitBy,
-      {
-        label: e("splitByLabel"),
-        getOptionLabel: (t) => t === u.percentage ? e("percentageLabel") : e("amountLabel")
-      }
-    ),
-    s === u.amount ? /* @__PURE__ */ r(
-      C,
-      {
-        label: e("draggableListLabel"),
-        items: i.splits.map((t) => ({
-          label: t.name ?? "",
-          content: /* @__PURE__ */ r(
-            t.Field,
-            {
-              label: m(t),
-              min: 0,
-              validationMessages: {
-                REQUIRED: e("validations.amountError"),
-                INVALID_AMOUNT: e("validations.amountError"),
-                INVALID_PERCENTAGE: e("validations.amountError")
-              },
-              placeholder: E === t.uuid ? e("remainderLabel") : ""
-            },
-            `amount-${t.uuid}`
-          )
-        })),
-        onReorder: y
+import { jsx as p } from "react/jsx-runtime";
+import { useOnboardingSplitFormDictionary as e } from "./useFormDictionary.js";
+import { componentEvents as r } from "../../../../shared/constants.js";
+import { SplitPaymentsFormBody as E } from "../shared/SplitPaymentsFormBody/SplitPaymentsFormBody.js";
+function d({ employeeId: t, onEvent: o, ...i }) {
+  const n = e();
+  return /* @__PURE__ */ p(
+    E,
+    {
+      employeeId: t,
+      dictionary: n,
+      onSaved: (m) => {
+        o(r.EMPLOYEE_PAYMENT_METHOD_UPDATED, m);
       },
-      `reorderable-amount-list-${s}`
-    ) : i.splits.map((t) => /* @__PURE__ */ r(
-      t.Field,
-      {
-        label: m(t),
-        min: 0,
-        validationMessages: {
-          REQUIRED: e("validations.percentageAmountError"),
-          INVALID_AMOUNT: e("validations.percentageAmountError"),
-          INVALID_PERCENTAGE: e("validations.percentageAmountError")
-        }
+      onCancel: () => {
+        o(r.CANCEL);
       },
-      `percentage-${t.uuid}`
-    )),
-    /* @__PURE__ */ d(P, { children: [
-      /* @__PURE__ */ r(o.Button, { variant: "secondary", type: "button", onClick: h, children: e("cancelAddCta") }),
-      /* @__PURE__ */ r(o.Button, { type: "submit", isLoading: n.status.isPending, children: e("saveCta") })
-    ] })
-  ] }) }) });
+      ...i
+    }
+  );
 }
 export {
-  z as SplitView
+  d as SplitView
 };
 //# sourceMappingURL=SplitView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/SplitView.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport DOMPurify from 'dompurify'\nimport {\n  useSplitPaymentsForm,\n  type SplitByValue,\n  type SplitFieldEntry,\n  type UseSplitPaymentsFormProps,\n  type UseSplitPaymentsFormReady,\n} from '../shared/useSplitPaymentsForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { componentEvents, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\nexport interface SplitViewProps extends Omit<UseSplitPaymentsFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function SplitView({ employeeId, onEvent, ...hookProps }: SplitViewProps) {\n  const splitForm = useSplitPaymentsForm({ employeeId, ...hookProps })\n\n  if (splitForm.isLoading) {\n    return <BaseLayout isLoading error={splitForm.errorHandling.errors} />\n  }\n\n  return <SplitViewReady onEvent={onEvent} splitForm={splitForm} />\n}\n\ninterface SplitViewReadyProps {\n  onEvent: OnEventType<EventType, unknown>\n  splitForm: UseSplitPaymentsFormReady\n}\n\nfunction SplitViewReady({ onEvent, splitForm }: SplitViewReadyProps) {\n  const { t } = useTranslation('Employee.PaymentMethod')\n  const Components = useComponentContext()\n  const { Fields } = splitForm.form\n  const { remainderId, bankAccounts } = splitForm.data\n  const { splitBy, percentageTotal, hasPercentageImbalance } = splitForm.status\n\n  const handleSubmit = async () => {\n    const result = await splitForm.actions.onSubmit()\n    if (result) {\n      onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n    }\n  }\n\n  const handleCancel = () => {\n    onEvent(componentEvents.CANCEL)\n  }\n\n  if (bankAccounts.length < 2) return null\n\n  const labelForSplit = (split: SplitFieldEntry) =>\n    t('splitAmountLabel', {\n      name: DOMPurify.sanitize(split.name ?? ''),\n      account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n      interpolation: { escapeValue: false },\n    })\n\n  const handleReorder = (indices: number[]) => {\n    const orderedUuids = indices\n      .map(index => Fields.splits[index]?.uuid)\n      .filter((uuid): uuid is string => Boolean(uuid))\n    splitForm.actions.reorderSplits(orderedUuids)\n  }\n\n  return (\n    <BaseLayout error={splitForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={splitForm}>\n        <Form onSubmit={handleSubmit}>\n          {hasPercentageImbalance && (\n            <Components.Alert\n              status=\"error\"\n              label={t('validations.percentageErrorWithTotal', { total: percentageTotal })}\n              disableScrollIntoView\n            />\n          )}\n          <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n          <Trans t={t} i18nKey=\"splitDescription\" components={{ p: <Components.Text /> }} />\n          <Fields.SplitBy\n            label={t('splitByLabel')}\n            getOptionLabel={(value: SplitByValue) =>\n              value === SPLIT_BY.percentage ? t('percentageLabel') : t('amountLabel')\n            }\n          />\n          {splitBy === SPLIT_BY.amount ? (\n            <ReorderableList\n              key={`reorderable-amount-list-${splitBy}`}\n              label={t('draggableListLabel')}\n              items={Fields.splits.map(split => ({\n                label: split.name ?? '',\n                content: (\n                  <split.Field\n                    key={`amount-${split.uuid}`}\n                    label={labelForSplit(split)}\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('validations.amountError'),\n                      INVALID_AMOUNT: t('validations.amountError'),\n                      INVALID_PERCENTAGE: t('validations.amountError'),\n                    }}\n                    placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n                  />\n                ),\n              }))}\n              onReorder={handleReorder}\n            />\n          ) : (\n            Fields.splits.map(split => (\n              <split.Field\n                key={`percentage-${split.uuid}`}\n                label={labelForSplit(split)}\n                min={0}\n                validationMessages={{\n                  REQUIRED: t('validations.percentageAmountError'),\n                  INVALID_AMOUNT: t('validations.percentageAmountError'),\n                  INVALID_PERCENTAGE: t('validations.percentageAmountError'),\n                }}\n              />\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={splitForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["SplitView","employeeId","onEvent","hookProps","splitForm","useSplitPaymentsForm","BaseLayout","jsx","SplitViewReady","t","useTranslation","Components","useComponentContext","Fields","remainderId","bankAccounts","splitBy","percentageTotal","hasPercentageImbalance","handleSubmit","result","componentEvents","handleCancel","labelForSplit","split","DOMPurify","handleReorder","indices","orderedUuids","index","uuid","SDKFormProvider","jsxs","Form","Trans","value","SPLIT_BY","ReorderableList","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"SplitView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/SplitView.tsx"],"sourcesContent":["import { SplitPaymentsFormBody } from '../shared/SplitPaymentsFormBody'\nimport type { UseSplitPaymentsFormProps } from '../shared/useSplitPaymentsForm'\nimport { useOnboardingSplitFormDictionary } from './useFormDictionary'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\nexport interface SplitViewProps extends Omit<UseSplitPaymentsFormProps, 'employeeId'> {\n  employeeId: string\n  onEvent: OnEventType<EventType, unknown>\n}\n\nexport function SplitView({ employeeId, onEvent, ...hookProps }: SplitViewProps) {\n  const dictionary = useOnboardingSplitFormDictionary()\n\n  return (\n    <SplitPaymentsFormBody\n      employeeId={employeeId}\n      dictionary={dictionary}\n      onSaved={data => {\n        onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, data)\n      }}\n      onCancel={() => {\n        onEvent(componentEvents.CANCEL)\n      }}\n      {...hookProps}\n    />\n  )\n}\n"],"names":["SplitView","employeeId","onEvent","hookProps","dictionary","useOnboardingSplitFormDictionary","jsx","SplitPaymentsFormBody","data","componentEvents"],"mappings":";;;;AAWO,SAASA,EAAU,EAAE,YAAAC,GAAY,SAAAC,GAAS,GAAGC,KAA6B;AAC/E,QAAMC,IAAaC,EAAA;AAEnB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAN;AAAA,MACA,YAAAG;AAAA,MACA,SAAS,CAAAI,MAAQ;AACf,QAAAN,EAAQO,EAAgB,iCAAiCD,CAAI;AAAA,MAC/D;AAAA,MACA,UAAU,MAAM;AACd,QAAAN,EAAQO,EAAgB,MAAM;AAAA,MAChC;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,18 @@
+import { BankFormBodyDictionary } from '../shared/BankFormBody';
+import { SplitPaymentsFormBodyDictionary } from '../shared/SplitPaymentsFormBody';
+/**
+ * Resolves the shared `BankFormBody`'s text against onboarding's existing
+ * `Employee.PaymentMethod` namespace. The cancel action maps onboarding's
+ * `cancelAddCta` (the bank form's "Cancel" button) onto the body's `cancelCta`,
+ * preserving backward compatibility for partners overriding the onboarding keys
+ * through the block's `dictionary` prop.
+ */
+export declare function useOnboardingBankFormDictionary(): BankFormBodyDictionary;
+/**
+ * Resolves the shared `SplitPaymentsFormBody`'s text against onboarding's
+ * existing `Employee.PaymentMethod` namespace. Interpolated templates
+ * (`splitAmountLabel`, `validations.percentageErrorWithTotal`) are passed
+ * through unresolved so the body interpolates them at render time. The cancel
+ * action maps onboarding's `cancelAddCta` onto the body's `cancelCta`.
+ */
+export declare function useOnboardingSplitFormDictionary(): SplitPaymentsFormBodyDictionary;