@gusto/embedded-react-sdk 0.13.4 → 0.14.0

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

@@ -1,432 +1,478 @@
-import { jsx as r, jsxs as d, Fragment as _ } from "react/jsx-runtime";
-import { useTranslation as K } from "react-i18next";
-import { useState as B } from "react";
-import { Flex as u } from "../../Common/Flex/Flex.js";
+import { jsx as t, jsxs as s, Fragment as D } from "react/jsx-runtime";
+import { useTranslation as ne, Trans as ae } from "react-i18next";
+import { useState as Y } from "react";
+import { Flex as d, FlexItem as j } from "../../Common/Flex/Flex.js";
 import "classnames";
-import { FlsaStatus as R, compensationTypeLabels as D } from "../../../shared/constants.js";
-import { useComponentContext as Q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as ee } from "../../../i18n/I18n.js";
-import { useLocale as te } from "../../../contexts/LocaleProvider/useLocale.js";
-import { parseDateStringToLocal as p } from "../../../helpers/dateFormatting.js";
-import re from "../../Common/hooks/useNumberFormatter.js";
+import { PAYMENT_METHODS as ie, FlsaStatus as W, compensationTypeLabels as P } from "../../../shared/constants.js";
+import { useComponentContext as le } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as oe } from "../../../i18n/I18n.js";
+import { useLocale as se } from "../../../contexts/LocaleProvider/useLocale.js";
+import { parseDateStringToLocal as y } from "../../../helpers/dateFormatting.js";
+import de from "../../Common/hooks/useNumberFormatter.js";
 import { firstLastName as S } from "../../../helpers/formattedStrings.js";
