@gusto/embedded-react-sdk 0.44.1 → 0.45.0

package/dist/components/Employee/Dashboard/JobAndPayView.js

@@ -1,213 +1,594 @@
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
-import { useTranslation as N } from "react-i18next";
-import { Flex as i } from "../../Common/Flex/Flex.js";
-import { useComponentContext as U } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { jsxs as l, jsx as n } from "react/jsx-runtime";
+import { useCallback as re, useState as N } from "react";
+import { useTranslation as k } from "react-i18next";
+import { useGustoEmbeddedContext as Ye } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as Ve } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as We } from "react-error-boundary";
+import { useJobsAndCompensationsDeleteMutation as Ge } from "@gusto/embedded-api/react-query/jobsAndCompensationsDelete";
+import { usePendingChangeDetailRenderer as Ie } from "./usePendingChangeDetailRenderer.js";
+import { PendingChangesReviewModal as qe } from "./PendingChangesReviewModal.js";
+import { Flex as c } from "../../Common/Flex/Flex.js";
+import { useComponentContext as Ke } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "classnames";
-import "../../../shared/constants.js";
-import { Loading as F } from "../../Common/Loading/Loading.js";
-import { EmptyData as y } from "../../Common/EmptyData/EmptyData.js";
-import { formatDateLongWithYear as s } from "../../../helpers/dateFormatting.js";
-import { useFormatPayRate as V } from "../../../helpers/formattedStrings.js";
-import H from "../../../hooks/useNumberFormatter.js";
-import p from "../../../assets/icons/plus-circle.svg.js";
-import L from "../../../assets/icons/percent-circle.svg.js";
-import { useDataView as l } from "../../Common/DataView/useDataView.js";
-import { DataView as m } from "../../Common/DataView/DataView.js";
-function Z({
-  job: o,
-  paymentMethod: u,
-  bankAccounts: b = [],
-  garnishments: P = [],
-  payStubs: h = [],
-  payStubsPagination: A,
-  isLoading: f = !1,
-  onEditCompensation: x,
-  onSplitPaycheck: g,
-  onAddBankAccount: j,
-  onAddDeduction: k
+import { componentEvents as h, FlsaStatus as Xe, PAYMENT_METHODS as $e } from "../../../shared/constants.js";
+import { EmptyData as J } from "../../Common/EmptyData/EmptyData.js";
+import { BaseLayout as se } from "../../Base/Base.js";
+import { composeErrorHandler as ze } from "../../../partner-hook-utils/composeErrorHandler.js";
+import { readableStreamToBlob as Qe } from "../../../helpers/readableStreamToBlob.js";
+import { formatDateLongWithYear as C } from "../../../helpers/dateFormatting.js";
+import { useFormatCompensationRate as Ze } from "../../../helpers/formattedStrings.js";
+import de from "../../../hooks/useNumberFormatter.js";
+import { useI18n as O } from "../../../i18n/I18n.js";
+import { useDeleteBankAccount as en } from "../PaymentMethod/shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as nn } from "../PaymentMethod/shared/DeleteBankAccountDialog.js";
+import { usePaymentMethodList as tn } from "../PaymentMethod/shared/usePaymentMethodList.js";
+import { useDeductionsList as on } from "../Deductions/shared/useDeductionsList.js";
+import { useDeleteDeduction as an } from "../Deductions/shared/useDeleteDeduction.js";
+import { DeleteDeductionDialog as rn } from "../Deductions/shared/DeleteDeductionDialog.js";
+import { formatDeductionAmount as sn } from "../Deductions/shared/formatDeductionAmount.js";
+import x from "../../../assets/icons/plus-circle.svg.js";
+import dn from "../../../assets/icons/percent-circle.svg.js";
+import ln from "../../../assets/icons/download-cloud.svg.js";
+import _ from "../../../assets/icons/trashcan.svg.js";
+import le from "../../../assets/icons/pencil.svg.js";
+import { useEmployeeCompensation as cn } from "./hooks/useEmployeeCompensation.js";
+import { HamburgerMenu as R } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as w } from "../../Common/DataView/useDataView.js";
+import { DataView as v } from "../../Common/DataView/DataView.js";
+function ce(d) {
+  if (d === void 0) return null;
+  const u = parseFloat(d);
+  return Number.isFinite(u) ? u : null;
+}
+function Kn({
+  employeeId: d,
+  onEvent: u,
+  onEditCompensation: F,
+  onAddJob: ue,
+  onAddAnotherJob: me,
+  onAddDeduction: pe,
+  onEditDeduction: ye
 }) {
-  const { t } = N("Employee.Dashboard"), a = U(), D = V(), d = H("currency"), C = [
+  O("Employee.PaymentMethod"), O("Employee.Compensation"), O("Employee.Deductions");
+  const { t } = k("Employee.Dashboard"), { t: P } = k("Employee.PaymentMethod"), { t: be } = k("Employee.Compensation"), { t: T } = k("Employee.Deductions"), o = Ke(), H = Ze(), B = de("currency"), ge = de("percent"), Y = Ye(), { showBoundary: V } = We(), a = cn({ employeeId: d }), D = a.isLoading ? [] : a.data.jobs, he = a.isLoading ? void 0 : a.data.primaryFlsaStatus, j = a.isLoading ? [] : a.data.pendingChanges, Pe = a.isLoading ? !1 : a.data.hasMultipleJobs, fe = a.isLoading ? [] : a.data.payStubs, Ae = a.isLoading ? void 0 : a.pagination.payStubs, W = a.isLoading ? null : a.status.cancellingCompensationUuid, S = a.isLoading ? void 0 : a.actions.cancelPendingChange, M = a.isLoading ? void 0 : a.data.employeeFirstName, G = re(
+    async (e) => {
+      if (!S) return;
+      await S(e) && u(h.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
+        employeeId: d,
+        compensationId: e.compensationUuid
+      });
+    },
+    [S, u, d]
+  ), [Ce, I] = N(
+    () => /* @__PURE__ */ new Set()
+  ), De = re(
+    async (e) => {
+      const i = window.open("", "_blank", "noopener,noreferrer"), E = t("jobAndPay.paystubs.downloadLoadingMessage");
+      if (i) {
+        const r = i.document;
+        r.title = E;
+        const p = r.createElement("style");
+        p.textContent = "body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#444;gap:12px}.spinner{width:20px;height:20px;border:2px solid #ccc;border-top-color:#444;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}", r.head.appendChild(p);
+        const g = r.createElement("div");
+        g.className = "spinner", g.setAttribute("aria-hidden", "true");
+        const ae = r.createElement("span");
+        ae.textContent = E, r.body.replaceChildren(g, ae);
+      }
+      I((r) => {
+        const p = new Set(r);
+        return p.add(e), p;
+      });
+      try {
+        const r = await Ve(Y, {
+          payrollId: e,
+          employeeId: d
+        });
+        if (!r.value?.responseStream)
+          throw new Error(t("jobAndPay.paystubs.downloadError"));
+        const p = await Qe(r.value.responseStream, "application/pdf"), g = URL.createObjectURL(p);
+        i && (i.location.href = g), URL.revokeObjectURL(g);
+      } catch (r) {
+        i && i.close(), V(r instanceof Error ? r : new Error(String(r)));
+      } finally {
+        I((r) => {
+          const p = new Set(r);
+          return p.delete(e), p;
+        });
+      }
+    },
+    [Y, d, t, V]
+  ), [f, U] = N(null), { mutateAsync: je, isPending: q } = Ge(), Le = async () => {
+    if (!f) return;
+    const e = f.uuid;
+    await je({ request: { jobId: e } }), u(h.EMPLOYEE_JOB_DELETED, { employeeId: d, jobId: e }), U(null);
+  }, s = D.length === 1 ? D[0] : void 0, A = Pe, Ee = D.length >= 1 && he === Xe.NONEXEMPT, K = s ? ce(s.rate) : null, [ke, X] = N(!1), xe = Ie(M), we = j.length > 0, $ = A && j.length > 1, ve = we && !$, b = j[0], m = tn({ employeeId: d }), z = m.isLoading ? void 0 : m.data.paymentMethod, L = m.isLoading ? [] : m.data.bankAccounts, Te = m.isLoading ? void 0 : m.status.deletePendingBankAccountUuid, { pendingDeleteAccount: Q, setPendingDeleteAccount: Z, handleConfirmDelete: Be } = en(async (e) => {
+    if (m.isLoading) return;
+    const i = await m.actions.onDelete(e);
+    i && u(h.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
+  }), y = on({ employeeId: d }), Se = y.isLoading ? [] : y.data.deductions, ee = y.isLoading ? void 0 : y.status.deletingGarnishmentUuid, {
+    pendingDeleteDeduction: ne,
+    setPendingDeleteDeduction: te,
+    handleConfirmDelete: Me
+  } = an(async (e) => {
+    if (y.isLoading) return;
+    const i = await y.actions.onDelete(e);
+    i && u(h.EMPLOYEE_DEDUCTION_DELETED, i.data.garnishment);
+  }), oe = ze([a, m, y]), Ue = [
+    {
+      key: "jobTitle",
+      title: t("jobAndPay.compensation.columns.jobTitle"),
+      render: (e) => {
+        const i = ce(e.rate);
+        return /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ n(o.Text, { children: e.title || "-" }),
+          i !== null && e.paymentUnit ? /* @__PURE__ */ n(o.Text, { variant: "supporting", children: H(i, e.paymentUnit) }) : null
+        ] });
+      }
+    },
+    {
+      key: "payType",
+      title: t("jobAndPay.compensation.columns.payType"),
+      render: (e) => {
+        const i = e.compensations?.find(
+          (E) => E.uuid === e.currentCompensationUuid
+        )?.flsaStatus;
+        return i !== void 0 ? be(`flsaStatusLabels.${i}`) : "-";
+      }
+    },
+    {
+      key: "startDate",
+      title: t("jobAndPay.compensation.columns.startDate"),
+      render: (e) => e.hireDate ? C(e.hireDate) : "-"
+    }
+  ], Ne = w({
+    data: D,
+    columns: Ue,
+    itemMenu: (e) => /* @__PURE__ */ n(
+      R,
+      {
+        triggerLabel: t("jobAndPay.compensation.hamburgerTitle"),
+        isLoading: q,
+        items: [
+          {
+            label: t("jobAndPay.compensation.editJobCta"),
+            icon: /* @__PURE__ */ n(le, { "aria-hidden": !0 }),
+            onClick: () => {
+              F?.(e);
+            }
+          },
+          ...e.primary ? [] : [
+            {
+              label: t("jobAndPay.compensation.deleteJobCta"),
+              icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 }),
+              onClick: () => {
+                U({ uuid: e.uuid, title: e.title ?? "" });
+              }
+            }
+          ]
+        ]
+      }
+    )
+  }), Je = [
     {
       key: "nickname",
       title: t("jobAndPay.payment.nickname"),
-      render: (n) => n.name || "-"
+      render: (e) => e.name || "-"
     },
     {
       key: "routingNumber",
       title: t("jobAndPay.payment.routingNumber"),
-      render: (n) => n.routingNumber || "-"
+      render: (e) => e.routingNumber || "-"
     },
     {
       key: "accountType",
       title: t("jobAndPay.payment.accountType"),
-      render: (n) => n.accountType || "-"
+      render: (e) => e.accountType || "-"
     }
-  ], B = [
+  ], Oe = [
     {
       key: "description",
       title: t("jobAndPay.deductions.deduction"),
-      render: (n) => n.description || "-"
+      render: (e) => e.description || "-"
     },
     {
       key: "frequency",
       title: t("jobAndPay.deductions.frequency"),
-      render: (n) => n.recurring ? t("jobAndPay.deductions.recurring") : "-"
+      render: (e) => e.recurring ? t("jobAndPay.deductions.recurring") : t("jobAndPay.deductions.oneTime")
     },
     {
       key: "amount",
       title: t("jobAndPay.deductions.withhold"),
-      render: (n) => n.amount && typeof n.amount == "number" ? d(n.amount) : n.annualMaximum ? `${n.annualMaximum}% per paycheck` : "-"
+      render: (e) => sn(e, {
+        formatCurrency: B,
+        formatPercent: ge,
+        formatPerPaycheck: (i) => t("jobAndPay.deductions.amountPerPaycheck", { value: i })
+      })
     }
-  ], T = [
+  ], _e = [
     {
       key: "payday",
       title: t("jobAndPay.paystubs.payday"),
-      render: (n) => s(n.checkDate) || "-"
+      render: (e) => C(e.checkDate) || "-"
     },
     {
       key: "checkAmount",
       title: t("jobAndPay.paystubs.checkAmount"),
-      render: (n) => {
-        if (!n.netPay) return "-";
-        const c = parseFloat(n.netPay);
-        return isNaN(c) ? "-" : d(c);
+      render: (e) => {
+        if (!e.netPay) return "-";
+        const i = parseFloat(e.netPay);
+        return isNaN(i) ? "-" : B(i);
       }
     },
     {
       key: "grossPay",
       title: t("jobAndPay.paystubs.grossPay"),
-      render: (n) => {
-        if (!n.grossPay) return "-";
-        const c = parseFloat(n.grossPay);
-        return isNaN(c) ? "-" : d(c);
+      render: (e) => {
+        if (!e.grossPay) return "-";
+        const i = parseFloat(e.grossPay);
+        return isNaN(i) ? "-" : B(i);
       }
     },
     {
       key: "paymentMethod",
       title: t("jobAndPay.paystubs.paymentMethod"),
-      render: () => u?.type || t("jobAndPay.paystubs.noPaymentMethod")
+      render: () => z?.type || t("jobAndPay.paystubs.noPaymentMethod")
     }
-  ], S = l({
-    data: b,
-    columns: C,
-    isFetching: !1,
-    emptyState: () => /* @__PURE__ */ e(
-      y,
+  ], Re = w({
+    data: L,
+    columns: Je,
+    itemMenu: (e) => /* @__PURE__ */ n(
+      R,
       {
-        title: t("jobAndPay.payment.emptyState.title"),
-        description: t("jobAndPay.payment.emptyState.description")
+        items: [
+          {
+            label: P("deleteBankAccountCta"),
+            onClick: () => {
+              Z({
+                uuid: e.uuid,
+                hiddenAccountNumber: e.hiddenAccountNumber
+              });
+            },
+            icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 })
+          }
+        ],
+        triggerLabel: P("hamburgerTitle")
       }
     )
-  }), v = l({
-    data: P,
-    columns: B,
-    emptyState: () => /* @__PURE__ */ e(
-      y,
+  }), Fe = w({
+    data: Se,
+    columns: Oe,
+    itemMenu: (e) => /* @__PURE__ */ n(
+      R,
+      {
+        isLoading: ee === e.uuid,
+        items: [
+          {
+            label: T("editCta"),
+            onClick: () => ye?.(e),
+            icon: /* @__PURE__ */ n(le, { "aria-hidden": !0 })
+          },
+          {
+            label: T("deleteCta"),
+            onClick: () => {
+              te(e);
+            },
+            icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 })
+          }
+        ],
+        triggerLabel: T("hamburgerTitle")
+      }
+    ),
+    emptyState: () => /* @__PURE__ */ n(
+      J,
       {
         title: t("jobAndPay.deductions.emptyState.title"),
         description: t("jobAndPay.deductions.emptyState.description")
       }
     )
-  }), w = l({
-    data: h,
-    columns: T,
-    pagination: A,
-    emptyState: () => /* @__PURE__ */ e(
-      y,
+  }), He = w({
+    data: fe,
+    columns: _e,
+    pagination: Ae,
+    itemMenu: (e) => {
+      const i = !!e.payrollUuid && Ce.has(e.payrollUuid);
+      return /* @__PURE__ */ n(
+        o.ButtonIcon,
+        {
+          variant: "tertiary",
+          "aria-label": t("jobAndPay.paystubs.downloadCta"),
+          isDisabled: !e.payrollUuid,
+          isLoading: i,
+          onClick: () => {
+            e.payrollUuid && De(e.payrollUuid);
+          },
+          children: /* @__PURE__ */ n(ln, { "aria-hidden": !0 })
+        }
+      );
+    },
+    emptyState: () => /* @__PURE__ */ n(
+      J,
       {
         title: t("jobAndPay.paystubs.emptyState.title"),
         description: t("jobAndPay.paystubs.emptyState.description")
       }
     )
   });
-  return f ? /* @__PURE__ */ e(F, {}) : /* @__PURE__ */ r(i, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ e(
-      a.Box,
+  if (a.isLoading || m.isLoading || y.isLoading)
+    return /* @__PURE__ */ n(se, { isLoading: !0, error: oe.errors });
+  const ie = z?.type === $e.directDeposit;
+  return /* @__PURE__ */ n(se, { error: oe.errors, children: /* @__PURE__ */ l(c, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ n(
+      o.Box,
       {
-        header: /* @__PURE__ */ e(
-          a.BoxHeader,
+        withPadding: !A,
+        header: /* @__PURE__ */ n(
+          o.BoxHeader,
           {
             title: t("jobAndPay.compensation.title"),
-            action: /* @__PURE__ */ e(a.Button, { variant: "secondary", onClick: x, children: t("jobAndPay.compensation.editCta") })
+            action: A ? null : s ? /* @__PURE__ */ n(
+              o.Button,
+              {
+                variant: "secondary",
+                onClick: () => {
+                  F?.(s);
+                },
+                children: t("jobAndPay.compensation.editCta")
+              }
+            ) : /* @__PURE__ */ n(
+              o.Button,
+              {
+                variant: "secondary",
+                onClick: ue,
+                icon: /* @__PURE__ */ n(x, {}),
+                children: t("jobAndPay.compensation.addJobCta")
+              }
+            )
           }
         ),
-        children: /* @__PURE__ */ e(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ r(i, { flexDirection: "column", gap: 12, children: [
-          o?.title && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(a.Text, { variant: "supporting", children: t("jobAndPay.compensation.jobTitle") }),
-            /* @__PURE__ */ e(a.Text, { children: o.title })
-          ] }),
-          o?.paymentUnit && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(a.Text, { variant: "supporting", children: t("jobAndPay.compensation.type") }),
-            /* @__PURE__ */ e(a.Text, { children: o.paymentUnit === "Hour" ? t("jobAndPay.compensation.types.hourly") : o.paymentUnit === "Salary" || o.paymentUnit === "Year" ? t("jobAndPay.compensation.types.salary") : o.paymentUnit })
-          ] }),
-          o?.rate && o.paymentUnit && typeof o.rate == "number" && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(a.Text, { variant: "supporting", children: t("jobAndPay.compensation.wage") }),
-            /* @__PURE__ */ e(a.Text, { children: D(o.rate, o.paymentUnit) })
-          ] }),
-          o?.hireDate && /* @__PURE__ */ r(i, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(a.Text, { variant: "supporting", children: t("jobAndPay.compensation.startDate") }),
-            /* @__PURE__ */ e(a.Text, { children: s(o.hireDate) })
-          ] })
-        ] }) })
+        footer: Ee ? /* @__PURE__ */ n(
+          o.Button,
+          {
+            variant: "secondary",
+            onClick: me,
+            icon: /* @__PURE__ */ n(x, {}),
+            children: t("jobAndPay.compensation.addAnotherJobCta")
+          }
+        ) : void 0,
+        children: /* @__PURE__ */ l(c, { flexDirection: "column", gap: 16, children: [
+          ve && b && /* @__PURE__ */ n(
+            o.Alert,
+            {
+              status: "warning",
+              disableScrollIntoView: !0,
+              label: A ? t("jobAndPay.compensation.pendingChange.alertLabelWithJob", {
+                jobTitle: b.jobTitle,
+                date: C(b.effectiveDate)
+              }) : t("jobAndPay.compensation.pendingChange.alertLabel", {
+                date: C(b.effectiveDate)
+              }),
+              children: /* @__PURE__ */ l(c, { flexDirection: "column", gap: 12, children: [
+                /* @__PURE__ */ n(
+                  o.UnorderedList,
+                  {
+                    items: b.details.map((e) => xe(e))
+                  }
+                ),
+                /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
+                  o.Button,
+                  {
+                    variant: "secondary",
+                    isLoading: W === b.compensationUuid,
+                    onClick: () => {
+                      G(b);
+                    },
+                    children: t("jobAndPay.compensation.pendingChange.cancelCta")
+                  }
+                ) })
+              ] })
+            }
+          ),
+          $ && /* @__PURE__ */ n(
+            o.Alert,
+            {
+              status: "warning",
+              disableScrollIntoView: !0,
+              label: t("jobAndPay.compensation.pendingChange.summaryLabel", {
+                name: M ?? ""
+              }),
+              action: /* @__PURE__ */ n(
+                o.Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    X(!0);
+                  },
+                  children: t("jobAndPay.compensation.pendingChange.reviewCta")
+                }
+              )
+            }
+          ),
+          A ? /* @__PURE__ */ n(
+            v,
+            {
+              label: t("jobAndPay.compensation.tableLabel"),
+              isWithinBox: !0,
+              ...Ne
+            }
+          ) : s ? /* @__PURE__ */ l(c, { flexDirection: "column", gap: 12, children: [
+            s.title && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.jobTitle") }),
+              /* @__PURE__ */ n(o.Text, { children: s.title })
+            ] }),
+            s.paymentUnit && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.type") }),
+              /* @__PURE__ */ n(o.Text, { children: s.paymentUnit === "Hour" ? t("jobAndPay.compensation.types.hourly") : s.paymentUnit === "Salary" || s.paymentUnit === "Year" ? t("jobAndPay.compensation.types.salary") : s.paymentUnit })
+            ] }),
+            K !== null && s.paymentUnit && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.wage") }),
+              /* @__PURE__ */ n(o.Text, { children: H(K, s.paymentUnit) })
+            ] }),
+            s.hireDate && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.startDate") }),
+              /* @__PURE__ */ n(o.Text, { children: C(s.hireDate) })
+            ] })
+          ] }) : /* @__PURE__ */ n(
+            J,
+            {
+              title: t("jobAndPay.compensation.emptyState.title"),
+              description: t("jobAndPay.compensation.emptyState.description")
+            }
+          )
+        ] })
       }
     ),
