@gusto/embedded-react-sdk 0.14.0 → 0.15.0

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { getPayrollType } from '../helpers'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: getPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList.map(createPayrollProjection)}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["createPayrollProjection","p","getPayrollType","PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","onRunPayroll","payrollId","componentEvents","jsx","BaseComponent","PayrollListPresentation"],"mappings":";;;;;;;;;AAUA,MAAMA,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaC,EAAeD,CAAC;AAC/B,IAMaE,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB,iBAEpCG,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAT,EAAQU,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D;AACA,SACE,gBAAAE,EAACC,KAAc,SAAAZ,GACb,UAAA,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUT,EAAY,IAAIT,CAAuB;AAAA,MACjD,cAAcY;AAAA,MACd,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { usePayrollsSkipMutation } from '@gusto/embedded-api/react-query/payrollsSkip'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollType } from '@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { getPayrollType } from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent, useBase } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: getPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport function PayrollList(props: PayrollListBlockProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { baseSubmitHandler } = useBase()\n  const [showSkipSuccessAlert, setShowSkipSuccessAlert] = useState(false)\n  const [skippingPayrollId, setSkippingPayrollId] = useState<string | null>(null)\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const { data: blockersData } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = blockersData.payrollBlockerList ?? []\n\n  const blockers: ApiPayrollBlocker[] = payrollBlockerList.map(blocker => ({\n    key: blocker.key ?? 'unknown',\n    message: blocker.message,\n  }))\n\n  const { mutateAsync: skipPayroll } = usePayrollsSkipMutation()\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  const onSubmitPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.REVIEW_PAYROLL, { payrollId })\n  }\n  const onViewBlockers = () => {\n    onEvent(componentEvents.RUN_PAYROLL_BLOCKERS_VIEW_ALL)\n  }\n  const onSkipPayroll = async ({ payrollId }: { payrollId: string }) => {\n    const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollId)\n\n    if (payroll?.payPeriod) {\n      setSkippingPayrollId(payrollId)\n      await baseSubmitHandler({}, async () => {\n        await skipPayroll({\n          request: {\n            companyUuid: companyId,\n            requestBody: {\n              payrollType: PayrollType.Regular,\n              startDate: payroll.payPeriod?.startDate,\n              endDate: payroll.payPeriod?.endDate,\n              payScheduleUuid: payroll.payPeriod?.payScheduleUuid ?? undefined,\n            },\n          },\n        })\n\n        setShowSkipSuccessAlert(true)\n        onEvent(componentEvents.PAYROLL_SKIPPED, { payrollId })\n      })\n      setSkippingPayrollId(null)\n    }\n  }\n  return (\n    <PayrollListPresentation\n      payrolls={payrollList.map(createPayrollProjection)}\n      paySchedules={paySchedulesList}\n      onRunPayroll={onRunPayroll}\n      onSubmitPayroll={onSubmitPayroll}\n      onSkipPayroll={onSkipPayroll}\n      onViewBlockers={onViewBlockers}\n      showSkipSuccessAlert={showSkipSuccessAlert}\n      onDismissSkipSuccessAlert={() => {\n        setShowSkipSuccessAlert(false)\n      }}\n      skippingPayrollId={skippingPayrollId}\n      blockers={blockers}\n    />\n  )\n}\n"],"names":["createPayrollProjection","p","getPayrollType","PayrollList","props","jsx","BaseComponent","Root","companyId","onEvent","baseSubmitHandler","useBase","showSkipSuccessAlert","setShowSkipSuccessAlert","useState","skippingPayrollId","setSkippingPayrollId","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","blockersData","usePayrollsGetBlockersSuspense","blockers","blocker","skipPayroll","usePayrollsSkipMutation","onRunPayroll","payrollId","componentEvents","onSubmitPayroll","onViewBlockers","onSkipPayroll","payroll","PayrollType","PayrollListPresentation"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaC,EAAeD,CAAC;AAC/B;AAMO,SAASE,EAAYC,GAA8B;AACxD,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC9D,QAAM,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GACxB,CAACC,GAAsBC,CAAuB,IAAIC,EAAS,EAAK,GAChE,CAACC,GAAmBC,CAAoB,IAAIF,EAAwB,IAAI,GAExE,EAAE,MAAMG,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAV;AAAA,IACA,oBAAoB,CAACW,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAd;AAAA,EAAA,CACD,GACKe,IAAmBF,EAAiB,iBAEpC,EAAE,MAAMG,EAAA,IAAiBC,EAA+B;AAAA,IAC5D,aAAajB;AAAA,EAAA,CACd,GAIKkB,KAFqBF,EAAa,sBAAsB,CAAA,GAEL,IAAI,CAAAG,OAAY;AAAA,IACvE,KAAKA,EAAQ,OAAO;AAAA,IACpB,SAASA,EAAQ;AAAA,EAAA,EACjB,GAEI,EAAE,aAAaC,EAAA,IAAgBC,EAAA,GAE/BC,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAtB,EAAQuB,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D,GACME,IAAkB,CAAC,EAAE,WAAAF,QAAuC;AAChE,IAAAtB,EAAQuB,EAAgB,gBAAgB,EAAE,WAAAD,EAAA,CAAW;AAAA,EACvD,GACMG,IAAiB,MAAM;AAC3B,IAAAzB,EAAQuB,EAAgB,6BAA6B;AAAA,EACvD,GACMG,IAAgB,OAAO,EAAE,WAAAJ,QAAuC;AACpE,UAAMK,IAAUhB,EAAY,KAAK,CAAAgB,MAAWA,EAAQ,gBAAgBL,CAAS;AAE7E,IAAIK,GAAS,cACXpB,EAAqBe,CAAS,GAC9B,MAAMrB,EAAkB,CAAA,GAAI,YAAY;AACtC,YAAMkB,EAAY;AAAA,QAChB,SAAS;AAAA,UACP,aAAapB;AAAA,UACb,aAAa;AAAA,YACX,aAAa6B,EAAY;AAAA,YACzB,WAAWD,EAAQ,WAAW;AAAA,YAC9B,SAASA,EAAQ,WAAW;AAAA,YAC5B,iBAAiBA,EAAQ,WAAW,mBAAmB;AAAA,UAAA;AAAA,QACzD;AAAA,MACF,CACD,GAEDvB,EAAwB,EAAI,GAC5BJ,EAAQuB,EAAgB,iBAAiB,EAAE,WAAAD,EAAA,CAAW;AAAA,IACxD,CAAC,GACDf,EAAqB,IAAI;AAAA,EAE7B;AACA,SACE,gBAAAX;AAAA,IAACiC;AAAA,IAAA;AAAA,MACC,UAAUlB,EAAY,IAAIpB,CAAuB;AAAA,MACjD,cAAcuB;AAAA,MACd,cAAAO;AAAA,MACA,iBAAAG;AAAA,MACA,eAAAE;AAAA,MACA,gBAAAD;AAAA,MACA,sBAAAtB;AAAA,MACA,2BAA2B,MAAM;AAC/B,QAAAC,EAAwB,EAAK;AAAA,MAC/B;AAAA,MACA,mBAAAE;AAAA,MACA,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollList/PayrollListPresentation.d.ts

@@ -1,5 +1,6 @@
 import { Payroll } from '@gusto/embedded-api/models/components/payroll';
 import { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist';
+import { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers';
 import { PayrollType } from './types';
 interface PresentationPayroll extends Payroll {
     payrollType: PayrollType;
@@ -8,8 +9,19 @@ interface PayrollListPresentationProps {
     onRunPayroll: ({ payrollId }: {
         payrollId: NonNullable<Payroll['payrollUuid']>;
     }) => void;
+    onSubmitPayroll: ({ payrollId }: {
+        payrollId: NonNullable<Payroll['payrollUuid']>;
+    }) => void;
+    onSkipPayroll: ({ payrollId }: {
+        payrollId: NonNullable<Payroll['payrollUuid']>;
+    }) => void;
+    onViewBlockers?: () => void;
     payrolls: PresentationPayroll[];
     paySchedules: PayScheduleList[];
+    showSkipSuccessAlert: boolean;
+    onDismissSkipSuccessAlert: () => void;
+    skippingPayrollId: string | null;
+    blockers: ApiPayrollBlocker[];
 }
-export declare const PayrollListPresentation: ({ onRunPayroll, payrolls, paySchedules, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollListPresentation: ({ onRunPayroll, onSubmitPayroll, onSkipPayroll, onViewBlockers, payrolls, paySchedules, showSkipSuccessAlert, onDismissSkipSuccessAlert, skippingPayrollId, blockers, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,63 +1,116 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import { useTranslation as D } from "react-i18next";
-import { Flex as l } from "../../Common/Flex/Flex.js";
+import { jsxs as i, jsx as l } from "react/jsx-runtime";
+import { useState as V } from "react";
+import { useTranslation as E } from "react-i18next";
+import { PayrollBlockerAlerts as q } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
+import b from "./PayrollListPresentation.module.scss.js";
+import { Flex as s } from "../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as L } from "../../../i18n/I18n.js";
-import { parseDateStringToLocal as s } from "../../../helpers/dateFormatting.js";
-import { useLocale as b } from "../../../contexts/LocaleProvider/useLocale.js";
-import { DataView as x } from "../../Common/DataView/DataView.js";
-const B = ({
-  onRunPayroll: m,
-  payrolls: d,
-  paySchedules: c
+import { HamburgerMenu as z } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as G } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as J } from "../../../i18n/I18n.js";
+import { formatDateToStringDate as K, parseDateStringToLocal as c } from "../../../helpers/dateFormatting.js";
+import { useLocale as Q } from "../../../contexts/LocaleProvider/useLocale.js";
+import R from "../../../assets/icons/feature-icon-check.svg.js";
+import { DataView as W } from "../../Common/DataView/DataView.js";
+const de = ({
+  onRunPayroll: L,
+  onSubmitPayroll: C,
+  onSkipPayroll: x,
+  onViewBlockers: I,
+  payrolls: v,
+  paySchedules: p,
+  showSkipSuccessAlert: w,
+  onDismissSkipSuccessAlert: A,
+  skippingPayrollId: H,
+  blockers: y
 }) => {
-  const { Badge: u, Button: h, Heading: p, Text: n } = g();
-  L("Payroll.PayrollList");
-  const { t } = D("Payroll.PayrollList"), { locale: a } = b();
-  return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ r(
-      l,
+  const { Badge: O, Button: h, Dialog: T, Heading: B, Text: n, Alert: M } = G();
+  J("Payroll.PayrollList");
+  const { t } = E("Payroll.PayrollList"), { locale: d } = Q(), [m, D] = V({
+    isOpen: !1,
+    payrollId: null,
+    payPeriod: null
+  }), j = (e, a) => {
+    D({
+      isOpen: !0,
+      payrollId: e,
+      payPeriod: a
+    });
+  }, f = () => {
+    D({
+      isOpen: !1,
+      payrollId: null,
+      payPeriod: null
+    });
+  }, N = () => {
+    m.payrollId && (x({ payrollId: m.payrollId }), f());
+  }, g = (e, a) => {
+    const o = e ? c(e)?.toLocaleDateString(d, {
+      month: "short",
+      day: "numeric"
+    }) : null, r = a ? c(a)?.toLocaleDateString(d, {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    }) : null;
+    return {
+      startDate: o,
+      endDate: r,
+      fullPeriod: o && r ? `${o} – ${r}` : ""
+    };
+  };
+  return /* @__PURE__ */ i(s, { flexDirection: "column", gap: 16, children: [
+    w && /* @__PURE__ */ l("div", { className: b.alertContainer, children: /* @__PURE__ */ l(
+      M,
+      {
+        status: "info",
+        label: t("skipSuccessAlert"),
+        onDismiss: A
+      }
+    ) }),
+    /* @__PURE__ */ l(q, { blockers: y, onMultipleViewClick: I }),
+    /* @__PURE__ */ l(
+      s,
       {
         flexDirection: { base: "column", medium: "row" },
         justifyContent: "space-between",
         alignItems: "flex-start",
         gap: { base: 12, medium: 24 },
-        children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { as: "h2", children: t("title") }) })
+        children: /* @__PURE__ */ l(s, { children: /* @__PURE__ */ l(B, { as: "h2", children: t("title") }) })
       }
     ),
-    /* @__PURE__ */ r(
-      x,
+    /* @__PURE__ */ l(
+      W,
       {
+        emptyState: () => /* @__PURE__ */ i(s, { flexDirection: "column", alignItems: "center", gap: 24, children: [
+          /* @__PURE__ */ l(R, {}),
+          /* @__PURE__ */ l(n, { children: t("emptyState") })
+        ] }),
         columns: [
           {
             render: ({ payPeriod: e }) => {
-              const y = e?.startDate ? s(e.startDate)?.toLocaleDateString(a, {
-                month: "short",
-                day: "numeric"
-              }) : null, f = e?.endDate ? s(e.endDate)?.toLocaleDateString(a, {
-                month: "short",
-                day: "numeric",
-                year: "numeric"
-              }) : null;
-              return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 0, children: [
+              const { startDate: a, endDate: o } = g(
+                e?.startDate,
+                e?.endDate
+              );
+              return /* @__PURE__ */ i(s, { flexDirection: "column", gap: 0, children: [
                 /* @__PURE__ */ i(n, { children: [
-                  y,
+                  a,
                   " - ",
-                  f
+                  o
                 ] }),
-                /* @__PURE__ */ r(n, { variant: "supporting", children: c.find((o) => o.uuid === e?.payScheduleUuid)?.name || c.find((o) => o.uuid === e?.payScheduleUuid)?.customName })
+                /* @__PURE__ */ l(n, { variant: "supporting", children: p.find((r) => r.uuid === e?.payScheduleUuid)?.name || p.find((r) => r.uuid === e?.payScheduleUuid)?.customName })
               ] });
             },
             title: t("tableHeaders.0")
           },
           {
-            render: ({ payrollType: e }) => /* @__PURE__ */ r(n, { children: t(`type.${e}`) }),
+            render: ({ payrollType: e }) => /* @__PURE__ */ l(n, { children: t(`type.${e}`) }),
             title: t("tableHeaders.1")
           },
           {
-            render: ({ checkDate: e }) => /* @__PURE__ */ r(n, { children: e ? s(e)?.toLocaleDateString(a, {
+            render: ({ checkDate: e }) => /* @__PURE__ */ l(n, { children: e ? c(e)?.toLocaleDateString(d, {
               weekday: "short",
               month: "short",
               day: "numeric",
@@ -67,7 +120,7 @@ const B = ({
           },
           {
             title: t("tableHeaders.3"),
-            render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(n, { children: e?.toLocaleDateString(a, {
+            render: ({ payrollDeadline: e }) => /* @__PURE__ */ l(n, { children: e?.toLocaleDateString(d, {
               weekday: "short",
               month: "short",
               day: "numeric",
@@ -76,27 +129,77 @@ const B = ({
           },
           {
             title: t("tableHeaders.4"),
-            render: ({ processed: e }) => /* @__PURE__ */ r(u, { children: t(e ? "status.processed" : "status.unprocessed") })
+            render: ({ processed: e }) => /* @__PURE__ */ l(O, { children: t(e ? "status.processed" : "status.unprocessed") })
           }
         ],
-        data: d,
+        data: v,
         label: t("payrollsListLabel"),
-        itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
-          h,
-          {
-            onClick: () => {
-              m({ payrollId: e });
-            },
-            title: t("runPayrollTitle"),
-            variant: "secondary",
-            children: t("runPayrollTitle")
-          }
-        )
+        itemMenu: ({ payrollUuid: e, calculatedAt: a, processed: o, payPeriod: r }) => {
+          if (o)
+            return null;
+          const u = H === e, { fullPeriod: $ } = g(
+            r?.startDate,
+            r?.endDate
+          ), P = K(/* @__PURE__ */ new Date()), S = P ? c(P) : null, k = r?.startDate ? c(r.startDate) : null, F = y.length === 0 && S && k && S >= k;
+          return /* @__PURE__ */ i("div", { className: b.actionsContainer, children: [
+            a ? /* @__PURE__ */ l(
+              h,
+              {
+                isLoading: u,
+                onClick: () => {
+                  C({ payrollId: e });
+                },
+                title: t("submitPayrollCta"),
+                variant: "secondary",
+                children: t("submitPayrollCta")
+              }
+            ) : /* @__PURE__ */ l(
+              h,
+              {
+                isLoading: u,
+                onClick: () => {
+                  L({ payrollId: e });
+                },
+                title: t("runPayrollTitle"),
+                variant: "secondary",
+                children: t("runPayrollTitle")
+              }
+            ),
+            F && /* @__PURE__ */ l(
+              z,
+              {
+                isLoading: u,
+                menuLabel: t("payrollMenuLabel"),
+                items: [
+                  {
+                    label: t("skipPayrollCta"),
+                    onClick: () => {
+                      j(e, $);
+                    }
+                  }
+                ]
+              }
+            )
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ l(
+      T,
+      {
+        isOpen: m.isOpen,
+        onClose: f,
+        onPrimaryActionClick: N,
+        isDestructive: !0,
+        title: t("skipPayrollDialog.title", { payPeriod: m.payPeriod }),
+        primaryActionLabel: t("skipPayrollDialog.confirmButton"),
+        closeActionLabel: t("skipPayrollDialog.cancelButton"),
+        children: t("skipPayrollDialog.body")
       }
     )
   ] });
 };
 export {
-  B as PayrollListPresentation
+  de as PayrollListPresentation
 };
 //# sourceMappingURL=PayrollListPresentation.js.map

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 { useTranslation } from 'react-i18next'\nimport type { PayrollType } from './types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Heading, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\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        columns={[\n          {\n            render: ({ payPeriod }) => {\n              const startDate = payPeriod?.startDate\n                ? parseDateStringToLocal(payPeriod.startDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                  })\n                : null\n\n              const endDate = payPeriod?.endDate\n                ? parseDateStringToLocal(payPeriod.endDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                    year: 'numeric',\n                  })\n                : null\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>\n                {checkDate\n                  ? parseDateStringToLocal(checkDate)?.toLocaleDateString(locale, {\n                      weekday: 'short',\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  : null}\n              </Text>\n            ),\n            title: t('tableHeaders.2'),\n          },\n          {\n            title: t('tableHeaders.3'),\n            render: ({ payrollDeadline }) => (\n              <Text>\n                {payrollDeadline?.toLocaleDateString(locale, {\n                  weekday: 'short',\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </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        data={payrolls}\n        label={t('payrollsListLabel')}\n        itemMenu={({ payrollUuid }) => (\n          <Button\n            onClick={() => {\n              onRunPayroll({ payrollId: payrollUuid! })\n            }}\n            title={t('runPayrollTitle')}\n            variant=\"secondary\"\n          >\n            {t('runPayrollTitle')}\n          </Button>\n        )}\n      />\n    </Flex>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Heading","Text","useComponentContext","useI18n","useTranslation","locale","useLocale","jsxs","Flex","jsx","DataView","payPeriod","startDate","parseDateStringToLocal","endDate","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid"],"mappings":";;;;;;;;;;AAoBO,MAAMA,IAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA;AACzC,EAAAC,EAAQ,qBAAqB;AAC7B,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB,GAC5C,EAAE,QAAAC,EAAA,IAAWC,EAAA;AAEnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACD;AAAA,MAAA;AAAA,QACC,eAAe,EAAE,MAAM,UAAU,QAAQ,MAAA;AAAA,QACzC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,KAAK,EAAE,MAAM,IAAI,QAAQ,GAAA;AAAA,QAEzB,UAAA,gBAAAC,EAACD,KACC,UAAA,gBAAAC,EAACT,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,OAAO,EAAA,CAAE,EAAA,CAC/B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,UACP;AAAA,YACE,QAAQ,CAAC,EAAE,WAAAC,QAAgB;AACzB,oBAAMC,IAAYD,GAAW,YACzBE,EAAuBF,EAAU,SAAS,GAAG,mBAAmBN,GAAQ;AAAA,gBACtE,OAAO;AAAA,gBACP,KAAK;AAAA,cAAA,CACN,IACD,MAEES,IAAUH,GAAW,UACvBE,EAAuBF,EAAU,OAAO,GAAG,mBAAmBN,GAAQ;AAAA,gBACpE,OAAO;AAAA,gBACP,KAAK;AAAA,gBACL,MAAM;AAAA,cAAA,CACP,IACD;AAEJ,qBACE,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,gBAAA,gBAAAD,EAACN,GAAA,EACE,UAAA;AAAA,kBAAAW;AAAA,kBAAU;AAAA,kBAAIE;AAAA,gBAAA,GACjB;AAAA,gBACA,gBAAAL,EAACR,KAAK,SAAQ,cACX,YAAa,KAAK,CAAAc,MAAYA,EAAS,SAASJ,GAAW,eAAe,GACvE,QACFd,EAAa,KAAK,CAAAkB,MAAYA,EAAS,SAASJ,GAAW,eAAe,GACtE,WAAA,CACR;AAAA,cAAA,GACF;AAAA,YAEJ;AAAA,YACA,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,QAAQ,CAAC,EAAE,aAAAK,QAAkB,gBAAAP,EAACR,GAAA,EAAM,UAAA,EAAE,QAAQe,CAAW,EAAE,EAAA,CAAE;AAAA,YAC7D,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,QAAQ,CAAC,EAAE,WAAAC,QACT,gBAAAR,EAACR,GAAA,EACE,UAAAgB,IACGJ,EAAuBI,CAAS,GAAG,mBAAmBZ,GAAQ;AAAA,cAC5D,SAAS;AAAA,cACT,OAAO;AAAA,cACP,KAAK;AAAA,cACL,MAAM;AAAA,YAAA,CACP,IACD,KAAA,CACN;AAAA,YAEF,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,OAAO,EAAE,gBAAgB;AAAA,YACzB,QAAQ,CAAC,EAAE,iBAAAa,EAAA,MACT,gBAAAT,EAACR,GAAA,EACE,UAAAiB,GAAiB,mBAAmBb,GAAQ;AAAA,cAC3C,SAAS;AAAA,cACT,OAAO;AAAA,cACP,KAAK;AAAA,cACL,MAAM;AAAA,YAAA,CACP,EAAA,CACH;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAO,EAAE,gBAAgB;AAAA,YACzB,QAAQ,CAAC,EAAE,WAAAc,QACT,gBAAAV,EAACX,GAAA,EAAO,UAAY,EAAZqB,IAAc,qBAAwB,oBAAN,EAA0B,CAAE;AAAA,UAAA;AAAA,QAExE;AAAA,QAEF,MAAMvB;AAAA,QACN,OAAO,EAAE,mBAAmB;AAAA,QAC5B,UAAU,CAAC,EAAE,aAAAwB,EAAA,MACX,gBAAAX;AAAA,UAACV;AAAA,UAAA;AAAA,YACC,SAAS,MAAM;AACb,cAAAJ,EAAa,EAAE,WAAWyB,GAAc;AAAA,YAC1C;AAAA,YACA,OAAO,EAAE,iBAAiB;AAAA,YAC1B,SAAQ;AAAA,YAEP,YAAE,iBAAiB;AAAA,UAAA;AAAA,QAAA;AAAA,MACtB;AAAA,IAAA;AAAA,EAEJ,GACF;AAEJ;"}
+{"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 } 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, parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\nimport FeatureIconCheck from '@/assets/icons/feature-icon-check.svg?react'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  onSubmitPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  onSkipPayroll: ({ payrollId }: { payrollId: NonNullable<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 { locale } = useLocale()\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({ payrollId: skipPayrollDialogState.payrollId })\n      handleCloseSkipDialog()\n    }\n  }\n\n  const formatPayPeriod = (startDate: string | undefined, endDate: string | undefined) => {\n    const formattedStartDate = startDate\n      ? parseDateStringToLocal(startDate)?.toLocaleDateString(locale, {\n          month: 'short',\n          day: 'numeric',\n        })\n      : null\n\n    const formattedEndDate = endDate\n      ? parseDateStringToLocal(endDate)?.toLocaleDateString(locale, {\n          month: 'short',\n          day: 'numeric',\n          year: 'numeric',\n        })\n      : null\n\n    return {\n      startDate: formattedStartDate,\n      endDate: formattedEndDate,\n      fullPeriod:\n        formattedStartDate && formattedEndDate ? `${formattedStartDate} – ${formattedEndDate}` : '',\n    }\n  }\n\n  return (\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>\n                {checkDate\n                  ? parseDateStringToLocal(checkDate)?.toLocaleDateString(locale, {\n                      weekday: 'short',\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  : null}\n              </Text>\n            ),\n            title: t('tableHeaders.2'),\n          },\n          {\n            title: t('tableHeaders.3'),\n            render: ({ payrollDeadline }) => (\n              <Text>\n                {payrollDeadline?.toLocaleDateString(locale, {\n                  weekday: 'short',\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </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        data={payrolls}\n        label={t('payrollsListLabel')}\n        itemMenu={({ payrollUuid, calculatedAt, 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 ? parseDateStringToLocal(todayDateString) : null\n          const payPeriodStartDate = payPeriod?.startDate\n            ? parseDateStringToLocal(payPeriod.startDate)\n            : null\n\n          const canSkipPayroll =\n            blockers.length === 0 &&\n            todayAtMidnight &&\n            payPeriodStartDate &&\n            todayAtMidnight >= payPeriodStartDate\n\n          return (\n            <div className={styles.actionsContainer}>\n              {calculatedAt ? (\n                <Button\n                  isLoading={isProcessingSkipPayroll}\n                  onClick={() => {\n                    onSubmitPayroll({ payrollId: payrollUuid! })\n                  }}\n                  title={t('submitPayrollCta')}\n                  variant=\"secondary\"\n                >\n                  {t('submitPayrollCta')}\n                </Button>\n              ) : (\n                <Button\n                  isLoading={isProcessingSkipPayroll}\n                  onClick={() => {\n                    onRunPayroll({ payrollId: payrollUuid! })\n                  }}\n                  title={t('runPayrollTitle')}\n                  variant=\"secondary\"\n                >\n                  {t('runPayrollTitle')}\n                </Button>\n              )}\n              {canSkipPayroll && (\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            </div>\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  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onViewBlockers","payrolls","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","skippingPayrollId","blockers","Badge","Button","Dialog","Heading","Text","Alert","useComponentContext","useI18n","useTranslation","locale","useLocale","skipPayrollDialogState","setSkipPayrollDialogState","useState","handleOpenSkipDialog","payrollId","payPeriod","handleCloseSkipDialog","handleConfirmSkipPayroll","formatPayPeriod","startDate","endDate","formattedStartDate","parseDateStringToLocal","formattedEndDate","jsxs","Flex","jsx","styles","PayrollBlockerAlerts","DataView","FeatureIconCheck","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid","calculatedAt","isProcessingSkipPayroll","payPeriodString","todayDateString","formatDateToStringDate","todayAtMidnight","payPeriodStartDate","canSkipPayroll","HamburgerMenu"],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+const n = "_actionsContainer_1bdsf_1", t = "_alertContainer_1bdsf_8", a = {
+  actionsContainer: n,
+  alertContainer: t
+};
+export {
+  n as actionsContainer,
+  t as alertContainer,
+  a as default
+};
+//# sourceMappingURL=PayrollListPresentation.module.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayrollListPresentation.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -1,120 +1,144 @@
-import { jsx as p } from "react/jsx-runtime";
-import { usePayrollsSubmitMutation as D } from "@gusto/embedded-api/react-query/payrollsSubmit";
-import { usePayrollsCancelMutation as h } from "@gusto/embedded-api/react-query/payrollsCancel";
-import { usePayrollsGetSuspense as N } from "@gusto/embedded-api/react-query/payrollsGet";
-import { useTranslation as k } from "react-i18next";
-import { useBankAccountsGetSuspense as T } from "@gusto/embedded-api/react-query/bankAccountsGet";
-import { useEmployeesListSuspense as Y } from "@gusto/embedded-api/react-query/employeesList";
-import { useState as q, useEffect as v } from "react";
-import { useGustoEmbeddedContext as G } from "@gusto/embedded-api/react-query/_context";
-import { payrollsGetPayStub as j } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
-import { useErrorBoundary as M } from "react-error-boundary";
-import { PayrollOverviewPresentation as F } from "./PayrollOverviewPresentation.js";
-import { PAYROLL_PROCESSING_STATUS as u, componentEvents as n } from "../../../shared/constants.js";
-import { BaseComponent as W } from "../../Base/Base.js";
-import { useBase as H } from "../../Base/useBase.js";
-import { useComponentDictionary as I, useI18n as K } from "../../../i18n/I18n.js";
-import { readableStreamToBlob as V } from "../../../helpers/readableStreamToBlob.js";
-function de(s) {
-  return /* @__PURE__ */ p(W, { ...s, children: /* @__PURE__ */ p(x, { ...s, children: s.children }) });
+import { jsx as y } from "react/jsx-runtime";
+import { usePayrollsSubmitMutation as Y } from "@gusto/embedded-api/react-query/payrollsSubmit";
+import { usePayrollsCancelMutation as q } from "@gusto/embedded-api/react-query/payrollsCancel";
+import { usePayrollsGetSuspense as v } from "@gusto/embedded-api/react-query/payrollsGet";
+import { useTranslation as G } from "react-i18next";
+import { useBankAccountsGetSuspense as M } from "@gusto/embedded-api/react-query/bankAccountsGet";
+import { useEmployeesListSuspense as j } from "@gusto/embedded-api/react-query/employeesList";
+import { useState as L, useEffect as F } from "react";
+import { useGustoEmbeddedContext as x } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as I } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as W } from "react-error-boundary";
+import { PayrollOverviewPresentation as H } from "./PayrollOverviewPresentation.js";
+import { PAYROLL_PROCESSING_STATUS as m, componentEvents as a } from "../../../shared/constants.js";
+import { BaseComponent as K } from "../../Base/Base.js";
+import { useBase as V } from "../../Base/useBase.js";
+import { useComponentDictionary as z, useI18n as J } from "../../../i18n/I18n.js";
+import { readableStreamToBlob as Q } from "../../../helpers/readableStreamToBlob.js";
+import X from "../../Common/hooks/useNumberFormatter.js";
+import { parseDateStringToLocal as Z } from "../../../helpers/dateFormatting.js";
+import { useLocale as $ } from "../../../contexts/LocaleProvider/useLocale.js";
+function ge(s) {
+  return /* @__PURE__ */ y(K, { ...s, children: /* @__PURE__ */ y(ee, { ...s, children: s.children }) });
 }
-const x = ({
+const ee = ({
   companyId: s,
-  payrollId: l,
-  dictionary: R,
-  onEvent: t,
-  alerts: d,
-  showBackButton: b = !1
+  payrollId: i,
+  dictionary: S,
+  onEvent: r,
+  alerts: _,
+  showBackButton: w = !1
 }) => {
-  I("Payroll.PayrollOverview", R), K("Payroll.PayrollOverview");
-  const { baseSubmitHandler: P } = H(), { t: f } = k("Payroll.PayrollOverview"), [a, c] = q(!1), { showBoundary: L } = M(), { data: m } = N(
+  z("Payroll.PayrollOverview", S), J("Payroll.PayrollOverview");
+  const { baseSubmitHandler: f } = V(), { t: c } = G("Payroll.PayrollOverview"), [n, u] = L(!1), [A, P] = L(_ || []), { showBoundary: D } = W(), d = X("currency"), { locale: R } = $(), { data: p } = v(
     {
       companyId: s,
-      payrollId: l,
+      payrollId: i,
       include: ["taxes", "benefits", "deductions"]
     },
-    { refetchInterval: a ? 5e3 : !1 }
-  ), r = m.payrollShow;
-  v(() => {
-    r.processingRequest?.status === u.submitting && !a && c(!0), a && r.processingRequest?.status === u.submit_success && (t(n.RUN_PAYROLL_PROCESSED), c(!1)), a && r.processingRequest?.status === u.processing_failed && (t(n.RUN_PAYROLL_PROCESSING_FAILED), c(!1));
-  }, [r.processingRequest?.status, a, t]);
-  const { data: _ } = T({
+    { refetchInterval: n ? 5e3 : !1 }
+  ), e = p.payrollShow;
+  F(() => {
+    e.processingRequest?.status === m.submitting && !n && u(!0), n && e.processingRequest?.status === m.submit_success && (r(a.RUN_PAYROLL_PROCESSED), P([
+      {
+        type: "success",
+        title: c("alerts.payrollProcessedTitle"),
+        content: c("alerts.payrollProcessedMessage", {
+          amount: d(Number(e.totals?.netPayDebit)),
+          date: (e.payrollStatusMeta?.expectedDebitTime ? Z(e.payrollStatusMeta.expectedDebitTime) : e.payrollDeadline)?.toLocaleString(R, {
+            month: "short",
+            day: "numeric",
+            year: "numeric"
+          })
+        })
+      }
+    ]), u(!1)), n && e.processingRequest?.status === m.processing_failed && (r(a.RUN_PAYROLL_PROCESSING_FAILED), u(!1));
+  }, [
+    e.processingRequest?.status,
+    n,
+    r,
+    c,
+    R,
+    d,
+    e
+  ]);
+  const { data: E } = M({
     companyId: s
-  }), w = _.companyBankAccounts?.[0], { data: S } = Y({
+  }), O = E.companyBankAccounts?.[0], { data: g } = j({
     companyId: s
-  }), { mutateAsync: A, isPending: E } = D(), { mutateAsync: O, isPending: B } = h();
-  if (!r.calculatedAt)
-    throw new Error(f("alerts.payrollNotCalculated"));
-  const C = G(), U = r.employeeCompensations?.reduce(
-    (o, i) => (i.taxes?.forEach((e) => {
-      o[e.name] = {
-        employee: (o[e.name]?.employee ?? 0) + (e.employer ? 0 : e.amount),
-        employer: (o[e.name]?.employer ?? 0) + (e.employer ? e.amount : 0)
+  }), { mutateAsync: C, isPending: B } = Y(), { mutateAsync: U, isPending: h } = q();
+  if (!e.calculatedAt)
+    throw new Error(c("alerts.payrollNotCalculated"));
+  const N = x(), T = e.employeeCompensations?.reduce(
+    (o, l) => (l.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)
       };
     }), o),
     {}
   ) || {};
-  return /* @__PURE__ */ p(
-    F,
+  return /* @__PURE__ */ y(
+    H,
     {
       onEdit: () => {
-        t(n.RUN_PAYROLL_EDIT);
+        r(a.RUN_PAYROLL_EDIT);
       },
       onSubmit: async () => {
-        await P(m, async () => {
-          const o = await A({
+        await f(p, async () => {
+          const o = await C({
             request: {
               companyId: s,
-              payrollId: l,
+              payrollId: i,
               requestBody: {
                 submissionBlockers: []
               }
             }
           });
-          t(n.RUN_PAYROLL_SUBMITTED, o), c(!0);
+          r(a.RUN_PAYROLL_SUBMITTED, o), u(!0);
         });
       },
       onCancel: async () => {
-        await P(m, async () => {
-          const o = await O({
+        await f(p, async () => {
+          const o = await U({
             request: {
               companyId: s,
-              payrollId: l
+              payrollId: i
             }
           });
-          t(n.RUN_PAYROLL_CANCELLED, o);
+          r(a.RUN_PAYROLL_CANCELLED, o), P([]);
         });
       },
       onPayrollReceipt: () => {
-        t(n.RUN_PAYROLL_RECEIPT_GET, { payrollId: l });
+        r(a.RUN_PAYROLL_RECEIPT_GET, { payrollId: i });
       },
       onPaystubDownload: async (o) => {
-        const i = window.open("", "_blank");
+        const l = window.open("", "_blank");
         try {
-          const e = await j(C, { payrollId: l, employeeId: o });
-          if (!e.value?.responseStream)
-            throw new Error(f("alerts.paystubPdfError"));
-          const g = await V(e.value.responseStream, "application/pdf"), y = URL.createObjectURL(g);
-          i && (i.location.href = y), t(n.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId: o }), URL.revokeObjectURL(y);
-        } catch (e) {
-          i && i.close(), L(e);
+          const t = await I(N, { payrollId: i, employeeId: o });
+          if (!t.value?.responseStream)
+            throw new Error(c("alerts.paystubPdfError"));
+          const k = await Q(t.value.responseStream, "application/pdf"), b = URL.createObjectURL(k);
+          l && (l.location.href = b), r(a.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId: o }), URL.revokeObjectURL(b);
+        } catch (t) {
+          l && l.close(), D(t);
         }
       },
-      onBack: b ? () => {
-        t(n.RUN_PAYROLL_BACK);
+      onBack: w ? () => {
+        r(a.RUN_PAYROLL_BACK);
       } : void 0,
-      isSubmitting: E || a || B,
-      isProcessed: r.processingRequest?.status === u.submit_success,
-      payrollData: r,
-      bankAccount: w,
-      employeeDetails: S.showEmployees || [],
-      taxes: U,
-      alerts: d
+      isSubmitting: B || n || h,
+      isProcessed: e.processingRequest?.status === m.submit_success,
+      payrollData: e,
+      bankAccount: O,
+      employeeDetails: g.showEmployees || [],
+      taxes: T,
+      alerts: A
     }
   );
 };
 export {
-  de as PayrollOverview,
-  x as Root
+  ge as PayrollOverview,
+  ee as Root
 };
 //# sourceMappingURL=PayrollOverview.js.map