@gusto/embedded-react-sdk 0.52.2 → 0.54.0

package/dist/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.js

@@ -1,102 +1,125 @@
-import { jsx as o, jsxs as u } from "react/jsx-runtime";
-import { useTranslation as I, Trans as S } from "react-i18next";
-import c from "dompurify";
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useTranslation as v } from "react-i18next";
+import b from "dompurify";
 import { useSplitPaymentsForm as B } from "../useSplitPaymentsForm/useSplitPaymentsForm.js";
-import { ActionsLayout as P } from "../../../../Common/ActionsLayout/ActionsLayout.js";
-import { useComponentContext as v } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import "react";
-import { Form as R } from "../../../../Common/Form/Form.js";
-import { ReorderableList as D } from "../../../../Common/ReorderableList/ReorderableList.js";
-import { BaseLayout as b } from "../../../../Base/Base.js";
-import { SDKFormProvider as T } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
-import { useI18n as C, useComponentDictionary as N } from "../../../../../i18n/I18n.js";
-import { SPLIT_BY as p } from "../../../../../shared/constants.js";
+import { Flex as c } from "../../../../Common/Flex/Flex.js";
+import { ActionsLayout as D } from "../../../../Common/ActionsLayout/ActionsLayout.js";
+import { Form as P } from "../../../../Common/Form/Form.js";
+import { ReorderableList as R } from "../../../../Common/ReorderableList/ReorderableList.js";
+import { BaseLayout as f } from "../../../../Base/Base.js";
+import { SDKFormProvider as x } from "../../../../../partner-hook-utils/form/SDKFormProvider.js";
+import { useComponentContext as N } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useI18n as T, useComponentDictionary as C } from "../../../../../i18n/I18n.js";
+import { SPLIT_BY as y } from "../../../../../shared/constants.js";
 function K({
-  dictionary: i,
-  onSaved: l,
-  onCancel: r,
+  dictionary: s,
+  onSaved: m,
+  onCancel: o,
+  LoaderComponent: i,
   ...e
 }) {
-  C("Employee.SplitPaymentsFormBody"), N("Employee.SplitPaymentsFormBody", i);
+  T("Employee.SplitPaymentsFormBody"), C("Employee.SplitPaymentsFormBody", s);
   const n = B(e);
-  return n.isLoading ? /* @__PURE__ */ o(b, { isLoading: !0, error: n.errorHandling.errors }) : /* @__PURE__ */ o(F, { onSaved: l, onCancel: r, splitForm: n });
+  return n.isLoading ? /* @__PURE__ */ t(
+    f,
+    {
+      isLoading: !0,
+      error: n.errorHandling.errors,
+      LoaderComponent: i
+    }
+  ) : /* @__PURE__ */ t(
+    F,
+    {
+      onSaved: m,
+      onCancel: o,
+      splitForm: n,
+      LoaderComponent: i
+    }
+  );
 }
 function F({
-  onSaved: i,
-  onCancel: l,
-  splitForm: r
+  onSaved: s,
+  onCancel: m,
+  splitForm: o,
+  LoaderComponent: i
 }) {
-  const { t: e } = I("Employee.SplitPaymentsFormBody"), n = v(), { Fields: a } = r.form, { remainderId: y, bankAccounts: f } = r.data, { splitBy: m, percentageTotal: g, hasPercentageImbalance: E } = r.status, L = async () => {
-    const t = await r.actions.onSubmit();
-    t && i(t.data);
+  const { t: e } = v("Employee.SplitPaymentsFormBody"), n = N(), { Fields: l } = o.form, { remainderId: g, bankAccounts: h } = o.data, { splitBy: u, percentageTotal: E, hasPercentageImbalance: L } = o.status, A = async () => {
+    const r = await o.actions.onSubmit();
+    r && s(r.data);
   };
-  if (f.length < 2) return null;
-  const d = (t) => e("splitAmountLabel", {
-    name: c.sanitize(t.name ?? ""),
-    account_number: c.sanitize(t.hiddenAccountNumber ?? ""),
+  if (h.length < 2) return null;
+  const p = (r) => e("splitAmountLabel", {
+    name: b.sanitize(r.name ?? ""),
+    account_number: b.sanitize(r.hiddenAccountNumber ?? ""),
     interpolation: { escapeValue: !1 }
-  }), A = (t) => {
-    const h = t.map((s) => a.splits[s]?.uuid).filter((s) => !!s);
-    r.actions.reorderSplits(h);
+  }), I = (r) => {
+    const S = r.map((d) => l.splits[d]?.uuid).filter((d) => !!d);
+    o.actions.reorderSplits(S);
   };
-  return /* @__PURE__ */ o(b, { error: r.errorHandling.errors, children: /* @__PURE__ */ o(T, { formHookResult: r, children: /* @__PURE__ */ u(R, { onSubmit: L, children: [
-    E && /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(f, { error: o.errorHandling.errors, LoaderComponent: i, children: /* @__PURE__ */ t(x, { formHookResult: o, children: /* @__PURE__ */ a(P, { onSubmit: A, children: [
+    L && /* @__PURE__ */ t(
       n.Alert,
       {
         status: "error",
-        label: e("validations.percentageErrorWithTotal", { total: g }),
+        label: e("validations.percentageErrorWithTotal", { total: E }),
         disableScrollIntoView: !0
       }
     ),
-    /* @__PURE__ */ o(n.Heading, { as: "h2", children: e("title") }),
-    /* @__PURE__ */ o(S, { t: e, i18nKey: "splitDescription", components: { p: /* @__PURE__ */ o(n.Text, {}) } }),
-    /* @__PURE__ */ o(
-      a.SplitBy,
-      {
-        label: e("splitByLabel"),
-        getOptionLabel: (t) => t === p.percentage ? e("percentageLabel") : e("amountLabel")
-      }
-    ),
-    m === p.amount ? /* @__PURE__ */ o(
-      D,
-      {
-        label: e("draggableListLabel"),
-        items: a.splits.map((t) => ({
-          label: t.name ?? "",
-          content: /* @__PURE__ */ o(
-            t.Field,
-            {
-              label: d(t),
-              min: 0,
-              validationMessages: {
-                REQUIRED: e("validations.amountError"),
-                INVALID_AMOUNT: e("validations.amountError"),
-                INVALID_PERCENTAGE: e("validations.amountError")
-              },
-              placeholder: y === t.uuid ? e("remainderLabel") : ""
-            },
-            `amount-${t.uuid}`
-          )
-        })),
-        onReorder: A
-      },
-      `reorderable-amount-list-${m}`
-    ) : a.splits.map((t) => /* @__PURE__ */ o(
-      t.Field,
-      {
-        label: d(t),
-        min: 0,
-        validationMessages: {
-          REQUIRED: e("validations.percentageAmountError"),
-          INVALID_AMOUNT: e("validations.percentageAmountError"),
-          INVALID_PERCENTAGE: e("validations.percentageAmountError")
-        }
-      },
-      `percentage-${t.uuid}`
-    )),
-    /* @__PURE__ */ u(P, { children: [
-      /* @__PURE__ */ o(n.Button, { variant: "secondary", type: "button", onClick: l, children: e("cancelCta") }),
-      /* @__PURE__ */ o(n.Button, { type: "submit", isLoading: r.status.isPending, children: e("saveCta") })
+    /* @__PURE__ */ a(c, { flexDirection: "column", gap: 32, children: [
+      /* @__PURE__ */ a(c, { flexDirection: "column", gap: 4, children: [
+        /* @__PURE__ */ t(n.Heading, { as: "h1", styledAs: "h2", children: e("title") }),
+        /* @__PURE__ */ t(n.Text, { variant: "supporting", children: e("splitDescription") })
+      ] }),
+      /* @__PURE__ */ a(c, { flexDirection: "column", gap: 20, children: [
+        /* @__PURE__ */ t(
+          l.SplitBy,
+          {
+            label: e("splitByLabel"),
+            getOptionLabel: (r) => r === y.percentage ? e("percentageLabel") : e("amountLabel")
+          }
+        ),
+        u === y.amount ? /* @__PURE__ */ t(
+          R,
+          {
+            label: e("draggableListLabel"),
+            items: l.splits.map((r) => ({
+              label: r.name ?? "",
+              content: /* @__PURE__ */ t(
+                r.Field,
+                {
+                  label: p(r),
+                  min: 0,
+                  validationMessages: {
+                    REQUIRED: e("validations.amountError"),
+                    INVALID_AMOUNT: e("validations.amountError"),
+                    INVALID_PERCENTAGE: e("validations.amountError")
+                  },
+                  placeholder: g === r.uuid ? e("remainderLabel") : ""
+                },
+                `amount-${r.uuid}`
+              )
+            })),
+            onReorder: I
+          },
+          `reorderable-amount-list-${u}`
+        ) : l.splits.map((r) => /* @__PURE__ */ t(
+          r.Field,
+          {
+            label: p(r),
+            min: 0,
+            validationMessages: {
+              REQUIRED: e("validations.percentageAmountError"),
+              INVALID_AMOUNT: e("validations.percentageAmountError"),
+              INVALID_PERCENTAGE: e("validations.percentageAmountError")
+            }
+          },
+          `percentage-${r.uuid}`
+        ))
+      ] })
+    ] }),
+    /* @__PURE__ */ a(D, { children: [
+      /* @__PURE__ */ t(n.Button, { variant: "secondary", type: "button", onClick: m, children: e("cancelCta") }),
+      /* @__PURE__ */ t(n.Button, { type: "submit", isLoading: o.status.isPending, children: e("saveCta") })
     ] })
   ] }) }) });
 }

package/dist/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitPaymentsFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport DOMPurify from 'dompurify'\nimport type { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport {\n  useSplitPaymentsForm,\n  type SplitByValue,\n  type SplitFieldEntry,\n  type UseSplitPaymentsFormProps,\n  type UseSplitPaymentsFormReady,\n} from '../useSplitPaymentsForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { SPLIT_BY } from '@/shared/constants'\nimport type { ResourceDictionary } from '@/types/Helpers'\n\n/** @internal */\nexport type SplitPaymentsFormBodyDictionary = ResourceDictionary<'Employee.SplitPaymentsFormBody'>\n\n/** @internal */\nexport interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: SplitPaymentsFormBodyDictionary\n  /** Called with the updated payment method after a successful submit. */\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n}\n\n/**\n * Shared split-paycheck form body. Owns the `useSplitPaymentsForm` composition,\n * the reorderable-list/percentage field JSX, and the submit/cancel actions.\n * Reads its copy from the internal `Employee.SplitPaymentsFormBody` namespace;\n * consuming surfaces inject their own copy via the `dictionary` prop and map the\n * `onSaved`/`onCancel` callbacks onto their surface-specific events.\n *\n * @internal\n */\nexport function SplitPaymentsFormBody({\n  dictionary,\n  onSaved,\n  onCancel,\n  ...hookProps\n}: SplitPaymentsFormBodyProps) {\n  useI18n('Employee.SplitPaymentsFormBody')\n  useComponentDictionary('Employee.SplitPaymentsFormBody', dictionary)\n  const splitForm = useSplitPaymentsForm(hookProps)\n\n  if (splitForm.isLoading) {\n    return <BaseLayout isLoading error={splitForm.errorHandling.errors} />\n  }\n\n  return <SplitPaymentsFormBodyReady onSaved={onSaved} onCancel={onCancel} splitForm={splitForm} />\n}\n\ninterface SplitPaymentsFormBodyReadyProps {\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  splitForm: UseSplitPaymentsFormReady\n}\n\nfunction SplitPaymentsFormBodyReady({\n  onSaved,\n  onCancel,\n  splitForm,\n}: SplitPaymentsFormBodyReadyProps) {\n  const { t } = useTranslation('Employee.SplitPaymentsFormBody')\n  const Components = useComponentContext()\n  const { Fields } = splitForm.form\n  const { remainderId, bankAccounts } = splitForm.data\n  const { splitBy, percentageTotal, hasPercentageImbalance } = splitForm.status\n\n  const handleSubmit = async () => {\n    const result = await splitForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  if (bankAccounts.length < 2) return null\n\n  const labelForSplit = (split: SplitFieldEntry) =>\n    t('splitAmountLabel', {\n      name: DOMPurify.sanitize(split.name ?? ''),\n      account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n      interpolation: { escapeValue: false },\n    })\n\n  const handleReorder = (indices: number[]) => {\n    const orderedUuids = indices\n      .map(index => Fields.splits[index]?.uuid)\n      .filter((uuid): uuid is string => Boolean(uuid))\n    splitForm.actions.reorderSplits(orderedUuids)\n  }\n\n  return (\n    <BaseLayout error={splitForm.errorHandling.errors}>\n      <SDKFormProvider formHookResult={splitForm}>\n        <Form onSubmit={handleSubmit}>\n          {hasPercentageImbalance && (\n            <Components.Alert\n              status=\"error\"\n              label={t('validations.percentageErrorWithTotal', { total: percentageTotal })}\n              disableScrollIntoView\n            />\n          )}\n          <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n          <Trans t={t} i18nKey=\"splitDescription\" components={{ p: <Components.Text /> }} />\n          <Fields.SplitBy\n            label={t('splitByLabel')}\n            getOptionLabel={(value: SplitByValue) =>\n              value === SPLIT_BY.percentage ? t('percentageLabel') : t('amountLabel')\n            }\n          />\n          {splitBy === SPLIT_BY.amount ? (\n            <ReorderableList\n              key={`reorderable-amount-list-${splitBy}`}\n              label={t('draggableListLabel')}\n              items={Fields.splits.map(split => ({\n                label: split.name ?? '',\n                content: (\n                  <split.Field\n                    key={`amount-${split.uuid}`}\n                    label={labelForSplit(split)}\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('validations.amountError'),\n                      INVALID_AMOUNT: t('validations.amountError'),\n                      INVALID_PERCENTAGE: t('validations.amountError'),\n                    }}\n                    placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n                  />\n                ),\n              }))}\n              onReorder={handleReorder}\n            />\n          ) : (\n            Fields.splits.map(split => (\n              <split.Field\n                key={`percentage-${split.uuid}`}\n                label={labelForSplit(split)}\n                min={0}\n                validationMessages={{\n                  REQUIRED: t('validations.percentageAmountError'),\n                  INVALID_AMOUNT: t('validations.percentageAmountError'),\n                  INVALID_PERCENTAGE: t('validations.percentageAmountError'),\n                }}\n              />\n            ))\n          )}\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={splitForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["SplitPaymentsFormBody","dictionary","onSaved","onCancel","hookProps","useI18n","useComponentDictionary","splitForm","useSplitPaymentsForm","BaseLayout","jsx","SplitPaymentsFormBodyReady","t","useTranslation","Components","useComponentContext","Fields","remainderId","bankAccounts","splitBy","percentageTotal","hasPercentageImbalance","handleSubmit","result","labelForSplit","split","DOMPurify","handleReorder","indices","orderedUuids","index","uuid","SDKFormProvider","jsxs","Form","Trans","value","SPLIT_BY","ReorderableList","ActionsLayout"],"mappings":"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"}
+{"version":3,"file":"SplitPaymentsFormBody.js","sources":["../../../../../../src/components/Employee/PaymentMethod/shared/SplitPaymentsFormBody/SplitPaymentsFormBody.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport DOMPurify from 'dompurify'\nimport type { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod'\nimport {\n  useSplitPaymentsForm,\n  type SplitByValue,\n  type SplitFieldEntry,\n  type UseSplitPaymentsFormProps,\n  type UseSplitPaymentsFormReady,\n} from '../useSplitPaymentsForm'\nimport { ActionsLayout } from '@/components/Common'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common/Flex'\nimport { ReorderableList } from '@/components/Common/ReorderableList'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { SPLIT_BY } from '@/shared/constants'\nimport type { ResourceDictionary } from '@/types/Helpers'\nimport type { LoaderComponentType } from '@/components/Base'\n\n/** @internal */\nexport type SplitPaymentsFormBodyDictionary = ResourceDictionary<'Employee.SplitPaymentsFormBody'>\n\n/** @internal */\nexport interface SplitPaymentsFormBodyProps extends UseSplitPaymentsFormProps {\n  /**\n   * Translation overrides for the form's strings. Each consuming surface passes\n   * the dictionary it resolved from its own namespace so partner overrides on\n   * that namespace flow into the shared form text.\n   */\n  dictionary?: SplitPaymentsFormBodyDictionary\n  /** Called with the updated payment method after a successful submit. */\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Shared split-paycheck form body. Owns the `useSplitPaymentsForm` composition,\n * the reorderable-list/percentage field JSX, and the submit/cancel actions.\n * Reads its copy from the internal `Employee.SplitPaymentsFormBody` namespace;\n * consuming surfaces inject their own copy via the `dictionary` prop and map the\n * `onSaved`/`onCancel` callbacks onto their surface-specific events.\n *\n * @internal\n */\nexport function SplitPaymentsFormBody({\n  dictionary,\n  onSaved,\n  onCancel,\n  LoaderComponent,\n  ...hookProps\n}: SplitPaymentsFormBodyProps) {\n  useI18n('Employee.SplitPaymentsFormBody')\n  useComponentDictionary('Employee.SplitPaymentsFormBody', dictionary)\n  const splitForm = useSplitPaymentsForm(hookProps)\n\n  if (splitForm.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={splitForm.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  return (\n    <SplitPaymentsFormBodyReady\n      onSaved={onSaved}\n      onCancel={onCancel}\n      splitForm={splitForm}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface SplitPaymentsFormBodyReadyProps {\n  onSaved: (paymentMethod: EmployeePaymentMethod) => void\n  onCancel: () => void\n  splitForm: UseSplitPaymentsFormReady\n  LoaderComponent?: LoaderComponentType\n}\n\nfunction SplitPaymentsFormBodyReady({\n  onSaved,\n  onCancel,\n  splitForm,\n  LoaderComponent,\n}: SplitPaymentsFormBodyReadyProps) {\n  const { t } = useTranslation('Employee.SplitPaymentsFormBody')\n  const Components = useComponentContext()\n  const { Fields } = splitForm.form\n  const { remainderId, bankAccounts } = splitForm.data\n  const { splitBy, percentageTotal, hasPercentageImbalance } = splitForm.status\n\n  const handleSubmit = async () => {\n    const result = await splitForm.actions.onSubmit()\n    if (result) {\n      onSaved(result.data)\n    }\n  }\n\n  if (bankAccounts.length < 2) return null\n\n  const labelForSplit = (split: SplitFieldEntry) =>\n    t('splitAmountLabel', {\n      name: DOMPurify.sanitize(split.name ?? ''),\n      account_number: DOMPurify.sanitize(split.hiddenAccountNumber ?? ''),\n      interpolation: { escapeValue: false },\n    })\n\n  const handleReorder = (indices: number[]) => {\n    const orderedUuids = indices\n      .map(index => Fields.splits[index]?.uuid)\n      .filter((uuid): uuid is string => Boolean(uuid))\n    splitForm.actions.reorderSplits(orderedUuids)\n  }\n\n  return (\n    <BaseLayout error={splitForm.errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <SDKFormProvider formHookResult={splitForm}>\n        <Form onSubmit={handleSubmit}>\n          {hasPercentageImbalance && (\n            <Components.Alert\n              status=\"error\"\n              label={t('validations.percentageErrorWithTotal', { total: percentageTotal })}\n              disableScrollIntoView\n            />\n          )}\n          <Flex flexDirection=\"column\" gap={32}>\n            <Flex flexDirection=\"column\" gap={4}>\n              <Components.Heading as=\"h1\" styledAs=\"h2\">\n                {t('title')}\n              </Components.Heading>\n              <Components.Text variant=\"supporting\">{t('splitDescription')}</Components.Text>\n            </Flex>\n            <Flex flexDirection=\"column\" gap={20}>\n              <Fields.SplitBy\n                label={t('splitByLabel')}\n                getOptionLabel={(value: SplitByValue) =>\n                  value === SPLIT_BY.percentage ? t('percentageLabel') : t('amountLabel')\n                }\n              />\n              {splitBy === SPLIT_BY.amount ? (\n                <ReorderableList\n                  key={`reorderable-amount-list-${splitBy}`}\n                  label={t('draggableListLabel')}\n                  items={Fields.splits.map(split => ({\n                    label: split.name ?? '',\n                    content: (\n                      <split.Field\n                        key={`amount-${split.uuid}`}\n                        label={labelForSplit(split)}\n                        min={0}\n                        validationMessages={{\n                          REQUIRED: t('validations.amountError'),\n                          INVALID_AMOUNT: t('validations.amountError'),\n                          INVALID_PERCENTAGE: t('validations.amountError'),\n                        }}\n                        placeholder={remainderId === split.uuid ? t('remainderLabel') : ''}\n                      />\n                    ),\n                  }))}\n                  onReorder={handleReorder}\n                />\n              ) : (\n                Fields.splits.map(split => (\n                  <split.Field\n                    key={`percentage-${split.uuid}`}\n                    label={labelForSplit(split)}\n                    min={0}\n                    validationMessages={{\n                      REQUIRED: t('validations.percentageAmountError'),\n                      INVALID_AMOUNT: t('validations.percentageAmountError'),\n                      INVALID_PERCENTAGE: t('validations.percentageAmountError'),\n                    }}\n                  />\n                ))\n              )}\n            </Flex>\n          </Flex>\n          <ActionsLayout>\n            <Components.Button variant=\"secondary\" type=\"button\" onClick={onCancel}>\n              {t('cancelCta')}\n            </Components.Button>\n            <Components.Button type=\"submit\" isLoading={splitForm.status.isPending}>\n              {t('saveCta')}\n            </Components.Button>\n          </ActionsLayout>\n        </Form>\n      </SDKFormProvider>\n    </BaseLayout>\n  )\n}\n"],"names":["SplitPaymentsFormBody","dictionary","onSaved","onCancel","LoaderComponent","hookProps","useI18n","useComponentDictionary","splitForm","useSplitPaymentsForm","jsx","BaseLayout","SplitPaymentsFormBodyReady","t","useTranslation","Components","useComponentContext","Fields","remainderId","bankAccounts","splitBy","percentageTotal","hasPercentageImbalance","handleSubmit","result","labelForSplit","split","DOMPurify","handleReorder","indices","orderedUuids","index","uuid","SDKFormProvider","jsxs","Form","Flex","value","SPLIT_BY","ReorderableList","ActionsLayout"],"mappings":"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"}

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.d.ts

@@ -1,5 +1,6 @@
 import { EventType } from '../../../../../shared/constants';
 import { OnEventType } from '../../../../Base/useBase';
+import { LoaderComponentType } from '../../../../Base';
 /**
  * Props for {@link PaystubsCard}.
  *
@@ -10,6 +11,8 @@ export interface PaystubsCardProps {
     employeeId: string;
     /** Event handler fired when paystub interactions occur. */
     onEvent: OnEventType<EventType, unknown>;
+    /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */
+    LoaderComponent?: LoaderComponentType;
 }
 /**
  * Standalone "Paystubs" card. Owns its own data fetch via
@@ -22,4 +25,4 @@ export interface PaystubsCardProps {
  *
  * @public
  */
-export declare function PaystubsCard(props: PaystubsCardProps): import("react").JSX.Element;
+export declare function PaystubsCard({ LoaderComponent, ...props }: PaystubsCardProps): import("react").JSX.Element;

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js

@@ -1,70 +1,73 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as N, useCallback as U } from "react";
+import { useState as R, useCallback as _ } from "react";
 import { useTranslation as C } from "react-i18next";
-import { useErrorBoundary as R } from "react-error-boundary";
-import { Loading as _ } from "../../../../Common/Loading/Loading.js";
-import { EmptyData as b } from "../../../../Common/EmptyData/EmptyData.js";
-import { useComponentContext as D } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { BaseBoundaries as O, BaseLayout as L } from "../../../../Base/Base.js";
-import { composeErrorHandler as T } from "../../../../../partner-hook-utils/composeErrorHandler.js";
-import { usePaymentMethodList as v } from "../../../PaymentMethod/shared/usePaymentMethodList.js";
-import { formatDateLongWithYear as j } from "../../../../../helpers/dateFormatting.js";
-import W from "../../../../../hooks/useNumberFormatter.js";
-import { useI18n as Y } from "../../../../../i18n/I18n.js";
-import { componentEvents as w } from "../../../../../shared/constants.js";
-import H from "../../../../../assets/icons/download-cloud.svg.js";
-import { usePaystubsList as F } from "../../shared/usePaystubsList/usePaystubsList.js";
-import { useDataView as V } from "../../../../Common/DataView/useDataView.js";
-import { DataView as G } from "../../../../Common/DataView/DataView.js";
-function mt(i) {
-  return /* @__PURE__ */ r(O, { componentName: "Employee.Management.Paystubs", children: /* @__PURE__ */ r(Q, { ...i }) });
+import { useErrorBoundary as O } from "react-error-boundary";
+import { Loading as T } from "../../../../Common/Loading/Loading.js";
+import { EmptyData as D } from "../../../../Common/EmptyData/EmptyData.js";
+import { BaseBoundaries as v, BaseLayout as x } from "../../../../Base/Base.js";
+import { useComponentContext as L } from "../../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { composeErrorHandler as j } from "../../../../../partner-hook-utils/composeErrorHandler.js";
+import { usePaymentMethodList as W } from "../../../PaymentMethod/shared/usePaymentMethodList.js";
+import { formatDateLongWithYear as Y } from "../../../../../helpers/dateFormatting.js";
+import H from "../../../../../hooks/useNumberFormatter.js";
+import { useI18n as F } from "../../../../../i18n/I18n.js";
+import { componentEvents as M } from "../../../../../shared/constants.js";
+import V from "../../../../../assets/icons/download-cloud.svg.js";
+import { usePaystubsList as G } from "../../shared/usePaystubsList/usePaystubsList.js";
+import { useNonce as Q } from "../../../../../contexts/NonceProvider/useNonce.js";
+import { useDataView as q } from "../../../../Common/DataView/useDataView.js";
+import { DataView as z } from "../../../../Common/DataView/DataView.js";
+function ft({ LoaderComponent: i, ...s }) {
+  return /* @__PURE__ */ r(v, { componentName: "Employee.Management.Paystubs", LoaderComponent: i, children: /* @__PURE__ */ r(J, { LoaderComponent: i, ...s }) });
 }
-function Q({ employeeId: i, onEvent: c }) {
-  Y("Employee.Management.Paystubs");
-  const { t: s } = C("Employee.Management.Paystubs"), l = D(), m = F({ employeeId: i }), n = v({ employeeId: i }), d = T([m, n]);
-  return m.isLoading ? /* @__PURE__ */ r(L, { error: d.errors, children: /* @__PURE__ */ r(l.Box, { header: /* @__PURE__ */ r(l.BoxHeader, { title: s("title") }), children: /* @__PURE__ */ r(_, {}) }) }) : /* @__PURE__ */ r(
-    q,
+function J({ employeeId: i, onEvent: s, LoaderComponent: c }) {
+  F("Employee.Management.Paystubs");
+  const { t: m } = C("Employee.Management.Paystubs"), u = L(), l = G({ employeeId: i }), n = W({ employeeId: i }), d = j([l, n]);
+  return l.isLoading ? /* @__PURE__ */ r(x, { error: d.errors, LoaderComponent: c, children: /* @__PURE__ */ r(u.Box, { header: /* @__PURE__ */ r(u.BoxHeader, { title: m("title") }), children: /* @__PURE__ */ r(T, {}) }) }) : /* @__PURE__ */ r(
+    K,
     {
       employeeId: i,
-      onEvent: c,
-      paystubsList: m,
+      onEvent: s,
+      paystubsList: l,
       paymentMethodList: n,
-      errorHandling: d
+      errorHandling: d,
+      LoaderComponent: c
     }
   );
 }
-function q({
+function K({
   employeeId: i,
-  onEvent: c,
-  paystubsList: s,
-  paymentMethodList: l,
-  errorHandling: m
+  onEvent: s,
+  paystubsList: c,
+  paymentMethodList: m,
+  errorHandling: u,
+  LoaderComponent: l
 }) {
-  const { t: n } = C("Employee.Management.Paystubs"), d = D(), u = W("currency"), { showBoundary: y } = R(), [M, f] = N(
+  const { t: n } = C("Employee.Management.Paystubs"), d = L(), f = H("currency"), { showBoundary: h } = O(), p = Q(), [S, g] = R(
     () => /* @__PURE__ */ new Set()
-  ), { payStubs: h } = s.data, x = s.pagination.payStubs, S = l.isLoading ? void 0 : l.data.paymentMethod, k = U(
+  ), { payStubs: E } = c.data, N = c.pagination.payStubs, k = m.isLoading ? void 0 : m.data.paymentMethod, A = _(
     async (t) => {
-      c(w.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {
+      s(M.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {
         employeeId: i,
         payrollUuid: t
       });
-      const o = window.open("", "_blank"), E = n("downloadLoadingMessage");
+      const o = window.open("", "_blank"), b = n("downloadLoadingMessage");
       if (o) {
         const e = o.document;
-        e.title = E;
+        e.title = b;
         const a = e.createElement("style");
-        a.textContent = "body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#444;gap:12px}.spinner{width:20px;height:20px;border:2px solid #ccc;border-top-color:#444;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}", e.head.appendChild(a);
-        const p = e.createElement("div");
-        p.className = "spinner", p.setAttribute("aria-hidden", "true");
-        const P = e.createElement("span");
-        P.textContent = E, e.body.replaceChildren(p, P);
+        p && (a.nonce = p), a.textContent = "body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;height:100vh;margin:0;color:#444;gap:12px}.spinner{width:20px;height:20px;border:2px solid #ccc;border-top-color:#444;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}", e.head.appendChild(a);
+        const y = e.createElement("div");
+        y.className = "spinner", y.setAttribute("aria-hidden", "true");
+        const w = e.createElement("span");
+        w.textContent = b, e.body.replaceChildren(y, w);
       }
-      f((e) => {
+      g((e) => {
         const a = new Set(e);
         return a.add(t), a;
       });
       try {
-        const e = await s.actions.downloadPayStub(t);
+        const e = await c.actions.downloadPayStub(t);
         if (!e) {
           o && o.close();
           return;
@@ -72,26 +75,26 @@ function q({
         const a = URL.createObjectURL(e.data);
         o ? (o.addEventListener("load", () => {
           URL.revokeObjectURL(a);
-        }), o.location.href = a) : URL.revokeObjectURL(a), c(w.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {
+        }), o.location.href = a) : URL.revokeObjectURL(a), s(M.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {
           employeeId: i,
           payrollUuid: t
         });
       } catch (e) {
-        o && o.close(), y(e instanceof Error ? e : new Error(String(e)));
+        o && o.close(), h(e instanceof Error ? e : new Error(String(e)));
       } finally {
-        f((e) => {
+        g((e) => {
           if (!e.has(t)) return e;
           const a = new Set(e);
           return a.delete(t), a;
         });
       }
     },
-    [s.actions, c, i, n, y]
-  ), A = [
+    [c.actions, s, i, n, h, p]
+  ), B = [
     {
       key: "payday",
       title: n("payday"),
-      render: (t) => j(t.checkDate) || "-"
+      render: (t) => Y(t.checkDate) || "-"
     },
     {
       key: "checkAmount",
@@ -99,7 +102,7 @@ function q({
       render: (t) => {
         if (!t.netPay) return "-";
         const o = parseFloat(t.netPay);
-        return isNaN(o) ? "-" : u(o);
+        return isNaN(o) ? "-" : f(o);
       }
     },
     {
@@ -108,20 +111,20 @@ function q({
       render: (t) => {
         if (!t.grossPay) return "-";
         const o = parseFloat(t.grossPay);
-        return isNaN(o) ? "-" : u(o);
+        return isNaN(o) ? "-" : f(o);
       }
     },
     {
       key: "paymentMethod",
       title: n("paymentMethod"),
-      render: () => S?.type || n("noPaymentMethod")
+      render: () => k?.type || n("noPaymentMethod")
     }
-  ], B = V({
-    data: h,
-    columns: A,
-    pagination: x,
+  ], U = q({
+    data: E,
+    columns: B,
+    pagination: N,
     itemMenu: (t) => {
-      const o = !!t.payrollUuid && M.has(t.payrollUuid);
+      const o = !!t.payrollUuid && S.has(t.payrollUuid);
       return /* @__PURE__ */ r(
         d.ButtonIcon,
         {
@@ -130,24 +133,24 @@ function q({
           isDisabled: !t.payrollUuid,
           isLoading: o,
           onClick: () => {
-            t.payrollUuid && k(t.payrollUuid);
+            t.payrollUuid && A(t.payrollUuid);
           },
-          children: /* @__PURE__ */ r(H, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ r(V, { "aria-hidden": !0 })
         }
       );
     },
-    emptyState: () => /* @__PURE__ */ r(b, { title: n("emptyState.title"), description: n("emptyState.description") })
-  }), g = h.length > 0;
-  return /* @__PURE__ */ r(L, { error: m.errors, children: /* @__PURE__ */ r(
+    emptyState: () => /* @__PURE__ */ r(D, { title: n("emptyState.title"), description: n("emptyState.description") })
+  }), P = E.length > 0;
+  return /* @__PURE__ */ r(x, { error: u.errors, LoaderComponent: l, children: /* @__PURE__ */ r(
     d.Box,
     {
-      withPadding: !g,
+      withPadding: !P,
       header: /* @__PURE__ */ r(d.BoxHeader, { title: n("title") }),
-      children: g ? /* @__PURE__ */ r(G, { label: n("listLabel"), isWithinBox: !0, ...B }) : /* @__PURE__ */ r(b, { title: n("emptyState.title"), description: n("emptyState.description") })
+      children: P ? /* @__PURE__ */ r(z, { label: n("listLabel"), isWithinBox: !0, ...U }) : /* @__PURE__ */ r(D, { title: n("emptyState.title"), description: n("emptyState.description") })
     }
   ) });
 }
 export {
-  mt as PaystubsCard
+  ft as PaystubsCard
 };
 //# sourceMappingURL=PaystubsCard.js.map

package/dist/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaystubsCard.js","sources":["../../../../../../src/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useErrorBoundary } from 'react-error-boundary'\nimport {\n  usePaystubsList,\n  type EmployeePayStub,\n  type UsePaystubsListReady,\n} from '../../shared/usePaystubsList'\nimport { DataView, EmptyData, useDataView, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListResult,\n} from '@/components/Employee/PaymentMethod/shared'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport DownloadCloudIcon from '@/assets/icons/download-cloud.svg?react'\n\n/**\n * Props for {@link PaystubsCard}.\n *\n * @public\n */\nexport interface PaystubsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when paystub interactions occur. */\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**\n * Standalone \"Paystubs\" card. Owns its own data fetch via\n * {@link usePaystubsList} and renders the paginated paystubs table with a\n * per-row PDF download action. Emits the management block's scoped events\n * (`EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_*`) on download request and on\n * download success. The card has no edit transitions and no alert API —\n * paystubs is a read-only surface whose only action is a download side\n * effect that opens the PDF in a new tab.\n *\n * @public\n */\nexport function PaystubsCard(props: PaystubsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Paystubs\">\n      <PaystubsCardContent {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaystubsCardContent({ employeeId, onEvent }: PaystubsCardProps) {\n  useI18n('Employee.Management.Paystubs')\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const paystubsList = usePaystubsList({ employeeId })\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paystubsList, paymentMethodList])\n\n  if (paystubsList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors}>\n        <Components.Box header={<Components.BoxHeader title={t('title')} />}>\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaystubsCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paystubsList={paystubsList}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n    />\n  )\n}\n\ninterface PaystubsCardReadyProps extends PaystubsCardProps {\n  paystubsList: UsePaystubsListReady\n  paymentMethodList: UsePaymentMethodListResult\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaystubsCardReady({\n  employeeId,\n  onEvent,\n  paystubsList,\n  paymentMethodList,\n  errorHandling,\n}: PaystubsCardReadyProps) {\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const { showBoundary } = useErrorBoundary()\n\n  const [downloadingPayrollUuids, setDownloadingPayrollUuids] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const { payStubs } = paystubsList.data\n  const payStubsPagination = paystubsList.pagination.payStubs\n  const paymentMethod = paymentMethodList.isLoading\n    ? undefined\n    : paymentMethodList.data.paymentMethod\n\n  const handleDownload = useCallback(\n    async (payrollUuid: string) => {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {\n        employeeId,\n        payrollUuid,\n      })\n\n      // Omit `noopener` — it makes window.open return null in modern browsers,\n      // which would leave us unable to navigate the new tab to the blob URL.\n      const newWindow = window.open('', '_blank')\n      const loadingMessage = t('downloadLoadingMessage')\n      if (newWindow) {\n        // Avoid the user staring at about:blank while we fetch the PDF. The\n        // navigation to the Blob URL below replaces this document.\n        const doc = newWindow.document\n        doc.title = loadingMessage\n        const style = doc.createElement('style')\n        style.textContent =\n          'body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;' +\n          'justify-content:center;height:100vh;margin:0;color:#444;gap:12px}' +\n          '.spinner{width:20px;height:20px;border:2px solid #ccc;border-top-color:#444;' +\n          'border-radius:50%;animation:spin .8s linear infinite}' +\n          '@keyframes spin{to{transform:rotate(360deg)}}'\n        doc.head.appendChild(style)\n        const spinner = doc.createElement('div')\n        spinner.className = 'spinner'\n        spinner.setAttribute('aria-hidden', 'true')\n        const label = doc.createElement('span')\n        label.textContent = loadingMessage\n        doc.body.replaceChildren(spinner, label)\n      }\n      setDownloadingPayrollUuids(prev => {\n        const next = new Set(prev)\n        next.add(payrollUuid)\n        return next\n      })\n      try {\n        const result = await paystubsList.actions.downloadPayStub(payrollUuid)\n        if (!result) {\n          if (newWindow) newWindow.close()\n          return\n        }\n        const url = URL.createObjectURL(result.data)\n        if (newWindow) {\n          // Revoke after the new tab has loaded the blob; revoking synchronously\n          // would race the navigation and leave the tab blank.\n          newWindow.addEventListener('load', () => {\n            URL.revokeObjectURL(url)\n          })\n          newWindow.location.href = url\n        } else {\n          URL.revokeObjectURL(url)\n        }\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n          employeeId,\n          payrollUuid,\n        })\n      } catch (err) {\n        if (newWindow) newWindow.close()\n        showBoundary(err instanceof Error ? err : new Error(String(err)))\n      } finally {\n        setDownloadingPayrollUuids(prev => {\n          if (!prev.has(payrollUuid)) return prev\n          const next = new Set(prev)\n          next.delete(payrollUuid)\n          return next\n        })\n      }\n    },\n    [paystubsList.actions, onEvent, employeeId, t, showBoundary],\n  )\n\n  const payStubsColumns = [\n    {\n      key: 'payday',\n      title: t('payday'),\n      render: (payStub: EmployeePayStub) => formatDateLongWithYear(payStub.checkDate) || '-',\n    },\n    {\n      key: 'checkAmount',\n      title: t('checkAmount'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.netPay) return '-'\n        const amount = parseFloat(payStub.netPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'grossPay',\n      title: t('grossPay'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.grossPay) return '-'\n        const amount = parseFloat(payStub.grossPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'paymentMethod',\n      title: t('paymentMethod'),\n      render: () => paymentMethod?.type || t('noPaymentMethod'),\n    },\n  ]\n\n  const payStubsDataView = useDataView({\n    data: payStubs,\n    columns: payStubsColumns,\n    pagination: payStubsPagination,\n    itemMenu: payStub => {\n      const isDownloading =\n        !!payStub.payrollUuid && downloadingPayrollUuids.has(payStub.payrollUuid)\n      return (\n        <Components.ButtonIcon\n          variant=\"tertiary\"\n          aria-label={t('downloadCta')}\n          isDisabled={!payStub.payrollUuid}\n          isLoading={isDownloading}\n          onClick={() => {\n            if (payStub.payrollUuid) {\n              void handleDownload(payStub.payrollUuid)\n            }\n          }}\n        >\n          <DownloadCloudIcon aria-hidden />\n        </Components.ButtonIcon>\n      )\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  const isShowingTable = payStubs.length > 0\n\n  return (\n    <BaseLayout error={errorHandling.errors}>\n      <Components.Box\n        withPadding={!isShowingTable}\n        header={<Components.BoxHeader title={t('title')} />}\n      >\n        {isShowingTable ? (\n          <DataView label={t('listLabel')} isWithinBox {...payStubsDataView} />\n        ) : (\n          <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["PaystubsCard","props","jsx","BaseBoundaries","PaystubsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paystubsList","usePaystubsList","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","Loading","PaystubsCardReady","formatCurrency","useNumberFormatter","showBoundary","useErrorBoundary","downloadingPayrollUuids","setDownloadingPayrollUuids","useState","payStubs","payStubsPagination","paymentMethod","handleDownload","useCallback","payrollUuid","componentEvents","newWindow","loadingMessage","doc","style","spinner","label","prev","next","result","url","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}
+{"version":3,"file":"PaystubsCard.js","sources":["../../../../../../src/components/Employee/Paystubs/management/PaystubsCard/PaystubsCard.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useErrorBoundary } from 'react-error-boundary'\nimport {\n  usePaystubsList,\n  type EmployeePayStub,\n  type UsePaystubsListReady,\n} from '../../shared/usePaystubsList'\nimport { DataView, EmptyData, useDataView, Loading } from '@/components/Common'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useNonce } from '@/contexts/NonceProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport {\n  usePaymentMethodList,\n  type UsePaymentMethodListResult,\n} from '@/components/Employee/PaymentMethod/shared'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useI18n } from '@/i18n'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport DownloadCloudIcon from '@/assets/icons/download-cloud.svg?react'\n\n/**\n * Props for {@link PaystubsCard}.\n *\n * @public\n */\nexport interface PaystubsCardProps {\n  /** The associated employee identifier. */\n  employeeId: string\n  /** Event handler fired when paystub interactions occur. */\n  onEvent: OnEventType<EventType, unknown>\n  /** Custom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on `GustoProvider` for this instance only. */\n  LoaderComponent?: LoaderComponentType\n}\n\n/**\n * Standalone \"Paystubs\" card. Owns its own data fetch via\n * {@link usePaystubsList} and renders the paginated paystubs table with a\n * per-row PDF download action. Emits the management block's scoped events\n * (`EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_*`) on download request and on\n * download success. The card has no edit transitions and no alert API —\n * paystubs is a read-only surface whose only action is a download side\n * effect that opens the PDF in a new tab.\n *\n * @public\n */\nexport function PaystubsCard({ LoaderComponent, ...props }: PaystubsCardProps) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Management.Paystubs\" LoaderComponent={LoaderComponent}>\n      <PaystubsCardContent LoaderComponent={LoaderComponent} {...props} />\n    </BaseBoundaries>\n  )\n}\n\nfunction PaystubsCardContent({ employeeId, onEvent, LoaderComponent }: PaystubsCardProps) {\n  useI18n('Employee.Management.Paystubs')\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const paystubsList = usePaystubsList({ employeeId })\n  const paymentMethodList = usePaymentMethodList({ employeeId })\n\n  const errorHandling = composeErrorHandler([paystubsList, paymentMethodList])\n\n  if (paystubsList.isLoading) {\n    return (\n      <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <Components.Box header={<Components.BoxHeader title={t('title')} />}>\n          <Loading />\n        </Components.Box>\n      </BaseLayout>\n    )\n  }\n\n  return (\n    <PaystubsCardReady\n      employeeId={employeeId}\n      onEvent={onEvent}\n      paystubsList={paystubsList}\n      paymentMethodList={paymentMethodList}\n      errorHandling={errorHandling}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface PaystubsCardReadyProps extends PaystubsCardProps {\n  paystubsList: UsePaystubsListReady\n  paymentMethodList: UsePaymentMethodListResult\n  errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction PaystubsCardReady({\n  employeeId,\n  onEvent,\n  paystubsList,\n  paymentMethodList,\n  errorHandling,\n  LoaderComponent,\n}: PaystubsCardReadyProps) {\n  const { t } = useTranslation('Employee.Management.Paystubs')\n  const Components = useComponentContext()\n  const formatCurrency = useNumberFormatter('currency')\n  const { showBoundary } = useErrorBoundary()\n  const nonce = useNonce()\n\n  const [downloadingPayrollUuids, setDownloadingPayrollUuids] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  )\n\n  const { payStubs } = paystubsList.data\n  const payStubsPagination = paystubsList.pagination.payStubs\n  const paymentMethod = paymentMethodList.isLoading\n    ? undefined\n    : paymentMethodList.data.paymentMethod\n\n  const handleDownload = useCallback(\n    async (payrollUuid: string) => {\n      onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOAD_REQUESTED, {\n        employeeId,\n        payrollUuid,\n      })\n\n      // Omit `noopener` — it makes window.open return null in modern browsers,\n      // which would leave us unable to navigate the new tab to the blob URL.\n      const newWindow = window.open('', '_blank')\n      const loadingMessage = t('downloadLoadingMessage')\n      if (newWindow) {\n        // Avoid the user staring at about:blank while we fetch the PDF. The\n        // navigation to the Blob URL below replaces this document.\n        const doc = newWindow.document\n        doc.title = loadingMessage\n        const style = doc.createElement('style')\n        if (nonce) style.nonce = nonce\n        style.textContent =\n          'body{font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;' +\n          'justify-content:center;height:100vh;margin:0;color:#444;gap:12px}' +\n          '.spinner{width:20px;height:20px;border:2px solid #ccc;border-top-color:#444;' +\n          'border-radius:50%;animation:spin .8s linear infinite}' +\n          '@keyframes spin{to{transform:rotate(360deg)}}'\n        doc.head.appendChild(style)\n        const spinner = doc.createElement('div')\n        spinner.className = 'spinner'\n        spinner.setAttribute('aria-hidden', 'true')\n        const label = doc.createElement('span')\n        label.textContent = loadingMessage\n        doc.body.replaceChildren(spinner, label)\n      }\n      setDownloadingPayrollUuids(prev => {\n        const next = new Set(prev)\n        next.add(payrollUuid)\n        return next\n      })\n      try {\n        const result = await paystubsList.actions.downloadPayStub(payrollUuid)\n        if (!result) {\n          if (newWindow) newWindow.close()\n          return\n        }\n        const url = URL.createObjectURL(result.data)\n        if (newWindow) {\n          // Revoke after the new tab has loaded the blob; revoking synchronously\n          // would race the navigation and leave the tab blank.\n          newWindow.addEventListener('load', () => {\n            URL.revokeObjectURL(url)\n          })\n          newWindow.location.href = url\n        } else {\n          URL.revokeObjectURL(url)\n        }\n        onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n          employeeId,\n          payrollUuid,\n        })\n      } catch (err) {\n        if (newWindow) newWindow.close()\n        showBoundary(err instanceof Error ? err : new Error(String(err)))\n      } finally {\n        setDownloadingPayrollUuids(prev => {\n          if (!prev.has(payrollUuid)) return prev\n          const next = new Set(prev)\n          next.delete(payrollUuid)\n          return next\n        })\n      }\n    },\n    [paystubsList.actions, onEvent, employeeId, t, showBoundary, nonce],\n  )\n\n  const payStubsColumns = [\n    {\n      key: 'payday',\n      title: t('payday'),\n      render: (payStub: EmployeePayStub) => formatDateLongWithYear(payStub.checkDate) || '-',\n    },\n    {\n      key: 'checkAmount',\n      title: t('checkAmount'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.netPay) return '-'\n        const amount = parseFloat(payStub.netPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'grossPay',\n      title: t('grossPay'),\n      render: (payStub: EmployeePayStub) => {\n        if (!payStub.grossPay) return '-'\n        const amount = parseFloat(payStub.grossPay)\n        return isNaN(amount) ? '-' : formatCurrency(amount)\n      },\n    },\n    {\n      key: 'paymentMethod',\n      title: t('paymentMethod'),\n      render: () => paymentMethod?.type || t('noPaymentMethod'),\n    },\n  ]\n\n  const payStubsDataView = useDataView({\n    data: payStubs,\n    columns: payStubsColumns,\n    pagination: payStubsPagination,\n    itemMenu: payStub => {\n      const isDownloading =\n        !!payStub.payrollUuid && downloadingPayrollUuids.has(payStub.payrollUuid)\n      return (\n        <Components.ButtonIcon\n          variant=\"tertiary\"\n          aria-label={t('downloadCta')}\n          isDisabled={!payStub.payrollUuid}\n          isLoading={isDownloading}\n          onClick={() => {\n            if (payStub.payrollUuid) {\n              void handleDownload(payStub.payrollUuid)\n            }\n          }}\n        >\n          <DownloadCloudIcon aria-hidden />\n        </Components.ButtonIcon>\n      )\n    },\n    emptyState: () => (\n      <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n    ),\n  })\n\n  const isShowingTable = payStubs.length > 0\n\n  return (\n    <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n      <Components.Box\n        withPadding={!isShowingTable}\n        header={<Components.BoxHeader title={t('title')} />}\n      >\n        {isShowingTable ? (\n          <DataView label={t('listLabel')} isWithinBox {...payStubsDataView} />\n        ) : (\n          <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n        )}\n      </Components.Box>\n    </BaseLayout>\n  )\n}\n"],"names":["PaystubsCard","LoaderComponent","props","jsx","BaseBoundaries","PaystubsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","paystubsList","usePaystubsList","paymentMethodList","usePaymentMethodList","errorHandling","composeErrorHandler","BaseLayout","Loading","PaystubsCardReady","formatCurrency","useNumberFormatter","showBoundary","useErrorBoundary","nonce","useNonce","downloadingPayrollUuids","setDownloadingPayrollUuids","useState","payStubs","payStubsPagination","paymentMethod","handleDownload","useCallback","payrollUuid","componentEvents","newWindow","loadingMessage","doc","style","spinner","label","prev","next","result","url","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}

package/dist/components/Employee/Profile/management/Profile.d.ts

@@ -27,4 +27,4 @@ export interface ProfileProps extends BaseComponentInterface<'Employee.Managemen
  * @returns The employee profile management surface.
  * @public
  */
-export declare function Profile({ dictionary, FallbackComponent, ...props }: ProfileProps): import("react").JSX.Element;
+export declare function Profile({ dictionary, FallbackComponent, LoaderComponent, ...props }: ProfileProps): import("react").JSX.Element;