@gusto/embedded-react-sdk 0.15.0 → 0.17.0

package/dist/components/Flow/useFlow.d.ts

@@ -1,14 +1,23 @@
+import { CustomTypeOptions } from 'i18next';
 import { OnEventType } from '../Base/useBase';
 import { CommonComponentInterface } from '../Base';
+import { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes';
 import { EventType } from '../../shared/constants';
+export interface CtaConfig {
+    labelKey: string;
+    namespace?: keyof CustomTypeOptions['resources'];
+}
 export interface FlowContextInterface {
     component: React.ComponentType<CommonComponentInterface> | null;
     onEvent: OnEventType<EventType, unknown>;
-    showProgress?: boolean;
+    progressBarType?: 'progress' | 'breadcrumbs' | null;
     totalSteps?: number;
     currentStep?: number | null;
     defaultValues?: Record<string, unknown>;
     progressBarCta?: React.ComponentType | null;
+    breadcrumbs?: BreadcrumbTrail;
+    currentBreadcrumbId?: string;
+    ctaConfig?: CtaConfig | null;
 }
 export declare const FlowContext: import('react').Context<FlowContextInterface | null>;
 export declare function useFlow<C extends FlowContextInterface>(): C;

package/dist/components/Flow/useFlow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFlow.js","sources":["../../../src/components/Flow/useFlow.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { OnEventType } from '../Base/useBase'\nimport type { CommonComponentInterface } from '../Base'\nimport type { EventType } from '@/shared/constants'\n\nexport interface FlowContextInterface {\n  component: React.ComponentType<CommonComponentInterface> | null\n  onEvent: OnEventType<EventType, unknown>\n  showProgress?: boolean\n  totalSteps?: number\n  currentStep?: number | null\n  defaultValues?: Record<string, unknown>\n  progressBarCta?: React.ComponentType | null\n}\n\nexport const FlowContext = createContext<FlowContextInterface | null>(null)\n\n//TODO: This is hiding the fact that the callsite for useFlow\n//  destructures a `companyId` that doesn't seem to exist\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters\nexport function useFlow<C extends FlowContextInterface>() {\n  // When used outside provider, this is expected to return undefined - consumers must fallback to params\n  const values = useContext<C>(FlowContext as unknown as React.Context<C>)\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!values) {\n    throw new Error('useFlow used outside provider')\n  }\n  return values\n}\n"],"names":["FlowContext","createContext","useFlow","values","useContext"],"mappings":";AAeO,MAAMA,IAAcC,EAA2C,IAAI;AAKnE,SAASC,IAA0C;AAExD,QAAMC,IAASC,EAAcJ,CAA0C;AAEvE,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+BAA+B;AAEjD,SAAOA;AACT;"}
+{"version":3,"file":"useFlow.js","sources":["../../../src/components/Flow/useFlow.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { CustomTypeOptions } from 'i18next'\nimport type { OnEventType } from '../Base/useBase'\nimport type { CommonComponentInterface } from '../Base'\nimport type { BreadcrumbTrail } from '../Common/FlowBreadcrumbs/FlowBreadcrumbsTypes'\nimport type { EventType } from '@/shared/constants'\n\nexport interface CtaConfig {\n  labelKey: string\n  namespace?: keyof CustomTypeOptions['resources']\n}\n\nexport interface FlowContextInterface {\n  component: React.ComponentType<CommonComponentInterface> | null\n  onEvent: OnEventType<EventType, unknown>\n  progressBarType?: 'progress' | 'breadcrumbs' | null\n  totalSteps?: number\n  currentStep?: number | null\n  defaultValues?: Record<string, unknown>\n  progressBarCta?: React.ComponentType | null\n  breadcrumbs?: BreadcrumbTrail\n  currentBreadcrumbId?: string\n  ctaConfig?: CtaConfig | null\n}\n\nexport const FlowContext = createContext<FlowContextInterface | null>(null)\n\n//TODO: This is hiding the fact that the callsite for useFlow\n//  destructures a `companyId` that doesn't seem to exist\n// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-parameters\nexport function useFlow<C extends FlowContextInterface>() {\n  // When used outside provider, this is expected to return undefined - consumers must fallback to params\n  const values = useContext<C>(FlowContext as unknown as React.Context<C>)\n  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n  if (!values) {\n    throw new Error('useFlow used outside provider')\n  }\n  return values\n}\n"],"names":["FlowContext","createContext","useFlow","values","useContext"],"mappings":";AAyBO,MAAMA,IAAcC,EAA2C,IAAI;AAKnE,SAASC,IAA0C;AAExD,QAAMC,IAASC,EAAcJ,CAA0C;AAEvE,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,+BAA+B;AAEjD,SAAOA;AACT;"}

package/dist/components/Payroll/PayrollBlocker/PayrollBlocker.d.ts

@@ -1,5 +1,5 @@
 import { BaseComponentInterface } from '../../Base/Base';
-interface PayrollBlockerProps extends BaseComponentInterface<'PayrollBlocker'> {
+interface PayrollBlockerProps extends BaseComponentInterface<'Payroll.PayrollBlocker'> {
     companyId: string;
 }
 export declare function PayrollBlocker(props: PayrollBlockerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Payroll/PayrollBlocker/PayrollBlocker.js

@@ -1,30 +1,30 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useTranslation as y } from "react-i18next";
+import { jsx as l } from "react/jsx-runtime";
+import { useTranslation as u } from "react-i18next";
 import { usePayrollsGetBlockersSuspense as k } from "@gusto/embedded-api/react-query/payrollsGetBlockers";
 import { PayrollBlockerList as f } from "./components/PayrollBlockerList.js";
 import { getBlockerTranslationKeys as B } from "./payrollHelpers.js";
 import { BaseComponent as d } from "../../Base/Base.js";
 import { useComponentDictionary as P, useI18n as g } from "../../../i18n/I18n.js";
 function U(o) {
-  return /* @__PURE__ */ t(d, { ...o, children: /* @__PURE__ */ t(K, { ...o, children: o.children }) });
+  return /* @__PURE__ */ l(d, { ...o, children: /* @__PURE__ */ l(K, { ...o, children: o.children }) });
 }
-function K({ className: o, dictionary: i, companyId: s }) {
-  P("PayrollBlocker", i), g("PayrollBlocker");
-  const { t: e } = y("PayrollBlocker"), { data: a } = k({
-    companyUuid: s
-  }), l = (a.payrollBlockerList ?? []).map((n) => {
-    const r = n.key ?? "unknown", c = B(r), m = e(c.titleKey, {
-      defaultValue: r.replace(/_/g, " ").replace(/\b\w/g, (u) => u.toUpperCase())
-    }), p = e(c.descriptionKey, {
-      defaultValue: n.message || e("defaultBlockerDescription")
+function K({ className: o, dictionary: c, companyId: i }) {
+  P("Payroll.PayrollBlocker", c), g("Payroll.PayrollBlocker");
+  const { t: r } = u("Payroll.PayrollBlocker"), { data: s } = k({
+    companyUuid: i
+  }), t = (s.payrollBlockerList ?? []).map((n) => {
+    const e = n.key ?? "unknown", a = B(e), y = r(a.titleKey, {
+      defaultValue: e.replace(/_/g, " ").replace(/\b\w/g, (p) => p.toUpperCase())
+    }), m = r(a.descriptionKey, {
+      defaultValue: n.message || r("defaultBlockerDescription")
     });
     return {
-      id: r,
-      title: m,
-      description: p
+      id: e,
+      title: y,
+      description: m
     };
   });
-  return l.length === 0 ? null : /* @__PURE__ */ t(f, { className: o, blockers: l });
+  return t.length === 0 ? null : /* @__PURE__ */ l(f, { className: o, blockers: t });
 }
 export {
   U as PayrollBlocker

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

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlocker.js","sources":["../../../../src/components/Payroll/PayrollBlocker/PayrollBlocker.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollBlockerList, type PayrollBlocker } from './components/PayrollBlockerList'\nimport { getBlockerTranslationKeys } from './payrollHelpers'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollBlockerProps extends BaseComponentInterface<'PayrollBlocker'> {\n  companyId: string\n}\n\nexport function PayrollBlocker(props: PayrollBlockerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ className, dictionary, companyId }: PayrollBlockerProps) {\n  useComponentDictionary('PayrollBlocker', dictionary)\n  useI18n('PayrollBlocker')\n  const { t } = useTranslation('PayrollBlocker')\n\n  const { data } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = data.payrollBlockerList ?? []\n\n  const blockers: PayrollBlocker[] = payrollBlockerList.map(blocker => {\n    const blockerKey = blocker.key ?? 'unknown'\n    const translationKeys = getBlockerTranslationKeys(blockerKey)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blockerKey.replace(/_/g, ' ').replace(/\\b\\w/g, letter => letter.toUpperCase()),\n    })\n\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n\n    return {\n      id: blockerKey,\n      title,\n      description,\n    }\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return <PayrollBlockerList className={className} blockers={blockers} />\n}\n"],"names":["PayrollBlocker","props","jsx","BaseComponent","Root","className","dictionary","companyId","useComponentDictionary","useI18n","t","useTranslation","data","usePayrollsGetBlockersSuspense","blockers","blocker","blockerKey","translationKeys","getBlockerTranslationKeys","title","letter","description","PayrollBlockerList"],"mappings":";;;;;;;AAWO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,KAAkC;AACvE,EAAAC,EAAuB,kBAAkBF,CAAU,GACnDG,EAAQ,gBAAgB;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,gBAAgB,GAEvC,EAAE,MAAAC,EAAA,IAASC,EAA+B;AAAA,IAC9C,aAAaN;AAAA,EAAA,CACd,GAIKO,KAFqBF,EAAK,sBAAsB,CAAA,GAEA,IAAI,CAAAG,MAAW;AACnE,UAAMC,IAAaD,EAAQ,OAAO,WAC5BE,IAAkBC,EAA0BF,CAAU,GAEtDG,IAAQT,EAAEO,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAW,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAUA,EAAO,YAAA,CAAa;AAAA,IAAA,CAC5F,GAEKC,IAAcX,EAAEO,EAAgB,gBAAgB;AAAA,MACpD,cAAcF,EAAQ,WAAWL,EAAE,2BAA2B;AAAA,IAAA,CAC/D;AAED,WAAO;AAAA,MACL,IAAIM;AAAA,MACJ,OAAAG;AAAA,MACA,aAAAE;AAAA,IAAA;AAAA,EAEJ,CAAC;AAED,SAAIP,EAAS,WAAW,IACf,OAGF,gBAAAZ,EAACoB,GAAA,EAAmB,WAAAjB,GAAsB,UAAAS,EAAA,CAAoB;AACvE;"}
+{"version":3,"file":"PayrollBlocker.js","sources":["../../../../src/components/Payroll/PayrollBlocker/PayrollBlocker.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { usePayrollsGetBlockersSuspense } from '@gusto/embedded-api/react-query/payrollsGetBlockers'\nimport { PayrollBlockerList, type PayrollBlocker } from './components/PayrollBlockerList'\nimport { getBlockerTranslationKeys } from './payrollHelpers'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\n\ninterface PayrollBlockerProps extends BaseComponentInterface<'Payroll.PayrollBlocker'> {\n  companyId: string\n}\n\nexport function PayrollBlocker(props: PayrollBlockerProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nfunction Root({ className, dictionary, companyId }: PayrollBlockerProps) {\n  useComponentDictionary('Payroll.PayrollBlocker', dictionary)\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n\n  const { data } = usePayrollsGetBlockersSuspense({\n    companyUuid: companyId,\n  })\n\n  const payrollBlockerList = data.payrollBlockerList ?? []\n\n  const blockers: PayrollBlocker[] = payrollBlockerList.map(blocker => {\n    const blockerKey = blocker.key ?? 'unknown'\n    const translationKeys = getBlockerTranslationKeys(blockerKey)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blockerKey.replace(/_/g, ' ').replace(/\\b\\w/g, letter => letter.toUpperCase()),\n    })\n\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n\n    return {\n      id: blockerKey,\n      title,\n      description,\n    }\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return <PayrollBlockerList className={className} blockers={blockers} />\n}\n"],"names":["PayrollBlocker","props","jsx","BaseComponent","Root","className","dictionary","companyId","useComponentDictionary","useI18n","t","useTranslation","data","usePayrollsGetBlockersSuspense","blockers","blocker","blockerKey","translationKeys","getBlockerTranslationKeys","title","letter","description","PayrollBlockerList"],"mappings":";;;;;;;AAWO,SAASA,EAAeC,GAA4B;AACzD,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,SAASG,EAAK,EAAE,WAAAC,GAAW,YAAAC,GAAY,WAAAC,KAAkC;AACvE,EAAAC,EAAuB,0BAA0BF,CAAU,GAC3DG,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAE/C,EAAE,MAAAC,EAAA,IAASC,EAA+B;AAAA,IAC9C,aAAaN;AAAA,EAAA,CACd,GAIKO,KAFqBF,EAAK,sBAAsB,CAAA,GAEA,IAAI,CAAAG,MAAW;AACnE,UAAMC,IAAaD,EAAQ,OAAO,WAC5BE,IAAkBC,EAA0BF,CAAU,GAEtDG,IAAQT,EAAEO,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAW,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAUA,EAAO,YAAA,CAAa;AAAA,IAAA,CAC5F,GAEKC,IAAcX,EAAEO,EAAgB,gBAAgB;AAAA,MACpD,cAAcF,EAAQ,WAAWL,EAAE,2BAA2B;AAAA,IAAA,CAC/D;AAED,WAAO;AAAA,MACL,IAAIM;AAAA,MACJ,OAAAG;AAAA,MACA,aAAAE;AAAA,IAAA;AAAA,EAEJ,CAAC;AAED,SAAIP,EAAS,WAAW,IACf,OAGF,gBAAAZ,EAACoB,GAAA,EAAmB,WAAAjB,GAAsB,UAAAS,EAAA,CAAoB;AACvE;"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js

@@ -1,24 +1,23 @@
-import { jsx as l, jsxs as m } from "react/jsx-runtime";
-import { useTranslation as v } from "react-i18next";
-import { getBlockerTranslationKeys as A } from "../payrollHelpers.js";
-import { useComponentContext as C } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { Flex as d } from "../../../Common/Flex/Flex.js";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { useTranslation as P } from "react-i18next";
+import { getBlockerTranslationKeys as v } from "../payrollHelpers.js";
+import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { Flex as m } from "../../../Common/Flex/Flex.js";
 import "classnames";
 import "../../../../shared/constants.js";
-import "react";
-import { useI18n as D } from "../../../../i18n/I18n.js";
-function H({
+import { useI18n as C } from "../../../../i18n/I18n.js";
+function F({
   blockers: o,
   onMultipleViewClick: i,
   multipleViewLabel: h,
   className: s
 }) {
-  D("PayrollBlocker");
-  const { t: e } = v("PayrollBlocker"), { Alert: c, Button: f, Text: a, UnorderedList: x } = C();
+  C("Payroll.PayrollBlocker");
+  const { t: e } = P("Payroll.PayrollBlocker"), { Alert: a, Button: f, Text: c, UnorderedList: x } = A();
   if (o.length === 0)
     return null;
-  const g = o.length > 1, p = o.map((r) => {
-    const n = A(r.key), B = e(n.titleKey, {
+  const y = o.length > 1, p = o.map((r) => {
+    const n = v(r.key), B = e(n.titleKey, {
       defaultValue: r.key.replace(/_/g, " ").replace(/\b\w/g, (K) => K.toUpperCase())
     }), T = e(n.descriptionKey, {
       defaultValue: r.message || e("defaultBlockerDescription")
@@ -30,26 +29,26 @@ function H({
       helpText: k
     };
   }), t = p[0];
-  if (!g && t)
-    return /* @__PURE__ */ l(c, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 8, children: [
-      /* @__PURE__ */ l(a, { children: t.description }),
-      t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(a, { variant: "supporting", size: "sm", children: t.helpText })
+  if (!y && t)
+    return /* @__PURE__ */ l(a, { status: "error", label: t.title, className: s, children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ l(c, { children: t.description }),
+      t.helpText && t.helpText !== t.description && /* @__PURE__ */ l(c, { variant: "supporting", size: "sm", children: t.helpText })
     ] }) });
-  const y = p.map((r) => r.title), u = h || e("viewAllBlockers");
+  const g = p.map((r) => r.title), u = h || e("viewAllBlockers");
   return /* @__PURE__ */ l(
-    c,
+    a,
     {
       status: "error",
       label: e("multipleIssuesTitle", { count: o.length }),
       className: s,
-      children: /* @__PURE__ */ m(d, { flexDirection: "column", gap: 16, children: [
-        /* @__PURE__ */ l(x, { items: y }),
+      children: /* @__PURE__ */ d(m, { flexDirection: "column", gap: 16, children: [
+        /* @__PURE__ */ l(x, { items: g }),
         i && /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(f, { variant: "secondary", onClick: i, title: u, children: u }) })
       ] })
     }
   );
 }
 export {
-  H as PayrollBlockerAlerts
+  F as PayrollBlockerAlerts
 };
 //# sourceMappingURL=PayrollBlockerAlerts.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('PayrollBlocker')\n  const { t } = useTranslation('PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelpText') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,gBAAgB;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,gBAAgB,GACvC,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,wBAAwB,GAAG;AAE7F,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"PayrollBlockerAlerts.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerAlerts.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { type ApiPayrollBlocker, getBlockerTranslationKeys } from '../payrollHelpers'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex } from '@/components/Common'\nimport { useI18n } from '@/i18n'\n\ninterface PayrollBlockerAlertsProps {\n  blockers: ApiPayrollBlocker[]\n  className?: string\n  onMultipleViewClick?: () => void\n  multipleViewLabel?: string\n}\n\n/**\n * PayrollBlockerAlerts - Alert-style component for inline blocker display\n * Shows single blocker as alert, or multiple blockers as summary with \"Review\" button\n * Returns null for empty blocker arrays\n */\nexport function PayrollBlockerAlerts({\n  blockers,\n  onMultipleViewClick,\n  multipleViewLabel,\n  className,\n}: PayrollBlockerAlertsProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Alert, Button, Text, UnorderedList } = useComponentContext()\n\n  // Return null for empty blockers array\n  if (blockers.length === 0) {\n    return null\n  }\n\n  const hasMultipleBlockers = blockers.length > 1\n\n  const enrichedBlockers = blockers.map(blocker => {\n    const translationKeys = getBlockerTranslationKeys(blocker.key)\n\n    const title = t(translationKeys.titleKey, {\n      defaultValue: blocker.key.replace(/_/g, ' ').replace(/\\b\\w/g, l => l.toUpperCase()),\n    })\n    const description = t(translationKeys.descriptionKey, {\n      defaultValue: blocker.message || t('defaultBlockerDescription'),\n    })\n    const helpText = t(translationKeys.helpTextKey, { defaultValue: t('defaultBlockerHelpText') })\n\n    return {\n      ...blocker,\n      title,\n      description,\n      helpText,\n    }\n  })\n\n  const singleBlocker = enrichedBlockers[0]\n\n  if (!hasMultipleBlockers && singleBlocker) {\n    return (\n      <Alert status=\"error\" label={singleBlocker.title} className={className}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Text>{singleBlocker.description}</Text>\n          {singleBlocker.helpText && singleBlocker.helpText !== singleBlocker.description && (\n            <Text variant=\"supporting\" size=\"sm\">\n              {singleBlocker.helpText}\n            </Text>\n          )}\n        </Flex>\n      </Alert>\n    )\n  }\n\n  const listItems = enrichedBlockers.map(blocker => blocker.title)\n  const defaultMultipleLabel = multipleViewLabel || t('viewAllBlockers')\n\n  return (\n    <Alert\n      status=\"error\"\n      label={t('multipleIssuesTitle', { count: blockers.length })}\n      className={className}\n    >\n      <Flex flexDirection=\"column\" gap={16}>\n        <UnorderedList items={listItems} />\n        {onMultipleViewClick && (\n          <div>\n            <Button variant=\"secondary\" onClick={onMultipleViewClick} title={defaultMultipleLabel}>\n              {defaultMultipleLabel}\n            </Button>\n          </div>\n        )}\n      </Flex>\n    </Alert>\n  )\n}\n"],"names":["PayrollBlockerAlerts","blockers","onMultipleViewClick","multipleViewLabel","className","useI18n","t","useTranslation","Alert","Button","Text","UnorderedList","useComponentContext","hasMultipleBlockers","enrichedBlockers","blocker","translationKeys","getBlockerTranslationKeys","title","l","description","helpText","singleBlocker","jsx","jsxs","Flex","listItems","defaultMultipleLabel"],"mappings":";;;;;;;;AAkBO,SAASA,EAAqB;AAAA,EACnC,UAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,WAAAC;AACF,GAA8B;AAC5B,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,OAAAC,GAAO,QAAAC,GAAQ,MAAAC,GAAM,eAAAC,EAAA,IAAkBC,EAAA;AAG/C,MAAIX,EAAS,WAAW;AACtB,WAAO;AAGT,QAAMY,IAAsBZ,EAAS,SAAS,GAExCa,IAAmBb,EAAS,IAAI,CAAAc,MAAW;AAC/C,UAAMC,IAAkBC,EAA0BF,EAAQ,GAAG,GAEvDG,IAAQZ,EAAEU,EAAgB,UAAU;AAAA,MACxC,cAAcD,EAAQ,IAAI,QAAQ,MAAM,GAAG,EAAE,QAAQ,SAAS,CAAAI,MAAKA,EAAE,YAAA,CAAa;AAAA,IAAA,CACnF,GACKC,IAAcd,EAAEU,EAAgB,gBAAgB;AAAA,MACpD,cAAcD,EAAQ,WAAWT,EAAE,2BAA2B;AAAA,IAAA,CAC/D,GACKe,IAAWf,EAAEU,EAAgB,aAAa,EAAE,cAAcV,EAAE,wBAAwB,GAAG;AAE7F,WAAO;AAAA,MACL,GAAGS;AAAA,MACH,OAAAG;AAAA,MACA,aAAAE;AAAA,MACA,UAAAC;AAAA,IAAA;AAAA,EAEJ,CAAC,GAEKC,IAAgBR,EAAiB,CAAC;AAExC,MAAI,CAACD,KAAuBS;AAC1B,WACE,gBAAAC,EAACf,GAAA,EAAM,QAAO,SAAQ,OAAOc,EAAc,OAAO,WAAAlB,GAChD,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,MAAA,gBAAAF,EAACb,GAAA,EAAM,YAAc,YAAA,CAAY;AAAA,MAChCY,EAAc,YAAYA,EAAc,aAAaA,EAAc,eAClE,gBAAAC,EAACb,GAAA,EAAK,SAAQ,cAAa,MAAK,MAC7B,YAAc,SAAA,CACjB;AAAA,IAAA,EAAA,CAEJ,EAAA,CACF;AAIJ,QAAMgB,IAAYZ,EAAiB,IAAI,CAAAC,MAAWA,EAAQ,KAAK,GACzDY,IAAuBxB,KAAqBG,EAAE,iBAAiB;AAErE,SACE,gBAAAiB;AAAA,IAACf;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAOF,EAAE,uBAAuB,EAAE,OAAOL,EAAS,QAAQ;AAAA,MAC1D,WAAAG;AAAA,MAEA,UAAA,gBAAAoB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,QAAA,gBAAAF,EAACZ,GAAA,EAAc,OAAOe,EAAA,CAAW;AAAA,QAChCxB,KACC,gBAAAqB,EAAC,OAAA,EACC,UAAA,gBAAAA,EAACd,GAAA,EAAO,SAAQ,aAAY,SAASP,GAAqB,OAAOyB,GAC9D,UAAAA,EAAA,CACH,EAAA,CACF;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js

@@ -1,22 +1,21 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { useTranslation as p } from "react-i18next";
 import f from "classnames";
 import u from "./PayrollBlockerList.module.scss.js";
 import { useComponentContext as h } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { FlexItem as x, Flex as i } from "../../../Common/Flex/Flex.js";
+import { FlexItem as x, Flex as o } from "../../../Common/Flex/Flex.js";
 import "../../../../shared/constants.js";
-import "react";
-import { DataView as g } from "../../../Common/DataView/DataView.js";
-import { useDataView as y } from "../../../Common/DataView/useDataView.js";
+import { DataView as y } from "../../../Common/DataView/DataView.js";
+import { useDataView as g } from "../../../Common/DataView/useDataView.js";
 import { useI18n as b } from "../../../../i18n/I18n.js";
-function V({ blockers: l, className: a }) {
-  b("PayrollBlocker");
-  const { t: o } = p("PayrollBlocker"), { Button: c, Text: n, Heading: m } = h(), d = y({
-    data: l,
+function I({ blockers: i, className: s }) {
+  b("Payroll.PayrollBlocker");
+  const { t: l } = p("Payroll.PayrollBlocker"), { Button: c, Text: n, Heading: m } = h(), d = g({
+    data: i,
     columns: [
       {
-        title: o("blockerSectionLabel"),
-        render: (t) => /* @__PURE__ */ e(x, { flexGrow: 1, children: /* @__PURE__ */ s(i, { flexDirection: "column", gap: 8, children: [
+        title: l("blockerSectionLabel"),
+        render: (t) => /* @__PURE__ */ e(x, { flexGrow: 1, children: /* @__PURE__ */ a(o, { flexDirection: "column", gap: 8, children: [
           /* @__PURE__ */ e(n, { weight: "semibold", children: t.title }),
           /* @__PURE__ */ e(n, { variant: "supporting", children: t.description })
         ] }) })
@@ -25,17 +24,17 @@ function V({ blockers: l, className: a }) {
         title: "",
         render: (t) => {
           const r = t.action;
-          return r ? /* @__PURE__ */ e(i, { justifyContent: "flex-end", alignItems: "center", children: /* @__PURE__ */ e(c, { variant: "secondary", onClick: r.onClick, title: r.label, children: r.label }) }) : null;
+          return r ? /* @__PURE__ */ e(o, { justifyContent: "flex-end", alignItems: "center", children: /* @__PURE__ */ e(c, { variant: "secondary", onClick: r.onClick, title: r.label, children: r.label }) }) : null;
         }
       }
     ]
   });
-  return l.length === 0 ? null : /* @__PURE__ */ e("div", { className: f(u.root, a), children: /* @__PURE__ */ s(i, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ e(m, { as: "h2", styledAs: "h4", children: o("blockersListTitle") }),
-    /* @__PURE__ */ e(g, { ...d, label: o("blockersListTitle") })
+  return i.length === 0 ? null : /* @__PURE__ */ e("div", { className: f(u.root, s), children: /* @__PURE__ */ a(o, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ e(m, { as: "h2", styledAs: "h4", children: l("blockersListTitle") }),
+    /* @__PURE__ */ e(y, { ...d, label: l("blockersListTitle") })
   ] }) });
 }
 export {
-  V as PayrollBlockerList
+  I as PayrollBlockerList
 };
 //# sourceMappingURL=PayrollBlockerList.js.map

package/dist/components/Payroll/PayrollBlocker/components/PayrollBlockerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('PayrollBlocker')\n  const { t } = useTranslation('PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,gBAAgB;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,gBAAgB,GACvC,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}
+{"version":3,"file":"PayrollBlockerList.js","sources":["../../../../../src/components/Payroll/PayrollBlocker/components/PayrollBlockerList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport styles from './PayrollBlockerList.module.scss'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { Flex, FlexItem } from '@/components/Common'\nimport { DataView } from '@/components/Common/DataView/DataView'\nimport { useDataView } from '@/components/Common/DataView/useDataView'\nimport { useI18n } from '@/i18n'\n\nexport interface PayrollBlocker {\n  id: string\n  title: string\n  description: string\n  action?: {\n    label: string\n    onClick: () => void\n  }\n}\n\ninterface PayrollBlockerListProps {\n  blockers: PayrollBlocker[]\n  className?: string\n}\n\n/**\n * PayrollBlockerList - DataView-based component displaying payroll blockers\n * Shows each blocker with individual resolution buttons\n */\nexport function PayrollBlockerList({ blockers, className }: PayrollBlockerListProps) {\n  useI18n('Payroll.PayrollBlocker')\n  const { t } = useTranslation('Payroll.PayrollBlocker')\n  const { Button, Text, Heading } = useComponentContext()\n\n  const dataViewProps = useDataView({\n    data: blockers,\n    columns: [\n      {\n        title: t('blockerSectionLabel'),\n        render: blocker => (\n          <FlexItem flexGrow={1}>\n            <Flex flexDirection=\"column\" gap={8}>\n              <Text weight=\"semibold\">{blocker.title}</Text>\n              <Text variant=\"supporting\">{blocker.description}</Text>\n            </Flex>\n          </FlexItem>\n        ),\n      },\n      {\n        title: '',\n        render: blocker => {\n          // For presentational purposes, just show the primary action if it exists\n          const action = blocker.action\n\n          if (!action) {\n            return null\n          }\n\n          return (\n            <Flex justifyContent=\"flex-end\" alignItems=\"center\">\n              <Button variant=\"secondary\" onClick={action.onClick} title={action.label}>\n                {action.label}\n              </Button>\n            </Flex>\n          )\n        },\n      },\n    ],\n  })\n\n  if (blockers.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Heading as=\"h2\" styledAs=\"h4\">\n          {t('blockersListTitle')}\n        </Heading>\n\n        <DataView {...dataViewProps} label={t('blockersListTitle')} />\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollBlockerList","blockers","className","useI18n","t","useTranslation","Button","Text","Heading","useComponentContext","dataViewProps","useDataView","blocker","jsx","FlexItem","jsxs","Flex","action","classNames","styles","DataView"],"mappings":";;;;;;;;;;AA4BO,SAASA,EAAmB,EAAE,UAAAC,GAAU,WAAAC,KAAsC;AACnF,EAAAC,EAAQ,wBAAwB;AAChC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,wBAAwB,GAC/C,EAAE,QAAAC,GAAQ,MAAAC,GAAM,SAAAC,EAAA,IAAYC,EAAA,GAE5BC,IAAgBC,EAAY;AAAA,IAChC,MAAMV;AAAA,IACN,SAAS;AAAA,MACP;AAAA,QACE,OAAOG,EAAE,qBAAqB;AAAA,QAC9B,QAAQ,CAAAQ,MACN,gBAAAC,EAACC,GAAA,EAAS,UAAU,GAClB,UAAA,gBAAAC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,UAAA,gBAAAH,EAACN,GAAA,EAAK,QAAO,YAAY,UAAAK,EAAQ,OAAM;AAAA,UACvC,gBAAAC,EAACN,GAAA,EAAK,SAAQ,cAAc,YAAQ,YAAA,CAAY;AAAA,QAAA,EAAA,CAClD,EAAA,CACF;AAAA,MAAA;AAAA,MAGJ;AAAA,QACE,OAAO;AAAA,QACP,QAAQ,CAAAK,MAAW;AAEjB,gBAAMK,IAASL,EAAQ;AAEvB,iBAAKK,sBAKFD,GAAA,EAAK,gBAAe,YAAW,YAAW,UACzC,4BAACV,GAAA,EAAO,SAAQ,aAAY,SAASW,EAAO,SAAS,OAAOA,EAAO,OAChE,UAAAA,EAAO,OACV,EAAA,CACF,IARO;AAAA,QAUX;AAAA,MAAA;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAIhB,EAAS,WAAW,IACf,OAIP,gBAAAY,EAAC,OAAA,EAAI,WAAWK,EAAWC,EAAO,MAAMjB,CAAS,GAC/C,UAAA,gBAAAa,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAH,EAACL,KAAQ,IAAG,MAAK,UAAS,MACvB,UAAAJ,EAAE,mBAAmB,GACxB;AAAA,sBAECgB,GAAA,EAAU,GAAGV,GAAe,OAAON,EAAE,mBAAmB,EAAA,CAAG;AAAA,EAAA,EAAA,CAC9D,EAAA,CACF;AAEJ;"}

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

@@ -1,90 +1,96 @@
 import { jsx as g } from "react/jsx-runtime";
-import { useState as P, useMemo as H, useEffect as V } from "react";
-import { useEmployeesListSuspense as G } from "@gusto/embedded-api/react-query/employeesList";
-import { usePayrollsGetSuspense as K } from "@gusto/embedded-api/react-query/payrollsGet";
-import { usePayrollsCalculateMutation as j } from "@gusto/embedded-api/react-query/payrollsCalculate";
-import { PayrollProcessingRequestStatus as d } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
-import { useTranslation as W } from "react-i18next";
-import { usePayrollsUpdateMutation as v } from "@gusto/embedded-api/react-query/payrollsUpdate";
-import { usePreparedPayrollData as z } from "../usePreparedPayrollData.js";
-import { payrollSubmitHandler as J } from "../PayrollBlocker/payrollHelpers.js";
-import { PayrollConfigurationPresentation as Q } from "./PayrollConfigurationPresentation.js";
-import { BaseComponent as X } from "../../Base/Base.js";
-import { componentEvents as o } from "../../../shared/constants.js";
-import { useComponentDictionary as Z, useI18n as $ } from "../../../i18n/I18n.js";
-import { useBase as ee } from "../../Base/useBase.js";
-const te = (t) => t?.status === d.Calculating, se = (t) => t?.status === d.CalculateSuccess;
-function _e(t) {
-  return /* @__PURE__ */ g(X, { ...t, children: /* @__PURE__ */ g(ae, { ...t, children: t.children }) });
+import { useState as p, useMemo as W, useEffect as G } from "react";
+import { useEmployeesListSuspense as K } from "@gusto/embedded-api/react-query/employeesList";
+import { usePayrollsGetSuspense as j } from "@gusto/embedded-api/react-query/payrollsGet";
+import { usePayrollsCalculateMutation as v } from "@gusto/embedded-api/react-query/payrollsCalculate";
+import { PayrollProcessingRequestStatus as f } from "@gusto/embedded-api/models/components/payrollprocessingrequest";
+import { useTranslation as z } from "react-i18next";
+import { usePayrollsUpdateMutation as J } from "@gusto/embedded-api/react-query/payrollsUpdate";
+import { usePreparedPayrollData as Q } from "../usePreparedPayrollData.js";
+import { payrollSubmitHandler as X } from "../PayrollBlocker/payrollHelpers.js";
+import { PayrollConfigurationPresentation as Z } from "./PayrollConfigurationPresentation.js";
+import { BaseComponent as $ } from "../../Base/Base.js";
+import { componentEvents as l } from "../../../shared/constants.js";
+import { useComponentDictionary as ee, useI18n as ae } from "../../../i18n/I18n.js";
+import { useBase as te } from "../../Base/useBase.js";
+import { formatDateTimeWithTimezone as oe, formatDateNamedWeekdayShortPlusDate as se } from "../../../helpers/dateFormatting.js";
+import { useLocale as le } from "../../../contexts/LocaleProvider/useLocale.js";
+const re = (a) => a?.status === f.Calculating, ne = (a) => a?.status === f.CalculateSuccess;
+function xe(a) {
+  return /* @__PURE__ */ g($, { ...a, children: /* @__PURE__ */ g(ie, { ...a, children: a.children }) });
 }
-const ae = ({
-  onEvent: t,
+const ie = ({
+  onEvent: a,
   companyId: r,
-  payrollId: s,
-  dictionary: E,
-  alerts: R
+  payrollId: o,
+  dictionary: D,
+  alerts: E
 }) => {
-  Z("Payroll.PayrollConfiguration", E), $("Payroll.PayrollConfiguration");
-  const { t: f } = W("Payroll.PayrollConfiguration"), { baseSubmitHandler: h } = ee(), S = 10, [C, i] = P(1), [L, _] = P(S), [a, c] = P(!1), [w, m] = P([]), { data: u, isFetching: A } = G({
+  ee("Payroll.PayrollConfiguration", D), ae("Payroll.PayrollConfiguration");
+  const { t: i } = z("Payroll.PayrollConfiguration"), { baseSubmitHandler: h } = te(), { locale: L } = le(), R = 10, [C, c] = p(1), [S, _] = p(R), [s, u] = p(!1), [w, P] = p([]), { data: m, isFetching: N } = K({
     companyId: r,
-    payrollUuid: s,
+    payrollUuid: o,
     // get back list of employees to specific payroll
-    per: L,
+    per: S,
     page: C,
     sortBy: "name"
     // sort alphanumeric by employee last_names
-  }), U = H(() => u.showEmployees?.map((e) => e.uuid) || [], [u.showEmployees]), p = Number(u.httpMeta.response.headers.get("x-total-pages") ?? 1), O = {
+  }), A = W(() => m.showEmployees?.map((e) => e.uuid) || [], [m.showEmployees]), y = Number(m.httpMeta.response.headers.get("x-total-pages") ?? 1), U = {
     currentPage: C,
     handleFirstPage: () => {
-      i(1);
+      c(1);
     },
     handlePreviousPage: () => {
-      i((e) => Math.max(e - 1, 1));
+      c((e) => Math.max(e - 1, 1));
     },
     handleNextPage: () => {
-      i((e) => Math.min(e + 1, p));
+      c((e) => Math.min(e + 1, y));
     },
     handleLastPage: () => {
-      i(p);
+      c(y);
     },
     handleItemsPerPageChange: (e) => {
       _(e);
     },
-    totalPages: p,
-    isFetching: A,
-    itemsPerPage: L
-  }, { data: l } = K(
+    totalPages: y,
+    isFetching: N,
+    itemsPerPage: S
+  }, { data: t } = j(
     {
       companyId: r,
-      payrollId: s,
+      payrollId: o,
       include: ["taxes", "benefits", "deductions"]
     },
-    { refetchInterval: a ? 5e3 : !1 }
-  ), { mutateAsync: x } = j(), { mutateAsync: D, isPending: N } = v(), {
-    preparedPayroll: y,
-    paySchedule: Y,
+    { refetchInterval: s ? 5e3 : !1 }
+  ), { mutateAsync: O } = v(), { mutateAsync: x, isPending: Y } = J(), {
+    preparedPayroll: d,
+    paySchedule: b,
     isLoading: B,
-    handlePreparePayroll: b
-  } = z({
+    handlePreparePayroll: k
+  } = Q({
     companyId: r,
-    payrollId: s,
-    employeeUuids: U,
+    payrollId: o,
+    employeeUuids: A,
     sortBy: "last_name"
     // sort alphanumeric by employee last_names to match employees GET
   }), q = async () => {
-    m([]), await h({}, async () => {
-      const e = await J(async () => {
-        await x({
+    P([]), await h({}, async () => {
+      const e = await X(async () => {
+        await O({
           request: {
             companyId: r,
-            payrollId: s
+            payrollId: o
           }
-        }), c(!0);
+        }), u(!0);
       });
-      !e.success && e.blockers.length > 0 && m(e.blockers);
+      !e.success && e.blockers.length > 0 && P(e.blockers);
     });
   }, F = (e) => {
-    t(o.RUN_PAYROLL_EMPLOYEE_EDIT, { employeeId: e.uuid });
+    a(l.RUN_PAYROLL_EMPLOYEE_EDIT, {
+      employeeId: e.uuid,
+      firstName: e.firstName,
+      lastName: e.lastName
+    });
   }, M = ({
     paymentMethod: e,
     ...n
@@ -92,14 +98,14 @@ const ae = ({
     ...n,
     ...e && e !== "Historical" ? { paymentMethod: e } : {},
     memo: n.memo || void 0
-  }), k = async (e) => {
-    t(o.RUN_PAYROLL_EMPLOYEE_SKIP, {
+  }), T = async (e) => {
+    a(l.RUN_PAYROLL_EMPLOYEE_SKIP, {
       employeeId: e.employeeUuid
     }), await h({}, async () => {
-      const n = M(e), T = await D({
+      const n = M(e), V = await x({
         request: {
           companyId: r,
-          payrollId: s,
+          payrollId: o,
           payrollUpdate: {
             employeeCompensations: [
               { ...n, excluded: !n.excluded }
@@ -107,46 +113,55 @@ const ae = ({
           }
         }
       });
-      t(o.RUN_PAYROLL_EMPLOYEE_SAVED, {
-        payrollPrepared: T.payrollPrepared
-      }), await b();
+      a(l.RUN_PAYROLL_EMPLOYEE_SAVED, {
+        payrollPrepared: V.payrollPrepared
+      }), await k();
     });
   }, I = () => {
-    t(o.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
+    a(l.RUN_PAYROLL_BLOCKERS_VIEW_ALL);
   };
-  return V(() => {
-    te(l.payrollShow?.processingRequest) && !a && c(!0), a && se(l.payrollShow?.processingRequest) && (t(o.RUN_PAYROLL_CALCULATED, {
-      payrollId: s,
-      alert: { type: "success", title: f("alerts.progressSaved") }
-    }), m([]), c(!1)), a && l.payrollShow?.processingRequest?.status === d.ProcessingFailed && (t(o.RUN_PAYROLL_PROCESSING_FAILED), c(!1));
+  G(() => {
+    re(t.payrollShow?.processingRequest) && !s && u(!0), s && ne(t.payrollShow?.processingRequest) && (a(l.RUN_PAYROLL_CALCULATED, {
+      payrollId: o,
+      alert: { type: "success", title: i("alerts.progressSaved") }
+    }), P([]), u(!1)), s && t.payrollShow?.processingRequest?.status === f.ProcessingFailed && (a(l.RUN_PAYROLL_PROCESSING_FAILED), u(!1));
   }, [
-    l.payrollShow?.processingRequest,
-    a,
-    t,
-    f,
+    t.payrollShow?.processingRequest,
     s,
-    l.payrollShow?.calculatedAt
-  ]), /* @__PURE__ */ g(
-    Q,
+    a,
+    i,
+    o,
+    t.payrollShow?.calculatedAt
+  ]);
+  const H = t.payrollShow ? {
+    label: i("alerts.directDepositDeadline", {
+      payDate: se(t.payrollShow.checkDate, L),
+      ...oe(t.payrollShow.payrollDeadline, L)
+    }),
+    content: i("alerts.directDepositDeadlineText")
+  } : void 0;
+  return /* @__PURE__ */ g(
+    Z,
     {
       onCalculatePayroll: q,
       onEdit: F,
-      onToggleExclude: k,
+      onToggleExclude: T,
       onViewBlockers: I,
-      employeeCompensations: y?.employeeCompensations || [],
-      employeeDetails: u.showEmployees || [],
-      payPeriod: y?.payPeriod,
-      paySchedule: Y,
-      isOffCycle: y?.offCycle,
-      alerts: R,
-      isPending: a || B || N,
+      employeeCompensations: d?.employeeCompensations || [],
+      employeeDetails: m.showEmployees || [],
+      payPeriod: d?.payPeriod,
+      paySchedule: b,
+      isOffCycle: d?.offCycle,
+      alerts: E,
+      payrollDeadlineNotice: H,
+      isPending: s || B || Y,
       payrollBlockers: w,
-      pagination: O
+      pagination: U
     }
   );
 };
 export {
-  _e as PayrollConfiguration,
-  ae as Root
+  xe as PayrollConfiguration,
+  ie as Root
 };
 //# sourceMappingURL=PayrollConfiguration.js.map