@gusto/embedded-react-sdk 0.13.3 → 0.14.0

package/dist/components/Payroll/PayrollBlocker/payrollHelpers.js

@@ -0,0 +1,39 @@
+import { PayrollBlockersError as s } from "@gusto/embedded-api/models/errors/payrollblockerserror";
+import { UnprocessableEntityErrorObject1 as l } from "@gusto/embedded-api/models/errors/unprocessableentityerrorobject1";
+function t(r) {
+  return typeof r == "object" && r !== null && "key" in r && typeof r.key == "string";
+}
+function c(r) {
+  return r instanceof s;
+}
+function a(r) {
+  return r instanceof l && Array.isArray(r.errors) && r.errors.some((o) => o.category === "payroll_blocker");
+}
+function y(r) {
+  return c(r) ? !r.errors || r.errors.length === 0 ? [] : r.errors.map((e) => ({ key: t(e.metadata) ? e.metadata.key : e.errorKey || "unknown", message: e.message })) : a(r) ? r.errors.filter((e) => e.category === "payroll_blocker").map((e) => ({ key: t(e.metadata) ? e.metadata.key : e.errorKey || "unknown", message: e.message })) : [];
+}
+const i = (r) => r instanceof s ? !0 : r instanceof l ? Array.isArray(r.errors) && r.errors.some((o) => o.category === "payroll_blocker") : !1, f = async (r) => {
+  try {
+    return await r(), { success: !0, blockers: [] };
+  } catch (o) {
+    if (i(o))
+      return { success: !1, blockers: y(o) };
+    throw o;
+  }
+};
+function b(r) {
+  return {
+    titleKey: `PayrollBlocker:blockers.${r}.title`,
+    descriptionKey: `PayrollBlocker:blockers.${r}.description`,
+    helpTextKey: `PayrollBlocker:blockers.${r}.helpText`,
+    defaultActionKey: `PayrollBlocker:blockers.${r}.defaultAction`
+  };
+}
+export {
+  b as getBlockerTranslationKeys,
+  c as isPayrollBlockersError,
+  a as isUnprocessableEntityWithPayrollBlockers,
+  y as parsePayrollBlockersFromError,
+  f as payrollSubmitHandler
+};
+//# sourceMappingURL=payrollHelpers.js.map

