@gusto/embedded-react-sdk 0.13.2 → 0.13.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayrollHistoryPresentation.js","sources":["../../../../src/components/Payroll/PayrollHistory/PayrollHistoryPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { PayrollHistoryItem, PayrollHistoryStatus, 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 ListIcon from '@/assets/icons/list.svg?react'\nimport TrashcanIcon from '@/assets/icons/trashcan.svg?react'\n\ninterface PayrollHistoryPresentationProps {\n  payrollHistory: PayrollHistoryItem[]\n  selectedTimeFilter: TimeFilterOption\n  onTimeFilterChange: (value: TimeFilterOption) => void\n  onViewSummary: (payrollId: string) => void\n  onViewReceipt: (payrollId: string) => void\n  onCancelPayroll: (payrollId: string) => void\n  cancelDialogItem: PayrollHistoryItem | null\n  onCancelDialogOpen: (item: PayrollHistoryItem) => void\n  onCancelDialogClose: () => void\n  isLoading?: boolean\n}\n\nconst getStatusVariant = (status: PayrollHistoryStatus) => {\n  switch (status) {\n    case 'Complete':\n    case 'Paid':\n      return 'success'\n    case 'In progress':\n    case 'Unprocessed':\n      return 'warning'\n    case 'Submitted':\n    case 'Pending':\n      return 'info'\n    default:\n      return 'info'\n  }\n}\n\nexport const PayrollHistoryPresentation = ({\n  payrollHistory,\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, Badge, Select, Dialog } = useComponentContext()\n  useI18n('Payroll.PayrollHistory')\n  const { t } = useTranslation('Payroll.PayrollHistory')\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 canCancelPayroll = (item: PayrollHistoryItem) => {\n    const { status, payroll } = item\n\n    const hasValidStatus =\n      status === 'Unprocessed' ||\n      status === 'Submitted' ||\n      status === 'Pending' ||\n      status === 'In progress'\n    if (!hasValidStatus) return false\n\n    if (payroll.payrollStatusMeta?.cancellable === false) {\n      return false\n    }\n\n    // If payroll is processed, check the 3:30 PM PT deadline constraint\n    if (payroll.processed && payroll.payrollDeadline) {\n      const now = new Date()\n      const deadline = new Date(payroll.payrollDeadline)\n\n      const ptOffset = getPacificTimeOffset(now)\n      const nowInPT = new Date(now.getTime() + ptOffset * 60 * 60 * 1000)\n      const deadlineInPT = new Date(\n        deadline.getTime() + getPacificTimeOffset(deadline) * 60 * 60 * 1000,\n      )\n\n      const isSameDay = nowInPT.toDateString() === deadlineInPT.toDateString()\n      if (isSameDay) {\n        const cutoffTime = new Date(deadlineInPT)\n        cutoffTime.setHours(15, 30, 0, 0)\n\n        if (nowInPT > cutoffTime) {\n          return false\n        }\n      }\n    }\n\n    return true\n  }\n\n  const getPacificTimeOffset = (date: Date): number => {\n    const year = date.getFullYear()\n\n    const secondSundayMarch = new Date(year, 2, 1)\n    secondSundayMarch.setDate(1 + (7 - secondSundayMarch.getDay()) + 7)\n\n    const firstSundayNovember = new Date(year, 10, 1)\n    firstSundayNovember.setDate(1 + ((7 - firstSundayNovember.getDay()) % 7))\n\n    const isDST = date >= secondSundayMarch && date < firstSundayNovember\n    return isDST ? -7 : -8\n  }\n\n  const formatDeadlineForDialog = (item: PayrollHistoryItem): string => {\n    const deadline = item.payroll.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: PayrollHistoryItem) => {\n    onCancelDialogOpen(item)\n  }\n\n  const handleConfirmCancel = () => {\n    if (cancelDialogItem) {\n      onCancelPayroll(cancelDialogItem.id)\n    }\n  }\n\n  const getMenuItems = (item: PayrollHistoryItem): MenuItem[] => {\n    const items: MenuItem[] = [\n      {\n        label: t('menu.viewSummary'),\n        icon: <ListIcon aria-hidden />,\n        onClick: () => {\n          onViewSummary(item.id)\n        },\n      },\n      {\n        label: t('menu.viewReceipt'),\n        icon: <ListIcon aria-hidden />,\n        onClick: () => {\n          onViewReceipt(item.id)\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: PayrollHistoryItem) => <Text>{item.payPeriod}</Text>,\n          },\n          {\n            title: t('columns.type'),\n            render: (item: PayrollHistoryItem) => <Text>{item.type}</Text>,\n          },\n          {\n            title: t('columns.payDate'),\n            render: (item: PayrollHistoryItem) => <Text>{item.payDate}</Text>,\n          },\n          {\n            title: t('columns.status'),\n            render: (item: PayrollHistoryItem) => (\n              <Badge status={getStatusVariant(item.status)}>{item.status}</Badge>\n            ),\n          },\n          {\n            title: t('columns.amount'),\n            render: (item: PayrollHistoryItem) => (\n              <Text weight=\"semibold\">\n                {item.amount ? formatNumberAsCurrency(item.amount) : t('labels.noAmount')}\n              </Text>\n            ),\n          },\n        ]}\n        data={payrollHistory}\n        itemMenu={(item: PayrollHistoryItem) => <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 ? t('cancelDialog.title', { payPeriod: cancelDialogItem.payPeriod }) : ''\n        }\n      >\n        {cancelDialogItem && (\n          <Flex flexDirection=\"column\" gap={16}>\n            <Text>{t('cancelDialog.body')}</Text>\n            {cancelDialogItem.payroll.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":["getStatusVariant","status","PayrollHistoryPresentation","payrollHistory","selectedTimeFilter","onTimeFilterChange","onViewSummary","onViewReceipt","onCancelPayroll","cancelDialogItem","onCancelDialogOpen","onCancelDialogClose","isLoading","Heading","Text","Badge","Select","Dialog","useComponentContext","useI18n","useTranslation","timeFilterOptions","canCancelPayroll","item","payroll","now","deadline","ptOffset","getPacificTimeOffset","nowInPT","deadlineInPT","cutoffTime","date","year","secondSundayMarch","firstSundayNovember","formatDeadlineForDialog","deadlineDate","timeZone","formatter","timeFormatter","dateStr","handleCancelClick","handleConfirmCancel","getMenuItems","items","jsx","ListIcon","TrashcanIcon","Flex","jsxs","styles","value","DataView","formatNumberAsCurrency","HamburgerMenu"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+const t = "_timeFilterContainer_fq7i5_1", e = {
+  timeFilterContainer: t
+};
+export {
+  e as default,
+  t as timeFilterContainer
+};
+//# sourceMappingURL=PayrollHistoryPresentation.module.scss.js.map

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

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

package/dist/components/Payroll/PayrollLanding/PayrollLanding.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponentInterface } from '../../Base/Base';
+interface PayrollLandingProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {
+    companyId: string;
+}
+export declare function PayrollLanding(props: PayrollLandingProps): import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ onEvent, companyId }: PayrollLandingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { useTranslation as m } from "react-i18next";
+import { PayrollHistory as y } from "../PayrollHistory/PayrollHistory.js";
+import { PayrollList as c } from "../PayrollList/PayrollList.js";
+import { BaseComponent as p } from "../../Base/Base.js";
+import { useI18n as b } from "../../../i18n/I18n.js";
+import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+function S(o) {
+  return /* @__PURE__ */ t(p, { ...o, children: /* @__PURE__ */ t(d, { ...o }) });
+}
+const d = ({ onEvent: o, companyId: l }) => {
+  const [a, n] = s("run-payroll"), { Tabs: e } = u();
+  b("Payroll.PayrollLanding");
+  const { t: r } = m("Payroll.PayrollLanding"), i = [
+    {
+      id: "run-payroll",
+      label: r("tabs.runPayroll"),
+      content: /* @__PURE__ */ t(c, { companyId: l, onEvent: o })
+    },
+    {
+      id: "payroll-history",
+      label: r("tabs.payrollHistory"),
+      content: /* @__PURE__ */ t(y, { companyId: l, onEvent: o })
+    }
+  ];
+  return /* @__PURE__ */ t(
+    e,
+    {
+      tabs: i,
+      selectedId: a,
+      onSelectionChange: n,
+      "aria-label": r("aria.tabNavigation")
+    }
+  );
+};
+export {
+  S as PayrollLanding,
+  d as Root
+};
+//# sourceMappingURL=PayrollLanding.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PayrollLanding.js","sources":["../../../../src/components/Payroll/PayrollLanding/PayrollLanding.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PayrollHistory } from '../PayrollHistory/PayrollHistory'\nimport { PayrollList } from '../PayrollList/PayrollList'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useI18n } from '@/i18n'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface PayrollLandingProps extends BaseComponentInterface<'Payroll.PayrollLanding'> {\n  companyId: string\n}\n\nexport function PayrollLanding(props: PayrollLandingProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props} />\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ onEvent, companyId }: PayrollLandingProps) => {\n  const [selectedTab, setSelectedTab] = useState('run-payroll')\n  const { Tabs } = useComponentContext()\n\n  useI18n('Payroll.PayrollLanding')\n  const { t } = useTranslation('Payroll.PayrollLanding')\n\n  const tabs = [\n    {\n      id: 'run-payroll',\n      label: t('tabs.runPayroll'),\n      content: <PayrollList companyId={companyId} onEvent={onEvent} />,\n    },\n    {\n      id: 'payroll-history',\n      label: t('tabs.payrollHistory'),\n      content: <PayrollHistory companyId={companyId} onEvent={onEvent} />,\n    },\n  ]\n\n  return (\n    <Tabs\n      tabs={tabs}\n      selectedId={selectedTab}\n      onSelectionChange={setSelectedTab}\n      aria-label={t('aria.tabNavigation')}\n    />\n  )\n}\n"],"names":["PayrollLanding","props","jsx","BaseComponent","Root","onEvent","companyId","selectedTab","setSelectedTab","useState","Tabs","useComponentContext","useI18n","t","useTranslation","tabs","PayrollList","PayrollHistory"],"mappings":";;;;;;;;AAaO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,KAAe,GAAGF,GACjB,4BAACG,GAAA,EAAM,GAAGH,GAAO,EAAA,CACnB;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,SAAAC,GAAS,WAAAC,QAAqC;AACnE,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,aAAa,GACtD,EAAE,MAAAC,EAAA,IAASC,EAAA;AAEjB,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAE/CC,IAAO;AAAA,IACX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOF,EAAE,iBAAiB;AAAA,MAC1B,SAAS,gBAAAX,EAACc,GAAA,EAAY,WAAAV,GAAsB,SAAAD,EAAA,CAAkB;AAAA,IAAA;AAAA,IAEhE;AAAA,MACE,IAAI;AAAA,MACJ,OAAOQ,EAAE,qBAAqB;AAAA,MAC9B,SAAS,gBAAAX,EAACe,GAAA,EAAe,WAAAX,GAAsB,SAAAD,EAAA,CAAkB;AAAA,IAAA;AAAA,EACnE;AAGF,SACE,gBAAAH;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,MAAAK;AAAA,MACA,YAAYR;AAAA,MACZ,mBAAmBC;AAAA,MACnB,cAAYK,EAAE,oBAAoB;AAAA,IAAA;AAAA,EAAA;AAGxC;"}

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

