@gusto/embedded-react-sdk 0.12.3 → 0.13.1

package/dist/components/Employee/Taxes/Taxes.js

@@ -1,12 +1,12 @@
 import { jsx as t, jsxs as M, Fragment as I } from "react/jsx-runtime";
-import { zodResolver as O } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
+import { zodResolver as O } from "@hookform/resolvers/zod";
 import { useForm as C, FormProvider as J } from "react-hook-form";
 import "react-i18next";
 import { useEffect as X } from "react";
-import { useEmployeeTaxSetupGetFederalTaxesSuspense as q } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/employeeTaxSetupGetFederalTaxes.js";
-import { useEmployeeTaxSetupUpdateFederalTaxesMutation as B } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/employeeTaxSetupUpdateFederalTaxes.js";
-import { useEmployeeTaxSetupGetStateTaxesSuspense as H } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/employeeTaxSetupGetStateTaxes.js";
-import { useEmployeeTaxSetupUpdateStateTaxesMutation as V } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@gusto/embedded-api/esm/react-query/employeeTaxSetupUpdateStateTaxes.js";
+import { useEmployeeTaxSetupGetFederalTaxesSuspense as q } from "@gusto/embedded-api/react-query/employeeTaxSetupGetFederalTaxes";
+import { useEmployeeTaxSetupUpdateFederalTaxesMutation as B } from "@gusto/embedded-api/react-query/employeeTaxSetupUpdateFederalTaxes";
+import { useEmployeeTaxSetupGetStateTaxesSuspense as H } from "@gusto/embedded-api/react-query/employeeTaxSetupGetStateTaxes";
+import { useEmployeeTaxSetupUpdateStateTaxesMutation as V } from "@gusto/embedded-api/react-query/employeeTaxSetupUpdateStateTaxes";
 import { Actions as W } from "./Actions.js";
 import { FederalFormSchema as Y, FederalForm as j } from "./FederalForm.js";
 import { FederalHead as G } from "./FederalHead.js";

package/dist/components/Employee/Taxes/useTaxes.js

@@ -2,15 +2,21 @@ import "react/jsx-runtime";
 import "react";
 import "react-error-boundary";
 import "react-i18next";
+import "@gusto/embedded-api/models/errors/apierror";
+import "@gusto/embedded-api/models/errors/sdkvalidationerror";
+import "@gusto/embedded-api/models/errors/unprocessableentityerrorobject";
+import "@tanstack/react-query";
 import "../../Base/useBase.js";
 import "../../../shared/constants.js";
 import "classnames";
 import "dompurify";
+import "../../../contexts/LocaleProvider/useLocale.js";
 import "../../../contexts/ComponentAdapter/useComponentContext.js";
+import "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
 import { createCompoundContext as o } from "../../Base/createCompoundContext.js";
-const [C, T] = o("TaxesContext");
+const [v, P] = o("TaxesContext");
 export {
-  T as TaxesProvider,
-  C as useTaxes
+  P as TaxesProvider,
+  v as useTaxes
 };
 //# sourceMappingURL=useTaxes.js.map

