@gusto/embedded-react-sdk 0.53.0 → 0.54.1-rc.1

package/dist/components/Employee/Compensation/management/CompensationComponents.js

@@ -1,48 +1,70 @@
-import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
 import { useTranslation as l } from "react-i18next";
-import { CompensationAddAnotherJobForm as d } from "./CompensationAddAnotherJobForm/CompensationAddAnotherJobForm.js";
+import { CompensationAddAnotherJobForm as a } from "./CompensationAddAnotherJobForm/CompensationAddAnotherJobForm.js";
 import { Flex as u } from "../../../Common/Flex/Flex.js";
 import { useFlow as r } from "../../../Flow/useFlow.js";
-import { useComponentContext as a } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { ensureRequired as t } from "../../../../helpers/ensureRequired.js";
+import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ensureRequired as m } from "../../../../helpers/ensureRequired.js";
 import { componentEvents as c } from "../../../../shared/constants.js";
-import { CompensationCard as C } from "./CompensationCard/CompensationCard.js";
-import { CompensationEditForm as f } from "./CompensationEditForm/CompensationEditForm.js";
+import { CompensationCard as f } from "./CompensationCard/CompensationCard.js";
 import { CompensationAddJobForm as E } from "./CompensationAddJobForm/CompensationAddJobForm.js";
