@gusto/embedded-react-sdk 0.14.0 → 0.14.1

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

@@ -1,90 +1,122 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useState as f, useEffect as E } from "react";
-import { useEmployeesListSuspense as A } from "@gusto/embedded-api/react-query/employeesList";
-import { usePayrollsGetSuspense as D } from "@gusto/embedded-api/react-query/payrollsGet";
-import { usePayrollsCalculateMutation as _ } from "@gusto/embedded-api/react-query/payrollsCalculate";
-import { PayrollProcessingRequestStatus as m } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
-import { useTranslation as b } from "react-i18next";
-import { usePreparedPayrollData as q } from "../usePreparedPayrollData.js";
-import { payrollSubmitHandler as O } from "../PayrollBlocker/payrollHelpers.js";
-import { PayrollConfigurationPresentation as k } from "./PayrollConfigurationPresentation.js";
-import { BaseComponent as B } from "../../Base/Base.js";
-import { componentEvents as c } from "../../../shared/constants.js";
-import { useComponentDictionary as N, useI18n as U } from "../../../i18n/I18n.js";
-import { useBase as Y } from "../../Base/useBase.js";
-const x = (e) => e?.status === m.Calculating, T = (e) => e?.status === m.CalculateSuccess;
-function $(e) {
-  return /* @__PURE__ */ u(B, { ...e, children: /* @__PURE__ */ u(F, { ...e, children: e.children }) });
+import { jsx as m } from "react/jsx-runtime";
+import { useState as f, useEffect as N } from "react";
+import { useEmployeesListSuspense as b } from "@gusto/embedded-api/react-query/employeesList";
+import { usePayrollsGetSuspense as x } from "@gusto/embedded-api/react-query/payrollsGet";
+import { usePayrollsCalculateMutation as B } from "@gusto/embedded-api/react-query/payrollsCalculate";
+import { PayrollProcessingRequestStatus as p } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
+import { useTranslation as k } from "react-i18next";
+import { usePayrollsUpdateMutation as T } from "@gusto/embedded-api/react-query/payrollsUpdate";
+import { usePreparedPayrollData as H } from "../usePreparedPayrollData.js";
+import { payrollSubmitHandler as M } from "../PayrollBlocker/payrollHelpers.js";
+import { PayrollConfigurationPresentation as V } from "./PayrollConfigurationPresentation.js";
+import { BaseComponent as F } from "../../Base/Base.js";
+import { componentEvents as a } from "../../../shared/constants.js";
+import { useComponentDictionary as G, useI18n as K } from "../../../i18n/I18n.js";
+import { useBase as j } from "../../Base/useBase.js";
+const I = (e) => e?.status === p.Calculating, W = (e) => e?.status === p.CalculateSuccess;
+function ce(e) {
+  return /* @__PURE__ */ m(F, { ...e, children: /* @__PURE__ */ m(z, { ...e, children: e.children }) });
 }
-const F = ({
+const z = ({
   onEvent: e,
   companyId: l,
   payrollId: s,
-  dictionary: y,
-  alerts: P
+  dictionary: d,
+  alerts: g
 }) => {
-  N("Payroll.PayrollConfiguration", y), U("Payroll.PayrollConfiguration");
-  const { t: p } = b("Payroll.PayrollConfiguration"), { baseSubmitHandler: g } = Y(), [o, r] = f(!1), [C, i] = f([]), { data: d } = A({
+  G("Payroll.PayrollConfiguration", d), K("Payroll.PayrollConfiguration");
+  const { t: P } = k("Payroll.PayrollConfiguration"), { baseSubmitHandler: y } = j(), [t, n] = f(!1), [L, c] = f([]), { data: C } = b({
     companyId: l
-  }), { data: t } = D(
+  }), { data: r } = x(
     {
       companyId: l,
       payrollId: s,
       include: ["taxes", "benefits", "deductions"]
     },
-    { refetchInterval: o ? 5e3 : !1 }
-  ), { mutateAsync: S } = _(), {
-    preparedPayroll: n,
-    paySchedule: L,
-    isLoading: R
-  } = q({
+    { refetchInterval: t ? 5e3 : !1 }
+  ), { mutateAsync: R } = B(), { mutateAsync: S, isPending: _ } = T(), {
+    preparedPayroll: u,
+    paySchedule: E,
+    isLoading: A,
+    handlePreparePayroll: w
+  } = H({
     companyId: l,
     payrollId: s
-  }), h = async () => {
-    i([]), await g({}, async () => {
-      const a = await O(async () => {
-        await S({
+  }), O = async () => {
+    c([]), await y({}, async () => {
+      const o = await M(async () => {
+        await R({
           request: {
             companyId: l,
             payrollId: s
           }
-        }), r(!0);
+        }), n(!0);
       });
-      !a.success && a.blockers.length > 0 && i(a.blockers);
+      !o.success && o.blockers.length > 0 && c(o.blockers);
     });
-  }, w = (a) => {
-    e(c.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: a.uuid });
+  }, h = (o) => {
+    e(a.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: o.uuid });
+  }, U = ({
+    paymentMethod: o,
+    ...i
+  }) => ({
+    ...i,
+    ...o && o !== "Historical" ? { paymentMethod: o } : {},
+    memo: i.memo || void 0
+  }), D = async (o) => {
+    e(a.RUN_PAYROLL_EMPLOYEE_SKIP, {
+      employeeId: o.employeeUuid
+    }), await y({}, async () => {
+      const i = U(o), q = await S({
+        request: {
+          companyId: l,
+          payrollId: s,
+          payrollUpdate: {
+            employeeCompensations: [
+              { ...i, excluded: !i.excluded }
+            ]
+          }
+        }
+      });
+      e(a.RUN_PAYROLL_EMPLOYEE_SAVED, {
+        payrollPrepared: q.payrollPrepared
+      }), await w();
+    });
+  }, Y = () => {
+    e(a.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
   };
-  return E(() => {
-    x(t.payrollShow?.processingRequest) && !o && r(!0), o && T(t.payrollShow?.processingRequest) && (e(c.RUN_PAYROLL_CALCULATED, {
+  return N(() => {
+    I(r.payrollShow?.processingRequest) && !t && n(!0), t && W(r.payrollShow?.processingRequest) && (e(a.RUN_PAYROLL_CALCULATED, {
       payrollId: s,
-      alert: { type: "success", title: p("alerts.progressSaved") }
-    }), i([]), r(!1)), o && t.payrollShow?.processingRequest?.status === m.ProcessingFailed && (e(c.RUN_PAYROLL_PROCESSING_FAILED), r(!1));
+      alert: { type: "success", title: P("alerts.progressSaved") }
+    }), c([]), n(!1)), t && r.payrollShow?.processingRequest?.status === p.ProcessingFailed && (e(a.RUN_PAYROLL_PROCESSING_FAILED), n(!1));
   }, [
-    t.payrollShow?.processingRequest,
-    o,
+    r.payrollShow?.processingRequest,
+    t,
     e,
-    p,
+    P,
     s,
-    t.payrollShow?.calculatedAt
-  ]), /* @__PURE__ */ u(
-    k,
+    r.payrollShow?.calculatedAt
+  ]), /* @__PURE__ */ m(
+    V,
     {
-      onCalculatePayroll: h,
-      onEdit: w,
-      employeeCompensations: n?.employeeCompensations || [],
-      employeeDetails: d.showEmployees || [],
-      payPeriod: n?.payPeriod,
-      paySchedule: L,
-      isOffCycle: n?.offCycle,
-      alerts: P,
-      isPending: o || R,
-      payrollBlockers: C
+      onCalculatePayroll: O,
+      onEdit: h,
+      onToggleExclude: D,
+      onViewBlockers: Y,
+      employeeCompensations: u?.employeeCompensations || [],
+      employeeDetails: C.showEmployees || [],
+      payPeriod: u?.payPeriod,
+      paySchedule: E,
+      isOffCycle: u?.offCycle,
+      alerts: g,
+      isPending: t || A || _,
+      payrollBlockers: L
     }
   );
 };
 export {
-  $ as PayrollConfiguration,
-  F as Root
+  ce as PayrollConfiguration,
+  z as Root
 };
 //# sourceMappingURL=PayrollConfiguration.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollConfiguration.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { usePayrollsCalculateMutation } from '@gusto/embedded-api/react-query/payrollsCalculate'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollProcessingRequest } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { PayrollProcessingRequestStatus } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { useTranslation } from 'react-i18next'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { payrollSubmitHandler, type ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { useBase } from '@/components/Base'\n\nconst isCalculating = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.Calculating\nconst isCalculated = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.CalculateSuccess\n\ninterface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {\n  companyId: string\n  payrollId: string\n  alerts?: ReactNode\n}\n\nexport function PayrollConfiguration(props: PayrollConfigurationProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  onEvent,\n  companyId,\n  payrollId,\n  dictionary,\n  alerts,\n}: PayrollConfigurationProps) => {\n  useComponentDictionary('Payroll.PayrollConfiguration', dictionary)\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { baseSubmitHandler } = useBase()\n\n  const [isPolling, setIsPolling] = useState(false)\n  const [payrollBlockers, setPayrollBlockers] = useState<ApiPayrollBlocker[]>([])\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { data: payrollData } = usePayrollsGetSuspense(\n    {\n      companyId,\n      payrollId,\n      include: ['taxes', 'benefits', 'deductions'],\n    },\n    { refetchInterval: isPolling ? 5_000 : false },\n  )\n\n  const { mutateAsync: calculatePayroll } = usePayrollsCalculateMutation()\n\n  const {\n    preparedPayroll,\n    paySchedule,\n    isLoading: isPrepareLoading,\n  } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const onCalculatePayroll = async () => {\n    // Clear any existing blockers before attempting calculation\n    setPayrollBlockers([])\n\n    await baseSubmitHandler({}, async () => {\n      const result = await payrollSubmitHandler(async () => {\n        await calculatePayroll({\n          request: {\n            companyId,\n            payrollId,\n          },\n        })\n        setIsPolling(true)\n      })\n\n      if (!result.success && result.blockers.length > 0) {\n        setPayrollBlockers(result.blockers)\n      }\n    })\n  }\n  const onEdit = (employee: Employee) => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: employee.uuid })\n  }\n\n  useEffect(() => {\n    // Start polling when payroll is calculating and not already polling\n    if (isCalculating(payrollData.payrollShow?.processingRequest) && !isPolling) {\n      setIsPolling(true)\n    }\n    // Stop polling and emit event when payroll is calculated successfully\n    if (isPolling && isCalculated(payrollData.payrollShow?.processingRequest)) {\n      onEvent(componentEvents.RUN_PAYROLL_CALCULATED, {\n        payrollId,\n        alert: { type: 'success', title: t('alerts.progressSaved') },\n      })\n      // Clear blockers on successful calculation\n      setPayrollBlockers([])\n      setIsPolling(false)\n    }\n    // If we are polling and payroll is in failed state, stop polling, and emit failure event\n    if (\n      isPolling &&\n      payrollData.payrollShow?.processingRequest?.status ===\n        PayrollProcessingRequestStatus.ProcessingFailed\n    ) {\n      onEvent(componentEvents.RUN_PAYROLL_PROCESSING_FAILED)\n      setIsPolling(false)\n    }\n  }, [\n    payrollData.payrollShow?.processingRequest,\n    isPolling,\n    onEvent,\n    t,\n    payrollId,\n    payrollData.payrollShow?.calculatedAt,\n  ])\n\n  return (\n    <PayrollConfigurationPresentation\n      onCalculatePayroll={onCalculatePayroll}\n      onEdit={onEdit}\n      employeeCompensations={preparedPayroll?.employeeCompensations || []}\n      employeeDetails={employeeData.showEmployees || []}\n      payPeriod={preparedPayroll?.payPeriod}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n      alerts={alerts}\n      isPending={isPolling || isPrepareLoading}\n      payrollBlockers={payrollBlockers}\n    />\n  )\n}\n"],"names":["isCalculating","processingRequest","PayrollProcessingRequestStatus","isCalculated","PayrollConfiguration","props","jsx","BaseComponent","Root","onEvent","companyId","payrollId","dictionary","alerts","useComponentDictionary","useI18n","t","useTranslation","baseSubmitHandler","useBase","isPolling","setIsPolling","useState","payrollBlockers","setPayrollBlockers","employeeData","useEmployeesListSuspense","payrollData","usePayrollsGetSuspense","calculatePayroll","usePayrollsCalculateMutation","preparedPayroll","paySchedule","isPrepareLoading","usePreparedPayrollData","onCalculatePayroll","result","payrollSubmitHandler","onEdit","employee","componentEvents","useEffect","PayrollConfigurationPresentation"],"mappings":"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"}
+{"version":3,"file":"PayrollConfiguration.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfiguration.tsx"],"sourcesContent":["import { useEffect, useState, type ReactNode } from 'react'\nimport { useEmployeesListSuspense } from '@gusto/embedded-api/react-query/employeesList'\nimport { usePayrollsGetSuspense } from '@gusto/embedded-api/react-query/payrollsGet'\nimport { usePayrollsCalculateMutation } from '@gusto/embedded-api/react-query/payrollsCalculate'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollProcessingRequest } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { PayrollProcessingRequestStatus } from '@gusto/embedded-api/models/components/payrollprocessingrequest'\nimport { useTranslation } from 'react-i18next'\nimport { usePayrollsUpdateMutation } from '@gusto/embedded-api/react-query/payrollsUpdate'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport type { PayrollUpdateEmployeeCompensations } from '@gusto/embedded-api/models/components/payrollupdate'\nimport { usePreparedPayrollData } from '../usePreparedPayrollData'\nimport { payrollSubmitHandler, type ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollConfigurationPresentation } from './PayrollConfigurationPresentation'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseComponent } from '@/components/Base/Base'\nimport { componentEvents } from '@/shared/constants'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { useBase } from '@/components/Base'\n\nconst isCalculating = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.Calculating\nconst isCalculated = (processingRequest?: PayrollProcessingRequest | null) =>\n  processingRequest?.status === PayrollProcessingRequestStatus.CalculateSuccess\n\ninterface PayrollConfigurationProps extends BaseComponentInterface<'Payroll.PayrollConfiguration'> {\n  companyId: string\n  payrollId: string\n  alerts?: ReactNode\n}\n\nexport function PayrollConfiguration(props: PayrollConfigurationProps & BaseComponentInterface) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nexport const Root = ({\n  onEvent,\n  companyId,\n  payrollId,\n  dictionary,\n  alerts,\n}: PayrollConfigurationProps) => {\n  useComponentDictionary('Payroll.PayrollConfiguration', dictionary)\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { baseSubmitHandler } = useBase()\n\n  const [isPolling, setIsPolling] = useState(false)\n  const [payrollBlockers, setPayrollBlockers] = useState<ApiPayrollBlocker[]>([])\n  const { data: employeeData } = useEmployeesListSuspense({\n    companyId,\n  })\n\n  const { data: payrollData } = usePayrollsGetSuspense(\n    {\n      companyId,\n      payrollId,\n      include: ['taxes', 'benefits', 'deductions'],\n    },\n    { refetchInterval: isPolling ? 5_000 : false },\n  )\n\n  const { mutateAsync: calculatePayroll } = usePayrollsCalculateMutation()\n\n  const { mutateAsync: updatePayroll, isPending: isUpdatingPayroll } = usePayrollsUpdateMutation()\n\n  const {\n    preparedPayroll,\n    paySchedule,\n    isLoading: isPrepareLoading,\n    handlePreparePayroll,\n  } = usePreparedPayrollData({\n    companyId,\n    payrollId,\n  })\n\n  const onCalculatePayroll = async () => {\n    // Clear any existing blockers before attempting calculation\n    setPayrollBlockers([])\n\n    await baseSubmitHandler({}, async () => {\n      const result = await payrollSubmitHandler(async () => {\n        await calculatePayroll({\n          request: {\n            companyId,\n            payrollId,\n          },\n        })\n        setIsPolling(true)\n      })\n\n      if (!result.success && result.blockers.length > 0) {\n        setPayrollBlockers(result.blockers)\n      }\n    })\n  }\n  const onEdit = (employee: Employee) => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: employee.uuid })\n  }\n  const transformEmployeeCompensation = ({\n    paymentMethod,\n    ...compensation\n  }: PayrollEmployeeCompensationsType): PayrollUpdateEmployeeCompensations => {\n    return {\n      ...compensation,\n      ...(paymentMethod && paymentMethod !== 'Historical' ? { paymentMethod } : {}),\n      memo: compensation.memo || undefined,\n    }\n  }\n  const onToggleExclude = async (employeeCompensation: PayrollEmployeeCompensationsType) => {\n    onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SKIP, {\n      employeeId: employeeCompensation.employeeUuid,\n    })\n    await baseSubmitHandler({}, async () => {\n      const transformedCompensation = transformEmployeeCompensation(employeeCompensation)\n      const result = await updatePayroll({\n        request: {\n          companyId,\n          payrollId,\n          payrollUpdate: {\n            employeeCompensations: [\n              { ...transformedCompensation, excluded: !transformedCompensation.excluded },\n            ],\n          },\n        },\n      })\n      onEvent(componentEvents.RUN_PAYROLL_EMPLOYEE_SAVED, {\n        payrollPrepared: result.payrollPrepared,\n      })\n      // Refresh preparedPayroll to get updated data\n      await handlePreparePayroll()\n    })\n  }\n\n  const onViewBlockers = () => {\n    onEvent(componentEvents.RUN_PAYROLL_BLOCKERS_VIEW_ALL)\n  }\n\n  useEffect(() => {\n    // Start polling when payroll is calculating and not already polling\n    if (isCalculating(payrollData.payrollShow?.processingRequest) && !isPolling) {\n      setIsPolling(true)\n    }\n    // Stop polling and emit event when payroll is calculated successfully\n    if (isPolling && isCalculated(payrollData.payrollShow?.processingRequest)) {\n      onEvent(componentEvents.RUN_PAYROLL_CALCULATED, {\n        payrollId,\n        alert: { type: 'success', title: t('alerts.progressSaved') },\n      })\n      // Clear blockers on successful calculation\n      setPayrollBlockers([])\n      setIsPolling(false)\n    }\n    // If we are polling and payroll is in failed state, stop polling, and emit failure event\n    if (\n      isPolling &&\n      payrollData.payrollShow?.processingRequest?.status ===\n        PayrollProcessingRequestStatus.ProcessingFailed\n    ) {\n      onEvent(componentEvents.RUN_PAYROLL_PROCESSING_FAILED)\n      setIsPolling(false)\n    }\n  }, [\n    payrollData.payrollShow?.processingRequest,\n    isPolling,\n    onEvent,\n    t,\n    payrollId,\n    payrollData.payrollShow?.calculatedAt,\n  ])\n\n  return (\n    <PayrollConfigurationPresentation\n      onCalculatePayroll={onCalculatePayroll}\n      onEdit={onEdit}\n      onToggleExclude={onToggleExclude}\n      onViewBlockers={onViewBlockers}\n      employeeCompensations={preparedPayroll?.employeeCompensations || []}\n      employeeDetails={employeeData.showEmployees || []}\n      payPeriod={preparedPayroll?.payPeriod}\n      paySchedule={paySchedule}\n      isOffCycle={preparedPayroll?.offCycle}\n      alerts={alerts}\n      isPending={isPolling || isPrepareLoading || isUpdatingPayroll}\n      payrollBlockers={payrollBlockers}\n    />\n  )\n}\n"],"names":["isCalculating","processingRequest","PayrollProcessingRequestStatus","isCalculated","PayrollConfiguration","props","jsx","BaseComponent","Root","onEvent","companyId","payrollId","dictionary","alerts","useComponentDictionary","useI18n","t","useTranslation","baseSubmitHandler","useBase","isPolling","setIsPolling","useState","payrollBlockers","setPayrollBlockers","employeeData","useEmployeesListSuspense","payrollData","usePayrollsGetSuspense","calculatePayroll","usePayrollsCalculateMutation","updatePayroll","isUpdatingPayroll","usePayrollsUpdateMutation","preparedPayroll","paySchedule","isPrepareLoading","handlePreparePayroll","usePreparedPayrollData","onCalculatePayroll","result","payrollSubmitHandler","onEdit","employee","componentEvents","transformEmployeeCompensation","paymentMethod","compensation","onToggleExclude","employeeCompensation","transformedCompensation","onViewBlockers","useEffect","PayrollConfigurationPresentation"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ 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 { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype';
 import { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers';
 interface PayrollConfigurationPresentationProps {
     employeeCompensations: EmployeeCompensations[];
@@ -11,10 +12,12 @@ interface PayrollConfigurationPresentationProps {
     paySchedule?: PayScheduleObject;
     onCalculatePayroll: () => void;
     onEdit: (employee: Employee) => void;
+    onToggleExclude: (employeeCompensation: PayrollEmployeeCompensationsType) => void;
+    onViewBlockers: () => void;
     isOffCycle?: boolean;
     alerts?: ReactNode;
     isPending?: boolean;
     payrollBlockers?: ApiPayrollBlocker[];
 }
-export declare const PayrollConfigurationPresentation: ({ employeeCompensations, employeeDetails, payPeriod, paySchedule, onEdit, onCalculatePayroll, isOffCycle, alerts, isPending, payrollBlockers, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PayrollConfigurationPresentation: ({ employeeCompensations, employeeDetails, payPeriod, paySchedule, onEdit, onToggleExclude, onCalculatePayroll, onViewBlockers, isOffCycle, alerts, isPending, payrollBlockers, }: PayrollConfigurationPresentationProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,25 +1,28 @@
-import { jsxs as a, jsx as e, Fragment as I } from "react/jsx-runtime";
-import { useTranslation as M, Trans as k } from "react-i18next";
-import { useFormatEmployeePayRate as R, getRegularHours as S, getOvertimeHours as j, formatHoursDisplay as C, getTotalPtoHours as G, getAdditionalEarnings as O, getReimbursements as _, calculateGrossPay as z } from "../helpers.js";
-import { PayrollBlockerAlerts as K } from "../PayrollBlocker/PayrollBlockerAlerts.js";
-import V from "./PayrollConfigurationPresentation.module.scss.js";
-import { useI18n as W } from "../../../i18n/I18n.js";
+import { jsxs as a, jsx as e, Fragment as F } from "react/jsx-runtime";
+import { useTranslation as I, Trans as R } from "react-i18next";
+import { useFormatEmployeePayRate as j, getRegularHours as G, getOvertimeHours as O, formatHoursDisplay as D, getTotalPtoHours as V, getAdditionalEarnings as _, getReimbursements as z, calculateGrossPay as K } from "../helpers.js";
+import { PayrollBlockerAlerts as W } from "../PayrollBlocker/components/PayrollBlockerAlerts.js";
+import X from "./PayrollConfigurationPresentation.module.scss.js";
+import { useI18n as q } from "../../../i18n/I18n.js";
 import { Flex as u, FlexItem as w } from "../../Common/Flex/Flex.js";
-import { Grid as q } from "../../Common/Grid/Grid.js";
-import { useComponentContext as J } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { HamburgerMenu as Q } from "../../Common/HamburgerMenu/HamburgerMenu.js";
-import X from "../../../assets/icons/pencil.svg.js";
-import { formatNumberAsCurrency as f, firstLastName as Y } from "../../../helpers/formattedStrings.js";
-import { parseDateStringToLocal as P } from "../../../helpers/dateFormatting.js";
-import { useLocale as Z } from "../../../contexts/LocaleProvider/useLocale.js";
-import { useLoadingIndicator as $ } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-import { DataView as ee } from "../../Common/DataView/DataView.js";
-const te = ({
+import { Grid as J } from "../../Common/Grid/Grid.js";
+import "classnames";
+import { useComponentContext as Q } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import Y from "../../../assets/icons/pencil.svg.js";
+import Z from "../../../assets/icons/x-circle.svg.js";
+import $ from "../../../assets/icons/plus-circle.svg.js";
+import { formatNumberAsCurrency as f, firstLastName as ee } from "../../../helpers/formattedStrings.js";
+import { parseDateStringToLocal as x } from "../../../helpers/dateFormatting.js";
+import { useLocale as te } from "../../../contexts/LocaleProvider/useLocale.js";
+import { useLoadingIndicator as re } from "../../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
+import { HamburgerMenu as ne } from "../../Common/HamburgerMenu/HamburgerMenu.js";
+import { DataView as oe } from "../../Common/DataView/DataView.js";
+const ie = ({
   payPeriod: s,
   locale: c
 }) => {
   if (s?.startDate && s.endDate) {
-    const m = P(s.startDate), d = P(s.endDate);
+    const m = x(s.startDate), d = x(s.endDate);
     if (m && d) {
       const p = m.toLocaleDateString(c, {
         month: "long",
@@ -33,112 +36,120 @@ const te = ({
     }
   }
   return { startDate: "", endDate: "" };
-}, be = ({
+}, Ne = ({
   employeeCompensations: s,
   employeeDetails: c,
   payPeriod: m,
   paySchedule: d,
   onEdit: p,
-  onCalculatePayroll: g,
-  isOffCycle: T = !1,
+  onToggleExclude: g,
+  onCalculatePayroll: P,
+  onViewBlockers: T,
+  isOffCycle: N = !1,
   alerts: y,
   isPending: b,
-  payrollBlockers: D = []
+  payrollBlockers: C = []
 }) => {
-  const { Button: x, Heading: h, Text: o, Badge: N, LoadingSpinner: L } = J();
-  W("Payroll.PayrollConfiguration");
-  const { t: n } = M("Payroll.PayrollConfiguration"), { locale: H } = Z(), { LoadingIndicator: U } = $(), A = R(), i = new Map(c.map((t) => [t.uuid, t])), E = (t) => {
+  const { Button: k, Heading: h, Text: o, Badge: L, LoadingSpinner: M } = Q();
+  q("Payroll.PayrollConfiguration");
+  const { t: n } = I("Payroll.PayrollConfiguration"), { locale: U } = te(), { LoadingIndicator: v } = re(), H = j(), i = new Map(c.map((t) => [t.uuid, t])), A = (t) => {
     const r = i.get(t);
-    return r ? Y({ first_name: r.firstName, last_name: r.lastName }) : null;
+    return r ? ee({ first_name: r.firstName, last_name: r.lastName }) : null;
   };
   return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 16, children: [
     /* @__PURE__ */ a(u, { justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ a(w, { children: [
         /* @__PURE__ */ e(h, { as: "h1", children: n("pageTitle") }),
         /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(
-          k,
+          R,
           {
             i18nKey: "description",
             t: n,
             components: { dateWrapper: /* @__PURE__ */ e(o, { weight: "bold", as: "span" }) },
-            values: te({ payPeriod: m, locale: H })
+            values: ie({ payPeriod: m, locale: U })
           }
         ) })
       ] }),
       /* @__PURE__ */ e(
-        x,
+        k,
         {
           title: n("calculatePayrollTitle"),
-          onClick: g,
+          onClick: P,
           isDisabled: b,
           children: n("calculatePayroll")
         }
       )
     ] }),
-    y && /* @__PURE__ */ e(q, { gap: 16, gridTemplateColumns: "1fr", children: y }),
-    b ? /* @__PURE__ */ e(U, { children: /* @__PURE__ */ a(u, { flexDirection: "column", alignItems: "center", gap: 4, children: [
-      /* @__PURE__ */ e(L, { size: "lg" }),
+    y && /* @__PURE__ */ e(J, { gap: 16, gridTemplateColumns: "1fr", children: y }),
+    b ? /* @__PURE__ */ e(v, { children: /* @__PURE__ */ a(u, { flexDirection: "column", alignItems: "center", gap: 4, children: [
+      /* @__PURE__ */ e(M, { size: "lg" }),
       /* @__PURE__ */ e(h, { as: "h4", children: n("loadingTitle") }),
       /* @__PURE__ */ e(o, { children: n("loadingDescription") })
-    ] }) }) : /* @__PURE__ */ a(I, { children: [
-      /* @__PURE__ */ e("div", { className: V.payrollBlockerContainer, children: D.length > 0 && /* @__PURE__ */ e(K, { blockers: D }) }),
+    ] }) }) : /* @__PURE__ */ a(F, { children: [
+      /* @__PURE__ */ e("div", { className: X.payrollBlockerContainer, children: C.length > 0 && /* @__PURE__ */ e(
+        W,
+        {
+          blockers: C,
+          onMultipleViewClick: T
+        }
+      ) }),
       /* @__PURE__ */ a(w, { children: [
         /* @__PURE__ */ e(h, { as: "h3", children: n("hoursAndEarningsTitle") }),
         /* @__PURE__ */ e(o, { children: n("hoursAndEarningsDescription") })
       ] }),
       /* @__PURE__ */ e(
-        ee,
+        oe,
         {
           label: n("employeeCompensationsTitle"),
           columns: [
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.employees") }),
               render: (t) => {
-                const r = i.get(t.employeeUuid || ""), l = A(r);
+                const r = i.get(t.employeeUuid || ""), l = H(r);
                 return /* @__PURE__ */ a(u, { flexDirection: "column", gap: 8, children: [
-                  /* @__PURE__ */ e(o, { weight: "semibold", children: E(t.employeeUuid || "") }),
+                  /* @__PURE__ */ e(o, { weight: "semibold", children: A(t.employeeUuid || "") }),
                   l && /* @__PURE__ */ e(o, { variant: "supporting", children: l }),
-                  t.excluded && /* @__PURE__ */ e(N, { status: "warning", children: n("skippedBadge") })
+                  t.excluded && /* @__PURE__ */ e(L, { status: "warning", children: n("skippedBadge") })
                 ] });
               }
             },
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.hours") }),
               render: (t) => {
-                const r = S(t), l = j(t);
-                return /* @__PURE__ */ e(o, { children: C(r + l) });
+                const r = G(t), l = O(t);
+                return /* @__PURE__ */ e(o, { children: D(r + l) });
               }
             },
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.timeOff") }),
               render: (t) => {
-                const r = G(t);
-                return /* @__PURE__ */ e(o, { children: C(r) });
+                const r = V(t);
+                return /* @__PURE__ */ e(o, { children: D(r) });
               }
             },
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.additionalEarnings") }),
               render: (t) => {
-                const r = O(t);
+                const r = _(t);
                 return /* @__PURE__ */ e(o, { children: f(r) });
               }
             },
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.reimbursements") }),
               render: (t) => {
-                const r = _(t);
+                const r = z(t);
                 return /* @__PURE__ */ e(o, { children: f(r) });
               }
             },
             {
               title: /* @__PURE__ */ e(o, { weight: "semibold", children: n("tableColumns.totalPay") }),
               render: (t) => {
-                const r = i.get(t.employeeUuid || ""), l = r ? z(
+                const r = i.get(t.employeeUuid || ""), l = r ? K(
                   t,
                   r,
                   m?.startDate,
                   d,
-                  T
+                  N
                 ) : 0;
                 return /* @__PURE__ */ e(o, { children: f(l) });
               }
@@ -148,20 +159,27 @@ const te = ({
             const r = t.employeeUuid;
             return r ? i.has(r) : !1;
           }).sort((t, r) => {
-            const l = i.get(t.employeeUuid || ""), v = i.get(r.employeeUuid || ""), B = l?.lastName || "", F = v?.lastName || "";
-            return B.localeCompare(F);
+            const l = i.get(t.employeeUuid || ""), E = i.get(r.employeeUuid || ""), S = l?.lastName || "", B = E?.lastName || "";
+            return S.localeCompare(B);
           }),
           itemMenu: (t) => /* @__PURE__ */ e(
-            Q,
+            ne,
             {
               items: [
                 {
                   label: n("editMenu.edit"),
-                  icon: /* @__PURE__ */ e(X, { "aria-hidden": !0 }),
+                  icon: /* @__PURE__ */ e(Y, { "aria-hidden": !0 }),
                   onClick: () => {
                     const r = i.get(t.employeeUuid || "");
                     r && p(r);
                   }
+                },
+                {
+                  label: n(t.excluded ? "editMenu.unskip" : "editMenu.skip"),
+                  icon: t.excluded ? /* @__PURE__ */ e($, { "aria-hidden": !0 }) : /* @__PURE__ */ e(Z, { "aria-hidden": !0 }),
+                  onClick: () => {
+                    i.get(t.employeeUuid || "") && g(t);
+                  }
                 }
               ],
               triggerLabel: n("editMenu.edit")
@@ -173,6 +191,6 @@ const te = ({
   ] });
 };
 export {
-  be as PayrollConfigurationPresentation
+  Ne 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 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/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport { firstLastName, formatNumberAsCurrency } from '@/helpers/formattedStrings'\nimport { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\ninterface PayrollConfigurationPresentationProps {\n  employeeCompensations: EmployeeCompensations[]\n  employeeDetails: Employee[]\n  payPeriod?: PayrollPayPeriodType\n  paySchedule?: PayScheduleObject\n  onCalculatePayroll: () => void\n  onEdit: (employee: Employee) => void\n  isOffCycle?: boolean\n  alerts?: ReactNode\n  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n}) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    const startDate = parseDateStringToLocal(payPeriod.startDate)\n    const endDate = parseDateStringToLocal(payPeriod.endDate)\n\n    if (startDate && endDate) {\n      const startFormatted = startDate.toLocaleDateString(locale, {\n        month: 'long',\n        day: 'numeric',\n      })\n      const endFormatted = endDate.toLocaleDateString(locale, {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      })\n      return { startDate: startFormatted, endDate: endFormatted }\n    }\n  }\n  return { startDate: '', endDate: '' }\n}\n\nexport const PayrollConfigurationPresentation = ({\n  employeeCompensations,\n  employeeDetails,\n  payPeriod,\n  paySchedule,\n  onEdit,\n  onCalculatePayroll,\n  isOffCycle = false,\n  alerts,\n  isPending,\n  payrollBlockers = [],\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\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    <Flex flexDirection=\"column\" gap={16}>\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\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, locale })}\n            />\n          </Text>\n        </FlexItem>\n        <Button\n          title={t('calculatePayrollTitle')}\n          onClick={onCalculatePayroll}\n          isDisabled={isPending}\n        >\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      {alerts && (\n        <Grid gap={16} gridTemplateColumns=\"1fr\">\n          {alerts}\n        </Grid>\n      )}\n\n      {isPending ? (\n        <LoadingIndicator>\n          <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n            <LoadingSpinner size=\"lg\" />\n            <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n            <Text>{t('loadingDescription')}</Text>\n          </Flex>\n        </LoadingIndicator>\n      ) : (\n        <>\n          <div className={styles.payrollBlockerContainer}>\n            {payrollBlockers.length > 0 && <PayrollBlockerAlerts blockers={payrollBlockers} />}\n          </div>\n          <FlexItem>\n            <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n            <Text>{t('hoursAndEarningsDescription')}</Text>\n          </FlexItem>\n\n          <DataView\n            label={t('employeeCompensationsTitle')}\n            columns={[\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  const payRateDisplay = formatEmployeePayRate(employee)\n                  return (\n                    <Flex flexDirection=\"column\" gap={8 as const}>\n                      <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                      {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                      {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                    </Flex>\n                  )\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const hours = getRegularHours(item)\n                  const overtimeHours = getOvertimeHours(item)\n                  return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const ptoHours = getTotalPtoHours(item)\n                  return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const earnings = getAdditionalEarnings(item)\n                  return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const reimbursements = getReimbursements(item)\n                  return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                render: (item: PayrollEmployeeCompensationsType) => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  const calculatedGrossPay = employee\n                    ? calculateGrossPay(\n                        item,\n                        employee,\n                        payPeriod?.startDate,\n                        paySchedule,\n                        isOffCycle,\n                      )\n                    : 0\n                  return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                },\n              },\n            ]}\n            data={employeeCompensations\n              .filter(compensation => {\n                const employeeUuid = compensation.employeeUuid\n                if (!employeeUuid) return false\n                return employeeMap.has(employeeUuid)\n              })\n              .sort((a, b) => {\n                const employeeA = employeeMap.get(a.employeeUuid || '')\n                const employeeB = employeeMap.get(b.employeeUuid || '')\n                const lastNameA = employeeA?.lastName || ''\n                const lastNameB = employeeB?.lastName || ''\n                return lastNameA.localeCompare(lastNameB)\n              })}\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                triggerLabel={t('editMenu.edit')}\n              />\n            )}\n          />\n        </>\n      )}\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onCalculatePayroll","isOffCycle","alerts","isPending","payrollBlockers","Button","Heading","Text","Badge","LoadingSpinner","useComponentContext","useI18n","t","useTranslation","useLocale","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","FlexItem","jsx","Trans","Grid","Fragment","styles","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAMA,KAA+B,CAAC;AAAA,EACpC,WAAAC;AAAA,EACA,QAAAC;AACF,MAGM;AACJ,MAAID,GAAW,aAAaA,EAAU,SAAS;AAC7C,UAAME,IAAYC,EAAuBH,EAAU,SAAS,GACtDI,IAAUD,EAAuBH,EAAU,OAAO;AAExD,QAAIE,KAAaE,GAAS;AACxB,YAAMC,IAAiBH,EAAU,mBAAmBD,GAAQ;AAAA,QAC1D,OAAO;AAAA,QACP,KAAK;AAAA,MAAA,CACN,GACKK,IAAeF,EAAQ,mBAAmBH,GAAQ;AAAA,QACtD,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AACD,aAAO,EAAE,WAAWI,GAAgB,SAASC,EAAA;AAAA,IAC/C;AAAA,EACF;AACA,SAAO,EAAE,WAAW,IAAI,SAAS,GAAA;AACnC,GAEaC,KAAmC,CAAC;AAAA,EAC/C,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAT;AAAA,EACA,aAAAU;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AACpB,MAA6C;AAC3C,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,OAAAC,GAAO,gBAAAC,EAAA,IAAmBC,EAAA;AACzD,EAAAC,EAAQ,8BAA8B;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,QAAAxB,EAAA,IAAWyB,EAAA,GACb,EAAE,kBAAAC,EAAA,IAAqBC,EAAA,GACvBC,IAAwBC,EAAA,GAExBC,IAAc,IAAI,IAAItB,EAAgB,IAAI,CAAAuB,MAAY,CAACA,EAAS,MAAMA,CAAQ,CAAC,CAAC,GAEhFC,IAAkB,CAACC,MAAyB;AAChD,UAAMF,IAAWD,EAAY,IAAIG,CAAY;AAC7C,WAAOF,IACHG,EAAc,EAAE,YAAYH,EAAS,WAAW,WAAWA,EAAS,SAAA,CAAU,IAC9E;AAAA,EACN;AAEA,SACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,WAAW,GAAE;AAAA,0BAChCL,GAAA,EACC,UAAA,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,GAAAhB;AAAA,YACA,YAAY,EAAE,aAAa,gBAAAe,EAACpB,KAAK,QAAO,QAAO,IAAG,OAAA,CAAO,EAAA;AAAA,YACzD,QAAQpB,GAA6B,EAAE,WAAAC,GAAW,QAAAC,GAAQ;AAAA,UAAA;AAAA,QAAA,EAC5D,CACF;AAAA,MAAA,GACF;AAAA,MACA,gBAAAsC;AAAA,QAACtB;AAAA,QAAA;AAAA,UACC,OAAOO,EAAE,uBAAuB;AAAA,UAChC,SAASZ;AAAA,UACT,YAAYG;AAAA,UAEX,YAAE,kBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACF;AAAA,IAECD,KACC,gBAAAyB,EAACE,GAAA,EAAK,KAAK,IAAI,qBAAoB,OAChC,UAAA3B,GACH;AAAA,IAGDC,IACC,gBAAAwB,EAACZ,GAAA,EACC,UAAA,gBAAAS,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAE,EAAClB,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,wBACzBH,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,cAAc,GAAE;AAAA,MACpC,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,oBAAoB,EAAA,CAAE;AAAA,IAAA,EAAA,CACjC,EAAA,CACF,IAEA,gBAAAY,EAAAM,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWI,EAAO,yBACpB,UAAA3B,EAAgB,SAAS,KAAK,gBAAAuB,EAACK,GAAA,EAAqB,UAAU5B,EAAA,CAAiB,GAClF;AAAA,wBACCsB,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,uBAAuB,GAAE;AAAA,QAC7C,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,6BAA6B,EAAA,CAAE;AAAA,MAAA,GAC1C;AAAA,MAEA,gBAAAe;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,OAAOrB,EAAE,4BAA4B;AAAA,UACrC,SAAS;AAAA,YACP;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,wBAAwB,GAAE;AAAA,cAC5D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDC,IAAiBlB,EAAsBG,CAAQ;AACrD,uBACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,kBAAA,gBAAAE,EAACpB,KAAK,QAAO,YAAY,YAAgB2B,EAAK,gBAAgB,EAAE,GAAE;AAAA,kBACjEC,KAAkB,gBAAAR,EAACpB,GAAA,EAAK,SAAQ,cAAc,UAAA4B,GAAe;AAAA,kBAC7DD,EAAK,YAAY,gBAAAP,EAACnB,GAAA,EAAM,QAAO,WAAW,UAAAI,EAAE,cAAc,EAAA,CAAE;AAAA,gBAAA,GAC/D;AAAA,cAEJ;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,oBAAoB,GAAE;AAAA,cACxD,QAAQ,CAACsB,MAAgC;AACvC,sBAAME,IAAQC,EAAgBH,CAAI,GAC5BI,IAAgBC,EAAiBL,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBJ,IAAQE,CAAa,GAAE;AAAA,cAC1D;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAX,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,sBAAsB,GAAE;AAAA,cAC1D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMO,IAAWC,EAAiBR,CAAI;AACtC,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBC,CAAQ,GAAE;AAAA,cAC7C;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAd,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,iCAAiC,GAAE;AAAA,cACrE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMS,IAAWC,EAAsBV,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBF,CAAQ,GAAE;AAAA,cACjD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAhB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,6BAA6B,GAAE;AAAA,cACjE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMY,IAAiBC,EAAkBb,CAAI;AAC7C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBC,CAAc,GAAE;AAAA,cACvD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAnB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,uBAAuB,GAAE;AAAA,cAC3D,QAAQ,CAACsB,MAA2C;AAClD,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDc,IAAqB5B,IACvB6B;AAAA,kBACEf;AAAA,kBACAd;AAAA,kBACAhC,GAAW;AAAA,kBACXU;AAAA,kBACAG;AAAA,gBAAA,IAEF;AACJ,uBAAO,gBAAA0B,EAACpB,GAAA,EAAM,UAAAsC,EAAuBG,CAAkB,GAAE;AAAA,cAC3D;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMpD,EACH,OAAO,CAAAsD,MAAgB;AACtB,kBAAM5B,IAAe4B,EAAa;AAClC,mBAAK5B,IACEH,EAAY,IAAIG,CAAY,IADT;AAAA,UAE5B,CAAC,EACA,KAAK,CAAC6B,GAAGC,MAAM;AACd,kBAAMC,IAAYlC,EAAY,IAAIgC,EAAE,gBAAgB,EAAE,GAChDG,IAAYnC,EAAY,IAAIiC,EAAE,gBAAgB,EAAE,GAChDG,IAAYF,GAAW,YAAY,IACnCG,IAAYF,GAAW,YAAY;AACzC,mBAAOC,EAAU,cAAcC,CAAS;AAAA,UAC1C,CAAC;AAAA,UACH,UAAU,CAACtB,MACT,gBAAAP;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO7C,EAAE,eAAe;AAAA,kBACxB,MAAM,gBAAAe,EAAC+B,GAAA,EAAU,eAAW,GAAA,CAAC;AAAA,kBAC7B,SAAS,MAAM;AACb,0BAAMtC,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE;AACxD,oBAAId,KACFrB,EAAOqB,CAAQ;AAAA,kBAEnB;AAAA,gBAAA;AAAA,cACF;AAAA,cAEF,cAAcR,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA;AAAA,IAEJ,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"PayrollConfigurationPresentation.js","sources":["../../../../src/components/Payroll/PayrollConfiguration/PayrollConfigurationPresentation.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type { EmployeeCompensations } from '@gusto/embedded-api/models/components/payrollshow'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { PayrollPayPeriodType } from '@gusto/embedded-api/models/components/payrollpayperiodtype'\nimport type { PayScheduleObject } from '@gusto/embedded-api/models/components/payscheduleobject'\nimport { Trans, useTranslation } from 'react-i18next'\nimport type { PayrollEmployeeCompensationsType } from '@gusto/embedded-api/models/components/payrollemployeecompensationstype'\nimport {\n  useFormatEmployeePayRate,\n  getRegularHours,\n  getOvertimeHours,\n  getTotalPtoHours,\n  getAdditionalEarnings,\n  getReimbursements,\n  formatHoursDisplay,\n  calculateGrossPay,\n} from '../helpers'\nimport type { ApiPayrollBlocker } from '../PayrollBlocker/payrollHelpers'\nimport { PayrollBlockerAlerts } from '../PayrollBlocker/components/PayrollBlockerAlerts'\nimport styles from './PayrollConfigurationPresentation.module.scss'\nimport { useI18n } from '@/i18n'\nimport { DataView, Flex, FlexItem, Grid } from '@/components/Common'\nimport { 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 { parseDateStringToLocal } from '@/helpers/dateFormatting'\nimport { useLocale } from '@/contexts/LocaleProvider/useLocale'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\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  isPending?: boolean\n  payrollBlockers?: ApiPayrollBlocker[]\n}\n\nconst getPayrollConfigurationTitle = ({\n  payPeriod,\n  locale,\n}: {\n  payPeriod?: PayrollPayPeriodType\n  locale: string\n}) => {\n  if (payPeriod?.startDate && payPeriod.endDate) {\n    const startDate = parseDateStringToLocal(payPeriod.startDate)\n    const endDate = parseDateStringToLocal(payPeriod.endDate)\n\n    if (startDate && endDate) {\n      const startFormatted = startDate.toLocaleDateString(locale, {\n        month: 'long',\n        day: 'numeric',\n      })\n      const endFormatted = endDate.toLocaleDateString(locale, {\n        month: 'short',\n        day: 'numeric',\n        year: 'numeric',\n      })\n      return { startDate: startFormatted, endDate: endFormatted }\n    }\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  isPending,\n  payrollBlockers = [],\n}: PayrollConfigurationPresentationProps) => {\n  const { Button, Heading, Text, Badge, LoadingSpinner } = useComponentContext()\n  useI18n('Payroll.PayrollConfiguration')\n  const { t } = useTranslation('Payroll.PayrollConfiguration')\n  const { locale } = useLocale()\n  const { LoadingIndicator } = useLoadingIndicator()\n  const formatEmployeePayRate = useFormatEmployeePayRate()\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    <Flex flexDirection=\"column\" gap={16}>\n      <Flex justifyContent=\"space-between\" alignItems=\"center\">\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, locale })}\n            />\n          </Text>\n        </FlexItem>\n        <Button\n          title={t('calculatePayrollTitle')}\n          onClick={onCalculatePayroll}\n          isDisabled={isPending}\n        >\n          {t('calculatePayroll')}\n        </Button>\n      </Flex>\n\n      {alerts && (\n        <Grid gap={16} gridTemplateColumns=\"1fr\">\n          {alerts}\n        </Grid>\n      )}\n\n      {isPending ? (\n        <LoadingIndicator>\n          <Flex flexDirection=\"column\" alignItems=\"center\" gap={4}>\n            <LoadingSpinner size=\"lg\" />\n            <Heading as=\"h4\">{t('loadingTitle')}</Heading>\n            <Text>{t('loadingDescription')}</Text>\n          </Flex>\n        </LoadingIndicator>\n      ) : (\n        <>\n          <div className={styles.payrollBlockerContainer}>\n            {payrollBlockers.length > 0 && (\n              <PayrollBlockerAlerts\n                blockers={payrollBlockers}\n                onMultipleViewClick={onViewBlockers}\n              />\n            )}\n          </div>\n          <FlexItem>\n            <Heading as=\"h3\">{t('hoursAndEarningsTitle')}</Heading>\n            <Text>{t('hoursAndEarningsDescription')}</Text>\n          </FlexItem>\n\n          <DataView\n            label={t('employeeCompensationsTitle')}\n            columns={[\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.employees')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  const payRateDisplay = formatEmployeePayRate(employee)\n                  return (\n                    <Flex flexDirection=\"column\" gap={8 as const}>\n                      <Text weight=\"semibold\">{getEmployeeName(item.employeeUuid || '')}</Text>\n                      {payRateDisplay && <Text variant=\"supporting\">{payRateDisplay}</Text>}\n                      {item.excluded && <Badge status=\"warning\">{t('skippedBadge')}</Badge>}\n                    </Flex>\n                  )\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.hours')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const hours = getRegularHours(item)\n                  const overtimeHours = getOvertimeHours(item)\n                  return <Text>{formatHoursDisplay(hours + overtimeHours)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.timeOff')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const ptoHours = getTotalPtoHours(item)\n                  return <Text>{formatHoursDisplay(ptoHours)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.additionalEarnings')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const earnings = getAdditionalEarnings(item)\n                  return <Text>{formatNumberAsCurrency(earnings)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.reimbursements')}</Text>,\n                render: (item: EmployeeCompensations) => {\n                  const reimbursements = getReimbursements(item)\n                  return <Text>{formatNumberAsCurrency(reimbursements)}</Text>\n                },\n              },\n              {\n                title: <Text weight=\"semibold\">{t('tableColumns.totalPay')}</Text>,\n                render: (item: PayrollEmployeeCompensationsType) => {\n                  const employee = employeeMap.get(item.employeeUuid || '')\n                  const calculatedGrossPay = employee\n                    ? calculateGrossPay(\n                        item,\n                        employee,\n                        payPeriod?.startDate,\n                        paySchedule,\n                        isOffCycle,\n                      )\n                    : 0\n                  return <Text>{formatNumberAsCurrency(calculatedGrossPay)}</Text>\n                },\n              },\n            ]}\n            data={employeeCompensations\n              .filter(compensation => {\n                const employeeUuid = compensation.employeeUuid\n                if (!employeeUuid) return false\n                return employeeMap.has(employeeUuid)\n              })\n              .sort((a, b) => {\n                const employeeA = employeeMap.get(a.employeeUuid || '')\n                const employeeB = employeeMap.get(b.employeeUuid || '')\n                const lastNameA = employeeA?.lastName || ''\n                const lastNameB = employeeB?.lastName || ''\n                return lastNameA.localeCompare(lastNameB)\n              })}\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          />\n        </>\n      )}\n    </Flex>\n  )\n}\n"],"names":["getPayrollConfigurationTitle","payPeriod","locale","startDate","parseDateStringToLocal","endDate","startFormatted","endFormatted","PayrollConfigurationPresentation","employeeCompensations","employeeDetails","paySchedule","onEdit","onToggleExclude","onCalculatePayroll","onViewBlockers","isOffCycle","alerts","isPending","payrollBlockers","Button","Heading","Text","Badge","LoadingSpinner","useComponentContext","useI18n","t","useTranslation","useLocale","LoadingIndicator","useLoadingIndicator","formatEmployeePayRate","useFormatEmployeePayRate","employeeMap","employee","getEmployeeName","employeeUuid","firstLastName","jsxs","Flex","FlexItem","jsx","Trans","Grid","Fragment","styles","PayrollBlockerAlerts","DataView","item","payRateDisplay","hours","getRegularHours","overtimeHours","getOvertimeHours","formatHoursDisplay","ptoHours","getTotalPtoHours","earnings","getAdditionalEarnings","formatNumberAsCurrency","reimbursements","getReimbursements","calculatedGrossPay","calculateGrossPay","compensation","a","b","employeeA","employeeB","lastNameA","lastNameB","HamburgerMenu","PencilSvg","PlusCircle","XCircle"],"mappings":";;;;;;;;;;;;;;;;;;;AA+CA,MAAMA,KAA+B,CAAC;AAAA,EACpC,WAAAC;AAAA,EACA,QAAAC;AACF,MAGM;AACJ,MAAID,GAAW,aAAaA,EAAU,SAAS;AAC7C,UAAME,IAAYC,EAAuBH,EAAU,SAAS,GACtDI,IAAUD,EAAuBH,EAAU,OAAO;AAExD,QAAIE,KAAaE,GAAS;AACxB,YAAMC,IAAiBH,EAAU,mBAAmBD,GAAQ;AAAA,QAC1D,OAAO;AAAA,QACP,KAAK;AAAA,MAAA,CACN,GACKK,IAAeF,EAAQ,mBAAmBH,GAAQ;AAAA,QACtD,OAAO;AAAA,QACP,KAAK;AAAA,QACL,MAAM;AAAA,MAAA,CACP;AACD,aAAO,EAAE,WAAWI,GAAgB,SAASC,EAAA;AAAA,IAC/C;AAAA,EACF;AACA,SAAO,EAAE,WAAW,IAAI,SAAS,GAAA;AACnC,GAEaC,KAAmC,CAAC;AAAA,EAC/C,uBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAT;AAAA,EACA,aAAAU;AAAA,EACA,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB,CAAA;AACpB,MAA6C;AAC3C,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,MAAAC,GAAM,OAAAC,GAAO,gBAAAC,EAAA,IAAmBC,EAAA;AACzD,EAAAC,EAAQ,8BAA8B;AACtC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,8BAA8B,GACrD,EAAE,QAAA1B,EAAA,IAAW2B,GAAA,GACb,EAAE,kBAAAC,EAAA,IAAqBC,GAAA,GACvBC,IAAwBC,EAAA,GAExBC,IAAc,IAAI,IAAIxB,EAAgB,IAAI,CAAAyB,MAAY,CAACA,EAAS,MAAMA,CAAQ,CAAC,CAAC,GAEhFC,IAAkB,CAACC,MAAyB;AAChD,UAAMF,IAAWD,EAAY,IAAIG,CAAY;AAC7C,WAAOF,IACHG,GAAc,EAAE,YAAYH,EAAS,WAAW,WAAWA,EAAS,SAAA,CAAU,IAC9E;AAAA,EACN;AAEA,SACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAK,gBAAe,iBAAgB,YAAW,UAC9C,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,WAAW,GAAE;AAAA,0BAChCL,GAAA,EACC,UAAA,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,GAAAhB;AAAA,YACA,YAAY,EAAE,aAAa,gBAAAe,EAACpB,KAAK,QAAO,QAAO,IAAG,OAAA,CAAO,EAAA;AAAA,YACzD,QAAQtB,GAA6B,EAAE,WAAAC,GAAW,QAAAC,GAAQ;AAAA,UAAA;AAAA,QAAA,EAC5D,CACF;AAAA,MAAA,GACF;AAAA,MACA,gBAAAwC;AAAA,QAACtB;AAAA,QAAA;AAAA,UACC,OAAOO,EAAE,uBAAuB;AAAA,UAChC,SAASb;AAAA,UACT,YAAYI;AAAA,UAEX,YAAE,kBAAkB;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB,GACF;AAAA,IAECD,KACC,gBAAAyB,EAACE,GAAA,EAAK,KAAK,IAAI,qBAAoB,OAChC,UAAA3B,GACH;AAAA,IAGDC,IACC,gBAAAwB,EAACZ,GAAA,EACC,UAAA,gBAAAS,EAACC,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,MAAA,gBAAAE,EAAClB,GAAA,EAAe,MAAK,KAAA,CAAK;AAAA,wBACzBH,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,cAAc,GAAE;AAAA,MACpC,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,oBAAoB,EAAA,CAAE;AAAA,IAAA,EAAA,CACjC,EAAA,CACF,IAEA,gBAAAY,EAAAM,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAH,EAAC,SAAI,WAAWI,EAAO,yBACpB,UAAA3B,EAAgB,SAAS,KACxB,gBAAAuB;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,UAAU5B;AAAA,UACV,qBAAqBJ;AAAA,QAAA;AAAA,MAAA,GAG3B;AAAA,wBACC0B,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAC,EAACrB,GAAA,EAAQ,IAAG,MAAM,UAAAM,EAAE,uBAAuB,GAAE;AAAA,QAC7C,gBAAAe,EAACpB,GAAA,EAAM,UAAAK,EAAE,6BAA6B,EAAA,CAAE;AAAA,MAAA,GAC1C;AAAA,MAEA,gBAAAe;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,OAAOrB,EAAE,4BAA4B;AAAA,UACrC,SAAS;AAAA,YACP;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,wBAAwB,GAAE;AAAA,cAC5D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDC,IAAiBlB,EAAsBG,CAAQ;AACrD,uBACE,gBAAAI,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,kBAAA,gBAAAE,EAACpB,KAAK,QAAO,YAAY,YAAgB2B,EAAK,gBAAgB,EAAE,GAAE;AAAA,kBACjEC,KAAkB,gBAAAR,EAACpB,GAAA,EAAK,SAAQ,cAAc,UAAA4B,GAAe;AAAA,kBAC7DD,EAAK,YAAY,gBAAAP,EAACnB,GAAA,EAAM,QAAO,WAAW,UAAAI,EAAE,cAAc,EAAA,CAAE;AAAA,gBAAA,GAC/D;AAAA,cAEJ;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAe,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,oBAAoB,GAAE;AAAA,cACxD,QAAQ,CAACsB,MAAgC;AACvC,sBAAME,IAAQC,EAAgBH,CAAI,GAC5BI,IAAgBC,EAAiBL,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBJ,IAAQE,CAAa,GAAE;AAAA,cAC1D;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAX,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,sBAAsB,GAAE;AAAA,cAC1D,QAAQ,CAACsB,MAAgC;AACvC,sBAAMO,IAAWC,EAAiBR,CAAI;AACtC,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAiC,EAAmBC,CAAQ,GAAE;AAAA,cAC7C;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAd,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,iCAAiC,GAAE;AAAA,cACrE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMS,IAAWC,EAAsBV,CAAI;AAC3C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBF,CAAQ,GAAE;AAAA,cACjD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAhB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,6BAA6B,GAAE;AAAA,cACjE,QAAQ,CAACsB,MAAgC;AACvC,sBAAMY,IAAiBC,EAAkBb,CAAI;AAC7C,uBAAO,gBAAAP,EAACpB,GAAA,EAAM,UAAAsC,EAAuBC,CAAc,GAAE;AAAA,cACvD;AAAA,YAAA;AAAA,YAEF;AAAA,cACE,OAAO,gBAAAnB,EAACpB,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAE,uBAAuB,GAAE;AAAA,cAC3D,QAAQ,CAACsB,MAA2C;AAClD,sBAAMd,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE,GAClDc,IAAqB5B,IACvB6B;AAAA,kBACEf;AAAA,kBACAd;AAAA,kBACAlC,GAAW;AAAA,kBACXU;AAAA,kBACAK;AAAA,gBAAA,IAEF;AACJ,uBAAO,gBAAA0B,EAACpB,GAAA,EAAM,UAAAsC,EAAuBG,CAAkB,GAAE;AAAA,cAC3D;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,MAAMtD,EACH,OAAO,CAAAwD,MAAgB;AACtB,kBAAM5B,IAAe4B,EAAa;AAClC,mBAAK5B,IACEH,EAAY,IAAIG,CAAY,IADT;AAAA,UAE5B,CAAC,EACA,KAAK,CAAC6B,GAAGC,MAAM;AACd,kBAAMC,IAAYlC,EAAY,IAAIgC,EAAE,gBAAgB,EAAE,GAChDG,IAAYnC,EAAY,IAAIiC,EAAE,gBAAgB,EAAE,GAChDG,IAAYF,GAAW,YAAY,IACnCG,IAAYF,GAAW,YAAY;AACzC,mBAAOC,EAAU,cAAcC,CAAS;AAAA,UAC1C,CAAC;AAAA,UACH,UAAU,CAACtB,MACT,gBAAAP;AAAA,YAAC8B;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL;AAAA,kBACE,OAAO7C,EAAE,eAAe;AAAA,kBACxB,MAAM,gBAAAe,EAAC+B,GAAA,EAAU,eAAW,GAAA,CAAC;AAAA,kBAC7B,SAAS,MAAM;AACb,0BAAMtC,IAAWD,EAAY,IAAIe,EAAK,gBAAgB,EAAE;AACxD,oBAAId,KACFvB,EAAOuB,CAAQ;AAAA,kBAEnB;AAAA,gBAAA;AAAA,gBAEF;AAAA,kBACE,OAAOR,EAAEsB,EAAK,WAAW,oBAAoB,eAAe;AAAA,kBAC5D,MAAMA,EAAK,WAAW,gBAAAP,EAACgC,GAAA,EAAW,eAAW,GAAA,CAAC,IAAK,gBAAAhC,EAACiC,GAAA,EAAQ,eAAW,GAAA,CAAC;AAAA,kBACxE,SAAS,MAAM;AAEb,oBADiBzC,EAAY,IAAIe,EAAK,gBAAgB,EAAE,KAEtDpC,EAAgBoC,CAAI;AAAA,kBAExB;AAAA,gBAAA;AAAA,cACF;AAAA,cAEF,cAActB,EAAE,eAAe;AAAA,YAAA;AAAA,UAAA;AAAA,QACjC;AAAA,MAAA;AAAA,IAEJ,EAAA,CACF;AAAA,EAAA,GAEJ;AAEJ;"}