@gusto/embedded-react-sdk 0.55.3 → 0.55.4

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/payrollshow'\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'\nimport { EmptyData } from '@/components/Common/'\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\n/** @internal */\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  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.startDate}\n          endDate={dateRangeFilter.endDate}\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          cancelLabel={t('dateFilter.cancel')}\n          resetLabel={t('dateFilter.reset')}\n          selectDatesLabel={t('dateFilter.selectDates')}\n          triggerLabel={t('dateFilter.trigger')}\n          maxEndDate={dateRangeFilter.getMaxEndDate()}\n          minStartDate={dateRangeFilter.getMinStartDate()}\n        />\n      </Flex>\n\n      <DataView\n        label={t('dataView.label')}\n        pagination={pagination}\n        emptyState={() =>\n          dateRangeFilter.isModified ? (\n            <EmptyData\n              title={t('emptyState.filtered.title')}\n              description={t('emptyState.filtered.description')}\n            />\n          ) : (\n            <EmptyData\n              title={t('emptyState.default.title')}\n              description={t('emptyState.default.description')}\n            />\n          )\n        }\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","t","useTranslation","dateFormatter","useDateFormatter","formatDeadlineForDialog","item","deadline","deadlineDate","timeZone","formatter","timeFormatter","dateStr","handleCancelClick","handleConfirmCancel","getMenuItems","payrollId","items","jsx","FileIcon","ReceiptIcon","canCancelPayroll","TrashcanIcon","jsxs","Flex","DateRangeFilter","DataView","EmptyData","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/payrollshow'\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'\nimport { EmptyData } from '@/components/Common/'\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\n/** @internal */\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  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.startDate}\n          endDate={dateRangeFilter.endDate}\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          cancelLabel={t('dateFilter.cancel')}\n          resetLabel={t('dateFilter.reset')}\n          selectDatesLabel={t('dateFilter.selectDates')}\n          triggerLabel={t('dateFilter.trigger')}\n          maxEndDate={dateRangeFilter.getMaxEndDate()}\n          minStartDate={dateRangeFilter.getMinStartDate()}\n        />\n      </Flex>\n\n      <DataView\n        label={t('dataView.label')}\n        pagination={pagination}\n        isFetching={pagination.isFetching}\n        emptyState={() =>\n          dateRangeFilter.isModified ? (\n            <EmptyData\n              title={t('emptyState.filtered.title')}\n              description={t('emptyState.filtered.description')}\n            />\n          ) : (\n            <EmptyData\n              title={t('emptyState.default.title')}\n              description={t('emptyState.default.description')}\n            />\n          )\n        }\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","t","useTranslation","dateFormatter","useDateFormatter","formatDeadlineForDialog","item","deadline","deadlineDate","timeZone","formatter","timeFormatter","dateStr","handleCancelClick","handleConfirmCancel","getMenuItems","payrollId","items","jsx","FileIcon","ReceiptIcon","canCancelPayroll","TrashcanIcon","jsxs","Flex","DateRangeFilter","DataView","EmptyData","getPayrollTypeLabel","wireInRequest","wire","PayrollStatusBadges","formatNumberAsCurrency","calculateTotalPayroll","HamburgerMenu"],"mappings":"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"}

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

@@ -1,123 +1,134 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useState as r, useCallback as x } from "react";
-import { useQueryClient as H } from "@tanstack/react-query";
-import { usePayrollsListSuspense as N, invalidateAllPayrollsList as G } from "@gusto/embedded-api/react-query/payrollsList";
-import { usePaySchedulesGetAllSuspense as K } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { usePayrollsSkipMutation as Q } from "@gusto/embedded-api/react-query/payrollsSkip";
-import { usePayrollsDeleteMutation as W } from "@gusto/embedded-api/react-query/payrollsDelete";
-import { usePayrollsGetBlockersSuspense as j } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
-import { useWireInRequestsListSuspense as V } from "@gusto/embedded-api/react-query/wireInRequestsList";
+import { jsx as l } from "react/jsx-runtime";
+import { useState as r, useCallback as j } from "react";
+import { useQueryClient as V, keepPreviousData as v } from "@tanstack/react-query";
+import { usePayrollsList as z, invalidateAllPayrollsList as J } from "@gusto/embedded-api/react-query/payrollsList";
+import { usePaySchedulesGetAllSuspense as X } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { usePayrollsSkipMutation as Z } from "@gusto/embedded-api/react-query/payrollsSkip";
+import { usePayrollsDeleteMutation as $ } from "@gusto/embedded-api/react-query/payrollsDelete";
+import { usePayrollsGetBlockersSuspense as ee } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
+import { useWireInRequestsListSuspense as te } from "@gusto/embedded-api/react-query/wireInRequestsList";
 import { PayrollType as g } from "@gusto/embedded-api/models/operations/postcompaniespayrollskipcompanyuuid";
