@gusto/embedded-react-sdk 0.21.0 → 0.23.0

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.d.ts

@@ -2,11 +2,11 @@ import { ConfirmationAlert } from './types';
 import { payrollWireEvents } from '../../../shared/constants';
 export type EventPayloads = {
     [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT]: {
-        selectedId: string;
+        selectedWireInId: string;
     };
     [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined;
     [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: {
-        selectedId: string;
+        selectedWireInId: string;
     };
     [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: {
         confirmationAlert: ConfirmationAlert;

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.js

@@ -1,45 +1,45 @@
-import { state as i, transition as e, reduce as o } from "robot3";
-import { ConfirmWireDetailsFormContextual as a, WireInstructionsContextual as c } from "./ConfirmWireDetailsComponents.js";
-import { payrollWireEvents as r } from "../../../shared/constants.js";
+import { state as i, transition as e, reduce as r } from "robot3";
+import { ConfirmWireDetailsFormContextual as I, WireInstructionsContextual as a } from "./ConfirmWireDetailsComponents.js";
+import { payrollWireEvents as o } from "../../../shared/constants.js";
 const m = {
   banner: i(
     e(
-      r.PAYROLL_WIRE_START_TRANSFER,
+      o.PAYROLL_WIRE_START_TRANSFER,
       "wireInstructions",
-      o(
+      r(
         (n) => ({
           ...n,
-          component: c
+          component: a
         })
       )
     )
   ),
   wireInstructions: i(
     e(
-      r.PAYROLL_WIRE_INSTRUCTIONS_SELECT,
+      o.PAYROLL_WIRE_INSTRUCTIONS_SELECT,
       "wireInstructions",
-      o(
+      r(
         (n, t) => ({
           ...n,
-          selectedWireInId: t.payload.selectedId
+          selectedWireInId: t.payload.selectedWireInId
         })
       )
     ),
     e(
-      r.PAYROLL_WIRE_INSTRUCTIONS_DONE,
+      o.PAYROLL_WIRE_INSTRUCTIONS_DONE,
       "confirmForm",
-      o(
+      r(
         (n, t) => ({
           ...n,
-          component: a,
-          selectedWireInId: t.payload.selectedId
+          component: I,
+          selectedWireInId: t.payload.selectedWireInId
         })
       )
     ),
     e(
-      r.PAYROLL_WIRE_FORM_CANCEL,
+      o.PAYROLL_WIRE_FORM_CANCEL,
       "banner",
-      o(
+      r(
         (n) => ({
           ...n
         })
@@ -48,9 +48,9 @@ const m = {
   ),
   confirmForm: i(
     e(
-      r.PAYROLL_WIRE_FORM_DONE,
+      o.PAYROLL_WIRE_FORM_DONE,
       "banner",
-      o(
+      r(
         (n, t) => ({
           ...n,
           component: null,
@@ -59,9 +59,9 @@ const m = {
       )
     ),
     e(
-      r.PAYROLL_WIRE_FORM_CANCEL,
+      o.PAYROLL_WIRE_FORM_CANCEL,
       "banner",
-      o(
+      r(
         (n) => ({
           ...n,
           component: null

package/dist/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirmWireDetailsStateMachine.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.tsx"],"sourcesContent":["import { state, transition, reduce } from 'robot3'\nimport type { ConfirmationAlert } from './types'\nimport type { ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport {\n  WireInstructionsContextual,\n  ConfirmWireDetailsFormContextual,\n} from './ConfirmWireDetailsComponents'\nimport { payrollWireEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\nexport type EventPayloads = {\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT]: {\n    selectedId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: {\n    selectedId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: {\n    confirmationAlert: ConfirmationAlert\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL]: undefined\n}\n\nexport const confirmWireDetailsMachine = {\n  banner: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_START_TRANSFER,\n      'wireInstructions',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: WireInstructionsContextual,\n        }),\n      ),\n    ),\n  ),\n  wireInstructions: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT,\n      'wireInstructions',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          selectedWireInId: ev.payload.selectedId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE,\n      'confirmForm',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: ConfirmWireDetailsFormContextual,\n          selectedWireInId: ev.payload.selectedId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n  ),\n  confirmForm: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_DONE,\n      'banner',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<EventPayloads, typeof payrollWireEvents.PAYROLL_WIRE_FORM_DONE>,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n          confirmationAlert: ev.payload.confirmationAlert,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n        }),\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["confirmWireDetailsMachine","state","transition","payrollWireEvents","reduce","ctx","WireInstructionsContextual","ev","ConfirmWireDetailsFormContextual"],"mappings":";;;AAwBO,MAAMA,IAA4B;AAAA,EACvC,QAAQC;AAAA,IACNC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAWC;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,kBAAkBL;AAAA,IAChBC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,kBAAkBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAWG;AAAA,UACX,kBAAkBD,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEF,aAAaJ;AAAA,IACXC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OACwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAW;AAAA,UACX,mBAAmBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAChC;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,OAAOJ,EAAA;AACT;"}
+{"version":3,"file":"confirmWireDetailsStateMachine.js","sources":["../../../../src/components/Payroll/ConfirmWireDetails/confirmWireDetailsStateMachine.tsx"],"sourcesContent":["import { state, transition, reduce } from 'robot3'\nimport type { ConfirmationAlert } from './types'\nimport type { ConfirmWireDetailsContextInterface } from './ConfirmWireDetailsComponents'\nimport {\n  WireInstructionsContextual,\n  ConfirmWireDetailsFormContextual,\n} from './ConfirmWireDetailsComponents'\nimport { payrollWireEvents } from '@/shared/constants'\nimport type { MachineEventType, MachineTransition } from '@/types/Helpers'\n\nexport type EventPayloads = {\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT]: {\n    selectedWireInId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_START_TRANSFER]: undefined\n  [payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE]: {\n    selectedWireInId: string\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_DONE]: {\n    confirmationAlert: ConfirmationAlert\n  }\n  [payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL]: undefined\n}\n\nexport const confirmWireDetailsMachine = {\n  banner: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_START_TRANSFER,\n      'wireInstructions',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: WireInstructionsContextual,\n        }),\n      ),\n    ),\n  ),\n  wireInstructions: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT,\n      'wireInstructions',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_SELECT\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          selectedWireInId: ev.payload.selectedWireInId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE,\n      'confirmForm',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<\n            EventPayloads,\n            typeof payrollWireEvents.PAYROLL_WIRE_INSTRUCTIONS_DONE\n          >,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: ConfirmWireDetailsFormContextual,\n          selectedWireInId: ev.payload.selectedWireInId,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n        }),\n      ),\n    ),\n  ),\n  confirmForm: state<MachineTransition>(\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_DONE,\n      'banner',\n      reduce(\n        (\n          ctx: ConfirmWireDetailsContextInterface,\n          ev: MachineEventType<EventPayloads, typeof payrollWireEvents.PAYROLL_WIRE_FORM_DONE>,\n        ): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n          confirmationAlert: ev.payload.confirmationAlert,\n        }),\n      ),\n    ),\n    transition(\n      payrollWireEvents.PAYROLL_WIRE_FORM_CANCEL,\n      'banner',\n      reduce(\n        (ctx: ConfirmWireDetailsContextInterface): ConfirmWireDetailsContextInterface => ({\n          ...ctx,\n          component: null,\n        }),\n      ),\n    ),\n  ),\n  final: state<MachineTransition>(),\n}\n"],"names":["confirmWireDetailsMachine","state","transition","payrollWireEvents","reduce","ctx","WireInstructionsContextual","ev","ConfirmWireDetailsFormContextual"],"mappings":";;;AAwBO,MAAMA,IAA4B;AAAA,EACvC,QAAQC;AAAA,IACNC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAWC;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,kBAAkBL;AAAA,IAChBC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,kBAAkBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OAIwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAWG;AAAA,UACX,kBAAkBD,EAAG,QAAQ;AAAA,QAAA;AAAA,MAC/B;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,QAAA;AAAA,MACL;AAAA,IACF;AAAA,EACF;AAAA,EAEF,aAAaJ;AAAA,IACXC;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CACEC,GACAE,OACwC;AAAA,UACxC,GAAGF;AAAA,UACH,WAAW;AAAA,UACX,mBAAmBE,EAAG,QAAQ;AAAA,QAAA;AAAA,MAChC;AAAA,IACF;AAAA,IAEFL;AAAA,MACEC,EAAkB;AAAA,MAClB;AAAA,MACAC;AAAA,QACE,CAACC,OAAiF;AAAA,UAChF,GAAGA;AAAA,UACH,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EAEF,OAAOJ,EAAA;AACT;"}

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

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as l, Fragment as G } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as G } from "react/jsx-runtime";
 import { useRef as N } from "react";
 import { useTranslation as S, Trans as O } from "react-i18next";
 import { useFormatEmployeePayRate as V, getRegularHours as _, getOvertimeHours as z, formatHoursDisplay as P, getTotalPtoHours as K, getAdditionalEarnings as W, getReimbursements as X, calculateGrossPay as q } from "../helpers.js";
@@ -7,6 +7,7 @@ import k from "./PayrollConfigurationPresentation.module.scss.js";
 import { useI18n as Q } from "../../../i18n/I18n.js";
 import { Flex as m, FlexItem as h } from "../../Common/Flex/Flex.js";
 import { Grid as Y } from "../../Common/Grid/Grid.js";
+import "classnames";
 import { HamburgerMenu as Z } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useComponentContext as $ } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import ee from "../../../assets/icons/pencil.svg.js";
@@ -14,11 +15,11 @@ import te from "../../../assets/icons/x-circle.svg.js";
 import re from "../../../assets/icons/plus-circle.svg.js";
 import { formatNumberAsCurrency as f, firstLastName as ne } from "../../../helpers/formattedStrings.js";
 import { useDateFormatter as ie } from "../../../hooks/useDateFormatter.js";
-import { useLoadingIndicator as le } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-import { useContainerBreakpoints as oe } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useLoadingIndicator as oe } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { useContainerBreakpoints as le } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
 import { DataView as ae } from "../../Common/DataView/DataView.js";
-const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate, o.endDate) : { startDate: "", endDate: "" }, Ee = ({
-  employeeCompensations: o,
+const se = (l, u) => l?.startDate && l.endDate ? u.formatPayPeriod(l.startDate, l.endDate) : { startDate: "", endDate: "" }, Ie = ({
+  employeeCompensations: l,
   employeeDetails: u,
   payPeriod: y,
   paySchedule: T,
@@ -35,12 +36,12 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
 }) => {
   const { Button: x, Heading: g, Text: i, Badge: R, LoadingSpinner: A, Alert: F } = $();
   Q("Payroll.PayrollConfiguration");
-  const { t: r } = S("Payroll.PayrollConfiguration"), B = ie(), { LoadingIndicator: L } = le(), U = V(), w = N(null), a = oe({ ref: w }).includes("small"), c = new Map(u.map((t) => [t.uuid, t])), j = (t) => {
+  const { t: r } = S("Payroll.PayrollConfiguration"), B = ie(), { LoadingIndicator: L } = oe(), U = V(), w = N(null), a = le({ ref: w }).includes("small"), c = new Map(u.map((t) => [t.uuid, t])), j = (t) => {
     const n = c.get(t);
     return n ? ne({ first_name: n.firstName, last_name: n.lastName }) : null;
   };
-  return /* @__PURE__ */ e("div", { ref: w, className: k.container, children: /* @__PURE__ */ l(m, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ e("div", { ref: w, className: k.container, children: /* @__PURE__ */ o(m, { flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ o(
       m,
       {
         flexDirection: a ? "row" : "column",
@@ -48,7 +49,7 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
         alignItems: a ? "center" : "stretch",
         gap: a ? 0 : 16,
         children: [
-          /* @__PURE__ */ l(h, { children: [
+          /* @__PURE__ */ o(h, { children: [
             /* @__PURE__ */ e(g, { as: "h1", children: r("pageTitle") }),
             /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
               O,
@@ -80,15 +81,15 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
         ]
       }
     ),
-    (C || d) && /* @__PURE__ */ l(Y, { gap: 16, gridTemplateColumns: "1fr", children: [
+    (C || d) && /* @__PURE__ */ o(Y, { gap: 16, gridTemplateColumns: "1fr", children: [
       d && /* @__PURE__ */ e(F, { status: "info", label: d.label, children: d.content }),
       C
     ] }),
-    p ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ l(m, { flexDirection: "column", alignItems: "center", gap: 4, children: [
+    p ? /* @__PURE__ */ e(L, { children: /* @__PURE__ */ o(m, { flexDirection: "column", alignItems: "center", gap: 4, children: [
       /* @__PURE__ */ e(A, { size: "lg" }),
       /* @__PURE__ */ e(g, { as: "h4", children: r("loadingTitle") }),
       /* @__PURE__ */ e(i, { children: r("loadingDescription") })
-    ] }) }) : /* @__PURE__ */ l(G, { children: [
+    ] }) }) : /* @__PURE__ */ o(G, { children: [
       /* @__PURE__ */ e("div", { className: k.payrollBlockerContainer, children: D.length > 0 && /* @__PURE__ */ e(
         J,
         {
@@ -96,7 +97,7 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
           onMultipleViewClick: H
         }
       ) }),
-      /* @__PURE__ */ l(h, { children: [
+      /* @__PURE__ */ o(h, { children: [
         /* @__PURE__ */ e(g, { as: "h3", children: r("hoursAndEarningsTitle") }),
         /* @__PURE__ */ e(i, { children: r("hoursAndEarningsDescription") })
       ] }),
@@ -109,7 +110,7 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
               title: /* @__PURE__ */ e(i, { weight: "semibold", children: r("tableColumns.employees") }),
               render: (t) => {
                 const n = c.get(t.employeeUuid || ""), s = U(n);
-                return /* @__PURE__ */ l(m, { flexDirection: "column", gap: 8, children: [
+                return /* @__PURE__ */ o(m, { flexDirection: "column", gap: 8, children: [
                   /* @__PURE__ */ e(i, { weight: "semibold", children: j(t.employeeUuid || "") }),
                   s && /* @__PURE__ */ e(i, { variant: "supporting", children: s }),
                   t.excluded && /* @__PURE__ */ e(R, { status: "warning", children: r("skippedBadge") })
@@ -158,7 +159,7 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
               }
             }
           ],
-          data: o,
+          data: l,
           itemMenu: (t) => /* @__PURE__ */ e(
             Z,
             {
@@ -189,6 +190,6 @@ const se = (o, u) => o?.startDate && o.endDate ? u.formatPayPeriod(o.startDate,
   ] }) });
 };
 export {
-  Ee as PayrollConfigurationPresentation
+  Ie as PayrollConfigurationPresentation
 };
 //# sourceMappingURL=PayrollConfigurationPresentation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollDeadlineNotice?: {\n    label: string\n    content?: ReactNode\n  }\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollDeadlineNotice,\n  isPending,\n  payrollBlockers = [],\n  pagination,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\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    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text>\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isPending}\n              >\n                {t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isPending}\n                >\n                  {t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollDeadlineNotice) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollDeadlineNotice && (\n              <Alert status=\"info\" label={payrollDeadlineNotice.label}>\n                {payrollDeadlineNotice.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <LoadingIndicator>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n              <LoadingSpinner size=\"lg\" />\n              <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n              <Text>{t('loadingDescription')}</Text>\n            </Flex>\n          </LoadingIndicator>\n        ) : (\n          <>\n            <div className={styles.payrollBlockerContainer}>\n              {payrollBlockers.length > 0 && (\n                <PayrollBlockerAlerts\n                  blockers={payrollBlockers}\n                  onMultipleViewClick={onViewBlockers}\n                />\n              )}\n            </div>\n            <FlexItem>\n              <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n              <Text>{t('hoursAndEarningsDescription')}</Text>\n            </FlexItem>\n\n            <DataView\n              label={t('employeeCompensationsTitle')}\n              columns={[\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const payRateDisplay = formatEmployeePayRate(employee)\n                    return (\n                      <Flex flexDirection=\"column\" gap={8 as const}>\n                        <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                        {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                        {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                      </Flex>\n                    )\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const hours = getRegularHours(item)\n                    const overtimeHours = getOvertimeHours(item)\n                    return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const ptoHours = getTotalPtoHours(item)\n                    return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const earnings = getAdditionalEarnings(item)\n                    return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const reimbursements = getReimbursements(item)\n                    return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                  render: (item: PayrollEmployeeCompensationsType) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const calculatedGrossPay = employee\n                      ? calculateGrossPay(\n                          item,\n                          employee,\n                          payPeriod?.startDate,\n                          paySchedule,\n                          isOffCycle,\n                        )\n                      : 0\n                    return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                  },\n                },\n              ]}\n              data={employeeCompensations}\n              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                      label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                      icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onToggleExclude(item)\n                        }\n                      },\n                    },\n                  ]}\n                  triggerLabel={t('editMenu.edit')}\n                />\n              )}\n              pagination={pagination}\n            />\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollDeadlineNotice","isPending","payrollBlockers","pagination","Button","Heading","Text","Badge","LoadingSpinner","Alert","useComponentContext","useI18n","t","useTranslation","useDateFormatter","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport XCircle from '@/assets/icons/x-circle.svg?react'\nimport PlusCircle from '@/assets/icons/plus-circle.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void\n  onViewBlockers: () => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  payrollDeadlineNotice?: {\n    label: string\n    content?: ReactNode\n  }\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n}\n\nconst getPayrollConfigurationTitle = (\n  payPeriod: PayrollPayPeriodType | undefined,\n  dateFormatter: ReturnType<typeof useDateFormatter>,\n) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    return dateFormatter.formatPayPeriod(payPeriod.startDate, payPeriod.endDate)\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onToggleExclude,\n  onCalculatePayroll,\n  onViewBlockers,\n  isOffCycle = false,\n  alerts,\n  payrollDeadlineNotice,\n  isPending,\n  payrollBlockers = [],\n  pagination,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isDesktop = breakpoints.includes('small')\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    <div ref={containerRef} className={styles.container}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex\n          flexDirection={isDesktop ? 'row' : 'column'}\n          justifyContent={isDesktop ? 'space-between' : 'normal'}\n          alignItems={isDesktop ? 'center' : 'stretch'}\n          gap={isDesktop ? 0 : 16}\n        >\n          <FlexItem>\n            <Heading as=\"h1\">{t('pageTitle')}</Heading>\n            <Text>\n              <Trans\n                i18nKey=\"description\"\n                t={t}\n                components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                values={getPayrollConfigurationTitle(payPeriod, dateFormatter)}\n              />\n            </Text>\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isPending}\n              >\n                {t('calculatePayroll')}\n              </Button>\n            ) : (\n              <Flex flexDirection=\"column\" justifyContent=\"normal\" alignItems=\"stretch\" gap={12}>\n                <Button\n                  title={t('calculatePayrollTitle')}\n                  onClick={onCalculatePayroll}\n                  isDisabled={isPending}\n                >\n                  {t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollDeadlineNotice) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollDeadlineNotice && (\n              <Alert status=\"info\" label={payrollDeadlineNotice.label}>\n                {payrollDeadlineNotice.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <LoadingIndicator>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n              <LoadingSpinner size=\"lg\" />\n              <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n              <Text>{t('loadingDescription')}</Text>\n            </Flex>\n          </LoadingIndicator>\n        ) : (\n          <>\n            <div className={styles.payrollBlockerContainer}>\n              {payrollBlockers.length > 0 && (\n                <PayrollBlockerAlerts\n                  blockers={payrollBlockers}\n                  onMultipleViewClick={onViewBlockers}\n                />\n              )}\n            </div>\n            <FlexItem>\n              <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n              <Text>{t('hoursAndEarningsDescription')}</Text>\n            </FlexItem>\n\n            <DataView\n              label={t('employeeCompensationsTitle')}\n              columns={[\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const payRateDisplay = formatEmployeePayRate(employee)\n                    return (\n                      <Flex flexDirection=\"column\" gap={8 as const}>\n                        <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                        {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                        {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                      </Flex>\n                    )\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const hours = getRegularHours(item)\n                    const overtimeHours = getOvertimeHours(item)\n                    return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const ptoHours = getTotalPtoHours(item)\n                    return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const earnings = getAdditionalEarnings(item)\n                    return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                  render: (item: EmployeeCompensations) => {\n                    const reimbursements = getReimbursements(item)\n                    return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                  },\n                },\n                {\n                  title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                  render: (item: PayrollEmployeeCompensationsType) => {\n                    const employee = employeeMap.get(item.employeeUuid || '')\n                    const calculatedGrossPay = employee\n                      ? calculateGrossPay(\n                          item,\n                          employee,\n                          payPeriod?.startDate,\n                          paySchedule,\n                          isOffCycle,\n                        )\n                      : 0\n                    return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                  },\n                },\n              ]}\n              data={employeeCompensations}\n              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                      label: t(item.excluded ? 'editMenu.unskip' : 'editMenu.skip'),\n                      icon: item.excluded ? <PlusCircle aria-hidden /> : <XCircle aria-hidden />,\n                      onClick: () => {\n                        const employee = employeeMap.get(item.employeeUuid || '')\n                        if (employee) {\n                          onToggleExclude(item)\n                        }\n                      },\n                    },\n                  ]}\n                  triggerLabel={t('editMenu.edit')}\n                />\n              )}\n              pagination={pagination}\n            />\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","payrollDeadlineNotice","isPending","payrollBlockers","pagination","Button","Heading","Text","Badge","LoadingSpinner","Alert","useComponentContext","useI18n","t","useTranslation","useDateFormatter","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":"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"}

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

@@ -9,12 +9,13 @@ import u from "./PayrollEditEmployeePresentation.module.scss.js";
 import { TimeOffField as ee } from "./TimeOffField.js";
 import { Flex as y } from "../../Common/Flex/Flex.js";
 import { Grid as S } from "../../Common/Grid/Grid.js";
+import "classnames";
 import { RadioGroupField as te } from "../../Common/Fields/RadioGroupField/RadioGroupField.js";
 import { TextInputField as R } from "../../Common/Fields/TextInputField/TextInputField.js";
 import { useComponentContext as ne } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as re } from "../../../i18n/I18n.js";
-import { Form as se } from "../../Common/Form/Form.js";
-import { firstLastName as ie, formatNumberAsCurrency as oe } from "../../../helpers/formattedStrings.js";
+import { Form as ie } from "../../Common/Form/Form.js";
+import { firstLastName as se, formatNumberAsCurrency as oe } from "../../../helpers/formattedStrings.js";
 import { getAdditionalEarningsCompensations as ae, getReimbursementCompensation as me, calculateGrossPay as G } from "../helpers.js";
 import { HOURS_COMPENSATION_NAMES as k, EXCLUDED_ADDITIONAL_EARNINGS as le, COMPENSATION_NAME_DOUBLE_OVERTIME as de, COMPENSATION_NAME_OVERTIME as ue, COMPENSATION_NAME_REGULAR_HOURS as ce, COMPENSATION_NAME_REIMBURSEMENT as pe, COMPENSATION_NAME_CASH_TIPS as fe, COMPENSATION_NAME_COMMISSION as he, COMPENSATION_NAME_CORRECTION_PAYMENT as Ce, COMPENSATION_NAME_PAYCHECK_TIPS as Ne, COMPENSATION_NAME_BONUS as Ee } from "../../../shared/constants.js";
 import { useContainerBreakpoints as ge } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
@@ -23,46 +24,46 @@ const be = m.object({
   timeOffCompensations: m.record(m.string(), m.string().optional()),
   fixedCompensations: m.record(m.string(), m.string().optional()),
   paymentMethod: m.nativeEnum(A).optional()
-}), w = (E, O, d, i) => {
+}), w = (E, O, d, s) => {
   const g = {
     ...O,
     paymentMethod: E.paymentMethod
   };
   g.hourlyCompensations = O?.hourlyCompensations?.map(
-    (s) => {
-      const l = s.jobUuid && s.name ? E.hourlyCompensations[s.jobUuid]?.[s.name] : void 0;
+    (i) => {
+      const l = i.jobUuid && i.name ? E.hourlyCompensations[i.jobUuid]?.[i.name] : void 0;
       return l ? {
-        ...s,
+        ...i,
         hours: l
-      } : s;
+      } : i;
     }
-  ), g.paidTimeOff = d.map((s) => ({
-    ...s,
-    hours: E.timeOffCompensations[s.name]
+  ), g.paidTimeOff = d.map((i) => ({
+    ...i,
+    hours: E.timeOffCompensations[i.name]
   }));
   const b = [];
-  return Object.entries(E.fixedCompensations).forEach(([s, l]) => {
+  return Object.entries(E.fixedCompensations).forEach(([i, l]) => {
     const C = O?.fixedCompensations?.find(
-      (x) => x.name?.toLowerCase() === s.toLowerCase()
+      (x) => x.name?.toLowerCase() === i.toLowerCase()
     );
     l && (C ? b.push({
       name: C.name,
       jobUuid: C.jobUuid,
       amount: l
     }) : parseFloat(l) !== 0 && b.push({
-      name: s,
-      jobUuid: i,
+      name: i,
+      jobUuid: s,
       amount: l
     }));
   }), g.fixedCompensations = b, g;
-}, $e = ({
+}, Be = ({
   onSave: E,
   onCancel: O,
   employee: d,
-  employeeCompensation: i,
+  employeeCompensation: s,
   isPending: g = !1,
   fixedCompensationTypes: b,
-  payPeriodStartDate: s,
+  payPeriodStartDate: i,
   paySchedule: l,
   isOffCycle: C = !1
 }) => {
@@ -71,21 +72,21 @@ const be = m.object({
   const f = d.jobs?.find((e) => e.primary), T = f ? [f] : [], v = X(null), p = ge({
     ref: v
   }).includes("small");
-  i?.hourlyCompensations?.forEach((e) => {
+  s?.hourlyCompensations?.forEach((e) => {
     const n = d.jobs?.find((o) => o.uuid === e.jobUuid);
     n && !T.find((o) => o.uuid === n.uuid) && T.push(n);
   });
-  const P = (i?.paidTimeOff || []).filter((e) => e.name), _ = ae({
+  const P = (s?.paidTimeOff || []).filter((e) => e.name), _ = ae({
     flsaStatus: f?.compensations?.[0]?.flsaStatus,
-    existingFixedCompensations: i?.fixedCompensations || [],
+    existingFixedCompensations: s?.fixedCompensations || [],
     primaryJobUuid: f?.uuid,
     fixedCompensationTypes: b,
     excludedTypes: le
   }), N = me(
-    i?.fixedCompensations || [],
+    s?.fixedCompensations || [],
     b,
     f?.uuid
-  ), F = (e, n) => i?.hourlyCompensations?.find(
+  ), F = (e, n) => s?.hourlyCompensations?.find(
     (o) => o.jobUuid === e && o.name?.toLowerCase() === n.toLowerCase()
   ), $ = (e) => {
     switch (e) {
@@ -137,7 +138,7 @@ const be = m.object({
         e[n.name] = n.amount ? n.amount : "";
       }), N && (e[N.name] = N.amount ? N.amount : ""), e;
     })(),
-    paymentMethod: i?.paymentMethod || A.DirectDeposit
+    paymentMethod: s?.paymentMethod || A.DirectDeposit
   }, I = W({
     resolver: J(be),
     defaultValues: B
@@ -156,41 +157,41 @@ const be = m.object({
         paymentMethod: M.paymentMethod
       }, o = w(
         n,
-        i,
-        (i?.paidTimeOff || []).filter((h) => h.name),
+        s,
+        (s?.paidTimeOff || []).filter((h) => h.name),
         f?.uuid
       );
       return G(
         o,
         d,
-        s,
+        i,
         l,
         C
       );
     } catch {
-      return i ? G(
-        i,
-        d,
+      return s ? G(
         s,
+        d,
+        i,
         l,
         C
       ) : 0;
     }
   }, [
     M,
-    i,
+    s,
     f?.uuid,
     d,
-    s,
+    i,
     l,
     C
-  ]), V = ie({
+  ]), V = se({
     first_name: d.firstName,
     last_name: d.lastName
   }), z = (e) => {
     const n = w(
       e,
-      i,
+      s,
       P,
       f?.uuid
     );
@@ -234,7 +235,7 @@ const be = m.object({
       }
     ),
     /* @__PURE__ */ a(K, { ...I, children: [
-      /* @__PURE__ */ a(se, { children: [
+      /* @__PURE__ */ a(ie, { children: [
         T.length > 0 && /* @__PURE__ */ a("div", { className: u.fieldGroup, children: [
           /* @__PURE__ */ r(c, { as: "h3", children: t("regularHoursTitle") }),
           T.map((e) => /* @__PURE__ */ a(y, { flexDirection: "column", gap: 8, children: [
@@ -333,6 +334,6 @@ const be = m.object({
 };
 export {
   be as PayrollEditEmployeeFormSchema,
-  $e as PayrollEditEmployeePresentation
+  Be as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map