-import ae from "../../../assets/icons/download-cloud.svg.js";
+import ce from "../../../assets/icons/download-cloud.svg.js";
+import { useLoadingIndicator as me } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { DataView as b } from "../../Common/DataView/DataView.js";
-const ne = ({
-  payPeriod: c,
-  locale: h,
-  t: f
+const ue = ({
+  payPeriod: m,
+  locale: g
 }) => {
-  if (c?.startDate && c.endDate) {
-    const g = p(c.startDate), T = p(c.endDate);
-    if (g && T) {
-      const x = g.toLocaleDateString(h, {
+  if (m?.startDate && m.endDate) {
+    const T = y(m.startDate), H = y(m.endDate);
+    if (T && H) {
+      const N = T.toLocaleDateString(g, {
         month: "long",
         day: "numeric"
-      }), l = T.toLocaleDateString(h, {
+      }), x = H.toLocaleDateString(g, {
         month: "short",
         day: "numeric",
         year: "numeric"
       });
-      return f("pageSubtitle", { startDate: x, endDate: l });
+      return { startDate: N, endDate: x };
     }
   }
-  return f("pageSubtitle", { startDate: "", endDate: "" });
-}, Te = ({
-  onEdit: c,
-  onSubmit: h,
-  onCancel: f,
-  onPayrollReceipt: g,
-  onPaystubDownload: T,
-  employeeDetails: x,
-  payrollData: l,
-  bankAccount: I,
-  taxes: L,
-  isSubmitting: E = !1,
-  isProcessed: P,
-  alerts: k
+  return { startDate: "", endDate: "" };
+}, we = ({
+  onEdit: m,
+  onSubmit: g,
+  onCancel: T,
+  onPayrollReceipt: H,
+  onPaystubDownload: N,
+  onBack: x,
+  employeeDetails: G,
+  payrollData: i,
+  bankAccount: X,
+  taxes: k,
+  isSubmitting: h = !1,
+  isProcessed: L,
+  alerts: O
 }) => {
-  const { Alert: Y, Button: H, ButtonIcon: j, Dialog: W, Heading: O, Text: a, Tabs: G } = Q();
-  ee("Payroll.PayrollOverview");
-  const { locale: m } = te(), { t } = K("Payroll.PayrollOverview"), o = re("currency"), [X, $] = B("companyPays"), [F, N] = B(!1), Z = l.totals ? parseFloat(l.totals.grossPay ?? "0") + parseFloat(l.totals.employerTaxes ?? "0") + parseFloat(l.totals.reimbursements ?? "0") + parseFloat(l.totals.benefits ?? "0") : 0, q = l.payrollStatusMeta?.expectedDebitTime ? p(l.payrollStatusMeta.expectedDebitTime) : l.payrollDeadline, M = (e) => e.taxes?.reduce(
-    (n, i) => i.employer ? n + i.amount : n,
+  const { Alert: M, Button: p, ButtonIcon: $, Dialog: z, Heading: w, Text: n, Tabs: K, LoadingSpinner: Z } = le();
+  oe("Payroll.PayrollOverview");
+  const { locale: u } = se(), { t: r } = ne("Payroll.PayrollOverview"), o = de("currency"), [q, J] = Y("companyPays"), [U, A] = Y(!1), { LoadingIndicator: Q } = me(), V = i.totals ? Number(i.totals.grossPay ?? 0) + Number(i.totals.employerTaxes ?? 0) + Number(i.totals.reimbursements ?? 0) + Number(i.totals.benefits ?? 0) : 0, ee = i.payrollStatusMeta?.expectedDebitTime ? y(i.payrollStatusMeta.expectedDebitTime) : i.payrollDeadline, _ = (e) => e.taxes?.reduce(
+    (a, l) => l.employer ? a + l.amount : a,
     0
-  ) ?? 0, U = (e) => e.benefits?.reduce(
-    (n, i) => i.companyContribution ? n + i.companyContribution : n,
+  ) ?? 0, I = (e) => e.benefits?.reduce(
+    (a, l) => l.companyContribution ? a + l.companyContribution : a,
     0
-  ) ?? 0, w = (e) => e.fixedCompensations?.length ? parseFloat(
+  ) ?? 0, v = (e) => e.fixedCompensations?.length ? Number(
     e.fixedCompensations.find(
-      (n) => n.name?.toLowerCase() === D.REIMBURSEMENT_NAME.toLowerCase()
-    )?.amount || "0"
-  ) : 0, z = (e) => e.grossPay + w(e) + M(e) + U(e), s = new Map(x.map((e) => [e.uuid, e])), C = (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 + parseFloat(i.hours || "0"), n;
+      (a) => a.name?.toLowerCase() === P.REIMBURSEMENT_NAME.toLowerCase()
+    )?.amount || 0
+  ) : 0, te = (e) => e.grossPay + v(e) + _(e) + I(e), c = new Map(G.map((e) => [e.uuid, e])), C = (e) => e.hourlyCompensations?.reduce(
+    (a, l) => {
+      if (typeof l.name > "u")
+        return a;
+      const f = l.name.toLowerCase(), E = a[f] ?? 0;
+      return a[f] = E + Number(l.hours || 0), a;
     },
     {}
-  ) || {}, V = (e) => e.paidTimeOff?.reduce((n, i) => n + parseFloat(i.hours || "0"), 0) ?? 0, A = [
+  ) || {}, B = (e) => e.paidTimeOff?.reduce((a, l) => a + Number(l.hours || 0), 0) ?? 0, R = i.employeeCompensations?.reduce(
+    (e, a) => !a.excluded && a.paymentMethod === ie.check ? e + 1 : e,
+    0
+  ) ?? 0, F = [
     {
-      title: t("tableHeaders.employees"),
-      render: (e) => /* @__PURE__ */ r(a, { children: S({
-        first_name: s.get(e.employeeUuid)?.firstName,
-        last_name: s.get(e.employeeUuid)?.lastName
+      key: "employeeName",
+      title: r("tableHeaders.employees"),
+      render: (e) => /* @__PURE__ */ t(n, { children: S({
+        first_name: c.get(e.employeeUuid)?.firstName,
+        last_name: c.get(e.employeeUuid)?.lastName
       }) })
     },
     {
-      title: t("tableHeaders.grossPay"),
-      render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay) })
+      key: "grossPay",
+      title: r("tableHeaders.grossPay"),
+      render: (e) => /* @__PURE__ */ t(n, { children: o(e.grossPay) })
     },
     {
-      title: t("tableHeaders.reimbursements"),
-      render: (e) => /* @__PURE__ */ r(a, { children: o(w(e)) })
+      key: "reimbursements",
+      title: r("tableHeaders.reimbursements"),
+      render: (e) => /* @__PURE__ */ t(n, { children: o(v(e)) })
     },
     {
-      title: t("tableHeaders.companyTaxes"),
-      render: (e) => /* @__PURE__ */ r(a, { children: o(M(e)) })
+      key: "companyTaxes",
+      title: r("tableHeaders.companyTaxes"),
+      render: (e) => /* @__PURE__ */ t(n, { children: o(_(e)) })
     },
     {
-      title: t("tableHeaders.companyBenefits"),
-      render: (e) => /* @__PURE__ */ r(a, { children: o(U(e)) })
+      key: "companyBenefits",
+      title: r("tableHeaders.companyBenefits"),
+      render: (e) => /* @__PURE__ */ t(n, { children: o(I(e)) })
     },
     {
-      title: t("tableHeaders.companyPays"),
-      render: (e) => /* @__PURE__ */ r(a, { children: o(z(e)) })
+      key: "companyPays",
+      title: r("tableHeaders.companyPays"),
+      render: (e) => /* @__PURE__ */ t(n, { children: o(te(e)) })
     }
   ];
-  P && A.push({
-    title: t("tableHeaders.paystub"),
-    render: (e) => /* @__PURE__ */ r(
-      j,
+  L && F.push({
+    key: "paystubs",
+    title: r("tableHeaders.paystub"),
+    render: (e) => /* @__PURE__ */ t(
+      $,
       {
-        "aria-label": t("downloadPaystubLabel"),
+        "aria-label": r("downloadPaystubLabel"),
         variant: "tertiary",
         onClick: () => {
-          e.employeeUuid && T(e.employeeUuid);
+          e.employeeUuid && N(e.employeeUuid);
         },
-        children: /* @__PURE__ */ r(ae, {})
+        children: /* @__PURE__ */ t(ce, {})
       }
     )
   });
-  const J = [
+  const re = [
     {
       id: "companyPays",
-      label: t("dataViews.companyPaysTab"),
-      content: /* @__PURE__ */ r(
+      label: r("dataViews.companyPaysTab"),
+      content: /* @__PURE__ */ t(
         b,
         {
-          label: t("dataViews.companyPaysTable"),
-          columns: A,
-          data: l.employeeCompensations
+          label: r("dataViews.companyPaysTable"),
+          columns: F,
+          data: i.employeeCompensations,
+          footer: () => ({
+            employeeName: /* @__PURE__ */ s(D, { children: [
+              /* @__PURE__ */ t(n, { children: r("tableHeaders.footerTotalsLabel") }),
+              /* @__PURE__ */ t(n, { children: r("tableHeaders.footerTotalsDescription") })
+            ] }),
+            grossPay: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.grossPay ?? 0)) }),
+            reimbursements: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.reimbursements ?? 0)) }),
+            companyTaxes: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.employerTaxes ?? 0)) }),
+            companyBenefits: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.benefits ?? 0)) }),
+            companyPays: /* @__PURE__ */ t(n, { children: o(V) })
+          })
         }
       )
     },
     {
       id: "hoursWorked",
-      label: t("dataViews.hoursWorkedTab"),
-      content: /* @__PURE__ */ r(
+      label: r("dataViews.hoursWorkedTab"),
+      content: /* @__PURE__ */ t(
         b,
         {
-          label: t("dataViews.hoursWorkedTable"),
+          label: r("dataViews.hoursWorkedTable"),
           columns: [
             {
-              title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: S({
-                first_name: s.get(e.employeeUuid)?.firstName,
-                last_name: s.get(e.employeeUuid)?.lastName
+              title: r("tableHeaders.employees"),
+              render: (e) => /* @__PURE__ */ t(n, { children: S({
+                first_name: c.get(e.employeeUuid)?.firstName,
+                last_name: c.get(e.employeeUuid)?.lastName
               }) })
             },
             {
-              title: t("tableHeaders.compensationType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: s.get(e.employeeUuid)?.jobs?.reduce((n, i) => {
-                if (i.primary) {
-                  const y = i.compensations?.find(
-                    (v) => v.uuid === i.currentCompensationUuid
+              title: r("tableHeaders.compensationType"),
+              render: (e) => /* @__PURE__ */ t(n, { children: c.get(e.employeeUuid)?.jobs?.reduce((a, l) => {
+                if (l.primary) {
+                  const f = l.compensations?.find(
+                    (E) => E.uuid === l.currentCompensationUuid
                   )?.flsaStatus;
-                  switch (y) {
-                    case R.EXEMPT:
-                      return t("compensationTypeLabels.exempt");
-                    case R.NONEXEMPT:
-                      return t("compensationTypeLabels.nonexempt");
+                  switch (f) {
+                    case W.EXEMPT:
+                      return r("compensationTypeLabels.exempt");
+                    case W.NONEXEMPT:
+                      return r("compensationTypeLabels.nonexempt");
                     default:
-                      return y ?? "";
+                      return f ?? "";
                   }
                 }
-                return n;
+                return a;
               }, "") })
             },
             {
-              title: t("tableHeaders.regular"),
-              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.REGULAR_HOURS_NAME] || 0 })
+              title: r("tableHeaders.regular"),
+              render: (e) => /* @__PURE__ */ t(n, { children: C(e)[P.REGULAR_HOURS_NAME] || 0 })
             },
             {
-              title: t("tableHeaders.overtime"),
-              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.OVERTIME_NAME] || 0 })
+              title: r("tableHeaders.overtime"),
+              render: (e) => /* @__PURE__ */ t(n, { children: C(e)[P.OVERTIME_NAME] || 0 })
             },
             {
-              title: t("tableHeaders.doubleOT"),
-              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.DOUBLE_OVERTIME_NAME] || 0 })
+              title: r("tableHeaders.doubleOT"),
+              render: (e) => /* @__PURE__ */ t(n, { children: C(e)[P.DOUBLE_OVERTIME_NAME] || 0 })
             },
             {
-              title: t("tableHeaders.timeOff"),
-              render: (e) => /* @__PURE__ */ r(a, { children: V(e) })
+              title: r("tableHeaders.timeOff"),
+              render: (e) => /* @__PURE__ */ t(n, { children: B(e) })
             },
             {
-              title: t("tableHeaders.totalHours"),
-              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(C(e)).reduce(
-                (n, i) => n + i,
+              title: r("tableHeaders.totalHours"),
+              render: (e) => /* @__PURE__ */ t(n, { children: Object.values(C(e)).reduce(
+                (a, l) => a + l,
                 0
-              ) + V(e) })
+              ) + B(e) })
             }
           ],
