@gusto/embedded-react-sdk 0.46.0 → 0.46.3

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

@@ -1,142 +1,146 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { useCallback as ce, useState as J } from "react";
-import { useTranslation as v } from "react-i18next";
-import { useGustoEmbeddedContext as ze } from "@gusto/embedded-api/react-query/_context";
-import { payrollsGetPayStub as Qe } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
-import { useErrorBoundary as Ze } from "react-error-boundary";
-import { useJobsAndCompensationsDeleteMutation as et } from "@gusto/embedded-api/react-query/jobsAndCompensationsDelete";
-import { usePendingChangeDetailRenderer as tt } from "./usePendingChangeDetailRenderer.js";
-import { PendingChangesReviewModal as nt } from "./PendingChangesReviewModal.js";
-import ot from "./JobAndPayView.module.scss.js";
-import { Flex as c } from "../../Common/Flex/Flex.js";
-import { useComponentContext as it } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { jsx as t, jsxs as f, Fragment as rn } from "react/jsx-runtime";
+import { useCallback as pe, useState as R, useEffect as dn } from "react";
+import { useTranslation as k } from "react-i18next";
+import { useGustoEmbeddedContext as cn } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as ln } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as un } from "react-error-boundary";
+import { useJobsAndCompensationsDeleteMutation as mn } from "@gusto/embedded-api/react-query/jobsAndCompensationsDelete";
+import { usePendingChangeDetailRenderer as pn } from "./usePendingChangeDetailRenderer.js";
+import { PendingChangesReviewModal as yn } from "./PendingChangesReviewModal.js";
+import ye from "./JobAndPayView.module.scss.js";
+import { Flex as j } from "../../Common/Flex/Flex.js";
+import { useComponentContext as bn } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "classnames";
-import { componentEvents as P, FlsaStatus as le, PAYMENT_METHODS as at } from "../../../shared/constants.js";
-import { Loading as x } from "../../Common/Loading/Loading.js";
-import { EmptyData as O } from "../../Common/EmptyData/EmptyData.js";
-import { BaseLayout as rt } from "../../Base/Base.js";
-import { composeErrorHandler as st } from "../../../partner-hook-utils/composeErrorHandler.js";
-import { readableStreamToBlob as dt } from "../../../helpers/readableStreamToBlob.js";
-import { formatDateToStringDate as ct, formatDateLongWithYear as j } from "../../../helpers/dateFormatting.js";
-import { useFormatCompensationRate as lt } from "../../../helpers/formattedStrings.js";
-import me from "../../../hooks/useNumberFormatter.js";
-import { useI18n as _ } from "../../../i18n/I18n.js";
-import { useDeleteBankAccount as mt } from "../PaymentMethod/shared/useDeleteBankAccount.js";
-import { DeleteBankAccountDialog as ut } from "../PaymentMethod/shared/DeleteBankAccountDialog.js";
-import { usePaymentMethodList as pt } from "../PaymentMethod/shared/usePaymentMethodList.js";
-import { useDeductionsList as yt } from "../Deductions/shared/useDeductionsList.js";
-import { useDeleteDeduction as bt } from "../Deductions/shared/useDeleteDeduction.js";
-import { DeleteDeductionDialog as gt } from "../Deductions/shared/DeleteDeductionDialog.js";
-import { formatDeductionAmount as ht } from "../Deductions/shared/formatDeductionAmount.js";
-import k from "../../../assets/icons/plus-circle.svg.js";
-import ft from "../../../assets/icons/percent-circle.svg.js";
-import Pt from "../../../assets/icons/download-cloud.svg.js";
-import R from "../../../assets/icons/trashcan.svg.js";
-import ue from "../../../assets/icons/pencil.svg.js";
-import { useEmployeeCompensation as Ct } from "./hooks/useEmployeeCompensation.js";
-import { HamburgerMenu as H } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useDataView as w } from "../../Common/DataView/useDataView.js";
-import { DataView as T } from "../../Common/DataView/DataView.js";
-function pe(s) {
-  if (s === void 0) return null;
-  const m = parseFloat(s);
-  return Number.isFinite(m) ? m : null;
+import { componentEvents as P, FlsaStatus as be, PAYMENT_METHODS as gn } from "../../../shared/constants.js";
+import { Loading as v } from "../../Common/Loading/Loading.js";
+import { EmptyData as _ } from "../../Common/EmptyData/EmptyData.js";
+import { BaseLayout as hn } from "../../Base/Base.js";
+import { composeErrorHandler as fn } from "../../../partner-hook-utils/composeErrorHandler.js";
+import { readableStreamToBlob as Pn } from "../../../helpers/readableStreamToBlob.js";
+import { formatDateToStringDate as Cn, formatDateLongWithYear as L } from "../../../helpers/dateFormatting.js";
+import { useFormatCompensationRate as An } from "../../../helpers/formattedStrings.js";
+import ge from "../../../hooks/useNumberFormatter.js";
+import { useI18n as F } from "../../../i18n/I18n.js";
+import { useDeleteBankAccount as Dn } from "../PaymentMethod/shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as jn } from "../PaymentMethod/shared/DeleteBankAccountDialog.js";
+import { usePaymentMethodList as Ln } from "../PaymentMethod/shared/usePaymentMethodList.js";
+import { useDeductionsList as wn } from "../Deductions/shared/useDeductionsList.js";
+import { useDeleteDeduction as En } from "../Deductions/shared/useDeleteDeduction.js";
+import { DeleteDeductionDialog as kn } from "../Deductions/shared/DeleteDeductionDialog.js";
+import { formatDeductionAmount as vn } from "../Deductions/shared/formatDeductionAmount.js";
+import U from "../../../assets/icons/plus-circle.svg.js";
+import Un from "../../../assets/icons/percent-circle.svg.js";
+import Sn from "../../../assets/icons/download-cloud.svg.js";
+import V from "../../../assets/icons/trashcan.svg.js";
+import he from "../../../assets/icons/pencil.svg.js";
+import { useEmployeeCompensation as Bn } from "./hooks/useEmployeeCompensation.js";
+import { VisuallyHidden as Jn } from "../../Common/VisuallyHidden/VisuallyHidden.js";
+import { HamburgerMenu as Y } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as S } from "../../Common/DataView/useDataView.js";
+import { DataView as B } from "../../Common/DataView/DataView.js";
+function fe(r) {
+  if (r === void 0) return null;
+  const u = parseFloat(r);
+  return Number.isFinite(u) ? u : null;
 }
