@gusto/embedded-react-sdk 0.55.1 → 0.55.2

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

@@ -1 +1 @@
-{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n  netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n  useI18n('Payroll.GrossUpModal')\n  const { t } = useTranslation('Payroll.GrossUpModal')\n  const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n  const { baseSubmitHandler } = useBase()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n  const [errorMessage, setErrorMessage] = useState<string | null>(null)\n  const [isCalculating, setIsCalculating] = useState(false)\n  const [isApplying, setIsApplying] = useState(false)\n\n  const formHandlers = useForm<GrossUpFormValues>({\n    resolver: zodResolver(GrossUpFormSchema),\n    defaultValues: { netPay: 0 },\n  })\n\n  useEffect(() => {\n    if (!isOpen) {\n      formHandlers.reset({ netPay: 0 })\n      setCalculatedGrossUp(null)\n      setErrorMessage(null)\n    }\n  }, [isOpen, formHandlers.reset])\n\n  const handleCalculate = async (data: GrossUpFormValues) => {\n    setErrorMessage(null)\n    setCalculatedGrossUp(null)\n    setIsCalculating(true)\n\n    await baseSubmitHandler(null, async () => {\n      try {\n        const result = await onCalculateGrossUp(data.netPay)\n\n        if (result) {\n          setCalculatedGrossUp(result)\n        } else {\n          setErrorMessage(t('errorMessage'))\n        }\n      } finally {\n        setIsCalculating(false)\n      }\n    })\n  }\n\n  const handleApply = async () => {\n    if (calculatedGrossUp) {\n      setIsApplying(true)\n      await baseSubmitHandler(null, async () => {\n        try {\n          await onApply(calculatedGrossUp)\n        } finally {\n          setIsApplying(false)\n        }\n      })\n    }\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button\n            variant=\"primary\"\n            isDisabled={!calculatedGrossUp}\n            onClick={handleApply}\n            isLoading={isApplying}\n          >\n            {t('applyCta')}\n          </Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('cancelCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.header}>\n          <Heading as=\"h2\" styledAs=\"h3\">\n            {t('title')}\n          </Heading>\n          <Text variant=\"supporting\" as=\"p\">\n            {t('description')}\n          </Text>\n        </div>\n\n        <div className={styles.content}>\n          {errorMessage && (\n            <div className={styles.alert}>\n              <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n            </div>\n          )}\n\n          <div className={styles.alert}>\n            <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n          </div>\n\n          <Flex flexDirection=\"row\" gap={8}>\n            <NumberInputField\n              name=\"netPay\"\n              label={t('netPayLabel')}\n              format=\"currency\"\n              errorMessage={t('validations.netPay')}\n              min={0}\n              isRequired\n            />\n            <Button\n              variant=\"secondary\"\n              className={styles.calculateButton}\n              isDisabled={isCalculating}\n              onClick={formHandlers.handleSubmit(handleCalculate)}\n            >\n              {isCalculating ? t('calculatingCta') : t('calculateCta')}\n            </Button>\n          </Flex>\n\n          {calculatedGrossUp && (\n            <>\n              <div className={styles.result}>\n                <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n                  {t('grossPayResult')}\n                </Text>\n                <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n              </div>\n            </>\n          )}\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"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"}
+{"version":3,"file":"GrossUpModal.js","sources":["../../../../src/components/Payroll/GrossUpModal/GrossUpModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\nimport { FormProvider, useForm } from 'react-hook-form'\nimport { useTranslation } from 'react-i18next'\nimport { z } from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport type { GrossUpModalProps } from './GrossUpModalTypes'\nimport styles from './GrossUpModal.module.scss'\nimport { ActionsLayout, Flex, NumberInputField } from '@/components/Common'\nimport { useBase } from '@/components/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatNumberAsCurrency } from '@/helpers/formattedStrings'\n\nconst GrossUpFormSchema = z.object({\n  netPay: z.number().positive(),\n})\n\ntype GrossUpFormValues = z.infer<typeof GrossUpFormSchema>\n\n/** @internal */\nexport function GrossUpModal({ isOpen, onCalculateGrossUp, onApply, onCancel }: GrossUpModalProps) {\n  useI18n('Payroll.GrossUpModal')\n  const { t } = useTranslation('Payroll.GrossUpModal')\n  const { Modal, Heading, Text, Button, Alert } = useComponentContext()\n  const { baseSubmitHandler } = useBase()\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n\n  const [calculatedGrossUp, setCalculatedGrossUp] = useState<string | null>(null)\n  const [errorMessage, setErrorMessage] = useState<string | null>(null)\n  const [isCalculating, setIsCalculating] = useState(false)\n  const [isApplying, setIsApplying] = useState(false)\n\n  const formHandlers = useForm<GrossUpFormValues>({\n    resolver: zodResolver(GrossUpFormSchema),\n    defaultValues: { netPay: 0 },\n  })\n\n  useEffect(() => {\n    if (!isOpen) {\n      formHandlers.reset({ netPay: 0 })\n      setCalculatedGrossUp(null)\n      setErrorMessage(null)\n    }\n  }, [isOpen, formHandlers.reset])\n\n  const handleCalculate = async (data: GrossUpFormValues) => {\n    setErrorMessage(null)\n    setCalculatedGrossUp(null)\n    setIsCalculating(true)\n\n    await baseSubmitHandler(null, async () => {\n      try {\n        const result = await onCalculateGrossUp(data.netPay)\n\n        if (result) {\n          setCalculatedGrossUp(result)\n        } else {\n          setErrorMessage(t('errorMessage'))\n        }\n      } finally {\n        setIsCalculating(false)\n      }\n    })\n  }\n\n  const handleApply = async () => {\n    if (calculatedGrossUp) {\n      setIsApplying(true)\n      await baseSubmitHandler(null, async () => {\n        try {\n          await onApply(calculatedGrossUp)\n        } finally {\n          setIsApplying(false)\n        }\n      })\n    }\n  }\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onCancel}\n      containerRef={modalContainerRef}\n      footer={\n        <ActionsLayout>\n          <Button\n            variant=\"primary\"\n            isDisabled={!calculatedGrossUp}\n            onClick={handleApply}\n            isLoading={isApplying}\n          >\n            {t('applyCta')}\n          </Button>\n          <Button variant=\"secondary\" onClick={onCancel}>\n            {t('cancelCta')}\n          </Button>\n        </ActionsLayout>\n      }\n    >\n      <FormProvider {...formHandlers}>\n        <div className={styles.header}>\n          <Heading as=\"h2\" styledAs=\"h3\">\n            {t('title')}\n          </Heading>\n          <Text variant=\"supporting\" as=\"p\">\n            {t('description')}\n          </Text>\n        </div>\n\n        <div className={styles.content}>\n          {errorMessage && (\n            <div className={styles.alert}>\n              <Alert label={errorMessage} status=\"error\" disableScrollIntoView />\n            </div>\n          )}\n\n          <div className={styles.alert}>\n            <Alert label={t('warning')} status=\"warning\" disableScrollIntoView />\n          </div>\n\n          <Flex flexDirection=\"row\" gap={8}>\n            <NumberInputField\n              name=\"netPay\"\n              label={t('netPayLabel')}\n              format=\"currency\"\n              errorMessage={t('validations.netPay')}\n              min={0}\n              isRequired\n            />\n            <Button\n              variant=\"secondary\"\n              className={styles.calculateButton}\n              isDisabled={isCalculating}\n              onClick={formHandlers.handleSubmit(handleCalculate)}\n            >\n              {isCalculating ? t('calculatingCta') : t('calculateCta')}\n            </Button>\n          </Flex>\n\n          {calculatedGrossUp && (\n            <>\n              <div className={styles.result}>\n                <Text size=\"sm\" variant=\"supporting\" weight=\"semibold\">\n                  {t('grossPayResult')}\n                </Text>\n                <Heading as=\"h3\">{formatNumberAsCurrency(parseFloat(calculatedGrossUp))}</Heading>\n              </div>\n            </>\n          )}\n        </div>\n      </FormProvider>\n    </Modal>\n  )\n}\n"],"names":["GrossUpFormSchema","z","GrossUpModal","isOpen","onCalculateGrossUp","onApply","onCancel","useI18n","t","useTranslation","Modal","Heading","Text","Button","Alert","useComponentContext","baseSubmitHandler","useBase","modalContainerRef","useRef","calculatedGrossUp","setCalculatedGrossUp","useState","errorMessage","setErrorMessage","isCalculating","setIsCalculating","isApplying","setIsApplying","formHandlers","useForm","zodResolver","useEffect","handleCalculate","data","result","jsx","ActionsLayout","jsxs","FormProvider","styles","Flex","NumberInputField","Fragment"],"mappings":"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"}

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

@@ -19,6 +19,12 @@ export interface PayrollConfigurationProps extends BaseComponentInterface<'Payro
  * Handles the configuration phase of payroll processing, allowing users to review and modify employee compensation before calculating the payroll.
  *
  * @remarks
+ * If the payroll turns out to already be processed (e.g. another actor submitted it while this
+ * screen was open), this component emits `runPayroll/alreadyProcessed` and then renders
+ * {@link PayrollOverview} in its place — the read-only breakdown with the gated "Cancel payroll"
+ * action — instead of the configuration table. Events from that delegated view (e.g.
+ * `runPayroll/cancelled`) are emitted through this component's own `onEvent`.
+ *
  * Emits the following events:
  *
  * @events
@@ -28,6 +34,7 @@ export interface PayrollConfigurationProps extends BaseComponentInterface<'Payro
  * | `runPayroll/employee/skip` | An employee is skipped or unskipped for this payroll | `{ employeeId }` |
  * | `runPayroll/employee/saved` | Employee compensation changes are persisted | `{ payrollPrepared }` |
  * | `runPayroll/calculated` | Payroll calculation completes successfully | `{ payrollId, alert, payPeriod }` |
+ * | `runPayroll/alreadyProcessed` | The payroll turns out to already be processed while configuring it | `{ payrollId, alert, payPeriod }` |
  * | `runPayroll/processingFailed` | Payroll calculation fails or times out | — |
  * | `runPayroll/blockers/viewAll` | The "view all blockers" affordance is selected | — |
  * | `runPayroll/grossUp/selected` | The set-net-earnings menu item is selected for an employee | `{ employeeUuid }` |

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

@@ -1,169 +1,196 @@
-import { jsx as P, jsxs as pe, Fragment as ce } from "react/jsx-runtime";
-import { useState as f, useRef as me, useMemo as de, useEffect as G } from "react";
-import { useQueryClient as ye } from "@tanstack/react-query";
-import { usePayrollsGetSuspense as fe } from "@gusto/embedded-api/react-query/payrollsGet";
-import { payrollsCalculate as Ce } from "@gusto/embedded-api/funcs/payrollsCalculate";
-import { useGustoEmbeddedContext as Ue } from "@gusto/embedded-api/react-query/_context";
-import { PayrollProcessingRequestStatus as _ } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
-import { useTranslation as Pe } from "react-i18next";
-import { usePayrollsUpdateMutation as ge } from "@gusto/embedded-api/react-query/payrollsUpdate";
-import { usePayrollsCalculateGrossUpMutation as he } from "@gusto/embedded-api/react-query/payrollsCalculateGrossUp";
-import { usePayrollsGetBlockersSuspense as Le } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
-import { payrollSubmitHandler as Se } from "../PayrollBlocker/payrollHelpers.js";
-import { hasDirectDepositEmployees as we } from "../helpers.js";
-import { PayrollConfigurationPresentation as _e } from "./PayrollConfigurationPresentation.js";
-import { usePayrollConfigurationData as Re } from "./usePayrollConfigurationData.js";
-import { isGrossUpEligible as Ae, getGrossUpTargetCompensationName as De } from "./grossUpHelpers.js";
-import { BaseComponent as Ee } from "../../Base/Base.js";
-import { componentEvents as i } from "../../../shared/constants.js";
-import { useComponentDictionary as Oe, useI18n as Te } from "../../../i18n/I18n.js";
-import { useBase as xe } from "../../Base/useBase.js";
-import { useDateFormatter as be } from "../../../hooks/useDateFormatter.js";
-import { SDKInternalError as N } from "../../../types/sdkError.js";
-import { API_QUERY_NAMESPACE as ke } from "../../../contexts/ApiProvider/apiVersion.js";
-import { GrossUpModal as Ge } from "../GrossUpModal/GrossUpModal.js";
-const Ne = (t) => t?.status === _.Calculating, Me = (t, n) => n != null && (t?.status === _.CalculateSuccess || t == null);
-function uo(t) {
-  return /* @__PURE__ */ P(Ee, { ...t, children: /* @__PURE__ */ P(Ye, { ...t, children: t.children }) });
+import { jsx as C, jsxs as fe, Fragment as Ce } from "react/jsx-runtime";
+import { useState as f, useRef as q, useMemo as F, useEffect as D } from "react";
+import { useQueryClient as Pe } from "@tanstack/react-query";
+import { usePayrollsGetSuspense as Ue } from "@gusto/embedded-api/react-query/payrollsGet";
+import { payrollsCalculate as ge } from "@gusto/embedded-api/funcs/payrollsCalculate";
+import { useGustoEmbeddedContext as he } from "@gusto/embedded-api/react-query/_context";
+import { PayrollProcessingRequestStatus as O } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
+import { useTranslation as Le } from "react-i18next";
+import { usePayrollsUpdateMutation as Se } from "@gusto/embedded-api/react-query/payrollsUpdate";
+import { usePayrollsCalculateGrossUpMutation as Ae } from "@gusto/embedded-api/react-query/payrollsCalculateGrossUp";
+import { usePayrollsGetBlockersSuspense as _e } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
+import { payrollSubmitHandler as we } from "../PayrollBlocker/payrollHelpers.js";
+import { hasDirectDepositEmployees as Re } from "../helpers.js";
+import { PayrollOverview as Ee } from "../PayrollOverview/PayrollOverview.js";
+import { PayrollConfigurationPresentation as De } from "./PayrollConfigurationPresentation.js";
+import { usePayrollConfigurationData as Oe } from "./usePayrollConfigurationData.js";
+import { isGrossUpEligible as Te, getGrossUpTargetCompensationName as xe } from "./grossUpHelpers.js";
+import { BaseComponent as be } from "../../Base/Base.js";
+import { componentEvents as l } from "../../../shared/constants.js";
+import { useComponentDictionary as ke, useI18n as Ne } from "../../../i18n/I18n.js";
+import { useBase as Ge } from "../../Base/useBase.js";
+import { useDateFormatter as Ye } from "../../../hooks/useDateFormatter.js";
+import { SDKInternalError as j } from "../../../types/sdkError.js";
+import { API_QUERY_NAMESPACE as Me } from "../../../contexts/ApiProvider/apiVersion.js";
+import { GrossUpModal as Be } from "../GrossUpModal/GrossUpModal.js";
+const qe = (t) => t?.status === O.Calculating, Fe = (t, u) => u != null && (t?.status === O.CalculateSuccess || t == null);
+function fo(t) {
+  return /* @__PURE__ */ C(be, { ...t, children: /* @__PURE__ */ C(je, { ...t, children: t.children }) });
 }
-const Ye = ({
+const je = ({
   onEvent: t,
-  companyId: n,
-  payrollId: u,
-  dictionary: M,
-  alerts: Y,
-  withReimbursements: B = !0
+  companyId: u,
+  payrollId: i,
+  dictionary: v,
+  alerts: W,
+  withReimbursements: T = !0
 }) => {
-  Oe("Payroll.PayrollConfiguration", M), Te("Payroll.PayrollConfiguration");
-  const { t: p } = Pe("Payroll.PayrollConfiguration"), { baseSubmitHandler: C } = xe(), c = be(), [r, m] = f(!1), [g, R] = f(!1), h = me(null), q = Ue(), j = ye(), { data: s } = fe(
+  ke("Payroll.PayrollConfiguration", v), Ne("Payroll.PayrollConfiguration");
+  const { t: p } = Le("Payroll.PayrollConfiguration"), { baseSubmitHandler: P } = Ge(), c = Ye(), [n, m] = f(!1), [g, x] = f(!1), h = q(null), K = he(), H = Pe(), { data: s } = Ue(
     {
-      companyId: n,
-      payrollId: u,
+      companyId: u,
+      payrollId: i,
       include: ["taxes", "benefits", "deductions", "payroll_status_meta"]
     },
-    { refetchInterval: r ? 5e3 : !1 }
-  ), F = de(
+    { refetchInterval: n ? 5e3 : !1 }
+  ), V = F(
     () => s.payrollShow?.employeeCompensations?.filter((e) => e.excluded).map((e) => e.employeeUuid).filter(Boolean) ?? [],
     [s.payrollShow?.employeeCompensations]
   ), {
-    employeeDetails: W,
-    employeeCompensations: A,
-    paySchedule: I,
-    payPeriod: K,
+    employeeDetails: I,
+    employeeCompensations: b,
+    paySchedule: Q,
+    payPeriod: J,
     payrollCategory: L,
-    pagination: H,
-    isLoading: V,
-    refetch: D
-  } = Re({
-    companyId: n,
-    payrollId: u,
-    isCalculating: r || g,
-    excludedEmployeeUuids: F
-  }), { mutateAsync: E, isPending: Q } = ge(), { mutateAsync: v } = he(), [d, O] = f(null), [J, S] = f(!1), T = Ae(L), U = De(L), z = (e) => {
-    O(e), S(!0), t(i.RUN_PAYROLL_GROSS_UP_SELECTED, { employeeUuid: e });
-  }, X = async (e) => {
+    pagination: z,
+    isLoading: X,
+    isAlreadyProcessed: S,
+    refetch: A
+  } = Oe({
+    companyId: u,
+    payrollId: i,
+    isCalculating: n || g,
+    excludedEmployeeUuids: V
+  }), _ = F(
+    () => ({
+      type: "error",
+      title: p("alerts.alreadyProcessed"),
+      alertKey: "alreadyProcessed"
+    }),
+    [p]
+  ), w = q(!1);
+  D(() => {
+    if (!S) {
+      w.current = !1;
+      return;
+    }
+    w.current || (w.current = !0, t(l.RUN_PAYROLL_ALREADY_PROCESSED, {
+      payrollId: i,
+      alert: _,
+      payPeriod: s.payrollShow?.payPeriod
+    }));
+  }, [
+    S,
+    t,
+    i,
+    _,
+    s.payrollShow?.payPeriod
+  ]);
+  const { mutateAsync: k, isPending: Z } = Se(), { mutateAsync: $ } = Ae(), [d, N] = f(null), [ee, R] = f(!1), G = Te(L), U = xe(L), oe = (e) => {
+    N(e), R(!0), t(l.RUN_PAYROLL_GROSS_UP_SELECTED, { employeeUuid: e });
+  }, te = async (e) => {
     if (!d) return null;
     let o = null;
-    return await C(null, async () => {
-      o = (await v({
+    return await P(null, async () => {
+      o = (await $({
         request: {
-          payrollUuid: u,
+          payrollUuid: i,
           payrollGrossUpRequest: {
             employeeUuid: d,
             netPay: e.toString()
           }
         }
-      })).payrollGrossUpResponse?.grossUp ?? null, o && t(i.RUN_PAYROLL_GROSS_UP_CALCULATED, {
+      })).payrollGrossUpResponse?.grossUp ?? null, o && t(l.RUN_PAYROLL_GROSS_UP_CALCULATED, {
         grossUp: o,
         netPay: e,
         employeeUuid: d
       });
     }), o;
-  }, Z = async (e) => {
+  }, ae = async (e) => {
     if (!d || !U)
-      throw new N(
+      throw new j(
         "Unable to apply gross-up: missing employee or target compensation."
       );
-    const o = A.find((a) => a.employeeUuid === d);
+    const o = b.find((a) => a.employeeUuid === d);
     if (!o)
-      throw new N("Unable to apply gross-up: employee compensation not found.");
-    const l = o.fixedCompensations ?? [], y = l.some(
+      throw new j("Unable to apply gross-up: employee compensation not found.");
+    const r = o.fixedCompensations ?? [], y = r.some(
       (a) => a.name?.toLowerCase() === U.toLowerCase()
-    ), k = l.map((a) => ({
+    ), B = r.map((a) => ({
       name: a.name,
       jobUuid: a.jobUuid,
       amount: a.name?.toLowerCase() === U.toLowerCase() ? e : "0"
     }));
     if (!y) {
-      const a = o.hourlyCompensations?.[0]?.jobUuid ?? l[0]?.jobUuid ?? "";
-      k.push({
+      const a = o.hourlyCompensations?.[0]?.jobUuid ?? r[0]?.jobUuid ?? "";
+      B.push({
         name: U,
         jobUuid: a,
         amount: e
       });
     }
-    const ie = (o.hourlyCompensations ?? []).map((a) => ({
+    const me = (o.hourlyCompensations ?? []).map((a) => ({
       name: a.name,
       jobUuid: a.jobUuid,
       hours: "0"
-    })), ne = (o.paidTimeOff ?? []).map((a) => ({
+    })), de = (o.paidTimeOff ?? []).map((a) => ({
       name: a.name,
       hours: "0"
-    })), ue = b({
+    })), ye = M({
       ...o,
-      fixedCompensations: k,
-      hourlyCompensations: ie,
-      paidTimeOff: ne
+      fixedCompensations: B,
+      hourlyCompensations: me,
+      paidTimeOff: de
     });
-    await C({}, async () => {
-      const a = await E({
+    await P({}, async () => {
+      const a = await k({
         request: {
-          companyId: n,
-          payrollId: u,
+          companyId: u,
+          payrollId: i,
           payrollUpdate: {
-            employeeCompensations: [{ ...ue, excluded: !1 }]
+            employeeCompensations: [{ ...ye, excluded: !1 }]
           }
         }
       });
-      t(i.RUN_PAYROLL_EMPLOYEE_SAVED, {
+      t(l.RUN_PAYROLL_EMPLOYEE_SAVED, {
         payrollPrepared: a.payrollPrepared
-      }), await D();
-    }), O(null), S(!1);
-  }, $ = async (e) => {
+      }), await A();
+    }), N(null), R(!1);
+  }, se = async (e) => {
     try {
-      await Z(e);
+      await ae(e);
     } catch {
     }
-  }, { data: ee } = Le({
-    companyUuid: n
-  }), x = (ee.payrollBlockers ?? []).map((e) => ({
+  }, { data: re } = _e({
+    companyUuid: u
+  }), Y = (re.payrollBlockers ?? []).map((e) => ({
     key: e.key,
     message: e.message
-  })), [oe, w] = f(x), te = async () => {
-    w([]), h.current = s.payrollShow?.calculatedAt?.getTime() ?? null, await C({}, async () => {
-      const e = await Se(async () => {
-        R(!0);
+  })), [le, E] = f(Y), ie = async () => {
+    E([]), h.current = s.payrollShow?.calculatedAt?.getTime() ?? null, await P({}, async () => {
+      const e = await we(async () => {
+        x(!0);
         try {
-          const o = await Ce(q, {
-            companyId: n,
-            payrollId: u
+          const o = await ge(K, {
+            companyId: u,
+            payrollId: i
           });
           if (!o.ok)
             throw o.error;
-          j.invalidateQueries({ queryKey: [ke] }), m(!0);
+          H.invalidateQueries({ queryKey: [Me] }), m(!0);
         } finally {
-          R(!1);
+          x(!1);
         }
       });
-      !e.success && e.blockers.length > 0 && w(e.blockers);
+      !e.success && e.blockers.length > 0 && E(e.blockers);
     });
-  }, ae = (e) => {
-    t(i.RUN_PAYROLL_EMPLOYEE_EDIT, {
+  }, ne = (e) => {
+    t(l.RUN_PAYROLL_EMPLOYEE_EDIT, {
       employeeId: e.uuid,
       firstName: e.firstName,
       lastName: e.lastName
     });
-  }, b = (e) => {
+  }, M = (e) => {
     const { paymentMethod: o } = e;
     return {
       employeeUuid: e.employeeUuid,
@@ -176,14 +203,14 @@ const Ye = ({
       ...o && o !== "Historical" ? { paymentMethod: o } : {},
       memo: e.memo || void 0
     };
-  }, se = async (e) => {
-    t(i.RUN_PAYROLL_EMPLOYEE_SKIP, {
+  }, ue = async (e) => {
+    t(l.RUN_PAYROLL_EMPLOYEE_SKIP, {
       employeeId: e.employeeUuid
-    }), await C({}, async () => {
-      const o = b(e), l = await E({
+    }), await P({}, async () => {
+      const o = M(e), r = await k({
         request: {
-          companyId: n,
-          payrollId: u,
+          companyId: u,
+          payrollId: i,
           payrollUpdate: {
             employeeCompensations: [
               { ...o, excluded: !o.excluded }
@@ -191,42 +218,42 @@ const Ye = ({
           }
         }
       });
-      t(i.RUN_PAYROLL_EMPLOYEE_SAVED, {
-        payrollPrepared: l.payrollPrepared
-      }), await D();
+      t(l.RUN_PAYROLL_EMPLOYEE_SAVED, {
+        payrollPrepared: r.payrollPrepared
+      }), await A();
     });
-  }, le = () => {
-    t(i.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
+  }, pe = () => {
+    t(l.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
   };
-  G(() => {
-    Ne(s.payrollShow?.processingRequest) && !r && (h.current = s.payrollShow?.calculatedAt?.getTime() ?? null, m(!0));
+  D(() => {
+    qe(s.payrollShow?.processingRequest) && !n && (h.current = s.payrollShow?.calculatedAt?.getTime() ?? null, m(!0));
     const e = s.payrollShow?.calculatedAt, o = e?.getTime() !== h.current;
-    r && o && Me(s.payrollShow?.processingRequest, e) && (t(i.RUN_PAYROLL_CALCULATED, {
-      payrollId: u,
+    n && o && Fe(s.payrollShow?.processingRequest, e) && (t(l.RUN_PAYROLL_CALCULATED, {
+      payrollId: i,
       alert: {
         type: "success",
         title: p("alerts.progressSaved"),
         alertKey: "progressSaved"
       },
       payPeriod: s.payrollShow?.payPeriod
-    }), w([]), m(!1)), r && s.payrollShow?.processingRequest?.status === _.ProcessingFailed && (t(i.RUN_PAYROLL_PROCESSING_FAILED), m(!1));
+    }), E([]), m(!1)), n && s.payrollShow?.processingRequest?.status === O.ProcessingFailed && (t(l.RUN_PAYROLL_PROCESSING_FAILED), m(!1));
   }, [
     s.payrollShow?.processingRequest?.status,
     s.payrollShow?.calculatedAt,
-    r,
+    n,
     t,
     p,
-    u
-  ]), G(() => {
-    if (!r) return;
+    i
+  ]), D(() => {
+    if (!n) return;
     const e = 180 * 1e3, o = setTimeout(() => {
-      t(i.RUN_PAYROLL_PROCESSING_FAILED), m(!1);
+      t(l.RUN_PAYROLL_PROCESSING_FAILED), m(!1);
     }, e);
     return () => {
       clearTimeout(o);
     };
-  }, [r, t]);
-  const re = (() => {
+  }, [n, t]);
+  const ce = (() => {
     const e = s.payrollShow?.payrollStatusMeta;
     if (e?.payrollLate && e.initialCheckDate && e.expectedDebitTime && e.expectedCheckDate)
       return {
@@ -239,56 +266,67 @@ const Ye = ({
         }),
         variant: "warning"
       };
-    const { payrollShow: l } = s, y = l?.employeeCompensations;
-    if (l && y && y.length > 0 && we(y))
+    const { payrollShow: r } = s, y = r?.employeeCompensations;
+    if (r && y && y.length > 0 && Re(y))
       return {
         label: p("alerts.directDepositDeadline", {
-          payDate: c.formatShortWithWeekday(l.checkDate),
-          ...c.formatWithTime(l.payrollDeadline)
+          payDate: c.formatShortWithWeekday(r.checkDate),
+          ...c.formatWithTime(r.payrollDeadline)
         }),
         content: p("alerts.directDepositDeadlineText"),
         variant: "info"
       };
   })();
-  return /* @__PURE__ */ pe(ce, { children: [
-    /* @__PURE__ */ P(
-      _e,
+  return S ? /* @__PURE__ */ C(
+    Ee,
+    {
+      companyId: u,
+      payrollId: i,
+      onEvent: (o, r) => {
+        o === l.RUN_PAYROLL_CANCELLED && A(), t(o, r);
+      },
+      withReimbursements: T,
+      alerts: [_]
+    }
+  ) : /* @__PURE__ */ fe(Ce, { children: [
+    /* @__PURE__ */ C(
+      De,
       {
-        onCalculatePayroll: te,
-        isCalculateDisabled: x.length > 0,
-        onEdit: ae,
-        onToggleExclude: se,
-        onViewBlockers: le,
-        employeeCompensations: A,
-        employeeDetails: W,
-        payPeriod: K,
-        paySchedule: I,
+        onCalculatePayroll: ie,
+        isCalculateDisabled: Y.length > 0,
+        onEdit: ne,
+        onToggleExclude: ue,
+        onViewBlockers: pe,
+        employeeCompensations: b,
+        employeeDetails: I,
+        payPeriod: J,
+        paySchedule: Q,
         payrollCategory: L,
-        alerts: Y,
-        payrollAlert: re,
-        isPending: r || V || Q || g,
-        isCalculating: g || r,
-        payrollBlockers: oe,
-        pagination: H,
-        withReimbursements: B,
-        grossUpEnabled: T,
-        onGrossUpSelect: z
+        alerts: W,
+        payrollAlert: ce,
+        isPending: n || X || Z || g,
+        isCalculating: g || n,
+        payrollBlockers: le,
+        pagination: z,
+        withReimbursements: T,
+        grossUpEnabled: G,
+        onGrossUpSelect: oe
       }
     ),
-    T && /* @__PURE__ */ P(
-      Ge,
+    G && /* @__PURE__ */ C(
+      Be,
       {
-        isOpen: J,
-        onCalculateGrossUp: X,
-        onApply: $,
+        isOpen: ee,
+        onCalculateGrossUp: te,
+        onApply: se,
         onCancel: () => {
-          S(!1);
+          R(!1);
         }
       }
     )
   ] });
 };
 export {
-  uo as PayrollConfiguration
+  fo as PayrollConfiguration
 };
 //# sourceMappingURL=PayrollConfiguration.js.map