@gusto/embedded-react-sdk 0.24.1 → 0.26.0

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

@@ -1,142 +1,172 @@
-import { jsx as r, jsxs as d, Fragment as x } from "react/jsx-runtime";
-import { useTranslation as ue, Trans as be } from "react-i18next";
-import { useState as q, useRef as ye } from "react";
-import { calculateTotalPayroll as pe } from "../helpers.js";
-import he from "./PayrollOverviewPresentation.module.scss.js";
-import { Flex as f, FlexItem as z } from "../../Common/Flex/Flex.js";
-import "classnames";
-import { useComponentContext as fe } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useContainerBreakpoints as Te } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { useI18n as He } from "../../../i18n/I18n.js";
-import { useDateFormatter as De } from "../../../hooks/useDateFormatter.js";
-import ge from "../../../hooks/useNumberFormatter.js";
-import { firstLastName as A } from "../../../helpers/formattedStrings.js";
-import { PAYMENT_METHODS as Pe, FlsaStatus as J, compensationTypeLabels as k, PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as Q } from "../../../shared/constants.js";
-import xe from "../../../assets/icons/download-cloud.svg.js";
-import { PayrollLoading as ke } from "../../Common/PayrollLoading/PayrollLoading.js";
-import { FastAchSubmissionBlockerBanner as Ce } from "./SubmissionBlockers/FastAchSubmissionBlockerBanner.js";
-import { GenericBlocker as Ne } from "./SubmissionBlockers/GenericBlocker.js";
-import { DataView as m } from "../../Common/DataView/DataView.js";
-const we = (p, C) => p?.startDate && p.endDate ? C.formatPayPeriod(p.startDate, p.endDate) : { startDate: "", endDate: "" }, Xe = ({
+import { jsx as r, jsxs as s, Fragment as N } from "react/jsx-runtime";
+import { useTranslation as He, Trans as De } from "react-i18next";
+import { useState as ae, useRef as Pe } from "react";
+import { calculateTotalPayroll as Ce } from "../helpers.js";
+import { PayrollOverviewStatus as h } from "./PayrollOverviewTypes.js";
+import re from "./PayrollOverviewPresentation.module.scss.js";
+import { Flex as d } from "../../Common/Flex/Flex.js";
+import { Grid as ke } from "../../Common/Grid/Grid.js";
+import { useComponentContext as xe } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useContainerBreakpoints as Ne } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useI18n as Se } from "../../../i18n/I18n.js";
+import { useDateFormatter as we } from "../../../hooks/useDateFormatter.js";
+import _e from "../../../hooks/useNumberFormatter.js";
+import { firstLastName as U } from "../../../helpers/formattedStrings.js";
+import { PAYMENT_METHODS as ve, FlsaStatus as ne, compensationTypeLabels as S, PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as le } from "../../../shared/constants.js";
+import ie from "../../../assets/icons/download-cloud.svg.js";
+import { PayrollLoading as oe } from "../../Common/PayrollLoading/PayrollLoading.js";
+import { FastAchSubmissionBlockerBanner as Le } from "./SubmissionBlockers/FastAchSubmissionBlockerBanner.js";
+import { GenericBlocker as Ee } from "./SubmissionBlockers/GenericBlocker.js";
+import { DataView as c } from "../../Common/DataView/DataView.js";
+const Oe = (p, w) => p?.startDate && p.endDate ? w.formatPayPeriod(p.startDate, p.endDate) : { startDate: "", endDate: "" }, tt = ({
   onEdit: p,
-  onSubmit: C,
-  onCancel: Z,
-  onPayrollReceipt: ee,
-  onPaystubDownload: te,
-  employeeDetails: re,
-  payrollData: o,
-  bankAccount: O,
-  taxes: N,
-  isSubmitting: T = !1,
-  isProcessed: w,
-  alerts: M = [],
-  submissionBlockers: h = [],
-  selectedUnblockOptions: _ = {},
-  onUnblockOptionChange: W,
-  wireInConfirmationRequest: ae,
+  onSubmit: w,
+  onCancel: se,
+  onPayrollReceipt: de,
+  onPaystubDownload: V,
+  employeeDetails: me,
+  payrollData: i,
+  bankAccount: Y,
+  taxes: _,
+  status: g = h.Viewing,
+  isProcessed: T,
+  canCancel: ce = !1,
+  alerts: B = [],
+  submissionBlockers: f = [],
+  selectedUnblockOptions: v = {},
+  onUnblockOptionChange: I,
+  wireInConfirmationRequest: ue,
   withReimbursements: H = !0
 }) => {
-  const { Alert: Y, Button: D, ButtonIcon: ne, Dialog: le, Heading: V, Text: a, Tabs: ie } = fe();
-  He("Payroll.PayrollOverview");
-  const s = De(), { t } = ue("Payroll.PayrollOverview"), l = ge("currency"), [oe, se] = q("companyPays"), [B, U] = q(!1), I = ye(null), c = Te({ ref: I }).includes("small"), g = pe(o), de = o.payrollStatusMeta?.expectedDebitTime ?? o.payrollDeadline, F = (e) => e.taxes?.reduce(
-    (n, i) => i.employer ? n + i.amount : n,
+  const { Alert: L, Button: D, ButtonIcon: R, Dialog: be, Heading: F, Text: m, Tabs: ye } = xe();
+  Se("Payroll.PayrollOverview");
+  const o = we(), { t } = He("Payroll.PayrollOverview"), n = _e("currency"), [pe, fe] = ae("companyPays"), [j, G] = ae(!1), E = Pe(null), P = Ne({ ref: E }).includes("small"), C = g === h.Submitting || g === h.Cancelling, $ = /* @__PURE__ */ r(F, { as: "h1", children: t(T ? "summaryTitle" : "overviewTitle") }), z = /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(
+    De,
+    {
+      i18nKey: "pageSubtitle",
+      t,
+      components: { dateWrapper: /* @__PURE__ */ r(m, { weight: "bold", as: "span" }) },
+      values: Oe(i.payPeriod, o)
+    }
+  ) });
+  if (g === h.Cancelled)
+    return /* @__PURE__ */ r("div", { ref: E, className: re.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: [
+        $,
+        z
+      ] }) }),
+      /* @__PURE__ */ r(L, { status: "info", label: t("cancelledEmptyState") })
+    ] }) });
+  const k = Ce(i), he = i.payrollStatusMeta?.expectedDebitTime ?? i.payrollDeadline, K = (e) => e.taxes?.reduce(
+    (a, l) => l.employer ? a + l.amount : a,
     0
-  ) ?? 0, R = (e) => e.benefits?.reduce(
-    (n, i) => i.companyContribution ? n + i.companyContribution : n,
+  ) ?? 0, X = (e) => e.benefits?.reduce(
+    (a, l) => l.companyContribution ? a + l.companyContribution : a,
     0
-  ) ?? 0, L = (e) => e.fixedCompensations?.length ? Number(
+  ) ?? 0, O = (e) => e.fixedCompensations?.length ? Number(
     e.fixedCompensations.find(
-      (n) => n.name?.toLowerCase() === k.REIMBURSEMENT_NAME.toLowerCase()
+      (a) => a.name?.toLowerCase() === S.REIMBURSEMENT_NAME.toLowerCase()
     )?.amount || 0
-  ) : 0, ce = (e) => e.grossPay + L(e) + F(e) + R(e), u = new Map(re.map((e) => [e.uuid, e])), E = h.find(
+  ) : 0, ge = (e) => e.grossPay + O(e) + K(e) + X(e), u = new Map(me.map((e) => [e.uuid, e])), A = f.find(
     (e) => e.blockerType === "fast_ach_threshold_exceeded" || e.blockerType === "needs_earned_access_for_fast_ach"
-  ), S = E ? _[E.blockerType || ""] : void 0, b = E?.unblockOptions?.find(
-    (e) => e.unblockType === S
-  ), j = S === "wire_in", G = S === "move_to_four_day", P = (e) => e.hourlyCompensations?.reduce(
-    (n, i) => {
-      if (typeof i.name > "u")
-        return n;
-      const y = i.name.toLowerCase(), v = n[y] ?? 0;
-      return n[y] = v + Number(i.hours || 0), n;
+  ), M = A ? v[A.blockerType || ""] : void 0, b = A?.unblockOptions?.find(
+    (e) => e.unblockType === M
+  ), q = M === "wire_in", J = M === "move_to_four_day", x = (e) => e.hourlyCompensations?.reduce(
+    (a, 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;
     },
     {}
-  ) || {}, $ = (e) => e.paidTimeOff?.reduce((n, i) => n + Number(i.hours || 0), 0) ?? 0, K = o.employeeCompensations?.reduce(
-    (e, n) => !n.excluded && n.paymentMethod === Pe.check ? e + 1 : e,
+  ) || {}, Q = (e) => e.paidTimeOff?.reduce((a, l) => a + Number(l.hours || 0), 0) ?? 0, Z = i.employeeCompensations?.reduce(
+    (e, a) => !a.excluded && a.paymentMethod === ve.check ? e + 1 : e,
     0
-  ) ?? 0, X = [
+  ) ?? 0, ee = [
     {
       key: "employeeName",
       title: t("tableHeaders.employees"),
-      render: (e) => /* @__PURE__ */ r(a, { children: A({
+      render: (e) => U({
         first_name: u.get(e.employeeUuid)?.firstName,
         last_name: u.get(e.employeeUuid)?.lastName
-      }) })
+      })
     },
     {
       key: "grossPay",
       title: t("tableHeaders.grossPay"),
-      render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay) })
+      render: (e) => n(e.grossPay)
     },
     ...H ? [
       {
         key: "reimbursements",
         title: t("tableHeaders.reimbursements"),
-        render: (e) => /* @__PURE__ */ r(a, { children: l(L(e)) })
+        render: (e) => n(O(e))
       }
     ] : [],
     {
       key: "companyTaxes",
       title: t("tableHeaders.companyTaxes"),
-      render: (e) => /* @__PURE__ */ r(a, { children: l(F(e)) })
+      render: (e) => n(K(e))
     },
     {
       key: "companyBenefits",
       title: t("tableHeaders.companyBenefits"),
-      render: (e) => /* @__PURE__ */ r(a, { children: l(R(e)) })
+      render: (e) => n(X(e))
     },
     {
       key: "companyPays",
       title: t("tableHeaders.companyPays"),
-      render: (e) => /* @__PURE__ */ r(a, { children: l(ce(e)) })
+      render: (e) => n(ge(e))
     }
   ];