-function dn({
-  employeeId: s,
-  onEvent: m,
-  onEditCompensation: F,
-  onAddJob: ye,
-  onAddAnotherJob: be,
-  onAddDeduction: ge,
-  onEditDeduction: he
+function Ct({
+  employeeId: r,
+  onEvent: u,
+  onEditCompensation: W,
+  onAddJob: Pe,
+  onAddAnotherJob: Ce,
+  onAddDeduction: Ae,
+  onEditDeduction: De
 }) {
-  _("Employee.PaymentMethod"), _("Employee.Compensation"), _("Employee.Deductions");
-  const { t: n } = v("Employee.Dashboard"), { t: C } = v("Employee.PaymentMethod"), { t: fe } = v("Employee.Compensation"), { t: S } = v("Employee.Deductions"), o = it(), Y = lt(), B = me("currency"), Pe = me("percent"), V = ze(), { showBoundary: W } = Ze(), y = Ct({ employeeId: s }), {
+  F("Employee.PaymentMethod"), F("Employee.Compensation"), F("Employee.Deductions");
+  const { t: n } = k("Employee.Dashboard"), { t: C } = k("Employee.PaymentMethod"), { t: je } = k("Employee.Compensation"), { t: J } = k("Employee.Deductions"), i = bn(), I = An(), N = ge("currency"), Le = ge("percent"), G = cn(), { showBoundary: q } = un(), p = Bn({ employeeId: r }), {
     jobs: A,
-    primaryFlsaStatus: Ce,
-    pendingChanges: L,
-    hasMultipleJobs: Ae,
-    payStubs: De,
-    employeeFirstName: M
-  } = y.data, je = y.pagination.payStubs, G = y.status.cancellingCompensationUuid, { cancelPendingChange: I } = y.actions, U = y.status.isEmployeeLoading, Le = y.status.isPayStubsLoading, q = ce(
+    primaryFlsaStatus: we,
+    pendingChanges: K,
+    hasMultipleJobs: Ee,
+    payStubs: ke,
+    employeeFirstName: x
+  } = p.data, ve = p.pagination.payStubs, z = p.status.cancellingCompensationUuid, { cancelPendingChange: X } = p.actions, T = p.status.isCompensationLoading, Ue = p.status.isPayStubsLoading, $ = pe(
     async (e) => {
-      await I(e) && m(P.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
-        employeeId: s,
+      await X(e) && u(P.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
+        employeeId: r,
         compensationId: e.compensationUuid
       });
     },
-    [I, m, s]
-  ), [Ee, K] = J(
+    [X, u, r]
+  ), [Se, Q] = R(
     () => /* @__PURE__ */ new Set()
-  ), ve = ce(
+  ), Be = pe(
     async (e) => {
-      const i = window.open("", "_blank", "noopener,noreferrer"), h = n("jobAndPay.paystubs.downloadLoadingMessage");
-      if (i) {
-        const a = i.document;
-        a.title = h;
-        const u = a.createElement("style");
-        u.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)}}", a.head.appendChild(u);
-        const f = a.createElement("div");
-        f.className = "spinner", f.setAttribute("aria-hidden", "true");
-        const de = a.createElement("span");
-        de.textContent = h, a.body.replaceChildren(f, de);
+      const o = window.open("", "_blank"), d = n("jobAndPay.paystubs.downloadLoadingMessage");
+      if (o) {
+        const a = o.document;
+        a.title = d;
+        const c = a.createElement("style");
+        c.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)}}", a.head.appendChild(c);
+        const g = a.createElement("div");
+        g.className = "spinner", g.setAttribute("aria-hidden", "true");
+        const me = a.createElement("span");
+        me.textContent = d, a.body.replaceChildren(g, me);
       }
-      K((a) => {
-        const u = new Set(a);
-        return u.add(e), u;
+      Q((a) => {
+        const c = new Set(a);
+        return c.add(e), c;
       });
       try {
-        const a = await Qe(V, {
+        const a = await ln(G, {
           payrollId: e,
-          employeeId: s
+          employeeId: r
         });
         if (!a.value?.responseStream)
           throw new Error(n("jobAndPay.paystubs.downloadError"));
-        const u = await dt(a.value.responseStream, "application/pdf"), f = URL.createObjectURL(u);
-        i && (i.location.href = f), URL.revokeObjectURL(f);
+        const c = await Pn(a.value.responseStream, "application/pdf"), g = URL.createObjectURL(c);
+        o ? (o.addEventListener("load", () => {
+          URL.revokeObjectURL(g);
+        }), o.location.href = g) : URL.revokeObjectURL(g);
       } catch (a) {
-        i && i.close(), W(a instanceof Error ? a : new Error(String(a)));
+        o && o.close(), q(a instanceof Error ? a : new Error(String(a)));
       } finally {
-        K((a) => {
-          const u = new Set(a);
-          return u.delete(e), u;
+        Q((a) => {
+          const c = new Set(a);
+          return c.delete(e), c;
         });
       }
     },
-    [V, s, n, W]
-  ), [D, N] = J(null), { mutateAsync: xe, isPending: X } = et(), ke = async () => {
+    [G, r, n, q]
+  ), [D, M] = R(null), { mutateAsync: Je, isPending: Z } = mn(), Ne = async () => {
     if (!D) return;
     const e = D.uuid;
-    await xe({ request: { jobId: e } }), m(P.EMPLOYEE_JOB_DELETED, { employeeId: s, jobId: e }), N(null);
-  }, r = A.length === 1 ? A[0] : void 0, g = Ae, we = ct(/* @__PURE__ */ new Date()) ?? "", Te = A.find((e) => e.primary)?.compensations?.some(
-    (e) => e.effectiveDate !== void 0 && e.effectiveDate > we && e.flsaStatus !== le.NONEXEMPT
-  ) ?? !1, Se = A.length >= 1 && Ce === le.NONEXEMPT && !Te, $ = r ? pe(r.rate) : null, z = r?.compensations?.find(
-    (e) => e.uuid === r.currentCompensationUuid
-  ), Be = z?.effectiveDate ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-    /* @__PURE__ */ t(o.Text, { variant: "supporting", children: n("jobAndPay.compensation.effectiveDate") }),
-    /* @__PURE__ */ t(o.Text, { children: j(z.effectiveDate) })
-  ] }) : null, [Me, Q] = J(!1), Ue = tt(M), Z = L.length > 0, ee = g && L.length > 1, Ne = Z && !ee, b = L[0], l = pt({ employeeId: s }), te = l.isLoading ? void 0 : l.data.paymentMethod, E = l.isLoading ? [] : l.data.bankAccounts, Je = l.isLoading ? void 0 : l.status.deletePendingBankAccountUuid, { pendingDeleteAccount: ne, setPendingDeleteAccount: oe, handleConfirmDelete: Oe } = mt(async (e) => {
+    await Je({ request: { jobId: e } }), u(P.EMPLOYEE_JOB_DELETED, { employeeId: r, jobId: e }), M(null);
+  }, s = A.length === 1 ? A[0] : void 0, h = Ee, xe = Cn(/* @__PURE__ */ new Date()) ?? "", Te = A.find((e) => e.primary)?.compensations?.some(
+    (e) => e.effectiveDate !== void 0 && e.effectiveDate > xe && e.flsaStatus !== be.NONEXEMPT
+  ) ?? !1, Me = A.length >= 1 && we === be.NONEXEMPT && !Te, ee = s ? fe(s.rate) : null, ne = s?.compensations?.find(
+    (e) => e.uuid === s.currentCompensationUuid
+  ), w = /* @__PURE__ */ t("span", { "aria-label": n("listEmptyPlaceholder"), children: "–" }), Oe = s?.paymentUnit ? s.paymentUnit === "Hour" ? n("jobAndPay.compensation.types.hourly") : s.paymentUnit === "Salary" || s.paymentUnit === "Year" ? n("jobAndPay.compensation.types.salary") : s.paymentUnit : null, [He, O] = R(!1), Re = pn(x), _e = K.filter((e) => e.isNewJob), y = K.filter((e) => !e.isNewJob);
+  dn(() => {
+    y.length === 0 && O(!1);
+  }, [y.length]);
+  const H = new Set(_e.map((e) => e.jobUuid)), Fe = s ? H.has(s.uuid) : !1, Ve = H.size > 0, te = new Set(y.map((e) => e.jobUuid)), Ye = s ? te.has(s.uuid) : !1, oe = y.length > 0, ie = h && y.length > 1, We = oe && !ie, b = y[0], l = Ln({ employeeId: r }), ae = l.isLoading ? void 0 : l.data.paymentMethod, E = l.isLoading ? [] : l.data.bankAccounts, Ie = l.isLoading ? void 0 : l.status.deletePendingBankAccountUuid, { pendingDeleteAccount: se, setPendingDeleteAccount: re, handleConfirmDelete: Ge } = Dn(async (e) => {
     if (l.isLoading) return;
-    const i = await l.actions.onDelete(e);
-    i && m(P.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
-  }), p = yt({ employeeId: s }), _e = p.isLoading ? [] : p.data.deductions, ie = p.isLoading ? void 0 : p.status.deletingGarnishmentUuid, {
-    pendingDeleteDeduction: ae,
-    setPendingDeleteDeduction: re,
-    handleConfirmDelete: Re
-  } = bt(async (e) => {
-    if (p.isLoading) return;
-    const i = await p.actions.onDelete(e);
-    i && m(P.EMPLOYEE_DEDUCTION_DELETED, i.data.garnishment);
-  }), He = st([y, l, p]), Fe = [
+    const o = await l.actions.onDelete(e);
+    o && u(P.EMPLOYEE_BANK_ACCOUNT_DELETED, o.data);
+  }), m = wn({ employeeId: r }), qe = m.isLoading ? [] : m.data.deductions, de = m.isLoading ? void 0 : m.status.deletingGarnishmentUuid, {
+    pendingDeleteDeduction: ce,
+    setPendingDeleteDeduction: le,
+    handleConfirmDelete: Ke
+  } = En(async (e) => {
+    if (m.isLoading) return;
+    const o = await m.actions.onDelete(e);
+    o && u(P.EMPLOYEE_DEDUCTION_DELETED, o.data.garnishment);
+  }), ze = fn([p, l, m]), Xe = [
     {
       key: "jobTitle",
       title: n("jobAndPay.compensation.columns.jobTitle"),
       render: (e) => {
-        const i = pe(e.rate);
-        return /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ t(o.Text, { children: e.title || "-" }),
-          i !== null && e.paymentUnit ? /* @__PURE__ */ t(o.Text, { variant: "supporting", children: Y(i, e.paymentUnit) }) : null
+        const o = e.compensations?.find((a) => a.uuid === e.currentCompensationUuid), d = fe(e.rate);
+        return /* @__PURE__ */ f(rn, { children: [
+          o?.title || "-",
+          d !== null && e.paymentUnit ? /* @__PURE__ */ t(i.Text, { variant: "supporting", size: "sm", children: I(d, e.paymentUnit) }) : null
         ] });
       }
     },
@@ -144,49 +148,64 @@ function dn({
       key: "payType",
       title: n("jobAndPay.compensation.columns.payType"),
       render: (e) => {
-        const i = e.compensations?.find(
-          (h) => h.uuid === e.currentCompensationUuid
+        const o = e.compensations?.find(
+          (d) => d.uuid === e.currentCompensationUuid
         )?.flsaStatus;
-        return i !== void 0 ? fe(`flsaStatusLabels.${i}`) : "-";
+        return o !== void 0 ? je(`flsaStatusLabels.${o}`) : "-";
       }
     },
     {
       key: "effectiveDate",
       title: n("jobAndPay.compensation.columns.effectiveDate"),
       render: (e) => {
-        const i = e.compensations?.find((h) => h.uuid === e.currentCompensationUuid);
-        return i?.effectiveDate ? j(i.effectiveDate) : "-";
+        const o = e.compensations?.find((d) => d.uuid === e.currentCompensationUuid);
+        return o?.effectiveDate ? L(o.effectiveDate) : "-";
       }
-    }
-  ], Ye = w({
-    data: A,
-    columns: Fe,
-    itemMenu: (e) => /* @__PURE__ */ t(
-      H,
+    },
+    ...Ve ? [
       {
-        triggerLabel: n("jobAndPay.compensation.hamburgerTitle"),
-        isLoading: X,
-        items: [
+        key: "status",
+        title: /* @__PURE__ */ t(Jn, { children: n("jobAndPay.compensation.columns.status") }),
+        render: (e) => H.has(e.uuid) ? /* @__PURE__ */ t(i.Badge, { status: "warning", children: n("jobAndPay.compensation.pendingStatus") }) : null
+      }
+    ] : []
+  ], $e = S({
+    data: A,
+    columns: Xe,
+    itemMenu: (e) => {
+      const d = [
+        ...te.has(e.uuid) ? [] : [
           {
             label: n("jobAndPay.compensation.editJobCta"),
-            icon: /* @__PURE__ */ t(ue, { "aria-hidden": !0 }),
+            icon: /* @__PURE__ */ t(he, { "aria-hidden": !0 }),
             onClick: () => {
-              F?.(e);
+              W?.(e);
             }
-          },
-          ...e.primary ? [] : [
-            {
-              label: n("jobAndPay.compensation.deleteJobCta"),
-              icon: /* @__PURE__ */ t(R, { "aria-hidden": !0 }),
-              onClick: () => {
-                N({ uuid: e.uuid, title: e.title ?? "" });
-              }
+          }
+        ],
+        ...e.primary ? [] : [
+          {
+            label: n("jobAndPay.compensation.deleteJobCta"),
+            icon: /* @__PURE__ */ t(V, { "aria-hidden": !0 }),
+            onClick: () => {
+              const a = e.compensations?.find(
+                (c) => c.uuid === e.currentCompensationUuid
+              );
+              M({ uuid: e.uuid, title: a?.title ?? "" });
             }
-          ]
+          }
         ]
-      }
-    )
-  }), Ve = [
+      ];
+      return d.length === 0 ? null : /* @__PURE__ */ t(
+        Y,
+        {
+          triggerLabel: n("jobAndPay.compensation.hamburgerTitle"),
+          isLoading: Z,
+          items: d
+        }
+      );
+    }
+  }), Qe = [
     {
       key: "nickname",
       title: n("jobAndPay.payment.nickname"),
@@ -202,7 +221,7 @@ function dn({
       title: n("jobAndPay.payment.accountType"),
       render: (e) => e.accountType || "-"
     }
-  ], We = [
+  ], Ze = [
     {
       key: "description",
       title: n("jobAndPay.deductions.deduction"),
@@ -216,25 +235,25 @@ function dn({
     {
       key: "amount",
       title: n("jobAndPay.deductions.withhold"),
-      render: (e) => ht(e, {
-        formatCurrency: B,
-        formatPercent: Pe,
-        formatPerPaycheck: (i) => n("jobAndPay.deductions.amountPerPaycheck", { value: i })
+      render: (e) => vn(e, {
+        formatCurrency: N,
+        formatPercent: Le,
+        formatPerPaycheck: (o) => n("jobAndPay.deductions.amountPerPaycheck", { value: o })
       })
     }
-  ], Ge = [
+  ], en = [
     {
       key: "payday",
       title: n("jobAndPay.paystubs.payday"),
-      render: (e) => j(e.checkDate) || "-"
+      render: (e) => L(e.checkDate) || "-"
     },
     {
       key: "checkAmount",
       title: n("jobAndPay.paystubs.checkAmount"),
       render: (e) => {
         if (!e.netPay) return "-";
-        const i = parseFloat(e.netPay);
-        return isNaN(i) ? "-" : B(i);
+        const o = parseFloat(e.netPay);
+        return isNaN(o) ? "-" : N(o);
       }
     },
     {
@@ -242,102 +261,102 @@ function dn({
       title: n("jobAndPay.paystubs.grossPay"),
       render: (e) => {
         if (!e.grossPay) return "-";
-        const i = parseFloat(e.grossPay);
-        return isNaN(i) ? "-" : B(i);
+        const o = parseFloat(e.grossPay);
+        return isNaN(o) ? "-" : N(o);
       }
     },
     {
       key: "paymentMethod",
       title: n("jobAndPay.paystubs.paymentMethod"),
-      render: () => te?.type || n("jobAndPay.paystubs.noPaymentMethod")
+      render: () => ae?.type || n("jobAndPay.paystubs.noPaymentMethod")
     }
-  ], Ie = w({
+  ], nn = S({
     data: E,
-    columns: Ve,
+    columns: Qe,
     itemMenu: (e) => /* @__PURE__ */ t(
-      H,
+      Y,
       {
         items: [
           {
             label: C("deleteBankAccountCta"),
             onClick: () => {
-              oe({
+              re({
                 uuid: e.uuid,
                 hiddenAccountNumber: e.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ t(R, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ t(V, { "aria-hidden": !0 })
           }
         ],
         triggerLabel: C("hamburgerTitle")
       }
     )
-  }), qe = w({
-    data: _e,
-    columns: We,
+  }), tn = S({
+    data: qe,
+    columns: Ze,
     itemMenu: (e) => /* @__PURE__ */ t(
-      H,
+      Y,
       {
-        isLoading: ie === e.uuid,
+        isLoading: de === e.uuid,
         items: [
           {
-            label: S("editCta"),
-            onClick: () => he?.(e),
-            icon: /* @__PURE__ */ t(ue, { "aria-hidden": !0 })
+            label: J("editCta"),
+            onClick: () => De?.(e),
+            icon: /* @__PURE__ */ t(he, { "aria-hidden": !0 })
           },
           {
-            label: S("deleteCta"),
+            label: J("deleteCta"),
             onClick: () => {
-              re(e);
+              le(e);
             },
-            icon: /* @__PURE__ */ t(R, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ t(V, { "aria-hidden": !0 })
           }
         ],
-        triggerLabel: S("hamburgerTitle")
+        triggerLabel: J("hamburgerTitle")
       }
     ),
     emptyState: () => /* @__PURE__ */ t(
-      O,
+      _,
       {
         title: n("jobAndPay.deductions.emptyState.title"),
         description: n("jobAndPay.deductions.emptyState.description")
       }
     )
-  }), Ke = w({
-    data: De,
-    columns: Ge,
-    pagination: je,
+  }), on = S({
+    data: ke,
+    columns: en,
+    pagination: ve,
     itemMenu: (e) => {
-      const i = !!e.payrollUuid && Ee.has(e.payrollUuid);
+      const o = !!e.payrollUuid && Se.has(e.payrollUuid);
       return /* @__PURE__ */ t(
-        o.ButtonIcon,
+        i.ButtonIcon,
         {
           variant: "tertiary",
           "aria-label": n("jobAndPay.paystubs.downloadCta"),
           isDisabled: !e.payrollUuid,
-          isLoading: i,
+          isLoading: o,
           onClick: () => {
-            e.payrollUuid && ve(e.payrollUuid);
+            e.payrollUuid && Be(e.payrollUuid);
           },
-          children: /* @__PURE__ */ t(Pt, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ t(Sn, { "aria-hidden": !0 })
         }
       );
     },
     emptyState: () => /* @__PURE__ */ t(
-      O,
+      _,
       {
         title: n("jobAndPay.paystubs.emptyState.title"),
         description: n("jobAndPay.paystubs.emptyState.description")
       }
     )
-  }), Xe = l.isLoading && l.errorHandling.errors.length === 0, $e = p.isLoading && p.errorHandling.errors.length === 0, se = te?.type === at.directDeposit;
-  return /* @__PURE__ */ t(rt, { error: He.errors, children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 24, children: [
+  }), an = l.isLoading && l.errorHandling.errors.length === 0, sn = m.isLoading && m.errorHandling.errors.length === 0, ue = ae?.type === gn.directDeposit;
+  return /* @__PURE__ */ t(hn, { error: ze.errors, children: /* @__PURE__ */ f(j, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ t(
-      o.Box,
+      i.Box,
       {
-        withPadding: !g,
+        withPadding: !h,
         header: /* @__PURE__ */ t(
-          o.BoxHeader,
+          i.BoxHeader,
           {
             title: n("jobAndPay.compensation.title"),
             action: (
@@ -345,114 +364,134 @@ function dn({
               // know if the employee has jobs — suppress the action
               // so we don't surface an "Add job" CTA against an
               // employee who already has one.
-              U || g ? null : r ? /* @__PURE__ */ t(
-                o.Button,
+              T || h ? null : s ? Ye ? null : /* @__PURE__ */ t(
+                i.Button,
                 {
                   variant: "secondary",
                   onClick: () => {
-                    F?.(r);
+                    W?.(s);
                   },
                   children: n("jobAndPay.compensation.editCta")
                 }
               ) : /* @__PURE__ */ t(
-                o.Button,
+                i.Button,
                 {
                   variant: "secondary",
-                  onClick: ye,
-                  icon: /* @__PURE__ */ t(k, {}),
+                  onClick: Pe,
+                  icon: /* @__PURE__ */ t(U, {}),
                   children: n("jobAndPay.compensation.addJobCta")
                 }
               )
             )
           }
         ),
-        footer: !U && Se ? /* @__PURE__ */ t(
-          o.Button,
+        footer: !T && Me ? /* @__PURE__ */ t(
+          i.Button,
           {
             variant: "secondary",
-            onClick: be,
-            icon: /* @__PURE__ */ t(k, {}),
+            onClick: Ce,
+            icon: /* @__PURE__ */ t(U, {}),
             children: n("jobAndPay.compensation.addAnotherJobCta")
           }
         ) : void 0,
-        children: U ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
-          Z && /* @__PURE__ */ t("div", { className: g ? ot.alertWrapper : void 0, children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
-            Ne && b && /* @__PURE__ */ t(
-              o.Alert,
-              {
-                status: "warning",
-                disableScrollIntoView: !0,
-                label: g ? n("jobAndPay.compensation.pendingChange.alertLabelWithJob", {
-                  jobTitle: b.jobTitle,
-                  date: j(b.effectiveDate)
-                }) : n("jobAndPay.compensation.pendingChange.alertLabel", {
-                  date: j(b.effectiveDate)
-                }),
-                children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 12, children: [
-                  /* @__PURE__ */ t(
-                    o.UnorderedList,
-                    {
-                      items: b.details.map((e) => Ue(e))
-                    }
-                  ),
-                  /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-                    o.Button,
-                    {
-                      variant: "secondary",
-                      isLoading: G === b.compensationUuid,
-                      onClick: () => {
-                        q(b);
-                      },
-                      children: n("jobAndPay.compensation.pendingChange.cancelCta")
-                    }
-                  ) })
-                ] })
-              }
-            ),
-            ee && /* @__PURE__ */ t(
-              o.Alert,
-              {
-                status: "warning",
-                disableScrollIntoView: !0,
-                label: n("jobAndPay.compensation.pendingChange.summaryLabel", {
-                  name: M ?? ""
-                }),
-                action: /* @__PURE__ */ t(
-                  o.Button,
+        children: T ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ f(j, { flexDirection: "column", gap: 16, children: [
+          oe && /* @__PURE__ */ t(
+            "div",
+            {
+              className: [ye.alertWrapper, h && ye.alertWrapperPadded].filter(Boolean).join(" "),
+              children: /* @__PURE__ */ f(j, { flexDirection: "column", gap: 16, children: [
+                We && b && /* @__PURE__ */ t(
+                  i.Alert,
                   {
-                    variant: "secondary",
-                    onClick: () => {
-                      Q(!0);
-                    },
-                    children: n("jobAndPay.compensation.pendingChange.reviewCta")
+                    status: "warning",
+                    disableScrollIntoView: !0,
+                    label: h ? n("jobAndPay.compensation.pendingChange.alertLabelWithJob", {
+                      jobTitle: b.jobTitle,
+                      date: L(b.effectiveDate)
+                    }) : n("jobAndPay.compensation.pendingChange.alertLabel", {
+                      date: L(b.effectiveDate)
+                    }),
+                    children: /* @__PURE__ */ f(j, { flexDirection: "column", gap: 12, children: [
+                      /* @__PURE__ */ t(
+                        i.UnorderedList,
+                        {
+                          items: b.details.map((e) => Re(e))
+                        }
+                      ),
+                      /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+                        i.Button,
+                        {
+                          variant: "secondary",
+                          isLoading: z === b.compensationUuid,
+                          onClick: () => {
+                            $(b);
+                          },
+                          children: n("jobAndPay.compensation.pendingChange.cancelCta")
+                        }
+                      ) })
+                    ] })
+                  }
+                ),
+                ie && /* @__PURE__ */ t(
+                  i.Alert,
+                  {
+                    status: "warning",
+                    disableScrollIntoView: !0,
+                    label: n("jobAndPay.compensation.pendingChange.summaryLabel", {
+                      name: x ?? ""
+                    }),
+                    action: /* @__PURE__ */ t(
+                      i.Button,
+                      {
+                        variant: "secondary",
+                        onClick: () => {
+                          O(!0);
+                        },
+                        children: n("jobAndPay.compensation.pendingChange.reviewCta")
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ] }) }),
-          g ? /* @__PURE__ */ t(
-            T,
+              ] })
+            }
+          ),
+          h ? /* @__PURE__ */ t(
+            B,
             {
               label: n("jobAndPay.compensation.tableLabel"),
               isWithinBox: !0,
-              ...Ye
+              ...$e
+            }
+          ) : s ? /* @__PURE__ */ t(
+            i.DescriptionList,
+            {
+              items: [
+                {
+                  term: n("jobAndPay.compensation.jobTitle"),
+                  description: s.title || w
+                },
+                {
+                  term: n("jobAndPay.compensation.type"),
+                  description: Oe || w
+                },
+                {
+                  term: n("jobAndPay.compensation.wage"),
+                  description: ee !== null && s.paymentUnit ? I(ee, s.paymentUnit) : w
+                },
+                {
+                  term: n("jobAndPay.compensation.effectiveDate"),
+                  description: ne?.effectiveDate ? L(ne.effectiveDate) : w
+                },
+                ...Fe ? [
+                  {
+                    term: n("jobAndPay.compensation.columns.status"),
+                    description: /* @__PURE__ */ t(i.Badge, { status: "warning", children: n("jobAndPay.compensation.pendingStatus") })
+                  }
+                ] : []
+              ]
             }
-          ) : r ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 12, children: [
-            r.title && /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-              /* @__PURE__ */ t(o.Text, { variant: "supporting", children: n("jobAndPay.compensation.jobTitle") }),
-              /* @__PURE__ */ t(o.Text, { children: r.title })
-            ] }),
-            r.paymentUnit && /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-              /* @__PURE__ */ t(o.Text, { variant: "supporting", children: n("jobAndPay.compensation.type") }),
-              /* @__PURE__ */ t(o.Text, { children: r.paymentUnit === "Hour" ? n("jobAndPay.compensation.types.hourly") : r.paymentUnit === "Salary" || r.paymentUnit === "Year" ? n("jobAndPay.compensation.types.salary") : r.paymentUnit })
-            ] }),
-            $ !== null && r.paymentUnit && /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-              /* @__PURE__ */ t(o.Text, { variant: "supporting", children: n("jobAndPay.compensation.wage") }),
-              /* @__PURE__ */ t(o.Text, { children: Y($, r.paymentUnit) })
-            ] }),
-            Be
-          ] }) : /* @__PURE__ */ t(
-            O,
+          ) : /* @__PURE__ */ t(
+            _,
             {
               title: n("jobAndPay.compensation.emptyState.title"),
               description: n("jobAndPay.compensation.emptyState.description")
@@ -462,141 +501,148 @@ function dn({
       }
     ),
     /* @__PURE__ */ t(
-      o.Box,
+      i.Box,
       {
         withPadding: E.length === 0,
         header: /* @__PURE__ */ t(
-          o.BoxHeader,
+          i.BoxHeader,
           {
             title: n("jobAndPay.payment.title"),
-            action: /* @__PURE__ */ d(c, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
-              se && E.length > 1 && /* @__PURE__ */ t(
-                o.Button,
+            action: /* @__PURE__ */ f(j, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
+              ue && E.length > 1 && /* @__PURE__ */ t(
+                i.Button,
                 {
                   variant: "secondary",
                   onClick: () => {
-                    m(P.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: s });
+                    u(P.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: r });
                   },
-                  icon: /* @__PURE__ */ t(ft, {}),
+                  icon: /* @__PURE__ */ t(Un, {}),
                   children: n("jobAndPay.payment.splitPaycheckCta")
                 }
               ),
               /* @__PURE__ */ t(
-                o.Button,
+                i.Button,
                 {
                   variant: "secondary",
                   onClick: () => {
-                    m(P.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: s });
+                    u(P.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: r });
                   },
-                  icon: /* @__PURE__ */ t(k, {}),
+                  icon: /* @__PURE__ */ t(U, {}),
                   children: n("jobAndPay.payment.addBankAccountCta")
                 }
               )
             ] })
           }
         ),
-        children: Xe ? /* @__PURE__ */ t(x, {}) : E.length === 0 ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ t(o.Text, { variant: "supporting", children: C("paymentMethodLabel") }),
-          /* @__PURE__ */ t(o.Text, { children: C(se ? "directDepositLabel" : "checkLabel") })
-        ] }) : /* @__PURE__ */ t(
-          T,
+        children: an ? /* @__PURE__ */ t(v, {}) : E.length === 0 ? /* @__PURE__ */ t(
+          i.DescriptionList,
+          {
+            items: [
+              {
+                term: C("paymentMethodLabel"),
+                description: C(ue ? "directDepositLabel" : "checkLabel")
+              }
+            ]
+          }
+        ) : /* @__PURE__ */ t(
+          B,
           {
             label: n("jobAndPay.payment.listLabel"),
             isWithinBox: !0,
-            ...Ie
+            ...nn
           }
         )
       }
     ),
     /* @__PURE__ */ t(
-      o.Box,
+      i.Box,
       {
         withPadding: !1,
         header: /* @__PURE__ */ t(
-          o.BoxHeader,
+          i.BoxHeader,
           {
             title: n("jobAndPay.deductions.title"),
             action: /* @__PURE__ */ t(
-              o.Button,
+              i.Button,
               {
                 variant: "secondary",
-                onClick: ge,
-                icon: /* @__PURE__ */ t(k, {}),
+                onClick: Ae,
+                icon: /* @__PURE__ */ t(U, {}),
                 children: n("jobAndPay.deductions.addDeductionCta")
               }
             )
           }
         ),
-        children: $e ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(
-          T,
+        children: sn ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(
+          B,
           {
             label: n("jobAndPay.deductions.listLabel"),
             isWithinBox: !0,
-            ...qe
+            ...tn
           }
         )
       }
     ),
     /* @__PURE__ */ t(
-      o.Box,
+      i.Box,
       {
         withPadding: !1,
-        header: /* @__PURE__ */ t(o.BoxHeader, { title: n("jobAndPay.paystubs.title") }),
-        children: Le ? /* @__PURE__ */ t(x, {}) : /* @__PURE__ */ t(T, { label: n("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...Ke })
+        header: /* @__PURE__ */ t(i.BoxHeader, { title: n("jobAndPay.paystubs.title") }),
+        children: Ue ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(B, { label: n("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...on })
       }
     ),
     /* @__PURE__ */ t(
-      nt,
+      yn,
       {
-        isOpen: Me,
-        pendingChanges: L,
-        employeeFirstName: M,
-        cancellingCompensationUuid: G,
+        isOpen: He,
+        pendingChanges: y,
+        employeeFirstName: x,
+        cancellingCompensationUuid: z,
         onClose: () => {
-          Q(!1);
+          O(!1);
         },
         onCancelChange: (e) => {
-          q(e);
+          $(e);
         }
       }
     ),
     /* @__PURE__ */ t(
-      ut,
+      jn,
       {
-        pendingDeleteAccount: ne,
-        isPrimaryActionLoading: Je === ne?.uuid,
+        pendingDeleteAccount: se,
+        isPrimaryActionLoading: Ie === se?.uuid,
         onClose: () => {
-          oe(null);
+          re(null);
         },
         onConfirm: () => {
-          Oe();
+          Ge();
         }
       }
     ),
     /* @__PURE__ */ t(
-      gt,
+      kn,
       {
-        pendingDeleteDeduction: ae,
-        isPrimaryActionLoading: ie === ae?.uuid,
+        pendingDeleteDeduction: ce,
+        isPrimaryActionLoading: de === ce?.uuid,
         onClose: () => {
-          re(null);
+          le(null);
         },
         onConfirm: () => {
-          Re();
+          Ke();
         }
       }
     ),
     /* @__PURE__ */ t(
-      o.Dialog,
+      i.Dialog,
       {
         isOpen: D !== null,
         onClose: () => {
-          N(null);
+          M(null);
         },
         onPrimaryActionClick: () => {
-          ke();
+          Ne();
         },
-        isPrimaryActionLoading: X,
+        isPrimaryActionLoading: Z,
         isDestructive: !0,
         title: n("jobAndPay.compensation.deleteJobDialog.title"),
         primaryActionLabel: n("jobAndPay.compensation.deleteJobDialog.confirmCta"),
@@ -609,6 +655,6 @@ function dn({
   ] }) });
 }
 export {
-  dn as JobAndPayView
+  Ct as JobAndPayView
 };
 //# sourceMappingURL=JobAndPayView.js.map