@gusto/embedded-react-sdk 0.13.0 → 0.13.2

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 { PayrollOverviewPresentation } from './PayrollOverviewPresentation'\nimport { componentEvents } from '@/shared/constants'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\n\ninterface PayrollOverviewProps extends BaseComponentInterface {\n  companyId: string\n  payrollId: string\n}\n\nexport const PayrollOverview = ({\n  companyId,\n  onEvent,\n  payrollId,\n  ...baseProps\n}: PayrollOverviewProps) => {\n  const { mutateAsync } = usePayrollsSubmitMutation()\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    <BaseComponent {...baseProps} onEvent={onEvent}>\n      <PayrollOverviewPresentation onEdit={onEdit} onSubmit={onSubmit} />\n    </BaseComponent>\n  )\n}\n"],"names":["PayrollOverview","companyId","onEvent","payrollId","baseProps","mutateAsync","usePayrollsSubmitMutation","jsx","BaseComponent","PayrollOverviewPresentation","componentEvents","result"],"mappings":";;;;;;AAUO,MAAMA,IAAkB,CAAC;AAAA,EAC9B,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAA4B;AAC1B,QAAM,EAAE,aAAAC,EAAA,IAAgBC,EAAA;AAiBxB,SACE,gBAAAC,EAACC,KAAe,GAAGJ,GAAW,SAAAF,GAC5B,UAAA,gBAAAK,EAACE,GAAA,EAA4B,QAjBlB,MAAM;AACnB,IAAAP,EAAQQ,EAAgB,kBAAkB;AAAA,EAC5C,GAeiD,UAdhC,YAAY;AAC3B,UAAMC,IAAS,MAAMN,EAAY;AAAA,MAC/B,SAAS;AAAA,QACP,WAAAJ;AAAA,QACA,WAAAE;AAAA,QACA,aAAa;AAAA,UACX,oBAAoB,CAAA;AAAA,QAAC;AAAA,MACvB;AAAA,IACF,CACD;AACD,IAAAD,EAAQQ,EAAgB,uBAAuBC,CAAM;AAAA,EACvD,EAGiD,CAAoB,EAAA,CACnE;AAEJ;"}
+{"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;"}

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

@@ -1,6 +1,12 @@
+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';
 interface PayrollOverviewProps {
+    payrollData: PayrollShow;
+    bankAccount?: CompanyBankAccount;
+    employeeDetails: Employee[];
     onEdit: () => void;
     onSubmit: () => void;
 }
