@gusto/embedded-react-sdk 0.13.4 → 0.14.0

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

@@ -1,143 +1,178 @@
-import { jsxs as g, jsx as r } from "react/jsx-runtime";
-import { useTranslation as k } from "react-i18next";
-import { useFormatEmployeePayRate as A, getRegularHours as L, getOvertimeHours as M, formatHoursDisplay as D, getTotalPtoHours as v, getAdditionalEarnings as R, getReimbursements as F, calculateGrossPay as S } from "../helpers.js";
-import { useI18n as j } from "../../../i18n/I18n.js";
-import { Flex as h } from "../../Common/Flex/Flex.js";
-import { Grid as G } from "../../Common/Grid/Grid.js";
-import { useComponentContext as I } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { HamburgerMenu as O } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import _ from "../../../assets/icons/pencil.svg.js";
-import { formatNumberAsCurrency as y, firstLastName as V } from "../../../helpers/formattedStrings.js";
+import { jsxs as a, jsx as e, Fragment as I } from "react/jsx-runtime";
+import { useTranslation as M, Trans as k } from "react-i18next";
+import { useFormatEmployeePayRate as R, getRegularHours as S, getOvertimeHours as j, formatHoursDisplay as C, getTotalPtoHours as G, getAdditionalEarnings as O, getReimbursements as _, calculateGrossPay as z } from "../helpers.js";
+import { PayrollBlockerAlerts as K } from "../PayrollBlocker/PayrollBlockerAlerts.js";
+import V from "./PayrollConfigurationPresentation.module.scss.js";
+import { useI18n as W } from "../../../i18n/I18n.js";
+import { Flex as u, FlexItem as w } from "../../Common/Flex/Flex.js";
+import { Grid as q } from "../../Common/Grid/Grid.js";
+import { useComponentContext as J } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { HamburgerMenu as Q } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import X from "../../../assets/icons/pencil.svg.js";
+import { formatNumberAsCurrency as f, firstLastName as Y } from "../../../helpers/formattedStrings.js";
 import { parseDateStringToLocal as P } from "../../../helpers/dateFormatting.js";
