@gusto/embedded-react-sdk 0.13.2 → 0.13.4

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollOverview.js","sources":["../../../../src/components/Payroll/PayrollOverview/PayrollOverview.tsx"],"sourcesContent":["import { usePayrollsSubmitMutation } from '@gusto/embedded-api/react-query/payrollsSubmit'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { useTranslation } from 'react-i18next'\nimport { useBankAccountsGetSuspense } from '@gusto/embedded-api/react-query/bankAccountsGet'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { PayrollOverviewPresentation } from './PayrollOverviewPresentation'\nimport { componentEvents } from '@/shared/constants'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollOverviewProps extends BaseComponentInterface<'Payroll.PayrollOverview'> {\n  companyId: string\n  payrollId: string\n}\n\nexport function PayrollOverview(props: PayrollOverviewProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({ companyId, payrollId, dictionary, onEvent }: PayrollOverviewProps) => {\n  useComponentDictionary('Payroll.PayrollOverview', dictionary)\n  useI18n('Payroll.PayrollOverview')\n  const { t } = useTranslation('Payroll.PayrollOverview')\n\n  const { data } = usePayrollsGetSuspense({\n    companyId,\n    payrollId: payrollId,\n    include: ['taxes', 'benefits', 'deductions'],\n  })\n  const payrollData = data.payrollShow!\n\n  const { data: bankAccountData } = useBankAccountsGetSuspense({\n    companyId,\n  })\n  const bankAccount = bankAccountData.companyBankAccounts?.[0]\n\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { mutateAsync } = usePayrollsSubmitMutation()\n\n  if (!payrollData.calculatedAt) {\n    throw new Error(t('alerts.payrollNotCalculated'))\n  }\n\n  const onEdit = () => {\n    onEvent(componentEvents.RUN_PAYROLL_EDITED)\n  }\n  const onSubmit = async () => {\n    const result = await mutateAsync({\n      request: {\n        companyId,\n        payrollId,\n        requestBody: {\n          submissionBlockers: [],\n        },\n      },\n    })\n    onEvent(componentEvents.RUN_PAYROLL_SUBMITTED, result)\n  }\n  return (\n    <PayrollOverviewPresentation\n      onEdit={onEdit}\n      onSubmit={onSubmit}\n      payrollData={payrollData}\n      bankAccount={bankAccount}\n      employeeDetails={employeeData.showEmployees || []}\n    />\n  )\n}\n"],"names":["PayrollOverview","props","jsx","BaseComponent","Root","companyId","payrollId","dictionary","onEvent","useComponentDictionary","useI18n","t","useTranslation","data","usePayrollsGetSuspense","payrollData","bankAccountData","useBankAccountsGetSuspense","bankAccount","employeeData","useEmployeesListSuspense","mutateAsync","usePayrollsSubmitMutation","PayrollOverviewPresentation","componentEvents","result"],"mappings":";;;;;;;;;;;AAeO,SAASA,EAAgBC,GAA6B;AAC3D,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC,EAAE,WAAAC,GAAW,WAAAC,GAAW,YAAAC,GAAY,SAAAC,QAAoC;AAC3F,EAAAC,EAAuB,2BAA2BF,CAAU,GAC5DG,EAAQ,yBAAyB;AACjC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,yBAAyB,GAEhD,EAAE,MAAAC,EAAA,IAASC,EAAuB;AAAA,IACtC,WAAAT;AAAA,IACA,WAAAC;AAAA,IACA,SAAS,CAAC,SAAS,YAAY,YAAY;AAAA,EAAA,CAC5C,GACKS,IAAcF,EAAK,aAEnB,EAAE,MAAMG,EAAA,IAAoBC,EAA2B;AAAA,IAC3D,WAAAZ;AAAA,EAAA,CACD,GACKa,IAAcF,EAAgB,sBAAsB,CAAC,GAErD,EAAE,MAAMG,EAAA,IAAiBC,EAAyB;AAAA,IACtD,WAAAf;AAAA,EAAA,CACD,GAEK,EAAE,aAAAgB,EAAA,IAAgBC,EAAA;AAExB,MAAI,CAACP,EAAY;AACf,UAAM,IAAI,MAAMJ,EAAE,6BAA6B,CAAC;AAkBlD,SACE,gBAAAT;AAAA,IAACqB;AAAA,IAAA;AAAA,MACC,QAjBW,MAAM;AACnB,QAAAf,EAAQgB,EAAgB,kBAAkB;AAAA,MAC5C;AAAA,MAgBI,UAfa,YAAY;AAC3B,cAAMC,IAAS,MAAMJ,EAAY;AAAA,UAC/B,SAAS;AAAA,YACP,WAAAhB;AAAA,YACA,WAAAC;AAAA,YACA,aAAa;AAAA,cACX,oBAAoB,CAAA;AAAA,YAAC;AAAA,UACvB;AAAA,QACF,CACD;AACD,QAAAE,EAAQgB,EAAgB,uBAAuBC,CAAM;AAAA,MACvD;AAAA,MAKI,aAAAV;AAAA,MACA,aAAAG;AAAA,MACA,iBAAiBC,EAAa,iBAAiB,CAAA;AAAA,IAAC;AAAA,EAAA;AAGtD;"}
+{"version":3,"file":"PayrollOverview.js","sources":["../../../../src/components/Payroll/PayrollOverview/PayrollOverview.tsx"],"sourcesContent":["import { usePayrollsSubmitMutation } from '@gusto/embedded-api/react-query/payrollsSubmit'\nimport { usePayrollsCancelMutation } from '@gusto/embedded-api/react-query/payrollsCancel'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { useTranslation } from 'react-i18next'\nimport { useBankAccountsGetSuspense } from '@gusto/embedded-api/react-query/bankAccountsGet'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { useEffect, useState } from 'react'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api/react-query/_context'\nimport { payrollsGetPayStub } from '@gusto/embedded-api/funcs/payrollsGetPayStub'\nimport { useErrorBoundary } from 'react-error-boundary'\nimport type { PayrollFlowAlert } from '../PayrollFlow/PayrollFlowComponents'\nimport { PayrollOverviewPresentation } from './PayrollOverviewPresentation'\nimport { componentEvents, PAYROLL_PROCESSING_STATUS } from '@/shared/constants'\nimport { BaseComponent, useBase, type BaseComponentInterface } from '@/components/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { readableStreamToBlob } from '@/helpers/readableStreamToBlob'\n\ninterface PayrollOverviewProps extends BaseComponentInterface<'Payroll.PayrollOverview'> {\n  companyId: string\n  payrollId: string\n  alerts?: PayrollFlowAlert[]\n}\n\nexport function PayrollOverview(props: PayrollOverviewProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  companyId,\n  payrollId,\n  dictionary,\n  onEvent,\n  alerts,\n}: PayrollOverviewProps) => {\n  useComponentDictionary('Payroll.PayrollOverview', dictionary)\n  useI18n('Payroll.PayrollOverview')\n  const { baseSubmitHandler } = useBase()\n  const { t } = useTranslation('Payroll.PayrollOverview')\n  const [isPolling, setIsPolling] = useState(false)\n  const { showBoundary } = useErrorBoundary()\n\n  const { data } = usePayrollsGetSuspense(\n    {\n      companyId,\n      payrollId: payrollId,\n      include: ['taxes', 'benefits', 'deductions'],\n    },\n    { refetchInterval: isPolling ? 5_000 : false },\n  )\n  const payrollData = data.payrollShow!\n\n  useEffect(() => {\n    // Start polling when payroll is submitting and not already polling\n    if (\n      payrollData.processingRequest?.status === PAYROLL_PROCESSING_STATUS.submitting &&\n      !isPolling\n    ) {\n      setIsPolling(true)\n    }\n    // Stop polling and emit event when payroll is processed successfully\n    if (\n      isPolling &&\n      payrollData.processingRequest?.status === PAYROLL_PROCESSING_STATUS.submit_success\n    ) {\n      onEvent(componentEvents.RUN_PAYROLL_PROCESSED)\n      setIsPolling(false)\n    }\n    // If we are polling and payroll is in failed state, stop polling, and emit failure event\n    if (\n      isPolling &&\n      payrollData.processingRequest?.status === PAYROLL_PROCESSING_STATUS.processing_failed\n    ) {\n      onEvent(componentEvents.RUN_PAYROLL_PROCESSING_FAILED)\n      setIsPolling(false)\n    }\n  }, [payrollData.processingRequest?.status, isPolling, onEvent])\n\n  const { data: bankAccountData } = useBankAccountsGetSuspense({\n    companyId,\n  })\n  const bankAccount = bankAccountData.companyBankAccounts?.[0]\n\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { mutateAsync: submitPayroll, isPending } = usePayrollsSubmitMutation()\n\n  const { mutateAsync: cancelPayroll, isPending: isPendingCancel } = usePayrollsCancelMutation()\n\n  if (!payrollData.calculatedAt) {\n    throw new Error(t('alerts.payrollNotCalculated'))\n  }\n  const gustoEmbedded = useGustoEmbeddedContext()\n\n  const taxes =\n    payrollData.employeeCompensations?.reduce(\n      (acc, compensation) => {\n        compensation.taxes?.forEach(tax => {\n          acc[tax.name] = {\n            employee: (acc[tax.name]?.employee ?? 0) + (tax.employer ? 0 : tax.amount),\n            employer: (acc[tax.name]?.employer ?? 0) + (tax.employer ? tax.amount : 0),\n          }\n        })\n\n        return acc\n      },\n      {} as Record<string, { employee: number; employer: number }>,\n    ) || {}\n\n  const onEdit = () => {\n    onEvent(componentEvents.RUN_PAYROLL_EDIT)\n  }\n  const onCancel = async () => {\n    await baseSubmitHandler(data, async () => {\n      const result = await cancelPayroll({\n        request: {\n          companyId,\n          payrollId,\n        },\n      })\n      onEvent(componentEvents.RUN_PAYROLL_CANCELLED, result)\n    })\n  }\n  const onPayrollReceipt = () => {\n    onEvent(componentEvents.RUN_PAYROLL_RECEIPT_GET, { payrollId })\n  }\n\n  const onPaystubDownload = async (employeeId: string) => {\n    // Open a blank window *synchronously* with the click\n    const newWindow = window.open('', '_blank')\n\n    try {\n      // Fetch the PDF from your API\n      const response = await payrollsGetPayStub(gustoEmbedded, { payrollId, employeeId })\n      if (!response.value?.responseStream) {\n        throw new Error(t('alerts.paystubPdfError'))\n      }\n      const pdfBlob = await readableStreamToBlob(response.value.responseStream, 'application/pdf')\n\n      const url = URL.createObjectURL(pdfBlob)\n\n      // Load the PDF into the new window\n      if (newWindow) {\n        newWindow.location.href = url\n      }\n      onEvent(componentEvents.RUN_PAYROLL_PDF_PAYSTUB_VIEWED, { employeeId })\n      URL.revokeObjectURL(url) // Clean up the URL object after use\n    } catch (err) {\n      if (newWindow) {\n        newWindow.close()\n      }\n      showBoundary(err)\n    }\n  }\n  const onSubmit = async () => {\n    await baseSubmitHandler(data, async () => {\n      const result = await submitPayroll({\n        request: {\n          companyId,\n          payrollId,\n          requestBody: {\n            submissionBlockers: [],\n          },\n        },\n      })\n      onEvent(componentEvents.RUN_PAYROLL_SUBMITTED, result)\n      setIsPolling(true)\n    })\n  }\n  return (\n    <PayrollOverviewPresentation\n      onEdit={onEdit}\n      onSubmit={onSubmit}\n      onCancel={onCancel}\n      onPayrollReceipt={onPayrollReceipt}\n      onPaystubDownload={onPaystubDownload}\n      isSubmitting={isPending || isPolling || isPendingCancel}\n      isProcessed={\n        payrollData.processingRequest?.status === PAYROLL_PROCESSING_STATUS.submit_success\n      }\n      payrollData={payrollData}\n      bankAccount={bankAccount}\n      employeeDetails={employeeData.showEmployees || []}\n      taxes={taxes}\n      alerts={alerts}\n    />\n  )\n}\n"],"names":["PayrollOverview","props","jsx","BaseComponent","Root","companyId","payrollId","dictionary","onEvent","alerts","useComponentDictionary","useI18n","baseSubmitHandler","useBase","t","useTranslation","isPolling","setIsPolling","useState","showBoundary","useErrorBoundary","data","usePayrollsGetSuspense","payrollData","useEffect","PAYROLL_PROCESSING_STATUS","componentEvents","bankAccountData","useBankAccountsGetSuspense","bankAccount","employeeData","useEmployeesListSuspense","submitPayroll","isPending","usePayrollsSubmitMutation","cancelPayroll","isPendingCancel","usePayrollsCancelMutation","gustoEmbedded","useGustoEmbeddedContext","taxes","acc","compensation","tax","PayrollOverviewPresentation","result","employeeId","newWindow","response","payrollsGetPayStub","pdfBlob","readableStreamToBlob","url","err"],"mappings":"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"}

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

@@ -1,12 +1,23 @@
 import { PayrollShow } from '@gusto/embedded-api/models/components/payrollshow';
 import { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount';
 import { Employee } from '@gusto/embedded-api/models/components/employee';
+import { PayrollFlowAlert } from '../PayrollFlow/PayrollFlowComponents';
 interface PayrollOverviewProps {
     payrollData: PayrollShow;
     bankAccount?: CompanyBankAccount;
     employeeDetails: Employee[];
+    taxes: Record<string, {
+        employee: number;
+        employer: number;
+    }>;
+    isSubmitting?: boolean;
+    isProcessed: boolean;
+    alerts?: PayrollFlowAlert[];
     onEdit: () => void;
     onSubmit: () => void;
+    onCancel: () => void;
+    onPayrollReceipt: () => void;
+    onPaystubDownload: (employeeId: string) => void;
 }
-export declare const PayrollOverviewPresentation: ({ onEdit, onSubmit, employeeDetails, payrollData, bankAccount, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollOverviewPresentation: ({ onEdit, onSubmit, onCancel, onPayrollReceipt, onPaystubDownload, employeeDetails, payrollData, bankAccount, taxes, isSubmitting, isProcessed, alerts, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,100 +1,124 @@
-import { jsx as r, jsxs as h } from "react/jsx-runtime";
-import { useTranslation as A } from "react-i18next";
-import { useState as R } from "react";
-import { Flex as E } from "../../Common/Flex/Flex.js";
-import { useComponentContext as B } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useI18n as I } from "../../../i18n/I18n.js";
-import { useLocale as j } from "../../../contexts/LocaleProvider/useLocale.js";
-import { parseDateStringToLocal as g } from "../../../helpers/dateFormatting.js";
-import W from "../../Common/hooks/useNumberFormatter.js";
-import { firstLastName as w } from "../../../helpers/formattedStrings.js";
-import { FlsaStatus as D, compensationTypeLabels as f } from "../../../shared/constants.js";
-import { DataView as T } from "../../Common/DataView/DataView.js";
-const X = ({
-  payPeriod: d,
-  locale: c,
-  t: u
+import { jsx as r, jsxs as d, Fragment as _ } from "react/jsx-runtime";
+import { useTranslation as K } from "react-i18next";
+import { useState as B } from "react";
+import { Flex as u } from "../../Common/Flex/Flex.js";
+import "classnames";
+import { FlsaStatus as R, compensationTypeLabels as D } from "../../../shared/constants.js";
+import { useComponentContext as Q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as ee } from "../../../i18n/I18n.js";
+import { useLocale as te } from "../../../contexts/LocaleProvider/useLocale.js";
+import { parseDateStringToLocal as p } from "../../../helpers/dateFormatting.js";
+import re from "../../Common/hooks/useNumberFormatter.js";
+import { firstLastName as S } from "../../../helpers/formattedStrings.js";
+import ae from "../../../assets/icons/download-cloud.svg.js";
+import { DataView as b } from "../../Common/DataView/DataView.js";
+const ne = ({
+  payPeriod: c,
+  locale: h,
+  t: f
 }) => {
-  if (d?.startDate && d.endDate) {
-    const o = g(d.startDate), b = g(d.endDate);
-    if (o && b) {
-      const H = o.toLocaleDateString(c, {
+  if (c?.startDate && c.endDate) {
+    const g = p(c.startDate), T = p(c.endDate);
+    if (g && T) {
+      const x = g.toLocaleDateString(h, {
         month: "long",
         day: "numeric"
-      }), p = b.toLocaleDateString(c, {
+      }), l = T.toLocaleDateString(h, {
         month: "short",
         day: "numeric",
         year: "numeric"
       });
-      return u("pageSubtitle", { startDate: H, endDate: p });
+      return f("pageSubtitle", { startDate: x, endDate: l });
     }
   }
-  return u("pageSubtitle", { startDate: "", endDate: "" });
-}, ae = ({
-  onEdit: d,
-  onSubmit: c,
-  employeeDetails: u,
-  payrollData: o,
-  bankAccount: b
+  return f("pageSubtitle", { startDate: "", endDate: "" });
+}, Te = ({
+  onEdit: c,
+  onSubmit: h,
+  onCancel: f,
+  onPayrollReceipt: g,
+  onPaystubDownload: T,
+  employeeDetails: x,
+  payrollData: l,
+  bankAccount: I,
+  taxes: L,
+  isSubmitting: E = !1,
+  isProcessed: P,
+  alerts: k
 }) => {
-  const { Alert: H, Button: p, Heading: C, Text: a, Tabs: v } = B();
-  I("Payroll.PayrollOverview");
-  const { locale: P } = j(), { t } = A("Payroll.PayrollOverview"), l = W("currency"), [F, O] = R("companyPays"), U = o.totals ? parseFloat(o.totals.grossPay) + parseFloat(o.totals.employerTaxes) + parseFloat(o.totals.reimbursements) + parseFloat(o.totals.benefits) : 0, _ = o.payrollStatusMeta?.expectedDebitTime ? g(o.payrollStatusMeta.expectedDebitTime) : o.payrollDeadline, L = (e) => e.taxes?.reduce(
-    (n, s) => s.employer ? n + s.amount : n,
+  const { Alert: Y, Button: H, ButtonIcon: j, Dialog: W, Heading: O, Text: a, Tabs: G } = Q();
+  ee("Payroll.PayrollOverview");
+  const { locale: m } = te(), { t } = K("Payroll.PayrollOverview"), o = re("currency"), [X, $] = B("companyPays"), [F, N] = B(!1), Z = l.totals ? parseFloat(l.totals.grossPay ?? "0") + parseFloat(l.totals.employerTaxes ?? "0") + parseFloat(l.totals.reimbursements ?? "0") + parseFloat(l.totals.benefits ?? "0") : 0, q = l.payrollStatusMeta?.expectedDebitTime ? p(l.payrollStatusMeta.expectedDebitTime) : l.payrollDeadline, M = (e) => e.taxes?.reduce(
+    (n, i) => i.employer ? n + i.amount : n,
     0
-  ) ?? 0, N = (e) => e.benefits?.reduce(
-    (n, s) => s.companyContribution ? n + s.companyContribution : n,
+  ) ?? 0, U = (e) => e.benefits?.reduce(
+    (n, i) => i.companyContribution ? n + i.companyContribution : n,
     0
-  ) ?? 0, S = (e) => e.fixedCompensations?.length ? parseFloat(
+  ) ?? 0, w = (e) => e.fixedCompensations?.length ? parseFloat(
     e.fixedCompensations.find(
-      (n) => n.name?.toLowerCase() === f.REIMBURSEMENT_NAME.toLowerCase()
+      (n) => n.name?.toLowerCase() === D.REIMBURSEMENT_NAME.toLowerCase()
     )?.amount || "0"
-  ) : 0, V = (e) => e.grossPay + S(e) + L(e) + N(e), i = new Map(u.map((e) => [e.uuid, e])), y = (e) => e.hourlyCompensations?.reduce(
-    (n, s) => {
-      if (typeof s.name > "u")
+  ) : 0, z = (e) => e.grossPay + w(e) + M(e) + U(e), s = new Map(x.map((e) => [e.uuid, e])), C = (e) => e.hourlyCompensations?.reduce(
+    (n, i) => {
+      if (typeof i.name > "u")
         return n;
-      const m = s.name.toLowerCase(), x = n[m] ?? 0;
-      return n[m] = x + parseFloat(s.hours || "0"), n;
+      const y = i.name.toLowerCase(), v = n[y] ?? 0;
+      return n[y] = v + parseFloat(i.hours || "0"), n;
     },
     {}
-  ) || {}, M = (e) => e.paidTimeOff?.reduce((n, s) => n + parseFloat(s.hours || "0"), 0) ?? 0, k = [
+  ) || {}, V = (e) => e.paidTimeOff?.reduce((n, i) => n + parseFloat(i.hours || "0"), 0) ?? 0, A = [
+    {
+      title: t("tableHeaders.employees"),
+      render: (e) => /* @__PURE__ */ r(a, { children: S({
+        first_name: s.get(e.employeeUuid)?.firstName,
+        last_name: s.get(e.employeeUuid)?.lastName
+      }) })
+    },
+    {
+      title: t("tableHeaders.grossPay"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay) })
+    },
+    {
+      title: t("tableHeaders.reimbursements"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(w(e)) })
+    },
+    {
+      title: t("tableHeaders.companyTaxes"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(M(e)) })
+    },
+    {
+      title: t("tableHeaders.companyBenefits"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(U(e)) })
+    },
+    {
+      title: t("tableHeaders.companyPays"),
+      render: (e) => /* @__PURE__ */ r(a, { children: o(z(e)) })
+    }
+  ];
+  P && A.push({
+    title: t("tableHeaders.paystub"),
+    render: (e) => /* @__PURE__ */ r(
+      j,
+      {
+        "aria-label": t("downloadPaystubLabel"),
+        variant: "tertiary",
+        onClick: () => {
+          e.employeeUuid && T(e.employeeUuid);
+        },
+        children: /* @__PURE__ */ r(ae, {})
+      }
+    )
+  });
+  const J = [
     {
       id: "companyPays",
       label: t("dataViews.companyPaysTab"),
       content: /* @__PURE__ */ r(
-        T,
+        b,
         {
-          label: t("dataViews.companyPaysTab"),
-          columns: [
-            {
-              title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
-              }) })
-            },
-            {
-              title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay) })
-            },
-            {
-              title: t("tableHeaders.reimbursements"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(S(e)) })
-            },
-            {
-              title: t("tableHeaders.companyTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(L(e)) })
-            },
-            {
-              title: t("tableHeaders.companyBenefits"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(N(e)) })
-            },
-            {
-              title: t("tableHeaders.companyPays"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(V(e)) })
-            }
-          ],
-          data: o.employeeCompensations
+          label: t("dataViews.companyPaysTable"),
+          columns: A,
+          data: l.employeeCompensations
         }
       )
     },
@@ -102,31 +126,31 @@ const X = ({
       id: "hoursWorked",
       label: t("dataViews.hoursWorkedTab"),
       content: /* @__PURE__ */ r(
-        T,
+        b,
         {
-          label: t("dataViews.hoursWorkedTab"),
+          label: t("dataViews.hoursWorkedTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
+              render: (e) => /* @__PURE__ */ r(a, { children: S({
+                first_name: s.get(e.employeeUuid)?.firstName,
+                last_name: s.get(e.employeeUuid)?.lastName
               }) })
             },
             {
               title: t("tableHeaders.compensationType"),
-              render: (e) => /* @__PURE__ */ r(a, { children: i.get(e.employeeUuid)?.jobs?.reduce((n, s) => {
-                if (s.primary) {
-                  const m = s.compensations?.find(
-                    (x) => x.uuid === s.currentCompensationUuid
+              render: (e) => /* @__PURE__ */ r(a, { children: s.get(e.employeeUuid)?.jobs?.reduce((n, i) => {
+                if (i.primary) {
+                  const y = i.compensations?.find(
+                    (v) => v.uuid === i.currentCompensationUuid
                   )?.flsaStatus;
-                  switch (m) {
-                    case D.EXEMPT:
+                  switch (y) {
+                    case R.EXEMPT:
                       return t("compensationTypeLabels.exempt");
-                    case D.NONEXEMPT:
+                    case R.NONEXEMPT:
                       return t("compensationTypeLabels.nonexempt");
                     default:
-                      return m ?? "";
+                      return y ?? "";
                   }
                 }
                 return n;
@@ -134,29 +158,29 @@ const X = ({
             },
             {
               title: t("tableHeaders.regular"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.REGULAR_HOURS_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.REGULAR_HOURS_NAME] || 0 })
             },
             {
               title: t("tableHeaders.overtime"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.OVERTIME_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.OVERTIME_NAME] || 0 })
             },
             {
               title: t("tableHeaders.doubleOT"),
-              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.DOUBLE_OVERTIME_NAME] || 0 })
+              render: (e) => /* @__PURE__ */ r(a, { children: C(e)[D.DOUBLE_OVERTIME_NAME] || 0 })
             },
             {
               title: t("tableHeaders.timeOff"),
-              render: (e) => /* @__PURE__ */ r(a, { children: M(e) })
+              render: (e) => /* @__PURE__ */ r(a, { children: V(e) })
             },
             {
               title: t("tableHeaders.totalHours"),
-              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(y(e)).reduce(
-                (n, s) => n + s,
+              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(C(e)).reduce(
+                (n, i) => n + i,
                 0
-              ) + M(e) })
+              ) + V(e) })
             }
           ],
-          data: o.employeeCompensations
+          data: l.employeeCompensations
         }
       )
     },
@@ -164,15 +188,15 @@ const X = ({
       id: "employeeTakeHome",
       label: t("dataViews.employeeTakeHomeTab"),
       content: /* @__PURE__ */ r(
-        T,
+        b,
         {
-          label: t("dataViews.employeeTakeHomeTab"),
+          label: t("dataViews.employeeTakeHomeTable"),
           columns: [
             {
               title: t("tableHeaders.employees"),
-              render: (e) => /* @__PURE__ */ r(a, { children: w({
-                first_name: i.get(e.employeeUuid)?.firstName,
-                last_name: i.get(e.employeeUuid)?.lastName
+              render: (e) => /* @__PURE__ */ r(a, { children: S({
+                first_name: s.get(e.employeeUuid)?.firstName,
+                last_name: s.get(e.employeeUuid)?.lastName
               }) })
             },
             {
@@ -181,82 +205,157 @@ const X = ({
             },
             {
               title: t("tableHeaders.grossPay"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay ?? 0) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(e.grossPay ?? 0) })
             },
             {
               title: t("tableHeaders.deductions"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.deductions?.reduce(
-                  (n, s) => n + s.amount,
+                  (n, i) => n + i.amount,
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.reimbursements"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(S(e)) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(w(e)) })
             },
             {
               title: t("tableHeaders.employeeTaxes"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.taxes?.reduce(
-                  (n, s) => s.employer ? n : n + s.amount,
+                  (n, i) => i.employer ? n : n + i.amount,
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.employeeBenefits"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(
+              render: (e) => /* @__PURE__ */ r(a, { children: o(
                 e.benefits?.reduce(
-                  (n, s) => n + (s.employeeDeduction ?? 0),
+                  (n, i) => n + (i.employeeDeduction ?? 0),
                   0
                 ) ?? 0
               ) })
             },
             {
               title: t("tableHeaders.payment"),
-              render: (e) => /* @__PURE__ */ r(a, { children: l(e.netPay ?? 0) })
+              render: (e) => /* @__PURE__ */ r(a, { children: o(e.netPay ?? 0) })
             }
           ],
-          data: o.employeeCompensations
+          data: l.employeeCompensations
         }
       )
+    },
+    {
+      id: "taxes",
+      label: t("dataViews.taxesTab"),
+      content: /* @__PURE__ */ d(u, { flexDirection: "column", gap: 32, children: [
+        /* @__PURE__ */ r(
+          b,
+          {
+            label: t("dataViews.taxesTable"),
+            columns: [
+              {
+                key: "taxDescription",
+                title: t("tableHeaders.taxDescription"),
+                render: (e) => /* @__PURE__ */ r(a, { children: e })
+              },
+              {
+                key: "byYourEmployees",
+                title: t("tableHeaders.byYourEmployees"),
+                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employee ?? 0) })
+              },
+              {
+                key: "byYourCompany",
+                title: t("tableHeaders.byYourCompany"),
+                render: (e) => /* @__PURE__ */ r(a, { children: o(L[e]?.employer ?? 0) })
+              }
+            ],
+            footer: () => ({
+              taxDescription: /* @__PURE__ */ r(a, { children: t("totalsLabel") }),
+              byYourEmployees: /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.employeeTaxes ?? "0")) }),
+              byYourCompany: /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.employerTaxes ?? "0")) })
+            }),
+            data: Object.keys(L)
+          }
+        ),
+        /* @__PURE__ */ r(
+          b,
+          {
+            label: t("dataViews.debitedTable"),
+            columns: [
+              {
+                title: t("tableHeaders.debitedByGusto"),
+                render: ({ label: e }) => /* @__PURE__ */ r(a, { children: e })
+              },
+              {
+                title: t("tableHeaders.taxesTotal"),
+                render: ({ value: e }) => /* @__PURE__ */ r(a, { children: o(parseFloat(e)) })
+              }
+            ],
+            data: [
+              { label: t("directDepositLabel"), value: l.totals?.netPayDebit || "0" },
+              {
+                label: t("reimbursementLabel"),
+                value: l.totals?.reimbursementDebit || "0"
+              },
+              {
+                label: t("garnishmentsLabel"),
+                value: l.totals?.childSupportDebit || "0"
+              },
+              { label: t("taxesLabel"), value: l.totals?.taxDebit || "0" }
+            ]
+          }
+        )
+      ] })
     }
   ];
-  return /* @__PURE__ */ h(E, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ h(E, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ h("div", { children: [
-        /* @__PURE__ */ r(C, { as: "h1", children: t("pageTitle") }),
-        /* @__PURE__ */ r(a, { children: X({ payPeriod: o.payPeriod, locale: P, t }) })
+  return /* @__PURE__ */ d(u, { flexDirection: "column", alignItems: "stretch", children: [
+    /* @__PURE__ */ d(u, { justifyContent: "space-between", children: [
+      /* @__PURE__ */ d("div", { children: [
+        /* @__PURE__ */ r(O, { as: "h1", children: t(P ? "summaryTitle" : "overviewTitle") }),
+        /* @__PURE__ */ r(a, { children: ne({ payPeriod: l.payPeriod, locale: m, t }) })
       ] }),
-      /* @__PURE__ */ h(E, { justifyContent: "flex-end", children: [
-        /* @__PURE__ */ r(p, { onClick: d, variant: "secondary", children: t("editCta") }),
-        /* @__PURE__ */ r(p, { onClick: c, children: t("submitCta") })
-      ] })
+      /* @__PURE__ */ r(u, { justifyContent: "flex-end", children: P ? /* @__PURE__ */ d(_, { children: [
+        /* @__PURE__ */ r(H, { onClick: g, variant: "secondary", children: t("payrollReceiptCta") }),
+        /* @__PURE__ */ r(
+          H,
+          {
+            onClick: () => {
+              N(!0);
+            },
+            variant: "error",
+            children: t("cancelCta")
+          }
+        )
+      ] }) : /* @__PURE__ */ d(_, { children: [
+        /* @__PURE__ */ r(H, { onClick: c, variant: "secondary", isDisabled: E, children: t("editCta") }),
+        /* @__PURE__ */ r(H, { onClick: h, isLoading: E, children: t("submitCta") })
+      ] }) })
     ] }),
-    /* @__PURE__ */ r(H, { label: t("alerts.progressSaved"), status: "success" }),
-    /* @__PURE__ */ r(C, { as: "h3", children: t("payrollSummaryTitle") }),
+    k?.length && /* @__PURE__ */ r(u, { flexDirection: "column", gap: 16, children: k.map((e, n) => /* @__PURE__ */ r(Y, { label: e.title, status: e.type, children: e.content ?? null }, `${e.type}-${e.title}`)) }),
+    /* @__PURE__ */ r(O, { as: "h3", children: t("payrollSummaryTitle") }),
     /* @__PURE__ */ r(
-      T,
+      b,
       {
         label: t("payrollSummaryLabel"),
         columns: [
           {
             title: t("tableHeaders.totalPayroll"),
-            render: () => /* @__PURE__ */ r(a, { children: l(U) })
+            render: () => /* @__PURE__ */ r(a, { children: o(Z) })
           },
           {
             title: t("tableHeaders.debitAmount"),
-            render: () => /* @__PURE__ */ r(a, { children: l(parseFloat(o.totals?.companyDebit ?? "0")) })
+            render: () => /* @__PURE__ */ r(a, { children: o(parseFloat(l.totals?.companyDebit ?? "0")) })
           },
           {
             title: t("tableHeaders.debitAccount"),
-            render: () => /* @__PURE__ */ r(a, { children: b?.hiddenAccountNumber ?? "" })
+            render: () => /* @__PURE__ */ r(a, { children: I?.hiddenAccountNumber ?? "" })
           },
           {
             title: t("tableHeaders.debitDate"),
-            render: () => /* @__PURE__ */ r(a, { children: _?.toLocaleString(P, {
+            render: () => /* @__PURE__ */ r(a, { children: q?.toLocaleString(m, {
               month: "short",
               day: "numeric",
               year: "numeric"
@@ -264,7 +363,7 @@ const X = ({
           },
           {
             title: t("tableHeaders.employeesPayDate"),
-            render: () => /* @__PURE__ */ r(a, { children: g(o.checkDate)?.toLocaleDateString(P, {
+            render: () => /* @__PURE__ */ r(a, { children: p(l.checkDate)?.toLocaleDateString(m, {
               month: "short",
               day: "numeric",
               year: "numeric"
@@ -275,17 +374,59 @@ const X = ({
       }
     ),
     /* @__PURE__ */ r(
-      v,
+      G,
       {
-        onSelectionChange: O,
-        selectedId: F,
+        onSelectionChange: $,
+        selectedId: X,
         "aria-label": t("dataViews.label"),
-        tabs: k
+        tabs: J
+      }
+    ),
+    F && /* @__PURE__ */ r(
+      W,
+      {
+        isOpen: F,
+        onClose: () => {
+          N(!1);
+        },
+        onPrimaryActionClick: f,
+        shouldCloseOnBackdropClick: !0,
+        primaryActionLabel: t("confirmCancelCta"),
+        isDestructive: !0,
+        closeActionLabel: t("declineCancelCta"),
+        title: t("cancelDialogTitle", {
+          startDate: p(
+            l.payPeriod?.startDate ?? ""
+          )?.toLocaleDateString(m, {
+            month: "long",
+            day: "numeric"
+          }),
+          endDate: p(
+            l.payPeriod?.endDate ?? ""
+          )?.toLocaleDateString(m, {
+            month: "long",
+            day: "numeric",
+            year: "numeric"
+          })
+        }),
+        children: /* @__PURE__ */ d(u, { gap: 14, flexDirection: "column", children: [
+          /* @__PURE__ */ r(a, { children: t("cancelDialogDescription") }),
+          /* @__PURE__ */ r(a, { children: t("cancelDialogDescriptionDeadline", {
+            deadline: (l.payrollDeadline ?? "").toLocaleString(m, {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+              hour: "numeric",
+              minute: "numeric",
+              timeZoneName: "short"
+            })
+          }) })
+        ] })
       }
     )
   ] });
 };
 export {
-  ae as PayrollOverviewPresentation
+  Te as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map