-export declare const PayrollOverviewPresentation: ({ onEdit, onSubmit }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollOverviewPresentation: ({ onEdit, onSubmit, employeeDetails, payrollData, bankAccount, }: PayrollOverviewProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,71 +1,291 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { Flex as l } from "../../Common/Flex/Flex.js";
-import "classnames";
-import "../../../shared/constants.js";
-import "react-i18next";
-import { useComponentContext as m } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { DataView as s } from "../../Common/DataView/DataView.js";
-const x = ({ onEdit: a, onSubmit: d }) => {
-  const { Alert: i, Button: n, Heading: o, Text: t } = m();
-  return /* @__PURE__ */ r(l, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ r(l, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(o, { as: "h1", children: "Review payroll for Jul 5 - Jul 18, 2025" }),
-      /* @__PURE__ */ r(l, { justifyContent: "flex-end", children: [
-        /* @__PURE__ */ e(n, { title: "Edit", onClick: a, variant: "secondary", children: "Edit" }),
-        /* @__PURE__ */ e(n, { title: "Submit", onClick: d, children: "Submit" })
+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
+}) => {
+  if (d?.startDate && d.endDate) {
+    const o = g(d.startDate), b = g(d.endDate);
+    if (o && b) {
+      const H = o.toLocaleDateString(c, {
+        month: "long",
+        day: "numeric"
+      }), p = b.toLocaleDateString(c, {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+      });
+      return u("pageSubtitle", { startDate: H, endDate: p });
+    }
+  }
+  return u("pageSubtitle", { startDate: "", endDate: "" });
+}, ae = ({
+  onEdit: d,
+  onSubmit: c,
+  employeeDetails: u,
+  payrollData: o,
+  bankAccount: b
+}) => {
+  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,
+    0
+  ) ?? 0, N = (e) => e.benefits?.reduce(
+    (n, s) => s.companyContribution ? n + s.companyContribution : n,
+    0
+  ) ?? 0, S = (e) => e.fixedCompensations?.length ? parseFloat(
+    e.fixedCompensations.find(
+      (n) => n.name?.toLowerCase() === f.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")
+        return n;
+      const m = s.name.toLowerCase(), x = n[m] ?? 0;
+      return n[m] = x + parseFloat(s.hours || "0"), n;
+    },
+    {}
+  ) || {}, M = (e) => e.paidTimeOff?.reduce((n, s) => n + parseFloat(s.hours || "0"), 0) ?? 0, k = [
+    {
+      id: "companyPays",
+      label: t("dataViews.companyPaysTab"),
+      content: /* @__PURE__ */ r(
+        T,
+        {
+          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
+        }
+      )
+    },
+    {
+      id: "hoursWorked",
+      label: t("dataViews.hoursWorkedTab"),
+      content: /* @__PURE__ */ r(
+        T,
+        {
+          label: t("dataViews.hoursWorkedTab"),
+          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.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
+                  )?.flsaStatus;
+                  switch (m) {
+                    case D.EXEMPT:
+                      return t("compensationTypeLabels.exempt");
+                    case D.NONEXEMPT:
+                      return t("compensationTypeLabels.nonexempt");
+                    default:
+                      return m ?? "";
+                  }
+                }
+                return n;
+              }, "") })
+            },
+            {
+              title: t("tableHeaders.regular"),
+              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.REGULAR_HOURS_NAME] || 0 })
+            },
+            {
+              title: t("tableHeaders.overtime"),
+              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.OVERTIME_NAME] || 0 })
+            },
+            {
+              title: t("tableHeaders.doubleOT"),
+              render: (e) => /* @__PURE__ */ r(a, { children: y(e)[f.DOUBLE_OVERTIME_NAME] || 0 })
+            },
+            {
+              title: t("tableHeaders.timeOff"),
+              render: (e) => /* @__PURE__ */ r(a, { children: M(e) })
+            },
+            {
+              title: t("tableHeaders.totalHours"),
+              render: (e) => /* @__PURE__ */ r(a, { children: Object.values(y(e)).reduce(
+                (n, s) => n + s,
+                0
+              ) + M(e) })
+            }
+          ],
+          data: o.employeeCompensations
+        }
+      )
+    },
+    {
+      id: "employeeTakeHome",
+      label: t("dataViews.employeeTakeHomeTab"),
+      content: /* @__PURE__ */ r(
+        T,
+        {
+          label: t("dataViews.employeeTakeHomeTab"),
+          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.paymentType"),
+              render: (e) => /* @__PURE__ */ r(a, { children: e.paymentMethod ?? "" })
+            },
+            {
+              title: t("tableHeaders.grossPay"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(e.grossPay ?? 0) })
+            },
+            {
+              title: t("tableHeaders.deductions"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(
+                e.deductions?.reduce(
+                  (n, s) => n + s.amount,
+                  0
+                ) ?? 0
+              ) })
+            },
+            {
+              title: t("tableHeaders.reimbursements"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(S(e)) })
+            },
+            {
+              title: t("tableHeaders.employeeTaxes"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(
+                e.taxes?.reduce(
+                  (n, s) => s.employer ? n : n + s.amount,
+                  0
+                ) ?? 0
+              ) })
+            },
+            {
+              title: t("tableHeaders.employeeBenefits"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(
+                e.benefits?.reduce(
+                  (n, s) => n + (s.employeeDeduction ?? 0),
+                  0
+                ) ?? 0
+              ) })
+            },
+            {
+              title: t("tableHeaders.payment"),
+              render: (e) => /* @__PURE__ */ r(a, { children: l(e.netPay ?? 0) })
+            }
+          ],
+          data: o.employeeCompensations
+        }
+      )
+    }
+  ];
+  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 }) })
+      ] }),
+      /* @__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__ */ e(i, { label: "Your progress has been saved", status: "success" }),
-    /* @__PURE__ */ e(
-      i,
+    /* @__PURE__ */ r(H, { label: t("alerts.progressSaved"), status: "success" }),
+    /* @__PURE__ */ r(C, { as: "h3", children: t("payrollSummaryTitle") }),
+    /* @__PURE__ */ r(
+      T,
       {
-        label: "To pay your employees with direct deposit on Fri, Jul 25, you'll need to run payroll by 7:00 PM EDT on Wed, Jul 23",
-        status: "warning",
-        children: "If you miss this deadline, your employees' direct deposit will be delayed."
-      }
-    ),
-    /* @__PURE__ */ e(o, { as: "h3", children: "Payroll Summary" }),
-    /* @__PURE__ */ e(
-      s,
-      {
-        label: "Summary",
+        label: t("payrollSummaryLabel"),
         columns: [
           {
-            title: "Total payroll",
-            render: () => /* @__PURE__ */ e(t, { children: "$32,161.22" })
+            title: t("tableHeaders.totalPayroll"),
+            render: () => /* @__PURE__ */ r(a, { children: l(U) })
           },
           {
-            title: "Debit amount",
-            render: () => /* @__PURE__ */ e(t, { children: "$28,896.27" })
-          }
-        ],
-        data: [{}]
-      }
-    ),
-    /* @__PURE__ */ e(
-      s,
-      {
-        label: "Configuration",
-        columns: [
+            title: t("tableHeaders.debitAmount"),
+            render: () => /* @__PURE__ */ r(a, { children: l(parseFloat(o.totals?.companyDebit ?? "0")) })
+          },
           {
-            title: "Employees",
-            render: () => /* @__PURE__ */ e(t, { children: "John Smith" })
+            title: t("tableHeaders.debitAccount"),
+            render: () => /* @__PURE__ */ r(a, { children: b?.hiddenAccountNumber ?? "" })
           },
           {
-            title: "Gross Pay",
-            render: () => /* @__PURE__ */ e(t, { children: "$2,345.16" })
+            title: t("tableHeaders.debitDate"),
+            render: () => /* @__PURE__ */ r(a, { children: _?.toLocaleString(P, {
+              month: "short",
+              day: "numeric",
+              year: "numeric"
+            }) })
           },
           {
-            title: "Reimbursements",
-            render: () => /* @__PURE__ */ e(t, { children: "$0.00" })
+            title: t("tableHeaders.employeesPayDate"),
+            render: () => /* @__PURE__ */ r(a, { children: g(o.checkDate)?.toLocaleDateString(P, {
+              month: "short",
+              day: "numeric",
+              year: "numeric"
+            }) })
           }
         ],
         data: [{}]
       }
+    ),
+    /* @__PURE__ */ r(
+      v,
+      {
+        onSelectionChange: O,
+        selectedId: F,
+        "aria-label": t("dataViews.label"),
+        tabs: k
+      }
     )
   ] });
 };
 export {
-  x as PayrollOverviewPresentation
+  ae as PayrollOverviewPresentation
 };
 //# sourceMappingURL=PayrollOverviewPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollOverviewPresentation.js","sources":["../../../../src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx"],"sourcesContent":["import { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface PayrollOverviewProps {\n  onEdit: () => void\n  onSubmit: () => void\n}\n\nexport const PayrollOverviewPresentation = ({ onEdit, onSubmit }: PayrollOverviewProps) => {\n  const { Alert, Button, Heading, Text } = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"stretch\">\n      <Flex justifyContent=\"space-between\">\n        <Heading as=\"h1\">Review payroll for Jul 5 - Jul 18, 2025</Heading>\n        <Flex justifyContent=\"flex-end\">\n          <Button title=\"Edit\" onClick={onEdit} variant=\"secondary\">\n            Edit\n          </Button>\n          <Button title=\"Submit\" onClick={onSubmit}>\n            Submit\n          </Button>\n        </Flex>\n      </Flex>\n      <Alert label=\"Your progress has been saved\" status=\"success\"></Alert>\n      <Alert\n        label=\"To pay your employees with direct deposit on Fri, Jul 25, you'll need to run payroll by 7:00 PM EDT on Wed, Jul 23\"\n        status=\"warning\"\n      >\n        {\"If you miss this deadline, your employees' direct deposit will be delayed.\"}\n      </Alert>\n      <Heading as=\"h3\">Payroll Summary</Heading>\n      <DataView\n        label=\"Summary\"\n        columns={[\n          {\n            title: 'Total payroll',\n            render: () => <Text>$32,161.22</Text>,\n          },\n          {\n            title: 'Debit amount',\n            render: () => <Text>$28,896.27</Text>,\n          },\n        ]}\n        data={[{}]}\n      />\n      <DataView\n        label=\"Configuration\"\n        columns={[\n          {\n            title: 'Employees',\n            render: () => <Text>John Smith</Text>,\n          },\n          {\n            title: 'Gross Pay',\n            render: () => <Text>$2,345.16</Text>,\n          },\n          {\n            title: 'Reimbursements',\n            render: () => <Text>$0.00</Text>,\n          },\n        ]}\n        data={[{}]}\n      />\n    </Flex>\n  )\n}\n"],"names":["PayrollOverviewPresentation","onEdit","onSubmit","Alert","Button","Heading","Text","useComponentContext","jsxs","Flex","jsx","DataView"],"mappings":";;;;;;;AAQO,MAAMA,IAA8B,CAAC,EAAE,QAAAC,GAAQ,UAAAC,QAAqC;AACzF,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA;AAEzC,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,WACtC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,iBACnB,UAAA;AAAA,MAAA,gBAAAC,EAACL,GAAA,EAAQ,IAAG,MAAK,UAAA,2CAAuC;AAAA,MACxD,gBAAAG,EAACC,GAAA,EAAK,gBAAe,YACnB,UAAA;AAAA,QAAA,gBAAAC,EAACN,KAAO,OAAM,QAAO,SAASH,GAAQ,SAAQ,aAAY,UAAA,OAAA,CAE1D;AAAA,0BACCG,GAAA,EAAO,OAAM,UAAS,SAASF,GAAU,UAAA,SAAA,CAE1C;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAQ,EAACP,GAAA,EAAM,OAAM,gCAA+B,QAAO,WAAU;AAAA,IAC7D,gBAAAO;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,QAAO;AAAA,QAEN,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAO,EAACL,GAAA,EAAQ,IAAG,MAAK,UAAA,mBAAe;AAAA,IAChC,gBAAAK;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,UACP;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAD,EAACJ,GAAA,EAAK,UAAA,aAAA,CAAU;AAAA,UAAA;AAAA,UAEhC;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAI,EAACJ,GAAA,EAAK,UAAA,aAAA,CAAU;AAAA,UAAA;AAAA,QAChC;AAAA,QAEF,MAAM,CAAC,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IAEX,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,UACP;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAD,EAACJ,GAAA,EAAK,UAAA,aAAA,CAAU;AAAA,UAAA;AAAA,UAEhC;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAI,EAACJ,GAAA,EAAK,UAAA,YAAA,CAAS;AAAA,UAAA;AAAA,UAE/B;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAI,EAACJ,GAAA,EAAK,UAAA,QAAA,CAAK;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,MAAM,CAAC,CAAA,CAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACX,GACF;AAEJ;"}
