@gusto/embedded-react-sdk 0.46.3 → 0.47.0

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js

@@ -1,331 +1,384 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import { useForm as Q, useWatch as Z, FormProvider as J } from "react-hook-form";
-import { useRef as ee, useMemo as ne } from "react";
-import { PayrollEmployeeCompensationsTypePaymentMethod as I } from "@gusto/embedded-api/models/components/payrollemployeecompensationstype";
-import { useTranslation as te } from "react-i18next";
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { useForm as Pe, useFieldArray as Re, useWatch as Te, FormProvider as ye } from "react-hook-form";
+import { useRef as Oe, useMemo as k, useState as w } from "react";
+import { PayrollEmployeeCompensationsTypePaymentMethod as L } from "@gusto/embedded-api-v-2025-11-15/models/components/payrollemployeecompensationstype";
+import { useTranslation as Me } from "react-i18next";
 import { z as a } from "zod";
-import { zodResolver as ie } from "@hookform/resolvers/zod";
-import d from "./PayrollEditEmployeePresentation.module.scss.js";
-import { TimeOffField as se, PayoutTimeOffField as oe } from "./TimeOffField.js";
-import { Flex as T } from "../../Common/Flex/Flex.js";
-import { Grid as _ } from "../../Common/Grid/Grid.js";
-import { useComponentContext as ae } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as re } from "../../../i18n/I18n.js";
-import { Form as le } from "../../Common/Form/Form.js";
-import { firstLastName as me, formatNumberAsCurrency as ue } from "../../../helpers/formattedStrings.js";
-import { getAdditionalEarningsCompensations as de, getReimbursementCompensation as ce, calculateGrossPay as $ } from "../helpers.js";
-import { PayrollCategory as A } from "../payrollTypes.js";
-import { HOURS_COMPENSATION_NAMES as B, EXCLUDED_ADDITIONAL_EARNINGS as pe, COMPENSATION_NAME_DOUBLE_OVERTIME as fe, COMPENSATION_NAME_OVERTIME as he, COMPENSATION_NAME_REGULAR_HOURS as Ce, COMPENSATION_NAME_REIMBURSEMENT as Ne, COMPENSATION_NAME_CASH_TIPS as ge, COMPENSATION_NAME_COMMISSION as Ee, COMPENSATION_NAME_CORRECTION_PAYMENT as be, COMPENSATION_NAME_PAYCHECK_TIPS as Pe, COMPENSATION_NAME_BONUS as Oe } from "../../../shared/constants.js";
-import Me from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { TextInputField as D } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { RadioGroupField as Te } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-const ye = a.object({
+import { zodResolver as Se } from "@hookform/resolvers/zod";
+import l from "./PayrollEditEmployeePresentation.module.scss.js";
+import { TimeOffField as xe, PayoutTimeOffField as Ae } from "./TimeOffField.js";
+import { Flex as d } from "../../Common/Flex/Flex.js";
+import { Grid as x } from "../../Common/Grid/Grid.js";
+import { useComponentContext as Ie } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as ve } from "../../../i18n/I18n.js";
+import { Form as De } from "../../Common/Form/Form.js";
+import { firstLastName as _e, formatNumberAsCurrency as ie } from "../../../helpers/formattedStrings.js";
+import { getAdditionalEarningsCompensations as Fe, calculateGrossPay as te } from "../helpers.js";
+import { PayrollCategory as v, isOffCyclePayroll as ae } from "../payrollTypes.js";
+import { COMPENSATION_NAME_REIMBURSEMENT as A, HOURS_COMPENSATION_NAMES as re, EXCLUDED_ADDITIONAL_EARNINGS as Le, COMPENSATION_NAME_DOUBLE_OVERTIME as Ue, COMPENSATION_NAME_OVERTIME as je, COMPENSATION_NAME_REGULAR_HOURS as ke, COMPENSATION_NAME_CASH_TIPS as we, COMPENSATION_NAME_COMMISSION as Ge, COMPENSATION_NAME_CORRECTION_PAYMENT as He, COMPENSATION_NAME_PAYCHECK_TIPS as $e, COMPENSATION_NAME_BONUS as Be } from "../../../shared/constants.js";
+import qe from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import ze from "../../../assets/icons/plus-circle.svg.js";
+import We from "../../../assets/icons/trashcan.svg.js";
+import Ve from "../../../assets/icons/info.svg.js";
+import { TextInputField as G } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { RadioGroupField as Ye } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+const Ke = a.object({
+  uuid: a.string().nullable().optional(),
+  description: a.string(),
+  amount: a.string(),
+  recurring: a.boolean().optional()
+}), Xe = a.object({
   hourlyCompensations: a.record(a.string(), a.record(a.string(), a.string().optional())),
   timeOffCompensations: a.record(a.string(), a.string().optional()),
   finalPayoutCompensations: a.record(a.string(), a.string().optional()),
   fixedCompensations: a.record(a.string(), a.string().optional()),
-  paymentMethod: a.enum(I).optional()
-}), q = (h, y, u, r, R = A.Regular) => {
-  const N = {
-    ...y,
-    paymentMethod: h.paymentMethod
+  reimbursements: a.array(Ke),
+  paymentMethod: a.enum(L).optional()
+}), se = (C, I, c, o, D = v.Regular) => {
+  const E = {
+    ...I,
+    paymentMethod: C.paymentMethod
   };
-  N.hourlyCompensations = y?.hourlyCompensations?.map(
-    (s) => {
-      const o = s.jobUuid && s.name ? h.hourlyCompensations[s.jobUuid]?.[s.name] : void 0;
-      return o ? {
-        ...s,
-        hours: o
-      } : s;
+  E.hourlyCompensations = I?.hourlyCompensations?.map(
+    (r) => {
+      const m = r.jobUuid && r.name ? C.hourlyCompensations[r.jobUuid]?.[r.name] : void 0;
+      return m ? {
+        ...r,
+        hours: m
+      } : r;
     }
-  ), N.paidTimeOff = u.map((s) => {
-    const o = R === A.Dismissal, { finalPayoutUnusedHoursInput: P, ...x } = s;
-    if (o) {
-      const S = h.finalPayoutCompensations[s.name] ?? s.finalPayoutUnusedHoursInput;
+  ), E.paidTimeOff = c.map((r) => {
+    const m = D === v.Dismissal, { finalPayoutUnusedHoursInput: U, ...p } = r;
+    if (m) {
+      const O = C.finalPayoutCompensations[r.name] ?? r.finalPayoutUnusedHoursInput;
       return {
-        ...s,
-        hours: h.timeOffCompensations[s.name] || "0",
-        ...S != null ? { finalPayoutUnusedHoursInput: S || "0" } : {}
+        ...r,
+        hours: C.timeOffCompensations[r.name] || "0",
+        ...O != null ? { finalPayoutUnusedHoursInput: O || "0" } : {}
       };
     }
     return {
-      ...x,
-      hours: h.timeOffCompensations[s.name] || "0"
+      ...p,
+      hours: C.timeOffCompensations[r.name] || "0"
     };
   });
-  const g = [];
-  return Object.entries(h.fixedCompensations).forEach(([s, o]) => {
-    const P = y?.fixedCompensations?.find(
-      (x) => x.name?.toLowerCase() === s.toLowerCase()
+  const y = !ae(D), R = [];
+  return Object.entries(C.fixedCompensations).forEach(([r, m]) => {
+    if (r.toLowerCase() === A.toLowerCase() && y)
+      return;
+    const p = I?.fixedCompensations?.find(
+      (O) => O.name?.toLowerCase() === r.toLowerCase()
     );
-    o !== void 0 && o !== "" && (P ? g.push({
-      name: P.name,
-      jobUuid: P.jobUuid,
-      amount: o
-    }) : parseFloat(o) !== 0 && g.push({
-      name: s,
-      jobUuid: r,
-      amount: o
+    m !== void 0 && m !== "" && (p ? R.push({
+      name: p.name,
+      jobUuid: p.jobUuid,
+      amount: m
+    }) : parseFloat(m) !== 0 && R.push({
+      name: r,
+      jobUuid: o,
+      amount: m
     }));
-  }), N.fixedCompensations = g, N;
-}, Ye = ({
-  onSave: h,
-  onCancel: y,
-  employee: u,
-  employeeCompensation: r,
-  isPending: R = !1,
-  fixedCompensationTypes: N,
-  payPeriodStartDate: g,
-  paySchedule: s,
-  payrollCategory: o = A.Regular,
-  withReimbursements: P = !0,
-  hasDirectDepositSetup: x = !0
+  }), E.fixedCompensations = R, y ? E.reimbursements = C.reimbursements.map((r) => ({
+    amount: r.amount,
+    description: r.description.trim() === "" ? null : r.description.trim(),
+    uuid: r.uuid ?? null,
+    recurring: r.recurring
+  })) : E.reimbursements = [], E;
+}, Tn = ({
+  onSave: C,
+  onCancel: I,
+  employee: c,
+  employeeCompensation: o,
+  isPending: D = !1,
+  fixedCompensationTypes: E,
+  payPeriodStartDate: y,
+  paySchedule: R,
+  payrollCategory: r = v.Regular,
+  withReimbursements: m = !0,
+  hasDirectDepositSetup: U = !0
 }) => {
-  const { Button: S, Heading: c, Text: F } = ae(), { t: n } = te("Payroll.PayrollEditEmployee");
-  re("Payroll.PayrollEditEmployee");
-  const p = u.jobs?.find((e) => e.primary), V = r?.hourlyCompensations?.some(
-    (e) => e.jobUuid === p?.uuid
-  ), O = p && V ? [p] : [], j = ee(null), f = Me({
-    ref: j
+  const { Button: p, ButtonIcon: O, Heading: f, Text: M, TextInput: H } = Ie(), { t: n } = Me("Payroll.PayrollEditEmployee");
+  ve("Payroll.PayrollEditEmployee");
+  const g = c.jobs?.find((e) => e.primary), oe = o?.hourlyCompensations?.some(
+    (e) => e.jobUuid === g?.uuid
+  ), S = g && oe ? [g] : [], $ = Oe(null), N = qe({
+    ref: $
   }).includes("small");
-  r?.hourlyCompensations?.forEach((e) => {
-    const t = u.jobs?.find((m) => m.uuid === e.jobUuid);
-    t && !O.find((m) => m.uuid === t.uuid) && O.push(t);
+  o?.hourlyCompensations?.forEach((e) => {
+    const t = c.jobs?.find((u) => u.uuid === e.jobUuid);
+    t && !S.find((u) => u.uuid === t.uuid) && S.push(t);
   });
-  const E = (r?.paidTimeOff || []).filter((e) => e.name), v = de({
-    flsaStatus: p?.compensations?.[0]?.flsaStatus,
-    existingFixedCompensations: r?.fixedCompensations || [],
-    primaryJobUuid: p?.uuid,
-    fixedCompensationTypes: N,
-    excludedTypes: pe
-  }), M = P ? ce(
-    r?.fixedCompensations || [],
-    N,
-    p?.uuid
-  ) : null, L = (e, t) => r?.hourlyCompensations?.find(
-    (m) => m.jobUuid === e && m.name?.toLowerCase() === t.toLowerCase()
-  ), W = (e) => {
+  const T = (o?.paidTimeOff || []).filter((e) => e.name), j = Fe({
+    flsaStatus: g?.compensations?.[0]?.flsaStatus,
+    existingFixedCompensations: o?.fixedCompensations || [],
+    primaryJobUuid: g?.uuid,
+    fixedCompensationTypes: E,
+    excludedTypes: Le
+  }), _ = !ae(r), me = k(
+    () => m && _ ? o?.reimbursements ?? [] : [],
+    [m, _, o?.reimbursements]
+  ), ue = k(
+    () => o?.fixedCompensations?.find(
+      (e) => e.name?.toLowerCase() === A.toLowerCase()
+    ),
+    [o?.fixedCompensations]
+  ), B = m && !_ && !!g?.uuid, q = (e, t) => o?.hourlyCompensations?.find(
+    (u) => u.jobUuid === e && u.name?.toLowerCase() === t.toLowerCase()
+  ), le = (e) => {
     switch (e) {
-      case Ce:
+      case ke:
         return n("compensationNames.regularHours");
-      case he:
+      case je:
         return n("compensationNames.overtime");
-      case fe:
+      case Ue:
         return n("compensationNames.doubleOvertime");
       default:
         return e;
     }
-  }, H = (e) => {
+  }, z = (e) => {
     switch (e) {
-      case Oe:
+      case Be:
         return n("fixedCompensationNames.bonus");
-      case Pe:
+      case $e:
         return n("fixedCompensationNames.paycheckTips");
-      case be:
+      case He:
         return n("fixedCompensationNames.correctionPayment");
-      case Ee:
+      case Ge:
         return n("fixedCompensationNames.commission");
-      case ge:
+      case we:
         return n("fixedCompensationNames.cashTips");
-      case Ne:
+      case A:
         return n("fixedCompensationNames.reimbursement");
       default:
         return e;
     }
-  }, z = {
+  }, de = {
     hourlyCompensations: (() => {
       const e = {};
-      return O.forEach((t) => {
-        B.forEach((m) => {
-          const C = L(t.uuid, m);
-          C && (e[t.uuid] || (e[t.uuid] = {}), e[t.uuid][C.name] = C.hours ? parseFloat(C.hours).toString() : "");
+      return S.forEach((t) => {
+        re.forEach((u) => {
+          const h = q(t.uuid, u);
+          h && (e[t.uuid] || (e[t.uuid] = {}), e[t.uuid][h.name] = h.hours ? parseFloat(h.hours).toString() : "");
         });
       }), e;
     })(),
     timeOffCompensations: (() => {
       const e = {};
-      return E.forEach((t) => {
+      return T.forEach((t) => {
         e[t.name] = t.hours ? parseFloat(t.hours).toString() : "";
       }), e;
     })(),
     finalPayoutCompensations: (() => {
       const e = {};
-      return E.forEach((t) => {
+      return T.forEach((t) => {
         e[t.name] = t.finalPayoutUnusedHoursInput ?? "0";
       }), e;
     })(),
     fixedCompensations: (() => {
       const e = {};
-      return v.forEach((t) => {
+      return j.forEach((t) => {
         e[t.name] = t.amount ?? "";
-      }), M && (e[M.name] = M.amount ?? ""), e;
+      }), B && (e[A] = ue?.amount ?? "0.00"), e;
     })(),
-    paymentMethod: r?.paymentMethod || I.DirectDeposit
-  }, U = Q({
-    resolver: ie(ye),
-    defaultValues: z
-  }), b = Z({
-    control: U.control
-  }), Y = ne(() => {
+    reimbursements: me.map((e) => ({
+      uuid: e.uuid ?? null,
+      description: e.description ?? "",
+      amount: e.amount,
+      recurring: e.recurring ?? !1
+    })),
+    paymentMethod: o?.paymentMethod || L.DirectDeposit
+  }, F = Pe({
+    resolver: Se(Xe),
+    defaultValues: de
+  }), {
+    fields: W,
+    append: ce,
+    remove: pe,
+    update: fe
+  } = Re({
+    control: F.control,
+    name: "reimbursements"
+  }), he = (e) => {
+    const t = W[e];
+    t && (t.uuid ? fe(e, { ...t, amount: "0" }) : pe(e));
+  }, [be, V] = w(!1), [Y, K] = w(""), [X, Q] = w(""), Z = () => {
+    V(!1), K(""), Q("");
+  }, Ce = () => {
+    const e = X.trim(), t = parseFloat(e || "0");
+    Number.isNaN(t) || t <= 0 || (ce({
+      uuid: null,
+      description: Y.trim(),
+      amount: t.toFixed(2),
+      recurring: !1
+    }), Z());
+  }, P = Te({
+    control: F.control
+  }), ge = k(() => {
     try {
       const e = {};
-      b.hourlyCompensations && Object.entries(b.hourlyCompensations).forEach(([C, w]) => {
-        w && (e[C] = w);
+      P.hourlyCompensations && Object.entries(P.hourlyCompensations).forEach(([b, ne]) => {
+        ne && (e[b] = ne);
       });
-      const t = {
+      const t = (P.reimbursements ?? []).map((b) => ({
+        uuid: b.uuid ?? null,
+        description: b.description ?? "",
+        amount: b.amount ?? "0",
+        recurring: b.recurring
+      })), u = {
         hourlyCompensations: e,
-        timeOffCompensations: b.timeOffCompensations || {},
-        finalPayoutCompensations: b.finalPayoutCompensations || {},
-        fixedCompensations: b.fixedCompensations || {},
-        paymentMethod: b.paymentMethod
-      }, m = q(
-        t,
-        r,
-        (r?.paidTimeOff || []).filter((C) => C.name),
-        p?.uuid,
-        o
-      );
-      return $(
-        m,
+        timeOffCompensations: P.timeOffCompensations || {},
+        finalPayoutCompensations: P.finalPayoutCompensations || {},
+        fixedCompensations: P.fixedCompensations || {},
+        reimbursements: t,
+        paymentMethod: P.paymentMethod
+      }, h = se(
         u,
-        g,
-        s,
-        o
+        o,
+        (o?.paidTimeOff || []).filter((b) => b.name),
+        g?.uuid,
+        r
+      );
+      return te(
+        h,
+        c,
+        y,
+        R,
+        r
       );
     } catch {
-      return r ? $(
-        r,
-        u,
-        g,
-        s,
-        o
+      return o ? te(
+        o,
+        c,
+        y,
+        R,
+        r
       ) : 0;
     }
   }, [
-    b,
-    r,
-    p?.uuid,
-    u,
-    g,
-    s,
-    o
-  ]), K = me({
-    first_name: u.firstName,
-    last_name: u.lastName
-  }), X = (e) => {
-    const t = q(
+    P,
+    o,
+    g?.uuid,
+    c,
+    y,
+    R,
+    r
+  ]), Ne = _e({
+    first_name: c.firstName,
+    last_name: c.lastName
+  }), Ee = (e) => {
+    const t = se(
       e,
-      r,
-      E,
-      p?.uuid,
-      o
+      o,
+      T,
+      g?.uuid,
+      r
     );
-    h(t);
-  }, G = ue(Y || 0), k = /* @__PURE__ */ l(
-    T,
+    C(t);
+  }, J = ie(ge || 0), ee = /* @__PURE__ */ s(
+    d,
     {
-      flexDirection: f ? "row" : "column",
-      justifyContent: f ? "flex-end" : "normal",
-      alignItems: f ? "flex-start" : "stretch",
+      flexDirection: N ? "row" : "column",
+      justifyContent: N ? "flex-end" : "normal",
+      alignItems: N ? "flex-start" : "stretch",
       gap: 12,
       children: [
-        /* @__PURE__ */ i(S, { variant: "secondary", onClick: y, title: n("cancelCta"), children: n("cancelCta") }),
+        /* @__PURE__ */ i(p, { variant: "secondary", onClick: I, title: n("cancelCta"), children: n("cancelCta") }),
         /* @__PURE__ */ i(
-          S,
+          p,
           {
-            onClick: U.handleSubmit(X),
+            onClick: F.handleSubmit(Ee),
             title: n("saveCta"),
-            isLoading: R,
+            isLoading: D,
             children: n("saveCta")
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ l("div", { ref: j, className: d.container, children: [
+  return /* @__PURE__ */ s("div", { ref: $, className: l.container, children: [
     /* @__PURE__ */ i(
       "div",
       {
-        className: `${d.headerSection} ${f ? "" : d.headerSectionSticky}`,
-        children: /* @__PURE__ */ l(T, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ l(T, { flexDirection: "column", gap: f ? 8 : 2, children: [
-            /* @__PURE__ */ i(c, { as: "h1", styledAs: f ? "h2" : "h4", children: n("pageTitle", { employeeName: K }) }),
-            f ? /* @__PURE__ */ l(T, { flexDirection: "column", gap: 6, children: [
-              /* @__PURE__ */ i(c, { as: "h2", styledAs: "h3", children: G }),
-              /* @__PURE__ */ i(F, { className: d.grossPayLabel, children: n("grossPayLabel") })
-            ] }) : /* @__PURE__ */ i(c, { as: "h2", styledAs: "h6", className: d.grossPayLabel, children: n("grossPayLabelMobile", { grossPay: G }) })
+        className: `${l.headerSection} ${N ? "" : l.headerSectionSticky}`,
+        children: /* @__PURE__ */ s(d, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ s(d, { flexDirection: "column", gap: N ? 8 : 2, children: [
+            /* @__PURE__ */ i(f, { as: "h1", styledAs: N ? "h2" : "h4", children: n("pageTitle", { employeeName: Ne }) }),
+            N ? /* @__PURE__ */ s(d, { flexDirection: "column", gap: 6, children: [
+              /* @__PURE__ */ i(f, { as: "h2", styledAs: "h3", children: J }),
+              /* @__PURE__ */ i(M, { className: l.grossPayLabel, children: n("grossPayLabel") })
+            ] }) : /* @__PURE__ */ i(f, { as: "h2", styledAs: "h6", className: l.grossPayLabel, children: n("grossPayLabelMobile", { grossPay: J }) })
           ] }),
-          f && k
+          N && ee
         ] })
       }
     ),
-    /* @__PURE__ */ l(J, { ...U, children: [
-      /* @__PURE__ */ l(le, { children: [
-        O.length > 0 && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ i(c, { as: "h3", children: n("regularHoursTitle") }),
-          O.map((e) => /* @__PURE__ */ l(T, { flexDirection: "column", gap: 8, children: [
-            O.length > 1 && /* @__PURE__ */ i(c, { as: "h4", children: e.title }),
-            /* @__PURE__ */ i(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: B.map((t) => {
-              const m = L(
+    /* @__PURE__ */ s(ye, { ...F, children: [
+      /* @__PURE__ */ s(De, { children: [
+        S.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h3", children: n("regularHoursTitle") }),
+          S.map((e) => /* @__PURE__ */ s(d, { flexDirection: "column", gap: 8, children: [
+            S.length > 1 && /* @__PURE__ */ i(f, { as: "h4", children: e.title }),
+            /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: re.map((t) => {
+              const u = q(
                 e.uuid,
                 t
               );
-              if (m)
+              if (u)
                 return /* @__PURE__ */ i(
-                  D,
+                  G,
                   {
                     type: "number",
                     min: 0,
                     adornmentEnd: n("hoursUnit"),
                     isRequired: !0,
-                    label: W(t),
-                    name: `hourlyCompensations.${e.uuid}.${m.name}`
+                    label: le(t),
+                    name: `hourlyCompensations.${e.uuid}.${u.name}`
                   },
                   t
                 );
             }) })
           ] }, e.uuid))
         ] }),
-        E.length > 0 && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ i(c, { as: "h4", children: o === A.Dismissal ? n("timeOffTitleDismissal") : n("timeOffTitle") }),
-          /* @__PURE__ */ i(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: E.map((e) => /* @__PURE__ */ i(
-            se,
+        T.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h4", children: r === v.Dismissal ? n("timeOffTitleDismissal") : n("timeOffTitle") }),
+          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ i(
+            xe,
             {
               timeOff: e,
-              employee: u
+              employee: c
             },
             e.name
           )) })
         ] }),
-        o === A.Dismissal && E.length > 0 && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ l(T, { flexDirection: "column", gap: 4, children: [
-            /* @__PURE__ */ i(c, { as: "h4", children: n("finalPayoutTitle") }),
-            /* @__PURE__ */ i(F, { variant: "supporting", children: n("finalPayoutDescription") })
+        r === v.Dismissal && T.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ s(d, { flexDirection: "column", gap: 4, children: [
+            /* @__PURE__ */ i(f, { as: "h4", children: n("finalPayoutTitle") }),
+            /* @__PURE__ */ i(M, { variant: "supporting", children: n("finalPayoutDescription") })
           ] }),
-          /* @__PURE__ */ i(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: E.map((e) => /* @__PURE__ */ i(
-            oe,
+          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: T.map((e) => /* @__PURE__ */ i(
+            Ae,
             {
               timeOff: e,
-              employee: u
+              employee: c
             },
             `payout-${e.name}`
           )) })
         ] }),
-        v.length > 0 && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ i(c, { as: "h4", children: n("additionalEarningsTitle") }),
+        j.length > 0 && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h4", children: n("additionalEarningsTitle") }),
           /* @__PURE__ */ i(
-            _,
+            x,
             {
               gridTemplateColumns: { base: "1fr", small: [320, 320], large: [320, 320, 320] },
               gap: 20,
-              children: v.map((e) => /* @__PURE__ */ i(
-                D,
+              children: j.map((e) => /* @__PURE__ */ i(
+                G,
                 {
                   type: "number",
                   min: 0,
                   adornmentStart: "$",
                   isRequired: !0,
-                  label: H(e.name),
+                  label: z(e.name),
                   name: `fixedCompensations.${e.name}`
                 },
                 e.name
@@ -333,24 +386,111 @@ const ye = a.object({
             }
           )
         ] }),
-        M && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ i(c, { as: "h4", children: n("reimbursementTitle") }),
-          /* @__PURE__ */ i(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ i(
-            D,
+        B && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h4", children: n("reimbursementTitle") }),
+          /* @__PURE__ */ i(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ i(
+            G,
             {
               type: "number",
               min: 0,
               adornmentStart: "$",
               isRequired: !0,
-              label: H(M.name),
-              name: `fixedCompensations.${M.name}`
+              label: z(A),
+              name: `fixedCompensations.${A}`
+            }
+          ) })
+        ] }),
+        m && _ && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h4", children: n("reimbursementTitle") }),
+          W.map((e, t) => {
+            if (parseFloat(e.amount || "0") === 0)
+              return null;
+            const h = e.description.trim() || n("reimbursementUnnamedFallback"), b = ie(parseFloat(e.amount || "0"));
+            return e.recurring ? /* @__PURE__ */ s(
+              d,
+              {
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12,
+                "aria-label": n("recurringReimbursementLabel", {
+                  description: h
+                }),
+                children: [
+                  /* @__PURE__ */ i(M, { children: h }),
+                  /* @__PURE__ */ s(d, { alignItems: "center", gap: 8, children: [
+                    /* @__PURE__ */ i(M, { children: b }),
+                    /* @__PURE__ */ i(Ve, { "aria-label": n("recurringReimbursementTooltip"), role: "img" })
+                  ] })
+                ]
+              },
+              e.id
+            ) : /* @__PURE__ */ s(d, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+              /* @__PURE__ */ i(M, { children: h }),
+              /* @__PURE__ */ s(d, { alignItems: "center", gap: 12, children: [
+                /* @__PURE__ */ i(M, { children: b }),
+                /* @__PURE__ */ i(
+                  O,
+                  {
+                    variant: "tertiary",
+                    onClick: () => {
+                      he(t);
+                    },
+                    "aria-label": n("removeReimbursementLabel", {
+                      description: h
+                    }),
+                    children: /* @__PURE__ */ i(We, { "aria-hidden": !0 })
+                  }
+                )
+              ] })
+            ] }, e.id);
+          }),
+          be ? /* @__PURE__ */ s(d, { flexDirection: "column", gap: 12, children: [
+            /* @__PURE__ */ s(x, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: [
+              /* @__PURE__ */ i(
+                H,
+                {
+                  name: "newReimbursementDescription",
+                  label: n("reimbursementDescriptionLabel"),
+                  placeholder: n("reimbursementDescriptionPlaceholder"),
+                  value: Y,
+                  onChange: K
+                }
+              ),
+              /* @__PURE__ */ i(
+                H,
+                {
+                  name: "newReimbursementAmount",
+                  type: "number",
+                  min: 0,
+                  adornmentStart: "$",
+                  isRequired: !0,
+                  label: n("reimbursementAmountLabel"),
+                  value: X,
+                  onChange: Q
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(d, { gap: 12, children: [
+              /* @__PURE__ */ i(p, { onClick: Ce, children: n("saveReimbursementCta") }),
+              /* @__PURE__ */ i(p, { variant: "secondary", onClick: Z, children: n("cancelReimbursementCta") })
+            ] })
+          ] }) : /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(
+            p,
+            {
+              variant: "tertiary",
+              onClick: () => {
+                V(!0);
+              },
+              title: n("addReimbursementLink"),
+              icon: /* @__PURE__ */ i(ze, { "aria-hidden": !0 }),
+              children: n("addReimbursementLink")
             }
           ) })
         ] }),
-        x && /* @__PURE__ */ l("div", { className: d.fieldGroup, children: [
-          /* @__PURE__ */ i(c, { as: "h4", children: n("paymentMethodTitle") }),
+        U && /* @__PURE__ */ s("div", { className: l.fieldGroup, children: [
+          /* @__PURE__ */ i(f, { as: "h4", children: n("paymentMethodTitle") }),
           /* @__PURE__ */ i(
-            Te,
+            Ye,
             {
               name: "paymentMethod",
               isRequired: !0,
@@ -358,11 +498,11 @@ const ye = a.object({
               description: n("paymentMethodDescription"),
               options: [
                 {
-                  value: I.DirectDeposit,
+                  value: L.DirectDeposit,
                   label: n("paymentMethodOptions.directDeposit")
                 },
                 {
-                  value: I.Check,
+                  value: L.Check,
                   label: n("paymentMethodOptions.check")
                 }
               ]
@@ -370,12 +510,12 @@ const ye = a.object({
           )
         ] })
       ] }),
-      !f && k
+      !N && ee
     ] })
   ] });
 };
 export {
-  ye as PayrollEditEmployeeFormSchema,
-  Ye as PayrollEditEmployeePresentation
+  Xe as PayrollEditEmployeeFormSchema,
+  Tn as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map