@gusto/embedded-react-sdk 0.55.4 → 0.55.6

package/dist/components/Contractor/ContractorList/onboarding/ContractorListView.js

@@ -1,45 +1,45 @@
-import { jsx as t, jsxs as s, Fragment as w } from "react/jsx-runtime";
-import { useState as A } from "react";
-import { useTranslation as L } from "react-i18next";
+import { jsx as t, jsxs as s, Fragment as A } from "react/jsx-runtime";
+import { useState as L } from "react";
+import { useTranslation as T } from "react-i18next";
 import { Flex as c } from "../../../Common/Flex/Flex.js";
-import { EmptyData as T } from "../../../Common/EmptyData/EmptyData.js";
+import { EmptyData as N } from "../../../Common/EmptyData/EmptyData.js";
 import { ActionsLayout as u } from "../../../Common/ActionsLayout/ActionsLayout.js";
-import { HamburgerMenu as N } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
-import { useComponentContext as v } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { ContractorOnboardingStatusBadge as O } from "../../../Common/OnboardingStatusBadge/index.js";
-import k from "../../../../assets/icons/pencil.svg.js";
-import _ from "../../../../assets/icons/trashcan.svg.js";
-import x from "../../../../assets/icons/x-circle.svg.js";
-import { firstLastName as B } from "../../../../helpers/formattedStrings.js";
-import { ContractorOnboardingStatus as E, CONTRACTOR_TYPE as P } from "../../../../shared/constants.js";
-import { useDataView as I } from "../../../Common/DataView/useDataView.js";
-import { DataView as R } from "../../../Common/DataView/DataView.js";
-function V(n) {
-  return n.type === P.BUSINESS ? n.businessName : B({ first_name: n.firstName, last_name: n.lastName });
+import { HamburgerMenu as v } from "../../../Common/HamburgerMenu/HamburgerMenu.js";
+import { useComponentContext as O } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ContractorOnboardingStatusBadge as k } from "../../../Common/OnboardingStatusBadge/index.js";
+import _ from "../../../../assets/icons/pencil.svg.js";
+import x from "../../../../assets/icons/trashcan.svg.js";
+import B from "../../../../assets/icons/x-circle.svg.js";
+import { firstLastName as E } from "../../../../helpers/formattedStrings.js";
+import { ContractorOnboardingStatus as P, CONTRACTOR_TYPE as I } from "../../../../shared/constants.js";
+import { useDataView as R } from "../../../Common/DataView/useDataView.js";
+import { DataView as V } from "../../../Common/DataView/DataView.js";
+function p(n) {
+  return n.type === I.BUSINESS ? n.businessName : E({ first_name: n.firstName, last_name: n.lastName });
 }
 function ee({
   contractors: n,
-  isFetching: p,
-  pagination: f,
-  status: C,
+  isFetching: f,
+  pagination: C,
+  status: g,
   successMessage: d,
   onEdit: b,
-  onDelete: g,
-  onCancelSelfOnboarding: h,
+  onDelete: h,
+  onCancelSelfOnboarding: y,
   onAddContractor: m,
-  onContinue: y
+  onContinue: D
 }) {
-  const { t: e } = L("Contractor.ContractorList"), o = v(), [r, l] = A(null), { ...D } = I({
+  const { t: e } = T("Contractor.ContractorList"), o = O(), [r, l] = L(null), { ...S } = R({
     data: n,
     columns: [
       {
         title: e("listHeaders.name"),
-        render: (i) => V(i)
+        render: (i) => p(i)
       },
       {
         title: e("listHeaders.status"),
         render: (i) => /* @__PURE__ */ t(
-          O,
+          k,
           {
             onboarded: i.onboarded,
             onboardingStatus: i.onboardingStatus
@@ -48,40 +48,46 @@ function ee({
       }
     ],
     itemMenu: (i) => {
-      const a = [], S = i.onboardingStatus === E.SELF_ONBOARDING_REVIEW;
+      const a = [], w = i.onboardingStatus === P.SELF_ONBOARDING_REVIEW;
       return i.allowedActions.includes("edit") && a.push({
-        label: e(S ? "reviewCta" : "editCta"),
+        label: e(w ? "reviewCta" : "editCta"),
         onClick: () => {
           b(i.uuid);
         },
-        icon: /* @__PURE__ */ t(k, { "aria-hidden": !0 })
+        icon: /* @__PURE__ */ t(_, { "aria-hidden": !0 })
       }), i.allowedActions.includes("cancel_self_onboarding") && a.push({
         label: e("cancelSelfOnboardingCta"),
         onClick: () => {
-          h(i.uuid);
+          y(i.uuid);
         },
-        icon: /* @__PURE__ */ t(x, { "aria-hidden": !0 })
+        icon: /* @__PURE__ */ t(B, { "aria-hidden": !0 })
       }), i.allowedActions.includes("delete") && a.push({
         label: e("deleteCta"),
         onClick: () => {
           l(i.uuid);
         },
-        icon: /* @__PURE__ */ t(_, { "aria-hidden": !0 })
-      }), /* @__PURE__ */ t(N, { items: a });
+        icon: /* @__PURE__ */ t(x, { "aria-hidden": !0 })
+      }), /* @__PURE__ */ t(
+        v,
+        {
+          triggerLabel: e("hamburgerTitle", { name: p(i) }),
+          items: a
+        }
+      );
     },
-    isFetching: p,
-    pagination: f,
-    emptyState: () => /* @__PURE__ */ t(T, { title: e("emptyTableTitle"), description: e("emptyTableDescription"), children: /* @__PURE__ */ t(u, { justifyContent: "center", children: /* @__PURE__ */ t(o.Button, { onClick: m, children: e("addContractorCta") }) }) })
+    isFetching: f,
+    pagination: C,
+    emptyState: () => /* @__PURE__ */ t(N, { title: e("emptyTableTitle"), description: e("emptyTableDescription"), children: /* @__PURE__ */ t(u, { justifyContent: "center", children: /* @__PURE__ */ t(o.Button, { onClick: m, children: e("addContractorCta") }) }) })
   });
-  return /* @__PURE__ */ s(w, { children: [
+  return /* @__PURE__ */ s(A, { children: [
     /* @__PURE__ */ s(c, { flexDirection: "column", children: [
       d && /* @__PURE__ */ t(o.Alert, { label: d, status: "success" }),
       /* @__PURE__ */ s(c, { alignItems: "center", justifyContent: "space-between", children: [
         /* @__PURE__ */ t(o.Heading, { as: "h2", children: e("title") }),
         n.length > 0 && /* @__PURE__ */ t(o.Button, { variant: "secondary", onClick: m, children: e("addAnotherCta") })
       ] }),
-      /* @__PURE__ */ t(R, { label: e("contractorListLabel"), ...D }),
-      /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(o.Button, { onClick: y, children: e("continueCta") }) })
+      /* @__PURE__ */ t(V, { label: e("contractorListLabel"), ...S }),
+      /* @__PURE__ */ t(u, { children: /* @__PURE__ */ t(o.Button, { onClick: D, children: e("continueCta") }) })
     ] }),
     /* @__PURE__ */ t(
       o.Dialog,
@@ -93,11 +99,11 @@ function ee({
         onPrimaryActionClick: async () => {
           if (r)
             try {
-              await g(r), l(null);
+              await h(r), l(null);
             } catch {
             }
         },
-        isPrimaryActionLoading: C.isPending,
+        isPrimaryActionLoading: g.isPending,
         isDestructive: !0,
         title: e("deleteDialog.title"),
         primaryActionLabel: e("deleteDialog.confirmCta"),

package/dist/components/Contractor/ContractorList/onboarding/ContractorListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContractorListView.js","sources":["../../../../../src/components/Contractor/ContractorList/onboarding/ContractorListView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { UseContractorListResult, ContractorWithActions } from '../shared/useContractorList'\nimport { DataView, EmptyData, ActionsLayout, useDataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { ContractorOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport XCircleSvg from '@/assets/icons/x-circle.svg?react'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { CONTRACTOR_TYPE, ContractorOnboardingStatus } from '@/shared/constants'\n\n/** @internal */\nexport interface ContractorListViewProps extends Pick<\n  Extract<UseContractorListResult, { isLoading: false }>,\n  'pagination' | 'status'\n> {\n  contractors: ContractorWithActions[]\n  isFetching: boolean\n  successMessage?: string\n  onEdit: (contractorId: string) => void\n  onDelete: (contractorId: string) => Promise<void>\n  onCancelSelfOnboarding: (contractorId: string) => Promise<void>\n  onAddContractor: () => void\n  onContinue: () => void\n}\n\nfunction contractorDisplayName(contractor: ContractorWithActions) {\n  return contractor.type === CONTRACTOR_TYPE.BUSINESS\n    ? contractor.businessName\n    : firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n}\n\n/** @internal */\nexport function ContractorListView({\n  contractors,\n  isFetching,\n  pagination,\n  status,\n  successMessage,\n  onEdit,\n  onDelete,\n  onCancelSelfOnboarding,\n  onAddContractor,\n  onContinue,\n}: ContractorListViewProps) {\n  const { t } = useTranslation('Contractor.ContractorList')\n  const Components = useComponentContext()\n  const [contractorToDelete, setContractorToDelete] = useState<string | null>(null)\n\n  const { ...dataViewProps } = useDataView({\n    data: contractors,\n    columns: [\n      {\n        title: t('listHeaders.name'),\n        render: (contractor: ContractorWithActions) => contractorDisplayName(contractor),\n      },\n      {\n        title: t('listHeaders.status'),\n        render: (contractor: ContractorWithActions) => (\n          <ContractorOnboardingStatusBadge\n            onboarded={contractor.onboarded}\n            onboardingStatus={contractor.onboardingStatus}\n          />\n        ),\n      },\n    ],\n    itemMenu: contractor => {\n      const menuItems = []\n      const isReview =\n        contractor.onboardingStatus === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW\n\n      if (contractor.allowedActions.includes('edit')) {\n        menuItems.push({\n          label: isReview ? t('reviewCta') : t('editCta'),\n          onClick: () => {\n            onEdit(contractor.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (contractor.allowedActions.includes('cancel_self_onboarding')) {\n        menuItems.push({\n          label: t('cancelSelfOnboardingCta'),\n          onClick: () => {\n            void onCancelSelfOnboarding(contractor.uuid)\n          },\n          icon: <XCircleSvg aria-hidden />,\n        })\n      }\n\n      if (contractor.allowedActions.includes('delete')) {\n        menuItems.push({\n          label: t('deleteCta'),\n          onClick: () => {\n            setContractorToDelete(contractor.uuid)\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      return <HamburgerMenu items={menuItems} />\n    },\n    isFetching,\n    pagination,\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Components.Button onClick={onAddContractor}>{t('addContractorCta')}</Components.Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n\n  return (\n    <>\n      <Flex flexDirection=\"column\">\n        {successMessage && <Components.Alert label={successMessage} status=\"success\" />}\n\n        <Flex alignItems=\"center\" justifyContent=\"space-between\">\n          <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n\n          {contractors.length > 0 && (\n            <Components.Button variant=\"secondary\" onClick={onAddContractor}>\n              {t('addAnotherCta')}\n            </Components.Button>\n          )}\n        </Flex>\n\n        <DataView label={t('contractorListLabel')} {...dataViewProps} />\n\n        <ActionsLayout>\n          <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n        </ActionsLayout>\n      </Flex>\n\n      <Components.Dialog\n        isOpen={!!contractorToDelete}\n        onClose={() => {\n          setContractorToDelete(null)\n        }}\n        onPrimaryActionClick={async () => {\n          if (contractorToDelete) {\n            try {\n              await onDelete(contractorToDelete)\n              setContractorToDelete(null)\n            } catch {\n              // Keep dialog open on error\n            }\n          }\n        }}\n        isPrimaryActionLoading={status.isPending}\n        isDestructive\n        title={t('deleteDialog.title')}\n        primaryActionLabel={t('deleteDialog.confirmCta')}\n        closeActionLabel={t('deleteDialog.cancelCta')}\n      >\n        {t('deleteDialog.description')}\n      </Components.Dialog>\n    </>\n  )\n}\n"],"names":["contractorDisplayName","contractor","CONTRACTOR_TYPE","firstLastName","ContractorListView","contractors","isFetching","pagination","status","successMessage","onEdit","onDelete","onCancelSelfOnboarding","onAddContractor","onContinue","t","useTranslation","Components","useComponentContext","contractorToDelete","setContractorToDelete","useState","dataViewProps","useDataView","jsx","ContractorOnboardingStatusBadge","menuItems","isReview","ContractorOnboardingStatus","PencilSvg","XCircleSvg","TrashCanSvg","HamburgerMenu","EmptyData","ActionsLayout","jsxs","Fragment","Flex","DataView"],"mappings":"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"}
+{"version":3,"file":"ContractorListView.js","sources":["../../../../../src/components/Contractor/ContractorList/onboarding/ContractorListView.tsx"],"sourcesContent":["import { useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { UseContractorListResult, ContractorWithActions } from '../shared/useContractorList'\nimport { DataView, EmptyData, ActionsLayout, useDataView, Flex } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { HamburgerMenu } from '@/components/Common/HamburgerMenu'\nimport { ContractorOnboardingStatusBadge } from '@/components/Common/OnboardingStatusBadge'\nimport PencilSvg from '@/assets/icons/pencil.svg?react'\nimport TrashCanSvg from '@/assets/icons/trashcan.svg?react'\nimport XCircleSvg from '@/assets/icons/x-circle.svg?react'\nimport { firstLastName } from '@/helpers/formattedStrings'\nimport { CONTRACTOR_TYPE, ContractorOnboardingStatus } from '@/shared/constants'\n\n/** @internal */\nexport interface ContractorListViewProps extends Pick<\n  Extract<UseContractorListResult, { isLoading: false }>,\n  'pagination' | 'status'\n> {\n  contractors: ContractorWithActions[]\n  isFetching: boolean\n  successMessage?: string\n  onEdit: (contractorId: string) => void\n  onDelete: (contractorId: string) => Promise<void>\n  onCancelSelfOnboarding: (contractorId: string) => Promise<void>\n  onAddContractor: () => void\n  onContinue: () => void\n}\n\nfunction contractorDisplayName(contractor: ContractorWithActions) {\n  return contractor.type === CONTRACTOR_TYPE.BUSINESS\n    ? contractor.businessName\n    : firstLastName({ first_name: contractor.firstName, last_name: contractor.lastName })\n}\n\n/** @internal */\nexport function ContractorListView({\n  contractors,\n  isFetching,\n  pagination,\n  status,\n  successMessage,\n  onEdit,\n  onDelete,\n  onCancelSelfOnboarding,\n  onAddContractor,\n  onContinue,\n}: ContractorListViewProps) {\n  const { t } = useTranslation('Contractor.ContractorList')\n  const Components = useComponentContext()\n  const [contractorToDelete, setContractorToDelete] = useState<string | null>(null)\n\n  const { ...dataViewProps } = useDataView({\n    data: contractors,\n    columns: [\n      {\n        title: t('listHeaders.name'),\n        render: (contractor: ContractorWithActions) => contractorDisplayName(contractor),\n      },\n      {\n        title: t('listHeaders.status'),\n        render: (contractor: ContractorWithActions) => (\n          <ContractorOnboardingStatusBadge\n            onboarded={contractor.onboarded}\n            onboardingStatus={contractor.onboardingStatus}\n          />\n        ),\n      },\n    ],\n    itemMenu: contractor => {\n      const menuItems = []\n      const isReview =\n        contractor.onboardingStatus === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW\n\n      if (contractor.allowedActions.includes('edit')) {\n        menuItems.push({\n          label: isReview ? t('reviewCta') : t('editCta'),\n          onClick: () => {\n            onEdit(contractor.uuid)\n          },\n          icon: <PencilSvg aria-hidden />,\n        })\n      }\n\n      if (contractor.allowedActions.includes('cancel_self_onboarding')) {\n        menuItems.push({\n          label: t('cancelSelfOnboardingCta'),\n          onClick: () => {\n            void onCancelSelfOnboarding(contractor.uuid)\n          },\n          icon: <XCircleSvg aria-hidden />,\n        })\n      }\n\n      if (contractor.allowedActions.includes('delete')) {\n        menuItems.push({\n          label: t('deleteCta'),\n          onClick: () => {\n            setContractorToDelete(contractor.uuid)\n          },\n          icon: <TrashCanSvg aria-hidden />,\n        })\n      }\n\n      return (\n        <HamburgerMenu\n          triggerLabel={t('hamburgerTitle', { name: contractorDisplayName(contractor) })}\n          items={menuItems}\n        />\n      )\n    },\n    isFetching,\n    pagination,\n    emptyState: () => (\n      <EmptyData title={t('emptyTableTitle')} description={t('emptyTableDescription')}>\n        <ActionsLayout justifyContent=\"center\">\n          <Components.Button onClick={onAddContractor}>{t('addContractorCta')}</Components.Button>\n        </ActionsLayout>\n      </EmptyData>\n    ),\n  })\n\n  return (\n    <>\n      <Flex flexDirection=\"column\">\n        {successMessage && <Components.Alert label={successMessage} status=\"success\" />}\n\n        <Flex alignItems=\"center\" justifyContent=\"space-between\">\n          <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n\n          {contractors.length > 0 && (\n            <Components.Button variant=\"secondary\" onClick={onAddContractor}>\n              {t('addAnotherCta')}\n            </Components.Button>\n          )}\n        </Flex>\n\n        <DataView label={t('contractorListLabel')} {...dataViewProps} />\n\n        <ActionsLayout>\n          <Components.Button onClick={onContinue}>{t('continueCta')}</Components.Button>\n        </ActionsLayout>\n      </Flex>\n\n      <Components.Dialog\n        isOpen={!!contractorToDelete}\n        onClose={() => {\n          setContractorToDelete(null)\n        }}\n        onPrimaryActionClick={async () => {\n          if (contractorToDelete) {\n            try {\n              await onDelete(contractorToDelete)\n              setContractorToDelete(null)\n            } catch {\n              // Keep dialog open on error\n            }\n          }\n        }}\n        isPrimaryActionLoading={status.isPending}\n        isDestructive\n        title={t('deleteDialog.title')}\n        primaryActionLabel={t('deleteDialog.confirmCta')}\n        closeActionLabel={t('deleteDialog.cancelCta')}\n      >\n        {t('deleteDialog.description')}\n      </Components.Dialog>\n    </>\n  )\n}\n"],"names":["contractorDisplayName","contractor","CONTRACTOR_TYPE","firstLastName","ContractorListView","contractors","isFetching","pagination","status","successMessage","onEdit","onDelete","onCancelSelfOnboarding","onAddContractor","onContinue","t","useTranslation","Components","useComponentContext","contractorToDelete","setContractorToDelete","useState","dataViewProps","useDataView","jsx","ContractorOnboardingStatusBadge","menuItems","isReview","ContractorOnboardingStatus","PencilSvg","XCircleSvg","TrashCanSvg","HamburgerMenu","EmptyData","ActionsLayout","jsxs","Fragment","Flex","DataView"],"mappings":"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"}

package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js

@@ -7,9 +7,9 @@ import l from "./PaymentStatementPresentation.module.scss.js";
 import { Flex as m } from "../../../Common/Flex/Flex.js";
 import { useComponentContext as A } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { useI18n as H } from "../../../../i18n/I18n.js";
-import { formatHoursDisplay as M } from "../../../Payroll/helpers.js";
-import j from "../../../../hooks/useNumberFormatter.js";
-import { useDateFormatter as y } from "../../../../hooks/useDateFormatter.js";
+import { formatHoursDisplay as j } from "../../../Payroll/helpers.js";
+import y from "../../../../hooks/useNumberFormatter.js";
+import { useDateFormatter as M } from "../../../../hooks/useDateFormatter.js";
 import { addressInline as B, formatPhoneNumber as K } from "../../../../helpers/formattedStrings.js";
 import O from "../../../../assets/icons/receipt-check.svg.js";
 import { DataView as U } from "../../../Common/DataView/DataView.js";
@@ -19,9 +19,9 @@ const te = ({
   checkDate: v,
   paymentReceipt: t
 }) => {
-  const h = A(), { Text: s, Heading: b, Link: w } = h;
+  const h = A(), { Text: s, Heading: f, Link: w } = h;
   H("Contractor.Payments.PaymentStatement");
-  const { t: r } = k("Contractor.Payments.PaymentStatement"), i = j("currency"), { formatLongWithYear: u } = y(), f = C(c), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), z = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), I = t?.totals?.companyDebit || "0", P = x(() => t ? [
+  const { t: r } = k("Contractor.Payments.PaymentStatement"), i = y("currency"), { formatLongWithYear: u } = M(), b = C(c), p = o.wageType === "Hourly", d = Number(o.hours || 0), g = Number(o.hourlyRate || 0), D = Number(o.bonus || 0), N = Number(o.reimbursement || 0), z = !!(t && o.status === "Funded" && o.paymentMethod === "Direct Deposit"), I = t?.totals?.companyDebit || "0", P = x(() => t ? [
     {
       label: r("receipt.from"),
       value: t.nameOfSender || ""
@@ -44,7 +44,7 @@ const te = ({
     return p && d > 0 ? n.push({
       label: r("hoursLabel"),
       amount: r("hoursAmount", {
-        hours: M(d),
+        hours: j(d),
         rate: i(g)
       })
     }) : n.push({
@@ -60,7 +60,7 @@ const te = ({
   }, [o, p, d, g, D, N, r, i]);
   return /* @__PURE__ */ a(m, { flexDirection: "column", gap: 32, children: [
     /* @__PURE__ */ e(m, { flexDirection: "column", gap: 16, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 8, children: [
-      /* @__PURE__ */ e(b, { as: "h2", children: r("title", { contractorName: f }) }),
+      /* @__PURE__ */ e(f, { as: "h2", children: r("title", { contractorName: b }) }),
       /* @__PURE__ */ e(s, { variant: "supporting", children: u(v) })
     ] }) }),
     z && /* @__PURE__ */ e("div", { className: l.receiptCard, children: /* @__PURE__ */ a(m, { flexDirection: "column", gap: 24, children: [
@@ -68,7 +68,7 @@ const te = ({
         /* @__PURE__ */ e("div", { className: l.receiptIcon, "aria-hidden": !0, children: /* @__PURE__ */ e(O, { className: l.checkmarkIcon }) }),
         /* @__PURE__ */ a(m, { flexDirection: "column", alignItems: "center", gap: 8, children: [
           /* @__PURE__ */ e(s, { size: "sm", variant: "supporting", children: r("receipt.totalLabel") }),
-          /* @__PURE__ */ e(b, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(I)) })
+          /* @__PURE__ */ e(f, { as: "h1", styledAs: "h2", className: l.totalAmount, children: i(Number(I)) })
         ] })
       ] }),
       /* @__PURE__ */ e(
@@ -118,11 +118,12 @@ const te = ({
           },
           {
             title: r("amountColumn"),
+            justify: "end",
             render: ({ amount: n }) => n || ""
           }
         ],
         data: S,
-        label: r("title", { contractorName: f })
+        label: r("title", { contractorName: b })
       }
     )
   ] });

package/dist/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n  payment: ContractorPaymentForGroup\n  contractor: Contractor\n  paymentReceipt?: ContractorPaymentReceipt\n  checkDate: string\n}\n\ntype PaymentStatementRow = {\n  label: string\n  amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n  payment,\n  contractor,\n  checkDate,\n  paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n  const Components = useComponentContext()\n  const { Text, Heading, Link } = Components\n  useI18n('Contractor.Payments.PaymentStatement')\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const contractorName = getContractorDisplayName(contractor)\n  const isHourly = payment.wageType === 'Hourly'\n  const hours = Number(payment.hours || 0)\n  const hourlyRate = Number(payment.hourlyRate || 0)\n  const bonus = Number(payment.bonus || 0)\n  const reimbursement = Number(payment.reimbursement || 0)\n\n  const shouldShowReceipt = Boolean(\n    paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n  )\n\n  const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n  const receiptDetailsConfig = useMemo(() => {\n    if (!paymentReceipt) return []\n\n    return [\n      {\n        label: t('receipt.from'),\n        value: paymentReceipt.nameOfSender || '',\n      },\n      {\n        label: t('receipt.to'),\n        value: getContractorDisplayName(contractor),\n      },\n      {\n        label: t('receipt.debitDate'),\n        value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n      },\n    ]\n  }, [paymentReceipt, contractor, t, formatLongWithYear])\n\n  const statementRows = useMemo<PaymentStatementRow[]>(() => {\n    const rows: PaymentStatementRow[] = [\n      {\n        label: payment.paymentMethod || '',\n        amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n      },\n    ]\n\n    if (isHourly && hours > 0) {\n      rows.push({\n        label: t('hoursLabel'),\n        amount: t('hoursAmount', {\n          hours: formatHoursDisplay(hours),\n          rate: currencyFormatter(hourlyRate),\n        }),\n      })\n    } else {\n      rows.push({\n        label: t('wageLabel'),\n        amount: currencyFormatter(Number(payment.wage || 0)),\n      })\n    }\n\n    rows.push({\n      label: t('bonus'),\n      amount: currencyFormatter(bonus),\n    })\n\n    rows.push({\n      label: t('reimbursement'),\n      amount: currencyFormatter(reimbursement),\n    })\n\n    return rows\n  }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n          <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n        </Flex>\n      </Flex>\n\n      {shouldShowReceipt && (\n        <div className={styles.receiptCard}>\n          <Flex flexDirection=\"column\" gap={24}>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n              <div className={styles.receiptIcon} aria-hidden>\n                <ReceiptCheck className={styles.checkmarkIcon} />\n              </div>\n\n              <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n                <Text size=\"sm\" variant=\"supporting\">\n                  {t('receipt.totalLabel')}\n                </Text>\n                <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n                  {currencyFormatter(Number(receiptTotal))}\n                </Heading>\n              </Flex>\n            </Flex>\n\n            <Components.DescriptionList\n              layout=\"horizontal\"\n              showSeparators={false}\n              items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n                term: (\n                  <Text size=\"sm\" variant=\"supporting\">\n                    {label}\n                  </Text>\n                ),\n                description: <Text size=\"sm\">{value}</Text>,\n              }))}\n            />\n            <hr />\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n                <Trans\n                  i18nKey=\"receipt.disclaimer\"\n                  t={t}\n                  components={{\n                    licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n                  }}\n                />\n              </Text>\n              <hr />\n\n              <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n                {paymentReceipt?.licensee?.name || ''}\n              </Text>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n                {addressInline({\n                  street1: paymentReceipt?.licensee?.address || '',\n                  city: paymentReceipt?.licensee?.city || '',\n                  state: paymentReceipt?.licensee?.state || '',\n                  zip: paymentReceipt?.licensee?.postalCode || '',\n                  country: '',\n                  uuid: '',\n                })}\n                {' | '}\n                {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n              </Text>\n            </Flex>\n          </Flex>\n        </div>\n      )}\n\n      <DataView\n        columns={[\n          {\n            title: t('debitedColumn'),\n            render: ({ label }) => label,\n          },\n          {\n            title: t('amountColumn'),\n            render: ({ amount }) => amount || '',\n          },\n        ]}\n        data={statementRows}\n        label={t('title', { contractorName })}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentStatementPresentation","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","jsxs","Flex","jsx","styles","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}
+{"version":3,"file":"PaymentStatementPresentation.js","sources":["../../../../../src/components/Contractor/Payments/PaymentStatement/PaymentStatementPresentation.tsx"],"sourcesContent":["import { Trans, useTranslation } from 'react-i18next'\nimport type { ContractorPaymentForGroup } from '@gusto/embedded-api/models/components/contractorpaymentforgroup'\nimport type { Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport { useMemo } from 'react'\nimport type { ContractorPaymentReceipt } from '@gusto/embedded-api/models/components/contractorpaymentreceipt'\nimport { getContractorDisplayName } from '../../shared/helpers'\nimport { getContractorPaymentTotalAmount } from '../shared/paymentAmounts'\nimport styles from './PaymentStatementPresentation.module.scss'\nimport { DataView, Flex } from '@/components/Common'\nimport type { DescriptionListItem } from '@/components/Common/UI/DescriptionList/DescriptionListTypes'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { formatHoursDisplay } from '@/components/Payroll/helpers'\nimport useNumberFormatter from '@/hooks/useNumberFormatter'\nimport { useDateFormatter } from '@/hooks/useDateFormatter'\nimport { addressInline, formatPhoneNumber } from '@/helpers/formattedStrings'\nimport ReceiptCheck from '@/assets/icons/receipt-check.svg?react'\n\ninterface PaymentStatementPresentationProps {\n  payment: ContractorPaymentForGroup\n  contractor: Contractor\n  paymentReceipt?: ContractorPaymentReceipt\n  checkDate: string\n}\n\ntype PaymentStatementRow = {\n  label: string\n  amount: string | null\n}\n\n/** @internal */\nexport const PaymentStatementPresentation = ({\n  payment,\n  contractor,\n  checkDate,\n  paymentReceipt,\n}: PaymentStatementPresentationProps) => {\n  const Components = useComponentContext()\n  const { Text, Heading, Link } = Components\n  useI18n('Contractor.Payments.PaymentStatement')\n  const { t } = useTranslation('Contractor.Payments.PaymentStatement')\n  const currencyFormatter = useNumberFormatter('currency')\n  const { formatLongWithYear } = useDateFormatter()\n\n  const contractorName = getContractorDisplayName(contractor)\n  const isHourly = payment.wageType === 'Hourly'\n  const hours = Number(payment.hours || 0)\n  const hourlyRate = Number(payment.hourlyRate || 0)\n  const bonus = Number(payment.bonus || 0)\n  const reimbursement = Number(payment.reimbursement || 0)\n\n  const shouldShowReceipt = Boolean(\n    paymentReceipt && payment.status === 'Funded' && payment.paymentMethod === 'Direct Deposit',\n  )\n\n  const receiptTotal = paymentReceipt?.totals?.companyDebit || '0'\n\n  const receiptDetailsConfig = useMemo(() => {\n    if (!paymentReceipt) return []\n\n    return [\n      {\n        label: t('receipt.from'),\n        value: paymentReceipt.nameOfSender || '',\n      },\n      {\n        label: t('receipt.to'),\n        value: getContractorDisplayName(contractor),\n      },\n      {\n        label: t('receipt.debitDate'),\n        value: paymentReceipt.debitDate ? formatLongWithYear(String(paymentReceipt.debitDate)) : '',\n      },\n    ]\n  }, [paymentReceipt, contractor, t, formatLongWithYear])\n\n  const statementRows = useMemo<PaymentStatementRow[]>(() => {\n    const rows: PaymentStatementRow[] = [\n      {\n        label: payment.paymentMethod || '',\n        amount: currencyFormatter(getContractorPaymentTotalAmount(payment)),\n      },\n    ]\n\n    if (isHourly && hours > 0) {\n      rows.push({\n        label: t('hoursLabel'),\n        amount: t('hoursAmount', {\n          hours: formatHoursDisplay(hours),\n          rate: currencyFormatter(hourlyRate),\n        }),\n      })\n    } else {\n      rows.push({\n        label: t('wageLabel'),\n        amount: currencyFormatter(Number(payment.wage || 0)),\n      })\n    }\n\n    rows.push({\n      label: t('bonus'),\n      amount: currencyFormatter(bonus),\n    })\n\n    rows.push({\n      label: t('reimbursement'),\n      amount: currencyFormatter(reimbursement),\n    })\n\n    return rows\n  }, [payment, isHourly, hours, hourlyRate, bonus, reimbursement, t, currencyFormatter])\n\n  return (\n    <Flex flexDirection=\"column\" gap={32}>\n      <Flex flexDirection=\"column\" gap={16}>\n        <Flex flexDirection=\"column\" gap={8}>\n          <Heading as=\"h2\">{t('title', { contractorName })}</Heading>\n          <Text variant=\"supporting\">{formatLongWithYear(checkDate)}</Text>\n        </Flex>\n      </Flex>\n\n      {shouldShowReceipt && (\n        <div className={styles.receiptCard}>\n          <Flex flexDirection=\"column\" gap={24}>\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={16}>\n              <div className={styles.receiptIcon} aria-hidden>\n                <ReceiptCheck className={styles.checkmarkIcon} />\n              </div>\n\n              <Flex flexDirection=\"column\" alignItems=\"center\" gap={8}>\n                <Text size=\"sm\" variant=\"supporting\">\n                  {t('receipt.totalLabel')}\n                </Text>\n                <Heading as=\"h1\" styledAs=\"h2\" className={styles.totalAmount}>\n                  {currencyFormatter(Number(receiptTotal))}\n                </Heading>\n              </Flex>\n            </Flex>\n\n            <Components.DescriptionList\n              layout=\"horizontal\"\n              showSeparators={false}\n              items={receiptDetailsConfig.map(({ label, value }): DescriptionListItem => ({\n                term: (\n                  <Text size=\"sm\" variant=\"supporting\">\n                    {label}\n                  </Text>\n                ),\n                description: <Text size=\"sm\">{value}</Text>,\n              }))}\n            />\n            <hr />\n            <Flex flexDirection=\"column\" alignItems=\"center\" gap={12}>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.disclaimer}>\n                <Trans\n                  i18nKey=\"receipt.disclaimer\"\n                  t={t}\n                  components={{\n                    licensesLink: <Link href={paymentReceipt?.licenseUri || ''} target=\"_blank\" />,\n                  }}\n                />\n              </Text>\n              <hr />\n\n              <Text size=\"sm\" variant=\"supporting\" className={styles.companyInfo}>\n                {paymentReceipt?.licensee?.name || ''}\n              </Text>\n              <Text size=\"sm\" variant=\"supporting\" className={styles.address}>\n                {addressInline({\n                  street1: paymentReceipt?.licensee?.address || '',\n                  city: paymentReceipt?.licensee?.city || '',\n                  state: paymentReceipt?.licensee?.state || '',\n                  zip: paymentReceipt?.licensee?.postalCode || '',\n                  country: '',\n                  uuid: '',\n                })}\n                {' | '}\n                {formatPhoneNumber(paymentReceipt?.licensee?.phoneNumber)}\n              </Text>\n            </Flex>\n          </Flex>\n        </div>\n      )}\n\n      <DataView\n        columns={[\n          {\n            title: t('debitedColumn'),\n            render: ({ label }) => label,\n          },\n          {\n            title: t('amountColumn'),\n            justify: 'end',\n            render: ({ amount }) => amount || '',\n          },\n        ]}\n        data={statementRows}\n        label={t('title', { contractorName })}\n      />\n    </Flex>\n  )\n}\n"],"names":["PaymentStatementPresentation","payment","contractor","checkDate","paymentReceipt","Components","useComponentContext","Text","Heading","Link","useI18n","t","useTranslation","currencyFormatter","useNumberFormatter","formatLongWithYear","useDateFormatter","contractorName","getContractorDisplayName","isHourly","hours","hourlyRate","bonus","reimbursement","shouldShowReceipt","receiptTotal","receiptDetailsConfig","useMemo","statementRows","rows","getContractorPaymentTotalAmount","formatHoursDisplay","jsxs","Flex","jsx","styles","ReceiptCheck","label","value","Trans","addressInline","formatPhoneNumber","DataView","amount"],"mappings":"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"}

package/dist/components/Contractor/Profile/onboarding/ContractorProfile.js

@@ -3,10 +3,10 @@ import { useMemo as R, useState as O, useEffect as S } from "react";
 import { useTranslation as C } from "react-i18next";
 import { useWatch as y } from "react-hook-form";
 import A from "classnames";
-import { useContractorDetailsForm as F } from "../shared/useContractorDetailsForm/useContractorDetailsForm.js";
-import { ContractorType as T } from "../shared/useContractorDetailsForm/contractorDetailsSchema.js";
-import { SelfOnboardingContractorProfile as L } from "./SelfOnboardingContractorProfile.js";
-import M from "./ContractorProfile.module.scss.js";
+import { useContractorDetailsForm as T } from "../shared/useContractorDetailsForm/useContractorDetailsForm.js";
+import { ContractorType as F } from "../shared/useContractorDetailsForm/contractorDetailsSchema.js";
+import { SelfOnboardingContractorProfile as M } from "./SelfOnboardingContractorProfile.js";
+import L from "./ContractorProfile.module.scss.js";
 import { BaseBoundaries as P, BaseLayout as h } from "../../../Base/Base.js";
 import "../../../Base/useBase.js";
 import { SDKFormProvider as _ } from "../../../../partner-hook-utils/form/SDKFormProvider.js";
@@ -14,10 +14,10 @@ import { Form as x } from "../../../Common/Form/Form.js";
 import { Flex as b } from "../../../Common/Flex/Flex.js";
 import { Grid as I } from "../../../Common/Grid/Grid.js";
 import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
-import { useComponentDictionary as B, useI18n as W } from "../../../../i18n/I18n.js";
+import { useComponentDictionary as B, useI18n as U } from "../../../../i18n/I18n.js";
 import { ContractorOnboardingStatus as g, componentEvents as p } from "../../../../shared/constants.js";
-import { useContractorHasSignedW9 as w } from "../../shared/useContractorHasSignedW9.js";
-function U(a) {
+import { useContractorHasSignedW9 as W } from "../../shared/useContractorHasSignedW9.js";
+function w(a) {
   return a?.onboarded === !0 || a?.onboardingStatus === g.ONBOARDING_COMPLETED || a?.onboardingStatus === g.SELF_ONBOARDING_REVIEW || a?.onboardingStatus === g.ADMIN_ONBOARDING_REVIEW;
 }
 function V(a) {
@@ -38,22 +38,22 @@ function de(a) {
       FallbackComponent: a.FallbackComponent,
       LoaderComponent: a.LoaderComponent,
       children: a.isAdmin === !1 ? /* @__PURE__ */ t(
-        L,
+        M,
         {
           contractorId: a.contractorId,
           onEvent: a.onEvent,
           className: a.className,
           LoaderComponent: a.LoaderComponent
         }
-      ) : /* @__PURE__ */ t(H, { ...a })
+      ) : /* @__PURE__ */ t(Q, { ...a })
     }
   );
 }
-function Q({ contractorId: a }) {
-  const n = w(a), { t: r } = C("Contractor.Profile"), s = D();
+function H({ contractorId: a }) {
+  const n = W(a), { t: r } = C("Contractor.Profile"), s = D();
   return n ? /* @__PURE__ */ t(s.Alert, { status: "warning", disableScrollIntoView: !0, label: r("w9EditWarning.label"), children: /* @__PURE__ */ t(s.Text, { children: r("w9EditWarning.body") }) }) : null;
 }
-function H({
+function Q({
   companyId: a,
   contractorId: n,
   defaultValues: r,
@@ -61,16 +61,16 @@ function H({
   onEvent: c,
   LoaderComponent: e
 }) {
-  W("Contractor.Profile");
+  U("Contractor.Profile");
   const o = R(
-    () => ({ type: T.Business, ...r }),
+    () => ({ type: F.Business, ...r }),
     [r]
   ), [l, i] = O(
     !n && (o.selfOnboarding ?? !1)
   ), m = R(
     () => V(l),
     [l]
-  ), u = F(
+  ), u = T(
     n ? {
       companyId: a,
       contractorId: n,
@@ -114,7 +114,7 @@ function k({
   S(() => {
     s(l);
   }, [l, s]);
-  const { Fields: i } = a.form, m = a.status.mode, u = U(a.data.contractor), E = !l || u, v = async () => {
+  const { Fields: i } = a.form, m = a.status.mode, u = w(a.data.contractor), E = !l || u, v = async () => {
     const f = await a.actions.onSubmit();
     f && (n(
       f.mode === "create" ? p.CONTRACTOR_CREATED : p.CONTRACTOR_UPDATED,
@@ -125,11 +125,11 @@ function k({
       selfOnboarding: l && !u
     }));
   };
-  return /* @__PURE__ */ t("section", { className: A(M.root, r), children: /* @__PURE__ */ t(h, { error: a.errorHandling.errors, LoaderComponent: c, children: /* @__PURE__ */ t(_, { formHookResult: a, children: /* @__PURE__ */ d(x, { onSubmit: () => {
+  return /* @__PURE__ */ t("section", { className: A(L.root, r), children: /* @__PURE__ */ t(h, { error: a.errorHandling.errors, LoaderComponent: c, children: /* @__PURE__ */ t(_, { formHookResult: a, children: /* @__PURE__ */ d(x, { onSubmit: () => {
     v();
   }, children: [
     /* @__PURE__ */ d(b, { flexDirection: "column", gap: 20, alignItems: "stretch", children: [
-      m === "update" && a.data.contractor?.uuid && /* @__PURE__ */ t(Q, { contractorId: a.data.contractor.uuid }),
+      m === "update" && a.data.contractor?.uuid && /* @__PURE__ */ t(H, { contractorId: a.data.contractor.uuid }),
       /* @__PURE__ */ t("header", { children: /* @__PURE__ */ d(b, { flexDirection: "column", gap: 4, children: [
         /* @__PURE__ */ t(o.Heading, { as: "h2", children: e("title") }),
         /* @__PURE__ */ t(o.Text, { variant: "supporting", children: e("subtitle") })
@@ -215,7 +215,10 @@ function k({
           label: e("fields.hourlyRate.label"),
           min: 0,
           format: "currency",
-          validationMessages: { REQUIRED: e("validations.hourlyRate") }
+          validationMessages: {
+            REQUIRED: e("validations.hourlyRate"),
+            MAX_HOURLY_RATE: e("validations.hourlyRateMax")
+          }
         }
       ),
       /* @__PURE__ */ t(

package/dist/components/Contractor/Profile/onboarding/ContractorProfile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContractorProfile.js","sources":["../../../../../src/components/Contractor/Profile/onboarding/ContractorProfile.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport { type Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport classNames from 'classnames'\nimport {\n  useContractorDetailsForm,\n  ContractorType,\n  type ContractorDetailsFormData,\n  type ContractorDetailsOptionalFieldsToRequire,\n  type UseContractorDetailsFormReady,\n} from '../shared/useContractorDetailsForm'\nimport { SelfOnboardingContractorProfile } from './SelfOnboardingContractorProfile'\nimport styles from './ContractorProfile.module.scss'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { Form } from '@/components/Common/Form'\nimport { Flex, Grid } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, ContractorOnboardingStatus } from '@/shared/constants'\nimport { useContractorHasSignedW9 } from '@/components/Contractor/shared/useContractorHasSignedW9'\nimport type { LoaderComponentType } from '@/components/Base'\n\n// Once the contractor has finished self-onboarding (or the record is otherwise\n// under admin review / completed), the admin needs to view and edit SSN/EIN even\n// though the self-onboarding toggle stays on. Mirrors the Employee AdminProfile\n// `checkHasCompletedSelfOnboarding` override.\nfunction hasCompletedSelfOnboarding(contractor?: Contractor | null): boolean {\n  return (\n    contractor?.onboarded === true ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.ONBOARDING_COMPLETED ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.ADMIN_ONBOARDING_REVIEW\n  )\n}\n\n// The admin form restores the contractor profile's product requiredness on top\n// of the hook's API-aligned baseline (which leaves ssn/ein optional and\n// create-only fields optional on update). When the admin invites the contractor\n// to self-onboard, SSN/EIN are hidden and the contractor supplies them later, so\n// they are dropped from the required set. An SSN/EIN already on file is still\n// waived via redaction, so promoting them when not inviting is safe.\nfunction computeRequiredFields(\n  selfOnboardingActive: boolean,\n): ContractorDetailsOptionalFieldsToRequire {\n  const base: ContractorDetailsOptionalFieldsToRequire = {\n    create: [],\n    update: ['firstName', 'lastName', 'businessName', 'hourlyRate', 'workState'],\n  }\n  if (selfOnboardingActive) return base\n  return {\n    create: [...(base.create ?? []), 'ssn', 'ein'],\n    update: [...(base.update ?? []), 'ssn', 'ein'],\n  }\n}\n\n/**\n * Props for {@link ContractorProfile} in admin mode.\n *\n * @remarks\n * Renders the admin create/edit form. When `contractorId` is omitted, the form\n * creates a new contractor under `companyId`. When provided, it fetches and\n * updates the existing contractor.\n *\n * @public\n */\nexport interface ContractorProfileAdminProps extends BaseComponentInterface<'Contractor.Profile'> {\n  /** UUID of the company the contractor belongs to. */\n  companyId: string\n  /** Initial values for the contractor profile form fields. */\n  defaultValues?: Partial<ContractorDetailsFormData>\n  /** When `true` (the default), renders the admin create/edit form. */\n  isAdmin?: true\n  /** UUID of an existing contractor to edit. When omitted, the form creates a new contractor. */\n  contractorId?: string\n}\n\n/**\n * Props for {@link ContractorProfile} in self-onboarding mode.\n *\n * @remarks\n * Renders the contractor self-onboarding profile. The contractor must already\n * exist so its type (individual vs. business) can be resolved to determine\n * which fields to display.\n *\n * @public\n */\nexport interface ContractorProfileSelfOnboardingProps extends BaseComponentInterface<'Contractor.Profile'> {\n  /** UUID of the company the contractor belongs to. */\n  companyId: string\n  /** Initial values for the contractor profile form fields. */\n  defaultValues?: Partial<ContractorDetailsFormData>\n  /** When `false`, renders the contractor self-onboarding profile. */\n  isAdmin: false\n  /** UUID of the existing contractor completing self-onboarding. Required in self-onboarding mode. */\n  contractorId: string\n}\n\n/**\n * Props for {@link ContractorProfile}.\n *\n * @remarks\n * Discriminated by `isAdmin`. See {@link ContractorProfileAdminProps} and\n * {@link ContractorProfileSelfOnboardingProps} for the specific prop shapes.\n *\n * @public\n */\nexport type ContractorProfileProps =\n  ContractorProfileAdminProps | ContractorProfileSelfOnboardingProps\n\n/**\n * Form for creating or editing a contractor profile, supporting both individual and business contractor types.\n *\n * @remarks\n * In admin mode (the default), renders different field sets depending on the contractor type (individual\n * vs. business) and wage type (hourly vs. fixed), and exposes a self-onboarding toggle that invites the\n * contractor to complete their own setup. When `contractorId` is provided, the form fetches the existing\n * contractor and updates it on submit; otherwise it creates a new contractor under `companyId`.\n *\n * When `isAdmin` is `false`, renders the contractor self-onboarding profile instead: it resolves the\n * existing contractor's type and presents the individual (name + SSN) or business (business name + EIN)\n * fields for the contractor to complete.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/created` | A new contractor was created successfully. | The created contractor entity |\n * | `contractor/updated` | An existing contractor was updated successfully. | The updated contractor entity |\n * | `contractor/profile/done` | The contractor profile step finished. | `{ contractorId: string, onboardingStatus?: string, selfOnboarding: boolean }` |\n *\n * @param props - See {@link ContractorProfileProps}.\n * @returns The rendered contractor profile form.\n * @public\n */\nexport function ContractorProfile(props: ContractorProfileProps) {\n  useComponentDictionary('Contractor.Profile', props.dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Contractor.Profile\"\n      FallbackComponent={props.FallbackComponent}\n      LoaderComponent={props.LoaderComponent}\n    >\n      {props.isAdmin === false ? (\n        <SelfOnboardingContractorProfile\n          contractorId={props.contractorId}\n          onEvent={props.onEvent}\n          className={props.className}\n          LoaderComponent={props.LoaderComponent}\n        />\n      ) : (\n        <ContractorProfileRoot {...props} />\n      )}\n    </BaseBoundaries>\n  )\n}\n\nfunction ContractorProfileW9Warning({ contractorId }: { contractorId: string }) {\n  const hasSignedW9 = useContractorHasSignedW9(contractorId)\n  const { t } = useTranslation('Contractor.Profile')\n  const Components = useComponentContext()\n  if (!hasSignedW9) return null\n  return (\n    <Components.Alert status=\"warning\" disableScrollIntoView label={t('w9EditWarning.label')}>\n      <Components.Text>{t('w9EditWarning.body')}</Components.Text>\n    </Components.Alert>\n  )\n}\n\nfunction ContractorProfileRoot({\n  companyId,\n  contractorId,\n  defaultValues,\n  className,\n  onEvent,\n  LoaderComponent,\n}: ContractorProfileProps) {\n  useI18n('Contractor.Profile')\n\n  const resolvedDefaults = useMemo<Partial<ContractorDetailsFormData>>(\n    () => ({ type: ContractorType.Business, ...defaultValues }),\n    [defaultValues],\n  )\n\n  // Mirrors the Employee AdminProfile loop: SSN/EIN requiredness depends on the\n  // self-onboarding toggle, which lives in the form the hook creates. Seed from\n  // the create-mode default, then sync from the watched value (see the ready child).\n  const [selfOnboardingActive, setSelfOnboardingActive] = useState(\n    !contractorId && (resolvedDefaults.selfOnboarding ?? false),\n  )\n\n  const optionalFieldsToRequire = useMemo(\n    () => computeRequiredFields(selfOnboardingActive),\n    [selfOnboardingActive],\n  )\n\n  const contractor = useContractorDetailsForm(\n    contractorId\n      ? {\n          companyId,\n          contractorId,\n          defaultValues: resolvedDefaults,\n          optionalFieldsToRequire,\n        }\n      : {\n          companyId,\n          defaultValues: resolvedDefaults,\n          optionalFieldsToRequire,\n        },\n  )\n\n  if (contractor.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={contractor.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  return (\n    <ContractorProfileReady\n      contractor={contractor}\n      onEvent={onEvent}\n      className={className}\n      setSelfOnboardingActive={setSelfOnboardingActive}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface ContractorProfileReadyProps {\n  contractor: UseContractorDetailsFormReady\n  onEvent: ContractorProfileProps['onEvent']\n  className?: string\n  setSelfOnboardingActive: (value: boolean) => void\n  LoaderComponent?: LoaderComponentType\n}\n\nfunction ContractorProfileReady({\n  contractor,\n  onEvent,\n  className,\n  setSelfOnboardingActive,\n  LoaderComponent,\n}: ContractorProfileReadyProps) {\n  const { t } = useTranslation('Contractor.Profile')\n  const Components = useComponentContext()\n\n  const watchedSelfOnboarding = useWatch({\n    control: contractor.form.hookFormInternals.formMethods.control,\n    name: 'selfOnboarding',\n  })\n\n  useEffect(() => {\n    setSelfOnboardingActive(watchedSelfOnboarding)\n  }, [watchedSelfOnboarding, setSelfOnboardingActive])\n\n  const { Fields } = contractor.form\n  const mode = contractor.status.mode\n\n  // SSN/EIN are hidden while collection is delegated to the contractor, but must\n  // reappear once they've finished so the admin can review/edit them.\n  const completedSelfOnboarding = hasCompletedSelfOnboarding(contractor.data.contractor)\n  const showTaxId = !watchedSelfOnboarding || completedSelfOnboarding\n\n  const handleSubmit = async () => {\n    const result = await contractor.actions.onSubmit()\n    if (!result) return\n\n    onEvent(\n      result.mode === 'create'\n        ? componentEvents.CONTRACTOR_CREATED\n        : componentEvents.CONTRACTOR_UPDATED,\n      result.data,\n    )\n\n    onEvent(componentEvents.CONTRACTOR_PROFILE_DONE, {\n      contractorId: result.data.uuid,\n      onboardingStatus: result.data.onboardingStatus,\n      selfOnboarding: watchedSelfOnboarding && !completedSelfOnboarding,\n    })\n  }\n\n  return (\n    <section className={classNames(styles.root, className)}>\n      <BaseLayout error={contractor.errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <SDKFormProvider formHookResult={contractor}>\n          <Form onSubmit={() => void handleSubmit()}>\n            <Flex flexDirection=\"column\" gap={20} alignItems=\"stretch\">\n              {mode === 'update' && contractor.data.contractor?.uuid && (\n                <ContractorProfileW9Warning contractorId={contractor.data.contractor.uuid} />\n              )}\n              <header>\n                <Flex flexDirection=\"column\" gap={4}>\n                  <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n                  <Components.Text variant=\"supporting\">{t('subtitle')}</Components.Text>\n                </Flex>\n              </header>\n\n              {(Fields.SelfOnboarding || Fields.Email) && (\n                <Components.Box>\n                  <Grid gap={16}>\n                    {Fields.SelfOnboarding && (\n                      <Fields.SelfOnboarding\n                        label={t('fields.selfOnboarding.label')}\n                        description={t('fields.selfOnboarding.description')}\n                      />\n                    )}\n\n                    {Fields.Email && (\n                      <Fields.Email\n                        label={t('fields.email.label')}\n                        validationMessages={{\n                          REQUIRED: t('validations.email'),\n                          INVALID_EMAIL: t('validations.emailFormat'),\n                        }}\n                      />\n                    )}\n                  </Grid>\n                </Components.Box>\n              )}\n\n              <Fields.Type label={t('fields.contractorType.label')} />\n\n              {Fields.FirstName && Fields.LastName && (\n                <>\n                  <Grid gridTemplateColumns={{ base: '1fr', medium: '1fr 1fr' }} gap={16}>\n                    <Fields.FirstName\n                      label={t('fields.firstName.label')}\n                      validationMessages={{\n                        REQUIRED: t('validations.firstName'),\n                        INVALID_NAME: t('validations.firstNameFormat'),\n                      }}\n                    />\n                    {Fields.MiddleInitial && (\n                      <Fields.MiddleInitial label={t('fields.middleInitial.label')} />\n                    )}\n                  </Grid>\n                  <Fields.LastName\n                    label={t('fields.lastName.label')}\n                    validationMessages={{\n                      REQUIRED: t('validations.lastName'),\n                      INVALID_NAME: t('validations.lastNameFormat'),\n                    }}\n                  />\n                  {Fields.Ssn && showTaxId && (\n                    <Fields.Ssn\n                      label={t('fields.ssn.label')}\n                      validationMessages={{\n                        INVALID_SSN: t('validations.ssnFormat'),\n                        REQUIRED: t('validations.ssn'),\n                      }}\n                    />\n                  )}\n                </>\n              )}\n\n              {Fields.BusinessName && (\n                <>\n                  <Fields.BusinessName\n                    label={t('fields.businessName.label')}\n                    validationMessages={{ REQUIRED: t('validations.businessName') }}\n                  />\n                  {Fields.Ein && showTaxId && (\n                    <Fields.Ein\n                      label={t('fields.ein.label')}\n                      validationMessages={{\n                        INVALID_EIN: t('validations.einFormat'),\n                        REQUIRED: t('validations.ein'),\n                      }}\n                    />\n                  )}\n                </>\n              )}\n\n              <Fields.WageType label={t('fields.wageType.label')} />\n\n              {Fields.HourlyRate && (\n                <Fields.HourlyRate\n                  label={t('fields.hourlyRate.label')}\n                  min={0}\n                  format=\"currency\"\n                  validationMessages={{ REQUIRED: t('validations.hourlyRate') }}\n                />\n              )}\n\n              <Fields.StartDate\n                label={t('fields.startDate.label')}\n                description={t('fields.startDate.description')}\n                validationMessages={{ REQUIRED: t('validations.startDate') }}\n              />\n            </Flex>\n\n            <Flex gap={12} justifyContent=\"flex-end\">\n              <Components.Button\n                type=\"submit\"\n                variant=\"primary\"\n                isDisabled={contractor.status.isPending}\n              >\n                {contractor.status.isPending\n                  ? mode === 'create'\n                    ? t('buttons.creating')\n                    : t('buttons.updating')\n                  : mode === 'create'\n                    ? t('buttons.create')\n                    : t('buttons.update')}\n              </Components.Button>\n            </Flex>\n          </Form>\n        </SDKFormProvider>\n      </BaseLayout>\n    </section>\n  )\n}\n"],"names":["hasCompletedSelfOnboarding","contractor","ContractorOnboardingStatus","computeRequiredFields","selfOnboardingActive","base","ContractorProfile","props","useComponentDictionary","jsx","BaseBoundaries","SelfOnboardingContractorProfile","ContractorProfileRoot","ContractorProfileW9Warning","contractorId","hasSignedW9","useContractorHasSignedW9","t","useTranslation","Components","useComponentContext","companyId","defaultValues","className","onEvent","LoaderComponent","useI18n","resolvedDefaults","useMemo","ContractorType","setSelfOnboardingActive","useState","optionalFieldsToRequire","useContractorDetailsForm","BaseLayout","ContractorProfileReady","watchedSelfOnboarding","useWatch","useEffect","Fields","mode","completedSelfOnboarding","showTaxId","handleSubmit","result","componentEvents","classNames","styles","SDKFormProvider","jsxs","Form","Flex","Grid","Fragment"],"mappings":"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"}
+{"version":3,"file":"ContractorProfile.js","sources":["../../../../../src/components/Contractor/Profile/onboarding/ContractorProfile.tsx"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWatch } from 'react-hook-form'\nimport { type Contractor } from '@gusto/embedded-api/models/components/contractor'\nimport classNames from 'classnames'\nimport {\n  useContractorDetailsForm,\n  ContractorType,\n  type ContractorDetailsFormData,\n  type ContractorDetailsOptionalFieldsToRequire,\n  type UseContractorDetailsFormReady,\n} from '../shared/useContractorDetailsForm'\nimport { SelfOnboardingContractorProfile } from './SelfOnboardingContractorProfile'\nimport styles from './ContractorProfile.module.scss'\nimport type { BaseComponentInterface } from '@/components/Base/Base'\nimport { BaseBoundaries, BaseLayout } from '@/components/Base'\nimport { SDKFormProvider } from '@/partner-hook-utils/form/SDKFormProvider'\nimport { Form } from '@/components/Common/Form'\nimport { Flex, Grid } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport { useI18n } from '@/i18n'\nimport { useComponentDictionary } from '@/i18n/I18n'\nimport { componentEvents, ContractorOnboardingStatus } from '@/shared/constants'\nimport { useContractorHasSignedW9 } from '@/components/Contractor/shared/useContractorHasSignedW9'\nimport type { LoaderComponentType } from '@/components/Base'\n\n// Once the contractor has finished self-onboarding (or the record is otherwise\n// under admin review / completed), the admin needs to view and edit SSN/EIN even\n// though the self-onboarding toggle stays on. Mirrors the Employee AdminProfile\n// `checkHasCompletedSelfOnboarding` override.\nfunction hasCompletedSelfOnboarding(contractor?: Contractor | null): boolean {\n  return (\n    contractor?.onboarded === true ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.ONBOARDING_COMPLETED ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.SELF_ONBOARDING_REVIEW ||\n    contractor?.onboardingStatus === ContractorOnboardingStatus.ADMIN_ONBOARDING_REVIEW\n  )\n}\n\n// The admin form restores the contractor profile's product requiredness on top\n// of the hook's API-aligned baseline (which leaves ssn/ein optional and\n// create-only fields optional on update). When the admin invites the contractor\n// to self-onboard, SSN/EIN are hidden and the contractor supplies them later, so\n// they are dropped from the required set. An SSN/EIN already on file is still\n// waived via redaction, so promoting them when not inviting is safe.\nfunction computeRequiredFields(\n  selfOnboardingActive: boolean,\n): ContractorDetailsOptionalFieldsToRequire {\n  const base: ContractorDetailsOptionalFieldsToRequire = {\n    create: [],\n    update: ['firstName', 'lastName', 'businessName', 'hourlyRate', 'workState'],\n  }\n  if (selfOnboardingActive) return base\n  return {\n    create: [...(base.create ?? []), 'ssn', 'ein'],\n    update: [...(base.update ?? []), 'ssn', 'ein'],\n  }\n}\n\n/**\n * Props for {@link ContractorProfile} in admin mode.\n *\n * @remarks\n * Renders the admin create/edit form. When `contractorId` is omitted, the form\n * creates a new contractor under `companyId`. When provided, it fetches and\n * updates the existing contractor.\n *\n * @public\n */\nexport interface ContractorProfileAdminProps extends BaseComponentInterface<'Contractor.Profile'> {\n  /** UUID of the company the contractor belongs to. */\n  companyId: string\n  /** Initial values for the contractor profile form fields. */\n  defaultValues?: Partial<ContractorDetailsFormData>\n  /** When `true` (the default), renders the admin create/edit form. */\n  isAdmin?: true\n  /** UUID of an existing contractor to edit. When omitted, the form creates a new contractor. */\n  contractorId?: string\n}\n\n/**\n * Props for {@link ContractorProfile} in self-onboarding mode.\n *\n * @remarks\n * Renders the contractor self-onboarding profile. The contractor must already\n * exist so its type (individual vs. business) can be resolved to determine\n * which fields to display.\n *\n * @public\n */\nexport interface ContractorProfileSelfOnboardingProps extends BaseComponentInterface<'Contractor.Profile'> {\n  /** UUID of the company the contractor belongs to. */\n  companyId: string\n  /** Initial values for the contractor profile form fields. */\n  defaultValues?: Partial<ContractorDetailsFormData>\n  /** When `false`, renders the contractor self-onboarding profile. */\n  isAdmin: false\n  /** UUID of the existing contractor completing self-onboarding. Required in self-onboarding mode. */\n  contractorId: string\n}\n\n/**\n * Props for {@link ContractorProfile}.\n *\n * @remarks\n * Discriminated by `isAdmin`. See {@link ContractorProfileAdminProps} and\n * {@link ContractorProfileSelfOnboardingProps} for the specific prop shapes.\n *\n * @public\n */\nexport type ContractorProfileProps =\n  ContractorProfileAdminProps | ContractorProfileSelfOnboardingProps\n\n/**\n * Form for creating or editing a contractor profile, supporting both individual and business contractor types.\n *\n * @remarks\n * In admin mode (the default), renders different field sets depending on the contractor type (individual\n * vs. business) and wage type (hourly vs. fixed), and exposes a self-onboarding toggle that invites the\n * contractor to complete their own setup. When `contractorId` is provided, the form fetches the existing\n * contractor and updates it on submit; otherwise it creates a new contractor under `companyId`.\n *\n * When `isAdmin` is `false`, renders the contractor self-onboarding profile instead: it resolves the\n * existing contractor's type and presents the individual (name + SSN) or business (business name + EIN)\n * fields for the contractor to complete.\n *\n * @events\n * | Event | Description | Data |\n * | ----- | ----------- | ---- |\n * | `contractor/created` | A new contractor was created successfully. | The created contractor entity |\n * | `contractor/updated` | An existing contractor was updated successfully. | The updated contractor entity |\n * | `contractor/profile/done` | The contractor profile step finished. | `{ contractorId: string, onboardingStatus?: string, selfOnboarding: boolean }` |\n *\n * @param props - See {@link ContractorProfileProps}.\n * @returns The rendered contractor profile form.\n * @public\n */\nexport function ContractorProfile(props: ContractorProfileProps) {\n  useComponentDictionary('Contractor.Profile', props.dictionary)\n  return (\n    <BaseBoundaries\n      componentName=\"Contractor.Profile\"\n      FallbackComponent={props.FallbackComponent}\n      LoaderComponent={props.LoaderComponent}\n    >\n      {props.isAdmin === false ? (\n        <SelfOnboardingContractorProfile\n          contractorId={props.contractorId}\n          onEvent={props.onEvent}\n          className={props.className}\n          LoaderComponent={props.LoaderComponent}\n        />\n      ) : (\n        <ContractorProfileRoot {...props} />\n      )}\n    </BaseBoundaries>\n  )\n}\n\nfunction ContractorProfileW9Warning({ contractorId }: { contractorId: string }) {\n  const hasSignedW9 = useContractorHasSignedW9(contractorId)\n  const { t } = useTranslation('Contractor.Profile')\n  const Components = useComponentContext()\n  if (!hasSignedW9) return null\n  return (\n    <Components.Alert status=\"warning\" disableScrollIntoView label={t('w9EditWarning.label')}>\n      <Components.Text>{t('w9EditWarning.body')}</Components.Text>\n    </Components.Alert>\n  )\n}\n\nfunction ContractorProfileRoot({\n  companyId,\n  contractorId,\n  defaultValues,\n  className,\n  onEvent,\n  LoaderComponent,\n}: ContractorProfileProps) {\n  useI18n('Contractor.Profile')\n\n  const resolvedDefaults = useMemo<Partial<ContractorDetailsFormData>>(\n    () => ({ type: ContractorType.Business, ...defaultValues }),\n    [defaultValues],\n  )\n\n  // Mirrors the Employee AdminProfile loop: SSN/EIN requiredness depends on the\n  // self-onboarding toggle, which lives in the form the hook creates. Seed from\n  // the create-mode default, then sync from the watched value (see the ready child).\n  const [selfOnboardingActive, setSelfOnboardingActive] = useState(\n    !contractorId && (resolvedDefaults.selfOnboarding ?? false),\n  )\n\n  const optionalFieldsToRequire = useMemo(\n    () => computeRequiredFields(selfOnboardingActive),\n    [selfOnboardingActive],\n  )\n\n  const contractor = useContractorDetailsForm(\n    contractorId\n      ? {\n          companyId,\n          contractorId,\n          defaultValues: resolvedDefaults,\n          optionalFieldsToRequire,\n        }\n      : {\n          companyId,\n          defaultValues: resolvedDefaults,\n          optionalFieldsToRequire,\n        },\n  )\n\n  if (contractor.isLoading) {\n    return (\n      <BaseLayout\n        isLoading\n        error={contractor.errorHandling.errors}\n        LoaderComponent={LoaderComponent}\n      />\n    )\n  }\n\n  return (\n    <ContractorProfileReady\n      contractor={contractor}\n      onEvent={onEvent}\n      className={className}\n      setSelfOnboardingActive={setSelfOnboardingActive}\n      LoaderComponent={LoaderComponent}\n    />\n  )\n}\n\ninterface ContractorProfileReadyProps {\n  contractor: UseContractorDetailsFormReady\n  onEvent: ContractorProfileProps['onEvent']\n  className?: string\n  setSelfOnboardingActive: (value: boolean) => void\n  LoaderComponent?: LoaderComponentType\n}\n\nfunction ContractorProfileReady({\n  contractor,\n  onEvent,\n  className,\n  setSelfOnboardingActive,\n  LoaderComponent,\n}: ContractorProfileReadyProps) {\n  const { t } = useTranslation('Contractor.Profile')\n  const Components = useComponentContext()\n\n  const watchedSelfOnboarding = useWatch({\n    control: contractor.form.hookFormInternals.formMethods.control,\n    name: 'selfOnboarding',\n  })\n\n  useEffect(() => {\n    setSelfOnboardingActive(watchedSelfOnboarding)\n  }, [watchedSelfOnboarding, setSelfOnboardingActive])\n\n  const { Fields } = contractor.form\n  const mode = contractor.status.mode\n\n  // SSN/EIN are hidden while collection is delegated to the contractor, but must\n  // reappear once they've finished so the admin can review/edit them.\n  const completedSelfOnboarding = hasCompletedSelfOnboarding(contractor.data.contractor)\n  const showTaxId = !watchedSelfOnboarding || completedSelfOnboarding\n\n  const handleSubmit = async () => {\n    const result = await contractor.actions.onSubmit()\n    if (!result) return\n\n    onEvent(\n      result.mode === 'create'\n        ? componentEvents.CONTRACTOR_CREATED\n        : componentEvents.CONTRACTOR_UPDATED,\n      result.data,\n    )\n\n    onEvent(componentEvents.CONTRACTOR_PROFILE_DONE, {\n      contractorId: result.data.uuid,\n      onboardingStatus: result.data.onboardingStatus,\n      selfOnboarding: watchedSelfOnboarding && !completedSelfOnboarding,\n    })\n  }\n\n  return (\n    <section className={classNames(styles.root, className)}>\n      <BaseLayout error={contractor.errorHandling.errors} LoaderComponent={LoaderComponent}>\n        <SDKFormProvider formHookResult={contractor}>\n          <Form onSubmit={() => void handleSubmit()}>\n            <Flex flexDirection=\"column\" gap={20} alignItems=\"stretch\">\n              {mode === 'update' && contractor.data.contractor?.uuid && (\n                <ContractorProfileW9Warning contractorId={contractor.data.contractor.uuid} />\n              )}\n              <header>\n                <Flex flexDirection=\"column\" gap={4}>\n                  <Components.Heading as=\"h2\">{t('title')}</Components.Heading>\n                  <Components.Text variant=\"supporting\">{t('subtitle')}</Components.Text>\n                </Flex>\n              </header>\n\n              {(Fields.SelfOnboarding || Fields.Email) && (\n                <Components.Box>\n                  <Grid gap={16}>\n                    {Fields.SelfOnboarding && (\n                      <Fields.SelfOnboarding\n                        label={t('fields.selfOnboarding.label')}\n                        description={t('fields.selfOnboarding.description')}\n                      />\n                    )}\n\n                    {Fields.Email && (\n                      <Fields.Email\n                        label={t('fields.email.label')}\n                        validationMessages={{\n                          REQUIRED: t('validations.email'),\n                          INVALID_EMAIL: t('validations.emailFormat'),\n                        }}\n                      />\n                    )}\n                  </Grid>\n                </Components.Box>\n              )}\n\n              <Fields.Type label={t('fields.contractorType.label')} />\n\n              {Fields.FirstName && Fields.LastName && (\n                <>\n                  <Grid gridTemplateColumns={{ base: '1fr', medium: '1fr 1fr' }} gap={16}>\n                    <Fields.FirstName\n                      label={t('fields.firstName.label')}\n                      validationMessages={{\n                        REQUIRED: t('validations.firstName'),\n                        INVALID_NAME: t('validations.firstNameFormat'),\n                      }}\n                    />\n                    {Fields.MiddleInitial && (\n                      <Fields.MiddleInitial label={t('fields.middleInitial.label')} />\n                    )}\n                  </Grid>\n                  <Fields.LastName\n                    label={t('fields.lastName.label')}\n                    validationMessages={{\n                      REQUIRED: t('validations.lastName'),\n                      INVALID_NAME: t('validations.lastNameFormat'),\n                    }}\n                  />\n                  {Fields.Ssn && showTaxId && (\n                    <Fields.Ssn\n                      label={t('fields.ssn.label')}\n                      validationMessages={{\n                        INVALID_SSN: t('validations.ssnFormat'),\n                        REQUIRED: t('validations.ssn'),\n                      }}\n                    />\n                  )}\n                </>\n              )}\n\n              {Fields.BusinessName && (\n                <>\n                  <Fields.BusinessName\n                    label={t('fields.businessName.label')}\n                    validationMessages={{ REQUIRED: t('validations.businessName') }}\n                  />\n                  {Fields.Ein && showTaxId && (\n                    <Fields.Ein\n                      label={t('fields.ein.label')}\n                      validationMessages={{\n                        INVALID_EIN: t('validations.einFormat'),\n                        REQUIRED: t('validations.ein'),\n                      }}\n                    />\n                  )}\n                </>\n              )}\n\n              <Fields.WageType label={t('fields.wageType.label')} />\n\n              {Fields.HourlyRate && (\n                <Fields.HourlyRate\n                  label={t('fields.hourlyRate.label')}\n                  min={0}\n                  format=\"currency\"\n                  validationMessages={{\n                    REQUIRED: t('validations.hourlyRate'),\n                    MAX_HOURLY_RATE: t('validations.hourlyRateMax'),\n                  }}\n                />\n              )}\n\n              <Fields.StartDate\n                label={t('fields.startDate.label')}\n                description={t('fields.startDate.description')}\n                validationMessages={{ REQUIRED: t('validations.startDate') }}\n              />\n            </Flex>\n\n            <Flex gap={12} justifyContent=\"flex-end\">\n              <Components.Button\n                type=\"submit\"\n                variant=\"primary\"\n                isDisabled={contractor.status.isPending}\n              >\n                {contractor.status.isPending\n                  ? mode === 'create'\n                    ? t('buttons.creating')\n                    : t('buttons.updating')\n                  : mode === 'create'\n                    ? t('buttons.create')\n                    : t('buttons.update')}\n              </Components.Button>\n            </Flex>\n          </Form>\n        </SDKFormProvider>\n      </BaseLayout>\n    </section>\n  )\n}\n"],"names":["hasCompletedSelfOnboarding","contractor","ContractorOnboardingStatus","computeRequiredFields","selfOnboardingActive","base","ContractorProfile","props","useComponentDictionary","jsx","BaseBoundaries","SelfOnboardingContractorProfile","ContractorProfileRoot","ContractorProfileW9Warning","contractorId","hasSignedW9","useContractorHasSignedW9","t","useTranslation","Components","useComponentContext","companyId","defaultValues","className","onEvent","LoaderComponent","useI18n","resolvedDefaults","useMemo","ContractorType","setSelfOnboardingActive","useState","optionalFieldsToRequire","useContractorDetailsForm","BaseLayout","ContractorProfileReady","watchedSelfOnboarding","useWatch","useEffect","Fields","mode","completedSelfOnboarding","showTaxId","handleSubmit","result","componentEvents","classNames","styles","SDKFormProvider","jsxs","Form","Flex","Grid","Fragment"],"mappings":"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"}

package/dist/components/Contractor/Profile/shared/useContractorDetailsForm/contractorDetailsSchema.d.ts

@@ -31,6 +31,7 @@ export declare const ContractorDetailsErrorCodes: {
     readonly INVALID_EMAIL: "INVALID_EMAIL";
     readonly INVALID_SSN: "INVALID_SSN";
     readonly INVALID_EIN: "INVALID_EIN";
+    readonly MAX_HOURLY_RATE: "MAX_HOURLY_RATE";
 };
 /**
  * Union of validation error code strings emitted by the contractor details