-import { QueryParamPayrollTypes as n, ProcessingStatuses as z } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
-import { useUnprocessedTransitionPayPeriods as J } from "../useUnprocessedTransitionPayPeriods.js";
-import { PayrollListPresentation as X } from "./PayrollListPresentation.js";
-import { BaseComponent as Z } from "../../Base/Base.js";
-import { useBase as $ } from "../../Base/useBase.js";
-import { componentEvents as a } from "../../../shared/constants.js";
-import { usePagination as v } from "../../../hooks/usePagination/usePagination.js";
-import { useDateRangeFilter as ee } from "../../../hooks/useDateRangeFilter/useDateRangeFilter.js";
-function Te(t) {
-  return /* @__PURE__ */ i(Z, { ...t, children: /* @__PURE__ */ i(ae, { ...t }) });
+import { QueryParamPayrollTypes as c, ProcessingStatuses as se } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
+import { useUnprocessedTransitionPayPeriods as ae } from "../useUnprocessedTransitionPayPeriods.js";
+import { PayrollListPresentation as oe } from "./PayrollListPresentation.js";
+import { BaseComponent as re, BaseLayout as le } from "../../Base/Base.js";
+import { useBase as ne } from "../../Base/useBase.js";
+import { componentEvents as o } from "../../../shared/constants.js";
+import { usePagination as ie } from "../../../hooks/usePagination/usePagination.js";
+import { useDateRangeFilter as ce } from "../../../hooks/useDateRangeFilter/useDateRangeFilter.js";
+function Be(t) {
+  return /* @__PURE__ */ l(re, { ...t, children: /* @__PURE__ */ l(me, { ...t }) });
 }
-const te = 3, se = () => /* @__PURE__ */ new Date(), oe = () => {
+const ue = 3, pe = () => /* @__PURE__ */ new Date(), ye = () => {
   const t = /* @__PURE__ */ new Date();
-  return t.setMonth(t.getMonth() + te), t;
-}, ae = ({ companyId: t, onEvent: o, withOffcyclePayroll: L = !0 }) => {
-  const { baseSubmitHandler: c } = $(), R = H(), [h, u] = r(!1), [k, p] = r(null), { currentPage: A, itemsPerPage: w, getPaginationProps: O, resetPage: y } = v(), [C, P] = r(!1), [E, m] = r(null), d = ee({
-    initialStartDate: se(),
-    initialEndDate: oe(),
-    onFilterChange: x(() => {
-      y();
-    }, [y])
-  }), f = d.getApiDateParams(), { data: S } = N({
-    companyId: t,
-    processingStatuses: [z.Unprocessed],
-    startDate: f.startDate,
-    endDate: f.endDate,
-    payrollTypes: [
-      n.Regular,
-      n.OffCycle,
-      n.External
-    ],
-    includeOffCycle: !0,
-    page: A,
-    per: w
-  }), D = S.payrollList, T = O(S.httpMeta.response.headers), { data: _ } = K({
+  return t.setMonth(t.getMonth() + ue), t;
+}, me = ({
+  companyId: t,
+  onEvent: a,
+  withOffcyclePayroll: L = !0,
+  LoaderComponent: h
+}) => {
+  const { baseSubmitHandler: u } = ne(), R = V(), [k, p] = r(!1), [A, y] = r(null), { currentPage: w, itemsPerPage: O, getPaginationProps: E, resetPage: m } = ie(), [C, P] = r(!1), [T, d] = r(null), f = ce({
+    initialStartDate: pe(),
+    initialEndDate: ye(),
+    onFilterChange: j(() => {
+      m();
+    }, [m])
+  }), D = f.getApiDateParams(), { data: n, isFetching: _ } = z(
+    {
+      companyId: t,
+      processingStatuses: [se.Unprocessed],
+      startDate: D.startDate,
+      endDate: D.endDate,
+      payrollTypes: [
+        c.Regular,
+        c.OffCycle,
+        c.External
+      ],
+      includeOffCycle: !0,
+      page: w,
+      per: O
+    },
+    { placeholderData: v, throwOnError: !0 }
+  ), S = n?.payrollList ?? [], { data: F } = X({
     companyId: t
-  }), q = _.payScheduleShowResponse, { data: F } = j({
+  }), q = F.payScheduleShowResponse, { data: B } = ee({
     companyUuid: t
-  }), U = (F.payrollBlockers ?? []).map(
+  }), U = (B.payrollBlockers ?? []).map(
     (e) => ({
       key: e.key ?? "unknown",
       message: e.message
     })
-  ), { data: B } = V({
+  ), { data: I } = te({
     companyUuid: t
-  }), I = B.wireInRequestList ?? [], { hasUnprocessedTransitions: M } = J(t), { mutateAsync: b } = Q(), { mutateAsync: Y } = W();
-  return /* @__PURE__ */ i(
-    X,
+  }), M = I.wireInRequestList ?? [], { hasUnprocessedTransitions: Y } = ae(t), { mutateAsync: b } = Z(), { mutateAsync: x } = $(), H = ({ payrollUuid: e, payPeriod: s }) => {
+    a(o.RUN_PAYROLL_SELECTED, { payrollUuid: e, payPeriod: s });
+  }, N = () => {
+    a(o.RUN_OFF_CYCLE_PAYROLL);
+  }, G = ({
+    payrollUuid: e,
+    payPeriod: s
+  }) => {
+    a(o.REVIEW_PAYROLL, { payrollUuid: e, payPeriod: s });
+  }, K = async ({ payrollUuid: e }) => {
+    const s = S.find((i) => i.payrollUuid === e);
+    if (s?.payPeriod) {
+      y(e);
+      const i = s.offCycleReason === "Transition from old pay schedule" ? g.TransitionFromOldPaySchedule : g.Regular;
+      await u({}, async () => {
+        await b({
+          request: {
+            companyUuid: t,
+            requestBody: {
+              payrollType: i,
+              startDate: s.payPeriod?.startDate,
+              endDate: s.payPeriod?.endDate,
+              payScheduleUuid: s.payPeriod?.payScheduleUuid ?? void 0
+            }
+          }
+        }), p(!0), a(o.PAYROLL_SKIPPED, { payrollId: e });
+      }), y(null);
+    }
+  }, Q = async ({ payrollUuid: e }) => {
+    e && (d(e), await u({}, async () => {
+      await x({
+        request: { companyId: t, payrollId: e }
+      }), await J(R), P(!0), a(o.PAYROLL_DELETED, { payrollId: e });
+    }), d(null));
+  };
+  if (!n)
+    return /* @__PURE__ */ l(le, { isLoading: !0, LoaderComponent: h });
+  const W = E(n.httpMeta.response.headers, _);
+  return /* @__PURE__ */ l(
+    oe,
     {
-      payrolls: D,
-      pagination: T,
+      payrolls: S,
+      pagination: W,
       paySchedules: q,
-      onRunPayroll: ({ payrollUuid: e, payPeriod: s }) => {
-        o(a.RUN_PAYROLL_SELECTED, { payrollUuid: e, payPeriod: s });
-      },
-      onSubmitPayroll: ({
-        payrollUuid: e,
-        payPeriod: s
-      }) => {
-        o(a.REVIEW_PAYROLL, { payrollUuid: e, payPeriod: s });
-      },
-      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 b({
-              request: {
-                companyUuid: t,
-                requestBody: {
-                  payrollType: l,
-                  startDate: s.payPeriod?.startDate,
-                  endDate: s.payPeriod?.endDate,
-                  payScheduleUuid: s.payPeriod?.payScheduleUuid ?? void 0
-                }
-              }
-            }), u(!0), o(a.PAYROLL_SKIPPED, { payrollId: e });
-          }), p(null);
-        }
-      },
-      onDeletePayroll: async ({ payrollUuid: e }) => {
-        e && (m(e), await c({}, async () => {
-          await Y({
-            request: { companyId: t, payrollId: e }
-          }), await G(R), P(!0), o(a.PAYROLL_DELETED, { payrollId: e });
-        }), m(null));
-      },
-      onRunOffCyclePayroll: () => {
-        o(a.RUN_OFF_CYCLE_PAYROLL);
-      },
-      showSkipSuccessAlert: h,
+      onRunPayroll: H,
+      onSubmitPayroll: G,
+      onSkipPayroll: K,
+      onDeletePayroll: Q,
+      onRunOffCyclePayroll: N,
+      showSkipSuccessAlert: k,
       onDismissSkipSuccessAlert: () => {
-        u(!1);
+        p(!1);
       },
       showDeleteSuccessAlert: C,
       onDismissDeleteSuccessAlert: () => {
         P(!1);
       },
-      skippingPayrollId: k,
-      deletingPayrollId: E,
+      skippingPayrollId: A,
+      deletingPayrollId: T,
       blockers: U,
-      wireInRequests: I,
-      dateRangeFilter: d,
-      hasUnprocessedTransitions: M,
+      wireInRequests: M,
+      dateRangeFilter: f,
+      hasUnprocessedTransitions: Y,
       withOffcyclePayroll: L
     }
   );
 };
 export {
-  Te as PayrollList
+  Be 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, 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/payrollshow'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { useUnprocessedTransitionPayPeriods } from '../useUnprocessedTransitionPayPeriods'\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\n/**\n * Props for {@link PayrollList}.\n *\n * @public\n */\nexport interface PayrollListBlockProps extends BaseComponentInterface<never> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Whether to show the off-cycle payroll call-to-action. Defaults to `true`. */\n  withOffcyclePayroll?: boolean\n}\n\n/**\n * Lists upcoming payrolls and lets users start running them.\n *\n * Displays available payrolls with pay period dates, payroll type, check date,\n * deadline, and status. Each row offers actions to run, submit a calculated\n * payroll, skip, or delete (for cancellable off-cycle payrolls). A separate\n * call-to-action starts an off-cycle payroll.\n *\n * @remarks\n * When the company has unprocessed transition pay periods within the next\n * 90 days, the Run Payroll action on Regular rows is disabled to prevent a\n * regular payroll from being run before the transition is resolved. Off-cycle\n * rows and the Run off-cycle action remain enabled, since off-cycle is the\n * path used to run a transition payroll. {@link PayrollLanding} pairs this\n * list with an alert that lets users run or skip the pending transition; when\n * using `PayrollList` directly, render an equivalent resolution surface\n * alongside it.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `runPayroll/selected` | User selected a payroll to run | `{ payrollUuid, payPeriod }` |\n * | `payroll/review` | User selected a calculated payroll to review and submit | `{ payrollUuid, payPeriod }` |\n * | `payroll/skipped` | A payroll was successfully skipped | `{ payrollId }` |\n * | `payroll/deleted` | A cancellable off-cycle payroll was successfully deleted | `{ payrollId }` |\n * | `runPayroll/offCycle/start` | User clicked the Run off-cycle call-to-action | — |\n *\n * @param props - See {@link PayrollListBlockProps}.\n * @returns The rendered payroll list.\n * @public\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 getDefaultStartDate = (): Date => new Date()\n\nconst getDefaultEndDate = (): Date => {\n  const date = new Date()\n  date.setMonth(date.getMonth() + FUTURE_LOOKAHEAD_MONTHS)\n  return date\n}\n\nconst Root = ({ companyId, onEvent, withOffcyclePayroll = true }: 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    initialStartDate: getDefaultStartDate(),\n    initialEndDate: getDefaultEndDate(),\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,\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.payScheduleShowResponse!\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 { hasUnprocessedTransitions } = useUnprocessedTransitionPayPeriods(companyId)\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      hasUnprocessedTransitions={hasUnprocessedTransitions}\n      withOffcyclePayroll={withOffcyclePayroll}\n    />\n  )\n}\n"],"names":["PayrollList","props","jsx","BaseComponent","Root","FUTURE_LOOKAHEAD_MONTHS","getDefaultStartDate","getDefaultEndDate","date","companyId","onEvent","withOffcyclePayroll","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","hasUnprocessedTransitions","useUnprocessedTransitionPayPeriods","skipPayroll","usePayrollsSkipMutation","deletePayrollMutation","usePayrollsDeleteMutation","PayrollListPresentation","payrollUuid","payPeriod","componentEvents","payroll","payrollType","PayrollType","invalidateAllPayrollsList"],"mappings":";;;;;;;;;;;;;;;;;;AAqEO,SAASA,GAAYC,GAA8B;AACxD,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,IAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEA,MAAMI,KAA0B,GAE1BC,KAAsB,MAAY,oBAAI,KAAA,GAEtCC,KAAoB,MAAY;AACpC,QAAMC,wBAAW,KAAA;AACjB,SAAAA,EAAK,SAASA,EAAK,SAAA,IAAaH,EAAuB,GAChDG;AACT,GAEMJ,KAAO,CAAC,EAAE,WAAAK,GAAW,SAAAC,GAAS,qBAAAC,IAAsB,SAAkC;AAC1F,QAAM,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GACxBC,IAAcC,EAAA,GACd,CAACC,GAAsBC,CAAuB,IAAIC,EAAS,EAAK,GAChE,CAACC,GAAmBC,CAAoB,IAAIF,EAAwB,IAAI,GACxE,EAAE,aAAAG,GAAa,cAAAC,GAAc,oBAAAC,GAAoB,WAAAC,EAAA,IAAcC,EAAA,GAC/D,CAACC,GAAwBC,CAAyB,IAAIT,EAAS,EAAK,GACpE,CAACU,GAAmBC,CAAoB,IAAIX,EAAwB,IAAI,GAExEY,IAAkBC,GAAmB;AAAA,IACzC,kBAAkBzB,GAAA;AAAA,IAClB,gBAAgBC,GAAA;AAAA,IAChB,gBAAgByB,EAAY,MAAM;AAChC,MAAAR,EAAA;AAAA,IACF,GAAG,CAACA,CAAS,CAAC;AAAA,EAAA,CACf,GACKS,IAAmBH,EAAgB,iBAAA,GAEnC,EAAE,MAAMI,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAA1B;AAAA,IACA,oBAAoB,CAAC2B,EAAmB,WAAW;AAAA,IACnD,WAAWH,EAAiB;AAAA,IAC5B,SAASA,EAAiB;AAAA,IAC1B,cAAc;AAAA,MACZI,EAAuB;AAAA,MACvBA,EAAuB;AAAA,MACvBA,EAAuB;AAAA,IAAA;AAAA,IAEzB,iBAAiB;AAAA,IACjB,MAAMhB;AAAA,IACN,KAAKC;AAAA,EAAA,CACN,GACKgB,IAAcJ,EAAa,aAC3BK,IAAkBhB,EAAmBW,EAAa,SAAS,SAAS,OAAO,GAC3E,EAAE,MAAMM,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAhC;AAAA,EAAA,CACD,GACKiC,IAAmBF,EAAiB,yBAEpC,EAAE,MAAMG,EAAA,IAAiBC,EAA+B;AAAA,IAC5D,aAAanC;AAAA,EAAA,CACd,GAIKoC,KAFqBF,EAAa,mBAAmB,CAAA,GAEF;AAAA,IACvD,CAACG,OAAiD;AAAA,MAChD,KAAKA,EAAQ,OAAO;AAAA,MACpB,SAASA,EAAQ;AAAA,IAAA;AAAA,EACnB,GAGI,EAAE,MAAMC,EAAA,IAAuBC,EAA8B;AAAA,IACjE,aAAavC;AAAA,EAAA,CACd,GAEKwC,IAAiBF,EAAmB,qBAAqB,CAAA,GAEzD,EAAE,2BAAAG,EAAA,IAA8BC,EAAmC1C,CAAS,GAE5E,EAAE,aAAa2C,EAAA,IAAgBC,EAAA,GAC/B,EAAE,aAAaC,EAAA,IAA0BC,EAAA;AA2D/C,SACE,gBAAArD;AAAA,IAACsD;AAAA,IAAA;AAAA,MACC,UAAUlB;AAAA,MACV,YAAYC;AAAA,MACZ,cAAcG;AAAA,MACd,cA9DiB,CAAC,EAAE,aAAAe,GAAa,WAAAC,QAA4D;AAC/F,QAAAhD,EAAQiD,EAAgB,sBAAsB,EAAE,aAAAF,GAAa,WAAAC,GAAW;AAAA,MAC1E;AAAA,MA6DI,iBAzDoB,CAAC;AAAA,QACvB,aAAAD;AAAA,QACA,WAAAC;AAAA,MAAA,MACgD;AAChD,QAAAhD,EAAQiD,EAAgB,gBAAgB,EAAE,aAAAF,GAAa,WAAAC,GAAW;AAAA,MACpE;AAAA,MAqDI,eApDkB,OAAO,EAAE,aAAAD,QAAgD;AAC7E,cAAMG,IAAUtB,EAAY,KAAK,CAAAsB,MAAWA,EAAQ,gBAAgBH,CAAW;AAE/E,YAAIG,GAAS,WAAW;AACtB,UAAAxC,EAAqBqC,CAAY;AACjC,gBAAMI,IACJD,EAAQ,mBAAmB,qCACvBE,EAAY,+BACZA,EAAY;AAElB,gBAAMlD,EAAkB,CAAA,GAAI,YAAY;AACtC,kBAAMwC,EAAY;AAAA,cAChB,SAAS;AAAA,gBACP,aAAa3C;AAAA,gBACb,aAAa;AAAA,kBACX,aAAAoD;AAAA,kBACA,WAAWD,EAAQ,WAAW;AAAA,kBAC9B,SAASA,EAAQ,WAAW;AAAA,kBAC5B,iBAAiBA,EAAQ,WAAW,mBAAmB;AAAA,gBAAA;AAAA,cACzD;AAAA,YACF,CACD,GAED3C,EAAwB,EAAI,GAC5BP,EAAQiD,EAAgB,iBAAiB,EAAE,WAAWF,GAAa;AAAA,UACrE,CAAC,GACDrC,EAAqB,IAAI;AAAA,QAC3B;AAAA,MACF;AAAA,MAyBI,iBAvBoB,OAAO,EAAE,aAAAqC,QAAgD;AAC/E,QAAIA,MACF5B,EAAqB4B,CAAW,GAChC,MAAM7C,EAAkB,CAAA,GAAI,YAAY;AACtC,gBAAM0C,EAAsB;AAAA,YAC1B,SAAS,EAAE,WAAA7C,GAAW,WAAWgD,EAAA;AAAA,UAAY,CAC9C,GACD,MAAMM,EAA0BjD,CAAW,GAC3Ca,EAA0B,EAAI,GAC9BjB,EAAQiD,EAAgB,iBAAiB,EAAE,WAAWF,GAAa;AAAA,QACrE,CAAC,GACD5B,EAAqB,IAAI;AAAA,MAE7B;AAAA,MAWI,sBA/DyB,MAAM;AACjC,QAAAnB,EAAQiD,EAAgB,qBAAqB;AAAA,MAC/C;AAAA,MA8DI,sBAAA3C;AAAA,MACA,2BAA2B,MAAM;AAC/B,QAAAC,EAAwB,EAAK;AAAA,MAC/B;AAAA,MACA,wBAAAS;AAAA,MACA,6BAA6B,MAAM;AACjC,QAAAC,EAA0B,EAAK;AAAA,MACjC;AAAA,MACA,mBAAAR;AAAA,MACA,mBAAAS;AAAA,MACA,UAAAiB;AAAA,MACA,gBAAAI;AAAA,MACA,iBAAAnB;AAAA,MACA,2BAAAoB;AAAA,MACA,qBAAAvC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { useState, useCallback } from 'react'\nimport { useQueryClient, keepPreviousData } from '@tanstack/react-query'\nimport {\n  usePayrollsList,\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/payrollshow'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { useUnprocessedTransitionPayPeriods } from '../useUnprocessedTransitionPayPeriods'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent, BaseLayout, useBase } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { usePagination } from '@/hooks/usePagination/usePagination'\nimport { useDateRangeFilter } from '@/hooks/useDateRangeFilter/useDateRangeFilter'\n\n/**\n * Props for {@link PayrollList}.\n *\n * @public\n */\nexport interface PayrollListBlockProps extends BaseComponentInterface<never> {\n  /** The associated company identifier. */\n  companyId: string\n  /** Whether to show the off-cycle payroll call-to-action. Defaults to `true`. */\n  withOffcyclePayroll?: boolean\n}\n\n/**\n * Lists upcoming payrolls and lets users start running them.\n *\n * Displays available payrolls with pay period dates, payroll type, check date,\n * deadline, and status. Each row offers actions to run, submit a calculated\n * payroll, skip, or delete (for cancellable off-cycle payrolls). A separate\n * call-to-action starts an off-cycle payroll.\n *\n * @remarks\n * When the company has unprocessed transition pay periods within the next\n * 90 days, the Run Payroll action on Regular rows is disabled to prevent a\n * regular payroll from being run before the transition is resolved. Off-cycle\n * rows and the Run off-cycle action remain enabled, since off-cycle is the\n * path used to run a transition payroll. {@link PayrollLanding} pairs this\n * list with an alert that lets users run or skip the pending transition; when\n * using `PayrollList` directly, render an equivalent resolution surface\n * alongside it.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `runPayroll/selected` | User selected a payroll to run | `{ payrollUuid, payPeriod }` |\n * | `payroll/review` | User selected a calculated payroll to review and submit | `{ payrollUuid, payPeriod }` |\n * | `payroll/skipped` | A payroll was successfully skipped | `{ payrollId }` |\n * | `payroll/deleted` | A cancellable off-cycle payroll was successfully deleted | `{ payrollId }` |\n * | `runPayroll/offCycle/start` | User clicked the Run off-cycle call-to-action | — |\n *\n * @param props - See {@link PayrollListBlockProps}.\n * @returns The rendered payroll list.\n * @public\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 getDefaultStartDate = (): Date => new Date()\n\nconst getDefaultEndDate = (): Date => {\n  const date = new Date()\n  date.setMonth(date.getMonth() + FUTURE_LOOKAHEAD_MONTHS)\n  return date\n}\n\nconst Root = ({\n  companyId,\n  onEvent,\n  withOffcyclePayroll = true,\n  LoaderComponent,\n}: 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    initialStartDate: getDefaultStartDate(),\n    initialEndDate: getDefaultEndDate(),\n    onFilterChange: useCallback(() => {\n      resetPage()\n    }, [resetPage]),\n  })\n  const dateFilterParams = dateRangeFilter.getApiDateParams()\n\n  const { data: payrollsData, isFetching } = usePayrollsList(\n    {\n      companyId,\n      processingStatuses: [ProcessingStatuses.Unprocessed],\n      startDate: dateFilterParams.startDate,\n      endDate: dateFilterParams.endDate,\n      payrollTypes: [\n        QueryParamPayrollTypes.Regular,\n        QueryParamPayrollTypes.OffCycle,\n        QueryParamPayrollTypes.External,\n      ],\n      includeOffCycle: true,\n      page: currentPage,\n      per: itemsPerPage,\n    },\n    { placeholderData: keepPreviousData, throwOnError: true },\n  )\n  const payrollList = payrollsData?.payrollList ?? []\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleShowResponse!\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 { hasUnprocessedTransitions } = useUnprocessedTransitionPayPeriods(companyId)\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  if (!payrollsData) {\n    return <BaseLayout isLoading LoaderComponent={LoaderComponent} />\n  }\n\n  const paginationProps = getPaginationProps(payrollsData.httpMeta.response.headers, isFetching)\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      hasUnprocessedTransitions={hasUnprocessedTransitions}\n      withOffcyclePayroll={withOffcyclePayroll}\n    />\n  )\n}\n"],"names":["PayrollList","props","jsx","BaseComponent","Root","FUTURE_LOOKAHEAD_MONTHS","getDefaultStartDate","getDefaultEndDate","date","companyId","onEvent","withOffcyclePayroll","LoaderComponent","baseSubmitHandler","useBase","queryClient","useQueryClient","showSkipSuccessAlert","setShowSkipSuccessAlert","useState","skippingPayrollId","setSkippingPayrollId","currentPage","itemsPerPage","getPaginationProps","resetPage","usePagination","showDeleteSuccessAlert","setShowDeleteSuccessAlert","deletingPayrollId","setDeletingPayrollId","dateRangeFilter","useDateRangeFilter","useCallback","dateFilterParams","payrollsData","isFetching","usePayrollsList","ProcessingStatuses","QueryParamPayrollTypes","keepPreviousData","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","blockersData","usePayrollsGetBlockersSuspense","blockers","blocker","wireInRequestsData","useWireInRequestsListSuspense","wireInRequests","hasUnprocessedTransitions","useUnprocessedTransitionPayPeriods","skipPayroll","usePayrollsSkipMutation","deletePayrollMutation","usePayrollsDeleteMutation","onRunPayroll","payrollUuid","payPeriod","componentEvents","onRunOffCyclePayroll","onSubmitPayroll","onSkipPayroll","payroll","payrollType","PayrollType","onDeletePayroll","invalidateAllPayrollsList","BaseLayout","paginationProps","PayrollListPresentation"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
 import { OffCycleReasonType as m } from "@gusto/embedded-api/models/components/payrollshow";
 import { useRef as fe, useMemo as q, useState as z } from "react";
 import { useTranslation as pe } from "react-i18next";
@@ -20,19 +20,19 @@ const G = /* @__PURE__ */ new Set([
   m.Correction,
   m.DismissedEmployee
 ]);