-  w && X.push({
+  T && P && ee.push({
     key: "paystubs",
     title: t("tableHeaders.paystub"),
-    render: (e) => /* @__PURE__ */ r(
-      ne,
+    render: (e) => /* @__PURE__ */ r(d, { justifyContent: "flex-end", children: /* @__PURE__ */ r(
+      R,
       {
         "aria-label": t("downloadPaystubLabel"),
         variant: "tertiary",
         onClick: () => {
-          e.employeeUuid && te(e.employeeUuid);
+          e.employeeUuid && V(e.employeeUuid);
         },
-        children: /* @__PURE__ */ r(xe, {})
+        children: /* @__PURE__ */ r(ie, {})
       }
-    )
+    ) })
   });
-  const me = [
+  const Te = [
     {
       id: "companyPays",
       label: t("dataViews.companyPaysTab"),
       content: /* @__PURE__ */ r(
-        m,
+        c,
         {
           label: t("dataViews.companyPaysTable"),
-          columns: X,
-          data: o.employeeCompensations,
+          columns: ee,
+          data: i.employeeCompensations,
+          itemMenu: T && !P ? (e) => /* @__PURE__ */ r(
+            R,
+            {
+              "aria-label": t("downloadPaystubLabel"),
+              variant: "tertiary",
+              onClick: () => {
+                e.employeeUuid && V(e.employeeUuid);
+              },
+              children: /* @__PURE__ */ r(ie, {})
+            }
+          ) : void 0,
           footer: () => ({
-            employeeName: /* @__PURE__ */ d(x, { children: [
-              /* @__PURE__ */ r(a, { children: t("tableHeaders.footerTotalsLabel") }),
-              /* @__PURE__ */ r(a, { children: t("tableHeaders.footerTotalsDescription") })
+            employeeName: /* @__PURE__ */ s(N, { children: [
+              /* @__PURE__ */ r(m, { weight: "semibold", size: "sm", children: t("tableHeaders.footerTotalsLabel") }),
+              /* @__PURE__ */ r(m, { variant: "supporting", size: "sm", children: t("tableHeaders.footerTotalsDescription") })
             ] }),
-            grossPay: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.grossPay ?? 0)) }),
+            grossPay: n(Number(i.totals?.grossPay ?? 0)),
             ...H ? {
-              reimbursements: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.reimbursements ?? 0)) })
+              reimbursements: n(Number(i.totals?.reimbursements ?? 0))
             } : {},
-            companyTaxes: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.employerTaxes ?? 0)) }),
-            companyBenefits: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.benefits ?? 0)) }),
-            companyPays: /* @__PURE__ */ r(a, { children: l(g) })
+            companyTaxes: n(Number(i.totals?.employerTaxes ?? 0)),
+            companyBenefits: n(Number(i.totals?.benefits ?? 0)),
+            companyPays: n(k)
           })
         }
       )
