@gusto/embedded-react-sdk 0.46.2 → 0.46.3

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

@@ -1,155 +1,141 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useTranslation as b } from "react-i18next";
-import { Flex as a } from "../../Common/Flex/Flex.js";
-import { useComponentContext as v } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-import { formatDateLongWithYear as f } from "../../../helpers/dateFormatting.js";
-import { firstLastName as A, getStreet as C, getCityStateZip as X } from "../../../helpers/formattedStrings.js";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useTranslation as X } from "react-i18next";
+import { Flex as d } from "../../Common/Flex/Flex.js";
+import { useComponentContext as w } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { formatDateLongWithYear as D } from "../../../helpers/dateFormatting.js";
+import { firstLastName as T, getStreet as A, getCityStateZip as L } from "../../../helpers/formattedStrings.js";
 import "classnames";
 import "../../../shared/constants.js";
-import { Loading as d } from "../../Common/Loading/Loading.js";
-import { BaseLayout as w } from "../../Base/Base.js";
-import { useEmployeeBasicDetails as N } from "./hooks/useEmployeeBasicDetails.js";
+import { Loading as m } from "../../Common/Loading/Loading.js";
+import { BaseLayout as N } from "../../Base/Base.js";
+import { useEmployeeBasicDetails as E } from "./hooks/useEmployeeBasicDetails.js";
 function Y({
-  employeeId: r,
-  onEditBasicDetails: l,
+  employeeId: a,
+  onEditBasicDetails: o,
   onManageHomeAddress: s,
-  onManageWorkAddress: c
+  onManageWorkAddress: n
 }) {
-  const o = N({ employeeId: r });
-  return /* @__PURE__ */ e(w, { error: o.errorHandling.errors, children: /* @__PURE__ */ e(
-    k,
+  const r = E({ employeeId: a });
+  return /* @__PURE__ */ t(N, { error: r.errorHandling.errors, children: /* @__PURE__ */ t(
+    H,
     {
-      employee: o.data.employee,
-      currentHomeAddress: o.data.currentHomeAddress,
-      currentWorkAddress: o.data.currentWorkAddress,
-      isEmployeeLoading: o.status.isEmployeeLoading,
-      isHomeAddressLoading: o.status.isHomeAddressLoading,
-      isWorkAddressLoading: o.status.isWorkAddressLoading,
-      onEditBasicDetails: l,
+      employee: r.data.employee,
+      currentHomeAddress: r.data.currentHomeAddress,
+      currentWorkAddress: r.data.currentWorkAddress,
+      isEmployeeLoading: r.status.isEmployeeLoading,
+      isHomeAddressLoading: r.status.isHomeAddressLoading,
+      isWorkAddressLoading: r.status.isWorkAddressLoading,
+      onEditBasicDetails: o,
       onManageHomeAddress: s,
-      onManageWorkAddress: c
+      onManageWorkAddress: n
     }
   ) });
 }
-function k({
-  employee: r,
-  currentHomeAddress: l,
+function H({
+  employee: a,
+  currentHomeAddress: o,
   currentWorkAddress: s,
-  isLoading: c = !1,
-  isEmployeeLoading: o = c,
-  isHomeAddressLoading: h = c,
-  isWorkAddressLoading: m = c,
-  onEditBasicDetails: g,
-  onManageHomeAddress: T,
-  onManageWorkAddress: B
+  isLoading: n = !1,
+  isEmployeeLoading: r = n,
+  isHomeAddressLoading: h = n,
+  isWorkAddressLoading: p = n,
+  onEditBasicDetails: f,
+  onManageHomeAddress: u,
+  onManageWorkAddress: x
 }) {
-  const { t } = b("Employee.Dashboard"), i = v(), x = r ? A({ first_name: r.firstName, last_name: r.lastName }) : void 0, p = r ? f(r.jobs?.[0]?.hireDate) : void 0, u = r ? f(r.dateOfBirth) : void 0, D = r?.hasSsn ? "XXX-XX-XXXX" : void 0;
-  return /* @__PURE__ */ n(a, { flexDirection: "column", gap: 24, children: [
-    /* @__PURE__ */ e(
+  const { t: e } = X("Employee.Dashboard"), i = w(), g = a ? T({ first_name: a.firstName, last_name: a.lastName }) : void 0, b = a ? D(a.jobs?.[0]?.hireDate) : void 0, B = a ? D(a.dateOfBirth) : void 0, C = a?.hasSsn ? "XXX-XX-XXXX" : void 0, l = /* @__PURE__ */ t("span", { "aria-label": e("listEmptyPlaceholder"), children: "–" }), v = a ? [
+    { term: e("basicDetails.legalName"), description: g || l },
+    { term: e("basicDetails.startDate"), description: b || l },
+    {
+      term: e("basicDetails.socialSecurityNumber"),
+      description: C || l
+    },
+    { term: e("basicDetails.dateOfBirth"), description: B || l },
+    { term: e("basicDetails.personalEmail"), description: a.email || l }
+  ] : [];
+  return /* @__PURE__ */ c(d, { flexDirection: "column", gap: 24, children: [
+    /* @__PURE__ */ t(
       i.Box,
       {
-        header: /* @__PURE__ */ e(
+        header: /* @__PURE__ */ t(
           i.BoxHeader,
           {
-            title: t("basicDetails.title"),
-            action: /* @__PURE__ */ e(
+            title: e("basicDetails.title"),
+            action: /* @__PURE__ */ t(
               i.Button,
               {
                 variant: "secondary",
-                onClick: g,
-                isDisabled: o,
-                children: t("basicDetails.editCta")
+                onClick: f,
+                isDisabled: r,
+                children: e("basicDetails.editCta")
               }
             )
           }
         ),
-        children: /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: o ? /* @__PURE__ */ e(d, {}) : r ? /* @__PURE__ */ n(a, { flexDirection: "column", gap: 12, children: [
-          x && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("basicDetails.legalName") }),
-            /* @__PURE__ */ e(i.Text, { children: x })
-          ] }),
-          p && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("basicDetails.startDate") }),
-            /* @__PURE__ */ e(i.Text, { children: p })
-          ] }),
-          D && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("basicDetails.socialSecurityNumber") }),
-            /* @__PURE__ */ e(i.Text, { children: D })
-          ] }),
-          u && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("basicDetails.dateOfBirth") }),
-            /* @__PURE__ */ e(i.Text, { children: u })
-          ] }),
-          r.email && /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-            /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("basicDetails.personalEmail") }),
-            /* @__PURE__ */ e(i.Text, { children: r.email })
-          ] })
-        ] }) : null })
+        children: r ? /* @__PURE__ */ t(m, {}) : a ? /* @__PURE__ */ t(i.DescriptionList, { items: v }) : null
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       i.Box,
       {
-        header: /* @__PURE__ */ e(
+        header: /* @__PURE__ */ t(
           i.BoxHeader,
           {
-            title: t("homeAddress.title"),
-            action: /* @__PURE__ */ e(
+            title: e("homeAddress.title"),
+            action: /* @__PURE__ */ t(
               i.Button,
               {
                 variant: "secondary",
-                onClick: T,
+                onClick: u,
                 isDisabled: h,
-                children: t("homeAddress.manageCta")
+                children: e("homeAddress.manageCta")
               }
             )
           }
         ),
-        children: /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: h ? /* @__PURE__ */ e(d, {}) : l ? /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("homeAddress.currentAddress") }),
-          /* @__PURE__ */ e(i.Text, { children: C(l).replace(",", "") }),
-          /* @__PURE__ */ e(i.Text, { children: X(l) })
-        ] }) : /* @__PURE__ */ e(i.Text, { children: t("homeAddress.noAddress") }) })
+        children: /* @__PURE__ */ t(d, { flexDirection: "column", gap: 16, children: h ? /* @__PURE__ */ t(m, {}) : o ? /* @__PURE__ */ c(d, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ t(i.Text, { weight: "medium", children: A(o).replace(",", "") }),
+          /* @__PURE__ */ t(i.Text, { variant: "supporting", children: L(o) })
+        ] }) : /* @__PURE__ */ t(i.Text, { children: e("homeAddress.noAddress") }) })
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ t(
       i.Box,
       {
-        header: /* @__PURE__ */ e(
+        header: /* @__PURE__ */ t(
           i.BoxHeader,
           {
-            title: t("workAddress.title"),
-            action: /* @__PURE__ */ e(
+            title: e("workAddress.title"),
+            action: /* @__PURE__ */ t(
               i.Button,
               {
                 variant: "secondary",
-                onClick: B,
-                isDisabled: m,
-                children: t("workAddress.manageCta")
+                onClick: x,
+                isDisabled: p,
+                children: e("workAddress.manageCta")
               }
             )
           }
         ),
-        children: /* @__PURE__ */ e(a, { flexDirection: "column", gap: 16, children: m ? /* @__PURE__ */ e(d, {}) : s ? /* @__PURE__ */ n(a, { flexDirection: "column", gap: 0, children: [
-          /* @__PURE__ */ e(i.Text, { variant: "supporting", children: t("workAddress.currentAddress") }),
-          /* @__PURE__ */ n(i.Text, { children: [
+        children: /* @__PURE__ */ t(d, { flexDirection: "column", gap: 16, children: p ? /* @__PURE__ */ t(m, {}) : s ? /* @__PURE__ */ c(d, { flexDirection: "column", gap: 0, children: [
+          /* @__PURE__ */ c(i.Text, { weight: "medium", children: [
             s.street1,
             s.street2 ? `, ${s.street2}` : ""
           ] }),
-          /* @__PURE__ */ n(i.Text, { children: [
+          /* @__PURE__ */ c(i.Text, { variant: "supporting", children: [
             s.city,
             ", ",
             s.state,
             " ",
             s.zip
           ] })
-        ] }) : /* @__PURE__ */ e(i.Text, { children: t("workAddress.noAddress") }) })
+        ] }) : /* @__PURE__ */ t(i.Text, { children: e("workAddress.noAddress") }) })
       }
     )
   ] });
 }
 export {
-  k as BasicDetailsView,
+  H as BasicDetailsView,
   Y as BasicDetailsViewWithData
 };
 //# sourceMappingURL=BasicDetailsView.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BasicDetailsView.js","sources":["../../../../src/components/Employee/Dashboard/BasicDetailsView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { EmployeeAddress } from '@gusto/embedded-api/models/components/employeeaddress'\nimport type { EmployeeWorkAddress } from '@gusto/embedded-api/models/components/employeeworkaddress'\nimport { useEmployeeBasicDetails } from './hooks'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport { firstLastName, getStreet, getCityStateZip } from '@/helpers/formattedStrings'\nimport { Loading } from '@/components/Common'\nimport { BaseLayout } from '@/components/Base/Base'\n\nexport interface BasicDetailsViewProps {\n  employee?: Employee\n  currentHomeAddress?: EmployeeAddress\n  currentWorkAddress?: EmployeeWorkAddress\n  /** Loads all three cards. Per-section flags below take precedence\n   *  when each query resolves independently. */\n  isLoading?: boolean\n  isEmployeeLoading?: boolean\n  isHomeAddressLoading?: boolean\n  isWorkAddressLoading?: boolean\n  onEditBasicDetails?: () => void\n  onManageHomeAddress?: () => void\n  onManageWorkAddress?: () => void\n}\n\nexport interface BasicDetailsViewWithDataProps {\n  employeeId: string\n  onEditBasicDetails?: () => void\n  onManageHomeAddress?: () => void\n  onManageWorkAddress?: () => void\n}\n\n/**\n * Tab-mounted container for the Basic details tab. Owns the\n * `useEmployeeBasicDetails` fetch (employee + home address + work address)\n * so the requests only fire when the tab is mounted. Each card paints\n * its own skeleton + content as the underlying query resolves.\n */\nexport function BasicDetailsViewWithData({\n  employeeId,\n  onEditBasicDetails,\n  onManageHomeAddress,\n  onManageWorkAddress,\n}: BasicDetailsViewWithDataProps) {\n  const basicDetails = useEmployeeBasicDetails({ employeeId })\n\n  return (\n    <BaseLayout error={basicDetails.errorHandling.errors}>\n      <BasicDetailsView\n        employee={basicDetails.data.employee}\n        currentHomeAddress={basicDetails.data.currentHomeAddress}\n        currentWorkAddress={basicDetails.data.currentWorkAddress}\n        isEmployeeLoading={basicDetails.status.isEmployeeLoading}\n        isHomeAddressLoading={basicDetails.status.isHomeAddressLoading}\n        isWorkAddressLoading={basicDetails.status.isWorkAddressLoading}\n        onEditBasicDetails={onEditBasicDetails}\n        onManageHomeAddress={onManageHomeAddress}\n        onManageWorkAddress={onManageWorkAddress}\n      />\n    </BaseLayout>\n  )\n}\n\nexport function BasicDetailsView({\n  employee,\n  currentHomeAddress,\n  currentWorkAddress,\n  isLoading = false,\n  isEmployeeLoading = isLoading,\n  isHomeAddressLoading = isLoading,\n  isWorkAddressLoading = isLoading,\n  onEditBasicDetails,\n  onManageHomeAddress,\n  onManageWorkAddress,\n}: BasicDetailsViewProps) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n\n  const legalName = employee\n    ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n    : undefined\n  const startDate = employee ? formatDateLongWithYear(employee.jobs?.[0]?.hireDate) : undefined\n  const dateOfBirth = employee ? formatDateLongWithYear(employee.dateOfBirth) : undefined\n  const maskedSsn = employee?.hasSsn ? 'XXX-XX-XXXX' : undefined\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('basicDetails.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onEditBasicDetails}\n                isDisabled={isEmployeeLoading}\n              >\n                {t('basicDetails.editCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isEmployeeLoading ? (\n            <Loading />\n          ) : employee ? (\n            <Flex flexDirection=\"column\" gap={12}>\n              {legalName && (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Components.Text variant=\"supporting\">\n                    {t('basicDetails.legalName')}\n                  </Components.Text>\n                  <Components.Text>{legalName}</Components.Text>\n                </Flex>\n              )}\n\n              {startDate && (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Components.Text variant=\"supporting\">\n                    {t('basicDetails.startDate')}\n                  </Components.Text>\n                  <Components.Text>{startDate}</Components.Text>\n                </Flex>\n              )}\n\n              {maskedSsn && (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Components.Text variant=\"supporting\">\n                    {t('basicDetails.socialSecurityNumber')}\n                  </Components.Text>\n                  <Components.Text>{maskedSsn}</Components.Text>\n                </Flex>\n              )}\n\n              {dateOfBirth && (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Components.Text variant=\"supporting\">\n                    {t('basicDetails.dateOfBirth')}\n                  </Components.Text>\n                  <Components.Text>{dateOfBirth}</Components.Text>\n                </Flex>\n              )}\n\n              {employee.email && (\n                <Flex flexDirection=\"column\" gap={0}>\n                  <Components.Text variant=\"supporting\">\n                    {t('basicDetails.personalEmail')}\n                  </Components.Text>\n                  <Components.Text>{employee.email}</Components.Text>\n                </Flex>\n              )}\n            </Flex>\n          ) : null}\n        </Flex>\n      </Components.Box>\n\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('homeAddress.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onManageHomeAddress}\n                isDisabled={isHomeAddressLoading}\n              >\n                {t('homeAddress.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isHomeAddressLoading ? (\n            <Loading />\n          ) : currentHomeAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text variant=\"supporting\">\n                {t('homeAddress.currentAddress')}\n              </Components.Text>\n              <Components.Text>{getStreet(currentHomeAddress).replace(',', '')}</Components.Text>\n              <Components.Text>{getCityStateZip(currentHomeAddress)}</Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('homeAddress.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('workAddress.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onManageWorkAddress}\n                isDisabled={isWorkAddressLoading}\n              >\n                {t('workAddress.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isWorkAddressLoading ? (\n            <Loading />\n          ) : currentWorkAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text variant=\"supporting\">\n                {t('workAddress.currentAddress')}\n              </Components.Text>\n              <Components.Text>\n                {currentWorkAddress.street1}\n                {currentWorkAddress.street2 ? `, ${currentWorkAddress.street2}` : ''}\n              </Components.Text>\n              <Components.Text>\n                {currentWorkAddress.city}, {currentWorkAddress.state} {currentWorkAddress.zip}\n              </Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('workAddress.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["BasicDetailsViewWithData","employeeId","onEditBasicDetails","onManageHomeAddress","onManageWorkAddress","basicDetails","useEmployeeBasicDetails","jsx","BaseLayout","BasicDetailsView","employee","currentHomeAddress","currentWorkAddress","isLoading","isEmployeeLoading","isHomeAddressLoading","isWorkAddressLoading","useTranslation","Components","useComponentContext","legalName","firstLastName","startDate","formatDateLongWithYear","dateOfBirth","maskedSsn","jsxs","Flex","Loading","getStreet","getCityStateZip"],"mappings":"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"}
+{"version":3,"file":"BasicDetailsView.js","sources":["../../../../src/components/Employee/Dashboard/BasicDetailsView.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next'\nimport type { Employee } from '@gusto/embedded-api/models/components/employee'\nimport type { EmployeeAddress } from '@gusto/embedded-api/models/components/employeeaddress'\nimport type { EmployeeWorkAddress } from '@gusto/embedded-api/models/components/employeeworkaddress'\nimport { useEmployeeBasicDetails } from './hooks'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { formatDateLongWithYear } from '@/helpers/dateFormatting'\nimport { firstLastName, getStreet, getCityStateZip } from '@/helpers/formattedStrings'\nimport { Loading } from '@/components/Common'\nimport { BaseLayout } from '@/components/Base/Base'\n\nexport interface BasicDetailsViewProps {\n  employee?: Employee\n  currentHomeAddress?: EmployeeAddress\n  currentWorkAddress?: EmployeeWorkAddress\n  /** Loads all three cards. Per-section flags below take precedence\n   *  when each query resolves independently. */\n  isLoading?: boolean\n  isEmployeeLoading?: boolean\n  isHomeAddressLoading?: boolean\n  isWorkAddressLoading?: boolean\n  onEditBasicDetails?: () => void\n  onManageHomeAddress?: () => void\n  onManageWorkAddress?: () => void\n}\n\nexport interface BasicDetailsViewWithDataProps {\n  employeeId: string\n  onEditBasicDetails?: () => void\n  onManageHomeAddress?: () => void\n  onManageWorkAddress?: () => void\n}\n\n/**\n * Tab-mounted container for the Basic details tab. Owns the\n * `useEmployeeBasicDetails` fetch (employee + home address + work address)\n * so the requests only fire when the tab is mounted. Each card paints\n * its own skeleton + content as the underlying query resolves.\n */\nexport function BasicDetailsViewWithData({\n  employeeId,\n  onEditBasicDetails,\n  onManageHomeAddress,\n  onManageWorkAddress,\n}: BasicDetailsViewWithDataProps) {\n  const basicDetails = useEmployeeBasicDetails({ employeeId })\n\n  return (\n    <BaseLayout error={basicDetails.errorHandling.errors}>\n      <BasicDetailsView\n        employee={basicDetails.data.employee}\n        currentHomeAddress={basicDetails.data.currentHomeAddress}\n        currentWorkAddress={basicDetails.data.currentWorkAddress}\n        isEmployeeLoading={basicDetails.status.isEmployeeLoading}\n        isHomeAddressLoading={basicDetails.status.isHomeAddressLoading}\n        isWorkAddressLoading={basicDetails.status.isWorkAddressLoading}\n        onEditBasicDetails={onEditBasicDetails}\n        onManageHomeAddress={onManageHomeAddress}\n        onManageWorkAddress={onManageWorkAddress}\n      />\n    </BaseLayout>\n  )\n}\n\nexport function BasicDetailsView({\n  employee,\n  currentHomeAddress,\n  currentWorkAddress,\n  isLoading = false,\n  isEmployeeLoading = isLoading,\n  isHomeAddressLoading = isLoading,\n  isWorkAddressLoading = isLoading,\n  onEditBasicDetails,\n  onManageHomeAddress,\n  onManageWorkAddress,\n}: BasicDetailsViewProps) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n\n  const legalName = employee\n    ? firstLastName({ first_name: employee.firstName, last_name: employee.lastName })\n    : undefined\n  const startDate = employee ? formatDateLongWithYear(employee.jobs?.[0]?.hireDate) : undefined\n  const dateOfBirth = employee ? formatDateLongWithYear(employee.dateOfBirth) : undefined\n  const maskedSsn = employee?.hasSsn ? 'XXX-XX-XXXX' : undefined\n\n  const emptyPlaceholder = <span aria-label={t('listEmptyPlaceholder')}>–</span>\n  const basicDetailsItems = employee\n    ? [\n        { term: t('basicDetails.legalName'), description: legalName || emptyPlaceholder },\n        { term: t('basicDetails.startDate'), description: startDate || emptyPlaceholder },\n        {\n          term: t('basicDetails.socialSecurityNumber'),\n          description: maskedSsn || emptyPlaceholder,\n        },\n        { term: t('basicDetails.dateOfBirth'), description: dateOfBirth || emptyPlaceholder },\n        { term: t('basicDetails.personalEmail'), description: employee.email || emptyPlaceholder },\n      ]\n    : []\n\n  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('basicDetails.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onEditBasicDetails}\n                isDisabled={isEmployeeLoading}\n              >\n                {t('basicDetails.editCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        {isEmployeeLoading ? (\n          <Loading />\n        ) : employee ? (\n          <Components.DescriptionList items={basicDetailsItems} />\n        ) : null}\n      </Components.Box>\n\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('homeAddress.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onManageHomeAddress}\n                isDisabled={isHomeAddressLoading}\n              >\n                {t('homeAddress.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isHomeAddressLoading ? (\n            <Loading />\n          ) : currentHomeAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text weight=\"medium\">\n                {getStreet(currentHomeAddress).replace(',', '')}\n              </Components.Text>\n              <Components.Text variant=\"supporting\">\n                {getCityStateZip(currentHomeAddress)}\n              </Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('homeAddress.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n\n      <Components.Box\n        header={\n          <Components.BoxHeader\n            title={t('workAddress.title')}\n            action={\n              <Components.Button\n                variant=\"secondary\"\n                onClick={onManageWorkAddress}\n                isDisabled={isWorkAddressLoading}\n              >\n                {t('workAddress.manageCta')}\n              </Components.Button>\n            }\n          />\n        }\n      >\n        <Flex flexDirection=\"column\" gap={16}>\n          {isWorkAddressLoading ? (\n            <Loading />\n          ) : currentWorkAddress ? (\n            <Flex flexDirection=\"column\" gap={0}>\n              <Components.Text weight=\"medium\">\n                {currentWorkAddress.street1}\n                {currentWorkAddress.street2 ? `, ${currentWorkAddress.street2}` : ''}\n              </Components.Text>\n              <Components.Text variant=\"supporting\">\n                {currentWorkAddress.city}, {currentWorkAddress.state} {currentWorkAddress.zip}\n              </Components.Text>\n            </Flex>\n          ) : (\n            <Components.Text>{t('workAddress.noAddress')}</Components.Text>\n          )}\n        </Flex>\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["BasicDetailsViewWithData","employeeId","onEditBasicDetails","onManageHomeAddress","onManageWorkAddress","basicDetails","useEmployeeBasicDetails","jsx","BaseLayout","BasicDetailsView","employee","currentHomeAddress","currentWorkAddress","isLoading","isEmployeeLoading","isHomeAddressLoading","isWorkAddressLoading","t","useTranslation","Components","useComponentContext","legalName","firstLastName","startDate","formatDateLongWithYear","dateOfBirth","maskedSsn","emptyPlaceholder","basicDetailsItems","jsxs","Flex","Loading","getStreet","getCityStateZip"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
 import { jsx as s, jsxs as D } from "react/jsx-runtime";
 import { useState as B, useCallback as o, Suspense as l } from "react";
-import { useTranslation as m } from "react-i18next";
+import { useTranslation as h } from "react-i18next";
 import { useEmployeesGetSuspense as R } from "@gusto/embedded-api/react-query/employeesGet";
 import { BasicDetailsViewWithData as k } from "./BasicDetailsView.js";
 import { JobAndPayView as H } from "./JobAndPayView.js";
 import { TaxesViewWithData as F } from "./TaxesView.js";
 import { DocumentsViewWithData as J } from "./DocumentsView.js";
 import { Flex as b } from "../../Common/Flex/Flex.js";
-import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useComponentContext as m } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import { BaseBoundaries as V, BaseLayout as E } from "../../Base/Base.js";
 import { useI18n as W, useComponentDictionary as w } from "../../../i18n/I18n.js";
 import { componentEvents as i } from "../../../shared/constants.js";
@@ -19,34 +19,34 @@ function G({
   selectedTab: d
 }) {
   W("Employee.Dashboard"), w("Employee.Dashboard", r);
-  const { t: c } = m("Employee.Dashboard"), A = u(), [_, f] = B("basicDetails"), e = d ?? _, T = o(() => {
+  const { t: c } = h("Employee.Dashboard"), A = m(), [_, f] = B("basicDetails"), e = d ?? _, T = o(() => {
     t(i.EMPLOYEE_UPDATE, { employeeId: a });
   }, [t, a]), O = o(() => {
     t(i.EMPLOYEE_HOME_ADDRESS, { employeeId: a });
   }, [t, a]), L = o(() => {
     t(i.EMPLOYEE_WORK_ADDRESS, { employeeId: a });
-  }, [t, a]), M = o(
+  }, [t, a]), x = o(
     (n) => {
       t(i.EMPLOYEE_COMPENSATION_CREATE, { employeeId: a, job: n });
     },
     [t, a]
-  ), x = o(() => {
+  ), M = o(() => {
     t(i.EMPLOYEE_JOB_ADD, { employeeId: a });
   }, [t, a]), P = o(() => {
     t(i.EMPLOYEE_JOB_ADD_ANOTHER, { employeeId: a });
   }, [t, a]), S = o(() => {
     t(i.EMPLOYEE_DEDUCTION_ADD, { employeeId: a });
-  }, [t, a]), C = o(
+  }, [t, a]), g = o(
     (n) => {
       t(i.EMPLOYEE_DEDUCTION_EDIT, n);
     },
     [t]
-  ), g = o(
+  ), p = o(
     (n) => {
       t(i.EMPLOYEE_FEDERAL_TAXES_EDIT, { employeeId: a, federalTaxes: n });
     },
     [t, a]
-  ), p = o(() => {
+  ), C = o(() => {
     t(i.EMPLOYEE_STATE_TAXES_EDIT, { employeeId: a });
   }, [t, a]), Y = o(
     (n) => {
@@ -77,59 +77,61 @@ function G({
   ];
   return /* @__PURE__ */ D(b, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ s(l, { fallback: null, children: /* @__PURE__ */ s(U, { employeeId: a }) }),
-    /* @__PURE__ */ s(
-      A.Tabs,
-      {
-        tabs: N,
-        selectedId: e,
-        onSelectionChange: (n) => {
-          const h = n;
-          f(h), t(i.EMPLOYEE_DASHBOARD_TAB_CHANGE, { tab: h });
-        },
-        "aria-label": c("tabsLabel")
-      }
-    ),
-    /* @__PURE__ */ D(b, { flexDirection: "column", gap: 24, children: [
-      e === "basicDetails" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
-        k,
+    /* @__PURE__ */ D(b, { flexDirection: "column", gap: 8, children: [
+      /* @__PURE__ */ s(
+        A.Tabs,
         {
-          employeeId: a,
-          onEditBasicDetails: T,
-          onManageHomeAddress: O,
-          onManageWorkAddress: L
+          tabs: N,
+          selectedId: e,
+          onSelectionChange: (n) => {
+            const u = n;
+            f(u), t(i.EMPLOYEE_DASHBOARD_TAB_CHANGE, { tab: u });
+          },
+          "aria-label": c("tabsLabel")
         }
-      ) }),
-      e === "jobAndPay" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
-        H,
-        {
-          employeeId: a,
-          onEvent: t,
-          onEditCompensation: M,
-          onAddJob: x,
-          onAddAnotherJob: P,
-          onAddDeduction: S,
-          onEditDeduction: C
-        }
-      ) }),
-      e === "taxes" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
-        F,
-        {
-          employeeId: a,
-          onEditFederalTaxes: g,
-          onEditStateTaxes: p
-        }
-      ) }),
-      e === "documents" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(J, { employeeId: a, onViewForm: Y }) })
+      ),
+      /* @__PURE__ */ D(b, { flexDirection: "column", gap: 24, children: [
+        e === "basicDetails" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
+          k,
+          {
+            employeeId: a,
+            onEditBasicDetails: T,
+            onManageHomeAddress: O,
+            onManageWorkAddress: L
+          }
+        ) }),
+        e === "jobAndPay" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
+          H,
+          {
+            employeeId: a,
+            onEvent: t,
+            onEditCompensation: x,
+            onAddJob: M,
+            onAddAnotherJob: P,
+            onAddDeduction: S,
+            onEditDeduction: g
+          }
+        ) }),
+        e === "taxes" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(
+          F,
+          {
+            employeeId: a,
+            onEditFederalTaxes: p,
+            onEditStateTaxes: C
+          }
+        ) }),
+        e === "documents" && /* @__PURE__ */ s(l, { fallback: /* @__PURE__ */ s(E, { isLoading: !0 }), children: /* @__PURE__ */ s(J, { employeeId: a, onViewForm: Y }) })
+      ] })
     ] })
   ] });
 }
 function U({ employeeId: a }) {
-  const { t: r } = m("Employee.Dashboard"), t = u(), {
+  const { t: r } = h("Employee.Dashboard"), t = m(), {
     data: { employee: d }
   } = R({ employeeId: a });
   return /* @__PURE__ */ D(b, { flexDirection: "column", gap: 4, children: [
     /* @__PURE__ */ s(t.Heading, { as: "h2", children: j({ first_name: d?.firstName, last_name: d?.lastName }) }),
-    /* @__PURE__ */ s(t.Text, { children: r("employeeRoleLabel") })
+    /* @__PURE__ */ s(t.Text, { variant: "supporting", children: r("employeeRoleLabel") })
   ] });
 }
 function oa({

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.js","sources":["../../../../src/components/Employee/Dashboard/Dashboard.tsx"],"sourcesContent":["import { Suspense, useState, useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport type { Job } from '@gusto/embedded-api/models/components/job'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { GetV1EmployeesEmployeeIdFederalTaxesResponse } from '@gusto/embedded-api/models/operations/getv1employeesemployeeidfederaltaxes'\nimport { BasicDetailsViewWithData } from './BasicDetailsView'\nimport { JobAndPayView } from './JobAndPayView'\nimport { TaxesViewWithData } from './TaxesView'\nimport { DocumentsViewWithData } from './DocumentsView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\ntype EmployeeFederalTax = NonNullable<\n  GetV1EmployeesEmployeeIdFederalTaxesResponse['employeeFederalTax']\n>\n\nexport type DashboardTab = 'basicDetails' | 'jobAndPay' | 'taxes' | 'documents'\n\nexport interface DashboardProps extends BaseComponentInterface<'Employee.Dashboard'> {\n  employeeId: string\n  selectedTab?: DashboardTab\n}\n\nfunction DashboardRoot({\n  employeeId,\n  dictionary,\n  onEvent,\n  selectedTab: controlledTab,\n}: DashboardProps) {\n  useI18n('Employee.Dashboard')\n  useComponentDictionary('Employee.Dashboard', dictionary)\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  const [internalTab, setInternalTab] = useState<DashboardTab>('basicDetails')\n  const selectedTab = controlledTab ?? internalTab\n\n  const handleEditBasicDetails = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleManageHomeAddress = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_HOME_ADDRESS, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleManageWorkAddress = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_WORK_ADDRESS, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleEditCompensation = useCallback(\n    (job: Job) => {\n      onEvent(componentEvents.EMPLOYEE_COMPENSATION_CREATE, { employeeId, job })\n    },\n    [onEvent, employeeId],\n  )\n\n  const handleAddJob = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_JOB_ADD, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleAddAnotherJob = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_JOB_ADD_ANOTHER, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleAddDeduction = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_ADD, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleEditDeduction = useCallback(\n    (deduction: Garnishment) => {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_EDIT, deduction)\n    },\n    [onEvent],\n  )\n\n  const handleEditFederalTaxes = useCallback(\n    (federalTaxes: EmployeeFederalTax | undefined) => {\n      onEvent(componentEvents.EMPLOYEE_FEDERAL_TAXES_EDIT, { employeeId, federalTaxes })\n    },\n    [onEvent, employeeId],\n  )\n\n  const handleEditStateTaxes = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_STATE_TAXES_EDIT, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleViewForm = useCallback(\n    (formId: string) => {\n      onEvent(componentEvents.EMPLOYEE_VIEW_FORM_TO_SIGN, { employeeId, formId })\n    },\n    [onEvent, employeeId],\n  )\n\n  const tabs = [\n    {\n      id: 'basicDetails' as const,\n      label: t('tabs.basicDetails'),\n      content: null,\n    },\n    {\n      id: 'jobAndPay' as const,\n      label: t('tabs.jobAndPay'),\n      content: null,\n    },\n    {\n      id: 'taxes' as const,\n      label: t('tabs.taxes'),\n      content: null,\n    },\n    {\n      id: 'documents' as const,\n      label: t('tabs.documents'),\n      content: null,\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Suspense fallback={null}>\n        <DashboardHeader employeeId={employeeId} />\n      </Suspense>\n      <Components.Tabs\n        tabs={tabs}\n        selectedId={selectedTab}\n        onSelectionChange={id => {\n          const next = id as DashboardTab\n          setInternalTab(next)\n          onEvent(componentEvents.EMPLOYEE_DASHBOARD_TAB_CHANGE, { tab: next })\n        }}\n        aria-label={t('tabsLabel')}\n      />\n\n      <Flex flexDirection=\"column\" gap={24}>\n        {selectedTab === 'basicDetails' && (\n          <Suspense fallback={<BaseLayout isLoading />}>\n            <BasicDetailsViewWithData\n              employeeId={employeeId}\n              onEditBasicDetails={handleEditBasicDetails}\n              onManageHomeAddress={handleManageHomeAddress}\n              onManageWorkAddress={handleManageWorkAddress}\n            />\n          </Suspense>\n        )}\n\n        {selectedTab === 'jobAndPay' && (\n          <Suspense fallback={<BaseLayout isLoading />}>\n            <JobAndPayView\n              employeeId={employeeId}\n              onEvent={onEvent}\n              onEditCompensation={handleEditCompensation}\n              onAddJob={handleAddJob}\n              onAddAnotherJob={handleAddAnotherJob}\n              onAddDeduction={handleAddDeduction}\n              onEditDeduction={handleEditDeduction}\n            />\n          </Suspense>\n        )}\n\n        {selectedTab === 'taxes' && (\n          <Suspense fallback={<BaseLayout isLoading />}>\n            <TaxesViewWithData\n              employeeId={employeeId}\n              onEditFederalTaxes={handleEditFederalTaxes}\n              onEditStateTaxes={handleEditStateTaxes}\n            />\n          </Suspense>\n        )}\n\n        {selectedTab === 'documents' && (\n          <Suspense fallback={<BaseLayout isLoading />}>\n            <DocumentsViewWithData employeeId={employeeId} onViewForm={handleViewForm} />\n          </Suspense>\n        )}\n      </Flex>\n    </Flex>\n  )\n}\n\nfunction DashboardHeader({ employeeId }: { employeeId: string }) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      <Components.Heading as=\"h2\">\n        {firstLastName({ first_name: employee?.firstName, last_name: employee?.lastName })}\n      </Components.Heading>\n      <Components.Text>{t('employeeRoleLabel')}</Components.Text>\n    </Flex>\n  )\n}\n\nexport function Dashboard({\n  FallbackComponent,\n  ...props\n}: DashboardProps & BaseComponentInterface) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Dashboard\" FallbackComponent={FallbackComponent}>\n      <DashboardRoot {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["DashboardRoot","employeeId","dictionary","onEvent","controlledTab","useI18n","useComponentDictionary","t","useTranslation","Components","useComponentContext","internalTab","setInternalTab","useState","selectedTab","handleEditBasicDetails","useCallback","componentEvents","handleManageHomeAddress","handleManageWorkAddress","handleEditCompensation","job","handleAddJob","handleAddAnotherJob","handleAddDeduction","handleEditDeduction","deduction","handleEditFederalTaxes","federalTaxes","handleEditStateTaxes","handleViewForm","formId","tabs","jsxs","Flex","jsx","Suspense","DashboardHeader","id","next","BaseLayout","BasicDetailsViewWithData","JobAndPayView","TaxesViewWithData","DocumentsViewWithData","employee","useEmployeesGetSuspense","firstLastName","Dashboard","FallbackComponent","props","BaseBoundaries"],"mappings":";;;;;;;;;;;;;;AA4BA,SAASA,EAAc;AAAA,EACrB,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAaC;AACf,GAAmB;AACjB,EAAAC,EAAQ,oBAAoB,GAC5BC,EAAuB,sBAAsBJ,CAAU;AACvD,QAAM,EAAE,GAAAK,EAAA,IAAMC,EAAe,oBAAoB,GAC3CC,IAAaC,EAAA,GACb,CAACC,GAAaC,CAAc,IAAIC,EAAuB,cAAc,GACrEC,IAAcV,KAAiBO,GAE/BI,IAAyBC,EAAY,MAAM;AAC/C,IAAAb,EAAQc,EAAgB,iBAAiB,EAAE,YAAAhB,EAAA,CAAY;AAAA,EACzD,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBiB,IAA0BF,EAAY,MAAM;AAChD,IAAAb,EAAQc,EAAgB,uBAAuB,EAAE,YAAAhB,EAAA,CAAY;AAAA,EAC/D,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBkB,IAA0BH,EAAY,MAAM;AAChD,IAAAb,EAAQc,EAAgB,uBAAuB,EAAE,YAAAhB,EAAA,CAAY;AAAA,EAC/D,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBmB,IAAyBJ;AAAA,IAC7B,CAACK,MAAa;AACZ,MAAAlB,EAAQc,EAAgB,8BAA8B,EAAE,YAAAhB,GAAY,KAAAoB,GAAK;AAAA,IAC3E;AAAA,IACA,CAAClB,GAASF,CAAU;AAAA,EAAA,GAGhBqB,IAAeN,EAAY,MAAM;AACrC,IAAAb,EAAQc,EAAgB,kBAAkB,EAAE,YAAAhB,EAAA,CAAY;AAAA,EAC1D,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBsB,IAAsBP,EAAY,MAAM;AAC5C,IAAAb,EAAQc,EAAgB,0BAA0B,EAAE,YAAAhB,EAAA,CAAY;AAAA,EAClE,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBuB,IAAqBR,EAAY,MAAM;AAC3C,IAAAb,EAAQc,EAAgB,wBAAwB,EAAE,YAAAhB,EAAA,CAAY;AAAA,EAChE,GAAG,CAACE,GAASF,CAAU,CAAC,GAElBwB,IAAsBT;AAAA,IAC1B,CAACU,MAA2B;AAC1B,MAAAvB,EAAQc,EAAgB,yBAAyBS,CAAS;AAAA,IAC5D;AAAA,IACA,CAACvB,CAAO;AAAA,EAAA,GAGJwB,IAAyBX;AAAA,IAC7B,CAACY,MAAiD;AAChD,MAAAzB,EAAQc,EAAgB,6BAA6B,EAAE,YAAAhB,GAAY,cAAA2B,GAAc;AAAA,IACnF;AAAA,IACA,CAACzB,GAASF,CAAU;AAAA,EAAA,GAGhB4B,IAAuBb,EAAY,MAAM;AAC7C,IAAAb,EAAQc,EAAgB,2BAA2B,EAAE,YAAAhB,EAAA,CAAY;AAAA,EACnE,GAAG,CAACE,GAASF,CAAU,CAAC,GAElB6B,IAAiBd;AAAA,IACrB,CAACe,MAAmB;AAClB,MAAA5B,EAAQc,EAAgB,4BAA4B,EAAE,YAAAhB,GAAY,QAAA8B,GAAQ;AAAA,IAC5E;AAAA,IACA,CAAC5B,GAASF,CAAU;AAAA,EAAA,GAGhB+B,IAAO;AAAA,IACX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOzB,EAAE,mBAAmB;AAAA,MAC5B,SAAS;AAAA,IAAA;AAAA,IAEX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOA,EAAE,gBAAgB;AAAA,MACzB,SAAS;AAAA,IAAA;AAAA,IAEX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOA,EAAE,YAAY;AAAA,MACrB,SAAS;AAAA,IAAA;AAAA,IAEX;AAAA,MACE,IAAI;AAAA,MACJ,OAAOA,EAAE,gBAAgB;AAAA,MACzB,SAAS;AAAA,IAAA;AAAA,EACX;AAGF,SACE,gBAAA0B,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAS,UAAU,MAClB,UAAA,gBAAAD,EAACE,GAAA,EAAgB,YAAApC,GAAwB,GAC3C;AAAA,IACA,gBAAAkC;AAAA,MAAC1B,EAAW;AAAA,MAAX;AAAA,QACC,MAAAuB;AAAA,QACA,YAAYlB;AAAA,QACZ,mBAAmB,CAAAwB,MAAM;AACvB,gBAAMC,IAAOD;AACb,UAAA1B,EAAe2B,CAAI,GACnBpC,EAAQc,EAAgB,+BAA+B,EAAE,KAAKsB,GAAM;AAAA,QACtE;AAAA,QACA,cAAYhC,EAAE,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAG3B,gBAAA0B,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAA;AAAA,MAAApB,MAAgB,oCACdsB,GAAA,EAAS,4BAAWI,GAAA,EAAW,WAAS,IAAC,GACxC,UAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACC,YAAAxC;AAAA,UACA,oBAAoBc;AAAA,UACpB,qBAAqBG;AAAA,UACrB,qBAAqBC;AAAA,QAAA;AAAA,MAAA,GAEzB;AAAA,MAGDL,MAAgB,eACf,gBAAAqB,EAACC,GAAA,EAAS,UAAU,gBAAAD,EAACK,GAAA,EAAW,WAAS,IAAC,GACxC,UAAA,gBAAAL;AAAA,QAACO;AAAA,QAAA;AAAA,UACC,YAAAzC;AAAA,UACA,SAAAE;AAAA,UACA,oBAAoBiB;AAAA,UACpB,UAAUE;AAAA,UACV,iBAAiBC;AAAA,UACjB,gBAAgBC;AAAA,UAChB,iBAAiBC;AAAA,QAAA;AAAA,MAAA,GAErB;AAAA,MAGDX,MAAgB,WACf,gBAAAqB,EAACC,GAAA,EAAS,UAAU,gBAAAD,EAACK,GAAA,EAAW,WAAS,IAAC,GACxC,UAAA,gBAAAL;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,YAAA1C;AAAA,UACA,oBAAoB0B;AAAA,UACpB,kBAAkBE;AAAA,QAAA;AAAA,MAAA,GAEtB;AAAA,MAGDf,MAAgB,eACf,gBAAAqB,EAACC,GAAA,EAAS,UAAU,gBAAAD,EAACK,GAAA,EAAW,WAAS,GAAA,CAAC,GACxC,UAAA,gBAAAL,EAACS,GAAA,EAAsB,YAAA3C,GAAwB,YAAY6B,GAAgB,EAAA,CAC7E;AAAA,IAAA,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AAEA,SAASO,EAAgB,EAAE,YAAApC,KAAsC;AAC/D,QAAM,EAAE,GAAAM,EAAA,IAAMC,EAAe,oBAAoB,GAC3CC,IAAaC,EAAA,GACb;AAAA,IACJ,MAAM,EAAE,UAAAmC,EAAA;AAAA,EAAS,IACfC,EAAwB,EAAE,YAAA7C,GAAY;AAE1C,SACE,gBAAAgC,EAACC,GAAA,EAAK,eAAc,UAAS,KAAK,GAChC,UAAA;AAAA,IAAA,gBAAAC,EAAC1B,EAAW,SAAX,EAAmB,IAAG,MACpB,UAAAsC,EAAc,EAAE,YAAYF,GAAU,WAAW,WAAWA,GAAU,SAAA,CAAU,GACnF;AAAA,sBACCpC,EAAW,MAAX,EAAiB,UAAAF,EAAE,mBAAmB,EAAA,CAAE;AAAA,EAAA,GAC3C;AAEJ;AAEO,SAASyC,GAAU;AAAA,EACxB,mBAAAC;AAAA,EACA,GAAGC;AACL,GAA4C;AAC1C,SACE,gBAAAf,EAACgB,KAAe,eAAc,sBAAqB,mBAAAF,GACjD,UAAA,gBAAAd,EAACnC,GAAA,EAAe,GAAGkD,EAAA,CAAO,EAAA,CAC5B;AAEJ;"}
+{"version":3,"file":"Dashboard.js","sources":["../../../../src/components/Employee/Dashboard/Dashboard.tsx"],"sourcesContent":["import { Suspense, useState, useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useEmployeesGetSuspense } from '@gusto/embedded-api/react-query/employeesGet'\nimport type { Job } from '@gusto/embedded-api/models/components/job'\nimport type { Garnishment } from '@gusto/embedded-api/models/components/garnishment'\nimport type { GetV1EmployeesEmployeeIdFederalTaxesResponse } from '@gusto/embedded-api/models/operations/getv1employeesemployeeidfederaltaxes'\nimport { BasicDetailsViewWithData } from './BasicDetailsView'\nimport { JobAndPayView } from './JobAndPayView'\nimport { TaxesViewWithData } from './TaxesView'\nimport { DocumentsViewWithData } from './DocumentsView'\nimport { Flex } from '@/components/Common/Flex/Flex'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { BaseBoundaries, BaseLayout, type BaseComponentInterface } from '@/components/Base/Base'\nimport { useComponentDictionary, useI18n } from '@/i18n'\nimport { componentEvents } from '@/shared/constants'\nimport { firstLastName } from '@/helpers/formattedStrings'\n\ntype EmployeeFederalTax = NonNullable<\n  GetV1EmployeesEmployeeIdFederalTaxesResponse['employeeFederalTax']\n>\n\nexport type DashboardTab = 'basicDetails' | 'jobAndPay' | 'taxes' | 'documents'\n\nexport interface DashboardProps extends BaseComponentInterface<'Employee.Dashboard'> {\n  employeeId: string\n  selectedTab?: DashboardTab\n}\n\nfunction DashboardRoot({\n  employeeId,\n  dictionary,\n  onEvent,\n  selectedTab: controlledTab,\n}: DashboardProps) {\n  useI18n('Employee.Dashboard')\n  useComponentDictionary('Employee.Dashboard', dictionary)\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  const [internalTab, setInternalTab] = useState<DashboardTab>('basicDetails')\n  const selectedTab = controlledTab ?? internalTab\n\n  const handleEditBasicDetails = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_UPDATE, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleManageHomeAddress = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_HOME_ADDRESS, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleManageWorkAddress = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_WORK_ADDRESS, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleEditCompensation = useCallback(\n    (job: Job) => {\n      onEvent(componentEvents.EMPLOYEE_COMPENSATION_CREATE, { employeeId, job })\n    },\n    [onEvent, employeeId],\n  )\n\n  const handleAddJob = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_JOB_ADD, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleAddAnotherJob = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_JOB_ADD_ANOTHER, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleAddDeduction = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_DEDUCTION_ADD, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleEditDeduction = useCallback(\n    (deduction: Garnishment) => {\n      onEvent(componentEvents.EMPLOYEE_DEDUCTION_EDIT, deduction)\n    },\n    [onEvent],\n  )\n\n  const handleEditFederalTaxes = useCallback(\n    (federalTaxes: EmployeeFederalTax | undefined) => {\n      onEvent(componentEvents.EMPLOYEE_FEDERAL_TAXES_EDIT, { employeeId, federalTaxes })\n    },\n    [onEvent, employeeId],\n  )\n\n  const handleEditStateTaxes = useCallback(() => {\n    onEvent(componentEvents.EMPLOYEE_STATE_TAXES_EDIT, { employeeId })\n  }, [onEvent, employeeId])\n\n  const handleViewForm = useCallback(\n    (formId: string) => {\n      onEvent(componentEvents.EMPLOYEE_VIEW_FORM_TO_SIGN, { employeeId, formId })\n    },\n    [onEvent, employeeId],\n  )\n\n  const tabs = [\n    {\n      id: 'basicDetails' as const,\n      label: t('tabs.basicDetails'),\n      content: null,\n    },\n    {\n      id: 'jobAndPay' as const,\n      label: t('tabs.jobAndPay'),\n      content: null,\n    },\n    {\n      id: 'taxes' as const,\n      label: t('tabs.taxes'),\n      content: null,\n    },\n    {\n      id: 'documents' as const,\n      label: t('tabs.documents'),\n      content: null,\n    },\n  ]\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Suspense fallback={null}>\n        <DashboardHeader employeeId={employeeId} />\n      </Suspense>\n\n      <Flex flexDirection=\"column\" gap={8}>\n        <Components.Tabs\n          tabs={tabs}\n          selectedId={selectedTab}\n          onSelectionChange={id => {\n            const next = id as DashboardTab\n            setInternalTab(next)\n            onEvent(componentEvents.EMPLOYEE_DASHBOARD_TAB_CHANGE, { tab: next })\n          }}\n          aria-label={t('tabsLabel')}\n        />\n\n        <Flex flexDirection=\"column\" gap={24}>\n          {selectedTab === 'basicDetails' && (\n            <Suspense fallback={<BaseLayout isLoading />}>\n              <BasicDetailsViewWithData\n                employeeId={employeeId}\n                onEditBasicDetails={handleEditBasicDetails}\n                onManageHomeAddress={handleManageHomeAddress}\n                onManageWorkAddress={handleManageWorkAddress}\n              />\n            </Suspense>\n          )}\n\n          {selectedTab === 'jobAndPay' && (\n            <Suspense fallback={<BaseLayout isLoading />}>\n              <JobAndPayView\n                employeeId={employeeId}\n                onEvent={onEvent}\n                onEditCompensation={handleEditCompensation}\n                onAddJob={handleAddJob}\n                onAddAnotherJob={handleAddAnotherJob}\n                onAddDeduction={handleAddDeduction}\n                onEditDeduction={handleEditDeduction}\n              />\n            </Suspense>\n          )}\n\n          {selectedTab === 'taxes' && (\n            <Suspense fallback={<BaseLayout isLoading />}>\n              <TaxesViewWithData\n                employeeId={employeeId}\n                onEditFederalTaxes={handleEditFederalTaxes}\n                onEditStateTaxes={handleEditStateTaxes}\n              />\n            </Suspense>\n          )}\n\n          {selectedTab === 'documents' && (\n            <Suspense fallback={<BaseLayout isLoading />}>\n              <DocumentsViewWithData employeeId={employeeId} onViewForm={handleViewForm} />\n            </Suspense>\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  )\n}\n\nfunction DashboardHeader({ employeeId }: { employeeId: string }) {\n  const { t } = useTranslation('Employee.Dashboard')\n  const Components = useComponentContext()\n  const {\n    data: { employee },\n  } = useEmployeesGetSuspense({ employeeId })\n\n  return (\n    <Flex flexDirection=\"column\" gap={4}>\n      <Components.Heading as=\"h2\">\n        {firstLastName({ first_name: employee?.firstName, last_name: employee?.lastName })}\n      </Components.Heading>\n      <Components.Text variant=\"supporting\">{t('employeeRoleLabel')}</Components.Text>\n    </Flex>\n  )\n}\n\nexport function Dashboard({\n  FallbackComponent,\n  ...props\n}: DashboardProps & BaseComponentInterface) {\n  return (\n    <BaseBoundaries componentName=\"Employee.Dashboard\" FallbackComponent={FallbackComponent}>\n      <DashboardRoot {...props} />\n    </BaseBoundaries>\n  )\n}\n"],"names":["DashboardRoot","employeeId","dictionary","onEvent","controlledTab","useI18n","useComponentDictionary","t","useTranslation","Components","useComponentContext","internalTab","setInternalTab","useState","selectedTab","handleEditBasicDetails","useCallback","componentEvents","handleManageHomeAddress","handleManageWorkAddress","handleEditCompensation","job","handleAddJob","handleAddAnotherJob","handleAddDeduction","handleEditDeduction","deduction","handleEditFederalTaxes","federalTaxes","handleEditStateTaxes","handleViewForm","formId","tabs","jsxs","Flex","jsx","Suspense","DashboardHeader","id","next","BaseLayout","BasicDetailsViewWithData","JobAndPayView","TaxesViewWithData","DocumentsViewWithData","employee","useEmployeesGetSuspense","firstLastName","Dashboard","FallbackComponent","props","BaseBoundaries"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useTranslation as c } from "react-i18next";
-import { Flex as m } from "../../Common/Flex/Flex.js";
-import { useComponentContext as d } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useTranslation as u } from "react-i18next";
+import { Flex as d } from "../../Common/Flex/Flex.js";
+import { useComponentContext as c } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 import "classnames";
 import "../../../shared/constants.js";
 import { Loading as l } from "../../Common/Loading/Loading.js";
@@ -13,7 +13,7 @@ import { DataView as h } from "../../Common/DataView/DataView.js";
 function v({ employeeId: i, onViewForm: s }) {
   const n = g({ employeeId: i });
   return /* @__PURE__ */ e(p, { error: n.errorHandling.errors, children: /* @__PURE__ */ e(
-    D,
+    S,
     {
       forms: n.data.formList,
       isLoading: n.status.isFormsLoading,
@@ -21,8 +21,8 @@ function v({ employeeId: i, onViewForm: s }) {
     }
   ) });
 }
-function D({ forms: i = [], isLoading: s = !1, onViewForm: n }) {
-  const { t } = c("Employee.Dashboard"), o = d(), a = [
+function S({ forms: i = [], isLoading: s = !1, onViewForm: n }) {
+  const { t } = u("Employee.Dashboard"), o = c(), m = [
     {
       key: "title",
       title: t("documents.columns.title"),
@@ -43,9 +43,9 @@ function D({ forms: i = [], isLoading: s = !1, onViewForm: n }) {
       title: t("documents.columns.requiresSigning"),
       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") })
     }
-  ], u = y({
+  ], a = y({
     data: i,
-    columns: a,
+    columns: m,
     itemMenu: (r) => /* @__PURE__ */ e(o.Button, { variant: "secondary", onClick: () => n?.(r.uuid), children: t("documents.viewCta") }),
     emptyState: () => /* @__PURE__ */ e(
       f,
@@ -55,10 +55,17 @@ function D({ forms: i = [], isLoading: s = !1, onViewForm: n }) {
       }
     )
   });
-  return /* @__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: s ? /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(h, { label: t("documents.listLabel"), ...u }) }) }) });
+  return /* @__PURE__ */ e(d, { flexDirection: "column", gap: 24, children: /* @__PURE__ */ e(
+    o.Box,
+    {
+      withPadding: !1,
+      header: /* @__PURE__ */ e(o.BoxHeader, { title: t("documents.title") }),
+      children: s ? /* @__PURE__ */ e(l, {}) : /* @__PURE__ */ e(h, { label: t("documents.listLabel"), isWithinBox: !0, ...a })
+    }
+  ) });
 }
 export {
-  D as DocumentsView,
+  S 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 { 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  return (\n    <BaseLayout error={forms.errorHandling.errors}>\n      <DocumentsView\n        forms={forms.data.formList}\n        isLoading={forms.status.isFormsLoading}\n        onViewForm={onViewForm}\n      />\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  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box header={<Components.BoxHeader title={t('documents.title')} />}>\n        <Flex flexDirection=\"column\" gap={16}>\n          {isLoading ? (\n            <Loading />\n          ) : (\n            <DataView label={t('documents.listLabel')} {...formsDataView} />\n          )}\n        </Flex>\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["DocumentsViewWithData","employeeId","onViewForm","forms","useEmployeeForms","jsx","BaseLayout","DocumentsView","isLoading","useTranslation","Components","useComponentContext","formsColumns","form","formsDataView","useDataView","EmptyData","Flex","Loading","DataView"],"mappings":";;;;;;;;;;;;AAyBO,SAASA,EAAsB,EAAE,YAAAC,GAAY,YAAAC,KAA0C;AAC5F,QAAMC,IAAQC,EAAiB,EAAE,YAAAH,GAAY;AAE7C,SACE,gBAAAI,EAACC,GAAA,EAAW,OAAOH,EAAM,cAAc,QACrC,UAAA,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAOJ,EAAM,KAAK;AAAA,MAClB,WAAWA,EAAM,OAAO;AAAA,MACxB,YAAAD;AAAA,IAAA;AAAA,EAAA,GAEJ;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,gBAAAR,EAACK,EAAW,OAAX,EAAiB,QAAO,WACtB,UAAA,EAAE,mCAAmC,GACxC,IAIF,gBAAAL,EAACK,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,gBAAAR,EAACK,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAAS,MAAMR,IAAaW,EAAK,IAAI,GACzE,UAAA,EAAE,mBAAmB,GACxB;AAAA,IAEF,YAAY,MACV,gBAAAR;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,4BAA4B;AAAA,QACrC,aAAa,EAAE,kCAAkC;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,CAEH;AAED,2BACGC,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,4BAACP,EAAW,KAAX,EAAe,0BAASA,EAAW,WAAX,EAAqB,OAAO,EAAE,iBAAiB,GAAG,GACzE,UAAA,gBAAAL,EAACY,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAT,IACC,gBAAAH,EAACa,KAAQ,IAET,gBAAAb,EAACc,GAAA,EAAS,OAAO,EAAE,qBAAqB,GAAI,GAAGL,GAAe,EAAA,CAElE,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  return (\n    <BaseLayout error={forms.errorHandling.errors}>\n      <DocumentsView\n        forms={forms.data.formList}\n        isLoading={forms.status.isFormsLoading}\n        onViewForm={onViewForm}\n      />\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  return (\n    <Flex flexDirection=\"column\" gap={24}>\n      <Components.Box\n        withPadding={false}\n        header={<Components.BoxHeader title={t('documents.title')} />}\n      >\n        {isLoading ? (\n          <Loading />\n        ) : (\n          <DataView label={t('documents.listLabel')} isWithinBox {...formsDataView} />\n        )}\n      </Components.Box>\n    </Flex>\n  )\n}\n"],"names":["DocumentsViewWithData","employeeId","onViewForm","forms","useEmployeeForms","jsx","BaseLayout","DocumentsView","isLoading","useTranslation","Components","useComponentContext","formsColumns","form","formsDataView","useDataView","EmptyData","Flex","Loading","DataView"],"mappings":";;;;;;;;;;;;AAyBO,SAASA,EAAsB,EAAE,YAAAC,GAAY,YAAAC,KAA0C;AAC5F,QAAMC,IAAQC,EAAiB,EAAE,YAAAH,GAAY;AAE7C,SACE,gBAAAI,EAACC,GAAA,EAAW,OAAOH,EAAM,cAAc,QACrC,UAAA,gBAAAE;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAOJ,EAAM,KAAK;AAAA,MAClB,WAAWA,EAAM,OAAO;AAAA,MACxB,YAAAD;AAAA,IAAA;AAAA,EAAA,GAEJ;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,gBAAAR,EAACK,EAAW,OAAX,EAAiB,QAAO,WACtB,UAAA,EAAE,mCAAmC,GACxC,IAIF,gBAAAL,EAACK,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,gBAAAR,EAACK,EAAW,QAAX,EAAkB,SAAQ,aAAY,SAAS,MAAMR,IAAaW,EAAK,IAAI,GACzE,UAAA,EAAE,mBAAmB,GACxB;AAAA,IAEF,YAAY,MACV,gBAAAR;AAAA,MAACW;AAAA,MAAA;AAAA,QACC,OAAO,EAAE,4BAA4B;AAAA,QACrC,aAAa,EAAE,kCAAkC;AAAA,MAAA;AAAA,IAAA;AAAA,EACnD,CAEH;AAED,SACE,gBAAAX,EAACY,GAAA,EAAK,eAAc,UAAS,KAAK,IAChC,UAAA,gBAAAZ;AAAA,IAACK,EAAW;AAAA,IAAX;AAAA,MACC,aAAa;AAAA,MACb,0BAASA,EAAW,WAAX,EAAqB,OAAO,EAAE,iBAAiB,GAAG;AAAA,MAE1D,UAAAF,IACC,gBAAAH,EAACa,GAAA,CAAA,CAAQ,IAET,gBAAAb,EAACc,GAAA,EAAS,OAAO,EAAE,qBAAqB,GAAG,aAAW,IAAE,GAAGL,EAAA,CAAe;AAAA,IAAA;AAAA,EAAA,GAGhF;AAEJ;"}