@gusto/embedded-react-sdk 0.25.0 → 0.26.0

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

@@ -1,202 +1,203 @@
-import { jsx as e, jsxs as i, Fragment as L } from "react/jsx-runtime";
+import { jsx as r, jsxs as o, Fragment as L } from "react/jsx-runtime";
 import { useRef as S } from "react";
 import { useTranslation as A, Trans as O } from "react-i18next";
-import { useFormatEmployeePayRate as V, getRegularHours as _, getOvertimeHours as K, formatHoursDisplay as T, getTotalPtoHours as W, getAdditionalEarnings as X, getReimbursements as q, calculateGrossPay as z } from "../helpers.js";
+import { useFormatEmployeePayRate as V, getRegularHours as _, getOvertimeHours as z, formatHoursDisplay as v, getTotalPtoHours as K, getAdditionalEarnings as W, getReimbursements as X, calculateGrossPay as q } from "../helpers.js";
 import { PayrollBlockerAlerts as J } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
 import Q from "./PayrollConfigurationPresentation.module.scss.js";
 import { useI18n as Y } from "../../../i18n/I18n.js";
-import { Flex as u, FlexItem as h } from "../../Common/Flex/Flex.js";
+import { Flex as u, FlexItem as g } from "../../Common/Flex/Flex.js";
 import { Grid as Z } from "../../Common/Grid/Grid.js";
-import "classnames";
 import { HamburgerMenu as $ } from "../../Common/HamburgerMenu/HamburgerMenu.js";
 import { useComponentContext as ee } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import te from "../../../assets/icons/pencil.svg.js";
 import re from "../../../assets/icons/x-circle.svg.js";
 import ne from "../../../assets/icons/plus-circle.svg.js";
-import { formatNumberAsCurrency as f, firstLastName as oe } from "../../../helpers/formattedStrings.js";
+import { formatNumberAsCurrency as y, firstLastName as oe } from "../../../helpers/formattedStrings.js";
 import { useDateFormatter as ie } from "../../../hooks/useDateFormatter.js";
 import { useContainerBreakpoints as le } from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
 import { PayrollLoading as ae } from "../../Common/PayrollLoading/PayrollLoading.js";
 import { DataView as se } from "../../Common/DataView/DataView.js";
