@gusto/embedded-react-sdk 0.44.2 → 0.45.0

package/dist/components/Employee/Dashboard/DashboardComponents.js

@@ -1,42 +1,137 @@
-import { jsx as t } from "react/jsx-runtime";
-import { Dashboard as m } from "./Dashboard.js";
-import { HomeAddress as d } from "../HomeAddress/management/HomeAddress.js";
-import { WorkAddress as l } from "../WorkAddress/management/WorkAddress.js";
-import { FederalTaxes as s } from "../FederalTaxes/management/FederalTaxes.js";
-import { StateTaxes as p } from "../StateTaxes/management/StateTaxes.js";
-import { Profile as u } from "../Profile/management/Profile.js";
+import { jsxs as y, Fragment as I, jsx as t } from "react/jsx-runtime";
+import { useTranslation as m } from "react-i18next";
+import { Dashboard as D } from "./Dashboard.js";
+import { HomeAddress as C } from "../HomeAddress/management/HomeAddress.js";
+import { WorkAddress as h } from "../WorkAddress/management/WorkAddress.js";
+import { FederalTaxes as b } from "../FederalTaxes/management/FederalTaxes.js";
+import { StateTaxes as x } from "../StateTaxes/management/StateTaxes.js";
+import { Profile as A } from "../Profile/management/Profile.js";
+import { BankForm as v } from "../PaymentMethod/onboarding/BankForm.js";
+import { SplitView as T } from "../PaymentMethod/onboarding/SplitView.js";
+import { DocumentManager as g } from "../Documents/management/DocumentManager.js";
+import { DeductionsForm as F } from "../Deductions/DeductionsForm/DeductionsForm.js";
+import { useDeductionsList as P } from "../Deductions/shared/useDeductionsList.js";
 import { useFlow as r } from "../../Flow/useFlow.js";
+import { useComponentContext as i } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { BaseComponent as f, BaseLayout as p } from "../../Base/Base.js";
+import "../../Base/useBase.js";
 import { ensureRequired as n } from "../../../helpers/ensureRequired.js";