-          data: l.employeeCompensations
+          data: i.employeeCompensations
         }
       )
     },
     {
       id: "employeeTakeHome",
-      label: t("dataViews.employeeTakeHomeTab"),
-      content: /* @__PURE__ */ r(
+      label: r("dataViews.employeeTakeHomeTab"),
+      content: /* @__PURE__ */ t(
         b,
         {
-          label: t("dataViews.employeeTakeHomeTable"),
+          label: r("dataViews.employeeTakeHomeTable"),
           columns: [
             {
-              title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: S({
-                first_name: s.get(e.employeeUuid)?.firstName,
-                last_name: s.get(e.employeeUuid)?.lastName
+              title: r("tableHeaders.employees"),
+              render: (e) => /* @__PURE__ */ t(n, { children: S({
+                first_name: c.get(e.employeeUuid)?.firstName,
+                last_name: c.get(e.employeeUuid)?.lastName
               }) })
             },
             {
-              title: t("tableHeaders.paymentType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: e.paymentMethod ?? "" })
+              title: r("tableHeaders.paymentType"),
+              render: (e) => /* @__PURE__ */ t(n, { children: e.paymentMethod ?? "" })
             },
             {
-              title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay ?? 0) })
+              title: r("tableHeaders.grossPay"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(e.grossPay ?? 0) })
             },
             {
-              title: t("tableHeaders.deductions"),
-              render: (e) => /* @__PURE__ */ r(a, { children: o(
+              title: r("tableHeaders.deductions"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(
                 e.deductions?.reduce(
-                  (n, i) => n + i.amount,
+                  (a, l) => a + l.amount,
                   0
                 ) ?? 0
               ) })
             },
             {
-              title: t("tableHeaders.reimbursements"),
-              render: (e) => /* @__PURE__ */ r(a, { children: o(w(e)) })
+              title: r("tableHeaders.reimbursements"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(v(e)) })
             },
             {
-              title: t("tableHeaders.employeeTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: o(
+              title: r("tableHeaders.employeeTaxes"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(
                 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: o(
+              title: r("tableHeaders.employeeBenefits"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(
                 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: o(e.netPay ?? 0) })
+              title: r("tableHeaders.payment"),
+              render: (e) => /* @__PURE__ */ t(n, { children: o(e.netPay ?? 0) })
             }
           ],
-          data: l.employeeCompensations
+          data: i.employeeCompensations
         }
       )
     },
     {
       id: "taxes",
-      label: t("dataViews.taxesTab"),
-      content: /* @__PURE__ */ d(u, { flexDirection: "column", gap: 32, children: [
-        /* @__PURE__ */ r(
+      label: r("dataViews.taxesTab"),
+      content: /* @__PURE__ */ s(d, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ t(
           b,
           {
-            label: t("dataViews.taxesTable"),
+            label: r("dataViews.taxesTable"),
             columns: [
               {
                 key: "taxDescription",
-                title: t("tableHeaders.taxDescription"),
-                render: (e) => /* @__PURE__ */ r(a, { children: e })
+                title: r("tableHeaders.taxDescription"),
+                render: (e) => /* @__PURE__ */ t(n, { children: e })
               },
               {
                 key: "byYourEmployees",
-                title: t("tableHeaders.byYourEmployees"),
-                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employee ?? 0) })
+                title: r("tableHeaders.byYourEmployees"),
+                render: (e) => /* @__PURE__ */ t(n, { children: o(k[e]?.employee ?? 0) })
               },
               {
                 key: "byYourCompany",
-                title: t("tableHeaders.byYourCompany"),
-                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employer ?? 0) })
+                title: r("tableHeaders.byYourCompany"),
+                render: (e) => /* @__PURE__ */ t(n, { children: o(k[e]?.employer ?? 0) })
               }
             ],
             footer: () => ({
-              taxDescription: /* @__PURE__ */ r(a, { children: t("totalsLabel") }),
-              byYourEmployees: /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.employeeTaxes ?? "0")) }),
-              byYourCompany: /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.employerTaxes ?? "0")) })
+              taxDescription: /* @__PURE__ */ t(n, { children: r("totalsLabel") }),
+              byYourEmployees: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.employeeTaxes ?? 0)) }),
+              byYourCompany: /* @__PURE__ */ t(n, { children: o(Number(i.totals?.employerTaxes ?? 0)) })
             }),
