@gusto/embedded-react-sdk 0.36.0 → 0.37.0-rc.2

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

@@ -1,296 +1,332 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { useForm as K, useWatch as X, FormProvider as Q } from "react-hook-form";
-import { useRef as Z, useMemo as J } from "react";
-import { PayrollEmployeeCompensationsTypePaymentMethod as S } from "@gusto/embedded-api/models/components/payrollemployeecompensationstype";
-import { useTranslation as ee } from "react-i18next";
-import { z as m } from "zod";
-import { zodResolver as te } from "@hookform/resolvers/zod";
+import { jsxs as m, jsx as s } 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 R } from "@gusto/embedded-api/models/components/payrollemployeecompensationstype";
+import { useTranslation as te } from "react-i18next";
+import { z as a } from "zod";
+import { zodResolver as se } from "@hookform/resolvers/zod";
 import u from "./PayrollEditEmployeePresentation.module.scss.js";
-import { TimeOffField as ne } from "./TimeOffField.js";
-import { Flex as x } from "../../Common/Flex/Flex.js";
-import { Grid as P } from "../../Common/Grid/Grid.js";
-import { RadioGroupField as re } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
-import { TextInputField as oe } from "../../Common/Fields/TextInputField/TextInputField.js";
-import { NumberInputField as G } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-import { useComponentContext as ie } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as se } from "../../../i18n/I18n.js";
-import { Form as ae } from "../../Common/Form/Form.js";
+import { TimeOffField as ie } from "./TimeOffField.js";
+import { Flex as S } from "../../Common/Flex/Flex.js";
+import { Grid as _ } from "../../Common/Grid/Grid.js";
+import { useComponentContext as oe } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as ae } from "../../../i18n/I18n.js";
+import { Form as re } from "../../Common/Form/Form.js";
 import { firstLastName as me, formatNumberAsCurrency as le } from "../../../helpers/formattedStrings.js";
