@gusto/embedded-react-sdk 0.18.0 → 0.19.0

package/dist/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.js

@@ -1,61 +1,66 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { useTranslation as c } from "react-i18next";
-import { PayrollHistory as u } from "../PayrollHistory/PayrollHistory.js";
-import { PayrollList as d } from "../PayrollList/PayrollList.js";
-import { PayrollOverview as f } from "../PayrollOverview/PayrollOverview.js";
-import { PayrollReceipts as b } from "../PayrollReceipts/PayrollReceipts.js";
+import { jsx as t, jsxs as y } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { useTranslation as u } from "react-i18next";
+import { PayrollHistory as d } from "../PayrollHistory/PayrollHistory.js";
+import { PayrollList as f } from "../PayrollList/PayrollList.js";
+import { PayrollOverview as b } from "../PayrollOverview/PayrollOverview.js";
+import { PayrollReceipts as P } from "../PayrollReceipts/PayrollReceipts.js";
+import { ConfirmWireDetails as I } from "../ConfirmWireDetails/ConfirmWireDetails.js";
 import { useFlow as e } from "../../Flow/useFlow.js";
-import { useI18n as P } from "../../../i18n/I18n.js";
-import { useComponentContext as I } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as x } from "../../../i18n/I18n.js";
+import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { ensureRequired as n } from "../../../helpers/ensureRequired.js";
-function O() {
+import { Flex as v } from "../../Common/Flex/Flex.js";
+function U() {
   const {
     companyId: o,
     onEvent: r,
-    selectedTab: a = "run-payroll"
-  } = e(), [i, s] = y(a), { Tabs: m } = I();
-  P("Payroll.PayrollLanding");
-  const { t: l } = c("Payroll.PayrollLanding"), p = [
+    selectedTab: l = "run-payroll"
+  } = e(), [i, m] = c(l), { Tabs: p } = g();
+  x("Payroll.PayrollLanding");
+  const { t: a } = u("Payroll.PayrollLanding"), s = [
     {
       id: "run-payroll",
-      label: l("tabs.runPayroll"),
-      content: /* @__PURE__ */ t(d, { companyId: n(o), onEvent: r })
+      label: a("tabs.runPayroll"),
+      content: /* @__PURE__ */ t(f, { companyId: n(o), onEvent: r })
     },
     {
       id: "payroll-history",
-      label: l("tabs.payrollHistory"),
-      content: /* @__PURE__ */ t(u, { companyId: n(o), onEvent: r })
+      label: a("tabs.payrollHistory"),
+      content: /* @__PURE__ */ t(d, { companyId: n(o), onEvent: r })
     }
   ];
-  return /* @__PURE__ */ t(
-    m,
-    {
-      tabs: p,
-      selectedId: i,
-      onSelectionChange: s,
-      "aria-label": l("aria.tabNavigation")
-    }
-  );
+  return /* @__PURE__ */ y(v, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ t(I, { companyId: n(o), onEvent: r }),
+    /* @__PURE__ */ t(
+      p,
+      {
+        tabs: s,
+        selectedId: i,
+        onSelectionChange: m,
+        "aria-label": a("aria.tabNavigation")
+      }
+    )
+  ] });
 }