+import { CompensationEditForm as I } from "./CompensationEditForm/CompensationEditForm.js";
 function S() {
-  const { employeeId: e, onEvent: o, successAlert: m } = r(), { t: s } = l("Employee.Management.Compensation"), i = a();
-  return /* @__PURE__ */ p(u, { flexDirection: "column", gap: 16, children: [
-    m ? /* @__PURE__ */ n(
+  const { employeeId: n, onEvent: o, successAlert: e, LoaderComponent: p } = r(), { t: s } = l("Employee.Management.Compensation"), i = C();
+  return /* @__PURE__ */ d(u, { flexDirection: "column", gap: 16, children: [
+    e ? /* @__PURE__ */ t(
       i.Alert,
       {
         status: "success",
-        label: s(`alerts.${m}`),
+        label: s(`alerts.${e}`),
         onDismiss: () => {
           o(c.EMPLOYEE_MANAGEMENT_COMPENSATION_ALERT_DISMISSED, null);
         }
       }
     ) : null,
-    /* @__PURE__ */ n(C, { employeeId: t(e), onEvent: o })
+    /* @__PURE__ */ t(
+      f,
+      {
+        employeeId: m(n),
+        onEvent: o,
+        LoaderComponent: p
+      }
+    )
   ] });
 }
 function T() {
-  const { employeeId: e, currentJobId: o, onEvent: m } = r();
-  return /* @__PURE__ */ n(
-    f,
+  const { employeeId: n, currentJobId: o, onEvent: e, LoaderComponent: p } = r();
+  return /* @__PURE__ */ t(
+    I,
     {
-      employeeId: t(e),
-      jobId: t(o ?? void 0),
-      onEvent: m
+      employeeId: m(n),
+      jobId: m(o ?? void 0),
+      onEvent: e,
+      LoaderComponent: p
     }
   );
 }
 function _() {
-  const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ n(E, { employeeId: t(e), onEvent: o });
+  const { employeeId: n, onEvent: o, LoaderComponent: e } = r();
+  return /* @__PURE__ */ t(
+    E,
+    {
+      employeeId: m(n),
+      onEvent: o,
+      LoaderComponent: e
+    }
+  );
 }
 function h() {
-  const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ n(d, { employeeId: t(e), onEvent: o });
+  const { employeeId: n, onEvent: o, LoaderComponent: e } = r();
+  return /* @__PURE__ */ t(
+    a,
+    {
+      employeeId: m(n),
+      onEvent: o,
+      LoaderComponent: e
+    }
+  );
 }
 export {
   h as CompensationAddAnotherJobFormContextual,

package/dist/components/Employee/Compensation/management/CompensationComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompensationComponents.js","sources":["../../../../../src/components/Employee/Compensation/management/CompensationComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { CompensationCard } from './CompensationCard'\nimport { CompensationEditForm } from './CompensationEditForm'\nimport { CompensationAddJobForm } from './CompensationAddJobForm'\nimport { CompensationAddAnotherJobForm } from './CompensationAddAnotherJobForm/CompensationAddAnotherJobForm'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { componentEvents } from '@/shared/constants'\n\ntype CompensationSuccessAlertCode = 'jobAdded'\n\n/** @internal */\nexport interface CompensationContextInterface extends FlowContextInterface {\n  employeeId?: string\n  /** Set when transitioning to `editCompensation` via the card EDIT event;\n   *  consumed by `CompensationEditFormContextual` to target the right job. */\n  currentJobId?: string | null\n  successAlert?: CompensationSuccessAlertCode | null\n}\n\n/** @internal */\nexport function CompensationCardContextual() {\n  const { employeeId, onEvent, successAlert } = useFlow<CompensationContextInterface>()\n  const { t } = useTranslation('Employee.Management.Compensation')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <CompensationCard employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function CompensationEditFormContextual() {\n  const { employeeId, currentJobId, onEvent } = useFlow<CompensationContextInterface>()\n  return (\n    <CompensationEditForm\n      employeeId={ensureRequired(employeeId)}\n      jobId={ensureRequired(currentJobId ?? undefined)}\n      onEvent={onEvent}\n    />\n  )\n}\n\n/** @internal */\nexport function CompensationAddJobFormContextual() {\n  const { employeeId, onEvent } = useFlow<CompensationContextInterface>()\n  return <CompensationAddJobForm employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\n/** @internal */\nexport function CompensationAddAnotherJobFormContextual() {\n  const { employeeId, onEvent } = useFlow<CompensationContextInterface>()\n  return <CompensationAddAnotherJobForm employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n"],"names":["CompensationCardContextual","employeeId","onEvent","successAlert","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","CompensationCard","ensureRequired","CompensationEditFormContextual","currentJobId","CompensationEditForm","CompensationAddJobFormContextual","CompensationAddJobForm","CompensationAddAnotherJobFormContextual","CompensationAddAnotherJobForm"],"mappings":";;;;;;;;;;;AAuBO,SAASA,IAA6B;AAC3C,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,EAAA,IAAiBC,EAAA,GACxC,EAAE,GAAAC,EAAA,IAAMC,EAAe,kCAAkC,GACzDC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAP,IACC,gBAAAQ;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUF,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQU,EAAgB,kDAAkD,IAAI;AAAA,QAChF;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,sBACHC,GAAA,EAAiB,YAAYC,EAAeb,CAAU,GAAG,SAAAC,EAAA,CAAkB;AAAA,EAAA,GAC9E;AAEJ;AAGO,SAASa,IAAiC;AAC/C,QAAM,EAAE,YAAAd,GAAY,cAAAe,GAAc,SAAAd,EAAA,IAAYE,EAAA;AAC9C,SACE,gBAAAO;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,YAAYH,EAAeb,CAAU;AAAA,MACrC,OAAOa,EAAeE,KAAgB,MAAS;AAAA,MAC/C,SAAAd;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASgB,IAAmC;AACjD,QAAM,EAAE,YAAAjB,GAAY,SAAAC,EAAA,IAAYE,EAAA;AAChC,2BAAQe,GAAA,EAAuB,YAAYL,EAAeb,CAAU,GAAG,SAAAC,GAAkB;AAC3F;AAGO,SAASkB,IAA0C;AACxD,QAAM,EAAE,YAAAnB,GAAY,SAAAC,EAAA,IAAYE,EAAA;AAChC,2BAAQiB,GAAA,EAA8B,YAAYP,EAAeb,CAAU,GAAG,SAAAC,GAAkB;AAClG;"}
+{"version":3,"file":"CompensationComponents.js","sources":["../../../../../src/components/Employee/Compensation/management/CompensationComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { CompensationCard } from './CompensationCard'\nimport { CompensationEditForm } from './CompensationEditForm'\nimport { CompensationAddJobForm } from './CompensationAddJobForm'\nimport { CompensationAddAnotherJobForm } from './CompensationAddAnotherJobForm/CompensationAddAnotherJobForm'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { componentEvents } from '@/shared/constants'\n\ntype CompensationSuccessAlertCode = 'jobAdded'\n\n/** @internal */\nexport interface CompensationContextInterface extends FlowContextInterface {\n  employeeId?: string\n  /** Set when transitioning to `editCompensation` via the card EDIT event;\n   *  consumed by `CompensationEditFormContextual` to target the right job. */\n  currentJobId?: string | null\n  successAlert?: CompensationSuccessAlertCode | null\n}\n\n/** @internal */\nexport function CompensationCardContextual() {\n  const { employeeId, onEvent, successAlert, LoaderComponent } =\n    useFlow<CompensationContextInterface>()\n  const { t } = useTranslation('Employee.Management.Compensation')\n  const Components = useComponentContext()\n  return (\n    <Flex flexDirection=\"column\" gap={16}>\n      {successAlert ? (\n        <Components.Alert\n          status=\"success\"\n          label={t(`alerts.${successAlert}`)}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_ALERT_DISMISSED, null)\n          }}\n        />\n      ) : null}\n      <CompensationCard\n        employeeId={ensureRequired(employeeId)}\n        onEvent={onEvent}\n        LoaderComponent={LoaderComponent}\n      />\n    </Flex>\n  )\n}\n\n/** @internal */\nexport function CompensationEditFormContextual() {\n  const { employeeId, currentJobId, onEvent, LoaderComponent } =\n    useFlow<CompensationContextInterface>()\n  return (\n    <CompensationEditForm\n      employeeId={ensureRequired(employeeId)}\n      jobId={ensureRequired(currentJobId ?? undefined)}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\n/** @internal */\nexport function CompensationAddJobFormContextual() {\n  const { employeeId, onEvent, LoaderComponent } = useFlow<CompensationContextInterface>()\n  return (\n    <CompensationAddJobForm\n      employeeId={ensureRequired(employeeId)}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\n/** @internal */\nexport function CompensationAddAnotherJobFormContextual() {\n  const { employeeId, onEvent, LoaderComponent } = useFlow<CompensationContextInterface>()\n  return (\n    <CompensationAddAnotherJobForm\n      employeeId={ensureRequired(employeeId)}\n      onEvent={onEvent}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["CompensationCardContextual","employeeId","onEvent","successAlert","LoaderComponent","useFlow","t","useTranslation","Components","useComponentContext","jsxs","Flex","jsx","componentEvents","CompensationCard","ensureRequired","CompensationEditFormContextual","currentJobId","CompensationEditForm","CompensationAddJobFormContextual","CompensationAddJobForm","CompensationAddAnotherJobFormContextual","CompensationAddAnotherJobForm"],"mappings":";;;;;;;;;;;AAuBO,SAASA,IAA6B;AAC3C,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,cAAAC,GAAc,iBAAAC,EAAA,IACzCC,EAAA,GACI,EAAE,GAAAC,EAAA,IAAMC,EAAe,kCAAkC,GACzDC,IAAaC,EAAA;AACnB,SACE,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAR,IACC,gBAAAS;AAAA,MAACJ,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,OAAOF,EAAE,UAAUH,CAAY,EAAE;AAAA,QACjC,WAAW,MAAM;AACf,UAAAD,EAAQW,EAAgB,kDAAkD,IAAI;AAAA,QAChF;AAAA,MAAA;AAAA,IAAA,IAEA;AAAA,IACJ,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,YAAYC,EAAed,CAAU;AAAA,QACrC,SAAAC;AAAA,QACA,iBAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAGO,SAASY,IAAiC;AAC/C,QAAM,EAAE,YAAAf,GAAY,cAAAgB,GAAc,SAAAf,GAAS,iBAAAE,EAAA,IACzCC,EAAA;AACF,SACE,gBAAAO;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,YAAYH,EAAed,CAAU;AAAA,MACrC,OAAOc,EAAeE,KAAgB,MAAS;AAAA,MAC/C,SAAAf;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASe,IAAmC;AACjD,QAAM,EAAE,YAAAlB,GAAY,SAAAC,GAAS,iBAAAE,EAAA,IAAoBC,EAAA;AACjD,SACE,gBAAAO;AAAA,IAACQ;AAAA,IAAA;AAAA,MACC,YAAYL,EAAed,CAAU;AAAA,MACrC,SAAAC;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASiB,IAA0C;AACxD,QAAM,EAAE,YAAApB,GAAY,SAAAC,GAAS,iBAAAE,EAAA,IAAoBC,EAAA;AACjD,SACE,gBAAAO;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,YAAYP,EAAed,CAAU;AAAA,MACrC,SAAAC;AAAA,MACA,iBAAAE;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.d.ts

@@ -1,4 +1,4 @@
-import { CommonComponentInterface } from '../../../../Base';
+import { CommonComponentInterface, LoaderComponentType } from '../../../../Base';
 import { OnEventType } from '../../../../Base/useBase';
 import { EventType } from '../../../../../shared/constants';
 /**
@@ -18,6 +18,8 @@ export interface CompensationEditFormProps extends CommonComponentInterface<'Emp
     jobId: string;
     /** Callback invoked when the form emits an event. See the events table on {@link CompensationEditForm} for the available event types and payloads. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Standalone form that edits the compensation for a single job, branching automatically between editing the current compensation and an already-scheduled future-dated change.
@@ -36,4 +38,4 @@ export interface CompensationEditFormProps extends CommonComponentInterface<'Emp
  * @public
  * @group Block components
  */
-export declare function CompensationEditForm({ employeeId, jobId, onEvent, dictionary, }: CompensationEditFormProps): import("react").JSX.Element;
+export declare function CompensationEditForm({ employeeId, jobId, onEvent, dictionary, LoaderComponent, }: CompensationEditFormProps): import("react").JSX.Element;

package/dist/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.js

@@ -1,45 +1,48 @@
-import { jsx as m } from "react/jsx-runtime";
-import { useJobsAndCompensationsGetJobs as p } from "@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs";
-import { getPendingCompensationChanges as d } from "../../shared/getPendingCompensationChanges.js";
-import { CompensationEditJobForm as f } from "../CompensationEditJobForm/CompensationEditJobForm.js";
-import { CompensationEditPendingJobForm as u } from "../CompensationEditPendingJobForm/CompensationEditPendingJobForm.js";
-import { BaseLayout as b } from "../../../../Base/Base.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useJobsAndCompensationsGetJobs as f } from "@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs";
+import { getPendingCompensationChanges as u } from "../../shared/getPendingCompensationChanges.js";
+import { CompensationEditJobForm as d } from "../CompensationEditJobForm/CompensationEditJobForm.js";
+import { CompensationEditPendingJobForm as b } from "../CompensationEditPendingJobForm/CompensationEditPendingJobForm.js";
+import { BaseLayout as g } from "../../../../Base/Base.js";
 import "../../../../Base/useBase.js";
-import { composeErrorHandler as g } from "../../../../../partner-hook-utils/composeErrorHandler.js";
-function w({
+import { composeErrorHandler as c } from "../../../../../partner-hook-utils/composeErrorHandler.js";
+function H({
   employeeId: o,
-  jobId: n,
+  jobId: i,
   onEvent: e,
-  dictionary: a
+  dictionary: p,
+  LoaderComponent: n
 }) {
-  const r = p({ employeeId: o }, { enabled: !!o });
+  const r = f({ employeeId: o }, { enabled: !!o });
   if (r.isLoading || !r.data) {
-    const s = g([r]);
-    return /* @__PURE__ */ m(b, { isLoading: !0, error: s.errors });
+    const m = c([r]);
+    return /* @__PURE__ */ a(g, { isLoading: !0, error: m.errors, LoaderComponent: n });
   }
-  const i = r.data.jobs?.find((s) => s.uuid === n), t = d(i ? [i] : [])[0];
-  return t ? /* @__PURE__ */ m(
-    u,
+  const t = r.data.jobs?.find((m) => m.uuid === i), s = u(t ? [t] : [])[0];
+  return s ? /* @__PURE__ */ a(
+    b,
     {
       employeeId: o,
-      jobId: n,
-      compensationId: t.compensationUuid,
-      isNewJob: t.isNewJob,
-      isPrimaryJob: i?.primary ?? !1,
+      jobId: i,
+      compensationId: s.compensationUuid,
+      isNewJob: s.isNewJob,
+      isPrimaryJob: t?.primary ?? !1,
       onEvent: e,
-      dictionary: a
+      dictionary: p,
+      LoaderComponent: n
     }
-  ) : /* @__PURE__ */ m(
-    f,
+  ) : /* @__PURE__ */ a(
+    d,
     {
       employeeId: o,
-      jobId: n,
+      jobId: i,
       onEvent: e,
-      dictionary: a
+      dictionary: p,
+      LoaderComponent: n
     }
   );
 }
 export {
-  w as CompensationEditForm
+  H as CompensationEditForm
 };
 //# sourceMappingURL=CompensationEditForm.js.map

package/dist/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompensationEditForm.js","sources":["../../../../../../src/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.tsx"],"sourcesContent":["import { useJobsAndCompensationsGetJobs } from '@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs'\nimport { getPendingCompensationChanges } from '../../shared/getPendingCompensationChanges'\nimport { CompensationEditJobForm } from '../CompensationEditJobForm/CompensationEditJobForm'\nimport { CompensationEditPendingJobForm } from '../CompensationEditPendingJobForm/CompensationEditPendingJobForm'\nimport { BaseLayout, type CommonComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { type EventType } from '@/shared/constants'\n\n/**\n * Props for {@link CompensationEditForm}.\n *\n * @public\n */\nexport interface CompensationEditFormProps extends CommonComponentInterface<'Employee.Management.Compensation'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /**\n   * The id of the job whose compensation is being edited (for example, the `jobId` from the\n   * {@link CompensationCard} `employee/management/compensation/card/editRequested` payload).\n   * The form inspects the job's compensations to decide whether to edit the current\n   * compensation or an already-scheduled future-dated change.\n   */\n  jobId: string\n  /** Callback invoked when the form emits an event. See the events table on {@link CompensationEditForm} for the available event types and payloads. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone form that edits the compensation for a single job, branching automatically between editing the current compensation and an already-scheduled future-dated change.\n *\n * @remarks\n * Pair with {@link CompensationCard} to route its `employee/management/compensation/card/editRequested` event to this form. {@link Compensation} bundles the card, the three form surfaces (edit, add job, add another job), and the swap and alert wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit (for example, when the form needs to render in a modal or drawer, or when the swap is driven by a router).\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/compensation/editForm/submitted` | Fired after the compensation change is saved; use it to return to the card | The updated `Compensation` entity |\n * | `employee/management/compensation/editForm/cancelled` | Fired when the user clicks Cancel; use it to return to the card | — |\n *\n * @param props - See {@link CompensationEditFormProps}.\n * @returns The rendered compensation edit form.\n * @public\n * @group Block components\n */\nexport function CompensationEditForm({\n  employeeId,\n  jobId,\n  onEvent,\n  dictionary,\n}: CompensationEditFormProps) {\n  const jobsQuery = useJobsAndCompensationsGetJobs({ employeeId }, { enabled: !!employeeId })\n\n  if (jobsQuery.isLoading || !jobsQuery.data) {\n    const errorHandling = composeErrorHandler([jobsQuery])\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  const job = jobsQuery.data.jobs?.find(j => j.uuid === jobId)\n\n  // The API does not guarantee ordering of job.compensations, so rely on the\n  // same sorted helper that drives the card display (ascending by effectiveDate)\n  // to find the nearest pending change.\n  const nearestPending = getPendingCompensationChanges(job ? [job] : [])[0]\n\n  if (nearestPending) {\n    return (\n      <CompensationEditPendingJobForm\n        employeeId={employeeId}\n        jobId={jobId}\n        compensationId={nearestPending.compensationUuid}\n        isNewJob={nearestPending.isNewJob}\n        isPrimaryJob={job?.primary ?? false}\n        onEvent={onEvent}\n        dictionary={dictionary}\n      />\n    )\n  }\n\n  return (\n    <CompensationEditJobForm\n      employeeId={employeeId}\n      jobId={jobId}\n      onEvent={onEvent}\n      dictionary={dictionary}\n    />\n  )\n}\n"],"names":["CompensationEditForm","employeeId","jobId","onEvent","dictionary","jobsQuery","useJobsAndCompensationsGetJobs","errorHandling","composeErrorHandler","BaseLayout","job","j","nearestPending","getPendingCompensationChanges","jsx","CompensationEditPendingJobForm","CompensationEditJobForm"],"mappings":";;;;;;;;AA6CO,SAASA,EAAqB;AAAA,EACnC,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAYC,EAA+B,EAAE,YAAAL,EAAA,GAAc,EAAE,SAAS,CAAC,CAACA,GAAY;AAE1F,MAAII,EAAU,aAAa,CAACA,EAAU,MAAM;AAC1C,UAAME,IAAgBC,EAAoB,CAACH,CAAS,CAAC;AACrD,6BAAQI,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAc,QAAQ;AAAA,EAC5D;AAEA,QAAMG,IAAML,EAAU,KAAK,MAAM,KAAK,CAAAM,MAAKA,EAAE,SAAST,CAAK,GAKrDU,IAAiBC,EAA8BH,IAAM,CAACA,CAAG,IAAI,CAAA,CAAE,EAAE,CAAC;AAExE,SAAIE,IAEA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAd;AAAA,MACA,OAAAC;AAAA,MACA,gBAAgBU,EAAe;AAAA,MAC/B,UAAUA,EAAe;AAAA,MACzB,cAAcF,GAAK,WAAW;AAAA,MAC9B,SAAAP;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAAf;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CompensationEditForm.js","sources":["../../../../../../src/components/Employee/Compensation/management/CompensationEditForm/CompensationEditForm.tsx"],"sourcesContent":["import { useJobsAndCompensationsGetJobs } from '@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs'\nimport { getPendingCompensationChanges } from '../../shared/getPendingCompensationChanges'\nimport { CompensationEditJobForm } from '../CompensationEditJobForm/CompensationEditJobForm'\nimport { CompensationEditPendingJobForm } from '../CompensationEditPendingJobForm/CompensationEditPendingJobForm'\nimport { BaseLayout, type CommonComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { type EventType } from '@/shared/constants'\n\n/**\n * Props for {@link CompensationEditForm}.\n *\n * @public\n */\nexport interface CompensationEditFormProps extends CommonComponentInterface<'Employee.Management.Compensation'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /**\n   * The id of the job whose compensation is being edited (for example, the `jobId` from the\n   * {@link CompensationCard} `employee/management/compensation/card/editRequested` payload).\n   * The form inspects the job's compensations to decide whether to edit the current\n   * compensation or an already-scheduled future-dated change.\n   */\n  jobId: string\n  /** Callback invoked when the form emits an event. See the events table on {@link CompensationEditForm} for the available event types and payloads. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone form that edits the compensation for a single job, branching automatically between editing the current compensation and an already-scheduled future-dated change.\n *\n * @remarks\n * Pair with {@link CompensationCard} to route its `employee/management/compensation/card/editRequested` event to this form. {@link Compensation} bundles the card, the three form surfaces (edit, add job, add another job), and the swap and alert wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit (for example, when the form needs to render in a modal or drawer, or when the swap is driven by a router).\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `employee/management/compensation/editForm/submitted` | Fired after the compensation change is saved; use it to return to the card | The updated `Compensation` entity |\n * | `employee/management/compensation/editForm/cancelled` | Fired when the user clicks Cancel; use it to return to the card | — |\n *\n * @param props - See {@link CompensationEditFormProps}.\n * @returns The rendered compensation edit form.\n * @public\n * @group Block components\n */\nexport function CompensationEditForm({\n  employeeId,\n  jobId,\n  onEvent,\n  dictionary,\n  LoaderComponent,\n}: CompensationEditFormProps) {\n  const jobsQuery = useJobsAndCompensationsGetJobs({ employeeId }, { enabled: !!employeeId })\n\n  if (jobsQuery.isLoading || !jobsQuery.data) {\n    const errorHandling = composeErrorHandler([jobsQuery])\n    return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n  }\n\n  const job = jobsQuery.data.jobs?.find(j => j.uuid === jobId)\n\n  // The API does not guarantee ordering of job.compensations, so rely on the\n  // same sorted helper that drives the card display (ascending by effectiveDate)\n  // to find the nearest pending change.\n  const nearestPending = getPendingCompensationChanges(job ? [job] : [])[0]\n\n  if (nearestPending) {\n    return (\n      <CompensationEditPendingJobForm\n        employeeId={employeeId}\n        jobId={jobId}\n        compensationId={nearestPending.compensationUuid}\n        isNewJob={nearestPending.isNewJob}\n        isPrimaryJob={job?.primary ?? false}\n        onEvent={onEvent}\n        dictionary={dictionary}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  return (\n    <CompensationEditJobForm\n      employeeId={employeeId}\n      jobId={jobId}\n      onEvent={onEvent}\n      dictionary={dictionary}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n"],"names":["CompensationEditForm","employeeId","jobId","onEvent","dictionary","LoaderComponent","jobsQuery","useJobsAndCompensationsGetJobs","errorHandling","composeErrorHandler","BaseLayout","job","j","nearestPending","getPendingCompensationChanges","jsx","CompensationEditPendingJobForm","CompensationEditJobForm"],"mappings":";;;;;;;;AAgDO,SAASA,EAAqB;AAAA,EACnC,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AACF,GAA8B;AAC5B,QAAMC,IAAYC,EAA+B,EAAE,YAAAN,EAAA,GAAc,EAAE,SAAS,CAAC,CAACA,GAAY;AAE1F,MAAIK,EAAU,aAAa,CAACA,EAAU,MAAM;AAC1C,UAAME,IAAgBC,EAAoB,CAACH,CAAS,CAAC;AACrD,6BAAQI,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAc,QAAQ,iBAAAH,GAAkC;AAAA,EAC9F;AAEA,QAAMM,IAAML,EAAU,KAAK,MAAM,KAAK,CAAAM,MAAKA,EAAE,SAASV,CAAK,GAKrDW,IAAiBC,EAA8BH,IAAM,CAACA,CAAG,IAAI,CAAA,CAAE,EAAE,CAAC;AAExE,SAAIE,IAEA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAf;AAAA,MACA,OAAAC;AAAA,MACA,gBAAgBW,EAAe;AAAA,MAC/B,UAAUA,EAAe;AAAA,MACzB,cAAcF,GAAK,WAAW;AAAA,MAC9B,SAAAR;AAAA,MACA,YAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA,IAMJ,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAAhB;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,YAAAC;AAAA,MACA,iBAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.d.ts

@@ -1,4 +1,4 @@
-import { CommonComponentInterface } from '../../../../Base';
+import { CommonComponentInterface, LoaderComponentType } from '../../../../Base';
 import { OnEventType } from '../../../../Base/useBase';
 import { EventType } from '../../../../../shared/constants';
 /**
@@ -15,10 +15,12 @@ export interface CompensationEditJobFormProps extends CommonComponentInterface<'
      *  `Compensation`) on a successful save, and
      *  `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED` when the user cancels. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Schedules a future-dated compensation change for a job that's already in effect.
  *
  * @public
  */
-export declare function CompensationEditJobForm({ dictionary, ...props }: CompensationEditJobFormProps): import("react").JSX.Element;
+export declare function CompensationEditJobForm({ dictionary, LoaderComponent, ...props }: CompensationEditJobFormProps): import("react").JSX.Element;

package/dist/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.js

@@ -1,33 +1,45 @@
 import { jsx as t } from "react/jsx-runtime";
-import C from "classnames";
-import { useTranslation as b } from "react-i18next";
-import { useJobsAndCompensationsGetJobs as M } from "@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs";
-import { useJobForm as F } from "../../shared/useJobForm/useJobForm.js";
-import { useCompensationForm as N } from "../../shared/useCompensationForm/useCompensationForm.js";
-import { ManagementCompensationFormBody as L } from "../ManagementCompensationFormBody.js";
-import T from "./CompensationEditJobForm.module.scss.js";
-import { BaseBoundaries as _, BaseLayout as u } from "../../../../Base/Base.js";
+import M from "classnames";
+import { useTranslation as C } from "react-i18next";
+import { useJobsAndCompensationsGetJobs as F } from "@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs";
+import { useJobForm as N } from "../../shared/useJobForm/useJobForm.js";
+import { useCompensationForm as T } from "../../shared/useCompensationForm/useCompensationForm.js";
+import { ManagementCompensationFormBody as _ } from "../ManagementCompensationFormBody.js";
+import h from "./CompensationEditJobForm.module.scss.js";
+import { BaseBoundaries as S, BaseLayout as c } from "../../../../Base/Base.js";
 import "../../../../Base/useBase.js";
-import { Form as h } from "../../../../Common/Form/Form.js";
-import { useComponentDictionary as S, useI18n as y } from "../../../../../i18n/I18n.js";
-import { composeErrorHandler as l } from "../../../../../partner-hook-utils/composeErrorHandler.js";
-import { composeSubmitHandler as D } from "../../../../../partner-hook-utils/form/composeSubmitHandler.js";
-import { componentEvents as f } from "../../../../../shared/constants.js";
-function q({ dictionary: e, ...r }) {
-  return S("Employee.Management.Compensation", e), /* @__PURE__ */ t(_, { componentName: "Employee.Management.Compensation", children: /* @__PURE__ */ t(A, { ...r }) });
+import { Form as y } from "../../../../Common/Form/Form.js";
+import { useComponentDictionary as D, useI18n as L } from "../../../../../i18n/I18n.js";
+import { composeErrorHandler as d } from "../../../../../partner-hook-utils/composeErrorHandler.js";
+import { composeSubmitHandler as A } from "../../../../../partner-hook-utils/form/composeSubmitHandler.js";
+import { componentEvents as E } from "../../../../../shared/constants.js";
+function Q({
+  dictionary: e,
+  LoaderComponent: n,
+  ...m
+}) {
+  return D("Employee.Management.Compensation", e), /* @__PURE__ */ t(
+    S,
+    {
+      componentName: "Employee.Management.Compensation",
+      LoaderComponent: n,
+      children: /* @__PURE__ */ t(O, { LoaderComponent: n, ...m })
+    }
+  );
 }
-function A({
+function O({
   employeeId: e,
-  jobId: r,
-  defaultValues: d,
-  ...m
+  jobId: n,
+  defaultValues: m,
+  LoaderComponent: u,
+  ...l
 }) {
-  const s = M({ employeeId: e }, { enabled: !!e });
+  const s = F({ employeeId: e }, { enabled: !!e });
   if (s.isLoading || !s.data) {
-    const i = l([s]);
-    return /* @__PURE__ */ t(u, { isLoading: !0, error: i.errors });
+    const r = d([s]);
+    return /* @__PURE__ */ t(c, { isLoading: !0, error: r.errors, LoaderComponent: u });
   }
-  const a = s.data.jobs?.find((i) => i.uuid === r), o = a?.compensations?.find((i) => i.uuid === a.currentCompensationUuid), n = o ? {
+  const a = s.data.jobs?.find((r) => r.uuid === n), o = a?.compensations?.find((r) => r.uuid === a.currentCompensationUuid), i = o ? {
     // Title lives on compensation in the API — `job.title` can lag
     // behind comp-level edits on secondaries, so seed directly from
     // the comp.
@@ -39,53 +51,69 @@ function A({
     minimumWageId: o.minimumWages?.[0]?.uuid ?? ""
     // effectiveDate intentionally omitted — user must choose a future date
   } : void 0;
-  return /* @__PURE__ */ t(O, { employeeId: e, jobId: r, defaultValues: n, ...m });
+  return /* @__PURE__ */ t(
+    R,
+    {
+      employeeId: e,
+      jobId: n,
+      defaultValues: i,
+      LoaderComponent: u,
+      ...l
+    }
+  );
 }
-function O({ employeeId: e, jobId: r, defaultValues: d, className: m, onEvent: s }) {
-  y("Employee.Management.Compensation");
-  const { t: a } = b("Employee.Management.Compensation"), o = F({
+function R({
+  employeeId: e,
+  jobId: n,
+  defaultValues: m,
+  className: u,
+  onEvent: l,
+  LoaderComponent: s
+}) {
+  L("Employee.Management.Compensation");
+  const { t: a } = C("Employee.Management.Compensation"), o = N({
     employeeId: e,
-    jobId: r,
+    jobId: n,
     withTitleField: !1,
     withHireDateField: !1,
     shouldFocusError: !1
-  }), n = N({
+  }), i = T({
     employeeId: e,
-    jobId: r,
-    defaultValues: d,
+    jobId: n,
+    defaultValues: m,
     withEffectiveDateField: !0,
     optionalFieldsToRequire: {
       create: ["title"]
     },
     shouldFocusError: !1
   });
-  if (o.isLoading || n.isLoading) {
-    const c = l([o, n]);
-    return /* @__PURE__ */ t(u, { isLoading: !0, error: c.errors });
+  if (o.isLoading || i.isLoading) {
+    const p = d([o, i]);
+    return /* @__PURE__ */ t(c, { isLoading: !0, error: p.errors, LoaderComponent: s });
   }
-  const i = D([o, n], async () => {
+  const r = A([o, i], async () => {
     if (!await o.actions.onSubmit()) return;
-    const p = await n.actions.onSubmit();
-    p && s(
-      f.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED,
-      p.data
+    const f = await i.actions.onSubmit();
+    f && l(
+      E.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED,
+      f.data
     );
-  }), E = l([i]), g = o.status.isPending || n.status.isPending;
-  return /* @__PURE__ */ t("section", { className: C(T.container, m), children: /* @__PURE__ */ t(u, { error: E.errors, children: /* @__PURE__ */ t(h, { onSubmit: i.handleSubmit, children: /* @__PURE__ */ t(
-    L,
+  }), g = d([r]), b = o.status.isPending || i.status.isPending;
+  return /* @__PURE__ */ t("section", { className: M(h.container, u), children: /* @__PURE__ */ t(c, { error: g.errors, LoaderComponent: s, children: /* @__PURE__ */ t(y, { onSubmit: r.handleSubmit, children: /* @__PURE__ */ t(
+    _,
     {
       jobForm: o,
-      compensationForm: n,
+      compensationForm: i,
       title: a("editCompensationTitle"),
       submitCtaLabel: a("saveCta"),
-      isPending: g,
+      isPending: b,
       onCancel: () => {
-        s(f.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED);
+        l(E.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED);
       }
     }
   ) }) }) });
 }
 export {
-  q as CompensationEditJobForm
+  Q as CompensationEditJobForm
 };
 //# sourceMappingURL=CompensationEditJobForm.js.map

package/dist/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompensationEditJobForm.js","sources":["../../../../../../src/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useJobsAndCompensationsGetJobs } from '@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs'\nimport { useJobForm } from '../../shared/useJobForm'\nimport { useCompensationForm, type CompensationFormData } from '../../shared/useCompensationForm'\nimport { ManagementCompensationFormBody } from '../ManagementCompensationFormBody'\nimport styles from './CompensationEditJobForm.module.scss'\nimport { BaseBoundaries, BaseLayout, type CommonComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { composeSubmitHandler } from '@/partner-hook-utils/form/composeSubmitHandler'\nimport { componentEvents, type EventType } from '@/shared/constants'\n\n/**\n * Props for {@link CompensationEditJobForm}.\n *\n * @public\n */\nexport interface CompensationEditJobFormProps extends CommonComponentInterface<'Employee.Management.Compensation'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** The job whose compensation is being edited. */\n  jobId: string\n  /** Fires `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED` (with the saved\n   *  `Compensation`) on a successful save, and\n   *  `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED` when the user cancels. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Schedules a future-dated compensation change for a job that's already in effect.\n *\n * @public\n */\nexport function CompensationEditJobForm({ dictionary, ...props }: CompensationEditJobFormProps) {\n  useComponentDictionary('Employee.Management.Compensation', dictionary)\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Compensation\">\n      <CompensationDefaultsLoader {...props} />\n    </BaseBoundaries>\n  )\n}\n\ntype LoaderProps = Omit<CompensationEditJobFormProps, 'dictionary'>\n\n// Fetches the current job's compensation data to pre-populate the form as\n// defaultValues before rendering Root. Uses the same non-suspense query that\n// useCompensationForm uses internally — React Query dedupes the request so no\n// extra network call is made once Root mounts.\n// defaultValues from CommonComponentInterface (unknown) is excluded from the\n// spread so it doesn't conflict with Root's typed defaultValues prop.\nfunction CompensationDefaultsLoader({\n  employeeId,\n  jobId,\n  defaultValues: _baseDefaults,\n  ...rest\n}: LoaderProps) {\n  const jobsQuery = useJobsAndCompensationsGetJobs({ employeeId }, { enabled: !!employeeId })\n\n  if (jobsQuery.isLoading || !jobsQuery.data) {\n    const errorHandling = composeErrorHandler([jobsQuery])\n    return <BaseLayout isLoading error={errorHandling.errors} />\n  }\n\n  const job = jobsQuery.data.jobs?.find(j => j.uuid === jobId)\n  const currentComp = job?.compensations?.find(c => c.uuid === job.currentCompensationUuid)\n\n  const defaultValues: Partial<CompensationFormData> | undefined = currentComp\n    ? {\n        // Title lives on compensation in the API — `job.title` can lag\n        // behind comp-level edits on secondaries, so seed directly from\n        // the comp.\n        title: currentComp.title ?? undefined,\n        flsaStatus: currentComp.flsaStatus ?? undefined,\n        rate: Number(currentComp.rate),\n        paymentUnit: currentComp.paymentUnit ?? undefined,\n        adjustForMinimumWage: currentComp.adjustForMinimumWage ?? false,\n        minimumWageId: currentComp.minimumWages?.[0]?.uuid ?? '',\n        // effectiveDate intentionally omitted — user must choose a future date\n      }\n    : undefined\n\n  return <Root employeeId={employeeId} jobId={jobId} defaultValues={defaultValues} {...rest} />\n}\n\ninterface RootProps extends LoaderProps {\n  defaultValues?: Partial<CompensationFormData>\n}\n\nfunction Root({ employeeId, jobId, defaultValues, className, onEvent }: RootProps) {\n  useI18n('Employee.Management.Compensation')\n  const { t } = useTranslation('Employee.Management.Compensation')\n\n  // Job form handles the non-effective-dated fields: 2% shareholder + WA WC.\n  // Title is suppressed here because the compensation form owns title\n  // (effective-dated alongside rate/unit/FLSA on the future-dated row).\n  // Hire-date is suppressed because this surface never edits it.\n  const jobForm = useJobForm({\n    employeeId,\n    jobId,\n    withTitleField: false,\n    withHireDateField: false,\n    shouldFocusError: false,\n  })\n\n  // Compensation form runs in create mode (no compensationId) → POST\n  // /v1/jobs/:jobId/compensations, creating a new future-dated compensation.\n  // The form is pre-populated with the current comp's values via defaultValues\n  // (fetched by CompensationDefaultsLoader) so the user can edit from the\n  // current state, and picks a future effectiveDate to schedule the change.\n  const compensationForm = useCompensationForm({\n    employeeId,\n    jobId,\n    defaultValues,\n    withEffectiveDateField: true,\n    optionalFieldsToRequire: {\n      create: ['title'],\n    },\n    shouldFocusError: false,\n  })\n\n  if (jobForm.isLoading || compensationForm.isLoading) {\n    const loadingErrorHandling = composeErrorHandler([jobForm, compensationForm])\n    return <BaseLayout isLoading error={loadingErrorHandling.errors} />\n  }\n\n  // PUT job first (immediate mutation of 2% shareholder / WC), then POST\n  // the new compensation (the future-dated change). composeSubmitHandler\n  // validates both forms in parallel and short-circuits before any network\n  // I/O if either fails.\n  const submitResult = composeSubmitHandler([jobForm, compensationForm], async () => {\n    const jobResult = await jobForm.actions.onSubmit()\n    if (!jobResult) return\n\n    const compensationResult = await compensationForm.actions.onSubmit()\n    if (!compensationResult) return\n\n    onEvent(\n      componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED,\n      compensationResult.data,\n    )\n  })\n\n  const errorHandling = composeErrorHandler([submitResult])\n  const isPending = jobForm.status.isPending || compensationForm.status.isPending\n\n  return (\n    <section className={classNames(styles.container, className)}>\n      <BaseLayout error={errorHandling.errors}>\n        <Form onSubmit={submitResult.handleSubmit}>\n          <ManagementCompensationFormBody\n            jobForm={jobForm}\n            compensationForm={compensationForm}\n            title={t('editCompensationTitle')}\n            submitCtaLabel={t('saveCta')}\n            isPending={isPending}\n            onCancel={() => {\n              onEvent(componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED)\n            }}\n          />\n        </Form>\n      </BaseLayout>\n    </section>\n  )\n}\n"],"names":["CompensationEditJobForm","dictionary","props","useComponentDictionary","jsx","BaseBoundaries","CompensationDefaultsLoader","employeeId","jobId","_baseDefaults","rest","jobsQuery","useJobsAndCompensationsGetJobs","errorHandling","composeErrorHandler","BaseLayout","job","j","currentComp","c","defaultValues","Root","className","onEvent","useI18n","t","useTranslation","jobForm","useJobForm","compensationForm","useCompensationForm","loadingErrorHandling","submitResult","composeSubmitHandler","compensationResult","componentEvents","isPending","classNames","styles","Form","ManagementCompensationFormBody"],"mappings":"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"}
+{"version":3,"file":"CompensationEditJobForm.js","sources":["../../../../../../src/components/Employee/Compensation/management/CompensationEditJobForm/CompensationEditJobForm.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { useJobsAndCompensationsGetJobs } from '@gusto/embedded-api/react-query/jobsAndCompensationsGetJobs'\nimport { useJobForm } from '../../shared/useJobForm'\nimport { useCompensationForm, type CompensationFormData } from '../../shared/useCompensationForm'\nimport { ManagementCompensationFormBody } from '../ManagementCompensationFormBody'\nimport styles from './CompensationEditJobForm.module.scss'\nimport { BaseBoundaries, BaseLayout, type CommonComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport { Form } from '@/components/Common/Form'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { composeSubmitHandler } from '@/partner-hook-utils/form/composeSubmitHandler'\nimport { componentEvents, type EventType } from '@/shared/constants'\n\n/**\n * Props for {@link CompensationEditJobForm}.\n *\n * @public\n */\nexport interface CompensationEditJobFormProps extends CommonComponentInterface<'Employee.Management.Compensation'> {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** The job whose compensation is being edited. */\n  jobId: string\n  /** Fires `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED` (with the saved\n   *  `Compensation`) on a successful save, and\n   *  `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED` when the user cancels. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Schedules a future-dated compensation change for a job that's already in effect.\n *\n * @public\n */\nexport function CompensationEditJobForm({\n  dictionary,\n  LoaderComponent,\n  ...props\n}: CompensationEditJobFormProps) {\n  useComponentDictionary('Employee.Management.Compensation', dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Employee.Management.Compensation\"\n      LoaderComponent={LoaderComponent}\n    >\n      <CompensationDefaultsLoader LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\ntype LoaderProps = Omit<CompensationEditJobFormProps, 'dictionary'>\n\n// Fetches the current job's compensation data to pre-populate the form as\n// defaultValues before rendering Root. Uses the same non-suspense query that\n// useCompensationForm uses internally — React Query dedupes the request so no\n// extra network call is made once Root mounts.\n// defaultValues from CommonComponentInterface (unknown) is excluded from the\n// spread so it doesn't conflict with Root's typed defaultValues prop.\nfunction CompensationDefaultsLoader({\n  employeeId,\n  jobId,\n  defaultValues: _baseDefaults,\n  LoaderComponent,\n  ...rest\n}: LoaderProps) {\n  const jobsQuery = useJobsAndCompensationsGetJobs({ employeeId }, { enabled: !!employeeId })\n\n  if (jobsQuery.isLoading || !jobsQuery.data) {\n    const errorHandling = composeErrorHandler([jobsQuery])\n    return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n  }\n\n  const job = jobsQuery.data.jobs?.find(j => j.uuid === jobId)\n  const currentComp = job?.compensations?.find(c => c.uuid === job.currentCompensationUuid)\n\n  const defaultValues: Partial<CompensationFormData> | undefined = currentComp\n    ? {\n        // Title lives on compensation in the API — `job.title` can lag\n        // behind comp-level edits on secondaries, so seed directly from\n        // the comp.\n        title: currentComp.title ?? undefined,\n        flsaStatus: currentComp.flsaStatus ?? undefined,\n        rate: Number(currentComp.rate),\n        paymentUnit: currentComp.paymentUnit ?? undefined,\n        adjustForMinimumWage: currentComp.adjustForMinimumWage ?? false,\n        minimumWageId: currentComp.minimumWages?.[0]?.uuid ?? '',\n        // effectiveDate intentionally omitted — user must choose a future date\n      }\n    : undefined\n\n  return (\n    <Root\n      employeeId={employeeId}\n      jobId={jobId}\n      defaultValues={defaultValues}\n      LoaderComponent={LoaderComponent}\n      {...rest}\n    />\n  )\n}\n\ninterface RootProps extends LoaderProps {\n  defaultValues?: Partial<CompensationFormData>\n}\n\nfunction Root({\n  employeeId,\n  jobId,\n  defaultValues,\n  className,\n  onEvent,\n  LoaderComponent,\n}: RootProps) {\n  useI18n('Employee.Management.Compensation')\n  const { t } = useTranslation('Employee.Management.Compensation')\n\n  // Job form handles the non-effective-dated fields: 2% shareholder + WA WC.\n  // Title is suppressed here because the compensation form owns title\n  // (effective-dated alongside rate/unit/FLSA on the future-dated row).\n  // Hire-date is suppressed because this surface never edits it.\n  const jobForm = useJobForm({\n    employeeId,\n    jobId,\n    withTitleField: false,\n    withHireDateField: false,\n    shouldFocusError: false,\n  })\n\n  // Compensation form runs in create mode (no compensationId) → POST\n  // /v1/jobs/:jobId/compensations, creating a new future-dated compensation.\n  // The form is pre-populated with the current comp's values via defaultValues\n  // (fetched by CompensationDefaultsLoader) so the user can edit from the\n  // current state, and picks a future effectiveDate to schedule the change.\n  const compensationForm = useCompensationForm({\n    employeeId,\n    jobId,\n    defaultValues,\n    withEffectiveDateField: true,\n    optionalFieldsToRequire: {\n      create: ['title'],\n    },\n    shouldFocusError: false,\n  })\n\n  if (jobForm.isLoading || compensationForm.isLoading) {\n    const loadingErrorHandling = composeErrorHandler([jobForm, compensationForm])\n    return (\n      <BaseLayout isLoading error={loadingErrorHandling.errors} LoaderComponent={LoaderComponent} />\n    )\n  }\n\n  // PUT job first (immediate mutation of 2% shareholder / WC), then POST\n  // the new compensation (the future-dated change). composeSubmitHandler\n  // validates both forms in parallel and short-circuits before any network\n  // I/O if either fails.\n  const submitResult = composeSubmitHandler([jobForm, compensationForm], async () => {\n    const jobResult = await jobForm.actions.onSubmit()\n    if (!jobResult) return\n\n    const compensationResult = await compensationForm.actions.onSubmit()\n    if (!compensationResult) return\n\n    onEvent(\n      componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_SUBMITTED,\n      compensationResult.data,\n    )\n  })\n\n  const errorHandling = composeErrorHandler([submitResult])\n  const isPending = jobForm.status.isPending || compensationForm.status.isPending\n\n  return (\n    <section className={classNames(styles.container, className)}>\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Form onSubmit={submitResult.handleSubmit}>\n          <ManagementCompensationFormBody\n            jobForm={jobForm}\n            compensationForm={compensationForm}\n            title={t('editCompensationTitle')}\n            submitCtaLabel={t('saveCta')}\n            isPending={isPending}\n            onCancel={() => {\n              onEvent(componentEvents.EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED)\n            }}\n          />\n        </Form>\n      </BaseLayout>\n    </section>\n  )\n}\n"],"names":["CompensationEditJobForm","dictionary","LoaderComponent","props","useComponentDictionary","jsx","BaseBoundaries","CompensationDefaultsLoader","employeeId","jobId","_baseDefaults","rest","jobsQuery","useJobsAndCompensationsGetJobs","errorHandling","composeErrorHandler","BaseLayout","job","j","currentComp","c","defaultValues","Root","className","onEvent","useI18n","t","useTranslation","jobForm","useJobForm","compensationForm","useCompensationForm","loadingErrorHandling","submitResult","composeSubmitHandler","compensationResult","componentEvents","isPending","classNames","styles","Form","ManagementCompensationFormBody"],"mappings":"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"}

package/dist/components/Employee/Compensation/management/CompensationEditPendingJobForm/CompensationEditPendingJobForm.d.ts

@@ -1,4 +1,4 @@
-import { CommonComponentInterface } from '../../../../Base';
+import { CommonComponentInterface, LoaderComponentType } from '../../../../Base';
 import { OnEventType } from '../../../../Base/useBase';
 import { EventType } from '../../../../../shared/constants';
 /**
@@ -28,10 +28,12 @@ export interface CompensationEditPendingJobFormProps extends CommonComponentInte
      *  `Compensation`) on a successful save, and
      *  `EMPLOYEE_MANAGEMENT_COMPENSATION_EDIT_FORM_CANCELLED` when the user cancels. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Edits a pending (future-dated) compensation in place.
  *
  * @public
  */
-export declare function CompensationEditPendingJobForm({ dictionary, ...props }: CompensationEditPendingJobFormProps): import("react").JSX.Element;
+export declare function CompensationEditPendingJobForm({ dictionary, LoaderComponent, ...props }: CompensationEditPendingJobFormProps): import("react").JSX.Element;