@gusto/embedded-react-sdk 0.46.2 → 0.47.0

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

@@ -1,634 +1,18 @@
-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 ln } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import "classnames";
-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 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 bt({
-  employeeId: s,
-  onEvent: u,
-  onEditCompensation: V,
-  onAddJob: he,
-  onAddAnotherJob: fe,
-  onAddDeduction: Pe,
-  onEditDeduction: Ae
-}) {
-  _("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) => {
-      await K(e) && u(P.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
-        employeeId: s,
-        compensationId: e.compensationUuid
-      });
-    },
-    [K, u, s]
-  ), [xe, z] = O(
-    () => /* @__PURE__ */ new Set()
-  ), ke = ue(
-    async (e) => {
-      const i = window.open("", "_blank"), f = t("jobAndPay.paystubs.downloadLoadingMessage");
-      if (i) {
-        const r = i.document;
-        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 le = r.createElement("span");
-        le.textContent = f, r.body.replaceChildren(g, le);
-      }
-      z((r) => {
-        const m = new Set(r);
-        return m.add(e), m;
-      });
-      try {
-        const r = await an(W, {
-          payrollId: e,
-          employeeId: s
-        });
-        if (!r.value?.responseStream)
-          throw new Error(t("jobAndPay.paystubs.downloadError"));
-        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(), I(r instanceof Error ? r : new Error(String(r)));
-      } finally {
-        z((r) => {
-          const m = new Set(r);
-          return m.delete(e), m;
-        });
-      }
-    },
-    [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 = 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: Y(i, e.paymentUnit) }) : null
-        ] });
-      }
-    },
-    {
-      key: "payType",
-      title: t("jobAndPay.compensation.columns.payType"),
-      render: (e) => {
-        const i = e.compensations?.find(
-          (f) => f.uuid === e.currentCompensationUuid
-        )?.flsaStatus;
-        return i !== void 0 ? Ce(`flsaStatusLabels.${i}`) : "-";
-      }
-    },
-    {
-      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(
-      F,
-      {
-        triggerLabel: t("jobAndPay.compensation.hamburgerTitle"),
-        isLoading: $,
-        items: [
-          {
-            label: t("jobAndPay.compensation.editJobCta"),
-            icon: /* @__PURE__ */ n(be, { "aria-hidden": !0 }),
-            onClick: () => {
-              V?.(e);
-            }
-          },
-          ...e.primary ? [] : [
-            {
-              label: t("jobAndPay.compensation.deleteJobCta"),
-              icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 }),
-              onClick: () => {
-                J({ uuid: e.uuid, title: e.title ?? "" });
-              }
-            }
-          ]
-        ]
-      }
-    )
-  }), Xe = [
-    {
-      key: "nickname",
-      title: t("jobAndPay.payment.nickname"),
-      render: (e) => e.name || "-"
-    },
-    {
-      key: "routingNumber",
-      title: t("jobAndPay.payment.routingNumber"),
-      render: (e) => e.routingNumber || "-"
-    },
-    {
-      key: "accountType",
-      title: t("jobAndPay.payment.accountType"),
-      render: (e) => e.accountType || "-"
-    }
-  ], ze = [
-    {
-      key: "description",
-      title: t("jobAndPay.deductions.deduction"),
-      render: (e) => e.description || "-"
-    },
-    {
-      key: "frequency",
-      title: t("jobAndPay.deductions.frequency"),
-      render: (e) => e.recurring ? t("jobAndPay.deductions.recurring") : t("jobAndPay.deductions.oneTime")
-    },
-    {
-      key: "amount",
-      title: t("jobAndPay.deductions.withhold"),
-      render: (e) => jn(e, {
-        formatCurrency: B,
-        formatPercent: De,
-        formatPerPaycheck: (i) => t("jobAndPay.deductions.amountPerPaycheck", { value: i })
-      })
-    }
-  ], $e = [
-    {
-      key: "payday",
-      title: t("jobAndPay.paystubs.payday"),
-      render: (e) => j(e.checkDate) || "-"
-    },
-    {
-      key: "checkAmount",
-      title: t("jobAndPay.paystubs.checkAmount"),
-      render: (e) => {
-        if (!e.netPay) return "-";
-        const i = parseFloat(e.netPay);
-        return isNaN(i) ? "-" : B(i);
-      }
-    },
-    {
-      key: "grossPay",
-      title: t("jobAndPay.paystubs.grossPay"),
-      render: (e) => {
-        if (!e.grossPay) return "-";
-        const i = parseFloat(e.grossPay);
-        return isNaN(i) ? "-" : B(i);
-      }
-    },
-    {
-      key: "paymentMethod",
-      title: t("jobAndPay.paystubs.paymentMethod"),
-      render: () => oe?.type || t("jobAndPay.paystubs.noPaymentMethod")
-    }
-  ], Qe = k({
-    data: w,
-    columns: Xe,
-    itemMenu: (e) => /* @__PURE__ */ n(
-      F,
-      {
-        items: [
-          {
-            label: A("deleteBankAccountCta"),
-            onClick: () => {
-              ae({
-                uuid: e.uuid,
-                hiddenAccountNumber: e.hiddenAccountNumber
-              });
-            },
-            icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 })
-          }
-        ],
-        triggerLabel: A("hamburgerTitle")
-      }
-    )
-  }), Ze = k({
-    data: We,
-    columns: ze,
-    itemMenu: (e) => /* @__PURE__ */ n(
-      F,
-      {
-        isLoading: re === e.uuid,
-        items: [
-          {
-            label: S("editCta"),
-            onClick: () => Ae?.(e),
-            icon: /* @__PURE__ */ n(be, { "aria-hidden": !0 })
-          },
-          {
-            label: S("deleteCta"),
-            onClick: () => {
-              de(e);
-            },
-            icon: /* @__PURE__ */ n(H, { "aria-hidden": !0 })
-          }
-        ],
-        triggerLabel: S("hamburgerTitle")
-      }
-    ),
-    emptyState: () => /* @__PURE__ */ n(
-      R,
-      {
-        title: t("jobAndPay.deductions.emptyState.title"),
-        description: t("jobAndPay.deductions.emptyState.description")
-      }
-    )
-  }), en = k({
-    data: we,
-    columns: $e,
-    pagination: Ee,
-    itemMenu: (e) => {
-      const i = !!e.payrollUuid && xe.has(e.payrollUuid);
-      return /* @__PURE__ */ n(
-        o.ButtonIcon,
-        {
-          variant: "tertiary",
-          "aria-label": t("jobAndPay.paystubs.downloadCta"),
-          isDisabled: !e.payrollUuid,
-          isLoading: i,
-          onClick: () => {
-            e.payrollUuid && ke(e.payrollUuid);
-          },
-          children: /* @__PURE__ */ n(wn, { "aria-hidden": !0 })
-        }
-      );
-    },
-    emptyState: () => /* @__PURE__ */ n(
-      R,
-      {
-        title: t("jobAndPay.paystubs.emptyState.title"),
-        description: t("jobAndPay.paystubs.emptyState.description")
-      }
-    )
-  }), 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: !h,
-        header: /* @__PURE__ */ n(
-          o.BoxHeader,
-          {
-            title: t("jobAndPay.compensation.title"),
-            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: !N && Ne ? /* @__PURE__ */ n(
-          o.Button,
-          {
-            variant: "secondary",
-            onClick: fe,
-            icon: /* @__PURE__ */ n(x, {}),
-            children: t("jobAndPay.compensation.addAnotherJobCta")
-          }
-        ) : void 0,
-        children: N ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
-          ne && /* @__PURE__ */ n(
-            "div",
-            {
-              className: [me.alertWrapper, h && me.alertWrapperPadded].filter(Boolean).join(" "),
-              children: /* @__PURE__ */ d(c, { flexDirection: "column", gap: 16, children: [
-                Fe && b && /* @__PURE__ */ n(
-                  o.Alert,
-                  {
-                    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")
-                        }
-                      ) })
-                    ] })
-                  }
-                ),
-                te && /* @__PURE__ */ n(
-                  o.Alert,
-                  {
-                    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")
-                      }
-                    )
-                  }
-                )
-              ] })
-            }
-          ),
-          h ? /* @__PURE__ */ n(
-            T,
-            {
-              label: t("jobAndPay.compensation.tableLabel"),
-              isWithinBox: !0,
-              ...Ke
-            }
-          ) : 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: a.title })
-            ] }),
-            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: a.paymentUnit === "Hour" ? t("jobAndPay.compensation.types.hourly") : a.paymentUnit === "Salary" || a.paymentUnit === "Year" ? t("jobAndPay.compensation.types.salary") : a.paymentUnit })
-            ] }),
-            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: Y(Q, a.paymentUnit) })
-            ] }),
-            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(
-            R,
-            {
-              title: t("jobAndPay.compensation.emptyState.title"),
-              description: t("jobAndPay.compensation.emptyState.description")
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ n(
-      o.Box,
-      {
-        withPadding: w.length === 0,
-        header: /* @__PURE__ */ n(
-          o.BoxHeader,
-          {
-            title: t("jobAndPay.payment.title"),
-            action: /* @__PURE__ */ d(c, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
-              ce && w.length > 1 && /* @__PURE__ */ n(
-                o.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    u(P.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: s });
-                  },
-                  icon: /* @__PURE__ */ n(Ln, {}),
-                  children: t("jobAndPay.payment.splitPaycheckCta")
-                }
-              ),
-              /* @__PURE__ */ n(
-                o.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    u(P.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: s });
-                  },
-                  icon: /* @__PURE__ */ n(x, {}),
-                  children: t("jobAndPay.payment.addBankAccountCta")
-                }
-              )
-            ] })
-          }
-        ),
-        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(
-          T,
-          {
-            label: t("jobAndPay.payment.listLabel"),
-            isWithinBox: !0,
-            ...Qe
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ n(
-      o.Box,
-      {
-        withPadding: !1,
-        header: /* @__PURE__ */ n(
-          o.BoxHeader,
-          {
-            title: t("jobAndPay.deductions.title"),
-            action: /* @__PURE__ */ n(
-              o.Button,
-              {
-                variant: "secondary",
-                onClick: Pe,
-                icon: /* @__PURE__ */ n(x, {}),
-                children: t("jobAndPay.deductions.addDeductionCta")
-              }
-            )
-          }
-        ),
-        children: tn ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ n(
-          T,
-          {
-            label: t("jobAndPay.deductions.listLabel"),
-            isWithinBox: !0,
-            ...Ze
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ n(
-      o.Box,
-      {
-        withPadding: !1,
-        header: /* @__PURE__ */ n(o.BoxHeader, { title: t("jobAndPay.paystubs.title") }),
-        children: ve ? /* @__PURE__ */ n(v, {}) : /* @__PURE__ */ n(T, { label: t("jobAndPay.paystubs.listLabel"), isWithinBox: !0, ...en })
-      }
-    ),
-    /* @__PURE__ */ n(
-      cn,
-      {
-        isOpen: Me,
-        pendingChanges: L,
-        employeeFirstName: U,
-        cancellingCompensationUuid: q,
-        onClose: () => {
-          ee(!1);
-        },
-        onCancelChange: (e) => {
-          X(e);
-        }
-      }
-    ),
-    /* @__PURE__ */ n(
-      fn,
-      {
-        pendingDeleteAccount: ie,
-        isPrimaryActionLoading: Ve === ie?.uuid,
-        onClose: () => {
-          ae(null);
-        },
-        onConfirm: () => {
-          Ye();
-        }
-      }
-    ),
-    /* @__PURE__ */ n(
-      Dn,
-      {
-        pendingDeleteDeduction: se,
-        isPrimaryActionLoading: re === se?.uuid,
-        onClose: () => {
-          de(null);
-        },
-        onConfirm: () => {
-          Ie();
-        }
-      }
-    ),
-    /* @__PURE__ */ n(
-      o.Dialog,
-      {
-        isOpen: D !== null,
-        onClose: () => {
-          J(null);
-        },
-        onPrimaryActionClick: () => {
-          Se();
-        },
-        isPrimaryActionLoading: $,
-        isDestructive: !0,
-        title: t("jobAndPay.compensation.deleteJobDialog.title"),
-        primaryActionLabel: t("jobAndPay.compensation.deleteJobDialog.confirmCta"),
-        closeActionLabel: t("jobAndPay.compensation.deleteJobDialog.cancelCta"),
-        children: D ? t("jobAndPay.compensation.deleteJobDialog.description", {
-          jobTitle: D.title
-        }) : null
-      }
-    )
-  ] }) });
+import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { Flex as t } from "../../Common/Flex/Flex.js";
+import { CompensationCard as a } from "../Compensation/management/CompensationCard/CompensationCard.js";
+import { PaymentMethodCard as f } from "../PaymentMethod/management/PaymentMethodCard.js";
+import { DeductionsCard as s } from "../Deductions/management/DeductionsCard/DeductionsCard.js";
+import { PaystubsCard as p } from "../Paystubs/management/PaystubsCard/PaystubsCard.js";
+function P({ employeeId: r, onEvent: o }) {
+  return /* @__PURE__ */ m(t, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ i(a, { employeeId: r, onEvent: o }),
+    /* @__PURE__ */ i(f, { employeeId: r, onEvent: o }),
+    /* @__PURE__ */ i(s, { employeeId: r, onEvent: o }),
+    /* @__PURE__ */ i(p, { employeeId: r, onEvent: o })
+  ] });
 }
 export {
-  bt as JobAndPayView
+  P as JobAndPayView
 };
 //# sourceMappingURL=JobAndPayView.js.map