@@ -145,61 +175,61 @@ const we = (p, C) => p?.startDate && p.endDate ? C.formatPayPeriod(p.startDate,
       id: "hoursWorked",
       label: t("dataViews.hoursWorkedTab"),
       content: /* @__PURE__ */ r(
-        m,
+        c,
         {
           label: t("dataViews.hoursWorkedTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: A({
+              render: (e) => U({
                 first_name: u.get(e.employeeUuid)?.firstName,
                 last_name: u.get(e.employeeUuid)?.lastName
-              }) })
+              })
             },
             {
               title: t("tableHeaders.compensationType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: u.get(e.employeeUuid)?.jobs?.reduce((n, i) => {
-                if (i.primary) {
-                  const y = i.compensations?.find(
-                    (v) => v.uuid === i.currentCompensationUuid
+              render: (e) => u.get(e.employeeUuid)?.jobs?.reduce((a, l) => {
+                if (l.primary) {
+                  const y = l.compensations?.find(
+                    (W) => W.uuid === l.currentCompensationUuid
                   )?.flsaStatus;
                   switch (y) {
-                    case J.EXEMPT:
+                    case ne.EXEMPT:
                       return t("compensationTypeLabels.exempt");
-                    case J.NONEXEMPT:
+                    case ne.NONEXEMPT:
                       return t("compensationTypeLabels.nonexempt");
                     default:
                       return y ?? "";
                   }
                 }
-                return n;
-              }, "") })
+                return a;
+              }, "")
             },
             {
               title: t("tableHeaders.regular"),
-              render: (e) => /* @__PURE__ */ r(a, { children: P(e)[k.REGULAR_HOURS_NAME] || 0 })
+              render: (e) => x(e)[S.REGULAR_HOURS_NAME] || 0
             },
             {
               title: t("tableHeaders.overtime"),
-              render: (e) => /* @__PURE__ */ r(a, { children: P(e)[k.OVERTIME_NAME] || 0 })
+              render: (e) => x(e)[S.OVERTIME_NAME] || 0
             },
             {
               title: t("tableHeaders.doubleOT"),
-              render: (e) => /* @__PURE__ */ r(a, { children: P(e)[k.DOUBLE_OVERTIME_NAME] || 0 })
+              render: (e) => x(e)[S.DOUBLE_OVERTIME_NAME] || 0
             },
             {
               title: t("tableHeaders.timeOff"),
-              render: (e) => /* @__PURE__ */ r(a, { children: $(e) })
+              render: (e) => Q(e)
             },
             {
               title: t("tableHeaders.totalHours"),
-              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(P(e)).reduce(
-                (n, i) => n + i,
+              render: (e) => Object.values(x(e)).reduce(
+                (a, l) => a + l,
                 0
-              ) + $(e) })
+              ) + Q(e)
             }
           ],