-    /* @__PURE__ */ e(
-      a.Box,
+    /* @__PURE__ */ n(
+      o.Box,
       {
-        header: /* @__PURE__ */ e(
-          a.BoxHeader,
+        withPadding: L.length === 0,
+        header: /* @__PURE__ */ n(
+          o.BoxHeader,
           {
             title: t("jobAndPay.payment.title"),
-            action: /* @__PURE__ */ r(i, { gap: 8, alignItems: "flex-end", children: [
-              /* @__PURE__ */ e(
-                a.Button,
+            action: /* @__PURE__ */ l(c, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
+              ie && L.length > 1 && /* @__PURE__ */ n(
+                o.Button,
                 {
                   variant: "secondary",
-                  onClick: g,
-                  icon: /* @__PURE__ */ e(L, {}),
+                  onClick: () => {
+                    u(h.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: d });
+                  },
+                  icon: /* @__PURE__ */ n(dn, {}),
                   children: t("jobAndPay.payment.splitPaycheckCta")
                 }
               ),
-              /* @__PURE__ */ e(
-                a.Button,
+              /* @__PURE__ */ n(
+                o.Button,
                 {
                   variant: "secondary",
-                  onClick: j,
-                  icon: /* @__PURE__ */ e(p, {}),
+                  onClick: () => {
+                    u(h.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: d });
+                  },
+                  icon: /* @__PURE__ */ n(x, {}),
                   children: t("jobAndPay.payment.addBankAccountCta")
                 }
               )
             ] })
           }
         ),
-        children: /* @__PURE__ */ e(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(m, { label: t("jobAndPay.payment.listLabel"), ...S }) })
+        children: L.length === 0 ? /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ n(o.Text, { variant: "supporting", children: P("paymentMethodLabel") }),
+          /* @__PURE__ */ n(o.Text, { children: P(ie ? "directDepositLabel" : "checkLabel") })
+        ] }) : /* @__PURE__ */ n(
+          v,
+          {
+            label: t("jobAndPay.payment.listLabel"),
+            isWithinBox: !0,
+            ...Re
+          }
+        )
       }
     ),