package/dist/components/Payroll/PayrollBlocker/payrollHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"payrollHelpers.js","sources":["../../../../src/components/Payroll/PayrollBlocker/payrollHelpers.ts"],"sourcesContent":["import { PayrollBlockersError } from '@gusto/embedded-api/models/errors/payrollblockerserror'\nimport { UnprocessableEntityErrorObject1 } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject1'\n\nfunction hasMetadataKey(metadata: unknown): metadata is { key: string } {\n  return (\n    typeof metadata === 'object' &&\n    metadata !== null &&\n    'key' in metadata &&\n    typeof (metadata as { key: unknown }).key === 'string'\n  )\n}\n\nexport interface ApiPayrollBlocker {\n  key: string\n  message?: string\n}\n\nexport function isPayrollBlockersError(error: unknown): error is PayrollBlockersError {\n  return error instanceof PayrollBlockersError\n}\n\nexport function isUnprocessableEntityWithPayrollBlockers(\n  error: unknown,\n): error is UnprocessableEntityErrorObject1 {\n  return (\n    error instanceof UnprocessableEntityErrorObject1 &&\n    Array.isArray(error.errors) &&\n    error.errors.some(err => err.category === 'payroll_blocker')\n  )\n}\n\nexport function parsePayrollBlockersFromError(error: unknown): ApiPayrollBlocker[] {\n  // Handle PayrollBlockersError (dedicated blocker error type)\n  if (isPayrollBlockersError(error)) {\n    if (!error.errors || error.errors.length === 0) {\n      return []\n    }\n\n    const blockers = error.errors.map(err => {\n      const key = hasMetadataKey(err.metadata) ? err.metadata.key : err.errorKey || 'unknown'\n\n      return { key, message: err.message }\n    })\n\n    return blockers\n  }\n\n  // Handle UnprocessableEntityErrorObject1 with payroll blockers\n  if (isUnprocessableEntityWithPayrollBlockers(error)) {\n    const blockers = error.errors\n      .filter(err => err.category === 'payroll_blocker')\n      .map(err => {\n        const key = hasMetadataKey(err.metadata) ? err.metadata.key : err.errorKey || 'unknown'\n\n        return { key, message: err.message }\n      })\n\n    return blockers\n  }\n\n  return []\n}\n\ntype PayrollBlockerError = PayrollBlockersError | UnprocessableEntityErrorObject1\n\nconst hasPayrollBlockers = (error: unknown): error is PayrollBlockerError => {\n  if (error instanceof PayrollBlockersError) {\n    return true\n  }\n  if (error instanceof UnprocessableEntityErrorObject1) {\n    return (\n      Array.isArray(error.errors) && error.errors.some(err => err.category === 'payroll_blocker')\n    )\n  }\n  return false\n}\n\nexport interface PayrollSubmitResult {\n  success: boolean\n  blockers: ApiPayrollBlocker[]\n}\n\n/**\n * Direct submit handler for payroll operations that handles payroll blockers\n * Returns blockers if found, otherwise throws the error for caller to handle\n */\nexport const payrollSubmitHandler = async (\n  payrollHandler: () => Promise<void>,\n): Promise<PayrollSubmitResult> => {\n  try {\n    await payrollHandler()\n    return { success: true, blockers: [] }\n  } catch (error: unknown) {\n    if (hasPayrollBlockers(error)) {\n      const blockers = parsePayrollBlockersFromError(error)\n      return { success: false, blockers }\n    }\n\n    // For non-payroll errors, re-throw\n    throw error\n  }\n}\n\n/**\n * Get translation keys for a blocker - use these in components with useTranslation\n */\nexport function getBlockerTranslationKeys(key: string) {\n  return {\n    titleKey: `PayrollBlocker:blockers.${key}.title`,\n    descriptionKey: `PayrollBlocker:blockers.${key}.description`,\n    helpTextKey: `PayrollBlocker:blockers.${key}.helpText`,\n    defaultActionKey: `PayrollBlocker:blockers.${key}.defaultAction`,\n  }\n}\n"],"names":["hasMetadataKey","metadata","isPayrollBlockersError","error","PayrollBlockersError","isUnprocessableEntityWithPayrollBlockers","UnprocessableEntityErrorObject1","err","parsePayrollBlockersFromError","hasPayrollBlockers","payrollSubmitHandler","payrollHandler","getBlockerTranslationKeys","key"],"mappings":";;AAGA,SAASA,EAAeC,GAAgD;AACtE,SACE,OAAOA,KAAa,YACpBA,MAAa,QACb,SAASA,KACT,OAAQA,EAA8B,OAAQ;AAElD;AAOO,SAASC,EAAuBC,GAA+C;AACpF,SAAOA,aAAiBC;AAC1B;AAEO,SAASC,EACdF,GAC0C;AAC1C,SACEA,aAAiBG,KACjB,MAAM,QAAQH,EAAM,MAAM,KAC1BA,EAAM,OAAO,KAAK,CAAAI,MAAOA,EAAI,aAAa,iBAAiB;AAE/D;AAEO,SAASC,EAA8BL,GAAqC;AAEjF,SAAID,EAAuBC,CAAK,IAC1B,CAACA,EAAM,UAAUA,EAAM,OAAO,WAAW,IACpC,CAAA,IAGQA,EAAM,OAAO,IAAI,CAAAI,OAGzB,EAAE,KAFGP,EAAeO,EAAI,QAAQ,IAAIA,EAAI,SAAS,MAAMA,EAAI,YAAY,WAEhE,SAASA,EAAI,QAAA,EAC5B,IAMCF,EAAyCF,CAAK,IAC/BA,EAAM,OACpB,OAAO,CAAAI,MAAOA,EAAI,aAAa,iBAAiB,EAChD,IAAI,CAAAA,OAGI,EAAE,KAFGP,EAAeO,EAAI,QAAQ,IAAIA,EAAI,SAAS,MAAMA,EAAI,YAAY,WAEhE,SAASA,EAAI,QAAA,EAC5B,IAKE,CAAA;AACT;AAIA,MAAME,IAAqB,CAACN,MACtBA,aAAiBC,IACZ,KAELD,aAAiBG,IAEjB,MAAM,QAAQH,EAAM,MAAM,KAAKA,EAAM,OAAO,KAAK,CAAAI,MAAOA,EAAI,aAAa,iBAAiB,IAGvF,IAYIG,IAAuB,OAClCC,MACiC;AACjC,MAAI;AACF,iBAAMA,EAAA,GACC,EAAE,SAAS,IAAM,UAAU,CAAA,EAAC;AAAA,EACrC,SAASR,GAAgB;AACvB,QAAIM,EAAmBN,CAAK;AAE1B,aAAO,EAAE,SAAS,IAAO,UADRK,EAA8BL,CAAK,EAC3B;AAI3B,UAAMA;AAAA,EACR;AACF;AAKO,SAASS,EAA0BC,GAAa;AACrD,SAAO;AAAA,IACL,UAAU,2BAA2BA,CAAG;AAAA,IACxC,gBAAgB,2BAA2BA,CAAG;AAAA,IAC9C,aAAa,2BAA2BA,CAAG;AAAA,IAC3C,kBAAkB,2BAA2BA,CAAG;AAAA,EAAA;AAEpD;"}

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