-            data: Object.keys(L)
+            data: Object.keys(k)
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t(
           b,
           {
-            label: t("dataViews.debitedTable"),
+            label: r("dataViews.debitedTable"),
             columns: [
               {
-                title: t("tableHeaders.debitedByGusto"),
-                render: ({ label: e }) => /* @__PURE__ */ r(a, { children: e })
+                title: r("tableHeaders.debitedByGusto"),
+                render: ({ label: e }) => /* @__PURE__ */ t(n, { children: e })
               },
               {
-                title: t("tableHeaders.taxesTotal"),
-                render: ({ value: e }) => /* @__PURE__ */ r(a, { children: o(parseFloat(e)) })
+                title: r("tableHeaders.taxesTotal"),
+                render: ({ value: e }) => /* @__PURE__ */ t(n, { children: o(Number(e)) })
               }
             ],
             data: [
-              { label: t("directDepositLabel"), value: l.totals?.netPayDebit || "0" },
+              { label: r("directDepositLabel"), value: i.totals?.netPayDebit || "0" },
               {
-                label: t("reimbursementLabel"),
-                value: l.totals?.reimbursementDebit || "0"
+                label: r("reimbursementLabel"),
+                value: i.totals?.reimbursementDebit || "0"
               },
               {
-                label: t("garnishmentsLabel"),
-                value: l.totals?.childSupportDebit || "0"
+                label: r("garnishmentsLabel"),
+                value: i.totals?.childSupportDebit || "0"
               },
-              { label: t("taxesLabel"), value: l.totals?.taxDebit || "0" }
+              { label: r("taxesLabel"), value: i.totals?.taxDebit || "0" }
             ]
           }
         )
       ] })
     }
   ];
