@gusto/embedded-react-sdk 0.45.0 → 0.46.2

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

@@ -1,127 +1,145 @@
-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 { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { useCallback as ue, useState as O } from "react";
+import { useTranslation as E } from "react-i18next";
+import { useGustoEmbeddedContext as on } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as an } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as rn } from "react-error-boundary";
+import { useJobsAndCompensationsDeleteMutation as sn } from "@gusto/embedded-api/react-query/jobsAndCompensationsDelete";
+import { usePendingChangeDetailRenderer as dn } from "./usePendingChangeDetailRenderer.js";
+import { PendingChangesReviewModal as cn } from "./PendingChangesReviewModal.js";
+import me from "./JobAndPayView.module.scss.js";
 import { Flex as c } from "../../Common/Flex/Flex.js";
-import { useComponentContext as Ke } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentContext as ln } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "classnames";
-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 { componentEvents as P, FlsaStatus as pe, PAYMENT_METHODS as un } from "../../../shared/constants.js";
+import { Loading as v } from "../../Common/Loading/Loading.js";
+import { EmptyData as R } from "../../Common/EmptyData/EmptyData.js";
+import { BaseLayout as mn } from "../../Base/Base.js";
+import { composeErrorHandler as pn } from "../../../partner-hook-utils/composeErrorHandler.js";
+import { readableStreamToBlob as yn } from "../../../helpers/readableStreamToBlob.js";
+import { formatDateToStringDate as bn, formatDateLongWithYear as j } from "../../../helpers/dateFormatting.js";
+import { useFormatCompensationRate as gn } from "../../../helpers/formattedStrings.js";
+import ye from "../../../hooks/useNumberFormatter.js";
+import { useI18n as _ } from "../../../i18n/I18n.js";
+import { useDeleteBankAccount as hn } from "../PaymentMethod/shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as fn } from "../PaymentMethod/shared/DeleteBankAccountDialog.js";
+import { usePaymentMethodList as Pn } from "../PaymentMethod/shared/usePaymentMethodList.js";
+import { useDeductionsList as An } from "../Deductions/shared/useDeductionsList.js";
+import { useDeleteDeduction as Cn } from "../Deductions/shared/useDeleteDeduction.js";
+import { DeleteDeductionDialog as Dn } from "../Deductions/shared/DeleteDeductionDialog.js";
+import { formatDeductionAmount as jn } 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);
+import Ln from "../../../assets/icons/percent-circle.svg.js";
+import wn from "../../../assets/icons/download-cloud.svg.js";
+import H from "../../../assets/icons/trashcan.svg.js";
+import be from "../../../assets/icons/pencil.svg.js";
+import { useEmployeeCompensation as En } from "./hooks/useEmployeeCompensation.js";
+import { VisuallyHidden as vn } from "../../Common/VisuallyHidden/VisuallyHidden.js";
+import { HamburgerMenu as F } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useDataView as k } from "../../Common/DataView/useDataView.js";
+import { DataView as T } from "../../Common/DataView/DataView.js";
+function ge(s) {
+  if (s === void 0) return null;
+  const u = parseFloat(s);
   return Number.isFinite(u) ? u : null;
 }
