@gusto/embedded-react-sdk 0.55.8 → 0.56.0

package/dist/components/Payroll/PayrollOverview/useSubmissionPoll.js

@@ -1,46 +1,57 @@
-import { useRef as d, useCallback as S } from "react";
-import { PAYROLL_PROCESSING_STATUS as a } from "../../../shared/constants.js";
-import { usePollingTask as y } from "../../../hooks/usePollingTask/usePollingTask.js";
-const b = (r) => r === a.submitting, c = (r, t) => r === !0 || t === a.submit_success, m = (r, t) => {
-  const s = r.payrollShow, n = s?.processingRequest?.status, o = b(n);
-  return o && t && (t.sawSubmitting = !0), n === a.processing_failed ? { done: !0, value: { type: "failed", payroll: s } } : (t?.sawSubmitting === !0 || t?.baseline != null && (s?.processed !== t.baseline.processed || n !== t.baseline.status)) && c(s?.processed, n) ? { done: !0, value: { type: "processed", payroll: s } } : o ? { done: !1 } : { done: !0, value: { type: "loaded" } };
+import { useRef as m, useCallback as y } from "react";
+import { PAYROLL_PROCESSING_STATUS as n } from "../../../shared/constants.js";
+import { usePollingTask as S, isNonRetryablePollError as g } from "../../../hooks/usePollingTask/usePollingTask.js";
+import { useObservability as P } from "../../../contexts/ObservabilityProvider/useObservability.js";
+import { normalizeToSDKError as w } from "../../../types/sdkError.js";
+const v = "Payroll.PayrollOverview", E = (e) => e === n.submitting, h = (e) => e?.baseline != null || e?.sawSubmitting === !0, c = (e, s) => e === !0 || s === n.submit_success, N = (e) => {
+  const s = e?.payrollShow;
+  return c(s?.processed, s?.processingRequest?.status) ? { type: "processed", payroll: s } : { type: "failed", payroll: s };
+}, O = (e, s) => {
+  if (!e.success)
+    return g(e.error) ? { status: "error", error: e.error } : { status: "polling" };
+  const r = e.data.payrollShow, o = r?.processingRequest?.status, i = E(o);
+  return i && s && (s.sawSubmitting = !0), o === n.processing_failed ? { status: "done", value: { type: "failed", payroll: r } } : (s?.sawSubmitting === !0 || s?.baseline != null && (r?.processed !== s.baseline.processed || o !== s.baseline.status)) && c(r?.processed, o) ? { status: "done", value: { type: "processed", payroll: r } } : i ? { status: "polling" } : s?.baseline != null ? { status: "polling" } : { status: "done", value: { type: "loaded" } };
 };
-function R({
-  refetch: r,
-  onProcessed: t,
-  onProcessingFailed: s
+function C({
+  refetch: e,
+  onProcessed: s,
+  onProcessingFailed: r,
+  onError: o
 }) {
-  const n = d(null), o = async () => {
-    const e = await r();
-    if (e.status !== "success") throw e.error ?? new Error("Payroll refetch failed");
-    return e.data;
-  }, l = (e) => {
-    if (e.type === "failed") {
-      s(e.payroll);
+  const i = m(null), { observability: a } = P(), p = async () => {
+    const t = await e();
+    if (t.status !== "success") throw t.error ?? new Error("Payroll refetch failed");
+    return t.data;
+  }, l = (t) => {
+    if (t.type === "failed") {
+      r(t.payroll);
       return;
     }
-    e.type === "processed" && t(e.payroll);
-  }, p = (e) => {
-    const i = e?.payrollShow;
-    if (c(i?.processed, i?.processingRequest?.status)) {
-      t(i);
-      return;
-    }
-    s(i);
-  }, { start: u, isPolling: f } = y({
-    fetch: o,
-    evaluate: (e) => m(e, n.current),
+    t.type === "processed" && s(t.payroll);
+  }, f = (t) => {
+    l(N(t));
+  }, { start: u, isPolling: d } = S({
+    fetch: p,
+    evaluate: (t) => O(t, i.current),
     onDone: l,
-    onDeadline: p
+    onError: (t) => {
+      const b = w(t);
+      a?.onError?.({
+        ...b,
+        timestamp: Date.now(),
+        componentName: v
+      }), h(i.current) && o();
+    },
+    onDeadline: f
   });
-  return { start: S(
-    (e) => {
-      n.current = e, u();
+  return { start: y(
+    (t) => {
+      i.current = t, u();
     },
     [u]
-  ), isPolling: f };
+  ), isPolling: d };
 }
 export {
-  R as useSubmissionPoll
+  C as useSubmissionPoll
 };
 //# sourceMappingURL=useSubmissionPoll.js.map

package/dist/components/Payroll/PayrollOverview/useSubmissionPoll.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSubmissionPoll.js","sources":["../../../../src/components/Payroll/PayrollOverview/useSubmissionPoll.ts"],"sourcesContent":["import { useCallback, useRef } from 'react'\nimport type {\n  PayrollsGetQueryData,\n  PayrollsGetQueryError,\n} from '@gusto/embedded-api/react-query/payrollsGet'\nimport type { QueryObserverResult } from '@tanstack/react-query'\nimport { PAYROLL_PROCESSING_STATUS } from '@/shared/constants'\nimport { usePollingTask, type PollTickResult } from '@/hooks/usePollingTask/usePollingTask'\n\n/** @internal */\nexport type PayrollShow = NonNullable<PayrollsGetQueryData['payrollShow']>\n\ntype SubmissionOutcome =\n  | { type: 'processed'; payroll: PayrollShow | undefined }\n  | { type: 'failed'; payroll: PayrollShow | undefined }\n  | { type: 'loaded' }\n\n/**\n * Per-run state for the submission poll. `baseline` is only known when the run starts from a\n * click on Submit, where the pre-submit render already has data to snapshot. A run started\n * without one (e.g. to guard the initial read on mount) relies on `sawSubmitting` alone.\n *\n * @internal\n */\nexport interface SubmissionPollRun {\n  baseline: { processed: boolean; status: string | undefined } | null\n  sawSubmitting: boolean\n}\n\nconst isSubmittingStatus = (status: string | undefined) =>\n  status === PAYROLL_PROCESSING_STATUS.submitting\n\nconst isProcessedStatus = (processed: boolean | undefined, status: string | undefined) =>\n  processed === true || status === PAYROLL_PROCESSING_STATUS.submit_success\n\nconst evaluateSubmissionOutcome = (\n  queryData: PayrollsGetQueryData,\n  run: SubmissionPollRun | null,\n): PollTickResult<SubmissionOutcome> => {\n  const payroll = queryData.payrollShow\n  const submissionStatus = payroll?.processingRequest?.status\n  const isSubmitting = isSubmittingStatus(submissionStatus)\n\n  if (isSubmitting && run) run.sawSubmitting = true\n\n  if (submissionStatus === PAYROLL_PROCESSING_STATUS.processing_failed) {\n    return { done: true, value: { type: 'failed', payroll } }\n  }\n\n  // Checked ahead of the `isSubmitting` re-poll below: `processed` can flip true while\n  // `processingRequest.status` still reads `submitting` (a real API race), so a transition must\n  // be detected on `processed` alone, not gated on status having already moved on.\n  const isNewTransition =\n    run?.sawSubmitting === true ||\n    (run?.baseline != null &&\n      (payroll?.processed !== run.baseline.processed || submissionStatus !== run.baseline.status))\n\n  if (isNewTransition && isProcessedStatus(payroll?.processed, submissionStatus)) {\n    return { done: true, value: { type: 'processed', payroll } }\n  }\n\n  if (isSubmitting) return { done: false }\n\n  return { done: true, value: { type: 'loaded' } }\n}\n\n/** @internal */\nexport interface UseSubmissionPollOptions {\n  /**\n   * The render-driving payroll query's own `refetch`, reused so the poll's reads land on the\n   * same query the component observes rather than racing a second, independently-built one.\n   */\n  refetch: () => Promise<QueryObserverResult<PayrollsGetQueryData, PayrollsGetQueryError>>\n  onProcessed: (payroll: PayrollShow | undefined) => void\n  onProcessingFailed: (payroll: PayrollShow | undefined) => void\n}\n\n/** @internal */\nexport interface SubmissionPoll {\n  start: (run: SubmissionPollRun) => void\n  isPolling: boolean\n}\n\n/**\n * Polls a payroll until its submission reaches a terminal state, via {@link usePollingTask}.\n *\n * @internal\n */\nexport function useSubmissionPoll({\n  refetch,\n  onProcessed,\n  onProcessingFailed,\n}: UseSubmissionPollOptions): SubmissionPoll {\n  const pollRunRef = useRef<SubmissionPollRun | null>(null)\n\n  const fetchPayroll = async (): Promise<PayrollsGetQueryData> => {\n    const result = await refetch()\n    if (result.status !== 'success') throw result.error ?? new Error('Payroll refetch failed')\n    return result.data\n  }\n\n  const handleDone = (outcome: SubmissionOutcome) => {\n    if (outcome.type === 'failed') {\n      onProcessingFailed(outcome.payroll)\n      return\n    }\n    if (outcome.type === 'processed') {\n      onProcessed(outcome.payroll)\n    }\n  }\n\n  // Verify against the server before reporting failure, same rationale as\n  // PayrollConfiguration's calculation poll: a success that arrived while we were waiting must\n  // never be reported as a failure.\n  const handleDeadline = (lastData: PayrollsGetQueryData | null) => {\n    const payroll = lastData?.payrollShow\n    if (isProcessedStatus(payroll?.processed, payroll?.processingRequest?.status)) {\n      onProcessed(payroll)\n      return\n    }\n    onProcessingFailed(payroll)\n  }\n\n  const { start: startPoll, isPolling } = usePollingTask<PayrollsGetQueryData, SubmissionOutcome>({\n    fetch: fetchPayroll,\n    evaluate: queryData => evaluateSubmissionOutcome(queryData, pollRunRef.current),\n    onDone: handleDone,\n    onDeadline: handleDeadline,\n  })\n\n  const start = useCallback(\n    (run: SubmissionPollRun) => {\n      pollRunRef.current = run\n      startPoll()\n    },\n    [startPoll],\n  )\n\n  return { start, isPolling }\n}\n"],"names":["isSubmittingStatus","status","PAYROLL_PROCESSING_STATUS","isProcessedStatus","processed","evaluateSubmissionOutcome","queryData","run","payroll","submissionStatus","isSubmitting","useSubmissionPoll","refetch","onProcessed","onProcessingFailed","pollRunRef","useRef","fetchPayroll","result","handleDone","outcome","handleDeadline","lastData","startPoll","isPolling","usePollingTask","useCallback"],"mappings":";;;AA6BA,MAAMA,IAAqB,CAACC,MAC1BA,MAAWC,EAA0B,YAEjCC,IAAoB,CAACC,GAAgCH,MACzDG,MAAc,MAAQH,MAAWC,EAA0B,gBAEvDG,IAA4B,CAChCC,GACAC,MACsC;AACtC,QAAMC,IAAUF,EAAU,aACpBG,IAAmBD,GAAS,mBAAmB,QAC/CE,IAAeV,EAAmBS,CAAgB;AAIxD,SAFIC,KAAgBH,MAAKA,EAAI,gBAAgB,KAEzCE,MAAqBP,EAA0B,oBAC1C,EAAE,MAAM,IAAM,OAAO,EAAE,MAAM,UAAU,SAAAM,IAAQ,KAOtDD,GAAK,kBAAkB,MACtBA,GAAK,YAAY,SACfC,GAAS,cAAcD,EAAI,SAAS,aAAaE,MAAqBF,EAAI,SAAS,YAEjEJ,EAAkBK,GAAS,WAAWC,CAAgB,IACpE,EAAE,MAAM,IAAM,OAAO,EAAE,MAAM,aAAa,SAAAD,IAAQ,IAGvDE,IAAqB,EAAE,MAAM,GAAA,IAE1B,EAAE,MAAM,IAAM,OAAO,EAAE,MAAM,WAAS;AAC/C;AAwBO,SAASC,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAaC,EAAiC,IAAI,GAElDC,IAAe,YAA2C;AAC9D,UAAMC,IAAS,MAAMN,EAAA;AACrB,QAAIM,EAAO,WAAW,UAAW,OAAMA,EAAO,SAAS,IAAI,MAAM,wBAAwB;AACzF,WAAOA,EAAO;AAAA,EAChB,GAEMC,IAAa,CAACC,MAA+B;AACjD,QAAIA,EAAQ,SAAS,UAAU;AAC7B,MAAAN,EAAmBM,EAAQ,OAAO;AAClC;AAAA,IACF;AACA,IAAIA,EAAQ,SAAS,eACnBP,EAAYO,EAAQ,OAAO;AAAA,EAE/B,GAKMC,IAAiB,CAACC,MAA0C;AAChE,UAAMd,IAAUc,GAAU;AAC1B,QAAInB,EAAkBK,GAAS,WAAWA,GAAS,mBAAmB,MAAM,GAAG;AAC7E,MAAAK,EAAYL,CAAO;AACnB;AAAA,IACF;AACA,IAAAM,EAAmBN,CAAO;AAAA,EAC5B,GAEM,EAAE,OAAOe,GAAW,WAAAC,EAAA,IAAcC,EAAwD;AAAA,IAC9F,OAAOR;AAAA,IACP,UAAU,CAAAX,MAAaD,EAA0BC,GAAWS,EAAW,OAAO;AAAA,IAC9E,QAAQI;AAAA,IACR,YAAYE;AAAA,EAAA,CACb;AAUD,SAAO,EAAE,OARKK;AAAA,IACZ,CAACnB,MAA2B;AAC1B,MAAAQ,EAAW,UAAUR,GACrBgB,EAAA;AAAA,IACF;AAAA,IACA,CAACA,CAAS;AAAA,EAAA,GAGI,WAAAC,EAAA;AAClB;"}
+{"version":3,"file":"useSubmissionPoll.js","sources":["../../../../src/components/Payroll/PayrollOverview/useSubmissionPoll.ts"],"sourcesContent":["import { useCallback, useRef } from 'react'\nimport type {\n  PayrollsGetQueryData,\n  PayrollsGetQueryError,\n} from '@gusto/embedded-api/react-query/payrollsGet'\nimport type { QueryObserverResult } from '@tanstack/react-query'\nimport { PAYROLL_PROCESSING_STATUS } from '@/shared/constants'\nimport {\n  usePollingTask,\n  isNonRetryablePollError,\n  type PollReadOutcome,\n  type PollTickResult,\n} from '@/hooks/usePollingTask/usePollingTask'\nimport { useObservability } from '@/contexts/ObservabilityProvider/useObservability'\nimport { normalizeToSDKError } from '@/types/sdkError'\n\nconst COMPONENT_NAME = 'Payroll.PayrollOverview'\n\n/** @internal */\nexport type PayrollShow = NonNullable<PayrollsGetQueryData['payrollShow']>\n\ntype SubmissionOutcome =\n  | { type: 'processed'; payroll: PayrollShow | undefined }\n  | { type: 'failed'; payroll: PayrollShow | undefined }\n  | { type: 'loaded' }\n\n/**\n * Per-run state for the submission poll. `baseline` is only known when the run starts from a\n * click on Submit, where the pre-submit render already has data to snapshot. A run started\n * without one (e.g. to guard the initial read on mount) relies on `sawSubmitting` alone.\n *\n * @internal\n */\nexport interface SubmissionPollRun {\n  baseline: { processed: boolean; status: string | undefined } | null\n  sawSubmitting: boolean\n}\n\nconst isSubmittingStatus = (status: string | undefined) =>\n  status === PAYROLL_PROCESSING_STATUS.submitting\n\n// A run only counts as tracking a real submission if it started from a Submit click (baseline\n// set) or has observed a `submitting` status mid-run -- the baseline-less mount poll that never\n// saw either is just guarding the initial render, not watching a submission.\nconst isTrackedSubmission = (run: SubmissionPollRun | null) =>\n  run?.baseline != null || run?.sawSubmitting === true\n\nconst isProcessedStatus = (processed: boolean | undefined, status: string | undefined) =>\n  processed === true || status === PAYROLL_PROCESSING_STATUS.submit_success\n\n// Verify against the last-known data before reporting failure: a success that already landed\n// on the server must never be reported as a failure just because the deadline hit first.\nconst verifiedSubmissionOutcome = (lastData: PayrollsGetQueryData | null): SubmissionOutcome => {\n  const payroll = lastData?.payrollShow\n  if (isProcessedStatus(payroll?.processed, payroll?.processingRequest?.status)) {\n    return { type: 'processed', payroll }\n  }\n  return { type: 'failed', payroll }\n}\n\nconst evaluateSubmissionOutcome = (\n  outcome: PollReadOutcome<PayrollsGetQueryData>,\n  run: SubmissionPollRun | null,\n): PollTickResult<SubmissionOutcome> => {\n  if (!outcome.success) {\n    return isNonRetryablePollError(outcome.error)\n      ? { status: 'error', error: outcome.error }\n      : { status: 'polling' }\n  }\n\n  const payroll = outcome.data.payrollShow\n  const submissionStatus = payroll?.processingRequest?.status\n  const isSubmitting = isSubmittingStatus(submissionStatus)\n\n  if (isSubmitting && run) run.sawSubmitting = true\n\n  if (submissionStatus === PAYROLL_PROCESSING_STATUS.processing_failed) {\n    return { status: 'done', value: { type: 'failed', payroll } }\n  }\n\n  // Checked ahead of the `isSubmitting` re-poll below: `processed` can flip true while\n  // `processingRequest.status` still reads `submitting` (a real API race), so a transition must\n  // be detected on `processed` alone, not gated on status having already moved on.\n  const isNewTransition =\n    run?.sawSubmitting === true ||\n    (run?.baseline != null &&\n      (payroll?.processed !== run.baseline.processed || submissionStatus !== run.baseline.status))\n\n  if (isNewTransition && isProcessedStatus(payroll?.processed, submissionStatus)) {\n    return { status: 'done', value: { type: 'processed', payroll } }\n  }\n\n  if (isSubmitting) return { status: 'polling' }\n\n  // A baseline means Submit was just clicked, so an inconclusive read likely means the async\n  // job hasn't started yet -- keep polling. The baseline-less mount poll is exempt on purpose:\n  // it must not treat an already-settled payroll as a fresh transition.\n  if (run?.baseline != null) return { status: 'polling' }\n\n  return { status: 'done', value: { type: 'loaded' } }\n}\n\n/** @internal */\nexport interface UseSubmissionPollOptions {\n  /**\n   * The render-driving payroll query's own `refetch`, reused so the poll's reads land on the\n   * same query the component observes rather than racing a second, independently-built one.\n   */\n  refetch: () => Promise<QueryObserverResult<PayrollsGetQueryData, PayrollsGetQueryError>>\n  onProcessed: (payroll: PayrollShow | undefined) => void\n  onProcessingFailed: (payroll: PayrollShow | undefined) => void\n  /**\n   * Called when the poll gives up on a non-retryable read error, but only for a run that was\n   * actually tracking a submission (`baseline` set, or a `submitting` status observed mid-run).\n   * A baseline-less mount poll that never saw `submitting` swallows the error here -- it was only\n   * guarding the initial render, not watching a real submission, so surfacing it as a processing\n   * failure would be a false failure. The raw error is reported to observability by this hook\n   * either way.\n   */\n  onError: () => void\n}\n\n/** @internal */\nexport interface SubmissionPoll {\n  start: (run: SubmissionPollRun) => void\n  isPolling: boolean\n}\n\n/**\n * Polls a payroll until its submission reaches a terminal state, via {@link usePollingTask}.\n *\n * @internal\n */\nexport function useSubmissionPoll({\n  refetch,\n  onProcessed,\n  onProcessingFailed,\n  onError,\n}: UseSubmissionPollOptions): SubmissionPoll {\n  const pollRunRef = useRef<SubmissionPollRun | null>(null)\n  const { observability } = useObservability()\n\n  const fetchPayroll = async (): Promise<PayrollsGetQueryData> => {\n    const result = await refetch()\n    if (result.status !== 'success') throw result.error ?? new Error('Payroll refetch failed')\n    return result.data\n  }\n\n  const handleDone = (outcome: SubmissionOutcome) => {\n    if (outcome.type === 'failed') {\n      onProcessingFailed(outcome.payroll)\n      return\n    }\n    if (outcome.type === 'processed') {\n      onProcessed(outcome.payroll)\n    }\n  }\n\n  const handleDeadline = (lastData: PayrollsGetQueryData | null) => {\n    handleDone(verifiedSubmissionOutcome(lastData))\n  }\n\n  const { start: startPoll, isPolling } = usePollingTask<PayrollsGetQueryData, SubmissionOutcome>({\n    fetch: fetchPayroll,\n    evaluate: outcome => evaluateSubmissionOutcome(outcome, pollRunRef.current),\n    onDone: handleDone,\n    onError: error => {\n      const sdkError = normalizeToSDKError(error)\n      observability?.onError?.({\n        ...sdkError,\n        timestamp: Date.now(),\n        componentName: COMPONENT_NAME,\n      })\n      // Don't emit a processing failed error if we never observed this payroll\n      // be submitted; this could just be a load issue\n      if (isTrackedSubmission(pollRunRef.current)) {\n        onError()\n      }\n    },\n    onDeadline: handleDeadline,\n  })\n\n  const start = useCallback(\n    (run: SubmissionPollRun) => {\n      pollRunRef.current = run\n      startPoll()\n    },\n    [startPoll],\n  )\n\n  return { start, isPolling }\n}\n"],"names":["COMPONENT_NAME","isSubmittingStatus","status","PAYROLL_PROCESSING_STATUS","isTrackedSubmission","run","isProcessedStatus","processed","verifiedSubmissionOutcome","lastData","payroll","evaluateSubmissionOutcome","outcome","isNonRetryablePollError","submissionStatus","isSubmitting","useSubmissionPoll","refetch","onProcessed","onProcessingFailed","onError","pollRunRef","useRef","observability","useObservability","fetchPayroll","result","handleDone","handleDeadline","startPoll","isPolling","usePollingTask","error","sdkError","normalizeToSDKError","useCallback"],"mappings":";;;;;AAgBA,MAAMA,IAAiB,2BAsBjBC,IAAqB,CAACC,MAC1BA,MAAWC,EAA0B,YAKjCC,IAAsB,CAACC,MAC3BA,GAAK,YAAY,QAAQA,GAAK,kBAAkB,IAE5CC,IAAoB,CAACC,GAAgCL,MACzDK,MAAc,MAAQL,MAAWC,EAA0B,gBAIvDK,IAA4B,CAACC,MAA6D;AAC9F,QAAMC,IAAUD,GAAU;AAC1B,SAAIH,EAAkBI,GAAS,WAAWA,GAAS,mBAAmB,MAAM,IACnE,EAAE,MAAM,aAAa,SAAAA,EAAA,IAEvB,EAAE,MAAM,UAAU,SAAAA,EAAA;AAC3B,GAEMC,IAA4B,CAChCC,GACAP,MACsC;AACtC,MAAI,CAACO,EAAQ;AACX,WAAOC,EAAwBD,EAAQ,KAAK,IACxC,EAAE,QAAQ,SAAS,OAAOA,EAAQ,MAAA,IAClC,EAAE,QAAQ,UAAA;AAGhB,QAAMF,IAAUE,EAAQ,KAAK,aACvBE,IAAmBJ,GAAS,mBAAmB,QAC/CK,IAAed,EAAmBa,CAAgB;AAIxD,SAFIC,KAAgBV,MAAKA,EAAI,gBAAgB,KAEzCS,MAAqBX,EAA0B,oBAC1C,EAAE,QAAQ,QAAQ,OAAO,EAAE,MAAM,UAAU,SAAAO,IAAQ,KAO1DL,GAAK,kBAAkB,MACtBA,GAAK,YAAY,SACfK,GAAS,cAAcL,EAAI,SAAS,aAAaS,MAAqBT,EAAI,SAAS,YAEjEC,EAAkBI,GAAS,WAAWI,CAAgB,IACpE,EAAE,QAAQ,QAAQ,OAAO,EAAE,MAAM,aAAa,SAAAJ,IAAQ,IAG3DK,IAAqB,EAAE,QAAQ,UAAA,IAK/BV,GAAK,YAAY,OAAa,EAAE,QAAQ,UAAA,IAErC,EAAE,QAAQ,QAAQ,OAAO,EAAE,MAAM,WAAS;AACnD;AAiCO,SAASW,EAAkB;AAAA,EAChC,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,SAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAaC,EAAiC,IAAI,GAClD,EAAE,eAAAC,EAAA,IAAkBC,EAAA,GAEpBC,IAAe,YAA2C;AAC9D,UAAMC,IAAS,MAAMT,EAAA;AACrB,QAAIS,EAAO,WAAW,UAAW,OAAMA,EAAO,SAAS,IAAI,MAAM,wBAAwB;AACzF,WAAOA,EAAO;AAAA,EAChB,GAEMC,IAAa,CAACf,MAA+B;AACjD,QAAIA,EAAQ,SAAS,UAAU;AAC7B,MAAAO,EAAmBP,EAAQ,OAAO;AAClC;AAAA,IACF;AACA,IAAIA,EAAQ,SAAS,eACnBM,EAAYN,EAAQ,OAAO;AAAA,EAE/B,GAEMgB,IAAiB,CAACnB,MAA0C;AAChE,IAAAkB,EAAWnB,EAA0BC,CAAQ,CAAC;AAAA,EAChD,GAEM,EAAE,OAAOoB,GAAW,WAAAC,EAAA,IAAcC,EAAwD;AAAA,IAC9F,OAAON;AAAA,IACP,UAAU,CAAAb,MAAWD,EAA0BC,GAASS,EAAW,OAAO;AAAA,IAC1E,QAAQM;AAAA,IACR,SAAS,CAAAK,MAAS;AAChB,YAAMC,IAAWC,EAAoBF,CAAK;AAC1C,MAAAT,GAAe,UAAU;AAAA,QACvB,GAAGU;AAAA,QACH,WAAW,KAAK,IAAA;AAAA,QAChB,eAAejC;AAAA,MAAA,CAChB,GAGGI,EAAoBiB,EAAW,OAAO,KACxCD,EAAA;AAAA,IAEJ;AAAA,IACA,YAAYQ;AAAA,EAAA,CACb;AAUD,SAAO,EAAE,OARKO;AAAA,IACZ,CAAC9B,MAA2B;AAC1B,MAAAgB,EAAW,UAAUhB,GACrBwB,EAAA;AAAA,IACF;AAAA,IACA,CAACA,CAAS;AAAA,EAAA,GAGI,WAAAC,EAAA;AAClB;"}

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.js

@@ -11,64 +11,64 @@ import E from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js
 import V from "../../../assets/icons/receipt-check.svg.js";
 import { DataTable as h } from "../../Common/DataView/DataTable/DataTable.js";
 import { DataView as G } from "../../Common/DataView/DataView.js";
-const te = ({
-  className: x,
-  receiptData: o,
+const oe = ({
+  className: g,
+  receiptData: t,
   withReimbursements: u = !0
 }) => {
-  const b = A(), { Heading: y, Text: c, Link: g } = b;
+  const b = A(), { Heading: y, Text: c, Link: x } = b;
   H("Payroll.PayrollReceipts");
-  const { t: e } = M("Payroll.PayrollReceipts"), f = z(null), p = !E({ ref: f }).includes("small"), k = (t) => `${t.employeeFirstName || ""} ${t.employeeLastName || ""}`.trim(), F = () => (o.employeeCompensations || []).reduce(
-    (t, a) => t + parseFloat(a.childSupportGarnishment || "0"),
+  const { t: e } = M("Payroll.PayrollReceipts"), f = z(null), p = !E({ ref: f }).includes("small"), k = (o) => `${o.employeeFirstName || ""} ${o.employeeLastName || ""}`.trim(), F = () => (t.employeeCompensations || []).reduce(
+    (o, a) => o + parseFloat(a.childSupportGarnishment || "0"),
     0
-  ), N = () => (o.employeeCompensations || []).reduce(
-    (t, a) => t + parseFloat(a.totalReimbursement || "0"),
+  ), N = () => (t.employeeCompensations || []).reduce(
+    (o, a) => o + parseFloat(a.totalReimbursement || "0"),
     0
-  ), C = () => (o.employeeCompensations || []).reduce(
-    (t, a) => t + parseFloat(a.netPay || "0"),
+  ), C = () => (t.employeeCompensations || []).reduce(
+    (o, a) => o + parseFloat(a.netPay || "0"),
     0
-  ), v = () => (o.employeeCompensations || []).reduce(
-    (t, a) => t + parseFloat(a.totalTax || "0"),
+  ), v = () => (t.employeeCompensations || []).reduce(
+    (o, a) => o + parseFloat(a.totalTax || "0"),
     0
   ), P = [
     {
       label: e("breakdown.directDeposits"),
-      amount: parseFloat(o.totals?.netPayDebit || "0")
+      amount: parseFloat(t.totals?.netPayDebit || "0")
     },
     ...u ? [
       {
         label: e("breakdown.reimbursements"),
-        amount: parseFloat(o.totals?.reimbursementDebit || "0")
+        amount: parseFloat(t.totals?.reimbursementDebit || "0")
       }
     ] : [],
     {
       label: e("breakdown.garnishments"),
-      amount: parseFloat(o.totals?.childSupportDebit || "0")
+      amount: parseFloat(t.totals?.childSupportDebit || "0")
     },
-    { label: e("breakdown.taxes"), amount: parseFloat(o.totals?.taxDebit || "0") }
+    { label: e("breakdown.taxes"), amount: parseFloat(t.totals?.taxDebit || "0") }
   ], T = [
     {
       label: e("receipt.receiptId"),
-      value: o.payrollUuid || ""
+      value: t.payrollUuid || ""
     },
     {
       label: e("receipt.from"),
-      value: o.nameOfSender || ""
+      value: t.nameOfSender || ""
     },
     {
       label: e("receipt.to"),
-      value: o.nameOfRecipient || "Payroll Recipients"
+      value: t.nameOfRecipient || "Payroll Recipients"
     },
     {
       label: e("receipt.debitDate"),
-      value: o.debitDate || ""
+      value: t.debitDate || ""
     }
   ], w = () => /* @__PURE__ */ n("div", { className: d(r.receiptHeader, p && r.receiptHeaderMobile), children: /* @__PURE__ */ m(i, { flexDirection: "column", gap: 24, children: [
     /* @__PURE__ */ m(i, { flexDirection: "column", alignItems: "center", gap: 16, children: [
       /* @__PURE__ */ n("div", { className: r.receiptIcon, children: /* @__PURE__ */ n(V, { className: r.checkmarkIcon }) }),
       /* @__PURE__ */ m(i, { flexDirection: "column", alignItems: "center", gap: 8, children: [
         /* @__PURE__ */ n(c, { size: "sm", variant: "supporting", children: e("receipt.totalLabel") }),
-        /* @__PURE__ */ n(y, { as: "h1", styledAs: "h2", className: r.totalAmount, children: s(parseFloat(o.totals?.companyDebit || "0")) })
+        /* @__PURE__ */ n(y, { as: "h1", styledAs: "h2", className: r.totalAmount, children: s(parseFloat(t.totals?.companyDebit || "0")) })
       ] })
     ] }),
     /* @__PURE__ */ n(
@@ -76,8 +76,8 @@ const te = ({
       {
         layout: "horizontal",
         showSeparators: !1,
-        items: T.map(({ label: t, value: a }) => ({
-          term: /* @__PURE__ */ n(c, { size: "sm", variant: "supporting", children: t }),
+        items: T.map(({ label: o, value: a }) => ({
+          term: /* @__PURE__ */ n(c, { size: "sm", variant: "supporting", children: o }),
           description: /* @__PURE__ */ n(c, { size: "sm", children: a })
         }))
       }
@@ -89,7 +89,7 @@ const te = ({
           size: "sm",
           variant: "supporting",
           className: d(r.disclaimer, p && r.textMobile),
-          children: o.recipientNotice
+          children: t.recipientNotice
         }
       ),
       /* @__PURE__ */ n(
@@ -104,7 +104,7 @@ const te = ({
               i18nKey: "receipt.companyInfo",
               t: e,
               components: {
-                licensesLink: /* @__PURE__ */ n(g, { href: o.licenseUri || "", target: "_blank" })
+                licensesLink: /* @__PURE__ */ n(x, { href: t.licenseUri || "", target: "_blank" })
               }
             }
           )
@@ -117,62 +117,62 @@ const te = ({
           variant: "supporting",
           className: d(r.address, p && r.textMobile),
           children: [
-            o.licensee && `${o.licensee.address || ""}, ${o.licensee.city || ""}, ${o.licensee.state || ""} ${o.licensee.postalCode || ""}`,
+            t.licensee && `${t.licensee.address || ""}, ${t.licensee.city || ""}, ${t.licensee.state || ""} ${t.licensee.postalCode || ""}`,
             " ",
             "| ",
-            B(o.licensee?.phoneNumber)
+            B(t.licensee?.phoneNumber)
           ]
         }
       )
     ] })
-  ] }) }), L = () => /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
+  ] }) }), I = () => /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, alignItems: "stretch", children: /* @__PURE__ */ n(
     h,
     {
       label: e("sections.debitedLabel"),
       columns: [
         {
           title: e("sections.debitedLabel"),
-          render: (t) => t.label
+          render: (o) => o.label
         },
         {
           title: e("breakdown.amount"),
           justify: "end",
-          render: (t) => s(t.amount)
+          render: (o) => s(o.amount)
         }
       ],
       data: P,
       footer: () => ({
         "column-0": e("breakdown.totals"),
-        "column-1": s(parseFloat(o.totals?.companyDebit || "0"))
+        "column-1": s(parseFloat(t.totals?.companyDebit || "0"))
       })
     }
-  ) }), R = () => /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ n(
+  ) }), L = () => /* @__PURE__ */ n(i, { flexDirection: "column", gap: 16, alignItems: "stretch", children: /* @__PURE__ */ n(
     h,
     {
       label: e("sections.taxLabel"),
       columns: [
         {
           title: e("sections.taxLabel"),
-          render: (t) => t.name
+          render: (o) => o.name
         },
         {
           title: e("tax.amount"),
           justify: "end",
-          render: (t) => s(parseFloat(t.amount || "0"))
+          render: (o) => s(parseFloat(o.amount || "0"))
         }
       ],
-      data: o.taxes || [],
+      data: t.taxes || [],
       footer: () => ({
         "column-0": e("breakdown.totals"),
-        "column-1": s(parseFloat(o.totals?.taxDebit || "0"))
+        "column-1": s(parseFloat(t.totals?.taxDebit || "0"))
       })
     }
-  ) }), I = () => {
+  ) }), R = () => {
     const a = [
       /* @__PURE__ */ m(i, { flexDirection: "column", gap: 4, children: [
         e("breakdown.totals"),
         /* @__PURE__ */ n(c, { size: "sm", variant: "supporting", children: e("employee.totalEmployees", {
-          count: o.employeeCompensations?.length || 0
+          count: t.employeeCompensations?.length || 0
         }) })
       ] }, "totals"),
       " ",
@@ -184,7 +184,7 @@ const te = ({
       (l, S, j) => (l[`column-${j}`] = S, l),
       {}
     );
-    return /* @__PURE__ */ m(i, { flexDirection: "column", gap: 16, children: [
+    return /* @__PURE__ */ m(i, { flexDirection: "column", gap: 16, alignItems: "stretch", children: [
       p && /* @__PURE__ */ n(y, { as: "h2", children: e("sections.employeesLabel") }),
       /* @__PURE__ */ n(
         G,
@@ -222,20 +222,20 @@ const te = ({
               render: (l) => s(parseFloat(l.netPay || "0"))
             }
           ],
-          data: o.employeeCompensations || [],
+          data: t.employeeCompensations || [],
           footer: () => a
         }
       )
     ] });
   };
-  return /* @__PURE__ */ n("div", { className: d(r.container, x), ref: f, children: /* @__PURE__ */ m(i, { flexDirection: "column", gap: 24, children: [
+  return /* @__PURE__ */ n("div", { className: d(r.container, g), ref: f, children: /* @__PURE__ */ m(i, { flexDirection: "column", gap: 24, children: [
     w(),
+    I(),
     L(),
-    R(),
-    I()
+    R()
   ] }) });
 };
 export {
-  te as PayrollReceiptsPresentation
+  oe as PayrollReceiptsPresentation
 };
 //# sourceMappingURL=PayrollReceiptsPresentation.js.map

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PayrollReceiptsPresentation.js","sources":["../../../../src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Trans, useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport type {\n  PayrollReceipt,\n  Taxes as TaxBreakdownItem,\n  PayrollReceiptEmployeeCompensations as EmployeeBreakdownItem,\n} from '@gusto/embedded-api/models/components/payrollreceipt'\nimport styles from './PayrollReceiptsPresentation.module.scss'\nimport { DataView, DataTable, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatNumberAsCurrency, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PayrollReceiptsPresentationProps {\n  className?: string\n  receiptData: PayrollReceipt\n  withReimbursements?: boolean\n}\n\n/** @internal */\nexport const PayrollReceiptsPresentation = ({\n  className,\n  receiptData,\n  withReimbursements = true,\n}: PayrollReceiptsPresentationProps) => {\n  const Components = useComponentContext()\n  const { Heading, Text, Link } = Components\n  useI18n('Payroll.PayrollReceipts')\n  const { t } = useTranslation('Payroll.PayrollReceipts')\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isMobile = !breakpoints.includes('small')\n\n  // Helper to get employee full name\n  const getEmployeeFullName = (emp: EmployeeBreakdownItem) =>\n    `${emp.employeeFirstName || ''} ${emp.employeeLastName || ''}`.trim()\n\n  const getTotalChildSupport = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.childSupportGarnishment || '0'),\n      0,\n    )\n\n  const getTotalReimbursements = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.totalReimbursement || '0'),\n      0,\n    )\n\n  const getTotalNetPay = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.netPay || '0'),\n      0,\n    )\n\n  const getTotalTaxes = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.totalTax || '0'),\n      0,\n    )\n\n  const breakdownData = [\n    {\n      label: t('breakdown.directDeposits'),\n      amount: parseFloat(receiptData.totals?.netPayDebit || '0'),\n    },\n    ...(withReimbursements\n      ? [\n          {\n            label: t('breakdown.reimbursements'),\n            amount: parseFloat(receiptData.totals?.reimbursementDebit || '0'),\n          },\n        ]\n      : []),\n    {\n      label: t('breakdown.garnishments'),\n      amount: parseFloat(receiptData.totals?.childSupportDebit || '0'),\n    },\n    { label: t('breakdown.taxes'), amount: parseFloat(receiptData.totals?.taxDebit || '0') },\n  ]\n\n  const receiptDetailsConfig = [\n    {\n      label: t('receipt.receiptId'),\n      value: receiptData.payrollUuid || '',\n    },\n    {\n      label: t('receipt.from'),\n      value: receiptData.nameOfSender || '',\n    },\n    {\n      label: t('receipt.to'),\n      value: receiptData.nameOfRecipient || 'Payroll Recipients',\n    },\n    {\n      label: t('receipt.debitDate'),\n      value: receiptData.debitDate || '',\n    },\n  ]\n\n  const renderReceiptHeader = () => (\n    <div className={classNames(styles.receiptHeader, isMobile && styles.receiptHeaderMobile)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n          <div className={styles.receiptIcon}>\n            <ReceiptCheck className={styles.checkmarkIcon} />\n          </div>\n\n          <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n            <Text size=\"sm\" variant=\"supporting\">\n              {t('receipt.totalLabel')}\n            </Text>\n            <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n              {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit || '0'))}\n            </Heading>\n          </Flex>\n        </Flex>\n\n        <Components.DescriptionList\n          layout=\"horizontal\"\n          showSeparators={false}\n          items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n            term: (\n              <Text size=\"sm\" variant=\"supporting\">\n                {label}\n              </Text>\n            ),\n            description: <Text size=\"sm\">{value}</Text>,\n          }))}\n        />\n\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.disclaimer, isMobile && styles.textMobile)}\n          >\n            {receiptData.recipientNotice}\n          </Text>\n\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.companyInfo, isMobile && styles.textMobile)}\n          >\n            <Trans\n              i18nKey=\"receipt.companyInfo\"\n              t={t}\n              components={{\n                licensesLink: <Link href={receiptData.licenseUri || ''} target=\"_blank\" />,\n              }}\n            />\n          </Text>\n\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.address, isMobile && styles.textMobile)}\n          >\n            {receiptData.licensee &&\n              `${receiptData.licensee.address || ''}, ${receiptData.licensee.city || ''}, ${receiptData.licensee.state || ''} ${receiptData.licensee.postalCode || ''}`}{' '}\n            | {formatPhoneNumber(receiptData.licensee?.phoneNumber)}\n          </Text>\n        </Flex>\n      </Flex>\n    </div>\n  )\n\n  const renderBreakdownSection = () => (\n    <Flex flexDirection=\"column\" gap={16}>\n      <DataTable\n        label={t('sections.debitedLabel')}\n        columns={[\n          {\n            title: t('sections.debitedLabel'),\n            render: (item: { label: string; amount: number }) => item.label,\n          },\n          {\n            title: t('breakdown.amount'),\n            justify: 'end',\n            render: (item: { label: string; amount: number }) =>\n              formatNumberAsCurrency(item.amount),\n          },\n        ]}\n        data={breakdownData}\n        footer={() => ({\n          'column-0': t('breakdown.totals'),\n          'column-1': formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit || '0')),\n        })}\n      />\n    </Flex>\n  )\n\n  const renderTaxBreakdown = () => (\n    <Flex flexDirection=\"column\" gap={16}>\n      <DataTable\n        label={t('sections.taxLabel')}\n        columns={[\n          {\n            title: t('sections.taxLabel'),\n            render: (tax: TaxBreakdownItem) => tax.name,\n          },\n          {\n            title: t('tax.amount'),\n            justify: 'end',\n            render: (tax: TaxBreakdownItem) =>\n              formatNumberAsCurrency(parseFloat(tax.amount || '0')),\n          },\n        ]}\n        data={receiptData.taxes || []}\n        footer={() => ({\n          'column-0': t('breakdown.totals'),\n          'column-1': formatNumberAsCurrency(parseFloat(receiptData.totals?.taxDebit || '0')),\n        })}\n      />\n    </Flex>\n  )\n\n  const renderEmployeeBreakdown = () => {\n    const footerValues = [\n      <Flex flexDirection=\"column\" gap={4} key=\"totals\">\n        {t('breakdown.totals')}\n        <Text size=\"sm\" variant=\"supporting\">\n          {t('employee.totalEmployees', {\n            count: receiptData.employeeCompensations?.length || 0,\n          })}\n        </Text>\n      </Flex>,\n      '\\u00A0',\n\n      formatNumberAsCurrency(getTotalChildSupport()),\n      ...(withReimbursements ? [formatNumberAsCurrency(getTotalReimbursements())] : []),\n      formatNumberAsCurrency(getTotalTaxes()),\n      formatNumberAsCurrency(getTotalNetPay()),\n    ]\n\n    const footerContent = footerValues.reduce<Record<string, React.ReactNode>>(\n      (acc, value, index) => {\n        acc[`column-${index}`] = value\n        return acc\n      },\n      {},\n    )\n\n    return (\n      <Flex flexDirection=\"column\" gap={16}>\n        {isMobile && <Heading as=\"h2\">{t('sections.employeesLabel')}</Heading>}\n        <DataView\n          label={t('sections.employeesLabel')}\n          columns={[\n            {\n              title: t('employee.name'),\n              render: (employee: EmployeeBreakdownItem) => getEmployeeFullName(employee),\n            },\n            {\n              title: t('employee.paymentMethod'),\n              render: (employee: EmployeeBreakdownItem) => employee.paymentMethod || 'N/A',\n            },\n            {\n              title: t('employee.childSupport'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.childSupportGarnishment || '0')),\n            },\n            ...(withReimbursements\n              ? [\n                  {\n                    title: t('employee.reimbursement'),\n                    justify: 'end' as const,\n                    render: (employee: EmployeeBreakdownItem) =>\n                      formatNumberAsCurrency(parseFloat(employee.totalReimbursement || '0')),\n                  },\n                ]\n              : []),\n            {\n              title: t('employee.totalTaxes'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.totalTax || '0')),\n            },\n            {\n              title: t('employee.netPay'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.netPay || '0')),\n            },\n          ]}\n          data={receiptData.employeeCompensations || []}\n          footer={() => footerContent}\n        />\n      </Flex>\n    )\n  }\n\n  return (\n    <div className={classNames(styles.container, className)} ref={containerRef}>\n      <Flex flexDirection=\"column\" gap={24}>\n        {renderReceiptHeader()}\n        {renderBreakdownSection()}\n        {renderTaxBreakdown()}\n        {renderEmployeeBreakdown()}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollReceiptsPresentation","className","receiptData","withReimbursements","Components","useComponentContext","Heading","Text","Link","useI18n","t","useTranslation","containerRef","useRef","isMobile","useContainerBreakpoints","getEmployeeFullName","emp","getTotalChildSupport","sum","getTotalReimbursements","getTotalNetPay","getTotalTaxes","breakdownData","receiptDetailsConfig","renderReceiptHeader","jsx","classNames","styles","jsxs","Flex","ReceiptCheck","formatNumberAsCurrency","label","value","Trans","formatPhoneNumber","renderBreakdownSection","DataTable","item","renderTaxBreakdown","tax","renderEmployeeBreakdown","footerContent","acc","index","DataView","employee"],"mappings":"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"}
+{"version":3,"file":"PayrollReceiptsPresentation.js","sources":["../../../../src/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Trans, useTranslation } from 'react-i18next'\nimport classNames from 'classnames'\nimport type {\n  PayrollReceipt,\n  Taxes as TaxBreakdownItem,\n  PayrollReceiptEmployeeCompensations as EmployeeBreakdownItem,\n} from '@gusto/embedded-api/models/components/payrollreceipt'\nimport styles from './PayrollReceiptsPresentation.module.scss'\nimport { DataView, DataTable, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatNumberAsCurrency, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport { useI18n } from '@/i18n'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PayrollReceiptsPresentationProps {\n  className?: string\n  receiptData: PayrollReceipt\n  withReimbursements?: boolean\n}\n\n/** @internal */\nexport const PayrollReceiptsPresentation = ({\n  className,\n  receiptData,\n  withReimbursements = true,\n}: PayrollReceiptsPresentationProps) => {\n  const Components = useComponentContext()\n  const { Heading, Text, Link } = Components\n  useI18n('Payroll.PayrollReceipts')\n  const { t } = useTranslation('Payroll.PayrollReceipts')\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const isMobile = !breakpoints.includes('small')\n\n  // Helper to get employee full name\n  const getEmployeeFullName = (emp: EmployeeBreakdownItem) =>\n    `${emp.employeeFirstName || ''} ${emp.employeeLastName || ''}`.trim()\n\n  const getTotalChildSupport = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.childSupportGarnishment || '0'),\n      0,\n    )\n\n  const getTotalReimbursements = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.totalReimbursement || '0'),\n      0,\n    )\n\n  const getTotalNetPay = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.netPay || '0'),\n      0,\n    )\n\n  const getTotalTaxes = () =>\n    (receiptData.employeeCompensations || []).reduce(\n      (sum, emp) => sum + parseFloat(emp.totalTax || '0'),\n      0,\n    )\n\n  const breakdownData = [\n    {\n      label: t('breakdown.directDeposits'),\n      amount: parseFloat(receiptData.totals?.netPayDebit || '0'),\n    },\n    ...(withReimbursements\n      ? [\n          {\n            label: t('breakdown.reimbursements'),\n            amount: parseFloat(receiptData.totals?.reimbursementDebit || '0'),\n          },\n        ]\n      : []),\n    {\n      label: t('breakdown.garnishments'),\n      amount: parseFloat(receiptData.totals?.childSupportDebit || '0'),\n    },\n    { label: t('breakdown.taxes'), amount: parseFloat(receiptData.totals?.taxDebit || '0') },\n  ]\n\n  const receiptDetailsConfig = [\n    {\n      label: t('receipt.receiptId'),\n      value: receiptData.payrollUuid || '',\n    },\n    {\n      label: t('receipt.from'),\n      value: receiptData.nameOfSender || '',\n    },\n    {\n      label: t('receipt.to'),\n      value: receiptData.nameOfRecipient || 'Payroll Recipients',\n    },\n    {\n      label: t('receipt.debitDate'),\n      value: receiptData.debitDate || '',\n    },\n  ]\n\n  const renderReceiptHeader = () => (\n    <div className={classNames(styles.receiptHeader, isMobile && styles.receiptHeaderMobile)}>\n      <Flex flexDirection=\"column\" gap={24}>\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n          <div className={styles.receiptIcon}>\n            <ReceiptCheck className={styles.checkmarkIcon} />\n          </div>\n\n          <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n            <Text size=\"sm\" variant=\"supporting\">\n              {t('receipt.totalLabel')}\n            </Text>\n            <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n              {formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit || '0'))}\n            </Heading>\n          </Flex>\n        </Flex>\n\n        <Components.DescriptionList\n          layout=\"horizontal\"\n          showSeparators={false}\n          items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n            term: (\n              <Text size=\"sm\" variant=\"supporting\">\n                {label}\n              </Text>\n            ),\n            description: <Text size=\"sm\">{value}</Text>,\n          }))}\n        />\n\n        <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.disclaimer, isMobile && styles.textMobile)}\n          >\n            {receiptData.recipientNotice}\n          </Text>\n\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.companyInfo, isMobile && styles.textMobile)}\n          >\n            <Trans\n              i18nKey=\"receipt.companyInfo\"\n              t={t}\n              components={{\n                licensesLink: <Link href={receiptData.licenseUri || ''} target=\"_blank\" />,\n              }}\n            />\n          </Text>\n\n          <Text\n            size=\"sm\"\n            variant=\"supporting\"\n            className={classNames(styles.address, isMobile && styles.textMobile)}\n          >\n            {receiptData.licensee &&\n              `${receiptData.licensee.address || ''}, ${receiptData.licensee.city || ''}, ${receiptData.licensee.state || ''} ${receiptData.licensee.postalCode || ''}`}{' '}\n            | {formatPhoneNumber(receiptData.licensee?.phoneNumber)}\n          </Text>\n        </Flex>\n      </Flex>\n    </div>\n  )\n\n  const renderBreakdownSection = () => (\n    <Flex flexDirection=\"column\" gap={16} alignItems=\"stretch\">\n      <DataTable\n        label={t('sections.debitedLabel')}\n        columns={[\n          {\n            title: t('sections.debitedLabel'),\n            render: (item: { label: string; amount: number }) => item.label,\n          },\n          {\n            title: t('breakdown.amount'),\n            justify: 'end',\n            render: (item: { label: string; amount: number }) =>\n              formatNumberAsCurrency(item.amount),\n          },\n        ]}\n        data={breakdownData}\n        footer={() => ({\n          'column-0': t('breakdown.totals'),\n          'column-1': formatNumberAsCurrency(parseFloat(receiptData.totals?.companyDebit || '0')),\n        })}\n      />\n    </Flex>\n  )\n\n  const renderTaxBreakdown = () => (\n    <Flex flexDirection=\"column\" gap={16} alignItems=\"stretch\">\n      <DataTable\n        label={t('sections.taxLabel')}\n        columns={[\n          {\n            title: t('sections.taxLabel'),\n            render: (tax: TaxBreakdownItem) => tax.name,\n          },\n          {\n            title: t('tax.amount'),\n            justify: 'end',\n            render: (tax: TaxBreakdownItem) =>\n              formatNumberAsCurrency(parseFloat(tax.amount || '0')),\n          },\n        ]}\n        data={receiptData.taxes || []}\n        footer={() => ({\n          'column-0': t('breakdown.totals'),\n          'column-1': formatNumberAsCurrency(parseFloat(receiptData.totals?.taxDebit || '0')),\n        })}\n      />\n    </Flex>\n  )\n\n  const renderEmployeeBreakdown = () => {\n    const footerValues = [\n      <Flex flexDirection=\"column\" gap={4} key=\"totals\">\n        {t('breakdown.totals')}\n        <Text size=\"sm\" variant=\"supporting\">\n          {t('employee.totalEmployees', {\n            count: receiptData.employeeCompensations?.length || 0,\n          })}\n        </Text>\n      </Flex>,\n      '\\u00A0',\n\n      formatNumberAsCurrency(getTotalChildSupport()),\n      ...(withReimbursements ? [formatNumberAsCurrency(getTotalReimbursements())] : []),\n      formatNumberAsCurrency(getTotalTaxes()),\n      formatNumberAsCurrency(getTotalNetPay()),\n    ]\n\n    const footerContent = footerValues.reduce<Record<string, React.ReactNode>>(\n      (acc, value, index) => {\n        acc[`column-${index}`] = value\n        return acc\n      },\n      {},\n    )\n\n    return (\n      <Flex flexDirection=\"column\" gap={16} alignItems=\"stretch\">\n        {isMobile && <Heading as=\"h2\">{t('sections.employeesLabel')}</Heading>}\n        <DataView\n          label={t('sections.employeesLabel')}\n          columns={[\n            {\n              title: t('employee.name'),\n              render: (employee: EmployeeBreakdownItem) => getEmployeeFullName(employee),\n            },\n            {\n              title: t('employee.paymentMethod'),\n              render: (employee: EmployeeBreakdownItem) => employee.paymentMethod || 'N/A',\n            },\n            {\n              title: t('employee.childSupport'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.childSupportGarnishment || '0')),\n            },\n            ...(withReimbursements\n              ? [\n                  {\n                    title: t('employee.reimbursement'),\n                    justify: 'end' as const,\n                    render: (employee: EmployeeBreakdownItem) =>\n                      formatNumberAsCurrency(parseFloat(employee.totalReimbursement || '0')),\n                  },\n                ]\n              : []),\n            {\n              title: t('employee.totalTaxes'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.totalTax || '0')),\n            },\n            {\n              title: t('employee.netPay'),\n              justify: 'end',\n              render: (employee: EmployeeBreakdownItem) =>\n                formatNumberAsCurrency(parseFloat(employee.netPay || '0')),\n            },\n          ]}\n          data={receiptData.employeeCompensations || []}\n          footer={() => footerContent}\n        />\n      </Flex>\n    )\n  }\n\n  return (\n    <div className={classNames(styles.container, className)} ref={containerRef}>\n      <Flex flexDirection=\"column\" gap={24}>\n        {renderReceiptHeader()}\n        {renderBreakdownSection()}\n        {renderTaxBreakdown()}\n        {renderEmployeeBreakdown()}\n      </Flex>\n    </div>\n  )\n}\n"],"names":["PayrollReceiptsPresentation","className","receiptData","withReimbursements","Components","useComponentContext","Heading","Text","Link","useI18n","t","useTranslation","containerRef","useRef","isMobile","useContainerBreakpoints","getEmployeeFullName","emp","getTotalChildSupport","sum","getTotalReimbursements","getTotalNetPay","getTotalTaxes","breakdownData","receiptDetailsConfig","renderReceiptHeader","jsx","classNames","styles","jsxs","Flex","ReceiptCheck","formatNumberAsCurrency","label","value","Trans","formatPhoneNumber","renderBreakdownSection","DataTable","item","renderTaxBreakdown","tax","renderEmployeeBreakdown","footerContent","acc","index","DataView","employee"],"mappings":";;;;;;;;;;;;;AAwBO,MAAMA,KAA8B,CAAC;AAAA,EAC1C,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,oBAAAC,IAAqB;AACvB,MAAwC;AACtC,QAAMC,IAAaC,EAAA,GACb,EAAE,SAAAC,GAAS,MAAAC,GAAM,MAAAC,EAAA,IAASJ;AAChC,EAAAK,EAAQ,yBAAyB;AACjC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,yBAAyB,GAEhDC,IAAeC,EAAuB,IAAI,GAE1CC,IAAW,CADGC,EAAwB,EAAE,KAAKH,GAAc,EACnC,SAAS,OAAO,GAGxCI,IAAsB,CAACC,MAC3B,GAAGA,EAAI,qBAAqB,EAAE,IAAIA,EAAI,oBAAoB,EAAE,GAAG,KAAA,GAE3DC,IAAuB,OAC1BhB,EAAY,yBAAyB,CAAA,GAAI;AAAA,IACxC,CAACiB,GAAKF,MAAQE,IAAM,WAAWF,EAAI,2BAA2B,GAAG;AAAA,IACjE;AAAA,EAAA,GAGEG,IAAyB,OAC5BlB,EAAY,yBAAyB,CAAA,GAAI;AAAA,IACxC,CAACiB,GAAKF,MAAQE,IAAM,WAAWF,EAAI,sBAAsB,GAAG;AAAA,IAC5D;AAAA,EAAA,GAGEI,IAAiB,OACpBnB,EAAY,yBAAyB,CAAA,GAAI;AAAA,IACxC,CAACiB,GAAKF,MAAQE,IAAM,WAAWF,EAAI,UAAU,GAAG;AAAA,IAChD;AAAA,EAAA,GAGEK,IAAgB,OACnBpB,EAAY,yBAAyB,CAAA,GAAI;AAAA,IACxC,CAACiB,GAAKF,MAAQE,IAAM,WAAWF,EAAI,YAAY,GAAG;AAAA,IAClD;AAAA,EAAA,GAGEM,IAAgB;AAAA,IACpB;AAAA,MACE,OAAOb,EAAE,0BAA0B;AAAA,MACnC,QAAQ,WAAWR,EAAY,QAAQ,eAAe,GAAG;AAAA,IAAA;AAAA,IAE3D,GAAIC,IACA;AAAA,MACE;AAAA,QACE,OAAOO,EAAE,0BAA0B;AAAA,QACnC,QAAQ,WAAWR,EAAY,QAAQ,sBAAsB,GAAG;AAAA,MAAA;AAAA,IAClE,IAEF,CAAA;AAAA,IACJ;AAAA,MACE,OAAOQ,EAAE,wBAAwB;AAAA,MACjC,QAAQ,WAAWR,EAAY,QAAQ,qBAAqB,GAAG;AAAA,IAAA;AAAA,IAEjE,EAAE,OAAOQ,EAAE,iBAAiB,GAAG,QAAQ,WAAWR,EAAY,QAAQ,YAAY,GAAG,EAAA;AAAA,EAAE,GAGnFsB,IAAuB;AAAA,IAC3B;AAAA,MACE,OAAOd,EAAE,mBAAmB;AAAA,MAC5B,OAAOR,EAAY,eAAe;AAAA,IAAA;AAAA,IAEpC;AAAA,MACE,OAAOQ,EAAE,cAAc;AAAA,MACvB,OAAOR,EAAY,gBAAgB;AAAA,IAAA;AAAA,IAErC;AAAA,MACE,OAAOQ,EAAE,YAAY;AAAA,MACrB,OAAOR,EAAY,mBAAmB;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,OAAOQ,EAAE,mBAAmB;AAAA,MAC5B,OAAOR,EAAY,aAAa;AAAA,IAAA;AAAA,EAClC,GAGIuB,IAAsB,MAC1B,gBAAAC,EAAC,OAAA,EAAI,WAAWC,EAAWC,EAAO,eAAed,KAAYc,EAAO,mBAAmB,GACrF,UAAA,gBAAAC,EAACC,KAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,KAAK,eAAc,UAAS,YAAW,UAAS,KAAK,IACpD,UAAA;AAAA,MAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,aACrB,4BAACG,GAAA,EAAa,WAAWH,EAAO,cAAA,CAAe,EAAA,CACjD;AAAA,wBAECE,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,GACpD,UAAA;AAAA,QAAA,gBAAAJ,EAACnB,KAAK,MAAK,MAAK,SAAQ,cACrB,UAAAG,EAAE,oBAAoB,GACzB;AAAA,0BACCJ,GAAA,EAAQ,IAAG,MAAK,UAAS,MAAK,WAAWsB,EAAO,aAC9C,UAAAI,EAAuB,WAAW9B,EAAY,QAAQ,gBAAgB,GAAG,CAAC,EAAA,CAC7E;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,IAEA,gBAAAwB;AAAA,MAACtB,EAAW;AAAA,MAAX;AAAA,QACC,QAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,OAAOoB,EAAqB,IAAI,CAAC,EAAE,OAAAS,GAAO,OAAAC,SAAkC;AAAA,UAC1E,MACE,gBAAAR,EAACnB,GAAA,EAAK,MAAK,MAAK,SAAQ,cACrB,UAAA0B,GACH;AAAA,UAEF,aAAa,gBAAAP,EAACnB,GAAA,EAAK,MAAK,MAAM,UAAA2B,EAAA,CAAM;AAAA,QAAA,EACpC;AAAA,MAAA;AAAA,IAAA;AAAA,sBAGHJ,GAAA,EAAK,eAAc,UAAS,YAAW,UAAS,KAAK,IACpD,UAAA;AAAA,MAAA,gBAAAJ;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAWoB,EAAWC,EAAO,YAAYd,KAAYc,EAAO,UAAU;AAAA,UAErE,UAAA1B,EAAY;AAAA,QAAA;AAAA,MAAA;AAAA,MAGf,gBAAAwB;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAWoB,EAAWC,EAAO,aAAad,KAAYc,EAAO,UAAU;AAAA,UAEvE,UAAA,gBAAAF;AAAA,YAACS;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,GAAAzB;AAAA,cACA,YAAY;AAAA,gBACV,gCAAeF,GAAA,EAAK,MAAMN,EAAY,cAAc,IAAI,QAAO,SAAA,CAAS;AAAA,cAAA;AAAA,YAC1E;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,MAGF,gBAAA2B;AAAA,QAACtB;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,WAAWoB,EAAWC,EAAO,SAASd,KAAYc,EAAO,UAAU;AAAA,UAElE,UAAA;AAAA,YAAA1B,EAAY,YACX,GAAGA,EAAY,SAAS,WAAW,EAAE,KAAKA,EAAY,SAAS,QAAQ,EAAE,KAAKA,EAAY,SAAS,SAAS,EAAE,IAAIA,EAAY,SAAS,cAAc,EAAE;AAAA,YAAI;AAAA,YAAI;AAAA,YAC9JkC,EAAkBlC,EAAY,UAAU,WAAW;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACxD,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF,GAGImC,IAAyB,MAC7B,gBAAAX,EAACI,GAAA,EAAK,eAAc,UAAS,KAAK,IAAI,YAAW,WAC/C,UAAA,gBAAAJ;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,OAAO5B,EAAE,uBAAuB;AAAA,MAChC,SAAS;AAAA,QACP;AAAA,UACE,OAAOA,EAAE,uBAAuB;AAAA,UAChC,QAAQ,CAAC6B,MAA4CA,EAAK;AAAA,QAAA;AAAA,QAE5D;AAAA,UACE,OAAO7B,EAAE,kBAAkB;AAAA,UAC3B,SAAS;AAAA,UACT,QAAQ,CAAC6B,MACPP,EAAuBO,EAAK,MAAM;AAAA,QAAA;AAAA,MACtC;AAAA,MAEF,MAAMhB;AAAA,MACN,QAAQ,OAAO;AAAA,QACb,YAAYb,EAAE,kBAAkB;AAAA,QAChC,YAAYsB,EAAuB,WAAW9B,EAAY,QAAQ,gBAAgB,GAAG,CAAC;AAAA,MAAA;AAAA,IACxF;AAAA,EAAA,GAEJ,GAGIsC,IAAqB,MACzB,gBAAAd,EAACI,GAAA,EAAK,eAAc,UAAS,KAAK,IAAI,YAAW,WAC/C,UAAA,gBAAAJ;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,OAAO5B,EAAE,mBAAmB;AAAA,MAC5B,SAAS;AAAA,QACP;AAAA,UACE,OAAOA,EAAE,mBAAmB;AAAA,UAC5B,QAAQ,CAAC+B,MAA0BA,EAAI;AAAA,QAAA;AAAA,QAEzC;AAAA,UACE,OAAO/B,EAAE,YAAY;AAAA,UACrB,SAAS;AAAA,UACT,QAAQ,CAAC+B,MACPT,EAAuB,WAAWS,EAAI,UAAU,GAAG,CAAC;AAAA,QAAA;AAAA,MACxD;AAAA,MAEF,MAAMvC,EAAY,SAAS,CAAA;AAAA,MAC3B,QAAQ,OAAO;AAAA,QACb,YAAYQ,EAAE,kBAAkB;AAAA,QAChC,YAAYsB,EAAuB,WAAW9B,EAAY,QAAQ,YAAY,GAAG,CAAC;AAAA,MAAA;AAAA,IACpF;AAAA,EAAA,GAEJ,GAGIwC,IAA0B,MAAM;AAkBpC,UAAMC,IAjBe;AAAA,MACnB,gBAAAd,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAC/B,UAAA;AAAA,QAAApB,EAAE,kBAAkB;AAAA,0BACpBH,GAAA,EAAK,MAAK,MAAK,SAAQ,cACrB,YAAE,2BAA2B;AAAA,UAC5B,OAAOL,EAAY,uBAAuB,UAAU;AAAA,QAAA,CACrD,EAAA,CACH;AAAA,MAAA,EAAA,GANuC,QAOzC;AAAA,MACA;AAAA,MAEA8B,EAAuBd,GAAsB;AAAA,MAC7C,GAAIf,IAAqB,CAAC6B,EAAuBZ,GAAwB,CAAC,IAAI,CAAA;AAAA,MAC9EY,EAAuBV,GAAe;AAAA,MACtCU,EAAuBX,GAAgB;AAAA,IAAA,EAGN;AAAA,MACjC,CAACuB,GAAKV,GAAOW,OACXD,EAAI,UAAUC,CAAK,EAAE,IAAIX,GAClBU;AAAA,MAET,CAAA;AAAA,IAAC;AAGH,6BACGd,GAAA,EAAK,eAAc,UAAS,KAAK,IAAI,YAAW,WAC9C,UAAA;AAAA,MAAAhB,uBAAaR,GAAA,EAAQ,IAAG,MAAM,UAAAI,EAAE,yBAAyB,GAAE;AAAA,MAC5D,gBAAAgB;AAAA,QAACoB;AAAA,QAAA;AAAA,UACC,OAAOpC,EAAE,yBAAyB;AAAA,UAClC,SAAS;AAAA,YACP;AAAA,cACE,OAAOA,EAAE,eAAe;AAAA,cACxB,QAAQ,CAACqC,MAAoC/B,EAAoB+B,CAAQ;AAAA,YAAA;AAAA,YAE3E;AAAA,cACE,OAAOrC,EAAE,wBAAwB;AAAA,cACjC,QAAQ,CAACqC,MAAoCA,EAAS,iBAAiB;AAAA,YAAA;AAAA,YAEzE;AAAA,cACE,OAAOrC,EAAE,uBAAuB;AAAA,cAChC,SAAS;AAAA,cACT,QAAQ,CAACqC,MACPf,EAAuB,WAAWe,EAAS,2BAA2B,GAAG,CAAC;AAAA,YAAA;AAAA,YAE9E,GAAI5C,IACA;AAAA,cACE;AAAA,gBACE,OAAOO,EAAE,wBAAwB;AAAA,gBACjC,SAAS;AAAA,gBACT,QAAQ,CAACqC,MACPf,EAAuB,WAAWe,EAAS,sBAAsB,GAAG,CAAC;AAAA,cAAA;AAAA,YACzE,IAEF,CAAA;AAAA,YACJ;AAAA,cACE,OAAOrC,EAAE,qBAAqB;AAAA,cAC9B,SAAS;AAAA,cACT,QAAQ,CAACqC,MACPf,EAAuB,WAAWe,EAAS,YAAY,GAAG,CAAC;AAAA,YAAA;AAAA,YAE/D;AAAA,cACE,OAAOrC,EAAE,iBAAiB;AAAA,cAC1B,SAAS;AAAA,cACT,QAAQ,CAACqC,MACPf,EAAuB,WAAWe,EAAS,UAAU,GAAG,CAAC;AAAA,YAAA;AAAA,UAC7D;AAAA,UAEF,MAAM7C,EAAY,yBAAyB,CAAA;AAAA,UAC3C,QAAQ,MAAMyC;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB,GACF;AAAA,EAEJ;AAEA,SACE,gBAAAjB,EAAC,OAAA,EAAI,WAAWC,EAAWC,EAAO,WAAW3B,CAAS,GAAG,KAAKW,GAC5D,UAAA,gBAAAiB,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,IAAAL,EAAA;AAAA,IACAY,EAAA;AAAA,IACAG,EAAA;AAAA,IACAE,EAAA;AAAA,EAAwB,EAAA,CAC3B,EAAA,CACF;AAEJ;"}

package/dist/components/Payroll/PayrollReceipts/PayrollReceiptsPresentation.module.scss.js

@@ -1,26 +1,26 @@
-const e = "_container_1ffdr_1", c = "_receiptHeader_1ffdr_10", t = "_receiptIcon_1ffdr_21", o = "_checkmarkIcon_1ffdr_32", r = "_totalAmount_1ffdr_38", n = "_disclaimer_1ffdr_43", _ = "_companyInfo_1ffdr_48", a = "_address_1ffdr_52", d = "_receiptHeaderMobile_1ffdr_65", f = "_textMobile_1ffdr_69", i = {
+const e = "_container_3t7i9_1", t = "_receiptHeader_3t7i9_12", c = "_receiptIcon_3t7i9_21", o = "_checkmarkIcon_3t7i9_32", i = "_totalAmount_3t7i9_38", n = "_disclaimer_3t7i9_43", _ = "_companyInfo_3t7i9_48", r = "_address_3t7i9_52", a = "_receiptHeaderMobile_3t7i9_65", s = "_textMobile_3t7i9_69", d = {
   container: e,
-  receiptHeader: c,
-  receiptIcon: t,
+  receiptHeader: t,
+  receiptIcon: c,
   checkmarkIcon: o,
-  totalAmount: r,
+  totalAmount: i,
   disclaimer: n,
   companyInfo: _,
-  address: a,
-  receiptHeaderMobile: d,
-  textMobile: f
+  address: r,
+  receiptHeaderMobile: a,
+  textMobile: s
 };
 export {
-  a as address,
+  r as address,
   o as checkmarkIcon,
   _ as companyInfo,
   e as container,
-  i as default,
+  d as default,
   n as disclaimer,
-  c as receiptHeader,
-  d as receiptHeaderMobile,
-  t as receiptIcon,
-  f as textMobile,
-  r as totalAmount
+  t as receiptHeader,
+  a as receiptHeaderMobile,
+  c as receiptIcon,
+  s as textMobile,
+  i as totalAmount
 };
 //# sourceMappingURL=PayrollReceiptsPresentation.module.scss.js.map

package/dist/components/Payroll/PrintChecks/PrintChecksFailure/PrintChecksFailure.js

@@ -1,40 +1,40 @@
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
 import { useTranslation as i } from "react-i18next";
-import { BaseComponent as h } from "../../../Base/Base.js";
+import { BaseComponent as d } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
 import { useComponentContext as l } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useComponentDictionary as P, useI18n as c } from "../../../../i18n/I18n.js";
-import { Flex as d } from "../../../Common/Flex/Flex.js";
-import { ActionsLayout as f } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { printChecksEvents as a } from "../../../../shared/constants.js";
+import { Flex as f } from "../../../Common/Flex/Flex.js";
+import { ActionsLayout as a } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { printChecksEvents as s } from "../../../../shared/constants.js";
 function p(r) {
-  return /* @__PURE__ */ t(h, { ...r, children: /* @__PURE__ */ t(y, { ...r, children: r.children }) });
+  return /* @__PURE__ */ t(d, { ...r, children: /* @__PURE__ */ t(y, { ...r, children: r.children }) });
 }
-const y = ({ dictionary: r, errorMessage: o, onEvent: e, className: s }) => {
+const y = ({ dictionary: r, errorMessage: o, onEvent: e, className: m }) => {
   P("Payroll.PrintChecksFailure", r), c("Payroll.PrintChecksFailure");
-  const { t: n } = i("Payroll.PrintChecksFailure"), { Alert: m, Button: u } = l();
-  return /* @__PURE__ */ C(d, { className: s, flexDirection: "column", gap: 16, children: [
-    /* @__PURE__ */ t(m, { status: "error", disableScrollIntoView: !0, label: n("failedTitle"), children: o }),
-    /* @__PURE__ */ t(
-      u,
+  const { t: n } = i("Payroll.PrintChecksFailure"), { Alert: u, Button: C } = l();
+  return /* @__PURE__ */ h(f, { className: m, flexDirection: "column", gap: 16, children: [
+    /* @__PURE__ */ t(u, { status: "error", disableScrollIntoView: !0, label: n("failedTitle"), children: o }),
+    /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
+      C,
       {
         variant: "secondary",
         onClick: () => {
-          e(a.PRINT_CHECKS_RETRY);
+          e(s.PRINT_CHECKS_RETRY);
         },
         children: n("retryCta")
       }
-    )
+    ) })
   ] });
 }, k = ({ onEvent: r }) => {
   c("Payroll.PrintChecksFailure");
   const { t: o } = i("Payroll.PrintChecksFailure"), { Button: e } = l();
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ t(
+  return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(
     e,
     {
       variant: "secondary",
       onClick: () => {
-        r(a.PRINT_CHECKS_CLOSE);
+        r(s.PRINT_CHECKS_CLOSE);
       },
       children: o("closeCta")
     }

package/dist/components/Payroll/PrintChecks/PrintChecksFailure/PrintChecksFailure.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrintChecksFailure.js","sources":["../../../../../src/components/Payroll/PrintChecks/PrintChecksFailure/PrintChecksFailure.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { printChecksEvents, type EventType } from '@/shared/constants'\n\ninterface PrintChecksFailureProps extends BaseComponentInterface<'Payroll.PrintChecksFailure'> {\n  errorMessage?: string\n}\n\n/** @internal */\nexport function PrintChecksFailure(props: PrintChecksFailureProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ dictionary, errorMessage, onEvent, className }: PrintChecksFailureProps) => {\n  useComponentDictionary('Payroll.PrintChecksFailure', dictionary)\n  useI18n('Payroll.PrintChecksFailure')\n  const { t } = useTranslation('Payroll.PrintChecksFailure')\n  const { Alert, Button } = useComponentContext()\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={16}>\n      <Alert status=\"error\" disableScrollIntoView label={t('failedTitle')}>\n        {errorMessage}\n      </Alert>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(printChecksEvents.PRINT_CHECKS_RETRY)\n        }}\n      >\n        {t('retryCta')}\n      </Button>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.PrintChecksFailure')\n  const { t } = useTranslation('Payroll.PrintChecksFailure')\n  const { Button } = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(printChecksEvents.PRINT_CHECKS_CLOSE)\n        }}\n      >\n        {t('closeCta')}\n      </Button>\n    </ActionsLayout>\n  )\n}\nPrintChecksFailure.Footer = Footer\n"],"names":["PrintChecksFailure","props","jsx","BaseComponent","Root","dictionary","errorMessage","onEvent","className","useComponentDictionary","useI18n","t","useTranslation","Alert","Button","useComponentContext","Flex","printChecksEvents","Footer","ActionsLayout"],"mappings":";;;;;;;;;AAaO,SAASA,EAAmBC,GAAgC;AACjE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,YAAAC,GAAY,cAAAC,GAAc,SAAAC,GAAS,WAAAC,QAAyC;AAC1F,EAAAC,EAAuB,8BAA8BJ,CAAU,GAC/DK,EAAQ,4BAA4B;AACpC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4BAA4B,GACnD,EAAE,OAAAC,GAAO,QAAAC,EAAA,IAAWC,EAAA;AAE1B,2BACGC,GAAA,EAAK,WAAAR,GAAsB,eAAc,UAAS,KAAK,IACtD,UAAA;AAAA,IAAA,gBAAAN,EAACW,GAAA,EAAM,QAAO,SAAQ,uBAAqB,IAAC,OAAOF,EAAE,aAAa,GAC/D,UAAAL,EAAA,CACH;AAAA,IACA,gBAAAJ;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAP,EAAQU,EAAkB,kBAAkB;AAAA,QAC9C;AAAA,QAEC,YAAE,UAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GACF;AAEJ,GAEMC,IAAS,CAAC,EAAE,SAAAX,QAA4D;AAC5E,EAAAG,EAAQ,4BAA4B;AACpC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4BAA4B,GACnD,EAAE,QAAAE,EAAA,IAAWC,EAAA;AAEnB,2BACGI,GAAA,EACC,UAAA,gBAAAjB;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM;AACb,QAAAP,EAAQU,EAAkB,kBAAkB;AAAA,MAC9C;AAAA,MAEC,YAAE,UAAU;AAAA,IAAA;AAAA,EAAA,GAEjB;AAEJ;AACAjB,EAAmB,SAASkB;"}
+{"version":3,"file":"PrintChecksFailure.js","sources":["../../../../../src/components/Payroll/PrintChecks/PrintChecksFailure/PrintChecksFailure.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { BaseComponent, type BaseComponentInterface } from '@/components/Base'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { ActionsLayout, Flex } from '@/components/Common'\nimport { printChecksEvents, type EventType } from '@/shared/constants'\n\ninterface PrintChecksFailureProps extends BaseComponentInterface<'Payroll.PrintChecksFailure'> {\n  errorMessage?: string\n}\n\n/** @internal */\nexport function PrintChecksFailure(props: PrintChecksFailureProps) {\n  return (\n    <BaseComponent {...props}>\n      <Root {...props}>{props.children}</Root>\n    </BaseComponent>\n  )\n}\n\nconst Root = ({ dictionary, errorMessage, onEvent, className }: PrintChecksFailureProps) => {\n  useComponentDictionary('Payroll.PrintChecksFailure', dictionary)\n  useI18n('Payroll.PrintChecksFailure')\n  const { t } = useTranslation('Payroll.PrintChecksFailure')\n  const { Alert, Button } = useComponentContext()\n\n  return (\n    <Flex className={className} flexDirection=\"column\" gap={16}>\n      <Alert status=\"error\" disableScrollIntoView label={t('failedTitle')}>\n        {errorMessage}\n      </Alert>\n      <ActionsLayout>\n        <Button\n          variant=\"secondary\"\n          onClick={() => {\n            onEvent(printChecksEvents.PRINT_CHECKS_RETRY)\n          }}\n        >\n          {t('retryCta')}\n        </Button>\n      </ActionsLayout>\n    </Flex>\n  )\n}\n\nconst Footer = ({ onEvent }: { onEvent: OnEventType<EventType, unknown> }) => {\n  useI18n('Payroll.PrintChecksFailure')\n  const { t } = useTranslation('Payroll.PrintChecksFailure')\n  const { Button } = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      <Button\n        variant=\"secondary\"\n        onClick={() => {\n          onEvent(printChecksEvents.PRINT_CHECKS_CLOSE)\n        }}\n      >\n        {t('closeCta')}\n      </Button>\n    </ActionsLayout>\n  )\n}\nPrintChecksFailure.Footer = Footer\n"],"names":["PrintChecksFailure","props","jsx","BaseComponent","Root","dictionary","errorMessage","onEvent","className","useComponentDictionary","useI18n","t","useTranslation","Alert","Button","useComponentContext","Flex","ActionsLayout","printChecksEvents","Footer"],"mappings":";;;;;;;;;AAaO,SAASA,EAAmBC,GAAgC;AACjE,SACE,gBAAAC,EAACC,GAAA,EAAe,GAAGF,GACjB,UAAA,gBAAAC,EAACE,KAAM,GAAGH,GAAQ,UAAAA,EAAM,SAAA,CAAS,EAAA,CACnC;AAEJ;AAEA,MAAMG,IAAO,CAAC,EAAE,YAAAC,GAAY,cAAAC,GAAc,SAAAC,GAAS,WAAAC,QAAyC;AAC1F,EAAAC,EAAuB,8BAA8BJ,CAAU,GAC/DK,EAAQ,4BAA4B;AACpC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4BAA4B,GACnD,EAAE,OAAAC,GAAO,QAAAC,EAAA,IAAWC,EAAA;AAE1B,2BACGC,GAAA,EAAK,WAAAR,GAAsB,eAAc,UAAS,KAAK,IACtD,UAAA;AAAA,IAAA,gBAAAN,EAACW,GAAA,EAAM,QAAO,SAAQ,uBAAqB,IAAC,OAAOF,EAAE,aAAa,GAC/D,UAAAL,EAAA,CACH;AAAA,sBACCW,GAAA,EACC,UAAA,gBAAAf;AAAA,MAACY;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,SAAS,MAAM;AACb,UAAAP,EAAQW,EAAkB,kBAAkB;AAAA,QAC9C;AAAA,QAEC,YAAE,UAAU;AAAA,MAAA;AAAA,IAAA,EACf,CACF;AAAA,EAAA,GACF;AAEJ,GAEMC,IAAS,CAAC,EAAE,SAAAZ,QAA4D;AAC5E,EAAAG,EAAQ,4BAA4B;AACpC,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,4BAA4B,GACnD,EAAE,QAAAE,EAAA,IAAWC,EAAA;AAEnB,2BACGE,GAAA,EACC,UAAA,gBAAAf;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,SAAS,MAAM;AACb,QAAAP,EAAQW,EAAkB,kBAAkB;AAAA,MAC9C;AAAA,MAEC,YAAE,UAAU;AAAA,IAAA;AAAA,EAAA,GAEjB;AAEJ;AACAlB,EAAmB,SAASmB;"}