-  return /* @__PURE__ */ d(u, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ d(u, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ d("div", { children: [
-        /* @__PURE__ */ r(O, { as: "h1", children: t(P ? "summaryTitle" : "overviewTitle") }),
-        /* @__PURE__ */ r(a, { children: ne({ payPeriod: l.payPeriod, locale: m, t }) })
+  return /* @__PURE__ */ s(d, { flexDirection: "column", alignItems: "stretch", children: [
+    x && /* @__PURE__ */ t(d, { justifyContent: "flex-end", children: /* @__PURE__ */ t(p, { onClick: x, variant: "secondary", children: r("backButton") }) }),
+    /* @__PURE__ */ s(d, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ s(j, { flexGrow: 1, children: [
+        /* @__PURE__ */ t(w, { as: "h1", children: r(L ? "summaryTitle" : "overviewTitle") }),
+        /* @__PURE__ */ t(n, { children: /* @__PURE__ */ t(
+          ae,
+          {
+            i18nKey: "pageSubtitle",
+            t: r,
+            components: { dateWrapper: /* @__PURE__ */ t(n, { weight: "bold", as: "span" }) },
+            values: ue({ payPeriod: i.payPeriod, locale: u })
+          }
+        ) })
       ] }),
-      /* @__PURE__ */ r(u, { justifyContent: "flex-end", children: P ? /* @__PURE__ */ d(_, { children: [
-        /* @__PURE__ */ r(H, { onClick: g, variant: "secondary", children: t("payrollReceiptCta") }),
-        /* @__PURE__ */ r(
-          H,
+      /* @__PURE__ */ t(j, { flexGrow: 1, children: /* @__PURE__ */ t(d, { justifyContent: "flex-end", children: L ? /* @__PURE__ */ s(D, { children: [
+        /* @__PURE__ */ t(p, { onClick: H, variant: "secondary", isDisabled: h, children: r("payrollReceiptCta") }),
+        /* @__PURE__ */ t(
+          p,
           {
             onClick: () => {
-              N(!0);
+              A(!0);
             },
             variant: "error",
-            children: t("cancelCta")
+            isDisabled: h,
+            children: r("cancelCta")
           }
         )
-      ] }) : /* @__PURE__ */ d(_, { children: [
-        /* @__PURE__ */ r(H, { onClick: c, variant: "secondary", isDisabled: E, children: t("editCta") }),
-        /* @__PURE__ */ r(H, { onClick: h, isLoading: E, children: t("submitCta") })
-      ] }) })
+      ] }) : /* @__PURE__ */ s(D, { children: [
+        /* @__PURE__ */ t(p, { onClick: m, variant: "secondary", isDisabled: h, children: r("editCta") }),
+        /* @__PURE__ */ t(p, { onClick: g, isDisabled: h, children: r("submitCta") })
+      ] }) }) })
     ] }),
-    k?.length && /* @__PURE__ */ r(u, { flexDirection: "column", gap: 16, children: k.map((e, n) => /* @__PURE__ */ r(Y, { label: e.title, status: e.type, children: e.content ?? null }, `${e.type}-${e.title}`)) }),
-    /* @__PURE__ */ r(O, { as: "h3", children: t("payrollSummaryTitle") }),
-    /* @__PURE__ */ r(
-      b,
-      {
-        label: t("payrollSummaryLabel"),
-        columns: [
-          {
-            title: t("tableHeaders.totalPayroll"),
-            render: () => /* @__PURE__ */ r(a, { children: o(Z) })
-          },
-          {
-            title: t("tableHeaders.debitAmount"),
-            render: () => /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.companyDebit ?? "0")) })
-          },
-          {
-            title: t("tableHeaders.debitAccount"),
-            render: () => /* @__PURE__ */ r(a, { children: I?.hiddenAccountNumber ?? "" })
-          },
-          {
-            title: t("tableHeaders.debitDate"),
-            render: () => /* @__PURE__ */ r(a, { children: q?.toLocaleString(m, {
-              month: "short",
-              day: "numeric",
-              year: "numeric"
-            }) })
+    h ? /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ s(d, { flexDirection: "column", alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ t(Z, { size: "lg" }),
+      /* @__PURE__ */ t(w, { as: "h4", children: r("loadingTitle") }),
+      /* @__PURE__ */ t(n, { children: r("loadingDescription") })
+    ] }) }) : /* @__PURE__ */ s(D, { children: [
+      O?.length && /* @__PURE__ */ t(d, { flexDirection: "column", gap: 16, children: O.map((e, a) => /* @__PURE__ */ t(M, { label: e.title, status: e.type, children: e.content ?? null }, `${e.type}-${e.title}`)) }),
+      /* @__PURE__ */ t(w, { as: "h3", children: r("payrollSummaryTitle") }),
+      /* @__PURE__ */ t(
+        b,
+        {
+          label: r("payrollSummaryLabel"),
+          columns: [
+            {
+              title: r("tableHeaders.totalPayroll"),
+              render: () => /* @__PURE__ */ t(n, { children: o(V) })
+            },
+            {
+              title: r("tableHeaders.debitAmount"),
+              render: () => /* @__PURE__ */ t(n, { children: o(Number(i.totals?.companyDebit ?? 0)) })
+            },
+            {
+              title: r("tableHeaders.debitAccount"),
+              render: () => /* @__PURE__ */ t(n, { children: X?.hiddenAccountNumber ?? "" })
+            },
+            {
+              title: r("tableHeaders.debitDate"),
+              render: () => /* @__PURE__ */ t(n, { children: ee?.toLocaleString(u, {
+                month: "short",
+                day: "numeric",
+                year: "numeric"
+              }) })
+            },
+            {
+              title: r("tableHeaders.employeesPayDate"),
+              render: () => /* @__PURE__ */ t(n, { children: y(i.checkDate)?.toLocaleDateString(u, {
+                month: "short",
+                day: "numeric",
+                year: "numeric"
+              }) })
+            }
+          ],
+          data: [{}]
+        }
+      ),
+      R > 0 && /* @__PURE__ */ t(
+        M,
+        {
+          status: "warning",
+          label: r("alerts.checkPaymentWarning", { count: R }),
+          children: /* @__PURE__ */ t(n, { children: r("alerts.checkPaymentWarningDescription") })
+        }
+      ),
+      /* @__PURE__ */ t(
+        K,
+        {
+          onSelectionChange: J,
+          selectedId: q,
+          "aria-label": r("dataViews.label"),
+          tabs: re
+        }
+      ),
+      U && /* @__PURE__ */ t(
+        z,
+        {
+          isOpen: U,
+          onClose: () => {
+            A(!1);
           },
-          {
-            title: t("tableHeaders.employeesPayDate"),
-            render: () => /* @__PURE__ */ r(a, { children: p(l.checkDate)?.toLocaleDateString(m, {
-              month: "short",
+          onPrimaryActionClick: T,
+          shouldCloseOnBackdropClick: !0,
+          primaryActionLabel: r("confirmCancelCta"),
+          isDestructive: !0,
+          closeActionLabel: r("declineCancelCta"),
+          title: r("cancelDialogTitle", {
+            startDate: y(
+              i.payPeriod?.startDate ?? ""
+            )?.toLocaleDateString(u, {
+              month: "long",
+              day: "numeric"
+            }),
+            endDate: y(
+              i.payPeriod?.endDate ?? ""
+            )?.toLocaleDateString(u, {
+              month: "long",
               day: "numeric",
               year: "numeric"
-            }) })
-          }
-        ],
-        data: [{}]
-      }
-    ),
-    /* @__PURE__ */ r(
-      G,
-      {
-        onSelectionChange: $,
-        selectedId: X,
-        "aria-label": t("dataViews.label"),
-        tabs: J
-      }
-    ),
-    F && /* @__PURE__ */ r(
-      W,
-      {
-        isOpen: F,
-        onClose: () => {
-          N(!1);
-        },
-        onPrimaryActionClick: f,
-        shouldCloseOnBackdropClick: !0,
-        primaryActionLabel: t("confirmCancelCta"),
-        isDestructive: !0,
-        closeActionLabel: t("declineCancelCta"),
-        title: t("cancelDialogTitle", {
-          startDate: p(
-            l.payPeriod?.startDate ?? ""
-          )?.toLocaleDateString(m, {
-            month: "long",
-            day: "numeric"
-          }),
-          endDate: p(
-            l.payPeriod?.endDate ?? ""
-          )?.toLocaleDateString(m, {
-            month: "long",
-            day: "numeric",
-            year: "numeric"
-          })
-        }),
-        children: /* @__PURE__ */ d(u, { gap: 14, flexDirection: "column", children: [
-          /* @__PURE__ */ r(a, { children: t("cancelDialogDescription") }),
-          /* @__PURE__ */ r(a, { children: t("cancelDialogDescriptionDeadline", {
-            deadline: (l.payrollDeadline ?? "").toLocaleString(m, {
-              month: "short",
-              day: "numeric",
-              year: "numeric",
-              hour: "numeric",
-              minute: "numeric",
-              timeZoneName: "short"
             })
-          }) })
-        ] })
-      }
-    )
+          }),
+          children: /* @__PURE__ */ s(d, { gap: 14, flexDirection: "column", children: [
+            /* @__PURE__ */ t(n, { children: r("cancelDialogDescription") }),
+            /* @__PURE__ */ t(n, { children: r("cancelDialogDescriptionDeadline", {
+              deadline: (i.payrollDeadline ?? "").toLocaleString(u, {
+                month: "short",
+                day: "numeric",
+                year: "numeric",
+                hour: "numeric",
+                minute: "numeric",
+                timeZoneName: "short"
+              })
+            }) })
+          ] })
+        }
+      )
+    ] })
   ] });
 };
 export {
-  Te as PayrollOverviewPresentation
+  we as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map