-          data: o.employeeCompensations
+          data: i.employeeCompensations
         }
       )
     },
@@ -207,200 +237,173 @@ const we = (p, C) => p?.startDate && p.endDate ? C.formatPayPeriod(p.startDate,
       id: "employeeTakeHome",
       label: t("dataViews.employeeTakeHomeTab"),
       content: /* @__PURE__ */ r(
-        m,
+        c,
         {
           label: t("dataViews.employeeTakeHomeTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: A({
+              render: (e) => U({
                 first_name: u.get(e.employeeUuid)?.firstName,
                 last_name: u.get(e.employeeUuid)?.lastName
-              }) })
+              })
             },
             {
               title: t("tableHeaders.paymentType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: e.paymentMethod ?? "" })
+              render: (e) => e.paymentMethod ?? ""
             },
             {
               title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay ?? 0) })
+              render: (e) => n(e.grossPay ?? 0)
             },
             {
               title: t("tableHeaders.deductions"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => n(
                 e.deductions?.reduce(
-                  (n, i) => n + i.amount,
+                  (a, l) => a + l.amount,
                   0
                 ) ?? 0
-              ) })
+              )
             },
             ...H ? [
               {
                 title: t("tableHeaders.reimbursements"),
-                render: (e) => /* @__PURE__ */ r(a, { children: l(L(e)) })
+                render: (e) => n(O(e))
               }
             ] : [],
             {
               title: t("tableHeaders.employeeTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => n(
                 e.taxes?.reduce(
-                  (n, i) => i.employer ? n : n + i.amount,
+                  (a, l) => l.employer ? a : a + l.amount,
                   0
                 ) ?? 0
-              ) })
+              )
             },
             {
               title: t("tableHeaders.employeeBenefits"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => n(
                 e.benefits?.reduce(
-                  (n, i) => n + (i.employeeDeduction ?? 0),
+                  (a, l) => a + (l.employeeDeduction ?? 0),
                   0
                 ) ?? 0
-              ) })
+              )
             },
             {
               title: t("tableHeaders.payment"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.netPay ?? 0) })
