@gusto/embedded-react-sdk 0.36.0 → 0.37.0-rc.1

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

@@ -1,52 +1,53 @@
-import { jsx as r, jsxs as o, Fragment as V } from "react/jsx-runtime";
-import { useRef as _ } from "react";
-import { useTranslation as z, Trans as K } from "react-i18next";
-import { useFormatEmployeePayRate as O, getPayrollTypeLabel as W, getRegularHours as X, getOvertimeHours as q, formatHoursDisplay as H, getTotalPtoHours as J, getAdditionalEarnings as Q, getReimbursements as Y, calculateGrossPay as Z } from "../helpers.js";
-import { PayrollBlockerAlerts as $ } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
-import ee from "./PayrollConfigurationPresentation.module.scss.js";
-import { useI18n as te } from "../../../i18n/I18n.js";
+import { jsx as r, jsxs as o, Fragment as A } from "react/jsx-runtime";
+import { useRef as O } from "react";
+import { useTranslation as V, Trans as _ } from "react-i18next";
+import { useFormatEmployeePayRate as z, getRegularHours as K, getOvertimeHours as W, formatHoursDisplay as H, getTotalPtoHours as X, getAdditionalEarnings as q, getReimbursements as J, calculateGrossPay as Q } from "../helpers.js";
+import { PayrollCategory as Y } from "../payrollTypes.js";
+import { PayrollBlockerAlerts as Z } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
+import $ from "./PayrollConfigurationPresentation.module.scss.js";
+import { useI18n as ee } from "../../../i18n/I18n.js";
 import { Flex as u, FlexItem as y } from "../../Common/Flex/Flex.js";
-import { Grid as re } from "../../Common/Grid/Grid.js";
-import { HamburgerMenu as ne } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as oe } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import le from "../../../assets/icons/pencil.svg.js";
+import { Grid as te } from "../../Common/Grid/Grid.js";
+import "classnames";
+import { HamburgerMenu as re } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as ne } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import oe from "../../../assets/icons/pencil.svg.js";
 import ie from "../../../assets/icons/x-circle.svg.js";
-import ae from "../../../assets/icons/plus-circle.svg.js";
-import se from "../../../assets/icons/coins-hand.svg.js";
-import { formatNumberAsCurrency as h, firstLastName as ce } from "../../../helpers/formattedStrings.js";
+import le from "../../../assets/icons/plus-circle.svg.js";
+import ae from "../../../assets/icons/coins-hand.svg.js";
+import { formatNumberAsCurrency as h, firstLastName as se } from "../../../helpers/formattedStrings.js";
 import { useDateFormatter as me } from "../../../hooks/useDateFormatter.js";