-import { useLocale as q } from "../../../contexts/LocaleProvider/useLocale.js";
-import { DataView as z } from "../../Common/DataView/DataView.js";
-const J = ({
-  payPeriod: i,
-  locale: m,
-  t: s
+import { useLocale as Z } from "../../../contexts/LocaleProvider/useLocale.js";
+import { useLoadingIndicator as $ } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { DataView as ee } from "../../Common/DataView/DataView.js";
+const te = ({
+  payPeriod: s,
+  locale: c
 }) => {
-  if (i?.startDate && i.endDate) {
-    const c = P(i.startDate), u = P(i.endDate);
-    if (c && u) {
-      const d = c.toLocaleDateString(m, {
+  if (s?.startDate && s.endDate) {
+    const m = P(s.startDate), d = P(s.endDate);
+    if (m && d) {
+      const p = m.toLocaleDateString(c, {
         month: "long",
         day: "numeric"
-      }), p = u.toLocaleDateString(m, {
+      }), g = d.toLocaleDateString(c, {
         month: "short",
         day: "numeric",
         year: "numeric"
       });
-      return s("pageTitle", { startDate: d, endDate: p });
+      return { startDate: p, endDate: g };
     }
   }
-  return s("pageTitle", { startDate: "", endDate: "" });
-}, ae = ({
-  employeeCompensations: i,
-  employeeDetails: m,
-  payPeriod: s,
-  paySchedule: c,
-  onBack: u,
-  onEdit: d,
-  onCalculatePayroll: p,
+  return { startDate: "", endDate: "" };
+}, be = ({
+  employeeCompensations: s,
+  employeeDetails: c,
+  payPeriod: m,
+  paySchedule: d,
+  onEdit: p,
+  onCalculatePayroll: g,
   isOffCycle: T = !1,
-  alerts: f
+  alerts: y,
+  isPending: b,
+  payrollBlockers: D = []
 }) => {
-  const { Button: b, Heading: C, Text: o, Badge: w } = I();
-  j("Payroll.PayrollConfiguration");
-  const { t: n } = k("Payroll.PayrollConfiguration"), { locale: x } = q(), N = A(), a = new Map(m.map((e) => [e.uuid, e])), H = (e) => {
-    const t = a.get(e);
-    return t ? V({ first_name: t.firstName, last_name: t.lastName }) : null;
+  const { Button: x, Heading: h, Text: o, Badge: N, LoadingSpinner: L } = J();
+  W("Payroll.PayrollConfiguration");
+  const { t: n } = M("Payroll.PayrollConfiguration"), { locale: H } = Z(), { LoadingIndicator: U } = $(), A = R(), i = new Map(c.map((t) => [t.uuid, t])), E = (t) => {
+    const r = i.get(t);
+    return r ? Y({ first_name: r.firstName, last_name: r.lastName }) : null;
   };
-  return /* @__PURE__ */ g(h, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ g(h, { justifyContent: "space-between", alignItems: "center", children: [
-      /* @__PURE__ */ r(C, { as: "h1", children: J({ payPeriod: s, locale: x, t: n }) }),
-      /* @__PURE__ */ r(b, { title: n("calculatePayrollTitle"), onClick: p, children: n("calculatePayroll") })
-    ] }),
-    /* @__PURE__ */ r(o, { children: n("regularPayroll") }),
-    f && /* @__PURE__ */ r(G, { gap: 16, gridTemplateColumns: "1fr", children: f }),
-    /* @__PURE__ */ r(C, { as: "h3", children: n("hoursAndEarningsTitle") }),
-    /* @__PURE__ */ r(o, { children: n("hoursAndEarningsDescription") }),
-    /* @__PURE__ */ r(
-      z,
-      {
-        label: n("employeeCompensationsTitle"),
-        columns: [
-          {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.employees") }),
-            render: (e) => {
-              const t = a.get(e.employeeUuid || ""), l = N(t);
-              return /* @__PURE__ */ g(h, { flexDirection: "column", gap: 8, children: [
-                /* @__PURE__ */ r(o, { weight: "semibold", children: H(e.employeeUuid || "") }),
-                l && /* @__PURE__ */ r(o, { variant: "supporting", children: l }),
-                e.excluded && /* @__PURE__ */ r(w, { status: "warning", children: n("skippedBadge") })
-              ] });
-            }
-          },
-          {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.hours") }),
-            render: (e) => {
-              const t = L(e), l = M(e);
-              return /* @__PURE__ */ r(o, { children: D(t + l) });
-            }
-          },
-          {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.timeOff") }),
-            render: (e) => {
-              const t = v(e);
-              return /* @__PURE__ */ r(o, { children: D(t) });
-            }
-          },
-          {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.additionalEarnings") }),
-            render: (e) => {
-              const t = R(e);
-              return /* @__PURE__ */ r(o, { children: y(t) });
-            }
-          },
-          {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.reimbursements") }),
-            render: (e) => {
-              const t = F(e);
-              return /* @__PURE__ */ r(o, { children: y(t) });
-            }
-          },
+  return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ a(u, { justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ e(h, { as: "h1", children: n("pageTitle") }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          k,
           {
-            title: /* @__PURE__ */ r(o, { weight: "semibold", children: n("tableColumns.totalPay") }),
-            render: (e) => {
-              const t = a.get(e.employeeUuid || ""), l = t ? S(e, t, s?.startDate, c, T) : 0;
-              return /* @__PURE__ */ r(o, { children: y(l) });
-            }
+            i18nKey: "description",
+            t: n,
+            components: { dateWrapper: /* @__PURE__ */ e(o, { weight: "bold", as: "span" }) },
+            values: te({ payPeriod: m, locale: H })
           }
-        ],
-        data: i.filter((e) => {
-          const t = e.employeeUuid;
-          return t ? a.has(t) : !1;
-        }).sort((e, t) => {
-          const l = a.get(e.employeeUuid || ""), U = a.get(t.employeeUuid || ""), B = l?.lastName || "", E = U?.lastName || "";
-          return B.localeCompare(E);
-        }),
-        itemMenu: (e) => /* @__PURE__ */ r(
-          O,
-          {
-            items: [
-              {
-                label: n("editMenu.edit"),
-                icon: /* @__PURE__ */ r(_, { "aria-hidden": !0 }),
-                onClick: () => {
-                  const t = a.get(e.employeeUuid || "");
-                  t && d(t);
-                }
+        ) })
+      ] }),
+      /* @__PURE__ */ e(
+        x,
+        {
+          title: n("calculatePayrollTitle"),
+          onClick: g,
+          isDisabled: b,
+          children: n("calculatePayroll")
+        }
+      )
+    ] }),
+    y && /* @__PURE__ */ e(q, { gap: 16, gridTemplateColumns: "1fr", children: y }),
+    b ? /* @__PURE__ */ e(U, { children: /* @__PURE__ */ a(u, { flexDirection: "column", alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ e(L, { size: "lg" }),
+      /* @__PURE__ */ e(h, { as: "h4", children: n("loadingTitle") }),
+      /* @__PURE__ */ e(o, { children: n("loadingDescription") })
+    ] }) }) : /* @__PURE__ */ a(I, { children: [
+      /* @__PURE__ */ e("div", { className: V.payrollBlockerContainer, children: D.length > 0 && /* @__PURE__ */ e(K, { blockers: D }) }),
+      /* @__PURE__ */ a(w, { children: [
+        /* @__PURE__ */ e(h, { as: "h3", children: n("hoursAndEarningsTitle") }),
+        /* @__PURE__ */ e(o, { children: n("hoursAndEarningsDescription") })
+      ] }),
+      /* @__PURE__ */ e(
+        ee,
+        {
+          label: n("employeeCompensationsTitle"),
+          columns: [
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.employees") }),
+              render: (t) => {
+                const r = i.get(t.employeeUuid || ""), l = A(r);
+                return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 8, children: [
+                  /* @__PURE__ */ e(o, { weight: "semibold", children: E(t.employeeUuid || "") }),
+                  l && /* @__PURE__ */ e(o, { variant: "supporting", children: l }),
+                  t.excluded && /* @__PURE__ */ e(N, { status: "warning", children: n("skippedBadge") })
+                ] });
               }
-            ],
-            triggerLabel: n("editMenu.edit")
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ r(b, { title: n("backButtonTitle"), onClick: u, variant: "secondary", children: n("backButton") })
+            },
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.hours") }),
+              render: (t) => {
+                const r = S(t), l = j(t);
+                return /* @__PURE__ */ e(o, { children: C(r + l) });
+              }
+            },
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.timeOff") }),
+              render: (t) => {
+                const r = G(t);
+                return /* @__PURE__ */ e(o, { children: C(r) });
+              }
+            },
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.additionalEarnings") }),
+              render: (t) => {
+                const r = O(t);
+                return /* @__PURE__ */ e(o, { children: f(r) });
+              }
+            },
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.reimbursements") }),
+              render: (t) => {
+                const r = _(t);
+                return /* @__PURE__ */ e(o, { children: f(r) });
+              }
+            },
+            {
+              title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.totalPay") }),
+              render: (t) => {
+                const r = i.get(t.employeeUuid || ""), l = r ? z(
+                  t,
+                  r,
+                  m?.startDate,
+                  d,
+                  T
+                ) : 0;
+                return /* @__PURE__ */ e(o, { children: f(l) });
+              }
+            }
+          ],
+          data: s.filter((t) => {
+            const r = t.employeeUuid;
+            return r ? i.has(r) : !1;
+          }).sort((t, r) => {
+            const l = i.get(t.employeeUuid || ""), v = i.get(r.employeeUuid || ""), B = l?.lastName || "", F = v?.lastName || "";
+            return B.localeCompare(F);
+          }),
+          itemMenu: (t) => /* @__PURE__ */ e(
+            Q,
+            {
+              items: [
+                {
+                  label: n("editMenu.edit"),
+                  icon: /* @__PURE__ */ e(X, { "aria-hidden": !0 }),
+                  onClick: () => {
+                    const r = i.get(t.employeeUuid || "");
+                    r && p(r);
+                  }
+                }
+              ],
+              triggerLabel: n("editMenu.edit")
+            }
+          )
+        }
+      )
+    ] })
   ] });
 };
 export {
-  ae as PayrollConfigurationPresentation
+  be 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 type { ReactNode } from 'react'\nimport 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 type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, Grid } 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  alerts?: ReactNode\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  alerts,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\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      {alerts && (\n        <Grid gap={16} gridTemplateColumns=\"1fr\">\n          {alerts}\n        </Grid>\n      )}\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              const overtimeHours = getOvertimeHours(item)\n              return <Text>{formatHoursDisplay(hours + overtimeHours)}</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: PayrollEmployeeCompensationsType) => {\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","alerts","Button","Heading","Text","Badge","useComponentContext","useI18n","useTranslation","useLocale","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","jsx","Grid","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport 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 { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } 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'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\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 { startDate: startFormatted, endDate: endFormatted }\n    }\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onCalculatePayroll,\n  isOffCycle = false,\n  alerts,\n  isPending,\n  payrollBlockers = [],\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const { LoadingIndicator } = useLoadingIndicator()\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        <FlexItem>\n          <Heading as=\"h1\">{t('pageTitle')}</Heading>\n          <Text>\n            <Trans\n              i18nKey=\"description\"\n              t={t}\n              components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n              values={getPayrollConfigurationTitle({ payPeriod, locale })}\n            />\n          </Text>\n        </FlexItem>\n        <Button\n          title={t('calculatePayrollTitle')}\n          onClick={onCalculatePayroll}\n          isDisabled={isPending}\n        >\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      {alerts && (\n        <Grid gap={16} gridTemplateColumns=\"1fr\">\n          {alerts}\n        </Grid>\n      )}\n\n      {isPending ? (\n        <LoadingIndicator>\n          <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n            <LoadingSpinner size=\"lg\" />\n            <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n            <Text>{t('loadingDescription')}</Text>\n          </Flex>\n        </LoadingIndicator>\n      ) : (\n        <>\n          <div className={styles.payrollBlockerContainer}>\n            {payrollBlockers.length > 0 && <PayrollBlockerAlerts blockers={payrollBlockers} />}\n          </div>\n          <FlexItem>\n            <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n            <Text>{t('hoursAndEarningsDescription')}</Text>\n          </FlexItem>\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                  const overtimeHours = getOvertimeHours(item)\n                  return <Text>{formatHoursDisplay(hours + overtimeHours)}</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: PayrollEmployeeCompensationsType) => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  const calculatedGrossPay = employee\n                    ? calculateGrossPay(\n                        item,\n                        employee,\n                        payPeriod?.startDate,\n                        paySchedule,\n                        isOffCycle,\n                      )\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      )}\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onCalculatePayroll","isOffCycle","alerts","isPending","payrollBlockers","Button","Heading","Text","Badge","LoadingSpinner","useComponentContext","useI18n","t","useTranslation","useLocale","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","FlexItem","jsx","Trans","Grid","Fragment","styles","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAMA,KAA+B,CAAC;AAAA,EACpC,WAAAC;AAAA,EACA,QAAAC;AACF,MAGM;AACJ,MAAID,GAAW,aAAaA,EAAU,SAAS;AAC7C,UAAME,IAAYC,EAAuBH,EAAU,SAAS,GACtDI,IAAUD,EAAuBH,EAAU,OAAO;AAExD,QAAIE,KAAaE,GAAS;AACxB,YAAMC,IAAiBH,EAAU,mBAAmBD,GAAQ;AAAA,QAC1D,OAAO;AAAA,QACP,KAAK;AAAA,MAAA,CACN,GACKK,IAAeF,EAAQ,mBAAmBH,GAAQ;AAAA,QACtD,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AACD,aAAO,EAAE,WAAWI,GAAgB,SAASC,EAAA;AAAA,IAC/C;AAAA,EACF;AACA,SAAO,EAAE,WAAW,IAAI,SAAS,GAAA;AACnC,GAEaC,KAAmC,CAAC;AAAA,EAC/C,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAT;AAAA,EACA,aAAAU;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AACpB,MAA6C;AAC3C,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,OAAAC,GAAO,gBAAAC,EAAA,IAAmBC,EAAA;AACzD,EAAAC,EAAQ,8BAA8B;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,QAAAxB,EAAA,IAAWyB,EAAA,GACb,EAAE,kBAAAC,EAAA,IAAqBC,EAAA,GACvBC,IAAwBC,EAAA,GAExBC,IAAc,IAAI,IAAItB,EAAgB,IAAI,CAAAuB,MAAY,CAACA,EAAS,MAAMA,CAAQ,CAAC,CAAC,GAEhFC,IAAkB,CAACC,MAAyB;AAChD,UAAMF,IAAWD,EAAY,IAAIG,CAAY;AAC7C,WAAOF,IACHG,EAAc,EAAE,YAAYH,EAAS,WAAW,WAAWA,EAAS,SAAA,CAAU,IAC9E;AAAA,EACN;AAEA,SACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,WAAW,GAAE;AAAA,0BAChCL,GAAA,EACC,UAAA,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,GAAAhB;AAAA,YACA,YAAY,EAAE,aAAa,gBAAAe,EAACpB,KAAK,QAAO,QAAO,IAAG,OAAA,CAAO,EAAA;AAAA,YACzD,QAAQpB,GAA6B,EAAE,WAAAC,GAAW,QAAAC,GAAQ;AAAA,UAAA;AAAA,QAAA,EAC5D,CACF;AAAA,MAAA,GACF;AAAA,MACA,gBAAAsC;AAAA,QAACtB;AAAA,QAAA;AAAA,UACC,OAAOO,EAAE,uBAAuB;AAAA,UAChC,SAASZ;AAAA,UACT,YAAYG;AAAA,UAEX,YAAE,kBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACF;AAAA,IAECD,KACC,gBAAAyB,EAACE,GAAA,EAAK,KAAK,IAAI,qBAAoB,OAChC,UAAA3B,GACH;AAAA,IAGDC,IACC,gBAAAwB,EAACZ,GAAA,EACC,UAAA,gBAAAS,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAE,EAAClB,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,wBACzBH,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,cAAc,GAAE;AAAA,MACpC,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,oBAAoB,EAAA,CAAE;AAAA,IAAA,EAAA,CACjC,EAAA,CACF,IAEA,gBAAAY,EAAAM,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWI,EAAO,yBACpB,UAAA3B,EAAgB,SAAS,KAAK,gBAAAuB,EAACK,GAAA,EAAqB,UAAU5B,EAAA,CAAiB,GAClF;AAAA,wBACCsB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,uBAAuB,GAAE;AAAA,QAC7C,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,6BAA6B,EAAA,CAAE;AAAA,MAAA,GAC1C;AAAA,MAEA,gBAAAe;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,OAAOrB,EAAE,4BAA4B;AAAA,UACrC,SAAS;AAAA,YACP;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,wBAAwB,GAAE;AAAA,cAC5D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDC,IAAiBlB,EAAsBG,CAAQ;AACrD,uBACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,kBAAA,gBAAAE,EAACpB,KAAK,QAAO,YAAY,YAAgB2B,EAAK,gBAAgB,EAAE,GAAE;AAAA,kBACjEC,KAAkB,gBAAAR,EAACpB,GAAA,EAAK,SAAQ,cAAc,UAAA4B,GAAe;AAAA,kBAC7DD,EAAK,YAAY,gBAAAP,EAACnB,GAAA,EAAM,QAAO,WAAW,UAAAI,EAAE,cAAc,EAAA,CAAE;AAAA,gBAAA,GAC/D;AAAA,cAEJ;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,oBAAoB,GAAE;AAAA,cACxD,QAAQ,CAACsB,MAAgC;AACvC,sBAAME,IAAQC,EAAgBH,CAAI,GAC5BI,IAAgBC,EAAiBL,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBJ,IAAQE,CAAa,GAAE;AAAA,cAC1D;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAX,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,sBAAsB,GAAE;AAAA,cAC1D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMO,IAAWC,EAAiBR,CAAI;AACtC,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBC,CAAQ,GAAE;AAAA,cAC7C;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAd,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,iCAAiC,GAAE;AAAA,cACrE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMS,IAAWC,EAAsBV,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBF,CAAQ,GAAE;AAAA,cACjD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAhB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,6BAA6B,GAAE;AAAA,cACjE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMY,IAAiBC,EAAkBb,CAAI;AAC7C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBC,CAAc,GAAE;AAAA,cACvD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAnB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,uBAAuB,GAAE;AAAA,cAC3D,QAAQ,CAACsB,MAA2C;AAClD,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDc,IAAqB5B,IACvB6B;AAAA,kBACEf;AAAA,kBACAd;AAAA,kBACAhC,GAAW;AAAA,kBACXU;AAAA,kBACAG;AAAA,gBAAA,IAEF;AACJ,uBAAO,gBAAA0B,EAACpB,GAAA,EAAM,UAAAsC,EAAuBG,CAAkB,GAAE;AAAA,cAC3D;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMpD,EACH,OAAO,CAAAsD,MAAgB;AACtB,kBAAM5B,IAAe4B,EAAa;AAClC,mBAAK5B,IACEH,EAAY,IAAIG,CAAY,IADT;AAAA,UAE5B,CAAC,EACA,KAAK,CAAC6B,GAAGC,MAAM;AACd,kBAAMC,IAAYlC,EAAY,IAAIgC,EAAE,gBAAgB,EAAE,GAChDG,IAAYnC,EAAY,IAAIiC,EAAE,gBAAgB,EAAE,GAChDG,IAAYF,GAAW,YAAY,IACnCG,IAAYF,GAAW,YAAY;AACzC,mBAAOC,EAAU,cAAcC,CAAS;AAAA,UAC1C,CAAC;AAAA,UACH,UAAU,CAACtB,MACT,gBAAAP;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO7C,EAAE,eAAe;AAAA,kBACxB,MAAM,gBAAAe,EAAC+B,GAAA,EAAU,eAAW,GAAA,CAAC;AAAA,kBAC7B,SAAS,MAAM;AACb,0BAAMtC,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE;AACxD,oBAAId,KACFrB,EAAOqB,CAAQ;AAAA,kBAEnB;AAAA,gBAAA;AAAA,cACF;AAAA,cAEF,cAAcR,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA;AAAA,IAEJ,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}

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

@@ -0,0 +1,8 @@
+const o = "_payrollBlockerContainer_3mdns_1", l = {
+  payrollBlockerContainer: o
+};
+export {
+  l as default,
+  o as payrollBlockerContainer
+};
+//# sourceMappingURL=PayrollConfigurationPresentation.module.scss.js.map

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

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

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

@@ -2,68 +2,71 @@ import { jsx as n } from "react/jsx-runtime";
 import { useEmployeesGetSuspense as A } from "@gusto/embedded-api/react-query/employeesGet";
 import { usePayrollsUpdateMutation as O } from "@gusto/embedded-api/react-query/payrollsUpdate";
 import { usePreparedPayrollData as R } from "../usePreparedPayrollData.js";
-import { PayrollEditEmployeePresentation as S } from "./PayrollEditEmployeePresentation.js";
-import { componentEvents as l } from "../../../shared/constants.js";
-import { BaseComponent as U } from "../../Base/Base.js";
-import { useComponentDictionary as x } from "../../../i18n/I18n.js";
-import { useBase as Y } from "../../Base/useBase.js";
-function H(o) {
-  return /* @__PURE__ */ n(U, { ...o, children: /* @__PURE__ */ n(g, { ...o, children: o.children }) });
+import { PayrollEditEmployeePresentation as U } from "./PayrollEditEmployeePresentation.js";
+import { componentEvents as m } from "../../../shared/constants.js";
+import { BaseComponent as x } from "../../Base/Base.js";
+import { useComponentDictionary as Y } from "../../../i18n/I18n.js";
+import { useBase as g } from "../../Base/useBase.js";
+function G(o) {
+  return /* @__PURE__ */ n(x, { ...o, children: /* @__PURE__ */ n(N, { ...o, children: o.children }) });
 }
-const g = ({
+const N = ({
   employeeId: o,
   companyId: a,
   payrollId: s,
   onEvent: i,
   dictionary: p
 }) => {
-  x("Payroll.PayrollEditEmployee", p);
-  const { LoadingIndicator: y } = Y(), { data: c } = A({ employeeId: o }), { preparedPayroll: t, paySchedule: d, isLoading: f } = R({
+  Y("Payroll.PayrollEditEmployee", p);
+  const { LoadingIndicator: y, baseSubmitHandler: c } = g(), { data: d } = A({ employeeId: o }), { preparedPayroll: t, paySchedule: f, isLoading: u } = R({
     companyId: a,
     payrollId: s
-  }), { mutateAsync: P, isPending: u } = O(), m = c.employee, E = t?.employeeCompensations?.find(
+  }), { mutateAsync: P, isPending: E } = O(), l = d.employee, C = t?.employeeCompensations?.find(
     (e) => e.employeeUuid === o
-  ), C = ({
+  ), L = ({
     paymentMethod: e,
     ...r
   }) => ({
     ...r,
     ...e && e !== "Historical" ? { paymentMethod: e } : {},
     memo: r.memo || void 0
-  }), L = async (e) => {
-    const r = C(e), _ = await P({
-      request: {
-        companyId: a,
-        payrollId: s,
-        payrollUpdate: {
-          employeeCompensations: [r]
+  }), D = async (e) => {
+    const r = L(e);
+    await c(null, async () => {
+      const _ = await P({
+        request: {
+          companyId: a,
+          payrollId: s,
+          payrollUpdate: {
+            employeeCompensations: [r]
+          }
         }
-      }
+      });
+      i(m.RUN_PAYROLL_EMPLOYEE_SAVED, {
+        payrollPrepared: _.payrollPrepared,
+        employee: l
+      });
     });
-    i(l.RUN_PAYROLL_EMPLOYEE_SAVED, {
-      payrollPrepared: _.payrollPrepared,
-      employee: m
-    });
-  }, D = () => {
-    i(l.RUN_PAYROLL_EMPLOYEE_CANCELLED);
+  }, S = () => {
+    i(m.RUN_PAYROLL_EMPLOYEE_CANCELLED);
   };
-  return f ? /* @__PURE__ */ n(y, {}) : /* @__PURE__ */ n(
-    S,
+  return u ? /* @__PURE__ */ n(y, {}) : /* @__PURE__ */ n(
+    U,
     {
-      onSave: L,
-      onCancel: D,
-      employee: m,
-      isPending: u,
-      employeeCompensation: E,
+      onSave: D,
+      onCancel: S,
+      employee: l,
+      isPending: E,
+      employeeCompensation: C,
       fixedCompensationTypes: t?.fixedCompensationTypes || [],
       payPeriodStartDate: t?.payPeriod?.startDate,
-      paySchedule: d,
+      paySchedule: f,
       isOffCycle: t?.offCycle
     }
   );
 };
 export {
-  H as PayrollEditEmployee,
-  g as Root
+  G as PayrollEditEmployee,
+  N as Root
 };
 //# sourceMappingURL=PayrollEditEmployee.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollEditEmployee.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx"],"sourcesContent":["import { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { usePayrollsUpdateMutation } from '@gusto/embedded-api/react-query/payrollsUpdate'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/models/components/payrollupdate'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { PayrollEditEmployeePresentation } from './PayrollEditEmployeePresentation'\nimport { componentEvents } from '@/shared/constants'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useComponentDictionary } from '@/i18n'\nimport { useBase } from '@/components/Base/useBase'\n\ninterface PayrollEditEmployeeProps extends BaseComponentInterface<'Payroll.PayrollEditEmployee'> {\n  employeeId: string\n  companyId: string\n  payrollId: string\n}\n\nexport function PayrollEditEmployee(props: PayrollEditEmployeeProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  employeeId,\n  companyId,\n  payrollId,\n  onEvent,\n  dictionary,\n}: PayrollEditEmployeeProps) => {\n  useComponentDictionary('Payroll.PayrollEditEmployee', dictionary)\n\n  const { LoadingIndicator } = useBase()\n\n  const { data: employeeData } = useEmployeesGetSuspense({ employeeId })\n  const { preparedPayroll, paySchedule, isLoading } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const { mutateAsync: updatePayroll, isPending } = usePayrollsUpdateMutation()\n\n  const employee = employeeData.employee!\n\n  const employeeCompensation = preparedPayroll?.employeeCompensations?.find(\n    compensation => compensation.employeeUuid === employeeId,\n  )\n\n  const transformEmployeeCompensation = ({\n    paymentMethod,\n    ...compensation\n  }: PayrollEmployeeCompensationsType): PayrollUpdateEmployeeCompensations => {\n    return {\n      ...compensation,\n      ...(paymentMethod && paymentMethod !== 'Historical' ? { paymentMethod } : {}),\n      memo: compensation.memo || undefined,\n    }\n  }\n\n  const onSave = async (updatedCompensation: PayrollEmployeeCompensationsType) => {\n    const transformedCompensation = transformEmployeeCompensation(updatedCompensation)\n\n    const result = await updatePayroll({\n      request: {\n        companyId,\n        payrollId,\n        payrollUpdate: {\n          employeeCompensations: [transformedCompensation],\n        },\n      },\n    })\n\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, {\n      payrollPrepared: result.payrollPrepared,\n      employee,\n    })\n  }\n\n  const onCancel = () => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_CANCELLED)\n  }\n\n  if (isLoading) {\n    return <LoadingIndicator />\n  }\n\n  return (\n    <PayrollEditEmployeePresentation\n      onSave={onSave}\n      onCancel={onCancel}\n      employee={employee}\n      isPending={isPending}\n      employeeCompensation={employeeCompensation}\n      fixedCompensationTypes={preparedPayroll?.fixedCompensationTypes || []}\n      payPeriodStartDate={preparedPayroll?.payPeriod?.startDate}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n    />\n  )\n}\n"],"names":["PayrollEditEmployee","props","jsx","BaseComponent","Root","employeeId","companyId","payrollId","onEvent","dictionary","useComponentDictionary","LoadingIndicator","useBase","employeeData","useEmployeesGetSuspense","preparedPayroll","paySchedule","isLoading","usePreparedPayrollData","updatePayroll","isPending","usePayrollsUpdateMutation","employee","employeeCompensation","compensation","transformEmployeeCompensation","paymentMethod","onSave","updatedCompensation","transformedCompensation","result","componentEvents","onCancel","PayrollEditEmployeePresentation"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAoBC,GAA0D;AAC5F,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC;AAAA,EACnB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AACF,MAAgC;AAC9B,EAAAC,EAAuB,+BAA+BD,CAAU;AAEhE,QAAM,EAAE,kBAAAE,EAAA,IAAqBC,EAAA,GAEvB,EAAE,MAAMC,EAAA,IAAiBC,EAAwB,EAAE,YAAAT,GAAY,GAC/D,EAAE,iBAAAU,GAAiB,aAAAC,GAAa,WAAAC,EAAA,IAAcC,EAAuB;AAAA,IACzE,WAAAZ;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEK,EAAE,aAAaY,GAAe,WAAAC,EAAA,IAAcC,EAAA,GAE5CC,IAAWT,EAAa,UAExBU,IAAuBR,GAAiB,uBAAuB;AAAA,IACnE,CAAAS,MAAgBA,EAAa,iBAAiBnB;AAAA,EAAA,GAG1CoB,IAAgC,CAAC;AAAA,IACrC,eAAAC;AAAA,IACA,GAAGF;AAAA,EAAA,OAEI;AAAA,IACL,GAAGA;AAAA,IACH,GAAIE,KAAiBA,MAAkB,eAAe,EAAE,eAAAA,EAAA,IAAkB,CAAA;AAAA,IAC1E,MAAMF,EAAa,QAAQ;AAAA,EAAA,IAIzBG,IAAS,OAAOC,MAA0D;AAC9E,UAAMC,IAA0BJ,EAA8BG,CAAmB,GAE3EE,IAAS,MAAMX,EAAc;AAAA,MACjC,SAAS;AAAA,QACP,WAAAb;AAAA,QACA,WAAAC;AAAA,QACA,eAAe;AAAA,UACb,uBAAuB,CAACsB,CAAuB;AAAA,QAAA;AAAA,MACjD;AAAA,IACF,CACD;AAED,IAAArB,EAAQuB,EAAgB,4BAA4B;AAAA,MAClD,iBAAiBD,EAAO;AAAA,MACxB,UAAAR;AAAA,IAAA,CACD;AAAA,EACH,GAEMU,IAAW,MAAM;AACrB,IAAAxB,EAAQuB,EAAgB,8BAA8B;AAAA,EACxD;AAEA,SAAId,sBACMN,GAAA,EAAiB,IAIzB,gBAAAT;AAAA,IAAC+B;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,UAAAK;AAAA,MACA,UAAAV;AAAA,MACA,WAAAF;AAAA,MACA,sBAAAG;AAAA,MACA,wBAAwBR,GAAiB,0BAA0B,CAAA;AAAA,MACnE,oBAAoBA,GAAiB,WAAW;AAAA,MAChD,aAAAC;AAAA,MACA,YAAYD,GAAiB;AAAA,IAAA;AAAA,EAAA;AAGnC;"}
+{"version":3,"file":"PayrollEditEmployee.js","sources":["../../../../src/components/Payroll/PayrollEditEmployee/PayrollEditEmployee.tsx"],"sourcesContent":["import { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport { usePayrollsUpdateMutation } from '@gusto/embedded-api/react-query/payrollsUpdate'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/models/components/payrollupdate'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { PayrollEditEmployeePresentation } from './PayrollEditEmployeePresentation'\nimport { componentEvents } from '@/shared/constants'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useComponentDictionary } from '@/i18n'\nimport { useBase } from '@/components/Base/useBase'\n\ninterface PayrollEditEmployeeProps extends BaseComponentInterface<'Payroll.PayrollEditEmployee'> {\n  employeeId: string\n  companyId: string\n  payrollId: string\n}\n\nexport function PayrollEditEmployee(props: PayrollEditEmployeeProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  employeeId,\n  companyId,\n  payrollId,\n  onEvent,\n  dictionary,\n}: PayrollEditEmployeeProps) => {\n  useComponentDictionary('Payroll.PayrollEditEmployee', dictionary)\n\n  const { LoadingIndicator, baseSubmitHandler } = useBase()\n\n  const { data: employeeData } = useEmployeesGetSuspense({ employeeId })\n  const { preparedPayroll, paySchedule, isLoading } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const { mutateAsync: updatePayroll, isPending } = usePayrollsUpdateMutation()\n\n  const employee = employeeData.employee!\n\n  const employeeCompensation = preparedPayroll?.employeeCompensations?.find(\n    compensation => compensation.employeeUuid === employeeId,\n  )\n\n  const transformEmployeeCompensation = ({\n    paymentMethod,\n    ...compensation\n  }: PayrollEmployeeCompensationsType): PayrollUpdateEmployeeCompensations => {\n    return {\n      ...compensation,\n      ...(paymentMethod && paymentMethod !== 'Historical' ? { paymentMethod } : {}),\n      memo: compensation.memo || undefined,\n    }\n  }\n\n  const onSave = async (updatedCompensation: PayrollEmployeeCompensationsType) => {\n    const transformedCompensation = transformEmployeeCompensation(updatedCompensation)\n    await baseSubmitHandler(null, async () => {\n      const result = await updatePayroll({\n        request: {\n          companyId,\n          payrollId,\n          payrollUpdate: {\n            employeeCompensations: [transformedCompensation],\n          },\n        },\n      })\n\n      onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, {\n        payrollPrepared: result.payrollPrepared,\n        employee,\n      })\n    })\n  }\n\n  const onCancel = () => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_CANCELLED)\n  }\n\n  if (isLoading) {\n    return <LoadingIndicator />\n  }\n\n  return (\n    <PayrollEditEmployeePresentation\n      onSave={onSave}\n      onCancel={onCancel}\n      employee={employee}\n      isPending={isPending}\n      employeeCompensation={employeeCompensation}\n      fixedCompensationTypes={preparedPayroll?.fixedCompensationTypes || []}\n      payPeriodStartDate={preparedPayroll?.payPeriod?.startDate}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n    />\n  )\n}\n"],"names":["PayrollEditEmployee","props","jsx","BaseComponent","Root","employeeId","companyId","payrollId","onEvent","dictionary","useComponentDictionary","LoadingIndicator","baseSubmitHandler","useBase","employeeData","useEmployeesGetSuspense","preparedPayroll","paySchedule","isLoading","usePreparedPayrollData","updatePayroll","isPending","usePayrollsUpdateMutation","employee","employeeCompensation","compensation","transformEmployeeCompensation","paymentMethod","onSave","updatedCompensation","transformedCompensation","result","componentEvents","onCancel","PayrollEditEmployeePresentation"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAoBC,GAA0D;AAC5F,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEO,MAAMG,IAAO,CAAC;AAAA,EACnB,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AACF,MAAgC;AAC9B,EAAAC,EAAuB,+BAA+BD,CAAU;AAEhE,QAAM,EAAE,kBAAAE,GAAkB,mBAAAC,EAAA,IAAsBC,EAAA,GAE1C,EAAE,MAAMC,EAAA,IAAiBC,EAAwB,EAAE,YAAAV,GAAY,GAC/D,EAAE,iBAAAW,GAAiB,aAAAC,GAAa,WAAAC,EAAA,IAAcC,EAAuB;AAAA,IACzE,WAAAb;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEK,EAAE,aAAaa,GAAe,WAAAC,EAAA,IAAcC,EAAA,GAE5CC,IAAWT,EAAa,UAExBU,IAAuBR,GAAiB,uBAAuB;AAAA,IACnE,CAAAS,MAAgBA,EAAa,iBAAiBpB;AAAA,EAAA,GAG1CqB,IAAgC,CAAC;AAAA,IACrC,eAAAC;AAAA,IACA,GAAGF;AAAA,EAAA,OAEI;AAAA,IACL,GAAGA;AAAA,IACH,GAAIE,KAAiBA,MAAkB,eAAe,EAAE,eAAAA,EAAA,IAAkB,CAAA;AAAA,IAC1E,MAAMF,EAAa,QAAQ;AAAA,EAAA,IAIzBG,IAAS,OAAOC,MAA0D;AAC9E,UAAMC,IAA0BJ,EAA8BG,CAAmB;AACjF,UAAMjB,EAAkB,MAAM,YAAY;AACxC,YAAMmB,IAAS,MAAMX,EAAc;AAAA,QACjC,SAAS;AAAA,UACP,WAAAd;AAAA,UACA,WAAAC;AAAA,UACA,eAAe;AAAA,YACb,uBAAuB,CAACuB,CAAuB;AAAA,UAAA;AAAA,QACjD;AAAA,MACF,CACD;AAED,MAAAtB,EAAQwB,EAAgB,4BAA4B;AAAA,QAClD,iBAAiBD,EAAO;AAAA,QACxB,UAAAR;AAAA,MAAA,CACD;AAAA,IACH,CAAC;AAAA,EACH,GAEMU,IAAW,MAAM;AACrB,IAAAzB,EAAQwB,EAAgB,8BAA8B;AAAA,EACxD;AAEA,SAAId,sBACMP,GAAA,EAAiB,IAIzB,gBAAAT;AAAA,IAACgC;AAAA,IAAA;AAAA,MACC,QAAAN;AAAA,MACA,UAAAK;AAAA,MACA,UAAAV;AAAA,MACA,WAAAF;AAAA,MACA,sBAAAG;AAAA,MACA,wBAAwBR,GAAiB,0BAA0B,CAAA;AAAA,MACnE,oBAAoBA,GAAiB,WAAW;AAAA,MAChD,aAAAC;AAAA,MACA,YAAYD,GAAiB;AAAA,IAAA;AAAA,EAAA;AAGnC;"}

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

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

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

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