package/dist/components/Employee/Taxes/useTaxes.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}
+{"version":3,"file":"useTaxes.js","sources":["../../../../src/components/Employee/Taxes/useTaxes.ts"],"sourcesContent":["import type { EmployeeStateTaxesList } from '@gusto/embedded-api/models/components/employeestatetaxeslist'\nimport { createCompoundContext } from '@/components/Base'\n\ntype TaxesContextType = {\n  employeeStateTaxes: EmployeeStateTaxesList[]\n  isPending: boolean\n  isAdmin: boolean\n}\n\nconst [useTaxes, TaxesProvider] = createCompoundContext<TaxesContextType>('TaxesContext')\nexport { useTaxes, TaxesProvider }\n"],"names":["useTaxes","TaxesProvider","createCompoundContext"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,CAACA,GAAUC,CAAa,IAAIC,EAAwC,cAAc;"}

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

@@ -1,6 +1,8 @@
 import { BaseComponentInterface } from '../../Base/Base';
-interface PayrollConfigurationProps extends BaseComponentInterface {
+interface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {
+    companyId: string;
     payrollId: string;
 }
-export declare const PayrollConfiguration: ({ onEvent, payrollId, ...baseProps }: PayrollConfigurationProps) => import("react/jsx-runtime").JSX.Element;
+export declare function PayrollConfiguration(props: PayrollConfigurationProps & BaseComponentInterface): import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ onEvent, companyId, payrollId, dictionary }: PayrollConfigurationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,41 +1,77 @@
 import { jsx as a } from "react/jsx-runtime";
-import { useState as s } from "react";
-import { PayrollEditEmployee as d } from "../PayrollEditEmployee/PayrollEditEmployee.js";
-import { PayrollConfigurationPresentation as E } from "./PayrollConfigurationPresentation.js";
-import { BaseComponent as y } from "../../Base/Base.js";
-import { componentEvents as e } from "../../../shared/constants.js";
-const u = ({ payrollId: o }) => ({
-  data: {
-    employees: [{ employeeId: "cdef" }]
-  }
-}), P = ({ payrollId: o }) => ({ mutate: async () => {
-} }), D = ({
-  onEvent: o,
-  payrollId: n,
-  ...i
-}) => {
-  const {
-    data: { employees: m }
-  } = u({ payrollId: n }), { mutate: c } = P({ payrollId: n }), [r, l] = s(void 0);
-  return /* @__PURE__ */ a(y, { ...i, onEvent: o, children: r ? /* @__PURE__ */ a(d, { onEvent: (t, p) => {
-    t === e.RUN_PAYROLL_EMPLOYEE_SAVED && l(void 0), o(t, p);
-  }, employeeId: r }) : /* @__PURE__ */ a(
-    E,
+import { useState as O, useEffect as S } from "react";
+import { useEmployeesListSuspense as Y } from "@gusto/embedded-api/react-query/employeesList";
+import { usePayrollsGetSuspense as h } from "@gusto/embedded-api/react-query/payrollsGet";
+import { usePayrollsCalculateMutation as N } from "@gusto/embedded-api/react-query/payrollsCalculate";
+import { PayrollProcessingRequestStatus as c } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
+import { usePreparedPayrollData as U } from "../usePreparedPayrollData.js";
+import { PayrollEditEmployee as w } from "../PayrollEditEmployee/PayrollEditEmployee.js";
+import { PayrollConfigurationPresentation as M } from "./PayrollConfigurationPresentation.js";
+import { BaseComponent as q } from "../../Base/Base.js";
+import { useBase as B } from "../../Base/useBase.js";
+import { componentEvents as t } from "../../../shared/constants.js";
+import { useComponentDictionary as x, useI18n as T } from "../../../i18n/I18n.js";
+function X(o) {
+  return /* @__PURE__ */ a(q, { ...o, children: /* @__PURE__ */ a(V, { ...o, children: o.children }) });
+}
+const V = ({ onEvent: o, companyId: r, payrollId: l, dictionary: p }) => {
+  x("Payroll.PayrollConfiguration", p), T("Payroll.PayrollConfiguration");
+  const { LoadingIndicator: P } = B(), { data: i } = h(
     {
-      employees: m,
-      onBack: () => {
-        o(e.RUN_PAYROLL_BACK);
-      },
-      onCalculatePayroll: async () => {
-        await c(), o(e.RUN_PAYROLL_CALCULATED);
-      },
-      onEdit: ({ employeeId: t }) => {
-        l(t), o(e.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId: t });
+      companyId: r,
+      payrollId: l
+    },
+    { refetchInterval: 5e3 }
+  ), { data: f } = Y({
+    companyId: r
+  }), { mutateAsync: y } = N(), [n, u] = O(void 0), {
+    preparedPayroll: s,
+    paySchedule: E,
+    isLoading: d,
+    handlePreparePayroll: L
+  } = U({
+    companyId: r,
+    payrollId: l
+  }), C = () => {
+    o(t.RUN_PAYROLL_BACK);
+  }, R = async () => {
+    await y({
+      request: {
+        companyId: r,
+        payrollId: l
       }
+    });
+  }, _ = (e) => {
+    u(e.uuid), o(t.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId: e.uuid });
+  }, A = (e, D) => {
+    (e === t.RUN_PAYROLL_EMPLOYEE_SAVED || e === t.RUN_PAYROLL_EMPLOYEE_CANCELLED) && (e === t.RUN_PAYROLL_EMPLOYEE_SAVED && L(), u(void 0)), o(e, D);
+  }, g = i.payrollShow?.processingRequest?.status === c.Calculating, m = i.payrollShow?.processingRequest?.status === c.CalculateSuccess;
+  return S(() => {
+    m && o(t.RUN_PAYROLL_CALCULATED);
+  }, [m, o]), d || g ? /* @__PURE__ */ a(P, {}) : n ? /* @__PURE__ */ a(
+    w,
+    {
+      onEvent: A,
+      employeeId: n,
+      companyId: r,
+      payrollId: l
+    }
+  ) : /* @__PURE__ */ a(
+    M,
+    {
+      onBack: C,
+      onCalculatePayroll: R,
+      onEdit: _,
+      employeeCompensations: s?.employeeCompensations || [],
+      employeeDetails: f.showEmployees || [],
+      payPeriod: s?.payPeriod,
+      paySchedule: E,
+      isOffCycle: s?.offCycle
     }
-  ) });
+  );
 };
 export {
-  D as PayrollConfiguration
+  X as PayrollConfiguration,
+  V 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 { useState } from 'react'\nimport { PayrollEditEmployee } from '../PayrollEditEmployee/PayrollEditEmployee'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport type { EventType } from '@/shared/constants'\nimport { componentEvents } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\n\n//TODO: Use Speakeasy type\ninterface PayrollItem {\n  payrollId: string\n}\n\n// TODO: Replace this hook with call to Speakeasy instead\nconst usePayrollApi = ({ payrollId }: PayrollItem) => {\n  return {\n    data: {\n      employees: [{ employeeId: 'cdef' }],\n    },\n  }\n}\n// TODO: Replace this hook with call to Speakeasy instead\nconst useCalculatePayrollApi = ({ payrollId }: PayrollItem) => {\n  const mutate = async () => {}\n  return { mutate }\n}\n\ninterface PayrollConfigurationProps extends BaseComponentInterface {\n  payrollId: string\n}\nexport const PayrollConfiguration = ({\n  onEvent,\n  payrollId,\n  ...baseProps\n}: PayrollConfigurationProps) => {\n  const {\n    data: { employees },\n  } = usePayrollApi({ payrollId })\n  const { mutate } = useCalculatePayrollApi({ payrollId })\n  const [editedEmployeeId, setEditedEmployeeId] = useState<string | undefined>(undefined)\n  const onBack = () => {\n    onEvent(componentEvents.RUN_PAYROLL_BACK)\n  }\n  const onCalculatePayroll = async () => {\n    await mutate()\n    onEvent(componentEvents.RUN_PAYROLL_CALCULATED)\n  }\n  const onEdit = ({ employeeId }: { employeeId: string }) => {\n    setEditedEmployeeId(employeeId)\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId })\n  }\n\n  const wrappedOnEvent: OnEventType<string, unknown> = (event, payload) => {\n    if (event === componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED) {\n      setEditedEmployeeId(undefined)\n    }\n    onEvent(event as EventType, payload)\n  }\n\n  const childComponent = editedEmployeeId ? (\n    <PayrollEditEmployee onEvent={wrappedOnEvent} employeeId={editedEmployeeId} />\n  ) : (\n    <PayrollConfigurationPresentation\n      employees={employees}\n      onBack={onBack}\n      onCalculatePayroll={onCalculatePayroll}\n      onEdit={onEdit}\n    />\n  )\n\n  return (\n    <BaseComponent {...baseProps} onEvent={onEvent}>\n      {childComponent}\n    </BaseComponent>\n  )\n}\n"],"names":["usePayrollApi","payrollId","useCalculatePayrollApi","PayrollConfiguration","onEvent","baseProps","employees","mutate","editedEmployeeId","setEditedEmployeeId","useState","jsx","BaseComponent","PayrollEditEmployee","event","payload","componentEvents","PayrollConfigurationPresentation","employeeId"],"mappings":";;;;;;AAeA,MAAMA,IAAgB,CAAC,EAAE,WAAAC,SAChB;AAAA,EACL,MAAM;AAAA,IACJ,WAAW,CAAC,EAAE,YAAY,QAAQ;AAAA,EAAA;AACpC,IAIEC,IAAyB,CAAC,EAAE,WAAAD,SAEzB,EAAE,QADM,YAAY;AAAC,EACnB,IAMEE,IAAuB,CAAC;AAAA,EACnC,SAAAC;AAAA,EACA,WAAAH;AAAA,EACA,GAAGI;AACL,MAAiC;AAC/B,QAAM;AAAA,IACJ,MAAM,EAAE,WAAAC,EAAA;AAAA,EAAU,IAChBN,EAAc,EAAE,WAAAC,GAAW,GACzB,EAAE,QAAAM,EAAA,IAAWL,EAAuB,EAAE,WAAAD,GAAW,GACjD,CAACO,GAAkBC,CAAmB,IAAIC,EAA6B,MAAS;AA+BtF,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGP,GAAW,SAAAD,GAC3B,UAbkBI,IACrB,gBAAAG,EAACE,GAAA,EAAoB,SAR8B,CAACC,GAAOC,MAAY;AACvE,IAAID,MAAUE,EAAgB,8BAC5BP,EAAoB,MAAS,GAE/BL,EAAQU,GAAoBC,CAAO;AAAA,EACrC,GAGgD,YAAYP,GAAkB,IAE5E,gBAAAG;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,WAAAX;AAAA,MACA,QAxBW,MAAM;AACnB,QAAAF,EAAQY,EAAgB,gBAAgB;AAAA,MAC1C;AAAA,MAuBI,oBAtBuB,YAAY;AACrC,cAAMT,EAAA,GACNH,EAAQY,EAAgB,sBAAsB;AAAA,MAChD;AAAA,MAoBI,QAnBW,CAAC,EAAE,YAAAE,QAAyC;AACzD,QAAAT,EAAoBS,CAAU,GAC9Bd,EAAQY,EAAgB,6BAA6B,EAAE,YAAAE,EAAA,CAAY;AAAA,MACrE;AAAA,IAgBI;AAAA,EAAA,GAOF;AAEJ;"}
+{"version":3,"file":"PayrollConfiguration.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx"],"sourcesContent":["import { useState, useEffect } 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 { PayrollEditEmployee } from '../PayrollEditEmployee/PayrollEditEmployee'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { useBase } from '@/components/Base/useBase'\nimport type { EventType } from '@/shared/constants'\nimport { componentEvents } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {\n  companyId: string\n  payrollId: string\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 = ({ onEvent, companyId, payrollId, dictionary }: 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  const [editedEmployeeId, setEditedEmployeeId] = useState<string | undefined>(undefined)\n\n  const {\n    preparedPayroll,\n    paySchedule,\n    isLoading: isPreparedPayrollDataLoading,\n    handlePreparePayroll,\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    setEditedEmployeeId(employee.uuid)\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDITED, { employeeId: employee.uuid })\n  }\n\n  const wrappedOnEvent: OnEventType<string, unknown> = (event, payload) => {\n    if (\n      event === componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED ||\n      event === componentEvents.RUN_PAYROLL_EMPLOYEE_CANCELLED\n    ) {\n      if (event === componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED) {\n        void handlePreparePayroll()\n      }\n      setEditedEmployeeId(undefined)\n    }\n\n    onEvent(event as EventType, payload)\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  if (editedEmployeeId) {\n    return (\n      <PayrollEditEmployee\n        onEvent={wrappedOnEvent}\n        employeeId={editedEmployeeId}\n        companyId={companyId}\n        payrollId={payrollId}\n      />\n    )\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    />\n  )\n}\n"],"names":["PayrollConfiguration","props","jsx","BaseComponent","Root","onEvent","companyId","payrollId","dictionary","useComponentDictionary","useI18n","LoadingIndicator","useBase","payrollData","usePayrollsGetSuspense","employeeData","useEmployeesListSuspense","calculatePayroll","usePayrollsCalculateMutation","editedEmployeeId","setEditedEmployeeId","useState","preparedPayroll","paySchedule","isPreparedPayrollDataLoading","handlePreparePayroll","usePreparedPayrollData","onBack","componentEvents","onCalculatePayroll","onEdit","employee","wrappedOnEvent","event","payload","isCalculating","PayrollProcessingRequestStatus","isCalculated","useEffect","PayrollEditEmployee","PayrollConfigurationPresentation"],"mappings":";;;;;;;;;;;;;AAsBO,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,EAAE,SAAAC,GAAS,WAAAC,GAAW,WAAAC,GAAW,YAAAC,QAA4C;AAChG,EAAAC,EAAuB,gCAAgCD,CAAU,GACjEE,EAAQ,8BAA8B;AAEtC,QAAM,EAAE,kBAAAC,EAAA,IAAqBC,EAAA,GAEvB,EAAE,MAAMC,EAAA,IAAgBC;AAAA,IAC5B;AAAA,MACE,WAAAR;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,IAEF,EAAE,iBAAiB,IAAA;AAAA,EAAM,GAGrB,EAAE,MAAMQ,EAAA,IAAiBC,EAAyB;AAAA,IACtD,WAAAV;AAAA,EAAA,CACD,GAEK,EAAE,aAAaW,EAAA,IAAqBC,EAAA,GACpC,CAACC,GAAkBC,CAAmB,IAAIC,EAA6B,MAAS,GAEhF;AAAA,IACJ,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAWC;AAAA,IACX,sBAAAC;AAAA,EAAA,IACEC,EAAuB;AAAA,IACzB,WAAApB;AAAA,IACA,WAAAC;AAAA,EAAA,CACD,GAEKoB,IAAS,MAAM;AACnB,IAAAtB,EAAQuB,EAAgB,gBAAgB;AAAA,EAC1C,GACMC,IAAqB,YAAY;AACrC,UAAMZ,EAAiB;AAAA,MACrB,SAAS;AAAA,QACP,WAAAX;AAAA,QACA,WAAAC;AAAA,MAAA;AAAA,IACF,CACD;AAAA,EACH,GACMuB,IAAS,CAACC,MAAuB;AACrC,IAAAX,EAAoBW,EAAS,IAAI,GACjC1B,EAAQuB,EAAgB,6BAA6B,EAAE,YAAYG,EAAS,MAAM;AAAA,EACpF,GAEMC,IAA+C,CAACC,GAAOC,MAAY;AACvE,KACED,MAAUL,EAAgB,8BAC1BK,MAAUL,EAAgB,oCAEtBK,MAAUL,EAAgB,8BACvBH,EAAA,GAEPL,EAAoB,MAAS,IAG/Bf,EAAQ4B,GAAoBC,CAAO;AAAA,EACrC,GAEMC,IACJtB,EAAY,aAAa,mBAAmB,WAC5CuB,EAA+B,aAC3BC,IACJxB,EAAY,aAAa,mBAAmB,WAC5CuB,EAA+B;AAQjC,SANAE,EAAU,MAAM;AACd,IAAID,KACFhC,EAAQuB,EAAgB,sBAAsB;AAAA,EAElD,GAAG,CAACS,GAAchC,CAAO,CAAC,GAEtBmB,KAAgCW,sBAC1BxB,GAAA,EAAiB,IAGvBQ,IAEA,gBAAAjB;AAAA,IAACqC;AAAA,IAAA;AAAA,MACC,SAASP;AAAA,MACT,YAAYb;AAAA,MACZ,WAAAb;AAAA,MACA,WAAAC;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAL;AAAA,IAACsC;AAAA,IAAA;AAAA,MACC,QAAAb;AAAA,MACA,oBAAAE;AAAA,MACA,QAAAC;AAAA,MACA,uBAAuBR,GAAiB,yBAAyB,CAAA;AAAA,MACjE,iBAAiBP,EAAa,iBAAiB,CAAA;AAAA,MAC/C,WAAWO,GAAiB;AAAA,MAC5B,aAAAC;AAAA,MACA,YAAYD,GAAiB;AAAA,IAAA;AAAA,EAAA;AAGnC;"}

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

@@ -1,11 +1,16 @@
-interface Employee {
-    employeeId: string;
-}
+import { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow';
+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';
 interface PayrollConfigurationPresentationProps {
-    employees: Employee[];
+    employeeCompensations: EmployeeCompensations[];
+    employeeDetails: Employee[];
+    payPeriod?: PayrollPayPeriodType;
+    paySchedule?: PayScheduleObject;
     onBack: () => void;
     onCalculatePayroll: () => void;
     onEdit: (employee: Employee) => void;
+    isOffCycle?: boolean;
 }
-export declare const PayrollConfigurationPresentation: ({ employees, onBack, onEdit, onCalculatePayroll, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollConfigurationPresentation: ({ employeeCompensations, employeeDetails, payPeriod, paySchedule, onBack, onEdit, onCalculatePayroll, isOffCycle, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

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

@@ -1,6 +1,9 @@
 import { BaseComponentInterface } from '../../Base/Base';
-interface PayrollEditEmployeeProps extends BaseComponentInterface {
+interface PayrollEditEmployeeProps extends BaseComponentInterface<'Payroll.PayrollEditEmployee'> {
     employeeId: string;
+    companyId: string;
+    payrollId: string;
 }
-export declare const PayrollEditEmployee: ({ employeeId, onEvent, ...baseProps }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
+export declare function PayrollEditEmployee(props: PayrollEditEmployeeProps & BaseComponentInterface): import("react/jsx-runtime").JSX.Element;
+export declare const Root: ({ employeeId, companyId, payrollId, onEvent, dictionary, }: PayrollEditEmployeeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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