@gusto/embedded-react-sdk 0.37.0-rc.5 → 0.38.0

package/dist/components/Payroll/PayrollOverview/PayrollOverviewPresentation.js

@@ -1,99 +1,102 @@
-import { jsx as r, jsxs as s, Fragment as S } from "react/jsx-runtime";
-import { useTranslation as Pe, Trans as Ce } from "react-i18next";
-import { useState as re, useRef as ke } from "react";
-import { isDismissalPayroll as xe, getPayrollTypeLabel as Se, calculateTotalPayroll as Ne, hasDirectDepositEmployees as we } from "../helpers.js";
+import { jsx as a, jsxs as o, Fragment as w } from "react/jsx-runtime";
+import { useTranslation as Pe, Trans as ke } from "react-i18next";
+import { useState as ne, useRef as Ce } from "react";
+import { isDismissalPayroll as we, getPayrollTypeLabel as Se, calculateTotalPayroll as Ne, hasDirectDepositEmployees as _e } from "../helpers.js";
 import { PayrollOverviewStatus as h } from "./PayrollOverviewTypes.js";
-import ne from "./PayrollOverviewPresentation.module.scss.js";
-import { Flex as d } from "../../Common/Flex/Flex.js";
-import { Grid as _e } from "../../Common/Grid/Grid.js";
-import ve from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { useComponentContext as Le } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as Ee } from "../../../i18n/I18n.js";
-import { useDateFormatter as Oe } from "../../../hooks/useDateFormatter.js";
-import Ae from "../../../hooks/useNumberFormatter.js";
+import ie from "./PayrollOverviewPresentation.module.scss.js";
+import { Flex as s } from "../../Common/Flex/Flex.js";
+import { Grid as ve } from "../../Common/Grid/Grid.js";
+import Le from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useComponentContext as Ee } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as Oe } from "../../../i18n/I18n.js";
+import { useDateFormatter as Ae } from "../../../hooks/useDateFormatter.js";
+import Me from "../../../hooks/useNumberFormatter.js";
 import { firstLastName as U } from "../../../helpers/formattedStrings.js";
-import { PAYMENT_METHODS as Me, FlsaStatus as ie, compensationTypeLabels as N, PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as le } from "../../../shared/constants.js";
-import oe from "../../../assets/icons/download-cloud.svg.js";
-import { PayrollLoading as se } from "../../Common/PayrollLoading/PayrollLoading.js";
+import { PAYMENT_METHODS as Be, FlsaStatus as le, compensationTypeLabels as S, PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as oe } from "../../../shared/constants.js";
+import se from "../../../assets/icons/download-cloud.svg.js";
+import { PayrollLoading as de } from "../../Common/PayrollLoading/PayrollLoading.js";
 import { FastAchSubmissionBlockerBanner as We } from "./SubmissionBlockers/FastAchSubmissionBlockerBanner.js";
 import { GenericBlocker as Ue } from "./SubmissionBlockers/GenericBlocker.js";