+              render: (e) => n(e.netPay ?? 0)
             }
           ],
-          data: o.employeeCompensations
+          data: i.employeeCompensations
         }
       )
     },
     {
       id: "taxes",
       label: t("dataViews.taxesTab"),
-      content: /* @__PURE__ */ d(f, { flexDirection: "column", gap: 32, children: [
+      content: /* @__PURE__ */ s(d, { flexDirection: "column", gap: 32, children: [
         /* @__PURE__ */ r(
-          m,
+          c,
           {
             label: t("dataViews.taxesTable"),
             columns: [
               {
                 key: "taxDescription",
                 title: t("tableHeaders.taxDescription"),
-                render: (e) => /* @__PURE__ */ r(a, { children: e })
+                render: (e) => e
               },
               {
                 key: "byYourEmployees",
                 title: t("tableHeaders.byYourEmployees"),
-                render: (e) => /* @__PURE__ */ r(a, { children: l(N[e]?.employee ?? 0) })
+                render: (e) => n(_[e]?.employee ?? 0)
               },
               {
                 key: "byYourCompany",
                 title: t("tableHeaders.byYourCompany"),
-                render: (e) => /* @__PURE__ */ r(a, { children: l(N[e]?.employer ?? 0) })
+                render: (e) => n(_[e]?.employer ?? 0)
               }
             ],
             footer: () => ({
-              taxDescription: /* @__PURE__ */ r(a, { children: t("totalsLabel") }),
-              byYourEmployees: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.employeeTaxes ?? 0)) }),
-              byYourCompany: /* @__PURE__ */ r(a, { children: l(Number(o.totals?.employerTaxes ?? 0)) })
+              taxDescription: /* @__PURE__ */ r(m, { weight: "semibold", size: "sm", children: t("totalsLabel") }),
+              byYourEmployees: n(Number(i.totals?.employeeTaxes ?? 0)),
+              byYourCompany: n(Number(i.totals?.employerTaxes ?? 0))
             }),
-            data: Object.keys(N)
+            data: Object.keys(_)
           }
         ),
         /* @__PURE__ */ r(
-          m,
+          c,
           {
             label: t("dataViews.debitedTable"),
             columns: [
               {
                 title: t("tableHeaders.debitedByGusto"),
-                render: ({ label: e }) => /* @__PURE__ */ r(a, { children: e })
+                render: ({ label: e }) => e
               },
               {
                 title: t("tableHeaders.taxesTotal"),
-                render: ({ value: e }) => /* @__PURE__ */ r(a, { children: l(Number(e)) })
+                render: ({ value: e }) => n(Number(e))
               }
             ],
             data: [
-              { label: t("directDepositLabel"), value: o.totals?.netPayDebit || "0" },
+              { label: t("directDepositLabel"), value: i.totals?.netPayDebit || "0" },
               ...H ? [
                 {
                   label: t("reimbursementLabel"),
-                  value: o.totals?.reimbursementDebit || "0"
+                  value: i.totals?.reimbursementDebit || "0"
                 }
               ] : [],
               {
                 label: t("garnishmentsLabel"),
-                value: o.totals?.childSupportDebit || "0"
+                value: i.totals?.childSupportDebit || "0"
               },
-              { label: t("taxesLabel"), value: o.totals?.taxDebit || "0" }
+              { label: t("taxesLabel"), value: i.totals?.taxDebit || "0" }
             ]
           }
         )
       ] })
     }
