@gusto/embedded-react-sdk 0.17.0 → 0.19.0

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

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