-import ue from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { PayrollLoading as de } from "../../Common/PayrollLoading/PayrollLoading.js";
-import { DataView as pe } from "../../Common/DataView/DataView.js";
-const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate, l.endDate) : { startDate: "", endDate: "" }, Ge = ({
-  employeeCompensations: l,
+import ce from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { PayrollLoading as ue } from "../../Common/PayrollLoading/PayrollLoading.js";
+import { DataView as de } from "../../Common/DataView/DataView.js";
+const pe = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Ie = ({
+  employeeCompensations: i,
   employeeDetails: p,
   payPeriod: f,
   paySchedule: M,
   onEdit: w,
   onToggleExclude: E,
   onCalculatePayroll: b,
-  onViewBlockers: N,
-  isOffCycle: D = !1,
-  offCycleReason: R,
+  onViewBlockers: R,
+  payrollCategory: D = Y.Regular,
   alerts: C,
-  payrollAlert: c,
+  payrollAlert: m,
   isPending: g,
-  isCalculating: i,
+  isCalculating: l,
   payrollBlockers: P = [],
-  pagination: U,
-  withReimbursements: F = !0,
+  pagination: N,
+  withReimbursements: U = !0,
   isCalculateDisabled: x = !1,
-  grossUpEnabled: B = !1,
-  onGrossUpSelect: j
+  grossUpEnabled: F = !1,
+  onGrossUpSelect: B
 }) => {
-  const { Button: k, Heading: T, Text: d, Badge: G, Alert: I } = oe();
-  te("Payroll.PayrollConfiguration");
-  const { t } = z("Payroll.PayrollConfiguration"), L = me(), S = O(), v = _(null), a = ue({ ref: v }).includes("small"), m = new Map(p.map((e) => [e.uuid, e])), A = (e) => {
-    const n = m.get(e);
-    return n ? ce({ first_name: n.firstName, last_name: n.lastName }) : null;
+  const { Button: k, Heading: T, Text: d, Badge: j, Alert: G } = ne();
+  ee("Payroll.PayrollConfiguration");
+  const { t } = V("Payroll.PayrollConfiguration"), I = me(), S = z(), v = O(null), a = ce({ ref: v }).includes("small"), c = new Map(p.map((e) => [e.uuid, e])), L = (e) => {
+    const n = c.get(e);
+    return n ? se({ first_name: n.firstName, last_name: n.lastName }) : null;
   };
-  return /* @__PURE__ */ r("div", { ref: v, className: ee.container, children: /* @__PURE__ */ o(u, { flexDirection: "column", gap: 32, children: [
+  return /* @__PURE__ */ r("div", { ref: v, className: $.container, children: /* @__PURE__ */ o(u, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ o(
       u,
       {
@@ -58,14 +59,14 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
           /* @__PURE__ */ o(y, { children: [
             /* @__PURE__ */ r(T, { as: "h1", children: t("pageTitle") }),
             f && /* @__PURE__ */ r(d, { variant: "supporting", children: /* @__PURE__ */ r(
-              K,
+              _,
               {
                 i18nKey: "description",
                 t,
                 components: { dateWrapper: /* @__PURE__ */ r(d, { weight: "bold", as: "span" }) },
                 values: {
-                  ...fe(f, L),
-                  payrollType: W({ offCycle: D, offCycleReason: R })
+                  ...pe(f, I),
+                  payrollType: D
                 }
               }
             ) })
@@ -75,37 +76,37 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
             {
               title: t("calculatePayrollTitle"),
               onClick: b,
-              isDisabled: x || g || i,
-              children: t(i ? "calculatingPayroll" : "calculatePayroll")
+              isDisabled: x || g || l,
+              children: t(l ? "calculatingPayroll" : "calculatePayroll")
             }
           ) : /* @__PURE__ */ r(u, { flexDirection: "column", justifyContent: "normal", alignItems: "stretch", gap: 12, children: /* @__PURE__ */ r(
             k,
             {
               title: t("calculatePayrollTitle"),
               onClick: b,
-              isDisabled: x || g || i,
-              children: t(i ? "calculatingPayroll" : "calculatePayroll")
+              isDisabled: x || g || l,
+              children: t(l ? "calculatingPayroll" : "calculatePayroll")
             }
           ) }) })
         ]
       }
     ),
-    (C || c) && /* @__PURE__ */ o(re, { gap: 16, gridTemplateColumns: "1fr", children: [
-      c && /* @__PURE__ */ r(I, { label: c.label, status: c.variant, children: c.content }),
+    (C || m) && /* @__PURE__ */ o(te, { gap: 16, gridTemplateColumns: "1fr", children: [
+      m && /* @__PURE__ */ r(G, { label: m.label, status: m.variant, children: m.content }),
       C
     ] }),
     g ? /* @__PURE__ */ r(
-      de,
+      ue,
       {
-        title: t(i ? "calculatingTitle" : "loadingTitle"),
-        description: t(i ? "calculatingDescription" : "loadingDescription")
+        title: t(l ? "calculatingTitle" : "loadingTitle"),
+        description: t(l ? "calculatingDescription" : "loadingDescription")
       }
-    ) : /* @__PURE__ */ o(V, { children: [
+    ) : /* @__PURE__ */ o(A, { children: [
       P.length > 0 && /* @__PURE__ */ r(
-        $,
+        Z,
         {
           blockers: P,
-          onViewBlockersClick: N
+          onViewBlockersClick: R
         }
       ),
       /* @__PURE__ */ o(u, { flexDirection: "column", gap: 20, children: [
@@ -114,47 +115,47 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
           /* @__PURE__ */ r(d, { variant: "supporting", children: t("hoursAndEarningsDescription") })
         ] }),
         /* @__PURE__ */ r(
-          pe,
+          de,
           {
             label: t("employeeCompensationsTitle"),
             columns: [
               {
                 title: t("tableColumns.employees"),
                 render: (e) => {
-                  const n = m.get(e.employeeUuid || ""), s = S(n);
+                  const n = c.get(e.employeeUuid || ""), s = S(n);
                   return /* @__PURE__ */ o(u, { flexDirection: "column", gap: 0, children: [
-                    A(e.employeeUuid || ""),
+                    L(e.employeeUuid || ""),
                     s && /* @__PURE__ */ r(d, { size: "xs", variant: "supporting", children: s }),
-                    e.excluded && /* @__PURE__ */ r(G, { status: "warning", children: t("skippedBadge") })
+                    e.excluded && /* @__PURE__ */ r(j, { status: "warning", children: t("skippedBadge") })
                   ] });
                 }
               },
               {
                 title: t("tableColumns.hours"),
                 render: (e) => {
-                  const n = X(e), s = q(e);
+                  const n = K(e), s = W(e);
                   return H(n + s);
                 }
               },
               {
                 title: t("tableColumns.timeOff"),
                 render: (e) => {
-                  const n = J(e);
+                  const n = X(e);
                   return H(n);
                 }
               },
               {
                 title: t("tableColumns.additionalEarnings"),
                 render: (e) => {
-                  const n = Q(e);
+                  const n = q(e);
                   return h(n);
                 }
               },
-              ...F ? [
+              ...U ? [
                 {
                   title: t("tableColumns.reimbursements"),
                   render: (e) => {
-                    const n = Y(e);
+                    const n = J(e);
                     return h(n);
                   }
                 }
@@ -162,7 +163,7 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
               {
                 title: t("tableColumns.totalPay"),
                 render: (e) => {
-                  const n = m.get(e.employeeUuid || ""), s = n ? Z(
+                  const n = c.get(e.employeeUuid || ""), s = n ? Q(
                     e,
                     n,
                     f?.startDate,
@@ -173,32 +174,32 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
                 }
               }
             ],
-            data: l,
+            data: i,
             itemMenu: (e) => /* @__PURE__ */ r(
-              ne,
+              re,
               {
                 items: [
                   {
                     label: t("editMenu.edit"),
-                    icon: /* @__PURE__ */ r(le, { "aria-hidden": !0 }),
+                    icon: /* @__PURE__ */ r(oe, { "aria-hidden": !0 }),
                     onClick: () => {
-                      const n = m.get(e.employeeUuid || "");
+                      const n = c.get(e.employeeUuid || "");
                       n && w(n);
                     }
                   },
                   {
                     label: t(e.excluded ? "editMenu.unskip" : "editMenu.skip"),
-                    icon: e.excluded ? /* @__PURE__ */ r(ae, { "aria-hidden": !0 }) : /* @__PURE__ */ r(ie, { "aria-hidden": !0 }),
+                    icon: e.excluded ? /* @__PURE__ */ r(le, { "aria-hidden": !0 }) : /* @__PURE__ */ r(ie, { "aria-hidden": !0 }),
                     onClick: () => {
-                      m.get(e.employeeUuid || "") && E(e);
+                      c.get(e.employeeUuid || "") && E(e);
                     }
                   },
-                  ...B ? [
+                  ...F ? [
                     {
                       label: t("editMenu.setNetEarnings"),
-                      icon: /* @__PURE__ */ r(se, { "aria-hidden": !0 }),
+                      icon: /* @__PURE__ */ r(ae, { "aria-hidden": !0 }),
                       onClick: () => {
-                        e.employeeUuid && j?.(e.employeeUuid);
+                        e.employeeUuid && B?.(e.employeeUuid);
                       }
                     }
                   ] : []
@@ -206,7 +207,7 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
                 triggerLabel: t("editMenu.edit")
               }
             ),
-            pagination: U
+            pagination: N
           }
         )
       ] })
@@ -214,6 +215,6 @@ const fe = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate,
   ] }) });
 };
 export {
-  Ge 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/payroll'\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  getPayrollTypeLabel,\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, PayrollLoading } 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 CoinsHandSvg from '@/assets/icons/coins-hand.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\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  offCycleReason?: string | null\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n  grossUpEnabled?: boolean\n  onGrossUpSelect?: (employeeUuid: string) => void\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  offCycleReason,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n  grossUpEnabled = false,\n  onGrossUpSelect,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\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={32}>\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            {payPeriod && (\n              <Text variant=\"supporting\">\n                <Trans\n                  i18nKey=\"description\"\n                  t={t}\n                  components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                  values={{\n                    ...getPayrollConfigurationTitle(payPeriod, dateFormatter),\n                    payrollType: getPayrollTypeLabel({ offCycle: isOffCycle, offCycleReason }),\n                  }}\n                />\n              </Text>\n            )}\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : 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={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onViewBlockersClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\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 formatNumberAsCurrency(calculatedGrossPay)\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                      ...(grossUpEnabled\n                        ? [\n                            {\n                              label: t('editMenu.setNetEarnings'),\n                              icon: <CoinsHandSvg aria-hidden />,\n                              onClick: () => {\n                                if (item.employeeUuid) {\n                                  onGrossUpSelect?.(item.employeeUuid)\n                                }\n                              },\n                            },\n                          ]\n                        : []),\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","offCycleReason","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","grossUpEnabled","onGrossUpSelect","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","getPayrollTypeLabel","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle","CoinsHandSvg"],"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/payroll'\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 { PayrollCategory } from '../payrollTypes'\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, PayrollLoading } 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 CoinsHandSvg from '@/assets/icons/coins-hand.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\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  payrollCategory?: PayrollCategory\n  alerts?: ReactNode\n  payrollAlert?: {\n    label: string\n    content?: ReactNode\n    variant: 'info' | 'warning'\n  }\n  isPending?: boolean\n  isCalculating?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n  pagination?: PaginationControlProps\n  withReimbursements?: boolean\n  isCalculateDisabled?: boolean\n  grossUpEnabled?: boolean\n  onGrossUpSelect?: (employeeUuid: string) => void\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  payrollCategory = PayrollCategory.Regular,\n  alerts,\n  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\n  grossUpEnabled = false,\n  onGrossUpSelect,\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, Alert } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const dateFormatter = useDateFormatter()\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={32}>\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            {payPeriod && (\n              <Text variant=\"supporting\">\n                <Trans\n                  i18nKey=\"description\"\n                  t={t}\n                  components={{ dateWrapper: <Text weight=\"bold\" as=\"span\" /> }}\n                  values={{\n                    ...getPayrollConfigurationTitle(payPeriod, dateFormatter),\n                    payrollType: payrollCategory,\n                  }}\n                />\n              </Text>\n            )}\n          </FlexItem>\n          <FlexItem flexGrow={isDesktop ? 0 : 0}>\n            {isDesktop ? (\n              <Button\n                title={t('calculatePayrollTitle')}\n                onClick={onCalculatePayroll}\n                isDisabled={isCalculateDisabled || isPending || isCalculating}\n              >\n                {isCalculating ? t('calculatingPayroll') : 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={isCalculateDisabled || isPending || isCalculating}\n                >\n                  {isCalculating ? t('calculatingPayroll') : t('calculatePayroll')}\n                </Button>\n              </Flex>\n            )}\n          </FlexItem>\n        </Flex>\n\n        {(alerts || payrollAlert) && (\n          <Grid gap={16} gridTemplateColumns=\"1fr\">\n            {payrollAlert && (\n              <Alert label={payrollAlert.label} status={payrollAlert.variant}>\n                {payrollAlert.content}\n              </Alert>\n            )}\n            {alerts}\n          </Grid>\n        )}\n\n        {isPending ? (\n          <PayrollLoading\n            title={isCalculating ? t('calculatingTitle') : t('loadingTitle')}\n            description={isCalculating ? t('calculatingDescription') : t('loadingDescription')}\n          />\n        ) : (\n          <>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onViewBlockersClick={onViewBlockers}\n              />\n            )}\n            <Flex flexDirection=\"column\" gap={20}>\n              <FlexItem>\n                <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n                <Text variant=\"supporting\">{t('hoursAndEarningsDescription')}</Text>\n              </FlexItem>\n\n              <DataView\n                label={t('employeeCompensationsTitle')}\n                columns={[\n                  {\n                    title: t('tableColumns.employees'),\n                    render: (item: EmployeeCompensations) => {\n                      const employee = employeeMap.get(item.employeeUuid || '')\n                      const payRateDisplay = formatEmployeePayRate(employee)\n                      return (\n                        <Flex flexDirection=\"column\" gap={0}>\n                          {getEmployeeName(item.employeeUuid || '')}\n                          {payRateDisplay && (\n                            <Text size=\"xs\" variant=\"supporting\">\n                              {payRateDisplay}\n                            </Text>\n                          )}\n                          {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                        </Flex>\n                      )\n                    },\n                  },\n                  {\n                    title: t('tableColumns.hours'),\n                    render: (item: EmployeeCompensations) => {\n                      const hours = getRegularHours(item)\n                      const overtimeHours = getOvertimeHours(item)\n                      return formatHoursDisplay(hours + overtimeHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.timeOff'),\n                    render: (item: EmployeeCompensations) => {\n                      const ptoHours = getTotalPtoHours(item)\n                      return formatHoursDisplay(ptoHours)\n                    },\n                  },\n                  {\n                    title: t('tableColumns.additionalEarnings'),\n                    render: (item: EmployeeCompensations) => {\n                      const earnings = getAdditionalEarnings(item)\n                      return formatNumberAsCurrency(earnings)\n                    },\n                  },\n                  ...(withReimbursements\n                    ? [\n                        {\n                          title: t('tableColumns.reimbursements'),\n                          render: (item: EmployeeCompensations) => {\n                            const reimbursements = getReimbursements(item)\n                            return formatNumberAsCurrency(reimbursements)\n                          },\n                        },\n                      ]\n                    : []),\n                  {\n                    title: t('tableColumns.totalPay'),\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                            payrollCategory,\n                          )\n                        : 0\n                      return formatNumberAsCurrency(calculatedGrossPay)\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                      ...(grossUpEnabled\n                        ? [\n                            {\n                              label: t('editMenu.setNetEarnings'),\n                              icon: <CoinsHandSvg aria-hidden />,\n                              onClick: () => {\n                                if (item.employeeUuid) {\n                                  onGrossUpSelect?.(item.employeeUuid)\n                                }\n                              },\n                            },\n                          ]\n                        : []),\n                    ]}\n                    triggerLabel={t('editMenu.edit')}\n                  />\n                )}\n                pagination={pagination}\n              />\n            </Flex>\n          </>\n        )}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","dateFormatter","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","payrollCategory","PayrollCategory","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","grossUpEnabled","onGrossUpSelect","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","useTranslation","useDateFormatter","formatEmployeePayRate","useFormatEmployeePayRate","containerRef","useRef","isDesktop","useContainerBreakpoints","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsx","styles","jsxs","Flex","FlexItem","Trans","Grid","PayrollLoading","Fragment","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","HamburgerMenu","PencilSvg","PlusCircle","XCircle","CoinsHandSvg"],"mappings":"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"}

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

@@ -1,2 +1,3 @@
-export declare const isGrossUpEligible: (isOffCycle: boolean, offCycleReason?: string | null) => boolean;
-export declare const getGrossUpTargetCompensationName: (offCycleReason?: string | null) => string | null;
+import { PayrollCategory } from '../payrollTypes';
+export declare const isGrossUpEligible: (payrollCategory: PayrollCategory) => boolean;
+export declare const getGrossUpTargetCompensationName: (payrollCategory: PayrollCategory) => string | null;

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

@@ -1,11 +1,11 @@
-import { OffCycleReasonType as t } from "@gusto/embedded-api/models/components/payroll";
-import { COMPENSATION_NAME_BONUS as e, COMPENSATION_NAME_CORRECTION_PAYMENT as o } from "../../../shared/constants.js";
-const s = /* @__PURE__ */ new Set([
-  t.Bonus,
-  t.Correction
-]), E = (r, n) => !r || n == null ? !1 : s.has(n), O = (r) => r === t.Bonus ? e : r === t.Correction ? o : null;
+import { PayrollCategory as o } from "../payrollTypes.js";
+import { COMPENSATION_NAME_BONUS as t, COMPENSATION_NAME_CORRECTION_PAYMENT as n } from "../../../shared/constants.js";
+const e = /* @__PURE__ */ new Set([
+  o.Bonus,
+  o.Correction
+]), i = (r) => e.has(r), N = (r) => r === o.Bonus ? t : r === o.Correction ? n : null;
 export {
-  O as getGrossUpTargetCompensationName,
-  E as isGrossUpEligible
+  N as getGrossUpTargetCompensationName,
+  i as isGrossUpEligible
 };
 //# sourceMappingURL=grossUpHelpers.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"grossUpHelpers.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/grossUpHelpers.ts"],"sourcesContent":["import { OffCycleReasonType } from '@gusto/embedded-api/models/components/payroll'\nimport { COMPENSATION_NAME_BONUS, COMPENSATION_NAME_CORRECTION_PAYMENT } from '@/shared/constants'\n\nconst GROSS_UP_ELIGIBLE_REASONS = new Set<OffCycleReasonType>([\n  OffCycleReasonType.Bonus,\n  OffCycleReasonType.Correction,\n])\n\nexport const isGrossUpEligible = (isOffCycle: boolean, offCycleReason?: string | null): boolean => {\n  if (!isOffCycle || offCycleReason == null) return false\n  return GROSS_UP_ELIGIBLE_REASONS.has(offCycleReason as OffCycleReasonType)\n}\n\nexport const getGrossUpTargetCompensationName = (offCycleReason?: string | null): string | null => {\n  if (offCycleReason === OffCycleReasonType.Bonus) return COMPENSATION_NAME_BONUS\n  if (offCycleReason === OffCycleReasonType.Correction) return COMPENSATION_NAME_CORRECTION_PAYMENT\n  return null\n}\n"],"names":["GROSS_UP_ELIGIBLE_REASONS","OffCycleReasonType","isGrossUpEligible","isOffCycle","offCycleReason","getGrossUpTargetCompensationName","COMPENSATION_NAME_BONUS","COMPENSATION_NAME_CORRECTION_PAYMENT"],"mappings":";;AAGA,MAAMA,wBAAgC,IAAwB;AAAA,EAC5DC,EAAmB;AAAA,EACnBA,EAAmB;AACrB,CAAC,GAEYC,IAAoB,CAACC,GAAqBC,MACjD,CAACD,KAAcC,KAAkB,OAAa,KAC3CJ,EAA0B,IAAII,CAAoC,GAG9DC,IAAmC,CAACD,MAC3CA,MAAmBH,EAAmB,QAAcK,IACpDF,MAAmBH,EAAmB,aAAmBM,IACtD;"}
+{"version":3,"file":"grossUpHelpers.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/grossUpHelpers.ts"],"sourcesContent":["import { PayrollCategory } from '../payrollTypes'\nimport { COMPENSATION_NAME_BONUS, COMPENSATION_NAME_CORRECTION_PAYMENT } from '@/shared/constants'\n\nconst GROSS_UP_ELIGIBLE_CATEGORIES = new Set<PayrollCategory>([\n  PayrollCategory.Bonus,\n  PayrollCategory.Correction,\n])\n\nexport const isGrossUpEligible = (payrollCategory: PayrollCategory): boolean => {\n  return GROSS_UP_ELIGIBLE_CATEGORIES.has(payrollCategory)\n}\n\nexport const getGrossUpTargetCompensationName = (\n  payrollCategory: PayrollCategory,\n): string | null => {\n  if (payrollCategory === PayrollCategory.Bonus) return COMPENSATION_NAME_BONUS\n  if (payrollCategory === PayrollCategory.Correction) return COMPENSATION_NAME_CORRECTION_PAYMENT\n  return null\n}\n"],"names":["GROSS_UP_ELIGIBLE_CATEGORIES","PayrollCategory","isGrossUpEligible","payrollCategory","getGrossUpTargetCompensationName","COMPENSATION_NAME_BONUS","COMPENSATION_NAME_CORRECTION_PAYMENT"],"mappings":";;AAGA,MAAMA,wBAAmC,IAAqB;AAAA,EAC5DC,EAAgB;AAAA,EAChBA,EAAgB;AAClB,CAAC,GAEYC,IAAoB,CAACC,MACzBH,EAA6B,IAAIG,CAAe,GAG5CC,IAAmC,CAC9CD,MAEIA,MAAoBF,EAAgB,QAAcI,IAClDF,MAAoBF,EAAgB,aAAmBK,IACpD;"}

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

@@ -2,21 +2,23 @@ import { EmployeeCompensations } from '@gusto/embedded-api/models/components/pay
 import { Employee } from '@gusto/embedded-api/models/components/employee';
 import { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype';
 import { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject';
+import { PayrollCategory } from '../payrollTypes';
 import { PaginationControlProps } from '../../Common/PaginationControl/PaginationControlTypes';
 interface UsePayrollConfigurationDataParams {
     companyId: string;
     payrollId: string;
+    isCalculating?: boolean;
 }
 interface UsePayrollConfigurationDataReturn {
     employeeCompensations: EmployeeCompensations[];
     employeeDetails: Employee[];
     payPeriod: PayrollPayPeriodType | undefined;
     paySchedule: PayScheduleObject | undefined;
-    isOffCycle: boolean;
-    offCycleReason: string | null;
+    payrollCategory: PayrollCategory;
     pagination: PaginationControlProps;
     isLoading: boolean;
     refetch: () => Promise<void>;
 }
-export declare function usePayrollConfigurationData({ companyId, payrollId, }: UsePayrollConfigurationDataParams): UsePayrollConfigurationDataReturn;
+export declare const PREPARE_QUERY_KEY = "payroll-prepare";
+export declare function usePayrollConfigurationData({ companyId, payrollId, isCalculating, }: UsePayrollConfigurationDataParams): UsePayrollConfigurationDataReturn;
 export {};

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

@@ -1,98 +1,104 @@
-import { useState as f, useRef as h, useMemo as g, useEffect as P, useCallback as E } from "react";
-import { useEmployeesList as T } from "@gusto/embedded-api/react-query/employeesList";
-import { useQueryClient as Y, keepPreviousData as D, useQuery as A } from "@tanstack/react-query";
-import { usePaySchedulesGet as H } from "@gusto/embedded-api/react-query/paySchedulesGet";
-import { useGustoEmbeddedContext as I } from "@gusto/embedded-api/react-query/_context";
-import { payrollsPrepare as N } from "@gusto/embedded-api/funcs/payrollsPrepare";
-import { usePagination as V } from "../../../hooks/usePagination/usePagination.js";
-const p = "payroll-prepare", z = 300 * 1e3;
-function ae({
-  companyId: c,
-  payrollId: t
+import { useState as g, useRef as P, useMemo as E, useEffect as m, useCallback as D } from "react";
+import { useEmployeesList as A } from "@gusto/embedded-api/react-query/employeesList";
+import { useQueryClient as H, keepPreviousData as S, useQuery as N } from "@tanstack/react-query";
+import { usePaySchedulesGet as O } from "@gusto/embedded-api/react-query/paySchedulesGet";
+import { useGustoEmbeddedContext as V } from "@gusto/embedded-api/react-query/_context";
+import { payrollsPrepare as z } from "@gusto/embedded-api/funcs/payrollsPrepare";
+import { derivePayrollCategory as J } from "../payrollTypes.js";
+import { usePagination as W } from "../../../hooks/usePagination/usePagination.js";
+const u = "payroll-prepare", X = 300 * 1e3;
+function re({
+  companyId: p,
+  payrollId: e,
+  isCalculating: c = !1
 }) {
-  const C = I(), i = Y(), { currentPage: S, itemsPerPage: w, getPaginationProps: U } = V({
+  const C = V(), s = H(), { currentPage: w, itemsPerPage: U, getPaginationProps: q } = W({
     defaultItemsPerPage: 10
-  }), [R, F] = f([]), [L, u] = f(!1), l = h(!1), { data: a, isFetching: y } = T(
+  }), [v, F] = g([]), [L, y] = g(!1), l = P(!1), { data: o, isFetching: d } = A(
     {
-      companyId: c,
-      payrollUuid: t,
-      per: w,
-      page: S,
+      companyId: p,
+      payrollUuid: e,
+      per: U,
+      page: w,
       sortBy: "name"
     },
-    { placeholderData: D }
-  ), m = h(a);
-  m.current = a;
-  const r = g(() => a?.showEmployees?.map((s) => s.uuid) || [], [a?.showEmployees]), q = g(() => r.join(","), [r]), {
-    data: e,
-    isLoading: b,
-    isFetching: v
-  } = A({
-    queryKey: [p, t, q],
-    queryFn: async ({ signal: s }) => {
-      const o = await N(
+    { placeholderData: S }
+  ), h = P(o);
+  h.current = o;
+  const i = E(() => o?.showEmployees?.map((a) => a.uuid) || [], [o?.showEmployees]), R = E(() => i.join(","), [i]), {
+    data: t,
+    isLoading: K,
+    isFetching: Q
+  } = N({
+    queryKey: [u, e, R],
+    queryFn: async ({ signal: a }) => {
+      const n = await z(
         C,
         {
-          companyId: c,
-          payrollId: t,
+          companyId: p,
+          payrollId: e,
           sortBy: "last_name",
           requestBody: {
-            employeeUuids: r
+            employeeUuids: i
           }
         },
-        { signal: s }
+        { signal: a }
       );
-      if (!o.ok)
-        throw o.error;
-      return o.value.payrollPrepared;
+      if (!n.ok)
+        throw n.error;
+      return n.value.payrollPrepared;
     },
-    enabled: r.length > 0,
-    staleTime: z,
-    placeholderData: D
+    enabled: i.length > 0 && !c,
+    staleTime: X,
+    placeholderData: S
   });
-  P(() => () => {
-    i.cancelQueries({
-      queryKey: [p, t]
+  m(() => () => {
+    s.cancelQueries({
+      queryKey: [u, e]
     });
-  }, [i, t]);
-  const d = E(() => {
-    const s = m.current;
-    if (!s?.showEmployees || !e?.employeeCompensations) {
-      u(!1);
+  }, [s, e]), m(() => {
+    c && s.cancelQueries({
+      queryKey: [u, e]
+    });
+  }, [c, s, e]);
+  const f = D(() => {
+    const a = h.current;
+    if (!a?.showEmployees || !t?.employeeCompensations) {
+      y(!1);
       return;
     }
-    const o = s.showEmployees.map((n) => n.uuid), O = new Set(e.employeeCompensations.map((n) => n.employeeUuid));
-    o.length > 0 && o.every((n) => O.has(n)) ? (F(s.showEmployees), u(!0), l.current = !0) : u(!1);
-  }, [e?.employeeCompensations]);
-  P(() => {
-    d();
-  }, [d]);
-  const { data: K, isLoading: Q } = H(
+    const n = a.showEmployees.map((r) => r.uuid), Y = new Set(t.employeeCompensations.map((r) => r.employeeUuid));
+    n.length > 0 && n.every((r) => Y.has(r)) ? (F(a.showEmployees), y(!0), l.current = !0) : y(!1);
+  }, [t?.employeeCompensations]);
+  m(() => {
+    f();
+  }, [f]);
+  const { data: b, isLoading: _ } = O(
     {
-      companyId: c,
-      payScheduleId: e?.payPeriod?.payScheduleUuid || ""
+      companyId: p,
+      payScheduleId: t?.payPeriod?.payScheduleUuid || ""
     },
     {
-      enabled: !!e?.payPeriod?.payScheduleUuid
+      enabled: !!t?.payPeriod?.payScheduleUuid
     }
-  ), _ = E(async () => {
-    await i.invalidateQueries({
-      queryKey: [p, t]
+  ), k = D(async () => {
+    await s.invalidateQueries({
+      queryKey: [u, e]
     });
-  }, [i, t]), k = b && !l.current, B = v && l.current, M = y || B || !L, j = k || Q || !a && y, x = a?.httpMeta.response.headers ?? new Headers(), G = U(x, M);
+  }, [s, e]), B = K && !l.current, M = Q && l.current, j = d || M || !L, x = B || _ || !o && d, G = o?.httpMeta.response.headers ?? new Headers(), T = q(G, j);
   return {
-    employeeCompensations: e?.employeeCompensations || [],
-    employeeDetails: R,
-    payPeriod: e?.payPeriod,
-    paySchedule: K?.payScheduleObject,
-    isOffCycle: e?.offCycle ?? !1,
-    offCycleReason: e?.offCycleReason ?? null,
-    pagination: G,
-    isLoading: j,
-    refetch: _
+    employeeCompensations: t?.employeeCompensations || [],
+    employeeDetails: v,
+    payPeriod: t?.payPeriod,
+    paySchedule: b?.payScheduleObject,
+    payrollCategory: J(t ?? {}),
+    pagination: T,
+    isLoading: x,
+    refetch: k
   };
 }
 export {
-  ae as usePayrollConfigurationData
+  u as PREPARE_QUERY_KEY,
+  re as usePayrollConfigurationData
 };
 //# sourceMappingURL=usePayrollConfigurationData.js.map