-import { getAdditionalEarningsCompensations as de, getReimbursementCompensation as ue, calculateGrossPay as k } from "../helpers.js";
-import { HOURS_COMPENSATION_NAMES as w, EXCLUDED_ADDITIONAL_EARNINGS as ce, COMPENSATION_NAME_DOUBLE_OVERTIME as pe, COMPENSATION_NAME_OVERTIME as fe, COMPENSATION_NAME_REGULAR_HOURS as he, COMPENSATION_NAME_REIMBURSEMENT as Ce, COMPENSATION_NAME_CASH_TIPS as Ne, COMPENSATION_NAME_COMMISSION as Ee, COMPENSATION_NAME_CORRECTION_PAYMENT as ge, COMPENSATION_NAME_PAYCHECK_TIPS as be, COMPENSATION_NAME_BONUS as Me } from "../../../shared/constants.js";
-import Oe from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const Te = m.object({
-  hourlyCompensations: m.record(m.string(), m.record(m.string(), m.string().optional())),
-  timeOffCompensations: m.record(m.string(), m.string().optional()),
-  fixedCompensations: m.record(m.string(), m.number().optional()),
-  paymentMethod: m.enum(S).optional()
-}), H = (E, y, l, i) => {
-  const g = {
-    ...y,
-    paymentMethod: E.paymentMethod
+import { getAdditionalEarningsCompensations as ue, getReimbursementCompensation as de, calculateGrossPay as w } from "../helpers.js";
+import { PayrollCategory as A } from "../payrollTypes.js";
+import { HOURS_COMPENSATION_NAMES as B, EXCLUDED_ADDITIONAL_EARNINGS as ce, COMPENSATION_NAME_DOUBLE_OVERTIME as pe, COMPENSATION_NAME_OVERTIME as fe, COMPENSATION_NAME_REGULAR_HOURS as he, COMPENSATION_NAME_REIMBURSEMENT as Ce, COMPENSATION_NAME_CASH_TIPS as Ne, COMPENSATION_NAME_COMMISSION as ge, COMPENSATION_NAME_CORRECTION_PAYMENT as be, COMPENSATION_NAME_PAYCHECK_TIPS as Ee, COMPENSATION_NAME_BONUS as Pe } from "../../../shared/constants.js";
+import Me from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { TextInputField as I } from "../../Common/Fields/TextInputField/TextInputField.js";
+import { RadioGroupField as Oe } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
+const Te = 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(R).optional()
+}), q = (h, T, d, r, U = A.Regular) => {
+  const N = {
+    ...T,
+    paymentMethod: h.paymentMethod
   };
-  g.hourlyCompensations = y?.hourlyCompensations?.map(
-    (o) => {
-      const d = o.jobUuid && o.name ? E.hourlyCompensations[o.jobUuid]?.[o.name] : void 0;
-      return d ? {
-        ...o,
-        hours: d
-      } : o;
+  N.hourlyCompensations = T?.hourlyCompensations?.map(
+    (i) => {
+      const o = i.jobUuid && i.name ? h.hourlyCompensations[i.jobUuid]?.[i.name] : void 0;
+      return o ? {
+        ...i,
+        hours: o
+      } : i;
     }
-  ), g.paidTimeOff = l.map((o) => ({
-    ...o,
-    hours: E.timeOffCompensations[o.name]
-  }));
-  const b = [];
-  return Object.entries(E.fixedCompensations).forEach(([o, d]) => {
-    const C = y?.fixedCompensations?.find(
-      (M) => M.name?.toLowerCase() === o.toLowerCase()
-    );
-    if (d !== void 0) {
-      const M = d.toString();
-      C ? b.push({
-        name: C.name,
-        jobUuid: C.jobUuid,
-        amount: M
-      }) : d !== 0 && b.push({
-        name: o,
-        jobUuid: i,
-        amount: M
-      });
+  ), N.paidTimeOff = d.map((i) => {
+    const o = U === A.Dismissal, { finalPayoutUnusedHoursInput: P, ...y } = i;
+    if (o) {
+      const x = h.finalPayoutCompensations[i.name] ?? i.finalPayoutUnusedHoursInput;
+      return {
+        ...i,
+        hours: h.timeOffCompensations[i.name],
+        ...x != null ? { finalPayoutUnusedHoursInput: x } : {}
+      };
     }
-  }), g.fixedCompensations = b, g;
+    return {
+      ...y,
+      hours: h.timeOffCompensations[i.name]
+    };
+  });
+  const g = [];
+  return Object.entries(h.fixedCompensations).forEach(([i, o]) => {
+    const P = T?.fixedCompensations?.find(
+      (y) => y.name?.toLowerCase() === i.toLowerCase()
+    );
+    o !== void 0 && o !== "" && (P ? g.push({
+      name: P.name,
+      jobUuid: P.jobUuid,
+      amount: o
+    }) : parseFloat(o) !== 0 && g.push({
+      name: i,
+      jobUuid: r,
+      amount: o
+    }));
+  }), N.fixedCompensations = g, N;
 }, ze = ({
-  onSave: E,
-  onCancel: y,
-  employee: l,
-  employeeCompensation: i,
-  isPending: g = !1,
-  fixedCompensationTypes: b,
-  payPeriodStartDate: o,
-  paySchedule: d,
-  isOffCycle: C = !1,
-  withReimbursements: M = !0,
-  hasDirectDepositSetup: $ = !0
+  onSave: h,
+  onCancel: T,
+  employee: d,
+  employeeCompensation: r,
+  isPending: U = !1,
+  fixedCompensationTypes: N,
+  payPeriodStartDate: g,
+  paySchedule: i,
+  payrollCategory: o = A.Regular,
+  withReimbursements: P = !0,
+  hasDirectDepositSetup: y = !0
 }) => {
-  const { Button: v, Heading: c, Text: B } = ie(), { t } = ee("Payroll.PayrollEditEmployee");
-  se("Payroll.PayrollEditEmployee");
-  const f = l.jobs?.find((e) => e.primary), O = f ? [f] : [], F = Z(null), p = Oe({
+  const { Button: x, Heading: c, Text: D } = oe(), { t: n } = te("Payroll.PayrollEditEmployee");
+  ae("Payroll.PayrollEditEmployee");
+  const p = d.jobs?.find((e) => e.primary), V = r?.hourlyCompensations?.some(
+    (e) => e.jobUuid === p?.uuid
+  ), M = p && V ? [p] : [], F = ee(null), f = Me({
     ref: F
   }).includes("small");
-  i?.hourlyCompensations?.forEach((e) => {
-    const n = l.jobs?.find((s) => s.uuid === e.jobUuid);
-    n && !O.find((s) => s.uuid === n.uuid) && O.push(n);
+  r?.hourlyCompensations?.forEach((e) => {
+    const t = d.jobs?.find((l) => l.uuid === e.jobUuid);
+    t && !M.find((l) => l.uuid === t.uuid) && M.push(t);
   });
-  const A = (i?.paidTimeOff || []).filter((e) => e.name), _ = de({
-    flsaStatus: f?.compensations?.[0]?.flsaStatus,
-    existingFixedCompensations: i?.fixedCompensations || [],
-    primaryJobUuid: f?.uuid,
-    fixedCompensationTypes: b,
+  const b = (r?.paidTimeOff || []).filter((e) => e.name), v = ue({
+    flsaStatus: p?.compensations?.[0]?.flsaStatus,
+    existingFixedCompensations: r?.fixedCompensations || [],
+    primaryJobUuid: p?.uuid,
+    fixedCompensationTypes: N,
     excludedTypes: ce
-  }), N = M ? ue(
-    i?.fixedCompensations || [],
-    b,
-    f?.uuid
-  ) : null, R = (e, n) => i?.hourlyCompensations?.find(
-    (s) => s.jobUuid === e && s.name?.toLowerCase() === n.toLowerCase()
-  ), q = (e) => {
+  }), O = P ? de(
+    r?.fixedCompensations || [],
+    N,
+    p?.uuid
+  ) : null, L = (e, t) => r?.hourlyCompensations?.find(
+    (l) => l.jobUuid === e && l.name?.toLowerCase() === t.toLowerCase()
+  ), W = (e) => {
     switch (e) {
       case he:
-        return t("compensationNames.regularHours");
+        return n("compensationNames.regularHours");
       case fe:
-        return t("compensationNames.overtime");
+        return n("compensationNames.overtime");
       case pe:
-        return t("compensationNames.doubleOvertime");
+        return n("compensationNames.doubleOvertime");
       default:
         return e;
     }
-  }, j = (e) => {
+  }, H = (e) => {
     switch (e) {
-      case Me:
-        return t("fixedCompensationNames.bonus");
+      case Pe:
+        return n("fixedCompensationNames.bonus");
+      case Ee:
+        return n("fixedCompensationNames.paycheckTips");
       case be:
-        return t("fixedCompensationNames.paycheckTips");
+        return n("fixedCompensationNames.correctionPayment");
       case ge:
-        return t("fixedCompensationNames.correctionPayment");
-      case Ee:
-        return t("fixedCompensationNames.commission");
+        return n("fixedCompensationNames.commission");
       case Ne:
-        return t("fixedCompensationNames.cashTips");
+        return n("fixedCompensationNames.cashTips");
       case Ce:
-        return t("fixedCompensationNames.reimbursement");
+        return n("fixedCompensationNames.reimbursement");
       default:
         return e;
     }
-  }, V = {
+  }, z = {
     hourlyCompensations: (() => {
       const e = {};
-      return O.forEach((n) => {
-        w.forEach((s) => {
-          const h = R(n.uuid, s);
-          h && (e[n.uuid] || (e[n.uuid] = {}), e[n.uuid][h.name] = h.hours ? parseFloat(h.hours).toString() : "");
+      return M.forEach((t) => {
+        B.forEach((l) => {
+          const C = L(t.uuid, l);
+          C && (e[t.uuid] || (e[t.uuid] = {}), e[t.uuid][C.name] = C.hours ? parseFloat(C.hours).toString() : "");
         });
       }), e;
     })(),
     timeOffCompensations: (() => {
       const e = {};
-      return A.forEach((n) => {
-        e[n.name] = n.hours ? parseFloat(n.hours).toString() : "";
+      return b.forEach((t) => {
+        e[t.name] = t.hours ? parseFloat(t.hours).toString() : "";
+      }), e;
+    })(),
+    finalPayoutCompensations: (() => {
+      const e = {};
+      return b.forEach((t) => {
+        e[t.name] = t.finalPayoutUnusedHoursInput ?? "0";
       }), e;
     })(),
     fixedCompensations: (() => {
       const e = {};
-      return _.forEach((n) => {
-        e[n.name] = n.amount ? parseFloat(n.amount) : void 0;
-      }), N && (e[N.name] = N.amount ? parseFloat(N.amount) : void 0), e;
+      return v.forEach((t) => {
+        e[t.name] = t.amount ?? "";
+      }), O && (e[O.name] = O.amount ?? ""), e;
     })(),
-    paymentMethod: i?.paymentMethod || S.DirectDeposit
-  }, I = K({
-    resolver: te(Te),
-    defaultValues: V
-  }), T = X({
-    control: I.control
-  }), z = J(() => {
+    paymentMethod: r?.paymentMethod || R.DirectDeposit
+  }, j = Q({
+    resolver: se(Te),
+    defaultValues: z
+  }), E = Z({
+    control: j.control
+  }), Y = ne(() => {
     try {
       const e = {};
-      T.hourlyCompensations && Object.entries(T.hourlyCompensations).forEach(([h, D]) => {
-        D && (e[h] = D);
+      E.hourlyCompensations && Object.entries(E.hourlyCompensations).forEach(([C, k]) => {
+        k && (e[C] = k);
       });
-      const n = {
+      const t = {
         hourlyCompensations: e,
-        timeOffCompensations: T.timeOffCompensations || {},
-        fixedCompensations: T.fixedCompensations || {},
-        paymentMethod: T.paymentMethod
-      }, s = H(
-        n,
-        i,
-        (i?.paidTimeOff || []).filter((h) => h.name),
-        f?.uuid
+        timeOffCompensations: E.timeOffCompensations || {},
+        finalPayoutCompensations: E.finalPayoutCompensations || {},
+        fixedCompensations: E.fixedCompensations || {},
+        paymentMethod: E.paymentMethod
+      }, l = q(
+        t,
+        r,
+        (r?.paidTimeOff || []).filter((C) => C.name),
+        p?.uuid,
+        o
       );
-      return k(
-        s,
+      return w(
         l,
-        o,
         d,
-        C
+        g,
+        i,
+        o
       );
     } catch {
-      return i ? k(
-        i,
-        l,
-        o,
+      return r ? w(
+        r,
         d,
-        C
+        g,
+        i,
+        o
       ) : 0;
     }
   }, [
-    T,
-    i,
-    f?.uuid,
-    l,
-    o,
+    E,
+    r,
+    p?.uuid,
     d,
-    C
-  ]), W = me({
-    first_name: l.firstName,
-    last_name: l.lastName
-  }), Y = (e) => {
-    const n = H(
+    g,
+    i,
+    o
+  ]), K = me({
+    first_name: d.firstName,
+    last_name: d.lastName
+  }), X = (e) => {
+    const t = q(
       e,
-      i,
-      A,
-      f?.uuid
+      r,
+      b,
+      p?.uuid,
+      o
     );
-    E(n);
-  }, L = le(z || 0), U = /* @__PURE__ */ a(
-    x,
+    h(t);
+  }, G = le(Y || 0), $ = /* @__PURE__ */ m(
+    S,
     {
-      flexDirection: p ? "row" : "column",
-      justifyContent: p ? "flex-end" : "normal",
-      alignItems: p ? "flex-start" : "stretch",
+      flexDirection: f ? "row" : "column",
+      justifyContent: f ? "flex-end" : "normal",
+      alignItems: f ? "flex-start" : "stretch",
       gap: 12,
       children: [
-        /* @__PURE__ */ r(v, { variant: "secondary", onClick: y, title: t("cancelCta"), children: t("cancelCta") }),
-        /* @__PURE__ */ r(
-          v,
+        /* @__PURE__ */ s(x, { variant: "secondary", onClick: T, title: n("cancelCta"), children: n("cancelCta") }),
+        /* @__PURE__ */ s(
+          x,
           {
-            onClick: I.handleSubmit(Y),
-            title: t("saveCta"),
-            isLoading: g,
-            children: t("saveCta")
+            onClick: j.handleSubmit(X),
+            title: n("saveCta"),
+            isLoading: U,
+            children: n("saveCta")
           }
         )
       ]
     }
   );
-  return /* @__PURE__ */ a("div", { ref: F, className: u.container, children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ m("div", { ref: F, className: u.container, children: [
+    /* @__PURE__ */ s(
       "div",
       {
-        className: `${u.headerSection} ${p ? "" : u.headerSectionSticky}`,
-        children: /* @__PURE__ */ a(x, { justifyContent: "space-between", children: [
-          /* @__PURE__ */ a(x, { flexDirection: "column", gap: p ? 8 : 2, children: [
-            /* @__PURE__ */ r(c, { as: "h1", styledAs: p ? "h2" : "h4", children: t("pageTitle", { employeeName: W }) }),
-            p ? /* @__PURE__ */ a(x, { flexDirection: "column", gap: 6, children: [
-              /* @__PURE__ */ r(c, { as: "h2", styledAs: "h3", children: L }),
-              /* @__PURE__ */ r(B, { className: u.grossPayLabel, children: t("grossPayLabel") })
-            ] }) : /* @__PURE__ */ r(c, { as: "h2", styledAs: "h6", className: u.grossPayLabel, children: t("grossPayLabelMobile", { grossPay: L }) })
+        className: `${u.headerSection} ${f ? "" : u.headerSectionSticky}`,
+        children: /* @__PURE__ */ m(S, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ m(S, { flexDirection: "column", gap: f ? 8 : 2, children: [
+            /* @__PURE__ */ s(c, { as: "h1", styledAs: f ? "h2" : "h4", children: n("pageTitle", { employeeName: K }) }),
+            f ? /* @__PURE__ */ m(S, { flexDirection: "column", gap: 6, children: [
+              /* @__PURE__ */ s(c, { as: "h2", styledAs: "h3", children: G }),
+              /* @__PURE__ */ s(D, { className: u.grossPayLabel, children: n("grossPayLabel") })
+            ] }) : /* @__PURE__ */ s(c, { as: "h2", styledAs: "h6", className: u.grossPayLabel, children: n("grossPayLabelMobile", { grossPay: G }) })
           ] }),
-          p && U
+          f && $
         ] })
       }
     ),
-    /* @__PURE__ */ a(Q, { ...I, children: [
-      /* @__PURE__ */ a(ae, { children: [
-        O.length > 0 && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
-          /* @__PURE__ */ r(c, { as: "h3", children: t("regularHoursTitle") }),
-          O.map((e) => /* @__PURE__ */ a(x, { flexDirection: "column", gap: 8, children: [
-            O.length > 1 && /* @__PURE__ */ r(c, { as: "h4", children: e.title }),
-            /* @__PURE__ */ r(P, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: w.map((n) => {
-              const s = R(
+    /* @__PURE__ */ m(J, { ...j, children: [
+      /* @__PURE__ */ m(re, { children: [
+        M.length > 0 && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h3", children: n("regularHoursTitle") }),
+          M.map((e) => /* @__PURE__ */ m(S, { flexDirection: "column", gap: 8, children: [
+            M.length > 1 && /* @__PURE__ */ s(c, { as: "h4", children: e.title }),
+            /* @__PURE__ */ s(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: B.map((t) => {
+              const l = L(
                 e.uuid,
-                n
+                t
               );
-              if (s)
-                return /* @__PURE__ */ r(
-                  oe,
+              if (l)
+                return /* @__PURE__ */ s(
+                  I,
                   {
                     type: "number",
                     min: 0,
-                    adornmentEnd: t("hoursUnit"),
+                    adornmentEnd: n("hoursUnit"),
                     isRequired: !0,
-                    label: q(n),
-                    name: `hourlyCompensations.${e.uuid}.${s.name}`
+                    label: W(t),
+                    name: `hourlyCompensations.${e.uuid}.${l.name}`
                   },
-                  n
+                  t
                 );
             }) })
           ] }, e.uuid))
         ] }),
-        A.length > 0 && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
-          /* @__PURE__ */ r(c, { as: "h4", children: t("timeOffTitle") }),
-          /* @__PURE__ */ r(P, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: A.map((e) => /* @__PURE__ */ r(
-            ne,
+        b.length > 0 && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h4", children: o === A.Dismissal ? n("timeOffTitleDismissal") : n("timeOffTitle") }),
+          /* @__PURE__ */ s(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: b.map((e) => /* @__PURE__ */ s(
+            ie,
             {
               timeOff: e,
-              employee: l
+              employee: d
             },
             e.name
           )) })
         ] }),
-        _.length > 0 && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
-          /* @__PURE__ */ r(c, { as: "h4", children: t("additionalEarningsTitle") }),
-          /* @__PURE__ */ r(
-            P,
+        o === A.Dismissal && b.length > 0 && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h4", children: n("finalPayoutTitle") }),
+          /* @__PURE__ */ s(D, { variant: "supporting", children: n("finalPayoutDescription") }),
+          /* @__PURE__ */ s(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: b.map((e) => /* @__PURE__ */ s(
+            I,
+            {
+              name: `finalPayoutCompensations.${e.name}`,
+              type: "number",
+              min: 0,
+              adornmentEnd: n("hoursUnit"),
+              label: e.name
+            },
+            `payout-${e.name}`
+          )) })
+        ] }),
+        v.length > 0 && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h4", children: n("additionalEarningsTitle") }),
+          /* @__PURE__ */ s(
+            _,
             {
               gridTemplateColumns: { base: "1fr", small: [320, 320], large: [320, 320, 320] },
               gap: 20,
-              children: _.map((e) => /* @__PURE__ */ r(
-                G,
+              children: v.map((e) => /* @__PURE__ */ s(
+                I,
                 {
-                  format: "currency",
+                  type: "number",
                   min: 0,
+                  adornmentStart: "$",
                   isRequired: !0,
-                  label: j(e.name),
+                  label: H(e.name),
                   name: `fixedCompensations.${e.name}`
                 },
                 e.name
@@ -298,43 +334,44 @@ const Te = m.object({
             }
           )
         ] }),
-        N && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
-          /* @__PURE__ */ r(c, { as: "h4", children: t("reimbursementTitle") }),
-          /* @__PURE__ */ r(P, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ r(
-            G,
+        O && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h4", children: n("reimbursementTitle") }),
+          /* @__PURE__ */ s(_, { gridTemplateColumns: { base: "1fr", small: [320, 320] }, gap: 20, children: /* @__PURE__ */ s(
+            I,
             {
-              format: "currency",
+              type: "number",
               min: 0,
+              adornmentStart: "$",
               isRequired: !0,
-              label: j(N.name),
-              name: `fixedCompensations.${N.name}`
+              label: H(O.name),
+              name: `fixedCompensations.${O.name}`
             }
           ) })
         ] }),
-        $ && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
-          /* @__PURE__ */ r(c, { as: "h4", children: t("paymentMethodTitle") }),
-          /* @__PURE__ */ r(
-            re,
+        y && /* @__PURE__ */ m("div", { className: u.fieldGroup, children: [
+          /* @__PURE__ */ s(c, { as: "h4", children: n("paymentMethodTitle") }),
+          /* @__PURE__ */ s(
+            Oe,
             {
               name: "paymentMethod",
               isRequired: !0,
-              label: t("paymentMethodLabel"),
-              description: t("paymentMethodDescription"),
+              label: n("paymentMethodLabel"),
+              description: n("paymentMethodDescription"),
               options: [
                 {
-                  value: S.DirectDeposit,
-                  label: t("paymentMethodOptions.directDeposit")
+                  value: R.DirectDeposit,
+                  label: n("paymentMethodOptions.directDeposit")
                 },
                 {
-                  value: S.Check,
-                  label: t("paymentMethodOptions.check")
+                  value: R.Check,
+                  label: n("paymentMethodOptions.check")
                 }
               ]
             }
           )
         ] })
       ] }),
-      !p && U
+      !f && $
     ] })
   ] });
 };