@@ -1,36 +1,34 @@
 import { jsx as t } from "react/jsx-runtime";
-import { usePayrollsListSuspense as c } from "@gusto/embedded-api/react-query/payrollsList";
-import { usePaySchedulesGetAllSuspense as i } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
-import { ProcessingStatuses as y } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
-import { PayrollListPresentation as m } from "./PayrollListPresentation.js";
-import { BaseComponent as u } from "../../Base/Base.js";
+import { usePayrollsListSuspense as n } from "@gusto/embedded-api/react-query/payrollsList";
+import { usePaySchedulesGetAllSuspense as m } from "@gusto/embedded-api/react-query/paySchedulesGetAll";
+import { ProcessingStatuses as c } from "@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls";
+import { getPayrollType as y } from "../helpers.js";
+import { PayrollListPresentation as u } from "./PayrollListPresentation.js";
+import { BaseComponent as P } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { componentEvents as P } from "../../../shared/constants.js";
-const L = ({
-  external: o,
-  offCycle: s
-}) => o ? "External" : s ? "Off-Cycle" : "Regular", S = (o) => ({
+import { componentEvents as L } from "../../../shared/constants.js";
+const S = (o) => ({
   ...o,
-  payrollType: L(o)
-}), D = ({ companyId: o, onEvent: s }) => {
-  const { data: e } = c({
+  payrollType: y(o)
+}), x = ({ companyId: o, onEvent: s }) => {
+  const { data: r } = n({
     companyId: o,
-    processingStatuses: [y.Unprocessed]
-  }), r = e.payrollList, { data: l } = i({
+    processingStatuses: [c.Unprocessed]
+  }), e = r.payrollList, { data: l } = m({
     companyId: o
-  }), a = l.payScheduleList, p = ({ payrollId: n }) => {
-    s(P.RUN_PAYROLL_SELECTED, { payrollId: n });
+  }), a = l.payScheduleList, p = ({ payrollId: i }) => {
+    s(L.RUN_PAYROLL_SELECTED, { payrollId: i });
   };
-  return /* @__PURE__ */ t(u, { onEvent: s, children: /* @__PURE__ */ t(
-    m,
+  return /* @__PURE__ */ t(P, { onEvent: s, children: /* @__PURE__ */ t(
+    u,
     {
-      payrolls: r.map(S),
+      payrolls: e.map(S),
       paySchedules: a,
       onRunPayroll: p
     }
   ) });
 };
 export {
-  D as PayrollList
+  x 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 { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { PayrollType } from './types'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst selectPayrollType = ({\n  external,\n  offCycle,\n}: Pick<Payroll, 'external' | 'offCycle'>): PayrollType =>\n  external ? 'External' : offCycle ? 'Off-Cycle' : 'Regular'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: selectPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList.map(createPayrollProjection)}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["selectPayrollType","external","offCycle","createPayrollProjection","p","PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","onRunPayroll","payrollId","componentEvents","jsx","BaseComponent","PayrollListPresentation"],"mappings":";;;;;;;;AAUA,MAAMA,IAAoB,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AACF,MACED,IAAW,aAAaC,IAAW,cAAc,WAE7CC,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaJ,EAAkBI,CAAC;AAClC,IAMaC,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB,iBAEpCG,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAT,EAAQU,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D;AACA,SACE,gBAAAE,EAACC,KAAc,SAAAZ,GACb,UAAA,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUT,EAAY,IAAIR,CAAuB;AAAA,MACjD,cAAcW;AAAA,MACd,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PayrollList.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollList.tsx"],"sourcesContent":["import { usePayrollsListSuspense } from '@gusto/embedded-api/react-query/payrollsList'\nimport { usePaySchedulesGetAllSuspense } from '@gusto/embedded-api/react-query/paySchedulesGetAll'\nimport { ProcessingStatuses } from '@gusto/embedded-api/models/operations/getv1companiescompanyidpayrolls'\nimport type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport { getPayrollType } from '../helpers'\nimport { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\nconst createPayrollProjection = (p: Payroll) => ({\n  ...p,\n  payrollType: getPayrollType(p),\n})\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent }: PayrollListBlockProps) => {\n  const { data: payrollsData } = usePayrollsListSuspense({\n    companyId,\n    processingStatuses: [ProcessingStatuses.Unprocessed],\n  })\n  const payrollList = payrollsData.payrollList!\n  const { data: paySchedulesData } = usePaySchedulesGetAllSuspense({\n    companyId,\n  })\n  const paySchedulesList = paySchedulesData.payScheduleList!\n\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <PayrollListPresentation\n        payrolls={payrollList.map(createPayrollProjection)}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["createPayrollProjection","p","getPayrollType","PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","onRunPayroll","payrollId","componentEvents","jsx","BaseComponent","PayrollListPresentation"],"mappings":";;;;;;;;;AAUA,MAAMA,IAA0B,CAACC,OAAgB;AAAA,EAC/C,GAAGA;AAAA,EACH,aAAaC,EAAeD,CAAC;AAC/B,IAMaE,IAAc,CAAC,EAAE,WAAAC,GAAW,SAAAC,QAAqC;AAC5E,QAAM,EAAE,MAAMC,EAAA,IAAiBC,EAAwB;AAAA,IACrD,WAAAH;AAAA,IACA,oBAAoB,CAACI,EAAmB,WAAW;AAAA,EAAA,CACpD,GACKC,IAAcH,EAAa,aAC3B,EAAE,MAAMI,EAAA,IAAqBC,EAA8B;AAAA,IAC/D,WAAAP;AAAA,EAAA,CACD,GACKQ,IAAmBF,EAAiB,iBAEpCG,IAAe,CAAC,EAAE,WAAAC,QAAuC;AAC7D,IAAAT,EAAQU,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D;AACA,SACE,gBAAAE,EAACC,KAAc,SAAAZ,GACb,UAAA,gBAAAW;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUT,EAAY,IAAIT,CAAuB;AAAA,MACjD,cAAcY;AAAA,MACd,cAAAC;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,94 +1,102 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useTranslation as p } from "react-i18next";
-import { Flex as f } from "../../Common/Flex/Flex.js";
-import { useComponentContext as D } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { useTranslation as D } from "react-i18next";
+import { Flex as l } from "../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../shared/constants.js";
+import { useComponentContext as g } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as L } from "../../../i18n/I18n.js";
-import { parseDateStringToLocal as l } from "../../../helpers/dateFormatting.js";
-import { useLocale as g } from "../../../contexts/LocaleProvider/useLocale.js";
-import { DataView as b } from "../../Common/DataView/DataView.js";
-const j = ({
-  onRunPayroll: c,
+import { parseDateStringToLocal as s } from "../../../helpers/dateFormatting.js";
+import { useLocale as b } from "../../../contexts/LocaleProvider/useLocale.js";
+import { DataView as x } from "../../Common/DataView/DataView.js";
+const B = ({
+  onRunPayroll: m,
   payrolls: d,
-  paySchedules: i
+  paySchedules: c
 }) => {
-  const { Badge: m, Button: u, Text: o } = D();
+  const { Badge: u, Button: h, Heading: p, Text: n } = g();
   L("Payroll.PayrollList");
-  const { t } = p("Payroll.PayrollList"), { locale: a } = g();
-  return /* @__PURE__ */ r(
-    b,
-    {
-      columns: [
-        {
-          render: ({ payPeriod: e }) => {
-            const h = l(e.startDate)?.toLocaleDateString(
-              a,
-              {
+  const { t } = D("Payroll.PayrollList"), { locale: a } = b();
+  return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ r(
+      l,
+      {
+        flexDirection: { base: "column", medium: "row" },
+        justifyContent: "space-between",
+        alignItems: "flex-start",
+        gap: { base: 12, medium: 24 },
+        children: /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(p, { as: "h2", children: t("title") }) })
+      }
+    ),
+    /* @__PURE__ */ r(
+      x,
+      {
+        columns: [
+          {
+            render: ({ payPeriod: e }) => {
+              const y = e?.startDate ? s(e.startDate)?.toLocaleDateString(a, {
                 month: "short",
                 day: "numeric"
-              }
-            ), y = l(e.endDate)?.toLocaleDateString(
-              a,
-              {
+              }) : null, f = e?.endDate ? s(e.endDate)?.toLocaleDateString(a, {
                 month: "short",
                 day: "numeric",
                 year: "numeric"
-              }
-            );
-            return /* @__PURE__ */ s(f, { flexDirection: "column", gap: 0, children: [
-              /* @__PURE__ */ s(o, { children: [
-                h,
-                " - ",
-                y
-              ] }),
-              /* @__PURE__ */ r(o, { variant: "supporting", children: i.find((n) => n.uuid === e?.payScheduleUuid)?.name || i.find((n) => n.uuid === e?.payScheduleUuid)?.customName })
-            ] });
+              }) : null;
+              return /* @__PURE__ */ i(l, { flexDirection: "column", gap: 0, children: [
+                /* @__PURE__ */ i(n, { children: [
+                  y,
+                  " - ",
+                  f
+                ] }),
+                /* @__PURE__ */ r(n, { variant: "supporting", children: c.find((o) => o.uuid === e?.payScheduleUuid)?.name || c.find((o) => o.uuid === e?.payScheduleUuid)?.customName })
+              ] });
+            },
+            title: t("tableHeaders.0")
           },
-          title: t("tableHeaders.0")
-        },
-        {
-          render: ({ payrollType: e }) => /* @__PURE__ */ r(o, { children: t(`type.${e}`) }),
-          title: t("tableHeaders.1")
-        },
-        {
-          render: ({ checkDate: e }) => /* @__PURE__ */ r(o, { children: l(e)?.toLocaleDateString(a, {
-            weekday: "short",
-            month: "short",
-            day: "numeric",
-            year: "numeric"
-          }) }),
-          title: t("tableHeaders.2")
-        },
-        {
-          title: t("tableHeaders.3"),
-          render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(o, { children: e?.toLocaleDateString(a, {
-            weekday: "short",
-            month: "short",
-            day: "numeric",
-            year: "numeric"
-          }) })
-        },
-        {
-          title: t("tableHeaders.4"),
-          render: ({ processed: e }) => /* @__PURE__ */ r(m, { children: t(e ? "status.processed" : "status.unprocessed") })
-        }
-      ],
-      data: d,
-      label: t("payrollsListLabel"),
-      itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
-        u,
-        {
-          onClick: () => {
-            c({ payrollId: e });
+          {
+            render: ({ payrollType: e }) => /* @__PURE__ */ r(n, { children: t(`type.${e}`) }),
+            title: t("tableHeaders.1")
           },
-          title: t("runPayrollTitle"),
-          variant: "secondary",
-          children: t("runPayrollTitle")
-        }
-      )
-    }
-  );
+          {
+            render: ({ checkDate: e }) => /* @__PURE__ */ r(n, { children: e ? s(e)?.toLocaleDateString(a, {
+              weekday: "short",
+              month: "short",
+              day: "numeric",
+              year: "numeric"
+            }) : null }),
+            title: t("tableHeaders.2")
+          },
+          {
+            title: t("tableHeaders.3"),
+            render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(n, { children: e?.toLocaleDateString(a, {
+              weekday: "short",
+              month: "short",
+              day: "numeric",
+              year: "numeric"
+            }) })
+          },
+          {
+            title: t("tableHeaders.4"),
+            render: ({ processed: e }) => /* @__PURE__ */ r(u, { children: t(e ? "status.processed" : "status.unprocessed") })
+          }
+        ],
+        data: d,
+        label: t("payrollsListLabel"),
+        itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
+          h,
+          {
+            onClick: () => {
+              m({ payrollId: e });
+            },
+            title: t("runPayrollTitle"),
+            variant: "secondary",
+            children: t("runPayrollTitle")
+          }
+        )
+      }
+    )
+  ] });
 };
 export {
-  j as PayrollListPresentation
+  B as PayrollListPresentation
 };
 //# sourceMappingURL=PayrollListPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useTranslation } from 'react-i18next'\nimport type { PayrollType } from './types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n\n  return (\n    <DataView\n      columns={[\n        {\n          render: ({ payPeriod }) => {\n            const startDate = parseDateStringToLocal(payPeriod!.startDate!)?.toLocaleDateString(\n              locale,\n              {\n                month: 'short',\n                day: 'numeric',\n              },\n            )\n\n            const endDate = parseDateStringToLocal(payPeriod!.endDate!)?.toLocaleDateString(\n              locale,\n              {\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              },\n            )\n\n            return (\n              <Flex flexDirection=\"column\" gap={0}>\n                <Text>\n                  {startDate} - {endDate}\n                </Text>\n                <Text variant=\"supporting\">\n                  {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                    ?.name ||\n                    paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                      ?.customName}\n                </Text>\n              </Flex>\n            )\n          },\n          title: t('tableHeaders.0'),\n        },\n        {\n          render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n          title: t('tableHeaders.1'),\n        },\n        {\n          render: ({ checkDate }) => (\n            <Text>\n              {parseDateStringToLocal(checkDate!)?.toLocaleDateString(locale, {\n                weekday: 'short',\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              })}\n            </Text>\n          ),\n          title: t('tableHeaders.2'),\n        },\n        {\n          title: t('tableHeaders.3'),\n          render: ({ payrollDeadline }) => (\n            <Text>\n              {payrollDeadline?.toLocaleDateString(locale, {\n                weekday: 'short',\n                month: 'short',\n                day: 'numeric',\n                year: 'numeric',\n              })}\n            </Text>\n          ),\n        },\n        {\n          title: t('tableHeaders.4'),\n          render: ({ processed }) => (\n            <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n          ),\n        },\n      ]}\n      data={payrolls}\n      label={t('payrollsListLabel')}\n      itemMenu={({ payrollUuid }) => (\n        <Button\n          onClick={() => {\n            onRunPayroll({ payrollId: payrollUuid! })\n          }}\n          title={t('runPayrollTitle')}\n          variant=\"secondary\"\n        >\n          {t('runPayrollTitle')}\n        </Button>\n      )}\n    />\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Text","useComponentContext","useI18n","useTranslation","locale","useLocale","jsx","DataView","payPeriod","startDate","parseDateStringToLocal","endDate","jsxs","Flex","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid"],"mappings":"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"}
+{"version":3,"file":"PayrollListPresentation.js","sources":["../../../../src/components/Payroll/PayrollList/PayrollListPresentation.tsx"],"sourcesContent":["import type { Payroll } from '@gusto/embedded-api/models/components/payroll'\nimport type { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist'\nimport { useTranslation } from 'react-i18next'\nimport type { PayrollType } from './types'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider'\n\ninterface PresentationPayroll extends Payroll {\n  payrollType: PayrollType\n}\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: PresentationPayroll[]\n  paySchedules: PayScheduleList[]\n}\n\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n  paySchedules,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Heading, Text } = useComponentContext()\n  useI18n('Payroll.PayrollList')\n  const { t } = useTranslation('Payroll.PayrollList')\n  const { locale } = useLocale()\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Flex\n        flexDirection={{ base: 'column', medium: 'row' }}\n        justifyContent=\"space-between\"\n        alignItems=\"flex-start\"\n        gap={{ base: 12, medium: 24 }}\n      >\n        <Flex>\n          <Heading as=\"h2\">{t('title')}</Heading>\n        </Flex>\n      </Flex>\n\n      <DataView\n        columns={[\n          {\n            render: ({ payPeriod }) => {\n              const startDate = payPeriod?.startDate\n                ? parseDateStringToLocal(payPeriod.startDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                  })\n                : null\n\n              const endDate = payPeriod?.endDate\n                ? parseDateStringToLocal(payPeriod.endDate)?.toLocaleDateString(locale, {\n                    month: 'short',\n                    day: 'numeric',\n                    year: 'numeric',\n                  })\n                : null\n\n              return (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Text>\n                    {startDate} - {endDate}\n                  </Text>\n                  <Text variant=\"supporting\">\n                    {paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                      ?.name ||\n                      paySchedules.find(schedule => schedule.uuid === payPeriod?.payScheduleUuid)\n                        ?.customName}\n                  </Text>\n                </Flex>\n              )\n            },\n            title: t('tableHeaders.0'),\n          },\n          {\n            render: ({ payrollType }) => <Text>{t(`type.${payrollType}`)}</Text>,\n            title: t('tableHeaders.1'),\n          },\n          {\n            render: ({ checkDate }) => (\n              <Text>\n                {checkDate\n                  ? parseDateStringToLocal(checkDate)?.toLocaleDateString(locale, {\n                      weekday: 'short',\n                      month: 'short',\n                      day: 'numeric',\n                      year: 'numeric',\n                    })\n                  : null}\n              </Text>\n            ),\n            title: t('tableHeaders.2'),\n          },\n          {\n            title: t('tableHeaders.3'),\n            render: ({ payrollDeadline }) => (\n              <Text>\n                {payrollDeadline?.toLocaleDateString(locale, {\n                  weekday: 'short',\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </Text>\n            ),\n          },\n          {\n            title: t('tableHeaders.4'),\n            render: ({ processed }) => (\n              <Badge>{processed ? t('status.processed') : t('status.unprocessed')}</Badge>\n            ),\n          },\n        ]}\n        data={payrolls}\n        label={t('payrollsListLabel')}\n        itemMenu={({ payrollUuid }) => (\n          <Button\n            onClick={() => {\n              onRunPayroll({ payrollId: payrollUuid! })\n            }}\n            title={t('runPayrollTitle')}\n            variant=\"secondary\"\n          >\n            {t('runPayrollTitle')}\n          </Button>\n        )}\n      />\n    </Flex>\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","paySchedules","Badge","Button","Heading","Text","useComponentContext","useI18n","useTranslation","locale","useLocale","jsxs","Flex","jsx","DataView","payPeriod","startDate","parseDateStringToLocal","endDate","schedule","payrollType","checkDate","payrollDeadline","processed","payrollUuid"],"mappings":"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"}

package/dist/components/Payroll/PayrollOverview/PayrollOverview.d.ts

@@ -1,8 +1,10 @@
+import { PayrollFlowAlert } from '../PayrollFlow/PayrollFlowComponents';
 import { BaseComponentInterface } from '../../Base';
 interface PayrollOverviewProps extends BaseComponentInterface<'Payroll.PayrollOverview'> {
     companyId: string;
     payrollId: string;
+    alerts?: PayrollFlowAlert[];
 }
 export declare function PayrollOverview(props: PayrollOverviewProps): import("react/jsx-runtime").JSX.Element;
-export declare const Root: ({ companyId, payrollId, dictionary, onEvent }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ companyId, payrollId, dictionary, onEvent, alerts, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,56 +1,116 @@
-import { jsx as t } from "react/jsx-runtime";
-import { usePayrollsSubmitMutation as f } from "@gusto/embedded-api/react-query/payrollsSubmit";
-import { usePayrollsGetSuspense as P } from "@gusto/embedded-api/react-query/payrollsGet";
-import { useTranslation as d } from "react-i18next";
-import { useBankAccountsGetSuspense as v } from "@gusto/embedded-api/react-query/bankAccountsGet";
-import { useEmployeesListSuspense as w } from "@gusto/embedded-api/react-query/employeesList";
-import { PayrollOverviewPresentation as A } from "./PayrollOverviewPresentation.js";
-import { componentEvents as s } from "../../../shared/constants.js";
-import { BaseComponent as D } from "../../Base/Base.js";
-import "../../Base/useBase.js";
-import { useComponentDictionary as E, useI18n as S } from "../../../i18n/I18n.js";
-function G(o) {
-  return /* @__PURE__ */ t(D, { ...o, children: /* @__PURE__ */ t(b, { ...o, children: o.children }) });
+import { jsx as p } from "react/jsx-runtime";
+import { usePayrollsSubmitMutation as U } from "@gusto/embedded-api/react-query/payrollsSubmit";
+import { usePayrollsCancelMutation as h } from "@gusto/embedded-api/react-query/payrollsCancel";
+import { usePayrollsGetSuspense as B } from "@gusto/embedded-api/react-query/payrollsGet";
+import { useTranslation as N } from "react-i18next";
+import { useBankAccountsGetSuspense as T } from "@gusto/embedded-api/react-query/bankAccountsGet";
+import { useEmployeesListSuspense as Y } from "@gusto/embedded-api/react-query/employeesList";
+import { useState as q, useEffect as v } from "react";
+import { useGustoEmbeddedContext as k } from "@gusto/embedded-api/react-query/_context";
+import { payrollsGetPayStub as G } from "@gusto/embedded-api/funcs/payrollsGetPayStub";
+import { useErrorBoundary as j } from "react-error-boundary";
+import { PayrollOverviewPresentation as M } from "./PayrollOverviewPresentation.js";
+import { PAYROLL_PROCESSING_STATUS as c, componentEvents as n } from "../../../shared/constants.js";
+import { BaseComponent as F } from "../../Base/Base.js";
+import { useBase as W } from "../../Base/useBase.js";
+import { useComponentDictionary as H, useI18n as I } from "../../../i18n/I18n.js";
+import { readableStreamToBlob as V } from "../../../helpers/readableStreamToBlob.js";
+function ye(t) {
+  return /* @__PURE__ */ p(F, { ...t, children: /* @__PURE__ */ p(x, { ...t, children: t.children }) });
 }
-const b = ({ companyId: o, payrollId: e, dictionary: a, onEvent: r }) => {
-  E("Payroll.PayrollOverview", a), S("Payroll.PayrollOverview");
-  const { t: l } = d("Payroll.PayrollOverview"), { data: i } = P({
-    companyId: o,
-    payrollId: e,
-    include: ["taxes", "benefits", "deductions"]
-  }), n = i.payrollShow, { data: c } = v({
-    companyId: o
-  }), m = c.companyBankAccounts?.[0], { data: u } = w({
-    companyId: o
-  }), { mutateAsync: p } = f();
-  if (!n.calculatedAt)
-    throw new Error(l("alerts.payrollNotCalculated"));
-  return /* @__PURE__ */ t(
-    A,
+const x = ({
+  companyId: t,
+  payrollId: l,
+  dictionary: R,
+  onEvent: s,
+  alerts: d
+}) => {
+  H("Payroll.PayrollOverview", R), I("Payroll.PayrollOverview");
+  const { baseSubmitHandler: P } = W(), { t: f } = N("Payroll.PayrollOverview"), [a, u] = q(!1), { showBoundary: b } = j(), { data: m } = B(
+    {
+      companyId: t,
+      payrollId: l,
+      include: ["taxes", "benefits", "deductions"]
+    },
+    { refetchInterval: a ? 5e3 : !1 }
+  ), r = m.payrollShow;
+  v(() => {
+    r.processingRequest?.status === c.submitting && !a && u(!0), a && r.processingRequest?.status === c.submit_success && (s(n.RUN_PAYROLL_PROCESSED), u(!1)), a && r.processingRequest?.status === c.processing_failed && (s(n.RUN_PAYROLL_PROCESSING_FAILED), u(!1));
+  }, [r.processingRequest?.status, a, s]);
+  const { data: w } = T({
+    companyId: t
+  }), L = w.companyBankAccounts?.[0], { data: S } = Y({
+    companyId: t
+  }), { mutateAsync: _, isPending: E } = U(), { mutateAsync: A, isPending: O } = h();
+  if (!r.calculatedAt)
+    throw new Error(f("alerts.payrollNotCalculated"));
+  const C = k(), g = r.employeeCompensations?.reduce(
+    (o, i) => (i.taxes?.forEach((e) => {
+      o[e.name] = {
+        employee: (o[e.name]?.employee ?? 0) + (e.employer ? 0 : e.amount),
+        employer: (o[e.name]?.employer ?? 0) + (e.employer ? e.amount : 0)
+      };
+    }), o),
+    {}
+  ) || {};
+  return /* @__PURE__ */ p(
+    M,
     {
       onEdit: () => {
-        r(s.RUN_PAYROLL_EDITED);
+        s(n.RUN_PAYROLL_EDIT);
       },
       onSubmit: async () => {
-        const y = await p({
-          request: {
-            companyId: o,
-            payrollId: e,
-            requestBody: {
-              submissionBlockers: []
+        await P(m, async () => {
+          const o = await _({
+            request: {
+              companyId: t,
+              payrollId: l,
+              requestBody: {
+                submissionBlockers: []
+              }
+            }
+          });
+          s(n.RUN_PAYROLL_SUBMITTED, o), u(!0);
+        });
+      },
+      onCancel: async () => {
+        await P(m, async () => {
+          const o = await A({
+            request: {
+              companyId: t,
+              payrollId: l
             }
-          }
+          });
+          s(n.RUN_PAYROLL_CANCELLED, o);
         });
-        r(s.RUN_PAYROLL_SUBMITTED, y);
       },
-      payrollData: n,
-      bankAccount: m,
-      employeeDetails: u.showEmployees || []
+      onPayrollReceipt: () => {
+        s(n.RUN_PAYROLL_RECEIPT_GET, { payrollId: l });
+      },
+      onPaystubDownload: async (o) => {
+        const i = window.open("", "_blank");
+        try {
+          const e = await G(C, { payrollId: l, employeeId: o });
+          if (!e.value?.responseStream)
+            throw new Error(f("alerts.paystubPdfError"));
+          const D = await V(e.value.responseStream, "application/pdf"), y = URL.createObjectURL(D);
+          i && (i.location.href = y), s(n.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId: o }), URL.revokeObjectURL(y);
+        } catch (e) {
+          i && i.close(), b(e);
+        }
+      },
+      isSubmitting: E || a || O,
+      isProcessed: r.processingRequest?.status === c.submit_success,
+      payrollData: r,
+      bankAccount: L,
+      employeeDetails: S.showEmployees || [],
+      taxes: g,
+      alerts: d
     }
   );
 };
 export {
-  G as PayrollOverview,
-  b as Root
+  ye as PayrollOverview,
+  x as Root
 };
 //# sourceMappingURL=PayrollOverview.js.map