@@ -1,72 +1,90 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useEffect as D } from "react";
-import { useEmployeesListSuspense as h } from "@gusto/embedded-api/react-query/employeesList";
-import { usePayrollsGetSuspense as E } from "@gusto/embedded-api/react-query/payrollsGet";
-import { usePayrollsCalculateMutation as A } from "@gusto/embedded-api/react-query/payrollsCalculate";
-import { PayrollProcessingRequestStatus as n } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
-import { usePreparedPayrollData as S } from "../usePreparedPayrollData.js";
-import { PayrollConfigurationPresentation as _ } from "./PayrollConfigurationPresentation.js";
-import { BaseComponent as O } from "../../Base/Base.js";
-import { useBase as q } from "../../Base/useBase.js";
-import { componentEvents as s } from "../../../shared/constants.js";
-import { useComponentDictionary as w, useI18n as B } from "../../../i18n/I18n.js";
-function H(o) {
-  return /* @__PURE__ */ t(O, { ...o, children: /* @__PURE__ */ t(U, { ...o, children: o.children }) });
+import { jsx as u } from "react/jsx-runtime";
+import { useState as f, useEffect as E } from "react";
+import { useEmployeesListSuspense as A } from "@gusto/embedded-api/react-query/employeesList";
+import { usePayrollsGetSuspense as D } from "@gusto/embedded-api/react-query/payrollsGet";
+import { usePayrollsCalculateMutation as _ } from "@gusto/embedded-api/react-query/payrollsCalculate";
+import { PayrollProcessingRequestStatus as m } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
+import { useTranslation as b } from "react-i18next";
+import { usePreparedPayrollData as q } from "../usePreparedPayrollData.js";
+import { payrollSubmitHandler as O } from "../PayrollBlocker/payrollHelpers.js";
+import { PayrollConfigurationPresentation as k } from "./PayrollConfigurationPresentation.js";
+import { BaseComponent as B } from "../../Base/Base.js";
+import { componentEvents as c } from "../../../shared/constants.js";
+import { useComponentDictionary as N, useI18n as U } from "../../../i18n/I18n.js";
+import { useBase as Y } from "../../Base/useBase.js";
+const x = (e) => e?.status === m.Calculating, T = (e) => e?.status === m.CalculateSuccess;
+function $(e) {
+  return /* @__PURE__ */ u(B, { ...e, children: /* @__PURE__ */ u(F, { ...e, children: e.children }) });
 }
-const U = ({
-  onEvent: o,
-  companyId: e,
-  payrollId: a,
-  dictionary: u,
-  alerts: c
+const F = ({
+  onEvent: e,
+  companyId: l,
+  payrollId: s,
+  dictionary: y,
+  alerts: P
 }) => {
-  w("Payroll.PayrollConfiguration", u), B("Payroll.PayrollConfiguration");
-  const { LoadingIndicator: m } = q(), { data: l } = E(
+  N("Payroll.PayrollConfiguration", y), U("Payroll.PayrollConfiguration");
+  const { t: p } = b("Payroll.PayrollConfiguration"), { baseSubmitHandler: g } = Y(), [o, r] = f(!1), [C, i] = f([]), { data: d } = A({
+    companyId: l
+  }), { data: t } = D(
     {
-      companyId: e,
-      payrollId: a
+      companyId: l,
+      payrollId: s,
+      include: ["taxes", "benefits", "deductions"]
     },
-    { refetchInterval: 5e3 }
-  ), { data: p } = h({
-    companyId: e
-  }), { mutateAsync: y } = A(), {
-    preparedPayroll: r,
-    paySchedule: f,
-    isLoading: P
-  } = S({
-    companyId: e,
-    payrollId: a
-  }), C = () => {
-    o(s.RUN_PAYROLL_BACK);
-  }, d = async () => {
-    await y({
-      request: {
-        companyId: e,
-        payrollId: a
-      }
+    { refetchInterval: o ? 5e3 : !1 }
+  ), { mutateAsync: S } = _(), {
+    preparedPayroll: n,
+    paySchedule: L,
+    isLoading: R
+  } = q({
+    companyId: l,
+    payrollId: s
+  }), h = async () => {
+    i([]), await g({}, async () => {
+      const a = await O(async () => {
+        await S({
+          request: {
+            companyId: l,
+            payrollId: s
+          }
+        }), r(!0);
+      });
+      !a.success && a.blockers.length > 0 && i(a.blockers);
     });
-  }, L = (R) => {
-    o(s.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId: R.uuid });
-  }, g = l.payrollShow?.processingRequest?.status === n.Calculating, i = l.payrollShow?.processingRequest?.status === n.CalculateSuccess;
-  return D(() => {
-    i && o(s.RUN_PAYROLL_CALCULATED);
-  }, [i, o]), P || g ? /* @__PURE__ */ t(m, {}) : /* @__PURE__ */ t(
-    _,
+  }, w = (a) => {
+    e(c.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: a.uuid });
+  };
+  return E(() => {
+    x(t.payrollShow?.processingRequest) && !o && r(!0), o && T(t.payrollShow?.processingRequest) && (e(c.RUN_PAYROLL_CALCULATED, {
+      payrollId: s,
+      alert: { type: "success", title: p("alerts.progressSaved") }
+    }), i([]), r(!1)), o && t.payrollShow?.processingRequest?.status === m.ProcessingFailed && (e(c.RUN_PAYROLL_PROCESSING_FAILED), r(!1));
+  }, [
+    t.payrollShow?.processingRequest,
+    o,
+    e,
+    p,
+    s,
+    t.payrollShow?.calculatedAt
+  ]), /* @__PURE__ */ u(
+    k,
     {
-      onBack: C,
-      onCalculatePayroll: d,
-      onEdit: L,
-      employeeCompensations: r?.employeeCompensations || [],
-      employeeDetails: p.showEmployees || [],
-      payPeriod: r?.payPeriod,
-      paySchedule: f,
-      isOffCycle: r?.offCycle,
-      alerts: c
+      onCalculatePayroll: h,
+      onEdit: w,
+      employeeCompensations: n?.employeeCompensations || [],
+      employeeDetails: d.showEmployees || [],
+      payPeriod: n?.payPeriod,
+      paySchedule: L,
+      isOffCycle: n?.offCycle,
+      alerts: P,
+      isPending: o || R,
+      payrollBlockers: C
     }
   );
 };
 export {
-  H as PayrollConfiguration,
-  U as Root
+  $ as PayrollConfiguration,
+  F as Root
 };
 //# sourceMappingURL=PayrollConfiguration.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfiguration.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx"],"sourcesContent":["import { useEffect, type ReactNode } from 'react'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { usePayrollsCalculateMutation } from '@gusto/embedded-api/react-query/payrollsCalculate'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport { PayrollProcessingRequestStatus } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {\n  companyId: string\n  payrollId: string\n  alerts?: ReactNode\n}\n\nexport function PayrollConfiguration(props: PayrollConfigurationProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  onEvent,\n  companyId,\n  payrollId,\n  dictionary,\n  alerts,\n}: PayrollConfigurationProps) => {\n  useComponentDictionary('Payroll.PayrollConfiguration', dictionary)\n  useI18n('Payroll.PayrollConfiguration')\n\n  const { LoadingIndicator } = useBase()\n\n  const { data: payrollData } = usePayrollsGetSuspense(\n    {\n      companyId,\n      payrollId,\n    },\n    { refetchInterval: 5_000 },\n  )\n\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { mutateAsync: calculatePayroll } = usePayrollsCalculateMutation()\n\n  const {\n    preparedPayroll,\n    paySchedule,\n    isLoading: isPreparedPayrollDataLoading,\n  } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const onBack = () => {\n    onEvent(componentEvents.RUN_PAYROLL_BACK)\n  }\n  const onCalculatePayroll = async () => {\n    await calculatePayroll({\n      request: {\n        companyId,\n        payrollId,\n      },\n    })\n  }\n  const onEdit = (employee: Employee) => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId: employee.uuid })\n  }\n\n  const isCalculating =\n    payrollData.payrollShow?.processingRequest?.status ===\n    PayrollProcessingRequestStatus.Calculating\n  const isCalculated =\n    payrollData.payrollShow?.processingRequest?.status ===\n    PayrollProcessingRequestStatus.CalculateSuccess\n\n  useEffect(() => {\n    if (isCalculated) {\n      onEvent(componentEvents.RUN_PAYROLL_CALCULATED)\n    }\n  }, [isCalculated, onEvent])\n\n  if (isPreparedPayrollDataLoading || isCalculating) {\n    return <LoadingIndicator />\n  }\n\n  return (\n    <PayrollConfigurationPresentation\n      onBack={onBack}\n      onCalculatePayroll={onCalculatePayroll}\n      onEdit={onEdit}\n      employeeCompensations={preparedPayroll?.employeeCompensations || []}\n      employeeDetails={employeeData.showEmployees || []}\n      payPeriod={preparedPayroll?.payPeriod}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n      alerts={alerts}\n    />\n  )\n}\n"],"names":["PayrollConfiguration","props","jsx","BaseComponent","Root","onEvent","companyId","payrollId","dictionary","alerts","useComponentDictionary","useI18n","LoadingIndicator","useBase","payrollData","usePayrollsGetSuspense","employeeData","useEmployeesListSuspense","calculatePayroll","usePayrollsCalculateMutation","preparedPayroll","paySchedule","isPreparedPayrollDataLoading","usePreparedPayrollData","onBack","componentEvents","onCalculatePayroll","onEdit","employee","isCalculating","PayrollProcessingRequestStatus","isCalculated","useEffect","PayrollConfigurationPresentation"],"mappings":";;;;;;;;;;;;AAoBO,SAASA,EAAqBC,GAA2D;AAC9F,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,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAiC;AAC/B,EAAAC,EAAuB,gCAAgCF,CAAU,GACjEG,EAAQ,8BAA8B;AAEtC,QAAM,EAAE,kBAAAC,EAAA,IAAqBC,EAAA,GAEvB,EAAE,MAAMC,EAAA,IAAgBC;AAAA,IAC5B;AAAA,MACE,WAAAT;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,IAEF,EAAE,iBAAiB,IAAA;AAAA,EAAM,GAGrB,EAAE,MAAMS,EAAA,IAAiBC,EAAyB;AAAA,IACtD,WAAAX;AAAA,EAAA,CACD,GAEK,EAAE,aAAaY,EAAA,IAAqBC,EAAA,GAEpC;AAAA,IACJ,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAWC;AAAA,EAAA,IACTC,EAAuB;AAAA,IACzB,WAAAjB;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEKiB,IAAS,MAAM;AACnB,IAAAnB,EAAQoB,EAAgB,gBAAgB;AAAA,EAC1C,GACMC,IAAqB,YAAY;AACrC,UAAMR,EAAiB;AAAA,MACrB,SAAS;AAAA,QACP,WAAAZ;AAAA,QACA,WAAAC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH,GACMoB,IAAS,CAACC,MAAuB;AACrC,IAAAvB,EAAQoB,EAAgB,6BAA6B,EAAE,YAAYG,EAAS,MAAM;AAAA,EACpF,GAEMC,IACJf,EAAY,aAAa,mBAAmB,WAC5CgB,EAA+B,aAC3BC,IACJjB,EAAY,aAAa,mBAAmB,WAC5CgB,EAA+B;AAQjC,SANAE,EAAU,MAAM;AACd,IAAID,KACF1B,EAAQoB,EAAgB,sBAAsB;AAAA,EAElD,GAAG,CAACM,GAAc1B,CAAO,CAAC,GAEtBiB,KAAgCO,sBAC1BjB,GAAA,EAAiB,IAIzB,gBAAAV;AAAA,IAAC+B;AAAA,IAAA;AAAA,MACC,QAAAT;AAAA,MACA,oBAAAE;AAAA,MACA,QAAAC;AAAA,MACA,uBAAuBP,GAAiB,yBAAyB,CAAA;AAAA,MACjE,iBAAiBJ,EAAa,iBAAiB,CAAA;AAAA,MAC/C,WAAWI,GAAiB;AAAA,MAC5B,aAAAC;AAAA,MACA,YAAYD,GAAiB;AAAA,MAC7B,QAAAX;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollConfiguration.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { usePayrollsCalculateMutation } from '@gusto/embedded-api/react-query/payrollsCalculate'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollProcessingRequest } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { PayrollProcessingRequestStatus } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { useTranslation } from 'react-i18next'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { payrollSubmitHandler, type ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { useBase } from '@/components/Base'\n\nconst isCalculating = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.Calculating\nconst isCalculated = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.CalculateSuccess\n\ninterface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {\n  companyId: string\n  payrollId: string\n  alerts?: ReactNode\n}\n\nexport function PayrollConfiguration(props: PayrollConfigurationProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  onEvent,\n  companyId,\n  payrollId,\n  dictionary,\n  alerts,\n}: PayrollConfigurationProps) => {\n  useComponentDictionary('Payroll.PayrollConfiguration', dictionary)\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { baseSubmitHandler } = useBase()\n\n  const [isPolling, setIsPolling] = useState(false)\n  const [payrollBlockers, setPayrollBlockers] = useState<ApiPayrollBlocker[]>([])\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { data: payrollData } = usePayrollsGetSuspense(\n    {\n      companyId,\n      payrollId,\n      include: ['taxes', 'benefits', 'deductions'],\n    },\n    { refetchInterval: isPolling ? 5_000 : false },\n  )\n\n  const { mutateAsync: calculatePayroll } = usePayrollsCalculateMutation()\n\n  const {\n    preparedPayroll,\n    paySchedule,\n    isLoading: isPrepareLoading,\n  } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const onCalculatePayroll = async () => {\n    // Clear any existing blockers before attempting calculation\n    setPayrollBlockers([])\n\n    await baseSubmitHandler({}, async () => {\n      const result = await payrollSubmitHandler(async () => {\n        await calculatePayroll({\n          request: {\n            companyId,\n            payrollId,\n          },\n        })\n        setIsPolling(true)\n      })\n\n      if (!result.success && result.blockers.length > 0) {\n        setPayrollBlockers(result.blockers)\n      }\n    })\n  }\n  const onEdit = (employee: Employee) => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: employee.uuid })\n  }\n\n  useEffect(() => {\n    // Start polling when payroll is calculating and not already polling\n    if (isCalculating(payrollData.payrollShow?.processingRequest) && !isPolling) {\n      setIsPolling(true)\n    }\n    // Stop polling and emit event when payroll is calculated successfully\n    if (isPolling && isCalculated(payrollData.payrollShow?.processingRequest)) {\n      onEvent(componentEvents.RUN_PAYROLL_CALCULATED, {\n        payrollId,\n        alert: { type: 'success', title: t('alerts.progressSaved') },\n      })\n      // Clear blockers on successful calculation\n      setPayrollBlockers([])\n      setIsPolling(false)\n    }\n    // If we are polling and payroll is in failed state, stop polling, and emit failure event\n    if (\n      isPolling &&\n      payrollData.payrollShow?.processingRequest?.status ===\n        PayrollProcessingRequestStatus.ProcessingFailed\n    ) {\n      onEvent(componentEvents.RUN_PAYROLL_PROCESSING_FAILED)\n      setIsPolling(false)\n    }\n  }, [\n    payrollData.payrollShow?.processingRequest,\n    isPolling,\n    onEvent,\n    t,\n    payrollId,\n    payrollData.payrollShow?.calculatedAt,\n  ])\n\n  return (\n    <PayrollConfigurationPresentation\n      onCalculatePayroll={onCalculatePayroll}\n      onEdit={onEdit}\n      employeeCompensations={preparedPayroll?.employeeCompensations || []}\n      employeeDetails={employeeData.showEmployees || []}\n      payPeriod={preparedPayroll?.payPeriod}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n      alerts={alerts}\n      isPending={isPolling || isPrepareLoading}\n      payrollBlockers={payrollBlockers}\n    />\n  )\n}\n"],"names":["isCalculating","processingRequest","PayrollProcessingRequestStatus","isCalculated","PayrollConfiguration","props","jsx","BaseComponent","Root","onEvent","companyId","payrollId","dictionary","alerts","useComponentDictionary","useI18n","t","useTranslation","baseSubmitHandler","useBase","isPolling","setIsPolling","useState","payrollBlockers","setPayrollBlockers","employeeData","useEmployeesListSuspense","payrollData","usePayrollsGetSuspense","calculatePayroll","usePayrollsCalculateMutation","preparedPayroll","paySchedule","isPrepareLoading","usePreparedPayrollData","onCalculatePayroll","result","payrollSubmitHandler","onEdit","employee","componentEvents","useEffect","PayrollConfigurationPresentation"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAMA,IAAgB,CAACC,MACrBA,GAAmB,WAAWC,EAA+B,aACzDC,IAAe,CAACF,MACpBA,GAAmB,WAAWC,EAA+B;AAQxD,SAASE,EAAqBC,GAA2D;AAC9F,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,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AACF,MAAiC;AAC/B,EAAAC,EAAuB,gCAAgCF,CAAU,GACjEG,EAAQ,8BAA8B;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,mBAAAC,EAAA,IAAsBC,EAAA,GAExB,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1C,CAACC,GAAiBC,CAAkB,IAAIF,EAA8B,CAAA,CAAE,GACxE,EAAE,MAAMG,EAAA,IAAiBC,EAAyB;AAAA,IACtD,WAAAhB;AAAA,EAAA,CACD,GAEK,EAAE,MAAMiB,EAAA,IAAgBC;AAAA,IAC5B;AAAA,MACE,WAAAlB;AAAA,MACA,WAAAC;AAAA,MACA,SAAS,CAAC,SAAS,YAAY,YAAY;AAAA,IAAA;AAAA,IAE7C,EAAE,iBAAiBS,IAAY,MAAQ,GAAA;AAAA,EAAM,GAGzC,EAAE,aAAaS,EAAA,IAAqBC,EAAA,GAEpC;AAAA,IACJ,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAWC;AAAA,EAAA,IACTC,EAAuB;AAAA,IACzB,WAAAxB;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEKwB,IAAqB,YAAY;AAErC,IAAAX,EAAmB,CAAA,CAAE,GAErB,MAAMN,EAAkB,CAAA,GAAI,YAAY;AACtC,YAAMkB,IAAS,MAAMC,EAAqB,YAAY;AACpD,cAAMR,EAAiB;AAAA,UACrB,SAAS;AAAA,YACP,WAAAnB;AAAA,YACA,WAAAC;AAAA,UAAA;AAAA,QACF,CACD,GACDU,EAAa,EAAI;AAAA,MACnB,CAAC;AAED,MAAI,CAACe,EAAO,WAAWA,EAAO,SAAS,SAAS,KAC9CZ,EAAmBY,EAAO,QAAQ;AAAA,IAEtC,CAAC;AAAA,EACH,GACME,IAAS,CAACC,MAAuB;AACrC,IAAA9B,EAAQ+B,EAAgB,2BAA2B,EAAE,YAAYD,EAAS,MAAM;AAAA,EAClF;AAEA,SAAAE,EAAU,MAAM;AAEd,IAAIzC,EAAc2B,EAAY,aAAa,iBAAiB,KAAK,CAACP,KAChEC,EAAa,EAAI,GAGfD,KAAajB,EAAawB,EAAY,aAAa,iBAAiB,MACtElB,EAAQ+B,EAAgB,wBAAwB;AAAA,MAC9C,WAAA7B;AAAA,MACA,OAAO,EAAE,MAAM,WAAW,OAAOK,EAAE,sBAAsB,EAAA;AAAA,IAAE,CAC5D,GAEDQ,EAAmB,CAAA,CAAE,GACrBH,EAAa,EAAK,IAIlBD,KACAO,EAAY,aAAa,mBAAmB,WAC1CzB,EAA+B,qBAEjCO,EAAQ+B,EAAgB,6BAA6B,GACrDnB,EAAa,EAAK;AAAA,EAEtB,GAAG;AAAA,IACDM,EAAY,aAAa;AAAA,IACzBP;AAAA,IACAX;AAAA,IACAO;AAAA,IACAL;AAAA,IACAgB,EAAY,aAAa;AAAA,EAAA,CAC1B,GAGC,gBAAArB;AAAA,IAACoC;AAAA,IAAA;AAAA,MACC,oBAAAP;AAAA,MACA,QAAAG;AAAA,MACA,uBAAuBP,GAAiB,yBAAyB,CAAA;AAAA,MACjE,iBAAiBN,EAAa,iBAAiB,CAAA;AAAA,MAC/C,WAAWM,GAAiB;AAAA,MAC5B,aAAAC;AAAA,MACA,YAAYD,GAAiB;AAAA,MAC7B,QAAAlB;AAAA,MACA,WAAWO,KAAaa;AAAA,MACxB,iBAAAV;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.d.ts

@@ -3,16 +3,18 @@ import { EmployeeCompensations } from '@gusto/embedded-api/models/components/pay
 import { Employee } from '@gusto/embedded-api/models/components/employee';
 import { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype';
 import { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject';
+import { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers';
 interface PayrollConfigurationPresentationProps {
     employeeCompensations: EmployeeCompensations[];
     employeeDetails: Employee[];
     payPeriod?: PayrollPayPeriodType;
     paySchedule?: PayScheduleObject;
-    onBack: () => void;
     onCalculatePayroll: () => void;
     onEdit: (employee: Employee) => void;
     isOffCycle?: boolean;
     alerts?: ReactNode;
+    isPending?: boolean;
+    payrollBlockers?: ApiPayrollBlocker[];
 }
-export declare const PayrollConfigurationPresentation: ({ employeeCompensations, employeeDetails, payPeriod, paySchedule, onBack, onEdit, onCalculatePayroll, isOffCycle, alerts, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollConfigurationPresentation: ({ employeeCompensations, employeeDetails, payPeriod, paySchedule, onEdit, onCalculatePayroll, isOffCycle, alerts, isPending, payrollBlockers, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,144 +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 "classnames";
-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: "" });
-}, ie = ({
-  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 {
-  ie as PayrollConfigurationPresentation
+  be as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map