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

package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js

@@ -1,169 +1,164 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useTranslation as L } from "react-i18next";
-import { getPayrollTypeLabel as U, calculateTotalPayroll as N, canCancelPayroll as O } from "../helpers.js";
-import j from "./PayrollHistoryPresentation.module.scss.js";
-import { Flex as n } from "../../Common/Flex/Flex.js";
-import { useComponentContext as M } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { formatNumberAsCurrency as V } from "../../../helpers/formattedStrings.js";
-import { useI18n as q } from "../../../i18n/I18n.js";
+import { useTranslation as T } from "react-i18next";
+import { getPayrollTypeLabel as E, calculateTotalPayroll as M, canCancelPayroll as U } from "../helpers.js";
+import { Flex as d } from "../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../shared/constants.js";
+import { DateRangeFilter as H } from "../../Common/DateRangeFilter/DateRangeFilter.js";
+import { useComponentContext as j } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { formatNumberAsCurrency as N } from "../../../helpers/formattedStrings.js";
+import { useI18n as O } from "../../../i18n/I18n.js";
 import { useDateFormatter as I } from "../../../hooks/useDateFormatter.js";
-import Y from "../../../assets/icons/trashcan.svg.js";
-import Z from "../../../assets/icons/icon-file-outline.svg.js";
-import $ from "../../../assets/icons/icon-receipt-outline.svg.js";
-import { HamburgerMenu as B } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { PayrollStatusBadges as W } from "../PayrollStatusBadges/PayrollStatusBadges.js";
-import { DataView as _ } from "../../Common/DataView/DataView.js";
-const me = ({
-  payrollHistory: c,
-  wireInRequests: p,
-  selectedTimeFilter: y,
-  onTimeFilterChange: h,
+import V from "../../../assets/icons/trashcan.svg.js";
+import Y from "../../../assets/icons/icon-file-outline.svg.js";
+import Z from "../../../assets/icons/icon-receipt-outline.svg.js";
+import { HamburgerMenu as $ } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { PayrollStatusBadges as q } from "../PayrollStatusBadges/PayrollStatusBadges.js";
+import { DataView as B } from "../../Common/DataView/DataView.js";
+const ce = ({
+  payrollHistory: m,
+  wireInRequests: y,
+  pagination: D,
   onViewSummary: f,
-  onViewReceipt: P,
-  onCancelPayroll: D,
-  cancelDialogItem: o,
-  onCancelDialogOpen: b,
-  onCancelDialogClose: g,
-  isLoading: C = !1
+  onViewReceipt: h,
+  onCancelPayroll: P,
+  cancelDialogItem: a,
+  onCancelDialogOpen: g,
+  onCancelDialogClose: C,
+  isLoading: S = !1,
+  dateRangeFilter: n
 }) => {
-  const { Heading: d, Text: s, Select: F, Dialog: S } = M();
-  q("Payroll.PayrollHistory");
-  const { t } = L("Payroll.PayrollHistory"), m = I(), v = [
-    { value: "3months", label: t("timeFilter.options.3months") },
-    { value: "6months", label: t("timeFilter.options.6months") },
-    { value: "year", label: t("timeFilter.options.year") }
-  ], w = (e) => {
-    const a = e.payrollDeadline;
-    if (!a) return "";
-    const i = new Date(a), u = "America/New_York", T = new Intl.DateTimeFormat("en-US", {
+  const { Heading: p, Text: c, Dialog: b } = j();
+  O("Payroll.PayrollHistory");
+  const { t } = T("Payroll.PayrollHistory"), s = I(), w = (e) => {
+    const o = e.payrollDeadline;
+    if (!o) return "";
+    const i = new Date(o), u = "America/New_York", v = new Intl.DateTimeFormat("en-US", {
       weekday: "short",
       month: "short",
       day: "numeric",
       timeZone: u
-    }), R = new Intl.DateTimeFormat("en-US", {
+    }), L = new Intl.DateTimeFormat("en-US", {
       hour: "numeric",
       minute: "2-digit",
       timeZoneName: "short",
       timeZone: u
-    }), H = T.format(i);
-    return `${R.format(i)} on ${H}`;
+    }), k = v.format(i);
+    return `${L.format(i)} on ${k}`;
   }, x = (e) => {
-    b(e);
-  }, k = () => {
-    o && D(o);
-  }, A = (e) => {
-    const a = e.payrollUuid || e.uuid, i = [
+    g(e);
+  }, A = () => {
+    a && P(a);
+  }, F = (e) => {
+    const o = e.payrollUuid || e.uuid, i = [
       {
         label: t("menu.viewSummary"),
-        icon: /* @__PURE__ */ r(Z, { "aria-hidden": !0 }),
+        icon: /* @__PURE__ */ r(Y, { "aria-hidden": !0 }),
         onClick: () => {
-          f(a, e.payPeriod?.startDate, e.payPeriod?.endDate);
+          f(o, e.payPeriod?.startDate, e.payPeriod?.endDate);
         }
       },
       {
         label: t("menu.viewReceipt"),
-        icon: /* @__PURE__ */ r($, { "aria-hidden": !0 }),
+        icon: /* @__PURE__ */ r(Z, { "aria-hidden": !0 }),
         onClick: () => {
-          P(a, e.payPeriod?.startDate, e.payPeriod?.endDate);
+          h(o, e.payPeriod?.startDate, e.payPeriod?.endDate);
         }
       }
     ];
-    return O(e) && i.push({
+    return U(e) && i.push({
       label: t("menu.cancelPayroll"),
-      icon: /* @__PURE__ */ r(Y, { "aria-hidden": !0 }),
+      icon: /* @__PURE__ */ r(V, { "aria-hidden": !0 }),
       onClick: () => {
         x(e);
       },
       "data-destructive": "true"
     }), i;
   };
-  return c.length === 0 ? /* @__PURE__ */ l(n, { flexDirection: "column", alignItems: "center", gap: 24, children: [
-    /* @__PURE__ */ r(d, { as: "h3", children: t("emptyState.title") }),
-    /* @__PURE__ */ r(s, { children: t("emptyState.description") })
-  ] }) : /* @__PURE__ */ l(n, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ l(
-      n,
-      {
-        flexDirection: { base: "column", medium: "row" },
-        justifyContent: "space-between",
-        alignItems: "flex-start",
-        gap: { base: 12, medium: 24 },
-        children: [
-          /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(d, { as: "h2", children: t("title") }) }),
-          /* @__PURE__ */ r("div", { className: j.timeFilterContainer, children: /* @__PURE__ */ r(
-            F,
-            {
-              value: y,
-              onChange: (e) => {
-                h(e);
-              },
-              options: v,
-              label: t("timeFilter.placeholder"),
-              shouldVisuallyHideLabel: !0,
-              isRequired: !0
-            }
-          ) })
-        ]
-      }
-    ),
+  return m.length === 0 ? /* @__PURE__ */ l(d, { flexDirection: "column", alignItems: "center", gap: 24, children: [
+    /* @__PURE__ */ r(p, { as: "h3", children: t("emptyState.title") }),
+    /* @__PURE__ */ r(c, { children: t("emptyState.description") })
+  ] }) : /* @__PURE__ */ l(d, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ l(d, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ r(p, { as: "h2", children: t("title") }),
+      /* @__PURE__ */ r(
+        H,
+        {
+          startDate: n.filterStartDate,
+          endDate: n.filterEndDate,
+          onStartDateChange: n.handleStartDateChange,
+          onEndDateChange: n.handleEndDateChange,
+          onClear: n.handleClearFilter,
+          startDateLabel: t("dateFilter.startDate"),
+          endDateLabel: t("dateFilter.endDate"),
+          applyLabel: t("dateFilter.apply"),
+          resetLabel: t("dateFilter.reset"),
+          triggerLabel: t("dateFilter.trigger"),
+          isFilterActive: n.isFilterActive,
+          maxEndDate: n.getMaxEndDate(),
+          minStartDate: n.getMinStartDate()
+        }
+      )
+    ] }),
     /* @__PURE__ */ r(
-      _,
+      B,
       {
         label: t("dataView.label"),
+        pagination: D,
         columns: [
           {
             title: t("columns.payPeriod"),
-            render: (e) => m.formatPayPeriodRange(
+            render: (e) => s.formatPayPeriodRange(
               e.payPeriod?.startDate,
               e.payPeriod?.endDate
             )
           },
           {
             title: t("columns.type"),
-            render: (e) => U(e)
+            render: (e) => E(e)
           },
           {
             title: t("columns.payDate"),
-            render: (e) => m.formatShortWithYear(e.checkDate)
+            render: (e) => s.formatShortWithYear(e.checkDate)
           },
           {
             title: t("columns.status"),
             render: (e) => {
-              const a = p.find(
+              const o = y.find(
                 (i) => i.paymentUuid === e.payrollUuid
               );
-              return /* @__PURE__ */ r(W, { payroll: e, wireInRequest: a });
+              return /* @__PURE__ */ r(q, { payroll: e, wireInRequest: o });
             }
           },
           {
             title: t("columns.totalPayroll"),
-            render: (e) => V(N(e))
+            render: (e) => N(M(e))
           }
         ],
-        data: c,
-        itemMenu: (e) => /* @__PURE__ */ r(B, { items: A(e) })
+        data: m,
+        itemMenu: (e) => /* @__PURE__ */ r($, { items: F(e) })
       }
     ),
     /* @__PURE__ */ r(
-      S,
+      b,
       {
-        isOpen: !!o,
-        onClose: g,
-        onPrimaryActionClick: k,
+        isOpen: !!a,
+        onClose: C,
+        onPrimaryActionClick: A,
         isDestructive: !0,
-        isPrimaryActionLoading: C,
+        isPrimaryActionLoading: S,
         primaryActionLabel: t("cancelDialog.primaryAction"),
         closeActionLabel: t("cancelDialog.secondaryAction"),
-        title: o ? t("cancelDialog.title", {
-          payPeriod: m.formatPayPeriodRange(
-            o.payPeriod?.startDate,
-            o.payPeriod?.endDate
+        title: a ? t("cancelDialog.title", {
+          payPeriod: s.formatPayPeriodRange(
+            a.payPeriod?.startDate,
+            a.payPeriod?.endDate
           )
         }) : "",
-        children: o && /* @__PURE__ */ l(n, { flexDirection: "column", gap: 16, children: [
-          /* @__PURE__ */ r(s, { children: t("cancelDialog.body") }),
-          o.payrollDeadline && /* @__PURE__ */ r(s, { children: t("cancelDialog.deadline", {
-            deadline: w(o)
+        children: a && /* @__PURE__ */ l(d, { flexDirection: "column", gap: 16, children: [
+          /* @__PURE__ */ r(c, { children: t("cancelDialog.body") }),
+          a.payrollDeadline && /* @__PURE__ */ r(c, { children: t("cancelDialog.deadline", {
+            deadline: w(a)
           }) })
         ] })
       }
@@ -171,6 +166,6 @@ const me = ({
   ] });
 };
 export {
-  me as PayrollHistoryPresentation
+  ce as PayrollHistoryPresentation
 };
 //# sourceMappingURL=PayrollHistoryPresentation.js.map

package/dist/components/Payroll/PayrollHistory/PayrollHistoryPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollHistoryPresentation.js","sources":["../../../../src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { WireInRequest } from '@gusto/embedded-api/models/components/wireinrequest'\nimport { PayrollStatusBadges } from '../PayrollStatusBadges'\nimport { getPayrollTypeLabel, calculateTotalPayroll, canCancelPayroll } from '../helpers'\nimport type { TimeFilterOption } from './PayrollHistory'\nimport styles from './PayrollHistoryPresentation.module.scss'\nimport type { MenuItem } from '@/components/Common/UI/Menu/MenuTypes'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport TrashcanIcon from '@/assets/icons/trashcan.svg?react'\nimport FileIcon from '@/assets/icons/icon-file-outline.svg?react'\nimport ReceiptIcon from '@/assets/icons/icon-receipt-outline.svg?react'\n\ninterface PayrollHistoryPresentationProps {\n  payrollHistory: Payroll[]\n  wireInRequests: WireInRequest[]\n  selectedTimeFilter: TimeFilterOption\n  onTimeFilterChange: (value: TimeFilterOption) => void\n  onViewSummary: (payrollId: string, startDate?: string, endDate?: string) => void\n  onViewReceipt: (payrollId: string, startDate?: string, endDate?: string) => void\n  onCancelPayroll: (item: Payroll) => void\n  cancelDialogItem: Payroll | null\n  onCancelDialogOpen: (item: Payroll) => void\n  onCancelDialogClose: () => void\n  isLoading?: boolean\n}\n\nexport const PayrollHistoryPresentation = ({\n  payrollHistory,\n  wireInRequests,\n  selectedTimeFilter,\n  onTimeFilterChange,\n  onViewSummary,\n  onViewReceipt,\n  onCancelPayroll,\n  cancelDialogItem,\n  onCancelDialogOpen,\n  onCancelDialogClose,\n  isLoading = false,\n}: PayrollHistoryPresentationProps) => {\n  const { Heading, Text, Select, Dialog } = useComponentContext()\n  useI18n('Payroll.PayrollHistory')\n  const { t } = useTranslation('Payroll.PayrollHistory')\n  const dateFormatter = useDateFormatter()\n\n  const timeFilterOptions = [\n    { value: '3months', label: t('timeFilter.options.3months') },\n    { value: '6months', label: t('timeFilter.options.6months') },\n    { value: 'year', label: t('timeFilter.options.year') },\n  ]\n\n  const formatDeadlineForDialog = (item: Payroll): string => {\n    const deadline = item.payrollDeadline\n    if (!deadline) return ''\n\n    const deadlineDate = new Date(deadline)\n    const timeZone = 'America/New_York'\n\n    const formatter = new Intl.DateTimeFormat('en-US', {\n      weekday: 'short',\n      month: 'short',\n      day: 'numeric',\n      timeZone,\n    })\n\n    const timeFormatter = new Intl.DateTimeFormat('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      timeZoneName: 'short',\n      timeZone,\n    })\n\n    const dateStr = formatter.format(deadlineDate)\n    const timeStr = timeFormatter.format(deadlineDate)\n\n    return `${timeStr} on ${dateStr}`\n  }\n\n  const handleCancelClick = (item: Payroll) => {\n    onCancelDialogOpen(item)\n  }\n\n  const handleConfirmCancel = () => {\n    if (cancelDialogItem) {\n      onCancelPayroll(cancelDialogItem)\n    }\n  }\n\n  const getMenuItems = (item: Payroll): MenuItem[] => {\n    const payrollId = item.payrollUuid || item.uuid!\n    const items: MenuItem[] = [\n      {\n        label: t('menu.viewSummary'),\n        icon: <FileIcon aria-hidden />,\n        onClick: () => {\n          onViewSummary(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)\n        },\n      },\n      {\n        label: t('menu.viewReceipt'),\n        icon: <ReceiptIcon aria-hidden />,\n        onClick: () => {\n          onViewReceipt(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)\n        },\n      },\n    ]\n\n    if (canCancelPayroll(item)) {\n      items.push({\n        label: t('menu.cancelPayroll'),\n        icon: <TrashcanIcon aria-hidden />,\n        onClick: () => {\n          handleCancelClick(item)\n        },\n        'data-destructive': 'true',\n      })\n    }\n\n    return items\n  }\n\n  if (payrollHistory.length === 0) {\n    return (\n      <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n        <Heading as=\"h3\">{t('emptyState.title')}</Heading>\n        <Text>{t('emptyState.description')}</Text>\n      </Flex>\n    )\n  }\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        <div className={styles.timeFilterContainer}>\n          <Select\n            value={selectedTimeFilter}\n            onChange={(value: string) => {\n              onTimeFilterChange(value as TimeFilterOption)\n            }}\n            options={timeFilterOptions}\n            label={t('timeFilter.placeholder')}\n            shouldVisuallyHideLabel\n            isRequired\n          />\n        </div>\n      </Flex>\n\n      <DataView\n        label={t('dataView.label')}\n        columns={[\n          {\n            title: t('columns.payPeriod'),\n            render: (item: Payroll) =>\n              dateFormatter.formatPayPeriodRange(\n                item.payPeriod?.startDate,\n                item.payPeriod?.endDate,\n              ),\n          },\n          {\n            title: t('columns.type'),\n            render: (item: Payroll) => getPayrollTypeLabel(item),\n          },\n          {\n            title: t('columns.payDate'),\n            render: (item: Payroll) => dateFormatter.formatShortWithYear(item.checkDate),\n          },\n          {\n            title: t('columns.status'),\n            render: (item: Payroll) => {\n              const wireInRequest = wireInRequests.find(\n                wire => wire.paymentUuid === item.payrollUuid,\n              )\n              return <PayrollStatusBadges payroll={item} wireInRequest={wireInRequest} />\n            },\n          },\n          {\n            title: t('columns.totalPayroll'),\n            render: (item: Payroll) => formatNumberAsCurrency(calculateTotalPayroll(item)),\n          },\n        ]}\n        data={payrollHistory}\n        itemMenu={(item: Payroll) => <HamburgerMenu items={getMenuItems(item)} />}\n      />\n\n      <Dialog\n        isOpen={!!cancelDialogItem}\n        onClose={onCancelDialogClose}\n        onPrimaryActionClick={handleConfirmCancel}\n        isDestructive\n        isPrimaryActionLoading={isLoading}\n        primaryActionLabel={t('cancelDialog.primaryAction')}\n        closeActionLabel={t('cancelDialog.secondaryAction')}\n        title={\n          cancelDialogItem\n            ? t('cancelDialog.title', {\n                payPeriod: dateFormatter.formatPayPeriodRange(\n                  cancelDialogItem.payPeriod?.startDate,\n                  cancelDialogItem.payPeriod?.endDate,\n                ),\n              })\n            : ''\n        }\n      >\n        {cancelDialogItem && (\n          <Flex flexDirection=\"column\" gap={16}>\n            <Text>{t('cancelDialog.body')}</Text>\n            {cancelDialogItem.payrollDeadline && (\n              <Text>\n                {t('cancelDialog.deadline', {\n                  deadline: formatDeadlineForDialog(cancelDialogItem),\n                })}\n              </Text>\n            )}\n          </Flex>\n        )}\n      </Dialog>\n    </Flex>\n  )\n}\n"],"names":["PayrollHistoryPresentation","payrollHistory","wireInRequests","selectedTimeFilter","onTimeFilterChange","onViewSummary","onViewReceipt","onCancelPayroll","cancelDialogItem","onCancelDialogOpen","onCancelDialogClose","isLoading","Heading","Text","Select","Dialog","useComponentContext","useI18n","useTranslation","dateFormatter","useDateFormatter","timeFilterOptions","formatDeadlineForDialog","item","deadline","deadlineDate","timeZone","formatter","timeFormatter","dateStr","handleCancelClick","handleConfirmCancel","getMenuItems","payrollId","items","jsx","FileIcon","ReceiptIcon","canCancelPayroll","TrashcanIcon","Flex","jsxs","styles","value","DataView","getPayrollTypeLabel","wireInRequest","wire","PayrollStatusBadges","formatNumberAsCurrency","calculateTotalPayroll","HamburgerMenu"],"mappings":"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"}
+{"version":3,"file":"PayrollHistoryPresentation.js","sources":["../../../../src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { WireInRequest } from '@gusto/embedded-api/models/components/wireinrequest'\nimport { PayrollStatusBadges } from '../PayrollStatusBadges'\nimport { getPayrollTypeLabel, calculateTotalPayroll, canCancelPayroll } from '../helpers'\nimport type { MenuItem } from '@/components/Common/UI/Menu/MenuTypes'\nimport { DataView, Flex, DateRangeFilter } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport type { UseDateRangeFilterResult } from '@/hooks/useDateRangeFilter/useDateRangeFilter'\nimport TrashcanIcon from '@/assets/icons/trashcan.svg?react'\nimport FileIcon from '@/assets/icons/icon-file-outline.svg?react'\nimport ReceiptIcon from '@/assets/icons/icon-receipt-outline.svg?react'\n\ninterface PayrollHistoryPresentationProps {\n  payrollHistory: Payroll[]\n  wireInRequests: WireInRequest[]\n  pagination: PaginationControlProps\n  onViewSummary: (payrollId: string, startDate?: string, endDate?: string) => void\n  onViewReceipt: (payrollId: string, startDate?: string, endDate?: string) => void\n  onCancelPayroll: (item: Payroll) => void\n  cancelDialogItem: Payroll | null\n  onCancelDialogOpen: (item: Payroll) => void\n  onCancelDialogClose: () => void\n  isLoading?: boolean\n  dateRangeFilter: UseDateRangeFilterResult\n}\n\nexport const PayrollHistoryPresentation = ({\n  payrollHistory,\n  wireInRequests,\n  pagination,\n  onViewSummary,\n  onViewReceipt,\n  onCancelPayroll,\n  cancelDialogItem,\n  onCancelDialogOpen,\n  onCancelDialogClose,\n  isLoading = false,\n  dateRangeFilter,\n}: PayrollHistoryPresentationProps) => {\n  const { Heading, Text, Dialog } = useComponentContext()\n  useI18n('Payroll.PayrollHistory')\n  const { t } = useTranslation('Payroll.PayrollHistory')\n  const dateFormatter = useDateFormatter()\n\n  const formatDeadlineForDialog = (item: Payroll): string => {\n    const deadline = item.payrollDeadline\n    if (!deadline) return ''\n\n    const deadlineDate = new Date(deadline)\n    const timeZone = 'America/New_York'\n\n    const formatter = new Intl.DateTimeFormat('en-US', {\n      weekday: 'short',\n      month: 'short',\n      day: 'numeric',\n      timeZone,\n    })\n\n    const timeFormatter = new Intl.DateTimeFormat('en-US', {\n      hour: 'numeric',\n      minute: '2-digit',\n      timeZoneName: 'short',\n      timeZone,\n    })\n\n    const dateStr = formatter.format(deadlineDate)\n    const timeStr = timeFormatter.format(deadlineDate)\n\n    return `${timeStr} on ${dateStr}`\n  }\n\n  const handleCancelClick = (item: Payroll) => {\n    onCancelDialogOpen(item)\n  }\n\n  const handleConfirmCancel = () => {\n    if (cancelDialogItem) {\n      onCancelPayroll(cancelDialogItem)\n    }\n  }\n\n  const getMenuItems = (item: Payroll): MenuItem[] => {\n    const payrollId = item.payrollUuid || item.uuid!\n    const items: MenuItem[] = [\n      {\n        label: t('menu.viewSummary'),\n        icon: <FileIcon aria-hidden />,\n        onClick: () => {\n          onViewSummary(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)\n        },\n      },\n      {\n        label: t('menu.viewReceipt'),\n        icon: <ReceiptIcon aria-hidden />,\n        onClick: () => {\n          onViewReceipt(payrollId, item.payPeriod?.startDate, item.payPeriod?.endDate)\n        },\n      },\n    ]\n\n    if (canCancelPayroll(item)) {\n      items.push({\n        label: t('menu.cancelPayroll'),\n        icon: <TrashcanIcon aria-hidden />,\n        onClick: () => {\n          handleCancelClick(item)\n        },\n        'data-destructive': 'true',\n      })\n    }\n\n    return items\n  }\n\n  if (payrollHistory.length === 0) {\n    return (\n      <Flex flexDirection=\"column\" alignItems=\"center\" gap={24}>\n        <Heading as=\"h3\">{t('emptyState.title')}</Heading>\n        <Text>{t('emptyState.description')}</Text>\n      </Flex>\n    )\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\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        label={t('dataView.label')}\n        pagination={pagination}\n        columns={[\n          {\n            title: t('columns.payPeriod'),\n            render: (item: Payroll) =>\n              dateFormatter.formatPayPeriodRange(\n                item.payPeriod?.startDate,\n                item.payPeriod?.endDate,\n              ),\n          },\n          {\n            title: t('columns.type'),\n            render: (item: Payroll) => getPayrollTypeLabel(item),\n          },\n          {\n            title: t('columns.payDate'),\n            render: (item: Payroll) => dateFormatter.formatShortWithYear(item.checkDate),\n          },\n          {\n            title: t('columns.status'),\n            render: (item: Payroll) => {\n              const wireInRequest = wireInRequests.find(\n                wire => wire.paymentUuid === item.payrollUuid,\n              )\n              return <PayrollStatusBadges payroll={item} wireInRequest={wireInRequest} />\n            },\n          },\n          {\n            title: t('columns.totalPayroll'),\n            render: (item: Payroll) => formatNumberAsCurrency(calculateTotalPayroll(item)),\n          },\n        ]}\n        data={payrollHistory}\n        itemMenu={(item: Payroll) => <HamburgerMenu items={getMenuItems(item)} />}\n      />\n\n      <Dialog\n        isOpen={!!cancelDialogItem}\n        onClose={onCancelDialogClose}\n        onPrimaryActionClick={handleConfirmCancel}\n        isDestructive\n        isPrimaryActionLoading={isLoading}\n        primaryActionLabel={t('cancelDialog.primaryAction')}\n        closeActionLabel={t('cancelDialog.secondaryAction')}\n        title={\n          cancelDialogItem\n            ? t('cancelDialog.title', {\n                payPeriod: dateFormatter.formatPayPeriodRange(\n                  cancelDialogItem.payPeriod?.startDate,\n                  cancelDialogItem.payPeriod?.endDate,\n                ),\n              })\n            : ''\n        }\n      >\n        {cancelDialogItem && (\n          <Flex flexDirection=\"column\" gap={16}>\n            <Text>{t('cancelDialog.body')}</Text>\n            {cancelDialogItem.payrollDeadline && (\n              <Text>\n                {t('cancelDialog.deadline', {\n                  deadline: formatDeadlineForDialog(cancelDialogItem),\n                })}\n              </Text>\n            )}\n          </Flex>\n        )}\n      </Dialog>\n    </Flex>\n  )\n}\n"],"names":["PayrollHistoryPresentation","payrollHistory","wireInRequests","pagination","onViewSummary","onViewReceipt","onCancelPayroll","cancelDialogItem","onCancelDialogOpen","onCancelDialogClose","isLoading","dateRangeFilter","Heading","Text","Dialog","useComponentContext","useI18n","useTranslation","dateFormatter","useDateFormatter","formatDeadlineForDialog","item","deadline","deadlineDate","timeZone","formatter","timeFormatter","dateStr","handleCancelClick","handleConfirmCancel","getMenuItems","payrollId","items","jsx","FileIcon","ReceiptIcon","canCancelPayroll","TrashcanIcon","Flex","jsxs","DateRangeFilter","DataView","getPayrollTypeLabel","wireInRequest","wire","PayrollStatusBadges","formatNumberAsCurrency","calculateTotalPayroll","HamburgerMenu"],"mappings":"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"}

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

@@ -1,88 +1,118 @@
-import { jsx as l } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { usePayrollsListSuspense as g } from "@gusto/embedded-api/react-query/payrollsList";
-import { usePaySchedulesGetAllSuspense as O } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { usePayrollsSkipMutation as h } from "@gusto/embedded-api/react-query/payrollsSkip";
-import { usePayrollsGetBlockersSuspense as w } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
-import { useWireInRequestsListSuspense as E } from "@gusto/embedded-api/react-query/wireInRequestsList";
-import { PayrollType as U } from "@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid";
-import { QueryParamPayrollTypes as a, ProcessingStatuses as _ } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
-import { PayrollListPresentation as B } from "./PayrollListPresentation.js";
-import { BaseComponent as C } from "../../Base/Base.js";
-import { useBase as T } from "../../Base/useBase.js";
-import { componentEvents as r } from "../../../shared/constants.js";
-function ee(e) {
-  return /* @__PURE__ */ l(C, { ...e, children: /* @__PURE__ */ l(Y, { ...e }) });
+import { jsx as i } from "react/jsx-runtime";
+import { useState as r, useCallback as U } from "react";
+import { useQueryClient as Y } from "@tanstack/react-query";
+import { usePayrollsListSuspense as x, invalidateAllPayrollsList as H } from "@gusto/embedded-api/react-query/payrollsList";
+import { usePaySchedulesGetAllSuspense as N } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { usePayrollsSkipMutation as G } from "@gusto/embedded-api/react-query/payrollsSkip";
+import { usePayrollsDeleteMutation as K } from "@gusto/embedded-api/react-query/payrollsDelete";
+import { usePayrollsGetBlockersSuspense as Q } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
+import { useWireInRequestsListSuspense as W } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { PayrollType as g } from "@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid";
+import { QueryParamPayrollTypes as n, ProcessingStatuses as j } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
+import { PayrollListPresentation as V } from "./PayrollListPresentation.js";
+import { BaseComponent as z } from "../../Base/Base.js";
+import { useBase as J } from "../../Base/useBase.js";
+import { componentEvents as a } from "../../../shared/constants.js";
+import { usePagination as X } from "../../../hooks/usePagination/usePagination.js";
+import { useDateRangeFilter as Z } from "../../../hooks/useDateRangeFilter/useDateRangeFilter.js";
+function Ae(t) {
+  return /* @__PURE__ */ i(z, { ...t, children: /* @__PURE__ */ i(ee, { ...t }) });
 }
-const q = 28, I = () => {
-  const e = /* @__PURE__ */ new Date();
-  return e.setDate(e.getDate() + q), e.toISOString().split("T")[0];
-}, Y = ({ companyId: e, onEvent: o }) => {
-  const { baseSubmitHandler: y } = T(), [c, n] = u(!1), [m, i] = u(null), { data: S } = g({
-    companyId: e,
-    processingStatuses: [_.Unprocessed],
-    endDate: I(),
+const $ = 3, v = () => {
+  const t = /* @__PURE__ */ new Date();
+  return t.setMonth(t.getMonth() + $), t.toISOString().split("T")[0];
+}, ee = ({ companyId: t, onEvent: o }) => {
+  const { baseSubmitHandler: c } = J(), L = Y(), [R, u] = r(!1), [h, p] = r(null), { currentPage: k, itemsPerPage: A, getPaginationProps: O, resetPage: y } = X(), [w, P] = r(!1), [C, m] = r(null), d = Z({
+    onFilterChange: U(() => {
+      y();
+    }, [y])
+  }), S = d.getApiDateParams(), { data: f } = x({
+    companyId: t,
+    processingStatuses: [j.Unprocessed],
+    startDate: S.startDate,
+    endDate: S.endDate ?? v(),
     payrollTypes: [
-      a.Regular,
-      a.OffCycle,
-      a.External
-    ]
-  }), p = S.payrollList, { data: P } = O({
-    companyId: e
-  }), d = P.payScheduleList, { data: f } = w({
-    companyUuid: e
-  }), L = (f.payrollBlockers ?? []).map(
-    (s) => ({
-      key: s.key ?? "unknown",
-      message: s.message
+      n.Regular,
+      n.OffCycle,
+      n.External
+    ],
+    includeOffCycle: !0,
+    page: k,
+    per: A
+  }), D = f.payrollList, E = O(f.httpMeta.response.headers), { data: T } = N({
+    companyId: t
+  }), _ = T.payScheduleList, { data: F } = Q({
+    companyUuid: t
+  }), I = (F.payrollBlockers ?? []).map(
+    (e) => ({
+      key: e.key ?? "unknown",
+      message: e.message
     })
-  ), { data: D } = E({
-    companyUuid: e
-  }), R = D.wireInRequestList ?? [], { mutateAsync: k } = h();
-  return /* @__PURE__ */ l(
-    B,
+  ), { data: q } = W({
+    companyUuid: t
+  }), B = q.wireInRequestList ?? [], { mutateAsync: M } = G(), { mutateAsync: b } = K();
+  return /* @__PURE__ */ i(
+    V,
     {
-      payrolls: p,
-      paySchedules: d,
-      onRunPayroll: ({ payrollUuid: s, payPeriod: t }) => {
-        o(r.RUN_PAYROLL_SELECTED, { payrollUuid: s, payPeriod: t });
+      payrolls: D,
+      pagination: E,
+      paySchedules: _,
+      onRunPayroll: ({ payrollUuid: e, payPeriod: s }) => {
+        o(a.RUN_PAYROLL_SELECTED, { payrollUuid: e, payPeriod: s });
       },
       onSubmitPayroll: ({
-        payrollUuid: s,
-        payPeriod: t
+        payrollUuid: e,
+        payPeriod: s
       }) => {
-        o(r.REVIEW_PAYROLL, { payrollUuid: s, payPeriod: t });
+        o(a.REVIEW_PAYROLL, { payrollUuid: e, payPeriod: s });
       },
-      onSkipPayroll: async ({ payrollUuid: s }) => {
-        const t = p.find((A) => A.payrollUuid === s);
-        t?.payPeriod && (i(s), await y({}, async () => {
-          await k({
-            request: {
-              companyUuid: e,
-              requestBody: {
-                payrollType: U.Regular,
-                startDate: t.payPeriod?.startDate,
-                endDate: t.payPeriod?.endDate,
-                payScheduleUuid: t.payPeriod?.payScheduleUuid ?? void 0
+      onSkipPayroll: async ({ payrollUuid: e }) => {
+        const s = D.find((l) => l.payrollUuid === e);
+        if (s?.payPeriod) {
+          p(e);
+          const l = s.offCycleReason === "Transition from old pay schedule" ? g.TransitionFromOldPaySchedule : g.Regular;
+          await c({}, async () => {
+            await M({
+              request: {
+                companyUuid: t,
+                requestBody: {
+                  payrollType: l,
+                  startDate: s.payPeriod?.startDate,
+                  endDate: s.payPeriod?.endDate,
+                  payScheduleUuid: s.payPeriod?.payScheduleUuid ?? void 0
+                }
               }
-            }
-          }), n(!0), o(r.PAYROLL_SKIPPED, { payrollId: s });
-        }), i(null));
+            }), u(!0), o(a.PAYROLL_SKIPPED, { payrollId: e });
+          }), p(null);
+        }
+      },
+      onDeletePayroll: async ({ payrollUuid: e }) => {
+        e && (m(e), await c({}, async () => {
+          await b({
+            request: { companyId: t, payrollId: e }
+          }), await H(L), P(!0), o(a.PAYROLL_DELETED, { payrollId: e });
+        }), m(null));
       },
       onRunOffCyclePayroll: () => {
-        o(r.RUN_OFF_CYCLE_PAYROLL);
+        o(a.RUN_OFF_CYCLE_PAYROLL);
       },
-      showSkipSuccessAlert: c,
+      showSkipSuccessAlert: R,
       onDismissSkipSuccessAlert: () => {
-        n(!1);
+        u(!1);
+      },
+      showDeleteSuccessAlert: w,
+      onDismissDeleteSuccessAlert: () => {
+        P(!1);
       },
-      skippingPayrollId: m,
-      blockers: L,
-      wireInRequests: R
+      skippingPayrollId: h,
+      deletingPayrollId: C,
+      blockers: I,
+      wireInRequests: B,
+      dateRangeFilter: d
     }
   );
 };
 export {
-  ee as PayrollList
+  Ae as PayrollList
 };
 //# sourceMappingURL=PayrollList.js.map

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

@@ -1 +1 @@
-{"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 { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { PayrollType } from '@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid'\nimport {\n  ProcessingStatuses,\n  QueryParamPayrollTypes,\n} from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\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\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 FUTURE_LOOKAHEAD_DAYS = 28\n\nconst getFutureEndDate = (): string => {\n  const endDate = new Date()\n  endDate.setDate(endDate.getDate() + FUTURE_LOOKAHEAD_DAYS)\n  return endDate.toISOString().split('T')[0]!\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    endDate: getFutureEndDate(),\n    payrollTypes: [\n      QueryParamPayrollTypes.Regular,\n      QueryParamPayrollTypes.OffCycle,\n      QueryParamPayrollTypes.External,\n    ],\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.payrollBlockers ?? []\n\n  const blockers: ApiPayrollBlocker[] = payrollBlockerList.map(\n    (blocker: { key?: string; message?: string }) => ({\n      key: blocker.key ?? 'unknown',\n      message: blocker.message,\n    }),\n  )\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const wireInRequests = wireInRequestsData.wireInRequestList ?? []\n\n  const { mutateAsync: skipPayroll } = usePayrollsSkipMutation()\n\n  const onRunPayroll = ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollUuid, payPeriod })\n  }\n  const onRunOffCyclePayroll = () => {\n    onEvent(componentEvents.RUN_OFF_CYCLE_PAYROLL)\n  }\n  const onSubmitPayroll = ({\n    payrollUuid,\n    payPeriod,\n  }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => {\n    onEvent(componentEvents.REVIEW_PAYROLL, { payrollUuid, payPeriod })\n  }\n  const onSkipPayroll = async ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => {\n    const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollUuid)\n\n    if (payroll?.payPeriod) {\n      setSkippingPayrollId(payrollUuid!)\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: payrollUuid })\n      })\n      setSkippingPayrollId(null)\n    }\n  }\n  return (\n    <PayrollListPresentation\n      payrolls={payrollList}\n      paySchedules={paySchedulesList}\n      onRunPayroll={onRunPayroll}\n      onSubmitPayroll={onSubmitPayroll}\n      onSkipPayroll={onSkipPayroll}\n      onRunOffCyclePayroll={onRunOffCyclePayroll}\n      showSkipSuccessAlert={showSkipSuccessAlert}\n      onDismissSkipSuccessAlert={() => {\n        setShowSkipSuccessAlert(false)\n      }}\n      skippingPayrollId={skippingPayrollId}\n      blockers={blockers}\n      wireInRequests={wireInRequests}\n    />\n  )\n}\n"],"names":["PayrollList","props","jsx","BaseComponent","Root","FUTURE_LOOKAHEAD_DAYS","getFutureEndDate","endDate","companyId","onEvent","baseSubmitHandler","useBase","showSkipSuccessAlert","setShowSkipSuccessAlert","useState","skippingPayrollId","setSkippingPayrollId","payrollsData","usePayrollsListSuspense","ProcessingStatuses","QueryParamPayrollTypes","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","blockersData","usePayrollsGetBlockersSuspense","blockers","blocker","wireInRequestsData","useWireInRequestsListSuspense","wireInRequests","skipPayroll","usePayrollsSkipMutation","PayrollListPresentation","payrollUuid","payPeriod","componentEvents","payroll","PayrollType"],"mappings":"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"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { useQueryClient } from '@tanstack/react-query'\nimport {\n  usePayrollsListSuspense,\n  invalidateAllPayrollsList,\n} 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 { usePayrollsDeleteMutation } from '@gusto/embedded-api/react-query/payrollsDelete'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { useWireInRequestsListSuspense } from '@gusto/embedded-api/react-query/wireInRequestsList'\nimport { PayrollType } from '@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid'\nimport {\n  ProcessingStatuses,\n  QueryParamPayrollTypes,\n} from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\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'\nimport { usePagination } from '@/hooks/usePagination/usePagination'\nimport { useDateRangeFilter } from '@/hooks/useDateRangeFilter/useDateRangeFilter'\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 FUTURE_LOOKAHEAD_MONTHS = 3\n\nconst getFutureEndDate = (): string => {\n  const endDate = new Date()\n  endDate.setMonth(endDate.getMonth() + FUTURE_LOOKAHEAD_MONTHS)\n  return endDate.toISOString().split('T')[0]!\n}\n\nconst Root = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { baseSubmitHandler } = useBase()\n  const queryClient = useQueryClient()\n  const [showSkipSuccessAlert, setShowSkipSuccessAlert] = useState(false)\n  const [skippingPayrollId, setSkippingPayrollId] = useState<string | null>(null)\n  const { currentPage, itemsPerPage, getPaginationProps, resetPage } = usePagination()\n  const [showDeleteSuccessAlert, setShowDeleteSuccessAlert] = useState(false)\n  const [deletingPayrollId, setDeletingPayrollId] = useState<string | null>(null)\n\n  const dateRangeFilter = useDateRangeFilter({\n    onFilterChange: useCallback(() => {\n      resetPage()\n    }, [resetPage]),\n  })\n  const dateFilterParams = dateRangeFilter.getApiDateParams()\n\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n    startDate: dateFilterParams.startDate,\n    endDate: dateFilterParams.endDate ?? getFutureEndDate(),\n    payrollTypes: [\n      QueryParamPayrollTypes.Regular,\n      QueryParamPayrollTypes.OffCycle,\n      QueryParamPayrollTypes.External,\n    ],\n    includeOffCycle: true,\n    page: currentPage,\n    per: itemsPerPage,\n  })\n  const payrollList = payrollsData.payrollList!\n  const paginationProps = getPaginationProps(payrollsData.httpMeta.response.headers)\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.payrollBlockers ?? []\n\n  const blockers: ApiPayrollBlocker[] = payrollBlockerList.map(\n    (blocker: { key?: string; message?: string }) => ({\n      key: blocker.key ?? 'unknown',\n      message: blocker.message,\n    }),\n  )\n\n  const { data: wireInRequestsData } = useWireInRequestsListSuspense({\n    companyUuid: companyId,\n  })\n\n  const wireInRequests = wireInRequestsData.wireInRequestList ?? []\n\n  const { mutateAsync: skipPayroll } = usePayrollsSkipMutation()\n  const { mutateAsync: deletePayrollMutation } = usePayrollsDeleteMutation()\n\n  const onRunPayroll = ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollUuid, payPeriod })\n  }\n  const onRunOffCyclePayroll = () => {\n    onEvent(componentEvents.RUN_OFF_CYCLE_PAYROLL)\n  }\n  const onSubmitPayroll = ({\n    payrollUuid,\n    payPeriod,\n  }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => {\n    onEvent(componentEvents.REVIEW_PAYROLL, { payrollUuid, payPeriod })\n  }\n  const onSkipPayroll = async ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => {\n    const payroll = payrollList.find(payroll => payroll.payrollUuid === payrollUuid)\n\n    if (payroll?.payPeriod) {\n      setSkippingPayrollId(payrollUuid!)\n      const payrollType =\n        payroll.offCycleReason === 'Transition from old pay schedule'\n          ? PayrollType.TransitionFromOldPaySchedule\n          : PayrollType.Regular\n\n      await baseSubmitHandler({}, async () => {\n        await skipPayroll({\n          request: {\n            companyUuid: companyId,\n            requestBody: {\n              payrollType,\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: payrollUuid })\n      })\n      setSkippingPayrollId(null)\n    }\n  }\n\n  const onDeletePayroll = async ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => {\n    if (payrollUuid) {\n      setDeletingPayrollId(payrollUuid)\n      await baseSubmitHandler({}, async () => {\n        await deletePayrollMutation({\n          request: { companyId, payrollId: payrollUuid },\n        })\n        await invalidateAllPayrollsList(queryClient)\n        setShowDeleteSuccessAlert(true)\n        onEvent(componentEvents.PAYROLL_DELETED, { payrollId: payrollUuid })\n      })\n      setDeletingPayrollId(null)\n    }\n  }\n\n  return (\n    <PayrollListPresentation\n      payrolls={payrollList}\n      pagination={paginationProps}\n      paySchedules={paySchedulesList}\n      onRunPayroll={onRunPayroll}\n      onSubmitPayroll={onSubmitPayroll}\n      onSkipPayroll={onSkipPayroll}\n      onDeletePayroll={onDeletePayroll}\n      onRunOffCyclePayroll={onRunOffCyclePayroll}\n      showSkipSuccessAlert={showSkipSuccessAlert}\n      onDismissSkipSuccessAlert={() => {\n        setShowSkipSuccessAlert(false)\n      }}\n      showDeleteSuccessAlert={showDeleteSuccessAlert}\n      onDismissDeleteSuccessAlert={() => {\n        setShowDeleteSuccessAlert(false)\n      }}\n      skippingPayrollId={skippingPayrollId}\n      deletingPayrollId={deletingPayrollId}\n      blockers={blockers}\n      wireInRequests={wireInRequests}\n      dateRangeFilter={dateRangeFilter}\n    />\n  )\n}\n"],"names":["PayrollList","props","jsx","BaseComponent","Root","FUTURE_LOOKAHEAD_MONTHS","getFutureEndDate","endDate","companyId","onEvent","baseSubmitHandler","useBase","queryClient","useQueryClient","showSkipSuccessAlert","setShowSkipSuccessAlert","useState","skippingPayrollId","setSkippingPayrollId","currentPage","itemsPerPage","getPaginationProps","resetPage","usePagination","showDeleteSuccessAlert","setShowDeleteSuccessAlert","deletingPayrollId","setDeletingPayrollId","dateRangeFilter","useDateRangeFilter","useCallback","dateFilterParams","payrollsData","usePayrollsListSuspense","ProcessingStatuses","QueryParamPayrollTypes","payrollList","paginationProps","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","blockersData","usePayrollsGetBlockersSuspense","blockers","blocker","wireInRequestsData","useWireInRequestsListSuspense","wireInRequests","skipPayroll","usePayrollsSkipMutation","deletePayrollMutation","usePayrollsDeleteMutation","PayrollListPresentation","payrollUuid","payPeriod","componentEvents","payroll","payrollType","PayrollType","invalidateAllPayrollsList"],"mappings":"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"}

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

@@ -2,18 +2,26 @@ import { Payroll } from '@gusto/embedded-api/models/components/payroll';
 import { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist';
 import { WireInRequest } from '@gusto/embedded-api/models/components/wireinrequest';
 import { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers';
+import { PaginationControlProps } from '../../Common/PaginationControl/PaginationControlTypes';
+import { UseDateRangeFilterResult } from '../../../hooks/useDateRangeFilter/useDateRangeFilter';
 interface PayrollListPresentationProps {
     onRunPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void;
     onSubmitPayroll: ({ payrollUuid, payPeriod }: Pick<Payroll, 'payrollUuid' | 'payPeriod'>) => void;
     onSkipPayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void;
+    onDeletePayroll: ({ payrollUuid }: Pick<Payroll, 'payrollUuid'>) => void;
     onRunOffCyclePayroll: () => void;
     payrolls: Payroll[];
+    pagination?: PaginationControlProps;
     paySchedules: PayScheduleList[];
     showSkipSuccessAlert: boolean;
     onDismissSkipSuccessAlert: () => void;
+    showDeleteSuccessAlert: boolean;
+    onDismissDeleteSuccessAlert: () => void;
     skippingPayrollId: string | null;
+    deletingPayrollId: string | null;
     blockers: ApiPayrollBlocker[];
     wireInRequests: WireInRequest[];
+    dateRangeFilter: UseDateRangeFilterResult;
 }
-export declare const PayrollListPresentation: ({ onRunPayroll, onSubmitPayroll, onSkipPayroll, onRunOffCyclePayroll, payrolls, paySchedules, showSkipSuccessAlert, onDismissSkipSuccessAlert, skippingPayrollId, blockers, wireInRequests, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollListPresentation: ({ onRunPayroll, onSubmitPayroll, onSkipPayroll, onDeletePayroll, onRunOffCyclePayroll, payrolls, pagination, paySchedules, showSkipSuccessAlert, onDismissSkipSuccessAlert, showDeleteSuccessAlert, onDismissDeleteSuccessAlert, skippingPayrollId, deletingPayrollId, blockers, wireInRequests, dateRangeFilter, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};