npm - @gusto/embedded-react-sdk - Versions diffs - 0.55.4 → 0.55.6 - Mend

@gusto/embedded-react-sdk 0.55.4 → 0.55.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (354) hide show

package/dist/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.js CHANGED Viewed

@@ -17,28 +17,28 @@ import G from "../../../../../assets/icons/trashcan.svg.js";
 import R from "../../../../../assets/icons/pencil.svg.js";
 import { useDataView as H } from "../../../../Common/DataView/useDataView.js";
 import { DataView as I } from "../../../../Common/DataView/DataView.js";
-function de({ LoaderComponent: n, ...r }) {
+function de({ LoaderComponent: o, ...r }) {
   return /* @__PURE__ */ i(
     B,
     {
       componentName: "Employee.Management.Deductions",
-      LoaderComponent: n,
-      children: /* @__PURE__ */ i(V, { LoaderComponent: n, ...r })
+      LoaderComponent: o,
+      children: /* @__PURE__ */ i(j, { LoaderComponent: o, ...r })
     }
   );
 }
-function V({ employeeId: n, onEvent: r, LoaderComponent: D }) {
+function j({ employeeId: o, onEvent: r, LoaderComponent: D }) {
   O("Employee.Management.Deductions");
-  const { t: e } = _("Employee.Management.Deductions"), d = w(), p = u("currency"), f = u("percent"), o = A({ employeeId: n }), {
+  const { t: e } = _("Employee.Management.Deductions"), d = w(), p = u("currency"), f = u("percent"), n = A({ employeeId: o }), {
     pendingDeleteDeduction: c,
     setPendingDeleteDeduction: m,
     handleConfirmDelete: g
   } = P(async (t) => {
-    if (o.isLoading) return;
-    const a = await o.actions.onDelete(t);
+    if (n.isLoading) return;
+    const a = await n.actions.onDelete(t);
     a && r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, a.data.garnishment);
-  }), E = o.isLoading && o.errorHandling.errors.length === 0, C = o.isLoading ? [] : o.data.deductions, l = o.isLoading ? void 0 : o.status.deletingGarnishmentUuid, h = () => {
-    r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId: n });
+  }), E = n.isLoading && n.errorHandling.errors.length === 0, C = n.isLoading ? [] : n.data.deductions, l = n.isLoading ? void 0 : n.status.deletingGarnishmentUuid, h = () => {
+    r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId: o });
   }, y = (t) => {
     r(s.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, t);
   }, L = [
@@ -55,6 +55,7 @@ function V({ employeeId: n, onEvent: r, LoaderComponent: D }) {
     {
       key: "amount",
       title: e("columns.withhold"),
+      justify: "end",
       render: (t) => S(t, {
         formatCurrency: p,
         formatPercent: f,
@@ -89,7 +90,7 @@ function V({ employeeId: n, onEvent: r, LoaderComponent: D }) {
     ),
     emptyState: () => /* @__PURE__ */ i(k, { title: e("emptyState.title"), description: e("emptyState.description") })
   });
-  return /* @__PURE__ */ T(U, { error: o.errorHandling.errors, LoaderComponent: D, children: [
+  return /* @__PURE__ */ T(U, { error: n.errorHandling.errors, LoaderComponent: D, children: [
     /* @__PURE__ */ i(
       d.Box,
       {

package/dist/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeductionsCard.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useDeleteDeduction } from '../../shared/useDeleteDeduction'\nimport { DeleteDeductionDialog } from '../../shared/DeleteDeductionDialog'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\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 PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\n\n/*\n Props for {@link DeductionsCard}.\n \n @public\n /\nexport interface DeductionsCardProps {\n /* The associated employee identifier. /\n employeeId: string\n /* Callback invoked when the card emits an event. See the events table on {@link DeductionsCard} for the available event types and payloads. /\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 read-only card listing an employee's active deductions, with affordances to add, edit, or delete a deduction.\n \n @remarks\n * Fetches its own data and owns the delete confirm dialog. Has no alert API — alert rendering is the consumer's responsibility. Add and edit affordances do not open a form themselves; emit-then-route is the contract, so the consumer listens for the `addRequested` / `editRequested` events and renders {@link DeductionsEditForm} (or its own equivalent) accordingly. For an orchestrated card-plus-form flow, use {@link Deductions} instead.\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `employee/management/deductions/card/addRequested` \| Fired when the \"Add deduction\" CTA is clicked \| `{ employeeId: string }` \|\n * \| `employee/management/deductions/card/editRequested` \| Fired when an \"Edit\" CTA is clicked for a deduction \| The matching `Garnishment` \|\n * \| `employee/management/deductions/card/deleted` \| Fired after a deduction is deleted via the confirm dialog \| The deleted `Garnishment` \|\n \n @param props - See {@link DeductionsCardProps}.\n * @returns The rendered deductions card.\n * @public\n */\nexport function DeductionsCard({ LoaderComponent, ...props }: DeductionsCardProps) {\n return (\n <BaseBoundaries\n componentName=\"Employee.Management.Deductions\"\n LoaderComponent={LoaderComponent}\n >\n <DeductionsCardContent LoaderComponent={LoaderComponent} {...props} />\n </BaseBoundaries>\n )\n}\n\nfunction DeductionsCardContent({ employeeId, onEvent, LoaderComponent }: DeductionsCardProps) {\n useI18n('Employee.Management.Deductions')\n const { t } = useTranslation('Employee.Management.Deductions')\n const Components = useComponentContext()\n const formatCurrency = useNumberFormatter('currency')\n const formatPercent = useNumberFormatter('percent')\n\n const deductionsList = useDeductionsList({ employeeId })\n\n const {\n pendingDeleteDeduction,\n setPendingDeleteDeduction,\n handleConfirmDelete: handleConfirmDeleteDeduction,\n } = useDeleteDeduction(async garnishment => {\n if (deductionsList.isLoading) return\n const result = await deductionsList.actions.onDelete(garnishment)\n if (result) {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, result.data.garnishment)\n }\n })\n\n // `useDeductionsList` returns `isLoading: true` even when the query has\n // errored and `data` is missing. Treat those rows as \"not loading\" so the\n // section doesn't show a perpetual skeleton while BaseLayout already\n // renders the error alert.\n const isDeductionsLoading =\n deductionsList.isLoading && deductionsList.errorHandling.errors.length === 0\n\n const deductions = deductionsList.isLoading ? [] : deductionsList.data.deductions\n const deletingGarnishmentUuid = deductionsList.isLoading\n ? undefined\n : deductionsList.status.deletingGarnishmentUuid\n\n const handleAdd = () => {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId })\n }\n const handleEdit = (garnishment: Garnishment) => {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, garnishment)\n }\n\n const garnishmentsColumns = [\n {\n key: 'description',\n title: t('columns.deduction'),\n render: (garnishment: Garnishment) => garnishment.description \|\| '-',\n },\n {\n key: 'frequency',\n title: t('columns.frequency'),\n render: (garnishment: Garnishment) => (garnishment.recurring ? t('recurring') : t('oneTime')),\n },\n {\n key: 'amount',\n title: t('columns.withhold'),\n render: (garnishment: Garnishment) =>\n formatDeductionAmount(garnishment, {\n formatCurrency,\n formatPercent,\n formatPerPaycheck: (value: string) => t('amountPerPaycheck', { value }),\n }),\n },\n ]\n\n const garnishmentsDataView = useDataView({\n data: deductions,\n columns: garnishmentsColumns,\n itemMenu: (garnishment: Garnishment) => (\n <HamburgerMenu\n isLoading={deletingGarnishmentUuid === garnishment.uuid}\n items={[\n {\n label: t('editCta'),\n onClick: () => {\n handleEdit(garnishment)\n },\n icon: <PencilSvg aria-hidden />,\n },\n {\n label: t('deleteCta'),\n onClick: () => {\n setPendingDeleteDeduction(garnishment)\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n triggerLabel={t('hamburgerTitle')}\n />\n ),\n emptyState: () => (\n <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n ),\n })\n\n return (\n <BaseLayout error={deductionsList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n <Components.Box\n withPadding={false}\n header={\n <Components.BoxHeader\n title={t('title')}\n action={\n <Components.Button variant=\"secondary\" onClick={handleAdd} icon={<PlusCircleIcon />}>\n {t('addDeductionCta')}\n </Components.Button>\n }\n />\n }\n >\n {isDeductionsLoading ? (\n <Loading />\n ) : (\n <DataView label={t('listLabel')} isWithinBox {...garnishmentsDataView} />\n )}\n </Components.Box>\n\n <DeleteDeductionDialog\n pendingDeleteDeduction={pendingDeleteDeduction}\n isPrimaryActionLoading={deletingGarnishmentUuid === pendingDeleteDeduction?.uuid}\n onClose={() => {\n setPendingDeleteDeduction(null)\n }}\n onConfirm={() => {\n void handleConfirmDeleteDeduction()\n }}\n title={t('deleteDeductionDialog.title')}\n description={t('deleteDeductionDialog.description', {\n deduction: pendingDeleteDeduction?.description ?? '',\n })}\n confirmLabel={t('deleteDeductionDialog.confirmCta')}\n cancelLabel={t('deleteDeductionDialog.cancelCta')}\n />\n </BaseLayout>\n )\n}\n"],"names":["DeductionsCard","LoaderComponent","props","jsx","BaseBoundaries","DeductionsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductionsList","useDeductionsList","pendingDeleteDeduction","setPendingDeleteDeduction","handleConfirmDeleteDeduction","useDeleteDeduction","garnishment","result","componentEvents","isDeductionsLoading","deductions","deletingGarnishmentUuid","handleAdd","handleEdit","garnishmentsColumns","formatDeductionAmount","value","garnishmentsDataView","useDataView","HamburgerMenu","PencilSvg","TrashCanSvg","EmptyData","BaseLayout","PlusCircleIcon","Loading","DataView","DeleteDeductionDialog"],"mappings":"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"}
1	+ {"version":3,"file":"DeductionsCard.js","sources":["../../../../../../src/components/Employee/Deductions/management/DeductionsCard/DeductionsCard.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport { useDeductionsList } from '../../shared/useDeductionsList'\nimport { useDeleteDeduction } from '../../shared/useDeleteDeduction'\nimport { DeleteDeductionDialog } from '../../shared/DeleteDeductionDialog'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base/Base'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\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 PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\n\n/*\n Props for {@link DeductionsCard}.\n \n @public\n /\nexport interface DeductionsCardProps {\n /* The associated employee identifier. /\n employeeId: string\n /* Callback invoked when the card emits an event. See the events table on {@link DeductionsCard} for the available event types and payloads. /\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 read-only card listing an employee's active deductions, with affordances to add, edit, or delete a deduction.\n \n @remarks\n * Fetches its own data and owns the delete confirm dialog. Has no alert API — alert rendering is the consumer's responsibility. Add and edit affordances do not open a form themselves; emit-then-route is the contract, so the consumer listens for the `addRequested` / `editRequested` events and renders {@link DeductionsEditForm} (or its own equivalent) accordingly. For an orchestrated card-plus-form flow, use {@link Deductions} instead.\n \n @events\n * \| Event \| Description \| Data \|\n * \| ----- \| ----------- \| ---- \|\n * \| `employee/management/deductions/card/addRequested` \| Fired when the \"Add deduction\" CTA is clicked \| `{ employeeId: string }` \|\n * \| `employee/management/deductions/card/editRequested` \| Fired when an \"Edit\" CTA is clicked for a deduction \| The matching `Garnishment` \|\n * \| `employee/management/deductions/card/deleted` \| Fired after a deduction is deleted via the confirm dialog \| The deleted `Garnishment` \|\n \n @param props - See {@link DeductionsCardProps}.\n * @returns The rendered deductions card.\n * @public\n */\nexport function DeductionsCard({ LoaderComponent, ...props }: DeductionsCardProps) {\n return (\n <BaseBoundaries\n componentName=\"Employee.Management.Deductions\"\n LoaderComponent={LoaderComponent}\n >\n <DeductionsCardContent LoaderComponent={LoaderComponent} {...props} />\n </BaseBoundaries>\n )\n}\n\nfunction DeductionsCardContent({ employeeId, onEvent, LoaderComponent }: DeductionsCardProps) {\n useI18n('Employee.Management.Deductions')\n const { t } = useTranslation('Employee.Management.Deductions')\n const Components = useComponentContext()\n const formatCurrency = useNumberFormatter('currency')\n const formatPercent = useNumberFormatter('percent')\n\n const deductionsList = useDeductionsList({ employeeId })\n\n const {\n pendingDeleteDeduction,\n setPendingDeleteDeduction,\n handleConfirmDelete: handleConfirmDeleteDeduction,\n } = useDeleteDeduction(async garnishment => {\n if (deductionsList.isLoading) return\n const result = await deductionsList.actions.onDelete(garnishment)\n if (result) {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_DELETED, result.data.garnishment)\n }\n })\n\n // `useDeductionsList` returns `isLoading: true` even when the query has\n // errored and `data` is missing. Treat those rows as \"not loading\" so the\n // section doesn't show a perpetual skeleton while BaseLayout already\n // renders the error alert.\n const isDeductionsLoading =\n deductionsList.isLoading && deductionsList.errorHandling.errors.length === 0\n\n const deductions = deductionsList.isLoading ? [] : deductionsList.data.deductions\n const deletingGarnishmentUuid = deductionsList.isLoading\n ? undefined\n : deductionsList.status.deletingGarnishmentUuid\n\n const handleAdd = () => {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_ADD_REQUESTED, { employeeId })\n }\n const handleEdit = (garnishment: Garnishment) => {\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_DEDUCTIONS_CARD_EDIT_REQUESTED, garnishment)\n }\n\n const garnishmentsColumns = [\n {\n key: 'description',\n title: t('columns.deduction'),\n render: (garnishment: Garnishment) => garnishment.description \|\| '-',\n },\n {\n key: 'frequency',\n title: t('columns.frequency'),\n render: (garnishment: Garnishment) => (garnishment.recurring ? t('recurring') : t('oneTime')),\n },\n {\n key: 'amount',\n title: t('columns.withhold'),\n justify: 'end' as const,\n render: (garnishment: Garnishment) =>\n formatDeductionAmount(garnishment, {\n formatCurrency,\n formatPercent,\n formatPerPaycheck: (value: string) => t('amountPerPaycheck', { value }),\n }),\n },\n ]\n\n const garnishmentsDataView = useDataView({\n data: deductions,\n columns: garnishmentsColumns,\n itemMenu: (garnishment: Garnishment) => (\n <HamburgerMenu\n isLoading={deletingGarnishmentUuid === garnishment.uuid}\n items={[\n {\n label: t('editCta'),\n onClick: () => {\n handleEdit(garnishment)\n },\n icon: <PencilSvg aria-hidden />,\n },\n {\n label: t('deleteCta'),\n onClick: () => {\n setPendingDeleteDeduction(garnishment)\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n triggerLabel={t('hamburgerTitle')}\n />\n ),\n emptyState: () => (\n <EmptyData title={t('emptyState.title')} description={t('emptyState.description')} />\n ),\n })\n\n return (\n <BaseLayout error={deductionsList.errorHandling.errors} LoaderComponent={LoaderComponent}>\n <Components.Box\n withPadding={false}\n header={\n <Components.BoxHeader\n title={t('title')}\n action={\n <Components.Button variant=\"secondary\" onClick={handleAdd} icon={<PlusCircleIcon />}>\n {t('addDeductionCta')}\n </Components.Button>\n }\n />\n }\n >\n {isDeductionsLoading ? (\n <Loading />\n ) : (\n <DataView label={t('listLabel')} isWithinBox {...garnishmentsDataView} />\n )}\n </Components.Box>\n\n <DeleteDeductionDialog\n pendingDeleteDeduction={pendingDeleteDeduction}\n isPrimaryActionLoading={deletingGarnishmentUuid === pendingDeleteDeduction?.uuid}\n onClose={() => {\n setPendingDeleteDeduction(null)\n }}\n onConfirm={() => {\n void handleConfirmDeleteDeduction()\n }}\n title={t('deleteDeductionDialog.title')}\n description={t('deleteDeductionDialog.description', {\n deduction: pendingDeleteDeduction?.description ?? '',\n })}\n confirmLabel={t('deleteDeductionDialog.confirmCta')}\n cancelLabel={t('deleteDeductionDialog.cancelCta')}\n />\n </BaseLayout>\n )\n}\n"],"names":["DeductionsCard","LoaderComponent","props","jsx","BaseBoundaries","DeductionsCardContent","employeeId","onEvent","useI18n","t","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductionsList","useDeductionsList","pendingDeleteDeduction","setPendingDeleteDeduction","handleConfirmDeleteDeduction","useDeleteDeduction","garnishment","result","componentEvents","isDeductionsLoading","deductions","deletingGarnishmentUuid","handleAdd","handleEdit","garnishmentsColumns","formatDeductionAmount","value","garnishmentsDataView","useDataView","HamburgerMenu","PencilSvg","TrashCanSvg","EmptyData","BaseLayout","PlusCircleIcon","Loading","DataView","DeleteDeductionDialog"],"mappings":"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"}

package/dist/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { useComponentContext as w } from "../../../../../contexts/ComponentAdapt
 import { useI18n as B } from "../../../../../i18n/I18n.js";
 import l from "../../../../../assets/icons/plus-circle.svg.js";
 import { useDataView as V } from "../../../../Common/DataView/useDataView.js";
-import { DataView as A } from "../../../../Common/DataView/DataView.js";
+import { DataView as j } from "../../../../Common/DataView/DataView.js";
 function U({
   className: s,
   deductionsList: i,
@@ -22,7 +22,7 @@ function U({
   onContinue: f
 }) {
   B("Employee.Deductions");
-  const { t } = k("Employee.Deductions"), r = w(), g = u("currency"), h = u("percent"), { deductions: a } = i.data, y = i.status.isPending, C = a.length === 0, { ...D } = V({
+  const { t } = k("Employee.Deductions"), r = w(), y = u("currency"), g = u("percent"), { deductions: a } = i.data, h = i.status.isPending, C = a.length === 0, { ...D } = V({
     data: a,
     columns: [
       {
@@ -37,9 +37,10 @@ function U({
       {
         key: "amount",
         title: t("withheldColumn"),
+        justify: "end",
         render: (n) => b(n, {
-          formatCurrency: g,
-          formatPercent: h,
+          formatCurrency: y,
+          formatPercent: g,
           formatPerPaycheck: (x) => t("recurringAmount", { value: x })
         })
       }
@@ -51,7 +52,7 @@ function U({
     itemMenu: (n) => /* @__PURE__ */ e(
       v,
       {
-        isLoading: y,
+        isLoading: h,
         items: [
           {
             label: t("editCta"),
@@ -76,7 +77,7 @@ function U({
       /* @__PURE__ */ e(r.Heading, { as: "h2", children: t("pageTitle") }),
       /* @__PURE__ */ e(r.Text, { variant: "supporting", children: t("includeDeductionsDescriptionV2") })
     ] }),
-    /* @__PURE__ */ e(A, { label: t("deductionsTableLabel"), ...D }),
+    /* @__PURE__ */ e(j, { label: t("deductionsTableLabel"), ...D }),
     /* @__PURE__ */ o(T, { children: [
       !C && /* @__PURE__ */ o(r.Button, { variant: "secondary", onClick: c, children: [
         /* @__PURE__ */ e(l, {}),

package/dist/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeductionsList.js","sources":["../../../../../../src/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { UseDeductionsListReady } from '../../shared/useDeductionsList'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { useDataView, DataView } from '@/components/Common'\nimport { ActionsLayout } from '@/components/Common'\nimport { EmptyData } from '@/components/Common/EmptyData/EmptyData'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\n/** @internal /\nexport interface DeductionsListProps {\n className?: string\n deductionsList: UseDeductionsListReady\n onAdd: () => void\n onEdit: (deduction: Garnishment) => void\n onDelete: (deduction: Garnishment) => void\n onContinue: () => void\n}\n\n/* @internal */\nexport function DeductionsList({\n className,\n deductionsList,\n onAdd,\n onEdit,\n onDelete,\n onContinue,\n}: DeductionsListProps) {\n useI18n('Employee.Deductions')\n const { t } = useTranslation('Employee.Deductions')\n const Components = useComponentContext()\n const formatCurrency = useNumberFormatter('currency')\n const formatPercent = useNumberFormatter('percent')\n\n const { deductions } = deductionsList.data\n const isPendingAny = deductionsList.status.isPending\n const isEmpty = deductions.length === 0\n\n const { ...dataViewProps } = useDataView({\n data: deductions,\n columns: [\n {\n key: 'description',\n title: t('nameColumn'),\n },\n {\n key: 'recurring',\n title: t('frequencyColumn'),\n render: deduction => {\n return deduction.recurring ? t('recurringText') : t('nonRecurringText')\n },\n },\n {\n key: 'amount',\n title: t('withheldColumn'),\n render: deduction =>\n formatDeductionAmount(deduction, {\n formatCurrency,\n formatPercent,\n formatPerPaycheck: (value: string) => t('recurringAmount', { value }),\n }),\n },\n ],\n emptyState: () => (\n <EmptyData title={t('includeDeductionsEmptyState')}>\n <Components.Button type=\"button\" variant=\"secondary\" onClick={onAdd}>\n <PlusCircleIcon />\n {t('addDeductionButtonCta')}\n </Components.Button>\n </EmptyData>\n ),\n itemMenu: deduction => {\n return (\n <HamburgerMenu\n isLoading={isPendingAny}\n items={[\n {\n label: t('editCta'),\n onClick: () => {\n onEdit(deduction)\n },\n icon: <PencilSvg aria-hidden />,\n },\n {\n label: t('deleteCta'),\n onClick: () => {\n onDelete(deduction)\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n />\n )\n },\n })\n\n return (\n <section className={className}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={2}>\n <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n <Components.Text variant=\"supporting\">\n {t('includeDeductionsDescriptionV2')}\n </Components.Text>\n </Flex>\n\n <DataView label={t('deductionsTableLabel')} {...dataViewProps} />\n <ActionsLayout>\n {!isEmpty && (\n <Components.Button variant=\"secondary\" onClick={onAdd}>\n <PlusCircleIcon />\n {t('addDeductionCta')}\n </Components.Button>\n )}\n <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n </ActionsLayout>\n </Flex>\n </section>\n )\n}\n"],"names":["DeductionsList","className","deductionsList","onAdd","onEdit","onDelete","onContinue","useI18n","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductions","isPendingAny","isEmpty","dataViewProps","useDataView","deduction","formatDeductionAmount","value","jsx","EmptyData","jsxs","PlusCircleIcon","HamburgerMenu","PencilSvg","TrashCanSvg","Flex","DataView","ActionsLayout"],"mappings":"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"}
1	+ {"version":3,"file":"DeductionsList.js","sources":["../../../../../../src/components/Employee/Deductions/onboarding/DeductionsList/DeductionsList.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { UseDeductionsListReady } from '../../shared/useDeductionsList'\nimport { formatDeductionAmount } from '../../shared/formatDeductionAmount'\nimport { useDataView, DataView } from '@/components/Common'\nimport { ActionsLayout } from '@/components/Common'\nimport { EmptyData } from '@/components/Common/EmptyData/EmptyData'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport PlusCircleIcon from '@/assets/icons/plus-circle.svg?react'\n\n/** @internal /\nexport interface DeductionsListProps {\n className?: string\n deductionsList: UseDeductionsListReady\n onAdd: () => void\n onEdit: (deduction: Garnishment) => void\n onDelete: (deduction: Garnishment) => void\n onContinue: () => void\n}\n\n/* @internal */\nexport function DeductionsList({\n className,\n deductionsList,\n onAdd,\n onEdit,\n onDelete,\n onContinue,\n}: DeductionsListProps) {\n useI18n('Employee.Deductions')\n const { t } = useTranslation('Employee.Deductions')\n const Components = useComponentContext()\n const formatCurrency = useNumberFormatter('currency')\n const formatPercent = useNumberFormatter('percent')\n\n const { deductions } = deductionsList.data\n const isPendingAny = deductionsList.status.isPending\n const isEmpty = deductions.length === 0\n\n const { ...dataViewProps } = useDataView({\n data: deductions,\n columns: [\n {\n key: 'description',\n title: t('nameColumn'),\n },\n {\n key: 'recurring',\n title: t('frequencyColumn'),\n render: deduction => {\n return deduction.recurring ? t('recurringText') : t('nonRecurringText')\n },\n },\n {\n key: 'amount',\n title: t('withheldColumn'),\n justify: 'end',\n render: deduction =>\n formatDeductionAmount(deduction, {\n formatCurrency,\n formatPercent,\n formatPerPaycheck: (value: string) => t('recurringAmount', { value }),\n }),\n },\n ],\n emptyState: () => (\n <EmptyData title={t('includeDeductionsEmptyState')}>\n <Components.Button type=\"button\" variant=\"secondary\" onClick={onAdd}>\n <PlusCircleIcon />\n {t('addDeductionButtonCta')}\n </Components.Button>\n </EmptyData>\n ),\n itemMenu: deduction => {\n return (\n <HamburgerMenu\n isLoading={isPendingAny}\n items={[\n {\n label: t('editCta'),\n onClick: () => {\n onEdit(deduction)\n },\n icon: <PencilSvg aria-hidden />,\n },\n {\n label: t('deleteCta'),\n onClick: () => {\n onDelete(deduction)\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n />\n )\n },\n })\n\n return (\n <section className={className}>\n <Flex flexDirection=\"column\" gap={32}>\n <Flex flexDirection=\"column\" gap={2}>\n <Components.Heading as=\"h2\">{t('pageTitle')}</Components.Heading>\n <Components.Text variant=\"supporting\">\n {t('includeDeductionsDescriptionV2')}\n </Components.Text>\n </Flex>\n\n <DataView label={t('deductionsTableLabel')} {...dataViewProps} />\n <ActionsLayout>\n {!isEmpty && (\n <Components.Button variant=\"secondary\" onClick={onAdd}>\n <PlusCircleIcon />\n {t('addDeductionCta')}\n </Components.Button>\n )}\n <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n </ActionsLayout>\n </Flex>\n </section>\n )\n}\n"],"names":["DeductionsList","className","deductionsList","onAdd","onEdit","onDelete","onContinue","useI18n","useTranslation","Components","useComponentContext","formatCurrency","useNumberFormatter","formatPercent","deductions","isPendingAny","isEmpty","dataViewProps","useDataView","deduction","formatDeductionAmount","value","jsx","EmptyData","jsxs","PlusCircleIcon","HamburgerMenu","PencilSvg","TrashCanSvg","Flex","DataView","ActionsLayout"],"mappings":"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"}

package/dist/components/Employee/PaymentMethod/onboarding/ListView.js CHANGED Viewed

@@ -3,12 +3,12 @@ import { useTranslation as V } from "react-i18next";
 import { useWatch as R } from "react-hook-form";
 import { usePaymentMethodList as U } from "../shared/usePaymentMethodList.js";
 import { usePaymentMethodForm as K } from "../shared/usePaymentMethodForm/usePaymentMethodForm.js";
-import { useDeleteBankAccount as I } from "../shared/useDeleteBankAccount.js";
-import { DeleteBankAccountDialog as j } from "../shared/DeleteBankAccountDialog.js";
+import { useDeleteBankAccount as j } from "../shared/useDeleteBankAccount.js";
+import { DeleteBankAccountDialog as I } from "../shared/DeleteBankAccountDialog.js";
 import { useOnboardingBankFormDictionary as W } from "./useFormDictionary.js";
-import b from "./ListView.module.scss.js";
+import y from "./ListView.module.scss.js";
 import { Flex as G } from "../../../Common/Flex/Flex.js";
-import { ActionsLayout as y } from "../../../Common/ActionsLayout/ActionsLayout.js";
+import { ActionsLayout as b } from "../../../Common/ActionsLayout/ActionsLayout.js";
 import { HamburgerMenu as q } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
 import { BaseLayout as k } from "../../../Base/Base.js";
 import { SDKFormProvider as z } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
@@ -21,9 +21,9 @@ import tt from "../../../../assets/icons/trashcan.svg.js";
 import { BankFormBody as et } from "../shared/BankFormBody/BankFormBody.js";
 import { useDataView as ot } from "../../../Common/DataView/useDataView.js";
 import { DataView as nt } from "../../../Common/DataView/DataView.js";
-function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: a }) {
+function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: s }) {
   const n = U({ employeeId: m }), d = K({ employeeId: m }), D = J([n, d]);
-  return n.isLoading || d.isLoading ? /* @__PURE__ */ e(k, { isLoading: !0, error: D.errors, LoaderComponent: a }) : /* @__PURE__ */ e(
+  return n.isLoading || d.isLoading ? /* @__PURE__ */ e(k, { isLoading: !0, error: D.errors, LoaderComponent: s }) : /* @__PURE__ */ e(
     it,
     {
       employeeId: m,
@@ -32,7 +32,7 @@ function Nt({ employeeId: m, isAdmin: f, onEvent: i, LoaderComponent: a }) {
       paymentMethodList: n,
       paymentMethodForm: d,
       errorHandling: D,
-      LoaderComponent: a
+      LoaderComponent: s
     }
   );
 }
@@ -40,12 +40,12 @@ function it({
   employeeId: m,
   isAdmin: f,
   onEvent: i,
-  paymentMethodList: a,
+  paymentMethodList: s,
   paymentMethodForm: n,
   errorHandling: d,
   LoaderComponent: D
 }) {
-  const { paymentMethod: A, bankAccounts: s } = a.data, { deletePendingBankAccountUuid: B } = a.status, { t } = V("Employee.PaymentMethod"), c = Q(), L = Z(A.splitBy === "Amount" ? "currency" : "percent"), T = W(), { Fields: P } = n.form, h = R({
+  const { paymentMethod: A, bankAccounts: a } = s.data, { deletePendingBankAccountUuid: B } = s.status, { t } = V("Employee.PaymentMethod"), c = Q(), L = Z(A.splitBy === "Amount" ? "currency" : "percent"), T = W(), { Fields: P } = n.form, h = R({
     control: n.form.hookFormInternals.formMethods.control,
     name: "type"
   }), {
@@ -54,11 +54,11 @@ function it({
     deletedAccountNumber: C,
     setDeletedAccountNumber: N,
     handleConfirmDelete: _
-  } = I(async (o) => {
-    const r = await a.actions.onDelete(o);
+  } = j(async (o) => {
+    const r = await s.actions.onDelete(o);
     r && i(l.EMPLOYEE_BANK_ACCOUNT_DELETED, r.data);
   }), { ...M } = ot({
-    data: s,
+    data: a,
     columns: [
       { key: "name", title: t("nicknameColumn") },
       { key: "routingNumber", title: t("routingNumberColumn") },
@@ -66,6 +66,7 @@ function it({
       {
         key: "splitAmount",
         title: t("allocationColumn"),
+        justify: "end",
         render: (o) => {
           const r = A.splits?.find((H) => H.uuid === o.uuid)?.splitAmount ?? 0, x = A.splitBy === $.amount ? X(r) ?? 0 : r;
           return L(x);
@@ -102,8 +103,8 @@ function it({
   ), w = async () => {
     const o = await n.actions.onSubmit();
     o && (i(l.EMPLOYEE_PAYMENT_METHOD_UPDATED, o.data), i(l.EMPLOYEE_PAYMENT_METHOD_DONE));
-  }, F = h === u.directDeposit && s.length === 0, S = h === u.check || s.length > 0, Y = h === u.directDeposit && s.length > 0 ? /* @__PURE__ */ p(y, { children: [
-    s.length > 1 && /* @__PURE__ */ e(
+  }, F = h === u.directDeposit && a.length === 0, S = h === u.check || a.length > 0, Y = h === u.directDeposit && a.length > 0 ? /* @__PURE__ */ p(b, { children: [
+    a.length > 1 && /* @__PURE__ */ e(
       c.Button,
       {
         variant: "secondary",
@@ -147,7 +148,7 @@ function it({
             withPadding: !1,
             footer: Y,
             children: [
-              /* @__PURE__ */ e("div", { className: b.section, children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e("div", { className: y.section, children: /* @__PURE__ */ e(
                 P.Type,
                 {
                   label: t("paymentFieldsetLegend"),
@@ -155,8 +156,8 @@ function it({
                   FieldComponent: O
                 }
               ) }),
-              h === u.directDeposit && s.length > 0 && /* @__PURE__ */ e(nt, { isWithinBox: !0, label: t("bankAccountsListLabel"), ...M }),
-              F && /* @__PURE__ */ e("div", { className: b.section, children: /* @__PURE__ */ e(
+              h === u.directDeposit && a.length > 0 && /* @__PURE__ */ e(nt, { isWithinBox: !0, label: t("bankAccountsListLabel"), ...M }),
+              F && /* @__PURE__ */ e("div", { className: y.section, children: /* @__PURE__ */ e(
                 et,
                 {
                   employeeId: m,
@@ -169,7 +170,7 @@ function it({
             ]
           }
         ),
-        S && /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+        S && /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(
           c.Button,
           {
             type: "button",
@@ -183,7 +184,7 @@ function it({
       ] })
     ] }) }),
     /* @__PURE__ */ e(
-      j,
+      I,
       {
         pendingDeleteAccount: g,
         isPrimaryActionLoading: B === g?.uuid,

package/dist/components/Employee/PaymentMethod/onboarding/ListView.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n usePaymentMethodList,\n type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n usePaymentMethodForm,\n type PaymentMethodType,\n type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport styles from './ListView.module.scss'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\ninterface ListViewProps {\n employeeId: string\n isAdmin: boolean\n onEvent: OnEventType<EventType, unknown>\n LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: ListViewProps) {\n const paymentMethodList = usePaymentMethodList({ employeeId })\n const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n if (paymentMethodList.isLoading \|\| paymentMethodForm.isLoading) {\n return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n }\n\n return (\n <ListViewReady\n employeeId={employeeId}\n isAdmin={isAdmin}\n onEvent={onEvent}\n paymentMethodList={paymentMethodList}\n paymentMethodForm={paymentMethodForm}\n errorHandling={errorHandling}\n LoaderComponent={LoaderComponent}\n />\n )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n paymentMethodList: UsePaymentMethodListReady\n paymentMethodForm: UsePaymentMethodFormReady\n errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n employeeId,\n isAdmin,\n onEvent,\n paymentMethodList,\n paymentMethodForm,\n errorHandling,\n LoaderComponent,\n}: ListViewReadyProps) {\n const { paymentMethod, bankAccounts } = paymentMethodList.data\n const { deletePendingBankAccountUuid } = paymentMethodList.status\n const { t } = useTranslation('Employee.PaymentMethod')\n const Components = useComponentContext()\n const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n const dictionary = useOnboardingBankFormDictionary()\n\n const { Fields } = paymentMethodForm.form\n const watchedType = useWatch({\n control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n name: 'type',\n })\n\n const {\n pendingDeleteAccount,\n setPendingDeleteAccount,\n deletedAccountNumber,\n setDeletedAccountNumber,\n handleConfirmDelete,\n } = useDeleteBankAccount(async uuid => {\n const result = await paymentMethodList.actions.onDelete(uuid)\n if (result) {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n }\n })\n\n const { ...dataViewProps } = useDataView({\n data: bankAccounts,\n columns: [\n { key: 'name', title: t('nicknameColumn') },\n { key: 'routingNumber', title: t('routingNumberColumn') },\n { key: 'accountType', title: t('accountTypeColumn') },\n {\n key: 'splitAmount',\n title: t('allocationColumn'),\n render: bankAccount => {\n const splitAmount =\n paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n const displayValue =\n paymentMethod.splitBy === SPLIT_BY.amount\n ? (centsToDollars(splitAmount) ?? 0)\n : splitAmount\n return format(displayValue)\n },\n },\n ],\n itemMenu: bankAccount => (\n <HamburgerMenu\n items={[\n {\n label: t('deleteBankAccountCta'),\n onClick: () => {\n setPendingDeleteAccount({\n uuid: bankAccount.uuid,\n hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n })\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n triggerLabel={t('hamburgerTitle')}\n />\n ),\n })\n\n const TypeFieldComponent = (props: RadioGroupProps) => (\n <Components.RadioGroup\n {...props}\n options={props.options.map(option => ({\n ...option,\n description:\n option.value === PAYMENT_METHODS.directDeposit\n ? isAdmin\n ? t('directDepositDescription')\n : t('directDepositDescriptionSelf')\n : isAdmin\n ? t('checkDescription')\n : t('checkDescriptionSelf'),\n }))}\n />\n )\n\n const handleContinue = async () => {\n const result = await paymentMethodForm.actions.onSubmit()\n if (result) {\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n }\n }\n\n const showInlineBankForm =\n watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length === 0\n const showContinue = watchedType === PAYMENT_METHODS.check \|\| bankAccounts.length > 0\n\n const footer =\n watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 ? (\n <ActionsLayout>\n {bankAccounts.length > 1 && (\n <Components.Button\n variant=\"secondary\"\n type=\"button\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n }}\n >\n {t('splitCta')}\n </Components.Button>\n )}\n <Components.Button\n variant=\"secondary\"\n type=\"button\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n }}\n >\n {t('addAnotherCta')}\n </Components.Button>\n </ActionsLayout>\n ) : undefined\n\n return (\n <>\n <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n <SDKFormProvider formHookResult={paymentMethodForm}>\n {deletedAccountNumber !== null && (\n <Components.Alert\n status=\"success\"\n label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n onDismiss={() => {\n setDeletedAccountNumber(null)\n }}\n disableScrollIntoView\n />\n )}\n <Flex flexDirection=\"column\" gap={20}>\n <Components.FormBox\n header={<Components.FormBoxHeader title={t('title')} />}\n withPadding={false}\n footer={footer}\n >\n <div className={styles.section}>\n <Fields.Type\n label={t('paymentFieldsetLegend')}\n getOptionLabel={(value: PaymentMethodType) =>\n value === PAYMENT_METHODS.directDeposit\n ? t('directDepositLabel')\n : t('checkLabel')\n }\n FieldComponent={TypeFieldComponent}\n />\n </div>\n {watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 && (\n <DataView isWithinBox label={t('bankAccountsListLabel')} {...dataViewProps} />\n )}\n {showInlineBankForm && (\n <div className={styles.section}>\n <BankFormBody\n employeeId={employeeId}\n dictionary={dictionary}\n onSaved={data => {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n }}\n />\n </div>\n )}\n </Components.FormBox>\n {showContinue && (\n <ActionsLayout>\n <Components.Button\n type=\"button\"\n isLoading={paymentMethodForm.status.isPending}\n onClick={() => {\n void handleContinue()\n }}\n >\n {t('submitCta')}\n </Components.Button>\n </ActionsLayout>\n )}\n </Flex>\n </SDKFormProvider>\n </BaseLayout>\n <DeleteBankAccountDialog\n pendingDeleteAccount={pendingDeleteAccount}\n isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n onClose={() => {\n setPendingDeleteAccount(null)\n }}\n onConfirm={() => {\n void handleConfirmDelete()\n }}\n title={t('deleteBankAccountDialog.title')}\n description={t('deleteBankAccountDialog.description', {\n account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n })}\n confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n />\n </>\n )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","LoaderComponent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","dictionary","useOnboardingBankFormDictionary","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleContinue","showInlineBankForm","showContinue","footer","ActionsLayout","jsxs","Fragment","SDKFormProvider","Flex","styles","value","DataView","BankFormBody","data","DeleteBankAccountDialog"],"mappings":"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"}
1	+ {"version":3,"file":"ListView.js","sources":["../../../../../src/components/Employee/PaymentMethod/onboarding/ListView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport {\n usePaymentMethodList,\n type UsePaymentMethodListReady,\n} from '../shared/usePaymentMethodList'\nimport {\n usePaymentMethodForm,\n type PaymentMethodType,\n type UsePaymentMethodFormReady,\n} from '../shared/usePaymentMethodForm'\nimport { useDeleteBankAccount } from '../shared/useDeleteBankAccount'\nimport { DeleteBankAccountDialog } from '../shared/DeleteBankAccountDialog'\nimport { BankFormBody } from '../shared/BankFormBody'\nimport { useOnboardingBankFormDictionary } from './useFormDictionary'\nimport styles from './ListView.module.scss'\nimport { ActionsLayout, DataView, useDataView } from '@/components/Common'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { BaseLayout } from '@/components/Base/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { composeErrorHandler } from '@/partner-hook-utils/composeErrorHandler'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { centsToDollars } from '@/helpers/currencyHelpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { componentEvents, PAYMENT_METHODS, SPLIT_BY, type EventType } from '@/shared/constants'\nimport type { OnEventType } from '@/components/Base/useBase'\nimport type { LoaderComponentType } from '@/components/Base'\nimport type { RadioGroupProps } from '@/components/Common/UI/RadioGroup/RadioGroupTypes'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport { Flex } from '@/components/Common/Flex/Flex'\n\ninterface ListViewProps {\n employeeId: string\n isAdmin: boolean\n onEvent: OnEventType<EventType, unknown>\n LoaderComponent?: LoaderComponentType\n}\n\n/** @internal */\nexport function ListView({ employeeId, isAdmin, onEvent, LoaderComponent }: ListViewProps) {\n const paymentMethodList = usePaymentMethodList({ employeeId })\n const paymentMethodForm = usePaymentMethodForm({ employeeId })\n\n const errorHandling = composeErrorHandler([paymentMethodList, paymentMethodForm])\n\n if (paymentMethodList.isLoading \|\| paymentMethodForm.isLoading) {\n return <BaseLayout isLoading error={errorHandling.errors} LoaderComponent={LoaderComponent} />\n }\n\n return (\n <ListViewReady\n employeeId={employeeId}\n isAdmin={isAdmin}\n onEvent={onEvent}\n paymentMethodList={paymentMethodList}\n paymentMethodForm={paymentMethodForm}\n errorHandling={errorHandling}\n LoaderComponent={LoaderComponent}\n />\n )\n}\n\ninterface ListViewReadyProps extends ListViewProps {\n paymentMethodList: UsePaymentMethodListReady\n paymentMethodForm: UsePaymentMethodFormReady\n errorHandling: ReturnType<typeof composeErrorHandler>\n}\n\nfunction ListViewReady({\n employeeId,\n isAdmin,\n onEvent,\n paymentMethodList,\n paymentMethodForm,\n errorHandling,\n LoaderComponent,\n}: ListViewReadyProps) {\n const { paymentMethod, bankAccounts } = paymentMethodList.data\n const { deletePendingBankAccountUuid } = paymentMethodList.status\n const { t } = useTranslation('Employee.PaymentMethod')\n const Components = useComponentContext()\n const format = useNumberFormatter(paymentMethod.splitBy === 'Amount' ? 'currency' : 'percent')\n const dictionary = useOnboardingBankFormDictionary()\n\n const { Fields } = paymentMethodForm.form\n const watchedType = useWatch({\n control: paymentMethodForm.form.hookFormInternals.formMethods.control,\n name: 'type',\n })\n\n const {\n pendingDeleteAccount,\n setPendingDeleteAccount,\n deletedAccountNumber,\n setDeletedAccountNumber,\n handleConfirmDelete,\n } = useDeleteBankAccount(async uuid => {\n const result = await paymentMethodList.actions.onDelete(uuid)\n if (result) {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_DELETED, result.data)\n }\n })\n\n const { ...dataViewProps } = useDataView({\n data: bankAccounts,\n columns: [\n { key: 'name', title: t('nicknameColumn') },\n { key: 'routingNumber', title: t('routingNumberColumn') },\n { key: 'accountType', title: t('accountTypeColumn') },\n {\n key: 'splitAmount',\n title: t('allocationColumn'),\n justify: 'end',\n render: bankAccount => {\n const splitAmount =\n paymentMethod.splits?.find(split => split.uuid === bankAccount.uuid)?.splitAmount ?? 0\n const displayValue =\n paymentMethod.splitBy === SPLIT_BY.amount\n ? (centsToDollars(splitAmount) ?? 0)\n : splitAmount\n return format(displayValue)\n },\n },\n ],\n itemMenu: bankAccount => (\n <HamburgerMenu\n items={[\n {\n label: t('deleteBankAccountCta'),\n onClick: () => {\n setPendingDeleteAccount({\n uuid: bankAccount.uuid,\n hiddenAccountNumber: bankAccount.hiddenAccountNumber,\n })\n },\n icon: <TrashCanSvg aria-hidden />,\n },\n ]}\n triggerLabel={t('hamburgerTitle')}\n />\n ),\n })\n\n const TypeFieldComponent = (props: RadioGroupProps) => (\n <Components.RadioGroup\n {...props}\n options={props.options.map(option => ({\n ...option,\n description:\n option.value === PAYMENT_METHODS.directDeposit\n ? isAdmin\n ? t('directDepositDescription')\n : t('directDepositDescriptionSelf')\n : isAdmin\n ? t('checkDescription')\n : t('checkDescriptionSelf'),\n }))}\n />\n )\n\n const handleContinue = async () => {\n const result = await paymentMethodForm.actions.onSubmit()\n if (result) {\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_UPDATED, result.data)\n onEvent(componentEvents.EMPLOYEE_PAYMENT_METHOD_DONE)\n }\n }\n\n const showInlineBankForm =\n watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length === 0\n const showContinue = watchedType === PAYMENT_METHODS.check \|\| bankAccounts.length > 0\n\n const footer =\n watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 ? (\n <ActionsLayout>\n {bankAccounts.length > 1 && (\n <Components.Button\n variant=\"secondary\"\n type=\"button\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_SPLIT_PAYMENT)\n }}\n >\n {t('splitCta')}\n </Components.Button>\n )}\n <Components.Button\n variant=\"secondary\"\n type=\"button\"\n onClick={() => {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATE)\n }}\n >\n {t('addAnotherCta')}\n </Components.Button>\n </ActionsLayout>\n ) : undefined\n\n return (\n <>\n <BaseLayout error={errorHandling.errors} LoaderComponent={LoaderComponent}>\n <SDKFormProvider formHookResult={paymentMethodForm}>\n {deletedAccountNumber !== null && (\n <Components.Alert\n status=\"success\"\n label={t('deleteBankAccountSuccessAlert', { account: deletedAccountNumber })}\n onDismiss={() => {\n setDeletedAccountNumber(null)\n }}\n disableScrollIntoView\n />\n )}\n <Flex flexDirection=\"column\" gap={20}>\n <Components.FormBox\n header={<Components.FormBoxHeader title={t('title')} />}\n withPadding={false}\n footer={footer}\n >\n <div className={styles.section}>\n <Fields.Type\n label={t('paymentFieldsetLegend')}\n getOptionLabel={(value: PaymentMethodType) =>\n value === PAYMENT_METHODS.directDeposit\n ? t('directDepositLabel')\n : t('checkLabel')\n }\n FieldComponent={TypeFieldComponent}\n />\n </div>\n {watchedType === PAYMENT_METHODS.directDeposit && bankAccounts.length > 0 && (\n <DataView isWithinBox label={t('bankAccountsListLabel')} {...dataViewProps} />\n )}\n {showInlineBankForm && (\n <div className={styles.section}>\n <BankFormBody\n employeeId={employeeId}\n dictionary={dictionary}\n onSaved={data => {\n onEvent(componentEvents.EMPLOYEE_BANK_ACCOUNT_CREATED, data)\n }}\n />\n </div>\n )}\n </Components.FormBox>\n {showContinue && (\n <ActionsLayout>\n <Components.Button\n type=\"button\"\n isLoading={paymentMethodForm.status.isPending}\n onClick={() => {\n void handleContinue()\n }}\n >\n {t('submitCta')}\n </Components.Button>\n </ActionsLayout>\n )}\n </Flex>\n </SDKFormProvider>\n </BaseLayout>\n <DeleteBankAccountDialog\n pendingDeleteAccount={pendingDeleteAccount}\n isPrimaryActionLoading={deletePendingBankAccountUuid === pendingDeleteAccount?.uuid}\n onClose={() => {\n setPendingDeleteAccount(null)\n }}\n onConfirm={() => {\n void handleConfirmDelete()\n }}\n title={t('deleteBankAccountDialog.title')}\n description={t('deleteBankAccountDialog.description', {\n account: pendingDeleteAccount?.hiddenAccountNumber ?? '',\n })}\n confirmLabel={t('deleteBankAccountDialog.confirmCta')}\n cancelLabel={t('deleteBankAccountDialog.cancelCta')}\n />\n </>\n )\n}\n"],"names":["ListView","employeeId","isAdmin","onEvent","LoaderComponent","paymentMethodList","usePaymentMethodList","paymentMethodForm","usePaymentMethodForm","errorHandling","composeErrorHandler","BaseLayout","jsx","ListViewReady","paymentMethod","bankAccounts","deletePendingBankAccountUuid","useTranslation","Components","useComponentContext","format","useNumberFormatter","dictionary","useOnboardingBankFormDictionary","Fields","watchedType","useWatch","pendingDeleteAccount","setPendingDeleteAccount","deletedAccountNumber","setDeletedAccountNumber","handleConfirmDelete","useDeleteBankAccount","uuid","result","componentEvents","dataViewProps","useDataView","bankAccount","splitAmount","split","displayValue","SPLIT_BY","centsToDollars","HamburgerMenu","TrashCanSvg","TypeFieldComponent","props","option","PAYMENT_METHODS","handleContinue","showInlineBankForm","showContinue","footer","ActionsLayout","jsxs","Fragment","SDKFormProvider","Flex","styles","value","DataView","BankFormBody","data","DeleteBankAccountDialog"],"mappings":"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"}

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

@@ -11,19 +11,19 @@ import { composeErrorHandler as Y } from "../../../../../partner-hook-utils/comp
 import { usePaymentMethodList as H } from "../../../PaymentMethod/shared/usePaymentMethodList.js";
 import { formatDateLongWithYear as R } from "../../../../../helpers/dateFormatting.js";
 import W from "../../../../../hooks/useNumberFormatter.js";
-import { useI18n as F } from "../../../../../i18n/I18n.js";
+import { useI18n as j } from "../../../../../i18n/I18n.js";
 import { componentEvents as w } from "../../../../../shared/constants.js";
-import V from "../../../../../assets/icons/download-cloud.svg.js";
-import { usePaystubsList as v } from "../../shared/usePaystubsList/usePaystubsList.js";
-import { useNonce as G } from "../../../../../contexts/NonceProvider/useNonce.js";
-import { useDataView as j } from "../../../../Common/DataView/useDataView.js";
+import F from "../../../../../assets/icons/download-cloud.svg.js";
+import { usePaystubsList as V } from "../../shared/usePaystubsList/usePaystubsList.js";
+import { useNonce as v } from "../../../../../contexts/NonceProvider/useNonce.js";
+import { useDataView as G } from "../../../../Common/DataView/useDataView.js";
 import { DataView as Q } from "../../../../Common/DataView/DataView.js";
 function pt({ LoaderComponent: a, ...i }) {
   return /* @__PURE__ */ o(O, { componentName: "Employee.Management.Paystubs", LoaderComponent: a, children: /* @__PURE__ */ o(q, { LoaderComponent: a, ...i }) });
 }
 function q({ employeeId: a, onEvent: i, LoaderComponent: s }) {
-  F("Employee.Management.Paystubs");
-  const { t: l } = D("Employee.Management.Paystubs"), u = S(), d = v({ employeeId: a }), e = H({ employeeId: a }), m = Y([d, e]);
+  j("Employee.Management.Paystubs");
+  const { t: l } = D("Employee.Management.Paystubs"), u = S(), d = V({ employeeId: a }), e = H({ employeeId: a }), m = Y([d, e]);
   return d.isLoading ? /* @__PURE__ */ o(M, { error: m.errors, LoaderComponent: s, children: /* @__PURE__ */ o(u.Box, { header: /* @__PURE__ */ o(u.BoxHeader, { title: l("title") }), children: /* @__PURE__ */ o(T, {}) }) }) : /* @__PURE__ */ o(
     z,
     {
@@ -44,7 +44,7 @@ function z({
   errorHandling: u,
   LoaderComponent: d
 }) {
-  const { t: e } = D("Employee.Management.Paystubs"), m = S(), y = W("currency"), { showBoundary: p } = _(), f = G(), [b, g] = L(
+  const { t: e } = D("Employee.Management.Paystubs"), m = S(), y = W("currency"), { showBoundary: p } = _(), f = v(), [b, g] = L(
     () => /* @__PURE__ */ new Set()
   ), { payStubs: h } = s.data, C = s.pagination.payStubs, N = l.isLoading ? void 0 : l.data.paymentMethod, B = k(
     async (t) => {
@@ -87,6 +87,7 @@ function z({
     {
       key: "checkAmount",
       title: e("checkAmount"),
+      justify: "end",
       render: (t) => {
         if (!t.netPay) return "-";
         const r = parseFloat(t.netPay);
@@ -96,6 +97,7 @@ function z({
     {
       key: "grossPay",
       title: e("grossPay"),
+      justify: "end",
       render: (t) => {
         if (!t.grossPay) return "-";
         const r = parseFloat(t.grossPay);
@@ -107,7 +109,7 @@ function z({
       title: e("paymentMethod"),
       render: () => N?.type || e("noPaymentMethod")
     }
-  ], x = j({
+  ], x = G({
     data: h,
     columns: A,
     pagination: C,
@@ -123,7 +125,7 @@ function z({
           onClick: () => {
             t.payrollUuid && B(t.payrollUuid);
           },
-          children: /* @__PURE__ */ o(V, { "aria-hidden": !0 })
+          children: /* @__PURE__ */ o(F, { "aria-hidden": !0 })
         }
       );
     },

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

	@@ -1 +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 { useNonce } from '@/contexts/NonceProvider'\nimport { openPdfInNewTab } from '@/helpers/openPdfInNewTab'\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 const tab = openPdfInNewTab({ loadingMessage: t('downloadLoadingMessage'), nonce })\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 tab.close()\n return\n }\n tab.navigate(result.data)\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n employeeId,\n payrollUuid,\n })\n } catch (err) {\n tab.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","tab","openPdfInNewTab","prev","next","result","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}
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 { useNonce } from '@/contexts/NonceProvider'\nimport { openPdfInNewTab } from '@/helpers/openPdfInNewTab'\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 const tab = openPdfInNewTab({ loadingMessage: t('downloadLoadingMessage'), nonce })\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 tab.close()\n return\n }\n tab.navigate(result.data)\n onEvent(componentEvents.EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_DOWNLOADED, {\n employeeId,\n payrollUuid,\n })\n } catch (err) {\n tab.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 justify: 'end' as const,\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 justify: 'end' as const,\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","tab","openPdfInNewTab","prev","next","result","err","payStubsColumns","payStub","formatDateLongWithYear","amount","payStubsDataView","useDataView","isDownloading","DownloadCloudIcon","EmptyData","isShowingTable","DataView"],"mappings":"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"}