-function Oe(r, g, y) {
+function Oe(r, S, y) {
   if (r.processed) return !1;
-  const f = r.payPeriod?.startDate ? new Date(r.payPeriod.startDate) : null, S = !r.offCycle || r.offCycleReason === m.TransitionFromOldPaySchedule, c = g.length === 0 && S && y && f && y >= f, k = r.offCycle && !!r.offCycleReason && G.has(r.offCycleReason);
-  return !!(c || k);
+  const f = r.payPeriod?.startDate ? new Date(r.payPeriod.startDate) : null, k = !r.offCycle || r.offCycleReason === m.TransitionFromOldPaySchedule, c = S.length === 0 && k && y && f && y >= f, p = r.offCycle && !!r.offCycleReason && G.has(r.offCycleReason);
+  return !!(c || p);
 }
 const qe = ({
   onRunPayroll: r,
-  onSubmitPayroll: g,
+  onSubmitPayroll: S,
   onSkipPayroll: y,
   onDeletePayroll: f,
-  onRunOffCyclePayroll: S,
+  onRunOffCyclePayroll: k,
   payrolls: c,
-  pagination: k,
+  pagination: p,
   paySchedules: I,
   showSkipSuccessAlert: J,
   onDismissSkipSuccessAlert: Q,
@@ -48,13 +48,13 @@ const qe = ({
 }) => {
   const { Box: le, BoxHeader: oe, Button: A, ButtonIcon: v, Dialog: N, Heading: re, Text: ne, Alert: E } = he();
   be("Payroll.PayrollList");
-  const { t } = pe("Payroll.PayrollList"), d = Se(), B = fe(null), T = ke({ ref: B }).includes("large"), p = q(() => {
+  const { t } = pe("Payroll.PayrollList"), d = Se(), F = fe(null), B = ke({ ref: F }).includes("large"), D = q(() => {
     const e = ge(/* @__PURE__ */ new Date());
     return e ? new Date(e) : null;
-  }, []), F = q(
-    () => c.some((e) => Oe(e, L, p)),
-    [c, L, p]
-  ), [D, H] = z({
+  }, []), T = q(
+    () => c.some((e) => Oe(e, L, D)),
+    [c, L, D]
+  ), [P, H] = z({
     isOpen: !1,
     payrollId: null,
     payPeriod: null
@@ -71,8 +71,8 @@ const qe = ({
       payPeriod: null
     });
   }, se = () => {
-    D.payrollId && (y({ payrollUuid: D.payrollId }), M());
-  }, [P, w] = z({
+    P.payrollId && (y({ payrollUuid: P.payrollId }), M());
+  }, [C, w] = z({
     isOpen: !1,
     payrollId: null,
     payPeriod: null
@@ -89,7 +89,7 @@ const qe = ({
       payPeriod: null
     });
   }, de = () => {
-    P.payrollId && (f({ payrollUuid: P.payrollId }), R());
+    C.payrollId && (f({ payrollUuid: C.payrollId }), R());
   }, U = (e, l) => {
     const n = d.formatShort(e), o = d.formatShortWithYear(l);
     return {
@@ -98,17 +98,17 @@ const qe = ({
       fullPeriod: d.formatPayPeriodRange(e, l, { useShortMonth: !0 })
     };
   }, W = (e) => {
-    const { payrollUuid: l, calculatedAt: n, processed: o, payPeriod: C } = e;
+    const { payrollUuid: l, calculatedAt: n, processed: o, payPeriod: h } = e;
     if (o)
       return null;
-    const h = x === l, u = !e.offCycle && te;
+    const b = x === l, u = !e.offCycle && te;
     return n ? /* @__PURE__ */ a(
       A,
       {
-        isLoading: h,
+        isLoading: b,
         isDisabled: u,
         onClick: () => {
-          g({ payrollUuid: l, payPeriod: C });
+          S({ payrollUuid: l, payPeriod: h });
         },
         title: t("submitPayrollCta"),
         variant: "secondary",
@@ -117,10 +117,10 @@ const qe = ({
     ) : /* @__PURE__ */ a(
       A,
       {
-        isLoading: h,
+        isLoading: b,
         isDisabled: u,
         onClick: () => {
-          r({ payrollUuid: l, payPeriod: C });
+          r({ payrollUuid: l, payPeriod: h });
         },
         title: t("runPayrollTitle"),
         variant: "secondary",
@@ -128,7 +128,7 @@ const qe = ({
       }
     );
   };
-  return /* @__PURE__ */ a("div", { ref: B, className: i.container, children: /* @__PURE__ */ b(O, { flexDirection: "column", gap: 16, alignItems: "stretch", children: [
+  return /* @__PURE__ */ a("div", { ref: F, className: i.container, children: /* @__PURE__ */ g(O, { flexDirection: "column", gap: 16, alignItems: "stretch", children: [
     J && /* @__PURE__ */ a("div", { className: i.alertContainer, children: /* @__PURE__ */ a(
       E,
       {
@@ -145,7 +145,7 @@ const qe = ({
         onDismiss: Z
       }
     ) }),
-    /* @__PURE__ */ b(O, { justifyContent: "space-between", alignItems: "center", children: [
+    /* @__PURE__ */ g(O, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ a(re, { as: "h2", children: t("title") }),
       /* @__PURE__ */ a(
         Ce,
@@ -171,7 +171,8 @@ const qe = ({
       Ae,
       {
         breakAt: "large",
-        pagination: k,
+        pagination: p,
+        isFetching: p?.isFetching,
         emptyState: () => s.isModified ? /* @__PURE__ */ a(
           V,
           {
@@ -187,7 +188,7 @@ const qe = ({
                 e?.startDate,
                 e?.endDate
               );
-              return /* @__PURE__ */ b("div", { className: i.payPeriodCell, children: [
+              return /* @__PURE__ */ g("div", { className: i.payPeriodCell, children: [
                 l,
                 " - ",
                 n,
@@ -217,7 +218,7 @@ const qe = ({
               return /* @__PURE__ */ a(Le, { payroll: e, wireInRequest: l });
             }
           },
-          ...T ? [] : [
+          ...B ? [] : [
             {
               title: "",
               render: (e) => {
@@ -229,9 +230,9 @@ const qe = ({
         ],
         label: t("payrollsListLabel"),
         itemMenu: (e) => {
-          const { payrollUuid: l, processed: n, payPeriod: o } = e, C = x === l, h = $ === l, Y = T ? W(e) : null;
+          const { payrollUuid: l, processed: n, payPeriod: o } = e, h = x === l, b = $ === l, Y = B ? W(e) : null;
           if (n)
-            return /* @__PURE__ */ a("div", { className: i.actionsContainer, children: F && /* @__PURE__ */ a(
+            return /* @__PURE__ */ a("div", { className: i.actionsContainer, children: T && /* @__PURE__ */ a(
               v,
               {
                 "aria-label": "",
@@ -244,7 +245,7 @@ const qe = ({
           const { fullPeriod: u } = U(
             o?.startDate,
             o?.endDate
-          ), j = o?.startDate ? new Date(o.startDate) : null, ue = !e.offCycle || e.offCycleReason === m.TransitionFromOldPaySchedule, _ = L.length === 0 && ue && p && j && p >= j, me = e.offCycle && !!e.offCycleReason && G.has(e.offCycleReason), K = _ ? [
+          ), j = o?.startDate ? new Date(o.startDate) : null, ue = !e.offCycle || e.offCycleReason === m.TransitionFromOldPaySchedule, _ = L.length === 0 && ue && D && j && D >= j, me = e.offCycle && !!e.offCycleReason && G.has(e.offCycleReason), K = _ ? [
             {
               label: t("skipPayrollCta"),
               onClick: () => {
@@ -259,16 +260,16 @@ const qe = ({
               }
             }
           ] : null, ye = K !== null;
-          return /* @__PURE__ */ b("div", { className: i.actionsContainer, children: [
+          return /* @__PURE__ */ g("div", { className: i.actionsContainer, children: [
             Y,
             ye ? /* @__PURE__ */ a(
               Pe,
               {
-                isLoading: _ ? C : h,
+                isLoading: _ ? h : b,
                 menuLabel: t("payrollMenuLabel"),
                 items: K
               }
-            ) : F && /* @__PURE__ */ a(
+            ) : T && /* @__PURE__ */ a(
               v,
               {
                 "aria-label": "",
@@ -285,11 +286,11 @@ const qe = ({
     /* @__PURE__ */ a(
       N,
       {
-        isOpen: D.isOpen,
+        isOpen: P.isOpen,
         onClose: M,
         onPrimaryActionClick: se,
         isDestructive: !0,
-        title: t("skipPayrollDialog.title", { payPeriod: D.payPeriod }),
+        title: t("skipPayrollDialog.title", { payPeriod: P.payPeriod }),
         primaryActionLabel: t("skipPayrollDialog.confirmCta"),
         closeActionLabel: t("skipPayrollDialog.cancelCta"),
         children: t("skipPayrollDialog.body")
@@ -298,12 +299,12 @@ const qe = ({
     /* @__PURE__ */ a(
       N,
       {
-        isOpen: P.isOpen,
+        isOpen: C.isOpen,
         onClose: R,
         onPrimaryActionClick: de,
         isDestructive: !0,
         title: t("deletePayrollDialog.title", {
-          payPeriod: P.payPeriod
+          payPeriod: C.payPeriod
         }),
         primaryActionLabel: t("deletePayrollDialog.confirmCta"),
         closeActionLabel: t("deletePayrollDialog.cancelCta"),
@@ -320,7 +321,7 @@ const qe = ({
             description: t("offCycleCta.description")
           }
         ),
-        footer: /* @__PURE__ */ a(A, { variant: "secondary", onClick: S, children: t("offCycleCta.button") })
+        footer: /* @__PURE__ */ a(A, { variant: "secondary", onClick: k, children: t("offCycleCta.button") })
       }
     ) })
   ] }) });