-function Kn({
-  employeeId: d,
+function bt({
+  employeeId: s,
   onEvent: u,
-  onEditCompensation: F,
-  onAddJob: ue,
-  onAddAnotherJob: me,
-  onAddDeduction: pe,
-  onEditDeduction: ye
+  onEditCompensation: V,
+  onAddJob: he,
+  onAddAnotherJob: fe,
+  onAddDeduction: Pe,
+  onEditDeduction: Ae
 }) {
-  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(
+  _("Employee.PaymentMethod"), _("Employee.Compensation"), _("Employee.Deductions");
+  const { t } = E("Employee.Dashboard"), { t: A } = E("Employee.PaymentMethod"), { t: Ce } = E("Employee.Compensation"), { t: S } = E("Employee.Deductions"), o = ln(), Y = gn(), B = ye("currency"), De = ye("percent"), W = on(), { showBoundary: I } = rn(), y = En({ employeeId: s }), {
+    jobs: C,
+    primaryFlsaStatus: je,
+    pendingChanges: G,
+    hasMultipleJobs: Le,
+    payStubs: we,
+    employeeFirstName: U
+  } = y.data, Ee = y.pagination.payStubs, q = y.status.cancellingCompensationUuid, { cancelPendingChange: K } = y.actions, N = y.status.isCompensationLoading, ve = y.status.isPayStubsLoading, X = ue(
     async (e) => {
-      if (!S) return;
-      await S(e) && u(h.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
-        employeeId: d,
+      await K(e) && u(P.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
+        employeeId: s,
         compensationId: e.compensationUuid
       });
     },
-    [S, u, d]
-  ), [Ce, I] = N(
+    [K, u, s]
+  ), [xe, z] = O(
     () => /* @__PURE__ */ new Set()
-  ), De = re(
+  ), ke = ue(
     async (e) => {
-      const i = window.open("", "_blank", "noopener,noreferrer"), E = t("jobAndPay.paystubs.downloadLoadingMessage");
+      const i = window.open("", "_blank"), f = 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);
+        r.title = f;
+        const m = r.createElement("style");
+        m.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(m);
         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);
+        const le = r.createElement("span");
+        le.textContent = f, r.body.replaceChildren(g, le);
       }
-      I((r) => {
-        const p = new Set(r);
-        return p.add(e), p;
+      z((r) => {
+        const m = new Set(r);
+        return m.add(e), m;
       });
       try {
-        const r = await Ve(Y, {
+        const r = await an(W, {
           payrollId: e,
-          employeeId: d
+          employeeId: s
         });
         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);
+        const m = await yn(r.value.responseStream, "application/pdf"), g = URL.createObjectURL(m);
+        i ? (i.addEventListener("load", () => {
+          URL.revokeObjectURL(g);
+        }), i.location.href = g) : URL.revokeObjectURL(g);
       } catch (r) {
-        i && i.close(), V(r instanceof Error ? r : new Error(String(r)));
+        i && i.close(), I(r instanceof Error ? r : new Error(String(r)));
       } finally {
-        I((r) => {
-          const p = new Set(r);
-          return p.delete(e), p;
+        z((r) => {
+          const m = new Set(r);
+          return m.delete(e), m;
         });
       }
     },
-    [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 = [
+    [W, s, t, I]
+  ), [D, J] = O(null), { mutateAsync: Te, isPending: $ } = sn(), Se = async () => {
+    if (!D) return;
+    const e = D.uuid;
+    await Te({ request: { jobId: e } }), u(P.EMPLOYEE_JOB_DELETED, { employeeId: s, jobId: e }), J(null);
+  }, a = C.length === 1 ? C[0] : void 0, h = Le, Be = bn(/* @__PURE__ */ new Date()) ?? "", Ue = C.find((e) => e.primary)?.compensations?.some(
+    (e) => e.effectiveDate !== void 0 && e.effectiveDate > Be && e.flsaStatus !== pe.NONEXEMPT
+  ) ?? !1, Ne = C.length >= 1 && je === pe.NONEXEMPT && !Ue, Q = a ? ge(a.rate) : null, Z = a?.compensations?.find(
+    (e) => e.uuid === a.currentCompensationUuid
+  ), Je = Z?.effectiveDate ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
+    /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.effectiveDate") }),
+    /* @__PURE__ */ n(o.Text, { children: j(Z.effectiveDate) })
+  ] }) : null, [Me, ee] = O(!1), Oe = dn(U), Re = G.filter((e) => e.isNewJob), L = G.filter((e) => !e.isNewJob), M = new Set(Re.map((e) => e.jobUuid)), _e = a ? M.has(a.uuid) : !1, He = M.size > 0, ne = L.length > 0, te = h && L.length > 1, Fe = ne && !te, b = L[0], l = Pn({ employeeId: s }), oe = l.isLoading ? void 0 : l.data.paymentMethod, w = l.isLoading ? [] : l.data.bankAccounts, Ve = l.isLoading ? void 0 : l.status.deletePendingBankAccountUuid, { pendingDeleteAccount: ie, setPendingDeleteAccount: ae, handleConfirmDelete: Ye } = hn(async (e) => {
+    if (l.isLoading) return;
+    const i = await l.actions.onDelete(e);
+    i && u(P.EMPLOYEE_BANK_ACCOUNT_DELETED, i.data);
+  }), p = An({ employeeId: s }), We = p.isLoading ? [] : p.data.deductions, re = p.isLoading ? void 0 : p.status.deletingGarnishmentUuid, {
+    pendingDeleteDeduction: se,
+    setPendingDeleteDeduction: de,
+    handleConfirmDelete: Ie
+  } = Cn(async (e) => {
+    if (p.isLoading) return;
+    const i = await p.actions.onDelete(e);
+    i && u(P.EMPLOYEE_DEDUCTION_DELETED, i.data.garnishment);
+  }), Ge = pn([y, l, p]), qe = [
     {
       key: "jobTitle",
       title: t("jobAndPay.compensation.columns.jobTitle"),
       render: (e) => {
-        const i = ce(e.rate);
-        return /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+        const i = ge(e.rate);
+        return /* @__PURE__ */ d(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
+          i !== null && e.paymentUnit ? /* @__PURE__ */ n(o.Text, { variant: "supporting", children: Y(i, e.paymentUnit) }) : null
         ] });
       }
     },
@@ -130,45 +148,55 @@ function Kn({
       title: t("jobAndPay.compensation.columns.payType"),
       render: (e) => {
         const i = e.compensations?.find(
-          (E) => E.uuid === e.currentCompensationUuid
+          (f) => f.uuid === e.currentCompensationUuid
         )?.flsaStatus;
-        return i !== void 0 ? be(`flsaStatusLabels.${i}`) : "-";
+        return i !== void 0 ? Ce(`flsaStatusLabels.${i}`) : "-";
       }
     },
     {
-      key: "startDate",
-      title: t("jobAndPay.compensation.columns.startDate"),
-      render: (e) => e.hireDate ? C(e.hireDate) : "-"
-    }
-  ], Ne = w({
-    data: D,
-    columns: Ue,
+      key: "effectiveDate",
+      title: t("jobAndPay.compensation.columns.effectiveDate"),
+      render: (e) => {
+        const i = e.compensations?.find((f) => f.uuid === e.currentCompensationUuid);
+        return i?.effectiveDate ? j(i.effectiveDate) : "-";
+      }
+    },
+    ...He ? [
+      {
+        key: "status",
+        title: /* @__PURE__ */ n(vn, { children: t("jobAndPay.compensation.columns.status") }),
+        render: (e) => M.has(e.uuid) ? /* @__PURE__ */ n(o.Badge, { status: "warning", children: t("jobAndPay.compensation.pendingStatus") }) : null
+      }
+    ] : []
+  ], Ke = k({
+    data: C,
+    columns: qe,
     itemMenu: (e) => /* @__PURE__ */ n(
-      R,
+      F,
       {
         triggerLabel: t("jobAndPay.compensation.hamburgerTitle"),
-        isLoading: q,
+        isLoading: $,
         items: [
           {
             label: t("jobAndPay.compensation.editJobCta"),
-            icon: /* @__PURE__ */ n(le, { "aria-hidden": !0 }),
+            icon: /* @__PURE__ */ n(be, { "aria-hidden": !0 }),
             onClick: () => {
-              F?.(e);
+              V?.(e);
             }
           },
           ...e.primary ? [] : [
             {
               label: t("jobAndPay.compensation.deleteJobCta"),
-              icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 }),
+              icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 }),
               onClick: () => {
-                U({ uuid: e.uuid, title: e.title ?? "" });
+                J({ uuid: e.uuid, title: e.title ?? "" });
               }
             }
           ]
         ]
       }
     )
-  }), Je = [
+  }), Xe = [
     {
       key: "nickname",
       title: t("jobAndPay.payment.nickname"),
@@ -184,7 +212,7 @@ function Kn({
       title: t("jobAndPay.payment.accountType"),
       render: (e) => e.accountType || "-"
     }
-  ], Oe = [
+  ], ze = [
     {
       key: "description",
       title: t("jobAndPay.deductions.deduction"),
@@ -198,17 +226,17 @@ function Kn({
     {
       key: "amount",
       title: t("jobAndPay.deductions.withhold"),
-      render: (e) => sn(e, {
+      render: (e) => jn(e, {
         formatCurrency: B,
-        formatPercent: ge,
+        formatPercent: De,
         formatPerPaycheck: (i) => t("jobAndPay.deductions.amountPerPaycheck", { value: i })
       })
     }
-  ], _e = [
+  ], $e = [
     {
       key: "payday",
       title: t("jobAndPay.paystubs.payday"),
-      render: (e) => C(e.checkDate) || "-"
+      render: (e) => j(e.checkDate) || "-"
     },
     {
       key: "checkAmount",
@@ -231,66 +259,66 @@ function Kn({
     {
       key: "paymentMethod",
       title: t("jobAndPay.paystubs.paymentMethod"),
-      render: () => z?.type || t("jobAndPay.paystubs.noPaymentMethod")
+      render: () => oe?.type || t("jobAndPay.paystubs.noPaymentMethod")
     }
-  ], Re = w({
-    data: L,
-    columns: Je,
+  ], Qe = k({
+    data: w,
+    columns: Xe,
     itemMenu: (e) => /* @__PURE__ */ n(
-      R,
+      F,
       {
         items: [
           {
-            label: P("deleteBankAccountCta"),
+            label: A("deleteBankAccountCta"),
             onClick: () => {
-              Z({
+              ae({
                 uuid: e.uuid,
                 hiddenAccountNumber: e.hiddenAccountNumber
               });
             },
-            icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 })
           }
         ],
-        triggerLabel: P("hamburgerTitle")
+        triggerLabel: A("hamburgerTitle")
       }
     )
-  }), Fe = w({
-    data: Se,
-    columns: Oe,
+  }), Ze = k({
+    data: We,
+    columns: ze,
     itemMenu: (e) => /* @__PURE__ */ n(
-      R,
+      F,
       {
-        isLoading: ee === e.uuid,
+        isLoading: re === e.uuid,
         items: [
           {
-            label: T("editCta"),
-            onClick: () => ye?.(e),
-            icon: /* @__PURE__ */ n(le, { "aria-hidden": !0 })
+            label: S("editCta"),
+            onClick: () => Ae?.(e),
+            icon: /* @__PURE__ */ n(be, { "aria-hidden": !0 })
           },
           {
-            label: T("deleteCta"),
+            label: S("deleteCta"),
             onClick: () => {
-              te(e);
+              de(e);
             },
-            icon: /* @__PURE__ */ n(_, { "aria-hidden": !0 })
+            icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 })
           }
         ],
-        triggerLabel: T("hamburgerTitle")
+        triggerLabel: S("hamburgerTitle")
       }
     ),
     emptyState: () => /* @__PURE__ */ n(
-      J,
+      R,
       {
         title: t("jobAndPay.deductions.emptyState.title"),
         description: t("jobAndPay.deductions.emptyState.description")
       }
     )
-  }), He = w({
-    data: fe,
-    columns: _e,
-    pagination: Ae,
+  }), en = k({
+    data: we,
+    columns: $e,
+    pagination: Ee,
     itemMenu: (e) => {
-      const i = !!e.payrollUuid && Ce.has(e.payrollUuid);
+      const i = !!e.payrollUuid && xe.has(e.payrollUuid);
       return /* @__PURE__ */ n(
         o.ButtonIcon,
         {
@@ -299,140 +327,152 @@ function Kn({
           isDisabled: !e.payrollUuid,
           isLoading: i,
           onClick: () => {
-            e.payrollUuid && De(e.payrollUuid);
+            e.payrollUuid && ke(e.payrollUuid);
           },
-          children: /* @__PURE__ */ n(ln, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ n(wn, { "aria-hidden": !0 })
         }
       );
     },
     emptyState: () => /* @__PURE__ */ n(
-      J,
+      R,
       {
         title: t("jobAndPay.paystubs.emptyState.title"),
         description: t("jobAndPay.paystubs.emptyState.description")
       }
     )
-  });
-  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: [
+  }), nn = l.isLoading && l.errorHandling.errors.length === 0, tn = p.isLoading && p.errorHandling.errors.length === 0, ce = oe?.type === un.directDeposit;
+  return /* @__PURE__ */ n(mn, { error: Ge.errors, children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ n(
       o.Box,
       {
-        withPadding: !A,
+        withPadding: !h,
         header: /* @__PURE__ */ n(
           o.BoxHeader,
           {
             title: t("jobAndPay.compensation.title"),
-            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")
-              }
+            action: (
+              // While the compensation card is loading we don't yet
+              // 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.
+              N || h ? null : a ? /* @__PURE__ */ n(
+                o.Button,
+                {
+                  variant: "secondary",
+                  onClick: () => {
+                    V?.(a);
+                  },
+                  children: t("jobAndPay.compensation.editCta")
+                }
+              ) : /* @__PURE__ */ n(
+                o.Button,
+                {
+                  variant: "secondary",
+                  onClick: he,
+                  icon: /* @__PURE__ */ n(x, {}),
+                  children: t("jobAndPay.compensation.addJobCta")
+                }
+              )
             )
           }
         ),
-        footer: Ee ? /* @__PURE__ */ n(
+        footer: !N && Ne ? /* @__PURE__ */ n(
           o.Button,
           {
             variant: "secondary",
-            onClick: me,
+            onClick: fe,
             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,
+        children: N ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
+          ne && /* @__PURE__ */ n(
+            "div",
             {
-              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,
+              className: [me.alertWrapper, h && me.alertWrapperPadded].filter(Boolean).join(" "),
+              children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
+                Fe && b && /* @__PURE__ */ n(
+                  o.Alert,
                   {
-                    items: b.details.map((e) => xe(e))
+                    status: "warning",
+                    disableScrollIntoView: !0,
+                    label: h ? t("jobAndPay.compensation.pendingChange.alertLabelWithJob", {
+                      jobTitle: b.jobTitle,
+                      date: j(b.effectiveDate)
+                    }) : t("jobAndPay.compensation.pendingChange.alertLabel", {
+                      date: j(b.effectiveDate)
+                    }),
+                    children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 12, children: [
+                      /* @__PURE__ */ n(
+                        o.UnorderedList,
+                        {
+                          items: b.details.map((e) => Oe(e))
+                        }
+                      ),
+                      /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
+                        o.Button,
+                        {
+                          variant: "secondary",
+                          isLoading: q === b.compensationUuid,
+                          onClick: () => {
+                            X(b);
+                          },
+                          children: t("jobAndPay.compensation.pendingChange.cancelCta")
+                        }
+                      ) })
+                    ] })
                   }
                 ),
-                /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(
-                  o.Button,
+                te && /* @__PURE__ */ n(
+                  o.Alert,
                   {
-                    variant: "secondary",
-                    isLoading: W === b.compensationUuid,
-                    onClick: () => {
-                      G(b);
-                    },
-                    children: t("jobAndPay.compensation.pendingChange.cancelCta")
+                    status: "warning",
+                    disableScrollIntoView: !0,
+                    label: t("jobAndPay.compensation.pendingChange.summaryLabel", {
+                      name: U ?? ""
+                    }),
+                    action: /* @__PURE__ */ n(
+                      o.Button,
+                      {
+                        variant: "secondary",
+                        onClick: () => {
+                          ee(!0);
+                        },
+                        children: t("jobAndPay.compensation.pendingChange.reviewCta")
+                      }
+                    )
                   }
-                ) })
+                )
               ] })
             }
           ),
-          $ && /* @__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,
+          h ? /* @__PURE__ */ n(
+            T,
             {
               label: t("jobAndPay.compensation.tableLabel"),
               isWithinBox: !0,
-              ...Ne
+              ...Ke
             }
-          ) : s ? /* @__PURE__ */ l(c, { flexDirection: "column", gap: 12, children: [
-            s.title && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+          ) : a ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 12, children: [
+            a.title && /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
               /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.jobTitle") }),
-              /* @__PURE__ */ n(o.Text, { children: s.title })
+              /* @__PURE__ */ n(o.Text, { children: a.title })
             ] }),
-            s.paymentUnit && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+            a.paymentUnit && /* @__PURE__ */ d(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 })
+              /* @__PURE__ */ n(o.Text, { children: a.paymentUnit === "Hour" ? t("jobAndPay.compensation.types.hourly") : a.paymentUnit === "Salary" || a.paymentUnit === "Year" ? t("jobAndPay.compensation.types.salary") : a.paymentUnit })
             ] }),
-            K !== null && s.paymentUnit && /* @__PURE__ */ l(c, { flexDirection: "column", gap: 0, children: [
+            Q !== null && a.paymentUnit && /* @__PURE__ */ d(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) })
+              /* @__PURE__ */ n(o.Text, { children: Y(Q, a.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) })
+            Je,
+            _e && /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
+              /* @__PURE__ */ n(o.Text, { variant: "supporting", children: t("jobAndPay.compensation.columns.status") }),
+              /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(o.Badge, { status: "warning", children: t("jobAndPay.compensation.pendingStatus") }) })
             ] })
           ] }) : /* @__PURE__ */ n(
-            J,
+            R,
             {
               title: t("jobAndPay.compensation.emptyState.title"),
               description: t("jobAndPay.compensation.emptyState.description")
@@ -444,20 +484,20 @@ function Kn({
     /* @__PURE__ */ n(
       o.Box,
       {
-        withPadding: L.length === 0,
+        withPadding: w.length === 0,
         header: /* @__PURE__ */ n(
           o.BoxHeader,
           {
             title: t("jobAndPay.payment.title"),
-            action: /* @__PURE__ */ l(c, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
-              ie && L.length > 1 && /* @__PURE__ */ n(
+            action: /* @__PURE__ */ d(c, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
+              ce && w.length > 1 && /* @__PURE__ */ n(
                 o.Button,
                 {
                   variant: "secondary",
                   onClick: () => {
-                    u(h.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: d });
+                    u(P.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: s });
                   },
-                  icon: /* @__PURE__ */ n(dn, {}),
+                  icon: /* @__PURE__ */ n(Ln, {}),
                   children: t("jobAndPay.payment.splitPaycheckCta")
                 }
               ),
@@ -466,7 +506,7 @@ function Kn({
                 {
                   variant: "secondary",
                   onClick: () => {
-                    u(h.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: d });
+                    u(P.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: s });
                   },
                   icon: /* @__PURE__ */ n(x, {}),
                   children: t("jobAndPay.payment.addBankAccountCta")
@@ -475,15 +515,15 @@ function Kn({
             ] })
           }
         ),
-        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") })
+        children: nn ? /* @__PURE__ */ n(v, {}) : w.length === 0 ? /* @__PURE__ */ d(c, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ n(o.Text, { variant: "supporting", children: A("paymentMethodLabel") }),
+          /* @__PURE__ */ n(o.Text, { children: A(ce ? "directDepositLabel" : "checkLabel") })
         ] }) : /* @__PURE__ */ n(
-          v,
+          T,
           {
             label: t("jobAndPay.payment.listLabel"),
             isWithinBox: !0,
-            ...Re
+            ...Qe
           }
         )
       }
@@ -500,19 +540,19 @@ function Kn({
               o.Button,
               {
                 variant: "secondary",
-                onClick: pe,
+                onClick: Pe,
                 icon: /* @__PURE__ */ n(x, {}),
                 children: t("jobAndPay.deductions.addDeductionCta")
               }
             )
           }
         ),
-        children: /* @__PURE__ */ n(
-          v,
+        children: tn ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ n(
+          T,
           {
             label: t("jobAndPay.deductions.listLabel"),
             isWithinBox: !0,
-            ...Fe
+            ...Ze
           }
         )
       }
@@ -522,73 +562,73 @@ function Kn({
       {
         withPadding: !1,
         header: /* @__PURE__ */ n(o.BoxHeader, { title: t("jobAndPay.paystubs.title") }),
-        children: /* @__PURE__ */ n(v, { label: t("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...He })
+        children: ve ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ n(T, { label: t("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...en })
       }
     ),
     /* @__PURE__ */ n(
-      qe,
+      cn,
       {
-        isOpen: ke,
-        pendingChanges: j,
-        employeeFirstName: M,
-        cancellingCompensationUuid: W,
+        isOpen: Me,
+        pendingChanges: L,
+        employeeFirstName: U,
+        cancellingCompensationUuid: q,
         onClose: () => {
-          X(!1);
+          ee(!1);
         },
         onCancelChange: (e) => {
-          G(e);
+          X(e);
         }
       }
     ),
     /* @__PURE__ */ n(
-      nn,
+      fn,
       {
-        pendingDeleteAccount: Q,
-        isPrimaryActionLoading: Te === Q?.uuid,
+        pendingDeleteAccount: ie,
+        isPrimaryActionLoading: Ve === ie?.uuid,
         onClose: () => {
-          Z(null);
+          ae(null);
         },
         onConfirm: () => {
-          Be();
+          Ye();
         }
       }
     ),
     /* @__PURE__ */ n(
-      rn,
+      Dn,
       {
-        pendingDeleteDeduction: ne,
-        isPrimaryActionLoading: ee === ne?.uuid,
+        pendingDeleteDeduction: se,
+        isPrimaryActionLoading: re === se?.uuid,
         onClose: () => {
-          te(null);
+          de(null);
         },
         onConfirm: () => {
-          Me();
+          Ie();
         }
       }
     ),
     /* @__PURE__ */ n(
       o.Dialog,
       {
-        isOpen: f !== null,
+        isOpen: D !== null,
         onClose: () => {
-          U(null);
+          J(null);
         },
         onPrimaryActionClick: () => {
-          Le();
+          Se();
         },
-        isPrimaryActionLoading: q,
+        isPrimaryActionLoading: $,
         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
+        children: D ? t("jobAndPay.compensation.deleteJobDialog.description", {
+          jobTitle: D.title
         }) : null
       }
     )
   ] }) });
 }
 export {
-  Kn as JobAndPayView
+  bt as JobAndPayView
 };
 //# sourceMappingURL=JobAndPayView.js.map