-const ce = (l, p) => l?.startDate && l.endDate ? p.formatPayPeriod(l.startDate, l.endDate) : { startDate: "", endDate: "" }, Fe = ({
-  employeeCompensations: l,
+const me = (i, p) => i?.startDate && i.endDate ? p.formatPayPeriod(i.startDate, i.endDate) : { startDate: "", endDate: "" }, Re = ({
+  employeeCompensations: i,
   employeeDetails: p,
-  payPeriod: y,
-  paySchedule: v,
-  onEdit: M,
+  payPeriod: h,
+  paySchedule: M,
+  onEdit: w,
   onToggleExclude: H,
   onCalculatePayroll: b,
   onViewBlockers: E,
   isOffCycle: R = !1,
   alerts: D,
   payrollAlert: m,
-  isPending: g,
-  isCalculating: a,
+  isPending: f,
+  isCalculating: l,
   payrollBlockers: C = [],
   pagination: F,
   withReimbursements: N = !0,
   isCalculateDisabled: P = !1
 }) => {
-  const { Button: w, Heading: x, Text: o, Badge: U, Alert: j } = ee();
+  const { Button: x, Heading: k, Text: d, Badge: U, Alert: j } = ee();
   Y("Payroll.PayrollConfiguration");
-  const { t: r } = A("Payroll.PayrollConfiguration"), B = ie(), G = V(), k = S(null), s = le({ ref: k }).includes("small"), d = new Map(p.map((t) => [t.uuid, t])), I = (t) => {
-    const n = d.get(t);
+  const { t } = A("Payroll.PayrollConfiguration"), B = ie(), G = V(), T = S(null), a = le({ ref: T }).includes("small"), c = new Map(p.map((e) => [e.uuid, e])), I = (e) => {
+    const n = c.get(e);
     return n ? oe({ first_name: n.firstName, last_name: n.lastName }) : null;
   };
-  return /* @__PURE__ */ e("div", { ref: k, className: Q.container, children: /* @__PURE__ */ i(u, { flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ i(
+  return /* @__PURE__ */ r("div", { ref: T, className: Q.container, children: /* @__PURE__ */ o(u, { flexDirection: "column", gap: 32, children: [
+    /* @__PURE__ */ o(
       u,
       {
-        flexDirection: s ? "row" : "column",
-        justifyContent: s ? "space-between" : "normal",
-        alignItems: s ? "center" : "stretch",
-        gap: s ? 0 : 16,
+        flexDirection: a ? "row" : "column",
+        justifyContent: a ? "space-between" : "normal",
+        alignItems: a ? "center" : "stretch",
+        gap: a ? 0 : 16,
         children: [
-          /* @__PURE__ */ i(h, { children: [
-            /* @__PURE__ */ e(x, { as: "h1", children: r("pageTitle") }),
-            /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
+          /* @__PURE__ */ o(g, { children: [
+            /* @__PURE__ */ r(k, { as: "h1", children: t("pageTitle") }),
+            /* @__PURE__ */ r(d, { variant: "supporting", children: /* @__PURE__ */ r(
               O,
               {
                 i18nKey: "description",
-                t: r,
-                components: { dateWrapper: /* @__PURE__ */ e(o, { weight: "bold", as: "span" }) },
-                values: ce(y, B)
+                t,
+                components: { dateWrapper: /* @__PURE__ */ r(d, { weight: "bold", as: "span" }) },
+                values: me(h, B)
               }
             ) })
           ] }),
-          /* @__PURE__ */ e(h, { flexGrow: 0, children: s ? /* @__PURE__ */ e(
-            w,
+          /* @__PURE__ */ r(g, { flexGrow: 0, children: a ? /* @__PURE__ */ r(
+            x,
             {
-              title: r("calculatePayrollTitle"),
+              title: t("calculatePayrollTitle"),
               onClick: b,
-              isDisabled: P || g || a,
-              children: r(a ? "calculatingPayroll" : "calculatePayroll")
+              isDisabled: P || f || l,
+              children: t(l ? "calculatingPayroll" : "calculatePayroll")
             }
-          ) : /* @__PURE__ */ e(u, { flexDirection: "column", justifyContent: "normal", alignItems: "stretch", gap: 12, children: /* @__PURE__ */ e(
-            w,
+          ) : /* @__PURE__ */ r(u, { flexDirection: "column", justifyContent: "normal", alignItems: "stretch", gap: 12, children: /* @__PURE__ */ r(
+            x,
             {
-              title: r("calculatePayrollTitle"),
+              title: t("calculatePayrollTitle"),
               onClick: b,
-              isDisabled: P || g || a,
-              children: r(a ? "calculatingPayroll" : "calculatePayroll")
+              isDisabled: P || f || l,
+              children: t(l ? "calculatingPayroll" : "calculatePayroll")
             }
           ) }) })
         ]
       }
     ),
-    (D || m) && /* @__PURE__ */ i(Z, { gap: 16, gridTemplateColumns: "1fr", children: [
-      m && /* @__PURE__ */ e(j, { label: m.label, status: m.variant, children: m.content }),
+    (D || m) && /* @__PURE__ */ o(Z, { gap: 16, gridTemplateColumns: "1fr", children: [
+      m && /* @__PURE__ */ r(j, { label: m.label, status: m.variant, children: m.content }),
       D
     ] }),
-    g ? /* @__PURE__ */ e(
+    f ? /* @__PURE__ */ r(
       ae,
       {
-        title: r(a ? "calculatingTitle" : "loadingTitle"),
-        description: r(a ? "calculatingDescription" : "loadingDescription")
+        title: t(l ? "calculatingTitle" : "loadingTitle"),
+        description: t(l ? "calculatingDescription" : "loadingDescription")
       }
-    ) : /* @__PURE__ */ i(L, { children: [
-      C.length > 0 && /* @__PURE__ */ e(
+    ) : /* @__PURE__ */ o(L, { children: [
+      C.length > 0 && /* @__PURE__ */ r(
         J,
         {
           blockers: C,
           onMultipleViewClick: E
         }
       ),
-      /* @__PURE__ */ i(h, { children: [
-        /* @__PURE__ */ e(x, { as: "h3", children: r("hoursAndEarningsTitle") }),
-        /* @__PURE__ */ e(o, { children: r("hoursAndEarningsDescription") })
-      ] }),
-      /* @__PURE__ */ e(
-        se,
-        {
-          label: r("employeeCompensationsTitle"),
-          columns: [
-            {
-              title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.employees") }),
-              render: (t) => {
-                const n = d.get(t.employeeUuid || ""), c = G(n);
-                return /* @__PURE__ */ i(u, { flexDirection: "column", gap: 8, children: [
-                  /* @__PURE__ */ e(o, { weight: "semibold", children: I(t.employeeUuid || "") }),
-                  c && /* @__PURE__ */ e(o, { variant: "supporting", children: c }),
-                  t.excluded && /* @__PURE__ */ e(U, { status: "warning", children: r("skippedBadge") })
-                ] });
-              }
-            },
-            {
-              title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.hours") }),
-              render: (t) => {
-                const n = _(t), c = K(t);
-                return /* @__PURE__ */ e(o, { children: T(n + c) });
-              }
-            },
-            {
-              title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.timeOff") }),
-              render: (t) => {
-                const n = W(t);
-                return /* @__PURE__ */ e(o, { children: T(n) });
-              }
-            },
-            {
-              title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.additionalEarnings") }),
-              render: (t) => {
-                const n = X(t);
-                return /* @__PURE__ */ e(o, { children: f(n) });
-              }
-            },
-            ...N ? [
+      /* @__PURE__ */ o(u, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ o(g, { children: [
+          /* @__PURE__ */ r(k, { as: "h3", children: t("hoursAndEarningsTitle") }),
+          /* @__PURE__ */ r(d, { variant: "supporting", children: t("hoursAndEarningsDescription") })
+        ] }),
+        /* @__PURE__ */ r(
+          se,
+          {
+            label: t("employeeCompensationsTitle"),
+            columns: [
               {
-                title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.reimbursements") }),
-                render: (t) => {
-                  const n = q(t);
-                  return /* @__PURE__ */ e(o, { children: f(n) });
+                title: t("tableColumns.employees"),
+                render: (e) => {
+                  const n = c.get(e.employeeUuid || ""), s = G(n);
+                  return /* @__PURE__ */ o(u, { flexDirection: "column", gap: 0, children: [
+                    I(e.employeeUuid || ""),
+                    s && /* @__PURE__ */ r(d, { size: "xs", variant: "supporting", children: s }),
+                    e.excluded && /* @__PURE__ */ r(U, { status: "warning", children: t("skippedBadge") })
+                  ] });
                 }
-              }
-            ] : [],
-            {
-              title: /* @__PURE__ */ e(o, { weight: "semibold", children: r("tableColumns.totalPay") }),
-              render: (t) => {
-                const n = d.get(t.employeeUuid || ""), c = n ? z(
-                  t,
-                  n,
-                  y?.startDate,
-                  v,
-                  R
-                ) : 0;
-                return /* @__PURE__ */ e(o, { children: f(c) });
-              }
-            }
-          ],
-          data: l,
-          itemMenu: (t) => /* @__PURE__ */ e(
-            $,
-            {
-              items: [
-                {
-                  label: r("editMenu.edit"),
-                  icon: /* @__PURE__ */ e(te, { "aria-hidden": !0 }),
-                  onClick: () => {
-                    const n = d.get(t.employeeUuid || "");
-                    n && M(n);
-                  }
-                },
+              },
+              {
+                title: t("tableColumns.hours"),
+                render: (e) => {
+                  const n = _(e), s = z(e);
+                  return v(n + s);
+                }
+              },
+              {
+                title: t("tableColumns.timeOff"),
+                render: (e) => {
+                  const n = K(e);
+                  return v(n);
+                }
+              },
+              {
+                title: t("tableColumns.additionalEarnings"),
+                render: (e) => {
+                  const n = W(e);
+                  return y(n);
+                }
+              },
+              ...N ? [
                 {
-                  label: r(t.excluded ? "editMenu.unskip" : "editMenu.skip"),
-                  icon: t.excluded ? /* @__PURE__ */ e(ne, { "aria-hidden": !0 }) : /* @__PURE__ */ e(re, { "aria-hidden": !0 }),
-                  onClick: () => {
-                    d.get(t.employeeUuid || "") && H(t);
+                  title: t("tableColumns.reimbursements"),
+                  render: (e) => {
+                    const n = X(e);
+                    return y(n);
                   }
                 }
-              ],
-              triggerLabel: r("editMenu.edit")
-            }
-          ),
-          pagination: F
-        }
-      )
+              ] : [],
+              {
+                title: t("tableColumns.totalPay"),
+                render: (e) => {
+                  const n = c.get(e.employeeUuid || ""), s = n ? q(
+                    e,
+                    n,
+                    h?.startDate,
+                    M,
+                    R
+                  ) : 0;
+                  return y(s);
+                }
+              }
+            ],
+            data: i,
+            itemMenu: (e) => /* @__PURE__ */ r(
+              $,
+              {
+                items: [
+                  {
+                    label: t("editMenu.edit"),
+                    icon: /* @__PURE__ */ r(te, { "aria-hidden": !0 }),
+                    onClick: () => {
+                      const n = c.get(e.employeeUuid || "");
+                      n && w(n);
+                    }
+                  },
+                  {
+                    label: t(e.excluded ? "editMenu.unskip" : "editMenu.skip"),
+                    icon: e.excluded ? /* @__PURE__ */ r(ne, { "aria-hidden": !0 }) : /* @__PURE__ */ r(re, { "aria-hidden": !0 }),
+                    onClick: () => {
+                      c.get(e.employeeUuid || "") && H(e);
+                    }
+                  }
+                ],
+                triggerLabel: t("editMenu.edit")
+              }
+            ),
+            pagination: F
+          }
+        )
+      ] })
     ] })
   ] }) });
 };
 export {
-  Fe as PayrollConfigurationPresentation
+  Re 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, 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 { 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  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}\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  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\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={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={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                onMultipleViewClick={onViewBlockers}\n              />\n            )}\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                ...(withReimbursements\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                  : []),\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","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","Button","Heading","Text","Badge","Alert","useComponentContext","useI18n","t","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"],"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 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 { 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  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}\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  payrollAlert,\n  isPending,\n  isCalculating,\n  payrollBlockers = [],\n  pagination,\n  withReimbursements = true,\n  isCalculateDisabled = false,\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            <Text variant=\"supporting\">\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={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                onMultipleViewClick={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                    ]}\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","alerts","payrollAlert","isPending","isCalculating","payrollBlockers","pagination","withReimbursements","isCalculateDisabled","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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow';
+import { EmployeeCompensations } from '@gusto/embedded-api/models/components/payroll';
 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';

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

@@ -1 +1 @@
-{"version":3,"file":"usePayrollConfigurationData.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useEmployeesList } from '@gusto/embedded-api/react-query/employeesList'\nimport { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { usePaySchedulesGet } from '@gusto/embedded-api/react-query/paySchedulesGet'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api/react-query/_context'\nimport { payrollsPrepare } from '@gusto/embedded-api/funcs/payrollsPrepare'\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 type {\n  PaginationControlProps,\n  PaginationItemsPerPage,\n} from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ninterface UsePayrollConfigurationDataParams {\n  companyId: string\n  payrollId: string\n}\n\ninterface UsePayrollConfigurationDataReturn {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod: PayrollPayPeriodType | undefined\n  paySchedule: PayScheduleObject | undefined\n  isOffCycle: boolean\n  pagination: PaginationControlProps\n  isLoading: boolean\n  refetch: () => Promise<void>\n}\n\nconst PREPARE_QUERY_KEY = 'payroll-prepare'\nconst FIVE_MINUTES = 5 * 60 * 1000\n\nexport function usePayrollConfigurationData({\n  companyId,\n  payrollId,\n}: UsePayrollConfigurationDataParams): UsePayrollConfigurationDataReturn {\n  const gustoClient = useGustoEmbeddedContext()\n  const queryClient = useQueryClient()\n  const defaultItemsPerPage = 10\n\n  const [currentPage, setCurrentPage] = useState(1)\n  const [itemsPerPage, setItemsPerPage] = useState<PaginationItemsPerPage>(defaultItemsPerPage)\n  const [displayedEmployees, setDisplayedEmployees] = useState<Employee[]>([])\n  const [isDataInSync, setIsDataInSync] = useState(false)\n  const hasInitialDataRef = useRef(false)\n\n  const { data: employeeData, isFetching: isFetchingEmployeeData } = useEmployeesList(\n    {\n      companyId,\n      payrollUuid: payrollId,\n      per: itemsPerPage,\n      page: currentPage,\n      sortBy: 'name',\n    },\n    { placeholderData: keepPreviousData },\n  )\n\n  const employeeDataRef = useRef(employeeData)\n  employeeDataRef.current = employeeData\n\n  const employeeUuids = useMemo(() => {\n    return employeeData?.showEmployees?.map(e => e.uuid) || []\n  }, [employeeData?.showEmployees])\n\n  const totalPages = Number(employeeData?.httpMeta.response.headers.get('x-total-pages') ?? 1)\n  const totalCount = Number(employeeData?.httpMeta.response.headers.get('x-total-count') ?? 0)\n\n  const employeeUuidsKey = useMemo(() => employeeUuids.join(','), [employeeUuids])\n\n  const {\n    data: prepareData,\n    isLoading: isPrepareLoading,\n    isFetching: isPrepareFetching,\n  } = useQuery({\n    queryKey: [PREPARE_QUERY_KEY, payrollId, employeeUuidsKey],\n    queryFn: async () => {\n      const result = await payrollsPrepare(gustoClient, {\n        companyId,\n        payrollId,\n        sortBy: 'last_name',\n        requestBody: {\n          employeeUuids,\n        },\n      })\n\n      if (!result.ok) {\n        throw result.error\n      }\n\n      return result.value.payrollPrepared\n    },\n    enabled: employeeUuids.length > 0,\n    staleTime: FIVE_MINUTES,\n    placeholderData: keepPreviousData,\n  })\n\n  const syncData = useCallback(() => {\n    const currentEmployeeData = employeeDataRef.current\n    if (!currentEmployeeData?.showEmployees || !prepareData?.employeeCompensations) {\n      setIsDataInSync(false)\n      return\n    }\n\n    const currentUuids = currentEmployeeData.showEmployees.map(e => e.uuid)\n    const preparedUuids = new Set(prepareData.employeeCompensations.map(c => c.employeeUuid))\n    const inSync = currentUuids.length > 0 && currentUuids.every(uuid => preparedUuids.has(uuid))\n\n    if (inSync) {\n      setDisplayedEmployees(currentEmployeeData.showEmployees)\n      setIsDataInSync(true)\n      hasInitialDataRef.current = true\n    } else {\n      setIsDataInSync(false)\n    }\n  }, [prepareData?.employeeCompensations])\n\n  useEffect(() => {\n    syncData()\n  }, [syncData])\n\n  const { data: payScheduleData, isLoading: isPayScheduleLoading } = usePaySchedulesGet(\n    {\n      companyId,\n      payScheduleId: prepareData?.payPeriod?.payScheduleUuid || '',\n    },\n    {\n      enabled: !!prepareData?.payPeriod?.payScheduleUuid,\n    },\n  )\n\n  const handleItemsPerPageChange = (newCount: PaginationItemsPerPage) => {\n    setItemsPerPage(newCount)\n  }\n\n  const handleFirstPage = () => {\n    setCurrentPage(1)\n  }\n\n  const handlePreviousPage = () => {\n    setCurrentPage(prevPage => Math.max(prevPage - 1, 1))\n  }\n\n  const handleNextPage = () => {\n    setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages))\n  }\n\n  const handleLastPage = () => {\n    setCurrentPage(totalPages)\n  }\n\n  const handleRefetch = useCallback(async () => {\n    await queryClient.invalidateQueries({\n      queryKey: [PREPARE_QUERY_KEY, payrollId],\n    })\n  }, [queryClient, payrollId])\n\n  const isInitialLoading = isPrepareLoading && !hasInitialDataRef.current\n  const isPaginating = isPrepareFetching && hasInitialDataRef.current\n  const isPaginationFetching = isFetchingEmployeeData || isPaginating || !isDataInSync\n  const isLoading =\n    isInitialLoading || isPayScheduleLoading || (!employeeData && isFetchingEmployeeData)\n\n  const pagination: PaginationControlProps = {\n    currentPage,\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage,\n    handleItemsPerPageChange,\n    totalPages,\n    totalCount,\n    isFetching: isPaginationFetching,\n    itemsPerPage,\n  }\n\n  return {\n    employeeCompensations: prepareData?.employeeCompensations || [],\n    employeeDetails: displayedEmployees,\n    payPeriod: prepareData?.payPeriod,\n    paySchedule: payScheduleData?.payScheduleObject,\n    isOffCycle: prepareData?.offCycle ?? false,\n    pagination,\n    isLoading,\n    refetch: handleRefetch,\n  }\n}\n"],"names":["PREPARE_QUERY_KEY","FIVE_MINUTES","usePayrollConfigurationData","companyId","payrollId","gustoClient","useGustoEmbeddedContext","queryClient","useQueryClient","defaultItemsPerPage","currentPage","setCurrentPage","useState","itemsPerPage","setItemsPerPage","displayedEmployees","setDisplayedEmployees","isDataInSync","setIsDataInSync","hasInitialDataRef","useRef","employeeData","isFetchingEmployeeData","useEmployeesList","keepPreviousData","employeeDataRef","employeeUuids","useMemo","totalPages","totalCount","employeeUuidsKey","prepareData","isPrepareLoading","isPrepareFetching","useQuery","result","payrollsPrepare","syncData","useCallback","currentEmployeeData","currentUuids","e","preparedUuids","c","uuid","useEffect","payScheduleData","isPayScheduleLoading","usePaySchedulesGet","handleItemsPerPageChange","newCount","handleFirstPage","handlePreviousPage","prevPage","handleNextPage","handleLastPage","handleRefetch","isInitialLoading","isPaginating","isPaginationFetching","isLoading","pagination"],"mappings":";;;;;;AA+BA,MAAMA,IAAoB,mBACpBC,KAAe,MAAS;AAEvB,SAASC,GAA4B;AAAA,EAC1C,WAAAC;AAAA,EACA,WAAAC;AACF,GAAyE;AACvE,QAAMC,IAAcC,EAAA,GACdC,IAAcC,EAAA,GACdC,IAAsB,IAEtB,CAACC,GAAaC,CAAc,IAAIC,EAAS,CAAC,GAC1C,CAACC,GAAcC,CAAe,IAAIF,EAAiCH,CAAmB,GACtF,CAACM,GAAoBC,CAAqB,IAAIJ,EAAqB,CAAA,CAAE,GACrE,CAACK,GAAcC,CAAe,IAAIN,EAAS,EAAK,GAChDO,IAAoBC,EAAO,EAAK,GAEhC,EAAE,MAAMC,GAAc,YAAYC,MAA2BC;AAAA,IACjE;AAAA,MACE,WAAApB;AAAA,MACA,aAAaC;AAAA,MACb,KAAKS;AAAA,MACL,MAAMH;AAAA,MACN,QAAQ;AAAA,IAAA;AAAA,IAEV,EAAE,iBAAiBc,EAAA;AAAA,EAAiB,GAGhCC,IAAkBL,EAAOC,CAAY;AAC3C,EAAAI,EAAgB,UAAUJ;AAE1B,QAAMK,IAAgBC,EAAQ,MACrBN,GAAc,eAAe,IAAI,OAAK,EAAE,IAAI,KAAK,CAAA,GACvD,CAACA,GAAc,aAAa,CAAC,GAE1BO,IAAa,OAAOP,GAAc,SAAS,SAAS,QAAQ,IAAI,eAAe,KAAK,CAAC,GACrFQ,IAAa,OAAOR,GAAc,SAAS,SAAS,QAAQ,IAAI,eAAe,KAAK,CAAC,GAErFS,IAAmBH,EAAQ,MAAMD,EAAc,KAAK,GAAG,GAAG,CAACA,CAAa,CAAC,GAEzE;AAAA,IACJ,MAAMK;AAAA,IACN,WAAWC;AAAA,IACX,YAAYC;AAAA,EAAA,IACVC,EAAS;AAAA,IACX,UAAU,CAAClC,GAAmBI,GAAW0B,CAAgB;AAAA,IACzD,SAAS,YAAY;AACnB,YAAMK,IAAS,MAAMC,GAAgB/B,GAAa;AAAA,QAChD,WAAAF;AAAA,QACA,WAAAC;AAAA,QACA,QAAQ;AAAA,QACR,aAAa;AAAA,UACX,eAAAsB;AAAA,QAAA;AAAA,MACF,CACD;AAED,UAAI,CAACS,EAAO;AACV,cAAMA,EAAO;AAGf,aAAOA,EAAO,MAAM;AAAA,IACtB;AAAA,IACA,SAAST,EAAc,SAAS;AAAA,IAChC,WAAWzB;AAAA,IACX,iBAAiBuB;AAAA,EAAA,CAClB,GAEKa,IAAWC,EAAY,MAAM;AACjC,UAAMC,IAAsBd,EAAgB;AAC5C,QAAI,CAACc,GAAqB,iBAAiB,CAACR,GAAa,uBAAuB;AAC9E,MAAAb,EAAgB,EAAK;AACrB;AAAA,IACF;AAEA,UAAMsB,IAAeD,EAAoB,cAAc,IAAI,CAAAE,MAAKA,EAAE,IAAI,GAChEC,IAAgB,IAAI,IAAIX,EAAY,sBAAsB,IAAI,CAAAY,MAAKA,EAAE,YAAY,CAAC;AAGxF,IAFeH,EAAa,SAAS,KAAKA,EAAa,MAAM,CAAAI,MAAQF,EAAc,IAAIE,CAAI,CAAC,KAG1F5B,EAAsBuB,EAAoB,aAAa,GACvDrB,EAAgB,EAAI,GACpBC,EAAkB,UAAU,MAE5BD,EAAgB,EAAK;AAAA,EAEzB,GAAG,CAACa,GAAa,qBAAqB,CAAC;AAEvC,EAAAc,EAAU,MAAM;AACd,IAAAR,EAAA;AAAA,EACF,GAAG,CAACA,CAAQ,CAAC;AAEb,QAAM,EAAE,MAAMS,GAAiB,WAAWC,MAAyBC;AAAA,IACjE;AAAA,MACE,WAAA7C;AAAA,MACA,eAAe4B,GAAa,WAAW,mBAAmB;AAAA,IAAA;AAAA,IAE5D;AAAA,MACE,SAAS,CAAC,CAACA,GAAa,WAAW;AAAA,IAAA;AAAA,EACrC,GAGIkB,IAA2B,CAACC,MAAqC;AACrE,IAAApC,EAAgBoC,CAAQ;AAAA,EAC1B,GAEMC,IAAkB,MAAM;AAC5B,IAAAxC,EAAe,CAAC;AAAA,EAClB,GAEMyC,IAAqB,MAAM;AAC/B,IAAAzC,EAAe,OAAY,KAAK,IAAI0C,IAAW,GAAG,CAAC,CAAC;AAAA,EACtD,GAEMC,IAAiB,MAAM;AAC3B,IAAA3C,EAAe,OAAY,KAAK,IAAI0C,IAAW,GAAGzB,CAAU,CAAC;AAAA,EAC/D,GAEM2B,IAAiB,MAAM;AAC3B,IAAA5C,EAAeiB,CAAU;AAAA,EAC3B,GAEM4B,IAAgBlB,EAAY,YAAY;AAC5C,UAAM/B,EAAY,kBAAkB;AAAA,MAClC,UAAU,CAACP,GAAmBI,CAAS;AAAA,IAAA,CACxC;AAAA,EACH,GAAG,CAACG,GAAaH,CAAS,CAAC,GAErBqD,IAAmBzB,KAAoB,CAACb,EAAkB,SAC1DuC,IAAezB,KAAqBd,EAAkB,SACtDwC,IAAuBrC,KAA0BoC,KAAgB,CAACzC,GAClE2C,IACJH,KAAoBV,KAAyB,CAAC1B,KAAgBC,GAE1DuC,IAAqC;AAAA,IACzC,aAAAnD;AAAA,IACA,iBAAAyC;AAAA,IACA,oBAAAC;AAAA,IACA,gBAAAE;AAAA,IACA,gBAAAC;AAAA,IACA,0BAAAN;AAAA,IACA,YAAArB;AAAA,IACA,YAAAC;AAAA,IACA,YAAY8B;AAAA,IACZ,cAAA9C;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,uBAAuBkB,GAAa,yBAAyB,CAAA;AAAA,IAC7D,iBAAiBhB;AAAA,IACjB,WAAWgB,GAAa;AAAA,IACxB,aAAae,GAAiB;AAAA,IAC9B,YAAYf,GAAa,YAAY;AAAA,IACrC,YAAA8B;AAAA,IACA,WAAAD;AAAA,IACA,SAASJ;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"usePayrollConfigurationData.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/usePayrollConfigurationData.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport { useEmployeesList } from '@gusto/embedded-api/react-query/employeesList'\nimport { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { usePaySchedulesGet } from '@gusto/embedded-api/react-query/paySchedulesGet'\nimport { useGustoEmbeddedContext } from '@gusto/embedded-api/react-query/_context'\nimport { payrollsPrepare } from '@gusto/embedded-api/funcs/payrollsPrepare'\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 type {\n  PaginationControlProps,\n  PaginationItemsPerPage,\n} from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ninterface UsePayrollConfigurationDataParams {\n  companyId: string\n  payrollId: string\n}\n\ninterface UsePayrollConfigurationDataReturn {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod: PayrollPayPeriodType | undefined\n  paySchedule: PayScheduleObject | undefined\n  isOffCycle: boolean\n  pagination: PaginationControlProps\n  isLoading: boolean\n  refetch: () => Promise<void>\n}\n\nconst PREPARE_QUERY_KEY = 'payroll-prepare'\nconst FIVE_MINUTES = 5 * 60 * 1000\n\nexport function usePayrollConfigurationData({\n  companyId,\n  payrollId,\n}: UsePayrollConfigurationDataParams): UsePayrollConfigurationDataReturn {\n  const gustoClient = useGustoEmbeddedContext()\n  const queryClient = useQueryClient()\n  const defaultItemsPerPage = 10\n\n  const [currentPage, setCurrentPage] = useState(1)\n  const [itemsPerPage, setItemsPerPage] = useState<PaginationItemsPerPage>(defaultItemsPerPage)\n  const [displayedEmployees, setDisplayedEmployees] = useState<Employee[]>([])\n  const [isDataInSync, setIsDataInSync] = useState(false)\n  const hasInitialDataRef = useRef(false)\n\n  const { data: employeeData, isFetching: isFetchingEmployeeData } = useEmployeesList(\n    {\n      companyId,\n      payrollUuid: payrollId,\n      per: itemsPerPage,\n      page: currentPage,\n      sortBy: 'name',\n    },\n    { placeholderData: keepPreviousData },\n  )\n\n  const employeeDataRef = useRef(employeeData)\n  employeeDataRef.current = employeeData\n\n  const employeeUuids = useMemo(() => {\n    return employeeData?.showEmployees?.map(e => e.uuid) || []\n  }, [employeeData?.showEmployees])\n\n  const totalPages = Number(employeeData?.httpMeta.response.headers.get('x-total-pages') ?? 1)\n  const totalCount = Number(employeeData?.httpMeta.response.headers.get('x-total-count') ?? 0)\n\n  const employeeUuidsKey = useMemo(() => employeeUuids.join(','), [employeeUuids])\n\n  const {\n    data: prepareData,\n    isLoading: isPrepareLoading,\n    isFetching: isPrepareFetching,\n  } = useQuery({\n    queryKey: [PREPARE_QUERY_KEY, payrollId, employeeUuidsKey],\n    queryFn: async () => {\n      const result = await payrollsPrepare(gustoClient, {\n        companyId,\n        payrollId,\n        sortBy: 'last_name',\n        requestBody: {\n          employeeUuids,\n        },\n      })\n\n      if (!result.ok) {\n        throw result.error\n      }\n\n      return result.value.payrollPrepared\n    },\n    enabled: employeeUuids.length > 0,\n    staleTime: FIVE_MINUTES,\n    placeholderData: keepPreviousData,\n  })\n\n  const syncData = useCallback(() => {\n    const currentEmployeeData = employeeDataRef.current\n    if (!currentEmployeeData?.showEmployees || !prepareData?.employeeCompensations) {\n      setIsDataInSync(false)\n      return\n    }\n\n    const currentUuids = currentEmployeeData.showEmployees.map(e => e.uuid)\n    const preparedUuids = new Set(prepareData.employeeCompensations.map(c => c.employeeUuid))\n    const inSync = currentUuids.length > 0 && currentUuids.every(uuid => preparedUuids.has(uuid))\n\n    if (inSync) {\n      setDisplayedEmployees(currentEmployeeData.showEmployees)\n      setIsDataInSync(true)\n      hasInitialDataRef.current = true\n    } else {\n      setIsDataInSync(false)\n    }\n  }, [prepareData?.employeeCompensations])\n\n  useEffect(() => {\n    syncData()\n  }, [syncData])\n\n  const { data: payScheduleData, isLoading: isPayScheduleLoading } = usePaySchedulesGet(\n    {\n      companyId,\n      payScheduleId: prepareData?.payPeriod?.payScheduleUuid || '',\n    },\n    {\n      enabled: !!prepareData?.payPeriod?.payScheduleUuid,\n    },\n  )\n\n  const handleItemsPerPageChange = (newCount: PaginationItemsPerPage) => {\n    setItemsPerPage(newCount)\n  }\n\n  const handleFirstPage = () => {\n    setCurrentPage(1)\n  }\n\n  const handlePreviousPage = () => {\n    setCurrentPage(prevPage => Math.max(prevPage - 1, 1))\n  }\n\n  const handleNextPage = () => {\n    setCurrentPage(prevPage => Math.min(prevPage + 1, totalPages))\n  }\n\n  const handleLastPage = () => {\n    setCurrentPage(totalPages)\n  }\n\n  const handleRefetch = useCallback(async () => {\n    await queryClient.invalidateQueries({\n      queryKey: [PREPARE_QUERY_KEY, payrollId],\n    })\n  }, [queryClient, payrollId])\n\n  const isInitialLoading = isPrepareLoading && !hasInitialDataRef.current\n  const isPaginating = isPrepareFetching && hasInitialDataRef.current\n  const isPaginationFetching = isFetchingEmployeeData || isPaginating || !isDataInSync\n  const isLoading =\n    isInitialLoading || isPayScheduleLoading || (!employeeData && isFetchingEmployeeData)\n\n  const pagination: PaginationControlProps = {\n    currentPage,\n    handleFirstPage,\n    handlePreviousPage,\n    handleNextPage,\n    handleLastPage,\n    handleItemsPerPageChange,\n    totalPages,\n    totalCount,\n    isFetching: isPaginationFetching,\n    itemsPerPage,\n  }\n\n  return {\n    employeeCompensations: prepareData?.employeeCompensations || [],\n    employeeDetails: displayedEmployees,\n    payPeriod: prepareData?.payPeriod,\n    paySchedule: payScheduleData?.payScheduleObject,\n    isOffCycle: prepareData?.offCycle ?? false,\n    pagination,\n    isLoading,\n    refetch: handleRefetch,\n  }\n}\n"],"names":["PREPARE_QUERY_KEY","FIVE_MINUTES","usePayrollConfigurationData","companyId","payrollId","gustoClient","useGustoEmbeddedContext","queryClient","useQueryClient","defaultItemsPerPage","currentPage","setCurrentPage","useState","itemsPerPage","setItemsPerPage","displayedEmployees","setDisplayedEmployees","isDataInSync","setIsDataInSync","hasInitialDataRef","useRef","employeeData","isFetchingEmployeeData","useEmployeesList","keepPreviousData","employeeDataRef","employeeUuids","useMemo","totalPages","totalCount","employeeUuidsKey","prepareData","isPrepareLoading","isPrepareFetching","useQuery","result","payrollsPrepare","syncData","useCallback","currentEmployeeData","currentUuids","e","preparedUuids","c","uuid","useEffect","payScheduleData","isPayScheduleLoading","usePaySchedulesGet","handleItemsPerPageChange","newCount","handleFirstPage","handlePreviousPage","prevPage","handleNextPage","handleLastPage","handleRefetch","isInitialLoading","isPaginating","isPaginationFetching","isLoading","pagination"],"mappings":"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"}

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

@@ -9,7 +9,6 @@ import u from "./PayrollEditEmployeePresentation.module.scss.js";
 import { TimeOffField as ne } from "./TimeOffField.js";
 import { Flex as x } from "../../Common/Flex/Flex.js";
 import { Grid as P } from "../../Common/Grid/Grid.js";
-import "classnames";
 import { useComponentContext as re } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as ie } from "../../../i18n/I18n.js";
 import { Form as oe } from "../../Common/Form/Form.js";
@@ -60,7 +59,7 @@ const Te = m.object({
       });
     }
   }), g.fixedCompensations = b, g;
-}, We = ({
+}, ze = ({
   onSave: E,
   onCancel: y,
   employee: l,
@@ -341,6 +340,6 @@ const Te = m.object({
 };
 export {
   Te as PayrollEditEmployeeFormSchema,
-  We as PayrollEditEmployeePresentation
+  ze as PayrollEditEmployeePresentation
 };
 //# sourceMappingURL=PayrollEditEmployeePresentation.js.map