-function S() {
+function q() {
   const { payrollUuid: o, onEvent: r } = e();
-  return /* @__PURE__ */ t(b, { onEvent: r, payrollId: n(o) });
+  return /* @__PURE__ */ t(P, { onEvent: r, payrollId: n(o) });
 }
-function U() {
-  const { companyId: o, payrollUuid: r, onEvent: a } = e();
+function N() {
+  const { companyId: o, payrollUuid: r, onEvent: l } = e();
   return /* @__PURE__ */ t(
-    f,
+    b,
     {
-      onEvent: a,
+      onEvent: l,
       companyId: n(o),
       payrollId: n(r)
     }
   );
 }
 export {
-  U as PayrollLandingOverviewContextual,
-  S as PayrollLandingReceiptsContextual,
-  O as PayrollLandingTabsContextual
+  N as PayrollLandingOverviewContextual,
+  q as PayrollLandingReceiptsContextual,
+  U as PayrollLandingTabsContextual
 };
 //# sourceMappingURL=PayrollLandingFlowComponents.js.map

package/dist/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollLandingFlowComponents.js","sources":["../../../../src/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PayrollHistory } from '../PayrollHistory/PayrollHistory'\nimport { PayrollList } from '../PayrollList/PayrollList'\nimport { PayrollOverview } from '../PayrollOverview/PayrollOverview'\nimport { PayrollReceipts } from '../PayrollReceipts/PayrollReceipts'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\n\nexport interface PayrollLandingFlowProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {\n  companyId: string\n}\n\nexport interface PayrollLandingFlowContextInterface extends FlowContextInterface {\n  component: (() => React.JSX.Element) | null\n  companyId: string\n  payrollUuid?: string\n  previousState?: 'tabs' | 'overview'\n  selectedTab?: string\n}\n\nexport function PayrollLandingTabsContextual() {\n  const {\n    companyId,\n    onEvent,\n    selectedTab = 'run-payroll',\n  } = useFlow<PayrollLandingFlowContextInterface>()\n  const [currentTab, setCurrentTab] = useState(selectedTab)\n  const { Tabs } = useComponentContext()\n\n  useI18n('Payroll.PayrollLanding')\n  const { t } = useTranslation('Payroll.PayrollLanding')\n\n  const tabs = [\n    {\n      id: 'run-payroll',\n      label: t('tabs.runPayroll'),\n      content: <PayrollList companyId={ensureRequired(companyId)} onEvent={onEvent} />,\n    },\n    {\n      id: 'payroll-history',\n      label: t('tabs.payrollHistory'),\n      content: <PayrollHistory companyId={ensureRequired(companyId)} onEvent={onEvent} />,\n    },\n  ]\n\n  return (\n    <Tabs\n      tabs={tabs}\n      selectedId={currentTab}\n      onSelectionChange={setCurrentTab}\n      aria-label={t('aria.tabNavigation')}\n    />\n  )\n}\n\nexport function PayrollLandingReceiptsContextual() {\n  const { payrollUuid, onEvent } = useFlow<PayrollLandingFlowContextInterface>()\n\n  return <PayrollReceipts onEvent={onEvent} payrollId={ensureRequired(payrollUuid)} />\n}\n\nexport function PayrollLandingOverviewContextual() {\n  const { companyId, payrollUuid, onEvent } = useFlow<PayrollLandingFlowContextInterface>()\n\n  return (\n    <PayrollOverview\n      onEvent={onEvent}\n      companyId={ensureRequired(companyId)}\n      payrollId={ensureRequired(payrollUuid)}\n    />\n  )\n}\n"],"names":["PayrollLandingTabsContextual","companyId","onEvent","selectedTab","useFlow","currentTab","setCurrentTab","useState","Tabs","useComponentContext","useI18n","t","useTranslation","tabs","jsx","PayrollList","ensureRequired","PayrollHistory","PayrollLandingReceiptsContextual","payrollUuid","PayrollReceipts","PayrollLandingOverviewContextual","PayrollOverview"],"mappings":";;;;;;;;;;;AAyBO,SAASA,IAA+B;AAC7C,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,EAAA,IACZC,EAAA,GACE,CAACC,GAAYC,CAAa,IAAIC,EAASJ,CAAW,GAClD,EAAE,MAAAK,EAAA,IAASC,EAAA;AAEjB,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAE/CC,IAAO;AAAA,IACX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOF,EAAE,iBAAiB;AAAA,MAC1B,SAAS,gBAAAG,EAACC,GAAA,EAAY,WAAWC,EAAef,CAAS,GAAG,SAAAC,EAAA,CAAkB;AAAA,IAAA;AAAA,IAEhF;AAAA,MACE,IAAI;AAAA,MACJ,OAAOS,EAAE,qBAAqB;AAAA,MAC9B,SAAS,gBAAAG,EAACG,GAAA,EAAe,WAAWD,EAAef,CAAS,GAAG,SAAAC,EAAA,CAAkB;AAAA,IAAA;AAAA,EACnF;AAGF,SACE,gBAAAY;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,MAAAK;AAAA,MACA,YAAYR;AAAA,MACZ,mBAAmBC;AAAA,MACnB,cAAYK,EAAE,oBAAoB;AAAA,IAAA;AAAA,EAAA;AAGxC;AAEO,SAASO,IAAmC;AACjD,QAAM,EAAE,aAAAC,GAAa,SAAAjB,EAAA,IAAYE,EAAA;AAEjC,2BAAQgB,GAAA,EAAgB,SAAAlB,GAAkB,WAAWc,EAAeG,CAAW,GAAG;AACpF;AAEO,SAASE,IAAmC;AACjD,QAAM,EAAE,WAAApB,GAAW,aAAAkB,GAAa,SAAAjB,EAAA,IAAYE,EAAA;AAE5C,SACE,gBAAAU;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,SAAApB;AAAA,MACA,WAAWc,EAAef,CAAS;AAAA,MACnC,WAAWe,EAAeG,CAAW;AAAA,IAAA;AAAA,EAAA;AAG3C;"}
+{"version":3,"file":"PayrollLandingFlowComponents.js","sources":["../../../../src/components/Payroll/PayrollLanding/PayrollLandingFlowComponents.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PayrollHistory } from '../PayrollHistory/PayrollHistory'\nimport { PayrollList } from '../PayrollList/PayrollList'\nimport { PayrollOverview } from '../PayrollOverview/PayrollOverview'\nimport { PayrollReceipts } from '../PayrollReceipts/PayrollReceipts'\nimport { ConfirmWireDetails } from '../ConfirmWireDetails/ConfirmWireDetails'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { useFlow } from '@/components/Flow/useFlow'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport type { FlowContextInterface } from '@/components/Flow/useFlow'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\nexport interface PayrollLandingFlowProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {\n  companyId: string\n}\n\nexport interface PayrollLandingFlowContextInterface extends FlowContextInterface {\n  component: (() => React.JSX.Element) | null\n  companyId: string\n  payrollUuid?: string\n  previousState?: 'tabs' | 'overview'\n  selectedTab?: string\n}\n\nexport function PayrollLandingTabsContextual() {\n  const {\n    companyId,\n    onEvent,\n    selectedTab = 'run-payroll',\n  } = useFlow<PayrollLandingFlowContextInterface>()\n  const [currentTab, setCurrentTab] = useState(selectedTab)\n  const { Tabs } = useComponentContext()\n\n  useI18n('Payroll.PayrollLanding')\n  const { t } = useTranslation('Payroll.PayrollLanding')\n\n  const tabs = [\n    {\n      id: 'run-payroll',\n      label: t('tabs.runPayroll'),\n      content: <PayrollList companyId={ensureRequired(companyId)} onEvent={onEvent} />,\n    },\n    {\n      id: 'payroll-history',\n      label: t('tabs.payrollHistory'),\n      content: <PayrollHistory companyId={ensureRequired(companyId)} onEvent={onEvent} />,\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <ConfirmWireDetails companyId={ensureRequired(companyId)} onEvent={onEvent} />\n      <Tabs\n        tabs={tabs}\n        selectedId={currentTab}\n        onSelectionChange={setCurrentTab}\n        aria-label={t('aria.tabNavigation')}\n      />\n    </Flex>\n  )\n}\n\nexport function PayrollLandingReceiptsContextual() {\n  const { payrollUuid, onEvent } = useFlow<PayrollLandingFlowContextInterface>()\n\n  return <PayrollReceipts onEvent={onEvent} payrollId={ensureRequired(payrollUuid)} />\n}\n\nexport function PayrollLandingOverviewContextual() {\n  const { companyId, payrollUuid, onEvent } = useFlow<PayrollLandingFlowContextInterface>()\n\n  return (\n    <PayrollOverview\n      onEvent={onEvent}\n      companyId={ensureRequired(companyId)}\n      payrollId={ensureRequired(payrollUuid)}\n    />\n  )\n}\n"],"names":["PayrollLandingTabsContextual","companyId","onEvent","selectedTab","useFlow","currentTab","setCurrentTab","useState","Tabs","useComponentContext","useI18n","t","useTranslation","tabs","jsx","PayrollList","ensureRequired","PayrollHistory","jsxs","Flex","ConfirmWireDetails","PayrollLandingReceiptsContextual","payrollUuid","PayrollReceipts","PayrollLandingOverviewContextual","PayrollOverview"],"mappings":";;;;;;;;;;;;;AA2BO,SAASA,IAA+B;AAC7C,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,EAAA,IACZC,EAAA,GACE,CAACC,GAAYC,CAAa,IAAIC,EAASJ,CAAW,GAClD,EAAE,MAAAK,EAAA,IAASC,EAAA;AAEjB,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAE/CC,IAAO;AAAA,IACX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOF,EAAE,iBAAiB;AAAA,MAC1B,SAAS,gBAAAG,EAACC,GAAA,EAAY,WAAWC,EAAef,CAAS,GAAG,SAAAC,EAAA,CAAkB;AAAA,IAAA;AAAA,IAEhF;AAAA,MACE,IAAI;AAAA,MACJ,OAAOS,EAAE,qBAAqB;AAAA,MAC9B,SAAS,gBAAAG,EAACG,GAAA,EAAe,WAAWD,EAAef,CAAS,GAAG,SAAAC,EAAA,CAAkB;AAAA,IAAA;AAAA,EACnF;AAGF,SACE,gBAAAgB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAmB,WAAWJ,EAAef,CAAS,GAAG,SAAAC,GAAkB;AAAA,IAC5E,gBAAAY;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,MAAAK;AAAA,QACA,YAAYR;AAAA,QACZ,mBAAmBC;AAAA,QACnB,cAAYK,EAAE,oBAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACpC,GACF;AAEJ;AAEO,SAASU,IAAmC;AACjD,QAAM,EAAE,aAAAC,GAAa,SAAApB,EAAA,IAAYE,EAAA;AAEjC,2BAAQmB,GAAA,EAAgB,SAAArB,GAAkB,WAAWc,EAAeM,CAAW,GAAG;AACpF;AAEO,SAASE,IAAmC;AACjD,QAAM,EAAE,WAAAvB,GAAW,aAAAqB,GAAa,SAAApB,EAAA,IAAYE,EAAA;AAE5C,SACE,gBAAAU;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,SAAAvB;AAAA,MACA,WAAWc,EAAef,CAAS;AAAA,MACnC,WAAWe,EAAeM,CAAW;AAAA,IAAA;AAAA,EAAA;AAG3C;"}

package/dist/components/Payroll/PayrollList/PayrollListPresentation.js

@@ -24,9 +24,9 @@ const ue = ({
   skippingPayrollId: f,
   blockers: y
 }) => {
-  const { Badge: B, Button: h, Dialog: M, Heading: O, Text: o, Alert: T } = E();
+  const { Badge: M, Button: h, Dialog: O, Heading: T, Text: o, Alert: W } = E();
   $("Payroll.PayrollList");
-  const { t } = Y("Payroll.PayrollList"), s = z(), D = N(null), W = J({ ref: D }).includes("small"), [d, g] = R({
+  const { t } = Y("Payroll.PayrollList"), s = z(), D = N(null), B = J({ ref: D }).includes("small"), [d, g] = R({
     isOpen: !1,
     payrollId: null,
     payPeriod: null
@@ -45,16 +45,16 @@ const ue = ({
   }, j = () => {
     d.payrollId && (A({ payrollUuid: d.payrollId }), P());
   }, k = (e, l) => {
-    const n = s.formatShort(e), a = s.formatShortWithYear(l);
+    const a = s.formatShort(e), n = s.formatShortWithYear(l);
     return {
-      startDate: n,
-      endDate: a,
+      startDate: a,
+      endDate: n,
       fullPeriod: s.formatPayPeriodRange(e, l, { useShortMonth: !0 })
     };
   };
   return /* @__PURE__ */ r("div", { ref: D, className: C.container, children: /* @__PURE__ */ u(i, { flexDirection: "column", gap: 16, children: [
     w && /* @__PURE__ */ r("div", { className: C.alertContainer, children: /* @__PURE__ */ r(
-      T,
+      W,
       {
         status: "info",
         label: t("skipSuccessAlert"),
@@ -69,7 +69,7 @@ const ue = ({
         justifyContent: "space-between",
         alignItems: "flex-start",
         gap: { base: 12, medium: 24 },
-        children: /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(O, { as: "h2", children: t("title") }) })
+        children: /* @__PURE__ */ r(i, { children: /* @__PURE__ */ r(T, { as: "h2", children: t("title") }) })
       }
     ),
     /* @__PURE__ */ r(
@@ -82,7 +82,7 @@ const ue = ({
         columns: [
           {
             render: ({ payPeriod: e }) => {
-              const { startDate: l, endDate: n } = k(
+              const { startDate: l, endDate: a } = k(
                 e?.startDate,
                 e?.endDate
               );
@@ -90,9 +90,9 @@ const ue = ({
                 /* @__PURE__ */ u(o, { children: [
                   l,
                   " - ",
-                  n
+                  a
                 ] }),
-                /* @__PURE__ */ r(o, { variant: "supporting", children: p.find((a) => a.uuid === e?.payScheduleUuid)?.name || p.find((a) => a.uuid === e?.payScheduleUuid)?.customName })
+                /* @__PURE__ */ r(o, { variant: "supporting", children: p.find((n) => n.uuid === e?.payScheduleUuid)?.name || p.find((n) => n.uuid === e?.payScheduleUuid)?.customName })
               ] });
             },
             title: t("tableHeaders.0")
@@ -111,19 +111,19 @@ const ue = ({
           },
           {
             title: t("tableHeaders.4"),
-            render: ({ processed: e }) => /* @__PURE__ */ r(B, { children: t(e ? "status.processed" : "status.unprocessed") })
+            render: ({ processed: e }) => /* @__PURE__ */ r(M, { children: t(e ? "status.processed" : "status.unprocessed") })
           },
           {
             title: "",
-            render: ({ payrollUuid: e, calculatedAt: l, processed: n, payPeriod: a }) => {
-              if (n)
+            render: ({ payrollUuid: e, calculatedAt: l, processed: a, payPeriod: n }) => {
+              if (a)
                 return null;
               const m = f === e, c = l ? /* @__PURE__ */ r(
                 h,
                 {
                   isLoading: m,
                   onClick: () => {
-                    L({ payrollUuid: e, payPeriod: a });
+                    L({ payrollUuid: e, payPeriod: n });
                   },
                   title: t("submitPayrollCta"),
                   variant: "secondary",
@@ -134,30 +134,30 @@ const ue = ({
                 {
                   isLoading: m,
                   onClick: () => {
-                    x({ payrollUuid: e, payPeriod: a });
+                    x({ payrollUuid: e, payPeriod: n });
                   },
                   title: t("runPayrollTitle"),
                   variant: "secondary",
                   children: t("runPayrollTitle")
                 }
               );
-              return W ? c : /* @__PURE__ */ r(i, { flexDirection: "column", alignItems: "stretch", gap: 12, children: c });
+              return B ? c : /* @__PURE__ */ r(i, { flexDirection: "column", alignItems: "stretch", gap: 12, children: c });
             }
           }
         ],
         data: v,
         label: t("payrollsListLabel"),
-        itemMenu: ({ payrollUuid: e, processed: l, payPeriod: n }) => {
+        itemMenu: ({ payrollUuid: e, processed: l, payPeriod: a }) => {
           if (l)
             return null;
-          const a = f === e, { fullPeriod: m } = k(
-            n?.startDate,
-            n?.endDate
-          ), c = q(/* @__PURE__ */ new Date()), S = c ? new Date(c) : null, b = n?.startDate ? new Date(n.startDate) : null;
+          const n = f === e, { fullPeriod: m } = k(
+            a?.startDate,
+            a?.endDate
+          ), c = q(/* @__PURE__ */ new Date()), S = c ? new Date(c) : null, b = a?.startDate ? new Date(a.startDate) : null;
           return y.length === 0 && S && b && S >= b ? /* @__PURE__ */ r(
             K,
             {
-              isLoading: a,
+              isLoading: n,
               menuLabel: t("payrollMenuLabel"),
               items: [
                 {
@@ -173,15 +173,15 @@ const ue = ({
       }
     ),
     /* @__PURE__ */ r(
-      M,
+      O,
       {
         isOpen: d.isOpen,
         onClose: P,
         onPrimaryActionClick: j,
         isDestructive: !0,
         title: t("skipPayrollDialog.title", { payPeriod: d.payPeriod }),
-        primaryActionLabel: t("skipPayrollDialog.confirmButton"),
-        closeActionLabel: t("skipPayrollDialog.cancelButton"),
+        primaryActionLabel: t("skipPayrollDialog.confirmCta"),
+        closeActionLabel: t("skipPayrollDialog.cancelCta"),
         children: t("skipPayrollDialog.body")
       }
     )

package/dist/components/Payroll/PayrollList/PayrollListPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useState, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport type { PayrollType } from './types'\nimport styles from './PayrollListPresentation.module.scss'\nimport { DataView, Flex, HamburgerMenu } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport FeatureIconCheck from '@/assets/icons/feature-icon-check.svg?react'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void\n  onSubmitPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void\n  onSkipPayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void\n  onViewBlockers?: () => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n  showSkipSuccessAlert: boolean\n  onDismissSkipSuccessAlert: () => void\n  skippingPayrollId: string | null\n  blockers: ApiPayrollBlocker[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  onSubmitPayroll,\n  onSkipPayroll,\n  onViewBlockers,\n  payrolls,\n  paySchedules,\n  showSkipSuccessAlert,\n  onDismissSkipSuccessAlert,\n  skippingPayrollId,\n  blockers,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Dialog, Heading, Text, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const dateFormatter = useDateFormatter()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n  const [skipPayrollDialogState, setSkipPayrollDialogState] = useState<{\n    isOpen: boolean\n    payrollId: string | null\n    payPeriod: string | null\n  }>({\n    isOpen: false,\n    payrollId: null,\n    payPeriod: null,\n  })\n\n  const handleOpenSkipDialog = (payrollId: string, payPeriod: string) => {\n    setSkipPayrollDialogState({\n      isOpen: true,\n      payrollId,\n      payPeriod,\n    })\n  }\n\n  const handleCloseSkipDialog = () => {\n    setSkipPayrollDialogState({\n      isOpen: false,\n      payrollId: null,\n      payPeriod: null,\n    })\n  }\n\n  const handleConfirmSkipPayroll = () => {\n    if (skipPayrollDialogState.payrollId) {\n      onSkipPayroll({ payrollUuid: skipPayrollDialogState.payrollId })\n      handleCloseSkipDialog()\n    }\n  }\n\n  const formatPayPeriod = (startDate: string | undefined, endDate: string | undefined) => {\n    const formattedStartDate = dateFormatter.formatShort(startDate)\n    const formattedEndDate = dateFormatter.formatShortWithYear(endDate)\n\n    return {\n      startDate: formattedStartDate,\n      endDate: formattedEndDate,\n      fullPeriod: dateFormatter.formatPayPeriodRange(startDate, endDate, { useShortMonth: true }),\n    }\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        {showSkipSuccessAlert && (\n          <div className={styles.alertContainer}>\n            <Alert\n              status=\"info\"\n              label={t('skipSuccessAlert')}\n              onDismiss={onDismissSkipSuccessAlert}\n            />\n          </div>\n        )}\n        <PayrollBlockerAlerts blockers={blockers} onMultipleViewClick={onViewBlockers} />\n        <Flex\n          flexDirection={{ base: 'column', medium: 'row' }}\n          justifyContent=\"space-between\"\n          alignItems=\"flex-start\"\n          gap={{ base: 12, medium: 24 }}\n        >\n          <Flex>\n            <Heading as=\"h2\">{t('title')}</Heading>\n          </Flex>\n        </Flex>\n\n        <DataView\n          emptyState={() => (\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n              <FeatureIconCheck />\n              <Text>{t('emptyState')}</Text>\n            </Flex>\n          )}\n          columns={[\n            {\n              render: ({ payPeriod }) => {\n                const { startDate, endDate } = formatPayPeriod(\n                  payPeriod?.startDate,\n                  payPeriod?.endDate,\n                )\n\n                return (\n                  <Flex flexDirection=\"column\" gap={0}>\n                    <Text>\n                      {startDate} - {endDate}\n                    </Text>\n                    <Text variant=\"supporting\">\n                      {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.name ||\n                        paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                          ?.customName}\n                    </Text>\n                  </Flex>\n                )\n              },\n              title: t('tableHeaders.0'),\n            },\n            {\n              render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n              title: t('tableHeaders.1'),\n            },\n            {\n              render: ({ checkDate }) => (\n                <Text>{dateFormatter.formatShortWithWeekdayAndYear(checkDate)}</Text>\n              ),\n              title: t('tableHeaders.2'),\n            },\n            {\n              title: t('tableHeaders.3'),\n              render: ({ payrollDeadline }) => (\n                <Text>{dateFormatter.formatShortWithWeekdayAndYear(payrollDeadline)}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.4'),\n              render: ({ processed }) => (\n                <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n              ),\n            },\n            {\n              title: '',\n              render: ({ payrollUuid, calculatedAt, processed, payPeriod }) => {\n                if (processed) {\n                  return null\n                }\n\n                const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n                const button = calculatedAt ? (\n                  <Button\n                    isLoading={isProcessingSkipPayroll}\n                    onClick={() => {\n                      onSubmitPayroll({ payrollUuid, payPeriod })\n                    }}\n                    title={t('submitPayrollCta')}\n                    variant=\"secondary\"\n                  >\n                    {t('submitPayrollCta')}\n                  </Button>\n                ) : (\n                  <Button\n                    isLoading={isProcessingSkipPayroll}\n                    onClick={() => {\n                      onRunPayroll({ payrollUuid, payPeriod })\n                    }}\n                    title={t('runPayrollTitle')}\n                    variant=\"secondary\"\n                  >\n                    {t('runPayrollTitle')}\n                  </Button>\n                )\n\n                return isDesktop ? (\n                  button\n                ) : (\n                  <Flex flexDirection=\"column\" alignItems=\"stretch\" gap={12}>\n                    {button}\n                  </Flex>\n                )\n              },\n            },\n          ]}\n          data={payrolls}\n          label={t('payrollsListLabel')}\n          itemMenu={({ payrollUuid, processed, payPeriod }) => {\n            if (processed) {\n              return null\n            }\n\n            const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n            const { fullPeriod: payPeriodString } = formatPayPeriod(\n              payPeriod?.startDate,\n              payPeriod?.endDate,\n            )\n\n            const todayDateString = formatDateToStringDate(new Date())\n            const todayAtMidnight = todayDateString ? new Date(todayDateString) : null\n            const payPeriodStartDate = payPeriod?.startDate ? new Date(payPeriod.startDate) : null\n\n            const canSkipPayroll =\n              blockers.length === 0 &&\n              todayAtMidnight &&\n              payPeriodStartDate &&\n              todayAtMidnight >= payPeriodStartDate\n\n            if (!canSkipPayroll) {\n              return null\n            }\n\n            return (\n              <HamburgerMenu\n                isLoading={isProcessingSkipPayroll}\n                menuLabel={t('payrollMenuLabel')}\n                items={[\n                  {\n                    label: t('skipPayrollCta'),\n                    onClick: () => {\n                      handleOpenSkipDialog(payrollUuid!, payPeriodString)\n                    },\n                  },\n                ]}\n              />\n            )\n          }}\n        />\n        <Dialog\n          isOpen={skipPayrollDialogState.isOpen}\n          onClose={handleCloseSkipDialog}\n          onPrimaryActionClick={handleConfirmSkipPayroll}\n          isDestructive={true}\n          title={t('skipPayrollDialog.title', { payPeriod: skipPayrollDialogState.payPeriod })}\n          primaryActionLabel={t('skipPayrollDialog.confirmButton')}\n          closeActionLabel={t('skipPayrollDialog.cancelButton')}\n        >\n          {t('skipPayrollDialog.body')}\n        </Dialog>\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onViewBlockers","payrolls","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","skippingPayrollId","blockers","Badge","Button","Dialog","Heading","Text","Alert","useComponentContext","useI18n","useTranslation","dateFormatter","useDateFormatter","containerRef","useRef","isDesktop","useContainerBreakpoints","skipPayrollDialogState","setSkipPayrollDialogState","useState","handleOpenSkipDialog","payrollId","payPeriod","handleCloseSkipDialog","handleConfirmSkipPayroll","formatPayPeriod","startDate","endDate","formattedStartDate","formattedEndDate","jsx","styles","jsxs","Flex","PayrollBlockerAlerts","DataView","FeatureIconCheck","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid","calculatedAt","isProcessingSkipPayroll","button","payPeriodString","todayDateString","formatDateToStringDate","todayAtMidnight","payPeriodStartDate","HamburgerMenu"],"mappings":"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"}
+{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useState, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport type { PayrollType } from './types'\nimport styles from './PayrollListPresentation.module.scss'\nimport { DataView, Flex, HamburgerMenu } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatDateToStringDate } from '@/helpers/dateFormatting'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport FeatureIconCheck from '@/assets/icons/feature-icon-check.svg?react'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void\n  onSubmitPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void\n  onSkipPayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void\n  onViewBlockers?: () => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n  showSkipSuccessAlert: boolean\n  onDismissSkipSuccessAlert: () => void\n  skippingPayrollId: string | null\n  blockers: ApiPayrollBlocker[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  onSubmitPayroll,\n  onSkipPayroll,\n  onViewBlockers,\n  payrolls,\n  paySchedules,\n  showSkipSuccessAlert,\n  onDismissSkipSuccessAlert,\n  skippingPayrollId,\n  blockers,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Dialog, Heading, Text, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const dateFormatter = useDateFormatter()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\n  const [skipPayrollDialogState, setSkipPayrollDialogState] = useState<{\n    isOpen: boolean\n    payrollId: string | null\n    payPeriod: string | null\n  }>({\n    isOpen: false,\n    payrollId: null,\n    payPeriod: null,\n  })\n\n  const handleOpenSkipDialog = (payrollId: string, payPeriod: string) => {\n    setSkipPayrollDialogState({\n      isOpen: true,\n      payrollId,\n      payPeriod,\n    })\n  }\n\n  const handleCloseSkipDialog = () => {\n    setSkipPayrollDialogState({\n      isOpen: false,\n      payrollId: null,\n      payPeriod: null,\n    })\n  }\n\n  const handleConfirmSkipPayroll = () => {\n    if (skipPayrollDialogState.payrollId) {\n      onSkipPayroll({ payrollUuid: skipPayrollDialogState.payrollId })\n      handleCloseSkipDialog()\n    }\n  }\n\n  const formatPayPeriod = (startDate: string | undefined, endDate: string | undefined) => {\n    const formattedStartDate = dateFormatter.formatShort(startDate)\n    const formattedEndDate = dateFormatter.formatShortWithYear(endDate)\n\n    return {\n      startDate: formattedStartDate,\n      endDate: formattedEndDate,\n      fullPeriod: dateFormatter.formatPayPeriodRange(startDate, endDate, { useShortMonth: true }),\n    }\n  }\n\n  return (\n    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        {showSkipSuccessAlert && (\n          <div className={styles.alertContainer}>\n            <Alert\n              status=\"info\"\n              label={t('skipSuccessAlert')}\n              onDismiss={onDismissSkipSuccessAlert}\n            />\n          </div>\n        )}\n        <PayrollBlockerAlerts blockers={blockers} onMultipleViewClick={onViewBlockers} />\n        <Flex\n          flexDirection={{ base: 'column', medium: 'row' }}\n          justifyContent=\"space-between\"\n          alignItems=\"flex-start\"\n          gap={{ base: 12, medium: 24 }}\n        >\n          <Flex>\n            <Heading as=\"h2\">{t('title')}</Heading>\n          </Flex>\n        </Flex>\n\n        <DataView\n          emptyState={() => (\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n              <FeatureIconCheck />\n              <Text>{t('emptyState')}</Text>\n            </Flex>\n          )}\n          columns={[\n            {\n              render: ({ payPeriod }) => {\n                const { startDate, endDate } = formatPayPeriod(\n                  payPeriod?.startDate,\n                  payPeriod?.endDate,\n                )\n\n                return (\n                  <Flex flexDirection=\"column\" gap={0}>\n                    <Text>\n                      {startDate} - {endDate}\n                    </Text>\n                    <Text variant=\"supporting\">\n                      {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.name ||\n                        paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                          ?.customName}\n                    </Text>\n                  </Flex>\n                )\n              },\n              title: t('tableHeaders.0'),\n            },\n            {\n              render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n              title: t('tableHeaders.1'),\n            },\n            {\n              render: ({ checkDate }) => (\n                <Text>{dateFormatter.formatShortWithWeekdayAndYear(checkDate)}</Text>\n              ),\n              title: t('tableHeaders.2'),\n            },\n            {\n              title: t('tableHeaders.3'),\n              render: ({ payrollDeadline }) => (\n                <Text>{dateFormatter.formatShortWithWeekdayAndYear(payrollDeadline)}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.4'),\n              render: ({ processed }) => (\n                <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n              ),\n            },\n            {\n              title: '',\n              render: ({ payrollUuid, calculatedAt, processed, payPeriod }) => {\n                if (processed) {\n                  return null\n                }\n\n                const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n                const button = calculatedAt ? (\n                  <Button\n                    isLoading={isProcessingSkipPayroll}\n                    onClick={() => {\n                      onSubmitPayroll({ payrollUuid, payPeriod })\n                    }}\n                    title={t('submitPayrollCta')}\n                    variant=\"secondary\"\n                  >\n                    {t('submitPayrollCta')}\n                  </Button>\n                ) : (\n                  <Button\n                    isLoading={isProcessingSkipPayroll}\n                    onClick={() => {\n                      onRunPayroll({ payrollUuid, payPeriod })\n                    }}\n                    title={t('runPayrollTitle')}\n                    variant=\"secondary\"\n                  >\n                    {t('runPayrollTitle')}\n                  </Button>\n                )\n\n                return isDesktop ? (\n                  button\n                ) : (\n                  <Flex flexDirection=\"column\" alignItems=\"stretch\" gap={12}>\n                    {button}\n                  </Flex>\n                )\n              },\n            },\n          ]}\n          data={payrolls}\n          label={t('payrollsListLabel')}\n          itemMenu={({ payrollUuid, processed, payPeriod }) => {\n            if (processed) {\n              return null\n            }\n\n            const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n            const { fullPeriod: payPeriodString } = formatPayPeriod(\n              payPeriod?.startDate,\n              payPeriod?.endDate,\n            )\n\n            const todayDateString = formatDateToStringDate(new Date())\n            const todayAtMidnight = todayDateString ? new Date(todayDateString) : null\n            const payPeriodStartDate = payPeriod?.startDate ? new Date(payPeriod.startDate) : null\n\n            const canSkipPayroll =\n              blockers.length === 0 &&\n              todayAtMidnight &&\n              payPeriodStartDate &&\n              todayAtMidnight >= payPeriodStartDate\n\n            if (!canSkipPayroll) {\n              return null\n            }\n\n            return (\n              <HamburgerMenu\n                isLoading={isProcessingSkipPayroll}\n                menuLabel={t('payrollMenuLabel')}\n                items={[\n                  {\n                    label: t('skipPayrollCta'),\n                    onClick: () => {\n                      handleOpenSkipDialog(payrollUuid!, payPeriodString)\n                    },\n                  },\n                ]}\n              />\n            )\n          }}\n        />\n        <Dialog\n          isOpen={skipPayrollDialogState.isOpen}\n          onClose={handleCloseSkipDialog}\n          onPrimaryActionClick={handleConfirmSkipPayroll}\n          isDestructive={true}\n          title={t('skipPayrollDialog.title', { payPeriod: skipPayrollDialogState.payPeriod })}\n          primaryActionLabel={t('skipPayrollDialog.confirmCta')}\n          closeActionLabel={t('skipPayrollDialog.cancelCta')}\n        >\n          {t('skipPayrollDialog.body')}\n        </Dialog>\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onViewBlockers","payrolls","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","skippingPayrollId","blockers","Badge","Button","Dialog","Heading","Text","Alert","useComponentContext","useI18n","useTranslation","dateFormatter","useDateFormatter","containerRef","useRef","isDesktop","useContainerBreakpoints","skipPayrollDialogState","setSkipPayrollDialogState","useState","handleOpenSkipDialog","payrollId","payPeriod","handleCloseSkipDialog","handleConfirmSkipPayroll","formatPayPeriod","startDate","endDate","formattedStartDate","formattedEndDate","jsx","styles","jsxs","Flex","PayrollBlockerAlerts","DataView","FeatureIconCheck","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid","calculatedAt","isProcessingSkipPayroll","button","payPeriodString","todayDateString","formatDateToStringDate","todayAtMidnight","payPeriodStartDate","HamburgerMenu"],"mappings":"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"}

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

@@ -1,151 +1,171 @@
-import { jsx as m, jsxs as k } from "react/jsx-runtime";
-import { usePayrollsSubmitMutation as F } from "@gusto/embedded-api/react-query/payrollsSubmit";
-import { usePayrollsCancelMutation as G } from "@gusto/embedded-api/react-query/payrollsCancel";
-import { usePayrollsGetSuspense as x } from "@gusto/embedded-api/react-query/payrollsGet";
-import { useTranslation as M } from "react-i18next";
-import { useBankAccountsGetSuspense as j } from "@gusto/embedded-api/react-query/bankAccountsGet";
-import { useEmployeesListSuspense as W } from "@gusto/embedded-api/react-query/employeesList";
-import { useState as S, useEffect as I } from "react";
-import { useGustoEmbeddedContext as H } from "@gusto/embedded-api/react-query/_context";
-import { payrollsGetPayStub as V } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
-import { useErrorBoundary as z } from "react-error-boundary";
-import { PayrollOverviewPresentation as J } from "./PayrollOverviewPresentation.js";
-import { PAYROLL_PROCESSING_STATUS as p, componentEvents as n } from "../../../shared/constants.js";
-import { BaseComponent as K } from "../../Base/Base.js";
-import { useBase as Q } from "../../Base/useBase.js";
-import { useComponentDictionary as X, useI18n as Z } from "../../../i18n/I18n.js";
-import { readableStreamToBlob as $ } from "../../../helpers/readableStreamToBlob.js";
-import ee from "../../../hooks/useNumberFormatter.js";
-import { useDateFormatter as te } from "../../../hooks/useDateFormatter.js";
-import { useComponentContext as oe } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { renderErrorList as se } from "../../../helpers/apiErrorToList.js";
-import { Flex as re } from "../../Common/Flex/Flex.js";
-function Be(s) {
-  return /* @__PURE__ */ m(K, { ...s, children: /* @__PURE__ */ m(ae, { ...s, children: s.children }) });
+import { jsx as u, jsxs as x } from "react/jsx-runtime";
+import { usePayrollsSubmitMutation as W } from "@gusto/embedded-api/react-query/payrollsSubmit";
+import { usePayrollsCancelMutation as j } from "@gusto/embedded-api/react-query/payrollsCancel";
+import { usePayrollsGetSuspense as V } from "@gusto/embedded-api/react-query/payrollsGet";
+import { useTranslation as H } from "react-i18next";
+import { useBankAccountsGetSuspense as K } from "@gusto/embedded-api/react-query/bankAccountsGet";
+import { useEmployeesListSuspense as z } from "@gusto/embedded-api/react-query/employeesList";
+import { useState as y, useEffect as J } from "react";
+import { useGustoEmbeddedContext as Q } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as X } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as Z } from "react-error-boundary";
+import { ConfirmWireDetails as $ } from "../ConfirmWireDetails/ConfirmWireDetails.js";
+import { PayrollOverviewPresentation as ee } from "./PayrollOverviewPresentation.js";
+import { PAYROLL_PROCESSING_STATUS as p, componentEvents as l, PAYROLL_RESOLVABLE_SUBMISSION_BLOCKER_TYPES as te } from "../../../shared/constants.js";
+import { BaseComponent as oe } from "../../Base/Base.js";
+import { useBase as se } from "../../Base/useBase.js";
+import { useComponentDictionary as re, useI18n as ne } from "../../../i18n/I18n.js";
+import { readableStreamToBlob as ie } from "../../../helpers/readableStreamToBlob.js";
+import ae from "../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as le } from "../../../hooks/useDateFormatter.js";
+import { useComponentContext as ce } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { renderErrorList as ue } from "../../../helpers/apiErrorToList.js";
+import { Flex as me } from "../../Common/Flex/Flex.js";
+const pe = (o = []) => o.filter(
+  (n) => n.status === "unresolved" && n.unblockOptions && n.unblockOptions.length > 0
+), de = (o = []) => {
+  const n = o.find((s) => s.status === "unresolved");
+  return n?.unblockOptions ? n.unblockOptions.find(
+    (s) => s.unblockType === "submit_wire"
+  )?.metadata.wireInRequestUuid : void 0;
+};
+function xe(o) {
+  return /* @__PURE__ */ u(oe, { ...o, children: /* @__PURE__ */ u(fe, { ...o, children: o.children }) });
 }
-const ae = ({
-  companyId: s,
-  payrollId: c,
-  dictionary: w,
-  onEvent: r,
-  alerts: _
+const fe = ({
+  companyId: o,
+  payrollId: n,
+  dictionary: P,
+  onEvent: s,
+  alerts: C
 }) => {
-  X("Payroll.PayrollOverview", w), Z("Payroll.PayrollOverview");
-  const { baseSubmitHandler: P } = Q(), { t: a } = M("Payroll.PayrollOverview"), [l, u] = S(!1), [D, y] = S(_ || []), { showBoundary: A } = z(), d = ee("currency"), b = te(), { Button: C, UnorderedList: E } = oe(), { data: f } = x(
+  re("Payroll.PayrollOverview", P), ne("Payroll.PayrollOverview");
+  const { baseSubmitHandler: b } = se(), { t: a } = H("Payroll.PayrollOverview"), [c, m] = y(!1), [U, d] = y(C || []), [R, A] = y({}), { showBoundary: D } = Z(), O = ae("currency"), S = le(), { Button: E, UnorderedList: g } = ce(), { data: f } = V(
     {
-      companyId: s,
-      payrollId: c,
+      companyId: o,
+      payrollId: n,
       include: ["taxes", "benefits", "deductions"]
     },
-    { refetchInterval: l ? 5e3 : !1 }
-  ), e = f.payrollShow, R = () => {
-    r(n.RUN_PAYROLL_EDIT);
-  };
-  I(() => {
-    e.processingRequest?.status === p.submitting && !l && u(!0), l && e.processingRequest?.status === p.submit_success && (r(n.RUN_PAYROLL_PROCESSED), y([
+    { refetchInterval: c ? 5e3 : !1 }
+  ), e = f.payrollShow, k = pe(e.submissionBlockers), L = de(e.creditBlockers), w = () => {
+    s(l.RUN_PAYROLL_EDIT);
+  }, B = L && /* @__PURE__ */ u($, { companyId: o, wireInId: L, onEvent: s });
+  J(() => {
+    e.processingRequest?.status === p.submitting && !c && m(!0), c && e.processingRequest?.status === p.submit_success && (s(l.RUN_PAYROLL_PROCESSED), d([
       {
         type: "success",
         title: a("alerts.payrollProcessedTitle"),
         content: a("alerts.payrollProcessedMessage", {
-          amount: d(Number(e.totals?.netPayDebit)),
-          date: b.formatShortWithYear(
+          amount: O(Number(e.totals?.netPayDebit)),
+          date: S.formatShortWithYear(
             e.payrollStatusMeta?.expectedDebitTime ?? e.payrollDeadline
           )
         })
       }
-    ]), u(!1)), l && e.processingRequest?.status === p.processing_failed && (r(n.RUN_PAYROLL_PROCESSING_FAILED), y([
+    ]), m(!1)), c && e.processingRequest?.status === p.processing_failed && (s(l.RUN_PAYROLL_PROCESSING_FAILED), d([
       {
         type: "error",
         title: a("alerts.payrollProcessingFailedTitle"),
-        content: /* @__PURE__ */ k(re, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ m(E, { items: se(e.processingRequest.errors ?? []) }),
-          /* @__PURE__ */ m(C, { variant: "secondary", onClick: R, children: a("alerts.payrollProcessingFailedCtaLabel") })
+        content: /* @__PURE__ */ x(me, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ u(g, { items: ue(e.processingRequest.errors ?? []) }),
+          /* @__PURE__ */ u(E, { variant: "secondary", onClick: w, children: a("alerts.payrollProcessingFailedCtaLabel") })
         ] })
       }
-    ]), u(!1));
+    ]), m(!1));
   }, [
     e.processingRequest?.status,
-    l,
-    r,
+    c,
+    s,
     a,
-    b,
-    d,
+    S,
+    O,
     e.totals?.netPayDebit,
     e.payrollStatusMeta?.expectedDebitTime,
     e.payrollDeadline
   ]);
-  const { data: g } = j({
-    companyId: s
-  }), O = g.companyBankAccounts?.[0], { data: h } = W({
-    companyId: s
-  }), { mutateAsync: U, isPending: T } = F(), { mutateAsync: B, isPending: N } = G();
+  const { data: h } = K({
+    companyId: o
+  }), T = h.companyBankAccounts?.[0], { data: N } = z({
+    companyId: o
+  }), { mutateAsync: v, isPending: q } = W(), { mutateAsync: Y, isPending: F } = j();
   if (!e.calculatedAt)
     throw new Error(a("alerts.payrollNotCalculated"));
-  const Y = H(), q = e.employeeCompensations?.reduce(
-    (o, i) => (i.taxes?.forEach((t) => {
-      o[t.name] = {
-        employee: (o[t.name]?.employee ?? 0) + (t.employer ? 0 : t.amount),
-        employer: (o[t.name]?.employer ?? 0) + (t.employer ? t.amount : 0)
+  const I = Q(), G = e.employeeCompensations?.reduce(
+    (r, i) => (i.taxes?.forEach((t) => {
+      r[t.name] = {
+        employee: (r[t.name]?.employee ?? 0) + (t.employer ? 0 : t.amount),
+        employer: (r[t.name]?.employer ?? 0) + (t.employer ? t.amount : 0)
       };
-    }), o),
+    }), r),
     {}
   ) || {};
-  return /* @__PURE__ */ m(
-    J,
+  return /* @__PURE__ */ u(
+    ee,
     {
-      onEdit: R,
+      onEdit: w,
       onSubmit: async () => {
-        await P(f, async () => {
-          const o = await U({
+        await b(f, async () => {
+          const r = await v({
             request: {
-              companyId: s,
-              payrollId: c,
+              companyId: o,
+              payrollId: n,
               requestBody: {
-                submissionBlockers: []
+                submissionBlockers: Object.entries(R).filter(
+                  ([i]) => te.includes(i)
+                ).map(([i, t]) => ({
+                  blockerType: i,
+                  selectedOption: t
+                }))
               }
             }
           });
-          r(n.RUN_PAYROLL_SUBMITTED, o), u(!0);
+          s(l.RUN_PAYROLL_SUBMITTED, r), m(!0);
         });
       },
       onCancel: async () => {
-        await P(f, async () => {
-          const o = await B({
+        await b(f, async () => {
+          const r = await Y({
             request: {
-              companyId: s,
-              payrollId: c
+              companyId: o,
+              payrollId: n
             }
           });
-          r(n.RUN_PAYROLL_CANCELLED, o), y([]);
+          s(l.RUN_PAYROLL_CANCELLED, r), d([]);
         });
       },
       onPayrollReceipt: () => {
-        r(n.RUN_PAYROLL_RECEIPT_GET, { payrollId: c });
+        s(l.RUN_PAYROLL_RECEIPT_GET, { payrollId: n });
       },
-      onPaystubDownload: async (o) => {
+      onPaystubDownload: async (r) => {
         const i = window.open("", "_blank");
         try {
-          const t = await V(Y, { payrollId: c, employeeId: o });
+          const t = await X(I, { payrollId: n, employeeId: r });
           if (!t.value?.responseStream)
             throw new Error(a("alerts.paystubPdfError"));
-          const v = await $(t.value.responseStream, "application/pdf"), L = URL.createObjectURL(v);
-          i && (i.location.href = L), r(n.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId: o }), URL.revokeObjectURL(L);
+          const M = await ie(t.value.responseStream, "application/pdf"), _ = URL.createObjectURL(M);
+          i && (i.location.href = _), s(l.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId: r }), URL.revokeObjectURL(_);
         } catch (t) {
-          i && i.close(), A(t);
+          i && i.close(), D(t);
         }
       },
-      isSubmitting: T || l || N,
+      isSubmitting: q || c || F,
       isProcessed: e.processingRequest?.status === p.submit_success,
       payrollData: e,
-      bankAccount: O,
-      employeeDetails: h.showEmployees || [],
-      taxes: q,
-      alerts: D
+      bankAccount: T,
+      employeeDetails: N.showEmployees || [],
+      taxes: G,
+      alerts: U,
+      submissionBlockers: k,
+      selectedUnblockOptions: R,
+      onUnblockOptionChange: (r, i) => {
+        A((t) => ({ ...t, [r]: i }));
+      },
+      wireInConfirmationRequest: B
     }
   );
 };
 export {
-  Be as PayrollOverview,
-  ae as Root
+  xe as PayrollOverview,
+  fe as Root
 };
 //# sourceMappingURL=PayrollOverview.js.map