-  ];
-  return /* @__PURE__ */ r("div", { ref: I, className: he.container, children: /* @__PURE__ */ d(f, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ d(
-      f,
+  ], te = T ? /* @__PURE__ */ s(N, { children: [
+    /* @__PURE__ */ r(D, { onClick: de, variant: "secondary", isDisabled: C, children: t("payrollReceiptCta") }),
+    ce && /* @__PURE__ */ r(
+      D,
       {
-        flexDirection: c ? "row" : "column",
-        justifyContent: c ? "space-between" : "normal",
-        alignItems: c ? "flex-start" : "stretch",
-        gap: c ? 0 : 16,
-        children: [
-          /* @__PURE__ */ d(z, { flexGrow: 1, children: [
-            /* @__PURE__ */ r(V, { as: "h1", children: t(w ? "summaryTitle" : "overviewTitle") }),
-            /* @__PURE__ */ r(a, { children: /* @__PURE__ */ r(
-              be,
-              {
-                i18nKey: "pageSubtitle",
-                t,
-                components: { dateWrapper: /* @__PURE__ */ r(a, { weight: "bold", as: "span" }) },
-                values: we(o.payPeriod, s)
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ r(z, { flexGrow: c ? 1 : 0, children: /* @__PURE__ */ r(
-            f,
-            {
-              flexDirection: c ? "row" : "column",
-              justifyContent: c ? "flex-end" : "normal",
-              alignItems: c ? "flex-start" : "stretch",
-              gap: 12,
-              children: w ? /* @__PURE__ */ d(x, { children: [
-                /* @__PURE__ */ r(D, { onClick: ee, variant: "secondary", isDisabled: T, children: t("payrollReceiptCta") }),
-                /* @__PURE__ */ r(
-                  D,
-                  {
-                    onClick: () => {
-                      U(!0);
-                    },
-                    variant: "error",
-                    isDisabled: T,
-                    children: t("cancelCta")
-                  }
-                )
-              ] }) : /* @__PURE__ */ d(x, { children: [
-                /* @__PURE__ */ r(D, { onClick: p, variant: "secondary", isDisabled: T, children: t("editCta") }),
-                /* @__PURE__ */ r(
-                  D,
-                  {
-                    onClick: C,
-                    isDisabled: T || h.length > 0 && (h.some(
-                      (e) => !Q.includes(
-                        e.blockerType || ""
-                      )
-                    ) || h.some(
-                      (e) => !_[e.blockerType || ""]
-                    )),
-                    children: t("submitCta")
-                  }
-                )
-              ] })
-            }
-          ) })
-        ]
+        onClick: () => {
+          G(!0);
+        },
+        variant: "error",
+        isDisabled: C,
+        children: t("cancelCta")
       }
-    ),
-    T ? /* @__PURE__ */ r(ke, { title: t("loadingTitle"), description: t("loadingDescription") }) : /* @__PURE__ */ d(x, { children: [
-      ae,
-      M.length > 0 && /* @__PURE__ */ r(f, { flexDirection: "column", gap: 16, children: M.map((e, n) => /* @__PURE__ */ r(
-        Y,
+    )
+  ] }) : /* @__PURE__ */ s(N, { children: [
+    /* @__PURE__ */ r(D, { onClick: p, variant: "secondary", isDisabled: C, children: t("editCta") }),
+    /* @__PURE__ */ r(
+      D,
+      {
+        onClick: w,
+        isDisabled: C || f.length > 0 && (f.some(
+          (e) => !le.includes(e.blockerType || "")
+        ) || f.some(
+          (e) => !v[e.blockerType || ""]
+        )),
+        children: t("submitCta")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ r("div", { ref: E, className: re.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: [
+        $,
+        z
+      ] }),
+      P && /* @__PURE__ */ r(d, { gap: 8, justifyContent: "flex-end", children: te })
+    ] }),
+    !P && /* @__PURE__ */ r(ke, { gridTemplateColumns: "1fr", gap: 8, children: te }),
+    g === h.Cancelling ? /* @__PURE__ */ r(oe, { title: t("cancellingTitle") }) : g === h.Submitting ? /* @__PURE__ */ r(oe, { title: t("loadingTitle"), description: t("loadingDescription") }) : /* @__PURE__ */ s(N, { children: [
+      ue,
+      B.length > 0 && /* @__PURE__ */ r(d, { flexDirection: "column", gap: 16, children: B.map((e, a) => /* @__PURE__ */ r(
+        L,
         {
           label: e.title,
           status: e.type,
@@ -409,149 +412,149 @@ const we = (p, C) => p?.startDate && p.endDate ? C.formatPayPeriod(p.startDate,
         },
         `${e.type}-${e.title}`
       )) }),
-      h.length > 0 && W && h.map((e) => {
-        const n = e.blockerType || "";
-        return Q.includes(n) ? /* @__PURE__ */ r(
-          Ce,
+      f.length > 0 && I && f.map((e) => {
+        const a = e.blockerType || "";
+        return le.includes(a) ? /* @__PURE__ */ r(
+          Le,
           {
             blocker: e,
-            selectedValue: _[n],
-            onUnblockOptionChange: W
+            selectedValue: v[a],
+            onUnblockOptionChange: I
           },
-          n
-        ) : /* @__PURE__ */ r(Ne, { blocker: e }, n);
+          a
+        ) : /* @__PURE__ */ r(Ee, { blocker: e }, a);
       }),
-      /* @__PURE__ */ r(V, { as: "h3", children: t(j ? "payrollSummaryTitleWire" : G ? "payrollSummaryTitleFourDay" : "payrollSummaryTitle") }),
-      j ? /* @__PURE__ */ r(
-        m,
+      /* @__PURE__ */ r(F, { as: "h3", children: t(q ? "payrollSummaryTitleWire" : J ? "payrollSummaryTitleFourDay" : "payrollSummaryTitle") }),
+      q ? /* @__PURE__ */ r(
+        c,
         {
           label: t("payrollSummaryLabel"),
           columns: [
             {
               title: t("tableHeaders.totalPayroll"),
-              render: () => /* @__PURE__ */ r(a, { children: l(g) })
+              render: () => n(k)
             },
             {
               title: t("tableHeaders.wireAmount"),
               render: () => {
-                const n = b?.metadata?.wire_in_amount;
-                return /* @__PURE__ */ r(a, { children: n ? l(Number(n)) : "-" });
+                const a = b?.metadata?.wire_in_amount;
+                return a ? n(Number(a)) : "-";
               }
             },
             {
               title: t("tableHeaders.wireTransferDeadline"),
               render: () => {
-                const n = b?.metadata?.wire_in_deadline, i = s.formatWithTime(n), y = s.formatShortWithYear(n);
-                return /* @__PURE__ */ r(a, { children: n ? `${i.time} on ${y}` : "-" });
+                const a = b?.metadata?.wire_in_deadline, l = o.formatWithTime(a), y = o.formatShortWithYear(a);
+                return a ? `${l.time} on ${y}` : "-";
               }
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => /* @__PURE__ */ r(a, { children: b?.checkDate ? s.formatShortWithYear(b.checkDate) : "-" })
+              render: () => b?.checkDate ? o.formatShortWithYear(b.checkDate) : "-"
             }
           ],
           data: [{}]
         }
-      ) : G ? /* @__PURE__ */ r(
-        m,
+      ) : J ? /* @__PURE__ */ r(
+        c,
         {
           label: t("payrollSummaryLabel"),
           columns: [
             {
               title: t("tableHeaders.totalPayroll"),
-              render: () => /* @__PURE__ */ r(a, { children: l(g) })
+              render: () => n(k)
             },
             {
               title: t("tableHeaders.debitAmount"),
               render: () => {
-                const e = o.totals?.companyDebit;
-                return /* @__PURE__ */ r(a, { children: l(Number(e ?? 0)) });
+                const e = i.totals?.companyDebit;
+                return n(Number(e ?? 0));
               }
             },
             {
               title: t("tableHeaders.debitAccount"),
-              render: () => /* @__PURE__ */ r(a, { children: O?.hiddenAccountNumber ?? "" })
+              render: () => Y?.hiddenAccountNumber ?? ""
             },
             {
               title: t("tableHeaders.debitDate"),
               render: () => {
-                const n = b?.metadata?.debit_date;
-                return /* @__PURE__ */ r(a, { children: s.formatShortWithYear(n) });
+                const a = b?.metadata?.debit_date;
+                return o.formatShortWithYear(a);
               }
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => /* @__PURE__ */ r(a, { children: b?.checkDate ? s.formatShortWithYear(b.checkDate) : "-" })
+              render: () => b?.checkDate ? o.formatShortWithYear(b.checkDate) : "-"
             }
           ],
           data: [{}]
         }
       ) : /* @__PURE__ */ r(
-        m,
+        c,
         {
           label: t("payrollSummaryLabel"),
           columns: [
             {
               title: t("tableHeaders.totalPayroll"),
-              render: () => /* @__PURE__ */ r(a, { children: l(g) })
+              render: () => n(k)
             },
             {
               title: t("tableHeaders.debitAmount"),
-              render: () => /* @__PURE__ */ r(a, { children: l(Number(o.totals?.companyDebit ?? 0)) })
+              render: () => n(Number(i.totals?.companyDebit ?? 0))
             },
             {
               title: t("tableHeaders.debitAccount"),
-              render: () => /* @__PURE__ */ r(a, { children: O?.hiddenAccountNumber ?? "" })
+              render: () => Y?.hiddenAccountNumber ?? ""
             },
             {
               title: t("tableHeaders.debitDate"),
-              render: () => /* @__PURE__ */ r(a, { children: s.formatShortWithYear(de) })
+              render: () => o.formatShortWithYear(he)
             },
             {
               title: t("tableHeaders.employeePayDate"),
-              render: () => /* @__PURE__ */ r(a, { children: s.formatShortWithYear(o.checkDate) })
+              render: () => o.formatShortWithYear(i.checkDate)
             }
           ],
           data: [{}]
         }
       ),
-      K > 0 && /* @__PURE__ */ r(
-        Y,
+      Z > 0 && /* @__PURE__ */ r(
+        L,
         {
           status: "warning",
-          label: t("alerts.checkPaymentWarning", { count: K }),
-          children: /* @__PURE__ */ r(a, { children: t("alerts.checkPaymentWarningDescription") })
+          label: t("alerts.checkPaymentWarning", { count: Z }),
+          children: /* @__PURE__ */ r(m, { children: t("alerts.checkPaymentWarningDescription") })
         }
       ),
       /* @__PURE__ */ r(
-        ie,
+        ye,
         {
-          onSelectionChange: se,
-          selectedId: oe,
+          onSelectionChange: fe,
+          selectedId: pe,
           "aria-label": t("dataViews.label"),
-          tabs: me
+          tabs: Te
         }
       ),
-      B && /* @__PURE__ */ r(
-        le,
+      j && /* @__PURE__ */ r(
+        be,
         {
-          isOpen: B,
+          isOpen: j,
           onClose: () => {
-            U(!1);
+            G(!1);
           },
-          onPrimaryActionClick: Z,
+          onPrimaryActionClick: se,
           shouldCloseOnBackdropClick: !0,
           primaryActionLabel: t("confirmCancelCta"),
           isDestructive: !0,
           closeActionLabel: t("declineCancelCta"),
           title: t("cancelDialogTitle", {
-            startDate: s.formatLong(o.payPeriod?.startDate),
-            endDate: s.formatLongWithYear(o.payPeriod?.endDate)
+            startDate: o.formatLong(i.payPeriod?.startDate),
+            endDate: o.formatLongWithYear(i.payPeriod?.endDate)
           }),
-          children: /* @__PURE__ */ d(f, { gap: 14, flexDirection: "column", children: [
-            /* @__PURE__ */ r(a, { children: t("cancelDialogDescription") }),
-            /* @__PURE__ */ r(a, { children: t("cancelDialogDescriptionDeadline", {
-              deadline: s.formatWithTime(o.payrollDeadline).time
+          children: /* @__PURE__ */ s(d, { gap: 14, flexDirection: "column", children: [
+            /* @__PURE__ */ r(m, { children: t("cancelDialogDescription") }),
+            /* @__PURE__ */ r(m, { children: t("cancelDialogDescriptionDeadline", {
+              deadline: o.formatWithTime(i.payrollDeadline).time
             }) })
           ] })
         }
@@ -560,6 +563,6 @@ const we = (p, C) => p?.startDate && p.endDate ? C.formatPayPeriod(p.startDate,
   ] }) });
 };
 export {
-  Xe as PayrollOverviewPresentation
+  tt as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map