-    /* @__PURE__ */ e(
-      a.Box,
+    /* @__PURE__ */ n(
+      o.Box,
       {
-        header: /* @__PURE__ */ e(
-          a.BoxHeader,
+        withPadding: !1,
+        header: /* @__PURE__ */ n(
+          o.BoxHeader,
           {
             title: t("jobAndPay.deductions.title"),
-            action: /* @__PURE__ */ e(
-              a.Button,
+            action: /* @__PURE__ */ n(
+              o.Button,
               {
                 variant: "secondary",
-                onClick: k,
-                icon: /* @__PURE__ */ e(p, {}),
+                onClick: pe,
+                icon: /* @__PURE__ */ n(x, {}),
                 children: t("jobAndPay.deductions.addDeductionCta")
               }
             )
           }
         ),
-        children: /* @__PURE__ */ e(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(m, { label: t("jobAndPay.deductions.listLabel"), ...v }) })
+        children: /* @__PURE__ */ n(
+          v,
+          {
+            label: t("jobAndPay.deductions.listLabel"),
+            isWithinBox: !0,
+            ...Fe
+          }
+        )
       }
     ),
-    /* @__PURE__ */ e(a.Box, { header: /* @__PURE__ */ e(a.BoxHeader, { title: t("jobAndPay.paystubs.title") }), children: /* @__PURE__ */ e(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(m, { label: t("jobAndPay.paystubs.listLabel"), ...w }) }) })
-  ] });
+    /* @__PURE__ */ n(
+      o.Box,
+      {
+        withPadding: !1,
+        header: /* @__PURE__ */ n(o.BoxHeader, { title: t("jobAndPay.paystubs.title") }),
+        children: /* @__PURE__ */ n(v, { label: t("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...He })
+      }
+    ),
+    /* @__PURE__ */ n(
+      qe,
+      {
+        isOpen: ke,
+        pendingChanges: j,
+        employeeFirstName: M,
+        cancellingCompensationUuid: W,
+        onClose: () => {
+          X(!1);
+        },
+        onCancelChange: (e) => {
+          G(e);
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      nn,
+      {
+        pendingDeleteAccount: Q,
+        isPrimaryActionLoading: Te === Q?.uuid,
+        onClose: () => {
+          Z(null);
+        },
+        onConfirm: () => {
+          Be();
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      rn,
+      {
+        pendingDeleteDeduction: ne,
+        isPrimaryActionLoading: ee === ne?.uuid,
+        onClose: () => {
+          te(null);
+        },
+        onConfirm: () => {
+          Me();
+        }
+      }
+    ),
+    /* @__PURE__ */ n(
+      o.Dialog,
+      {
+        isOpen: f !== null,
+        onClose: () => {
+          U(null);
+        },
+        onPrimaryActionClick: () => {
+          Le();
+        },
+        isPrimaryActionLoading: q,
+        isDestructive: !0,
+        title: t("jobAndPay.compensation.deleteJobDialog.title"),
+        primaryActionLabel: t("jobAndPay.compensation.deleteJobDialog.confirmCta"),
+        closeActionLabel: t("jobAndPay.compensation.deleteJobDialog.cancelCta"),
+        children: f ? t("jobAndPay.compensation.deleteJobDialog.description", {
+          jobTitle: f.title
+        }) : null
+      }
+    )
+  ] }) });
 }
 export {
-  Z as JobAndPayView
+  Kn as JobAndPayView
 };
 //# sourceMappingURL=JobAndPayView.js.map