+{"version":3,"file":"PayrollOverviewPresentation.js","sources":["../../../../src/components/Payroll/PayrollOverview/PayrollOverviewPresentation.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type {\n  EmployeeCompensations,\n  PayrollShow,\n} from '@gusto/embedded-api/models/components/payrollshow'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { TFunction } from 'i18next'\nimport type { CompanyBankAccount } from '@gusto/embedded-api/models/components/companybankaccount'\nimport { useState } from 'react'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { useLocale } from '@/contexts/LocaleProvider'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport useNumberFormatter from '@/components/Common/hooks/useNumberFormatter'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { compensationTypeLabels, FlsaStatus } from '@/shared/constants'\n\ninterface PayrollOverviewProps {\n  payrollData: PayrollShow\n  bankAccount?: CompanyBankAccount\n  employeeDetails: Employee[]\n  onEdit: () => void\n  onSubmit: () => void\n}\n\nconst getPayrollOverviewTitle = ({\n  payPeriod,\n  locale,\n  t,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n  t: TFunction<'Payroll.PayrollOverview'>\n}) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    const startDate = parseDateStringToLocal(payPeriod.startDate)\n    const endDate = parseDateStringToLocal(payPeriod.endDate)\n\n    if (startDate && endDate) {\n      const startFormatted = startDate.toLocaleDateString(locale, {\n        month: 'long',\n        day: 'numeric',\n      })\n      const endFormatted = endDate.toLocaleDateString(locale, {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      })\n      return t('pageSubtitle', { startDate: startFormatted, endDate: endFormatted })\n    }\n  }\n  return t('pageSubtitle', { startDate: '', endDate: '' })\n}\nexport const PayrollOverviewPresentation = ({\n  onEdit,\n  onSubmit,\n  employeeDetails,\n  payrollData,\n  bankAccount,\n}: PayrollOverviewProps) => {\n  const { Alert, Button, Heading, Text, Tabs } = useComponentContext()\n  useI18n('Payroll.PayrollOverview')\n  const { locale } = useLocale()\n  const { t } = useTranslation('Payroll.PayrollOverview')\n  const formatCurrency = useNumberFormatter('currency')\n  const [selectedTab, setSelectedTab] = useState('companyPays')\n\n  //TODO: is this right? check with gws-flows\n  const totalPayroll = payrollData.totals\n    ? parseFloat(payrollData.totals.grossPay!) +\n      parseFloat(payrollData.totals.employerTaxes!) +\n      parseFloat(payrollData.totals.reimbursements!) +\n      parseFloat(payrollData.totals.benefits!)\n    : 0\n\n  const expectedDebitDate = payrollData.payrollStatusMeta?.expectedDebitTime\n    ? parseDateStringToLocal(payrollData.payrollStatusMeta.expectedDebitTime)\n    : payrollData.payrollDeadline!\n\n  const getCompanyTaxes = (employeeCompensation: EmployeeCompensations) => {\n    return (\n      employeeCompensation.taxes?.reduce(\n        (acc, tax) => (tax.employer ? acc + tax.amount : acc),\n        0,\n      ) ?? 0\n    )\n  }\n  const getCompanyBenefits = (employeeCompensation: EmployeeCompensations) => {\n    return (\n      employeeCompensation.benefits?.reduce(\n        (acc, benefit) => (benefit.companyContribution ? acc + benefit.companyContribution : acc),\n        0,\n      ) ?? 0\n    )\n  }\n  const getReimbursements = (employeeCompensation: EmployeeCompensations) => {\n    return employeeCompensation.fixedCompensations?.length\n      ? parseFloat(\n          employeeCompensation.fixedCompensations.find(\n            c => c.name?.toLowerCase() === compensationTypeLabels.REIMBURSEMENT_NAME.toLowerCase(),\n          )?.amount || '0',\n        )\n      : 0\n  }\n\n  const getCompanyCost = (employeeCompensation: EmployeeCompensations) => {\n    return (\n      employeeCompensation.grossPay! +\n      getReimbursements(employeeCompensation) +\n      getCompanyTaxes(employeeCompensation) +\n      getCompanyBenefits(employeeCompensation)\n    )\n  }\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeHours = (\n    employeeCompensations: EmployeeCompensations,\n  ): Record<string, number> => {\n    return (\n      employeeCompensations.hourlyCompensations?.reduce(\n        (acc, hourlyCompensation) => {\n          if (typeof hourlyCompensation.name === 'undefined') {\n            return acc\n          }\n          const name = hourlyCompensation.name.toLowerCase()\n          const currentHours = acc[name] ?? 0\n          acc[name] = currentHours + parseFloat(hourlyCompensation.hours || '0')\n          return acc\n        },\n        {} as Record<string, number>,\n      ) || {}\n    )\n  }\n  const getEmployeePtoHours = (employeeCompensations: EmployeeCompensations) => {\n    return (\n      employeeCompensations.paidTimeOff?.reduce((acc, paidTimeOff) => {\n        return acc + parseFloat(paidTimeOff.hours || '0')\n      }, 0) ?? 0\n    )\n  }\n\n  const tabs = [\n    {\n      id: 'companyPays',\n      label: t('dataViews.companyPaysTab'),\n      content: (\n        <DataView\n          label={t('dataViews.companyPaysTab')}\n          columns={[\n            {\n              title: t('tableHeaders.employees'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {firstLastName({\n                    first_name: employeeMap.get(employeeCompensations.employeeUuid!)?.firstName,\n                    last_name: employeeMap.get(employeeCompensations.employeeUuid!)?.lastName,\n                  })}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.grossPay'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{formatCurrency(employeeCompensations.grossPay!)}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.reimbursements'),\n              render: (employeeCompensation: EmployeeCompensations) => (\n                <Text>{formatCurrency(getReimbursements(employeeCompensation))}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.companyTaxes'),\n              render: (employeeCompensation: EmployeeCompensations) => (\n                <Text>{formatCurrency(getCompanyTaxes(employeeCompensation))}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.companyBenefits'),\n              render: (employeeCompensation: EmployeeCompensations) => (\n                <Text>{formatCurrency(getCompanyBenefits(employeeCompensation))}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.companyPays'),\n              render: (employeeCompensation: EmployeeCompensations) => (\n                <Text>{formatCurrency(getCompanyCost(employeeCompensation))}</Text>\n              ),\n            },\n          ]}\n          data={payrollData.employeeCompensations!}\n        />\n      ),\n    },\n    {\n      id: 'hoursWorked',\n      label: t('dataViews.hoursWorkedTab'),\n      content: (\n        <DataView\n          label={t('dataViews.hoursWorkedTab')}\n          columns={[\n            {\n              title: t('tableHeaders.employees'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {firstLastName({\n                    first_name: employeeMap.get(employeeCompensations.employeeUuid!)?.firstName,\n                    last_name: employeeMap.get(employeeCompensations.employeeUuid!)?.lastName,\n                  })}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.compensationType'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {employeeMap\n                    .get(employeeCompensations.employeeUuid!)\n                    ?.jobs?.reduce((acc, job) => {\n                      if (job.primary) {\n                        const flsaStatus = job.compensations?.find(\n                          comp => comp.uuid === job.currentCompensationUuid,\n                        )?.flsaStatus\n\n                        switch (flsaStatus) {\n                          case FlsaStatus.EXEMPT:\n                            return t('compensationTypeLabels.exempt')\n                          case FlsaStatus.NONEXEMPT:\n                            return t('compensationTypeLabels.nonexempt')\n                          default:\n                            return flsaStatus ?? ''\n                        }\n                      }\n                      return acc\n                    }, '')}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.regular'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {getEmployeeHours(employeeCompensations)[\n                    compensationTypeLabels.REGULAR_HOURS_NAME\n                  ] || 0}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.overtime'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {getEmployeeHours(employeeCompensations)[compensationTypeLabels.OVERTIME_NAME] ||\n                    0}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.doubleOT'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {getEmployeeHours(employeeCompensations)[\n                    compensationTypeLabels.DOUBLE_OVERTIME_NAME\n                  ] || 0}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.timeOff'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{getEmployeePtoHours(employeeCompensations)}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.totalHours'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {Object.values(getEmployeeHours(employeeCompensations)).reduce(\n                    (acc, hours) => acc + hours,\n                    0,\n                  ) + getEmployeePtoHours(employeeCompensations)}\n                </Text>\n              ),\n            },\n          ]}\n          data={payrollData.employeeCompensations!}\n        />\n      ),\n    },\n    {\n      id: 'employeeTakeHome',\n      label: t('dataViews.employeeTakeHomeTab'),\n      content: (\n        <DataView\n          label={t('dataViews.employeeTakeHomeTab')}\n          columns={[\n            {\n              title: t('tableHeaders.employees'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {firstLastName({\n                    first_name: employeeMap.get(employeeCompensations.employeeUuid!)?.firstName,\n                    last_name: employeeMap.get(employeeCompensations.employeeUuid!)?.lastName,\n                  })}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.paymentType'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{employeeCompensations.paymentMethod ?? ''}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.grossPay'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{formatCurrency(employeeCompensations.grossPay ?? 0)}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.deductions'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {formatCurrency(\n                    employeeCompensations.deductions?.reduce(\n                      (acc, deduction) => acc + deduction.amount!,\n                      0,\n                    ) ?? 0,\n                  )}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.reimbursements'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{formatCurrency(getReimbursements(employeeCompensations))}</Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.employeeTaxes'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {formatCurrency(\n                    employeeCompensations.taxes?.reduce(\n                      (acc, tax) => (tax.employer ? acc : acc + tax.amount),\n                      0,\n                    ) ?? 0,\n                  )}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.employeeBenefits'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>\n                  {formatCurrency(\n                    employeeCompensations.benefits?.reduce(\n                      (acc, benefit) => acc + (benefit.employeeDeduction ?? 0),\n                      0,\n                    ) ?? 0,\n                  )}\n                </Text>\n              ),\n            },\n            {\n              title: t('tableHeaders.payment'),\n              render: (employeeCompensations: EmployeeCompensations) => (\n                <Text>{formatCurrency(employeeCompensations.netPay ?? 0)}</Text>\n              ),\n            },\n          ]}\n          data={payrollData.employeeCompensations!}\n        />\n      ),\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"stretch\">\n      <Flex justifyContent=\"space-between\">\n        <div>\n          <Heading as=\"h1\">{t('pageTitle')}</Heading>\n          <Text>{getPayrollOverviewTitle({ payPeriod: payrollData.payPeriod, locale, t })}</Text>\n        </div>\n        <Flex justifyContent=\"flex-end\">\n          <Button onClick={onEdit} variant=\"secondary\">\n            {t('editCta')}\n          </Button>\n          <Button onClick={onSubmit}>{t('submitCta')}</Button>\n        </Flex>\n      </Flex>\n      {/* TODO: when is this actually saved? */}\n      <Alert label={t('alerts.progressSaved')} status=\"success\"></Alert>\n      <Heading as=\"h3\">{t('payrollSummaryTitle')}</Heading>\n      <DataView\n        label={t('payrollSummaryLabel')}\n        columns={[\n          {\n            title: t('tableHeaders.totalPayroll'),\n            render: () => <Text>{formatCurrency(totalPayroll)}</Text>,\n          },\n          {\n            title: t('tableHeaders.debitAmount'),\n            render: () => (\n              <Text>{formatCurrency(parseFloat(payrollData.totals?.companyDebit ?? '0'))}</Text>\n            ),\n          },\n          {\n            title: t('tableHeaders.debitAccount'),\n            render: () => <Text>{bankAccount?.hiddenAccountNumber ?? ''}</Text>,\n          },\n          {\n            title: t('tableHeaders.debitDate'),\n            render: () => (\n              <Text>\n                {expectedDebitDate?.toLocaleString(locale, {\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </Text>\n            ),\n          },\n          {\n            title: t('tableHeaders.employeesPayDate'),\n            render: () => (\n              <Text>\n                {parseDateStringToLocal(payrollData.checkDate!)?.toLocaleDateString(locale, {\n                  month: 'short',\n                  day: 'numeric',\n                  year: 'numeric',\n                })}\n              </Text>\n            ),\n          },\n        ]}\n        data={[{}]}\n      />\n      <Tabs\n        onSelectionChange={setSelectedTab}\n        selectedId={selectedTab}\n        aria-label={t('dataViews.label')}\n        tabs={tabs}\n      />\n    </Flex>\n  )\n}\n"],"names":["getPayrollOverviewTitle","payPeriod","locale","t","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollOverviewPresentation","onEdit","onSubmit","employeeDetails","payrollData","bankAccount","Alert","Button","Heading","Text","Tabs","useComponentContext","useI18n","useLocale","useTranslation","formatCurrency","useNumberFormatter","selectedTab","setSelectedTab","useState","totalPayroll","expectedDebitDate","getCompanyTaxes","employeeCompensation","acc","tax","getCompanyBenefits","benefit","getReimbursements","c","compensationTypeLabels","getCompanyCost","employeeMap","employee","getEmployeeHours","employeeCompensations","hourlyCompensation","name","currentHours","getEmployeePtoHours","paidTimeOff","tabs","jsx","DataView","firstLastName","job","flsaStatus","comp","FlsaStatus","hours","deduction","jsxs","Flex"],"mappings":"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"}