-function E() {
+import { useI18n as c } from "../../../i18n/I18n.js";
+import { componentEvents as s } from "../../../shared/constants.js";
+function K() {
+  c("Employee.Dashboard");
+  const { t: e } = m("Employee.Dashboard"), { employeeId: o, onEvent: d, successAlert: l } = r(), u = i(), a = {
+    bankAccountAdded: e("alerts.bankAccountAdded"),
+    bankAccountDeleted: e("alerts.bankAccountDeleted"),
+    splitUpdated: e("alerts.splitUpdated"),
+    deductionAdded: e("alerts.deductionAdded"),
+    deductionUpdated: e("alerts.deductionUpdated"),
+    deductionDeleted: e("alerts.deductionDeleted")
+  };
+  return /* @__PURE__ */ y(I, { children: [
+    l && /* @__PURE__ */ t(
+      u.Alert,
+      {
+        status: "success",
+        label: a[l],
+        onDismiss: () => {
+          d(s.EMPLOYEE_DISMISS, null);
+        },
+        disableScrollIntoView: !0
+      }
+    ),
+    /* @__PURE__ */ t(D, { employeeId: n(o), onEvent: d })
+  ] });
+}
+function Q() {
+  const { employeeId: e, onEvent: o } = r();
+  return /* @__PURE__ */ t(C, { employeeId: n(e), onEvent: o });
+}
+function X() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(m, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(h, { employeeId: n(e), onEvent: o });
 }
-function A() {
+function Z() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(d, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(b, { employeeId: n(e), onEvent: o });
 }
-function T() {
+function $() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(l, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(x, { employeeId: n(e), onEvent: o });
 }
-function F() {
+function ee() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(s, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(A, { employeeId: n(e), onEvent: o });
 }
-function b() {
+function oe() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(p, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(f, { onEvent: o, children: /* @__PURE__ */ t(v, { employeeId: n(e), onEvent: o }) });
 }
-function h() {
+function te() {
   const { employeeId: e, onEvent: o } = r();
-  return /* @__PURE__ */ t(u, { employeeId: n(e), onEvent: o });
+  return /* @__PURE__ */ t(f, { onEvent: o, children: /* @__PURE__ */ t(T, { employeeId: n(e), onEvent: o }) });
+}
+function ne() {
+  const { employeeId: e, formId: o, onEvent: d } = r();
+  return /* @__PURE__ */ t(
+    g,
+    {
+      employeeId: n(e),
+      formId: n(o),
+      onEvent: d
+    }
+  );
+}
+function re() {
+  const { employeeId: e, editingDeductionId: o, onEvent: d } = r(), l = P({ employeeId: n(e) });
+  if (l.isLoading)
+    return /* @__PURE__ */ t(p, { isLoading: !0, error: l.errorHandling.errors });
+  const u = o ? l.data.deductions.find((a) => a.uuid === o) ?? null : null;
+  return /* @__PURE__ */ t(p, { error: l.errorHandling.errors, children: /* @__PURE__ */ t(
+    F,
+    {
+      employeeId: n(e),
+      deduction: u,
+      onSaved: (a, E) => {
+        d(
+          E === "create" ? s.EMPLOYEE_DEDUCTION_CREATED : s.EMPLOYEE_DEDUCTION_UPDATED,
+          a
+        );
+      },
+      onCancel: () => {
+        d(s.CANCEL);
+      }
+    }
+  ) });
+}
+function de() {
+  c("Employee.Dashboard");
+  const { t: e } = m("Employee.Dashboard"), o = i();
+  return /* @__PURE__ */ t(o.Heading, { as: "h2", children: e("compensationFlow.addJobTitle") });
+}
+function le() {
+  c("Employee.Dashboard");
+  const { t: e } = m("Employee.Dashboard"), o = i();
+  return /* @__PURE__ */ t(o.Heading, { as: "h2", children: e("compensationFlow.editTitle") });
+}
+function ae() {
+  c("Employee.Dashboard");
+  const { t: e } = m("Employee.Dashboard"), o = i();
+  return /* @__PURE__ */ t(o.Heading, { as: "h2", children: e("compensationFlow.addAnotherJobTitle") });
 }
 export {
-  E as DashboardViewContextual,
-  F as FederalTaxesContextual,
-  A as HomeAddressContextual,
-  h as ProfileContextual,
-  b as StateTaxesContextual,
-  T as WorkAddressContextual
+  ae as AddAnotherJobPlaceholderContextual,
+  de as AddJobPlaceholderContextual,
+  K as DashboardViewContextual,
+  re as DeductionFormContextual,
+  ne as DocumentManagerContextual,
+  le as EditCompensationPlaceholderContextual,
+  Z as FederalTaxesContextual,
+  Q as HomeAddressContextual,
+  oe as PaymentBankFormContextual,
+  te as PaymentSplitViewContextual,
+  ee as ProfileContextual,
+  $ as StateTaxesContextual,
+  X as WorkAddressContextual
 };
 //# sourceMappingURL=DashboardComponents.js.map

package/dist/components/Employee/Dashboard/DashboardComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardComponents.js","sources":["../../../../src/components/Employee/Dashboard/DashboardComponents.tsx"],"sourcesContent":["import { Dashboard } from './Dashboard'\nimport { HomeAddress } from '@/components/Employee/HomeAddress/management/HomeAddress'\nimport { WorkAddress } from '@/components/Employee/WorkAddress/management/WorkAddress'\nimport { FederalTaxes } from '@/components/Employee/FederalTaxes/management/FederalTaxes'\nimport { StateTaxes } from '@/components/Employee/StateTaxes/management/StateTaxes'\nimport { Profile } from '@/components/Employee/Profile/management/Profile'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { ensureRequired } from '@/helpers/ensureRequired'\n\nexport interface DashboardContextInterface extends FlowContextInterface {\n  employeeId: string\n}\n\nexport function DashboardViewContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <Dashboard employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function HomeAddressContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <HomeAddress employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function WorkAddressContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <WorkAddress employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function FederalTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <FederalTaxes employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function StateTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <StateTaxes employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function ProfileContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <Profile employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n"],"names":["DashboardViewContextual","employeeId","onEvent","useFlow","Dashboard","ensureRequired","HomeAddressContextual","HomeAddress","WorkAddressContextual","WorkAddress","FederalTaxesContextual","FederalTaxes","StateTaxesContextual","StateTaxes","ProfileContextual","Profile"],"mappings":";;;;;;;;;AAaO,SAASA,IAA0B;AACxC,QAAM,EAAE,YAAAC,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQC,GAAA,EAAU,YAAYC,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AAC9E;AAEO,SAASI,IAAwB;AACtC,QAAM,EAAE,YAAAL,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQI,GAAA,EAAY,YAAYF,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AAChF;AAEO,SAASM,IAAwB;AACtC,QAAM,EAAE,YAAAP,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQM,GAAA,EAAY,YAAYJ,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AAChF;AAEO,SAASQ,IAAyB;AACvC,QAAM,EAAE,YAAAT,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQQ,GAAA,EAAa,YAAYN,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AACjF;AAEO,SAASU,IAAuB;AACrC,QAAM,EAAE,YAAAX,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQU,GAAA,EAAW,YAAYR,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AAC/E;AAEO,SAASY,IAAoB;AAClC,QAAM,EAAE,YAAAb,GAAY,SAAAC,EAAA,IAAYC,EAAA;AAChC,2BAAQY,GAAA,EAAQ,YAAYV,EAAeJ,CAAU,GAAG,SAAAC,GAAkB;AAC5E;"}
+{"version":3,"file":"DashboardComponents.js","sources":["../../../../src/components/Employee/Dashboard/DashboardComponents.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Job } from '@gusto/embedded-api/models/components/job'\nimport { Dashboard } from './Dashboard'\nimport { HomeAddress } from '@/components/Employee/HomeAddress/management/HomeAddress'\nimport { WorkAddress } from '@/components/Employee/WorkAddress/management/WorkAddress'\nimport { FederalTaxes } from '@/components/Employee/FederalTaxes/management/FederalTaxes'\nimport { StateTaxes } from '@/components/Employee/StateTaxes/management/StateTaxes'\nimport { Profile } from '@/components/Employee/Profile/management/Profile'\nimport { BankForm } from '@/components/Employee/PaymentMethod/onboarding/BankForm'\nimport { SplitView } from '@/components/Employee/PaymentMethod/onboarding/SplitView'\nimport { DocumentManager } from '@/components/Employee/Documents/management/DocumentManager'\nimport { DeductionsForm } from '@/components/Employee/Deductions/DeductionsForm/DeductionsForm'\nimport { useDeductionsList } from '@/components/Employee/Deductions/shared'\nimport { useFlow, type FlowContextInterface } from '@/components/Flow/useFlow'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { BaseComponent, BaseLayout } from '@/components/Base'\nimport { ensureRequired } from '@/helpers/ensureRequired'\nimport { useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\n\nexport type DashboardSuccessAlert =\n  | 'bankAccountAdded'\n  | 'bankAccountDeleted'\n  | 'splitUpdated'\n  | 'deductionAdded'\n  | 'deductionUpdated'\n  | 'deductionDeleted'\n\nexport interface DashboardContextInterface extends FlowContextInterface {\n  employeeId: string\n  formId?: string\n  currentJob?: Job | null\n  successAlert?: DashboardSuccessAlert | null\n  /** Set by the EMPLOYEE_DEDUCTION_EDIT transition; consumed by\n   *  DeductionFormContextual to pre-populate the form. */\n  editingDeductionId?: string\n}\n\nexport function DashboardViewContextual() {\n  useI18n('Employee.Dashboard')\n  const { t } = useTranslation('Employee.Dashboard')\n  const { employeeId, onEvent, successAlert } = useFlow<DashboardContextInterface>()\n  const Components = useComponentContext()\n\n  const alertLabels: Record<DashboardSuccessAlert, string> = {\n    bankAccountAdded: t('alerts.bankAccountAdded'),\n    bankAccountDeleted: t('alerts.bankAccountDeleted'),\n    splitUpdated: t('alerts.splitUpdated'),\n    deductionAdded: t('alerts.deductionAdded'),\n    deductionUpdated: t('alerts.deductionUpdated'),\n    deductionDeleted: t('alerts.deductionDeleted'),\n  }\n\n  return (\n    <>\n      {successAlert && (\n        <Components.Alert\n          status=\"success\"\n          label={alertLabels[successAlert]}\n          onDismiss={() => {\n            onEvent(componentEvents.EMPLOYEE_DISMISS, null)\n          }}\n          disableScrollIntoView\n        />\n      )}\n      <Dashboard employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n    </>\n  )\n}\n\nexport function HomeAddressContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <HomeAddress employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function WorkAddressContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <WorkAddress employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function FederalTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <FederalTaxes employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function StateTaxesContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <StateTaxes employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function ProfileContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return <Profile employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n}\n\nexport function PaymentBankFormContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <BankForm employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n    </BaseComponent>\n  )\n}\n\nexport function PaymentSplitViewContextual() {\n  const { employeeId, onEvent } = useFlow<DashboardContextInterface>()\n  return (\n    <BaseComponent onEvent={onEvent}>\n      <SplitView employeeId={ensureRequired(employeeId)} onEvent={onEvent} />\n    </BaseComponent>\n  )\n}\n\nexport function DocumentManagerContextual() {\n  const { employeeId, formId, onEvent } = useFlow<DashboardContextInterface>()\n  return (\n    <DocumentManager\n      employeeId={ensureRequired(employeeId)}\n      formId={ensureRequired(formId)}\n      onEvent={onEvent}\n    />\n  )\n}\n\nexport function DeductionFormContextual() {\n  const { employeeId, editingDeductionId, onEvent } = useFlow<DashboardContextInterface>()\n  // The same list query the form hooks use internally — React Query dedupes,\n  // so this just looks up the loaded row to pre-populate edit mode.\n  const list = useDeductionsList({ employeeId: ensureRequired(employeeId) })\n\n  if (list.isLoading) {\n    return <BaseLayout isLoading error={list.errorHandling.errors} />\n  }\n\n  const deduction = editingDeductionId\n    ? (list.data.deductions.find(d => d.uuid === editingDeductionId) ?? null)\n    : null\n\n  return (\n    <BaseLayout error={list.errorHandling.errors}>\n      <DeductionsForm\n        employeeId={ensureRequired(employeeId)}\n        deduction={deduction}\n        onSaved={(saved, mode) => {\n          onEvent(\n            mode === 'create'\n              ? componentEvents.EMPLOYEE_DEDUCTION_CREATED\n              : componentEvents.EMPLOYEE_DEDUCTION_UPDATED,\n            saved,\n          )\n        }}\n        onCancel={() => {\n          onEvent(componentEvents.CANCEL)\n        }}\n      />\n    </BaseLayout>\n  )\n}\n\nexport function AddJobPlaceholderContextual() {\n  useI18n('Employee.Dashboard')\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  return <Components.Heading as=\"h2\">{t('compensationFlow.addJobTitle')}</Components.Heading>\n}\n\nexport function EditCompensationPlaceholderContextual() {\n  useI18n('Employee.Dashboard')\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  return <Components.Heading as=\"h2\">{t('compensationFlow.editTitle')}</Components.Heading>\n}\n\nexport function AddAnotherJobPlaceholderContextual() {\n  useI18n('Employee.Dashboard')\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  return <Components.Heading as=\"h2\">{t('compensationFlow.addAnotherJobTitle')}</Components.Heading>\n}\n"],"names":["DashboardViewContextual","useI18n","t","useTranslation","employeeId","onEvent","successAlert","useFlow","Components","useComponentContext","alertLabels","jsxs","Fragment","jsx","componentEvents","Dashboard","ensureRequired","HomeAddressContextual","HomeAddress","WorkAddressContextual","WorkAddress","FederalTaxesContextual","FederalTaxes","StateTaxesContextual","StateTaxes","ProfileContextual","Profile","PaymentBankFormContextual","BaseComponent","BankForm","PaymentSplitViewContextual","SplitView","DocumentManagerContextual","formId","DocumentManager","DeductionFormContextual","editingDeductionId","list","useDeductionsList","BaseLayout","deduction","d","DeductionsForm","saved","mode","AddJobPlaceholderContextual","EditCompensationPlaceholderContextual","AddAnotherJobPlaceholderContextual"],"mappings":"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"}

package/dist/components/Employee/Dashboard/DocumentsView.d.ts

@@ -4,4 +4,15 @@ export interface DocumentsViewProps {
     isLoading?: boolean;
     onViewForm?: (formUuid: string) => void;
 }
+export interface DocumentsViewWithDataProps {
+    employeeId: string;
+    onViewForm?: (formUuid: string) => void;
+}
+/**
+ * Tab-mounted container for the Documents tab. Owns the
+ * `useEmployeeForms` fetch so the request only fires when the user
+ * actually opens this tab (or whatever the parent chooses to mount).
+ * The presentational `DocumentsView` stays pure for testing/stories.
+ */
+export declare function DocumentsViewWithData({ employeeId, onViewForm }: DocumentsViewWithDataProps): import("react/jsx-runtime").JSX.Element;
 export declare function DocumentsView({ forms, isLoading, onViewForm }: DocumentsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Employee/Dashboard/DocumentsView.js

@@ -1,40 +1,46 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useTranslation as c } from "react-i18next";
-import { Flex as o } from "../../Common/Flex/Flex.js";
+import { jsx as e } from "react/jsx-runtime";
+import { useTranslation as d } from "react-i18next";
+import { Flex as m } from "../../Common/Flex/Flex.js";
 import { useComponentContext as l } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { Loading as d } from "../../Common/Loading/Loading.js";
+import { Loading as f } from "../../Common/Loading/Loading.js";
 import { EmptyData as p } from "../../Common/EmptyData/EmptyData.js";
-import { useDataView as f } from "../../Common/DataView/useDataView.js";
-import { DataView as y } from "../../Common/DataView/DataView.js";
-function q({ forms: i = [], isLoading: m = !1, onViewForm: s }) {
-  const { t } = c("Employee.Dashboard"), n = l(), u = [
+import { BaseLayout as a } from "../../Base/Base.js";
+import { useEmployeeForms as g } from "./hooks/useEmployeeForms.js";
+import { useDataView as y } from "../../Common/DataView/useDataView.js";
+import { DataView as h } from "../../Common/DataView/DataView.js";
+function v({ employeeId: i, onViewForm: s }) {
+  const n = g({ employeeId: i });
+  return n.isLoading ? /* @__PURE__ */ e(a, { isLoading: !0, error: n.errorHandling.errors }) : /* @__PURE__ */ e(a, { error: n.errorHandling.errors, children: /* @__PURE__ */ e(D, { forms: n.data.formList, onViewForm: s }) });
+}
+function D({ forms: i = [], isLoading: s = !1, onViewForm: n }) {
+  const { t } = d("Employee.Dashboard"), o = l(), u = [
     {
       key: "title",
       title: t("documents.columns.title"),
-      render: (e) => e.title || "-"
+      render: (r) => r.title || "-"
     },
     {
       key: "year",
       title: t("documents.columns.year"),
-      render: (e) => e.year ? String(e.year) : "-"
+      render: (r) => r.year ? String(r.year) : "-"
     },
     {
       key: "status",
       title: t("documents.columns.status"),
-      render: (e) => e.draft ? t("documents.status.draft") : t("documents.status.final")
+      render: (r) => r.draft ? t("documents.status.draft") : t("documents.status.final")
     },
     {
       key: "requiresSigning",
       title: t("documents.columns.requiresSigning"),
-      render: (e) => e.requiresSigning ? t("common.yes") : t("common.no")
+      render: (r) => r.requiresSigning ? /* @__PURE__ */ e(o.Badge, { status: "warning", children: t("documents.signingStatus.notSigned") }) : /* @__PURE__ */ e(o.Badge, { status: "success", children: t("documents.signingStatus.signed") })
     }
-  ], a = f({
+  ], c = y({
     data: i,
     columns: u,
-    itemMenu: (e) => /* @__PURE__ */ r(n.Button, { variant: "secondary", onClick: () => s?.(e.uuid), children: t("documents.viewCta") }),
-    emptyState: () => /* @__PURE__ */ r(
+    itemMenu: (r) => /* @__PURE__ */ e(o.Button, { variant: "secondary", onClick: () => n?.(r.uuid), children: t("documents.viewCta") }),
+    emptyState: () => /* @__PURE__ */ e(
       p,
       {
         title: t("documents.emptyState.title"),
@@ -42,9 +48,10 @@ function q({ forms: i = [], isLoading: m = !1, onViewForm: s }) {
       }
     )
   });
-  return m ? /* @__PURE__ */ r(d, {}) : /* @__PURE__ */ r(o, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ r(n.Box, { header: /* @__PURE__ */ r(n.BoxHeader, { title: t("documents.title") }), children: /* @__PURE__ */ r(o, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ r(y, { label: t("documents.listLabel"), ...a }) }) }) });
+  return s ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(m, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ e(o.Box, { header: /* @__PURE__ */ e(o.BoxHeader, { title: t("documents.title") }), children: /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ e(h, { label: t("documents.listLabel"), ...c }) }) }) });
 }
 export {
-  q as DocumentsView
+  D as DocumentsView,
+  v as DocumentsViewWithData
 };
 //# sourceMappingURL=DocumentsView.js.map

package/dist/components/Employee/Dashboard/DocumentsView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DocumentsView.js","sources":["../../../../src/components/Employee/Dashboard/DocumentsView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Form } from '@gusto/embedded-api/models/components/form'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\n\nexport interface DocumentsViewProps {\n  forms?: Form[]\n  isLoading?: boolean\n  onViewForm?: (formUuid: string) => void\n}\n\nexport function DocumentsView({ forms = [], isLoading = false, onViewForm }: DocumentsViewProps) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n\n  const formsColumns = [\n    {\n      key: 'title',\n      title: t('documents.columns.title'),\n      render: (form: Form) => form.title || '-',\n    },\n    {\n      key: 'year',\n      title: t('documents.columns.year'),\n      render: (form: Form) => {\n        if (form.year) return String(form.year)\n        return '-'\n      },\n    },\n    {\n      key: 'status',\n      title: t('documents.columns.status'),\n      render: (form: Form) => {\n        if (form.draft) return t('documents.status.draft')\n        return t('documents.status.final')\n      },\n    },\n    {\n      key: 'requiresSigning',\n      title: t('documents.columns.requiresSigning'),\n      render: (form: Form) => {\n        if (form.requiresSigning) return t('common.yes')\n        return t('common.no')\n      },\n    },\n  ]\n\n  const formsDataView = useDataView({\n    data: forms,\n    columns: formsColumns,\n    itemMenu: (form: Form) => (\n      <Components.Button variant=\"secondary\" onClick={() => onViewForm?.(form.uuid)}>\n        {t('documents.viewCta')}\n      </Components.Button>\n    ),\n    emptyState: () => (\n      <EmptyData\n        title={t('documents.emptyState.title')}\n        description={t('documents.emptyState.description')}\n      />\n    ),\n  })\n\n  if (isLoading) {\n    return <Loading />\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box header={<Components.BoxHeader title={t('documents.title')} />}>\n        <Flex flexDirection=\"column\" gap={16}>\n          <DataView label={t('documents.listLabel')} {...formsDataView} />\n        </Flex>\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["DocumentsView","forms","isLoading","onViewForm","useTranslation","Components","useComponentContext","formsColumns","form","formsDataView","useDataView","jsx","EmptyData","Loading","Flex","DataView"],"mappings":";;;;;;;;;;AAYO,SAASA,EAAc,EAAE,OAAAC,IAAQ,CAAA,GAAI,WAAAC,IAAY,IAAO,YAAAC,KAAkC;AAC/F,QAAM,EAAE,EAAA,IAAMC,EAAe,oBAAoB,GAC3CC,IAAaC,EAAA,GAEbC,IAAe;AAAA,IACnB;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,yBAAyB;AAAA,MAClC,QAAQ,CAACC,MAAeA,EAAK,SAAS;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,wBAAwB;AAAA,MACjC,QAAQ,CAACA,MACHA,EAAK,OAAa,OAAOA,EAAK,IAAI,IAC/B;AAAA,IACT;AAAA,IAEF;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,0BAA0B;AAAA,MACnC,QAAQ,CAACA,MACHA,EAAK,QAAc,EAAE,wBAAwB,IAC1C,EAAE,wBAAwB;AAAA,IACnC;AAAA,IAEF;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,mCAAmC;AAAA,MAC5C,QAAQ,CAACA,MACHA,EAAK,kBAAwB,EAAE,YAAY,IACxC,EAAE,WAAW;AAAA,IACtB;AAAA,EACF,GAGIC,IAAgBC,EAAY;AAAA,IAChC,MAAMT;AAAA,IACN,SAASM;AAAA,IACT,UAAU,CAACC,MACT,gBAAAG,EAACN,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAAS,MAAMF,IAAaK,EAAK,IAAI,GACzE,UAAA,EAAE,mBAAmB,GACxB;AAAA,IAEF,YAAY,MACV,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,4BAA4B;AAAA,QACrC,aAAa,EAAE,kCAAkC;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,CAEH;AAED,SAAIV,sBACMW,GAAA,EAAQ,sBAIfC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAH,EAACN,EAAW,KAAX,EAAe,QAAQ,gBAAAM,EAACN,EAAW,WAAX,EAAqB,OAAO,EAAE,iBAAiB,EAAA,CAAG,GACzE,4BAACS,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAH,EAACI,GAAA,EAAS,OAAO,EAAE,qBAAqB,GAAI,GAAGN,GAAe,EAAA,CAChE,GACF,GACF;AAEJ;"}
+{"version":3,"file":"DocumentsView.js","sources":["../../../../src/components/Employee/Dashboard/DocumentsView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Form } from '@gusto/embedded-api/models/components/form'\nimport { useEmployeeForms } from './hooks'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { DataView, useDataView, EmptyData, Loading } from '@/components/Common'\nimport { BaseLayout } from '@/components/Base/Base'\n\nexport interface DocumentsViewProps {\n  forms?: Form[]\n  isLoading?: boolean\n  onViewForm?: (formUuid: string) => void\n}\n\nexport interface DocumentsViewWithDataProps {\n  employeeId: string\n  onViewForm?: (formUuid: string) => void\n}\n\n/**\n * Tab-mounted container for the Documents tab. Owns the\n * `useEmployeeForms` fetch so the request only fires when the user\n * actually opens this tab (or whatever the parent chooses to mount).\n * The presentational `DocumentsView` stays pure for testing/stories.\n */\nexport function DocumentsViewWithData({ employeeId, onViewForm }: DocumentsViewWithDataProps) {\n  const forms = useEmployeeForms({ employeeId })\n\n  if (forms.isLoading) {\n    return <BaseLayout isLoading error={forms.errorHandling.errors} />\n  }\n\n  return (\n    <BaseLayout error={forms.errorHandling.errors}>\n      <DocumentsView forms={forms.data.formList} onViewForm={onViewForm} />\n    </BaseLayout>\n  )\n}\n\nexport function DocumentsView({ forms = [], isLoading = false, onViewForm }: DocumentsViewProps) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n\n  const formsColumns = [\n    {\n      key: 'title',\n      title: t('documents.columns.title'),\n      render: (form: Form) => form.title || '-',\n    },\n    {\n      key: 'year',\n      title: t('documents.columns.year'),\n      render: (form: Form) => {\n        if (form.year) return String(form.year)\n        return '-'\n      },\n    },\n    {\n      key: 'status',\n      title: t('documents.columns.status'),\n      render: (form: Form) => {\n        if (form.draft) return t('documents.status.draft')\n        return t('documents.status.final')\n      },\n    },\n    {\n      key: 'requiresSigning',\n      title: t('documents.columns.requiresSigning'),\n      render: (form: Form) => {\n        if (form.requiresSigning) {\n          return (\n            <Components.Badge status=\"warning\">\n              {t('documents.signingStatus.notSigned')}\n            </Components.Badge>\n          )\n        }\n        return (\n          <Components.Badge status=\"success\">\n            {t('documents.signingStatus.signed')}\n          </Components.Badge>\n        )\n      },\n    },\n  ]\n\n  const formsDataView = useDataView({\n    data: forms,\n    columns: formsColumns,\n    itemMenu: (form: Form) => (\n      <Components.Button variant=\"secondary\" onClick={() => onViewForm?.(form.uuid)}>\n        {t('documents.viewCta')}\n      </Components.Button>\n    ),\n    emptyState: () => (\n      <EmptyData\n        title={t('documents.emptyState.title')}\n        description={t('documents.emptyState.description')}\n      />\n    ),\n  })\n\n  if (isLoading) {\n    return <Loading />\n  }\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box header={<Components.BoxHeader title={t('documents.title')} />}>\n        <Flex flexDirection=\"column\" gap={16}>\n          <DataView label={t('documents.listLabel')} {...formsDataView} />\n        </Flex>\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["DocumentsViewWithData","employeeId","onViewForm","forms","useEmployeeForms","BaseLayout","jsx","DocumentsView","isLoading","useTranslation","Components","useComponentContext","formsColumns","form","formsDataView","useDataView","EmptyData","Loading","Flex","DataView"],"mappings":";;;;;;;;;;;;AAyBO,SAASA,EAAsB,EAAE,YAAAC,GAAY,YAAAC,KAA0C;AAC5F,QAAMC,IAAQC,EAAiB,EAAE,YAAAH,GAAY;AAE7C,SAAIE,EAAM,8BACAE,GAAA,EAAW,WAAS,IAAC,OAAOF,EAAM,cAAc,QAAQ,IAIhE,gBAAAG,EAACD,GAAA,EAAW,OAAOF,EAAM,cAAc,QACrC,UAAA,gBAAAG,EAACC,GAAA,EAAc,OAAOJ,EAAM,KAAK,UAAU,YAAAD,GAAwB,GACrE;AAEJ;AAEO,SAASK,EAAc,EAAE,OAAAJ,IAAQ,CAAA,GAAI,WAAAK,IAAY,IAAO,YAAAN,KAAkC;AAC/F,QAAM,EAAE,EAAA,IAAMO,EAAe,oBAAoB,GAC3CC,IAAaC,EAAA,GAEbC,IAAe;AAAA,IACnB;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,yBAAyB;AAAA,MAClC,QAAQ,CAACC,MAAeA,EAAK,SAAS;AAAA,IAAA;AAAA,IAExC;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,wBAAwB;AAAA,MACjC,QAAQ,CAACA,MACHA,EAAK,OAAa,OAAOA,EAAK,IAAI,IAC/B;AAAA,IACT;AAAA,IAEF;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,0BAA0B;AAAA,MACnC,QAAQ,CAACA,MACHA,EAAK,QAAc,EAAE,wBAAwB,IAC1C,EAAE,wBAAwB;AAAA,IACnC;AAAA,IAEF;AAAA,MACE,KAAK;AAAA,MACL,OAAO,EAAE,mCAAmC;AAAA,MAC5C,QAAQ,CAACA,MACHA,EAAK,kBAEL,gBAAAP,EAACI,EAAW,OAAX,EAAiB,QAAO,WACtB,UAAA,EAAE,mCAAmC,GACxC,IAIF,gBAAAJ,EAACI,EAAW,OAAX,EAAiB,QAAO,WACtB,UAAA,EAAE,gCAAgC,GACrC;AAAA,IAEJ;AAAA,EACF,GAGII,IAAgBC,EAAY;AAAA,IAChC,MAAMZ;AAAA,IACN,SAASS;AAAA,IACT,UAAU,CAACC,MACT,gBAAAP,EAACI,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAAS,MAAMR,IAAaW,EAAK,IAAI,GACzE,UAAA,EAAE,mBAAmB,GACxB;AAAA,IAEF,YAAY,MACV,gBAAAP;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,4BAA4B;AAAA,QACrC,aAAa,EAAE,kCAAkC;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,CAEH;AAED,SAAIR,sBACMS,GAAA,EAAQ,sBAIfC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAZ,EAACI,EAAW,KAAX,EAAe,QAAQ,gBAAAJ,EAACI,EAAW,WAAX,EAAqB,OAAO,EAAE,iBAAiB,EAAA,CAAG,GACzE,4BAACQ,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAZ,EAACa,GAAA,EAAS,OAAO,EAAE,qBAAqB,GAAI,GAAGL,GAAe,EAAA,CAChE,GACF,GACF;AAEJ;"}

package/dist/components/Employee/Dashboard/JobAndPayView.d.ts

@@ -1,22 +1,14 @@
 import { Job } from '@gusto/embedded-api/models/components/job';
-import { EmployeePaymentMethod } from '@gusto/embedded-api/models/components/employeepaymentmethod';
 import { Garnishment } from '@gusto/embedded-api/models/components/garnishment';
-import { EmployeeBankAccount } from '@gusto/embedded-api/models/components/employeebankaccount';
-import { GetV1EmployeesEmployeeUuidPayStubsResponse } from '@gusto/embedded-api/models/operations/getv1employeesemployeeuuidpaystubs';
-import { PaginationControlProps } from '../../Common/PaginationControl/PaginationControlTypes';
-type EmployeePayStub = NonNullable<GetV1EmployeesEmployeeUuidPayStubsResponse['employeePayStubsList']>[number];
+import { EventType } from '../../../shared/constants';
+import { OnEventType } from '../../Base/useBase';
 export interface JobAndPayViewProps {
-    job?: Job;
-    paymentMethod?: EmployeePaymentMethod;
-    bankAccounts?: EmployeeBankAccount[];
-    garnishments?: Garnishment[];
-    payStubs?: EmployeePayStub[];
-    payStubsPagination?: PaginationControlProps;
-    isLoading?: boolean;
-    onEditCompensation?: () => void;
-    onSplitPaycheck?: () => void;
-    onAddBankAccount?: () => void;
+    employeeId: string;
+    onEvent: OnEventType<EventType, unknown>;
+    onEditCompensation?: (job: Job) => void;
+    onAddJob?: () => void;
+    onAddAnotherJob?: () => void;
     onAddDeduction?: () => void;
+    onEditDeduction?: (deduction: Garnishment) => void;
 }
-export declare function JobAndPayView({ job, paymentMethod, bankAccounts, garnishments, payStubs, payStubsPagination, isLoading, onEditCompensation, onSplitPaycheck, onAddBankAccount, onAddDeduction, }: JobAndPayViewProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function JobAndPayView({ employeeId, onEvent, onEditCompensation, onAddJob, onAddAnotherJob, onAddDeduction, onEditDeduction, }: JobAndPayViewProps): import("react/jsx-runtime").JSX.Element;