@gusto/embedded-react-sdk 0.55.7 → 0.55.8

package/dist/components/Payroll/UNSTABLE_PayrollEditEmployee/UNSTABLE_PayrollEditEmployee.js

@@ -1,362 +1,389 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useMemo as me, Fragment as de } from "react";
-import { useTranslation as Q } from "react-i18next";
-import { PayrollUpdatePaymentMethod as ue } from "@gusto/embedded-api/models/components/payrollupdate";
-import { isSplitByWorkweek as ce } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/fields.js";
-import { PayrollEditEmployeeErrorCodes as x } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.js";
-import P from "./UNSTABLE_PayrollEditEmployee.module.scss.js";
-import { componentEvents as G, COMPENSATION_NAME_REIMBURSEMENT as pe, COMPENSATION_NAME_PAYCHECK_TIPS as he, COMPENSATION_NAME_CASH_TIPS as fe, COMPENSATION_NAME_CORRECTION_PAYMENT as be, COMPENSATION_NAME_COMMISSION as Ee, COMPENSATION_NAME_BONUS as ye, COMPENSATION_NAME_DOUBLE_OVERTIME as Ce, COMPENSATION_NAME_OVERTIME as Ne, COMPENSATION_NAME_REGULAR_HOURS as ge } from "../../../shared/constants.js";
-import { BaseBoundaries as Oe, BaseLayout as q } from "../../Base/Base.js";
+import { jsx as t, jsxs as m, Fragment as J } from "react/jsx-runtime";
+import { useRef as fe, useMemo as Ee, Fragment as ge } from "react";
+import { useTranslation as ee } from "react-i18next";
+import { PayrollUpdatePaymentMethod as ye } from "@gusto/embedded-api/models/components/payrollupdate";
+import { isSplitByWorkweek as B } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/fields.js";
+import { PayrollEditEmployeeErrorCodes as F } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/payrollEditEmployeeSchema.js";
+import E from "./UNSTABLE_PayrollEditEmployee.module.scss.js";
+import { componentEvents as Q, COMPENSATION_NAME_REIMBURSEMENT as Ce, COMPENSATION_NAME_PAYCHECK_TIPS as Ne, COMPENSATION_NAME_CASH_TIPS as ve, COMPENSATION_NAME_CORRECTION_PAYMENT as Oe, COMPENSATION_NAME_COMMISSION as Te, COMPENSATION_NAME_BONUS as Ae, COMPENSATION_NAME_DOUBLE_OVERTIME as Pe, COMPENSATION_NAME_OVERTIME as Se, COMPENSATION_NAME_REGULAR_HOURS as Me } from "../../../shared/constants.js";
+import { BaseBoundaries as Re, BaseLayout as X } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { useComponentDictionary as Te, useI18n as Ae } from "../../../i18n/I18n.js";
-import { useComponentContext as z } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Flex as l } from "../../Common/Flex/Flex.js";
-import { Grid as Pe } from "../../Common/Grid/Grid.js";
-import { EmptyData as ve } from "../../Common/EmptyData/EmptyData.js";
-import { SDKFormProvider as Me } from "../../../partner-hook-utils/form/SDKFormProvider.js";
-import { firstLastName as Se, formatNumberAsCurrency as Re } from "../../../helpers/formattedStrings.js";
-import { useDateFormatter as _e } from "../../../hooks/useDateFormatter.js";
-import J from "../../../assets/icons/plus-circle.svg.js";
-import Le from "../../../assets/icons/trashcan.svg.js";
-import { usePayrollEditEmployeeForm as ke } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/usePayrollEditEmployeeForm.js";
-import { DataView as v } from "../../Common/DataView/DataView.js";
-import { useDataView as De } from "../../Common/DataView/useDataView.js";
-function at({
-  FallbackComponent: u,
-  LoaderComponent: c,
-  ...b
+import { useComponentDictionary as Le, useI18n as _e } from "../../../i18n/I18n.js";
+import { useComponentContext as te } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Flex as u } from "../../Common/Flex/Flex.js";
+import { Grid as ke } from "../../Common/Grid/Grid.js";
+import { EmptyData as we } from "../../Common/EmptyData/EmptyData.js";
+import { SDKFormProvider as xe } from "../../../partner-hook-utils/form/SDKFormProvider.js";
+import { firstLastName as De, formatNumberAsCurrency as Ie } from "../../../helpers/formattedStrings.js";
+import { useDateFormatter as Be } from "../../../hooks/useDateFormatter.js";
+import Fe from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import Z from "../../../assets/icons/plus-circle.svg.js";
+import Ue from "../../../assets/icons/trashcan.svg.js";
+import { usePayrollEditEmployeeForm as He } from "../PayrollEditEmployee/shared/usePayrollEditEmployeeForm/usePayrollEditEmployeeForm.js";
+import { DataView as R } from "../../Common/DataView/DataView.js";
+import { useDataView as Ve } from "../../Common/DataView/useDataView.js";
+function ft({
+  FallbackComponent: h,
+  LoaderComponent: b,
+  ...N
 }) {
   return /* @__PURE__ */ t(
-    Oe,
+    Re,
     {
       componentName: "Payroll.UNSTABLE_PayrollEditEmployee",
-      FallbackComponent: u,
-      LoaderComponent: c,
-      children: /* @__PURE__ */ t(we, { LoaderComponent: c, ...b })
+      FallbackComponent: h,
+      LoaderComponent: b,
+      children: /* @__PURE__ */ t(We, { LoaderComponent: b, ...N })
     }
   );
 }
-const xe = ({
-  rows: u,
-  isAdding: c,
-  draftFields: b,
-  onBeginAdd: O,
-  onSave: T,
-  onCancel: M,
-  onRemove: A
+const je = ({
+  rows: h,
+  isAdding: b,
+  draftFields: N,
+  onBeginAdd: A,
+  onSave: P,
+  onCancel: L,
+  onRemove: S
 }) => {
-  const { t: e } = Q("Payroll.UNSTABLE_PayrollEditEmployee"), { Button: h, ButtonIcon: S, Heading: E } = z(), { Description: y, Amount: C } = b, N = De({
-    data: u,
+  const { t: e } = ee("Payroll.UNSTABLE_PayrollEditEmployee"), { Button: g, ButtonIcon: M, Heading: y } = te(), { Description: C, Amount: v } = N, O = Ve({
+    data: h,
     columns: [
       {
         key: "description",
         title: e("reimbursementDescriptionColumn"),
-        render: (a) => a.description.trim() || e("reimbursementUnnamedFallback")
+        render: (d) => d.description.trim() || e("reimbursementUnnamedFallback")
       },
       {
         key: "amount",
         title: e("reimbursementAmountColumn"),
         justify: "end",
-        render: (a) => Re(parseFloat(a.amount || "0"))
+        render: (d) => Ie(parseFloat(d.amount || "0"))
       },
       {
         key: "recurring",
         title: e("reimbursementTypeColumn"),
-        render: (a) => a.recurring ? e("reimbursementTypeRecurring") : e("reimbursementTypeOneTime")
+        render: (d) => d.recurring ? e("reimbursementTypeRecurring") : e("reimbursementTypeOneTime")
       }
     ],
-    itemMenu: (a) => {
-      if (a.recurring) return null;
-      const n = a.description.trim() || e("reimbursementUnnamedFallback");
+    itemMenu: (d) => {
+      if (d.recurring) return null;
+      const T = d.description.trim() || e("reimbursementUnnamedFallback");
       return /* @__PURE__ */ t(
-        S,
+        M,
         {
           variant: "tertiary",
           onClick: () => {
-            A(a.index);
+            S(d.index);
           },
-          "aria-label": e("removeReimbursementLabel", { description: n }),
-          children: /* @__PURE__ */ t(Le, { "aria-hidden": !0 })
+          "aria-label": e("removeReimbursementLabel", { description: T }),
+          children: /* @__PURE__ */ t(Ue, { "aria-hidden": !0 })
         }
       );
     },
-    emptyState: () => /* @__PURE__ */ t(ve, { title: e("reimbursementEmptyTitle"), children: /* @__PURE__ */ t(h, { variant: "secondary", onClick: O, icon: /* @__PURE__ */ t(J, { "aria-hidden": !0 }), children: e("addReimbursementCta") }) })
+    emptyState: () => /* @__PURE__ */ t(we, { title: e("reimbursementEmptyTitle"), children: /* @__PURE__ */ t(g, { variant: "secondary", onClick: A, icon: /* @__PURE__ */ t(Z, { "aria-hidden": !0 }), children: e("addReimbursementCta") }) })
   });
-  return /* @__PURE__ */ s(l, { flexDirection: "column", gap: 12, children: [
-    /* @__PURE__ */ t(E, { as: "h3", styledAs: "h4", children: e("reimbursementTitle") }),
-    !(u.length === 0 && c) && /* @__PURE__ */ t(v, { label: e("reimbursementsTableLabel"), ...N }),
-    c ? /* @__PURE__ */ s(l, { flexDirection: "column", gap: 12, children: [
-      /* @__PURE__ */ s(Pe, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
+  return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
+    /* @__PURE__ */ t(y, { as: "h3", styledAs: "h4", children: e("reimbursementTitle") }),
+    !(h.length === 0 && b) && /* @__PURE__ */ t(R, { label: e("reimbursementsTableLabel"), ...O }),
+    b ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
+      /* @__PURE__ */ m(ke, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
         /* @__PURE__ */ t(
-          y,
+          C,
           {
             label: e("reimbursementDescriptionLabel"),
             placeholder: e("reimbursementDescriptionPlaceholder")
           }
         ),
-        /* @__PURE__ */ t(C, { label: e("reimbursementAmountLabel"), adornmentStart: "$", isRequired: !0 })
+        /* @__PURE__ */ t(v, { label: e("reimbursementAmountLabel"), adornmentStart: "$", isRequired: !0 })
       ] }),
-      /* @__PURE__ */ s(l, { gap: 12, children: [
-        /* @__PURE__ */ t(h, { onClick: T, title: e("saveReimbursementCta"), children: e("saveReimbursementCta") }),
-        /* @__PURE__ */ t(h, { variant: "secondary", onClick: M, title: e("cancelReimbursementCta"), children: e("cancelReimbursementCta") })
+      /* @__PURE__ */ m(u, { gap: 12, children: [
+        /* @__PURE__ */ t(g, { onClick: P, title: e("saveReimbursementCta"), children: e("saveReimbursementCta") }),
+        /* @__PURE__ */ t(g, { variant: "secondary", onClick: L, title: e("cancelReimbursementCta"), children: e("cancelReimbursementCta") })
       ] })
-    ] }) : u.length > 0 && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
-      h,
+    ] }) : h.length > 0 && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(
+      g,
       {
         variant: "secondary",
-        onClick: O,
+        onClick: A,
         title: e("addReimbursementLink"),
-        icon: /* @__PURE__ */ t(J, { "aria-hidden": !0 }),
+        icon: /* @__PURE__ */ t(Z, { "aria-hidden": !0 }),
         children: e("addReimbursementLink")
       }
     ) })
   ] });
-}, we = ({
-  employeeId: u,
-  companyId: c,
-  payrollId: b,
-  withReimbursements: O = !0,
-  onEvent: T,
-  dictionary: M,
-  LoaderComponent: A
+}, We = ({
+  employeeId: h,
+  companyId: b,
+  payrollId: N,
+  withReimbursements: A = !0,
+  onEvent: P,
+  dictionary: L,
+  LoaderComponent: S
 }) => {
-  Te("Payroll.UNSTABLE_PayrollEditEmployee", M), Ae("Payroll.UNSTABLE_PayrollEditEmployee");
-  const { t: e } = Q("Payroll.UNSTABLE_PayrollEditEmployee"), h = _e(), { Alert: S, Box: E, BoxHeader: y, Button: C, Heading: N } = z(), a = me(
+  Le("Payroll.UNSTABLE_PayrollEditEmployee", L), _e("Payroll.UNSTABLE_PayrollEditEmployee");
+  const { t: e } = ee("Payroll.UNSTABLE_PayrollEditEmployee"), g = Be(), { Alert: M, Box: y, BoxHeader: C, Button: v, Heading: O, Text: d } = te(), T = fe(null), f = Fe({ ref: T }).includes("small"), ne = Ee(
     () => ({
-      [x.NEGATIVE_AMOUNT]: e("validations.negativeAmount"),
-      [x.REQUIRED_WORKWEEK]: e("validations.requiredWorkweek"),
-      [x.REIMBURSEMENT_AMOUNT]: e("validations.reimbursementAmount")
+      [F.NEGATIVE_AMOUNT]: e("validations.negativeAmount"),
+      [F.REQUIRED_WORKWEEK]: e("validations.requiredWorkweek"),
+      [F.REIMBURSEMENT_AMOUNT]: e("validations.reimbursementAmount")
     }),
     [e]
-  ), n = ke({
-    employeeId: u,
-    companyId: c,
-    payrollId: b,
-    withReimbursements: O,
-    errorMessages: a
+  ), r = He({
+    employeeId: h,
+    companyId: b,
+    payrollId: N,
+    withReimbursements: A,
+    errorMessages: ne
   });
-  if (n.isLoading)
-    return /* @__PURE__ */ t(q, { isLoading: !0, error: n.errorHandling.errors, LoaderComponent: A });
-  const { employee: R } = n.data, o = n.form.Fields, w = Se({
-    first_name: R.firstName,
-    last_name: R.lastName
-  }), X = (r) => {
-    switch (r) {
-      case ge:
+  if (r.isLoading)
+    return /* @__PURE__ */ t("div", { ref: T, className: E.container, children: /* @__PURE__ */ t(X, { isLoading: !0, error: r.errorHandling.errors, LoaderComponent: S }) });
+  const { employee: _ } = r.data, c = r.form.Fields, k = De({
+    first_name: _.firstName,
+    last_name: _.lastName
+  }), re = (n) => {
+    switch (n) {
+      case Me:
         return e("compensationNames.regularHours");
-      case Ne:
+      case Se:
         return e("compensationNames.overtime");
-      case Ce:
+      case Pe:
         return e("compensationNames.doubleOvertime");
       default:
-        return r;
+        return n;
     }
-  }, _ = (r) => {
-    switch (r) {
-      case ye:
+  }, w = (n) => {
+    switch (n) {
+      case Ae:
         return e("fixedCompensationNames.bonus");
-      case Ee:
+      case Te:
         return e("fixedCompensationNames.commission");
-      case be:
+      case Oe:
         return e("fixedCompensationNames.correctionPayment");
-      case fe:
+      case ve:
         return e("fixedCompensationNames.cashTips");
-      case he:
+      case Ne:
         return e("fixedCompensationNames.paycheckTips");
-      case pe:
+      case Ce:
         return e("fixedCompensationNames.reimbursement");
       default:
-        return r;
+        return n;
     }
-  }, U = (r, i) => {
-    const {
-      title: f,
-      label: g,
-      rowHeader: p,
-      valueColumnLabel: d,
-      labelFor: L,
-      adornmentStart: ne,
-      adornmentEnd: ie,
-      footer: H
-    } = i, j = ce(r), ae = n.data.workweeks[0]?.startDate ?? "", V = j ? r[ae] ?? [] : r;
-    if (V.length === 0 && !H) return null;
-    const W = (m, k) => /* @__PURE__ */ t("div", { className: P.inputContainer, children: /* @__PURE__ */ t(
-      m.Field,
+  }, x = (n) => B(n) ? n[r.data.workweeks[0]?.startDate ?? ""] ?? [] : n, U = (n, i) => {
+    const { label: o, rowHeader: a, valueColumnLabel: l, labelFor: s, adornmentStart: me, adornmentEnd: de } = i, ce = B(n), ue = x(n), $ = (p, D) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(
+      p.Field,
       {
-        label: k,
+        label: D,
         shouldVisuallyHideLabel: !0,
-        adornmentStart: ne,
-        adornmentEnd: ie
+        adornmentStart: me,
+        adornmentEnd: de
       }
-    ) }), oe = {
-      title: d,
+    ) }), pe = {
+      title: l,
       justify: "end",
-      render: (m) => W(m, L(m.name))
-    }, le = n.data.workweeks.map(
-      ({ startDate: m, endDate: k }) => {
-        const Y = h.formatPayPeriodRange(m, k, {
+      render: (p) => $(p, s(p.name))
+    }, he = r.data.workweeks.map(
+      ({ startDate: p, endDate: D }) => {
+        const K = g.formatPayPeriodRange(p, D, {
           useShortMonth: !0
         });
         return {
-          title: Y,
+          title: K,
           justify: "end",
-          render: (D) => {
-            const $ = r[m]?.find(
-              (K) => K.jobUuid === D.jobUuid && K.name === D.name
+          render: (I) => {
+            const q = n[p]?.find(
+              (z) => z.jobUuid === I.jobUuid && z.name === I.name
             );
-            return $ ? W($, `${L(D.name)} ${Y}`) : null;
+            return q ? $(q, `${s(I.name)} ${K}`) : null;
           }
         };
       }
-    ), se = [
-      { title: p, render: (m) => L(m.name) },
-      ...j ? le : [oe]
+    ), be = [
+      { title: a, render: (p) => s(p.name) },
+      ...ce ? he : [pe]
     ];
-    return /* @__PURE__ */ t(E, { header: /* @__PURE__ */ t(y, { title: f }), withPadding: !1, footer: H, children: /* @__PURE__ */ t(v, { label: g, isWithinBox: !0, columns: se, data: V }) });
-  }, B = (r, i) => {
-    if (r.length === 0) return null;
-    const { title: f, description: g } = i, p = [
+    return /* @__PURE__ */ t(R, { label: o, isWithinBox: !0, columns: be, data: ue });
+  }, ie = (n, i) => {
+    const { title: o, footer: a, ...l } = i;
+    return x(n).length === 0 && !a ? null : /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: o }), withPadding: !1, footer: a, children: U(n, l) });
+  }, H = (n, i) => {
+    if (n.length === 0) return null;
+    const { title: o, description: a } = i, l = [
       {
         title: e("typeColumn"),
-        render: (d) => d.name
+        render: (s) => s.name
       },
       {
         title: e("hoursColumn"),
         justify: "end",
-        render: (d) => /* @__PURE__ */ t("div", { className: P.inputContainer, children: /* @__PURE__ */ t(
-          d.Field,
+        render: (s) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(
+          s.Field,
           {
-            label: d.name,
+            label: s.name,
             shouldVisuallyHideLabel: !0,
             adornmentEnd: e("hoursUnit"),
-            description: d.remaining !== null ? e("timeOffBalance.remaining", { balance: d.remaining }) : void 0
+            description: s.remaining !== null ? e("timeOffBalance.remaining", { balance: s.remaining }) : void 0
           }
         ) })
       }
     ];
-    return /* @__PURE__ */ t(E, { header: /* @__PURE__ */ t(y, { title: f, description: g }), withPadding: !1, children: /* @__PURE__ */ t(v, { label: f, isWithinBox: !0, columns: p, data: r }) });
-  }, I = o.paymentMethod, F = o.reimbursementDraft, Z = n.data.reimbursements, ee = n.form.reimbursementDraft?.isAdding ?? !1, te = async () => {
-    const r = await n.actions.onSubmit();
-    r && T(G.RUN_PAYROLL_EMPLOYEE_SAVED, {
-      payrollPrepared: r.data,
-      employee: R
+    return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: o, description: a }), withPadding: !1, children: /* @__PURE__ */ t(R, { label: o, isWithinBox: !0, columns: l, data: n }) });
+  }, V = (n, i) => {
+    const o = [
+      { title: e("typeColumn"), render: (a) => a.label },
+      {
+        title: e("amountColumn"),
+        justify: "end",
+        render: (a) => /* @__PURE__ */ t("div", { className: E.inputContainer, children: /* @__PURE__ */ t(a.Field, { label: a.label, shouldVisuallyHideLabel: !0, adornmentStart: "$" }) })
+      }
+    ];
+    return /* @__PURE__ */ t(R, { label: i, isWithinBox: !0, columns: o, data: n });
+  }, j = (n) => /* @__PURE__ */ t("div", { className: E.earningsGroupLabel, children: /* @__PURE__ */ t(d, { size: "sm", weight: "semibold", children: n }) }), ae = () => {
+    const n = c.overtimeIncludedEarnings, i = c.overtimeExcludedEarnings.map((l) => ({
+      label: w(l.id),
+      Field: l.Field
+    })), o = x(n).length > 0;
+    if (!o && i.length === 0) return null;
+    const a = U(n, {
+      label: e("additionalEarningsTitle"),
+      rowHeader: e("typeColumn"),
+      valueColumnLabel: e("amountColumn"),
+      labelFor: w,
+      adornmentStart: "$"
+    });
+    if (!B(n)) {
+      const l = [
+        ...n.map((s) => ({ label: w(s.name), Field: s.Field })),
+        ...i
+      ];
+      return /* @__PURE__ */ t(y, { header: /* @__PURE__ */ t(C, { title: e("additionalEarningsTitle") }), withPadding: !1, children: V(l, e("additionalEarningsTitle")) });
+    }
+    return /* @__PURE__ */ m(y, { header: /* @__PURE__ */ t(C, { title: e("additionalEarningsTitle") }), withPadding: !1, children: [
+      o ? /* @__PURE__ */ m(J, { children: [
+        /* @__PURE__ */ t("div", { className: E.earningsAlert, children: /* @__PURE__ */ t(
+          M,
+          {
+            status: "info",
+            label: e("overtimeMultiplierEarningsAlert", { employeeName: k }),
+            disableScrollIntoView: !0
+          }
+        ) }),
+        j(e("overtimeIncludedEarningsGroupLabel")),
+        a
+      ] }) : null,
+      i.length > 0 ? /* @__PURE__ */ m(J, { children: [
+        j(e("overtimeExcludedEarningsGroupLabel")),
+        V(i, e("overtimeExcludedEarningsGroupLabel"))
+      ] }) : null
+    ] });
+  }, W = c.paymentMethod, G = c.reimbursementDraft, le = r.data.reimbursements, oe = r.form.reimbursementDraft?.isAdding ?? !1, se = async () => {
+    const n = await r.actions.onSubmit();
+    n && P(Q.RUN_PAYROLL_EMPLOYEE_SAVED, {
+      payrollPrepared: n.data,
+      employee: _
     });
-  }, re = () => {
-    T(G.RUN_PAYROLL_EMPLOYEE_CANCELLED);
-  };
-  return /* @__PURE__ */ t("div", { className: P.container, children: /* @__PURE__ */ t(q, { error: n.errorHandling.errors, LoaderComponent: A, children: /* @__PURE__ */ t(Me, { formHookResult: n, children: /* @__PURE__ */ s(l, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ s(l, { justifyContent: "space-between", alignItems: "flex-start", gap: 12, children: [
-      /* @__PURE__ */ t(l, { flexDirection: "column", gap: 8, children: /* @__PURE__ */ t(N, { as: "h1", styledAs: "h2", children: e("pageTitle", { employeeName: w }) }) }),
-      /* @__PURE__ */ s(l, { justifyContent: "flex-end", gap: 12, children: [
-        /* @__PURE__ */ t(C, { variant: "secondary", onClick: re, title: e("cancelCta"), children: e("cancelCta") }),
+  }, Y = /* @__PURE__ */ m(
+    u,
+    {
+      flexDirection: f ? "row" : "column",
+      justifyContent: f ? "flex-end" : "normal",
+      alignItems: f ? "flex-start" : "stretch",
+      gap: 12,
+      children: [
+        /* @__PURE__ */ t(v, { variant: "secondary", onClick: () => {
+          P(Q.RUN_PAYROLL_EMPLOYEE_CANCELLED);
+        }, title: e("cancelCta"), children: e("cancelCta") }),
         /* @__PURE__ */ t(
-          C,
+          v,
           {
             onClick: () => {
-              te();
+              se();
             },
             title: e("saveCta"),
-            isLoading: n.status.isPending,
+            isLoading: r.status.isPending,
             children: e("saveCta")
           }
         )
-      ] })
-    ] }),
+      ]
+    }
+  );
+  return /* @__PURE__ */ t("div", { ref: T, className: E.container, children: /* @__PURE__ */ t(X, { error: r.errorHandling.errors, LoaderComponent: S, children: /* @__PURE__ */ t(xe, { formHookResult: r, children: /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ m(
+      u,
+      {
+        flexDirection: f ? "row" : "column",
+        justifyContent: "space-between",
+        alignItems: f ? "flex-start" : "stretch",
+        gap: 12,
+        children: [
+          /* @__PURE__ */ t(u, { flexDirection: "column", alignItems: "stretch", gap: 8, children: /* @__PURE__ */ t(O, { as: "h1", styledAs: "h2", children: e("pageTitle", { employeeName: k }) }) }),
+          f && Y
+        ]
+      }
+    ),
+    !f && Y,
     (() => {
-      const r = o.jobs.length > 1, i = n.data.isOvertimeEligible ? e("regularHoursTitle") : e("regularHoursTitleWithoutOvertime"), f = !n.data.withOvertime && n.data.isOvertimeEligible, g = n.data.withOvertime && n.data.isOvertimeEligible;
-      return /* @__PURE__ */ s(l, { flexDirection: "column", gap: 16, children: [
-        r ? /* @__PURE__ */ t(N, { as: "h3", children: i }) : null,
-        g ? /* @__PURE__ */ t(
-          S,
+      const n = c.jobs.length > 1, i = r.data.isOvertimeEligible ? e("regularHoursTitle") : e("regularHoursTitleWithoutOvertime"), o = !r.data.withOvertime && r.data.isOvertimeEligible, a = r.data.withOvertime && r.data.isOvertimeEligible;
+      return /* @__PURE__ */ m(u, { flexDirection: "column", gap: 16, children: [
+        n ? /* @__PURE__ */ t(O, { as: "h3", children: i }) : null,
+        a ? /* @__PURE__ */ t(
+          M,
           {
             status: "info",
-            label: e("overtimeWorkweekAlert", { employeeName: w }),
+            label: e("overtimeWorkweekAlert", { employeeName: k }),
             disableScrollIntoView: !0
           }
         ) : null,
-        o.jobs.map((p) => /* @__PURE__ */ t(de, { children: U(p.hours, {
-          title: r ? p.title ?? i : i,
+        c.jobs.map((l) => /* @__PURE__ */ t(ge, { children: ie(l.hours, {
+          title: n ? l.title ?? i : i,
           label: i,
           rowHeader: e("hourTypeColumn"),
           valueColumnLabel: e("hoursColumn"),
-          labelFor: X,
+          labelFor: re,
           adornmentEnd: e("hoursUnit"),
-          footer: f ? /* @__PURE__ */ t(
-            C,
+          footer: o ? /* @__PURE__ */ t(
+            v,
             {
               variant: "secondary",
               onClick: () => {
-                n.actions.addOvertime();
+                r.actions.addOvertime();
               },
               title: e("addOvertimeCta"),
               children: e("addOvertimeCta")
             }
           ) : void 0
-        }) }, p.jobUuid))
+        }) }, l.jobUuid))
       ] });
     })(),
-    U(o.additionalEarnings, {
-      title: e("additionalEarningsTitle"),
-      label: e("additionalEarningsTitle"),
-      rowHeader: e("typeColumn"),
-      valueColumnLabel: e("amountColumn"),
-      labelFor: _,
-      adornmentStart: "$"
-    }),
-    B(o.timeOff, {
-      title: o.finalPayout ? e("timeOffTitleDismissal") : e("timeOffTitle")
+    ae(),
+    H(c.timeOff, {
+      title: c.finalPayout ? e("timeOffTitleDismissal") : e("timeOffTitle")
     }),
-    o.finalPayout ? B(o.finalPayout, {
+    c.finalPayout ? H(c.finalPayout, {
       title: e("finalPayoutTitle"),
       description: e("finalPayoutDescription")
     }) : null,
-    o.otherEarnings.length > 0 ? (() => {
-      const r = [
-        { title: e("typeColumn"), render: (i) => _(i.id) },
-        {
-          title: e("amountColumn"),
-          justify: "end",
-          render: (i) => /* @__PURE__ */ t("div", { className: P.inputContainer, children: /* @__PURE__ */ t(
-            i.Field,
-            {
-              label: _(i.id),
-              shouldVisuallyHideLabel: !0,
-              adornmentStart: "$"
-            }
-          ) })
-        }
-      ];
-      return /* @__PURE__ */ t(E, { header: /* @__PURE__ */ t(y, { title: e("otherTitle") }), withPadding: !1, children: /* @__PURE__ */ t(
-        v,
-        {
-          label: e("otherTitle"),
-          isWithinBox: !0,
-          columns: r,
-          data: o.otherEarnings
-        }
-      ) });
-    })() : null,
-    I ? /* @__PURE__ */ s(l, { flexDirection: "column", gap: 24, children: [
-      F ? /* @__PURE__ */ t(
-        xe,
+    W ? /* @__PURE__ */ m(u, { flexDirection: "column", gap: 24, children: [
+      G ? /* @__PURE__ */ t(
+        je,
         {
-          rows: Z ?? [],
-          isAdding: ee,
-          draftFields: F,
-          onBeginAdd: () => n.actions.beginAddReimbursement?.(),
-          onSave: () => n.actions.saveReimbursement?.(),
-          onCancel: () => n.actions.cancelReimbursement?.(),
-          onRemove: (r) => n.actions.removeReimbursement?.(r)
+          rows: le ?? [],
+          isAdding: oe,
+          draftFields: G,
+          onBeginAdd: () => r.actions.beginAddReimbursement?.(),
+          onSave: () => r.actions.saveReimbursement?.(),
+          onCancel: () => r.actions.cancelReimbursement?.(),
+          onRemove: (n) => r.actions.removeReimbursement?.(n)
         }
       ) : null,
-      /* @__PURE__ */ s(l, { flexDirection: "column", gap: 12, children: [
-        /* @__PURE__ */ t(N, { as: "h3", styledAs: "h4", children: e("paymentMethodTitle") }),
+      /* @__PURE__ */ m(u, { flexDirection: "column", gap: 12, children: [
+        /* @__PURE__ */ t(O, { as: "h3", styledAs: "h4", children: e("paymentMethodTitle") }),
         /* @__PURE__ */ t(
-          I,
+          W,
           {
             label: e("paymentMethodLabel"),
             description: e("paymentMethodDescription"),
-            getOptionLabel: (r) => r === ue.Check ? e("paymentMethodOptions.check") : e("paymentMethodOptions.directDeposit")
+            getOptionLabel: (n) => n === ye.Check ? e("paymentMethodOptions.check") : e("paymentMethodOptions.directDeposit")
           }
         )
       ] })
@@ -364,6 +391,6 @@ const xe = ({
   ] }) }) }) });
 };
 export {
-  at as UNSTABLE_PayrollEditEmployee
+  ft as UNSTABLE_PayrollEditEmployee
 };
 //# sourceMappingURL=UNSTABLE_PayrollEditEmployee.js.map