@gusto/embedded-react-sdk 0.37.0 → 0.38.0-rc.1

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

@@ -1,82 +1,122 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useRef as E, useState as V } from "react";
-import { useTranslation as G } from "react-i18next";
-import { getPayrollTypeLabel as J } from "../helpers.js";
-import s from "./PayrollListPresentation.module.scss.js";
-import { Flex as o } from "../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../shared/constants.js";
-import { HamburgerMenu as K } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as Q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as X } from "../../../i18n/I18n.js";
-import { formatDateToStringDate as Z } from "../../../helpers/dateFormatting.js";
-import { useDateFormatter as _ } from "../../../hooks/useDateFormatter.js";
-import $ from "../../../assets/icons/feature-icon-check.svg.js";
-import ee from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { PayrollStatusBadges as te } from "../PayrollStatusBadges/PayrollStatusBadges.js";
-import { DataView as re } from "../../Common/DataView/DataView.js";
-const Ce = ({
-  onRunPayroll: w,
-  onSubmitPayroll: I,
-  onSkipPayroll: H,
-  onRunOffCyclePayroll: N,
-  payrolls: U,
-  paySchedules: y,
-  showSkipSuccessAlert: B,
-  onDismissSkipSuccessAlert: M,
-  skippingPayrollId: h,
-  blockers: O,
-  wireInRequests: T
+import { jsx as a, jsxs as c } from "react/jsx-runtime";
+import { OffCycleReasonType as y } from "@gusto/embedded-api/models/components/payroll";
+import { useRef as de, useMemo as K, useState as q } from "react";
+import { useTranslation as ue } from "react-i18next";
+import { getPayrollTypeLabel as me } from "../helpers.js";
+import r from "./PayrollListPresentation.module.scss.js";
+import { Flex as f } from "../../Common/Flex/Flex.js";
+import { DateRangeFilter as fe } from "../../Common/DateRangeFilter/DateRangeFilter.js";
+import { useComponentContext as ye } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as pe } from "../../../i18n/I18n.js";
+import { formatDateToStringDate as De } from "../../../helpers/dateFormatting.js";
+import { useDateFormatter as Ce } from "../../../hooks/useDateFormatter.js";
+import he from "../../../assets/icons/feature-icon-check.svg.js";
+import Pe from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { HamburgerMenu as ge } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { PayrollStatusBadges as be } from "../PayrollStatusBadges/PayrollStatusBadges.js";
+import { DataView as Se } from "../../Common/DataView/DataView.js";
+const V = /* @__PURE__ */ new Set([
+  y.Bonus,
+  y.Correction,
+  y.DismissedEmployee
+]);
+function ke(o, S, p) {
+  if (o.processed) return !1;
+  const D = o.payPeriod?.startDate ? new Date(o.payPeriod.startDate) : null, k = !o.offCycle || o.offCycleReason === y.TransitionFromOldPaySchedule, d = S.length === 0 && k && p && D && p >= D, L = o.offCycle && !!o.offCycleReason && V.has(o.offCycleReason);
+  return !!(d || L);
+}
+const Ye = ({
+  onRunPayroll: o,
+  onSubmitPayroll: S,
+  onSkipPayroll: p,
+  onDeletePayroll: D,
+  onRunOffCyclePayroll: k,
+  payrolls: d,
+  pagination: L,
+  paySchedules: I,
+  showSkipSuccessAlert: G,
+  onDismissSkipSuccessAlert: J,
+  showDeleteSuccessAlert: Q,
+  onDismissDeleteSuccessAlert: X,
+  skippingPayrollId: O,
+  deletingPayrollId: Z,
+  blockers: A,
+  wireInRequests: $,
+  dateRangeFilter: s
 }) => {
-  const { Box: W, Button: f, Dialog: j, Heading: F, Text: c, Alert: R } = Q();
-  X("Payroll.PayrollList");
-  const { t } = G("Payroll.PayrollList"), d = _(), g = E(null), D = ee({ ref: g }).includes("large"), [u, P] = V({
+  const { Box: ee, Button: v, ButtonIcon: x, Dialog: N, Heading: te, Text: u, Alert: w } = ye();
+  pe("Payroll.PayrollList");
+  const { t } = ue("Payroll.PayrollList"), m = Ce(), E = de(null), F = Pe({ ref: E }).includes("large"), C = K(() => {
+    const e = De(/* @__PURE__ */ new Date());
+    return e ? new Date(e) : null;
+  }, []), T = K(
+    () => d.some((e) => ke(e, A, C)),
+    [d, A, C]
+  ), [h, B] = q({
     isOpen: !1,
     payrollId: null,
     payPeriod: null
-  }), Y = (e, a) => {
-    P({
+  }), ae = (e, l) => {
+    B({
       isOpen: !0,
       payrollId: e,
-      payPeriod: a
+      payPeriod: l
     });
-  }, b = () => {
-    P({
+  }, H = () => {
+    B({
       isOpen: !1,
       payrollId: null,
       payPeriod: null
     });
-  }, z = () => {
-    u.payrollId && (H({ payrollUuid: u.payrollId }), b());
-  }, C = (e, a) => {
-    const n = d.formatShort(e), l = d.formatShortWithYear(a);
+  }, le = () => {
+    h.payrollId && (p({ payrollUuid: h.payrollId }), H());
+  }, [P, M] = q({
+    isOpen: !1,
+    payrollId: null,
+    payPeriod: null
+  }), ne = (e, l) => {
+    M({
+      isOpen: !0,
+      payrollId: e,
+      payPeriod: l
+    });
+  }, U = () => {
+    M({
+      isOpen: !1,
+      payrollId: null,
+      payPeriod: null
+    });
+  }, re = () => {
+    P.payrollId && (D({ payrollUuid: P.payrollId }), U());
+  }, R = (e, l) => {
+    const i = m.formatShort(e), n = m.formatShortWithYear(l);
     return {
-      startDate: n,
-      endDate: l,
-      fullPeriod: d.formatPayPeriodRange(e, a, { useShortMonth: !0 })
+      startDate: i,
+      endDate: n,
+      fullPeriod: m.formatPayPeriodRange(e, l, { useShortMonth: !0 })
     };
-  }, k = (e) => {
-    const { payrollUuid: a, calculatedAt: n, processed: l, payPeriod: m } = e;
-    if (l)
+  }, W = (e) => {
+    const { payrollUuid: l, calculatedAt: i, processed: n, payPeriod: g } = e;
+    if (n)
       return null;
-    const p = h === a;
-    return n ? /* @__PURE__ */ r(
-      f,
+    const b = O === l;
+    return i ? /* @__PURE__ */ a(
+      v,
       {
-        isLoading: p,
+        isLoading: b,
         onClick: () => {
-          I({ payrollUuid: a, payPeriod: m });
+          S({ payrollUuid: l, payPeriod: g });
         },
         title: t("submitPayrollCta"),
         variant: "secondary",
         children: t("submitPayrollCta")
       }
-    ) : /* @__PURE__ */ r(
-      f,
+    ) : /* @__PURE__ */ a(
+      v,
       {
-        isLoading: p,
+        isLoading: b,
         onClick: () => {
-          w({ payrollUuid: a, payPeriod: m });
+          o({ payrollUuid: l, payPeriod: g });
         },
         title: t("runPayrollTitle"),
         variant: "secondary",
@@ -84,143 +124,203 @@ const Ce = ({
       }
     );
   };
-  return /* @__PURE__ */ r("div", { ref: g, className: s.container, children: /* @__PURE__ */ i(o, { flexDirection: "column", gap: 16, children: [
-    B && /* @__PURE__ */ r("div", { className: s.alertContainer, children: /* @__PURE__ */ r(
-      R,
+  return /* @__PURE__ */ a("div", { ref: E, className: r.container, children: /* @__PURE__ */ c(f, { flexDirection: "column", gap: 16, children: [
+    G && /* @__PURE__ */ a("div", { className: r.alertContainer, children: /* @__PURE__ */ a(
+      w,
       {
         status: "info",
         label: t("skipSuccessAlert"),
-        onDismiss: M
+        onDismiss: J
       }
     ) }),
-    /* @__PURE__ */ r(
-      o,
+    Q && /* @__PURE__ */ a("div", { className: r.alertContainer, children: /* @__PURE__ */ a(
+      w,
       {
-        flexDirection: { base: "column", medium: "row" },
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        gap: { base: 12, medium: 24 },
-        children: /* @__PURE__ */ r(o, { children: /* @__PURE__ */ r(F, { as: "h2", children: t("title") }) })
+        status: "info",
+        label: t("deleteSuccessAlert"),
+        onDismiss: X
       }
-    ),
-    /* @__PURE__ */ r(
-      re,
+    ) }),
+    /* @__PURE__ */ c(f, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ a(te, { as: "h2", children: t("title") }),
+      /* @__PURE__ */ a(
+        fe,
+        {
+          startDate: s.filterStartDate,
+          endDate: s.filterEndDate,
+          onStartDateChange: s.handleStartDateChange,
+          onEndDateChange: s.handleEndDateChange,
+          onClear: s.handleClearFilter,
+          startDateLabel: t("dateFilter.startDate"),
+          endDateLabel: t("dateFilter.endDate"),
+          applyLabel: t("dateFilter.apply"),
+          resetLabel: t("dateFilter.reset"),
+          triggerLabel: t("dateFilter.trigger"),
+          isFilterActive: s.isFilterActive,
+          maxEndDate: s.getMaxEndDate(),
+          minStartDate: s.getMinStartDate()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(
+      Se,
       {
         breakAt: "large",
-        emptyState: () => /* @__PURE__ */ i(o, { flexDirection: "column", alignItems: "center", gap: 24, children: [
-          /* @__PURE__ */ r($, {}),
-          /* @__PURE__ */ r(c, { children: t("emptyState") })
+        pagination: L,
+        emptyState: () => /* @__PURE__ */ c(f, { flexDirection: "column", alignItems: "center", gap: 24, children: [
+          /* @__PURE__ */ a(he, {}),
+          /* @__PURE__ */ a(u, { children: t("emptyState") })
         ] }),
-        data: U,
+        data: d,
         columns: [
           {
             render: ({ payPeriod: e }) => {
-              const { startDate: a, endDate: n } = C(
+              const { startDate: l, endDate: i } = R(
                 e?.startDate,
                 e?.endDate
               );
-              return /* @__PURE__ */ i("div", { className: s.payPeriodCell, children: [
-                a,
+              return /* @__PURE__ */ c("div", { className: r.payPeriodCell, children: [
+                l,
                 " - ",
-                n,
-                /* @__PURE__ */ r(c, { variant: "supporting", size: "sm", children: y.find((l) => l.uuid === e?.payScheduleUuid)?.name || y.find((l) => l.uuid === e?.payScheduleUuid)?.customName })
+                i,
+                /* @__PURE__ */ a(u, { variant: "supporting", size: "sm", children: I.find((n) => n.uuid === e?.payScheduleUuid)?.name || I.find((n) => n.uuid === e?.payScheduleUuid)?.customName })
               ] });
             },
             title: t("tableHeaders.0")
           },
           {
-            render: (e) => /* @__PURE__ */ r(c, { children: J(e) }),
+            render: (e) => /* @__PURE__ */ a(u, { children: me(e) }),
             title: t("tableHeaders.1")
           },
           {
-            render: ({ checkDate: e }) => d.formatShortWithWeekdayAndYear(e),
+            render: ({ checkDate: e }) => m.formatShortWithWeekdayAndYear(e),
             title: t("tableHeaders.2")
           },
           {
             title: t("tableHeaders.3"),
-            render: ({ payrollDeadline: e }) => d.formatShortWithWeekdayAndYear(e)
+            render: ({ payrollDeadline: e }) => m.formatShortWithWeekdayAndYear(e)
           },
           {
             title: t("tableHeaders.4"),
             render: (e) => {
-              const a = T.find(
-                (n) => n.paymentUuid === e.payrollUuid
+              const l = $.find(
+                (i) => i.paymentUuid === e.payrollUuid
               );
-              return /* @__PURE__ */ r(te, { payroll: e, wireInRequest: a });
+              return /* @__PURE__ */ a(be, { payroll: e, wireInRequest: l });
             }
           },
-          ...D ? [] : [
+          ...F ? [] : [
             {
               title: "",
               render: (e) => {
-                const a = k(e);
-                return a ? /* @__PURE__ */ r(o, { flexDirection: "column", alignItems: "stretch", gap: 12, children: a }) : null;
+                const l = W(e);
+                return l ? /* @__PURE__ */ a(f, { flexDirection: "column", alignItems: "stretch", gap: 12, children: l }) : null;
               }
             }
           ]
         ],
         label: t("payrollsListLabel"),
         itemMenu: (e) => {
-          const { payrollUuid: a, processed: n, payPeriod: l } = e;
-          if (n)
-            return null;
-          const m = h === a, { fullPeriod: p } = C(
-            l?.startDate,
-            l?.endDate
-          ), S = Z(/* @__PURE__ */ new Date()), x = S ? new Date(S) : null, L = l?.startDate ? new Date(l.startDate) : null, q = O.length === 0 && x && L && x >= L, v = D ? k(e) : null, A = q ? /* @__PURE__ */ r(
-            K,
+          const { payrollUuid: l, processed: i, payPeriod: n } = e, g = O === l, b = Z === l, oe = F ? W(e) : null;
+          if (i)
+            return /* @__PURE__ */ a("div", { className: r.actionsContainer, children: T && /* @__PURE__ */ a(
+              x,
+              {
+                "aria-label": "",
+                "aria-hidden": !0,
+                tabIndex: -1,
+                isDisabled: !0,
+                className: r.menuPlaceholder
+              }
+            ) });
+          const { fullPeriod: j } = R(
+            n?.startDate,
+            n?.endDate
+          ), Y = n?.startDate ? new Date(n.startDate) : null, ie = !e.offCycle || e.offCycleReason === y.TransitionFromOldPaySchedule, _ = A.length === 0 && ie && C && Y && C >= Y, se = e.offCycle && !!e.offCycleReason && V.has(e.offCycleReason), z = _ ? [
             {
-              isLoading: m,
-              menuLabel: t("payrollMenuLabel"),
-              items: [
-                {
-                  label: t("skipPayrollCta"),
-                  onClick: () => {
-                    Y(a, p);
-                  }
-                }
-              ]
+              label: t("skipPayrollCta"),
+              onClick: () => {
+                ae(l, j);
+              }
+            }
+          ] : se ? [
+            {
+              label: t("deletePayrollCta"),
+              onClick: () => {
+                ne(l, j);
+              }
             }
-          ) : null;
-          return !v && !A ? null : /* @__PURE__ */ i("div", { className: s.actionsContainer, children: [
-            v,
-            A
+          ] : null, ce = z !== null;
+          return /* @__PURE__ */ c("div", { className: r.actionsContainer, children: [
+            oe,
+            ce ? /* @__PURE__ */ a(
+              ge,
+              {
+                isLoading: _ ? g : b,
+                menuLabel: t("payrollMenuLabel"),
+                items: z
+              }
+            ) : T && /* @__PURE__ */ a(
+              x,
+              {
+                "aria-label": "",
+                "aria-hidden": !0,
+                tabIndex: -1,
+                isDisabled: !0,
+                className: r.menuPlaceholder
+              }
+            )
           ] });
         }
       }
     ),
-    /* @__PURE__ */ r(
-      j,
+    /* @__PURE__ */ a(
+      N,
       {
-        isOpen: u.isOpen,
-        onClose: b,
-        onPrimaryActionClick: z,
+        isOpen: h.isOpen,
+        onClose: H,
+        onPrimaryActionClick: le,
         isDestructive: !0,
-        title: t("skipPayrollDialog.title", { payPeriod: u.payPeriod }),
+        title: t("skipPayrollDialog.title", { payPeriod: h.payPeriod }),
         primaryActionLabel: t("skipPayrollDialog.confirmCta"),
         closeActionLabel: t("skipPayrollDialog.cancelCta"),
         children: t("skipPayrollDialog.body")
       }
     ),
-    /* @__PURE__ */ r(W, { className: s.offCycleCta, children: /* @__PURE__ */ i(
-      o,
+    /* @__PURE__ */ a(
+      N,
+      {
+        isOpen: P.isOpen,
+        onClose: U,
+        onPrimaryActionClick: re,
+        isDestructive: !0,
+        title: t("deletePayrollDialog.title", {
+          payPeriod: P.payPeriod
+        }),
+        primaryActionLabel: t("deletePayrollDialog.confirmCta"),
+        closeActionLabel: t("deletePayrollDialog.cancelCta"),
+        children: t("deletePayrollDialog.body")
+      }
+    ),
+    /* @__PURE__ */ a(ee, { className: r.offCycleCta, children: /* @__PURE__ */ c(
+      f,
       {
         flexDirection: { base: "column", medium: "row" },
         justifyContent: "space-between",
         alignItems: { base: "stretch", medium: "center" },
         gap: 16,
         children: [
-          /* @__PURE__ */ i(o, { flexDirection: "column", gap: 4, children: [
-            /* @__PURE__ */ r(c, { weight: "bold", children: t("offCycleCta.title") }),
-            /* @__PURE__ */ r(c, { variant: "supporting", size: "sm", children: t("offCycleCta.description") })
+          /* @__PURE__ */ c("div", { className: r.offCycleCtaText, children: [
+            /* @__PURE__ */ a(u, { weight: "bold", children: t("offCycleCta.title") }),
+            /* @__PURE__ */ a(u, { variant: "supporting", size: "sm", children: t("offCycleCta.description") })
           ] }),
-          /* @__PURE__ */ r("div", { className: s.offCycleCtaButton, children: /* @__PURE__ */ r(f, { variant: "secondary", onClick: N, children: t("offCycleCta.button") }) })
+          /* @__PURE__ */ a("div", { className: r.offCycleCtaButton, children: /* @__PURE__ */ a(v, { variant: "secondary", onClick: k, children: t("offCycleCta.button") }) })
         ]
       }
     ) })
   ] }) });
 };
 export {
-  Ce as PayrollListPresentation
+  Ye 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 type { WireInRequest } from '@gusto/embedded-api/models/components/wireinrequest'\nimport { useState, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollStatusBadges } from '../PayrollStatusBadges'\nimport { getPayrollTypeLabel } from '../helpers'\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 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  onRunOffCyclePayroll: () => void\n  payrolls: Payroll[]\n  paySchedules: PayScheduleList[]\n  showSkipSuccessAlert: boolean\n  onDismissSkipSuccessAlert: () => void\n  skippingPayrollId: string | null\n  blockers: ApiPayrollBlocker[]\n  wireInRequests: WireInRequest[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  onSubmitPayroll,\n  onSkipPayroll,\n  onRunOffCyclePayroll,\n  payrolls,\n  paySchedules,\n  showSkipSuccessAlert,\n  onDismissSkipSuccessAlert,\n  skippingPayrollId,\n  blockers,\n  wireInRequests,\n}: PayrollListPresentationProps) => {\n  const { Box, 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('large')\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  const renderActionButton = (payroll: Payroll) => {\n    const { payrollUuid, calculatedAt, processed, payPeriod } = payroll\n\n    if (processed) {\n      return null\n    }\n\n    const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n    return 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\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        <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          breakAt=\"large\"\n          emptyState={() => (\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n              <FeatureIconCheck />\n              <Text>{t('emptyState')}</Text>\n            </Flex>\n          )}\n          data={payrolls}\n          columns={[\n            {\n              render: ({ payPeriod }) => {\n                const { startDate, endDate } = formatPayPeriod(\n                  payPeriod?.startDate,\n                  payPeriod?.endDate,\n                )\n\n                return (\n                  <div className={styles.payPeriodCell}>\n                    {startDate} - {endDate}\n                    <Text variant=\"supporting\" size=\"sm\">\n                      {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.name ||\n                        paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                          ?.customName}\n                    </Text>\n                  </div>\n                )\n              },\n              title: t('tableHeaders.0'),\n            },\n            {\n              render: payroll => <Text>{getPayrollTypeLabel(payroll)}</Text>,\n              title: t('tableHeaders.1'),\n            },\n            {\n              render: ({ checkDate }) => dateFormatter.formatShortWithWeekdayAndYear(checkDate),\n              title: t('tableHeaders.2'),\n            },\n            {\n              title: t('tableHeaders.3'),\n              render: ({ payrollDeadline }) =>\n                dateFormatter.formatShortWithWeekdayAndYear(payrollDeadline),\n            },\n            {\n              title: t('tableHeaders.4'),\n              render: payroll => {\n                const wireInRequest = wireInRequests.find(\n                  wire => wire.paymentUuid === payroll.payrollUuid,\n                )\n                return <PayrollStatusBadges payroll={payroll} wireInRequest={wireInRequest} />\n              },\n            },\n            ...(!isDesktop\n              ? [\n                  {\n                    title: '',\n                    render: (payroll: Payroll) => {\n                      const button = renderActionButton(payroll)\n                      if (!button) return null\n                      return (\n                        <Flex flexDirection=\"column\" alignItems=\"stretch\" gap={12}>\n                          {button}\n                        </Flex>\n                      )\n                    },\n                  },\n                ]\n              : []),\n          ]}\n          label={t('payrollsListLabel')}\n          itemMenu={payroll => {\n            const { payrollUuid, processed, payPeriod } = payroll\n\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            const button = isDesktop ? renderActionButton(payroll) : null\n\n            const hamburgerMenu = 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            ) : null\n\n            if (!button && !hamburgerMenu) {\n              return null\n            }\n\n            return (\n              <div className={styles.actionsContainer}>\n                {button}\n                {hamburgerMenu}\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.confirmCta')}\n          closeActionLabel={t('skipPayrollDialog.cancelCta')}\n        >\n          {t('skipPayrollDialog.body')}\n        </Dialog>\n        <Box className={styles.offCycleCta}>\n          <Flex\n            flexDirection={{ base: 'column', medium: 'row' }}\n            justifyContent=\"space-between\"\n            alignItems={{ base: 'stretch', medium: 'center' }}\n            gap={16}\n          >\n            <Flex flexDirection=\"column\" gap={4}>\n              <Text weight=\"bold\">{t('offCycleCta.title')}</Text>\n              <Text variant=\"supporting\" size=\"sm\">\n                {t('offCycleCta.description')}\n              </Text>\n            </Flex>\n            <div className={styles.offCycleCtaButton}>\n              <Button variant=\"secondary\" onClick={onRunOffCyclePayroll}>\n                {t('offCycleCta.button')}\n              </Button>\n            </div>\n          </Flex>\n        </Box>\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onRunOffCyclePayroll","payrolls","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","skippingPayrollId","blockers","wireInRequests","Box","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","renderActionButton","payroll","payrollUuid","calculatedAt","processed","isProcessingSkipPayroll","jsx","styles","jsxs","Flex","DataView","FeatureIconCheck","schedule","getPayrollTypeLabel","checkDate","payrollDeadline","wireInRequest","wire","PayrollStatusBadges","button","payPeriodString","todayDateString","formatDateToStringDate","todayAtMidnight","payPeriodStartDate","canSkipPayroll","hamburgerMenu","HamburgerMenu"],"mappings":";;;;;;;;;;;;;;;;;AA+BO,MAAMA,KAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,2BAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AACF,MAAoC;AAClC,QAAM,EAAE,KAAAC,GAAK,QAAAC,GAAQ,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUC,EAAA;AACtD,EAAAC,EAAQ,qBAAqB;AAC7B,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB,GAC5CC,IAAgBC,EAAA,GAChBC,IAAeC,EAAuB,IAAI,GAE1CC,IADcC,GAAwB,EAAE,KAAKH,GAAc,EACnC,SAAS,OAAO,GACxC,CAACI,GAAwBC,CAAyB,IAAIC,EAIzD;AAAA,IACD,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,EAAA,CACZ,GAEKC,IAAuB,CAACC,GAAmBC,MAAsB;AACrE,IAAAJ,EAA0B;AAAA,MACxB,QAAQ;AAAA,MACR,WAAAG;AAAA,MACA,WAAAC;AAAA,IAAA,CACD;AAAA,EACH,GAEMC,IAAwB,MAAM;AAClC,IAAAL,EAA0B;AAAA,MACxB,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,IAAA,CACZ;AAAA,EACH,GAEMM,IAA2B,MAAM;AACrC,IAAIP,EAAuB,cACzBxB,EAAc,EAAE,aAAawB,EAAuB,UAAA,CAAW,GAC/DM,EAAA;AAAA,EAEJ,GAEME,IAAkB,CAACC,GAA+BC,MAAgC;AACtF,UAAMC,IAAqBjB,EAAc,YAAYe,CAAS,GACxDG,IAAmBlB,EAAc,oBAAoBgB,CAAO;AAElE,WAAO;AAAA,MACL,WAAWC;AAAA,MACX,SAASC;AAAA,MACT,YAAYlB,EAAc,qBAAqBe,GAAWC,GAAS,EAAE,eAAe,IAAM;AAAA,IAAA;AAAA,EAE9F,GAEMG,IAAqB,CAACC,MAAqB;AAC/C,UAAM,EAAE,aAAAC,GAAa,cAAAC,GAAc,WAAAC,GAAW,WAAAZ,MAAcS;AAE5D,QAAIG;AACF,aAAO;AAGT,UAAMC,IAA0BpC,MAAsBiC;AAEtD,WAAOC,IACL,gBAAAG;AAAA,MAACjC;AAAA,MAAA;AAAA,QACC,WAAWgC;AAAA,QACX,SAAS,MAAM;AACb,UAAA3C,EAAgB,EAAE,aAAAwC,GAAa,WAAAV,GAAW;AAAA,QAC5C;AAAA,QACA,OAAO,EAAE,kBAAkB;AAAA,QAC3B,SAAQ;AAAA,QAEP,YAAE,kBAAkB;AAAA,MAAA;AAAA,IAAA,IAGvB,gBAAAc;AAAA,MAACjC;AAAA,MAAA;AAAA,QACC,WAAWgC;AAAA,QACX,SAAS,MAAM;AACb,UAAA5C,EAAa,EAAE,aAAAyC,GAAa,WAAAV,GAAW;AAAA,QACzC;AAAA,QACA,OAAO,EAAE,iBAAiB;AAAA,QAC1B,SAAQ;AAAA,QAEP,YAAE,iBAAiB;AAAA,MAAA;AAAA,IAAA;AAAA,EAG1B;AAEA,SACE,gBAAAc,EAAC,OAAA,EAAI,KAAKvB,GAAc,WAAWwB,EAAO,WACxC,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAA1C,KACC,gBAAAuC,EAAC,OAAA,EAAI,WAAWC,EAAO,gBACrB,UAAA,gBAAAD;AAAA,MAAC7B;AAAA,MAAA;AAAA,QACC,QAAO;AAAA,QACP,OAAO,EAAE,kBAAkB;AAAA,QAC3B,WAAWT;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEF,gBAAAsC;AAAA,MAACG;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,gBAAAH,EAACG,KACC,UAAA,gBAAAH,EAAC/B,GAAA,EAAQ,IAAG,MAAM,UAAA,EAAE,OAAO,EAAA,CAAE,EAAA,CAC/B;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF,gBAAA+B;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,YAAY,MACV,gBAAAF,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,IACpD,UAAA;AAAA,UAAA,gBAAAH,EAACK,GAAA,EAAiB;AAAA,UAClB,gBAAAL,EAAC9B,GAAA,EAAM,UAAA,EAAE,YAAY,EAAA,CAAE;AAAA,QAAA,GACzB;AAAA,QAEF,MAAMX;AAAA,QACN,SAAS;AAAA,UACP;AAAA,YACE,QAAQ,CAAC,EAAE,WAAA2B,QAAgB;AACzB,oBAAM,EAAE,WAAAI,GAAW,SAAAC,EAAA,IAAYF;AAAA,gBAC7BH,GAAW;AAAA,gBACXA,GAAW;AAAA,cAAA;AAGb,qBACE,gBAAAgB,EAAC,OAAA,EAAI,WAAWD,EAAO,eACpB,UAAA;AAAA,gBAAAX;AAAA,gBAAU;AAAA,gBAAIC;AAAA,gBACf,gBAAAS,EAAC9B,KAAK,SAAQ,cAAa,MAAK,MAC7B,UAAAV,EAAa,KAAK,CAAA8C,MAAYA,EAAS,SAASpB,GAAW,eAAe,GACvE,QACF1B,EAAa,KAAK,CAAA8C,MAAYA,EAAS,SAASpB,GAAW,eAAe,GACtE,WAAA,CACR;AAAA,cAAA,GACF;AAAA,YAEJ;AAAA,YACA,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,QAAQ,CAAAS,MAAW,gBAAAK,EAAC9B,GAAA,EAAM,UAAAqC,EAAoBZ,CAAO,GAAE;AAAA,YACvD,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,QAAQ,CAAC,EAAE,WAAAa,QAAgBjC,EAAc,8BAA8BiC,CAAS;AAAA,YAChF,OAAO,EAAE,gBAAgB;AAAA,UAAA;AAAA,UAE3B;AAAA,YACE,OAAO,EAAE,gBAAgB;AAAA,YACzB,QAAQ,CAAC,EAAE,iBAAAC,QACTlC,EAAc,8BAA8BkC,CAAe;AAAA,UAAA;AAAA,UAE/D;AAAA,YACE,OAAO,EAAE,gBAAgB;AAAA,YACzB,QAAQ,CAAAd,MAAW;AACjB,oBAAMe,IAAgB7C,EAAe;AAAA,gBACnC,CAAA8C,MAAQA,EAAK,gBAAgBhB,EAAQ;AAAA,cAAA;AAEvC,qBAAO,gBAAAK,EAACY,IAAA,EAAoB,SAAAjB,GAAkB,eAAAe,EAAA,CAA8B;AAAA,YAC9E;AAAA,UAAA;AAAA,UAEF,GAAK/B,IAeD,CAAA,IAdA;AAAA,YACE;AAAA,cACE,OAAO;AAAA,cACP,QAAQ,CAACgB,MAAqB;AAC5B,sBAAMkB,IAASnB,EAAmBC,CAAO;AACzC,uBAAKkB,IAEH,gBAAAb,EAACG,KAAK,eAAc,UAAS,YAAW,WAAU,KAAK,IACpD,UAAAU,EAAA,CACH,IAJkB;AAAA,cAMtB;AAAA,YAAA;AAAA,UACF;AAAA,QAED;AAAA,QAEP,OAAO,EAAE,mBAAmB;AAAA,QAC5B,UAAU,CAAAlB,MAAW;AACnB,gBAAM,EAAE,aAAAC,GAAa,WAAAE,GAAW,WAAAZ,EAAA,IAAcS;AAE9C,cAAIG;AACF,mBAAO;AAGT,gBAAMC,IAA0BpC,MAAsBiC,GAEhD,EAAE,YAAYkB,EAAA,IAAoBzB;AAAA,YACtCH,GAAW;AAAA,YACXA,GAAW;AAAA,UAAA,GAGP6B,IAAkBC,EAAuB,oBAAI,MAAM,GACnDC,IAAkBF,IAAkB,IAAI,KAAKA,CAAe,IAAI,MAChEG,IAAqBhC,GAAW,YAAY,IAAI,KAAKA,EAAU,SAAS,IAAI,MAE5EiC,IACJvD,EAAS,WAAW,KACpBqD,KACAC,KACAD,KAAmBC,GAEfL,IAASlC,IAAYe,EAAmBC,CAAO,IAAI,MAEnDyB,IAAgBD,IACpB,gBAAAnB;AAAA,YAACqB;AAAA,YAAA;AAAA,cACC,WAAWtB;AAAA,cACX,WAAW,EAAE,kBAAkB;AAAA,cAC/B,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO,EAAE,gBAAgB;AAAA,kBACzB,SAAS,MAAM;AACb,oBAAAf,EAAqBY,GAAckB,CAAe;AAAA,kBACpD;AAAA,gBAAA;AAAA,cACF;AAAA,YACF;AAAA,UAAA,IAEA;AAEJ,iBAAI,CAACD,KAAU,CAACO,IACP,OAIP,gBAAAlB,EAAC,OAAA,EAAI,WAAWD,EAAO,kBACpB,UAAA;AAAA,YAAAY;AAAA,YACAO;AAAA,UAAA,GACH;AAAA,QAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAApB;AAAA,MAAChC;AAAA,MAAA;AAAA,QACC,QAAQa,EAAuB;AAAA,QAC/B,SAASM;AAAA,QACT,sBAAsBC;AAAA,QACtB,eAAe;AAAA,QACf,OAAO,EAAE,2BAA2B,EAAE,WAAWP,EAAuB,WAAW;AAAA,QACnF,oBAAoB,EAAE,8BAA8B;AAAA,QACpD,kBAAkB,EAAE,6BAA6B;AAAA,QAEhD,YAAE,wBAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,IAE7B,gBAAAmB,EAAClC,GAAA,EAAI,WAAWmC,EAAO,aACrB,UAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,eAAe,EAAE,MAAM,UAAU,QAAQ,MAAA;AAAA,QACzC,gBAAe;AAAA,QACf,YAAY,EAAE,MAAM,WAAW,QAAQ,SAAA;AAAA,QACvC,KAAK;AAAA,QAEL,UAAA;AAAA,UAAA,gBAAAD,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,YAAA,gBAAAH,EAAC9B,GAAA,EAAK,QAAO,QAAQ,UAAA,EAAE,mBAAmB,GAAE;AAAA,YAC5C,gBAAA8B,EAAC9B,KAAK,SAAQ,cAAa,MAAK,MAC7B,UAAA,EAAE,yBAAyB,EAAA,CAC9B;AAAA,UAAA,GACF;AAAA,UACA,gBAAA8B,EAAC,OAAA,EAAI,WAAWC,EAAO,mBACrB,UAAA,gBAAAD,EAACjC,GAAA,EAAO,SAAQ,aAAY,SAAST,GAClC,UAAA,EAAE,oBAAoB,GACzB,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACF,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;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 { OffCycleReasonType } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport type { WireInRequest } from '@gusto/embedded-api/models/components/wireinrequest'\nimport { useState, useRef, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollStatusBadges } from '../PayrollStatusBadges'\nimport { getPayrollTypeLabel } from '../helpers'\nimport styles from './PayrollListPresentation.module.scss'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { DataView, Flex, HamburgerMenu, DateRangeFilter } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { UseDateRangeFilterResult } from '@/hooks/useDateRangeFilter/useDateRangeFilter'\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\nconst CANCELLABLE_OFF_CYCLE_REASONS = new Set<string>([\n  OffCycleReasonType.Bonus,\n  OffCycleReasonType.Correction,\n  OffCycleReasonType.DismissedEmployee,\n])\n\nfunction hasKebabActions(\n  payroll: Payroll,\n  blockers: ApiPayrollBlocker[],\n  todayAtMidnight: Date | null,\n): boolean {\n  if (payroll.processed) return false\n\n  const payPeriodStartDate = payroll.payPeriod?.startDate\n    ? new Date(payroll.payPeriod.startDate)\n    : null\n\n  const isSkippablePayroll =\n    !payroll.offCycle || payroll.offCycleReason === OffCycleReasonType.TransitionFromOldPaySchedule\n\n  const canSkipPayroll =\n    blockers.length === 0 &&\n    isSkippablePayroll &&\n    todayAtMidnight &&\n    payPeriodStartDate &&\n    todayAtMidnight >= payPeriodStartDate\n\n  const canDeletePayroll =\n    payroll.offCycle &&\n    !!payroll.offCycleReason &&\n    CANCELLABLE_OFF_CYCLE_REASONS.has(payroll.offCycleReason)\n\n  return !!(canSkipPayroll || canDeletePayroll)\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  onDeletePayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void\n  onRunOffCyclePayroll: () => void\n  payrolls: Payroll[]\n  pagination?: PaginationControlProps\n  paySchedules: PayScheduleList[]\n  showSkipSuccessAlert: boolean\n  onDismissSkipSuccessAlert: () => void\n  showDeleteSuccessAlert: boolean\n  onDismissDeleteSuccessAlert: () => void\n  skippingPayrollId: string | null\n  deletingPayrollId: string | null\n  blockers: ApiPayrollBlocker[]\n  wireInRequests: WireInRequest[]\n  dateRangeFilter: UseDateRangeFilterResult\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  onSubmitPayroll,\n  onSkipPayroll,\n  onDeletePayroll,\n  onRunOffCyclePayroll,\n  payrolls,\n  pagination,\n  paySchedules,\n  showSkipSuccessAlert,\n  onDismissSkipSuccessAlert,\n  showDeleteSuccessAlert,\n  onDismissDeleteSuccessAlert,\n  skippingPayrollId,\n  deletingPayrollId,\n  blockers,\n  wireInRequests,\n  dateRangeFilter,\n}: PayrollListPresentationProps) => {\n  const { Box, Button, ButtonIcon, 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('large')\n\n  const todayAtMidnight = useMemo(() => {\n    const todayDateString = formatDateToStringDate(new Date())\n    return todayDateString ? new Date(todayDateString) : null\n  }, [])\n\n  const anyPayrollHasKebabActions = useMemo(\n    () => payrolls.some(payroll => hasKebabActions(payroll, blockers, todayAtMidnight)),\n    [payrolls, blockers, todayAtMidnight],\n  )\n\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 [deletePayrollDialogState, setDeletePayrollDialogState] = 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 handleOpenDeleteDialog = (payrollId: string, payPeriod: string) => {\n    setDeletePayrollDialogState({\n      isOpen: true,\n      payrollId,\n      payPeriod,\n    })\n  }\n\n  const handleCloseDeleteDialog = () => {\n    setDeletePayrollDialogState({\n      isOpen: false,\n      payrollId: null,\n      payPeriod: null,\n    })\n  }\n\n  const handleConfirmDeletePayroll = () => {\n    if (deletePayrollDialogState.payrollId) {\n      onDeletePayroll({ payrollUuid: deletePayrollDialogState.payrollId })\n      handleCloseDeleteDialog()\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  const renderActionButton = (payroll: Payroll) => {\n    const { payrollUuid, calculatedAt, processed, payPeriod } = payroll\n\n    if (processed) {\n      return null\n    }\n\n    const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n\n    return 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\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        {showDeleteSuccessAlert && (\n          <div className={styles.alertContainer}>\n            <Alert\n              status=\"info\"\n              label={t('deleteSuccessAlert')}\n              onDismiss={onDismissDeleteSuccessAlert}\n            />\n          </div>\n        )}\n        <Flex justifyContent=\"space-between\" alignItems=\"center\">\n          <Heading as=\"h2\">{t('title')}</Heading>\n          <DateRangeFilter\n            startDate={dateRangeFilter.filterStartDate}\n            endDate={dateRangeFilter.filterEndDate}\n            onStartDateChange={dateRangeFilter.handleStartDateChange}\n            onEndDateChange={dateRangeFilter.handleEndDateChange}\n            onClear={dateRangeFilter.handleClearFilter}\n            startDateLabel={t('dateFilter.startDate')}\n            endDateLabel={t('dateFilter.endDate')}\n            applyLabel={t('dateFilter.apply')}\n            resetLabel={t('dateFilter.reset')}\n            triggerLabel={t('dateFilter.trigger')}\n            isFilterActive={dateRangeFilter.isFilterActive}\n            maxEndDate={dateRangeFilter.getMaxEndDate()}\n            minStartDate={dateRangeFilter.getMinStartDate()}\n          />\n        </Flex>\n\n        <DataView\n          breakAt=\"large\"\n          pagination={pagination}\n          emptyState={() => (\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n              <FeatureIconCheck />\n              <Text>{t('emptyState')}</Text>\n            </Flex>\n          )}\n          data={payrolls}\n          columns={[\n            {\n              render: ({ payPeriod }) => {\n                const { startDate, endDate } = formatPayPeriod(\n                  payPeriod?.startDate,\n                  payPeriod?.endDate,\n                )\n\n                return (\n                  <div className={styles.payPeriodCell}>\n                    {startDate} - {endDate}\n                    <Text variant=\"supporting\" size=\"sm\">\n                      {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.name ||\n                        paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                          ?.customName}\n                    </Text>\n                  </div>\n                )\n              },\n              title: t('tableHeaders.0'),\n            },\n            {\n              render: payroll => <Text>{getPayrollTypeLabel(payroll)}</Text>,\n              title: t('tableHeaders.1'),\n            },\n            {\n              render: ({ checkDate }) => dateFormatter.formatShortWithWeekdayAndYear(checkDate),\n              title: t('tableHeaders.2'),\n            },\n            {\n              title: t('tableHeaders.3'),\n              render: ({ payrollDeadline }) =>\n                dateFormatter.formatShortWithWeekdayAndYear(payrollDeadline),\n            },\n            {\n              title: t('tableHeaders.4'),\n              render: payroll => {\n                const wireInRequest = wireInRequests.find(\n                  wire => wire.paymentUuid === payroll.payrollUuid,\n                )\n                return <PayrollStatusBadges payroll={payroll} wireInRequest={wireInRequest} />\n              },\n            },\n            ...(!isDesktop\n              ? [\n                  {\n                    title: '',\n                    render: (payroll: Payroll) => {\n                      const button = renderActionButton(payroll)\n                      if (!button) return null\n                      return (\n                        <Flex flexDirection=\"column\" alignItems=\"stretch\" gap={12}>\n                          {button}\n                        </Flex>\n                      )\n                    },\n                  },\n                ]\n              : []),\n          ]}\n          label={t('payrollsListLabel')}\n          itemMenu={payroll => {\n            const { payrollUuid, processed, payPeriod } = payroll\n\n            const isProcessingSkipPayroll = skippingPayrollId === payrollUuid\n            const isProcessingDeletePayroll = deletingPayrollId === payrollUuid\n\n            const button = isDesktop ? renderActionButton(payroll) : null\n\n            if (processed) {\n              return (\n                <div className={styles.actionsContainer}>\n                  {anyPayrollHasKebabActions && (\n                    <ButtonIcon\n                      aria-label=\"\"\n                      aria-hidden={true}\n                      tabIndex={-1}\n                      isDisabled={true}\n                      className={styles.menuPlaceholder}\n                    />\n                  )}\n                </div>\n              )\n            }\n\n            const { fullPeriod: payPeriodString } = formatPayPeriod(\n              payPeriod?.startDate,\n              payPeriod?.endDate,\n            )\n\n            const payPeriodStartDate = payPeriod?.startDate ? new Date(payPeriod.startDate) : null\n\n            const isSkippablePayroll =\n              !payroll.offCycle ||\n              payroll.offCycleReason === OffCycleReasonType.TransitionFromOldPaySchedule\n\n            const canSkipPayroll =\n              blockers.length === 0 &&\n              isSkippablePayroll &&\n              todayAtMidnight &&\n              payPeriodStartDate &&\n              todayAtMidnight >= payPeriodStartDate\n\n            const canDeletePayroll =\n              payroll.offCycle &&\n              !!payroll.offCycleReason &&\n              CANCELLABLE_OFF_CYCLE_REASONS.has(payroll.offCycleReason)\n\n            const menuItems = canSkipPayroll\n              ? [\n                  {\n                    label: t('skipPayrollCta'),\n                    onClick: () => {\n                      handleOpenSkipDialog(payrollUuid!, payPeriodString)\n                    },\n                  },\n                ]\n              : canDeletePayroll\n                ? [\n                    {\n                      label: t('deletePayrollCta'),\n                      onClick: () => {\n                        handleOpenDeleteDialog(payrollUuid!, payPeriodString)\n                      },\n                    },\n                  ]\n                : null\n\n            const hasMenuActions = menuItems !== null\n\n            return (\n              <div className={styles.actionsContainer}>\n                {button}\n                {hasMenuActions ? (\n                  <HamburgerMenu\n                    isLoading={canSkipPayroll ? isProcessingSkipPayroll : isProcessingDeletePayroll}\n                    menuLabel={t('payrollMenuLabel')}\n                    items={menuItems}\n                  />\n                ) : (\n                  anyPayrollHasKebabActions && (\n                    <ButtonIcon\n                      aria-label=\"\"\n                      aria-hidden={true}\n                      tabIndex={-1}\n                      isDisabled={true}\n                      className={styles.menuPlaceholder}\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.confirmCta')}\n          closeActionLabel={t('skipPayrollDialog.cancelCta')}\n        >\n          {t('skipPayrollDialog.body')}\n        </Dialog>\n        <Dialog\n          isOpen={deletePayrollDialogState.isOpen}\n          onClose={handleCloseDeleteDialog}\n          onPrimaryActionClick={handleConfirmDeletePayroll}\n          isDestructive={true}\n          title={t('deletePayrollDialog.title', {\n            payPeriod: deletePayrollDialogState.payPeriod,\n          })}\n          primaryActionLabel={t('deletePayrollDialog.confirmCta')}\n          closeActionLabel={t('deletePayrollDialog.cancelCta')}\n        >\n          {t('deletePayrollDialog.body')}\n        </Dialog>\n        <Box className={styles.offCycleCta}>\n          <Flex\n            flexDirection={{ base: 'column', medium: 'row' }}\n            justifyContent=\"space-between\"\n            alignItems={{ base: 'stretch', medium: 'center' }}\n            gap={16}\n          >\n            <div className={styles.offCycleCtaText}>\n              <Text weight=\"bold\">{t('offCycleCta.title')}</Text>\n              <Text variant=\"supporting\" size=\"sm\">\n                {t('offCycleCta.description')}\n              </Text>\n            </div>\n            <div className={styles.offCycleCtaButton}>\n              <Button variant=\"secondary\" onClick={onRunOffCyclePayroll}>\n                {t('offCycleCta.button')}\n              </Button>\n            </div>\n          </Flex>\n        </Box>\n      </Flex>\n    </div>\n  )\n}\n"],"names":["CANCELLABLE_OFF_CYCLE_REASONS","OffCycleReasonType","hasKebabActions","payroll","blockers","todayAtMidnight","payPeriodStartDate","isSkippablePayroll","canSkipPayroll","canDeletePayroll","PayrollListPresentation","onRunPayroll","onSubmitPayroll","onSkipPayroll","onDeletePayroll","onRunOffCyclePayroll","payrolls","pagination","paySchedules","showSkipSuccessAlert","onDismissSkipSuccessAlert","showDeleteSuccessAlert","onDismissDeleteSuccessAlert","skippingPayrollId","deletingPayrollId","wireInRequests","dateRangeFilter","Box","Button","ButtonIcon","Dialog","Heading","Text","Alert","useComponentContext","useI18n","useTranslation","dateFormatter","useDateFormatter","containerRef","useRef","isDesktop","useContainerBreakpoints","useMemo","todayDateString","formatDateToStringDate","anyPayrollHasKebabActions","skipPayrollDialogState","setSkipPayrollDialogState","useState","handleOpenSkipDialog","payrollId","payPeriod","handleCloseSkipDialog","handleConfirmSkipPayroll","deletePayrollDialogState","setDeletePayrollDialogState","handleOpenDeleteDialog","handleCloseDeleteDialog","handleConfirmDeletePayroll","formatPayPeriod","startDate","endDate","formattedStartDate","formattedEndDate","renderActionButton","payrollUuid","calculatedAt","processed","isProcessingSkipPayroll","jsx","styles","jsxs","Flex","DateRangeFilter","DataView","FeatureIconCheck","schedule","getPayrollTypeLabel","checkDate","payrollDeadline","wireInRequest","wire","PayrollStatusBadges","button","isProcessingDeletePayroll","payPeriodString","menuItems","hasMenuActions","HamburgerMenu"],"mappings":"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"}

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

@@ -1,18 +1,22 @@
-const t = "_actionsContainer_1jgfc_1", o = "_alertContainer_1jgfc_8", n = "_container_1jgfc_12", e = "_payPeriodCell_1jgfc_17", a = "_offCycleCta_1jgfc_23", c = "_offCycleCtaButton_1jgfc_27", C = {
+const t = "_actionsContainer_v82ff_1", e = "_alertContainer_v82ff_8", o = "_container_v82ff_12", n = "_payPeriodCell_v82ff_17", f = "_offCycleCta_v82ff_23", a = "_offCycleCtaText_v82ff_27", c = "_menuPlaceholder_v82ff_34", C = "_offCycleCtaButton_v82ff_38", l = {
   actionsContainer: t,
-  alertContainer: o,
-  container: n,
-  payPeriodCell: e,
-  offCycleCta: a,
-  offCycleCtaButton: c
+  alertContainer: e,
+  container: o,
+  payPeriodCell: n,
+  offCycleCta: f,
+  offCycleCtaText: a,
+  menuPlaceholder: c,
+  offCycleCtaButton: C
 };
 export {
   t as actionsContainer,
-  o as alertContainer,
-  n as container,
-  C as default,
-  a as offCycleCta,
-  c as offCycleCtaButton,
-  e as payPeriodCell
+  e as alertContainer,
+  o as container,
+  l as default,
+  c as menuPlaceholder,
+  f as offCycleCta,
+  C as offCycleCtaButton,
+  a as offCycleCtaText,
+  n as payPeriodCell
 };
 //# sourceMappingURL=PayrollListPresentation.module.scss.js.map

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

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