package/dist/components/Payroll/RunPayrollFlow/RunPayroll.d.ts

@@ -1,9 +1,10 @@
 import { BaseComponentInterface } from '../../Base/Base';
 interface RunPayrollProps extends Pick<BaseComponentInterface, 'onEvent'> {
     companyId: string;
-    Configuration: ({ onEvent, payrollId, companyId, }: Pick<BaseComponentInterface, 'onEvent'> & {
+    Configuration: ({ onEvent, payrollId, companyId, alerts, }: Pick<BaseComponentInterface, 'onEvent'> & {
         payrollId: string;
         companyId: string;
+        alerts?: React.ReactNode;
     }) => React.JSX.Element;
     List: ({ companyId, onEvent, }: Pick<BaseComponentInterface, 'onEvent'> & {
         companyId: string;
@@ -12,6 +13,11 @@ interface RunPayrollProps extends Pick<BaseComponentInterface, 'onEvent'> {
         companyId: string;
         payrollId: string;
     }) => React.JSX.Element;
+    EditEmployee: ({ onEvent, employeeId, companyId, payrollId, }: Pick<BaseComponentInterface, 'onEvent'> & {
+        employeeId: string;
+        companyId: string;
+        payrollId: string;
+    }) => React.JSX.Element;
 }
-export declare const RunPayroll: ({ companyId, Configuration, List, onEvent, Overview, }: RunPayrollProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RunPayroll: ({ companyId, Configuration, List, onEvent, Overview, EditEmployee, }: RunPayrollProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Payroll/RunPayrollFlow/RunPayroll.js

@@ -1,55 +1,111 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useReducer as i } from "react";
-const P = () => ({
+import { jsx as o } from "react/jsx-runtime";
+import { useReducer as A, useState as N } from "react";
+import { useTranslation as S } from "react-i18next";
+import { componentEvents as _ } from "../../../shared/constants.js";
+import { useComponentContext as b } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { firstLastName as w } from "../../../helpers/formattedStrings.js";
+import { useI18n as L } from "../../../i18n/I18n.js";
+const h = () => ({
   currentPayrollId: void 0,
-  isCalculated: !1
-}), p = (r, l) => {
+  isCalculated: !1,
+  editedEmployeeId: void 0
+}), x = (e, l) => {
   switch (l.type) {
     case "runPayroll/back":
       return {
-        ...r,
+        ...e,
         currentPayrollId: void 0
       };
     case "runPayroll/edited":
       return {
-        ...r,
+        ...e,
         isCalculated: !1
       };
     case "runPayroll/calculated":
       return {
-        ...r,
+        ...e,
         isCalculated: !0
       };
     case "runPayroll/selected":
       return {
-        ...r,
+        ...e,
         currentPayrollId: l.payload.payrollId
       };
     case "runPayroll/submitted":
       return {
-        ...r,
+        ...e,
         isCalculated: !1,
         currentPayrollId: void 0
       };
+    case "runPayroll/employee/edited":
+      return {
+        ...e,
+        editedEmployeeId: l.payload.employeeId
+      };
+    case "runPayroll/employee/saved":
+    case "runPayroll/employee/cancelled":
+      return {
+        ...e,
+        editedEmployeeId: void 0
+      };
     default:
-      return r;
+      return e;
   }
-}, v = ({
-  companyId: r,
+}, M = ({
+  companyId: e,
   Configuration: l,
-  List: n,
+  List: y,
   onEvent: c,
-  Overview: d
+  Overview: i,
+  EditEmployee: p
 }) => {
-  const [{ isCalculated: s, currentPayrollId: e }, y] = i(
+  L("Payroll.RunPayroll");
+  const { t: P } = S("Payroll.RunPayroll"), [{ isCalculated: f, currentPayrollId: r, editedEmployeeId: d }, E] = A(
+    x,
+    h()
+  ), [u, m] = N(
+    null
+  ), v = b(), I = () => {
+    m(null);
+  }, t = (a, n) => {
+    if (a === _.RUN_PAYROLL_EMPLOYEE_SAVED) {
+      const s = n.employee;
+      if (s) {
+        const R = w({
+          first_name: s.firstName,
+          last_name: s.lastName
+        });
+        m({ employeeName: R });
+      }
+    }
+    E({ type: a, payload: n }), c(a, n);
+  }, C = u ? /* @__PURE__ */ o(
+    v.Alert,
+    {
+      status: "success",
+      label: P("alerts.employeeUpdated.label", { name: u.employeeName }),
+      onDismiss: I
+    }
+  ) : void 0;
+  return d && r ? /* @__PURE__ */ o(
     p,
-    P()
-  ), a = (o, u) => {
-    y({ type: o, payload: u }), c(o, u);
-  };
-  return e ? s ? /* @__PURE__ */ t(d, { companyId: r, onEvent: a, payrollId: e }) : /* @__PURE__ */ t(l, { onEvent: a, payrollId: e, companyId: r }) : /* @__PURE__ */ t(n, { companyId: r, onEvent: a });
+    {
+      onEvent: t,
+      employeeId: d,
+      companyId: e,
+      payrollId: r
+    }
+  ) : r ? f ? /* @__PURE__ */ o(i, { companyId: e, onEvent: t, payrollId: r }) : /* @__PURE__ */ o(
+    l,
+    {
+      onEvent: t,
+      payrollId: r,
+      companyId: e,
+      alerts: C
+    }
+  ) : /* @__PURE__ */ o(y, { companyId: e, onEvent: t });
 };
 export {
-  v as RunPayroll
+  M as RunPayroll
 };
 //# sourceMappingURL=RunPayroll.js.map