@gusto/embedded-react-sdk 0.12.1 → 0.13.0

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js

@@ -1,78 +1,146 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { Flex as r } from "../../Common/Flex/Flex.js";
-import { useComponentContext as h } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { HamburgerMenu as m } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import p from "../../../assets/icons/pencil.svg.js";
-import { DataView as y } from "../../Common/DataView/DataView.js";
-const J = ({
-  employees: a,
-  onBack: d,
-  onEdit: c,
-  onCalculatePayroll: s
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { useTranslation as B } from "react-i18next";
+import { useFormatEmployeePayRate as H, getRegularHours as L, formatHoursDisplay as C, getTotalPtoHours as M, getAdditionalEarnings as v, getReimbursements as R, calculateGrossPay as S } from "../helpers.js";
+import { Flex as p } from "../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../shared/constants.js";
+import { useComponentContext as F } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { HamburgerMenu as j } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import G from "../../../assets/icons/pencil.svg.js";
+import { formatNumberAsCurrency as y, firstLastName as _ } from "../../../helpers/formattedStrings.js";
+import { parseDateStringToLocal as w } from "../../../helpers/dateFormatting.js";
+import { useLocale as I } from "../../../contexts/LocaleProvider/useLocale.js";
+import { DataView as O } from "../../Common/DataView/DataView.js";
+const V = ({
+  payPeriod: i,
+  locale: c,
+  t: s
 }) => {
-  const { Alert: n, Button: o, Heading: t, Text: l } = h();
-  return /* @__PURE__ */ i(r, { flexDirection: "column", children: [
-    /* @__PURE__ */ i(r, { justifyContent: "space-between", children: [
-      /* @__PURE__ */ e(t, { as: "h1", children: "Run payroll for Jul 5 - Jul 18, 2025" }),
-      /* @__PURE__ */ e(o, { title: "Calculate payroll", onClick: s, children: "Calculate payroll" })
+  if (i?.startDate && i.endDate) {
+    const d = w(i.startDate), u = w(i.endDate);
+    if (d && u) {
+      const h = d.toLocaleDateString(c, {
+        month: "long",
+        day: "numeric"
+      }), g = u.toLocaleDateString(c, {
+        month: "short",
+        day: "numeric",
+        year: "numeric"
+      });
+      return s("pageTitle", { startDate: h, endDate: g });
+    }
+  }
+  return s("pageTitle", { startDate: "", endDate: "" });
+}, ne = ({
+  employeeCompensations: i,
+  employeeDetails: c,
+  payPeriod: s,
+  paySchedule: d,
+  onBack: u,
+  onEdit: h,
+  onCalculatePayroll: g,
+  isOffCycle: P = !1
+}) => {
+  const { Alert: f, Button: b, Heading: D, Text: l, Badge: T } = F(), { t: n } = B("Payroll.PayrollConfiguration"), { locale: x } = I(), E = H(), o = new Map(c.map((t) => [t.uuid, t])), N = (t) => {
+    const r = o.get(t);
+    return r ? _({ first_name: r.firstName, last_name: r.lastName }) : null;
+  };
+  return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ m(p, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ e(D, { as: "h1", children: V({ payPeriod: s, locale: x, t: n }) }),
+      /* @__PURE__ */ e(b, { title: n("calculatePayrollTitle"), onClick: g, children: n("calculatePayroll") })
     ] }),
-    /* @__PURE__ */ e(l, { children: "Regular payroll" }),
-    /* @__PURE__ */ i(r, { flexDirection: "column", alignItems: "stretch", children: [
-      /* @__PURE__ */ e(
-        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",
-          status: "info",
-          children: "If you miss this deadline, your employees' direct deposit will be delayed."
-        }
-      ),
-      /* @__PURE__ */ e(n, { label: "2 employees will be skipped this payroll", status: "warning", children: /* @__PURE__ */ i("ul", { children: [
-        /* @__PURE__ */ e("li", { children: "John Smith - Employee address not verified" }),
-        /* @__PURE__ */ e("li", { children: "Jensen Cooper - Employee address not verified" })
+    /* @__PURE__ */ e(l, { children: n("regularPayroll") }),
+    /* @__PURE__ */ m(p, { flexDirection: "column", gap: 16, children: [
+      /* @__PURE__ */ e(f, { label: "Payroll Deadline", status: "info", children: "To pay your employees with direct deposit on the check date, you'll need to run payroll by the deadline." }),
+      /* @__PURE__ */ e(f, { label: "Skipped Employees", status: "warning", children: /* @__PURE__ */ m("ul", { children: [
+        /* @__PURE__ */ e("li", { children: "Employee address not verified" }),
+        /* @__PURE__ */ e("li", { children: "Employee address not verified" })
       ] }) })
     ] }),
-    /* @__PURE__ */ e(t, { as: "h3", children: "Hours and additional earnings" }),
-    /* @__PURE__ */ e(l, { children: "Review and update..." }),
+    /* @__PURE__ */ e(D, { as: "h3", children: n("hoursAndEarningsTitle") }),
+    /* @__PURE__ */ e(l, { children: n("hoursAndEarningsDescription") }),
     /* @__PURE__ */ e(
-      y,
+      O,
       {
-        label: "Configuration",
+        label: n("employeeCompensationsTitle"),
         columns: [
           {
-            title: "Employees",
-            render: () => /* @__PURE__ */ i(r, { flexDirection: "column", children: [
-              /* @__PURE__ */ e(l, { children: "John Smith" }),
-              /* @__PURE__ */ e(l, { children: "$22.00/hr" })
-            ] })
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.employees") }),
+            render: (t) => {
+              const r = o.get(t.employeeUuid || ""), a = E(r);
+              return /* @__PURE__ */ m(p, { flexDirection: "column", gap: 8, children: [
+                /* @__PURE__ */ e(l, { weight: "semibold", children: N(t.employeeUuid || "") }),
+                a && /* @__PURE__ */ e(l, { variant: "supporting", children: a }),
+                t.excluded && /* @__PURE__ */ e(T, { status: "warning", children: n("skippedBadge") })
+              ] });
+            }
+          },
+          {
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.hours") }),
+            render: (t) => {
+              const r = L(t);
+              return /* @__PURE__ */ e(l, { children: C(r) });
+            }
+          },
+          {
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.timeOff") }),
+            render: (t) => {
+              const r = M(t);
+              return /* @__PURE__ */ e(l, { children: C(r) });
+            }
+          },
+          {
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.additionalEarnings") }),
+            render: (t) => {
+              const r = v(t);
+              return /* @__PURE__ */ e(l, { children: y(r) });
+            }
+          },
+          {
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.reimbursements") }),
+            render: (t) => {
+              const r = R(t);
+              return /* @__PURE__ */ e(l, { children: y(r) });
+            }
           },
           {
-            title: "Hours",
-            render: () => /* @__PURE__ */ e(l, { children: "40" })
+            title: /* @__PURE__ */ e(l, { weight: "semibold", children: n("tableColumns.totalPay") }),
+            render: (t) => {
+              const r = o.get(t.employeeUuid || ""), a = r ? S(t, r, s?.startDate, d, P) : 0;
+              return /* @__PURE__ */ e(l, { children: y(a) });
+            }
           }
         ],
-        data: a,
-        itemMenu: ({ employeeId: u }) => /* @__PURE__ */ e(
-          m,
+        data: i.filter((t) => {
+          const r = t.employeeUuid;
+          return r ? o.has(r) : !1;
+        }).sort((t, r) => {
+          const a = o.get(t.employeeUuid || ""), k = o.get(r.employeeUuid || ""), U = a?.lastName || "", A = k?.lastName || "";
+          return U.localeCompare(A);
+        }),
+        itemMenu: (t) => /* @__PURE__ */ e(
+          j,
           {
             items: [
               {
-                label: "Edit",
-                icon: /* @__PURE__ */ e(p, { "aria-hidden": !0 }),
+                label: n("editMenu.edit"),
+                icon: /* @__PURE__ */ e(G, { "aria-hidden": !0 }),
                 onClick: () => {
-                  c({ employeeId: u });
+                  const r = o.get(t.employeeUuid || "");
+                  r && h(r);
                 }
               }
             ],
-            triggerLabel: "Edit",
-            isLoading: !1
+            triggerLabel: n("editMenu.edit")
           }
         )
       }
     ),
-    /* @__PURE__ */ e(o, { title: "Back", onClick: d, children: "Back" })
+    /* @__PURE__ */ e(b, { title: n("backButtonTitle"), onClick: u, variant: "secondary", children: n("backButton") })
   ] });
 };
 export {
-  J as PayrollConfigurationPresentation
+  ne as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\n\n//TODO: Use Speakeasy type\ninterface Employee {\n  employeeId: string\n}\n\ninterface PayrollConfigurationPresentationProps {\n  employees: Employee[]\n  onBack: () => void\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employees,\n  onBack,\n  onEdit,\n  onCalculatePayroll,\n}: PayrollConfigurationPresentationProps) => {\n  const { Alert, Button, Heading, Text } = useComponentContext()\n\n  return (\n    <Flex flexDirection=\"column\">\n      <Flex justifyContent=\"space-between\">\n        <Heading as=\"h1\">Run payroll for Jul 5 - Jul 18, 2025</Heading>\n        <Button title=\"Calculate payroll\" onClick={onCalculatePayroll}>\n          Calculate payroll\n        </Button>\n      </Flex>\n      <Text>Regular payroll</Text>\n      <Flex flexDirection=\"column\" alignItems=\"stretch\">\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=\"info\"\n        >\n          {\"If you miss this deadline, your employees' direct deposit will be delayed.\"}\n        </Alert>\n        <Alert label=\"2 employees will be skipped this payroll\" status=\"warning\">\n          <ul>\n            <li>John Smith - Employee address not verified</li>\n            <li>Jensen Cooper - Employee address not verified</li>\n          </ul>\n        </Alert>\n      </Flex>\n\n      <Heading as=\"h3\">Hours and additional earnings</Heading>\n      <Text>Review and update...</Text>\n      <DataView\n        label=\"Configuration\"\n        columns={[\n          {\n            title: 'Employees',\n            render: () => (\n              <Flex flexDirection=\"column\">\n                <Text>John Smith</Text>\n                <Text>$22.00/hr</Text>\n              </Flex>\n            ),\n          },\n          {\n            title: 'Hours',\n            render: () => <Text>40</Text>,\n          },\n        ]}\n        data={employees}\n        itemMenu={({ employeeId }) => (\n          <HamburgerMenu\n            items={[\n              {\n                label: 'Edit',\n                icon: <PencilSvg aria-hidden />,\n                onClick: () => {\n                  onEdit({ employeeId })\n                },\n              },\n            ]}\n            triggerLabel=\"Edit\"\n            isLoading={false}\n          />\n        )}\n      />\n      <Button title=\"Back\" onClick={onBack}>\n        Back\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["PayrollConfigurationPresentation","employees","onBack","onEdit","onCalculatePayroll","Alert","Button","Heading","Text","useComponentContext","jsxs","Flex","jsx","DataView","employeeId","HamburgerMenu","PencilSvg"],"mappings":";;;;;;AAiBO,MAAMA,IAAmC,CAAC;AAAA,EAC/C,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AACF,MAA6C;AAC3C,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA;AAEzC,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAClB,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,iBACnB,UAAA;AAAA,MAAA,gBAAAC,EAACL,GAAA,EAAQ,IAAG,MAAK,UAAA,wCAAoC;AAAA,wBACpDD,GAAA,EAAO,OAAM,qBAAoB,SAASF,GAAoB,UAAA,oBAAA,CAE/D;AAAA,IAAA,GACF;AAAA,IACA,gBAAAQ,EAACJ,KAAK,UAAA,kBAAA,CAAe;AAAA,IACrB,gBAAAE,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,WACtC,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAACP;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,QAAO;AAAA,UAEN,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,wBAEFA,GAAA,EAAM,OAAM,4CAA2C,QAAO,WAC7D,4BAAC,MAAA,EACC,UAAA;AAAA,QAAA,gBAAAO,EAAC,QAAG,UAAA,6CAAA,CAA0C;AAAA,QAC9C,gBAAAA,EAAC,QAAG,UAAA,gDAAA,CAA6C;AAAA,MAAA,EAAA,CACnD,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEA,gBAAAA,EAACL,GAAA,EAAQ,IAAG,MAAK,UAAA,iCAA6B;AAAA,IAC9C,gBAAAK,EAACJ,KAAK,UAAA,uBAAA,CAAoB;AAAA,IAC1B,gBAAAI;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,SAAS;AAAA,UACP;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MACN,gBAAAH,EAACC,GAAA,EAAK,eAAc,UAClB,UAAA;AAAA,cAAA,gBAAAC,EAACJ,KAAK,UAAA,aAAA,CAAU;AAAA,cAChB,gBAAAI,EAACJ,KAAK,UAAA,YAAA,CAAS;AAAA,YAAA,EAAA,CACjB;AAAA,UAAA;AAAA,UAGJ;AAAA,YACE,OAAO;AAAA,YACP,QAAQ,MAAM,gBAAAI,EAACJ,GAAA,EAAK,UAAA,KAAA,CAAE;AAAA,UAAA;AAAA,QACxB;AAAA,QAEF,MAAMP;AAAA,QACN,UAAU,CAAC,EAAE,YAAAa,EAAA,MACX,gBAAAF;AAAA,UAACG;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,cACL;AAAA,gBACE,OAAO;AAAA,gBACP,MAAM,gBAAAH,EAACI,GAAA,EAAU,eAAW,GAAA,CAAC;AAAA,gBAC7B,SAAS,MAAM;AACb,kBAAAb,EAAO,EAAE,YAAAW,GAAY;AAAA,gBACvB;AAAA,cAAA;AAAA,YACF;AAAA,YAEF,cAAa;AAAA,YACb,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MACb;AAAA,IAAA;AAAA,sBAGHR,GAAA,EAAO,OAAM,QAAO,SAASJ,GAAQ,UAAA,OAAA,CAEtC;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { useTranslation } from 'react-i18next'\nimport type { TFunction } from 'i18next'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onBack: () => void\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  isOffCycle?: boolean\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n  t,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n  t: TFunction<'Payroll.PayrollConfiguration'>\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('pageTitle', { startDate: startFormatted, endDate: endFormatted })\n    }\n  }\n  return t('pageTitle', { startDate: '', endDate: '' })\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onBack,\n  onEdit,\n  onCalculatePayroll,\n  isOffCycle = false,\n}: PayrollConfigurationPresentationProps) => {\n  const { Alert, Button, Heading, Text, Badge } = useComponentContext()\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n\n  const employeeMap = new Map(employeeDetails.map(employee => [employee.uuid, employee]))\n\n  const getEmployeeName = (employeeUuid: string) => {\n    const employee = employeeMap.get(employeeUuid)\n    return employee\n      ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n      : null\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\n        <Heading as=\"h1\">{getPayrollConfigurationTitle({ payPeriod, locale, t })}</Heading>\n        <Button title={t('calculatePayrollTitle')} onClick={onCalculatePayroll}>\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      <Text>{t('regularPayroll')}</Text>\n\n      <Flex flexDirection=\"column\" gap={16}>\n        {/* TODO: Replace with actual deadline information from payroll data */}\n        <Alert label=\"Payroll Deadline\" status=\"info\">\n          To pay your employees with direct deposit on the check date, you&apos;ll need to run\n          payroll by the deadline.\n        </Alert>\n\n        {/* TODO: Replace with actual skipped employees list from payroll data */}\n        <Alert label=\"Skipped Employees\" status=\"warning\">\n          <ul>\n            <li>Employee address not verified</li>\n            <li>Employee address not verified</li>\n          </ul>\n        </Alert>\n      </Flex>\n\n      <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n      <Text>{t('hoursAndEarningsDescription')}</Text>\n\n      <DataView\n        label={t('employeeCompensationsTitle')}\n        columns={[\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const payRateDisplay = formatEmployeePayRate(employee)\n              return (\n                <Flex flexDirection=\"column\" gap={8 as const}>\n                  <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                  {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                  {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                </Flex>\n              )\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const hours = getRegularHours(item)\n              return <Text>{formatHoursDisplay(hours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const ptoHours = getTotalPtoHours(item)\n              return <Text>{formatHoursDisplay(ptoHours)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const earnings = getAdditionalEarnings(item)\n              return <Text>{formatNumberAsCurrency(earnings)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const reimbursements = getReimbursements(item)\n              return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n            },\n          },\n          {\n            title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n            render: (item: EmployeeCompensations) => {\n              const employee = employeeMap.get(item.employeeUuid || '')\n              const calculatedGrossPay = employee\n                ? calculateGrossPay(item, employee, payPeriod?.startDate, paySchedule, isOffCycle)\n                : 0\n              return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n            },\n          },\n        ]}\n        data={employeeCompensations\n          .filter(compensation => {\n            const employeeUuid = compensation.employeeUuid\n            if (!employeeUuid) return false\n            return employeeMap.has(employeeUuid)\n          })\n          .sort((a, b) => {\n            const employeeA = employeeMap.get(a.employeeUuid || '')\n            const employeeB = employeeMap.get(b.employeeUuid || '')\n            const lastNameA = employeeA?.lastName || ''\n            const lastNameB = employeeB?.lastName || ''\n            return lastNameA.localeCompare(lastNameB)\n          })}\n        itemMenu={(item: EmployeeCompensations) => (\n          <HamburgerMenu\n            items={[\n              {\n                label: t('editMenu.edit'),\n                icon: <PencilSvg aria-hidden />,\n                onClick: () => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  if (employee) {\n                    onEdit(employee)\n                  }\n                },\n              },\n            ]}\n            triggerLabel={t('editMenu.edit')}\n          />\n        )}\n      />\n\n      <Button title={t('backButtonTitle')} onClick={onBack} variant=\"secondary\">\n        {t('backButton')}\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","t","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onBack","onEdit","onCalculatePayroll","isOffCycle","Alert","Button","Heading","Text","Badge","useComponentContext","useTranslation","useLocale","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","jsx","DataView","item","payRateDisplay","hours","getRegularHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":"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"}

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js

@@ -1,21 +1,24 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { useForm as m, FormProvider as s } from "react-hook-form";
 import { Flex as a } from "../../Common/Flex/Flex.js";
-import { useComponentContext as d } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "classnames";
+import "../../../shared/constants.js";
+import "react-i18next";
+import { NumberInputField as d } from "../../Common/Fields/NumberInputField/NumberInputField.js";
+import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { Form as u } from "../../Common/Form/Form.js";
-import { NumberInputField as c } from "../../Common/Fields/NumberInputField/NumberInputField.js";
-const H = ({ onDone: o }) => {
-  const { Button: n, Heading: e, Text: t } = d(), i = m();
+const D = ({ onDone: e }) => {
+  const { Button: t, Heading: o, Text: n } = p(), i = m();
   return /* @__PURE__ */ l(a, { flexDirection: "column", gap: 20, children: [
-    /* @__PURE__ */ r(e, { as: "h2", children: "Edit Hannah Arendt's payroll" }),
-    /* @__PURE__ */ r(e, { as: "h1", children: "$1,173.08" }),
-    /* @__PURE__ */ r(t, { children: "Gross pay" }),
-    /* @__PURE__ */ r(e, { as: "h3", children: "Regular hours" }),
-    /* @__PURE__ */ r(s, { ...i, children: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(c, { defaultValue: 40, isRequired: !0, label: "Hours", name: "hours" }) }) }),
-    /* @__PURE__ */ r(n, { onClick: o, title: "Done", children: "Done" })
+    /* @__PURE__ */ r(o, { as: "h2", children: "Edit Hannah Arendt's payroll" }),
+    /* @__PURE__ */ r(o, { as: "h1", children: "$1,173.08" }),
+    /* @__PURE__ */ r(n, { children: "Gross pay" }),
+    /* @__PURE__ */ r(o, { as: "h3", children: "Regular hours" }),
+    /* @__PURE__ */ r(s, { ...i, children: /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(d, { defaultValue: 40, isRequired: !0, label: "Hours", name: "hours" }) }) }),
+    /* @__PURE__ */ r(t, { onClick: e, title: "Done", children: "Done" })
   ] });
 };
 export {
-  H as PayrollEditEmployeePresentation
+  D as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map

package/dist/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollEditEmployeePresentation.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport { Flex, NumberInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\n\ninterface PayrollEditEmployeeProps {\n  onDone: () => void\n}\n\nexport const PayrollEditEmployeePresentation = ({ onDone }: PayrollEditEmployeeProps) => {\n  const { Button, Heading, Text } = useComponentContext()\n  const formHandlers = useForm()\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Heading as=\"h2\">{`Edit Hannah Arendt's payroll`}</Heading>\n      <Heading as=\"h1\">$1,173.08</Heading>\n      <Text>Gross pay</Text>\n      <Heading as=\"h3\">Regular hours</Heading>\n      <FormProvider {...formHandlers}>\n        <Form>\n          <NumberInputField defaultValue={40} isRequired label=\"Hours\" name=\"hours\" />\n        </Form>\n      </FormProvider>\n\n      <Button onClick={onDone} title=\"Done\">\n        Done\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["PayrollEditEmployeePresentation","onDone","Button","Heading","Text","useComponentContext","formHandlers","useForm","jsxs","Flex","jsx","FormProvider","Form","NumberInputField"],"mappings":";;;;;;AASO,MAAMA,IAAkC,CAAC,EAAE,QAAAC,QAAuC;AACvF,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA,GAC5BC,IAAeC,EAAA;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACP,GAAA,EAAQ,IAAG,MAAM,UAAA,gCAA+B;AAAA,IACjD,gBAAAO,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,aAAS;AAAA,IAC1B,gBAAAO,EAACN,KAAK,UAAA,YAAA,CAAS;AAAA,IACf,gBAAAM,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,iBAAa;AAAA,sBAC7BQ,GAAA,EAAc,GAAGL,GAChB,UAAA,gBAAAI,EAACE,KACC,UAAA,gBAAAF,EAACG,GAAA,EAAiB,cAAc,IAAI,YAAU,IAAC,OAAM,SAAQ,MAAK,QAAA,CAAQ,GAC5E,GACF;AAAA,sBAECX,GAAA,EAAO,SAASD,GAAQ,OAAM,QAAO,UAAA,OAAA,CAEtC;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"PayrollEditEmployeePresentation.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployeePresentation.tsx"],"sourcesContent":["import { FormProvider, useForm } from 'react-hook-form'\nimport { Flex, NumberInputField } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Form } from '@/components/Common/Form'\n\ninterface PayrollEditEmployeeProps {\n  onDone: () => void\n}\n\nexport const PayrollEditEmployeePresentation = ({ onDone }: PayrollEditEmployeeProps) => {\n  const { Button, Heading, Text } = useComponentContext()\n  const formHandlers = useForm()\n  return (\n    <Flex flexDirection=\"column\" gap={20}>\n      <Heading as=\"h2\">{`Edit Hannah Arendt's payroll`}</Heading>\n      <Heading as=\"h1\">$1,173.08</Heading>\n      <Text>Gross pay</Text>\n      <Heading as=\"h3\">Regular hours</Heading>\n      <FormProvider {...formHandlers}>\n        <Form>\n          <NumberInputField defaultValue={40} isRequired label=\"Hours\" name=\"hours\" />\n        </Form>\n      </FormProvider>\n\n      <Button onClick={onDone} title=\"Done\">\n        Done\n      </Button>\n    </Flex>\n  )\n}\n"],"names":["PayrollEditEmployeePresentation","onDone","Button","Heading","Text","useComponentContext","formHandlers","useForm","jsxs","Flex","jsx","FormProvider","Form","NumberInputField"],"mappings":";;;;;;;;;AASO,MAAMA,IAAkC,CAAC,EAAE,QAAAC,QAAuC;AACvF,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,EAAA,IAASC,EAAA,GAC5BC,IAAeC,EAAA;AACrB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACP,GAAA,EAAQ,IAAG,MAAM,UAAA,gCAA+B;AAAA,IACjD,gBAAAO,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,aAAS;AAAA,IAC1B,gBAAAO,EAACN,KAAK,UAAA,YAAA,CAAS;AAAA,IACf,gBAAAM,EAACP,GAAA,EAAQ,IAAG,MAAK,UAAA,iBAAa;AAAA,sBAC7BQ,GAAA,EAAc,GAAGL,GAChB,UAAA,gBAAAI,EAACE,KACC,UAAA,gBAAAF,EAACG,GAAA,EAAiB,cAAc,IAAI,YAAU,IAAC,OAAM,SAAQ,MAAK,QAAA,CAAQ,GAC5E,GACF;AAAA,sBAECX,GAAA,EAAO,SAASD,GAAQ,OAAM,QAAO,UAAA,OAAA,CAEtC;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -2,5 +2,5 @@ import { BaseComponentInterface } from '../../Base';
 interface PayrollListBlockProps extends BaseComponentInterface {
     companyId: string;
 }
-export declare const PayrollList: ({ companyId, onEvent, ...baseProps }: PayrollListBlockProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollList: ({ companyId, onEvent }: PayrollListBlockProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +1,30 @@
 import { jsx as t } from "react/jsx-runtime";
-import { PayrollListPresentation as s } from "./PayrollListPresentation.js";
-import { BaseComponent as m } from "../../Base/Base.js";
+import { usePayrollsListSuspense as n } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/payrollsList.js";
+import { usePaySchedulesGetAllSuspense as i } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/paySchedulesGetAll.js";
+import { ProcessingStatuses as m } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/models/operations/getv1companiescompanyidpayrolls.js";
+import { PayrollListPresentation as c } from "./PayrollListPresentation.js";
+import { BaseComponent as u } from "../../Base/Base.js";
 import "../../Base/useBase.js";
-import { componentEvents as p } from "../../../shared/constants.js";
-const i = ({ companyId: o }) => ({
-  data: [{ payrollId: "abcd" }]
-}), u = ({ companyId: o, onEvent: r, ...n }) => {
-  const { data: a } = i({ companyId: o });
-  return /* @__PURE__ */ t(m, { ...n, onEvent: r, children: /* @__PURE__ */ t(s, { payrolls: a, onRunPayroll: ({ payrollId: l }) => {
-    r(p.RUN_PAYROLL_SELECTED, { payrollId: l });
-  } }) });
+import { componentEvents as y } from "../../../shared/constants.js";
+const g = ({ companyId: s, onEvent: o }) => {
+  const { data: r } = n({
+    companyId: s,
+    processingStatuses: [m.Unprocessed]
+  }), e = r.payrollList, { data: l } = i({
+    companyId: s
+  }), a = l.payScheduleList;
+  return /* @__PURE__ */ t(u, { onEvent: o, children: /* @__PURE__ */ t(
+    c,
+    {
+      payrolls: e,
+      paySchedules: a,
+      onRunPayroll: ({ payrollId: p }) => {
+        o(y.RUN_PAYROLL_SELECTED, { payrollId: p });
+      }
+    }
+  ) });
 };
 export {
-  u as PayrollList
+  g 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 { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\n\n//TODO: Use Speakeasy type\ninterface Company {\n  companyId: string\n}\n\n// TODO: Replace this hook with call to Speakeasy instead\nconst useListCompanyPayrollsApi = ({ companyId }: Company) => {\n  return {\n    data: [{ payrollId: 'abcd' }],\n  }\n}\n\ninterface PayrollListBlockProps extends BaseComponentInterface {\n  companyId: string\n}\n\nexport const PayrollList = ({ companyId, onEvent, ...baseProps }: PayrollListBlockProps) => {\n  const { data: payrolls } = useListCompanyPayrollsApi({ companyId })\n  const onRunPayroll = ({ payrollId }: { payrollId: string }) => {\n    onEvent(componentEvents.RUN_PAYROLL_SELECTED, { payrollId })\n  }\n  return (\n    <BaseComponent {...baseProps} onEvent={onEvent}>\n      <PayrollListPresentation payrolls={payrolls} onRunPayroll={onRunPayroll} />\n    </BaseComponent>\n  )\n}\n"],"names":["useListCompanyPayrollsApi","companyId","PayrollList","onEvent","baseProps","payrolls","jsx","BaseComponent","PayrollListPresentation","payrollId","componentEvents"],"mappings":";;;;;AAWA,MAAMA,IAA4B,CAAC,EAAE,WAAAC,SAC5B;AAAA,EACL,MAAM,CAAC,EAAE,WAAW,QAAQ;AAAA,IAQnBC,IAAc,CAAC,EAAE,WAAAD,GAAW,SAAAE,GAAS,GAAGC,QAAuC;AAC1F,QAAM,EAAE,MAAMC,EAAA,IAAaL,EAA0B,EAAE,WAAAC,GAAW;AAIlE,SACE,gBAAAK,EAACC,KAAe,GAAGH,GAAW,SAAAD,GAC5B,UAAA,gBAAAG,EAACE,GAAA,EAAwB,UAAAH,GAAoB,cAL5B,CAAC,EAAE,WAAAI,QAAuC;AAC7D,IAAAN,EAAQO,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,EAC7D,EAGiD,CAA4B,EAAA,CAC3E;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 { PayrollListPresentation } from './PayrollListPresentation'\nimport type { BaseComponentInterface } from '@/components/Base'\nimport { BaseComponent } from '@/components/Base'\nimport { componentEvents } from '@/shared/constants'\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}\n        paySchedules={paySchedulesList}\n        onRunPayroll={onRunPayroll}\n      />\n    </BaseComponent>\n  )\n}\n"],"names":["PayrollList","companyId","onEvent","payrollsData","usePayrollsListSuspense","ProcessingStatuses","payrollList","paySchedulesData","usePaySchedulesGetAllSuspense","paySchedulesList","jsx","BaseComponent","PayrollListPresentation","payrollId","componentEvents"],"mappings":";;;;;;;;AAYO,MAAMA,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;AAK1C,SACE,gBAAAG,EAACC,KAAc,SAAAT,GACb,UAAA,gBAAAQ;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUN;AAAA,MACV,cAAcG;AAAA,MACd,cARe,CAAC,EAAE,WAAAI,QAAuC;AAC7D,QAAAX,EAAQY,EAAgB,sBAAsB,EAAE,WAAAD,EAAA,CAAW;AAAA,MAC7D;AAAA,IAMM;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -1,9 +1,11 @@
-interface PayrollItem {
-    payrollId: string;
-}
+import { Payroll } from '@gusto/embedded-api/models/components/payroll';
+import { PayScheduleList } from '@gusto/embedded-api/models/components/payschedulelist';
 interface PayrollListPresentationProps {
-    onRunPayroll: ({ payrollId }: PayrollItem) => void;
-    payrolls: PayrollItem[];
+    onRunPayroll: ({ payrollId }: {
+        payrollId: NonNullable<Payroll['payrollUuid']>;
+    }) => void;
+    payrolls: Payroll[];
+    paySchedules: PayScheduleList[];
 }
-export declare const PayrollListPresentation: ({ onRunPayroll, payrolls, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollListPresentation: ({ onRunPayroll, payrolls, paySchedules, }: PayrollListPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,49 +1,60 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { Flex as d } from "../../Common/Flex/Flex.js";
-import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { DataView as c } from "../../Common/DataView/DataView.js";
-const x = ({
-  onRunPayroll: t,
-  payrolls: l
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
+import { Flex as c } from "../../Common/Flex/Flex.js";
+import "classnames";
+import "../../../shared/constants.js";
+import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as f } from "../../../i18n/I18n.js";
+import { DataView as y } from "../../Common/DataView/DataView.js";
+const T = ({
+  onRunPayroll: i,
+  payrolls: s,
+  paySchedules: n
 }) => {
-  const { Badge: n, Button: o, Text: r } = u();
-  return /* @__PURE__ */ e(
-    c,
+  const { Badge: d, Button: m, Text: l } = p();
+  f("Payroll.PayrollList");
+  const { t } = u("Payroll.PayrollList");
+  return /* @__PURE__ */ r(
+    y,
     {
       columns: [
         {
-          render: () => /* @__PURE__ */ a(d, { flexDirection: "column", children: [
-            /* @__PURE__ */ e(r, { children: "Jul 5 - Jul 18, 2025" }),
-            /* @__PURE__ */ e(r, { children: "Regular Payroll" })
+          render: ({ payPeriod: e }) => /* @__PURE__ */ a(c, { flexDirection: "column", children: [
+            /* @__PURE__ */ a(l, { children: [
+              e?.startDate,
+              " - ",
+              e?.endDate
+            ] }),
+            /* @__PURE__ */ r(l, { children: n.find((o) => o.uuid === e?.payScheduleUuid)?.name || n.find((o) => o.uuid === e?.payScheduleUuid)?.customName })
           ] }),
-          title: "Pay period"
+          title: t("tableHeaders.0")
         },
         {
-          title: "Run by",
-          render: () => /* @__PURE__ */ e(r, { children: "Wed Jul 23, 2025" })
+          title: t("tableHeaders.1"),
+          render: ({ payrollDeadline: e }) => /* @__PURE__ */ r(l, { children: e?.toLocaleDateString() })
         },
         {
-          title: "Status",
-          render: () => /* @__PURE__ */ e(n, { children: "Ready to submit" })
+          title: t("tableHeaders.2"),
+          render: ({ processed: e }) => /* @__PURE__ */ r(d, { children: t(e ? "status.processed" : "status.unprocessed") })
         }
       ],
-      data: l,
-      label: "Payrolls",
-      itemMenu: ({ payrollId: i }) => /* @__PURE__ */ e(
-        o,
+      data: s,
+      label: t("payrollsListLabel"),
+      itemMenu: ({ payrollUuid: e }) => /* @__PURE__ */ r(
+        m,
         {
           onClick: () => {
-            t({ payrollId: i });
+            i({ payrollId: e });
           },
           title: "Run payroll",
           variant: "secondary",
-          children: "Run payroll"
+          children: t("runPayrollTitle")
         }
       )
     }
   );
 };
 export {
-  x as PayrollListPresentation
+  T 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 { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\n//TODO: Use Speakeasy type\ninterface PayrollItem {\n  payrollId: string\n}\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: PayrollItem) => void\n  payrolls: PayrollItem[]\n}\nexport const PayrollListPresentation = ({\n  onRunPayroll,\n  payrolls,\n}: PayrollListPresentationProps) => {\n  const { Badge, Button, Text } = useComponentContext()\n  return (\n    <DataView\n      columns={[\n        {\n          render: () => (\n            <Flex flexDirection=\"column\">\n              <Text>Jul 5 - Jul 18, 2025</Text>\n              <Text>Regular Payroll</Text>\n            </Flex>\n          ),\n          title: 'Pay period',\n        },\n        {\n          title: 'Run by',\n          render: () => <Text>Wed Jul 23, 2025</Text>,\n        },\n        {\n          title: 'Status',\n          render: () => <Badge>Ready to submit</Badge>,\n        },\n      ]}\n      data={payrolls}\n      label=\"Payrolls\"\n      itemMenu={({ payrollId }) => (\n        <Button\n          onClick={() => {\n            onRunPayroll({ payrollId })\n          }}\n          title=\"Run payroll\"\n          variant=\"secondary\"\n        >\n          Run payroll\n        </Button>\n      )}\n    />\n  )\n}\n"],"names":["PayrollListPresentation","onRunPayroll","payrolls","Badge","Button","Text","useComponentContext","jsx","DataView","jsxs","Flex","payrollId"],"mappings":";;;;AAWO,MAAMA,IAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,UAAAC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAA,IAASC,EAAA;AAChC,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP;AAAA,UACE,QAAQ,MACN,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAClB,UAAA;AAAA,YAAA,gBAAAH,EAACF,KAAK,UAAA,uBAAA,CAAoB;AAAA,YAC1B,gBAAAE,EAACF,KAAK,UAAA,kBAAA,CAAe;AAAA,UAAA,GACvB;AAAA,UAEF,OAAO;AAAA,QAAA;AAAA,QAET;AAAA,UACE,OAAO;AAAA,UACP,QAAQ,MAAM,gBAAAE,EAACF,GAAA,EAAK,UAAA,mBAAA,CAAgB;AAAA,QAAA;AAAA,QAEtC;AAAA,UACE,OAAO;AAAA,UACP,QAAQ,MAAM,gBAAAE,EAACJ,GAAA,EAAM,UAAA,kBAAA,CAAe;AAAA,QAAA;AAAA,MACtC;AAAA,MAEF,MAAMD;AAAA,MACN,OAAM;AAAA,MACN,UAAU,CAAC,EAAE,WAAAS,EAAA,MACX,gBAAAJ;AAAA,QAACH;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAAH,EAAa,EAAE,WAAAU,GAAW;AAAA,UAC5B;AAAA,UACA,OAAM;AAAA,UACN,SAAQ;AAAA,UACT,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAED;AAAA,EAAA;AAIR;"}
+{"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 { DataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollListPresentationProps {\n  onRunPayroll: ({ payrollId }: { payrollId: NonNullable<Payroll['payrollUuid']> }) => void\n  payrolls: Payroll[]\n  paySchedules: PayScheduleList[]\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\n  return (\n    <DataView\n      columns={[\n        {\n          render: ({ payPeriod }) => (\n            <Flex flexDirection=\"column\">\n              <Text>\n                {payPeriod?.startDate} - {payPeriod?.endDate}\n              </Text>\n              <Text>\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          title: t('tableHeaders.0'),\n        },\n        {\n          title: t('tableHeaders.1'),\n          render: ({ payrollDeadline }) => <Text>{payrollDeadline?.toLocaleDateString()}</Text>,\n        },\n        {\n          title: t('tableHeaders.2'),\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=\"Run payroll\"\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","jsx","DataView","payPeriod","jsxs","Flex","schedule","payrollDeadline","processed","payrollUuid"],"mappings":";;;;;;;;AAYO,MAAMA,IAA0B,CAAC;AAAA,EACtC,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AACF,MAAoC;AAClC,QAAM,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,EAAA,IAASC,EAAA;AAChC,EAAAC,EAAQ,qBAAqB;AAC7B,QAAM,EAAE,EAAA,IAAMC,EAAe,qBAAqB;AAElD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,QACP;AAAA,UACE,QAAQ,CAAC,EAAE,WAAAC,QACT,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAClB,UAAA;AAAA,YAAA,gBAAAD,EAACP,GAAA,EACE,UAAA;AAAA,cAAAM,GAAW;AAAA,cAAU;AAAA,cAAIA,GAAW;AAAA,YAAA,GACvC;AAAA,8BACCN,GAAA,EACE,UAAAH,EAAa,KAAK,CAAAY,MAAYA,EAAS,SAASH,GAAW,eAAe,GACvE,QACFT,EAAa,KAAK,CAAAY,MAAYA,EAAS,SAASH,GAAW,eAAe,GACtE,WAAA,CACR;AAAA,UAAA,GACF;AAAA,UAEF,OAAO,EAAE,gBAAgB;AAAA,QAAA;AAAA,QAE3B;AAAA,UACE,OAAO,EAAE,gBAAgB;AAAA,UACzB,QAAQ,CAAC,EAAE,iBAAAI,EAAA,MAAsB,gBAAAN,EAACJ,GAAA,EAAM,UAAAU,GAAiB,qBAAmB,CAAE;AAAA,QAAA;AAAA,QAEhF;AAAA,UACE,OAAO,EAAE,gBAAgB;AAAA,UACzB,QAAQ,CAAC,EAAE,WAAAC,QACT,gBAAAP,EAACN,GAAA,EAAO,UAAY,EAAZa,IAAc,qBAAwB,oBAAN,EAA0B,CAAE;AAAA,QAAA;AAAA,MAExE;AAAA,MAEF,MAAMf;AAAA,MACN,OAAO,EAAE,mBAAmB;AAAA,MAC5B,UAAU,CAAC,EAAE,aAAAgB,EAAA,MACX,gBAAAR;AAAA,QAACL;AAAA,QAAA;AAAA,UACC,SAAS,MAAM;AACb,YAAAJ,EAAa,EAAE,WAAWiB,GAAc;AAAA,UAC1C;AAAA,UACA,OAAM;AAAA,UACN,SAAQ;AAAA,UAEP,YAAE,iBAAiB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB;AAAA,EAAA;AAIR;"}

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

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { usePayrollsSubmitMutation as u } from "@gusto/embedded-api/react-query/payrollsSubmit";
+import { usePayrollsSubmitMutation as u } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/payrollsSubmit.js";
 import { PayrollOverviewPresentation as a } from "./PayrollOverviewPresentation.js";
 import { componentEvents as r } from "../../../shared/constants.js";
 import { BaseComponent as c } from "../../Base/Base.js";

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

@@ -1,13 +1,16 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Flex as r } from "../../Common/Flex/Flex.js";
-import { useComponentContext as c } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+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 p = ({ onEdit: a, onSubmit: d }) => {
-  const { Alert: i, Button: n, Heading: o, Text: t } = c();
-  return /* @__PURE__ */ l(r, { flexDirection: "column", alignItems: "stretch", children: [
-    /* @__PURE__ */ l(r, { justifyContent: "space-between", children: [
+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__ */ l(r, { justifyContent: "flex-end", children: [
+      /* @__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" })
       ] })
@@ -63,6 +66,6 @@ const p = ({ onEdit: a, onSubmit: d }) => {
   ] });
 };
 export {
-  p as PayrollOverviewPresentation
+  x 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 { 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;"}

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

@@ -1,8 +1,9 @@
 import { BaseComponentInterface } from '../../Base/Base';
 interface RunPayrollProps extends Pick<BaseComponentInterface, 'onEvent'> {
     companyId: string;
-    Configuration: ({ onEvent, payrollId, }: Pick<BaseComponentInterface, 'onEvent'> & {
+    Configuration: ({ onEvent, payrollId, companyId, }: Pick<BaseComponentInterface, 'onEvent'> & {
         payrollId: string;
+        companyId: string;
     }) => React.JSX.Element;
     List: ({ companyId, onEvent, }: Pick<BaseComponentInterface, 'onEvent'> & {
         companyId: string;

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

@@ -1,4 +1,4 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import { useReducer as i } from "react";
 const P = () => ({
   currentPayrollId: void 0,
@@ -44,10 +44,10 @@ const P = () => ({
   const [{ isCalculated: s, currentPayrollId: e }, y] = i(
     p,
     P()
-  ), a = (t, u) => {
-    y({ type: t, payload: u }), c(t, u);
+  ), a = (o, u) => {
+    y({ type: o, payload: u }), c(o, u);
   };
-  return e ? s ? /* @__PURE__ */ o(d, { companyId: r, onEvent: a, payrollId: e }) : /* @__PURE__ */ o(l, { onEvent: a, payrollId: e }) : /* @__PURE__ */ o(n, { companyId: r, onEvent: a });
+  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 });
 };
 export {
   v as RunPayroll