-import { DataView as c } from "../../Common/DataView/DataView.js";
-const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate, p.endDate) : { startDate: "", endDate: "" }, lt = ({
-  onEdit: p,
-  onSubmit: w,
-  onCancel: de,
+import { DataView as m } from "../../Common/DataView/DataView.js";
+const Ve = (y, N) => y?.startDate && y.endDate ? N.formatPayPeriod(y.startDate, y.endDate) : { startDate: "", endDate: "" }, ot = ({
+  onEdit: y,
+  onSubmit: N,
+  onCancel: ce,
   onPayrollReceipt: me,
   onPaystubDownload: V,
-  employeeDetails: ce,
+  employeeDetails: ue,
   payrollData: n,
   bankAccount: Y,
   taxes: _,
   status: g = h.Viewing,
   isProcessed: T,
-  canCancel: ue = !1,
-  alerts: B = [],
+  canCancel: be = !1,
+  alerts: I = [],
   submissionBlockers: f = [],
   selectedUnblockOptions: v = {},
-  onUnblockOptionChange: I,
-  wireInConfirmationRequest: be,
+  onUnblockOptionChange: R,
+  wireInConfirmationRequest: pe,
   withReimbursements: D = !0,
   paymentSpeed: ye
 }) => {
-  const { Alert: L, Button: H, ButtonIcon: R, Dialog: pe, Heading: F, Text: m, Tabs: fe } = Le();
-  Ee("Payroll.PayrollOverview");
-  const o = Oe(), { t } = Pe("Payroll.PayrollOverview"), i = Ae("currency"), [he, ge] = re("companyPays"), [j, G] = re(!1), E = ke(null), P = ve({ ref: E }).includes("small"), C = g === h.Submitting || g === h.Cancelling, $ = /* @__PURE__ */ r(F, { as: "h1", children: t(T ? "summaryTitle" : "overviewTitle") }), z = xe(n.offCycleReason), K = /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
-    Ce,
+  const { Alert: L, Badge: E, Button: H, ButtonIcon: F, Dialog: fe, Heading: j, Text: c, Tabs: he } = Ee();
+  Oe("Payroll.PayrollOverview");
+  const d = Ae(), { t } = Pe("Payroll.PayrollOverview"), i = Me("currency"), [ge, Te] = ne("companyPays"), [G, $] = ne(!1), O = Ce(null), x = Le({ ref: O }).includes("small"), P = g === h.Submitting || g === h.Cancelling, z = /* @__PURE__ */ a(j, { as: "h1", children: t(T ? "summaryTitle" : "overviewTitle") }), K = we(n.offCycleReason), X = /* @__PURE__ */ a(c, { children: /* @__PURE__ */ a(
+    ke,
     {
-      i18nKey: z ? "pageSubtitleDismissal" : "pageSubtitle",
+      i18nKey: K ? "pageSubtitleDismissal" : "pageSubtitle",
       t,
-      components: { dateWrapper: /* @__PURE__ */ r(m, { weight: "bold", as: "span" }) },
+      components: { dateWrapper: /* @__PURE__ */ a(c, { weight: "bold", as: "span" }) },
       values: {
-        ...Ve(n.payPeriod, o),
+        ...Ve(n.payPeriod, d),
         payrollType: Se(n)
       }
     }
   ) });
   if (g === h.Cancelled)
-    return /* @__PURE__ */ r("div", { ref: E, className: ne.container, children: /* @__PURE__ */ s(d, { flexDirection: "column", alignItems: "stretch", children: [
-      /* @__PURE__ */ r(d, { justifyContent: "space-between", alignItems: "flex-start", gap: 16, children: /* @__PURE__ */ s(d, { flexDirection: "column", gap: 4, children: [
-        $,
-        K
+    return /* @__PURE__ */ a("div", { ref: O, className: ie.container, children: /* @__PURE__ */ o(s, { flexDirection: "column", alignItems: "stretch", children: [
+      /* @__PURE__ */ a(s, { justifyContent: "space-between", alignItems: "flex-start", gap: 16, children: /* @__PURE__ */ o(s, { flexDirection: "column", gap: 4, children: [
+        z,
+        X
       ] }) }),
-      /* @__PURE__ */ r(L, { status: "info", label: t("cancelledEmptyState") })
+      /* @__PURE__ */ a(L, { status: "info", label: t("cancelledEmptyState") })
     ] }) });
-  const k = Ne(n), Te = n.payrollStatusMeta?.expectedDebitTime ?? n.payrollDeadline, X = (e) => e.taxes?.reduce(
-    (a, l) => l.employer ? a + l.amount : a,
+  const k = Ne(n), De = n.payrollStatusMeta?.expectedDebitTime ?? n.payrollDeadline, q = (e) => e.taxes?.reduce(
+    (r, l) => l.employer ? r + l.amount : r,
     0
-  ) ?? 0, q = (e) => e.benefits?.reduce(
-    (a, l) => l.companyContribution ? a + l.companyContribution : a,
+  ) ?? 0, J = (e) => e.benefits?.reduce(
+    (r, l) => l.companyContribution ? r + l.companyContribution : r,
     0
-  ) ?? 0, O = (e) => e.fixedCompensations?.length ? Number(
+  ) ?? 0, A = (e) => e.fixedCompensations?.length ? Number(
     e.fixedCompensations.find(
-      (a) => a.name?.toLowerCase() === N.REIMBURSEMENT_NAME.toLowerCase()
+      (r) => r.name?.toLowerCase() === S.REIMBURSEMENT_NAME.toLowerCase()
     )?.amount || 0
-  ) : 0, De = (e) => e.grossPay + O(e) + X(e) + q(e), u = new Map(ce.map((e) => [e.uuid, e])), A = f.find(
+  ) : 0, He = (e) => e.grossPay + A(e) + q(e) + J(e), u = new Map(ue.map((e) => [e.uuid, e])), M = f.find(
     (e) => e.blockerType === "fast_ach_threshold_exceeded" || e.blockerType === "needs_earned_access_for_fast_ach"
-  ), M = A ? v[A.blockerType || ""] : void 0, b = A?.unblockOptions?.find(
-    (e) => e.unblockType === M
-  ), J = M === "wire_in", Q = M === "move_to_four_day", x = (e) => e.hourlyCompensations?.reduce(
-    (a, l) => {
+  ), B = M ? v[M.blockerType || ""] : void 0, b = M?.unblockOptions?.find(
+    (e) => e.unblockType === B
+  ), Q = B === "wire_in", Z = B === "move_to_four_day", C = (e) => e.hourlyCompensations?.reduce(
+    (r, l) => {
       if (typeof l.name > "u")
-        return a;
-      const y = l.name.toLowerCase(), W = a[y] ?? 0;
-      return a[y] = W + Number(l.hours || 0), a;
+        return r;
+      const p = l.name.toLowerCase(), W = r[p] ?? 0;
+      return r[p] = W + Number(l.hours || 0), r;
     },
     {}
-  ) || {}, Z = (e) => e.paidTimeOff?.reduce((a, l) => a + Number(l.hours || 0), 0) ?? 0, ee = n.employeeCompensations?.reduce(
-    (e, a) => !a.excluded && a.paymentMethod === Me.check ? e + 1 : e,
+  ) || {}, ee = (e) => e.paidTimeOff?.reduce((r, l) => r + Number(l.hours || 0), 0) ?? 0, te = n.employeeCompensations?.reduce(
+    (e, r) => !r.excluded && r.paymentMethod === Be.check ? e + 1 : e,
     0
-  ) ?? 0, te = [
+  ) ?? 0, ae = [
     {
       key: "employeeName",
       title: t("tableHeaders.employees"),
-      render: (e) => U({
-        first_name: u.get(e.employeeUuid)?.firstName,
-        last_name: u.get(e.employeeUuid)?.lastName
-      })
+      render: (e) => /* @__PURE__ */ o(s, { flexDirection: "column", gap: 0, children: [
+        U({
+          first_name: u.get(e.employeeUuid)?.firstName,
+          last_name: u.get(e.employeeUuid)?.lastName
+        }),
+        e.excluded && /* @__PURE__ */ a(E, { status: "warning", children: t("skippedBadge") })
+      ] })
     },
     {
       key: "grossPay",
@@ -104,65 +107,65 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
       {
         key: "reimbursements",
         title: t("tableHeaders.reimbursements"),
-        render: (e) => i(O(e))
+        render: (e) => i(A(e))
       }
     ] : [],
     {
       key: "companyTaxes",
       title: t("tableHeaders.companyTaxes"),
-      render: (e) => i(X(e))
+      render: (e) => i(q(e))
     },
     {
       key: "companyBenefits",
       title: t("tableHeaders.companyBenefits"),
-      render: (e) => i(q(e))
+      render: (e) => i(J(e))
     },
     {
       key: "companyPays",
       title: t("tableHeaders.companyPays"),
-      render: (e) => i(De(e))
+      render: (e) => i(He(e))
     }
   ];
-  T && P && te.push({
+  T && x && ae.push({
     key: "paystubs",
     title: t("tableHeaders.paystub"),
-    render: (e) => /* @__PURE__ */ r(d, { justifyContent: "flex-end", children: /* @__PURE__ */ r(
-      R,
+    render: (e) => /* @__PURE__ */ a(s, { justifyContent: "flex-end", children: /* @__PURE__ */ a(
+      F,
       {
         "aria-label": t("downloadPaystubLabel"),
         variant: "tertiary",
         onClick: () => {
           e.employeeUuid && V(e.employeeUuid);
         },
-        children: /* @__PURE__ */ r(oe, {})
+        children: /* @__PURE__ */ a(se, {})
       }
     ) })
   });
-  const He = [
+  const xe = [
     {
       id: "companyPays",
       label: t("dataViews.companyPaysTab"),
-      content: /* @__PURE__ */ r(
-        c,
+      content: /* @__PURE__ */ a(
+        m,
         {
           label: t("dataViews.companyPaysTable"),
-          columns: te,
+          columns: ae,
           data: n.employeeCompensations,
-          itemMenu: T && !P ? (e) => /* @__PURE__ */ r(
-            R,
+          itemMenu: T && !x ? (e) => /* @__PURE__ */ a(
+            F,
             {
               "aria-label": t("downloadPaystubLabel"),
               variant: "tertiary",
               onClick: () => {
                 e.employeeUuid && V(e.employeeUuid);
               },
-              children: /* @__PURE__ */ r(oe, {})
+              children: /* @__PURE__ */ a(se, {})
             }
           ) : void 0,
           footer: () => ({
-            employeeName: /* @__PURE__ */ s(S, { children: [
-              /* @__PURE__ */ r(m, { weight: "semibold", size: "sm", children: t("tableHeaders.footerTotalsLabel") }),
-              /* @__PURE__ */ r(m, { variant: "supporting", size: "sm", children: t("tableHeaders.footerTotalsDescription") })
+            employeeName: /* @__PURE__ */ o(w, { children: [
+              /* @__PURE__ */ a(c, { weight: "semibold", size: "sm", children: t("tableHeaders.footerTotalsLabel") }),
+              /* @__PURE__ */ a(c, { variant: "supporting", size: "sm", children: t("tableHeaders.footerTotalsDescription") })
             ] }),
             grossPay: i(Number(n.totals?.grossPay ?? 0)),
             ...D ? {
@@ -178,59 +181,62 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
     {
       id: "hoursWorked",
       label: t("dataViews.hoursWorkedTab"),
-      content: /* @__PURE__ */ r(
-        c,
+      content: /* @__PURE__ */ a(
+        m,
         {
           label: t("dataViews.hoursWorkedTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => U({
-                first_name: u.get(e.employeeUuid)?.firstName,
-                last_name: u.get(e.employeeUuid)?.lastName
-              })
+              render: (e) => /* @__PURE__ */ o(s, { flexDirection: "column", gap: 0, children: [
+                U({
+                  first_name: u.get(e.employeeUuid)?.firstName,
+                  last_name: u.get(e.employeeUuid)?.lastName
+                }),
+                e.excluded && /* @__PURE__ */ a(E, { status: "warning", children: t("skippedBadge") })
+              ] })
             },
             {
               title: t("tableHeaders.compensationType"),
-              render: (e) => u.get(e.employeeUuid)?.jobs?.reduce((a, l) => {
+              render: (e) => u.get(e.employeeUuid)?.jobs?.reduce((r, l) => {
                 if (l.primary) {
-                  const y = l.compensations?.find(
+                  const p = l.compensations?.find(
                     (W) => W.uuid === l.currentCompensationUuid
                   )?.flsaStatus;
-                  switch (y) {
-                    case ie.EXEMPT:
+                  switch (p) {
+                    case le.EXEMPT:
                       return t("compensationTypeLabels.exempt");
-                    case ie.NONEXEMPT:
+                    case le.NONEXEMPT:
                       return t("compensationTypeLabels.nonexempt");
                     default:
-                      return y ?? "";
+                      return p ?? "";
                   }
                 }
-                return a;
+                return r;
               }, "")
             },
             {
               title: t("tableHeaders.regular"),
-              render: (e) => x(e)[N.REGULAR_HOURS_NAME] || 0
+              render: (e) => C(e)[S.REGULAR_HOURS_NAME] || 0
             },
             {
               title: t("tableHeaders.overtime"),
-              render: (e) => x(e)[N.OVERTIME_NAME] || 0
+              render: (e) => C(e)[S.OVERTIME_NAME] || 0
             },
             {
               title: t("tableHeaders.doubleOT"),
-              render: (e) => x(e)[N.DOUBLE_OVERTIME_NAME] || 0
+              render: (e) => C(e)[S.DOUBLE_OVERTIME_NAME] || 0
             },
             {
               title: t("tableHeaders.timeOff"),
-              render: (e) => Z(e)
+              render: (e) => ee(e)
             },
             {
               title: t("tableHeaders.totalHours"),
-              render: (e) => Object.values(x(e)).reduce(
-                (a, l) => a + l,
+              render: (e) => Object.values(C(e)).reduce(
+                (r, l) => r + l,
                 0
-              ) + Z(e)
+              ) + ee(e)
             }
           ],
           data: n.employeeCompensations
@@ -240,17 +246,20 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
     {
       id: "employeeTakeHome",
       label: t("dataViews.employeeTakeHomeTab"),
-      content: /* @__PURE__ */ r(
-        c,
+      content: /* @__PURE__ */ a(
+        m,
         {
           label: t("dataViews.employeeTakeHomeTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => U({
-                first_name: u.get(e.employeeUuid)?.firstName,
-                last_name: u.get(e.employeeUuid)?.lastName
-              })
+              render: (e) => /* @__PURE__ */ o(s, { flexDirection: "column", gap: 0, children: [
+                U({
+                  first_name: u.get(e.employeeUuid)?.firstName,
+                  last_name: u.get(e.employeeUuid)?.lastName
+                }),
+                e.excluded && /* @__PURE__ */ a(E, { status: "warning", children: t("skippedBadge") })
+              ] })
             },
             {
               title: t("tableHeaders.paymentType"),
@@ -264,7 +273,7 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
               title: t("tableHeaders.deductions"),
               render: (e) => i(
                 e.deductions?.reduce(
-                  (a, l) => a + l.amount,
+                  (r, l) => r + l.amount,
                   0
                 ) ?? 0
               )
@@ -272,14 +281,14 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
             ...D ? [
               {
                 title: t("tableHeaders.reimbursements"),
-                render: (e) => i(O(e))
+                render: (e) => i(A(e))
               }
             ] : [],
             {
               title: t("tableHeaders.employeeTaxes"),
               render: (e) => i(
                 e.taxes?.reduce(
-                  (a, l) => l.employer ? a : a + l.amount,
+                  (r, l) => l.employer ? r : r + l.amount,
                   0
                 ) ?? 0
               )
@@ -288,7 +297,7 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
               title: t("tableHeaders.employeeBenefits"),
               render: (e) => i(
                 e.benefits?.reduce(
-                  (a, l) => a + (l.employeeDeduction ?? 0),
+                  (r, l) => r + (l.employeeDeduction ?? 0),
                   0
                 ) ?? 0
               )
@@ -305,9 +314,9 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
     {
       id: "taxes",
       label: t("dataViews.taxesTab"),
-      content: /* @__PURE__ */ s(d, { flexDirection: "column", gap: 32, children: [
-        /* @__PURE__ */ r(
-          c,
+      content: /* @__PURE__ */ o(s, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ a(
+          m,
           {
             label: t("dataViews.taxesTable"),
             columns: [
@@ -328,15 +337,15 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
               }
             ],
             footer: () => ({
-              taxDescription: /* @__PURE__ */ r(m, { weight: "semibold", size: "sm", children: t("totalsLabel") }),
+              taxDescription: /* @__PURE__ */ a(c, { weight: "semibold", size: "sm", children: t("totalsLabel") }),
               byYourEmployees: i(Number(n.totals?.employeeTaxes ?? 0)),
               byYourCompany: i(Number(n.totals?.employerTaxes ?? 0))
             }),
             data: Object.keys(_)
           }
         ),
-        /* @__PURE__ */ r(
-          c,
+        /* @__PURE__ */ a(
+          m,
           {
             label: t("dataViews.debitedTable"),
             columns: [
@@ -367,27 +376,27 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
         )
       ] })
     }
-  ], ae = T ? /* @__PURE__ */ s(S, { children: [
-    /* @__PURE__ */ r(H, { onClick: me, variant: "secondary", isDisabled: C, children: t("payrollReceiptCta") }),
-    ue && /* @__PURE__ */ r(
+  ], re = T ? /* @__PURE__ */ o(w, { children: [
+    /* @__PURE__ */ a(H, { onClick: me, variant: "secondary", isDisabled: P, children: t("payrollReceiptCta") }),
+    be && /* @__PURE__ */ a(
       H,
       {
         onClick: () => {
-          G(!0);
+          $(!0);
         },
         variant: "error",
-        isDisabled: C,
+        isDisabled: P,
         children: t("cancelCta")
       }
     )
-  ] }) : /* @__PURE__ */ s(S, { children: [
-    /* @__PURE__ */ r(H, { onClick: p, variant: "secondary", isDisabled: C, children: t("editCta") }),
-    /* @__PURE__ */ r(
+  ] }) : /* @__PURE__ */ o(w, { children: [
+    /* @__PURE__ */ a(H, { onClick: y, variant: "secondary", isDisabled: P, children: t("editCta") }),
+    /* @__PURE__ */ a(
       H,
       {
-        onClick: w,
-        isDisabled: C || f.length > 0 && (f.some(
-          (e) => !le.includes(e.blockerType || "")
+        onClick: N,
+        isDisabled: P || f.length > 0 && (f.some(
+          (e) => !oe.includes(e.blockerType || "")
         ) || f.some(
           (e) => !v[e.blockerType || ""]
         )),
@@ -395,18 +404,18 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
       }
     )
   ] });
-  return /* @__PURE__ */ r("div", { ref: E, className: ne.container, children: /* @__PURE__ */ s(d, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ s(d, { justifyContent: "space-between", alignItems: "flex-start", gap: 16, children: [
-      /* @__PURE__ */ s(d, { flexDirection: "column", gap: 4, children: [
-        $,
-        K
+  return /* @__PURE__ */ a("div", { ref: O, className: ie.container, children: /* @__PURE__ */ o(s, { flexDirection: "column", alignItems: "stretch", children: [
+    /* @__PURE__ */ o(s, { justifyContent: "space-between", alignItems: "flex-start", gap: 16, children: [
+      /* @__PURE__ */ o(s, { flexDirection: "column", gap: 4, children: [
+        z,
+        X
       ] }),
-      P && /* @__PURE__ */ r(d, { gap: 8, justifyContent: "flex-end", children: ae })
+      x && /* @__PURE__ */ a(s, { gap: 8, justifyContent: "flex-end", children: re })
     ] }),
-    !P && /* @__PURE__ */ r(_e, { gridTemplateColumns: "1fr", gap: 8, children: ae }),
-    g === h.Cancelling ? /* @__PURE__ */ r(se, { title: t("cancellingTitle") }) : g === h.Submitting ? /* @__PURE__ */ r(se, { title: t("loadingTitle"), description: t("loadingDescription") }) : /* @__PURE__ */ s(S, { children: [
-      be,
-      B.length > 0 && /* @__PURE__ */ r(d, { flexDirection: "column", gap: 16, children: B.map((e, a) => /* @__PURE__ */ r(
+    !x && /* @__PURE__ */ a(ve, { gridTemplateColumns: "1fr", gap: 8, children: re }),
+    g === h.Cancelling ? /* @__PURE__ */ a(de, { title: t("cancellingTitle") }) : g === h.Submitting ? /* @__PURE__ */ a(de, { title: t("loadingTitle"), description: t("loadingDescription") }) : /* @__PURE__ */ o(w, { children: [
+      pe,
+      I.length > 0 && /* @__PURE__ */ a(s, { flexDirection: "column", gap: 16, children: I.map((e, r) => /* @__PURE__ */ a(
         L,
         {
           label: e.title,
@@ -416,22 +425,22 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
         },
         `${e.type}-${e.title}`
       )) }),
-      f.length > 0 && I && f.map((e) => {
-        const a = e.blockerType || "";
-        return le.includes(a) ? /* @__PURE__ */ r(
+      f.length > 0 && R && f.map((e) => {
+        const r = e.blockerType || "";
+        return oe.includes(r) ? /* @__PURE__ */ a(
           We,
           {
             blocker: e,
-            selectedValue: v[a],
-            onUnblockOptionChange: I,
+            selectedValue: v[r],
+            onUnblockOptionChange: R,
             paymentSpeed: ye
           },
-          a
-        ) : /* @__PURE__ */ r(Ue, { blocker: e }, a);
+          r
+        ) : /* @__PURE__ */ a(Ue, { blocker: e }, r);
       }),
-      /* @__PURE__ */ r(F, { as: "h3", children: t(J ? "payrollSummaryTitleWire" : Q ? "payrollSummaryTitleFourDay" : "payrollSummaryTitle") }),
-      J ? /* @__PURE__ */ r(
-        c,
+      /* @__PURE__ */ a(j, { as: "h3", children: t(Q ? "payrollSummaryTitleWire" : Z ? "payrollSummaryTitleFourDay" : "payrollSummaryTitle") }),
+      Q ? /* @__PURE__ */ a(
+        m,
         {
           label: t("payrollSummaryLabel"),
           columns: [
@@ -442,26 +451,26 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
             {
               title: t("tableHeaders.wireAmount"),
               render: () => {
-                const a = b?.metadata?.wire_in_amount;
-                return a ? i(Number(a)) : "-";
+                const r = b?.metadata?.wire_in_amount;
+                return r ? i(Number(r)) : "-";
               }
             },
             {
               title: t("tableHeaders.wireTransferDeadline"),
               render: () => {
-                const a = b?.metadata?.wire_in_deadline, l = o.formatWithTime(a), y = o.formatShortWithYear(a);
-                return a ? `${l.time} on ${y}` : "-";
+                const r = b?.metadata?.wire_in_deadline, l = d.formatWithTime(r), p = d.formatShortWithYear(r);
+                return r ? `${l.time} on ${p}` : "-";
               }
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => b?.checkDate ? o.formatShortWithYear(b.checkDate) : "-"
+              render: () => b?.checkDate ? d.formatShortWithYear(b.checkDate) : "-"
             }
           ],
           data: [{}]
         }
-      ) : Q ? /* @__PURE__ */ r(
-        c,
+      ) : Z ? /* @__PURE__ */ a(
+        m,
         {
           label: t("payrollSummaryLabel"),
           columns: [
@@ -483,19 +492,19 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
             {
               title: t("tableHeaders.debitDate"),
               render: () => {
-                const a = b?.metadata?.debit_date;
-                return o.formatShortWithYear(a);
+                const r = b?.metadata?.debit_date;
+                return d.formatShortWithYear(r);
               }
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => b?.checkDate ? o.formatShortWithYear(b.checkDate) : "-"
+              render: () => b?.checkDate ? d.formatShortWithYear(b.checkDate) : "-"
             }
           ],
           data: [{}]
         }
-      ) : /* @__PURE__ */ r(
-        c,
+      ) : /* @__PURE__ */ a(
+        m,
         {
           label: t("payrollSummaryLabel"),
           columns: [
@@ -513,53 +522,53 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
             },
             {
               title: t("tableHeaders.debitDate"),
-              render: () => o.formatShortWithYear(Te)
+              render: () => d.formatShortWithYear(De)
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => o.formatShortWithYear(n.checkDate)
+              render: () => d.formatShortWithYear(n.checkDate)
             }
           ],
           data: [{}]
         }
       ),
-      ee > 0 && /* @__PURE__ */ r(
+      te > 0 && /* @__PURE__ */ a(
         L,
         {
           status: "warning",
-          label: t("alerts.checkPaymentWarning", { count: ee }),
-          children: /* @__PURE__ */ r(m, { children: t("alerts.checkPaymentWarningDescription") })
+          label: t("alerts.checkPaymentWarning", { count: te }),
+          children: /* @__PURE__ */ a(c, { children: t("alerts.checkPaymentWarningDescription") })
         }
       ),
-      /* @__PURE__ */ r(
-        fe,
+      /* @__PURE__ */ a(
+        he,
         {
-          onSelectionChange: ge,
-          selectedId: he,
+          onSelectionChange: Te,
+          selectedId: ge,
           "aria-label": t("dataViews.label"),
-          tabs: He
+          tabs: xe
         }
       ),
-      j && /* @__PURE__ */ r(
-        pe,
+      G && /* @__PURE__ */ a(
+        fe,
         {
-          isOpen: j,
+          isOpen: G,
           onClose: () => {
-            G(!1);
+            $(!1);
           },
-          onPrimaryActionClick: de,
+          onPrimaryActionClick: ce,
           shouldCloseOnBackdropClick: !0,
           primaryActionLabel: t("confirmCancelCta"),
           isDestructive: !0,
           closeActionLabel: t("declineCancelCta"),
-          title: t(z ? "cancelDialogTitleDismissal" : "cancelDialogTitle", {
-            startDate: o.formatLong(n.payPeriod?.startDate),
-            endDate: o.formatLongWithYear(n.payPeriod?.endDate)
+          title: t(K ? "cancelDialogTitleDismissal" : "cancelDialogTitle", {
+            startDate: d.formatLong(n.payPeriod?.startDate),
+            endDate: d.formatLongWithYear(n.payPeriod?.endDate)
           }),
-          children: /* @__PURE__ */ s(d, { gap: 14, flexDirection: "column", children: [
-            /* @__PURE__ */ r(m, { children: t("cancelDialogDescription") }),
-            we(n.employeeCompensations) && /* @__PURE__ */ r(m, { children: t("cancelDialogDescriptionDeadline", {
-              deadline: o.formatWithTime(n.payrollDeadline).time
+          children: /* @__PURE__ */ o(s, { gap: 14, flexDirection: "column", children: [
+            /* @__PURE__ */ a(c, { children: t("cancelDialogDescription") }),
+            _e(n.employeeCompensations) && /* @__PURE__ */ a(c, { children: t("cancelDialogDescriptionDeadline", {
+              deadline: d.formatWithTime(n.payrollDeadline).time
             }) })
           ] })
         }
@@ -568,6 +577,6 @@ const Ve = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate,
   ] }) });
 };
 export {
-  lt as PayrollOverviewPresentation
+  ot as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map