@gusto/embedded-react-sdk 0.46.3 → 0.47.1

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

@@ -1,660 +1,18 @@
-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 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 Ct({
-  employeeId: r,
-  onEvent: u,
-  onEditCompensation: W,
-  onAddJob: Pe,
-  onAddAnotherJob: Ce,
-  onAddDeduction: Ae,
-  onEditDeduction: De
-}) {
-  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: 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 X(e) && u(P.EMPLOYEE_COMPENSATION_CHANGE_CANCELLED, {
-        employeeId: r,
-        compensationId: e.compensationUuid
-      });
-    },
-    [X, u, r]
-  ), [Se, Q] = R(
-    () => /* @__PURE__ */ new Set()
-  ), Be = pe(
-    async (e) => {
-      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);
-      }
-      Q((a) => {
-        const c = new Set(a);
-        return c.add(e), c;
-      });
-      try {
-        const a = await ln(G, {
-          payrollId: e,
-          employeeId: r
-        });
-        if (!a.value?.responseStream)
-          throw new Error(n("jobAndPay.paystubs.downloadError"));
-        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) {
-        o && o.close(), q(a instanceof Error ? a : new Error(String(a)));
-      } finally {
-        Q((a) => {
-          const c = new Set(a);
-          return c.delete(e), c;
-        });
-      }
-    },
-    [G, r, n, q]
-  ), [D, M] = R(null), { mutateAsync: Je, isPending: Z } = mn(), Ne = async () => {
-    if (!D) return;
-    const e = D.uuid;
-    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 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 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
-        ] });
-      }
-    },
-    {
-      key: "payType",
-      title: n("jobAndPay.compensation.columns.payType"),
-      render: (e) => {
-        const o = e.compensations?.find(
-          (d) => d.uuid === e.currentCompensationUuid
-        )?.flsaStatus;
-        return o !== void 0 ? je(`flsaStatusLabels.${o}`) : "-";
-      }
-    },
-    {
-      key: "effectiveDate",
-      title: n("jobAndPay.compensation.columns.effectiveDate"),
-      render: (e) => {
-        const o = e.compensations?.find((d) => d.uuid === e.currentCompensationUuid);
-        return o?.effectiveDate ? L(o.effectiveDate) : "-";
-      }
-    },
-    ...Ve ? [
-      {
-        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(he, { "aria-hidden": !0 }),
-            onClick: () => {
-              W?.(e);
-            }
-          }
-        ],
-        ...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 ?? "" });
-            }
-          }
-        ]
-      ];
-      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"),
-      render: (e) => e.name || "-"
-    },
-    {
-      key: "routingNumber",
-      title: n("jobAndPay.payment.routingNumber"),
-      render: (e) => e.routingNumber || "-"
-    },
-    {
-      key: "accountType",
-      title: n("jobAndPay.payment.accountType"),
-      render: (e) => e.accountType || "-"
-    }
-  ], Ze = [
-    {
-      key: "description",
-      title: n("jobAndPay.deductions.deduction"),
-      render: (e) => e.description || "-"
-    },
-    {
-      key: "frequency",
-      title: n("jobAndPay.deductions.frequency"),
-      render: (e) => e.recurring ? n("jobAndPay.deductions.recurring") : n("jobAndPay.deductions.oneTime")
-    },
-    {
-      key: "amount",
-      title: n("jobAndPay.deductions.withhold"),
-      render: (e) => vn(e, {
-        formatCurrency: N,
-        formatPercent: Le,
-        formatPerPaycheck: (o) => n("jobAndPay.deductions.amountPerPaycheck", { value: o })
-      })
-    }
-  ], en = [
-    {
-      key: "payday",
-      title: n("jobAndPay.paystubs.payday"),
-      render: (e) => L(e.checkDate) || "-"
-    },
-    {
-      key: "checkAmount",
-      title: n("jobAndPay.paystubs.checkAmount"),
-      render: (e) => {
-        if (!e.netPay) return "-";
-        const o = parseFloat(e.netPay);
-        return isNaN(o) ? "-" : N(o);
-      }
-    },
-    {
-      key: "grossPay",
-      title: n("jobAndPay.paystubs.grossPay"),
-      render: (e) => {
-        if (!e.grossPay) return "-";
-        const o = parseFloat(e.grossPay);
-        return isNaN(o) ? "-" : N(o);
-      }
-    },
-    {
-      key: "paymentMethod",
-      title: n("jobAndPay.paystubs.paymentMethod"),
-      render: () => ae?.type || n("jobAndPay.paystubs.noPaymentMethod")
-    }
-  ], nn = S({
-    data: E,
-    columns: Qe,
-    itemMenu: (e) => /* @__PURE__ */ t(
-      Y,
-      {
-        items: [
-          {
-            label: C("deleteBankAccountCta"),
-            onClick: () => {
-              re({
-                uuid: e.uuid,
-                hiddenAccountNumber: e.hiddenAccountNumber
-              });
-            },
-            icon: /* @__PURE__ */ t(V, { "aria-hidden": !0 })
-          }
-        ],
-        triggerLabel: C("hamburgerTitle")
-      }
-    )
-  }), tn = S({
-    data: qe,
-    columns: Ze,
-    itemMenu: (e) => /* @__PURE__ */ t(
-      Y,
-      {
-        isLoading: de === e.uuid,
-        items: [
-          {
-            label: J("editCta"),
-            onClick: () => De?.(e),
-            icon: /* @__PURE__ */ t(he, { "aria-hidden": !0 })
-          },
-          {
-            label: J("deleteCta"),
-            onClick: () => {
-              le(e);
-            },
-            icon: /* @__PURE__ */ t(V, { "aria-hidden": !0 })
-          }
-        ],
-        triggerLabel: J("hamburgerTitle")
-      }
-    ),
-    emptyState: () => /* @__PURE__ */ t(
-      _,
-      {
-        title: n("jobAndPay.deductions.emptyState.title"),
-        description: n("jobAndPay.deductions.emptyState.description")
-      }
-    )
-  }), on = S({
-    data: ke,
-    columns: en,
-    pagination: ve,
-    itemMenu: (e) => {
-      const o = !!e.payrollUuid && Se.has(e.payrollUuid);
-      return /* @__PURE__ */ t(
-        i.ButtonIcon,
-        {
-          variant: "tertiary",
-          "aria-label": n("jobAndPay.paystubs.downloadCta"),
-          isDisabled: !e.payrollUuid,
-          isLoading: o,
-          onClick: () => {
-            e.payrollUuid && Be(e.payrollUuid);
-          },
-          children: /* @__PURE__ */ t(Sn, { "aria-hidden": !0 })
-        }
-      );
-    },
-    emptyState: () => /* @__PURE__ */ t(
-      _,
-      {
-        title: n("jobAndPay.paystubs.emptyState.title"),
-        description: n("jobAndPay.paystubs.emptyState.description")
-      }
-    )
-  }), 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(
-      i.Box,
-      {
-        withPadding: !h,
-        header: /* @__PURE__ */ t(
-          i.BoxHeader,
-          {
-            title: n("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.
-              T || h ? null : s ? Ye ? null : /* @__PURE__ */ t(
-                i.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    W?.(s);
-                  },
-                  children: n("jobAndPay.compensation.editCta")
-                }
-              ) : /* @__PURE__ */ t(
-                i.Button,
-                {
-                  variant: "secondary",
-                  onClick: Pe,
-                  icon: /* @__PURE__ */ t(U, {}),
-                  children: n("jobAndPay.compensation.addJobCta")
-                }
-              )
-            )
-          }
-        ),
-        footer: !T && Me ? /* @__PURE__ */ t(
-          i.Button,
-          {
-            variant: "secondary",
-            onClick: Ce,
-            icon: /* @__PURE__ */ t(U, {}),
-            children: n("jobAndPay.compensation.addAnotherJobCta")
-          }
-        ) : void 0,
-        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,
-                  {
-                    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")
-                      }
-                    )
-                  }
-                )
-              ] })
-            }
-          ),
-          h ? /* @__PURE__ */ t(
-            B,
-            {
-              label: n("jobAndPay.compensation.tableLabel"),
-              isWithinBox: !0,
-              ...$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") })
-                  }
-                ] : []
-              ]
-            }
-          ) : /* @__PURE__ */ t(
-            _,
-            {
-              title: n("jobAndPay.compensation.emptyState.title"),
-              description: n("jobAndPay.compensation.emptyState.description")
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ t(
-      i.Box,
-      {
-        withPadding: E.length === 0,
-        header: /* @__PURE__ */ t(
-          i.BoxHeader,
-          {
-            title: n("jobAndPay.payment.title"),
-            action: /* @__PURE__ */ f(j, { gap: 8, alignItems: "center", justifyContent: "flex-end", children: [
-              ue && E.length > 1 && /* @__PURE__ */ t(
-                i.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    u(P.EMPLOYEE_SPLIT_PAYCHECK, { employeeId: r });
-                  },
-                  icon: /* @__PURE__ */ t(Un, {}),
-                  children: n("jobAndPay.payment.splitPaycheckCta")
-                }
-              ),
-              /* @__PURE__ */ t(
-                i.Button,
-                {
-                  variant: "secondary",
-                  onClick: () => {
-                    u(P.EMPLOYEE_BANK_ACCOUNT_CREATE, { employeeId: r });
-                  },
-                  icon: /* @__PURE__ */ t(U, {}),
-                  children: n("jobAndPay.payment.addBankAccountCta")
-                }
-              )
-            ] })
-          }
-        ),
-        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,
-            ...nn
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t(
-      i.Box,
-      {
-        withPadding: !1,
-        header: /* @__PURE__ */ t(
-          i.BoxHeader,
-          {
-            title: n("jobAndPay.deductions.title"),
-            action: /* @__PURE__ */ t(
-              i.Button,
-              {
-                variant: "secondary",
-                onClick: Ae,
-                icon: /* @__PURE__ */ t(U, {}),
-                children: n("jobAndPay.deductions.addDeductionCta")
-              }
-            )
-          }
-        ),
-        children: sn ? /* @__PURE__ */ t(v, {}) : /* @__PURE__ */ t(
-          B,
-          {
-            label: n("jobAndPay.deductions.listLabel"),
-            isWithinBox: !0,
-            ...tn
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ t(
-      i.Box,
-      {
-        withPadding: !1,
-        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(
-      yn,
-      {
-        isOpen: He,
-        pendingChanges: y,
-        employeeFirstName: x,
-        cancellingCompensationUuid: z,
-        onClose: () => {
-          O(!1);
-        },
-        onCancelChange: (e) => {
-          $(e);
-        }
-      }
-    ),
-    /* @__PURE__ */ t(
-      jn,
-      {
-        pendingDeleteAccount: se,
-        isPrimaryActionLoading: Ie === se?.uuid,
-        onClose: () => {
-          re(null);
-        },
-        onConfirm: () => {
-          Ge();
-        }
-      }
-    ),
-    /* @__PURE__ */ t(
-      kn,
-      {
-        pendingDeleteDeduction: ce,
-        isPrimaryActionLoading: de === ce?.uuid,
-        onClose: () => {
-          le(null);
-        },
-        onConfirm: () => {
-          Ke();
-        }
-      }
-    ),
-    /* @__PURE__ */ t(
-      i.Dialog,
-      {
-        isOpen: D !== null,
-        onClose: () => {
-          M(null);
-        },
-        onPrimaryActionClick: () => {
-          Ne();
-        },
-        isPrimaryActionLoading: Z,
-        isDestructive: !0,
-        title: n("jobAndPay.compensation.deleteJobDialog.title"),
-        primaryActionLabel: n("jobAndPay.compensation.deleteJobDialog.confirmCta"),
-        closeActionLabel: n("jobAndPay.compensation.deleteJobDialog.cancelCta"),
-        children: D ? n("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 {
-  Ct as JobAndPayView
+  P as JobAndPayView
 };
 //# sourceMappingURL=JobAndPayView.js.map